@vllnt/ui 0.2.1-canary.55e0e0a → 0.2.1-canary.614266d

package/CHANGELOG.md

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

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

@@ -133,7 +133,7 @@ function HeatmapGrid({
         "span",
         {
           className: cn(
-            "h-3 w-3 rounded-[3px] border border-border/40",
+            "size-3 rounded-[3px] border border-border/40",
             className
           )
         },
@@ -145,6 +145,7 @@ function HeatmapGrid({
 }
 const ActivityHeatmap = React.forwardRef(
   ({
+    as: Heading = "h2",
     className,
     data,
     description,
@@ -157,7 +158,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

@@ -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 = {
@@ -148,7 +148,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 +161,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 +169,7 @@ function StepRow({
           {
             "aria-hidden": "true",
             className: cn(
-              "h-4 w-4 transition-transform",
+              "size-4 transition-transform",
               open ? "rotate-180" : "rotate-0"
             )
           }

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

@@ -259,7 +259,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 +271,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 +298,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 +324,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 +351,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

@@ -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
         ]
       }
@@ -72,7 +72,7 @@ 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",
+              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

@@ -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",
                 {

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

@@ -160,7 +160,7 @@ const AISidebarTitle = forwardRef(({ children, className, ...rest }, ref) => {
       ref,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(Bot, { "aria-hidden": "true", className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(Bot, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }),
         children ?? labels.defaultTitle
       ]
     }
@@ -169,7 +169,7 @@ const AISidebarTitle = forwardRef(({ children, className, ...rest }, ref) => {
 AISidebarTitle.displayName = "AISidebarTitle";
 const AISidebarClose = forwardRef(({ className, onClick, ...rest }, ref) => {
   const { close, labels } = useAISidebar();
-  const handleClick = useCallback(
+  const handleCloseSidebar = useCallback(
     (event) => {
       onClick?.(event);
       if (event.defaultPrevented) return;
@@ -181,14 +181,14 @@ const AISidebarClose = forwardRef(({ className, onClick, ...rest }, ref) => {
     Button,
     {
       "aria-label": labels.close,
-      className: cn("h-8 w-8", className),
-      onClick: handleClick,
+      className: cn("size-8", className),
+      onClick: handleCloseSidebar,
       ref,
       size: "icon",
       type: "button",
       variant: "ghost",
       ...rest,
-      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
     }
   );
 });
@@ -215,7 +215,7 @@ const AISidebarFooter = forwardRef(({ children, className, ...rest }, ref) => /*
 AISidebarFooter.displayName = "AISidebarFooter";
 const AISidebarTrigger = forwardRef(({ children, className, onClick, ...rest }, ref) => {
   const { labels, openState, toggle } = useAISidebar();
-  const handleClick = useCallback(
+  const handleToggleSidebar = useCallback(
     (event) => {
       onClick?.(event);
       if (event.defaultPrevented) return;
@@ -230,13 +230,13 @@ const AISidebarTrigger = forwardRef(({ children, className, onClick, ...rest },
       "aria-label": children ? void 0 : labels.open,
       className: cn(className),
       "data-state": openState ? "open" : "closed",
-      onClick: handleClick,
+      onClick: handleToggleSidebar,
       ref,
       size: children ? "sm" : "icon",
       type: "button",
       variant: "outline",
       ...rest,
-      children: children ?? /* @__PURE__ */ jsx(MessageSquarePlus, { "aria-hidden": "true", className: "h-4 w-4" })
+      children: children ?? /* @__PURE__ */ jsx(MessageSquarePlus, { "aria-hidden": "true", className: "size-4" })
     }
   );
 });

package/dist/components/ai-source-citation/ai-source-citation.js

@@ -18,13 +18,13 @@ const AISourceCitation = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ jsx(Quote, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(Quote, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
             /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: title }),
                 /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: source })
               ] }),
-              /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" })
+              /* @__PURE__ */ jsx(ExternalLink, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" })
             ] }) })
           ] }),
           snippet ? /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-6 text-muted-foreground", children: snippet }) : null

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

