@maizzle/framework 6.0.0-rc.12 → 6.0.0-rc.14

package/dist/server/sfc-utils.mjs

@@ -0,0 +1,184 @@
+import { existsSync } from "node:fs";
+import { basename, dirname, resolve } from "node:path";
+import { glob } from "tinyglobby";
+import { fileURLToPath } from "node:url";
+
+//#region src/server/sfc-utils.ts
+const __dirname = dirname(fileURLToPath(import.meta.url));
+function parseSfcBlocks(source) {
+	let template = null;
+	const styles = [];
+	const templateMatch = source.match(/<template\b[^>]*>([\s\S]*)<\/template>/);
+	if (templateMatch) {
+		const contentStart = source.indexOf(templateMatch[0]) + templateMatch[0].indexOf(templateMatch[1]);
+		const offset = source.slice(0, contentStart).split("\n").length - 1;
+		template = {
+			content: templateMatch[1],
+			offset
+		};
+	}
+	const styleRe = /<style\b([^>]*)>([\s\S]*?)<\/style>/g;
+	let m;
+	while ((m = styleRe.exec(source)) !== null) {
+		if (/\blang\s*=\s*["'](?!css)/i.test(m[1])) continue;
+		const contentStart = m.index + m[0].indexOf(m[2]);
+		const offset = source.slice(0, contentStart).split("\n").length - 1;
+		styles.push({
+			content: m[2],
+			offset
+		});
+	}
+	return {
+		template,
+		styles
+	};
+}
+/**
+* Standard HTML elements — anything not in this set is treated as a component.
+*/
+const HTML_ELEMENTS = new Set([
+	"a",
+	"abbr",
+	"address",
+	"area",
+	"article",
+	"aside",
+	"audio",
+	"b",
+	"base",
+	"bdi",
+	"bdo",
+	"blockquote",
+	"body",
+	"br",
+	"button",
+	"canvas",
+	"caption",
+	"cite",
+	"code",
+	"col",
+	"colgroup",
+	"data",
+	"datalist",
+	"dd",
+	"del",
+	"details",
+	"dfn",
+	"dialog",
+	"div",
+	"dl",
+	"dt",
+	"em",
+	"embed",
+	"fieldset",
+	"figcaption",
+	"figure",
+	"footer",
+	"form",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"head",
+	"header",
+	"hgroup",
+	"hr",
+	"html",
+	"i",
+	"iframe",
+	"img",
+	"input",
+	"ins",
+	"kbd",
+	"label",
+	"legend",
+	"li",
+	"link",
+	"main",
+	"map",
+	"mark",
+	"menu",
+	"meta",
+	"meter",
+	"nav",
+	"noscript",
+	"object",
+	"ol",
+	"optgroup",
+	"option",
+	"output",
+	"p",
+	"picture",
+	"pre",
+	"progress",
+	"q",
+	"rp",
+	"rt",
+	"ruby",
+	"s",
+	"samp",
+	"script",
+	"search",
+	"section",
+	"select",
+	"slot",
+	"small",
+	"source",
+	"span",
+	"strong",
+	"style",
+	"sub",
+	"summary",
+	"sup",
+	"table",
+	"tbody",
+	"td",
+	"template",
+	"textarea",
+	"tfoot",
+	"th",
+	"thead",
+	"time",
+	"title",
+	"tr",
+	"track",
+	"u",
+	"ul",
+	"var",
+	"video",
+	"wbr"
+]);
+function findComponentTags(templateContent) {
+	const tags = /* @__PURE__ */ new Set();
+	const pascalRe = /<([A-Z][a-zA-Z0-9]*)\b/g;
+	let m;
+	while ((m = pascalRe.exec(templateContent)) !== null) tags.add(m[1]);
+	const kebabRe = /<([a-z][a-z0-9]*(?:-[a-z0-9]+)+)\b/g;
+	while ((m = kebabRe.exec(templateContent)) !== null) if (!HTML_ELEMENTS.has(m[1])) tags.add(m[1]);
+	return [...tags];
+}
+async function buildComponentMap(root, componentDirs) {
+	const map = /* @__PURE__ */ new Map();
+	const dirs = [
+		resolve(__dirname, "../components"),
+		resolve(root, "components"),
+		...componentDirs
+	].filter((d) => existsSync(d));
+	for (const dir of dirs) {
+		const files = await glob(["**/*.vue"], {
+			cwd: dir,
+			absolute: true
+		});
+		for (const file of files) {
+			const name = basename(file, ".vue");
+			map.set(name.toLowerCase(), file);
+		}
+	}
+	return map;
+}
+
+//#endregion
+export { HTML_ELEMENTS, buildComponentMap, findComponentTags, parseSfcBlocks };
+//# sourceMappingURL=sfc-utils.mjs.map

package/dist/server/sfc-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sfc-utils.mjs","names":[],"sources":["../../src/server/sfc-utils.ts"],"sourcesContent":["import { existsSync } from 'node:fs'\nimport { resolve, dirname, basename } from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport { glob } from 'tinyglobby'\n\nconst __dirname = dirname(fileURLToPath(import.meta.url))\n\nexport interface SfcBlock {\n  content: string\n  offset: number\n}\n\nexport function parseSfcBlocks(source: string): { template: SfcBlock | null, styles: SfcBlock[] } {\n  let template: SfcBlock | null = null\n  const styles: SfcBlock[] = []\n\n  const templateMatch = source.match(/<template\\b[^>]*>([\\s\\S]*)<\\/template>/)\n  if (templateMatch) {\n    const contentStart = source.indexOf(templateMatch[0]) + templateMatch[0].indexOf(templateMatch[1])\n    const offset = source.slice(0, contentStart).split('\\n').length - 1\n    template = { content: templateMatch[1], offset }\n  }\n\n  const styleRe = /<style\\b([^>]*)>([\\s\\S]*?)<\\/style>/g\n  let m\n  while ((m = styleRe.exec(source)) !== null) {\n    // Skip preprocessor styles (scss, less, etc.) — caniemail only parses plain CSS\n    if (/\\blang\\s*=\\s*[\"'](?!css)/i.test(m[1])) continue\n\n    const contentStart = m.index + m[0].indexOf(m[2])\n    const offset = source.slice(0, contentStart).split('\\n').length - 1\n    styles.push({ content: m[2], offset })\n  }\n\n  return { template, styles }\n}\n\n/**\n * Standard HTML elements — anything not in this set is treated as a component.\n */\nexport const HTML_ELEMENTS = new Set([\n  'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base',\n  'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption',\n  'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del',\n  'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset',\n  'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5',\n  'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img',\n  'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'main', 'map',\n  'mark', 'menu', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol',\n  'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q',\n  'rp', 'rt', 'ruby', 's', 'samp', 'script', 'search', 'section', 'select',\n  'slot', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary',\n  'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th',\n  'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr',\n])\n\nexport function findComponentTags(templateContent: string): string[] {\n  const tags = new Set<string>()\n\n  // PascalCase tags like <Section>, <Button>\n  const pascalRe = /<([A-Z][a-zA-Z0-9]*)\\b/g\n  let m\n  while ((m = pascalRe.exec(templateContent)) !== null) {\n    tags.add(m[1])\n  }\n\n  // kebab-case tags like <my-component>\n  const kebabRe = /<([a-z][a-z0-9]*(?:-[a-z0-9]+)+)\\b/g\n  while ((m = kebabRe.exec(templateContent)) !== null) {\n    if (!HTML_ELEMENTS.has(m[1])) {\n      tags.add(m[1])\n    }\n  }\n\n  return [...tags]\n}\n\nexport async function buildComponentMap(root: string, componentDirs: string[]): Promise<Map<string, string>> {\n  const map = new Map<string, string>()\n\n  const dirs = [\n    resolve(__dirname, '../components'),\n    resolve(root, 'components'),\n    ...componentDirs,\n  ].filter(d => existsSync(d))\n\n  for (const dir of dirs) {\n    const files = await glob(['**/*.vue'], { cwd: dir, absolute: true })\n    for (const file of files) {\n      const name = basename(file, '.vue')\n      // Store lowercased for case-insensitive matching\n      map.set(name.toLowerCase(), file)\n    }\n  }\n\n  return map\n}\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,QAAQ,cAAc,OAAO,KAAK,IAAI,CAAC;AAOzD,SAAgB,eAAe,QAAmE;CAChG,IAAI,WAA4B;CAChC,MAAM,SAAqB,EAAE;CAE7B,MAAM,gBAAgB,OAAO,MAAM,yCAAyC;AAC5E,KAAI,eAAe;EACjB,MAAM,eAAe,OAAO,QAAQ,cAAc,GAAG,GAAG,cAAc,GAAG,QAAQ,cAAc,GAAG;EAClG,MAAM,SAAS,OAAO,MAAM,GAAG,aAAa,CAAC,MAAM,KAAK,CAAC,SAAS;AAClE,aAAW;GAAE,SAAS,cAAc;GAAI;GAAQ;;CAGlD,MAAM,UAAU;CAChB,IAAI;AACJ,SAAQ,IAAI,QAAQ,KAAK,OAAO,MAAM,MAAM;AAE1C,MAAI,4BAA4B,KAAK,EAAE,GAAG,CAAE;EAE5C,MAAM,eAAe,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG;EACjD,MAAM,SAAS,OAAO,MAAM,GAAG,aAAa,CAAC,MAAM,KAAK,CAAC,SAAS;AAClE,SAAO,KAAK;GAAE,SAAS,EAAE;GAAI;GAAQ,CAAC;;AAGxC,QAAO;EAAE;EAAU;EAAQ;;;;;AAM7B,MAAa,gBAAgB,IAAI,IAAI;CACnC;CAAK;CAAQ;CAAW;CAAQ;CAAW;CAAS;CAAS;CAAK;CAClE;CAAO;CAAO;CAAc;CAAQ;CAAM;CAAU;CAAU;CAC9D;CAAQ;CAAQ;CAAO;CAAY;CAAQ;CAAY;CAAM;CAC7D;CAAW;CAAO;CAAU;CAAO;CAAM;CAAM;CAAM;CAAS;CAC9D;CAAc;CAAU;CAAU;CAAQ;CAAM;CAAM;CAAM;CAAM;CAClE;CAAM;CAAQ;CAAU;CAAU;CAAM;CAAQ;CAAK;CAAU;CAC/D;CAAS;CAAO;CAAO;CAAS;CAAU;CAAM;CAAQ;CAAQ;CAChE;CAAQ;CAAQ;CAAQ;CAAS;CAAO;CAAY;CAAU;CAC9D;CAAY;CAAU;CAAU;CAAK;CAAW;CAAO;CAAY;CACnE;CAAM;CAAM;CAAQ;CAAK;CAAQ;CAAU;CAAU;CAAW;CAChE;CAAQ;CAAS;CAAU;CAAQ;CAAU;CAAS;CAAO;CAC7D;CAAO;CAAS;CAAS;CAAM;CAAY;CAAY;CAAS;CAChE;CAAS;CAAQ;CAAS;CAAM;CAAS;CAAK;CAAM;CAAO;CAAS;CACrE,CAAC;AAEF,SAAgB,kBAAkB,iBAAmC;CACnE,MAAM,uBAAO,IAAI,KAAa;CAG9B,MAAM,WAAW;CACjB,IAAI;AACJ,SAAQ,IAAI,SAAS,KAAK,gBAAgB,MAAM,KAC9C,MAAK,IAAI,EAAE,GAAG;CAIhB,MAAM,UAAU;AAChB,SAAQ,IAAI,QAAQ,KAAK,gBAAgB,MAAM,KAC7C,KAAI,CAAC,cAAc,IAAI,EAAE,GAAG,CAC1B,MAAK,IAAI,EAAE,GAAG;AAIlB,QAAO,CAAC,GAAG,KAAK;;AAGlB,eAAsB,kBAAkB,MAAc,eAAuD;CAC3G,MAAM,sBAAM,IAAI,KAAqB;CAErC,MAAM,OAAO;EACX,QAAQ,WAAW,gBAAgB;EACnC,QAAQ,MAAM,aAAa;EAC3B,GAAG;EACJ,CAAC,QAAO,MAAK,WAAW,EAAE,CAAC;AAE5B,MAAK,MAAM,OAAO,MAAM;EACtB,MAAM,QAAQ,MAAM,KAAK,CAAC,WAAW,EAAE;GAAE,KAAK;GAAK,UAAU;GAAM,CAAC;AACpE,OAAK,MAAM,QAAQ,OAAO;GACxB,MAAM,OAAO,SAAS,MAAM,OAAO;AAEnC,OAAI,IAAI,KAAK,aAAa,EAAE,KAAK;;;AAIrC,QAAO"}

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-next'
+import SidebarClose from '@/components/SidebarClose.vue'
 import logoUrl from '@/logo.svg'
 import logoGradientUrl from '@/logo-gradient.svg'
 import { Kbd } from '@/components/ui/kbd'
@@ -77,6 +77,7 @@ 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 isDragging = ref(false)
@@ -136,32 +137,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
@@ -225,12 +200,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 +209,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 +236,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 +259,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">
+        <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>
 
       <SidebarContent>
@@ -363,7 +334,8 @@ onUnmounted(() => {
           >
             {{ panelWidth }} <button class="hover:text-gray-700 dark:hover:text-gray-300" @click="selectedDevice = null; isFullSize = true; viewMode = 'preview'; resetKey++">&times;</button> {{ panelHeight }}
           </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,33 +359,38 @@ 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: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"

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/command/Command.vue

@@ -80,6 +80,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/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/sidebar/SidebarTrigger.vue

@@ -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/lib/emulated-dark-mode.ts

@@ -0,0 +1,131 @@
+import { parse, converter, formatRgb } from 'culori'
+import safeParser from 'postcss-safe-parser'
+
+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 root = safeParser(css)
+    root.walkDecls((decl) => {
+      const mode = styleProps.get(decl.prop.toLowerCase())
+      if (mode) decl.value = invertValue(decl.value, mode)
+    })
+    return root.toString()
+  } 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)
+}