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

package/dist/server/ui/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TabsContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsContent } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/dist/server/ui/components/ui/tabs/TabsList.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TabsListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    v-bind="delegatedProps"
+    :class="cn(
+      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

package/dist/server/ui/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="cn(
+      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue"
+export { default as TabsContent } from "./TabsContent.vue"
+export { default as TabsList } from "./TabsList.vue"
+export { default as TabsTrigger } from "./TabsTrigger.vue"

package/dist/server/ui/components/ui/toggle/Toggle.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ToggleVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Toggle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "."
+
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleVariants["variant"]
+  size?: ToggleVariants["size"]
+}>(), {
+  variant: "default",
+  size: "default",
+  disabled: false,
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle
+    v-slot="slotProps"
+    data-slot="toggle"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </Toggle>
+</template>

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

@@ -0,0 +1,28 @@
+import type { VariantProps } from "class-variance-authority"
+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",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { toggleVariants } from '@/components/ui/toggle'
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = withDefaults(defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleGroupVariants["variant"]
+  size?: ToggleGroupVariants["size"]
+  spacing?: number
+}>(), {
+  spacing: 0,
+})
+
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide("toggleGroup", {
+  variant: props.variant,
+  size: props.size,
+  spacing: props.spacing,
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-slot="slotProps"
+    data-slot="toggle-group"
+    :data-size="size"
+    :data-variant="variant"
+    :data-spacing="spacing"
+    :style="{
+      '--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)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupRoot>
+</template>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupItem, useForwardProps } from "reka-ui"
+import { inject } from "vue"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from '@/components/ui/toggle'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants> & {
+  spacing?: number
+}
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleGroupVariants["variant"]
+  size?: ToggleGroupVariants["size"]
+}>()
+
+const context = inject<ToggleGroupVariants>("toggleGroup")
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-slot="slotProps"
+    data-slot="toggle-group-item"
+    :data-variant="context?.variant || variant"
+    :data-size="context?.size || size"
+    :data-spacing="context?.spacing"
+    v-bind="forwardedProps"
+    :class="cn(
+      toggleVariants({
+        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',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>

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

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

package/dist/server/ui/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    v-slot="slotProps"
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
+</template>

package/dist/server/ui/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/dist/server/ui/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui"
+import { TooltipProvider } from "reka-ui"
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/dist/server/ui/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui"
+import { TooltipTrigger } from "reka-ui"
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"

package/dist/server/ui/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="25" fill="none" viewBox="0 0 34 25"><path fill="url(#a)" d="M32.294 4.214a3 3 0 0 0-6 0V20.21a3 3 0 0 0 6 0z"/><path fill="#4338ca" d="M19.746 4.214a3 3 0 0 0-5.999 0V20.21a3 3 0 0 0 5.999 0z"/><path fill="url(#b)" d="M31.658 6.059a3 3 0 1 0-4.725-3.697L14.408 18.371a3 3 0 0 0 4.724 3.696z"/><path fill="url(#c)" d="M19.098 6.06a3 3 0 0 0-4.725-3.697L1.848 18.37a3 3 0 1 0 4.725 3.697z"/><defs><linearGradient id="a" x1="29.294" x2="29.294" y1="1.214" y2="23.21" gradientUnits="userSpaceOnUse"><stop stop-color="#4338ca"/><stop offset="1" stop-color="#6a5ff3"/></linearGradient><linearGradient id="b" x1="31.143" x2="14.922" y1="1.848" y2="22.581" gradientUnits="userSpaceOnUse"><stop stop-color="#8689ff"/><stop offset="1" stop-color="#6366f1"/></linearGradient><linearGradient id="c" x1="18.584" x2="2.362" y1="1.849" y2="22.582" gradientUnits="userSpaceOnUse"><stop stop-color="#8486ff"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs></svg>

package/dist/server/ui/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/svg+xml" href="./favicon.svg">
+  <title>Maizzle Dev</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

package/dist/server/ui/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/dist/server/ui/logo-gradient.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="130" height="25" fill="none" viewBox="0 0 130 25"><path fill="#fff" d="M60.6 14.505v7.2c0 .8-.7 1.5-1.5 1.5s-1.4-.6-1.4-1.5v-7.3c0-1.6-1.3-2.9-3-2.9-1.6 0-3 1.3-3 2.9v7.3c0 .8-.6 1.5-1.4 1.5s-1.5-.6-1.5-1.5v-7.3c0-1.6-1.3-2.9-2.9-2.9s-3 1.3-3 2.9v7.3c0 .8-.6 1.5-1.4 1.5s-1.5-.6-1.5-1.5v-7.3c0-3.2 2.6-5.8 5.9-5.8 1.7 0 3.3.8 4.4 2 1.1-1.3 2.7-2 4.4-2 3.2 0 5.9 2.6 5.9 5.8zM76.9 15.905v5.7c0 .8-.6 1.5-1.5 1.5-.6 0-1.4-.6-1.4-1.5-1.3 1-2.7 1.5-4.3 1.5-4.1 0-7.4-3.1-7.4-7.2s3.3-7.4 7.4-7.4c4.1.1 7.2 3.3 7.2 7.4m-2.9 0c0-2.4-1.9-4.5-4.3-4.5s-4.5 2.1-4.5 4.5 2.1 4.3 4.5 4.3c2.5.1 4.3-1.8 4.3-4.3M79 5.205c-.3-.3-.4-.6-.4-1s.2-.8.4-1c.3-.3.6-.4 1-.4s.8.2 1 .4c.3.3.4.6.4 1s-.1.8-.4 1c-.3.3-.6.4-1 .4-.3 0-.7-.1-1-.4m-.4 16.5v-11.7c0-.8.6-1.4 1.5-1.4.8 0 1.4.6 1.4 1.4v11.7c0 .8-.6 1.5-1.4 1.5-.9 0-1.5-.7-1.5-1.5M95.2 21.705c0 .8-.6 1.5-1.4 1.5h-9.1c-.6 0-1.1-.3-1.3-.8-.3-.5-.2-1.1.1-1.5l7.3-9.4h-6.1c-.8 0-1.4-.7-1.4-1.5s.6-1.4 1.4-1.4h9.1c.6 0 1.1.3 1.3.8.3.5.2 1.1-.1 1.5l-7.3 9.4h6.2c.7 0 1.3.6 1.3 1.4M108.9 21.705c0 .8-.6 1.5-1.4 1.5h-9.1c-.6 0-1.1-.3-1.3-.8-.3-.5-.2-1.1.1-1.5l7.3-9.4h-6.2c-.8 0-1.4-.7-1.4-1.5s.6-1.4 1.4-1.4h9.1c.6 0 1.1.3 1.3.8.3.5.2 1.1-.1 1.5l-7.3 9.4h6.2c.8 0 1.4.6 1.4 1.4M110.6 21.705v-19c0-.8.6-1.4 1.5-1.4.8 0 1.4.6 1.4 1.4v19c0 .8-.6 1.5-1.4 1.5-.9 0-1.5-.7-1.5-1.5M129.9 15.805c0 .8-.6 1.4-1.5 1.4h-10.1c.6 1.7 2.2 3 4.2 3 .7 0 1.9-.1 3.3-1 .7-.4 1.6 0 1.9.7s0 1.5-.7 1.9c-1.9 1.3-3.4 1.3-4.5 1.3-4.1 0-7.3-3.3-7.3-7.3s3.3-7.3 7.3-7.3c3.6 0 7.4 2.6 7.4 7.3m-11.5-1.4h8.4c-.6-2-2.5-3-4.2-3-2 0-3.6 1.2-4.2 3"/><path stroke="url(#a)" stroke-miterlimit="10" stroke-width="1.5" d="M32.294 4.214a3 3 0 0 0-6 0V20.21a3 3 0 0 0 6 0z"/><path stroke="url(#b)" stroke-miterlimit="10" stroke-width="1.5" d="M19.746 4.214a3 3 0 0 0-5.999 0V20.21a3 3 0 0 0 5.999 0z"/><path stroke="url(#c)" stroke-miterlimit="10" stroke-width="1.5" d="M31.658 6.059a3 3 0 1 0-4.725-3.697L14.408 18.371a3 3 0 0 0 4.724 3.696z"/><path stroke="url(#d)" stroke-miterlimit="10" stroke-width="1.5" d="M19.098 6.06a3 3 0 0 0-4.725-3.697L1.848 18.37a3 3 0 1 0 4.725 3.697z"/><defs><linearGradient id="a" x1="29.294" x2="29.294" y1="1.214" y2="23.21" gradientUnits="userSpaceOnUse"><stop stop-color="#4f46e5"/><stop offset="1" stop-color="#9c96ff"/></linearGradient><linearGradient id="b" x1="16.747" x2="16.747" y1="1.214" y2="23.21" gradientUnits="userSpaceOnUse"><stop stop-color="#4f46e5"/><stop offset="1" stop-color="#9c96ff"/></linearGradient><linearGradient id="c" x1="31.143" x2="14.922" y1="1.848" y2="22.581" gradientUnits="userSpaceOnUse"><stop stop-color="#4f46e5"/><stop offset="1" stop-color="#9c96ff"/></linearGradient><linearGradient id="d" x1="18.584" x2="2.362" y1="1.849" y2="22.582" gradientUnits="userSpaceOnUse"><stop stop-color="#4f46e5"/><stop offset="1" stop-color="#9c96ff"/></linearGradient></defs></svg>

package/dist/server/ui/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="130" height="25" fill="none" viewBox="0 0 130 25"><path fill="#1e293b" d="M60.6 14.505v7.2c0 .8-.7 1.5-1.5 1.5s-1.4-.6-1.4-1.5v-7.3c0-1.6-1.3-2.9-3-2.9-1.6 0-3 1.3-3 2.9v7.3c0 .8-.6 1.5-1.4 1.5s-1.5-.6-1.5-1.5v-7.3c0-1.6-1.3-2.9-2.9-2.9s-3 1.3-3 2.9v7.3c0 .8-.6 1.5-1.4 1.5s-1.5-.6-1.5-1.5v-7.3c0-3.2 2.6-5.8 5.9-5.8 1.7 0 3.3.8 4.4 2 1.1-1.3 2.7-2 4.4-2 3.2 0 5.9 2.6 5.9 5.8zM76.9 15.905v5.7c0 .8-.6 1.5-1.5 1.5-.6 0-1.4-.6-1.4-1.5-1.3 1-2.7 1.5-4.3 1.5-4.1 0-7.4-3.1-7.4-7.2s3.3-7.4 7.4-7.4c4.1.1 7.2 3.3 7.2 7.4m-2.9 0c0-2.4-1.9-4.5-4.3-4.5s-4.5 2.1-4.5 4.5 2.1 4.3 4.5 4.3c2.5.1 4.3-1.8 4.3-4.3M79 5.205c-.3-.3-.4-.6-.4-1s.2-.8.4-1c.3-.3.6-.4 1-.4s.8.2 1 .4c.3.3.4.6.4 1s-.1.8-.4 1c-.3.3-.6.4-1 .4-.3 0-.7-.1-1-.4m-.4 16.5v-11.7c0-.8.6-1.4 1.5-1.4.8 0 1.4.6 1.4 1.4v11.7c0 .8-.6 1.5-1.4 1.5-.9 0-1.5-.7-1.5-1.5M95.2 21.705c0 .8-.6 1.5-1.4 1.5h-9.1c-.6 0-1.1-.3-1.3-.8-.3-.5-.2-1.1.1-1.5l7.3-9.4h-6.1c-.8 0-1.4-.7-1.4-1.5s.6-1.4 1.4-1.4h9.1c.6 0 1.1.3 1.3.8.3.5.2 1.1-.1 1.5l-7.3 9.4h6.2c.7 0 1.3.6 1.3 1.4M108.9 21.705c0 .8-.6 1.5-1.4 1.5h-9.1c-.6 0-1.1-.3-1.3-.8-.3-.5-.2-1.1.1-1.5l7.3-9.4h-6.2c-.8 0-1.4-.7-1.4-1.5s.6-1.4 1.4-1.4h9.1c.6 0 1.1.3 1.3.8.3.5.2 1.1-.1 1.5l-7.3 9.4h6.2c.8 0 1.4.6 1.4 1.4M110.6 21.705v-19c0-.8.6-1.4 1.5-1.4.8 0 1.4.6 1.4 1.4v19c0 .8-.6 1.5-1.4 1.5-.9 0-1.5-.7-1.5-1.5M129.9 15.805c0 .8-.6 1.4-1.5 1.4h-10.1c.6 1.7 2.2 3 4.2 3 .7 0 1.9-.1 3.3-1 .7-.4 1.6 0 1.9.7s0 1.5-.7 1.9c-1.9 1.3-3.4 1.3-4.5 1.3-4.1 0-7.3-3.3-7.3-7.3s3.3-7.3 7.3-7.3c3.6 0 7.4 2.6 7.4 7.3m-11.5-1.4h8.4c-.6-2-2.5-3-4.2-3-2 0-3.6 1.2-4.2 3"/><path stroke="#4f46e5" stroke-miterlimit="10" d="M32.3 4.215a3 3 0 1 0-6 0v16a3 3 0 0 0 6 0zM19.75 4.215a3 3 0 1 0-6 0v16a3 3 0 0 0 6 0z"/><path stroke="#4f46e5" stroke-miterlimit="10" d="M31.664 6.06a3 3 0 1 0-4.726-3.697L14.411 18.374a3 3 0 1 0 4.725 3.698zM19.102 6.06a3 3 0 1 0-4.726-3.697L1.85 18.375a3 3 0 0 0 4.725 3.697z"/></svg>

package/dist/server/ui/main.css

@@ -0,0 +1,129 @@
+@import "tailwindcss" source(none);
+@import "tw-animate-css";
+@source "./";
+
+/* Light theme — gray palette */
+:root {
+  --background: #ffffff;
+  --foreground: #030712;        /* gray-950 */
+  --card: #ffffff;
+  --card-foreground: #030712;
+  --popover: #ffffff;
+  --popover-foreground: #030712;
+  --primary: #111827;           /* gray-900 */
+  --primary-foreground: #f9fafb; /* gray-50 */
+  --secondary: #f3f4f6;         /* gray-100 */
+  --secondary-foreground: #111827;
+  --muted: #f3f4f6;
+  --muted-foreground: #6b7280;  /* gray-500 */
+  --accent: #f3f4f6;
+  --accent-foreground: #111827;
+  --destructive: #ef4444;
+  --border: #e5e7eb;            /* gray-200 */
+  --input: #e5e7eb;
+  --ring: #9ca3af;              /* gray-400 */
+  --radius: 0.625rem;
+  --sidebar-background: #f9fafb; /* gray-50 */
+  --sidebar-foreground: #030712;
+  --sidebar-primary: #111827;
+  --sidebar-primary-foreground: #f9fafb;
+  --sidebar-accent: #f3f4f6;
+  --sidebar-accent-foreground: #111827;
+  --sidebar-border: #e5e7eb;
+  --sidebar-ring: #9ca3af;
+}
+
+/* Dark theme — gray palette */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #030712;        /* gray-950 */
+    --foreground: #f9fafb;        /* gray-50 */
+    --card: #030712;
+    --card-foreground: #f9fafb;
+    --popover: #030712;
+    --popover-foreground: #f9fafb;
+    --primary: #f9fafb;
+    --primary-foreground: #030712;
+    --secondary: #1f2937;         /* gray-800 */
+    --secondary-foreground: #f9fafb;
+    --muted: #1f2937;
+    --muted-foreground: #9ca3af;  /* gray-400 */
+    --accent: #1f2937;
+    --accent-foreground: #f9fafb;
+    --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;
+    --sidebar-accent: rgb(255 255 255 / 0.06);
+    --sidebar-accent-foreground: #f9fafb;
+    --sidebar-border: #374151;
+    --sidebar-ring: #6b7280;
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius: var(--radius);
+  --color-sidebar-background: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.shiki-line-numbers code {
+  counter-reset: line;
+}
+
+.shiki-line-numbers code .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 3ch;
+  margin-right: 1.5rem;
+  text-align: right;
+  color: rgba(255, 255, 255, 0.2);
+}
+
+.shiki-line-numbers code .line.shiki-highlight-line {
+  display: inline-block;
+  width: calc(100% + 3rem);
+  margin: 0 -1.5rem;
+  padding: 0 1.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-left: 2px solid #f59e0b;
+  min-width: fit-content;
+}

package/dist/server/ui/main.ts

@@ -0,0 +1,16 @@
+import './main.css'
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import App from './App.vue'
+import Home from './pages/Home.vue'
+import Preview from './pages/Preview.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/', component: Home },
+    { path: '/:template(.*)', component: Preview },
+  ],
+})
+
+createApp(App).use(router).mount('#app')

