@ship-it-ui/ui 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -79,6 +79,7 @@ __export(index_exports, {
   DropdownMenuRadioGroup: () => DropdownMenuRadioGroup,
   DropdownMenuRoot: () => DropdownMenuRoot,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  Dropzone: () => Dropzone,
   EmptyState: () => EmptyState,
   FAB: () => FAB,
   Field: () => Field,
@@ -100,6 +101,7 @@ __export(index_exports, {
   MenubarMenu: () => MenubarMenu,
   MenubarSeparator: () => MenubarSeparator,
   MenubarTrigger: () => MenubarTrigger,
+  NavBar: () => NavBar,
   NavItem: () => NavItem,
   NavSection: () => NavSection,
   OTP: () => OTP,
@@ -1007,6 +1009,7 @@ var Slider = (0, import_react20.forwardRef)(function Slider2({
   className,
   value,
   defaultValue,
+  onValueChange,
   thumbLabels,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -1014,7 +1017,20 @@ var Slider = (0, import_react20.forwardRef)(function Slider2({
 }, ref) {
   const arrValue = Array.isArray(value) ? value : value !== void 0 ? [value] : void 0;
   const arrDefault = Array.isArray(defaultValue) ? defaultValue : defaultValue !== void 0 ? [defaultValue] : void 0;
-  const display = arrValue?.[0] ?? arrDefault?.[0] ?? props.min ?? 0;
+  const isControlled = arrValue !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react20.useState)(arrDefault);
+  const currentValue = isControlled ? arrValue : uncontrolledValue;
+  const wasScalar = !Array.isArray(value ?? defaultValue) && (value ?? defaultValue) !== void 0;
+  const handleValueChange = (0, import_react20.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolledValue(next);
+      if (onValueChange) {
+        onValueChange(wasScalar ? next[0] ?? 0 : next);
+      }
+    },
+    [isControlled, onValueChange, wasScalar]
+  );
+  const display = currentValue?.[0] ?? props.min ?? 0;
   const thumbCount = (arrValue ?? arrDefault)?.length ?? 1;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "span",
@@ -1028,6 +1044,7 @@ var Slider = (0, import_react20.forwardRef)(function Slider2({
           {
             value: arrValue,
             defaultValue: arrDefault,
+            onValueChange: handleValueChange,
             className: "relative flex h-4 flex-1 touch-none items-center select-none",
             ...props,
             children: [
@@ -3182,10 +3199,91 @@ var Dots = (0, import_react51.forwardRef)(function Dots2({ total, current, onCha
 });
 Dots.displayName = "Dots";
 
-// src/patterns/EmptyState/EmptyState.tsx
-var import_class_variance_authority10 = require("class-variance-authority");
+// src/patterns/Dropzone/Dropzone.tsx
 var import_react52 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
+function listToArray(list) {
+  if (!list) return [];
+  return Array.from(list);
+}
+var Dropzone = (0, import_react52.forwardRef)(function Dropzone2({
+  onFiles,
+  accept,
+  multiple = true,
+  title = "Drop files to ingest",
+  description,
+  icon = "\u21A5",
+  disabled,
+  className,
+  ...props
+}, ref) {
+  const [isDragging, setIsDragging] = (0, import_react52.useState)(false);
+  const onDragOver = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const onDragLeave = () => setIsDragging(false);
+  const onDrop = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(false);
+    const files = listToArray(e.dataTransfer.files);
+    if (files.length) onFiles?.(files);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "label",
+    {
+      ref,
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      className: cn(
+        "rounded-base flex max-w-[420px] cursor-pointer flex-col items-center border-[1.5px] border-dashed p-8 text-center",
+        "transition-[background,border] duration-(--duration-micro)",
+        "focus-within:ring-accent-dim focus-within:ring-[3px]",
+        isDragging ? "border-accent bg-accent-dim" : "border-border-strong bg-panel hover:bg-panel-2",
+        disabled && "pointer-events-none cursor-not-allowed opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "input",
+          {
+            type: "file",
+            accept,
+            multiple,
+            disabled,
+            "aria-label": typeof title === "string" ? title : "Upload files",
+            className: "sr-only",
+            onChange: (e) => {
+              const files = listToArray(e.target.files);
+              if (files.length) onFiles?.(files);
+              e.target.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: cn("mb-2 text-[28px]", isDragging ? "text-accent" : "text-text-dim"),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "mb-1 text-[13px] font-medium", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-text-dim text-[11px]", children: description })
+      ]
+    }
+  );
+});
+Dropzone.displayName = "Dropzone";
+
+// src/patterns/EmptyState/EmptyState.tsx
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_react53 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var plateStyles = (0, import_class_variance_authority10.cva)("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
   variants: {
     tone: {
@@ -3198,8 +3296,8 @@ var plateStyles = (0, import_class_variance_authority10.cva)("grid h-12 w-12 pla
   },
   defaultVariants: { tone: "neutral" }
 });
-var EmptyState = (0, import_react52.forwardRef)(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+var EmptyState = (0, import_react53.forwardRef)(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
       ref,
@@ -3209,10 +3307,10 @@ var EmptyState = (0, import_react52.forwardRef)(function EmptyState2({ icon, tit
       ),
       ...props,
       children: [
-        icon != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "aria-hidden": true, className: plateStyles({ tone: tone ?? "neutral" }), children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-[14px] font-medium", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
-        chips && chips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        icon != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { "aria-hidden": true, className: plateStyles({ tone: tone ?? "neutral" }), children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-[14px] font-medium", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
+        chips && chips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "button",
           {
             type: "button",
@@ -3234,18 +3332,18 @@ var EmptyState = (0, import_react52.forwardRef)(function EmptyState2({ icon, tit
 EmptyState.displayName = "EmptyState";
 
 // src/patterns/FileChip/FileChip.tsx
-var import_react53 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_react54 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function deriveExt(name) {
   const dot = name.lastIndexOf(".");
   if (dot < 0) return "FILE";
   return name.slice(dot + 1).slice(0, 4).toUpperCase();
 }
-var FileChip = (0, import_react53.forwardRef)(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
+var FileChip = (0, import_react54.forwardRef)(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
   const ext = deriveExt(name);
   const showProgress = typeof progress === "number";
   const isComplete = showProgress && progress >= 100;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "div",
     {
       ref,
@@ -3255,7 +3353,7 @@ var FileChip = (0, import_react53.forwardRef)(function FileChip2({ name, size, p
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -3263,17 +3361,17 @@ var FileChip = (0, import_react53.forwardRef)(function FileChip2({ name, size, p
             children: icon ?? ext
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "truncate text-[12px] font-medium", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "truncate text-[12px] font-medium", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
             size,
-            showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { children: [
+            showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
               " \xB7 ",
               Math.round(progress),
               "%"
             ] })
           ] }),
-          showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "div",
             {
               className: cn(
@@ -3284,7 +3382,7 @@ var FileChip = (0, import_react53.forwardRef)(function FileChip2({ name, size, p
             }
           ) })
         ] }),
-        onRemove && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "button",
           {
             type: "button",
@@ -3305,10 +3403,10 @@ FileChip.displayName = "FileChip";
 
 // src/patterns/Menubar/Menubar.tsx
 var RadixMenubar = __toESM(require("@radix-ui/react-menubar"), 1);
-var import_react54 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var Menubar = (0, import_react54.forwardRef)(function Menubar2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var import_react55 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var Menubar = (0, import_react55.forwardRef)(function Menubar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     RadixMenubar.Root,
     {
       ref,
@@ -3322,9 +3420,9 @@ var Menubar = (0, import_react54.forwardRef)(function Menubar2({ className, ...p
 });
 Menubar.displayName = "Menubar";
 var MenubarMenu = RadixMenubar.Menu;
-var MenubarTrigger = (0, import_react54.forwardRef)(
+var MenubarTrigger = (0, import_react55.forwardRef)(
   function MenubarTrigger2({ className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       RadixMenubar.Trigger,
       {
         ref,
@@ -3341,9 +3439,9 @@ var MenubarTrigger = (0, import_react54.forwardRef)(
   }
 );
 MenubarTrigger.displayName = "MenubarTrigger";
-var MenubarContent = (0, import_react54.forwardRef)(
+var MenubarContent = (0, import_react55.forwardRef)(
   function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RadixMenubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RadixMenubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       RadixMenubar.Content,
       {
         ref,
@@ -3365,24 +3463,24 @@ var itemBase3 = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var MenubarItem = (0, import_react54.forwardRef)(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+var MenubarItem = (0, import_react55.forwardRef)(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     RadixMenubar.Item,
     {
       ref,
       className: cn(itemBase3, destructive ? "text-err" : "text-text", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex-1", children }),
-        trailing && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
       ]
     }
   );
 });
 MenubarItem.displayName = "MenubarItem";
-var MenubarSeparator = (0, import_react54.forwardRef)(
+var MenubarSeparator = (0, import_react55.forwardRef)(
   function MenubarSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       RadixMenubar.Separator,
       {
         ref,
@@ -3394,9 +3492,505 @@ var MenubarSeparator = (0, import_react54.forwardRef)(
 );
 MenubarSeparator.displayName = "MenubarSeparator";
 
+// src/patterns/NavBar/NavBar.tsx
+var RadixNav = __toESM(require("@radix-ui/react-navigation-menu"), 1);
+var import_react57 = require("react");
+
+// src/patterns/Sidebar/Sidebar.tsx
+var import_react56 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Sidebar = (0, import_react56.forwardRef)(function Sidebar2({ width = 240, className, style, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "aside",
+    {
+      ref,
+      style: { width, ...style },
+      className: cn(
+        "border-border bg-panel flex h-full flex-col gap-2 border-r p-[14px]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Sidebar.displayName = "Sidebar";
+var NavItem = (0, import_react56.forwardRef)(
+  function NavItem2({ icon, label, active, badge, href, disabled, className, ...props }, ref) {
+    const inner = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex-1 truncate", children: label }),
+      badge != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "span",
+        {
+          className: cn(
+            "rounded-xs px-[6px] py-px font-mono text-[10px]",
+            active ? "bg-accent text-on-accent" : "bg-panel-2 text-text-muted"
+          ),
+          children: badge
+        }
+      )
+    ] });
+    const baseClass = cn(
+      "flex cursor-pointer items-center gap-[10px] rounded-xs px-2 py-[6px] text-[13px] outline-none",
+      "transition-colors duration-(--duration-micro)",
+      "focus-visible:ring-[3px] focus-visible:ring-accent-dim",
+      active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
+      disabled && "opacity-50 pointer-events-none",
+      className
+    );
+    if (href) {
+      const anchorProps = props;
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "a",
+        {
+          ref,
+          href,
+          "aria-current": active ? "page" : void 0,
+          "aria-disabled": disabled || void 0,
+          className: baseClass,
+          ...anchorProps,
+          children: inner
+        }
+      );
+    }
+    const buttonProps = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-current": active ? "page" : void 0,
+        disabled,
+        className: cn(baseClass, "w-full text-left"),
+        ...buttonProps,
+        children: inner
+      }
+    );
+  }
+);
+NavItem.displayName = "NavItem";
+var NavSection = (0, import_react56.forwardRef)(function NavSection2({
+  label,
+  icon,
+  action,
+  collapsible = false,
+  defaultOpen = true,
+  open,
+  onOpenChange,
+  indent = 0,
+  className,
+  children,
+  ...props
+}, ref) {
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = (0, import_react56.useState)(defaultOpen);
+  const isOpen = !collapsible || (isControlled ? open : internalOpen);
+  const toggle = (0, import_react56.useCallback)(() => {
+    const next = !isOpen;
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isOpen, isControlled, onOpenChange]);
+  const eyebrowClass = "text-text-dim flex items-center gap-[6px] px-2 pt-2 font-mono text-[9px] tracking-[1.4px] uppercase";
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+    collapsible ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": isOpen,
+        onClick: toggle,
+        className: cn(
+          eyebrowClass,
+          "cursor-pointer rounded-xs outline-none",
+          "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          "hover:text-text-muted"
+        ),
+        children: [
+          icon != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex-1 text-left", children: label }),
+          action,
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: eyebrowClass, children: [
+      icon != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex-1", children: label }),
+      action
+    ] }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "div",
+      {
+        className: cn("flex flex-col gap-[2px]", indent > 0 && "border-border ml-2 border-l"),
+        style: indent > 0 ? { paddingLeft: indent } : void 0,
+        children
+      }
+    )
+  ] });
+});
+NavSection.displayName = "NavSection";
+
+// src/patterns/NavBar/NavBar.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function isActiveTree(item, activeId) {
+  if (item.id === activeId) return true;
+  return item.children?.some((c) => isActiveTree(c, activeId)) ?? false;
+}
+var NavBar = (0, import_react57.forwardRef)(function NavBar2({
+  orientation = "horizontal",
+  items,
+  brand,
+  actions,
+  value,
+  defaultValue,
+  onValueChange,
+  width = 240,
+  responsive = true,
+  className,
+  ...props
+}, ref) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react57.useState)(defaultValue);
+  const activeId = isControlled ? value : internalValue;
+  const [drawerOpen, setDrawerOpen] = (0, import_react57.useState)(false);
+  const select = (0, import_react57.useCallback)(
+    (id) => {
+      if (!isControlled) setInternalValue(id);
+      onValueChange?.(id);
+    },
+    [isControlled, onValueChange]
+  );
+  const handleItemActivate = (0, import_react57.useCallback)(
+    (id) => {
+      select(id);
+      setDrawerOpen(false);
+    },
+    [select]
+  );
+  const drawerBody = (
+    // Distinct aria-label from the desktop <aside>'s <nav> below — when the
+    // drawer is open on a viewport that's resizing past `md`, both navs can
+    // sit in the DOM together. Identical accessible names would trip axe's
+    // `landmark-unique` rule.
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("nav", { "aria-label": "Mobile navigation", className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      VerticalItem,
+      {
+        item,
+        activeId,
+        onActivate: handleItemActivate
+      },
+      item.id
+    )) })
+  );
+  const mobileBar = responsive ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    "div",
+    {
+      className: cn(
+        "border-border bg-panel z-overlay sticky top-0 flex h-[52px] items-center gap-4 border-b px-5 md:hidden"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setDrawerOpen(true),
+            "aria-label": "Open navigation",
+            className: "text-text-muted hover:text-text focus-visible:ring-accent-dim rounded-xs px-2 py-1 text-[18px] outline-none focus-visible:ring-[3px]",
+            children: "\u2630"
+          }
+        ),
+        brand && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-1 items-center text-[13px] font-medium whitespace-nowrap", children: brand }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-center gap-3", children: actions })
+      ]
+    }
+  ) : null;
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+      mobileBar,
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+        "header",
+        {
+          ref,
+          className: cn(
+            "border-border bg-panel flex h-[52px] items-center gap-4 border-b px-5",
+            responsive && "hidden md:flex",
+            className
+          ),
+          ...props,
+          children: [
+            brand && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "shrink-0 text-[13px] font-medium whitespace-nowrap", children: brand }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(RadixNav.Root, { className: "relative flex-1", delayDuration: 120, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixNav.List, { className: "m-0! flex list-none! items-center gap-1 p-0! [&_li]:m-0!", children: items.map(
+                (item) => item.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  HorizontalDropdown,
+                  {
+                    item,
+                    active: isActiveTree(item, activeId),
+                    activeId,
+                    onActivate: handleItemActivate
+                  },
+                  item.id
+                ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixNav.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  HorizontalLink,
+                  {
+                    item,
+                    active: item.id === activeId,
+                    onActivate: handleItemActivate
+                  }
+                ) }, item.id)
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "z-popover absolute top-full left-0 flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixNav.Viewport, { className: "origin-top-left data-[state=open]:animate-[ship-fade-in_120ms_var(--easing-out)]" }) })
+            ] }),
+            actions && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-center gap-3", children: actions })
+          ]
+        }
+      ),
+      responsive && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        Drawer,
+        {
+          open: drawerOpen,
+          onOpenChange: setDrawerOpen,
+          side: "left",
+          title: brand ?? "Navigation",
+          width: 300,
+          children: drawerBody
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    mobileBar,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      "aside",
+      {
+        ref,
+        "aria-label": "Primary navigation",
+        style: { width },
+        className: cn(
+          "border-border bg-panel flex h-full flex-col gap-2 border-r p-[14px]",
+          responsive && "hidden md:flex",
+          className
+        ),
+        ...props,
+        children: [
+          brand && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "px-2 py-1 text-[13px] font-medium", children: brand }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("nav", { "aria-label": "Sidebar navigation", className: "flex flex-1 flex-col gap-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            VerticalItem,
+            {
+              item,
+              activeId,
+              onActivate: handleItemActivate
+            },
+            item.id
+          )) }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "border-border mt-auto flex flex-col gap-2 border-t pt-3", children: actions })
+        ]
+      }
+    ),
+    responsive && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      Drawer,
+      {
+        open: drawerOpen,
+        onOpenChange: setDrawerOpen,
+        side: "left",
+        title: brand ?? "Navigation",
+        width: 300,
+        children: drawerBody
+      }
+    )
+  ] });
+});
+NavBar.displayName = "NavBar";
+function HorizontalLink({ item, active, onActivate }) {
+  const baseClass = cn(
+    "flex items-center gap-[6px] rounded-xs px-3 py-[6px] text-[13px] outline-none",
+    "transition-colors duration-(--duration-micro)",
+    "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+    active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
+    item.disabled && "pointer-events-none opacity-50"
+  );
+  const handleClick = (e) => {
+    if (item.disabled) {
+      e.preventDefault();
+      return;
+    }
+    onActivate(item.id);
+  };
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: item.label }),
+    item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ItemBadge, { active, children: item.badge })
+  ] });
+  if (item.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "a",
+      {
+        href: item.href,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": item.disabled || void 0,
+        className: baseClass,
+        onClick: handleClick,
+        children: inner
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-current": active ? "page" : void 0,
+      disabled: item.disabled,
+      className: baseClass,
+      onClick: handleClick,
+      children: inner
+    }
+  ) });
+}
+function HorizontalDropdown({ item, active, activeId, onActivate }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(RadixNav.Item, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      RadixNav.Trigger,
+      {
+        className: cn(
+          "group flex items-center gap-1 rounded-xs px-3 py-[6px] text-[13px] outline-none",
+          "transition-colors duration-(--duration-micro)",
+          "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
+          "data-[state=open]:bg-panel-2"
+        ),
+        disabled: item.disabled,
+        children: [
+          item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "ml-1 text-[10px] opacity-70 transition-transform group-data-[state=open]:rotate-180",
+              children: "\u25BE"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixNav.Content, { className: "border-border bg-panel min-w-[220px] rounded-xs border p-2 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { className: "m-0! flex list-none! flex-col gap-[2px] p-0! [&_li]:m-0!", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DropdownLink, { item: child, active: child.id === activeId, onActivate }) }, child.id)) }) })
+  ] });
+}
+function DropdownLink({ item, active, onActivate }) {
+  const baseClass = cn(
+    "flex w-full items-center gap-2 rounded-xs px-2 py-[6px] text-left text-[13px] outline-none",
+    "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+    active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
+    item.disabled && "pointer-events-none opacity-50"
+  );
+  const handleClick = (e) => {
+    if (item.disabled) {
+      e.preventDefault();
+      return;
+    }
+    onActivate(item.id);
+  };
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1", children: item.label }),
+    item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ItemBadge, { active, children: item.badge })
+  ] });
+  if (item.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "a",
+      {
+        href: item.href,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": item.disabled || void 0,
+        className: baseClass,
+        onClick: handleClick,
+        children: inner
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-current": active ? "page" : void 0,
+      disabled: item.disabled,
+      className: baseClass,
+      onClick: handleClick,
+      children: inner
+    }
+  ) });
+}
+function VerticalItem({ item, activeId, onActivate }) {
+  const hasChildren = (item.children?.length ?? 0) > 0;
+  const treeActive = isActiveTree(item, activeId);
+  const [open, setOpen] = (0, import_react57.useState)(treeActive);
+  const prevTreeActive = (0, import_react57.useRef)(treeActive);
+  (0, import_react57.useEffect)(() => {
+    if (treeActive && !prevTreeActive.current) setOpen(true);
+    prevTreeActive.current = treeActive;
+  }, [treeActive]);
+  if (!hasChildren) {
+    const handleClick = (e) => {
+      if (item.disabled) {
+        e.preventDefault();
+        return;
+      }
+      onActivate(item.id);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      NavItem,
+      {
+        icon: item.icon,
+        label: item.label,
+        active: item.id === activeId,
+        badge: item.badge,
+        disabled: item.disabled,
+        href: item.href,
+        onClick: handleClick
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        disabled: item.disabled,
+        className: cn(
+          "flex w-full items-center gap-[10px] rounded-xs px-2 py-[6px] text-left text-[13px] outline-none",
+          "transition-colors duration-(--duration-micro)",
+          "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          treeActive ? "text-text" : "text-text-muted",
+          "hover:bg-panel-2",
+          item.disabled && "pointer-events-none opacity-50"
+        ),
+        children: [
+          item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 truncate", children: item.label }),
+          item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ItemBadge, { active: treeActive, children: item.badge }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-60", children: open ? "\u25BE" : "\u25B8" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "border-border mt-1 ml-[18px] flex flex-col gap-[2px] border-l pl-3", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(VerticalItem, { item: child, activeId, onActivate }, child.id)) })
+  ] });
+}
+function ItemBadge({ active, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "span",
+    {
+      className: cn(
+        "rounded-xs px-[6px] py-px font-mono text-[10px]",
+        active ? "bg-accent text-on-accent" : "bg-panel-2 text-text-muted"
+      ),
+      children
+    }
+  );
+}
+
 // src/patterns/Pagination/Pagination.tsx
-var import_react55 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react58 = require("react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function buildRange(page, total, siblings) {
   if (total <= 0) return [];
   const items = [];
@@ -3409,9 +4003,9 @@ function buildRange(page, total, siblings) {
   if (total > 1) items.push(total);
   return items;
 }
-var Pagination = (0, import_react55.forwardRef)(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
+var Pagination = (0, import_react58.forwardRef)(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
   const items = buildRange(page, total, siblings);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "nav",
     {
       ref,
@@ -3419,7 +4013,7 @@ var Pagination = (0, import_react55.forwardRef)(function Pagination2({ page, tot
       className: cn("inline-flex items-center gap-1", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           IconButton,
           {
             size: "sm",
@@ -3432,7 +4026,7 @@ var Pagination = (0, import_react55.forwardRef)(function Pagination2({ page, tot
         ),
         items.map((item, i) => {
           if (item === "start-ellipsis" || item === "end-ellipsis") {
-            return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               "span",
               {
                 "aria-hidden": true,
@@ -3443,7 +4037,7 @@ var Pagination = (0, import_react55.forwardRef)(function Pagination2({ page, tot
             );
           }
           const isActive = item === page;
-          return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "button",
             {
               type: "button",
@@ -3461,7 +4055,7 @@ var Pagination = (0, import_react55.forwardRef)(function Pagination2({ page, tot
             item
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           IconButton,
           {
             size: "sm",
@@ -3480,8 +4074,8 @@ Pagination.displayName = "Pagination";
 
 // src/patterns/Progress/Progress.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_react56 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_react59 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var trackStyles = (0, import_class_variance_authority11.cva)("w-full rounded-full bg-panel-2 overflow-hidden", {
   variants: {
     size: {
@@ -3503,7 +4097,7 @@ var fillStyles = (0, import_class_variance_authority11.cva)("h-full rounded-full
   },
   defaultVariants: { tone: "accent" }
 });
-var Progress = (0, import_react56.forwardRef)(function Progress2({
+var Progress = (0, import_react59.forwardRef)(function Progress2({
   value = 0,
   max = 100,
   indeterminate = false,
@@ -3517,15 +4111,15 @@ var Progress = (0, import_react56.forwardRef)(function Progress2({
   const clamped = Math.min(max, Math.max(0, value));
   const pct = max > 0 ? clamped / max * 100 : 0;
   const display = Math.round(pct);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex text-[12px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-text-muted", children: label }),
-      showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex text-[12px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-text-muted", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
         display,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "div",
       {
         role: "progressbar",
@@ -3534,7 +4128,7 @@ var Progress = (0, import_react56.forwardRef)(function Progress2({
         "aria-valuenow": indeterminate ? void 0 : display,
         "aria-label": typeof label === "string" ? label : void 0,
         className: trackStyles({ size }),
-        children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -3544,7 +4138,7 @@ var Progress = (0, import_react56.forwardRef)(function Progress2({
               "animate-[ship-indeterminate_1.4s_linear_infinite]"
             )
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
       }
     )
   ] });
@@ -3552,15 +4146,15 @@ var Progress = (0, import_react56.forwardRef)(function Progress2({
 Progress.displayName = "Progress";
 
 // src/patterns/RadialProgress/RadialProgress.tsx
-var import_react57 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react60 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var toneStrokeClass = {
   accent: "stroke-accent",
   ok: "stroke-ok",
   warn: "stroke-warn",
   err: "stroke-err"
 };
-var RadialProgress = (0, import_react57.forwardRef)(
+var RadialProgress = (0, import_react60.forwardRef)(
   function RadialProgress2({
     value,
     max = 100,
@@ -3578,7 +4172,7 @@ var RadialProgress = (0, import_react57.forwardRef)(
     const c = 2 * Math.PI * r;
     const dash = pct / 100 * c;
     const resolvedTone = tone ?? (clamped >= max ? "ok" : "accent");
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
       "div",
       {
         ref,
@@ -3591,8 +4185,8 @@ var RadialProgress = (0, import_react57.forwardRef)(
         style: { width: size, height: size },
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               "circle",
               {
                 cx: size / 2,
@@ -3603,7 +4197,7 @@ var RadialProgress = (0, import_react57.forwardRef)(
                 className: "stroke-panel-2"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               "circle",
               {
                 cx: size / 2,
@@ -3621,7 +4215,7 @@ var RadialProgress = (0, import_react57.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
         ]
       }
     );
@@ -3629,93 +4223,9 @@ var RadialProgress = (0, import_react57.forwardRef)(
 );
 RadialProgress.displayName = "RadialProgress";
 
-// src/patterns/Sidebar/Sidebar.tsx
-var import_react58 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var Sidebar = (0, import_react58.forwardRef)(function Sidebar2({ width = 240, className, style, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    "aside",
-    {
-      ref,
-      style: { width, ...style },
-      className: cn(
-        "border-border bg-panel flex h-full flex-col gap-2 border-r p-[14px]",
-        className
-      ),
-      ...props
-    }
-  );
-});
-Sidebar.displayName = "Sidebar";
-var NavItem = (0, import_react58.forwardRef)(
-  function NavItem2({ icon, label, active, badge, href, disabled, className, ...props }, ref) {
-    const inner = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "flex-1 truncate", children: label }),
-      badge != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        "span",
-        {
-          className: cn(
-            "rounded-xs px-[6px] py-px font-mono text-[10px]",
-            active ? "bg-accent text-on-accent" : "bg-panel-2 text-text-muted"
-          ),
-          children: badge
-        }
-      )
-    ] });
-    const baseClass = cn(
-      "flex cursor-pointer items-center gap-[10px] rounded-xs px-2 py-[6px] text-[13px] outline-none",
-      "transition-colors duration-(--duration-micro)",
-      "focus-visible:ring-[3px] focus-visible:ring-accent-dim",
-      active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
-      disabled && "opacity-50 pointer-events-none",
-      className
-    );
-    if (href) {
-      const anchorProps = props;
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        "a",
-        {
-          ref,
-          href,
-          "aria-current": active ? "page" : void 0,
-          "aria-disabled": disabled || void 0,
-          className: baseClass,
-          ...anchorProps,
-          children: inner
-        }
-      );
-    }
-    const buttonProps = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      "button",
-      {
-        ref,
-        type: "button",
-        "aria-current": active ? "page" : void 0,
-        disabled,
-        className: cn(baseClass, "w-full text-left"),
-        ...buttonProps,
-        children: inner
-      }
-    );
-  }
-);
-NavItem.displayName = "NavItem";
-var NavSection = (0, import_react58.forwardRef)(function NavSection2({ label, action, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "text-text-dim flex items-center px-2 pt-2 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "flex-1", children: label }),
-      action
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex flex-col gap-[2px]", children })
-  ] });
-});
-NavSection.displayName = "NavSection";
-
 // src/patterns/Sparkline/Sparkline.tsx
-var import_react59 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react61 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function buildPath(values, w, h) {
   if (values.length === 0) return { line: "", area: "" };
   const pad = 2;
@@ -3734,7 +4244,7 @@ function buildPath(values, w, h) {
   )} L${pad.toFixed(2)},${(h - pad).toFixed(2)} Z`;
   return { line, area };
 }
-var Sparkline = (0, import_react59.forwardRef)(function Sparkline2({
+var Sparkline = (0, import_react61.forwardRef)(function Sparkline2({
   values,
   width = 160,
   height = 32,
@@ -3745,8 +4255,8 @@ var Sparkline = (0, import_react59.forwardRef)(function Sparkline2({
   "aria-label": ariaLabel = "Trend",
   ...props
 }, ref) {
-  const { line, area } = (0, import_react59.useMemo)(() => buildPath(values, width, height), [values, width, height]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  const { line, area } = (0, import_react61.useMemo)(() => buildPath(values, width, height), [values, width, height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "svg",
     {
       ref,
@@ -3758,8 +4268,8 @@ var Sparkline = (0, import_react59.forwardRef)(function Sparkline2({
       className: cn("inline-block", className),
       ...props,
       children: [
-        fill && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        fill && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "path",
           {
             d: line,
@@ -3777,16 +4287,16 @@ var Sparkline = (0, import_react59.forwardRef)(function Sparkline2({
 Sparkline.displayName = "Sparkline";
 
 // src/patterns/Spinner/Spinner.tsx
-var import_react60 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react62 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var sizes = {
   sm: { box: "h-3 w-3", border: "border-[2px]" },
   md: { box: "h-4 w-4", border: "border-[2px]" },
   lg: { box: "h-5 w-5", border: "border-[2px]" }
 };
-var Spinner2 = (0, import_react60.forwardRef)(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
+var Spinner2 = (0, import_react62.forwardRef)(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
   const s = sizes[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "span",
     {
       ref,
@@ -3794,7 +4304,7 @@ var Spinner2 = (0, import_react60.forwardRef)(function Spinner3({ size = "md", l
       "aria-label": label,
       className: cn("inline-block", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "span",
         {
           "aria-hidden": true,
@@ -3811,8 +4321,8 @@ var Spinner2 = (0, import_react60.forwardRef)(function Spinner3({ size = "md", l
 Spinner2.displayName = "Spinner";
 
 // src/patterns/Stepper/Stepper.tsx
-var import_react61 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_react63 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var dotBase = "h-6 w-6 rounded-full grid place-items-center text-[11px] font-mono font-semibold border";
 var dotStateClass = {
   done: "bg-accent text-on-accent border-accent",
@@ -3829,8 +4339,8 @@ function stateFor(index, current) {
   if (index === current) return "current";
   return "upcoming";
 }
-var Stepper = (0, import_react61.forwardRef)(function Stepper2({ steps, current, className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+var Stepper = (0, import_react63.forwardRef)(function Stepper2({ steps, current, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "ol",
     {
       ref,
@@ -3842,19 +4352,19 @@ var Stepper = (0, import_react61.forwardRef)(function Stepper2({ steps, current,
         const id = typeof step === "string" ? void 0 : step.id;
         const state = stateFor(i, current);
         const connectorActive = i < current;
-        return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react61.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react63.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
             "li",
             {
               "aria-current": state === "current" ? "step" : void 0,
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: cn("text-[12px]", labelStateClass[state]), children: label })
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: cn("text-[12px]", labelStateClass[state]), children: label })
               ]
             }
           ),
-          i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "span",
             {
               "aria-hidden": true,
@@ -3871,9 +4381,9 @@ Stepper.displayName = "Stepper";
 // src/patterns/Tabs/Tabs.tsx
 var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
 var import_class_variance_authority12 = require("class-variance-authority");
-var import_react62 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var TabsVariantContext = (0, import_react62.createContext)("underline");
+var import_react64 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var TabsVariantContext = (0, import_react64.createContext)("underline");
 var tabsListStyles = (0, import_class_variance_authority12.cva)("", {
   variants: {
     variant: {
@@ -3903,8 +4413,8 @@ var tabsTriggerStyles = (0, import_class_variance_authority12.cva)(
     }
   }
 );
-var Tabs = (0, import_react62.forwardRef)(function Tabs2({ variant = "underline", className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+var Tabs = (0, import_react64.forwardRef)(function Tabs2({ variant = "underline", className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     RadixTabs.Root,
     {
       ref,
@@ -3914,14 +4424,14 @@ var Tabs = (0, import_react62.forwardRef)(function Tabs2({ variant = "underline"
   ) });
 });
 Tabs.displayName = "Tabs";
-var TabsList = (0, import_react62.forwardRef)(function TabsList2({ className, ...props }, ref) {
-  const variant = (0, import_react62.useContext)(TabsVariantContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
+var TabsList = (0, import_react64.forwardRef)(function TabsList2({ className, ...props }, ref) {
+  const variant = (0, import_react64.useContext)(TabsVariantContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
 });
 TabsList.displayName = "TabsList";
-var Tab = (0, import_react62.forwardRef)(function Tab2({ className, ...props }, ref) {
-  const variant = (0, import_react62.useContext)(TabsVariantContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+var Tab = (0, import_react64.forwardRef)(function Tab2({ className, ...props }, ref) {
+  const variant = (0, import_react64.useContext)(TabsVariantContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     RadixTabs.Trigger,
     {
       ref,
@@ -3931,9 +4441,9 @@ var Tab = (0, import_react62.forwardRef)(function Tab2({ className, ...props },
   );
 });
 Tab.displayName = "Tab";
-var TabsContent = (0, import_react62.forwardRef)(
+var TabsContent = (0, import_react64.forwardRef)(
   function TabsContent2({ className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       RadixTabs.Content,
       {
         ref,
@@ -3949,8 +4459,8 @@ var TabsContent = (0, import_react62.forwardRef)(
 TabsContent.displayName = "TabsContent";
 
 // src/patterns/Timeline/Timeline.tsx
-var import_react63 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_react65 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ringClass = {
   accent: "border-accent",
   ok: "border-ok",
@@ -3958,8 +4468,8 @@ var ringClass = {
   err: "border-err",
   muted: "border-text-dim"
 };
-var Timeline = (0, import_react63.forwardRef)(function Timeline2({ events, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+var Timeline = (0, import_react65.forwardRef)(function Timeline2({ events, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "ol",
     {
       ref,
@@ -3969,14 +4479,14 @@ var Timeline = (0, import_react63.forwardRef)(function Timeline2({ events, class
         className
       ),
       ...props,
-      children: events ? events.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
+      children: events ? events.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
     }
   );
 });
 Timeline.displayName = "Timeline";
-var TimelineItem = (0, import_react63.forwardRef)(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+var TimelineItem = (0, import_react65.forwardRef)(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "span",
       {
         "aria-hidden": true,
@@ -3986,18 +4496,18 @@ var TimelineItem = (0, import_react63.forwardRef)(function TimelineItem2({ tone
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-[13px] font-medium", children }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-text-muted text-[12px]", children: description }),
-    time && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-[13px] font-medium", children }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-text-muted text-[12px]", children: description }),
+    time && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
   ] });
 });
 TimelineItem.displayName = "TimelineItem";
 
 // src/patterns/Topbar/Topbar.tsx
-var import_react64 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var Topbar = (0, import_react64.forwardRef)(function Topbar2({ title, leading, actions, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+var import_react66 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var Topbar = (0, import_react66.forwardRef)(function Topbar2({ title, leading, actions, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "header",
     {
       ref,
@@ -4008,9 +4518,9 @@ var Topbar = (0, import_react64.forwardRef)(function Topbar2({ title, leading, a
       ...props,
       children: [
         leading,
-        title && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "text-[13px] font-medium", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-1 items-center" }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex items-center gap-3", children: actions }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-[13px] font-medium", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex flex-1 items-center" }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-center gap-3", children: actions }),
         children
       ]
     }
@@ -4019,8 +4529,8 @@ var Topbar = (0, import_react64.forwardRef)(function Topbar2({ title, leading, a
 Topbar.displayName = "Topbar";
 
 // src/patterns/Tree/Tree.tsx
-var import_react65 = require("react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react67 = require("react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var EMPTY_SET2 = /* @__PURE__ */ new Set();
 function flattenVisible(items, expanded, level, parentId, out) {
   for (const item of items) {
@@ -4031,7 +4541,7 @@ function flattenVisible(items, expanded, level, parentId, out) {
     }
   }
 }
-var Tree = (0, import_react65.forwardRef)(function Tree2({
+var Tree = (0, import_react67.forwardRef)(function Tree2({
   items,
   expanded: expandedProp,
   defaultExpanded,
@@ -4054,24 +4564,24 @@ var Tree = (0, import_react65.forwardRef)(function Tree2({
     onChange: onValueChange
   });
   const expandedSet = expanded ?? EMPTY_SET2;
-  const flatVisible = (0, import_react65.useMemo)(() => {
+  const flatVisible = (0, import_react67.useMemo)(() => {
     const out = [];
     flattenVisible(items, expandedSet, 1, null, out);
     return out;
   }, [items, expandedSet]);
-  const [activeId, setActiveId] = (0, import_react65.useState)(null);
-  (0, import_react65.useEffect)(() => {
+  const [activeId, setActiveId] = (0, import_react67.useState)(null);
+  (0, import_react67.useEffect)(() => {
     if (activeId && !flatVisible.some((f) => f.id === activeId)) {
       setActiveId(null);
     }
   }, [activeId, flatVisible]);
-  const tabStopId = (0, import_react65.useMemo)(() => {
+  const tabStopId = (0, import_react67.useMemo)(() => {
     if (activeId && flatVisible.some((f) => f.id === activeId)) return activeId;
     if (value && flatVisible.some((f) => f.id === value)) return value;
     return flatVisible[0]?.id ?? null;
   }, [activeId, flatVisible, value]);
-  const listRef = (0, import_react65.useRef)(null);
-  const setRefs = (0, import_react65.useCallback)(
+  const listRef = (0, import_react67.useRef)(null);
+  const setRefs = (0, import_react67.useCallback)(
     (node) => {
       listRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -4079,20 +4589,20 @@ var Tree = (0, import_react65.forwardRef)(function Tree2({
     },
     [ref]
   );
-  const focusItem = (0, import_react65.useCallback)((id) => {
+  const focusItem = (0, import_react67.useCallback)((id) => {
     const root = listRef.current;
     if (!root) return;
     const el = root.querySelector(`[data-treeitem-id="${CSS.escape(id)}"]`);
     el?.focus();
   }, []);
-  const moveActive = (0, import_react65.useCallback)(
+  const moveActive = (0, import_react67.useCallback)(
     (id) => {
       setActiveId(id);
       queueMicrotask(() => focusItem(id));
     },
     [focusItem]
   );
-  const toggle = (0, import_react65.useCallback)(
+  const toggle = (0, import_react67.useCallback)(
     (id) => {
       setExpanded((prev) => {
         const next = new Set(prev ?? EMPTY_SET2);
@@ -4103,7 +4613,7 @@ var Tree = (0, import_react65.forwardRef)(function Tree2({
     },
     [setExpanded]
   );
-  const expand = (0, import_react65.useCallback)(
+  const expand = (0, import_react67.useCallback)(
     (id) => {
       setExpanded((prev) => {
         const base = prev ?? EMPTY_SET2;
@@ -4115,7 +4625,7 @@ var Tree = (0, import_react65.forwardRef)(function Tree2({
     },
     [setExpanded]
   );
-  const collapse = (0, import_react65.useCallback)(
+  const collapse = (0, import_react67.useCallback)(
     (id) => {
       setExpanded((prev) => {
         const base = prev ?? EMPTY_SET2;
@@ -4127,13 +4637,13 @@ var Tree = (0, import_react65.forwardRef)(function Tree2({
     },
     [setExpanded]
   );
-  const selectItem = (0, import_react65.useCallback)(
+  const selectItem = (0, import_react67.useCallback)(
     (id) => {
       setValue(id);
     },
     [setValue]
   );
-  const handleKeyDown = (0, import_react65.useCallback)(
+  const handleKeyDown = (0, import_react67.useCallback)(
     (e) => {
       onKeyDown?.(e);
       if (e.defaultPrevented) return;
@@ -4213,7 +4723,7 @@ var Tree = (0, import_react65.forwardRef)(function Tree2({
       toggle
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "ul",
     {
       ref: setRefs,
@@ -4221,7 +4731,7 @@ var Tree = (0, import_react65.forwardRef)(function Tree2({
       className: cn("flex flex-col gap-px text-[12px]", className),
       onKeyDown: handleKeyDown,
       ...props,
-      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         TreeItemRow,
         {
           item,
@@ -4256,8 +4766,8 @@ function TreeItemRow({
   const isExpanded = hasChildren && expanded.has(item.id);
   const isSelected = selected === item.id;
   const isTabStop = tabStopId === item.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("li", { role: "none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("li", { role: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       "div",
       {
         role: "treeitem",
@@ -4280,14 +4790,14 @@ function TreeItemRow({
           isSelected ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
-          item.icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "flex-1 truncate", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "flex-1 truncate", children: item.label }),
           item.trailing
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       TreeItemRow,
       {
         item: child,
@@ -4352,6 +4862,7 @@ function TreeItemRow({
   DropdownMenuRadioGroup,
   DropdownMenuRoot,
   DropdownMenuTrigger,
+  Dropzone,
   EmptyState,
   FAB,
   Field,
@@ -4373,6 +4884,7 @@ function TreeItemRow({
   MenubarMenu,
   MenubarSeparator,
   MenubarTrigger,
+  NavBar,
   NavItem,
   NavSection,
   OTP,