@maizzle/framework 6.0.0-rc.6 → 6.0.0-rc.8

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, Camera, FileCode, FileText, Code, BookText, MailQuestion } from 'lucide-vue-next'
+import { toBlob } from 'html-to-image'
 import logoUrl from '@/logo.svg'
 import logoGradientUrl from '@/logo-gradient.svg'
 import { Kbd } from '@/components/ui/kbd'
@@ -21,6 +22,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
+  CommandShortcut,
 } from '@/components/ui/command'
 import {
   Sidebar,
@@ -36,7 +38,6 @@ import {
   SidebarMenuButton,
   SidebarProvider,
   SidebarTrigger,
-  SidebarInput,
 } from '@/components/ui/sidebar'
 
 
@@ -54,7 +55,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,6 +76,7 @@ const devicePresets: DevicePreset[] = [
 ]
 
 const selectedDevice = ref<DevicePreset | null>(null)
+const deviceMenuOpen = ref(false)
 const panelWidth = ref(0)
 const panelHeight = ref(0)
 const isDragging = ref(false)
@@ -104,14 +105,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 +127,68 @@ 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 = ''
+})
+
+const screenshotting = ref(false)
+
+async function copyScreenshot() {
+  commandOpen.value = false
+
+  const iframe = document.querySelector('iframe') as HTMLIFrameElement | null
+  const doc = iframe?.contentDocument
+  if (!doc?.body) return
+
+  screenshotting.value = true
+
+  try {
+    const blob = await toBlob(doc.body, {
+      width: doc.body.scrollWidth,
+      height: doc.body.scrollHeight,
+    })
+
+    if (blob) {
+      await navigator.clipboard.write([
+        new ClipboardItem({ 'image/png': blob })
+      ])
+    }
+  } finally {
+    screenshotting.value = false
+  }
+}
+
+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 +203,7 @@ const commandGrouped = computed(() => {
   return groups
 })
 
+
 function getFileName(path: string) {
   return path.split('/').pop() || path
 }
@@ -155,6 +213,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()
@@ -171,6 +234,29 @@ function onKeydown(e: KeyboardEvent) {
   if (e.key === '/' && !isInputFocused()) {
     e.preventDefault()
     commandOpen.value = true
+    return
+  }
+
+  // Copy shortcuts (Cmd on Mac, Alt on Win/Linux)
+  if ((isMac ? e.metaKey : e.altKey) && !e.shiftKey && isPreviewRoute.value) {
+    switch (e.key.toLowerCase()) {
+      case 's':
+        e.preventDefault()
+        copyScreenshot()
+        return
+      case 'c':
+        e.preventDefault()
+        copyHtml()
+        return
+      case 'p':
+        e.preventDefault()
+        copyPlaintext()
+        return
+      case 'u':
+        e.preventDefault()
+        copySource()
+        return
+    }
   }
 }
 
@@ -181,8 +267,18 @@ 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
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeydown)
+  window.addEventListener('blur', onWindowBlur)
+})
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeydown)
+  window.removeEventListener('blur', onWindowBlur)
+})
 </script>
 
 <template>
@@ -193,27 +289,15 @@ 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="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>
       </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 +341,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,31 +359,32 @@ 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 }}
           </span>
-          <DropdownMenu v-if="isPreviewRoute">
+          <DropdownMenu v-if="isPreviewRoute" 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>
@@ -316,31 +394,89 @@ onUnmounted(() => document.removeEventListener('keydown', onKeydown))
       <!-- 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:is-dragging="isDragging" v-model:is-full-size="isFullSize" @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..." />
+    <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>
-        <CommandEmpty>No emails found.</CommandEmpty>
-        <CommandGroup v-for="(items, dir) in commandGrouped" :key="dir" :heading="String(dir)">
+        <CommandEmpty>No results found.</CommandEmpty>
+
+        <!-- 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="Screenshot"
+            @select="copyScreenshot"
           >
-            <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>
+            <Camera class="size-3 shrink-0 opacity-50" />
+            <span>Screenshot</span>
+            <CommandShortcut>{{ isMac ? '⌘' : 'ALT+' }}S</CommandShortcut>
+          </CommandItem>
+          <CommandItem
+            value="HTML"
+            @select="copyHtml"
+          >
+            <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>
+            </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,7 +484,7 @@ 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>

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/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>

package/dist/server/ui/components/ui/dialog/DialogOverlay.vue

@@ -4,18 +4,26 @@ import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
 import { DialogOverlay } from "reka-ui"
 import { cn } from "@/lib/utils"
+import stripesUrl from '@/stripes.svg'
 
 const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = reactiveOmit(props, "class")
+
+const stripeBg = {
+  backgroundImage: `url(${stripesUrl})`,
+  backgroundRepeat: 'repeat',
+  backgroundAttachment: 'fixed',
+}
 </script>
 
 <template>
   <DialogOverlay
     data-slot="dialog-overlay"
     v-bind="delegatedProps"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-white/80', props.class)"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-[1px]', props.class)"
   >
+    <div class="absolute inset-0 opacity-2 dark:opacity-3" :style="stripeBg" />
     <slot />
   </DialogOverlay>
 </template>

package/dist/server/ui/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwardedProps"
-    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="cn('focus:bg-accent dark:focus:bg-white/10 focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
   >
     <slot />
   </DropdownMenuItem>

package/dist/server/ui/components/ui/scroll-area/ScrollBar.vue

@@ -26,7 +26,7 @@ const delegatedProps = reactiveOmit(props, "class")
   >
     <ScrollAreaThumb
       data-slot="scroll-area-thumb"
-      class="bg-border relative flex-1 rounded-full"
+      class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 relative flex-1 rounded-full transition-colors"
     />
   </ScrollAreaScrollbar>
 </template>

package/dist/server/ui/components/ui/sheet/SheetContent.vue

@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DialogContent
       data-slot="sheet-content"
       :class="cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-200 data-[state=open]:duration-200',
         side === 'right'
           && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
         side === 'left'

package/dist/server/ui/components/ui/sheet/SheetOverlay.vue

@@ -4,18 +4,26 @@ import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
 import { DialogOverlay } from "reka-ui"
 import { cn } from "@/lib/utils"
+import stripesUrl from '@/stripes.svg'
 
 const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = reactiveOmit(props, "class")
+
+const stripeBg = {
+  backgroundImage: `url(${stripesUrl})`,
+  backgroundRepeat: 'repeat',
+  backgroundAttachment: 'fixed',
+}
 </script>
 
 <template>
   <DialogOverlay
     data-slot="sheet-overlay"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:duration-200 data-[state=open]:duration-200 fixed inset-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-[1px]', props.class)"
     v-bind="delegatedProps"
   >
+    <div class="absolute inset-0 opacity-2 dark:opacity-3" :style="stripeBg" />
     <slot />
   </DialogOverlay>
 </template>

package/dist/server/ui/components/ui/sidebar/Sidebar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { SidebarProps } from "."
+import { watch } from "vue"
+import { useRoute } from "vue-router"
 import { cn } from "@/lib/utils"
 import { Sheet, SheetContent } from '@/components/ui/sheet'
 import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
@@ -17,7 +19,12 @@ const props = withDefaults(defineProps<SidebarProps>(), {
   collapsible: "offcanvas",
 })
 
+const route = useRoute()
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+watch(() => route.path, () => {
+  if (isMobile.value) setOpenMobile(false)
+})
 </script>
 
 <template>
@@ -36,7 +43,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
       data-slot="sidebar"
       data-mobile="true"
       :side="side"
-      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      class="bg-sidebar! text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
       :style="{
         '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
       }"