@vllnt/ui 0.2.1-canary.0aaaad2 → 0.2.1-canary.25c4600

package/CHANGELOG.md

@@ -29,6 +29,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/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-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/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

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

@@ -67,13 +67,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 +106,7 @@ function ChecklistHeader({
   ] });
 }
 function Checklist({
+  as: Heading = "h4",
   className,
   items,
   onComplete,
@@ -153,6 +155,7 @@ function Checklist({
       ChecklistHeader,
       {
         checked: checked.size,
+        Heading,
         progress,
         title,
         total: items.length

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

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

@@ -4,6 +4,7 @@ import { memo, useCallback, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
 import { Button } from "../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,
@@ -149,6 +151,7 @@ function CompletionDialogImpl({
         /* @__PURE__ */ jsx(
           DialogContent,
           {
+            as,
             cancelLabel,
             cancelShortcut,
             className,

package/dist/components/content-intro/content-intro.js

@@ -19,7 +19,9 @@ function ContentIntroImpl({
   onStart,
   renderIntroContent,
   sections,
-  title
+  title,
+  titleAs: TitleHeading = "h2",
+  tocLabelAs: TocHeading = "h3"
 }) {
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const hasProgress = completedSections.size > 0;
@@ -41,11 +43,11 @@ function ContentIntroImpl({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in-0 duration-500 pb-24", children: [
       /* @__PURE__ */ jsxs("section", { className: "py-6", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-2xl md:text-3xl font-bold mb-6", children: title }),
+        /* @__PURE__ */ jsx(TitleHeading, { className: "text-2xl md:text-3xl font-semibold mb-6", children: title }),
         /* @__PURE__ */ jsx("div", { className: cn("max-w-none", "[&_h2:first-of-type]:hidden"), children: renderIntroContent() })
       ] }),
       /* @__PURE__ */ jsxs("section", { className: "mt-8 py-6 border-t border-border", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: mergedLabels.tableOfContentsLabel }),
+        /* @__PURE__ */ jsx(TocHeading, { className: "text-lg font-semibold mb-4", children: mergedLabels.tableOfContentsLabel }),
         /* @__PURE__ */ jsx("ol", { className: "space-y-2", children: sections.map((section, index) => {
           const isCompleted = !isLoading && completedSections.has(section.id);
           return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(

package/dist/components/exercise/exercise.js

@@ -9,12 +9,18 @@ const difficultyConfig = {
   hard: { className: "text-red-600 dark:text-red-400", label: "Hard" },
   medium: { className: "text-amber-600 dark:text-amber-400", label: "Medium" }
 };
-function ExerciseHeader({ completed, config, onToggle, title }) {
+function ExerciseHeader({
+  completed,
+  config,
+  Heading,
+  onToggle,
+  title
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 mb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(Dumbbell, { className: "size-5 text-primary" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-foreground", children: title }),
         /* @__PURE__ */ jsx("span", { className: cn("text-xs font-medium", config.className), children: config.label })
       ] })
     ] }),
@@ -63,6 +69,7 @@ function ExerciseSolution({ onToggle, showSolution, solution }) {
   ] });
 }
 function Exercise({
+  as: Heading = "h4",
   children,
   difficulty = "medium",
   hint,
@@ -78,6 +85,7 @@ function Exercise({
       {
         completed,
         config: difficultyConfig[difficulty],
+        Heading,
         onToggle: () => {
           setCompleted(!completed);
         },

package/dist/components/faq/faq.js

@@ -40,11 +40,15 @@ function FAQItem({ children, defaultOpen = false, question }) {
     )
   ] });
 }
-function FAQ({ children, title = "Frequently Asked Questions" }) {
+function FAQ({
+  as: Heading = "h4",
+  children,
+  title = "Frequently Asked Questions"
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-4 border-b border-border", children: [
       /* @__PURE__ */ jsx(HelpCircle, { className: "size-5 text-primary" }),
-      /* @__PURE__ */ jsx("h4", { className: "font-semibold", children: title })
+      /* @__PURE__ */ jsx(Heading, { className: "font-semibold", children: title })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "px-4", children })
   ] });

package/dist/components/floating-toolbar/floating-toolbar.js

@@ -31,7 +31,7 @@ const FloatingToolbar = forwardRef(
         ...rest,
         children: actions.map((action) => {
           const variant = action.variant ?? "ghost";
-          const handleClick = () => {
+          const handleActivateToolbarAction = () => {
             action.onActivate();
           };
           return /* @__PURE__ */ jsxs(
@@ -46,7 +46,7 @@ const FloatingToolbar = forwardRef(
               "data-action-id": action.id,
               "data-variant": variant,
               disabled: action.disabled,
-              onClick: handleClick,
+              onClick: handleActivateToolbarAction,
               type: "button",
               children: [
                 action.glyph ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex size-3", children: action.glyph }) : null,

package/dist/components/horizontal-scroll-row/horizontal-scroll-row.js

@@ -6,6 +6,7 @@ import { useHorizontalScroll } from "../../lib/use-horizontal-scroll";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
 const HorizontalScrollRow = memo(function HorizontalScrollRow2({
+  as: Heading = "h3",
   children,
   className,
   description,
@@ -16,7 +17,7 @@ const HorizontalScrollRow = memo(function HorizontalScrollRow2({
   return /* @__PURE__ */ jsxs("section", { className: cn("space-y-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
+        /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold", children: title }),
         description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
       ] }),
       showControls ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [

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

@@ -219,7 +219,7 @@ function EventNode({
   if (!visible) return null;
   const titleText = typeof event.title === "string" ? event.title : "Event";
   const tooltipId = `${event.id}-tooltip`;
-  const handleClick = (mouseEvent) => {
+  const handleSelectTimelineEvent = (mouseEvent) => {
     mouseEvent.stopPropagation();
     onSelect(event);
   };
@@ -236,7 +236,7 @@ function EventNode({
       "data-event-id": event.id,
       "data-event-track": event.track ?? "",
       "data-selected": active ? "true" : void 0,
-      onClick: handleClick,
+      onClick: handleSelectTimelineEvent,
       style: {
         left: `${(left * 100).toString()}%`,
         width: isDuration ? `${(width * 100).toString()}%` : void 0

package/dist/components/jarvis-dock/jarvis-dock.js

@@ -17,7 +17,7 @@ const DEFAULT_LABELS = {
 const ActionButton = (props) => {
   const { action } = props;
   const tone = action.tone ?? "neutral";
-  const handleClick = () => {
+  const handleActivateAction = () => {
     action.onActivate();
   };
   return /* @__PURE__ */ jsxs(
@@ -26,7 +26,7 @@ const ActionButton = (props) => {
       className: "group relative flex size-12 flex-col items-center justify-center gap-0.5 rounded-md border border-transparent text-[10px] uppercase tracking-wide text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
       "data-jarvis-action": action.id,
       "data-jarvis-tone": tone,
-      onClick: handleClick,
+      onClick: handleActivateAction,
       type: "button",
       children: [
         /* @__PURE__ */ jsx(

package/dist/components/key-concept/key-concept.js

@@ -43,13 +43,14 @@ function KeyConcept({
   );
 }
 function Glossary({
+  as: Heading = "h4",
   children,
   className,
   icon,
   title = "Key Terms"
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("my-6", className), children: [
-    /* @__PURE__ */ jsxs("h4", { className: "font-semibold mb-3 flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(Heading, { className: "font-semibold mb-3 flex items-center gap-2", children: [
       icon ? /* @__PURE__ */ jsx("span", { className: "size-4", children: icon }) : /* @__PURE__ */ jsx(
         "svg",
         {

package/dist/components/keyboard-shortcuts-help/keyboard-shortcuts-help.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
 function KeyboardShortcutsHelpImpl({
+  as: Heading = "h2",
   className,
   closeIcon,
   footer,
@@ -58,7 +59,7 @@ function KeyboardShortcutsHelpImpl({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: "shortcuts-title", children: title }),
+                /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold", id: "shortcuts-title", children: title }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {

package/dist/components/knowledge-check/knowledge-check.js

@@ -238,13 +238,13 @@ function FillBlankField({
   onChange,
   value
 }) {
-  const handleChange = useCallback(
+  const handleBlankValueChange = useCallback(
     (event) => {
       onChange(event.target.value);
     },
     [onChange]
   );
-  return /* @__PURE__ */ jsx(Input, { id: inputId, onChange: handleChange, value });
+  return /* @__PURE__ */ jsx(Input, { id: inputId, onChange: handleBlankValueChange, value });
 }
 function QuestionField({
   groupName,

package/dist/components/learning-objectives/learning-objectives.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircle2, Clock, GraduationCap, Target } from "lucide-react";
 function LearningObjectives({
+  as: Heading = "h4",
   estimatedTime,
   objectives,
   title = "What you'll learn"
@@ -10,7 +11,7 @@ function LearningObjectives({
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(Target, { className: "size-5 text-primary" }),
-        /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: title })
+        /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-foreground", children: title })
       ] }),
       estimatedTime ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
         /* @__PURE__ */ jsx(Clock, { className: "size-4" }),

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

@@ -214,7 +214,7 @@ MapTimelineControls.displayName = "MapTimelineControls";
 const MapTimelineSlider = forwardRef(({ className, ...rest }, ref) => {
   const { endYear, labels, setYear, startYear, year } = useTimelineContext();
   const sliderId = useId();
-  const handleChange = (event) => {
+  const handleYearChange = (event) => {
     setYear(Number.parseInt(event.target.value, 10));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 text-xs font-medium text-muted-foreground", children: [
@@ -230,7 +230,7 @@ const MapTimelineSlider = forwardRef(({ className, ...rest }, ref) => {
         id: sliderId,
         max: endYear,
         min: startYear,
-        onChange: handleChange,
+        onChange: handleYearChange,
         ref,
         type: "range",
         value: year,
@@ -251,7 +251,7 @@ const MapTimelineSlider = forwardRef(({ className, ...rest }, ref) => {
 MapTimelineSlider.displayName = "MapTimelineSlider";
 const MapTimelinePlayButton = forwardRef(({ className, ...rest }, ref) => {
   const { isPlaying, labels, setIsPlaying } = useTimelineContext();
-  const handleClick = () => {
+  const handleTogglePlayback = () => {
     setIsPlaying(!isPlaying);
   };
   return /* @__PURE__ */ jsx(
@@ -264,7 +264,7 @@ const MapTimelinePlayButton = forwardRef(({ className, ...rest }, ref) => {
         className
       ),
       "data-playing": isPlaying ? "true" : void 0,
-      onClick: handleClick,
+      onClick: handleTogglePlayback,
       ref,
       type: "button",
       ...rest,

package/dist/components/market-treemap/market-treemap.js

@@ -67,7 +67,7 @@ function MarketTreemapTile({
     }
   );
 }
-const MarketTreemap = React.forwardRef(({ className, items, ...props }, reference) => {
+const MarketTreemap = React.forwardRef(({ as: Heading = "h2", className, items, ...props }, reference) => {
   if (items.length === 0) {
     return null;
   }
@@ -85,7 +85,7 @@ const MarketTreemap = React.forwardRef(({ className, items, ...props }, referenc
         /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-center 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: "Sector heatmap" }),
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Market treemap" })
+            /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Market treemap" })
           ] }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Tile size maps market cap proxy; color reflects session change." })
         ] }),

package/dist/components/mdx-content/mdx-content.js

@@ -37,9 +37,9 @@ const MDXComponents = {
     );
   },
   em: ({ children, ...props }) => /* @__PURE__ */ jsx("em", { className: "italic", ...props, children }),
-  h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mt-8 mb-4", ...props, children }),
-  h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mt-6 mb-3", ...props, children }),
-  h3: ({ children, ...props }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold mt-4 mb-2", ...props, children }),
+  h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold mt-8 mb-4", ...props, children }),
+  h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold mt-6 mb-3", ...props, children }),
+  h3: ({ children, ...props }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mt-4 mb-2", ...props, children }),
   hr: ({ ...props }) => /* @__PURE__ */ jsx("hr", { className: "my-8 border-border", ...props }),
   li: ({ children, ...props }) => /* @__PURE__ */ jsx(
     "li",

package/dist/components/navbar-saas/navbar-saas.js

@@ -24,6 +24,7 @@ function NavbarSaas({
         Button,
         {
           className: "lg:hidden",
+          "data-testid": "navbar-saas-mobile-trigger",
           onClick: () => {
             setOpen(!open);
           },