package/dist/server/ui/mark-gradient.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 251 184"><path d="M241.919 31.566c0-12.409-10.06-22.469-22.47-22.469-12.409 0-22.469 10.06-22.469 22.47v119.836c0 12.41 10.06 22.469 22.469 22.469 12.41 0 22.47-10.059 22.47-22.469V31.566Z" stroke="url(#a)" stroke-width="4" stroke-miterlimit="10"/><path d="M147.921 31.566c0-12.409-10.06-22.469-22.469-22.469-12.41 0-22.47 10.06-22.47 22.47v119.836c0 12.41 10.06 22.469 22.47 22.469 12.409 0 22.469-10.059 22.469-22.469V31.566Z" stroke="url(#b)" stroke-width="4" stroke-miterlimit="10"/><path d="M237.154 45.388c7.647-9.773 5.923-23.895-3.85-31.542-9.774-7.647-23.896-5.923-31.543 3.85L107.932 137.62c-7.646 9.774-5.923 23.896 3.851 31.543 9.773 7.646 23.895 5.923 31.542-3.851l93.829-119.923Z" stroke="url(#c)" stroke-width="4" stroke-miterlimit="10"/><path d="M143.068 45.392c7.646-9.774 5.922-23.896-3.851-31.543-9.774-7.646-23.896-5.922-31.542 3.851l-93.83 119.923c-7.646 9.773-5.922 23.895 3.851 31.542 9.774 7.647 23.896 5.923 31.543-3.85l93.829-119.923Z" stroke="url(#d)" stroke-width="4" stroke-miterlimit="10"/><defs><linearGradient id="a" x1="219.449" y1="9.097" x2="219.449" y2="173.872" gradientUnits="userSpaceOnUse"><stop stop-color="#4F46E5"/><stop offset="1" stop-color="#9C96FF"/></linearGradient><linearGradient id="b" x1="125.452" y1="9.097" x2="125.452" y2="173.872" gradientUnits="userSpaceOnUse"><stop stop-color="#4F46E5"/><stop offset="1" stop-color="#9C96FF"/></linearGradient><linearGradient id="c" x1="233.304" y1="13.846" x2="111.783" y2="169.162" gradientUnits="userSpaceOnUse"><stop stop-color="#4F46E5"/><stop offset="1" stop-color="#9C96FF"/></linearGradient><linearGradient id="d" x1="139.217" y1="13.85" x2="17.696" y2="169.165" gradientUnits="userSpaceOnUse"><stop stop-color="#4F46E5"/><stop offset="1" stop-color="#9C96FF"/></linearGradient></defs></svg>

package/dist/server/ui/mark.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 205"><path d="M269.869 35.214c0-13.844-11.222-25.066-25.065-25.066-13.843 0-25.065 11.222-25.065 25.066v133.682c0 13.843 11.222 25.065 25.065 25.065 13.843 0 25.065-11.222 25.065-25.065V35.214ZM165.011 35.214c0-13.844-11.222-25.066-25.065-25.066-13.843 0-25.065 11.222-25.065 25.066v133.682c0 13.843 11.222 25.065 25.065 25.065 13.843 0 25.065-11.222 25.065-25.065V35.214Z" stroke="#4F46E5" stroke-width="4" stroke-miterlimit="10"/><path d="M264.554 50.632c8.531-10.902 6.608-26.656-4.295-35.186-10.903-8.53-26.656-6.608-35.187 4.295L120.403 153.519c-8.531 10.903-6.608 26.657 4.295 35.187 10.903 8.53 26.656 6.607 35.187-4.295L264.554 50.632ZM159.597 50.636c8.53-10.902 6.607-26.656-4.295-35.186-10.903-8.53-26.657-6.608-35.187 4.295L15.445 153.523c-8.53 10.903-6.607 26.657 4.296 35.187 10.902 8.53 26.656 6.607 35.186-4.295l104.67-133.779Z" stroke="#4F46E5" stroke-width="4" stroke-miterlimit="10"/></svg>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Kbd } from '@/components/ui/kbd'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty'
+
+import markUrl from '@/mark.svg'
+import markGradientUrl from '@/mark-gradient.svg'
+
+const isMac = computed(() => navigator.platform.includes('Mac'))
+</script>
+
+<template>
+  <Empty class="h-full">
+    <EmptyHeader>
+      <EmptyMedia>
+        <img :src="markUrl" alt="Maizzle" class="size-12 dark:hidden">
+        <img :src="markGradientUrl" alt="Maizzle" class="hidden size-12 dark:block">
+      </EmptyMedia>
+      <EmptyTitle>Select an email to preview</EmptyTitle>
+      <EmptyDescription>
+        Choose an email from the sidebar 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>
+    </EmptyContent>
+  </Empty>
+</template>