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

package/dist/components/connector-edge/connector-edge.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-import { EdgeLabel } from "../edge-label";
+import { EdgeLabel } from "../edge-label/edge-label";
 const strokeClasses = {
   active: "stroke-sky-500",
   blocked: "stroke-amber-500",

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

@@ -1,8 +1,8 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect } from "react";
+import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const DEFAULT_LABELS = {
   continueLabel: "Continue Tutorial",
   startLabel: "Start Tutorial",
@@ -19,33 +19,36 @@ function ContentIntroImpl({
   onStart,
   renderIntroContent,
   sections,
-  title
+  title,
+  titleAs: TitleHeading = "h2",
+  tocLabelAs: TocHeading = "h3"
 }) {
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const hasProgress = completedSections.size > 0;
-  const handleKeyDown = useCallback(
-    (event) => {
+  const onStartRef = useRef(onStart);
+  useEffect(() => {
+    onStartRef.current = onStart;
+  }, [onStart]);
+  useEffect(() => {
+    const onDocumentKeyDown = (event) => {
       if (event.key === "Enter") {
         event.preventDefault();
-        onStart();
+        onStartRef.current();
       }
-    },
-    [onStart]
-  );
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
+    };
+    document.addEventListener("keydown", onDocumentKeyDown);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", onDocumentKeyDown);
     };
-  }, [handleKeyDown]);
+  }, []);
   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/conversation-thread/conversation-thread.js

@@ -12,7 +12,7 @@ import {
 } from "react";
 import { ArrowDown, RefreshCw, ThumbsDown, ThumbsUp } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { ThinkingBlock } from "../thinking-block";
+import { ThinkingBlock } from "../thinking-block/thinking-block";
 const ConversationThreadContext = createContext(null);
 function useConversationThreadContext() {
   const ctx = useContext(ConversationThreadContext);
@@ -319,18 +319,18 @@ const ConversationLoading = forwardRef(({ className }, reference) => {
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "size-2 animate-bounce rounded-full bg-muted-foreground",
+            className: "size-2 animate-pulse rounded-full bg-muted-foreground",
             style: { animationDelay: "-0.3s" }
           }
         ),
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "size-2 animate-bounce rounded-full bg-muted-foreground",
+            className: "size-2 animate-pulse rounded-full bg-muted-foreground",
             style: { animationDelay: "-0.15s" }
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "size-2 animate-bounce rounded-full bg-muted-foreground" })
+        /* @__PURE__ */ jsx("span", { className: "size-2 animate-pulse rounded-full bg-muted-foreground" })
       ]
     }
   );

package/dist/components/countdown-timer/countdown-timer.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,

package/dist/components/data-table/data-table.js

@@ -11,7 +11,7 @@ import {
 } from "@tanstack/react-table";
 import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import { Checkbox } from "../checkbox";
 import { Input } from "../input";
 import {

package/dist/components/date-picker/date-picker.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CalendarIcon } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import { Calendar } from "../calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 const defaultDateFormatter = new Intl.DateTimeFormat("en-US", {
@@ -25,11 +25,6 @@ const DatePicker = React.forwardRef(
       value
     );
     const selectedDate = value ?? internalValue;
-    React.useEffect(() => {
-      if (value !== void 0) {
-        setInternalValue(value);
-      }
-    }, [value]);
     const handleSelect = (nextDate) => {
       if (value === void 0) {
         setInternalValue(nextDate);

package/dist/components/exercise/exercise.js

@@ -3,18 +3,24 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Check, Dumbbell, Eye, EyeOff } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const difficultyConfig = {
   easy: { className: "text-green-600 dark:text-green-400", label: "Easy" },
   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/file-upload/file-upload.js

@@ -3,16 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { FileUp, UploadCloud, X } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function useFileUploadState(controlledFiles, multiple, onFilesChange) {
   const [internalFiles, setInternalFiles] = React.useState(
     controlledFiles ?? []
   );
-  React.useEffect(() => {
-    if (controlledFiles !== void 0) {
-      setInternalFiles(controlledFiles);
-    }
-  }, [controlledFiles]);
   const resolvedFiles = controlledFiles ?? internalFiles;
   const updateFiles = React.useCallback(
     (nextFiles) => {

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

@@ -1,8 +1,8 @@
 "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";
+import { Badge } from "../badge/badge";
 function SearchInput({
   disabled,
   label,
@@ -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/flashcard/flashcard.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { RefreshCcw } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import { Button } from "../button";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../card";
 function Flashcard({

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/form/form.js

@@ -10,7 +10,7 @@ import {
   useFormContext
 } from "react-hook-form";
 import { cn } from "../../lib/utils";
-import { Label } from "../label";
+import { Label } from "../label/label";
 const FormRootContext = React.createContext(
   void 0
 );

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/inline-input/inline-input.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
-import { Input } from "../input";
+import { Input } from "../input/input";
 function InlineInput({
   className,
   onCancel,

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/lang-provider/lang-provider.js

@@ -6,11 +6,11 @@ function LangProvider({
   supportedLanguages = ["en", "fr"]
 }) {
   const pathname = usePathname();
+  const langMatch = /^\/([a-z]{2})(?:\/|$)/.exec(pathname);
+  const lang = langMatch && supportedLanguages.includes(langMatch[1]) ? langMatch[1] : defaultLanguage;
   useEffect(() => {
-    const langMatch = /^\/([a-z]{2})(?:\/|$)/.exec(pathname);
-    const lang = langMatch && supportedLanguages.includes(langMatch[1]) ? langMatch[1] : defaultLanguage;
     document.documentElement.setAttribute("lang", lang);
-  }, [pathname, defaultLanguage, supportedLanguages]);
+  }, [lang]);
   return null;
 }
 export {

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

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,
@@ -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." })
         ] }),