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

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/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/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,
       }"

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

@@ -73,7 +73,7 @@ provideSidebarContext({
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-svh w-full', props.class)"
       v-bind="$attrs"
     >
       <slot />

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

@@ -9,7 +9,7 @@ const props = defineProps<{
   class?: HTMLAttributes["class"]
 }>()
 
-const { open, toggleSidebar } = useSidebar()
+const { isMobile, open, toggleSidebar } = useSidebar()
 </script>
 
 <template>
@@ -18,11 +18,12 @@ const { open, toggleSidebar } = useSidebar()
     data-slot="sidebar-trigger"
     variant="ghost"
     size="icon"
-    :class="cn('h-7 w-7', props.class)"
+    :class="cn('h-7 w-7 hover:bg-transparent', props.class)"
     @click="toggleSidebar"
   >
-    <PanelRightOpen v-if="open" />
-    <PanelRightClose v-else />
+    <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>
   </Button>
 </template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot
+    v-slot="slotProps" v-bind="forwarded" :class="cn(
+      'flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
+      'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TagsInputRoot>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputInput, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+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 placeholder:text-gray-400 dark:placeholder:text-gray-500', props.class)" />
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+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 { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <X class="size-3" />
+    </slot>
+  </TagsInputItemDelete>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputItemTextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItemText, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>

package/dist/server/ui/components/ui/tags-input/index.ts

@@ -0,0 +1,5 @@
+export { default as TagsInput } from "./TagsInput.vue"
+export { default as TagsInputInput } from "./TagsInputInput.vue"
+export { default as TagsInputItem } from "./TagsInputItem.vue"
+export { default as TagsInputItemDelete } from "./TagsInputItemDelete.vue"
+export { default as TagsInputItemText } from "./TagsInputItemText.vue"

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

@@ -4,17 +4,17 @@ import { cva } from "class-variance-authority"
 export { default as Toggle } from "./Toggle.vue"
 
 export const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium  disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-white data-[state=on]:text-foreground data-[state=on]:shadow-sm data-[state=on]:dark:bg-gray-700 data-[state=on]:dark:text-gray-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+          "bg-transparent",
       },
       size: {
         default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
+        sm: "h-6 px-1.5 min-w-6",
         lg: "h-10 px-2.5 min-w-10",
       },
     },

package/dist/server/ui/components/ui/toggle-group/ToggleGroup.vue

@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       '--gap': spacing,
     }"
     v-bind="forwarded"
-    :class="cn('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs', props.class)"
+    :class="cn('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md bg-gray-50 p-1 dark:bg-gray-800/50 data-[spacing=default]:data-[variant=outline]:shadow-xs', props.class)"
   >
     <slot v-bind="slotProps" />
   </ToggleGroupRoot>

package/dist/server/ui/components/ui/toggle-group/ToggleGroupItem.vue

@@ -37,8 +37,8 @@ const forwardedProps = useForwardProps(delegatedProps)
         variant: context?.variant || variant,
         size: context?.size || size,
       }),
-      'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
-      'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+      'w-auto min-w-0 shrink-0 px-1.5 focus:z-10 focus-visible:z-10',
+      'data-[spacing=0]:rounded-md data-[spacing=0]:shadow-none',
       props.class)"
   >
     <slot v-bind="slotProps" />

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)
+}

package/dist/server/ui/main.css

@@ -27,7 +27,7 @@
   --sidebar-foreground: #030712;
   --sidebar-primary: #111827;
   --sidebar-primary-foreground: #f9fafb;
-  --sidebar-accent: #f3f4f6;
+  --sidebar-accent: #f9fafb;
   --sidebar-accent-foreground: #111827;
   --sidebar-border: #e5e7eb;
   --sidebar-ring: #9ca3af;
@@ -37,31 +37,31 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #030712;        /* gray-950 */
-    --foreground: #f9fafb;        /* gray-50 */
+    --foreground: #e5e7eb;        /* gray-200 */
     --card: #030712;
-    --card-foreground: #f9fafb;
+    --card-foreground: #e5e7eb;
     --popover: #030712;
-    --popover-foreground: #f9fafb;
-    --primary: #f9fafb;
+    --popover-foreground: #e5e7eb;
+    --primary: #e5e7eb;
     --primary-foreground: #030712;
-    --secondary: #1f2937;         /* gray-800 */
-    --secondary-foreground: #f9fafb;
-    --muted: #1f2937;
+    --secondary: #111827;         /* gray-900 */
+    --secondary-foreground: #e5e7eb;
+    --muted: #111827;
     --muted-foreground: #9ca3af;  /* gray-400 */
-    --accent: #1f2937;
-    --accent-foreground: #f9fafb;
+    --accent: #111827;
+    --accent-foreground: #e5e7eb;
     --destructive: #ef4444;
-    --border: #374151;            /* gray-700 */
-    --input: #374151;
-    --ring: #6b7280;              /* gray-500 */
-    --sidebar-background: #111827; /* gray-900 */
-    --sidebar-foreground: #f9fafb;
-    --sidebar-primary: #f9fafb;
-    --sidebar-primary-foreground: #111827;
+    --border: #1f2937;            /* gray-800 */
+    --input: #1f2937;
+    --ring: #4b5563;              /* gray-600 */
+    --sidebar-background: #030712; /* gray-950 */
+    --sidebar-foreground: #e5e7eb;
+    --sidebar-primary: #e5e7eb;
+    --sidebar-primary-foreground: #030712;
     --sidebar-accent: rgb(255 255 255 / 0.06);
-    --sidebar-accent-foreground: #f9fafb;
-    --sidebar-border: #374151;
-    --sidebar-ring: #6b7280;
+    --sidebar-accent-foreground: #e5e7eb;
+    --sidebar-border: #1f2937;
+    --sidebar-ring: #4b5563;
   }
 }
 

package/dist/server/ui/pages/Home.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Terminal } from 'lucide-vue-next'
 import { Kbd } from '@/components/ui/kbd'
 import {
   Empty,
@@ -14,6 +15,10 @@ import markUrl from '@/mark.svg'
 import markGradientUrl from '@/mark-gradient.svg'
 
 const isMac = computed(() => navigator.platform.includes('Mac'))
+
+function openCommandPalette() {
+  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }))
+}
 </script>
 
 <template>
@@ -25,14 +30,16 @@ const isMac = computed(() => navigator.platform.includes('Mac'))
       </EmptyMedia>
       <EmptyTitle>Select an email to preview</EmptyTitle>
       <EmptyDescription>
-        Choose an email from the sidebar to see a live preview.
+        Choose an email from the <span class="md:hidden">menu</span><span class="hidden md:inline">sidebar</span> to see a live preview.
       </EmptyDescription>
     </EmptyHeader>
     <EmptyContent>
-      <p class="text-gray-500 dark:text-gray-400 text-sm">
-        Press
-        <Kbd>{{ isMac ? '⌘' : 'Ctrl' }}</Kbd> + <Kbd>K</Kbd>
-        to open the command palette
+      <p
+        class="text-gray-500 dark:text-gray-400 text-sm cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+        @click="openCommandPalette"
+      >
+        <span class="md:hidden inline-flex items-center gap-1.5 rounded-md bg-gray-100 dark:bg-gray-800 px-3 py-1.5"><Terminal class="size-3.5" /> Quick search</span>
+        <span class="hidden md:inline">Press <Kbd>{{ isMac ? '⌘' : 'Ctrl' }}</Kbd> + <Kbd>K</Kbd> to open the command palette</span>
       </p>
     </EmptyContent>
   </Empty>