@vllnt/ui 0.2.1-canary.06f0e84 → 0.2.1-canary.0cc4e50

package/dist/components/breadcrumb/breadcrumb.js

@@ -20,39 +20,46 @@ function Breadcrumb({
     {
       "aria-label": "Breadcrumb",
       className: cn("flex items-center space-x-1 text-sm", className),
-      children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-        index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator }) }),
-        item.href ? /* @__PURE__ */ jsxs(
-          Link,
-          {
-            className: "flex items-center gap-1 hover:text-foreground transition-colors",
-            href: item.href,
-            children: [
+      children: items.map((item, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center",
+          children: [
+            index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator }) }),
+            item.href ? /* @__PURE__ */ jsxs(
+              Link,
+              {
+                className: "flex items-center gap-1 hover:text-foreground transition-colors",
+                href: item.href,
+                children: [
+                  item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        // Truncate plain string labels; custom React elements handle their own overflow
+                        typeof item.label === "string" && "truncate",
+                        variant === "minimal" ? "text-muted-foreground" : "text-foreground"
+                      ),
+                      children: item.label
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
               item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: cn(
-                    // Truncate plain string labels; custom React elements handle their own overflow
-                    typeof item.label === "string" && "truncate",
-                    variant === "minimal" ? "text-muted-foreground" : "text-foreground"
-                  ),
+                  className: cn(typeof item.label === "string" && "truncate"),
                   children: item.label
                 }
               )
-            ]
-          }
-        ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
-          item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(typeof item.label === "string" && "truncate"),
-              children: item.label
-            }
-          )
-        ] })
-      ] }, index))
+            ] })
+          ]
+        },
+        typeof item.label === "string" ? item.label : `breadcrumb-${index}`
+      ))
     }
   );
 }

package/dist/components/button/button.js

