@vllnt/ui 0.2.1-canary.f8033e5 → 0.3.0-canary.00b20d6

package/CHANGELOG.md

@@ -4,6 +4,45 @@ All notable changes to `@vllnt/ui` are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+> Target version: **`0.3.0`** — shipping as `0.3.0-canary.<sha>` on the npm `canary` tag on every merge to main. The stable `latest` release is gated on the [ROADMAP.md](../../ROADMAP.md) shipping criteria and is not yet published.
+
+### Added
+
+- **Release intelligence surface** — `/changelog`, `/releases`, `/rss.xml`, and `/atom.xml` expose one changelog source through HTML, GitHub release cards, and feed readers. `/docs/changelog` redirects to `/changelog`.
+- **Hooks + utility primitives** — `CopyButton` (+ `useCopyToClipboard` hook), `Banner` + `BannerAction`, `Kbd`, `EmptyState`, `DocumentSiblingNav`.
+- **Pricing + identity cards** — `PricingTable` + `PricingPlan`, `HistoricalFigureCard`, `CivilizationCard` (+ `CivilizationComparison`).
+- **Newsletter** — `NewsletterSignup` (state-machine driven submit flow).
+- **AI compound families** — `ModelComparison` (+ `Column`, `Meta`, `Vote`), `PromptTemplates`, `AgentActivity`, `AISidebar`, `AIArtifact`.
+- **Era / financial** — `EraComparison`, `TransactionList`.
+- **Forms** — `Form`, `MultiSelect`, `SegmentedControl`, `TagsInput`, `AutoReload`.
+- **Educational** — `KnowledgeCheck` (inline question runner).
+- **Charts + timelines** — `GanttChart`, `ParallelTimeline`, `Timeline` + `TimelineItem`, `HistoricTimeline`, `InteractiveTimeline`, `ChronologicalTimeline`, `TreeView`.
+- **Document + reading** — `PrimarySourceViewer` compound family.
+- **Maps + geography** — `Map2D`, `ChoroplethMap`, `RouteMap`, `HeatMapOverlay`, `GeographyQuizMap`, `MapTimeline`, `StoryMap`, `Globe3D`.
+- **Canvas foundation** — `CanvasShell`, `CanvasView`, `InfinitePlane`, `ViewportBookmarks`, `WorldBreadcrumbs`, `TopBar`, `LeftRail`, `RightDock`, `ZoomHud`, `MiniMapPanel`, `WorkspaceSwitcher`.
+- **Canvas selection + manipulation** — `SelectionHalo`, `SnapGuides`, `FloatingToolbar`, `MultiSelectLasso`, `FollowMode`, `HandoffBeacon`.
+- **Canvas spatial objects** — `ObjectCard`, `ObjectHandle`, `AnchorPort`, `ConnectorEdge`, `EdgeLabel`, `GroupHull`.
+- **Canvas collaboration primitives** — `LiveCursor`, `CommentPin`, `PresenceSyncIndicator`, `PresenceStack`, `SelectionPresence`, `ThreadBubble`.
+- **Inspector + dock panels** — `PropertySection`, `ObjectInspector`, `RelationshipInspector`, `RuntimeOverviewPanel`, `RoutingAssignmentPanel`, `PolicyDeliveryPanel`.
+- **Runtime overlays** — `AlertPulse`, `ThresholdRing`, `StickyMetric`, `HeatOverlay`, `StateBadgeOverlay`, `MetricCluster`, `JarvisDock`, `ContextLens`.
+- **Time navigation** — `TimelineScrubber`, `PlaybackGhost`, `BottomActivityStrip`, `RunTimeline`.
+- Total component count: **225** (up from 140).
+
+- **OKLCH theming system** — color tokens migrated to the OKLCH color space, with 13 runtime theme presets (`default`, `matrix`, `dracula`, `synthwave`, `tron`, `cyberpunk`, `nord`, `claude`, `chatgpt`, `gemini`, `dusk`, `cyberlime`, `aura`). New public theme exports from `@vllnt/ui`: `THEME_PRESETS`, `DEFAULT_THEME_PRESET`, `CUSTOM_THEME_NAME`, `isThemePresetName`, the `ThemePreset` and `ThemePresetName` types, plus the `useThemePreset` hook (with `UseThemePresetResult`), `setThemePreset`, and `setCustomTheme` for runtime preset switching and user-supplied custom themes.
+
+- **A11y heading-level override** — every title-bearing component (`ProfileSection`, `FAQ`, `Slideshow`, `WorldClockBar`, `TableOfContentsPanel`, `TableOfContents`, `KeyboardShortcutsHelp`, `Watchlist`, `OrderBook`, `HorizontalScrollRow`, `MarketTreemap`, `ActivityHeatmap`, `Glossary`, `StatusBoard`, `CodePlayground`, `Comparison`, `Quiz`, `Exercise`, `ShareSection`, `CompletionDialog`, `Checklist`, `LearningObjectives`, `CandlestickChart`, `StepByStep`) accepts an `as` prop (`"h1"`–`"h6"`); multi-title components (`ContentIntro`, `TutorialComplete`) expose `titleAs` + `tocLabelAs` / `sectionLabelAs`. Defaults preserve existing heading tags. `HeadingTag` is re-exported from `@vllnt/ui`.
+
+### Changed
+
+- Registry installs use a **hybrid CLI strategy** — leaf component source is inlined, sibling registry items resolve via `@vllnt/ui` to keep installs minimal and dedupe shared primitives.
+
+### Notes
+
+- `ROADMAP.md` added at repo root tracking 50 open issues across 8 phases gating the `0.3.0` cut.
+- `0.3.0` requires the codebase-health gate (`react-doctor` CI + 0 errors), the agent-first surface (`/llms.txt`, `/mcp`, sitemap, JSON-LD), and the rebuilt landing page before shipping.
+
 ## [0.2.1] - 2026-04-21
 
 ### Fixed

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/accordion/accordion.js