@@ -21,10 +21,10 @@ const statusVariants = cva(
   }
 );
 const statusIconMap = {
-  complete: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4" }),
-  error: /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
-  queued: /* @__PURE__ */ jsx(Clock3, { className: "h-4 w-4" }),
-  running: /* @__PURE__ */ jsx(Wrench, { className: "h-4 w-4 animate-pulse" })
+  complete: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4" }),
+  error: /* @__PURE__ */ jsx(AlertCircle, { className: "size-4" }),
+  queued: /* @__PURE__ */ jsx(Clock3, { className: "size-4" }),
+  running: /* @__PURE__ */ jsx(Wrench, { className: "size-4 animate-pulse" })
 };
 const AIToolCallDisplay = forwardRef(
   ({

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

@@ -39,7 +39,7 @@ function getCurrencyFormatter(locale, currency) {
   const key = `${locale}|${currency}`;
   let formatter = CURRENCY_FORMATTER_CACHE.get(key);
   if (!formatter) {
-    formatter = new Intl.NumberFormat(locale, {
+    formatter = Intl.NumberFormat(locale, {
       currency,
       style: "currency"
     });

package/dist/components/avatar/avatar.js

@@ -7,7 +7,7 @@ const Avatar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     className: cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      "relative flex size-10 shrink-0 overflow-hidden rounded-full",
       className
     ),
     ref,

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

@@ -23,9 +23,9 @@ const avatarItemVariants = cva(
     },
     variants: {
       size: {
-        lg: "h-12 w-12 text-sm",
-        md: "h-10 w-10 text-xs",
-        sm: "h-8 w-8 text-[11px]"
+        lg: "size-12 text-sm",
+        md: "size-10 text-xs",
+        sm: "size-8 text-[11px]"
       }
     }
   }

package/dist/components/banner/banner.js

@@ -108,7 +108,7 @@ const Banner = forwardRef(
             "span",
             {
               "aria-hidden": "true",
-              className: "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
+              className: "mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
               children: icon
             }
           ) : null,
@@ -117,10 +117,10 @@ const Banner = forwardRef(
             "button",
             {
               "aria-label": dismissLabel,
-              className: "ml-auto inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md opacity-70 transition-colors hover:bg-foreground/10 hover:opacity-100 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 opacity-70 transition-colors hover:bg-foreground/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               onClick: handleDismiss,
               type: "button",
-              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
             }
           ) : null
         ]

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

@@ -43,7 +43,9 @@ function ContentCard({
     ] }) }) : null
   ] }) });
 }
-const BlogCard = ContentCard;
+function BlogCard(props) {
+  return /* @__PURE__ */ jsx(ContentCard, { ...props });
+}
 export {
   BlogCard,
   ContentCard

package/dist/components/bottom-activity-strip/bottom-activity-strip.js

@@ -23,7 +23,7 @@ const ChipBody = (props) => {
       "span",
       {
         "aria-hidden": "true",
-        className: cn("h-1.5 w-1.5 rounded-full", TONE_DOT[tone])
+        className: cn("size-1.5 rounded-full", TONE_DOT[tone])
       }
     ),
     /* @__PURE__ */ jsx("span", { className: "text-foreground", children: event.label }),
@@ -34,7 +34,7 @@ const Chip = (props) => {
   const { event } = props;
   const tone = event.tone ?? "neutral";
   if (event.onActivate) {
-    const handleClick = () => {
+    const handleActivateEvent = () => {
       event.onActivate?.();
     };
     return /* @__PURE__ */ jsx(
@@ -43,7 +43,7 @@ const Chip = (props) => {
         className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         "data-strip-event": event.id,
         "data-strip-event-tone": tone,
-        onClick: handleClick,
+        onClick: handleActivateEvent,
         type: "button",
         children: /* @__PURE__ */ jsx(ChipBody, { event })
       }

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

@@ -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: [