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

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

@@ -1,16 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState
-} from "react";
+import { createContext, use, useCallback, useMemo, useState } from "react";
 import { cn } from "../../lib/utils";
 const AccordionContext = createContext(null);
 function useAccordionContext() {
-  const context = useContext(AccordionContext);
+  const context = use(AccordionContext);
   if (!context) {
     throw new Error("AccordionItem must be used within an Accordion");
   }

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

@@ -1,5 +1,5 @@
 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 +10,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())
@@ -143,28 +137,27 @@ function HeatmapGrid({
     ] })
   ] });
 }
-const ActivityHeatmap = React.forwardRef(
-  ({
-    as: Heading = "h2",
-    className,
-    data,
-    description,
-    endDate = /* @__PURE__ */ new Date(),
-    title = "Activity heatmap",
-    weeks = 12,
-    ...props
-  }, ref) => {
-    const normalizedEndDate = normalizeDate(endDate);
-    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(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 }) })
-    ] });
-  }
-);
+const ActivityHeatmap = ({
+  as: Heading = "h2",
+  className,
+  data,
+  description,
+  endDate = /* @__PURE__ */ new Date(),
+  ref,
+  title = "Activity heatmap",
+  weeks = 12,
+  ...props
+}) => {
+  const normalizedEndDate = normalizeDate(endDate);
+  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(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 }) })
+  ] });
+};
 ActivityHeatmap.displayName = "ActivityHeatmap";
 export {
   ActivityHeatmap

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

@@ -1,20 +1,20 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState } from "react";
+import { 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",
@@ -197,60 +197,59 @@ function ActivityLogBody({
     ] })
   ] });
 }
-const ActivityLog = forwardRef(
-  ({
-    className,
-    defaultPage = 1,
-    description,
-    emptyMessage = "No activity recorded yet.",
-    items,
-    onPageChange,
-    page,
-    pageSize = 5,
-    title = "Activity log",
-    ...props
-  }, ref) => {
-    const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
-    const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
-    const currentPage = Math.min(
-      Math.max(page ?? uncontrolledPage, 1),
-      totalPages
-    );
-    const pageNumbers = useMemo(
-      () => buildPageNumbers(currentPage, totalPages),
-      [currentPage, totalPages]
-    );
-    function handlePageChange(nextPage) {
-      if (page === void 0) {
-        setUncontrolledPage(nextPage);
-      }
-      onPageChange?.(nextPage);
+const ActivityLog = ({
+  className,
+  defaultPage = 1,
+  description,
+  emptyMessage = "No activity recorded yet.",
+  items,
+  onPageChange,
+  page,
+  pageSize = 5,
+  ref,
+  title = "Activity log",
+  ...props
+}) => {
+  const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+  const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
+  const currentPage = Math.min(
+    Math.max(page ?? uncontrolledPage, 1),
+    totalPages
+  );
+  const pageNumbers = useMemo(
+    () => buildPageNumbers(currentPage, totalPages),
+    [currentPage, totalPages]
+  );
+  function handlePageChange(nextPage) {
+    if (page === void 0) {
+      setUncontrolledPage(nextPage);
     }
-    return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), ref, ...props, children: [
-      /* @__PURE__ */ jsx(
-        ActivityLogHeader,
-        {
-          currentPage,
-          description,
-          title,
-          totalPages
-        }
-      ),
-      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsx(
-        ActivityLogBody,
-        {
-          currentPage,
-          emptyMessage,
-          items,
-          onPageChange: handlePageChange,
-          pageNumbers,
-          pageSize,
-          totalPages
-        }
-      ) })
-    ] });
+    onPageChange?.(nextPage);
   }
-);
+  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), ref, ...props, children: [
+    /* @__PURE__ */ jsx(
+      ActivityLogHeader,
+      {
+        currentPage,
+        description,
+        title,
+        totalPages
+      }
+    ),
+    /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsx(
+      ActivityLogBody,
+      {
+        currentPage,
+        emptyMessage,
+        items,
+        onPageChange: handlePageChange,
+        pageNumbers,
+        pageSize,
+        totalPages
+      }
+    ) })
+  ] });
+};
 ActivityLog.displayName = "ActivityLog";
 export {
   ActivityLog

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

@@ -2,9 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState
@@ -59,53 +58,58 @@ const DEFAULT_LABELS = {
   elapsed: "Elapsed",
   expand: "Show details"
 };
+const AgentActivityLabelsContext = createContext(DEFAULT_LABELS);
 const ACTIVITY_LIVE_REGION_ROLE = {
   completed: "status",
   error: "status",
   idle: "status",
   running: "log"
 };
-const AgentActivity = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      elapsed,
-      labels,
-      status = "idle",
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-live": status === "running" ? "polite" : "off",
-        className: cn(
-          "flex flex-col gap-3 rounded-2xl border bg-background p-4",
-          className
-        ),
-        "data-status": status,
-        ref,
-        role: ACTIVITY_LIVE_REGION_ROLE[status],
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold tracking-tight text-foreground", children: resolvedLabels.activity }),
-            elapsed ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-label": resolvedLabels.elapsed,
-                className: "text-xs font-mono text-muted-foreground",
-                children: elapsed
-              }
-            ) : null
-          ] }),
-          /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-2", children })
-        ]
-      }
-    );
-  }
-);
+const AgentActivity = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    elapsed,
+    labels,
+    status = "idle",
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  return /* @__PURE__ */ jsx(AgentActivityLabelsContext.Provider, { value: resolvedLabels, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-live": status === "running" ? "polite" : "off",
+      className: cn(
+        "flex flex-col gap-3 rounded-2xl border bg-background p-4",
+        className
+      ),
+      "data-status": status,
+      ref,
+      role: ACTIVITY_LIVE_REGION_ROLE[status],
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold tracking-tight text-foreground", children: resolvedLabels.activity }),
+          elapsed ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-label": resolvedLabels.elapsed,
+              className: "text-xs font-mono text-muted-foreground",
+              children: elapsed
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-2", children })
+      ]
+    }
+  ) });
+};
 AgentActivity.displayName = "AgentActivity";
 function getDisplayName(value) {
   if (value !== null && (typeof value === "object" || typeof value === "function") && "displayName" in value && typeof value.displayName === "string") {
@@ -178,70 +182,74 @@ function StepRow({
     ) : null
   ] });
 }
