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

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/metric-gauge/metric-gauge.js

@@ -1,7 +1,7 @@
 import { Fragment, 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/model-selector/model-selector.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from "react";
 import { ArrowUpDown, Filter } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import { Button } from "../button";
 import {
   Command,

package/dist/components/multi-select/multi-select.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Check, ChevronDown } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import { Button } from "../button";
 import {
   Command,

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

@@ -4,10 +4,9 @@ import { Menu, X } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/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-input/number-input.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Minus, Plus } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function getNumericBound(bound) {
   if (bound === void 0) {
     return;

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/object-card/object-card.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import { Button } from "../button";
 const stateClasses = {
   blocked: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",

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/overview-board/overview-board.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { AlertCircle, ArrowRight, Inbox, ListTodo, Siren } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const toneClassNames = {
   danger: "border-red-500/30 bg-red-500/8",
   default: "border-border/70 bg-background/80",

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-card/progress-card.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useState } from "react";
 import { useMounted } from "../../lib/use-mounted";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,

package/dist/components/progress-tracker/progress-tracker.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,
@@ -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;
@@ -79,14 +80,16 @@ function useChecklistProgress(checklistItems = [], persistKey) {
   const [persistedIds, setPersistedIds] = React.useState(
     () => readPersistedChecklistItems(persistKey)
   );
+  const [trackedPersistKey, setTrackedPersistKey] = React.useState(persistKey);
   const setPersistedIdsIfChanged = React.useCallback((nextIds) => {
     setPersistedIds(
       (currentIds) => areStringArraysEqual(currentIds, nextIds) ? currentIds : nextIds
     );
   }, []);
-  React.useEffect(() => {
+  if (trackedPersistKey !== persistKey) {
+    setTrackedPersistKey(persistKey);
     setPersistedIdsIfChanged(readPersistedChecklistItems(persistKey));
-  }, [persistKey, setPersistedIdsIfChanged]);
+  }
   React.useEffect(() => {
     if (!persistKey || typeof window === "undefined") return;
     const sync = (event) => {
@@ -162,7 +165,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/scope-selector/scope-selector.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo, useState } from "react";
 import { Check, ChevronRight, Search } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import { Button } from "../button";
 import { Input } from "../input";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";