@vllnt/ui 0.2.1-canary.bf41f62 → 0.2.1-canary.c065357

package/README.md

@@ -44,7 +44,7 @@ export default {
 ```
 
 The preset configures:
-- **Colors**: `primary`, `secondary`, `muted`, `accent`, `destructive`, `background`, `foreground`, `card`, `popover`, `border`, `input`, `ring` — all as `hsl(var(--name))` for theming
+- **Colors**: `primary`, `secondary`, `muted`, `accent`, `destructive`, `background`, `foreground`, `card`, `popover`, `border`, `input`, `ring` — all as `oklch(var(--name) / <alpha-value>)` for theming
 - **Border radius**: `lg`, `md`, `sm` via `--radius` CSS variable
 - **Animations**: `accordion-down`, `accordion-up`, `shimmer`
 - **Font**: `mono` family via `--font-mono` variable
@@ -83,45 +83,59 @@ export function Example() {
 | `@vllnt/ui/tailwind-preset` | Tailwind CSS preset config |
 | `@vllnt/ui/styles.css` | Full styles (Tailwind base + theme variables + utilities) |
 | `@vllnt/ui/themes/default.css` | Theme CSS variables only (no Tailwind base) |
+| `@vllnt/ui/themes/presets.css` | Built-in color presets (applied via `data-theme`) |
 
 ## Theming
 
-All colors use HSL CSS variables. Override them after importing styles:
+All colors are **OKLCH channel** CSS variables (`L C H`), consumed as
+`oklch(var(--name) / <alpha-value>)`. Override them after importing styles:
 
 ```css
 /* Light theme */
 :root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
+  --background: 1 0 0;
+  --foreground: 0.1445 0 0;
+  --primary: 0.2044 0 0;
+  --primary-foreground: 0.9848 0 0;
+  --secondary: 0.9703 0 0;
+  --secondary-foreground: 0.2044 0 0;
+  --muted: 0.9703 0 0;
+  --muted-foreground: 0.5555 0 0;
+  --accent: 0.9703 0 0;
+  --accent-foreground: 0.2044 0 0;
+  --destructive: 0.6368 0.2078 25.326;
+  --destructive-foreground: 0.9848 0 0;
+  --border: 0.9219 0 0;
+  --input: 0.9219 0 0;
+  --ring: 0.1445 0 0;
   --radius: 0.5rem;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
+  --card: 1 0 0;
+  --card-foreground: 0.1445 0 0;
+  --popover: 1 0 0;
+  --popover-foreground: 0.1445 0 0;
 }
 
 /* Dark theme (applied via class="dark" on html/body) */
 .dark {
-  --background: 0 0% 3.9%;
-  --foreground: 0 0% 98%;
+  --background: 0 0 0;
+  --foreground: 0.9848 0 0;
   /* ... override other variables */
 }
 ```
 
-Use `@vllnt/ui/themes/default.css` instead of `@vllnt/ui/styles.css` if you only want the variables without Tailwind base layer styles.
+Use `@vllnt/ui/themes/default.css` instead of `@vllnt/ui/styles.css` if you only
+want the variables without the Tailwind base layer.
+
+### Runtime presets & the theme editor
+
+Import `@vllnt/ui/themes/presets.css` and switch between built-in color presets
+at runtime with `<ThemeSwitcher />` (or `setThemePreset` / `useThemePreset`),
+which set `data-theme` on the document root. Render `<ThemePresetProvider />`
+once near the root to restore the saved preset before paint.
+
+To design and export your own theme, use the visual editor at
+[`/themes`](https://ui.vllnt.ai/themes) — it exports a CSS block, a
+`npx shadcn add` command, or design tokens.
 
 ## Component Patterns
 

package/dist/components/border-beam/border-beam.js

@@ -5,8 +5,8 @@ const BorderBeam = React.forwardRef(
   ({
     borderWidth = 1,
     className,
-    colorFrom = "hsl(var(--primary) / 0.85)",
-    colorTo = "hsl(var(--ring) / 0.25)",
+    colorFrom = "oklch(var(--primary) / 0.85)",
+    colorTo = "oklch(var(--ring) / 0.25)",
     delay = 0,
     duration = 6,
     reverse = false,

package/dist/components/candlestick-chart/candlestick-chart.js

@@ -59,7 +59,7 @@ function PriceGrid({
     /* @__PURE__ */ jsx(
       "line",
       {
-        stroke: "hsl(var(--border))",
+        stroke: "oklch(var(--border))",
         strokeDasharray: "4 6",
         strokeOpacity: "0.8",
         x1: "0",
@@ -71,7 +71,7 @@ function PriceGrid({
     /* @__PURE__ */ jsx(
       "text",
       {
-        fill: "hsl(var(--muted-foreground))",
+        fill: "oklch(var(--muted-foreground))",
         fontSize: "11",
         textAnchor: "end",
         x: width - 6,
@@ -127,7 +127,7 @@ function CandleMarks({
       /* @__PURE__ */ jsx(
         "text",
         {
-          fill: "hsl(var(--muted-foreground))",
+          fill: "oklch(var(--muted-foreground))",
           fontSize: "11",
           textAnchor: "middle",
           x: centerX,

package/dist/components/canvas-shell/canvas-foundation-demo.js

@@ -85,7 +85,7 @@ function DemoRightBar() {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_hsl(var(--foreground)/0.06)] backdrop-blur-xl", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_oklch(var(--foreground)/0.06)] backdrop-blur-xl", children: [
           /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: "Selected context" }),
           /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm font-medium text-foreground", children: "Inbox triage" }),
           /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm leading-6 text-muted-foreground", children: "Landing route keeps the assistant close to the operational queue instead of taking over the center canvas." })
@@ -111,8 +111,8 @@ function DemoBottomBar() {
   ) });
 }
 function DemoCanvasObjects() {
-  return /* @__PURE__ */ jsxs("div", { className: "relative h-[1200px] w-[1600px] overflow-hidden rounded-[28px] border border-border/12 bg-[radial-gradient(circle_at_top,hsl(var(--primary)/0.07),transparent_38%),linear-gradient(180deg,hsl(var(--background)/0.18),hsl(var(--background)/0.04))]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "absolute left-[14%] top-[22%] w-72 rounded-[2rem] border border-border/18 bg-background/18 p-5 shadow-[0_22px_80px_hsl(var(--foreground)/0.05)] backdrop-blur-xl", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-[1200px] w-[1600px] overflow-hidden rounded-[28px] border border-border/12 bg-[radial-gradient(circle_at_top,oklch(var(--primary)/0.07),transparent_38%),linear-gradient(180deg,oklch(var(--background)/0.18),oklch(var(--background)/0.04))]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "absolute left-[14%] top-[22%] w-72 rounded-[2rem] border border-border/18 bg-background/18 p-5 shadow-[0_22px_80px_oklch(var(--foreground)/0.05)] backdrop-blur-xl", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("div", { className: "flex size-11 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Layers3, { className: "size-5" }) }),
         /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-primary/50" })
@@ -126,7 +126,7 @@ function DemoCanvasObjects() {
         /* @__PURE__ */ jsx("div", { className: "h-10 rounded-[1.25rem] border border-border/18 bg-background/30" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "absolute right-[15%] top-[18%] w-56 rounded-[1.75rem] border border-border/18 bg-background/14 p-4 shadow-[0_18px_60px_hsl(var(--foreground)/0.04)] backdrop-blur-xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "absolute right-[15%] top-[18%] w-56 rounded-[1.75rem] border border-border/18 bg-background/14 p-4 shadow-[0_18px_60px_oklch(var(--foreground)/0.04)] backdrop-blur-xl", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-2xl bg-background/60 text-foreground/70", children: /* @__PURE__ */ jsx(Activity, { className: "size-4" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
@@ -144,7 +144,7 @@ function DemoCanvasObjects() {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-[18%] left-[22%] w-64 rounded-[1.75rem] border border-border/18 bg-background/12 p-4 shadow-[0_18px_60px_hsl(var(--foreground)/0.04)] backdrop-blur-xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-[18%] left-[22%] w-64 rounded-[1.75rem] border border-border/18 bg-background/12 p-4 shadow-[0_18px_60px_oklch(var(--foreground)/0.04)] backdrop-blur-xl", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-2xl bg-background/55 text-foreground/70", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }) }),
         /* @__PURE__ */ jsx("div", { className: "h-7 w-16 rounded-full border border-border/18 bg-background/38" })

package/dist/components/canvas-shell/canvas-shell.js

@@ -214,14 +214,14 @@ function renderFloatingCanvasShell({
     "section",
     {
       className: cn(
-        "relative isolate flex min-h-[720px] w-full overflow-hidden bg-[radial-gradient(circle_at_top,hsl(var(--background)/0.94),hsl(var(--muted)/0.6))]",
+        "relative isolate flex min-h-[720px] w-full overflow-hidden bg-[radial-gradient(circle_at_top,oklch(var(--background)/0.94),oklch(var(--muted)/0.6))]",
         className
       ),
       ref,
       style: mergedStyle,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[linear-gradient(180deg,hsl(var(--background)/0.94),hsl(var(--background)/0.8))]" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[linear-gradient(180deg,oklch(var(--background)/0.94),oklch(var(--background)/0.8))]" }),
         /* @__PURE__ */ jsx(
           CanvasShellChromeBefore,
           {

package/dist/components/chat-dock-section/chat-dock-section.js

@@ -15,7 +15,7 @@ const ChatDockSection = forwardRef(
     "section",
     {
       className: cn(
-        "flex flex-col gap-4 rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_hsl(var(--foreground)/0.06)] backdrop-blur-xl",
+        "flex flex-col gap-4 rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_oklch(var(--foreground)/0.06)] backdrop-blur-xl",
         className
       ),
       ref,

package/dist/components/code-block/code-block.js

@@ -90,7 +90,7 @@ function CodeBlock({
                   }
                 },
                 customStyle: {
-                  background: "hsl(var(--background))",
+                  background: "oklch(var(--background))",
                   fontSize: "0.875rem",
                   margin: 0,
                   minWidth: "fit-content",
@@ -107,6 +107,7 @@ function CodeBlock({
               /* @__PURE__ */ jsx(
                 Button,
                 {
+                  "aria-label": copied ? "Copied" : "Copy code",
                   className: "size-8",
                   onClick: handleCopy,
                   size: "icon",

package/dist/components/code-playground/code-playground.js

@@ -49,6 +49,7 @@ function CodePlayground({
         /* @__PURE__ */ jsx(
           Button,
           {
+            "aria-label": copied ? "Copied" : "Copy code",
             className: "size-8",
             onClick: handleCopy,
             size: "icon",

package/dist/components/glass-panel/glass-panel.js

@@ -6,7 +6,7 @@ const GlassPanel = forwardRef(
     "div",
     {
       className: cn(
-        "rounded-2xl border border-border/60 bg-background/70 shadow-[0_12px_40px_hsl(var(--foreground)/0.08)] backdrop-blur-xl",
+        "rounded-2xl border border-border/60 bg-background/70 shadow-[0_12px_40px_oklch(var(--foreground)/0.08)] backdrop-blur-xl",
         className
       ),
       ref,

package/dist/components/index.js

@@ -325,6 +325,7 @@ import {
   useAgentStepStatus
 } from "./agent-activity";
 import { StatCard, statCardVariants } from "./stat-card";
+import { StaticCode } from "./static-code";
 import {
   dotVariants,
   StatusIndicator,
@@ -467,7 +468,9 @@ import {
 } from "./share-section";
 import { SearchDialog } from "./search-dialog";
 import { LangProvider } from "./lang-provider";
+import { ThemePresetProvider } from "./theme-preset-provider";
 import { ThemeProvider } from "./theme-provider";
+import { ThemeSwitcher } from "./theme-switcher";
 import { ThemeToggle } from "./theme-toggle";
 import {
   CandlestickChart
@@ -1263,6 +1266,7 @@ export {
   Spinner,
   StatCard,
   StateBadgeOverlay,
+  StaticCode,
   StatusBoard,
   StatusIndicator,
   Step,
@@ -1293,7 +1297,9 @@ export {
   TagsInput,
   Terminal,
   Textarea,
+  ThemePresetProvider,
   ThemeProvider,
+  ThemeSwitcher,
   ThemeToggle,
   ThinkingBlock,
   ThreadBubble,

package/dist/components/infinite-plane/infinite-plane.js

@@ -25,13 +25,13 @@ const buildBackground = (input) => {
   const pos = `${input.translate.x}px ${input.translate.y}px`;
   if (input.pattern === "grid") {
     return {
-      backgroundImage: "linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--border)) 1px, transparent 1px)",
+      backgroundImage: "linear-gradient(to right, oklch(var(--border)) 1px, transparent 1px), linear-gradient(to bottom, oklch(var(--border)) 1px, transparent 1px)",
       backgroundPosition: pos,
       backgroundSize: `${size}px ${size}px`
     };
   }
   return {
-    backgroundImage: "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)",
+    backgroundImage: "radial-gradient(circle, oklch(var(--border)) 1px, transparent 1px)",
     backgroundPosition: pos,
     backgroundSize: `${size}px ${size}px`
   };

package/dist/components/kbd/kbd.js

@@ -7,7 +7,7 @@ import {
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const kbdVariants = cva(
-  "inline-flex select-none items-center justify-center rounded border border-border bg-muted font-mono font-medium text-foreground shadow-[0_1px_0_0_hsl(var(--border))] [&>svg]:h-3 [&>svg]:w-3",
+  "inline-flex select-none items-center justify-center rounded border border-border bg-muted font-mono font-medium text-foreground shadow-[0_1px_0_0_oklch(var(--border))] [&>svg]:h-3 [&>svg]:w-3",
   {
     defaultVariants: {
       size: "md"

package/dist/components/mdx-content/mdx-content.js

@@ -4,6 +4,7 @@ import * as runtime from "react/jsx-runtime";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { CodeBlock } from "../code-block/code-block";
+import { StaticCode } from "../static-code/static-code";
 const MDXComponents = {
   a: ({ children, href, ...props }) => /* @__PURE__ */ jsx(
     "a",
@@ -26,7 +27,7 @@ const MDXComponents = {
     if (typeof className === "string" && className.startsWith("language-")) {
       const language = className.replace(/^language-/, "");
       const text = typeof children === "string" ? children.replace(/\n$/, "") : String(children ?? "");
-      return /* @__PURE__ */ jsx(CodeBlock, { language, children: text });
+      return /* @__PURE__ */ jsx(StaticCode, { code: text, language });
     }
     return /* @__PURE__ */ jsx(
       "code",

package/dist/components/object-card/object-card.js

@@ -94,14 +94,14 @@ const ObjectCard = forwardRef(
     "article",
     {
       className: cn(
-        "group relative flex min-w-[320px] max-w-[420px] flex-col gap-4 rounded-[1.5rem] border border-border/70 bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_hsl(var(--foreground)/0.08)] transition-transform duration-200 hover:-translate-y-0.5",
+        "group relative flex min-w-[320px] max-w-[420px] flex-col gap-4 rounded-[1.5rem] border border-border/70 bg-[linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_oklch(var(--foreground)/0.08)] transition-transform duration-200 hover:-translate-y-0.5",
         className
       ),
       "data-state": state,
       ref,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-5 top-0 h-px bg-[linear-gradient(90deg,transparent,hsl(var(--foreground)/0.22),transparent)]" }),
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-5 top-0 h-px bg-[linear-gradient(90deg,transparent,oklch(var(--foreground)/0.22),transparent)]" }),
         /* @__PURE__ */ jsx(
           ObjectCardHeader,
           {

package/dist/components/overview-board/overview-board.js

@@ -28,7 +28,7 @@ const OverviewCard = forwardRef(
     "section",
     {
       className: cn(
-        "flex min-h-[172px] flex-col gap-4 rounded-2xl border p-5 shadow-[0_8px_30px_hsl(var(--foreground)/0.06)] backdrop-blur-xl",
+        "flex min-h-[172px] flex-col gap-4 rounded-2xl border p-5 shadow-[0_8px_30px_oklch(var(--foreground)/0.06)] backdrop-blur-xl",
         toneClassNames[tone],
         className
       ),

package/dist/components/sidebar-toggle/sidebar-toggle.js

@@ -12,6 +12,7 @@ function SidebarToggle({
     /* @__PURE__ */ jsx(
       Button,
       {
+        "aria-label": open ? "Close menu" : "Open menu",
         className: cn("lg:hidden", className),
         onClick: onToggle,
         size: "icon",
@@ -22,6 +23,7 @@ function SidebarToggle({
     /* @__PURE__ */ jsx(
       Button,
       {
+        "aria-label": "Toggle sidebar",
         className: cn("hidden lg:flex", className),
         onClick: onToggle,
         size: "icon",

package/dist/components/static-code/index.js

@@ -0,0 +1,4 @@
+import { StaticCode } from "./static-code";
+export {
+  StaticCode
+};

package/dist/components/static-code/static-code-copy.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { Button } from "../button/button";
+function StaticCodeCopy({ value }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": copied ? "Copied" : "Copy code",
+      className: "absolute right-2 top-2 size-8",
+      onClick: handleCopy,
+      size: "icon",
+      variant: "ghost",
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
+    }
+  );
+}
+export {
+  StaticCodeCopy
+};

package/dist/components/static-code/static-code.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { cn } from "../../lib/utils";
+import { StaticCodeCopy } from "./static-code-copy";
+function StaticCode({
+  className,
+  code,
+  language = "tsx"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative overflow-x-auto rounded-lg border border-border bg-[#282c34]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          SyntaxHighlighter,
+          {
+            customStyle: {
+              background: "transparent",
+              fontSize: "0.875rem",
+              margin: 0,
+              padding: "1rem"
+            },
+            language,
+            PreTag: "div",
+            style: oneDark,
+            children: code
+          }
+        ),
+        /* @__PURE__ */ jsx(StaticCodeCopy, { value: code })
+      ]
+    }
+  );
+}
+export {
+  StaticCode
+};

package/dist/components/terminal/terminal.js

@@ -59,6 +59,7 @@ function Terminal({
       copyable && commands.length > 0 ? /* @__PURE__ */ jsx(
         Button,
         {
+          "aria-label": copied ? "Copied" : "Copy commands",
           className: "absolute top-2 right-2 size-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
           onClick: handleCopy,
           size: "icon",
@@ -125,6 +126,7 @@ function SimpleTerminal({
       commands.length > 0 && /* @__PURE__ */ jsx(
         Button,
         {
+          "aria-label": copied ? "Copied" : "Copy commands",
           className: "absolute top-2 right-2 size-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
           onClick: handleCopy,
           size: "icon",

package/dist/components/theme-preset-provider/index.js

@@ -0,0 +1,4 @@
+import { ThemePresetProvider } from "./theme-preset-provider";
+export {
+  ThemePresetProvider
+};

package/dist/components/theme-preset-provider/theme-preset-provider.js

@@ -0,0 +1,55 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import {
+  CUSTOM_THEME_NAME,
+  DEFAULT_THEME_PRESET,
+  isThemePresetName,
+  THEME_CUSTOM_CSS_STORAGE_KEY,
+  THEME_CUSTOM_STYLE_ID,
+  THEME_PRESET_STORAGE_KEY
+} from "../../lib/theme-presets";
+import { setThemePreset } from "../../lib/use-theme-preset";
+const FOUC_SCRIPT = `(function(){try{var v=localStorage.getItem(${JSON.stringify(
+  THEME_PRESET_STORAGE_KEY
+)});if(!v||v===${JSON.stringify(
+  DEFAULT_THEME_PRESET
+)})return;document.documentElement.setAttribute("data-theme",v);if(v===${JSON.stringify(
+  CUSTOM_THEME_NAME
+)}){var c=localStorage.getItem(${JSON.stringify(
+  THEME_CUSTOM_CSS_STORAGE_KEY
+)});if(c){var s=document.createElement("style");s.id=${JSON.stringify(
+  THEME_CUSTOM_STYLE_ID
+)};s.textContent=c;document.head.appendChild(s);}}}catch(e){}})();`;
+function ThemePresetProvider({
+  children,
+  defaultPreset
+}) {
+  useEffect(() => {
+    if (!defaultPreset || defaultPreset === DEFAULT_THEME_PRESET) {
+      return;
+    }
+    let stored = null;
+    try {
+      stored = window.localStorage.getItem(THEME_PRESET_STORAGE_KEY);
+    } catch {
+      stored = null;
+    }
+    if (!stored && isThemePresetName(defaultPreset)) {
+      setThemePreset(defaultPreset);
+    }
+  }, [defaultPreset]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "script",
+      {
+        dangerouslySetInnerHTML: { __html: FOUC_SCRIPT },
+        suppressHydrationWarning: true
+      }
+    ),
+    children
+  ] });
+}
+export {
+  ThemePresetProvider
+};

package/dist/components/theme-switcher/index.js

@@ -0,0 +1,4 @@
+import { ThemeSwitcher } from "./theme-switcher";
+export {
+  ThemeSwitcher
+};

package/dist/components/theme-switcher/theme-switcher.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMounted } from "../../lib/use-mounted";
+import { useThemePreset } from "../../lib/use-theme-preset";
+import { cn } from "../../lib/utils";
+function ThemeSwitcher({ className }) {
+  const mounted = useMounted();
+  const { preset, presets, setPreset } = useThemePreset();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": "Theme preset",
+      className: cn("flex items-center gap-1.5", className),
+      role: "radiogroup",
+      children: presets.map((item) => {
+        const active = mounted && preset === item.name;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-checked": active,
+            "aria-label": item.label,
+            className: cn(
+              "size-6 rounded-full border transition-transform hover:scale-110",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              active ? "border-foreground ring-2 ring-ring ring-offset-2 ring-offset-background" : "border-border"
+            ),
+            onClick: () => {
+              setPreset(item.name);
+            },
+            role: "radio",
+            style: { backgroundColor: item.swatch },
+            title: item.label,
+            type: "button"
+          },
+          item.name
+        );
+      })
+    }
+  );
+}
+export {
+  ThemeSwitcher
+};

package/dist/components/viewport-bookmarks/viewport-bookmarks.js

@@ -51,7 +51,9 @@ const RowBody = (props) => {
       {
         "aria-hidden": "true",
         className: "size-1.5 rounded-full",
-        style: { backgroundColor: bookmark.color ?? "hsl(var(--foreground))" }
+        style: {
+          backgroundColor: bookmark.color ?? "oklch(var(--foreground))"
+        }
       }
     ),
     /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col text-left", children: [