@@ -104,7 +104,7 @@ function AccordionTrigger({
           "span",
           {
             className: cn(
-              "h-4 w-4 flex-shrink-0 transition-transform duration-200",
+              "size-4 flex-shrink-0 transition-transform duration-200",
               isOpen && "rotate-180"
             ),
             children: icon
@@ -113,7 +113,7 @@ function AccordionTrigger({
           "svg",
           {
             className: cn(
-              "h-4 w-4 flex-shrink-0 transition-transform duration-200",
+              "size-4 flex-shrink-0 transition-transform duration-200",
               isOpen && "rotate-180"
             ),
             fill: "none",

package/dist/components/activity-heatmap/activity-heatmap.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { normalizeDate } from "../../lib/format";
 import { cn } from "../../lib/utils";
 const WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 const VISIBLE_DAY_LABELS = /* @__PURE__ */ new Set(["Mon", "Wed", "Fri"]);
@@ -10,12 +11,6 @@ const LEVEL_CLASS_NAMES = [
   "bg-emerald-500/65",
   "bg-emerald-500"
 ];
-function normalizeDate(input) {
-  if (input instanceof Date) {
-    return new Date(input.getTime());
-  }
-  return new Date(input);
-}
 function toUtcDate(date) {
   return new Date(
     Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
@@ -72,19 +67,21 @@ function getGridData(data, endDate, weeks) {
     });
   });
 }
+const MONTH_LABEL_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  timeZone: "UTC"
+});
+const TOOLTIP_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  month: "short",
+  timeZone: "UTC",
+  year: "numeric"
+});
 function formatMonthLabel(date) {
-  return new Intl.DateTimeFormat("en-US", {
-    month: "short",
-    timeZone: "UTC"
-  }).format(date);
+  return MONTH_LABEL_FORMATTER.format(date);
 }
 function formatTooltip(date, count) {
-  const formattedDate = new Intl.DateTimeFormat("en-US", {
-    day: "numeric",
-    month: "short",
-    timeZone: "UTC",
-    year: "numeric"
-  }).format(date);
+  const formattedDate = TOOLTIP_DATE_FORMATTER.format(date);
   return `${count} activity ${count === 1 ? "event" : "events"} on ${formattedDate}`;
 }
 function HeatmapGrid({
@@ -127,15 +124,15 @@ function HeatmapGrid({
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { children: "Less" }),
-      LEVEL_CLASS_NAMES.map((className, index) => /* @__PURE__ */ jsx(
+      LEVEL_CLASS_NAMES.map((className) => /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
-            "h-3 w-3 rounded-[3px] border border-border/40",
+            "size-3 rounded-[3px] border border-border/40",
             className
           )
         },
-        `legend-${index}`
+        `legend-${className}`
       )),
       /* @__PURE__ */ jsx("span", { children: "More" })
     ] })
