@vllnt/ui 0.2.1-canary.0aaaad2 → 0.2.1-canary.2994ef2

package/dist/components/filter-bar/filter-bar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useState } from "react";
+import { memo, useCallback, useTransition } from "react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge";
 function SearchInput({
@@ -160,15 +160,15 @@ function FilterBarImpl({
   searchQuery,
   tags
 }) {
-  const [isPending, setIsPending] = useState(false);
+  const [isPending, startTransition] = useTransition();
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const handleDifficultyChange = useCallback(
     (difficulty) => {
-      setIsPending(true);
-      onFiltersChange({ difficulty });
-      setIsPending(false);
+      startTransition(() => {
+        onFiltersChange({ difficulty });
+      });
     },
-    [onFiltersChange]
+    [onFiltersChange, startTransition]
   );
   const handleSearchChange = useCallback(
     (search) => {

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

@@ -56,7 +56,7 @@ function getTickDateTimeFormatter(locale, scale) {
   let formatter = TICK_FORMATTER_CACHE.get(key);
   if (!formatter) {
     const options = scale === "month" ? { month: "short", year: "numeric" } : { day: "2-digit", month: "short" };
-    formatter = new Intl.DateTimeFormat(locale, options);
+    formatter = Intl.DateTimeFormat(locale, options);
     TICK_FORMATTER_CACHE.set(key, formatter);
   }
   return formatter;
@@ -93,13 +93,14 @@ function buildTicks(input) {
   const formatter = buildTickFormatter(scale, locale);
   const stepDays = getTickStep(scale);
   const tickCount = Math.floor(totalDays / stepDays);
-  return Array.from({ length: tickCount + 1 }).map((_, index) => {
+  return Array.from({ length: tickCount + 1 }).reduce((ticks, _, index) => {
     const day = index * stepDays;
-    return {
-      date: new Date(start.getTime() + day * MS_PER_DAY),
-      offset: day
-    };
-  }).filter((tick) => tick.date.getTime() <= end.getTime()).map((tick) => ({ label: formatter(tick.date), offset: tick.offset }));
+    const date = new Date(start.getTime() + day * MS_PER_DAY);
+    if (date.getTime() <= end.getTime()) {
+      ticks.push({ label: formatter(date), offset: day });
+    }
+    return ticks;
+  }, []);
 }
 function useChartGeometry(options) {
   const { endDate, locale, scale, startDate } = options;

package/dist/components/globe-3d/globe-3d.js

@@ -161,9 +161,12 @@ const GlobeArc = forwardRef(
 GlobeArc.displayName = "GlobeArc";
 function buildLine(arguments_) {
   const { points, rotationLat, rotationLng } = arguments_;
-  return points.map((coord) => project(coord, rotationLng, rotationLat)).reduce(
-    (state, projected) => {
-      if (!projected.visible) return { path: state.path, pen: "up" };
+  return points.reduce(
+    (state, coord) => {
+      const projected = project(coord, rotationLng, rotationLat);
+      if (!projected.visible) {
+        return { path: state.path, pen: "up" };
+      }
       const head = state.pen === "up" ? "M" : "L";
       const separator = state.path.length > 0 ? " " : "";
       return {
@@ -185,7 +188,16 @@ function Graticule({ rotationLat, rotationLng }) {
   const meridians = range(-150, 180, 30).map(
     (lng) => range(-85, 85, 5).map((lat) => ({ lat, lng }))
   );
-  const lines = [...parallels, ...meridians].map((points) => buildLine({ points, rotationLat, rotationLng })).filter((path) => path.length > 0);
+  const lines = [...parallels, ...meridians].reduce(
+    (paths, points) => {
+      const path = buildLine({ points, rotationLat, rotationLng });
+      if (path.length > 0) {
+        paths.push(path);
+      }
+      return paths;
+    },
+    []
+  );
   return /* @__PURE__ */ jsx(
     "g",
     {

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
@@ -607,9 +607,12 @@ function useTimelineContextValue(arguments_) {
 function useTimelineFilter(categories, events) {
   const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
   const visibleCategories = useMemo(
-    () => new Set(
-      categories.filter((category) => !hidden.has(category.id)).map((category) => category.id)
-    ),
+    () => categories.reduce((visible, category) => {
+      if (!hidden.has(category.id)) {
+        visible.add(category.id);
+      }
+      return visible;
+    }, /* @__PURE__ */ new Set()),
     [categories, hidden]
   );
   const toggleCategory = useCallback((id) => {

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/live-feed/live-feed.js

@@ -131,7 +131,7 @@ const LiveFeed = React.forwardRef(
       [events, maxItems]
     );
     return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-sm", className), ref, ...props, children: [
-      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 space-y-0 pb-3", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 gap-y-0 pb-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: title }),
           description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null

package/dist/components/map-2d/map-2d.js

@@ -53,7 +53,7 @@ function useMapState(arguments_) {
   }, [center]);
   const [pan, setPan] = useState(initialPan);
   const [zoom, setZoom] = useState(
-    clamp(initialZoom, MIN_ZOOM, MAX_ZOOM)
+    () => clamp(initialZoom, MIN_ZOOM, MAX_ZOOM)
   );
   const zoomIn = useCallback(() => {
     setZoom((current) => clamp(current * ZOOM_STEP, MIN_ZOOM, MAX_ZOOM));

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,
@@ -301,7 +301,7 @@ function useTimelineCtx(arguments_) {
 function useTimelineState(arguments_) {
   const { endYear, initialYear, onYearChange, startYear } = arguments_;
   const [year, setYear] = useState(
-    clamp(initialYear ?? startYear, startYear, endYear)
+    () => clamp(initialYear ?? startYear, startYear, endYear)
   );
   const [isPlaying, setIsPlaying] = useState(false);
   const updateYear = useCallback(

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

@@ -16,7 +16,7 @@ const MDXComponents = {
   blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx(
     "blockquote",
     {
-      className: "border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
+      className: "border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
       ...props,
       children
     }
@@ -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",
@@ -89,8 +89,8 @@ const proseClasses = [
   "prose-strong:font-semibold prose-em:italic",
   "prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80",
   "prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono",
-  "prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-black prose-pre:py-4 prose-pre:font-mono prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900",
-  "prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-muted-foreground prose-blockquote:my-6 prose-blockquote:py-2",
+  "prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:py-4 prose-pre:font-mono prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900",
+  "prose-blockquote:border-l prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-muted-foreground prose-blockquote:my-6 prose-blockquote:py-2",
   "prose-hr:my-8 prose-hr:border-border",
   "prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border",
   "prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium",

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);
           },

package/dist/components/number-ticker/number-ticker.js

@@ -7,7 +7,7 @@ function getNumberTickerFormatter(locale, formatOptions) {
   const key = `${locale ?? ""}|${formatOptions ? JSON.stringify(formatOptions) : ""}`;
   let formatter = NUMBER_FORMATTER_CACHE.get(key);
   if (!formatter) {
-    formatter = new Intl.NumberFormat(locale, formatOptions);
+    formatter = Intl.NumberFormat(locale, formatOptions);
     NUMBER_FORMATTER_CACHE.set(key, formatter);
   }
   return formatter;

package/dist/components/order-book/order-book.js

@@ -68,7 +68,7 @@ function BookSide({
   ] });
 }
 const OrderBook = React.forwardRef(
-  ({ asks, bids, className, precision = 2, ...props }, reference) => {
+  ({ as: Heading = "h2", asks, bids, className, precision = 2, ...props }, reference) => {
     if (asks.length === 0 && bids.length === 0) {
       return null;
     }
@@ -90,7 +90,7 @@ const OrderBook = 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: "Level II" }),
-              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Order book" })
+              /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Order book" })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "rounded-full border border-border bg-background/70 px-3 py-1 text-sm text-muted-foreground tabular-nums", children: [
               "Spread ",

package/dist/components/policy-delivery-panel/policy-delivery-panel.js

@@ -40,7 +40,7 @@ const RowBody = (props) => {
 const Row = (props) => {
   const { policy } = props;
   if (policy.onToggle) {
-    const handleClick = () => {
+    const handleTogglePolicy = () => {
       policy.onToggle?.();
     };
     return /* @__PURE__ */ jsx(
@@ -49,7 +49,7 @@ const Row = (props) => {
         className: "flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         "data-policy-row": policy.id,
         "data-policy-status": policy.status,
-        onClick: handleClick,
+        onClick: handleTogglePolicy,
         type: "button",
         children: /* @__PURE__ */ jsx(RowBody, { policy })
       }

package/dist/components/profile-section/profile-section.js

@@ -3,6 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { Button } from "../button/button";
 function ProfileSection({
+  as: Heading = "h3",
   compact = false,
   dict,
   imageAlt,
@@ -25,7 +26,7 @@ function ProfileSection({
       }
     ) }) : null,
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("h3", { className: `font-semibold ${compact ? "text-lg" : "text-xl"}`, children: dict.profile.name }),
+      /* @__PURE__ */ jsx(Heading, { className: `font-semibold ${compact ? "text-lg" : "text-xl"}`, children: dict.profile.name }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: compact ? dict.profile.tagline : `> ${dict.profile.tagline}` })
     ] }),
     showSocialLinks ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center items-center gap-2", children: socialLinks?.map((link) => /* @__PURE__ */ jsx(

package/dist/components/progress-tracker/progress-tracker.js

@@ -10,7 +10,10 @@ import {
   CardHeader,
   CardTitle
 } from "../card";
-import { CHECKLIST_PROGRESS_EVENT } from "../checklist";
+import {
+  CHECKLIST_PROGRESS_EVENT,
+  parseChecklistStorageValue
+} from "../checklist";
 import { ProgressBar } from "../progress-bar";
 const ProgressTrackerContext = React.createContext(null);
 function clampPercentage(value) {
@@ -41,15 +44,13 @@ function readPersistedChecklistItems(persistKey) {
   try {
     const saved = localStorage.getItem(`checklist:${persistKey}`);
     if (!saved) return [];
-    const parsed = JSON.parse(saved);
-    return Array.isArray(parsed) ? parsed.filter((item) => typeof item === "string") : [];
+    return parseChecklistStorageValue(saved);
   } catch {
     return [];
   }
 }
 function areStringArraysEqual(left, right) {
-  if (left.length !== right.length) return false;
-  return left.every((value, index) => value === right[index]);
+  return left.length === right.length && left.every((value, index) => value === right[index]);
 }
 function getChecklistPersistKey(event) {
   if (!(event instanceof CustomEvent)) return null;
@@ -162,7 +163,12 @@ function ProgressTrackerOverview({
 }) {
   const { modules, overallProgress, streak, title } = useProgressTrackerContext();
   const trackedPersistKeys = React.useMemo(
-    () => modules.map((module) => module.persistKey).filter(Boolean),
+    () => modules.reduce((keys, module) => {
+      if (module.persistKey) {
+        keys.push(module.persistKey);
+      }
+      return keys;
+    }, []),
     [modules]
   );
   const [, forceChecklistRefresh] = React.useState(0);

package/dist/components/prompt-templates/prompt-templates.js

@@ -243,7 +243,7 @@ function VariableField({
   onValueChange,
   value
 }) {
-  const handleChange = useCallback(
+  const handleVariableValueChange = useCallback(
     (event) => {
       onValueChange(name, event.target.value);
     },
@@ -255,7 +255,7 @@ function VariableField({
       Input,
       {
         id: fieldId,
-        onChange: handleChange,
+        onChange: handleVariableValueChange,
         placeholder: `Value for ${name}`,
         value
       }

package/dist/components/quiz/quiz.js

@@ -118,6 +118,7 @@ function QuizResult({
   );
 }
 function Quiz({
+  as: Heading = "h4",
   className,
   explanation,
   hint,
@@ -159,7 +160,7 @@ function Quiz({
           )
         }
       ),
-      /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: question })
+      /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-foreground", children: question })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-4", children: options.map((opt, index) => /* @__PURE__ */ jsx(
       QuizOptionButton,
@@ -172,7 +173,7 @@ function Quiz({
         selectedIndex,
         submitted
       },
-      typeof opt === "string" ? opt : `quiz-option-${String(opt)}`
+      `quiz-option-${index}-${opt.label}`
     )) }),
     hint && !submitted ? /* @__PURE__ */ jsx(
       QuizHint,

package/dist/components/relationship-inspector/relationship-inspector.js

@@ -28,7 +28,7 @@ const RowBody = (props) => {
 const Row = (props) => {
   const { edge } = props;
   if (edge.onActivate) {
-    const handleClick = () => {
+    const handleActivateRelationship = () => {
       edge.onActivate?.();
     };
     return /* @__PURE__ */ jsx(
@@ -37,7 +37,7 @@ const Row = (props) => {
         className: "flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         "data-relationship-direction": edge.direction,
         "data-relationship-row": true,
-        onClick: handleClick,
+        onClick: handleActivateRelationship,
         type: "button",
         children: /* @__PURE__ */ jsx(RowBody, { edge })
       }

package/dist/components/routing-assignment-panel/routing-assignment-panel.js

@@ -63,7 +63,7 @@ const RowBody = (props) => {
 const Row = (props) => {
   const { assignment } = props;
   if (assignment.onActivate) {
-    const handleClick = () => {
+    const handleActivateAssignment = () => {
       assignment.onActivate?.();
     };
     return /* @__PURE__ */ jsx(
@@ -72,7 +72,7 @@ const Row = (props) => {
         className: "flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         "data-routing-assignment": assignment.id,
         "data-routing-role": assignment.role,
-        onClick: handleClick,
+        onClick: handleActivateAssignment,
         type: "button",
         children: /* @__PURE__ */ jsx(RowBody, { assignment })
       }

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

@@ -63,7 +63,7 @@ const PhaseBar = (props) => {
   };
   const ariaLabel = `${STATE_LABEL[state]} ${phase.start} \u2192 ${phase.end}`;
   if (phase.onActivate) {
-    const handleClick = () => {
+    const handleActivatePhase = () => {
       phase.onActivate?.();
     };
     return /* @__PURE__ */ jsx(
@@ -76,7 +76,7 @@ const PhaseBar = (props) => {
         ),
         "data-run-phase": phase.id,
         "data-run-phase-state": state,
-        onClick: handleClick,
+        onClick: handleActivatePhase,
         style: sharedStyle,
         type: "button",
         children: phase.label

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

@@ -13,7 +13,7 @@ function PlatformButton({
   onClick,
   platform
 }) {
-  const handleClick = () => {
+  const handleSelectPlatform = () => {
     onClick(platform.key);
   };
   return /* @__PURE__ */ jsx(
@@ -26,7 +26,7 @@ function PlatformButton({
         "hover:bg-accent hover:text-accent-foreground",
         "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
       ),
-      onClick: handleClick,
+      onClick: handleSelectPlatform,
       type: "button",
       children: platform.label
     }

package/dist/components/share-section/share-section.js

@@ -26,6 +26,7 @@ function buildShareUrl(platform, url, title) {
   }
 }
 function ShareSection({
+  as: Heading = "h3",
   buildUrl: buildUrlFunction = buildShareUrl,
   platforms = defaultPlatforms,
   shareOn,
@@ -34,7 +35,7 @@ function ShareSection({
   url
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "border-t border-border pt-6 mt-8", children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: shareTitle }),
+    /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold mb-4", children: shareTitle }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: platforms.map((platform) => /* @__PURE__ */ jsxs(
       "a",
       {