minutework 0.1.39 → 0.1.41

package/assets/templates/vuilder-shell/src/design-system/patterns/theme-mode-toggle.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { ThemeModeToggle } from "@/design-system/patterns/theme-mode-toggle";
+
+const meta = {
+  title: "Design System/Patterns/Theme Mode Toggle",
+  component: ThemeModeToggle,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ThemeModeToggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-80 rounded-xl border border-border bg-surface p-4">
+      <ThemeModeToggle />
+    </div>
+  ),
+};

package/assets/templates/vuilder-shell/src/design-system/patterns/theme-mode-toggle.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+
+import { Monitor, Moon, Sun } from "lucide-react";
+
+import { Button } from "@/design-system/primitives/button";
+import { useTheme } from "@/lib/theme";
+import { cn } from "@/lib/utils";
+
+type ThemeMode = "light" | "dark" | "system";
+
+const themeOptions: Array<{
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  value: ThemeMode;
+}> = [
+  { icon: Sun, label: "Light", value: "light" },
+  { icon: Moon, label: "Dark", value: "dark" },
+  { icon: Monitor, label: "System", value: "system" },
+];
+
+export function ThemeModeToggle({
+  className,
+}: React.ComponentProps<"section">) {
+  const { resolvedTheme, setTheme, theme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const activeTheme = mounted ? ((theme ?? "system") as ThemeMode) : "system";
+  const resolvedLabel = mounted
+    ? activeTheme === "system"
+      ? `Following your OS: ${resolvedTheme ?? "light"}`
+      : `Locked to ${activeTheme}`
+    : "Loading preference";
+
+  return (
+    <section className={cn("space-y-2", className)}>
+      <div className="space-y-0.5">
+        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          Theme
+        </p>
+        <p className="text-xs text-muted-foreground">{resolvedLabel}</p>
+      </div>
+      <div className="grid grid-cols-3 gap-1 rounded-xl border border-border bg-muted/60 p-1">
+        {themeOptions.map(({ icon: Icon, label, value }) => {
+          const isActive = activeTheme === value;
+
+          return (
+            <Button
+              key={value}
+              type="button"
+              size="sm"
+              variant="ghost"
+              aria-pressed={isActive}
+              onClick={() => setTheme(value)}
+              className={cn(
+                "h-8 justify-center gap-1.5 rounded-lg border px-2 text-xs",
+                isActive
+                  ? "border-primary/20 bg-primary/10 text-text-link shadow-sm hover:bg-primary/15 hover:text-text-link dark:border-primary/40 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90 dark:hover:text-primary-foreground"
+                  : "border-transparent text-muted-foreground hover:bg-background hover:text-foreground dark:hover:bg-surface-raised",
+              )}
+            >
+              <Icon className="size-3.5" />
+              <span>{label}</span>
+            </Button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/assets/templates/vuilder-shell/src/design-system/primitives/button.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/design-system/primitives/button";
+
+const meta = {
+  title: "Design System/Primitives/Button",
+  component: Button,
+  tags: ["autodocs"],
+  args: {
+    children: "Send follow-up",
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Review details",
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        Assign owner
+        <ArrowRight className="size-4" />
+      </>
+    ),
+  },
+};

package/assets/templates/vuilder-shell/src/design-system/primitives/button.ts

@@ -0,0 +1 @@
+export { Button, buttonVariants } from "@/components/ui/button";

package/assets/templates/vuilder-shell/src/design-system/primitives/input.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { Input } from "@/design-system/primitives/input";
+
+const meta = {
+  title: "Design System/Primitives/Input",
+  component: Input,
+  tags: ["autodocs"],
+  args: {
+    placeholder: "Search tenants or tasks",
+    className: "w-72",
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Invalid: Story = {
+  args: {
+    defaultValue: "late invoice",
+    "aria-invalid": true,
+  },
+};

package/assets/templates/vuilder-shell/src/design-system/primitives/input.ts

@@ -0,0 +1 @@
+export { Input } from "@/components/ui/input";

package/assets/templates/vuilder-shell/src/design-system/recipes/chrome.ts

@@ -0,0 +1,28 @@
+import { cva } from "class-variance-authority";
+
+export const panelFrameVariants = cva("border border-border text-foreground", {
+  variants: {
+    tone: {
+      surface: "bg-surface",
+      raised: "bg-surface-raised",
+      sidebar: "bg-sidebar",
+      floating: "bg-surface shadow-xl",
+    },
+    radius: {
+      none: "rounded-none",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+    },
+    padding: {
+      none: "",
+      sm: "p-3",
+      md: "p-4",
+      lg: "p-6",
+    },
+  },
+  defaultVariants: {
+    tone: "surface",
+    radius: "lg",
+    padding: "md",
+  },
+});

package/assets/templates/vuilder-shell/src/design-system/tokens/foundation.css

@@ -0,0 +1,31 @@
+:root {
+  --ds-foundation-white: #ffffff;
+  --ds-foundation-neutral-50: #f7f8fb;
+  --ds-foundation-neutral-100: #e5e7eb;
+  --ds-foundation-neutral-200: #d7dce5;
+  --ds-foundation-neutral-500: #6b7280;
+  --ds-foundation-neutral-600: #4b5563;
+  --ds-foundation-neutral-700: #2a2d35;
+  --ds-foundation-neutral-800: #22262f;
+  --ds-foundation-neutral-850: #1a1d23;
+  --ds-foundation-neutral-900: #111316;
+  --ds-foundation-neutral-950: #0b0d0f;
+  --ds-foundation-ink-500: #183247;
+  --ds-foundation-ink-700: #102233;
+  --ds-foundation-cyan-50: #eef9fd;
+  --ds-foundation-cyan-100: #d9f1fb;
+  --ds-foundation-cyan-200: #b7e4f3;
+  --ds-foundation-cyan-300: #89d4f0;
+  --ds-foundation-violet-300: #a78bfa;
+  --ds-foundation-violet-500: #7c3aed;
+  --ds-foundation-violet-700: #2d1f7a;
+  --ds-foundation-cyan-500: #0ea5e9;
+  --ds-foundation-cyan-600: #0284c7;
+  --ds-foundation-cyan-700: #0f6787;
+  --ds-foundation-green-500: #22c55e;
+  --ds-foundation-blue-500: #3b82f6;
+  --ds-foundation-yellow-500: #f59e0b;
+  --ds-foundation-red-500: #ef4444;
+  --ds-foundation-overlay-50: rgb(0 0 0 / 0.5);
+  --ds-foundation-overlay-60: rgb(0 0 0 / 0.6);
+}

package/assets/templates/vuilder-shell/src/design-system/tokens/index.css

@@ -0,0 +1,3 @@
+@import "./foundation.css";
+@import "./semantic.css";
+@import "./theme.css";

package/assets/templates/vuilder-shell/src/design-system/tokens/manifest.json

@@ -0,0 +1,85 @@
+{
+  "foundation": {
+    "ds-foundation-white": "#ffffff",
+    "ds-foundation-neutral-50": "#f7f8fb",
+    "ds-foundation-neutral-100": "#e5e7eb",
+    "ds-foundation-neutral-200": "#d7dce5",
+    "ds-foundation-neutral-500": "#6b7280",
+    "ds-foundation-neutral-600": "#4b5563",
+    "ds-foundation-neutral-700": "#2a2d35",
+    "ds-foundation-neutral-800": "#22262f",
+    "ds-foundation-neutral-850": "#1a1d23",
+    "ds-foundation-neutral-900": "#111316",
+    "ds-foundation-neutral-950": "#0b0d0f",
+    "ds-foundation-ink-500": "#183247",
+    "ds-foundation-ink-700": "#102233",
+    "ds-foundation-cyan-50": "#eef9fd",
+    "ds-foundation-cyan-100": "#d9f1fb",
+    "ds-foundation-cyan-200": "#b7e4f3",
+    "ds-foundation-cyan-300": "#89d4f0",
+    "ds-foundation-violet-300": "#a78bfa",
+    "ds-foundation-violet-500": "#7c3aed",
+    "ds-foundation-violet-700": "#2d1f7a",
+    "ds-foundation-cyan-500": "#0ea5e9",
+    "ds-foundation-cyan-600": "#0284c7",
+    "ds-foundation-cyan-700": "#0f6787",
+    "ds-foundation-green-500": "#22c55e",
+    "ds-foundation-blue-500": "#3b82f6",
+    "ds-foundation-yellow-500": "#f59e0b",
+    "ds-foundation-red-500": "#ef4444",
+    "ds-foundation-overlay-50": "rgb(0 0 0 / 0.5)",
+    "ds-foundation-overlay-60": "rgb(0 0 0 / 0.6)"
+  },
+  "semantic": {
+    "background": "var(--ds-foundation-neutral-950)",
+    "foreground": "var(--ds-foundation-neutral-100)",
+    "card": "var(--ds-foundation-neutral-850)",
+    "card-foreground": "var(--ds-foundation-neutral-100)",
+    "popover": "var(--ds-foundation-neutral-850)",
+    "popover-foreground": "var(--ds-foundation-neutral-100)",
+    "primary": "var(--ds-foundation-cyan-500)",
+    "primary-foreground": "var(--ds-foundation-white)",
+    "secondary": "var(--ds-foundation-neutral-800)",
+    "secondary-foreground": "var(--ds-foundation-neutral-100)",
+    "muted": "var(--ds-foundation-neutral-850)",
+    "muted-foreground": "var(--ds-foundation-neutral-500)",
+    "accent": "var(--ds-foundation-ink-700)",
+    "accent-foreground": "var(--ds-foundation-neutral-100)",
+    "destructive": "var(--ds-foundation-red-500)",
+    "destructive-foreground": "var(--ds-foundation-white)",
+    "border": "var(--ds-foundation-neutral-700)",
+    "input": "var(--ds-foundation-neutral-800)",
+    "ring": "var(--ds-foundation-cyan-500)",
+    "chart-1": "var(--ds-foundation-cyan-500)",
+    "chart-2": "var(--ds-foundation-green-500)",
+    "chart-3": "var(--ds-foundation-blue-500)",
+    "chart-4": "var(--ds-foundation-yellow-500)",
+    "chart-5": "var(--ds-foundation-red-500)",
+    "radius": "0.5rem",
+    "sidebar": "var(--ds-foundation-neutral-900)",
+    "sidebar-foreground": "var(--ds-foundation-neutral-100)",
+    "sidebar-primary": "var(--ds-foundation-cyan-500)",
+    "sidebar-primary-foreground": "var(--ds-foundation-white)",
+    "sidebar-accent": "var(--ds-foundation-neutral-800)",
+    "sidebar-accent-foreground": "var(--ds-foundation-neutral-100)",
+    "sidebar-border": "var(--ds-foundation-neutral-700)",
+    "sidebar-ring": "var(--ds-foundation-cyan-500)",
+    "surface": "var(--ds-foundation-neutral-850)",
+    "surface-raised": "var(--ds-foundation-neutral-800)",
+    "text-link": "var(--ds-foundation-cyan-300)",
+    "success": "var(--ds-foundation-green-500)",
+    "warning": "var(--ds-foundation-yellow-500)",
+    "danger": "var(--ds-foundation-red-500)",
+    "info": "var(--ds-foundation-blue-500)",
+    "ai-bubble": "var(--ds-foundation-neutral-850)",
+    "user-bubble": "var(--ds-foundation-cyan-600)",
+    "tenant-rail": "var(--ds-foundation-neutral-950)",
+    "tenant-rail-foreground": "var(--ds-foundation-white)",
+    "tenant-rail-muted": "rgb(255 255 255 / 0.72)",
+    "tenant-rail-border": "rgb(255 255 255 / 0.08)",
+    "tenant-rail-surface": "rgb(255 255 255 / 0.06)",
+    "overlay": "var(--ds-foundation-overlay-50)",
+    "overlay-strong": "var(--ds-foundation-overlay-60)",
+    "strong-foreground": "var(--ds-foundation-white)"
+  }
+}

package/assets/templates/vuilder-shell/src/design-system/tokens/manifest.ts

@@ -0,0 +1,87 @@
+export const tokenManifest = {
+  "foundation": {
+    "ds-foundation-white": "#ffffff",
+    "ds-foundation-neutral-50": "#f7f8fb",
+    "ds-foundation-neutral-100": "#e5e7eb",
+    "ds-foundation-neutral-200": "#d7dce5",
+    "ds-foundation-neutral-500": "#6b7280",
+    "ds-foundation-neutral-600": "#4b5563",
+    "ds-foundation-neutral-700": "#2a2d35",
+    "ds-foundation-neutral-800": "#22262f",
+    "ds-foundation-neutral-850": "#1a1d23",
+    "ds-foundation-neutral-900": "#111316",
+    "ds-foundation-neutral-950": "#0b0d0f",
+    "ds-foundation-ink-500": "#183247",
+    "ds-foundation-ink-700": "#102233",
+    "ds-foundation-cyan-50": "#eef9fd",
+    "ds-foundation-cyan-100": "#d9f1fb",
+    "ds-foundation-cyan-200": "#b7e4f3",
+    "ds-foundation-cyan-300": "#89d4f0",
+    "ds-foundation-violet-300": "#a78bfa",
+    "ds-foundation-violet-500": "#7c3aed",
+    "ds-foundation-violet-700": "#2d1f7a",
+    "ds-foundation-cyan-500": "#0ea5e9",
+    "ds-foundation-cyan-600": "#0284c7",
+    "ds-foundation-cyan-700": "#0f6787",
+    "ds-foundation-green-500": "#22c55e",
+    "ds-foundation-blue-500": "#3b82f6",
+    "ds-foundation-yellow-500": "#f59e0b",
+    "ds-foundation-red-500": "#ef4444",
+    "ds-foundation-overlay-50": "rgb(0 0 0 / 0.5)",
+    "ds-foundation-overlay-60": "rgb(0 0 0 / 0.6)"
+  },
+  "semantic": {
+    "background": "var(--ds-foundation-neutral-950)",
+    "foreground": "var(--ds-foundation-neutral-100)",
+    "card": "var(--ds-foundation-neutral-850)",
+    "card-foreground": "var(--ds-foundation-neutral-100)",
+    "popover": "var(--ds-foundation-neutral-850)",
+    "popover-foreground": "var(--ds-foundation-neutral-100)",
+    "primary": "var(--ds-foundation-cyan-500)",
+    "primary-foreground": "var(--ds-foundation-white)",
+    "secondary": "var(--ds-foundation-neutral-800)",
+    "secondary-foreground": "var(--ds-foundation-neutral-100)",
+    "muted": "var(--ds-foundation-neutral-850)",
+    "muted-foreground": "var(--ds-foundation-neutral-500)",
+    "accent": "var(--ds-foundation-ink-700)",
+    "accent-foreground": "var(--ds-foundation-neutral-100)",
+    "destructive": "var(--ds-foundation-red-500)",
+    "destructive-foreground": "var(--ds-foundation-white)",
+    "border": "var(--ds-foundation-neutral-700)",
+    "input": "var(--ds-foundation-neutral-800)",
+    "ring": "var(--ds-foundation-cyan-500)",
+    "chart-1": "var(--ds-foundation-cyan-500)",
+    "chart-2": "var(--ds-foundation-green-500)",
+    "chart-3": "var(--ds-foundation-blue-500)",
+    "chart-4": "var(--ds-foundation-yellow-500)",
+    "chart-5": "var(--ds-foundation-red-500)",
+    "radius": "0.5rem",
+    "sidebar": "var(--ds-foundation-neutral-900)",
+    "sidebar-foreground": "var(--ds-foundation-neutral-100)",
+    "sidebar-primary": "var(--ds-foundation-cyan-500)",
+    "sidebar-primary-foreground": "var(--ds-foundation-white)",
+    "sidebar-accent": "var(--ds-foundation-neutral-800)",
+    "sidebar-accent-foreground": "var(--ds-foundation-neutral-100)",
+    "sidebar-border": "var(--ds-foundation-neutral-700)",
+    "sidebar-ring": "var(--ds-foundation-cyan-500)",
+    "surface": "var(--ds-foundation-neutral-850)",
+    "surface-raised": "var(--ds-foundation-neutral-800)",
+    "text-link": "var(--ds-foundation-cyan-300)",
+    "success": "var(--ds-foundation-green-500)",
+    "warning": "var(--ds-foundation-yellow-500)",
+    "danger": "var(--ds-foundation-red-500)",
+    "info": "var(--ds-foundation-blue-500)",
+    "ai-bubble": "var(--ds-foundation-neutral-850)",
+    "user-bubble": "var(--ds-foundation-cyan-600)",
+    "tenant-rail": "var(--ds-foundation-neutral-950)",
+    "tenant-rail-foreground": "var(--ds-foundation-white)",
+    "tenant-rail-muted": "rgb(255 255 255 / 0.72)",
+    "tenant-rail-border": "rgb(255 255 255 / 0.08)",
+    "tenant-rail-surface": "rgb(255 255 255 / 0.06)",
+    "overlay": "var(--ds-foundation-overlay-50)",
+    "overlay-strong": "var(--ds-foundation-overlay-60)",
+    "strong-foreground": "var(--ds-foundation-white)"
+  }
+} as const
+
+export default tokenManifest

package/assets/templates/vuilder-shell/src/design-system/tokens/semantic.css

@@ -0,0 +1,105 @@
+:root {
+  --background: #f6fafc;
+  --foreground: var(--ds-foundation-neutral-950);
+  --card: #fcfdff;
+  --card-foreground: var(--ds-foundation-neutral-950);
+  --popover: #fcfdff;
+  --popover-foreground: var(--ds-foundation-neutral-950);
+  --primary: var(--ds-foundation-cyan-600);
+  --primary-foreground: var(--ds-foundation-white);
+  --secondary: #edf3f7;
+  --secondary-foreground: var(--ds-foundation-neutral-950);
+  --muted: #eef5f8;
+  --muted-foreground: #617487;
+  --accent: var(--ds-foundation-cyan-100);
+  --accent-foreground: var(--ds-foundation-neutral-950);
+  --destructive: var(--ds-foundation-red-500);
+  --destructive-foreground: var(--ds-foundation-white);
+  --border: #d7e5ed;
+  --input: #d7e5ed;
+  --ring: var(--ds-foundation-cyan-500);
+  --chart-1: var(--ds-foundation-cyan-500);
+  --chart-2: var(--ds-foundation-green-500);
+  --chart-3: var(--ds-foundation-blue-500);
+  --chart-4: var(--ds-foundation-yellow-500);
+  --chart-5: var(--ds-foundation-red-500);
+  --radius: 0.5rem;
+  --sidebar: #f8fbfd;
+  --sidebar-foreground: var(--ds-foundation-neutral-950);
+  --sidebar-primary: var(--ds-foundation-cyan-600);
+  --sidebar-primary-foreground: var(--ds-foundation-white);
+  --sidebar-accent: #edf5f8;
+  --sidebar-accent-foreground: var(--ds-foundation-neutral-950);
+  --sidebar-border: #d7e5ed;
+  --sidebar-ring: var(--ds-foundation-cyan-500);
+
+  --surface: #ffffff;
+  --surface-raised: #f3f8fb;
+  --text-link: var(--ds-foundation-cyan-700);
+  --success: var(--ds-foundation-green-500);
+  --warning: var(--ds-foundation-yellow-500);
+  --danger: var(--ds-foundation-red-500);
+  --info: var(--ds-foundation-blue-500);
+  --ai-bubble: #eef5f8;
+  --user-bubble: var(--ds-foundation-cyan-600);
+  --tenant-rail: var(--ds-foundation-cyan-50);
+  --tenant-rail-foreground: var(--ds-foundation-ink-500);
+  --tenant-rail-muted: #627789;
+  --tenant-rail-border: rgb(148 163 184 / 0.24);
+  --tenant-rail-surface: rgb(255 255 255 / 0.72);
+  --overlay: var(--ds-foundation-overlay-50);
+  --overlay-strong: var(--ds-foundation-overlay-60);
+  --strong-foreground: var(--ds-foundation-white);
+}
+
+.dark {
+  --background: var(--ds-foundation-neutral-950);
+  --foreground: var(--ds-foundation-neutral-100);
+  --card: var(--ds-foundation-neutral-850);
+  --card-foreground: var(--ds-foundation-neutral-100);
+  --popover: var(--ds-foundation-neutral-850);
+  --popover-foreground: var(--ds-foundation-neutral-100);
+  --primary: var(--ds-foundation-cyan-500);
+  --primary-foreground: var(--ds-foundation-white);
+  --secondary: var(--ds-foundation-neutral-800);
+  --secondary-foreground: var(--ds-foundation-neutral-100);
+  --muted: var(--ds-foundation-neutral-850);
+  --muted-foreground: var(--ds-foundation-neutral-500);
+  --accent: var(--ds-foundation-ink-700);
+  --accent-foreground: var(--ds-foundation-neutral-100);
+  --destructive: var(--ds-foundation-red-500);
+  --destructive-foreground: var(--ds-foundation-white);
+  --border: var(--ds-foundation-neutral-700);
+  --input: var(--ds-foundation-neutral-800);
+  --ring: var(--ds-foundation-cyan-500);
+  --chart-1: var(--ds-foundation-cyan-500);
+  --chart-2: var(--ds-foundation-green-500);
+  --chart-3: var(--ds-foundation-blue-500);
+  --chart-4: var(--ds-foundation-yellow-500);
+  --chart-5: var(--ds-foundation-red-500);
+  --sidebar: var(--ds-foundation-neutral-900);
+  --sidebar-foreground: var(--ds-foundation-neutral-100);
+  --sidebar-primary: var(--ds-foundation-cyan-500);
+  --sidebar-primary-foreground: var(--ds-foundation-white);
+  --sidebar-accent: var(--ds-foundation-neutral-800);
+  --sidebar-accent-foreground: var(--ds-foundation-neutral-100);
+  --sidebar-border: var(--ds-foundation-neutral-700);
+  --sidebar-ring: var(--ds-foundation-cyan-500);
+  --surface: var(--ds-foundation-neutral-850);
+  --surface-raised: var(--ds-foundation-neutral-800);
+  --text-link: var(--ds-foundation-cyan-300);
+  --success: var(--ds-foundation-green-500);
+  --warning: var(--ds-foundation-yellow-500);
+  --danger: var(--ds-foundation-red-500);
+  --info: var(--ds-foundation-blue-500);
+  --ai-bubble: var(--ds-foundation-neutral-850);
+  --user-bubble: var(--ds-foundation-cyan-600);
+  --tenant-rail: var(--ds-foundation-neutral-950);
+  --tenant-rail-foreground: var(--ds-foundation-white);
+  --tenant-rail-muted: rgb(255 255 255 / 0.72);
+  --tenant-rail-border: rgb(255 255 255 / 0.08);
+  --tenant-rail-surface: rgb(255 255 255 / 0.06);
+  --overlay: var(--ds-foundation-overlay-50);
+  --overlay-strong: var(--ds-foundation-overlay-60);
+  --strong-foreground: var(--ds-foundation-white);
+}

package/assets/templates/vuilder-shell/src/design-system/tokens/theme.css

@@ -0,0 +1,59 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: "Geist", "Geist Fallback";
+  --font-mono: "Geist Mono", "Geist Mono Fallback";
+  --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-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --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);
+  --color-surface: var(--surface);
+  --color-surface-raised: var(--surface-raised);
+  --color-text-link: var(--text-link);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-danger: var(--danger);
+  --color-info: var(--info);
+  --color-ai-bubble: var(--ai-bubble);
+  --color-user-bubble: var(--user-bubble);
+  --color-tenant-rail: var(--tenant-rail);
+  --color-tenant-rail-foreground: var(--tenant-rail-foreground);
+  --color-tenant-rail-muted: var(--tenant-rail-muted);
+  --color-tenant-rail-border: var(--tenant-rail-border);
+  --color-tenant-rail-surface: var(--tenant-rail-surface);
+  --color-overlay: var(--overlay);
+  --color-overlay-strong: var(--overlay-strong);
+  --color-strong-foreground: var(--strong-foreground);
+}

package/assets/templates/vuilder-shell/src/design-system/tokens/tokens.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import tokenManifest from "@/design-system/tokens/manifest";
+
+function TokenGrid({
+  entries,
+}: {
+  entries: Array<[string, string]>;
+}) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {entries.map(([name, value]) => (
+        <div
+          key={name}
+          className="flex items-center gap-3 rounded-lg border border-border bg-surface p-3"
+        >
+          <div
+            className="h-10 w-10 rounded-md border border-border"
+            style={{ backgroundColor: `var(--${name})` }}
+          />
+          <div className="min-w-0">
+            <p className="truncate text-sm font-medium text-foreground">{name}</p>
+            <p className="truncate text-xs text-muted-foreground">{value}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TokenShowcase() {
+  return (
+    <div className="w-[720px] space-y-8">
+      <section className="space-y-3">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            Semantic
+          </p>
+          <h2 className="text-xl font-semibold text-foreground">Shared UI roles</h2>
+        </div>
+        <TokenGrid entries={Object.entries(tokenManifest.semantic)} />
+      </section>
+      <section className="space-y-3">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            Foundation
+          </p>
+          <h2 className="text-xl font-semibold text-foreground">Literal sources</h2>
+        </div>
+        <TokenGrid entries={Object.entries(tokenManifest.foundation)} />
+      </section>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Design System/Tokens",
+  component: TokenShowcase,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof TokenShowcase>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Overview: Story = {
+  render: () => <TokenShowcase />,
+};