@vllnt/ui 0.2.1-canary.0aaaad2 → 0.2.1-canary.0cc4e50

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/activity-heatmap/activity-heatmap.js

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

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo, useState } from "react";
 import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Avatar, AvatarFallback } from "../avatar";
+import { Avatar, AvatarFallback } from "../avatar/avatar";
 import { Badge } from "../badge";
 import { Button } from "../button";
 import {

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;
@@ -272,7 +272,7 @@ const AIArtifactCopyButton = forwardRef(({ className, onClick, ...rest }, ref) =
     {
       "aria-label": copied ? labels.copied : labels.copy,
       className: cn("size-8", className),
-      onClick: handleClick,
+      onClick: handleCopyArtifact,
       ref,
       size: "icon",
       type: "button",
@@ -285,7 +285,7 @@ const AIArtifactCopyButton = forwardRef(({ className, onClick, ...rest }, ref) =
 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;
@@ -299,7 +299,7 @@ const AIArtifactEditButton = forwardRef(({ className, onClick, ...rest }, ref) =
     {
       "aria-label": labels.edit,
       className: cn("size-8", className),
-      onClick: handleClick,
+      onClick: handleEditArtifact,
       ref,
       size: "icon",
       type: "button",
@@ -312,7 +312,7 @@ const AIArtifactEditButton = forwardRef(({ className, onClick, ...rest }, ref) =
 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;
@@ -325,7 +325,7 @@ const AIArtifactDownloadButton = forwardRef(({ className, onClick, ...rest }, re
     {
       "aria-label": labels.download,
       className: cn("size-8", className),
-      onClick: handleClick,
+      onClick: handleDownloadArtifact,
       ref,
       size: "icon",
       type: "button",
@@ -338,7 +338,7 @@ const AIArtifactDownloadButton = forwardRef(({ className, onClick, ...rest }, re
 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;
@@ -352,7 +352,7 @@ const AIArtifactFullscreenButton = forwardRef(({ className, onClick, ...rest },
       "aria-label": fullscreen ? labels.exitFullscreen : labels.enterFullscreen,
       "aria-pressed": fullscreen,
       className: cn("size-8", className),
-      onClick: handleClick,
+      onClick: handleToggleArtifactFullscreen,
       ref,
       size: "icon",
       type: "button",

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

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { LoaderCircle, SendHorizontal } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import { Textarea } from "../textarea";
 const formShellVariants = cva(
   "rounded-2xl border border-border/70 bg-background shadow-sm"

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

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

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

@@ -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;
@@ -182,7 +182,7 @@ const AISidebarClose = forwardRef(({ className, onClick, ...rest }, ref) => {
     {
       "aria-label": labels.close,
       className: cn("size-8", className),
-      onClick: handleClick,
+      onClick: handleCloseSidebar,
       ref,
       size: "icon",
       type: "button",
@@ -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,7 +230,7 @@ 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",

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

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { AlertCircle, CheckCircle2, Clock3, Wrench } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 const statusVariants = cva(
   "rounded-full px-2 py-0 text-[10px] uppercase tracking-wide",
   {

package/dist/components/animated-text/animated-text.js

@@ -87,13 +87,16 @@ function buildRevealPlan(direction, length, randomness) {
   return revealPlan;
 }
 function useRevealProgress(active, length, stagger) {
-  const [progress, setProgress] = React.useState(0);
+  const [progress, setProgress] = React.useState(() => active ? 0 : length);
+  const [revealKey, setRevealKey] = React.useState({ active, length, stagger });
+  if (revealKey.active !== active || revealKey.length !== length || revealKey.stagger !== stagger) {
+    setRevealKey({ active, length, stagger });
+    setProgress(active ? 0 : length);
+  }
   React.useEffect(() => {
     if (!active) {
-      setProgress(length);
       return;
     }
-    setProgress(0);
     const revealInterval = window.setInterval(
       () => {
         setProgress((current) => {

package/dist/components/annotation/annotation.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover";
 const toneClasses = {
   amber: "bg-amber-500/20 text-amber-950 dark:text-amber-100",
   emerald: "bg-emerald-500/20 text-emerald-950 dark:text-emerald-100",

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-group/avatar-group.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
-import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar";
 const avatarGroupVariants = cva("flex items-center", {
   defaultVariants: {
     size: "md"

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,
@@ -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

@@ -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/candlestick-chart/candlestick-chart.js

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

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,

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,

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,
@@ -67,13 +92,14 @@ 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",
         {
@@ -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

@@ -168,7 +168,7 @@ const ChronoEvent = forwardRef(
       },
       [eventId, forwardedRef, registerEvent]
     );
-    const handleFocus = useCallback(() => {
+    const handleFocusEvent = useCallback(() => {
       setActiveId(eventId);
     }, [eventId, setActiveId]);
     return /* @__PURE__ */ jsxs(
@@ -182,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: [

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: [
@@ -13,6 +13,7 @@ function CodeLine({ highlightLines, line, lineNumber }) {
 }
 const EMPTY_HIGHLIGHT_LINES = [];
 function CodePlayground({
+  as: Heading = "h4",
   children,
   description,
   filename,
@@ -36,7 +37,7 @@ function CodePlayground({
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__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
         ] })
       ] }),

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) {

package/dist/components/comment-pin/comment-pin.js

@@ -57,7 +57,7 @@ const CommentPin = forwardRef(
     const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
     const showBadge = typeof unread === "number" && unread > 0;
     const ariaLabel = showBadge ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}` : resolvedLabels.region;
-    const handleClick = () => {
+    const handleActivateComment = () => {
       onActivate?.();
     };
     const body = /* @__PURE__ */ jsx(
@@ -89,7 +89,7 @@ const CommentPin = forwardRef(
             "aria-label": ariaLabel,
             className: "relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             "data-comment-pin-trigger": true,
-            onClick: handleClick,
+            onClick: handleActivateComment,
             type: "button",
             children: body
           }

package/dist/components/comparison/comparison.js

@@ -24,6 +24,7 @@ const variantConfig = {
 };
 function Comparison({
   after,
+  as: Heading = "h4",
   before,
   title,
   ...rest
@@ -40,7 +41,7 @@ function Comparison({
   const BeforeIcon = beforeConfig.icon;
   const AfterIcon = afterConfig.icon;
   return /* @__PURE__ */ jsxs("div", { className: "my-6", children: [
-    title ? /* @__PURE__ */ jsx("h4", { className: "font-semibold mb-3", children: title }) : null,
+    title ? /* @__PURE__ */ jsx(Heading, { className: "font-semibold mb-3", children: title }) : null,
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border", beforeConfig.className), children: [
         /* @__PURE__ */ jsx(

package/dist/components/completion-dialog/completion-dialog.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function DialogContent({
+  as: Heading = "h2",
   cancelLabel = "Skip",
   cancelShortcut = "S",
   className,
@@ -57,7 +58,7 @@ function DialogContent({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: "completion-dialog-title", children: title }),
+          /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold", id: "completion-dialog-title", children: title }),
           description ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1.5", children: description }) : null
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2", children: [
@@ -83,6 +84,7 @@ function DialogContent({
   );
 }
 function CompletionDialogImpl({
+  as,
   cancelLabel,
   cancelShortcut = "S",
   className,
@@ -96,8 +98,11 @@ function CompletionDialogImpl({
   onConfirm,
   title
 }) {
-  const handleKeyDown = useCallback(
-    (event) => {
+  const keyDownHandlerRef = useRef(() => {
+    return;
+  });
+  useEffect(() => {
+    keyDownHandlerRef.current = (event) => {
       if (!isOpen) return;
       if (event.key === "Escape") {
         event.preventDefault();
@@ -116,16 +121,18 @@ function CompletionDialogImpl({
         event.stopPropagation();
         onCancel();
       }
-    },
-    [isOpen, onClose, onConfirm, onCancel, confirmShortcut, cancelShortcut]
-  );
+    };
+  }, [cancelShortcut, confirmShortcut, isOpen, onCancel, onClose, onConfirm]);
   useEffect(() => {
     if (!isOpen) return;
-    document.addEventListener("keydown", handleKeyDown, true);
+    const onDocumentKeyDown = (event) => {
+      keyDownHandlerRef.current(event);
+    };
+    document.addEventListener("keydown", onDocumentKeyDown, true);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("keydown", onDocumentKeyDown, true);
     };
-  }, [isOpen, handleKeyDown]);
+  }, [isOpen]);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -149,6 +156,7 @@ function CompletionDialogImpl({
         /* @__PURE__ */ jsx(
           DialogContent,
           {
+            as,
             cancelLabel,
             cancelShortcut,
             className,