@@ -13,7 +13,7 @@ const buttonVariants = cva(
     variants: {
       size: {
         default: "h-10 px-4 py-2",
-        icon: "h-10 w-10",
+        icon: "size-10",
         lg: "h-11 rounded-md px-8",
         sm: "h-9 rounded-md px-3"
       },

package/dist/components/calendar/calendar.js

@@ -5,10 +5,10 @@ import { DayPicker } from "react-day-picker";
 import { cn } from "../../lib/utils";
 import { buttonVariants } from "../button/button";
 function IconLeft() {
-  return /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" });
 }
 function IconRight() {
-  return /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" });
 }
 function ChevronComponent({
   orientation = "right"
@@ -28,17 +28,17 @@ function Calendar({
       classNames: {
         button_next: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1"
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1"
         ),
         button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1"
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1"
         ),
         caption_label: "text-sm font-medium",
-        day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: "size-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "size-9 p-0 font-normal aria-selected:opacity-100"
         ),
         disabled: "text-muted-foreground opacity-50",
         hidden: "invisible",

package/dist/components/callout/callout.js

@@ -45,7 +45,7 @@ function Callout({
       ),
       role: "alert",
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        icon ? /* @__PURE__ */ jsx("span", { className: "h-5 w-5 flex-shrink-0 mt-0.5", children: icon }) : null,
+        icon ? /* @__PURE__ */ jsx("span", { className: "size-5 flex-shrink-0 mt-0.5", children: icon }) : null,
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
           displayTitle ? /* @__PURE__ */ jsx("p", { className: "font-semibold mb-1", children: displayTitle }) : null,
           /* @__PURE__ */ jsx("div", { className: "text-sm [&>p]:mb-0 [&>p:last-child]:mb-0", children })

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

@@ -149,7 +149,7 @@ function SessionPill({ sessionChange }) {
         isPositive ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400"
       ),
       children: [
-        /* @__PURE__ */ jsx(TrendIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(TrendIcon, { className: "size-4" }),
         sessionChange >= 0 ? "+" : "",
         formatValue(sessionChange)
       ]
@@ -158,6 +158,7 @@ function SessionPill({ sessionChange }) {
 }
 const CandlestickChart = React.forwardRef(
   ({
+    as: Heading = "h3",
     className,
     data,
     height = DEFAULT_HEIGHT,
@@ -185,7 +186,7 @@ const CandlestickChart = React.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-start justify-between gap-3", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground", children: "OHLC session" }),
-              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: "Candlestick chart" })
+              /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Candlestick chart" })
             ] }),
             /* @__PURE__ */ jsx(SessionPill, { sessionChange })
           ] }),

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";
@@ -115,7 +115,7 @@ function DemoCanvasObjects() {
     /* @__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: [
       /* @__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: "h-2 w-2 rounded-full bg-primary/50" })
+        /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-primary/50" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mt-5 space-y-3", children: [
         /* @__PURE__ */ jsx("div", { className: "h-3 w-24 rounded-full bg-foreground/10" }),
@@ -130,9 +130,9 @@ function DemoCanvasObjects() {
       /* @__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: [
-          /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-foreground/10" }),
-          /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-foreground/10" }),
-          /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-primary/45" })
+          /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-foreground/10" }),
+          /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-foreground/10" }),
+          /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-primary/45" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-3", children: [

package/dist/components/carousel/carousel.js

@@ -7,6 +7,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState
 } from "react";
 import useEmblaCarousel from "embla-carousel-react";
@@ -43,6 +44,10 @@ function useCarouselLogic({
     setCanScrollPrevious(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
+  const onSelectReference = useRef(onSelect);
+  useEffect(() => {
+    onSelectReference.current = onSelect;
+  }, [onSelect]);
   const scrollPrevious = useCallback(() => {
     api?.scrollPrev();
   }, [api]);
@@ -71,17 +76,20 @@ function useCarouselLogic({
     if (!api) {
       return;
     }
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
+    const notifySelection = (selectedApi) => {
+      onSelectReference.current(selectedApi);
+    };
+    api.on("reInit", notifySelection);
+    api.on("select", notifySelection);
     const rafId = requestAnimationFrame(() => {
-      onSelect(api);
+      notifySelection(api);
     });
     return () => {
-      api?.off("select", onSelect);
-      api?.off("reInit", onSelect);
+      api?.off("select", notifySelection);
+      api?.off("reInit", notifySelection);
       cancelAnimationFrame(rafId);
     };
-  }, [api, onSelect]);
+  }, [api]);
   return {
     api,
     canScrollNext,
@@ -188,7 +196,7 @@ const CarouselPrevious = forwardRef(({ className, size = "icon", variant = "outl
     Button,
     {
       className: cn(
-        "absolute h-8 w-8 rounded-full",
+        "absolute size-8 rounded-full",
         orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       ),
@@ -199,7 +207,7 @@ const CarouselPrevious = forwardRef(({ className, size = "icon", variant = "outl
       variant,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
@@ -212,7 +220,7 @@ const CarouselNext = forwardRef(({ className, size = "icon", variant = "outline"
     Button,
     {
       className: cn(
-        "absolute h-8 w-8 rounded-full",
+        "absolute size-8 rounded-full",
         orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       ),
@@ -223,7 +231,7 @@ const CarouselNext = forwardRef(({ className, size = "icon", variant = "outline"
       variant,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
       ]
     }

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,
@@ -45,7 +45,7 @@ const ChatDockSection = forwardRef(
           },
           message.id
         )) }),
-        /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-dashed border-border/80 bg-background/70 px-3 py-3 text-sm text-muted-foreground", children: composerPlaceholder })
+        /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-dashed border-border/80 bg-background/70 p-3 text-sm text-muted-foreground", children: composerPlaceholder })
       ]
     }
   )

package/dist/components/checkbox/checkbox.js

@@ -8,7 +8,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__
   CheckboxPrimitive.Root,
   {
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+      "peer size-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
       className
     ),
     ref: reference,
@@ -17,7 +17,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__
       CheckboxPrimitive.Indicator,
       {
         className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
       }
     )
   }

package/dist/components/checklist/checklist.js

@@ -3,6 +3,31 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../lib/utils";
 const CHECKLIST_PROGRESS_EVENT = "vllnt:checklist-progress-change";
+const CHECKLIST_STORAGE_VERSION = 1;
+function stringItemsFromUnknown(value) {
+  return Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+}
+function parseChecklistStorageValue(saved) {
+  try {
+    const parsed = JSON.parse(saved);
+    if (Array.isArray(parsed)) {
+      return stringItemsFromUnknown(parsed);
+    }
+    if (typeof parsed === "object" && parsed !== null && "version" in parsed && "checked" in parsed && parsed.version === CHECKLIST_STORAGE_VERSION) {
+      return stringItemsFromUnknown(parsed.checked);
+    }
+  } catch {
+    return [];
+  }
+  return [];
+}
+function createChecklistStorageValue(ids) {
+  const payload = {
+    checked: [...ids],
+    version: CHECKLIST_STORAGE_VERSION
+  };
+  return JSON.stringify(payload);
+}
 function ChecklistItemRow({
   isChecked,
   item,
@@ -21,7 +46,7 @@ function ChecklistItemRow({
         isChecked ? /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-green-500 flex-shrink-0 mt-0.5",
+            className: "size-5 text-green-500 flex-shrink-0 mt-0.5",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -38,7 +63,7 @@ function ChecklistItemRow({
         ) : /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-muted-foreground flex-shrink-0 mt-0.5",
+            className: "size-5 text-muted-foreground flex-shrink-0 mt-0.5",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -67,17 +92,18 @@ function ChecklistItemRow({
 }
 function ChecklistHeader({
   checked,
+  Heading,
   progress,
   title,
   total
 }) {
   if (!title) return null;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-    /* @__PURE__ */ jsxs("h4", { className: "font-semibold flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(Heading, { className: "font-semibold flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "h-5 w-5 text-primary",
+          className: "size-5 text-primary",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",
@@ -105,6 +131,7 @@ function ChecklistHeader({
   ] });
 }
 function Checklist({
+  as: Heading = "h4",
   className,
   items,
   onComplete,
@@ -115,10 +142,7 @@ function Checklist({
     if (typeof window !== "undefined" && persistKey) {
       const saved = localStorage.getItem(`checklist:${persistKey}`);
       if (saved) {
-        try {
-          return new Set(JSON.parse(saved));
-        } catch {
-        }
+        return new Set(parseChecklistStorageValue(saved));
       }
     }
     return /* @__PURE__ */ new Set();
@@ -132,7 +156,7 @@ function Checklist({
       try {
         localStorage.setItem(
           `checklist:${persistKey}`,
-          JSON.stringify([...newChecked])
+          createChecklistStorageValue(newChecked)
         );
         window.dispatchEvent(
           new CustomEvent(CHECKLIST_PROGRESS_EVENT, {
@@ -153,6 +177,7 @@ function Checklist({
       ChecklistHeader,
       {
         checked: checked.size,
+        Heading,
         progress,
         title,
         total: items.length
@@ -184,5 +209,8 @@ function Checklist({
 }
 export {
   CHECKLIST_PROGRESS_EVENT,
-  Checklist
+  CHECKLIST_STORAGE_VERSION,
+  Checklist,
+  createChecklistStorageValue,
+  parseChecklistStorageValue
 };

package/dist/components/checklist/index.js

@@ -1,8 +1,14 @@
 import {
   Checklist,
-  CHECKLIST_PROGRESS_EVENT
+  CHECKLIST_PROGRESS_EVENT,
+  CHECKLIST_STORAGE_VERSION,
+  createChecklistStorageValue,
+  parseChecklistStorageValue
 } from "./checklist";
 export {
   CHECKLIST_PROGRESS_EVENT,
-  Checklist
+  CHECKLIST_STORAGE_VERSION,
+  Checklist,
+  createChecklistStorageValue,
+  parseChecklistStorageValue
 };

package/dist/components/chronological-timeline/chronological-timeline.js

@@ -38,6 +38,7 @@ function ImageMedia({ media }) {
   ] });
 }
 function VideoMedia({ media }) {
+  const iframeTitle = media.title || "Embedded timeline video";
   return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted", children: [
     /* @__PURE__ */ jsx("div", { className: "aspect-video w-full", children: /* @__PURE__ */ jsx(
       "iframe",
@@ -46,7 +47,7 @@ function VideoMedia({ media }) {
         allowFullScreen: true,
         className: "h-full w-full",
         src: media.src,
-        title: media.title ?? "Embedded video"
+        title: iframeTitle
       }
     ) }),
     media.caption || media.credit ? /* @__PURE__ */ jsxs("figcaption", { className: "border-t bg-background px-3 py-2 text-xs text-muted-foreground", children: [
@@ -56,7 +57,7 @@ function VideoMedia({ media }) {
   ] });
 }
 function AudioMedia({ media }) {
-  return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted px-3 py-3", children: [
+  return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted p-3", children: [
     /* @__PURE__ */ jsx(
       "audio",
       {
@@ -94,8 +95,8 @@ function RailColumn({ featured }) {
           "span",
           {
             className: cn(
-              "relative z-10 mt-3 block h-3 w-3 rounded-full border-2 border-background bg-primary",
-              featured ? "h-4 w-4" : ""
+              "relative z-10 mt-3 block size-3 rounded-full border-2 border-background bg-primary",
+              featured ? "size-4" : ""
             )
           }
         )
@@ -167,7 +168,7 @@ const ChronoEvent = forwardRef(
       },
       [eventId, forwardedRef, registerEvent]
     );
-    const handleFocus = useCallback(() => {
+    const handleFocusEvent = useCallback(() => {
       setActiveId(eventId);
     }, [eventId, setActiveId]);
     return /* @__PURE__ */ jsxs(
@@ -181,7 +182,7 @@ const ChronoEvent = forwardRef(
         "data-event-id": eventId,
         "data-featured": featured ? "true" : void 0,
         id: eventId,
-        onFocus: handleFocus,
+        onFocus: handleFocusEvent,
         ref: refCallback,
         ...rest,
         children: [
@@ -308,7 +309,7 @@ const ChronologicalTimeline = forwardRef((props, ref) => {
       ...rest,
       children: [
         /* @__PURE__ */ jsx(ProgressStrip, { activeId, ids, label: progressLabel }),
-        title ? /* @__PURE__ */ jsx("header", { className: "px-6 py-6", children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", id: titleId, children: title }) }) : null,
+        title ? /* @__PURE__ */ jsx("header", { className: "p-6", children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", id: titleId, children: title }) }) : null,
         /* @__PURE__ */ jsx(EventList, { activeId, children })
       ]
     }

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

@@ -71,7 +71,7 @@ function CivilizationHero({ color, image, imageAlt }) {
           className: "h-full w-full object-cover mix-blend-multiply",
           src: image
         }
-      ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center text-muted-foreground/50", children: /* @__PURE__ */ jsx(Globe, { "aria-hidden": "true", className: "h-12 w-12" }) })
+      ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center text-muted-foreground/50", children: /* @__PURE__ */ jsx(Globe, { "aria-hidden": "true", className: "size-12" }) })
     }
   );
 }

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

@@ -107,11 +107,11 @@ function CodeBlock({
               /* @__PURE__ */ jsx(
                 Button,
                 {
-                  className: "h-8 w-8",
+                  className: "size-8",
                   onClick: handleCopy,
                   size: "icon",
                   variant: "ghost",
-                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
                 }
               )
             ] })

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: [
@@ -11,11 +11,13 @@ function CodeLine({ highlightLines, line, lineNumber }) {
     /* @__PURE__ */ jsx("span", { children: line })
   ] });
 }
+const EMPTY_HIGHLIGHT_LINES = [];
 function CodePlayground({
+  as: Heading = "h4",
   children,
   description,
   filename,
-  highlightLines = [],
+  highlightLines = EMPTY_HIGHLIGHT_LINES,
   language = "typescript",
   showLineNumbers = false,
   title
@@ -33,25 +35,25 @@ function CodePlayground({
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-muted/30", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded bg-primary/10", children: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded bg-primary/10", children: /* @__PURE__ */ jsx(Code, { className: "size-4 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm", children: title }),
+          /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-sm", children: title }),
           description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description }) : null
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         filename ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(FileCode, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx(FileCode, { className: "size-3" }),
           /* @__PURE__ */ jsx("span", { className: "font-mono", children: filename })
         ] }) : null,
         /* @__PURE__ */ jsx(
           Button,
           {
-            className: "h-8 w-8",
+            className: "size-8",
             onClick: handleCopy,
             size: "icon",
             variant: "ghost",
-            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
           }
         )
       ] })
@@ -63,7 +65,7 @@ function CodePlayground({
         line,
         lineNumber: index + 1
       },
-      index
+      `${line}-${index + 1}`
     )) }) : /* @__PURE__ */ jsx("code", { children: code }) }) }),
     /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t bg-muted/30", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) })
   ] });
@@ -74,7 +76,7 @@ function FileTree({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs("h4", { className: "font-semibold text-sm flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(FileCode, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(FileCode, { className: "size-4" }),
       title
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm [&>ul]:m-0 [&>ul]:list-none [&_ul]:ml-4 [&_ul]:list-none [&_li]:text-muted-foreground", children })

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) {
@@ -48,7 +43,7 @@ function ComboboxOptionItem({
           Check,
           {
             className: cn(
-              "mr-2 h-4 w-4",
+              "mr-2 size-4",
               selectedValue === option.value ? "opacity-100" : "opacity-0"
             )
           }
@@ -128,7 +123,7 @@ const Combobox = React.forwardRef(
           variant: "outline",
           children: [
             /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
-            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })
           ]
         }
       ) }),