@maizzle/framework 6.0.0-rc.2 → 6.0.0-rc.20

package/dist/server/ui/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, watchEffect } from 'vue'
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
-import { Monitor, CodeXml, Smartphone, ChevronDown, ArrowUp, ArrowDown, CornerDownLeft, Check, X } from 'lucide-vue-next'
+import { Monitor, CodeXml, Smartphone, ChevronDown, ArrowUp, ArrowDown, CornerDownLeft, Check, Search, FileCode, FileText, Code, BookText, MailQuestion, Moon, Sun } from 'lucide-vue-next'
+import SidebarClose from '@/components/SidebarClose.vue'
 import logoUrl from '@/logo.svg'
 import logoGradientUrl from '@/logo-gradient.svg'
 import { Kbd } from '@/components/ui/kbd'
@@ -21,7 +22,9 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
+  CommandShortcut,
 } from '@/components/ui/command'
+import { useFilter } from 'reka-ui'
 import {
   Sidebar,
   SidebarContent,
@@ -36,7 +39,6 @@ import {
   SidebarMenuButton,
   SidebarProvider,
   SidebarTrigger,
-  SidebarInput,
 } from '@/components/ui/sidebar'
 
 
@@ -54,7 +56,6 @@ watchEffect(() => {
 })
 
 const templates = ref<Template[]>([])
-const search = ref('')
 const loading = ref(true)
 const viewMode = ref<'preview' | 'source'>('preview')
 const sidebarOpen = ref(localStorage.getItem('maizzle:sidebar') !== 'closed')
@@ -76,8 +77,14 @@ const devicePresets: DevicePreset[] = [
 ]
 
 const selectedDevice = ref<DevicePreset | null>(null)
+const deviceMenuOpen = ref(false)
+const darkMode = ref(false)
 const panelWidth = ref(0)
 const panelHeight = ref(0)
+const iframeWidth = ref<number | null>(null)
+const iframeHeight = ref<number | null>(null)
+const maxIframeWidth = ref(0)
+const maxIframeHeight = ref(0)
 const isDragging = ref(false)
 const isFullSize = ref(true)
 const resetKey = ref(0)
@@ -87,6 +94,31 @@ function selectDevice(device: DevicePreset) {
   viewMode.value = 'preview'
 }
 
+/**
+ * Writable proxies for the toolbar's size-indicator inputs. Display falls back
+ * to the measured panel size when the iframe dimension is null (the axis
+ * hasn't been explicitly set yet — e.g. user only dragged one axis).
+ * Setter rejects non-finite/non-positive values and clamps to
+ * [200, maxIframeWidth] / [100, maxIframeHeight] so users
+ * can't push the drag handles off-screen via the input.
+ */
+const widthInput = computed<number>({
+  get: () => Math.round(iframeWidth.value ?? panelWidth.value),
+  set: (v) => {
+    if (typeof v !== 'number' || !Number.isFinite(v) || v <= 0) return
+    const max = maxIframeWidth.value || v
+    iframeWidth.value = Math.max(200, Math.min(max, Math.round(v)))
+  },
+})
+const heightInput = computed<number>({
+  get: () => Math.round(iframeHeight.value ?? panelHeight.value),
+  set: (v) => {
+    if (typeof v !== 'number' || !Number.isFinite(v) || v <= 0) return
+    const max = maxIframeHeight.value || v
+    iframeHeight.value = Math.max(100, Math.min(max, Math.round(v)))
+  },
+})
+
 watch(sidebarOpen, (open) => {
   localStorage.setItem('maizzle:sidebar', open ? 'open' : 'closed')
 })
@@ -104,14 +136,9 @@ if ((import.meta as any).hot) {
 }
 
 const grouped = computed(() => {
-  const filtered = templates.value.filter(t =>
-    t.name.toLowerCase().includes(search.value.toLowerCase())
-    || t.path.toLowerCase().includes(search.value.toLowerCase())
-  )
-
   const groups: Record<string, Template[]> = {}
 
-  for (const t of filtered) {
+  for (const t of templates.value) {
     const parts = t.path.split('/')
     const dir = parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
     if (!groups[dir]) groups[dir] = []
@@ -131,7 +158,42 @@ const isPreviewRoute = computed(() => route.path !== '/')
 
 // Command palette
 const router = useRouter()
+const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent)
+const modKey = isMac ? '⌘' : 'Ctrl'
 const commandOpen = ref(false)
+const commandSearch = ref('')
+
+watch(commandOpen, (open) => {
+  if (!open) commandSearch.value = ''
+})
+
+
+async function copyHtml() {
+  commandOpen.value = false
+  const slug = route.params.template as string
+  if (!slug) return
+  const res = await fetch(`/__maizzle/render/${slug}`)
+  await navigator.clipboard.writeText(await res.text())
+}
+
+async function copyPlaintext() {
+  commandOpen.value = false
+  const slug = route.params.template as string
+  if (!slug) return
+  const res = await fetch(`/__maizzle/plaintext/${slug}`)
+  await navigator.clipboard.writeText(await res.text())
+}
+
+async function copySource() {
+  commandOpen.value = false
+  const slug = route.params.template as string
+  if (!slug) return
+  const res = await fetch(`/__maizzle/vue-source/${slug}`)
+  const html = await res.text()
+  const el = document.createElement('div')
+  el.innerHTML = html
+  await navigator.clipboard.writeText(el.textContent || '')
+}
 
 const commandGrouped = computed(() => {
   const groups: Record<string, Template[]> = {}
@@ -146,6 +208,20 @@ const commandGrouped = computed(() => {
   return groups
 })
 
+const { contains } = useFilter({ sensitivity: 'base' })
+
+const filteredTemplatesCount = computed(() => {
+  const tokens = commandSearch.value.split(/\s+/).filter(Boolean)
+  if (tokens.length === 0) return 0
+  let count = 0
+  for (const t of templates.value) {
+    const haystack = `${getFileName(t.path)} ${t.path.split('/').join(' ')}`
+    if (tokens.every(token => contains(haystack, token))) count++
+  }
+  return count
+})
+
+
 function getFileName(path: string) {
   return path.split('/').pop() || path
 }
@@ -155,6 +231,11 @@ function onCommandSelect(href: string) {
   router.push(href)
 }
 
+function openExternal(url: string) {
+  commandOpen.value = false
+  window.open(url, '_blank', 'noopener')
+}
+
 function onKeydown(e: KeyboardEvent) {
   if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
     e.preventDefault()
@@ -162,15 +243,28 @@ function onKeydown(e: KeyboardEvent) {
     return
   }
 
-  if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
+  if (e.key === '/' && !isInputFocused()) {
     e.preventDefault()
-    sidebarOpen.value = !sidebarOpen.value
+    commandOpen.value = true
     return
   }
 
-  if (e.key === '/' && !isInputFocused()) {
-    e.preventDefault()
-    commandOpen.value = true
+  // Copy shortcuts (Cmd on Mac, Alt on Win/Linux)
+  if ((isMac ? e.metaKey : e.altKey) && !e.shiftKey && isPreviewRoute.value) {
+    switch (e.key.toLowerCase()) {
+      case 'c':
+        e.preventDefault()
+        copyHtml()
+        return
+      case 'p':
+        e.preventDefault()
+        copyPlaintext()
+        return
+      case 'u':
+        e.preventDefault()
+        copySource()
+        return
+    }
   }
 }
 
@@ -181,8 +275,23 @@ function isInputFocused() {
   return tag === 'input' || tag === 'textarea' || (el as HTMLElement).isContentEditable
 }
 
-onMounted(() => document.addEventListener('keydown', onKeydown))
-onUnmounted(() => document.removeEventListener('keydown', onKeydown))
+function onWindowBlur() {
+  deviceMenuOpen.value = false
+}
+
+function toggleDarkMode() {
+  commandOpen.value = false
+  darkMode.value = !darkMode.value
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeydown)
+  window.addEventListener('blur', onWindowBlur)
+})
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeydown)
+  window.removeEventListener('blur', onWindowBlur)
+})
 </script>
 
 <template>
@@ -193,27 +302,16 @@ onUnmounted(() => document.removeEventListener('keydown', onKeydown))
           <img :src="logoUrl" alt="Maizzle" class="h-4 dark:hidden">
           <img :src="logoGradientUrl" alt="Maizzle" class="hidden h-4 dark:block">
         </RouterLink>
-        <SidebarTrigger class="-mr-1" />
+        <button class="hidden md:inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" @click="commandOpen = true">
+          <Search class="size-3.5" />
+          <kbd class="flex items-center gap-0.5 text-[10px] font-sans">
+            <span>{{ modKey }}</span>
+            <span class="text-gray-300 dark:text-gray-600">K</span>
+          </kbd>
+        </button>
+        <SidebarClose />
       </SidebarHeader>
 
-      <div class="px-3 pt-3 pb-1">
-        <div class="relative flex items-center">
-          <SidebarInput
-            v-model="search"
-            placeholder="Search emails..."
-            class="text-xs! pr-7"
-            @keydown.esc="search && (search = '')"
-          />
-          <button
-            v-if="search"
-            class="absolute right-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-            @click="search = ''"
-          >
-            <X class="size-3.5" />
-          </button>
-        </div>
-      </div>
-
       <SidebarContent>
         <ScrollArea class="flex-1">
           <SidebarGroup v-if="loading">
@@ -257,24 +355,17 @@ onUnmounted(() => document.removeEventListener('keydown', onKeydown))
     <SidebarInset>
       <!-- Header toolbar -->
       <header class="grid h-12 grid-cols-[1fr_auto_1fr] items-center border-b px-4">
-        <div>
-          <Transition
-            enter-from-class="opacity-0"
-            enter-active-class="transition-opacity duration-150 delay-200"
-            leave-active-class="transition-opacity duration-0"
-            leave-to-class="opacity-0"
-          >
-            <SidebarTrigger v-show="!sidebarOpen" />
-          </Transition>
+        <div class="flex items-center">
+          <SidebarTrigger />
         </div>
 
         <!-- View mode toggles (centered) -->
         <ToggleGroup v-if="isPreviewRoute" v-model="viewMode" type="single" variant="outline" size="sm">
           <ToggleGroupItem value="preview">
-            <Monitor class="size-4" />
+            <Monitor class="size-4 dark:text-gray-400" :stroke-width="1" />
           </ToggleGroupItem>
           <ToggleGroupItem value="source">
-            <CodeXml class="size-4" />
+            <CodeXml class="size-4 dark:text-gray-400" :stroke-width="1" />
           </ToggleGroupItem>
         </ToggleGroup>
         <div v-else />
@@ -282,65 +373,147 @@ onUnmounted(() => document.removeEventListener('keydown', onKeydown))
         <div class="flex items-center justify-end gap-3">
           <span
             v-if="isPreviewRoute && (!isFullSize || selectedDevice) && panelWidth"
-            class="text-xs font-medium tabular-nums text-gray-500 dark:text-gray-400 select-none"
+            class="hidden min-[430px]:inline text-xs font-medium tabular-nums text-gray-500 dark:text-gray-400 select-none"
           >
-            {{ panelWidth }} &times; {{ panelHeight }}
+            <input
+              v-model.number="widthInput"
+              type="number"
+              min="200"
+              :max="maxIframeWidth || undefined"
+              aria-label="Preview width"
+              class="bg-transparent border-0 outline-none p-0 m-0 text-inherit font-inherit text-center tabular-nums w-[4.5ch] focus:outline-none focus:ring-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            >
+            <button class="hover:text-gray-700 dark:hover:text-gray-300" @click="selectedDevice = null; isFullSize = true; viewMode = 'preview'; resetKey++">&times;</button>
+            <input
+              v-model.number="heightInput"
+              type="number"
+              min="100"
+              :max="maxIframeHeight || undefined"
+              aria-label="Preview height"
+              class="bg-transparent border-0 outline-none p-0 m-0 text-inherit font-inherit text-center tabular-nums w-[4.5ch] focus:outline-none focus:ring-0 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            >
           </span>
-          <DropdownMenu v-if="isPreviewRoute">
+          <div v-if="isPreviewRoute" class="flex items-center gap-1">
+            <DropdownMenu v-model:open="deviceMenuOpen" :modal="false">
             <DropdownMenuTrigger as-child>
-              <Button variant="outline" size="sm" class="gap-1.5">
-                <Smartphone class="size-4" />
+              <Button variant="ghost" size="sm" class="hidden min-[430px]:inline-flex gap-1.5 shadow-none border-none hover:bg-transparent">
+                <Smartphone class="size-4 dark:text-gray-400" :stroke-width="1" />
                 <span v-if="selectedDevice" class="text-xs">{{ selectedDevice.name }}</span>
-                <ChevronDown class="size-3 opacity-50" />
+                <ChevronDown class="size-3 opacity-50" :stroke-width="1" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem @click="selectedDevice = null; viewMode = 'preview'; resetKey++">
-                <Check v-if="!selectedDevice" class="size-3.5" />
-                <span :class="!selectedDevice ? '' : 'pl-5.5'">Responsive</span>
+            <DropdownMenuContent align="end" class="min-w-52 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md dark:border-white/10">
+              <DropdownMenuItem class="text-xs font-medium text-gray-600 dark:text-gray-400 focus:text-gray-900 dark:focus:text-gray-200" @click="selectedDevice = null; isFullSize = true; viewMode = 'preview'; resetKey++">
+                <Check v-if="!selectedDevice && isFullSize" class="size-3 text-gray-900 dark:text-gray-200" />
+                <span :class="[!selectedDevice && isFullSize ? 'text-gray-900 dark:text-gray-200' : 'pl-5']">Full size</span>
               </DropdownMenuItem>
               <DropdownMenuItem
                 v-for="device in devicePresets"
                 :key="device.name"
+                class="text-xs font-medium text-gray-600 dark:text-gray-400 focus:text-gray-900 dark:focus:text-gray-200"
                 @click="selectDevice(device)"
               >
-                <Check v-if="selectedDevice?.name === device.name" class="size-3.5" />
-                <span :class="selectedDevice?.name === device.name ? '' : 'pl-5.5'">{{ device.name }}</span>
-                <span class="ml-auto text-xs text-gray-500 dark:text-gray-400 tabular-nums">{{ device.width }}&times;{{ device.height }}</span>
+                <Check v-if="selectedDevice?.name === device.name" class="size-3 text-gray-900 dark:text-gray-200" />
+                <span :class="[selectedDevice?.name === device.name ? 'text-gray-900 dark:text-gray-200' : 'pl-5']">{{ device.name }}</span>
+                <span class="ml-auto text-[11px] text-gray-400 dark:text-gray-500 tabular-nums tracking-tight">{{ device.width }}&times;{{ device.height }}</span>
               </DropdownMenuItem>
             </DropdownMenuContent>
-          </DropdownMenu>
+            </DropdownMenu>
+          </div>
         </div>
       </header>
 
       <!-- Main content -->
       <div class="flex-1 overflow-hidden">
         <RouterView v-slot="{ Component }">
-          <component :is="Component" v-model:view-mode="viewMode" :device="selectedDevice" :reset-key="resetKey" v-model:panel-width="panelWidth" v-model:panel-height="panelHeight" v-model:is-dragging="isDragging" v-model:is-full-size="isFullSize" @clear-device="selectedDevice = null" />
+          <component :is="Component" v-model:view-mode="viewMode" :device="selectedDevice" :reset-key="resetKey" :templates="templates" v-model:panel-width="panelWidth" v-model:panel-height="panelHeight" v-model:iframe-width="iframeWidth" v-model:iframe-height="iframeHeight" v-model:max-iframe-width="maxIframeWidth" v-model:max-iframe-height="maxIframeHeight" v-model:is-dragging="isDragging" v-model:is-full-size="isFullSize" v-model:dark-mode="darkMode" @clear-device="selectedDevice = null; isFullSize = false" />
         </RouterView>
       </div>
     </SidebarInset>
 
-    <CommandDialog v-model:open="commandOpen" title="Search emails" description="Search and navigate to an email">
-      <CommandInput placeholder="Search emails..." />
-      <CommandList>
-        <CommandEmpty>No emails found.</CommandEmpty>
-        <CommandGroup v-for="(items, dir) in commandGrouped" :key="dir" :heading="String(dir)">
+    <CommandDialog v-model:open="commandOpen" title="Command palette" description="Run commands or search emails">
+      <CommandInput v-model="commandSearch" placeholder="Type a command or find an email..." />
+      <CommandList class="max-h-[400px]">
+        <CommandEmpty>No results found.</CommandEmpty>
+
+        <!-- Preview commands -->
+        <CommandGroup v-if="isPreviewRoute && viewMode === 'preview'" heading="Preview">
+          <CommandItem
+            :value="darkMode ? 'Disable dark mode' : 'Emulate dark mode'"
+            @select="toggleDarkMode"
+          >
+            <Sun v-if="darkMode" class="size-3 shrink-0 opacity-50" />
+            <Moon v-else class="size-3 shrink-0 opacity-50" />
+            <span>{{ darkMode ? 'Disable dark mode' : 'Emulate dark mode' }}</span>
+          </CommandItem>
+        </CommandGroup>
+
+        <!-- Copy to clipboard commands -->
+        <CommandGroup v-if="isPreviewRoute" heading="Copy to clipboard">
           <CommandItem
-            v-for="t in items"
-            :key="t.path"
-            :value="t.path"
-            @select="onCommandSelect(t.href)"
+            value="HTML"
+            @select="copyHtml"
           >
-            <svg class="size-3 shrink-0 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
-              <path d="M14 2v4a2 2 0 0 0 2 2h4" />
-            </svg>
-            <span>{{ getFileName(t.path) }}</span>
+            <FileCode class="size-3 shrink-0 opacity-50" />
+            <span>HTML</span>
+            <CommandShortcut>{{ isMac ? '⌘' : 'ALT+' }}C</CommandShortcut>
+          </CommandItem>
+          <CommandItem
+            value="Plaintext"
+            @select="copyPlaintext"
+          >
+            <FileText class="size-3 shrink-0 opacity-50" />
+            <span>Plaintext</span>
+            <CommandShortcut>{{ isMac ? '⌘' : 'ALT+' }}P</CommandShortcut>
+          </CommandItem>
+          <CommandItem
+            value="Vue source"
+            @select="copySource"
+          >
+            <Code class="size-3 shrink-0 opacity-50" />
+            <span>Vue source</span>
+            <CommandShortcut>{{ isMac ? '⌘' : 'ALT+' }}U</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+
+        <!-- Resources -->
+        <CommandGroup heading="Resources">
+          <CommandItem
+            value="Documentation"
+            @select="openExternal('https://maizzle.com')"
+          >
+            <BookText class="size-3 shrink-0 opacity-50" />
+            <span>Documentation</span>
+          </CommandItem>
+          <CommandItem
+            value="Can I Email"
+            @select="openExternal('https://www.caniemail.com')"
+          >
+            <MailQuestion class="size-3 shrink-0 opacity-50" />
+            <span>Can I Email</span>
           </CommandItem>
         </CommandGroup>
+
+        <!-- Templates -->
+        <template v-if="commandSearch">
+          <CommandGroup v-for="(items, dir) in commandGrouped" :key="dir" :heading="String(dir)">
+            <CommandItem
+              v-for="t in items"
+              :key="t.path"
+              :value="t.path"
+              @select="onCommandSelect(t.href)"
+            >
+              <svg class="size-3 shrink-0 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+                <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+              </svg>
+              <span>{{ getFileName(t.path) }}</span>
+              <span class="sr-only">{{ ' ' + t.path.split('/').join(' ') }}</span>
+            </CommandItem>
+          </CommandGroup>
+        </template>
       </CommandList>
-      <div class="flex items-center gap-4 border-t px-3 py-2 text-xs text-gray-500 dark:text-gray-400">
+      <div class="flex items-center gap-4 border-t px-3 py-2 text-xs text-gray-500 dark:text-gray-400 cursor-default select-none">
         <span class="inline-flex items-center gap-1">
           <Kbd><ArrowUp class="size-3" /></Kbd>
           <Kbd><ArrowDown class="size-3" /></Kbd>
@@ -348,12 +521,15 @@ onUnmounted(() => document.removeEventListener('keydown', onKeydown))
         </span>
         <span class="inline-flex items-center gap-1">
           <Kbd><CornerDownLeft class="size-3" /></Kbd>
-          Open
+          {{ commandSearch ? 'View' : 'Run' }}
         </span>
         <span class="inline-flex items-center gap-1">
           <Kbd>Esc</Kbd>
           Close
         </span>
+        <span v-if="commandSearch" class="ml-auto">
+          {{ filteredTemplatesCount }} {{ filteredTemplatesCount === 1 ? 'result' : 'results' }}
+        </span>
       </div>
     </CommandDialog>
   </SidebarProvider>

package/dist/server/ui/components/SidebarClose.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { PanelRightOpen } from 'lucide-vue-next'
+import { useSidebar } from '@/components/ui/sidebar'
+
+const { setOpenMobile } = useSidebar()
+</script>
+
+<template>
+  <button class="md:hidden text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" @click="setOpenMobile(false)">
+    <PanelRightOpen class="size-4" :stroke-width="1" />
+  </button>
+</template>

package/dist/server/ui/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-slot="slotProps"
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+         props.class)"
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
+    >
+      <slot v-bind="slotProps">
+        <Check class="size-3.5" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/dist/server/ui/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue"

package/dist/server/ui/components/ui/command/Command.vue

@@ -44,9 +44,12 @@ function filterItems() {
   filterState.filtered.groups = new Set()
   let itemCount = 0
 
+  // Tokenize the search by whitespace so segments match in any order
+  const tokens = filterState.search.split(/\s+/).filter(Boolean)
+
   // Check which items should be included
   for (const [id, value] of allItems.value) {
-    const score = contains(value, filterState.search)
+    const score = tokens.every(token => contains(value, token))
     filterState.filtered.items.set(id, score ? 1 : 0)
     if (score)
       itemCount++
@@ -80,6 +83,7 @@ provideCommandContext({
   <ListboxRoot
     data-slot="command"
     v-bind="forwarded"
+    highlight-on-hover
     :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
   >
     <slot />

package/dist/server/ui/components/ui/command/CommandDialog.vue

@@ -18,7 +18,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 <template>
   <Dialog v-slot="slotProps" v-bind="forwarded">
-    <DialogContent class="overflow-hidden p-0 ">
+    <DialogContent class="overflow-hidden p-0 shadow-2xl shadow-black/10 dark:shadow-black/40" :show-close-button="false">
       <DialogHeader class="sr-only">
         <DialogTitle>{{ title }}</DialogTitle>
         <DialogDescription>{{ description }}</DialogDescription>

package/dist/server/ui/components/ui/command/CommandInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ListboxFilterProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
+import { watch } from "vue"
 import { reactiveOmit } from "@vueuse/core"
 import { Search } from "lucide-vue-next"
 import { ListboxFilter, useForwardProps } from "reka-ui"
@@ -13,13 +14,30 @@ defineOptions({
 
 const props = defineProps<ListboxFilterProps & {
   class?: HTMLAttributes["class"]
+  modelValue?: string
 }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+}>()
+
+const delegatedProps = reactiveOmit(props, "class", "modelValue")
 
 const forwardedProps = useForwardProps(delegatedProps)
 
 const { filterState } = useCommand()
+
+// Sync external v-model → internal filter
+watch(() => props.modelValue, (val) => {
+  if (val !== undefined && val !== filterState.search) {
+    filterState.search = val
+  }
+})
+
+// Sync internal filter → external v-model
+watch(() => filterState.search, (val) => {
+  emit("update:modelValue", val)
+})
 </script>
 
 <template>

package/dist/server/ui/components/ui/command/CommandItem.vue

@@ -66,7 +66,7 @@ onUnmounted(() => {
     :id="id"
     ref="itemRef"
     data-slot="command-item"
-    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
     @select="() => {
       filterState.search = ''
     }"

package/dist/server/ui/components/ui/command/CommandList.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardProps(delegatedProps)
   <ListboxContent
     data-slot="command-list"
     v-bind="forwarded"
-    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto p-2', props.class)"
   >
     <div role="presentation">
       <slot />

package/dist/server/ui/components/ui/command/CommandShortcut.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <span
     data-slot="command-shortcut"
-    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+    :class="cn('ml-auto text-[10px] tracking-widest text-gray-400 dark:text-gray-500', props.class)"
   >
     <slot />
   </span>