-const AgentStep = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      defaultOpen = true,
-      icon,
-      status,
-      ...rest
-    } = props;
-    const split = useMemo(() => splitChildren(children), [children]);
-    const palette = STATUS_CLASSES[status];
-    const hasDetails = split.body.length > 0;
-    const [open, setOpen] = useState(defaultOpen);
-    const detailsId = useId();
-    const handleToggle = useCallback(() => {
-      setOpen((value) => !value);
-    }, []);
-    const contextValue = useMemo(
-      () => ({ status }),
-      [status]
-    );
-    const resolvedIcon = icon ?? DEFAULT_STATUS_ICON[status];
-    return /* @__PURE__ */ jsx(
-      "li",
-      {
-        className: cn(
-          "rounded-xl border ring-1",
-          palette.rowClass,
-          palette.ringClass,
-          className
+const AgentStep = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    defaultOpen = true,
+    icon,
+    status,
+    ...rest
+  } = props;
+  const split = useMemo(() => splitChildren(children), [children]);
+  const palette = STATUS_CLASSES[status];
+  const hasDetails = split.body.length > 0;
+  const [open, setOpen] = useState(defaultOpen);
+  const detailsId = useId();
+  const labels = use(AgentActivityLabelsContext);
+  const handleToggle = useCallback(() => {
+    setOpen((value) => !value);
+  }, []);
+  const contextValue = useMemo(() => ({ status }), [status]);
+  const resolvedIcon = icon ?? DEFAULT_STATUS_ICON[status];
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: cn(
+        "rounded-xl border ring-1",
+        palette.rowClass,
+        palette.ringClass,
+        className
+      ),
+      "data-status": status,
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(StepContext.Provider, { value: contextValue, children: [
+        /* @__PURE__ */ jsx(
+          StepRow,
+          {
+            detailsId,
+            hasDetails,
+            header: split.header,
+            icon: resolvedIcon,
+            iconClass: palette.iconClass,
+            labels,
+            onToggle: handleToggle,
+            open
+          }
         ),
-        "data-status": status,
-        ref,
-        ...rest,
-        children: /* @__PURE__ */ jsxs(StepContext.Provider, { value: contextValue, children: [
-          /* @__PURE__ */ jsx(
-            StepRow,
-            {
-              detailsId,
-              hasDetails,
-              header: split.header,
-              icon: resolvedIcon,
-              iconClass: palette.iconClass,
-              labels: DEFAULT_LABELS,
-              onToggle: handleToggle,
-              open
-            }
-          ),
-          hasDetails && open ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "border-t border-border/60 px-3 py-2 text-xs",
-              id: detailsId,
-              children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pl-8", children: split.body })
-            }
-          ) : null
-        ] })
-      }
-    );
-  }
-);
+        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 })
+          }
+        ) : null
+      ] })
+    }
+  );
+};
 AgentStep.displayName = "AgentStep";
-const AgentStepTitle = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const AgentStepTitle = ({
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "p",
   {
     className: cn(
@@ -251,18 +259,28 @@ const AgentStepTitle = forwardRef(({ className, ...rest }, ref) => /* @__PURE__
     ref,
     ...rest
   }
-));
+);
 AgentStepTitle.displayName = "AgentStepTitle";
-const AgentStepDuration = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const AgentStepDuration = ({
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "span",
   {
     className: cn("font-mono text-xs text-muted-foreground", className),
     ref,
     ...rest
   }
-));
+);
 AgentStepDuration.displayName = "AgentStepDuration";
-const AgentStepProgress = forwardRef(({ className, label = "Step progress", value, ...rest }, ref) => {
+const AgentStepProgress = ({
+  className,
+  label = "Step progress",
+  ref,
+  value,
+  ...rest
+}) => {
   const clamped = Math.max(0, Math.min(100, value));
   return /* @__PURE__ */ jsx(
     "div",
@@ -284,21 +302,23 @@ const AgentStepProgress = forwardRef(({ className, label = "Step progress", valu
       )
     }
   );
-});
+};
 AgentStepProgress.displayName = "AgentStepProgress";
-const AgentStepDetail = forwardRef(
-  ({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("text-xs text-muted-foreground", className),
-      ref,
-      ...rest
-    }
-  )
+const AgentStepDetail = ({
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("text-xs text-muted-foreground", className),
+    ref,
+    ...rest
+  }
 );
 AgentStepDetail.displayName = "AgentStepDetail";
 function useAgentStepStatus() {
-  return useContext(StepContext).status;
+  return use(StepContext).status;
 }
 export {
   AgentActivity,