@@ -143,6 +140,7 @@ function HeatmapGrid({
 }
 const ActivityHeatmap = React.forwardRef(
   ({
+    as: Heading = "h2",
     className,
     data,
     description,
@@ -155,7 +153,7 @@ const ActivityHeatmap = React.forwardRef(
     const gridData = getGridData(data, normalizedEndDate, weeks);
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ref, ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+        /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold tracking-tight", children: title }),
         description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
       ] }),
       /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border bg-card p-4 shadow-sm", children: /* @__PURE__ */ jsx(HeatmapGrid, { gridData, weeks }) })

package/dist/components/activity-log/activity-log.js

@@ -3,18 +3,18 @@ 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 { Badge } from "../badge";
-import { Button } from "../button";
+import { Avatar, AvatarFallback } from "../avatar/avatar";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle
-} from "../card";
-import { ScrollArea } from "../scroll-area";
-import { Separator } from "../separator";
+} from "../card/card";
+import { ScrollArea } from "../scroll-area/scroll-area";
+import { Separator } from "../separator/separator";
 const toneConfig = {
   danger: {
     badgeClassName: "border-destructive/20 bg-destructive/10 text-destructive dark:text-destructive",
@@ -82,7 +82,7 @@ function PaginationControls({
         size: "sm",
         variant: "outline",
         children: [
-          /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }),
           "Previous"
         ]
       }
@@ -111,7 +111,7 @@ function PaginationControls({
         variant: "outline",
         children: [
           "Next",
-          /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
         ]
       }
     )
@@ -132,18 +132,18 @@ function ActivityRow({ item }) {
       {
         "aria-hidden": "true",
         className: cn(
-          "absolute left-4 top-3 h-3 w-3 rounded-full ring-4 ring-background",
+          "absolute left-4 top-3 size-3 rounded-full ring-4 ring-background",
           palette.markerClassName
         )
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background/70 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [
-        /* @__PURE__ */ jsx(Avatar, { className: "h-9 w-9 border bg-muted", children: /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(item.actor) }) }),
+        /* @__PURE__ */ jsx(Avatar, { className: "size-9 border bg-muted", children: /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(item.actor) }) }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: item.actor }),
-            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5 text-muted-foreground" }),
             /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: item.action }),
             item.target ? /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: item.target }) : null
           ] }),

package/dist/components/agent-activity/agent-activity.js

@@ -46,11 +46,11 @@ const STATUS_CLASSES = {
   }
 };
 const DEFAULT_STATUS_ICON = {
-  completed: /* @__PURE__ */ jsx(CheckCircle2, { "aria-hidden": "true", className: "h-4 w-4" }),
-  error: /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": "true", className: "h-4 w-4" }),
-  pending: /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: "h-4 w-4" }),
-  running: /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "h-4 w-4 animate-spin" }),
-  skipped: /* @__PURE__ */ jsx(MinusCircle, { "aria-hidden": "true", className: "h-4 w-4" })
+  completed: /* @__PURE__ */ jsx(CheckCircle2, { "aria-hidden": "true", className: "size-4" }),
+  error: /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": "true", className: "size-4" }),
+  pending: /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: "size-4" }),
+  running: /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 animate-spin" }),
+  skipped: /* @__PURE__ */ jsx(MinusCircle, { "aria-hidden": "true", className: "size-4" })
 };
 const StepContext = createContext({ status: "pending" });
 const DEFAULT_LABELS = {
@@ -59,6 +59,7 @@ const DEFAULT_LABELS = {
   elapsed: "Elapsed",
   expand: "Show details"
 };
+const AgentActivityLabelsContext = createContext(DEFAULT_LABELS);
 const ACTIVITY_LIVE_REGION_ROLE = {
   completed: "status",
   error: "status",
@@ -75,8 +76,11 @@ const AgentActivity = forwardRef(
       status = "idle",
       ...rest
     } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return /* @__PURE__ */ jsxs(
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    return /* @__PURE__ */ jsx(AgentActivityLabelsContext.Provider, { value: resolvedLabels, children: /* @__PURE__ */ jsxs(
       "section",
       {
         "aria-live": status === "running" ? "polite" : "off",
@@ -103,7 +107,7 @@ const AgentActivity = forwardRef(
           /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-2", children })
         ]
       }
-    );
+    ) });
   }
 );
 AgentActivity.displayName = "AgentActivity";
