@vllnt/ui 0.3.0-canary.a42d8f4 → 0.3.0-canary.e1218e7

package/CHANGELOG.md

@@ -30,6 +30,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - **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

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

@@ -4,17 +4,17 @@ import { forwardRef, useMemo, useState } from "react";
 import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Avatar, AvatarFallback } from "../avatar/avatar";
-import { Badge } from "../badge";
-import { Button } from "../button";
+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",

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

@@ -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";
@@ -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]);

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

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { LoaderCircle, SendHorizontal } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
-import { Textarea } from "../textarea";
+import { Textarea } from "../textarea/textarea";
 const formShellVariants = cva(
   "rounded-2xl border border-border/70 bg-background shadow-sm"
 );
@@ -48,6 +48,7 @@ const AIChatInput = forwardRef(
     className,
     disabled = false,
     helperText,
+    inputLabel = "Chat message",
     isSubmitting = false,
     onSubmit,
     onValueChange,
@@ -72,6 +73,7 @@ const AIChatInput = forwardRef(
           /* @__PURE__ */ jsx(
             Textarea,
             {
+              "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) => {

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

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

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

@@ -126,6 +126,7 @@ const AISidebar = forwardRef(
           className
         ),
         "data-state": openState ? "open" : "closed",
+        inert: !openState,
         ref,
         style: { width: `${width.toString()}px` },
         ...rest,

package/dist/components/auto-reload/auto-reload.js

@@ -180,13 +180,19 @@ function useAutoReloadController(options) {
     defaultReloadAmountCents,
     defaultThresholdCents,
     enabled: controlledEnabled,
+    onReloadAmountChange,
+    onThresholdChange,
     onToggle,
     reloadAmountCents: controlledReload,
     thresholdCents: controlledThreshold
   } = options;
   const [uncontrolledEnabled, setUncontrolledEnabled] = useState(defaultEnabled);
-  const [threshold, setThreshold] = useState(defaultThresholdCents);
-  const [reloadAmount, setReloadAmount] = useState(defaultReloadAmountCents);
+  const [uncontrolledThreshold, setUncontrolledThreshold] = useState(
+    defaultThresholdCents
+  );
+  const [uncontrolledReloadAmount, setUncontrolledReloadAmount] = useState(
+    defaultReloadAmountCents
+  );
   const enabled = controlledEnabled ?? uncontrolledEnabled;
   const handleToggle = useCallback(
     (next) => {
@@ -195,13 +201,27 @@ function useAutoReloadController(options) {
     },
     [controlledEnabled, onToggle]
   );
+  const setReloadAmount = useCallback(
+    (next) => {
+      if (controlledReload === void 0) setUncontrolledReloadAmount(next);
+      onReloadAmountChange?.(next);
+    },
+    [controlledReload, onReloadAmountChange]
+  );
+  const setThreshold = useCallback(
+    (next) => {
+      if (controlledThreshold === void 0) setUncontrolledThreshold(next);
+      onThresholdChange?.(next);
+    },
+    [controlledThreshold, onThresholdChange]
+  );
   return {
     enabled,
     handleToggle,
-    reloadAmount: controlledReload ?? reloadAmount,
+    reloadAmount: controlledReload ?? uncontrolledReloadAmount,
     setReloadAmount,
     setThreshold,
-    threshold: controlledThreshold ?? threshold
+    threshold: controlledThreshold ?? uncontrolledThreshold
   };
 }
 const DisabledBanner = forwardRef(
@@ -291,7 +311,9 @@ function useAutoReloadInternals(props) {
     enabled: controlledEnabled,
     labels,
     locale = DEFAULT_LOCALE,
+    onReloadAmountChange,
     onSave,
+    onThresholdChange,
     onToggle,
     reloadAmountCents: controlledReload,
     thresholdCents: controlledThreshold
@@ -308,6 +330,8 @@ function useAutoReloadInternals(props) {
     defaultReloadAmountCents,
     defaultThresholdCents,
     enabled: controlledEnabled,
+    onReloadAmountChange,
+    onThresholdChange,
     onToggle,
     reloadAmountCents: controlledReload,
     thresholdCents: controlledThreshold

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

@@ -7,7 +7,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle
-} from "../card";
+} from "../card/card";
 function ContentCard({
   formatDate,
   href,

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

@@ -79,7 +79,7 @@ function PriceGrid({
         children: formatValue(tick.value)
       }
     )
-  ] }, tick.value));
+  ] }, tick.y));
 }
 function CandleMarks({
   data,
@@ -95,12 +95,12 @@ function CandleMarks({
     const bodyY = Math.min(openY, closeY);
     const bodyHeight = Math.max(Math.abs(openY - closeY), 3);
     const isBullish = candle.close >= candle.open;
-    const fill = isBullish ? "hsl(142 71% 45%)" : "hsl(348 83% 47%)";
-    return /* @__PURE__ */ jsxs("g", { children: [
+    const colorClass = isBullish ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400";
+    return /* @__PURE__ */ jsxs("g", { className: colorClass, children: [
       /* @__PURE__ */ jsx(
         "line",
         {
-          stroke: fill,
+          stroke: "currentColor",
           strokeLinecap: "round",
           strokeWidth: 2,
           x1: centerX,
@@ -112,11 +112,11 @@ function CandleMarks({
       /* @__PURE__ */ jsx(
         "rect",
         {
-          fill,
+          fill: "currentColor",
           fillOpacity: isBullish ? 0.25 : 0.18,
           height: bodyHeight,
           rx: 4,
-          stroke: fill,
+          stroke: "currentColor",
           strokeWidth: 1.5,
           width: metrics.bodyWidth,
           x: centerX - metrics.bodyWidth / 2,
@@ -135,7 +135,7 @@ function CandleMarks({
           children: candle.label
         }
       )
-    ] }, candle.label);
+    ] }, `${candle.label}-${index.toString()}`);
   });
 }
 function SessionPill({ sessionChange }) {

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

@@ -1,14 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Activity, Bot, Compass, Layers3, Sparkles } from "lucide-react";
 import { BottomBar } from "../bottom-bar/bottom-bar";
-import { Button } from "../button";
-import { CanvasView } from "../canvas-view";
-import { ChatDockSection } from "../chat-dock-section";
-import { GlassPanel } from "../glass-panel";
-import { LeftRail } from "../left-rail";
-import { RightDock } from "../right-dock";
-import { TopBar } from "../top-bar";
-import { WorkspaceSwitcher } from "../workspace-switcher";
+import { Button } from "../button/button";
+import { CanvasView } from "../canvas-view/canvas-view";
+import { ChatDockSection } from "../chat-dock-section/chat-dock-section";
+import { GlassPanel } from "../glass-panel/glass-panel";
+import { LeftRail } from "../left-rail/left-rail";
+import { RightDock } from "../right-dock/right-dock";
+import { TopBar } from "../top-bar/top-bar";
+import { WorkspaceSwitcher } from "../workspace-switcher/workspace-switcher";
 import { CanvasShell } from "./canvas-shell";
 function DemoLeftBar() {
   return /* @__PURE__ */ jsx(GlassPanel, { className: "overflow-hidden", children: /* @__PURE__ */ jsxs(

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

@@ -158,14 +158,17 @@ function renderLegacyCanvasShell({
     }
   );
 }
-function renderFloatingContent(children, contentStyle) {
+function CanvasShellContent({
+  content,
+  contentStyle
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: "relative z-0 h-full w-full min-h-0 min-w-0",
       "data-slot": "canvas-shell-content",
       style: contentStyle,
-      children: /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-0 min-w-0 overflow-hidden", children })
+      children: /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-0 min-w-0 overflow-hidden", children: content })
     }
   );
 }
@@ -230,7 +233,7 @@ function renderFloatingCanvasShell({
             topBar: hasTopBar ? topBar : void 0
           }
         ),
-        renderFloatingContent(children, contentStyle),
+        /* @__PURE__ */ jsx(CanvasShellContent, { content: children, contentStyle }),
         /* @__PURE__ */ jsx(
           CanvasShellChromeAfter,
           {

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

@@ -46,11 +46,18 @@ function supportsScrollableOverflow(value) {
   return value === "auto" || value === "overlay" || value === "scroll";
 }
 function hasScrollableAxis(element, axis) {
-  const style = window.getComputedStyle(element);
   if (axis === "x") {
-    return supportsScrollableOverflow(style.overflowX) && element.scrollWidth > element.clientWidth;
+    if (element.scrollWidth <= element.clientWidth) {
+      return false;
+    }
+    return supportsScrollableOverflow(
+      window.getComputedStyle(element).overflowX
+    );
+  }
+  if (element.scrollHeight <= element.clientHeight) {
+    return false;
   }
-  return supportsScrollableOverflow(style.overflowY) && element.scrollHeight > element.clientHeight;
+  return supportsScrollableOverflow(window.getComputedStyle(element).overflowY);
 }
 function hasScrollableAncestor(element, container, delta) {
   if (!container.contains(element) || element === container) {
@@ -67,8 +74,8 @@ function shouldHandleCanvasKeyboardEvent(event) {
   }
   return true;
 }
-function shouldHandleCanvasWheelEvent(event) {
-  if (isHtmlElement(event.target) && hasScrollableAncestor(event.target, event.currentTarget, {
+function shouldHandleCanvasWheelEvent(event, container) {
+  if (isHtmlElement(event.target) && hasScrollableAncestor(event.target, container, {
     x: event.deltaX,
     y: event.deltaY
   })) {
@@ -177,6 +184,7 @@ function useViewportState({
   };
 }
 function useCanvasKeyboardInteractions({
+  containerRef,
   nudgeViewport,
   resetViewport,
   setViewport,
@@ -184,24 +192,13 @@ function useCanvasKeyboardInteractions({
   zoomStep
 }) {
   const [isSpacePressed, setIsSpacePressed] = useState(false);
-  const handleWheel = useCallback(
-    (event) => {
-      if (event.ctrlKey || event.metaKey) {
-        event.preventDefault();
-        setViewport({
-          ...viewportRef.current,
-          zoom: viewportRef.current.zoom + (event.deltaY > 0 ? -zoomStep : zoomStep)
-        });
-        return;
-      }
-      if (!shouldHandleCanvasWheelEvent(event)) {
-        return;
-      }
-      event.preventDefault();
-      nudgeViewport(-event.deltaX, -event.deltaY);
-    },
-    [nudgeViewport, setViewport, viewportRef, zoomStep]
-  );
+  useCanvasWheel({
+    containerRef,
+    nudgeViewport,
+    setViewport,
+    viewportRef,
+    zoomStep
+  });
   const handleKeyDown = useCallback(
     (event) => {
       if (!shouldHandleCanvasKeyboardEvent(event)) {
@@ -233,7 +230,43 @@ function useCanvasKeyboardInteractions({
     },
     []
   );
-  return { handleKeyDown, handleKeyUp, handleWheel, isSpacePressed };
+  const handleBlur = useCallback(() => {
+    setIsSpacePressed(false);
+  }, []);
+  return { handleBlur, handleKeyDown, handleKeyUp, isSpacePressed };
+}
+function useCanvasWheel({
+  containerRef,
+  nudgeViewport,
+  setViewport,
+  viewportRef,
+  zoomStep
+}) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const handleWheel = (event) => {
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDefault();
+        setViewport({
+          ...viewportRef.current,
+          zoom: viewportRef.current.zoom + (event.deltaY > 0 ? -zoomStep : zoomStep)
+        });
+        return;
+      }
+      if (!shouldHandleCanvasWheelEvent(event, container)) {
+        return;
+      }
+      event.preventDefault();
+      nudgeViewport(-event.deltaX, -event.deltaY);
+    };
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+    };
+  }, [containerRef, nudgeViewport, setViewport, viewportRef, zoomStep]);
 }
 function endCanvasDrag(event, dragOriginRef, setIsDragging) {
   dragOriginRef.current = null;
@@ -328,16 +361,17 @@ function useCanvasViewHandle(ref, viewportState) {
 }
 function CanvasInteractionLayer({
   children,
+  containerRef,
   instructionsId,
   isDragging,
   isSpacePressed,
+  onBlur,
   onKeyDown,
   onKeyUp,
   onPointerCancel,
   onPointerDown,
   onPointerMove,
   onPointerUp,
-  onWheel,
   viewport
 }) {
   return /* @__PURE__ */ jsxs(
@@ -351,13 +385,14 @@ function CanvasInteractionLayer({
         isDragging || isSpacePressed ? "cursor-grab active:cursor-grabbing" : "cursor-default"
       ),
       "data-viewport": JSON.stringify(viewport),
+      onBlur,
       onKeyDown,
       onKeyUp,
       onPointerCancel,
       onPointerDown,
       onPointerMove,
       onPointerUp,
-      onWheel,
+      ref: containerRef,
       role: "button",
       tabIndex: 0,
       children: [
@@ -369,6 +404,7 @@ function CanvasInteractionLayer({
 }
 function CanvasContentLayer({
   children,
+  isDragging,
   overlay,
   viewport
 }) {
@@ -376,7 +412,10 @@ function CanvasContentLayer({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "absolute inset-0 origin-top-left transition-transform duration-150 ease-out",
+        className: cn(
+          "absolute inset-0 origin-top-left",
+          isDragging ? "" : "transition-transform duration-150 ease-out"
+        ),
         style: {
           transform: `translate3d(${viewport.x}px, ${viewport.y}px, 0) scale(${viewport.zoom})`
         },
@@ -399,6 +438,7 @@ const CanvasView = forwardRef(
     ...props
   }, ref) => {
     const instructionsId = useId();
+    const interactionRef = useRef(null);
     const viewportState = useViewportState({
       defaultViewport,
       maxZoom,
@@ -406,6 +446,7 @@ const CanvasView = forwardRef(
       onViewportChange
     });
     const keyboard = useCanvasKeyboardInteractions({
+      containerRef: interactionRef,
       nudgeViewport: viewportState.nudgeViewport,
       resetViewport: viewportState.resetViewport,
       setViewport: viewportState.setViewport,
@@ -430,20 +471,22 @@ const CanvasView = forwardRef(
         children: /* @__PURE__ */ jsx(
           CanvasInteractionLayer,
           {
+            containerRef: interactionRef,
             instructionsId,
             isDragging: pointer.isDragging,
             isSpacePressed: keyboard.isSpacePressed,
+            onBlur: keyboard.handleBlur,
             onKeyDown: keyboard.handleKeyDown,
             onKeyUp: keyboard.handleKeyUp,
             onPointerCancel: pointer.handlePointerCancel,
             onPointerDown: pointer.handlePointerDown,
             onPointerMove: pointer.handlePointerMove,
             onPointerUp: pointer.handlePointerUp,
-            onWheel: keyboard.handleWheel,
             viewport: viewportState.viewport,
             children: /* @__PURE__ */ jsx(
               CanvasContentLayer,
               {
+                isDragging: pointer.isDragging,
                 overlay,
                 viewport: viewportState.viewport,
                 children

package/dist/components/chain-of-thought/chain-of-thought.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { Check, LoaderCircle, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+const markerVariants = cva(
+  "flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium",
+  {
+    defaultVariants: {
+      status: "pending"
+    },
+    variants: {
+      status: {
+        active: "border-primary bg-primary/10 text-primary",
+        complete: "border-transparent bg-primary text-primary-foreground",
+        error: "border-transparent bg-destructive text-destructive-foreground",
+        pending: "border-border bg-muted text-muted-foreground"
+      }
+    }
+  }
+);
+function StepMarkerIcon({
+  index,
+  status
+}) {
+  if (status === "complete") {
+    return /* @__PURE__ */ jsx(Check, { className: "size-3.5" });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsx(X, { className: "size-3.5" });
+  }
+  if (status === "active") {
+    return /* @__PURE__ */ jsx(LoaderCircle, { className: "size-3.5 animate-spin" });
+  }
+  return /* @__PURE__ */ jsx("span", { children: index + 1 });
+}
+function ChainOfThoughtItem({
+  index,
+  isLast,
+  step
+}) {
+  const status = step.status ?? "pending";
+  return /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx("span", { className: markerVariants({ status }), children: /* @__PURE__ */ jsx(StepMarkerIcon, { index, status }) }),
+      isLast ? null : /* @__PURE__ */ jsx("span", { className: "my-1 w-px flex-1 bg-border" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("pb-4", isLast && "pb-0"), children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "text-sm font-medium",
+            status === "pending" ? "text-muted-foreground" : "text-foreground"
+          ),
+          children: step.title
+        }
+      ),
+      step.description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: step.description }) : null
+    ] })
+  ] });
+}
+const ChainOfThought = forwardRef(
+  ({ className, steps }, ref) => /* @__PURE__ */ jsx("ol", { className: cn("flex flex-col", className), ref, children: steps.map((step, index) => /* @__PURE__ */ jsx(
+    ChainOfThoughtItem,
+    {
+      index,
+      isLast: index === steps.length - 1,
+      step
+    },
+    `${index}-${step.title}`
+  )) })
+);
+ChainOfThought.displayName = "ChainOfThought";
+export {
+  ChainOfThought
+};

package/dist/components/chain-of-thought/index.js

@@ -0,0 +1,6 @@
+import {
+  ChainOfThought
+} from "./chain-of-thought";
+export {
+  ChainOfThought
+};