@maizzle/framework 6.0.0-rc.8 → 6.0.0

package/dist/server/ui/App.vue

@@ -1,8 +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, Search, Camera, FileCode, FileText, Code, BookText, MailQuestion } from 'lucide-vue-next'
-import { toBlob } from 'html-to-image'
+import { Monitor, CodeXml, Smartphone, ChevronDown, ArrowUp, ArrowDown, CornerDownLeft, Check, Search, FileCode, FileText, Code, BookText, MailQuestion, Moon, Sun } from '@lucide/vue'
+import SidebarClose from '@/components/SidebarClose.vue'
 import logoUrl from '@/logo.svg'
 import logoGradientUrl from '@/logo-gradient.svg'
 import { Kbd } from '@/components/ui/kbd'
@@ -24,6 +24,7 @@ import {
   CommandList,
   CommandShortcut,
 } from '@/components/ui/command'
+import { useFilter } from 'reka-ui'
 import {
   Sidebar,
   SidebarContent,
@@ -51,7 +52,13 @@ const route = useRoute()
 
 watchEffect(() => {
   const slug = route.path === '/' ? '' : route.path.split('/').pop()
-  document.title = slug ? `Maizzle Dev - ${slug}.vue` : 'Maizzle Dev'
+  if (!slug) {
+    document.title = 'Maizzle Dev'
+    return
+  }
+  const tpl = templates.value.find(t => t.href === route.path)
+  const ext = tpl?.path.endsWith('.md') ? '.md' : '.vue'
+  document.title = `Maizzle Dev - ${slug}${ext}`
 })
 
 const templates = ref<Template[]>([])
@@ -77,8 +84,13 @@ 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)
@@ -88,6 +100,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')
 })
@@ -136,32 +173,6 @@ 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
@@ -203,6 +214,19 @@ 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
@@ -225,12 +249,6 @@ function onKeydown(e: KeyboardEvent) {
     return
   }
 
