@vllnt/ui 0.2.1-canary.0aaaad2 → 0.2.1-canary.26ff803

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/file-upload/file-upload.js

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

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

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { evaluate } from "@mdx-js/mdx";
 import * as runtime from "react/jsx-runtime";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { CodeBlock } from "../code-block/code-block";
 const MDXComponents = {
   a: ({ children, href, ...props }) => /* @__PURE__ */ jsx(
@@ -16,7 +17,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 +38,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,14 +90,15 @@ 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",
   "prose-td:border prose-td:border-border prose-td:p-2",
   "prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:shadow-lg"
 ].join(" ");
+const markdownPlugins = [remarkGfm];
 function removeImportStatements(content, componentNames) {
   let processed = content.replaceAll(/^import\s+.*CodeBlock.*from.*$/gm, "");
   componentNames.forEach((name) => {
@@ -143,9 +145,16 @@ async function MDXContent({
     if (Component) {
       return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(Component, { components: allComponents }) });
     }
-    return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, children: content }) });
+    return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(
+      ReactMarkdown,
+      {
+        components: allComponents,
+        remarkPlugins: markdownPlugins,
+        children: content
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, children: content }) });
+  return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, remarkPlugins: markdownPlugins, children: content }) });
 }
 export {
   MDXContent

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

@@ -7,7 +7,6 @@ import { cn } from "../../lib/utils";
 import { Button } from "../button";
 import { useSidebar } from "../sidebar-provider";
 import { ThemeToggle } from "../theme-toggle";
-import { useMobile } from "./use-mobile";
 const EMPTY_NAV_ITEMS = [];
 function NavbarSaas({
   brand,
@@ -17,13 +16,14 @@ function NavbarSaas({
 }) {
   const pathname = usePathname();
   const { open, setOpen } = useSidebar();
-  const isMobile = useMobile();
   return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-16 items-center justify-between px-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      showMobileMenu && isMobile ? /* @__PURE__ */ jsx(
+      showMobileMenu ? /* @__PURE__ */ jsx(
         Button,
         {
-          className: "lg:hidden",
+          "aria-expanded": open,
+          "aria-label": "Toggle sidebar",
+          "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(