@ship-it-ui/ui 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -95,6 +95,7 @@ __export(index_exports, {
   IconButton: () => IconButton,
   Input: () => Input,
   Kbd: () => Kbd,
+  LargeTitle: () => LargeTitle,
   MenuCheckboxItem: () => MenuCheckboxItem,
   MenuItem: () => MenuItem,
   MenuSeparator: () => MenuSeparator,
@@ -119,6 +120,7 @@ __export(index_exports, {
   PopoverRoot: () => PopoverRoot,
   PopoverTrigger: () => PopoverTrigger,
   Progress: () => Progress,
+  PullToRefresh: () => PullToRefresh,
   RadialProgress: () => RadialProgress,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
@@ -134,6 +136,7 @@ __export(index_exports, {
   SelectValue: () => SelectValue,
   Sheet: () => Sheet,
   Sidebar: () => Sidebar,
+  SimpleTooltip: () => SimpleTooltip,
   Skeleton: () => Skeleton,
   SkeletonGroup: () => SkeletonGroup,
   Slider: () => Slider,
@@ -145,6 +148,7 @@ __export(index_exports, {
   Stepper: () => Stepper,
   Switch: () => Switch,
   Tab: () => Tab,
+  TabBar: () => TabBar,
   Tabs: () => Tabs,
   TabsContent: () => TabsContent,
   TabsList: () => TabsList,
@@ -159,7 +163,6 @@ __export(index_exports, {
   TooltipContent: () => TooltipContent,
   TooltipPortal: () => TooltipPortal,
   TooltipProvider: () => TooltipProvider,
-  TooltipRoot: () => TooltipRoot,
   TooltipTrigger: () => TooltipTrigger,
   Topbar: () => Topbar,
   Tree: () => Tree,
@@ -383,14 +386,29 @@ var buttonStyles = (0, import_class_variance_authority.cva)(
         md: "h-[32px] px-3 text-[12px] gap-[6px] rounded-md",
         lg: "h-[38px] px-4 text-[13px] gap-[7px] rounded-[7px]"
       },
+      density: {
+        comfortable: "",
+        touch: ""
+      },
       fullWidth: {
         true: "w-full",
         false: ""
       }
     },
+    compoundVariants: [
+      // Mobile density — bumps every size to meet 44pt minimum touch target.
+      {
+        size: "sm",
+        density: "touch",
+        class: "h-[36px] px-[14px] text-[13px] gap-[7px] rounded-base"
+      },
+      { size: "md", density: "touch", class: "h-touch px-[18px] text-m-body gap-2 rounded-base" },
+      { size: "lg", density: "touch", class: "h-[52px] px-[22px] text-[16px] gap-2 rounded-base" }
+    ],
     defaultVariants: {
       variant: "primary",
       size: "md",
+      density: "comfortable",
       fullWidth: false
     }
   }
@@ -405,10 +423,14 @@ function Spinner({ size }) {
     }
   );
 }
-var iconSize = { sm: 11, md: 12, lg: 13 };
+var iconSize = {
+  comfortable: { sm: 11, md: 12, lg: 13 },
+  touch: { sm: 13, md: 15, lg: 16 }
+};
 var Button = (0, import_react8.forwardRef)(function Button2({
   variant,
   size,
+  density,
   fullWidth,
   icon,
   trailing,
@@ -421,8 +443,8 @@ var Button = (0, import_react8.forwardRef)(function Button2({
   ...props
 }, ref) {
   const isDisabled = disabled || loading;
-  const iconPx = iconSize[size ?? "md"];
-  const composedClassName = cn(buttonStyles({ variant, size, fullWidth }), className);
+  const iconPx = iconSize[density ?? "comfortable"][size ?? "md"];
+  const composedClassName = cn(buttonStyles({ variant, size, density, fullWidth }), className);
   if (asChild) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_slot.Slot,
@@ -483,18 +505,28 @@ var iconButtonStyles = (0, import_class_variance_authority2.cva)(
         sm: "h-[26px] w-[26px] text-[12px] rounded-[5px]",
         md: "h-[32px] w-[32px] text-[13px] rounded-md",
         lg: "h-[38px] w-[38px] text-[15px] rounded-[7px]"
+      },
+      density: {
+        comfortable: "",
+        touch: ""
       }
     },
-    defaultVariants: { variant: "secondary", size: "md" }
+    compoundVariants: [
+      // Mobile density — 44pt minimum touch target, circular tap.
+      { size: "sm", density: "touch", class: "h-[36px] w-[36px] text-[14px] rounded-full" },
+      { size: "md", density: "touch", class: "h-touch w-touch text-[16px] rounded-full" },
+      { size: "lg", density: "touch", class: "h-[52px] w-[52px] text-[18px] rounded-full" }
+    ],
+    defaultVariants: { variant: "secondary", size: "md", density: "comfortable" }
   }
 );
-var IconButton = (0, import_react9.forwardRef)(function IconButton2({ variant, size, icon, type, className, ...props }, ref) {
+var IconButton = (0, import_react9.forwardRef)(function IconButton2({ variant, size, density, icon, type, className, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       ref,
       type: type ?? "button",
-      className: cn(iconButtonStyles({ variant, size }), className),
+      className: cn(iconButtonStyles({ variant, size, density }), className),
       ...props,
       children: icon
     }
@@ -609,14 +641,16 @@ FAB.displayName = "FAB";
 var RadixCheckbox = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_react13 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Checkbox = (0, import_react13.forwardRef)(function Checkbox2({ label, className, id: idProp, ...props }, ref) {
+var Checkbox = (0, import_react13.forwardRef)(function Checkbox2({ label, density = "comfortable", className, id: idProp, ...props }, ref) {
   const reactId = (0, import_react13.useId)();
   const id = idProp ?? `cb-${reactId}`;
+  const isTouch = density === "touch";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "span",
     {
       className: cn(
-        "inline-flex items-center gap-2 select-none",
+        "inline-flex items-center select-none",
+        isTouch ? "min-h-touch gap-3" : "gap-2",
         props.disabled && "cursor-not-allowed opacity-40",
         className
       ),
@@ -627,18 +661,32 @@ var Checkbox = (0, import_react13.forwardRef)(function Checkbox2({ label, classN
             ref,
             id,
             className: cn(
-              "grid h-4 w-4 place-items-center rounded-xs",
-              "bg-panel border-border-strong border",
+              "grid place-items-center",
+              isTouch ? "h-[22px] w-[22px] rounded-sm border-[1.5px]" : "h-4 w-4 rounded-xs border",
+              "bg-panel border-border-strong",
               "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
               "data-[state=indeterminate]:bg-accent data-[state=indeterminate]:border-accent",
               "transition-[background,border-color] duration-(--duration-micro)",
               "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
             ),
             ...props,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadixCheckbox.Indicator, { className: "text-on-accent text-[11px] leading-none", children: props.checked === "indeterminate" ? "\u2212" : "\u2713" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              RadixCheckbox.Indicator,
+              {
+                className: cn("text-on-accent leading-none", isTouch ? "text-[14px]" : "text-[11px]"),
+                children: props.checked === "indeterminate" ? "\u2212" : "\u2713"
+              }
+            )
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "label",
+          {
+            htmlFor: id,
+            className: cn("cursor-pointer", isTouch ? "text-m-body" : "text-[13px]"),
+            children: label
+          }
+        )
       ]
     }
   );
@@ -689,17 +737,28 @@ var inputWrapperStyles = (0, import_class_variance_authority3.cva)(
       tone: {
         default: "bg-panel border-border focus-within:border-accent focus-within:ring-accent-dim",
         err: "bg-panel border-err focus-within:border-err focus-within:ring-err/30"
+      },
+      density: {
+        comfortable: "",
+        touch: ""
       }
     },
-    defaultVariants: { size: "md", tone: "default" }
+    compoundVariants: [
+      // Mobile density — 52px standard input height (MInput in the canvas);
+      // sm collapses to 44pt min, lg pushes to 56pt for prominent forms.
+      { size: "sm", density: "touch", class: "h-touch px-3 text-m-body rounded-m-tab" },
+      { size: "md", density: "touch", class: "h-[52px] px-[14px] text-m-body rounded-m-tab" },
+      { size: "lg", density: "touch", class: "h-row px-4 text-m-body-lg rounded-m-tab" }
+    ],
+    defaultVariants: { size: "md", tone: "default", density: "comfortable" }
   }
 );
-var Input = (0, import_react15.forwardRef)(function Input2({ size, tone, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
+var Input = (0, import_react15.forwardRef)(function Input2({ size, tone, density, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
   const computedTone = error ? "err" : tone;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
-      className: cn(inputWrapperStyles({ size, tone: computedTone }), className),
+      className: cn(inputWrapperStyles({ size, tone: computedTone, density }), className),
       style: { width, ...style },
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-text-dim leading-none", children: icon }),
@@ -728,27 +787,32 @@ Input.displayName = "Input";
 var import_react16 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var SearchInput = (0, import_react16.forwardRef)(function SearchInput2({
-  shortcut = "\u2318K",
-  width = 360,
+  shortcut,
+  width,
+  density = "comfortable",
   className,
   style,
   placeholder = "Search\u2026",
   "aria-label": ariaLabel,
   ...props
 }, ref) {
+  const isTouch = density === "touch";
+  const resolvedWidth = width ?? (isTouch ? "100%" : 360);
+  const resolvedShortcut = shortcut ?? (isTouch ? void 0 : "\u2318K");
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className: cn(
-        "rounded-base flex h-9 items-center gap-2 px-3 font-sans",
+        "flex items-center gap-2 font-sans",
+        isTouch ? "h-touch rounded-m-tab px-[14px]" : "rounded-base h-9 px-3",
         "bg-panel-2 border-border border",
         "focus-within:border-accent focus-within:ring-accent-dim focus-within:ring-[3px]",
         "transition-[border-color,box-shadow] duration-(--duration-micro)",
         className
       ),
-      style: { width, ...style },
+      style: { width: resolvedWidth, ...style },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-text-dim leading-none", "aria-hidden": true, children: "\u2315" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("text-text-dim leading-none", isTouch && "text-[18px]"), "aria-hidden": true, children: "\u2315" }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "input",
           {
@@ -756,11 +820,14 @@ var SearchInput = (0, import_react16.forwardRef)(function SearchInput2({
             type: "search",
             placeholder,
             "aria-label": ariaLabel ?? (typeof placeholder === "string" ? placeholder : "Search"),
-            className: "text-text placeholder:text-text-dim min-w-0 flex-1 border-none bg-transparent text-[13px] outline-none",
+            className: cn(
+              "text-text placeholder:text-text-dim min-w-0 flex-1 border-none bg-transparent outline-none",
+              isTouch ? "text-m-body" : "text-[13px]"
+            ),
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: shortcut })
+        resolvedShortcut && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: resolvedShortcut })
       ]
     }
   );
@@ -1088,14 +1155,26 @@ var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
 var import_react21 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var trackClasses = {
-  sm: "h-4 w-7",
-  md: "h-5 w-9"
+  comfortable: {
+    sm: "h-4 w-7",
+    md: "h-5 w-9"
+  },
+  touch: {
+    sm: "h-[26px] w-[44px]",
+    md: "h-[30px] w-[50px]"
+  }
 };
 var thumbClasses = {
-  sm: "h-3 w-3 data-[state=checked]:translate-x-3",
-  md: "h-4 w-4 data-[state=checked]:translate-x-4"
+  comfortable: {
+    sm: "h-3 w-3 data-[state=checked]:translate-x-3",
+    md: "h-4 w-4 data-[state=checked]:translate-x-4"
+  },
+  touch: {
+    sm: "h-[22px] w-[22px] data-[state=checked]:translate-x-[18px]",
+    md: "h-[26px] w-[26px] data-[state=checked]:translate-x-5"
+  }
 };
-var Switch = (0, import_react21.forwardRef)(function Switch2({ label, size = "md", className, id: idProp, ...props }, ref) {
+var Switch = (0, import_react21.forwardRef)(function Switch2({ label, size = "md", density = "comfortable", className, id: idProp, ...props }, ref) {
   const reactId = (0, import_react21.useId)();
   const id = idProp ?? `sw-${reactId}`;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
@@ -1117,7 +1196,7 @@ var Switch = (0, import_react21.forwardRef)(function Switch2({ label, size = "md
               "bg-panel-2 border-border data-[state=checked]:bg-accent data-[state=checked]:border-accent",
               "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
               "disabled:cursor-not-allowed",
-              trackClasses[size]
+              trackClasses[density][size]
             ),
             ...props,
             children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -1126,13 +1205,20 @@ var Switch = (0, import_react21.forwardRef)(function Switch2({ label, size = "md
                 className: cn(
                   "bg-text absolute top-1/2 left-[1px] -translate-y-1/2 rounded-full shadow-sm",
                   "data-[state=checked]:bg-on-accent transition-transform duration-(--duration-micro)",
-                  thumbClasses[size]
+                  thumbClasses[density][size]
                 )
               }
             )
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "label",
+          {
+            htmlFor: id,
+            className: cn("cursor-pointer", density === "touch" ? "text-m-body" : "text-[13px]"),
+            children: label
+          }
+        )
       ]
     }
   );
@@ -1400,7 +1486,7 @@ var import_class_variance_authority6 = require("class-variance-authority");
 var import_react27 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var cardStyles = (0, import_class_variance_authority6.cva)(
-  "block bg-panel border border-border rounded-base transition-[border-color,transform,box-shadow] duration-(--duration-step)",
+  "block bg-panel border border-border transition-[border-color,transform,box-shadow] duration-(--duration-step)",
   {
     variants: {
       variant: {
@@ -1411,14 +1497,19 @@ var cardStyles = (0, import_class_variance_authority6.cva)(
       interactive: {
         true: "cursor-pointer hover:border-border-strong hover:-translate-y-px hover:shadow",
         false: ""
+      },
+      density: {
+        comfortable: "rounded-base",
+        touch: "rounded-m-card"
       }
     },
-    defaultVariants: { variant: "default", interactive: false }
+    defaultVariants: { variant: "default", interactive: false, density: "comfortable" }
   }
 );
 var Card = (0, import_react27.forwardRef)(function Card2({
   variant,
   interactive,
+  density,
   title,
   description,
   actions,
@@ -1455,7 +1546,11 @@ var Card = (0, import_react27.forwardRef)(function Card2({
       onKeyDown: handleKeyDown,
       role: isInteractive ? "button" : void 0,
       tabIndex: isInteractive ? 0 : void 0,
-      className: cn(cardStyles({ variant, interactive: wantsInteractive }), "p-[18px]", className),
+      className: cn(
+        cardStyles({ variant, interactive: wantsInteractive, density }),
+        density === "touch" ? "p-4" : "p-[18px]",
+        className
+      ),
       ...props,
       children: [
         (title || actions) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex items-start gap-3", (description || children) && "mb-[10px]"), children: [
@@ -1470,15 +1565,16 @@ var Card = (0, import_react27.forwardRef)(function Card2({
   );
 });
 Card.displayName = "Card";
-var CardLink = (0, import_react27.forwardRef)(function CardLink2({ variant, title, description, footer, className, children, href, ...props }, ref) {
+var CardLink = (0, import_react27.forwardRef)(function CardLink2({ variant, density, title, description, footer, className, children, href, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "a",
     {
       ref,
       href,
       className: cn(
-        cardStyles({ variant, interactive: true }),
-        "focus-visible:ring-accent-dim p-[18px] no-underline outline-none focus-visible:ring-[3px]",
+        cardStyles({ variant, interactive: true, density }),
+        "focus-visible:ring-accent-dim no-underline outline-none focus-visible:ring-[3px]",
+        density === "touch" ? "p-4" : "p-[18px]",
         className
       ),
       ...props,
@@ -1529,19 +1625,21 @@ StatCard.displayName = "StatCard";
 // src/components/Chip/Chip.tsx
 var import_react29 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var Chip = (0, import_react29.forwardRef)(function Chip2({ icon, onRemove, className, children, ...props }, ref) {
+var Chip = (0, import_react29.forwardRef)(function Chip2({ icon, onRemove, density = "comfortable", className, children, ...props }, ref) {
+  const isTouch = density === "touch";
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "span",
     {
       ref,
       className: cn(
-        "inline-flex h-[26px] items-center gap-[6px] py-[4px] pr-1 pl-[10px] font-sans text-[12px]",
+        "inline-flex items-center gap-[6px] font-sans",
+        isTouch ? "text-m-mono h-8 py-[5px] pr-[6px] pl-3" : "h-[26px] py-[4px] pr-1 pl-[10px] text-[12px]",
         "bg-panel-2 text-text border-border rounded-full border",
         className
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-text-dim inline-flex text-[10px]", children: icon }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cn("text-text-dim inline-flex", isTouch ? "text-[12px]" : "text-[10px]"), children: icon }),
         children,
         onRemove && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "button",
@@ -1549,7 +1647,10 @@ var Chip = (0, import_react29.forwardRef)(function Chip2({ icon, onRemove, class
             type: "button",
             onClick: onRemove,
             "aria-label": "Remove",
-            className: "bg-panel text-text-dim hover:text-text grid h-[18px] w-[18px] place-items-center rounded-full text-[10px] leading-none",
+            className: cn(
+              "bg-panel text-text-dim hover:text-text grid place-items-center rounded-full leading-none",
+              isTouch ? "h-[22px] w-[22px] text-[12px]" : "h-[18px] w-[18px] text-[10px]"
+            ),
             children: "\xD7"
           }
         )
@@ -1852,8 +1953,9 @@ var RadixDialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_react36 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var sideClasses = {
-  left: "left-0 border-r border-border-strong data-[state=open]:animate-[ship-slide-in-left_220ms_var(--easing-out)]",
-  right: "right-0 border-l border-border-strong data-[state=open]:animate-[ship-slide-in-right_220ms_var(--easing-out)]"
+  left: "top-0 bottom-0 left-0 border-r border-border-strong data-[state=open]:animate-[ship-slide-in-left_220ms_var(--easing-out)]",
+  right: "top-0 bottom-0 right-0 border-l border-border-strong data-[state=open]:animate-[ship-slide-in-right_220ms_var(--easing-out)]",
+  bottom: "bottom-0 left-0 right-0 border-t border-border-strong rounded-t-m-sheet data-[state=open]:animate-[ship-slide-in-bottom_240ms_var(--easing-out)]"
 };
 var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "border-border flex items-center justify-between border-b p-[16px] px-5", children: [
   /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixDialog2.Title, { className: "text-[14px] font-medium", children: title }),
@@ -1867,7 +1969,12 @@ var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ (0, import_jsx_runtim
     }
   )
 ] });
-var Drawer = (0, import_react36.forwardRef)(function Drawer2({ side = "right", title, width = 420, children, ...rootProps }, ref) {
+var SheetHeader = ({ title }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-5 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixDialog2.Title, { className: "text-m-body-lg font-semibold tracking-tight", children: title }) });
+var DragHandle = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex justify-center pt-3 pb-2", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "bg-border-strong h-1 w-9 rounded-full" }) });
+var Drawer = (0, import_react36.forwardRef)(function Drawer2({ side = "right", title, width = 420, height = "85vh", handle, children, ...rootProps }, ref) {
+  const isBottom = side === "bottom";
+  const showHandle = isBottom && (handle ?? true);
+  const dimensionStyle = isBottom ? { height } : { width };
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(DialogPortal, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
@@ -1876,13 +1983,14 @@ var Drawer = (0, import_react36.forwardRef)(function Drawer2({ side = "right", t
         ref,
         "aria-describedby": void 0,
         className: cn(
-          "bg-panel z-modal fixed top-0 bottom-0 flex flex-col shadow-lg outline-none",
+          "bg-panel z-modal fixed flex flex-col shadow-lg outline-none",
           sideClasses[side]
         ),
-        style: { width },
+        style: dimensionStyle,
         children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DrawerHeader, { title }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixDialog2.Title, { className: "sr-only", children: "Drawer" }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1 overflow-auto p-5", children })
+          showHandle && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DragHandle, {}),
+          title ? isBottom ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SheetHeader, { title }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DrawerHeader, { title }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixDialog2.Title, { className: "sr-only", children: isBottom ? "Sheet" : "Drawer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("flex-1 overflow-auto", isBottom ? "px-5 pb-6" : "p-5"), children })
         ]
       }
     )
@@ -2209,7 +2317,7 @@ var RadixTooltip = __toESM(require("@radix-ui/react-tooltip"), 1);
 var import_react43 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var TooltipProvider = RadixTooltip.Provider;
-var TooltipRoot = RadixTooltip.Root;
+var Tooltip = RadixTooltip.Root;
 var TooltipTrigger = RadixTooltip.Trigger;
 var TooltipPortal = RadixTooltip.Portal;
 var TooltipArrow = RadixTooltip.Arrow;
@@ -2232,8 +2340,13 @@ var TooltipContent = (0, import_react43.forwardRef)(
   }
 );
 TooltipContent.displayName = "TooltipContent";
-function Tooltip({ content, children, side = "top", delayDuration = 400 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipProvider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(TooltipRoot, { children: [
+function SimpleTooltip({
+  content,
+  children,
+  side = "top",
+  delayDuration = 400
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipProvider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { side, children: content })
   ] }) });
@@ -3756,12 +3869,34 @@ var HealthScore = (0, import_react58.forwardRef)(function HealthScore2({
 });
 HealthScore.displayName = "HealthScore";
 
-// src/patterns/Menubar/Menubar.tsx
-var RadixMenubar = __toESM(require("@radix-ui/react-menubar"), 1);
+// src/patterns/LargeTitle/LargeTitle.tsx
 var import_react59 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var Menubar = (0, import_react59.forwardRef)(function Menubar2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var LargeTitle = (0, import_react59.forwardRef)(function LargeTitle2({ title, eyebrow, trailing, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "header",
+    {
+      ref,
+      className: cn("px-screen flex items-end justify-between gap-3 py-3 pb-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          eyebrow && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "text-m-eyebrow text-accent mb-[6px] font-mono tracking-wide uppercase", children: eyebrow }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h1", { className: "text-m-h1 m-0 truncate leading-tight font-medium tracking-tight", children: title })
+        ] }),
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "shrink-0", children: trailing })
+      ]
+    }
+  );
+});
+LargeTitle.displayName = "LargeTitle";
+
+// src/patterns/Menubar/Menubar.tsx
+var RadixMenubar = __toESM(require("@radix-ui/react-menubar"), 1);
+var import_react60 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var Menubar = (0, import_react60.forwardRef)(function Menubar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     RadixMenubar.Root,
     {
       ref,
@@ -3775,9 +3910,9 @@ var Menubar = (0, import_react59.forwardRef)(function Menubar2({ className, ...p
 });
 Menubar.displayName = "Menubar";
 var MenubarMenu = RadixMenubar.Menu;
-var MenubarTrigger = (0, import_react59.forwardRef)(
+var MenubarTrigger = (0, import_react60.forwardRef)(
   function MenubarTrigger2({ className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       RadixMenubar.Trigger,
       {
         ref,
@@ -3794,9 +3929,9 @@ var MenubarTrigger = (0, import_react59.forwardRef)(
   }
 );
 MenubarTrigger.displayName = "MenubarTrigger";
-var MenubarContent = (0, import_react59.forwardRef)(
+var MenubarContent = (0, import_react60.forwardRef)(
   function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RadixMenubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(RadixMenubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       RadixMenubar.Content,
       {
         ref,
@@ -3818,24 +3953,24 @@ var itemBase3 = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var MenubarItem = (0, import_react59.forwardRef)(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+var MenubarItem = (0, import_react60.forwardRef)(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     RadixMenubar.Item,
     {
       ref,
       className: cn(itemBase3, destructive ? "text-err" : "text-text", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1", children }),
-        trailing && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
       ]
     }
   );
 });
 MenubarItem.displayName = "MenubarItem";
-var MenubarSeparator = (0, import_react59.forwardRef)(
+var MenubarSeparator = (0, import_react60.forwardRef)(
   function MenubarSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       RadixMenubar.Separator,
       {
         ref,
@@ -3849,13 +3984,13 @@ MenubarSeparator.displayName = "MenubarSeparator";
 
 // src/patterns/NavBar/NavBar.tsx
 var RadixNav = __toESM(require("@radix-ui/react-navigation-menu"), 1);
-var import_react61 = require("react");
+var import_react62 = require("react");
 
 // src/patterns/Sidebar/Sidebar.tsx
-var import_react60 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var Sidebar = (0, import_react60.forwardRef)(function Sidebar2({ width = 240, className, style, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+var import_react61 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var Sidebar = (0, import_react61.forwardRef)(function Sidebar2({ width = 240, className, style, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "aside",
     {
       ref,
@@ -3869,12 +4004,12 @@ var Sidebar = (0, import_react60.forwardRef)(function Sidebar2({ width = 240, cl
   );
 });
 Sidebar.displayName = "Sidebar";
-var NavItem = (0, import_react60.forwardRef)(
+var NavItem = (0, import_react61.forwardRef)(
   function NavItem2({ icon, label, active, badge, href, disabled, className, ...props }, ref) {
-    const inner = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex-1 truncate", children: label }),
-      badge != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    const inner = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex-1 truncate", children: label }),
+      badge != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "span",
         {
           className: cn(
@@ -3895,7 +4030,7 @@ var NavItem = (0, import_react60.forwardRef)(
     );
     if (href) {
       const anchorProps = props;
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "a",
         {
           ref,
@@ -3909,7 +4044,7 @@ var NavItem = (0, import_react60.forwardRef)(
       );
     }
     const buttonProps = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "button",
       {
         ref,
@@ -3924,7 +4059,7 @@ var NavItem = (0, import_react60.forwardRef)(
   }
 );
 NavItem.displayName = "NavItem";
-var NavSection = (0, import_react60.forwardRef)(function NavSection2({
+var NavSection = (0, import_react61.forwardRef)(function NavSection2({
   label,
   icon,
   action,
@@ -3938,16 +4073,16 @@ var NavSection = (0, import_react60.forwardRef)(function NavSection2({
   ...props
 }, ref) {
   const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = (0, import_react60.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react61.useState)(defaultOpen);
   const isOpen = !collapsible || (isControlled ? open : internalOpen);
-  const toggle = (0, import_react60.useCallback)(() => {
+  const toggle = (0, import_react61.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_runtime53.jsxs)("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
-    collapsible ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+    collapsible ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       "button",
       {
         type: "button",
@@ -3960,18 +4095,18 @@ var NavSection = (0, import_react60.forwardRef)(function NavSection2({
           "hover:text-text-muted"
         ),
         children: [
-          icon != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex-1 text-left", children: label }),
+          icon != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex-1 text-left", children: label }),
           action,
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: eyebrowClass, children: [
-      icon != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex-1", children: label }),
+    ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: eyebrowClass, children: [
+      icon != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex-1", children: label }),
       action
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "div",
       {
         className: cn("flex flex-col gap-[2px]", indent > 0 && "border-border ml-2 border-l"),
@@ -3984,12 +4119,12 @@ var NavSection = (0, import_react60.forwardRef)(function NavSection2({
 NavSection.displayName = "NavSection";
 
 // src/patterns/NavBar/NavBar.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = 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_react61.forwardRef)(function NavBar2({
+var NavBar = (0, import_react62.forwardRef)(function NavBar2({
   orientation = "horizontal",
   items,
   brand,
@@ -4003,17 +4138,17 @@ var NavBar = (0, import_react61.forwardRef)(function NavBar2({
   ...props
 }, ref) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react61.useState)(defaultValue);
+  const [internalValue, setInternalValue] = (0, import_react62.useState)(defaultValue);
   const activeId = isControlled ? value : internalValue;
-  const [drawerOpen, setDrawerOpen] = (0, import_react61.useState)(false);
-  const select = (0, import_react61.useCallback)(
+  const [drawerOpen, setDrawerOpen] = (0, import_react62.useState)(false);
+  const select = (0, import_react62.useCallback)(
     (id) => {
       if (!isControlled) setInternalValue(id);
       onValueChange?.(id);
     },
     [isControlled, onValueChange]
   );
-  const handleItemActivate = (0, import_react61.useCallback)(
+  const handleItemActivate = (0, import_react62.useCallback)(
     (id) => {
       select(id);
       setDrawerOpen(false);
@@ -4025,7 +4160,7 @@ var NavBar = (0, import_react61.forwardRef)(function NavBar2({
     // 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_runtime54.jsx)("nav", { "aria-label": "Mobile navigation", className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("nav", { "aria-label": "Mobile navigation", className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       VerticalItem,
       {
         item,
@@ -4035,14 +4170,14 @@ var NavBar = (0, import_react61.forwardRef)(function NavBar2({
       item.id
     )) })
   );
-  const mobileBar = responsive ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  const mobileBar = responsive ? /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "button",
           {
             type: "button",
@@ -4052,15 +4187,15 @@ var NavBar = (0, import_react61.forwardRef)(function NavBar2({
             children: "\u2630"
           }
         ),
-        brand && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex flex-1 items-center text-[13px] font-medium whitespace-nowrap", children: brand }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex items-center gap-3", children: actions })
+        brand && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex flex-1 items-center text-[13px] font-medium whitespace-nowrap", children: brand }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex items-center gap-3", children: actions })
       ]
     }
   ) : null;
   if (orientation === "horizontal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
       mobileBar,
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
         "header",
         {
           ref,
@@ -4071,10 +4206,10 @@ var NavBar = (0, import_react61.forwardRef)(function NavBar2({
           ),
           ...props,
           children: [
-            brand && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "shrink-0 text-[13px] font-medium whitespace-nowrap", children: brand }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(RadixNav.Root, { className: "relative flex-1", delayDuration: 120, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(
+            brand && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "shrink-0 text-[13px] font-medium whitespace-nowrap", children: brand }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(RadixNav.Root, { className: "relative flex-1", delayDuration: 120, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsx)(
                   HorizontalDropdown,
                   {
                     item,
@@ -4083,7 +4218,7 @@ var NavBar = (0, import_react61.forwardRef)(function NavBar2({
                     onActivate: handleItemActivate
                   },
                   item.id
-                ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixNav.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RadixNav.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                   HorizontalLink,
                   {
                     item,
@@ -4092,13 +4227,13 @@ var NavBar = (0, import_react61.forwardRef)(function NavBar2({
                   }
                 ) }, item.id)
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "z-popover absolute top-full left-0 flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixNav.Viewport, { className: "origin-top-left data-[state=open]:animate-[ship-fade-in_120ms_var(--easing-out)]" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "z-popover absolute top-full left-0 flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RadixNav.Viewport, { className: "origin-top-left data-[state=open]:animate-[ship-fade-in_120ms_var(--easing-out)]" }) })
             ] }),
-            actions && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex items-center gap-3", children: actions })
+            actions && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex items-center gap-3", children: actions })
           ]
         }
       ),
-      responsive && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      responsive && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         Drawer,
         {
           open: drawerOpen,
@@ -4111,9 +4246,9 @@ var NavBar = (0, import_react61.forwardRef)(function NavBar2({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
     mobileBar,
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "aside",
       {
         ref,
@@ -4126,8 +4261,8 @@ var NavBar = (0, import_react61.forwardRef)(function NavBar2({
         ),
         ...props,
         children: [
-          brand && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-2 py-1 text-[13px] font-medium", children: brand }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(
+          brand && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-2 py-1 text-[13px] font-medium", children: brand }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsx)(
             VerticalItem,
             {
               item,
@@ -4136,11 +4271,11 @@ var NavBar = (0, import_react61.forwardRef)(function NavBar2({
             },
             item.id
           )) }),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "border-border mt-auto flex flex-col gap-2 border-t pt-3", children: actions })
+          actions && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "border-border mt-auto flex flex-col gap-2 border-t pt-3", children: actions })
         ]
       }
     ),
-    responsive && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    responsive && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       Drawer,
       {
         open: drawerOpen,
@@ -4169,13 +4304,13 @@ function HorizontalLink({ item, active, onActivate }) {
     }
     onActivate(item.id);
   };
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: item.label }),
-    item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ItemBadge, { active, children: item.badge })
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: item.label }),
+    item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemBadge, { active, children: item.badge })
   ] });
   if (item.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "a",
       {
         href: item.href,
@@ -4187,7 +4322,7 @@ function HorizontalLink({ item, active, onActivate }) {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "button",
     {
       type: "button",
@@ -4200,8 +4335,8 @@ function HorizontalLink({ item, active, onActivate }) {
   ) });
 }
 function HorizontalDropdown({ item, active, activeId, onActivate }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(RadixNav.Item, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(RadixNav.Item, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       RadixNav.Trigger,
       {
         className: cn(
@@ -4213,9 +4348,9 @@ function HorizontalDropdown({ item, active, activeId, onActivate }) {
         ),
         disabled: item.disabled,
         children: [
-          item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: item.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             "span",
             {
               "aria-hidden": true,
@@ -4226,7 +4361,7 @@ function HorizontalDropdown({ item, active, activeId, onActivate }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixNav.Content, { className: "border-border bg-panel min-w-[220px] rounded-xs border p-2 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DropdownLink, { item: child, active: child.id === activeId, onActivate }) }, child.id)) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RadixNav.Content, { className: "border-border bg-panel min-w-[220px] rounded-xs border p-2 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownLink, { item: child, active: child.id === activeId, onActivate }) }, child.id)) }) })
   ] });
 }
 function DropdownLink({ item, active, onActivate }) {
@@ -4243,13 +4378,13 @@ function DropdownLink({ item, active, onActivate }) {
     }
     onActivate(item.id);
   };
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex-1", children: item.label }),
-    item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ItemBadge, { active, children: item.badge })
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "flex-1", children: item.label }),
+    item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemBadge, { active, children: item.badge })
   ] });
   if (item.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "a",
       {
         href: item.href,
@@ -4261,7 +4396,7 @@ function DropdownLink({ item, active, onActivate }) {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "button",
     {
       type: "button",
@@ -4276,9 +4411,9 @@ function DropdownLink({ item, active, onActivate }) {
 function VerticalItem({ item, activeId, onActivate }) {
   const hasChildren = (item.children?.length ?? 0) > 0;
   const treeActive = isActiveTree(item, activeId);
-  const [open, setOpen] = (0, import_react61.useState)(treeActive);
-  const prevTreeActive = (0, import_react61.useRef)(treeActive);
-  (0, import_react61.useEffect)(() => {
+  const [open, setOpen] = (0, import_react62.useState)(treeActive);
+  const prevTreeActive = (0, import_react62.useRef)(treeActive);
+  (0, import_react62.useEffect)(() => {
     if (treeActive && !prevTreeActive.current) setOpen(true);
     prevTreeActive.current = treeActive;
   }, [treeActive]);
@@ -4290,7 +4425,7 @@ function VerticalItem({ item, activeId, onActivate }) {
       }
       onActivate(item.id);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       NavItem,
       {
         icon: item.icon,
@@ -4303,8 +4438,8 @@ function VerticalItem({ item, activeId, onActivate }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "button",
       {
         type: "button",
@@ -4320,18 +4455,18 @@ function VerticalItem({ item, activeId, onActivate }) {
           item.disabled && "pointer-events-none opacity-50"
         ),
         children: [
-          item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: item.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex-1 truncate", children: item.label }),
-          item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ItemBadge, { active: treeActive, children: item.badge }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-60", children: open ? "\u25BE" : "\u25B8" })
+          item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "flex-1 truncate", children: item.label }),
+          item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemBadge, { active: treeActive, children: item.badge }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-60", children: open ? "\u25BE" : "\u25B8" })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(VerticalItem, { item: child, activeId, onActivate }, child.id)) })
+    open && /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsx)(VerticalItem, { item: child, activeId, onActivate }, child.id)) })
   ] });
 }
 function ItemBadge({ active, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "span",
     {
       className: cn(
@@ -4344,8 +4479,8 @@ function ItemBadge({ active, children }) {
 }
 
 // src/patterns/OnboardingChecklist/OnboardingChecklist.tsx
-var import_react62 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_react63 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var statusDot = {
   pending: "off",
   "in-progress": "sync",
@@ -4356,11 +4491,11 @@ var labelStateClass = {
   "in-progress": "text-text",
   done: "text-text-dim line-through"
 };
-var OnboardingChecklist = (0, import_react62.forwardRef)(
+var OnboardingChecklist = (0, import_react63.forwardRef)(
   function OnboardingChecklist2({ items, onItemClick, title = "Get started", progressLabel, hideProgress, className, ...props }, ref) {
     const total = items.length;
     const done = items.filter((i) => i.status === "done").length;
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       "section",
       {
         ref,
@@ -4371,11 +4506,11 @@ var OnboardingChecklist = (0, import_react62.forwardRef)(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("header", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-[14px] font-medium", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-text-dim ml-auto font-mono text-[11px] tabular-nums", children: progressLabel ?? `${done} of ${total} complete` })
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("header", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-[14px] font-medium", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-text-dim ml-auto font-mono text-[11px] tabular-nums", children: progressLabel ?? `${done} of ${total} complete` })
           ] }),
-          !hideProgress && total > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          !hideProgress && total > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "div",
             {
               role: "progressbar",
@@ -4384,7 +4519,7 @@ var OnboardingChecklist = (0, import_react62.forwardRef)(
               "aria-valuenow": done,
               "aria-label": typeof title === "string" ? `${title} progress` : "Setup progress",
               className: "bg-panel-2 h-[3px] w-full overflow-hidden rounded-full",
-              children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 "span",
                 {
                   "aria-hidden": true,
@@ -4397,10 +4532,10 @@ var OnboardingChecklist = (0, import_react62.forwardRef)(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("ul", { className: "m-0 flex list-none flex-col gap-1 p-0", children: items.map((item) => {
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { className: "m-0 flex list-none flex-col gap-1 p-0", children: items.map((item) => {
             const interactive = typeof onItemClick === "function";
-            const labelBlock = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            const labelBlock = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 StatusDot,
                 {
                   state: statusDot[item.status],
@@ -4409,17 +4544,17 @@ var OnboardingChecklist = (0, import_react62.forwardRef)(
                   className: "mt-[3px]"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-[2px]", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: cn("text-[13px]", labelStateClass[item.status]), children: item.label }),
-                item.description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-text-muted text-[12px] leading-[1.45]", children: item.description })
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-[2px]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: cn("text-[13px]", labelStateClass[item.status]), children: item.label }),
+                item.description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-text-muted text-[12px] leading-[1.45]", children: item.description })
               ] })
             ] });
             const labelRegionClass = cn(
               "flex flex-1 items-start gap-3 rounded-md px-2 py-2 text-left transition-colors duration-(--duration-micro)",
               interactive && "cursor-pointer outline-none hover:bg-panel-2 focus-visible:ring-[3px] focus-visible:ring-accent-dim"
             );
-            return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("li", { className: "flex items-start gap-2", children: [
-              interactive ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("li", { className: "flex items-start gap-2", children: [
+              interactive ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 "button",
                 {
                   type: "button",
@@ -4428,8 +4563,8 @@ var OnboardingChecklist = (0, import_react62.forwardRef)(
                   className: labelRegionClass,
                   children: labelBlock
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: labelRegionClass, children: labelBlock }),
-              item.action && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "shrink-0 self-center", children: item.action })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: labelRegionClass, children: labelBlock }),
+              item.action && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "shrink-0 self-center", children: item.action })
             ] }, item.id);
           }) })
         ]
@@ -4440,8 +4575,8 @@ var OnboardingChecklist = (0, import_react62.forwardRef)(
 OnboardingChecklist.displayName = "OnboardingChecklist";
 
 // src/patterns/Pagination/Pagination.tsx
-var import_react63 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_react64 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function buildRange(page, total, siblings) {
   if (total <= 0) return [];
   const items = [];
@@ -4454,9 +4589,9 @@ function buildRange(page, total, siblings) {
   if (total > 1) items.push(total);
   return items;
 }
-var Pagination = (0, import_react63.forwardRef)(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
+var Pagination = (0, import_react64.forwardRef)(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
   const items = buildRange(page, total, siblings);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "nav",
     {
       ref,
@@ -4464,7 +4599,7 @@ var Pagination = (0, import_react63.forwardRef)(function Pagination2({ page, tot
       className: cn("inline-flex items-center gap-1", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           IconButton,
           {
             size: "sm",
@@ -4477,7 +4612,7 @@ var Pagination = (0, import_react63.forwardRef)(function Pagination2({ page, tot
         ),
         items.map((item, i) => {
           if (item === "start-ellipsis" || item === "end-ellipsis") {
-            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "span",
               {
                 "aria-hidden": true,
@@ -4488,7 +4623,7 @@ var Pagination = (0, import_react63.forwardRef)(function Pagination2({ page, tot
             );
           }
           const isActive = item === page;
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             "button",
             {
               type: "button",
@@ -4506,7 +4641,7 @@ var Pagination = (0, import_react63.forwardRef)(function Pagination2({ page, tot
             item
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           IconButton,
           {
             size: "sm",
@@ -4525,8 +4660,8 @@ Pagination.displayName = "Pagination";
 
 // src/patterns/Progress/Progress.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_react64 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_react65 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var trackStyles = (0, import_class_variance_authority11.cva)("w-full rounded-full bg-panel-2 overflow-hidden", {
   variants: {
     size: {
@@ -4548,7 +4683,7 @@ var fillStyles = (0, import_class_variance_authority11.cva)("h-full rounded-full
   },
   defaultVariants: { tone: "accent" }
 });
-var Progress = (0, import_react64.forwardRef)(function Progress2({
+var Progress = (0, import_react65.forwardRef)(function Progress2({
   value = 0,
   max = 100,
   indeterminate = false,
@@ -4562,15 +4697,15 @@ var Progress = (0, import_react64.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_runtime57.jsxs)("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex text-[12px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-text-muted", children: label }),
-      showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex text-[12px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-text-muted", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
         display,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "div",
       {
         role: "progressbar",
@@ -4579,7 +4714,7 @@ var Progress = (0, import_react64.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_runtime57.jsx)(
+        children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -4589,16 +4724,61 @@ var Progress = (0, import_react64.forwardRef)(function Progress2({
               "animate-[ship-indeterminate_1.4s_linear_infinite]"
             )
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
       }
     )
   ] });
 });
 Progress.displayName = "Progress";
 
+// src/patterns/PullToRefresh/PullToRefresh.tsx
+var import_react66 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var labels = {
+  idle: "Pull to refresh",
+  pulling: "Pull to refresh",
+  ready: "Release to refresh",
+  loading: "Refreshing\u2026"
+};
+var PullToRefresh = (0, import_react66.forwardRef)(function PullToRefresh2({ state = "idle", label, className, ...props }, ref) {
+  const isLoading = state === "loading";
+  const transform = state === "ready" ? "rotate(180deg)" : state === "pulling" ? "rotate(90deg)" : "rotate(0deg)";
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": isLoading || void 0,
+      className: cn("text-text-muted flex flex-col items-center gap-[6px] py-3", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "border-border border-t-accent rounded-full border-2",
+              isLoading && "animate-[ship-spin_700ms_linear_infinite]"
+            ),
+            style: {
+              width: 22,
+              height: 22,
+              transform: isLoading ? void 0 : transform,
+              transition: isLoading ? void 0 : "transform 200ms var(--easing-out)"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-m-eyebrow font-mono tracking-wide uppercase", children: label ?? labels[state] })
+      ]
+    }
+  );
+});
+PullToRefresh.displayName = "PullToRefresh";
+
 // src/patterns/Sparkline/Sparkline.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");
 function buildPath(values, w, h) {
   if (values.length === 0) return { line: "", area: "" };
   const pad = 2;
@@ -4617,7 +4797,7 @@ function buildPath(values, w, h) {
   )} L${pad.toFixed(2)},${(h - pad).toFixed(2)} Z`;
   return { line, area };
 }
-var Sparkline = (0, import_react65.forwardRef)(function Sparkline2({
+var Sparkline = (0, import_react67.forwardRef)(function Sparkline2({
   values,
   width = 160,
   height = 32,
@@ -4628,8 +4808,8 @@ var Sparkline = (0, import_react65.forwardRef)(function Sparkline2({
   "aria-label": ariaLabel = "Trend",
   ...props
 }, ref) {
-  const { line, area } = (0, import_react65.useMemo)(() => buildPath(values, width, height), [values, width, height]);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  const { line, area } = (0, import_react67.useMemo)(() => buildPath(values, width, height), [values, width, height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "svg",
     {
       ref,
@@ -4641,8 +4821,8 @@ var Sparkline = (0, import_react65.forwardRef)(function Sparkline2({
       className: cn("inline-block", className),
       ...props,
       children: [
-        fill && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        fill && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "path",
           {
             d: line,
@@ -4660,16 +4840,16 @@ var Sparkline = (0, import_react65.forwardRef)(function Sparkline2({
 Sparkline.displayName = "Sparkline";
 
 // src/patterns/Spinner/Spinner.tsx
-var import_react66 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_react68 = require("react");
+var import_jsx_runtime61 = 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_react66.forwardRef)(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
+var Spinner2 = (0, import_react68.forwardRef)(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
   const s = sizes[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     "span",
     {
       ref,
@@ -4677,7 +4857,7 @@ var Spinner2 = (0, import_react66.forwardRef)(function Spinner3({ size = "md", l
       "aria-label": label,
       className: cn("inline-block", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         "span",
         {
           "aria-hidden": true,
@@ -4694,8 +4874,8 @@ var Spinner2 = (0, import_react66.forwardRef)(function Spinner3({ size = "md", l
 Spinner2.displayName = "Spinner";
 
 // src/patterns/Stepper/Stepper.tsx
-var import_react67 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_react69 = require("react");
+var import_jsx_runtime62 = 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",
@@ -4712,8 +4892,8 @@ function stateFor(index, current) {
   if (index === current) return "current";
   return "upcoming";
 }
-var Stepper = (0, import_react67.forwardRef)(function Stepper2({ steps, current, className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+var Stepper = (0, import_react69.forwardRef)(function Stepper2({ steps, current, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "ol",
     {
       ref,
@@ -4725,19 +4905,19 @@ var Stepper = (0, import_react67.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_runtime60.jsxs)(import_react67.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react69.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
             "li",
             {
               "aria-current": state === "current" ? "step" : void 0,
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: cn("text-[12px]", labelStateClass2[state]), children: label })
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: cn("text-[12px]", labelStateClass2[state]), children: label })
               ]
             }
           ),
-          i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             "span",
             {
               "aria-hidden": true,
@@ -4751,12 +4931,110 @@ var Stepper = (0, import_react67.forwardRef)(function Stepper2({ steps, current,
 });
 Stepper.displayName = "Stepper";
 
+// src/patterns/TabBar/TabBar.tsx
+var import_react70 = require("react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var TabBar = (0, import_react70.forwardRef)(function TabBar2({ items, value, defaultValue, onValueChange, className, ...props }, ref) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react70.useState)(defaultValue);
+  const activeId = isControlled ? value : internalValue;
+  const handleSelect = (0, import_react70.useCallback)(
+    (id, e) => {
+      if (!isControlled) setInternalValue(id);
+      onValueChange?.(id);
+      e.stopPropagation();
+    },
+    [isControlled, onValueChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    "nav",
+    {
+      ref,
+      "aria-label": "Primary",
+      className: cn(
+        "border-border bg-panel h-tabbar grid items-center border-t",
+        "pb-[env(safe-area-inset-bottom)]",
+        className
+      ),
+      style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
+      ...props,
+      children: items.map((item) => {
+        const isActive = item.id === activeId;
+        if (item.elevated) {
+          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "grid place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+            "button",
+            {
+              type: "button",
+              "aria-current": isActive ? "page" : void 0,
+              disabled: item.disabled,
+              onClick: (e) => handleSelect(item.id, e),
+              className: cn(
+                "bg-accent text-on-accent grid place-items-center rounded-2xl shadow-lg",
+                "-mt-[10px] h-[52px] w-[52px]",
+                "transition-[filter,transform] duration-(--duration-micro)",
+                "hover:brightness-110 active:scale-95",
+                "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
+                "disabled:cursor-not-allowed disabled:opacity-40"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { "aria-hidden": true, children: item.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "sr-only", children: item.label })
+              ]
+            }
+          ) }, item.id);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-current": isActive ? "page" : void 0,
+            disabled: item.disabled,
+            onClick: (e) => handleSelect(item.id, e),
+            className: cn(
+              "flex flex-col items-center justify-center gap-[3px] border-0 bg-transparent",
+              "h-full cursor-pointer outline-none",
+              "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+              "disabled:cursor-not-allowed disabled:opacity-40",
+              isActive ? "text-accent-text" : "text-text-muted hover:text-text"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "relative inline-flex", "aria-hidden": true, children: [
+                item.icon,
+                item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "absolute -top-1 -right-2 rounded-full font-mono leading-none",
+                      "bg-err text-on-accent min-w-[16px] px-[5px] py-[2px] text-center text-[9px]"
+                    ),
+                    children: item.badge
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "text-[10px] font-medium tracking-tight", children: [
+                item.label,
+                item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "sr-only", children: [
+                  ", ",
+                  item.badge,
+                  " unread"
+                ] })
+              ] })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+});
+TabBar.displayName = "TabBar";
+
 // 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_react68 = require("react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
-var TabsVariantContext = (0, import_react68.createContext)("underline");
+var import_react71 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var TabsVariantContext = (0, import_react71.createContext)("underline");
 var tabsListStyles = (0, import_class_variance_authority12.cva)("", {
   variants: {
     variant: {
@@ -4786,8 +5064,8 @@ var tabsTriggerStyles = (0, import_class_variance_authority12.cva)(
     }
   }
 );
-var Tabs = (0, import_react68.forwardRef)(function Tabs2({ variant = "underline", className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+var Tabs = (0, import_react71.forwardRef)(function Tabs2({ variant = "underline", className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     RadixTabs.Root,
     {
       ref,
@@ -4797,14 +5075,14 @@ var Tabs = (0, import_react68.forwardRef)(function Tabs2({ variant = "underline"
   ) });
 });
 Tabs.displayName = "Tabs";
-var TabsList = (0, import_react68.forwardRef)(function TabsList2({ className, ...props }, ref) {
-  const variant = (0, import_react68.useContext)(TabsVariantContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
+var TabsList = (0, import_react71.forwardRef)(function TabsList2({ className, ...props }, ref) {
+  const variant = (0, import_react71.useContext)(TabsVariantContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
 });
 TabsList.displayName = "TabsList";
-var Tab = (0, import_react68.forwardRef)(function Tab2({ className, ...props }, ref) {
-  const variant = (0, import_react68.useContext)(TabsVariantContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+var Tab = (0, import_react71.forwardRef)(function Tab2({ className, ...props }, ref) {
+  const variant = (0, import_react71.useContext)(TabsVariantContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     RadixTabs.Trigger,
     {
       ref,
@@ -4814,9 +5092,9 @@ var Tab = (0, import_react68.forwardRef)(function Tab2({ className, ...props },
   );
 });
 Tab.displayName = "Tab";
-var TabsContent = (0, import_react68.forwardRef)(
+var TabsContent = (0, import_react71.forwardRef)(
   function TabsContent2({ className, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       RadixTabs.Content,
       {
         ref,
@@ -4832,8 +5110,8 @@ var TabsContent = (0, import_react68.forwardRef)(
 TabsContent.displayName = "TabsContent";
 
 // src/patterns/Timeline/Timeline.tsx
-var import_react69 = require("react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_react72 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var ringClass = {
   accent: "border-accent",
   ok: "border-ok",
@@ -4841,8 +5119,8 @@ var ringClass = {
   err: "border-err",
   muted: "border-text-dim"
 };
-var Timeline = (0, import_react69.forwardRef)(function Timeline2({ events, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var Timeline = (0, import_react72.forwardRef)(function Timeline2({ events, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     "ol",
     {
       ref,
@@ -4852,14 +5130,14 @@ var Timeline = (0, import_react69.forwardRef)(function Timeline2({ events, class
         className
       ),
       ...props,
-      children: events ? events.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime65.jsx)(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
     }
   );
 });
 Timeline.displayName = "Timeline";
-var TimelineItem = (0, import_react69.forwardRef)(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var TimelineItem = (0, import_react72.forwardRef)(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       "span",
       {
         "aria-hidden": true,
@@ -4869,15 +5147,15 @@ var TimelineItem = (0, import_react69.forwardRef)(function TimelineItem2({ tone
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "text-[13px] font-medium", children }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "text-text-muted text-[12px]", children: description }),
-    time && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "text-[13px] font-medium", children }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "text-text-muted text-[12px]", children: description }),
+    time && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
   ] });
 });
 TimelineItem.displayName = "TimelineItem";
 
 // src/patterns/Timeline/ActivityTimeline.tsx
-var import_react70 = require("react");
+var import_react73 = require("react");
 
 // src/patterns/Timeline/formatRelative.ts
 var SECOND = 1e3;
@@ -4912,7 +5190,7 @@ function formatRelative(input, now = /* @__PURE__ */ new Date()) {
 }
 
 // src/patterns/Timeline/ActivityTimeline.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var ringClass2 = {
   accent: "border-accent",
   ok: "border-ok",
@@ -4920,10 +5198,10 @@ var ringClass2 = {
   err: "border-err",
   muted: "border-text-dim"
 };
-var ActivityTimeline = (0, import_react70.forwardRef)(
+var ActivityTimeline = (0, import_react73.forwardRef)(
   function ActivityTimeline2({ events, relativeNow, className, ...props }, ref) {
     const now = relativeNow ?? /* @__PURE__ */ new Date();
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "ol",
       {
         ref,
@@ -4936,8 +5214,8 @@ var ActivityTimeline = (0, import_react70.forwardRef)(
         children: events.map((event) => {
           const tone = event.tone ?? "accent";
           const time = formatRelative(event.at, now);
-          return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("li", { className: "relative mb-4 last:mb-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("li", { className: "relative mb-4 last:mb-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
               "span",
               {
                 "aria-hidden": true,
@@ -4947,16 +5225,16 @@ var ActivityTimeline = (0, import_react70.forwardRef)(
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-baseline gap-2", children: [
-              event.icon && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { "aria-hidden": true, className: "text-text-muted font-mono text-[12px]", children: event.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "text-[13px] font-medium", children: event.title }),
-              time && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("time", { className: "text-text-dim ml-auto font-mono text-[10px]", children: time })
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+              event.icon && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { "aria-hidden": true, className: "text-text-muted font-mono text-[12px]", children: event.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "text-[13px] font-medium", children: event.title }),
+              time && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("time", { className: "text-text-dim ml-auto font-mono text-[10px]", children: time })
             ] }),
-            event.actor && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "text-text-muted mt-[2px] flex items-center gap-[6px] text-[12px]", children: [
-              event.actor.avatar && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { "aria-hidden": true, className: "inline-flex", children: event.actor.avatar }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: event.actor.name })
+            event.actor && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "text-text-muted mt-[2px] flex items-center gap-[6px] text-[12px]", children: [
+              event.actor.avatar && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { "aria-hidden": true, className: "inline-flex", children: event.actor.avatar }),
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: event.actor.name })
             ] }),
-            event.payload && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "border-border bg-panel-2 mt-2 rounded-md border px-3 py-2 font-mono text-[11px] leading-[1.5]", children: event.payload })
+            event.payload && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "border-border bg-panel-2 mt-2 rounded-md border px-3 py-2 font-mono text-[11px] leading-[1.5]", children: event.payload })
           ] }, event.id);
         })
       }
@@ -4966,23 +5244,77 @@ var ActivityTimeline = (0, import_react70.forwardRef)(
 ActivityTimeline.displayName = "ActivityTimeline";
 
 // src/patterns/Topbar/Topbar.tsx
-var import_react71 = require("react");
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var Topbar = (0, import_react71.forwardRef)(function Topbar2({ title, leading, actions, className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+var import_react74 = require("react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var Topbar = (0, import_react74.forwardRef)(function Topbar2({
+  title,
+  eyebrow,
+  leading,
+  back,
+  onBack,
+  actions,
+  density = "comfortable",
+  className,
+  children,
+  ...props
+}, ref) {
+  const isTouch = density === "touch";
+  const backHandler = typeof back === "function" ? back : back ? onBack : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "header",
     {
       ref,
       className: cn(
-        "border-border bg-panel flex h-[52px] items-center gap-4 border-b px-5",
+        "border-border bg-panel flex items-center border-b",
+        isTouch ? "h-navbar gap-2 px-3" : "h-[52px] gap-4 px-5",
         className
       ),
       ...props,
       children: [
+        isTouch && back && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: backHandler,
+            "aria-label": "Back",
+            className: cn(
+              "text-text inline-grid place-items-center rounded-md bg-transparent",
+              // The back button is only rendered in touch density — use the
+              // touch token (44pt) instead of `h-9 w-9` (36px) so it meets the
+              // HIG minimum the rest of the touch surface enforces.
+              "hover:bg-panel-2 h-touch w-touch",
+              "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                "aria-hidden": true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "m15 18-6-6 6-6" })
+              }
+            )
+          }
+        ),
         leading,
-        title && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "text-[13px] font-medium", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex flex-1 items-center" }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex items-center gap-3", children: actions }),
+        (title || isTouch && eyebrow) && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: cn("min-w-0", isTouch && "flex-1"), children: [
+          isTouch && eyebrow && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "text-m-eyebrow text-accent font-mono tracking-wide uppercase", children: eyebrow }),
+          title && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            "div",
+            {
+              className: cn(
+                isTouch ? "text-m-body-lg truncate font-semibold tracking-tight" : "text-[13px] font-medium"
+              ),
+              children: title
+            }
+          )
+        ] }),
+        !isTouch && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex flex-1 items-center" }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: cn("flex items-center", isTouch ? "gap-1" : "gap-3"), children: actions }),
         children
       ]
     }
@@ -4991,8 +5323,8 @@ var Topbar = (0, import_react71.forwardRef)(function Topbar2({ title, leading, a
 Topbar.displayName = "Topbar";
 
 // src/patterns/Tree/Tree.tsx
-var import_react72 = require("react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_react75 = require("react");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var EMPTY_SET2 = /* @__PURE__ */ new Set();
 function flattenVisible(items, expanded, level, parentId, out) {
   for (const item of items) {
@@ -5003,7 +5335,7 @@ function flattenVisible(items, expanded, level, parentId, out) {
     }
   }
 }
-var Tree = (0, import_react72.forwardRef)(function Tree2({
+var Tree = (0, import_react75.forwardRef)(function Tree2({
   items,
   expanded: expandedProp,
   defaultExpanded,
@@ -5026,24 +5358,24 @@ var Tree = (0, import_react72.forwardRef)(function Tree2({
     onChange: onValueChange
   });
   const expandedSet = expanded ?? EMPTY_SET2;
-  const flatVisible = (0, import_react72.useMemo)(() => {
+  const flatVisible = (0, import_react75.useMemo)(() => {
     const out = [];
     flattenVisible(items, expandedSet, 1, null, out);
     return out;
   }, [items, expandedSet]);
-  const [activeId, setActiveId] = (0, import_react72.useState)(null);
-  (0, import_react72.useEffect)(() => {
+  const [activeId, setActiveId] = (0, import_react75.useState)(null);
+  (0, import_react75.useEffect)(() => {
     if (activeId && !flatVisible.some((f) => f.id === activeId)) {
       setActiveId(null);
     }
   }, [activeId, flatVisible]);
-  const tabStopId = (0, import_react72.useMemo)(() => {
+  const tabStopId = (0, import_react75.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_react72.useRef)(null);
-  const setRefs = (0, import_react72.useCallback)(
+  const listRef = (0, import_react75.useRef)(null);
+  const setRefs = (0, import_react75.useCallback)(
     (node) => {
       listRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -5051,20 +5383,20 @@ var Tree = (0, import_react72.forwardRef)(function Tree2({
     },
     [ref]
   );
-  const focusItem = (0, import_react72.useCallback)((id) => {
+  const focusItem = (0, import_react75.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_react72.useCallback)(
+  const moveActive = (0, import_react75.useCallback)(
     (id) => {
       setActiveId(id);
       queueMicrotask(() => focusItem(id));
     },
     [focusItem]
   );
-  const toggle = (0, import_react72.useCallback)(
+  const toggle = (0, import_react75.useCallback)(
     (id) => {
       setExpanded((prev) => {
         const next = new Set(prev ?? EMPTY_SET2);
@@ -5075,7 +5407,7 @@ var Tree = (0, import_react72.forwardRef)(function Tree2({
     },
     [setExpanded]
   );
-  const expand = (0, import_react72.useCallback)(
+  const expand = (0, import_react75.useCallback)(
     (id) => {
       setExpanded((prev) => {
         const base = prev ?? EMPTY_SET2;
@@ -5087,7 +5419,7 @@ var Tree = (0, import_react72.forwardRef)(function Tree2({
     },
     [setExpanded]
   );
-  const collapse = (0, import_react72.useCallback)(
+  const collapse = (0, import_react75.useCallback)(
     (id) => {
       setExpanded((prev) => {
         const base = prev ?? EMPTY_SET2;
@@ -5099,13 +5431,13 @@ var Tree = (0, import_react72.forwardRef)(function Tree2({
     },
     [setExpanded]
   );
-  const selectItem = (0, import_react72.useCallback)(
+  const selectItem = (0, import_react75.useCallback)(
     (id) => {
       setValue(id);
     },
     [setValue]
   );
-  const handleKeyDown = (0, import_react72.useCallback)(
+  const handleKeyDown = (0, import_react75.useCallback)(
     (e) => {
       onKeyDown?.(e);
       if (e.defaultPrevented) return;
@@ -5185,7 +5517,7 @@ var Tree = (0, import_react72.forwardRef)(function Tree2({
       toggle
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "ul",
     {
       ref: setRefs,
@@ -5193,7 +5525,7 @@ var Tree = (0, import_react72.forwardRef)(function Tree2({
       className: cn("flex flex-col gap-px text-[12px]", className),
       onKeyDown: handleKeyDown,
       ...props,
-      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         TreeItemRow,
         {
           item,
@@ -5228,8 +5560,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_runtime65.jsxs)("li", { role: "none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("li", { role: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "div",
       {
         role: "treeitem",
@@ -5252,14 +5584,14 @@ function TreeItemRow({
           isSelected ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.jsx)("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "flex-1 truncate", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.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_runtime68.jsx)("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "flex-1 truncate", children: item.label }),
           item.trailing
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       TreeItemRow,
       {
         item: child,
@@ -5278,9 +5610,9 @@ function TreeItemRow({
 
 // src/patterns/WizardDialog/WizardDialog.tsx
 var RadixDialog5 = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_react73 = require("react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var WizardDialog = (0, import_react73.forwardRef)(function WizardDialog2({
+var import_react76 = require("react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var WizardDialog = (0, import_react76.forwardRef)(function WizardDialog2({
   open,
   defaultOpen,
   onOpenChange,
@@ -5296,19 +5628,19 @@ var WizardDialog = (0, import_react73.forwardRef)(function WizardDialog2({
   cancelLabel,
   onCancel
 }, ref) {
-  const [current, setCurrent] = (0, import_react73.useState)(initialStep);
+  const [current, setCurrent] = (0, import_react76.useState)(initialStep);
   const total = steps.length;
   const safeCurrent = Math.min(current, Math.max(0, total - 1));
   const step = steps[safeCurrent];
-  const goTo = (0, import_react73.useCallback)(
+  const goTo = (0, import_react76.useCallback)(
     (index) => {
       setCurrent(Math.min(Math.max(0, index), Math.max(0, total - 1)));
     },
     [total]
   );
-  const goNext = (0, import_react73.useCallback)(() => setCurrent((c) => Math.min(c + 1, total - 1)), [total]);
-  const goBack = (0, import_react73.useCallback)(() => setCurrent((c) => Math.max(c - 1, 0)), []);
-  const ctx = (0, import_react73.useMemo)(
+  const goNext = (0, import_react76.useCallback)(() => setCurrent((c) => Math.min(c + 1, total - 1)), [total]);
+  const goBack = (0, import_react76.useCallback)(() => setCurrent((c) => Math.max(c - 1, 0)), []);
+  const ctx = (0, import_react76.useMemo)(
     () => ({
       current: safeCurrent,
       total,
@@ -5320,7 +5652,7 @@ var WizardDialog = (0, import_react73.forwardRef)(function WizardDialog2({
     }),
     [safeCurrent, total, goNext, goBack, goTo]
   );
-  const stepperSteps = (0, import_react73.useMemo)(() => steps.map((s) => ({ id: s.id, label: s.label })), [steps]);
+  const stepperSteps = (0, import_react76.useMemo)(() => steps.map((s) => ({ id: s.id, label: s.label })), [steps]);
   if (!step) return null;
   const canAdvance = step.canAdvance ? step.canAdvance(ctx) : true;
   const body = typeof step.content === "function" ? step.content(ctx) : step.content;
@@ -5331,23 +5663,23 @@ var WizardDialog = (0, import_react73.forwardRef)(function WizardDialog2({
       goNext();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DialogContent, { ref, width, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(WizardTitle, { children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(WizardDescription, { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "mb-5", children: body }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex justify-end gap-2", children: [
-      cancelLabel && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(DialogContent, { ref, width, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(WizardTitle, { children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(WizardDescription, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-5", children: body }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex justify-end gap-2", children: [
+      cancelLabel && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
     ] })
   ] }) });
 });
 function WizardTitle({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RadixDialog5.Title, { className: "mb-2 text-[16px] font-medium", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RadixDialog5.Title, { className: "mb-2 text-[16px] font-medium", children });
 }
 function WizardDescription({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RadixDialog5.Description, { className: "text-text-muted mb-4 text-[13px] leading-[1.55]", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RadixDialog5.Description, { className: "text-text-muted mb-4 text-[13px] leading-[1.55]", children });
 }
 WizardDialog.displayName = "WizardDialog";
 // Annotate the CommonJS export names for ESM import in node:
@@ -5415,6 +5747,7 @@ WizardDialog.displayName = "WizardDialog";
   IconButton,
   Input,
   Kbd,
+  LargeTitle,
   MenuCheckboxItem,
   MenuItem,
   MenuSeparator,
@@ -5439,6 +5772,7 @@ WizardDialog.displayName = "WizardDialog";
   PopoverRoot,
   PopoverTrigger,
   Progress,
+  PullToRefresh,
   RadialProgress,
   Radio,
   RadioGroup,
@@ -5454,6 +5788,7 @@ WizardDialog.displayName = "WizardDialog";
   SelectValue,
   Sheet,
   Sidebar,
+  SimpleTooltip,
   Skeleton,
   SkeletonGroup,
   Slider,
@@ -5465,6 +5800,7 @@ WizardDialog.displayName = "WizardDialog";
   Stepper,
   Switch,
   Tab,
+  TabBar,
   Tabs,
   TabsContent,
   TabsList,
@@ -5479,7 +5815,6 @@ WizardDialog.displayName = "WizardDialog";
   TooltipContent,
   TooltipPortal,
   TooltipProvider,
-  TooltipRoot,
   TooltipTrigger,
   Topbar,
   Tree,