-  if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
-    e.preventDefault()
-    sidebarOpen.value = !sidebarOpen.value
-    return
-  }
-
   if (e.key === '/' && !isInputFocused()) {
     e.preventDefault()
     commandOpen.value = true
@@ -240,10 +258,6 @@ function onKeydown(e: KeyboardEvent) {
   // 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()
@@ -271,6 +285,11 @@ function onWindowBlur() {
   deviceMenuOpen.value = false
 }
 
+function toggleDarkMode() {
+  commandOpen.value = false
+  darkMode.value = !darkMode.value
+}
+
 onMounted(() => {
   document.addEventListener('keydown', onKeydown)
   window.addEventListener('blur', onWindowBlur)
@@ -289,13 +308,14 @@ onUnmounted(() => {
           <img :src="logoUrl" alt="Maizzle" class="h-4 dark:hidden">
           <img :src="logoGradientUrl" alt="Maizzle" class="hidden h-4 dark:block">
         </RouterLink>
-        <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" />
+        <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 text-gray-500 dark:text-gray-300" :stroke-width="1" />
           <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>
 
       <SidebarContent>
@@ -319,10 +339,7 @@ onUnmounted(() => {
                     :is-active="isActive(t.href)"
                   >
                     <RouterLink :to="t.href" class="truncate">
-                      <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 class="mz-tpl-icon size-4 shrink-0 opacity-70" :class="t.path.endsWith('.md') ? 'mz-tpl-icon-md' : 'mz-tpl-icon-vue'" />
                       <span class="truncate">{{ t.name }}</span>
                     </RouterLink>
                   </SidebarMenuButton>
@@ -361,9 +378,26 @@ onUnmounted(() => {
             v-if="isPreviewRoute && (!isFullSize || selectedDevice) && panelWidth"
             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" v-model:open="deviceMenuOpen" :modal="false">
+          <div v-if="isPreviewRoute" class="flex items-center gap-1">
+            <DropdownMenu v-model:open="deviceMenuOpen" :modal="false">
             <DropdownMenuTrigger as-child>
               <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" />
@@ -387,38 +421,43 @@ onUnmounted(() => {
                 <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" :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" />
+          <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="Command palette" description="Run commands or search emails">
       <CommandInput v-model="commandSearch" placeholder="Type a command or find an email..." />
-      <CommandList>
+      <CommandList class="max-h-[400px]">
         <CommandEmpty>No results found.</CommandEmpty>
 
-        <!-- Copy to clipboard commands -->
-        <CommandGroup v-if="isPreviewRoute" heading="Copy to clipboard">
+        <!-- Preview commands -->
+        <CommandGroup v-if="isPreviewRoute && viewMode === 'preview'" heading="Preview">
           <CommandItem
-            value="Screenshot"
-            @select="copyScreenshot"
+            :value="darkMode ? 'Disable dark mode' : 'Emulate dark mode'"
+            @select="toggleDarkMode"
           >
-            <Camera class="size-3 shrink-0 opacity-50" />
-            <span>Screenshot</span>
-            <CommandShortcut>{{ isMac ? '⌘' : 'ALT+' }}S</CommandShortcut>
+            <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
             value="HTML"
             @select="copyHtml"
           >
-            <FileCode class="size-3 shrink-0 opacity-50" />
+            <FileCode class="size-3 shrink-0 opacity-70" :stroke-width="1" />
             <span>HTML</span>
             <CommandShortcut>{{ isMac ? '⌘' : 'ALT+' }}C</CommandShortcut>
           </CommandItem>
@@ -426,7 +465,7 @@ onUnmounted(() => {
             value="Plaintext"
             @select="copyPlaintext"
           >
-            <FileText class="size-3 shrink-0 opacity-50" />
+            <FileText class="size-3 shrink-0 opacity-70" :stroke-width="1" />
             <span>Plaintext</span>
             <CommandShortcut>{{ isMac ? '⌘' : 'ALT+' }}P</CommandShortcut>
           </CommandItem>
@@ -434,7 +473,7 @@ onUnmounted(() => {
             value="Vue source"
             @select="copySource"
           >
-            <Code class="size-3 shrink-0 opacity-50" />
+            <Code class="size-3 shrink-0 opacity-70" :stroke-width="1" />
             <span>Vue source</span>
             <CommandShortcut>{{ isMac ? '⌘' : 'ALT+' }}U</CommandShortcut>
           </CommandItem>
@@ -446,14 +485,14 @@ onUnmounted(() => {
             value="Documentation"
             @select="openExternal('https://maizzle.com')"
           >
-            <BookText class="size-3 shrink-0 opacity-50" />
+            <BookText class="size-3 shrink-0 opacity-70" :stroke-width="1" />
             <span>Documentation</span>
           </CommandItem>
           <CommandItem
             value="Can I Email"
             @select="openExternal('https://www.caniemail.com')"
           >
-            <MailQuestion class="size-3 shrink-0 opacity-50" />
+            <MailQuestion class="size-3 shrink-0 opacity-70" :stroke-width="1" />
             <span>Can I Email</span>
           </CommandItem>
         </CommandGroup>
@@ -467,11 +506,9 @@ onUnmounted(() => {
               :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 class="mz-tpl-icon size-3 shrink-0 opacity-70" :class="t.path.endsWith('.md') ? 'mz-tpl-icon-md' : 'mz-tpl-icon-vue'" />
               <span>{{ getFileName(t.path) }}</span>
+              <span class="sr-only">{{ ' ' + t.path.split('/').join(' ') }}</span>
             </CommandItem>
           </CommandGroup>
         </template>
@@ -490,6 +527,9 @@ onUnmounted(() => {
           <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'
+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

@@ -2,7 +2,7 @@
 import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
-import { Check } from "lucide-vue-next"
+import { Check } from "@lucide/vue"
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
 import { cn } from "@/lib/utils"
 

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/CommandInput.vue

@@ -3,7 +3,7 @@ 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 { Search } from "@lucide/vue"
 import { ListboxFilter, useForwardProps } from "reka-ui"
 import { cn } from "@/lib/utils"
 import { useCommand } from "."
@@ -45,7 +45,7 @@ watch(() => filterState.search, (val) => {
     data-slot="command-input-wrapper"
     class="flex h-9 items-center gap-2 border-b px-3"
   >
-    <Search class="size-4 shrink-0 opacity-50" />
+    <Search class="size-4 shrink-0 opacity-70" :stroke-width="1" />
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"

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

@@ -2,7 +2,7 @@
 import type { DialogContentEmits, DialogContentProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
+import { X } from "@lucide/vue"
 import {
   DialogClose,
   DialogContent,

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

@@ -2,7 +2,7 @@
 import type { DialogContentEmits, DialogContentProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
+import { X } from "@lucide/vue"
 import {
   DialogClose,
   DialogContent,

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

@@ -2,7 +2,7 @@
 import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
-import { Check } from "lucide-vue-next"
+import { Check } from "@lucide/vue"
 import {
   DropdownMenuCheckboxItem,
   DropdownMenuItemIndicator,

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

@@ -2,7 +2,7 @@
 import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
-import { Circle } from "lucide-vue-next"
+import { Circle } from "@lucide/vue"
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,

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

@@ -2,7 +2,7 @@
 import type { DropdownMenuSubTriggerProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
-import { ChevronRight } from "lucide-vue-next"
+import { ChevronRight } from "@lucide/vue"
 import {
   DropdownMenuSubTrigger,
   useForwardProps,

package/dist/server/ui/components/ui/input/Input.vue

@@ -24,7 +24,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
     v-model="modelValue"
     data-slot="input"
     :class="cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'file:text-foreground placeholder:text-gray-400 dark:placeholder:text-gray-500 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
       'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
       'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
       props.class,

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

@@ -2,7 +2,7 @@
 import type { DialogContentEmits, DialogContentProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
+import { X } from "@lucide/vue"
 import {
   DialogClose,
   DialogContent,

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { PanelRightClose, PanelRightOpen } from "lucide-vue-next"
+import { PanelRightClose, PanelRightOpen } from "@lucide/vue"
 import { cn } from "@/lib/utils"
 import { Button } from '@/components/ui/button'
 import { useSidebar } from "./utils"
@@ -21,7 +21,7 @@ const { isMobile, open, toggleSidebar } = useSidebar()
     :class="cn('h-7 w-7 hover:bg-transparent', props.class)"
     @click="toggleSidebar"
   >
-    <svg v-if="isMobile" class="size-4 dark:text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><line x1="3" y1="7" x2="21" y2="7" /><line x1="3" y1="12" x2="15" y2="12" /><line x1="3" y1="17" x2="18" y2="17" /></svg>
+    <PanelRightClose v-if="isMobile" class="size-4 dark:text-gray-400" :stroke-width="1" />
     <PanelRightOpen v-else-if="open" class="dark:text-gray-400" :stroke-width="1" />
     <PanelRightClose v-else class="dark:text-gray-400" :stroke-width="1" />
     <span class="sr-only">Toggle Sidebar</span>

package/dist/server/ui/components/ui/tags-input/TagsInputInput.vue

@@ -13,5 +13,5 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1 placeholder:text-gray-400 dark:placeholder:text-gray-500', props.class)" />
 </template>

package/dist/server/ui/components/ui/tags-input/TagsInputItemDelete.vue

@@ -3,7 +3,7 @@ import type { TagsInputItemDeleteProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
 import { TagsInputItemDelete, useForwardProps } from "reka-ui"
-import { X } from "lucide-vue-next"
+import { X } from "@lucide/vue"
 import { cn } from "@/lib/utils"
 
 const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()

package/dist/server/ui/lib/emulated-dark-mode.ts

@@ -0,0 +1,146 @@
+import { parse, converter, formatRgb } from 'culori'
+
+const toLch = converter('lch')
+
+type Mode = 'background' | 'foreground'
+
+/**
+ * CSS properties whose values contain colors we should invert, mapped to
+ * the inversion mode. Kebab-case for <style> decls; inline styles
+ * are handled via the same lookup after lowercasing.
+ */
+const styleProps = new Map<string, Mode>([
+  ['background', 'background'],
+  ['background-color', 'background'],
+  ['border', 'foreground'],
+  ['border-color', 'foreground'],
+  ['border-top', 'foreground'],
+  ['border-right', 'foreground'],
+  ['border-bottom', 'foreground'],
+  ['border-left', 'foreground'],
+  ['border-top-color', 'foreground'],
+  ['border-right-color', 'foreground'],
+  ['border-bottom-color', 'foreground'],
+  ['border-left-color', 'foreground'],
+  ['color', 'foreground'],
+  ['outline', 'foreground'],
+  ['outline-color', 'foreground'],
+])
+
+// Hex | color function with balanced-enough parens | bare word (possible named color).
+const COLOR_TOKEN = /#[a-f0-9]{3,8}\b|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\([^)]*\)|\b[a-z]{3,20}\b/gi
+
+// Words that look color-shaped but aren't — skip to avoid a wasted parse().
+const NON_COLOR_KEYWORDS = /^(?:none|transparent|inherit|initial|unset|revert|currentcolor|auto|normal|solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|thin|thick|medium|center|left|right|top|bottom|cover|contain|repeat|no-repeat|fixed|scroll|local|url|var|calc|linear|radial|conic|gradient)$/i
+
+function invertOne(color: string, mode: Mode): string {
+  try {
+    const parsed = parse(color)
+    if (!parsed) return color
+    const lch = toLch(parsed) as any
+    if (!lch || typeof lch.l !== 'number' || Number.isNaN(lch.l)) return color
+
+    if (mode === 'background' && lch.l >= 50) lch.l = 50 - (lch.l - 50) * 0.75
+    if (mode === 'foreground' && lch.l < 50)  lch.l = 50 - (lch.l - 50) * 0.75
+    if (typeof lch.c === 'number' && !Number.isNaN(lch.c)) lch.c *= 0.8
+
+    return formatRgb(lch) || color
+  } catch {
+    return color
+  }
+}
+
+function invertValue(value: string, mode: Mode): string {
+  return value.replace(COLOR_TOKEN, (tok) => {
+    if (NON_COLOR_KEYWORDS.test(tok)) return tok
+    if (!parse(tok)) return tok
+    return invertOne(tok, mode)
+  })
+}
+
+// Splits an inline style attr by `;` (safe — color functions use `,` not `;`).
+function invertInlineStyle(style: string): string {
+  return style.split(';').map((decl) => {
+    const i = decl.indexOf(':')
+    if (i === -1) return decl
+    const prop = decl.slice(0, i).trim().toLowerCase()
+    const mode = styleProps.get(prop)
+    if (!mode) return decl
+    return decl.slice(0, i + 1) + invertValue(decl.slice(i + 1), mode)
+  }).join(';')
+}
+
+function invertStyleTag(css: string): string {
+  try {
+    const sheet = new CSSStyleSheet()
+    sheet.replaceSync(css)
+    const walk = (rules: CSSRuleList) => {
+      for (const rule of Array.from(rules)) {
+        if (rule instanceof CSSStyleRule) {
+          const props = Array.from({ length: rule.style.length }, (_, i) => rule.style.item(i))
+          for (const prop of props) {
+            const mode = styleProps.get(prop.toLowerCase())
+            if (!mode) continue
+            const value = rule.style.getPropertyValue(prop)
+            const priority = rule.style.getPropertyPriority(prop)
+            rule.style.setProperty(prop, invertValue(value, mode), priority)
+          }
+        } else if ('cssRules' in rule) {
+          walk((rule as CSSGroupingRule).cssRules)
+        }
+      }
+    }
+    walk(sheet.cssRules)
+    return Array.from(sheet.cssRules).map(r => r.cssText).join('\n')
+  } catch {
+    return css
+  }
+}
+
+const ORIG_INLINE = 'data-maizzle-orig-style'
+const ORIG_STYLE_TAG = 'data-maizzle-orig-style-content'
+const APPLIED_FLAG = 'data-maizzle-dark-applied'
+
+function* walk(root: Node): Generator<Element> {
+  if (root.nodeType === 1) yield root as Element
+  for (const child of Array.from(root.childNodes)) yield* walk(child)
+}
+
+export function applyColorInversion(iframe: HTMLIFrameElement): void {
+  const doc = iframe.contentDocument
+  if (!doc || !doc.body || doc.body.hasAttribute(APPLIED_FLAG)) return
+
+  for (const el of walk(doc.documentElement)) {
+    const inline = el.getAttribute('style')
+    if (inline) {
+      el.setAttribute(ORIG_INLINE, inline)
+      el.setAttribute('style', invertInlineStyle(inline))
+    }
+    if (el.tagName === 'STYLE') {
+      const original = el.textContent ?? ''
+      el.setAttribute(ORIG_STYLE_TAG, original)
+      el.textContent = invertStyleTag(original)
+    }
+  }
+
+  doc.body.setAttribute(APPLIED_FLAG, '')
+}
+
+export function undoColorInversion(iframe: HTMLIFrameElement): void {
+  const doc = iframe.contentDocument
+  if (!doc || !doc.body || !doc.body.hasAttribute(APPLIED_FLAG)) return
+
+  for (const el of walk(doc.documentElement)) {
+    const origInline = el.getAttribute(ORIG_INLINE)
+    if (origInline !== null) {
+      el.setAttribute('style', origInline)
+      el.removeAttribute(ORIG_INLINE)
+    }
+    if (el.tagName === 'STYLE' && el.hasAttribute(ORIG_STYLE_TAG)) {
+      el.textContent = el.getAttribute(ORIG_STYLE_TAG) ?? ''
+      el.removeAttribute(ORIG_STYLE_TAG)
+    }
+  }
+
+  doc.body.removeAttribute(APPLIED_FLAG)
+}