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

package/dist/components/empty-state/index.js

@@ -0,0 +1,8 @@
+import {
+  EmptyState,
+  emptyStateVariants
+} from "./empty-state";
+export {
+  EmptyState,
+  emptyStateVariants
+};

package/dist/components/era-comparison/era-comparison.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const ERA_PALETTE = {
+  amber: {
+    accent: "bg-amber-500",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300"
+  },
+  blue: {
+    accent: "bg-blue-500",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300"
+  },
+  emerald: {
+    accent: "bg-emerald-500",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
+  },
+  neutral: {
+    accent: "bg-muted-foreground/40",
+    chip: "bg-muted text-muted-foreground"
+  },
+  purple: {
+    accent: "bg-purple-500",
+    chip: "bg-purple-500/15 text-purple-700 dark:text-purple-300"
+  },
+  red: {
+    accent: "bg-red-500",
+    chip: "bg-red-500/15 text-red-700 dark:text-red-300"
+  },
+  rose: {
+    accent: "bg-rose-500",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300"
+  }
+};
+const EraColumnContext = createContext({
+  color: "neutral"
+});
+function useEraColumnColor() {
+  return useContext(EraColumnContext).color;
+}
+const EraComparison = forwardRef(
+  ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
+        className
+      ),
+      ref,
+      ...rest,
+      children
+    }
+  )
+);
+EraComparison.displayName = "EraComparison";
+function ColumnHeader({
+  color,
+  name,
+  period,
+  region
+}) {
+  const palette = ERA_PALETTE[color];
+  return /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("h-1 w-12 rounded-full", palette.accent)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold tracking-tight text-foreground", children: name }),
+      period ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "rounded-full px-2 py-0.5 text-xs font-mono",
+            palette.chip
+          ),
+          children: period
+        }
+      ) : null
+    ] }),
+    region ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: region }) : null
+  ] });
+}
+const EraColumn = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      color = "neutral",
+      name,
+      period,
+      region,
+      ...rest
+    } = props;
+    const contextValue = useMemo(
+      () => ({ color }),
+      [color]
+    );
+    return /* @__PURE__ */ jsx(EraColumnContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: cn(
+          "flex flex-col gap-3 rounded-2xl border border-border bg-background p-4 shadow-sm",
+          className
+        ),
+        "data-color": color,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            ColumnHeader,
+            {
+              color,
+              name,
+              period,
+              region
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children })
+        ]
+      }
+    ) });
+  }
+);
+EraColumn.displayName = "EraColumn";
+const EraDomain = forwardRef(
+  ({ children, className, name, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("flex flex-col gap-2", className),
+      "data-domain": typeof name === "string" ? name : void 0,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: name }),
+        children
+      ]
+    }
+  )
+);
+EraDomain.displayName = "EraDomain";
+const EraHighlight = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const color = useEraColumnColor();
+    const palette = ERA_PALETTE[color];
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn("rounded-md px-2 py-1 text-sm", palette.chip, className),
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+EraHighlight.displayName = "EraHighlight";
+const EraFigure = forwardRef(
+  (props, ref) => {
+    const { anchorProps, className, href, name, ...rest } = props;
+    const color = useEraColumnColor();
+    const palette = ERA_PALETTE[color];
+    const baseClass = cn(
+      "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+      palette.chip,
+      className
+    );
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: cn(baseClass, "underline-offset-4 hover:underline"),
+          href,
+          ...anchorProps,
+          children: name
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("span", { className: baseClass, ref, ...rest, children: name });
+  }
+);
+EraFigure.displayName = "EraFigure";
+export {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+};

package/dist/components/era-comparison/index.js

@@ -0,0 +1,16 @@
+import {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+} from "./era-comparison";
+export {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+};

package/dist/components/exercise/exercise.js

@@ -12,7 +12,7 @@ const difficultyConfig = {
 function ExerciseHeader({ completed, config, 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 h-10 w-10 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(Dumbbell, { className: "h-5 w-5 text-primary" }) }),
+      /* @__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("span", { className: cn("text-xs font-medium", config.className), children: config.label })
@@ -26,7 +26,7 @@ function ExerciseHeader({ completed, config, onToggle, title }) {
         size: "sm",
         variant: completed ? "default" : "outline",
         children: completed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-1" }),
+          /* @__PURE__ */ jsx(Check, { className: "size-4 mr-1" }),
           "Done"
         ] }) : "Mark Complete"
       }
@@ -50,10 +50,10 @@ function ExerciseHint({ hint, onShow, showHint }) {
 function ExerciseSolution({ onToggle, showSolution, solution }) {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Button, { className: "mb-3", onClick: onToggle, size: "sm", variant: "outline", children: showSolution ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4 mr-1" }),
+      /* @__PURE__ */ jsx(EyeOff, { className: "size-4 mr-1" }),
       "Hide Solution"
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-1" }),
+      /* @__PURE__ */ jsx(Eye, { className: "size-4 mr-1" }),
       "Show Solution"
     ] }) }),
     showSolution ? /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-lg bg-card border text-sm [&>pre]:my-0", children: [

package/dist/components/faq/faq.js

