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

package/dist/components/combobox/combobox.js

@@ -48,7 +48,7 @@ function ComboboxOptionItem({
           Check,
           {
             className: cn(
-              "mr-2 h-4 w-4",
+              "mr-2 size-4",
               selectedValue === option.value ? "opacity-100" : "opacity-0"
             )
           }
@@ -58,6 +58,38 @@ function ComboboxOptionItem({
     }
   );
 }
+function ComboboxListPanel({
+  className,
+  commandClassName,
+  emptyText,
+  listboxId,
+  onSelect,
+  options,
+  resolvedValue,
+  searchPlaceholder
+}) {
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      className: cn("w-[var(--radix-popover-trigger-width)] p-0", className),
+      children: /* @__PURE__ */ jsxs(Command, { className: commandClassName, children: [
+        /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
+        /* @__PURE__ */ jsxs(CommandList, { id: listboxId, children: [
+          /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+          /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsx(
+            ComboboxOptionItem,
+            {
+              onSelect,
+              option,
+              selectedValue: resolvedValue
+            },
+            option.value
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
 const Combobox = React.forwardRef(
   ({
     className,
@@ -71,6 +103,7 @@ const Combobox = React.forwardRef(
     value
   }, reference) => {
     const [open, setOpen] = React.useState(false);
+    const listboxId = React.useId();
     const { resolvedValue, setResolvedValue } = useComboboxValue(
       value,
       onValueChange
@@ -86,39 +119,30 @@ const Combobox = React.forwardRef(
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         Button,
         {
+          "aria-controls": listboxId,
           "aria-expanded": open,
+          "aria-haspopup": "listbox",
           className: cn("w-full justify-between", triggerClassName),
           ref: reference,
           role: "combobox",
           variant: "outline",
           children: [
             /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
-            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })
           ]
         }
       ) }),
       /* @__PURE__ */ jsx(
-        PopoverContent,
+        ComboboxListPanel,
         {
-          className: cn(
-            "w-[var(--radix-popover-trigger-width)] p-0",
-            className
-          ),
-          children: /* @__PURE__ */ jsxs(Command, { className: commandClassName, children: [
-            /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
-            /* @__PURE__ */ jsxs(CommandList, { children: [
-              /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
-              /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsx(
-                ComboboxOptionItem,
-                {
-                  onSelect: handleSelect,
-                  option,
-                  selectedValue: resolvedValue
-                },
-                option.value
-              )) })
-            ] })
-          ] })
+          className,
+          commandClassName,
+          emptyText,
+          listboxId,
+          onSelect: handleSelect,
+          options,
+          resolvedValue,
+          searchPlaceholder
         }
       )
     ] });

package/dist/components/command/command.js

@@ -26,7 +26,7 @@ const CommandDialog = ({ children, ...props }) => {
 const CommandInput = React.forwardRef(({ className, ...props }, reference) => (
   // eslint-disable-next-line react/no-unknown-property
   /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-    /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+    /* @__PURE__ */ jsx(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }),
     /* @__PURE__ */ jsx(
       CommandPrimitive.Input,
       {

package/dist/components/comment-pin/comment-pin.js

@@ -0,0 +1,104 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Comment",
+  unreadSuffix: "unread"
+};
+const STATE_FILL = {
+  open: "bg-foreground text-background",
+  resolved: "bg-muted text-muted-foreground"
+};
+const PinBody = (props) => {
+  const showBadge = typeof props.unread === "number" && props.unread > 0;
+  const useAccent = props.accent && props.state === "open";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "flex size-7 items-center justify-center rounded-full border border-background text-[11px] font-semibold shadow-sm",
+          STATE_FILL[props.state]
+        ),
+        "data-comment-pin-body": true,
+        style: useAccent ? { backgroundColor: props.accent, color: "white" } : void 0,
+        children: props.authorInitial ?? "\u2022"
+      }
+    ),
+    showBadge ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute -right-1 -top-1 inline-flex min-h-[14px] min-w-[14px] items-center justify-center rounded-full bg-red-500 px-1 text-[9px] font-medium text-white",
+        "data-comment-pin-unread": true,
+        children: props.unread
+      }
+    ) : null
+  ] });
+};
+const CommentPin = forwardRef(
+  (props, ref) => {
+    const {
+      authorInitial,
+      className,
+      color,
+      labels,
+      onActivate,
+      state = "open",
+      unread,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const showBadge = typeof unread === "number" && unread > 0;
+    const ariaLabel = showBadge ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}` : resolvedLabels.region;
+    const handleClick = () => {
+      onActivate?.();
+    };
+    const body = /* @__PURE__ */ jsx(
+      PinBody,
+      {
+        accent: color,
+        authorInitial,
+        state,
+        unread
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "absolute z-30 inline-flex -translate-x-1/2 -translate-y-1/2",
+          className
+        ),
+        "data-comment-pin": true,
+        "data-comment-pin-state": state,
+        ref,
+        role: "img",
+        style: { left: x, top: y },
+        ...rest,
+        children: onActivate ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": ariaLabel,
+            className: "relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "data-comment-pin-trigger": true,
+            onClick: handleClick,
+            type: "button",
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "relative inline-flex", children: body })
+      }
+    );
+  }
+);
+CommentPin.displayName = "CommentPin";
+export {
+  CommentPin
+};

package/dist/components/comment-pin/index.js

@@ -0,0 +1,6 @@
+import {
+  CommentPin
+} from "./comment-pin";
+export {
+  CommentPin
+};

package/dist/components/comparison/comparison.js

@@ -53,18 +53,18 @@ function Comparison({
             children: before.title
           }
         ),
-        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: before.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: before.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
           /* @__PURE__ */ jsx(
             BeforeIcon,
             {
               className: cn(
-                "h-4 w-4 mt-0.5 flex-shrink-0",
+                "size-4 mt-0.5 flex-shrink-0",
                 beforeConfig.iconClass
               )
             }
           ),
           /* @__PURE__ */ jsx("span", { children: item })
-        ] }, index)) })
+        ] }, item)) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border", afterConfig.className), children: [
         /* @__PURE__ */ jsx(
@@ -77,18 +77,18 @@ function Comparison({
             children: after.title
           }
         ),
-        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: after.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: after.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
           /* @__PURE__ */ jsx(
             AfterIcon,
             {
               className: cn(
-                "h-4 w-4 mt-0.5 flex-shrink-0",
+                "size-4 mt-0.5 flex-shrink-0",
                 afterConfig.iconClass
               )
             }
           ),
           /* @__PURE__ */ jsx("span", { children: item })
-        ] }, index)) })
+        ] }, item)) })
       ] })
     ] })
   ] });
@@ -99,15 +99,15 @@ function BeforeAfter({ after, before, title }) {
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-start", children: [
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-red-500/30 bg-red-500/5 overflow-hidden", children: [
         /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-red-500/10 text-red-700 dark:text-red-300 font-medium text-sm flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(X, { className: "size-4" }),
           "Before"
         ] }),
         /* @__PURE__ */ jsx("div", { className: "p-4 text-sm [&>pre]:my-0", children: before })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(ArrowRight, { className: "h-6 w-6 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(ArrowRight, { className: "size-6 text-muted-foreground" }) }),
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-green-500/30 bg-green-500/5 overflow-hidden", children: [
         /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-green-500/10 text-green-700 dark:text-green-300 font-medium text-sm flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(Check, { className: "size-4" }),
           "After"
         ] }),
         /* @__PURE__ */ jsx("div", { className: "p-4 text-sm [&>pre]:my-0", children: after })

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

@@ -39,7 +39,7 @@ function DialogContent({
             children: closeIcon ?? /* @__PURE__ */ jsx(
               "svg",
               {
-                className: "h-4 w-4",
+                className: "size-4",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",

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

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+import { EdgeLabel } from "../edge-label";
+const strokeClasses = {
+  active: "stroke-sky-500",
+  blocked: "stroke-amber-500",
+  idle: "stroke-muted-foreground/60"
+};
+const ConnectorEdge = forwardRef(
+  ({ className, end, label, start, state = "idle", ...props }, ref) => {
+    const width = Math.max(Math.abs(end.x - start.x), 32);
+    const height = Math.max(Math.abs(end.y - start.y), 32);
+    const midX = width / 2;
+    const startX = start.x <= end.x ? 4 : width - 4;
+    const endX = start.x <= end.x ? width - 4 : 4;
+    const startY = start.y <= end.y ? 4 : height - 4;
+    const endY = start.y <= end.y ? height - 4 : 4;
+    const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
+    const style = {
+      height,
+      width
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative inline-flex", className),
+        ref,
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "overflow-visible",
+              height,
+              viewBox: `0 0 ${width} ${height}`,
+              width,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: cn("fill-none stroke-[2.5]", strokeClasses[state]),
+                  d: path,
+                  strokeDasharray: state === "blocked" ? "4 4" : void 0,
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          label ? /* @__PURE__ */ jsx(
+            EdgeLabel,
+            {
+              className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+              emphasis: state === "active" ? "active" : "subtle",
+              children: label
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ConnectorEdge.displayName = "ConnectorEdge";
+export {
+  ConnectorEdge
+};

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

@@ -0,0 +1,6 @@
+import {
+  ConnectorEdge
+} from "./connector-edge";
+export {
+  ConnectorEdge
+};

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

@@ -8,12 +8,13 @@ const DEFAULT_LABELS = {
   startLabel: "Start Tutorial",
   tableOfContentsLabel: "Table of Contents"
 };
+const EMPTY_CONTENT_INTRO_LABELS = {};
 function ContentIntroImpl({
   additionalContent,
   completedSections,
   estimatedTime,
   isLoading = false,
-  labels = {},
+  labels = EMPTY_CONTENT_INTRO_LABELS,
   onGoToSection,
   onStart,
   renderIntroContent,
@@ -60,7 +61,7 @@ function ContentIntroImpl({
                   "span",
                   {
                     className: cn(
-                      "flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium tabular-nums transition-colors",
+                      "flex-shrink-0 size-6 rounded-full flex items-center justify-center text-xs font-medium tabular-nums transition-colors",
                       isLoading && "animate-pulse bg-muted",
                       !isLoading && isCompleted && "bg-foreground text-background",
                       !isLoading && !isCompleted && "bg-muted"
@@ -68,7 +69,7 @@ function ContentIntroImpl({
                     children: isCompleted ? /* @__PURE__ */ jsx(
                       "svg",
                       {
-                        className: "h-3 w-3",
+                        className: "size-3",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
@@ -97,12 +98,12 @@ function ContentIntroImpl({
                 )
               ]
             }
-          ) }, `${section.id}-${index}`);
+          ) }, section.id);
         }) })
       ] }),
       additionalContent
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/80 backdrop-blur-sm safe-bottom", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/80 backdrop-blur-sm safe-bottom", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground hidden sm:block", children: hasProgress ? `${completedSections.size}/${sections.length} completed` : `${sections.length} sections \xB7 ${estimatedTime}` }),
       /* @__PURE__ */ jsxs(
         Button,
@@ -114,7 +115,7 @@ function ContentIntroImpl({
             /* @__PURE__ */ jsx(
               "svg",
               {
-                className: "h-5 w-5",
+                className: "size-5",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",

package/dist/components/context-lens/context-lens.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Context lens"
+};
+const clamp01 = (value) => {
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 1) {
+    return 1;
+  }
+  return value;
+};
+const safeRadius = (value) => value < 0 ? 0 : value;
+const ContextLens = forwardRef(
+  (props, ref) => {
+    const { className, focus, labels, opacity = 0.55, ...rest } = props;
+    const maskId = useId();
+    if (!focus) {
+      return null;
+    }
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const inner = safeRadius(focus.inner);
+    const outer = safeRadius(Math.max(focus.outer, inner));
+    const fillOpacity = clamp01(opacity);
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute inset-0 z-20 h-full w-full",
+          className
+        ),
+        "data-context-lens": true,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+            "radialGradient",
+            {
+              cx: focus.cx,
+              cy: focus.cy,
+              "data-context-lens-gradient": true,
+              gradientUnits: "userSpaceOnUse",
+              id: maskId,
+              r: outer === 0 ? 1 : outer,
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "black", stopOpacity: 0 }),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: outer === 0 ? "100%" : `${inner / outer * 100}%`,
+                    stopColor: "black",
+                    stopOpacity: 0
+                  }
+                ),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "black", stopOpacity: 1 })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-context-lens-dim": true,
+              fill: "black",
+              fillOpacity,
+              height: "100%",
+              mask: `url(#${maskId}-mask)`,
+              width: "100%",
+              x: 0,
+              y: 0
+            }
+          ),
+          /* @__PURE__ */ jsxs("mask", { id: `${maskId}-mask`, children: [
+            /* @__PURE__ */ jsx("rect", { fill: "white", height: "100%", width: "100%", x: 0, y: 0 }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: focus.cx,
+                cy: focus.cy,
+                fill: `url(#${maskId})`,
+                r: outer
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ContextLens.displayName = "ContextLens";
+export {
+  ContextLens
+};

package/dist/components/context-lens/index.js

@@ -0,0 +1,6 @@
+import {
+  ContextLens
+} from "./context-lens";
+export {
+  ContextLens
+};

package/dist/components/context-menu/context-menu.js

@@ -22,7 +22,7 @@ const ContextMenuSubTrigger = forwardRef(({ children, className, inset, ...props
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })
     ]
   }
 ));
@@ -75,7 +75,7 @@ const ContextMenuCheckboxItem = forwardRef(({ checked, children, className, ...p
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
       children
     ]
   }
@@ -91,7 +91,7 @@ const ContextMenuRadioItem = forwardRef(({ children, className, ...props }, ref)
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "size-2 fill-current" }) }) }),
       children
     ]
   }
@@ -113,7 +113,7 @@ ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 const ContextMenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("-m-1 h-px bg-border", className),
     ref,
     ...props
   }