@vllnt/ui 0.2.1-canary.61cce77 → 0.2.1-canary.63297c5

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/activity-log/activity-log.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo, useState } from "react";
 import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Avatar, AvatarFallback } from "../avatar";
+import { Avatar, AvatarFallback } from "../avatar/avatar";
 import { Badge } from "../badge";
 import { Button } from "../button";
 import {

package/dist/components/ai-chat-input/ai-chat-input.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { LoaderCircle, SendHorizontal } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import { Textarea } from "../textarea";
 const formShellVariants = cva(
   "rounded-2xl border border-border/70 bg-background shadow-sm"

package/dist/components/ai-message-bubble/ai-message-bubble.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
-import { Avatar, AvatarFallback } from "../avatar";
+import { Avatar, AvatarFallback } from "../avatar/avatar";
 import { Badge } from "../badge";
 const bubbleVariants = cva(
   "rounded-2xl border px-4 py-3 shadow-sm transition-colors",

package/dist/components/ai-tool-call-display/ai-tool-call-display.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { AlertCircle, CheckCircle2, Clock3, Wrench } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 const statusVariants = cva(
   "rounded-full px-2 py-0 text-[10px] uppercase tracking-wide",
   {

package/dist/components/animated-text/animated-text.js

@@ -87,13 +87,16 @@ function buildRevealPlan(direction, length, randomness) {
   return revealPlan;
 }
 function useRevealProgress(active, length, stagger) {
-  const [progress, setProgress] = React.useState(0);
+  const [progress, setProgress] = React.useState(() => active ? 0 : length);
+  const [revealKey, setRevealKey] = React.useState({ active, length, stagger });
+  if (revealKey.active !== active || revealKey.length !== length || revealKey.stagger !== stagger) {
+    setRevealKey({ active, length, stagger });
+    setProgress(active ? 0 : length);
+  }
   React.useEffect(() => {
     if (!active) {
-      setProgress(length);
       return;
     }
-    setProgress(0);
     const revealInterval = window.setInterval(
       () => {
         setProgress((current) => {

package/dist/components/annotation/annotation.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover";
 const toneClasses = {
   amber: "bg-amber-500/20 text-amber-950 dark:text-amber-100",
   emerald: "bg-emerald-500/20 text-emerald-950 dark:text-emerald-100",

package/dist/components/avatar-group/avatar-group.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
-import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar";
 const avatarGroupVariants = cva("flex items-center", {
   defaultVariants: {
     size: "md"

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,

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

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Activity, Bot, Compass, Layers3, Sparkles } from "lucide-react";
-import { BottomBar } from "../bottom-bar";
+import { BottomBar } from "../bottom-bar/bottom-bar";
 import { Button } from "../button";
 import { CanvasView } from "../canvas-view";
 import { ChatDockSection } from "../chat-dock-section";
@@ -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/category-filter/category-filter.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 function slugify(text) {
   return text.toLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[^\s\w-]/g, "").trim().replaceAll(/\s+/g, "-").replaceAll(/-+/g, "-").replaceAll(/^-+|-+$/g, "");
 }

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { ArrowUpRight, MessageSquareText } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const ChatDockSection = forwardRef(
   ({
     className,
@@ -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/chronological-timeline/chronological-timeline.js

@@ -171,37 +171,42 @@ const ChronoEvent = forwardRef(
     const handleFocusEvent = useCallback(() => {
       setActiveId(eventId);
     }, [eventId, setActiveId]);
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        "aria-labelledby": `${eventId}-title`,
-        className: cn(
-          "group relative grid gap-4 py-6 md:grid-cols-[1fr_auto_1fr] md:gap-8",
-          className
-        ),
-        "data-event-id": eventId,
-        "data-featured": featured ? "true" : void 0,
-        id: eventId,
-        onFocus: handleFocusEvent,
-        ref: refCallback,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(DateColumn, { date }),
-          /* @__PURE__ */ jsx(RailColumn, { featured }),
-          /* @__PURE__ */ jsx(
-            EventCard,
-            {
-              date,
-              eventId,
-              featured,
-              media,
-              subtitle,
-              title,
-              children
-            }
-          )
-        ]
-      }
+    return (
+      /* Passive focus tracking: the container observes focus bubbling from
+         its interactive children to drive the scroll-spy active state. */
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      /* @__PURE__ */ jsxs(
+        "article",
+        {
+          "aria-labelledby": `${eventId}-title`,
+          className: cn(
+            "group relative grid gap-4 py-6 md:grid-cols-[1fr_auto_1fr] md:gap-8",
+            className
+          ),
+          "data-event-id": eventId,
+          "data-featured": featured ? "true" : void 0,
+          id: eventId,
+          onFocus: handleFocusEvent,
+          ref: refCallback,
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx(DateColumn, { date }),
+            /* @__PURE__ */ jsx(RailColumn, { featured }),
+            /* @__PURE__ */ jsx(
+              EventCard,
+              {
+                date,
+                eventId,
+                featured,
+                media,
+                subtitle,
+                title,
+                children
+              }
+            )
+          ]
+        }
+      )
     );
   }
 );

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

@@ -1,13 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import { Check, Copy } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-  oneDark,
-  oneLight
-} from "react-syntax-highlighter/dist/esm/styles/prism";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
 function extractTextFromChildren(children) {
@@ -37,12 +36,31 @@ function CodeBlock({
   showLanguage = false
 }) {
   const [copied, setCopied] = useState(false);
+  const [highlighter, setHighlighter] = useState(
+    null
+  );
   const { systemTheme, theme } = useTheme();
   const resolvedTheme = theme === "system" ? systemTheme : theme;
   const isDark = resolvedTheme !== "light";
-  const codeStyle = isDark ? oneDark : oneLight;
   const code = extractTextFromChildren(children);
   const scrollRef = useRef(null);
+  useEffect(() => {
+    let active = true;
+    void Promise.all([
+      import("react-syntax-highlighter"),
+      import("react-syntax-highlighter/dist/esm/styles/prism")
+    ]).then(([module_, styles]) => {
+      if (!active) return;
+      setHighlighter({
+        oneDark: styles.oneDark,
+        oneLight: styles.oneLight,
+        SyntaxHighlighter: module_.Prism
+      });
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
   useEffect(() => {
     const element = scrollRef.current;
     if (!element) return;
@@ -66,6 +84,8 @@ function CodeBlock({
       setCopied(false);
     }, 2e3);
   };
+  const SyntaxHighlighter = highlighter?.SyntaxHighlighter;
+  const codeStyle = isDark ? highlighter?.oneDark : highlighter?.oneLight;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -79,7 +99,7 @@ function CodeBlock({
           className: "relative overflow-x-auto overflow-y-hidden touch-pan-y",
           ref: scrollRef,
           children: [
-            /* @__PURE__ */ jsx(
+            SyntaxHighlighter ? /* @__PURE__ */ jsx(
               SyntaxHighlighter,
               {
                 codeTagProps: {
@@ -90,7 +110,7 @@ function CodeBlock({
                   }
                 },
                 customStyle: {
-                  background: "hsl(var(--background))",
+                  background: "oklch(var(--background))",
                   fontSize: "0.875rem",
                   margin: 0,
                   minWidth: "fit-content",
@@ -101,12 +121,13 @@ function CodeBlock({
                 style: codeStyle,
                 children: code
               }
-            ),
+            ) : /* @__PURE__ */ jsx("pre", { className: "m-0 min-w-fit overflow-y-hidden p-4 font-mono text-sm", children: /* @__PURE__ */ jsx("code", { className: "block bg-transparent", children: code }) }),
             /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex items-center gap-2", children: [
               showLanguage ? /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) : null,
               /* @__PURE__ */ jsx(
                 Button,
                 {
+                  "aria-label": copied ? "Copied" : "Copy code",
                   className: "size-8",
                   onClick: handleCopy,
                   size: "icon",

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

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Check, Code, Copy, FileCode } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function CodeLine({ highlightLines, line, lineNumber }) {
   const isHighlighted = highlightLines.includes(lineNumber);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex", isHighlighted && "bg-primary/10 -mx-4 px-4"), children: [
@@ -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/combobox/combobox.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import {
   Command,
   CommandEmpty,
@@ -15,11 +15,6 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 function useComboboxValue(value, onValueChange) {
   const [internalValue, setInternalValue] = React.useState(value ?? "");
-  React.useEffect(() => {
-    if (value !== void 0) {
-      setInternalValue(value);
-    }
-  }, [value]);
   const resolvedValue = value ?? internalValue;
   const setResolvedValue = (nextValue) => {
     if (value === void 0) {

package/dist/components/completion-dialog/completion-dialog.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function DialogContent({
   as: Heading = "h2",
   cancelLabel = "Skip",

package/dist/components/connector-edge/connector-edge.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-import { EdgeLabel } from "../edge-label";
+import { EdgeLabel } from "../edge-label/edge-label";
 const strokeClasses = {
   active: "stroke-sky-500",
   blocked: "stroke-amber-500",

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

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const DEFAULT_LABELS = {
   continueLabel: "Continue Tutorial",
   startLabel: "Start Tutorial",

package/dist/components/conversation-thread/conversation-thread.js

@@ -12,7 +12,7 @@ import {
 } from "react";
 import { ArrowDown, RefreshCw, ThumbsDown, ThumbsUp } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { ThinkingBlock } from "../thinking-block";
+import { ThinkingBlock } from "../thinking-block/thinking-block";
 const ConversationThreadContext = createContext(null);
 function useConversationThreadContext() {
   const ctx = useContext(ConversationThreadContext);

package/dist/components/countdown-timer/countdown-timer.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,

package/dist/components/data-table/data-table.js

@@ -11,7 +11,7 @@ import {
 } from "@tanstack/react-table";
 import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import { Checkbox } from "../checkbox";
 import { Input } from "../input";
 import {

package/dist/components/date-picker/date-picker.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CalendarIcon } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import { Calendar } from "../calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 const defaultDateFormatter = new Intl.DateTimeFormat("en-US", {
@@ -25,11 +25,6 @@ const DatePicker = React.forwardRef(
       value
     );
     const selectedDate = value ?? internalValue;
-    React.useEffect(() => {
-      if (value !== void 0) {
-        setInternalValue(value);
-      }
-    }, [value]);
     const handleSelect = (nextDate) => {
       if (value === void 0) {
         setInternalValue(nextDate);

package/dist/components/exercise/exercise.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Check, Dumbbell, Eye, EyeOff } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const difficultyConfig = {
   easy: { className: "text-green-600 dark:text-green-400", label: "Easy" },
   hard: { className: "text-red-600 dark:text-red-400", label: "Hard" },

package/dist/components/file-upload/file-upload.js

@@ -3,16 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { FileUp, UploadCloud, X } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function useFileUploadState(controlledFiles, multiple, onFilesChange) {
   const [internalFiles, setInternalFiles] = React.useState(
     controlledFiles ?? []
   );
-  React.useEffect(() => {
-    if (controlledFiles !== void 0) {
-      setInternalFiles(controlledFiles);
-    }
-  }, [controlledFiles]);
   const resolvedFiles = controlledFiles ?? internalFiles;
   const updateFiles = React.useCallback(
     (nextFiles) => {