@@ -20,7 +20,7 @@ function FAQItem({ children, defaultOpen = false, question }) {
             ChevronDown,
             {
               className: cn(
-                "h-4 w-4 flex-shrink-0 transition-transform duration-200",
+                "size-4 flex-shrink-0 transition-transform duration-200",
                 isOpen && "rotate-180"
               )
             }
@@ -43,7 +43,7 @@ function FAQItem({ children, defaultOpen = false, question }) {
 function FAQ({ 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: "h-5 w-5 text-primary" }),
+      /* @__PURE__ */ jsx(HelpCircle, { className: "size-5 text-primary" }),
       /* @__PURE__ */ jsx("h4", { className: "font-semibold", children: title })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "px-4", children })

package/dist/components/file-upload/file-upload.js

@@ -73,7 +73,7 @@ function FileListItem({
         size: "icon",
         type: "button",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
       }
     )
   ] });
@@ -127,13 +127,13 @@ function FileUploadDropzone({
       role: "button",
       tabIndex: disabled ? -1 : 0,
       children: [
-        /* @__PURE__ */ jsx(UploadCloud, { className: "mb-3 h-10 w-10 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(UploadCloud, { className: "mb-3 size-10 text-muted-foreground" }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium", children: dropzoneText }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: helperText })
         ] }),
         /* @__PURE__ */ jsxs("span", { className: "mt-4 inline-flex h-10 items-center justify-center rounded-md border border-input bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm", children: [
-          /* @__PURE__ */ jsx(FileUp, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx(FileUp, { className: "mr-2 size-4" }),
           browseLabel
         ] }),
         children

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

@@ -149,12 +149,13 @@ const DEFAULT_LABELS = {
   searchPlaceholder: "Search...",
   tagsLabel: "Tags:"
 };
+const EMPTY_FILTER_BAR_LABELS = {};
 function FilterBarImpl({
   className,
   currentDifficulty,
   currentTags,
   difficultyOptions,
-  labels = {},
+  labels = EMPTY_FILTER_BAR_LABELS,
   onFiltersChange,
   searchQuery,
   tags

package/dist/components/flashcard/flashcard.js

@@ -39,7 +39,7 @@ function Flashcard({
             /* @__PURE__ */ jsx(CardTitle, { children: title })
           ] }),
           /* @__PURE__ */ jsxs(Button, { onClick: toggleFlipped, size: "sm", variant: "outline", children: [
-            /* @__PURE__ */ jsx(RefreshCcw, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsx(RefreshCcw, { className: "mr-2 size-4" }),
             "Flip"
           ] })
         ] }),

package/dist/components/floating-action-button/floating-action-button.js

@@ -14,7 +14,7 @@ function FloatingActionButtonImpl({
     {
       "aria-label": ariaLabel,
       className: cn(
-        "fixed z-40 flex h-12 w-12 items-center justify-center rounded-full",
+        "fixed z-40 flex size-12 items-center justify-center rounded-full",
         "bg-primary text-primary-foreground shadow-lg",
         "transition-transform hover:scale-110",
         "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",

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

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const VARIANT_CLASSES = {
+  destructive: "border-red-300 bg-red-500/10 text-red-700 hover:bg-red-500/20 dark:text-red-300",
+  ghost: "border-border bg-background text-foreground hover:bg-accent",
+  primary: "border-primary bg-primary text-primary-foreground hover:bg-primary/90"
+};
+const DEFAULT_LABELS = {
+  region: "Selection actions"
+};
+const FloatingToolbar = forwardRef(
+  (props, ref) => {
+    const { actions, className, labels, x, y, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "absolute z-30 flex -translate-y-full items-center gap-1 rounded-md border border-border bg-background/95 p-1 shadow-md backdrop-blur",
+          className
+        ),
+        "data-floating-toolbar": true,
+        ref,
+        role: "toolbar",
+        style: { left: `${x.toString()}px`, top: `${y.toString()}px` },
+        ...rest,
+        children: actions.map((action) => {
+          const variant = action.variant ?? "ghost";
+          const handleClick = () => {
+            action.onActivate();
+          };
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              "aria-label": action.ariaLabel ?? void 0,
+              className: cn(
+                "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                VARIANT_CLASSES[variant],
+                action.disabled ? "cursor-not-allowed opacity-50" : ""
+              ),
+              "data-action-id": action.id,
+              "data-variant": variant,
+              disabled: action.disabled,
+              onClick: handleClick,
+              type: "button",
+              children: [
+                action.glyph ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex size-3", children: action.glyph }) : null,
+                /* @__PURE__ */ jsx("span", { children: action.label })
+              ]
+            },
+            action.id
+          );
+        })
+      }
+    );
+  }
+);
+FloatingToolbar.displayName = "FloatingToolbar";
+export {
+  FloatingToolbar
+};

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

@@ -0,0 +1,6 @@
+import {
+  FloatingToolbar
+} from "./floating-toolbar";
+export {
+  FloatingToolbar
+};

package/dist/components/flow-diagram/flow-controls.js

@@ -12,7 +12,7 @@ import {
   X
 } from "lucide-react";
 import { cn } from "../../lib/utils";
