feat: add hierarchical navigation

src/runtime/components/CommandPalette.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick } from 'vue'
 import { onKeyStroke, useMagicKeys, onClickOutside } from '@vueuse/core'
+import Icon from './elements/Icon.vue'
 
 interface CommandItem {
   id: string | number
   label: string
-  action: () => void
 }
 
+const emits = defineEmits(['update'])
+
 const props = withDefaults(defineProps<{
   items: CommandItem[]
   keyCombo?: string
@@ -49,9 +51,9 @@ const filteredItems = computed(() => {
 })
 
 function handleSelect(item: CommandItem) {
-  item.action()
   isOpen.value = false
   searchQuery.value = ''
+  emits('update', item.id)
 }
 
 onKeyStroke('ArrowDown', (e) => {
@@ -104,6 +106,10 @@ function scrollIntoView(index: number) {
 </script>
 
 <template>
+  <div
+    v-if="isOpen"
+    class="command-pallete-bg"
+  />
   <div
     v-if="isOpen"
     ref="paletteRef"
@@ -121,25 +127,10 @@ function scrollIntoView(index: number) {
           class="command-palette-input"
           @focus="isOpen = true"
         >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="18"
-          height="18"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="lucide lucide-search command-palette-icon"
-        >
-          <circle
-            cx="11"
-            cy="11"
-            r="8"
-          />
-          <path d="m21 21-4.3-4.3" />
-        </svg>
+        <Icon
+          name="search"
+          class="command-palette-icon"
+        />
       </div>
       <div
         ref="itemsRef"
@@ -163,11 +154,21 @@ function scrollIntoView(index: number) {
 </template>
 
 <style scoped>
+.command-pallete-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 40;
+}
+
 .command-palette {
   position: fixed;
-  top: 50%;
+  top: 25%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -20%);
   width: 100%;
   max-width: 600px;
   z-index: 50;

src/runtime/components/Story.vue

@@ -10,11 +10,10 @@
       >
         <slot name="title">
           <h2
-            v-if="title"
             class="story-title"
             :class="tvStory().title({ class: [classes?.title, storyClasses.title] })"
           >
-            {{ title }}
+            {{ title || story?.pascalName }}
           </h2>
         </slot>
         <slot name="actions">
@@ -23,7 +22,7 @@
             :class="tvStory().actions({ class: [classes?.actions, storyClasses.actions] })"
           >
             <DevOnly>
-              <OpenInEditorButton
+              <EditButton
                 @click="openInEditor"
               />
             </DevOnly>
@@ -50,11 +49,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useSlots } from 'vue'
 import type { VNode } from 'vue'
+import { computed, inject, useSlots } from 'vue'
 import { tv } from 'tailwind-variants'
-import type { ComponentSlotClasses, BedtimeStory } from '../../types/module'
+import type { BedtimeStory, ComponentSlotClasses } from '../../types/module'
 import Variant from './Variant.vue'
+import EditButton from './buttons/EditButton.vue'
 // @ts-expect-error resolved at runtime
 import { useRuntimeConfig } from '#imports'
 
@@ -119,17 +119,22 @@ const layout = computed(() => {
     }
 
     else if (width) {
-      // grid
-      if (width.endsWith('%')) {
-        const percent = Number.parseInt(width)
+      let w = String(width)
+
+      // proportional
+      if (w.endsWith('%')) {
+        const percent = Number.parseInt(w)
         layout.type = 'grid'
         layout.cols = Math.round(1 / (percent / 100))
       }
 
-      // wrap
-      else if (width.endsWith('px')) {
+      // fixed size
+      else {
+        if (!w.endsWith('px')) {
+          w += 'px'
+        }
         layout.type = 'wrap'
-        layout.width = width
+        layout.width = w
       }
     }
   }
@@ -176,48 +181,59 @@ async function openInEditor() {
     display: var(--story-header-display);
     margin-bottom: var(--story-header-margin-bottom);
     gap: var(--story-header-gap);
+
     & > * + * {
       flex-shrink: 0;
     }
   }
-}
 
-.story-content[data-layout="none"] {
-  & > .variant-container + .variant-container {
-    margin-top: 1.5rem; /* aldi space-y-4 */
+  .story-content[data-layout="none"] {
+    & > .variant-container + .variant-container {
+      margin-top: 1.5rem; /* aldi space-y-4 */
+    }
   }
-}
 
-.story-content[data-layout="grid"] {
-  --gap: 1.5rem;
-  --columns: v-bind('layout.cols');
-  --numGaps: calc(var(--columns) - 1);
-  --allGaps: calc(var(--numGaps) * var(--gap));
+  .story-content[data-layout="grid"] {
+    --gap: 1.5rem;
+    --columns: v-bind('layout.cols');
+    --numGaps: calc(var(--columns) - 1);
+    --allGaps: calc(var(--numGaps) * var(--gap));
 
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
 
-  .variant-container {
-    width: calc(
-      (100% - var(--allGaps)) / var(--columns)
-    );
+    .variant-container {
+      width: calc(
+        (100% - var(--allGaps)) / var(--columns)
+      );
+    }
   }
-}
 
-.story-content[data-layout="wrap"] {
-  --gap: 1.5rem;
+  .story-content[data-layout="wrap"] {
+    --gap: 1.5rem;
 
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
 
-  .variant-container {
-    width: v-bind('layout.width');
+    .variant-container {
+      flex-shrink: 0;
+      width: v-bind('layout.width');
+    }
   }
-}
 
-.story-content > .variant-container {
-  overflow: hidden;
+  .story-content {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .variant-container.stretch {
+    display: flex !important;
+    overflow: hidden;
+    height: 100%;
+    flex-direction: column;
+    flex-grow: 1;
+  }
 }
 </style>

src/runtime/components/Variant.vue

@@ -58,8 +58,8 @@
 import { inject, ref, watch } from 'vue'
 import { tv } from 'tailwind-variants'
 import type { ComponentSlotClasses, BedtimeStory } from '../../types/module'
-import CodeButton from './CodeButton.vue'
-import CopyButton from './CopyButton.vue'
+import CodeButton from './buttons/CodeButton.vue'
+import CopyButton from './buttons/CopyButton.vue'
 import TemplateView from './TemplateView.vue'
 // @ts-expect-error resolved at runtime
 import { useRoute, useRuntimeConfig } from '#imports'
@@ -128,6 +128,7 @@ watch(() => route.hash, (newHash) => {
     margin: var(--variant-content-margin);
     padding: var(--variant-content-padding);
     position: var(--variant-content-position);
+    background-color: var(--variant-content-bg-color);
   }
 
   .variant-content::after {

src/runtime/components/CodeButton.vue → src/runtime/components/buttons/CodeButton.vue

@@ -1,29 +1,22 @@
 <template>
   <button
-    class="code-button"
+    class="bt-button code-button"
     :class="{ active: model }"
     :title="model ? 'Hide code' : 'Show code'"
     @click="model = !model"
   >
-    <span class="code-icon">
-      <svg
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <polyline points="16 18 22 12 16 6" />
-        <polyline points="8 6 2 12 8 18" />
-      </svg>
+    <span class="code-icon bt-icon">
+      <Icon
+        name="code"
+        size="full"
+      />
     </span>
   </button>
 </template>
 
 <script setup lang="ts">
+import Icon from '../elements/Icon.vue'
+
 defineOptions({
   name: 'StoryCodeButton',
 })
@@ -35,7 +28,7 @@ const model = defineModel<boolean>()
 .code-button {
   width: 24px;
   height: 24px;
-  padding: 6px;
+  padding: 3px;
   background: #ffffff;
   border: 1px solid #e5e7eb;
   border-radius: 6px;