@@ -148,7 +152,7 @@ function StepRow({
       {
         "aria-hidden": "true",
         className: cn(
-          "mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center",
+          "mt-0.5 inline-flex size-5 shrink-0 items-center justify-center",
           iconClass
         ),
         children: icon
@@ -161,7 +165,7 @@ function StepRow({
         "aria-controls": detailsId,
         "aria-expanded": open,
         "aria-label": open ? labels.collapse : labels.expand,
-        className: "ml-auto inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className: "ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         onClick: onToggle,
         type: "button",
         children: /* @__PURE__ */ jsx(
@@ -169,7 +173,7 @@ function StepRow({
           {
             "aria-hidden": "true",
             className: cn(
-              "h-4 w-4 transition-transform",
+              "size-4 transition-transform",
               open ? "rotate-180" : "rotate-0"
             )
           }
@@ -193,6 +197,7 @@ const AgentStep = forwardRef(
     const hasDetails = split.body.length > 0;
     const [open, setOpen] = useState(defaultOpen);
     const detailsId = useId();
+    const labels = useContext(AgentActivityLabelsContext);
     const handleToggle = useCallback(() => {
       setOpen((value) => !value);
     }, []);
@@ -222,15 +227,16 @@ const AgentStep = forwardRef(
               header: split.header,
               icon: resolvedIcon,
               iconClass: palette.iconClass,
-              labels: DEFAULT_LABELS,
+              labels,
               onToggle: handleToggle,
               open
             }
           ),
-          hasDetails && open ? /* @__PURE__ */ jsx(
+          hasDetails ? /* @__PURE__ */ jsx(
             "div",
             {
               className: "border-t border-border/60 px-3 py-2 text-xs",
+              hidden: !open,
               id: detailsId,
               children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pl-8", children: split.body })
             }

package/dist/components/ai-artifact/ai-artifact.js

@@ -5,7 +5,9 @@ import {
   forwardRef,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
+  useRef,
   useState
 } from "react";
 import {
@@ -121,6 +123,24 @@ function ArtifactHeader({
     subtitle ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtitle }) : null
   ] });
 }
+function useCopiedFlag() {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(void 0);
+  useEffect(
+    () => () => {
+      clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const flagCopied = useCallback(() => {
+    setCopied(true);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setCopied(false);
+    }, COPIED_TIMEOUT_MS);
+  }, []);
+  return { copied, flagCopied };
+}
 function useArtifactController(options) {
   const {
     defaultFullscreen,
@@ -133,7 +153,7 @@ function useArtifactController(options) {
     value
   } = options;
   const [fullscreen, setFullscreen] = useState(defaultFullscreen);
-  const [copied, setCopied] = useState(false);
+  const { copied, flagCopied } = useCopiedFlag();
   const resolvedFilename = useMemo(
     () => buildFilename({ filename, language, title, type }),
     [filename, language, title, type]
@@ -141,12 +161,9 @@ function useArtifactController(options) {
   const copy = useCallback(async () => {
     const ok = await writeToClipboard(value);
     if (!ok) return false;
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, COPIED_TIMEOUT_MS);
+    flagCopied();
     return true;
-  }, [value]);
+  }, [flagCopied, value]);
   const download = useCallback(() => {
     downloadValueAsFile(value, resolvedFilename);
   }, [resolvedFilename, value]);
@@ -259,7 +276,7 @@ const AIArtifactToolbar = forwardRef(({ className, ...rest }, ref) => /* @__PURE
 AIArtifactToolbar.displayName = "AIArtifactToolbar";
 const AIArtifactCopyButton = forwardRef(({ className, onClick, ...rest }, ref) => {
   const { copied, copy, labels } = useAIArtifact();
-  const handleClick = useCallback(
+  const handleCopyArtifact = useCallback(
     (event) => {
       onClick?.(event);
       if (event.defaultPrevented) return;
@@ -271,21 +288,21 @@ const AIArtifactCopyButton = forwardRef(({ className, onClick, ...rest }, ref) =
     Button,
     {
       "aria-label": copied ? labels.copied : labels.copy,
-      className: cn("h-8 w-8", className),
-      onClick: handleClick,
+      className: cn("size-8", className),
+      onClick: handleCopyArtifact,
       ref,
       size: "icon",
       type: "button",
       variant: "ghost",
       ...rest,
-      children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true", className: "size-4" })
     }
   );
 });
 AIArtifactCopyButton.displayName = "AIArtifactCopyButton";
 const AIArtifactEditButton = forwardRef(({ className, onClick, ...rest }, ref) => {
   const { hasOnEdit, labels, onEdit } = useAIArtifact();
-  const handleClick = useCallback(
+  const handleEditArtifact = useCallback(
     (event) => {
       onClick?.(event);
       if (event.defaultPrevented) return;
@@ -298,21 +315,21 @@ const AIArtifactEditButton = forwardRef(({ className, onClick, ...rest }, ref) =
     Button,
     {
       "aria-label": labels.edit,
-      className: cn("h-8 w-8", className),
-      onClick: handleClick,
+      className: cn("size-8", className),
+      onClick: handleEditArtifact,
       ref,
       size: "icon",
       type: "button",
       variant: "ghost",
       ...rest,
-      children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "size-4" })
     }
   );
 });
 AIArtifactEditButton.displayName = "AIArtifactEditButton";
 const AIArtifactDownloadButton = forwardRef(({ className, onClick, ...rest }, ref) => {
   const { download, labels } = useAIArtifact();
-  const handleClick = useCallback(
+  const handleDownloadArtifact = useCallback(
     (event) => {
       onClick?.(event);
       if (event.defaultPrevented) return;
@@ -324,21 +341,21 @@ const AIArtifactDownloadButton = forwardRef(({ className, onClick, ...rest }, re
     Button,
     {
       "aria-label": labels.download,
-      className: cn("h-8 w-8", className),
-      onClick: handleClick,
+      className: cn("size-8", className),
+      onClick: handleDownloadArtifact,
       ref,
       size: "icon",
       type: "button",
       variant: "ghost",
       ...rest,
-      children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true", className: "size-4" })
     }
   );
 });
 AIArtifactDownloadButton.displayName = "AIArtifactDownloadButton";
 const AIArtifactFullscreenButton = forwardRef(({ className, onClick, ...rest }, ref) => {
   const { fullscreen, labels, toggleFullscreen } = useAIArtifact();
-  const handleClick = useCallback(
+  const handleToggleArtifactFullscreen = useCallback(
     (event) => {
       onClick?.(event);
       if (event.defaultPrevented) return;
@@ -351,14 +368,14 @@ const AIArtifactFullscreenButton = forwardRef(({ className, onClick, ...rest },
     {
       "aria-label": fullscreen ? labels.exitFullscreen : labels.enterFullscreen,
       "aria-pressed": fullscreen,
-      className: cn("h-8 w-8", className),
-      onClick: handleClick,
+      className: cn("size-8", className),
+      onClick: handleToggleArtifactFullscreen,
       ref,
       size: "icon",
       type: "button",
       variant: "ghost",
       ...rest,
-      children: fullscreen ? /* @__PURE__ */ jsx(Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: fullscreen ? /* @__PURE__ */ jsx(Minimize2, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": "true", className: "size-4" })
     }
   );
 });

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

@@ -3,8 +3,8 @@ 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 { Textarea } from "../textarea";
+import { Button } from "../button/button";
+import { Textarea } from "../textarea/textarea";
 const formShellVariants = cva(
   "rounded-2xl border border-border/70 bg-background shadow-sm"
 );
@@ -36,7 +36,7 @@ function AIChatInputFooter({
         disabled: isSubmitDisabled,
         type: "submit",
         children: [
-          isSubmitting ? /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(SendHorizontal, { className: "mr-2 h-4 w-4" }),
+          isSubmitting ? /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 size-4 animate-spin" }) : /* @__PURE__ */ jsx(SendHorizontal, { className: "mr-2 size-4" }),
           submitLabel
         ]
       }
@@ -48,6 +48,7 @@ const AIChatInput = forwardRef(
     className,
     disabled = false,
     helperText,
+    inputLabel = "Chat message",
     isSubmitting = false,
     onSubmit,
     onValueChange,
@@ -72,7 +73,8 @@ const AIChatInput = forwardRef(
           /* @__PURE__ */ jsx(
             Textarea,
             {
-              className: "min-h-[120px] resize-none rounded-xl border-0 bg-transparent px-1 py-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
+              "aria-label": inputLabel,
+              className: "min-h-[120px] resize-none rounded-xl border-0 bg-transparent p-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
               disabled,
               onChange: (event) => {
                 textareaProps?.onChange?.(event);

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

@@ -2,8 +2,8 @@ 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 { Badge } from "../badge";
+import { Avatar, AvatarFallback } from "../avatar/avatar";
+import { Badge } from "../badge/badge";
 const bubbleVariants = cva(
   "rounded-2xl border px-4 py-3 shadow-sm transition-colors",
   {
@@ -73,7 +73,7 @@ const AIMessageBubble = forwardRef(
               isUser ? "flex-row-reverse text-right" : "flex-row"
             ),
             children: [
-              /* @__PURE__ */ jsx(Avatar, { className: "mt-0.5 h-8 w-8 border border-border/70", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-[11px] font-medium uppercase text-muted-foreground", children: fallbackLabel }) }),
+              /* @__PURE__ */ jsx(Avatar, { className: "mt-0.5 size-8 border border-border/70", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-[11px] font-medium uppercase text-muted-foreground", children: fallbackLabel }) }),
               /* @__PURE__ */ jsxs(
                 "div",
                 {