-const BUTTON_CLASS = "flex h-8 w-8 items-center justify-center rounded hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+const BUTTON_CLASS = "flex size-8 items-center justify-center rounded hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
 function ControlButton({
   disabled,
   icon,
@@ -36,14 +36,14 @@ function ControlButton({
 function getCopyIcon(status) {
   switch (status) {
     case "copying":
-      return /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" });
+      return /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" });
     case "success":
-      return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-500" });
+      return /* @__PURE__ */ jsx(Check, { className: "size-4 text-green-500" });
     case "error":
-      return /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-destructive" });
+      return /* @__PURE__ */ jsx(X, { className: "size-4 text-destructive" });
     case "idle":
     case void 0:
-      return /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" });
+      return /* @__PURE__ */ jsx(Copy, { className: "size-4" });
   }
 }
 function getCopyTitle(status) {
@@ -81,7 +81,7 @@ const FlowControls = memo(function FlowControls2({
         /* @__PURE__ */ jsx(
           ControlButton,
           {
-            icon: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            icon: /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
             label: "Zoom in",
             onClick: onZoomIn,
             title: "Zoom in"
@@ -90,7 +90,7 @@ const FlowControls = memo(function FlowControls2({
         /* @__PURE__ */ jsx(
           ControlButton,
           {
-            icon: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }),
+            icon: /* @__PURE__ */ jsx(Minus, { className: "size-4" }),
             label: "Zoom out",
             onClick: onZoomOut,
             title: "Zoom out"
@@ -100,7 +100,7 @@ const FlowControls = memo(function FlowControls2({
         /* @__PURE__ */ jsx(
           ControlButton,
           {
-            icon: /* @__PURE__ */ jsx(Move, { className: "h-4 w-4" }),
+            icon: /* @__PURE__ */ jsx(Move, { className: "size-4" }),
             label: "Fit view",
             onClick: onFitView,
             title: "Fit view"
@@ -124,7 +124,7 @@ const FlowControls = memo(function FlowControls2({
           /* @__PURE__ */ jsx(
             ControlButton,
             {
-              icon: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" }),
+              icon: /* @__PURE__ */ jsx(Maximize2, { className: "size-4" }),
               label: "Fullscreen",
               onClick: onFullscreen,
               title: "Toggle fullscreen"

package/dist/components/flow-diagram/flow-error-boundary.js

@@ -34,7 +34,7 @@ class FlowErrorBoundary extends Component {
           ),
           style: { height },
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-destructive" }) }),
+            /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "size-6 text-destructive" }) }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: "Failed to render diagram" }),
               /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: error?.message ?? "An unexpected error occurred while rendering the flow diagram." })
@@ -46,7 +46,7 @@ class FlowErrorBoundary extends Component {
                 onClick: this.handleRetry,
                 type: "button",
                 children: [
-                  /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
                   "Try again"
                 ]
               }

package/dist/components/flow-diagram/flow-fullscreen.js

@@ -39,11 +39,11 @@ const FlowFullscreen = memo(function FlowFullscreen2({
             "button",
             {
               "aria-label": "Close fullscreen",
-              className: "flex h-8 w-8 items-center justify-center rounded hover:bg-muted transition-colors",
+              className: "flex size-8 items-center justify-center rounded hover:bg-muted transition-colors",
               onClick: onClose,
               title: "Close fullscreen (Esc)",
               type: "button",
-              children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+              children: /* @__PURE__ */ jsx(X, { className: "size-5" })
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children })

package/dist/components/follow-mode/follow-mode.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const PALETTE = {
+  amber: { chip: "bg-amber-500 text-white", ring: "ring-amber-500" },
+  blue: { chip: "bg-blue-500 text-white", ring: "ring-blue-500" },
+  emerald: { chip: "bg-emerald-500 text-white", ring: "ring-emerald-500" },
+  purple: { chip: "bg-purple-500 text-white", ring: "ring-purple-500" },
+  red: { chip: "bg-red-500 text-white", ring: "ring-red-500" },
+  rose: { chip: "bg-rose-500 text-white", ring: "ring-rose-500" }
+};
+const DEFAULT_LABELS = {
+  region: "Follow mode",
+  stop: "Stop"
+};
+const FollowMode = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      color = "blue",
+      labels,
+      name,
+      onStop,
+      ...rest
+    } = props;
+    const palette = PALETTE[color];
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "relative h-full w-full rounded-2xl ring-2 ring-inset",
+          palette.ring,
+          className
+        ),
+        "data-follow-color": color,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm",
+              "data-follow-chip": true,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
+                      palette.chip
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8" }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "Following ",
+                        name
+                      ] })
+                    ]
+                  }
+                ),
+                onStop ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": resolvedLabels.stop,
+                    className: "inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    onClick: onStop,
+                    type: "button",
+                    children: resolvedLabels.stop
+                  }
+                ) : null
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+FollowMode.displayName = "FollowMode";
+export {
+  FollowMode
+};

package/dist/components/follow-mode/index.js

@@ -0,0 +1,6 @@
+import {
+  FollowMode
+} from "./follow-mode";
+export {
+  FollowMode
+};