@ship-it-ui/ui 0.0.3 → 0.0.5

package/dist/index.js

@@ -201,14 +201,29 @@ var buttonStyles = 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
     }
   }
@@ -223,10 +238,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 = forwardRef(function Button2({
   variant,
   size,
+  density,
   fullWidth,
   icon,
   trailing,
@@ -239,8 +258,8 @@ var Button = 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__ */ jsx(
       Slot,
@@ -301,18 +320,28 @@ var iconButtonStyles = cva2(
         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 = forwardRef2(function IconButton2({ variant, size, icon, type, className, ...props }, ref) {
+var IconButton = forwardRef2(function IconButton2({ variant, size, density, icon, type, className, ...props }, ref) {
   return /* @__PURE__ */ jsx2(
     "button",
     {
       ref,
       type: type ?? "button",
-      className: cn(iconButtonStyles({ variant, size }), className),
+      className: cn(iconButtonStyles({ variant, size, density }), className),
       ...props,
       children: icon
     }
@@ -432,14 +461,16 @@ FAB.displayName = "FAB";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
 import { forwardRef as forwardRef6, useId } from "react";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var Checkbox = forwardRef6(function Checkbox2({ label, className, id: idProp, ...props }, ref) {
+var Checkbox = forwardRef6(function Checkbox2({ label, density = "comfortable", className, id: idProp, ...props }, ref) {
   const reactId = useId();
   const id = idProp ?? `cb-${reactId}`;
+  const isTouch = density === "touch";
   return /* @__PURE__ */ jsxs3(
     "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
       ),
@@ -450,18 +481,32 @@ var Checkbox = forwardRef6(function Checkbox2({ label, className, id: idProp, ..
             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__ */ jsx6(RadixCheckbox.Indicator, { className: "text-on-accent text-[11px] leading-none", children: props.checked === "indeterminate" ? "\u2212" : "\u2713" })
+            children: /* @__PURE__ */ jsx6(
+              RadixCheckbox.Indicator,
+              {
+                className: cn("text-on-accent leading-none", isTouch ? "text-[14px]" : "text-[11px]"),
+                children: props.checked === "indeterminate" ? "\u2212" : "\u2713"
+              }
+            )
           }
         ),
-        label && /* @__PURE__ */ jsx6("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+        label && /* @__PURE__ */ jsx6(
+          "label",
+          {
+            htmlFor: id,
+            className: cn("cursor-pointer", isTouch ? "text-m-body" : "text-[13px]"),
+            children: label
+          }
+        )
       ]
     }
   );
@@ -512,17 +557,28 @@ var inputWrapperStyles = cva3(
       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 = forwardRef7(function Input2({ size, tone, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
+var Input = forwardRef7(function Input2({ size, tone, density, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
   const computedTone = error ? "err" : tone;
   return /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: cn(inputWrapperStyles({ size, tone: computedTone }), className),
+      className: cn(inputWrapperStyles({ size, tone: computedTone, density }), className),
       style: { width, ...style },
       children: [
         icon && /* @__PURE__ */ jsx8("span", { className: "text-text-dim leading-none", children: icon }),
@@ -551,27 +607,32 @@ Input.displayName = "Input";
 import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var SearchInput = forwardRef8(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__ */ jsxs6(
     "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__ */ jsx9("span", { className: "text-text-dim leading-none", "aria-hidden": true, children: "\u2315" }),
+        /* @__PURE__ */ jsx9("span", { className: cn("text-text-dim leading-none", isTouch && "text-[18px]"), "aria-hidden": true, children: "\u2315" }),
         /* @__PURE__ */ jsx9(
           "input",
           {
@@ -579,11 +640,14 @@ var SearchInput = forwardRef8(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__ */ jsx9("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: shortcut })
+        resolvedShortcut && /* @__PURE__ */ jsx9("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: resolvedShortcut })
       ]
     }
   );
@@ -917,14 +981,26 @@ import * as RadixSwitch from "@radix-ui/react-switch";
 import { forwardRef as forwardRef13, useId as useId5 } from "react";
 import { jsx as jsx14, jsxs as jsxs11 } from "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 = forwardRef13(function Switch2({ label, size = "md", className, id: idProp, ...props }, ref) {
+var Switch = forwardRef13(function Switch2({ label, size = "md", density = "comfortable", className, id: idProp, ...props }, ref) {
   const reactId = useId5();
   const id = idProp ?? `sw-${reactId}`;
   return /* @__PURE__ */ jsxs11(
@@ -946,7 +1022,7 @@ var Switch = forwardRef13(function Switch2({ label, size = "md", className, id:
               "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__ */ jsx14(
@@ -955,13 +1031,20 @@ var Switch = forwardRef13(function Switch2({ label, size = "md", className, id:
                 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__ */ jsx14("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+        label && /* @__PURE__ */ jsx14(
+          "label",
+          {
+            htmlFor: id,
+            className: cn("cursor-pointer", density === "touch" ? "text-m-body" : "text-[13px]"),
+            children: label
+          }
+        )
       ]
     }
   );
@@ -1229,7 +1312,7 @@ import { cva as cva6 } from "class-variance-authority";
 import { forwardRef as forwardRef19 } from "react";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var cardStyles = cva6(
-  "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: {
@@ -1240,14 +1323,19 @@ var cardStyles = cva6(
       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 = forwardRef19(function Card2({
   variant,
   interactive,
+  density,
   title,
   description,
   actions,
@@ -1284,7 +1372,11 @@ var Card = forwardRef19(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__ */ jsxs16("div", { className: cn("flex items-start gap-3", (description || children) && "mb-[10px]"), children: [
@@ -1299,15 +1391,16 @@ var Card = forwardRef19(function Card2({
   );
 });
 Card.displayName = "Card";
-var CardLink = forwardRef19(function CardLink2({ variant, title, description, footer, className, children, href, ...props }, ref) {
+var CardLink = forwardRef19(function CardLink2({ variant, density, title, description, footer, className, children, href, ...props }, ref) {
   return /* @__PURE__ */ jsxs16(
     "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,
@@ -1358,19 +1451,21 @@ StatCard.displayName = "StatCard";
 // src/components/Chip/Chip.tsx
 import { forwardRef as forwardRef21 } from "react";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
-var Chip = forwardRef21(function Chip2({ icon, onRemove, className, children, ...props }, ref) {
+var Chip = forwardRef21(function Chip2({ icon, onRemove, density = "comfortable", className, children, ...props }, ref) {
+  const isTouch = density === "touch";
   return /* @__PURE__ */ jsxs18(
     "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__ */ jsx22("span", { className: "text-text-dim inline-flex text-[10px]", children: icon }),
+        icon && /* @__PURE__ */ jsx22("span", { className: cn("text-text-dim inline-flex", isTouch ? "text-[12px]" : "text-[10px]"), children: icon }),
         children,
         onRemove && /* @__PURE__ */ jsx22(
           "button",
@@ -1378,7 +1473,10 @@ var Chip = forwardRef21(function Chip2({ icon, onRemove, className, children, ..
             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"
           }
         )
@@ -1409,10 +1507,71 @@ var Kbd = forwardRef22(function Kbd2({ className, children, ...props }, ref) {
 });
 Kbd.displayName = "Kbd";
 
+// src/components/ScrollArea/ScrollArea.tsx
+import * as RadixScrollArea from "@radix-ui/react-scroll-area";
+import { forwardRef as forwardRef23 } from "react";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+var scrollbarBase = "flex touch-none select-none p-[2px] transition-colors duration-(--duration-micro)";
+var thumbBase = 'relative flex-1 rounded-full bg-text-muted/40 hover:bg-text-muted/60 before:absolute before:inset-1/2 before:size-full before:min-h-[44px] before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-[""]';
+var ScrollArea = forwardRef23(function ScrollArea2({
+  type = "hover",
+  orientation = "vertical",
+  scrollHideDelay = 600,
+  className,
+  viewportClassName,
+  viewportRef,
+  children,
+  ...props
+}, ref) {
+  const showVertical = orientation === "vertical" || orientation === "both";
+  const showHorizontal = orientation === "horizontal" || orientation === "both";
+  return /* @__PURE__ */ jsxs19(
+    RadixScrollArea.Root,
+    {
+      ref,
+      type,
+      scrollHideDelay,
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx24(
+          RadixScrollArea.Viewport,
+          {
+            ref: viewportRef,
+            className: cn("h-full w-full rounded-[inherit]", viewportClassName),
+            children
+          }
+        ),
+        showVertical && /* @__PURE__ */ jsx24(
+          RadixScrollArea.Scrollbar,
+          {
+            orientation: "vertical",
+            className: cn(scrollbarBase, "bg-panel-2/40 hover:bg-panel-2/80 h-full w-[10px]"),
+            children: /* @__PURE__ */ jsx24(RadixScrollArea.Thumb, { className: thumbBase })
+          }
+        ),
+        showHorizontal && /* @__PURE__ */ jsx24(
+          RadixScrollArea.Scrollbar,
+          {
+            orientation: "horizontal",
+            className: cn(
+              scrollbarBase,
+              "bg-panel-2/40 hover:bg-panel-2/80 h-[10px] w-full flex-col"
+            ),
+            children: /* @__PURE__ */ jsx24(RadixScrollArea.Thumb, { className: thumbBase })
+          }
+        ),
+        orientation === "both" && /* @__PURE__ */ jsx24(RadixScrollArea.Corner, { className: "bg-panel-2/60" })
+      ]
+    }
+  );
+});
+ScrollArea.displayName = "ScrollArea";
+
 // src/components/Skeleton/Skeleton.tsx
 import { cva as cva7 } from "class-variance-authority";
-import { forwardRef as forwardRef23 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var skeletonStyles = cva7("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite]", {
   variants: {
     shape: {
@@ -1424,11 +1583,11 @@ var skeletonStyles = cva7("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite
   defaultVariants: { shape: "line" }
 });
 var defaultHeight = { line: 14, block: 80, circle: 40 };
-var Skeleton = forwardRef23(function Skeleton2({ shape = "line", width = "100%", height, standalone = false, className, style, ...props }, ref) {
+var Skeleton = forwardRef24(function Skeleton2({ shape = "line", width = "100%", height, standalone = false, className, style, ...props }, ref) {
   const h = height ?? defaultHeight[shape];
   const w = shape === "circle" ? h : width;
   const a11yProps = standalone ? { role: "status", "aria-busy": true, "aria-label": "Loading" } : { "aria-hidden": true };
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ref,
@@ -1440,11 +1599,11 @@ var Skeleton = forwardRef23(function Skeleton2({ shape = "line", width = "100%",
   );
 });
 Skeleton.displayName = "Skeleton";
-var SkeletonGroup = forwardRef23(function SkeletonGroup2({ label = "Loading", loading = true, className, children, ...props }, ref) {
+var SkeletonGroup = forwardRef24(function SkeletonGroup2({ label = "Loading", loading = true, className, children, ...props }, ref) {
   if (!loading) {
-    return /* @__PURE__ */ jsx24("div", { ref, className, ...props, children });
+    return /* @__PURE__ */ jsx25("div", { ref, className, ...props, children });
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ref,
@@ -1460,10 +1619,10 @@ var SkeletonGroup = forwardRef23(function SkeletonGroup2({ label = "Loading", lo
 SkeletonGroup.displayName = "SkeletonGroup";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef24 } from "react";
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
-var Tag = forwardRef24(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs19(
+import { forwardRef as forwardRef25 } from "react";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+var Tag = forwardRef25(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs20(
     "span",
     {
       ref,
@@ -1475,9 +1634,9 @@ var Tag = forwardRef24(function Tag2({ onRemove, icon, size = 22, className, chi
       style: { height: size },
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx25("span", { className: "text-text-dim inline-flex", children: icon }),
+        icon && /* @__PURE__ */ jsx26("span", { className: "text-text-dim inline-flex", children: icon }),
         children,
-        onRemove && /* @__PURE__ */ jsx25(
+        onRemove && /* @__PURE__ */ jsx26(
           "button",
           {
             type: "button",
@@ -1495,14 +1654,14 @@ Tag.displayName = "Tag";
 
 // src/components/ContextMenu/ContextMenu.tsx
 import * as RadixContext from "@radix-ui/react-context-menu";
-import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { forwardRef as forwardRef26 } from "react";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var ContextMenuRoot = RadixContext.Root;
 var ContextMenuTrigger = RadixContext.Trigger;
 var ContextMenuPortal = RadixContext.Portal;
-var ContextMenuContent = forwardRef25(
+var ContextMenuContent = forwardRef26(
   function ContextMenuContent2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx26(RadixContext.Portal, { children: /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(RadixContext.Portal, { children: /* @__PURE__ */ jsx27(
       RadixContext.Content,
       {
         ref,
@@ -1522,26 +1681,26 @@ var itemBase = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var ContextMenuItem = forwardRef25(
+var ContextMenuItem = forwardRef26(
   function ContextMenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21(
       RadixContext.Item,
       {
         ref,
         className: cn(itemBase, destructive ? "text-err" : "text-text", className),
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsx26("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
-          /* @__PURE__ */ jsx26("span", { className: "flex-1", children }),
-          trailing && /* @__PURE__ */ jsx26("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+          icon && /* @__PURE__ */ jsx27("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
+          /* @__PURE__ */ jsx27("span", { className: "flex-1", children }),
+          trailing && /* @__PURE__ */ jsx27("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
         ]
       }
     );
   }
 );
 ContextMenuItem.displayName = "ContextMenuItem";
-var ContextMenuSeparator = forwardRef25(function ContextMenuSeparator2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx26(
+var ContextMenuSeparator = forwardRef26(function ContextMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx27(
     RadixContext.Separator,
     {
       ref,
@@ -1555,15 +1714,15 @@ var ContextMenu = RadixContext.Root;
 
 // src/components/Dialog/Dialog.tsx
 import * as RadixDialog from "@radix-ui/react-dialog";
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { forwardRef as forwardRef27 } from "react";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var DialogRoot = RadixDialog.Root;
 var DialogTrigger = RadixDialog.Trigger;
 var DialogClose = RadixDialog.Close;
 var DialogPortal = RadixDialog.Portal;
-var DialogOverlay = forwardRef26(
+var DialogOverlay = forwardRef27(
   function DialogOverlay2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       RadixDialog.Overlay,
       {
         ref,
@@ -1578,10 +1737,10 @@ var DialogOverlay = forwardRef26(
   }
 );
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = forwardRef26(function DialogContent2({ className, width = 460, style, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs21(DialogPortal, { children: [
-    /* @__PURE__ */ jsx27(DialogOverlay, {}),
-    /* @__PURE__ */ jsx27(
+var DialogContent = forwardRef27(function DialogContent2({ className, width = 460, style, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs22(DialogPortal, { children: [
+    /* @__PURE__ */ jsx28(DialogOverlay, {}),
+    /* @__PURE__ */ jsx28(
       RadixDialog.Content,
       {
         ref,
@@ -1601,31 +1760,32 @@ var DialogContent = forwardRef26(function DialogContent2({ className, width = 46
 });
 DialogContent.displayName = "DialogContent";
 function Dialog({ title, description, footer, width, children, ...rootProps }) {
-  return /* @__PURE__ */ jsx27(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs21(DialogContent, { width, children: [
-    title && /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs22(DialogContent, { width, children: [
+    title && /* @__PURE__ */ jsx28(
       RadixDialog.Title,
       {
         className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
         children: title
       }
     ),
-    description && /* @__PURE__ */ jsx27(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+    description && /* @__PURE__ */ jsx28(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
     children,
-    footer && /* @__PURE__ */ jsx27("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+    footer && /* @__PURE__ */ jsx28("div", { className: "mt-5 flex justify-end gap-2", children: footer })
   ] }) });
 }
 
 // src/components/Dialog/Drawer.tsx
 import * as RadixDialog2 from "@radix-ui/react-dialog";
-import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx29, jsxs as jsxs23 } from "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__ */ jsxs22("div", { className: "border-border flex items-center justify-between border-b p-[16px] px-5", children: [
-  /* @__PURE__ */ jsx28(RadixDialog2.Title, { className: "text-[14px] font-medium", children: title }),
-  /* @__PURE__ */ jsx28(
+var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ jsxs23("div", { className: "border-border flex items-center justify-between border-b p-[16px] px-5", children: [
+  /* @__PURE__ */ jsx29(RadixDialog2.Title, { className: "text-[14px] font-medium", children: title }),
+  /* @__PURE__ */ jsx29(
     RadixDialog2.Close,
     {
       onClick: onClose,
@@ -1635,22 +1795,28 @@ var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ jsxs22("div", { class
     }
   )
 ] });
-var Drawer = forwardRef27(function Drawer2({ side = "right", title, width = 420, children, ...rootProps }, ref) {
-  return /* @__PURE__ */ jsx28(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs22(DialogPortal, { children: [
-    /* @__PURE__ */ jsx28(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs22(
+var SheetHeader = ({ title }) => /* @__PURE__ */ jsx29("div", { className: "px-5 pb-3", children: /* @__PURE__ */ jsx29(RadixDialog2.Title, { className: "text-m-body-lg font-semibold tracking-tight", children: title }) });
+var DragHandle = () => /* @__PURE__ */ jsx29("div", { className: "flex justify-center pt-3 pb-2", "aria-hidden": true, children: /* @__PURE__ */ jsx29("span", { className: "bg-border-strong h-1 w-9 rounded-full" }) });
+var Drawer = forwardRef28(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__ */ jsx29(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs23(DialogPortal, { children: [
+    /* @__PURE__ */ jsx29(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs23(
       RadixDialog2.Content,
       {
         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__ */ jsx28(DrawerHeader, { title }) : /* @__PURE__ */ jsx28(RadixDialog2.Title, { className: "sr-only", children: "Drawer" }),
-          /* @__PURE__ */ jsx28("div", { className: "flex-1 overflow-auto p-5", children })
+          showHandle && /* @__PURE__ */ jsx29(DragHandle, {}),
+          title ? isBottom ? /* @__PURE__ */ jsx29(SheetHeader, { title }) : /* @__PURE__ */ jsx29(DrawerHeader, { title }) : /* @__PURE__ */ jsx29(RadixDialog2.Title, { className: "sr-only", children: isBottom ? "Sheet" : "Drawer" }),
+          /* @__PURE__ */ jsx29("div", { className: cn("flex-1 overflow-auto", isBottom ? "px-5 pb-6" : "p-5"), children })
         ]
       }
     )
@@ -1660,12 +1826,12 @@ Drawer.displayName = "Drawer";
 
 // src/components/Dialog/Sheet.tsx
 import * as RadixDialog3 from "@radix-ui/react-dialog";
-import { forwardRef as forwardRef28 } from "react";
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
-var Sheet = forwardRef28(function Sheet2({ title, width = "min(640px, 90vw)", children, ...rootProps }, ref) {
-  return /* @__PURE__ */ jsx29(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs23(DialogPortal, { children: [
-    /* @__PURE__ */ jsx29(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs23(
+import { forwardRef as forwardRef29 } from "react";
+import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+var Sheet = forwardRef29(function Sheet2({ title, width = "min(640px, 90vw)", children, ...rootProps }, ref) {
+  return /* @__PURE__ */ jsx30(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs24(DialogPortal, { children: [
+    /* @__PURE__ */ jsx30(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs24(
       RadixDialog3.Content,
       {
         ref,
@@ -1677,7 +1843,7 @@ var Sheet = forwardRef28(function Sheet2({ title, width = "min(640px, 90vw)", ch
         ),
         style: { width },
         children: [
-          title ? /* @__PURE__ */ jsx29(RadixDialog3.Title, { className: "mb-1 text-[15px] font-medium", children: title }) : /* @__PURE__ */ jsx29(RadixDialog3.Title, { className: "sr-only", children: "Sheet" }),
+          title ? /* @__PURE__ */ jsx30(RadixDialog3.Title, { className: "mb-1 text-[15px] font-medium", children: title }) : /* @__PURE__ */ jsx30(RadixDialog3.Title, { className: "sr-only", children: "Sheet" }),
           children
         ]
       }
@@ -1688,15 +1854,15 @@ Sheet.displayName = "Sheet";
 
 // src/components/Dialog/AlertDialog.tsx
 import * as RadixAlert from "@radix-ui/react-alert-dialog";
-import { forwardRef as forwardRef29 } from "react";
-import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var AlertDialogRoot = RadixAlert.Root;
 var AlertDialogTrigger = RadixAlert.Trigger;
 var AlertDialogAction = RadixAlert.Action;
 var AlertDialogCancel = RadixAlert.Cancel;
-var AlertDialog = forwardRef29(function AlertDialog2({ title, description, footer, width = 460, children, ...rootProps }, ref) {
-  return /* @__PURE__ */ jsx30(AlertDialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs24(RadixAlert.Portal, { children: [
-    /* @__PURE__ */ jsx30(
+var AlertDialog = forwardRef30(function AlertDialog2({ title, description, footer, width = 460, children, ...rootProps }, ref) {
+  return /* @__PURE__ */ jsx31(AlertDialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs25(RadixAlert.Portal, { children: [
+    /* @__PURE__ */ jsx31(
       RadixAlert.Overlay,
       {
         className: cn(
@@ -1705,7 +1871,7 @@ var AlertDialog = forwardRef29(function AlertDialog2({ title, description, foote
         )
       }
     ),
-    /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsxs25(
       RadixAlert.Content,
       {
         ref,
@@ -1716,16 +1882,16 @@ var AlertDialog = forwardRef29(function AlertDialog2({ title, description, foote
           "data-[state=open]:animate-[ship-dialog-in_180ms_var(--easing-out)]"
         ),
         children: [
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             RadixAlert.Title,
             {
               className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
               children: title
             }
           ),
-          description && /* @__PURE__ */ jsx30(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+          description && /* @__PURE__ */ jsx31(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
           children,
-          footer && /* @__PURE__ */ jsx30("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+          footer && /* @__PURE__ */ jsx31("div", { className: "mt-5 flex justify-end gap-2", children: footer })
         ]
       }
     )
@@ -1735,17 +1901,17 @@ AlertDialog.displayName = "AlertDialog";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 import * as RadixMenu from "@radix-ui/react-dropdown-menu";
-import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var DropdownMenuRoot = RadixMenu.Root;
 var DropdownMenuTrigger = RadixMenu.Trigger;
 var DropdownMenuPortal = RadixMenu.Portal;
 var DropdownMenuGroup = RadixMenu.Group;
 var DropdownMenuLabel = RadixMenu.Label;
 var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
-var DropdownMenuContent = forwardRef30(
+var DropdownMenuContent = forwardRef31(
   function DropdownMenuContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
-    return /* @__PURE__ */ jsx31(RadixMenu.Portal, { children: /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(RadixMenu.Portal, { children: /* @__PURE__ */ jsx32(
       RadixMenu.Content,
       {
         ref,
@@ -1767,32 +1933,32 @@ var itemBase2 = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var MenuItem = forwardRef30(function MenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs25(
+var MenuItem = forwardRef31(function MenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs26(
     RadixMenu.Item,
     {
       ref,
       className: cn(itemBase2, destructive ? "text-err" : "text-text", className),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx31("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
-        /* @__PURE__ */ jsx31("span", { className: "flex-1", children }),
-        trailing && /* @__PURE__ */ jsx31("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+        icon && /* @__PURE__ */ jsx32("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
+        /* @__PURE__ */ jsx32("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ jsx32("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
       ]
     }
   );
 });
 MenuItem.displayName = "MenuItem";
-var MenuCheckboxItem = forwardRef30(
+var MenuCheckboxItem = forwardRef31(
   function MenuCheckboxItem2({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs26(
       RadixMenu.CheckboxItem,
       {
         ref,
         className: cn(itemBase2, "text-text relative pl-[26px]", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx31(RadixMenu.ItemIndicator, { className: "text-accent absolute top-1/2 left-2 -translate-y-1/2 text-[10px]", children: "\u2713" }),
+          /* @__PURE__ */ jsx32(RadixMenu.ItemIndicator, { className: "text-accent absolute top-1/2 left-2 -translate-y-1/2 text-[10px]", children: "\u2713" }),
           children
         ]
       }
@@ -1800,9 +1966,9 @@ var MenuCheckboxItem = forwardRef30(
   }
 );
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
-var MenuSeparator = forwardRef30(
+var MenuSeparator = forwardRef31(
   function MenuSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(
       RadixMenu.Separator,
       {
         ref,
@@ -1817,14 +1983,14 @@ var DropdownMenu = RadixMenu.Root;
 
 // src/components/HoverCard/HoverCard.tsx
 import * as RadixHoverCard from "@radix-ui/react-hover-card";
-import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { forwardRef as forwardRef32 } from "react";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 var HoverCardRoot = RadixHoverCard.Root;
 var HoverCardTrigger = RadixHoverCard.Trigger;
 var HoverCardPortal = RadixHoverCard.Portal;
-var HoverCardContent = forwardRef31(
+var HoverCardContent = forwardRef32(
   function HoverCardContent2({ className, sideOffset = 4, ...props }, ref) {
-    return /* @__PURE__ */ jsx32(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx33(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx33(
       RadixHoverCard.Content,
       {
         ref,
@@ -1841,25 +2007,25 @@ var HoverCardContent = forwardRef31(
 );
 HoverCardContent.displayName = "HoverCardContent";
 function HoverCard({ trigger, content, ...rootProps }) {
-  return /* @__PURE__ */ jsxs26(RadixHoverCard.Root, { openDelay: 200, closeDelay: 120, ...rootProps, children: [
-    /* @__PURE__ */ jsx32(RadixHoverCard.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx32(HoverCardContent, { children: content })
+  return /* @__PURE__ */ jsxs27(RadixHoverCard.Root, { openDelay: 200, closeDelay: 120, ...rootProps, children: [
+    /* @__PURE__ */ jsx33(RadixHoverCard.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx33(HoverCardContent, { children: content })
   ] });
 }
 
 // src/components/Popover/Popover.tsx
 import * as RadixPopover from "@radix-ui/react-popover";
-import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { forwardRef as forwardRef33 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var PopoverRoot = RadixPopover.Root;
 var PopoverTrigger = RadixPopover.Trigger;
 var PopoverAnchor = RadixPopover.Anchor;
 var PopoverPortal = RadixPopover.Portal;
 var PopoverClose = RadixPopover.Close;
 var PopoverArrow = RadixPopover.Arrow;
-var PopoverContent = forwardRef32(
+var PopoverContent = forwardRef33(
   function PopoverContent2({ className, align = "start", sideOffset = 6, ...props }, ref) {
-    return /* @__PURE__ */ jsx33(RadixPopover.Portal, { children: /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(RadixPopover.Portal, { children: /* @__PURE__ */ jsx34(
       RadixPopover.Content,
       {
         ref,
@@ -1882,13 +2048,13 @@ var Popover = RadixPopover.Root;
 import * as RadixToast from "@radix-ui/react-toast";
 import {
   createContext,
-  forwardRef as forwardRef33,
+  forwardRef as forwardRef34,
   useCallback as useCallback6,
   useContext,
   useMemo,
   useState as useState7
 } from "react";
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
 var ToastContext = createContext(null);
 var variantIcon = {
   default: "\u25CF",
@@ -1931,10 +2097,10 @@ function ToastProvider({ children }) {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
-  return /* @__PURE__ */ jsx34(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs27(RadixToast.Provider, { swipeDirection: "right", children: [
+  return /* @__PURE__ */ jsx35(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs28(RadixToast.Provider, { swipeDirection: "right", children: [
     children,
-    toasts.map((t) => /* @__PURE__ */ jsx34(ToastCard, { toast: t, onDismiss: () => dismiss(t.id) }, t.id)),
-    /* @__PURE__ */ jsx34(RadixToast.Viewport, { className: "z-toast fixed right-5 bottom-5 flex w-[380px] max-w-[calc(100vw-40px)] flex-col gap-2 outline-none" })
+    toasts.map((t) => /* @__PURE__ */ jsx35(ToastCard, { toast: t, onDismiss: () => dismiss(t.id) }, t.id)),
+    /* @__PURE__ */ jsx35(RadixToast.Viewport, { className: "z-toast fixed right-5 bottom-5 flex w-[380px] max-w-[calc(100vw-40px)] flex-col gap-2 outline-none" })
   ] }) });
 }
 function useToast() {
@@ -1942,9 +2108,9 @@ function useToast() {
   if (!ctx) throw new Error("useToast must be inside <ToastProvider>");
   return ctx;
 }
-var ToastCard = forwardRef33(function ToastCard2({ toast, onDismiss }, ref) {
+var ToastCard = forwardRef34(function ToastCard2({ toast, onDismiss }, ref) {
   const variant = toast.variant ?? "default";
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     RadixToast.Root,
     {
       ref,
@@ -1959,13 +2125,13 @@ var ToastCard = forwardRef33(function ToastCard2({ toast, onDismiss }, ref) {
         variantBorderLeft[variant]
       ),
       children: [
-        /* @__PURE__ */ jsx34("span", { className: cn("mt-px text-[14px] leading-none", variantTextColor[variant]), children: variantIcon[variant] }),
-        /* @__PURE__ */ jsxs27("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx34(RadixToast.Title, { className: "text-text text-[13px] font-medium", children: toast.title }),
-          toast.description && /* @__PURE__ */ jsx34(RadixToast.Description, { className: "text-text-muted mt-[2px] text-[12px] leading-[1.5]", children: toast.description }),
-          toast.action && /* @__PURE__ */ jsx34("div", { className: "mt-2", children: toast.action })
+        /* @__PURE__ */ jsx35("span", { className: cn("mt-px text-[14px] leading-none", variantTextColor[variant]), children: variantIcon[variant] }),
+        /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx35(RadixToast.Title, { className: "text-text text-[13px] font-medium", children: toast.title }),
+          toast.description && /* @__PURE__ */ jsx35(RadixToast.Description, { className: "text-text-muted mt-[2px] text-[12px] leading-[1.5]", children: toast.description }),
+          toast.action && /* @__PURE__ */ jsx35("div", { className: "mt-2", children: toast.action })
         ] }),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           RadixToast.Close,
           {
             "aria-label": "Dismiss",
@@ -1981,16 +2147,16 @@ ToastCard.displayName = "ToastCard";
 
 // src/components/Tooltip/Tooltip.tsx
 import * as RadixTooltip from "@radix-ui/react-tooltip";
-import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
 var TooltipProvider = RadixTooltip.Provider;
 var TooltipRoot = RadixTooltip.Root;
 var TooltipTrigger = RadixTooltip.Trigger;
 var TooltipPortal = RadixTooltip.Portal;
 var TooltipArrow = RadixTooltip.Arrow;
-var TooltipContent = forwardRef34(
+var TooltipContent = forwardRef35(
   function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
-    return /* @__PURE__ */ jsx35(RadixTooltip.Portal, { children: /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(RadixTooltip.Portal, { children: /* @__PURE__ */ jsx36(
       RadixTooltip.Content,
       {
         ref,
@@ -2008,16 +2174,16 @@ var TooltipContent = forwardRef34(
 );
 TooltipContent.displayName = "TooltipContent";
 function Tooltip({ content, children, side = "top", delayDuration = 400 }) {
-  return /* @__PURE__ */ jsx35(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs28(TooltipRoot, { children: [
-    /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx35(TooltipContent, { side, children: content })
+  return /* @__PURE__ */ jsx36(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs29(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx36(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx36(TooltipContent, { side, children: content })
   ] }) });
 }
 
 // src/patterns/Alert/Alert.tsx
 import { cva as cva8 } from "class-variance-authority";
-import { forwardRef as forwardRef35 } from "react";
-import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+import { forwardRef as forwardRef36 } from "react";
+import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
 var alertStyles = cva8("flex items-start gap-3 rounded-base border bg-panel p-3 text-[13px]", {
   variants: {
     tone: {
@@ -2041,7 +2207,7 @@ var defaultGlyph = {
   warn: "!",
   err: "\xD7"
 };
-var Alert = forwardRef35(function Alert2({
+var Alert = forwardRef36(function Alert2({
   tone = "accent",
   title,
   description,
@@ -2053,7 +2219,7 @@ var Alert = forwardRef35(function Alert2({
   ...props
 }, ref) {
   const t = tone ?? "accent";
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       ref,
@@ -2062,13 +2228,13 @@ var Alert = forwardRef35(function Alert2({
       className: cn(alertStyles({ tone }), className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx36("span", { "aria-hidden": true, className: cn("mt-[1px] text-[14px] leading-none", iconColorClass[t]), children: icon ?? defaultGlyph[t] }),
-        /* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex-1", children: [
-          title && /* @__PURE__ */ jsx36("div", { className: "font-medium", children: title }),
-          description && /* @__PURE__ */ jsx36("div", { className: "text-text-muted mt-[2px] text-[12px]", children: description }),
+        /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: cn("mt-[1px] text-[14px] leading-none", iconColorClass[t]), children: icon ?? defaultGlyph[t] }),
+        /* @__PURE__ */ jsxs30("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsx37("div", { className: "font-medium", children: title }),
+          description && /* @__PURE__ */ jsx37("div", { className: "text-text-muted mt-[2px] text-[12px]", children: description }),
           children
         ] }),
-        action && /* @__PURE__ */ jsx36("div", { className: "ml-1 shrink-0", children: action })
+        action && /* @__PURE__ */ jsx37("div", { className: "ml-1 shrink-0", children: action })
       ]
     }
   );
@@ -2077,8 +2243,8 @@ Alert.displayName = "Alert";
 
 // src/patterns/Banner/Banner.tsx
 import { cva as cva9 } from "class-variance-authority";
-import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+import { forwardRef as forwardRef37 } from "react";
+import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
 var bannerStyles = cva9(
   "flex items-center gap-3 border-b border-border px-[14px] py-2 text-[12px]",
   {
@@ -2103,9 +2269,9 @@ var defaultGlyph2 = {
   warn: "!",
   err: "\xD7"
 };
-var Banner = forwardRef36(function Banner2({ tone = "accent", sticky, icon, action, live = "polite", className, children, ...props }, ref) {
+var Banner = forwardRef37(function Banner2({ tone = "accent", sticky, icon, action, live = "polite", className, children, ...props }, ref) {
   const t = tone ?? "accent";
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ref,
@@ -2114,9 +2280,9 @@ var Banner = forwardRef36(function Banner2({ tone = "accent", sticky, icon, acti
       className: cn(bannerStyles({ tone, sticky }), className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "leading-none", children: icon ?? defaultGlyph2[t] }),
-        /* @__PURE__ */ jsx37("div", { className: "min-w-0 flex-1", children }),
-        action && /* @__PURE__ */ jsx37("div", { className: "ml-auto", children: action })
+        /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "leading-none", children: icon ?? defaultGlyph2[t] }),
+        /* @__PURE__ */ jsx38("div", { className: "min-w-0 flex-1", children }),
+        action && /* @__PURE__ */ jsx38("div", { className: "ml-auto", children: action })
       ]
     }
   );
@@ -2126,30 +2292,30 @@ Banner.displayName = "Banner";
 // src/patterns/Breadcrumbs/Breadcrumbs.tsx
 import {
   Children as Children2,
-  forwardRef as forwardRef37,
+  forwardRef as forwardRef38,
   isValidElement as isValidElement2
 } from "react";
-import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
-var Breadcrumbs = forwardRef37(function Breadcrumbs2({ separator = "/", className, children, ...props }, ref) {
+import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
+var Breadcrumbs = forwardRef38(function Breadcrumbs2({ separator = "/", className, children, ...props }, ref) {
   const crumbs = Children2.toArray(children).filter(isValidElement2);
   const last = crumbs.length - 1;
-  return /* @__PURE__ */ jsx38("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-[13px]", className), ...props, children: /* @__PURE__ */ jsx38("ol", { className: "text-text-muted flex flex-wrap items-center gap-[6px]", children: crumbs.map((crumb, i) => {
+  return /* @__PURE__ */ jsx39("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-[13px]", className), ...props, children: /* @__PURE__ */ jsx39("ol", { className: "text-text-muted flex flex-wrap items-center gap-[6px]", children: crumbs.map((crumb, i) => {
     const isCurrent = i === last;
-    return /* @__PURE__ */ jsxs31("li", { className: "inline-flex items-center gap-[6px]", children: [
-      isCurrent ? /* @__PURE__ */ jsx38(Crumb, { ...crumb.props, current: true }) : crumb,
-      !isCurrent && /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "text-text-dim", children: separator })
+    return /* @__PURE__ */ jsxs32("li", { className: "inline-flex items-center gap-[6px]", children: [
+      isCurrent ? /* @__PURE__ */ jsx39(Crumb, { ...crumb.props, current: true }) : crumb,
+      !isCurrent && /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "text-text-dim", children: separator })
     ] }, i);
   }) }) });
 });
 Breadcrumbs.displayName = "Breadcrumbs";
-var Crumb = forwardRef37(function Crumb2({ current, className, href, children, ...props }, ref) {
+var Crumb = forwardRef38(function Crumb2({ current, className, href, children, ...props }, ref) {
   if (current) {
-    return /* @__PURE__ */ jsx38("span", { "aria-current": "page", className: cn("text-text", className), children });
+    return /* @__PURE__ */ jsx39("span", { "aria-current": "page", className: cn("text-text", className), children });
   }
   if (href === void 0) {
-    return /* @__PURE__ */ jsx38("span", { className: cn("text-text-dim", className), children });
+    return /* @__PURE__ */ jsx39("span", { className: cn("text-text-dim", className), children });
   }
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "a",
     {
       ref,
@@ -2164,14 +2330,14 @@ Crumb.displayName = "Crumb";
 
 // src/patterns/Combobox/Combobox.tsx
 import {
-  forwardRef as forwardRef38,
+  forwardRef as forwardRef39,
   useEffect as useEffect5,
   useId as useId6,
   useMemo as useMemo2,
   useRef as useRef4,
   useState as useState8
 } from "react";
-import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
 function normalize(option) {
   if (typeof option === "string") {
     return { value: option, label: option, searchText: option.toLowerCase() };
@@ -2187,7 +2353,7 @@ function normalize(option) {
   };
 }
 var defaultFilter = (option, query) => option.searchText.includes(query.toLowerCase());
-var Combobox = forwardRef38(function Combobox2({
+var Combobox = forwardRef39(function Combobox2({
   options,
   value: valueProp,
   defaultValue,
@@ -2264,8 +2430,8 @@ var Combobox = forwardRef38(function Combobox2({
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs32("div", { ref: wrapperRef, className: "relative", style: { width }, children: [
-    /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs33("div", { ref: wrapperRef, className: "relative", style: { width }, children: [
+    /* @__PURE__ */ jsx40(
       "input",
       {
         ref,
@@ -2299,7 +2465,7 @@ var Combobox = forwardRef38(function Combobox2({
         )
       }
     ),
-    open && /* @__PURE__ */ jsx39(
+    open && /* @__PURE__ */ jsx40(
       "ul",
       {
         id: listboxId,
@@ -2309,9 +2475,9 @@ var Combobox = forwardRef38(function Combobox2({
           "z-dropdown absolute top-full right-0 left-0 mt-1 max-h-[220px] overflow-auto",
           "border-border bg-panel rounded-md border p-1 shadow-lg"
         ),
-        children: filtered.length === 0 ? /* @__PURE__ */ jsx39("li", { className: "text-text-dim px-2 py-3 text-center text-[12px]", role: "presentation", children: emptyState ?? "No matches" }) : filtered.map((option, i) => {
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx40("li", { className: "text-text-dim px-2 py-3 text-center text-[12px]", role: "presentation", children: emptyState ?? "No matches" }) : filtered.map((option, i) => {
           const isActive = i === cursor;
-          return /* @__PURE__ */ jsxs32(
+          return /* @__PURE__ */ jsxs33(
             "li",
             {
               id: `${listboxId}-option-${i}`,
@@ -2329,8 +2495,8 @@ var Combobox = forwardRef38(function Combobox2({
                 option.disabled && "pointer-events-none opacity-40"
               ),
               children: [
-                /* @__PURE__ */ jsx39("div", { children: option.label }),
-                option.description && /* @__PURE__ */ jsx39("div", { className: "text-text-dim text-[11px]", children: option.description })
+                /* @__PURE__ */ jsx40("div", { children: option.label }),
+                option.description && /* @__PURE__ */ jsx40("div", { className: "text-text-dim text-[11px]", children: option.description })
               ]
             },
             option.value
@@ -2338,19 +2504,19 @@ var Combobox = forwardRef38(function Combobox2({
         })
       }
     ),
-    name && /* @__PURE__ */ jsx39("input", { type: "hidden", name, value: value ?? "", readOnly: true })
+    name && /* @__PURE__ */ jsx40("input", { type: "hidden", name, value: value ?? "", readOnly: true })
   ] });
 });
 Combobox.displayName = "Combobox";
 
 // src/patterns/CommandPalette/CommandPalette.tsx
 import * as RadixDialog4 from "@radix-ui/react-dialog";
-import { forwardRef as forwardRef39, useEffect as useEffect6, useId as useId7, useMemo as useMemo3 } from "react";
-import { Fragment, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
+import { forwardRef as forwardRef40, useEffect as useEffect6, useId as useId7, useMemo as useMemo3 } from "react";
+import { Fragment, jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
 function flatItems(groups) {
   return groups.flatMap((g) => g.items);
 }
-var CommandPalette = forwardRef39(
+var CommandPalette = forwardRef40(
   function CommandPalette2({
     open,
     onOpenChange,
@@ -2379,8 +2545,8 @@ var CommandPalette = forwardRef39(
     useEffect6(() => {
       setCursor(0);
     }, [query, groups, setCursor]);
-    return /* @__PURE__ */ jsx40(RadixDialog4.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs33(RadixDialog4.Portal, { children: [
-      /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(RadixDialog4.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs34(RadixDialog4.Portal, { children: [
+      /* @__PURE__ */ jsx41(
         RadixDialog4.Overlay,
         {
           className: cn(
@@ -2389,7 +2555,7 @@ var CommandPalette = forwardRef39(
           )
         }
       ),
-      /* @__PURE__ */ jsxs33(
+      /* @__PURE__ */ jsxs34(
         RadixDialog4.Content,
         {
           ref,
@@ -2403,10 +2569,10 @@ var CommandPalette = forwardRef39(
           ),
           onKeyDown,
           children: [
-            /* @__PURE__ */ jsx40(RadixDialog4.Title, { className: "sr-only", children: "Command palette" }),
-            /* @__PURE__ */ jsxs33("div", { className: "border-border flex items-center gap-[10px] border-b px-4 py-[14px]", children: [
-              /* @__PURE__ */ jsx40("span", { "aria-hidden": true, className: "text-text-dim", children: "\u2315" }),
-              /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsx41(RadixDialog4.Title, { className: "sr-only", children: "Command palette" }),
+            /* @__PURE__ */ jsxs34("div", { className: "border-border flex items-center gap-[10px] border-b px-4 py-[14px]", children: [
+              /* @__PURE__ */ jsx41("span", { "aria-hidden": true, className: "text-text-dim", children: "\u2315" }),
+              /* @__PURE__ */ jsx41(
                 "input",
                 {
                   autoFocus: true,
@@ -2423,9 +2589,9 @@ var CommandPalette = forwardRef39(
                   className: "text-text placeholder:text-text-dim flex-1 border-0 bg-transparent text-[14px] outline-none"
                 }
               ),
-              /* @__PURE__ */ jsx40("span", { className: "border-border text-text-dim rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: "ESC" })
+              /* @__PURE__ */ jsx41("span", { className: "border-border text-text-dim rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: "ESC" })
             ] }),
-            /* @__PURE__ */ jsx40("div", { id: listboxId, className: "min-h-[220px] p-2", role: "listbox", "aria-label": "Results", children: flat.length === 0 ? emptyState ?? /* @__PURE__ */ jsx40("div", { className: "text-text-dim px-3 py-5 text-center text-[12px]", children: "No matches" }) : /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsx41("div", { id: listboxId, className: "min-h-[220px] p-2", role: "listbox", "aria-label": "Results", children: flat.length === 0 ? emptyState ?? /* @__PURE__ */ jsx41("div", { className: "text-text-dim px-3 py-5 text-center text-[12px]", children: "No matches" }) : /* @__PURE__ */ jsx41(
               CommandGroups,
               {
                 groups,
@@ -2435,7 +2601,7 @@ var CommandPalette = forwardRef39(
                 optionId
               }
             ) }),
-            footer && /* @__PURE__ */ jsx40("div", { className: "border-border text-text-dim flex gap-4 border-t px-[14px] py-[10px] font-mono text-[10px]", children: footer })
+            footer && /* @__PURE__ */ jsx41("div", { className: "border-border text-text-dim flex gap-4 border-t px-[14px] py-[10px] font-mono text-[10px]", children: footer })
           ]
         }
       )
@@ -2445,10 +2611,10 @@ var CommandPalette = forwardRef39(
 CommandPalette.displayName = "CommandPalette";
 function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
   let runningIndex = 0;
-  return /* @__PURE__ */ jsx40(Fragment, { children: groups.map((group, gIdx) => {
+  return /* @__PURE__ */ jsx41(Fragment, { children: groups.map((group, gIdx) => {
     if (group.items.length === 0) return null;
-    return /* @__PURE__ */ jsxs33("div", { children: [
-      group.label && /* @__PURE__ */ jsxs33("div", { className: "text-text-dim px-2 pt-2 pb-1 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
+    return /* @__PURE__ */ jsxs34("div", { children: [
+      group.label && /* @__PURE__ */ jsxs34("div", { className: "text-text-dim px-2 pt-2 pb-1 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
         group.label,
         " \xB7 ",
         group.items.length
@@ -2456,7 +2622,7 @@ function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
       group.items.map((item) => {
         const myIndex = runningIndex++;
         const isActive = cursor === myIndex;
-        return /* @__PURE__ */ jsxs33(
+        return /* @__PURE__ */ jsxs34(
           "button",
           {
             id: optionId(myIndex),
@@ -2470,7 +2636,7 @@ function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
               isActive ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
             ),
             children: [
-              item.glyph != null && /* @__PURE__ */ jsx40(
+              item.glyph != null && /* @__PURE__ */ jsx41(
                 "span",
                 {
                   "aria-hidden": true,
@@ -2481,11 +2647,11 @@ function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
                   children: item.glyph
                 }
               ),
-              /* @__PURE__ */ jsxs33("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx40("span", { className: "block truncate text-[13px]", children: item.label }),
-                item.description && /* @__PURE__ */ jsx40("span", { className: "text-text-dim block truncate text-[11px]", children: item.description })
+              /* @__PURE__ */ jsxs34("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx41("span", { className: "block truncate text-[13px]", children: item.label }),
+                item.description && /* @__PURE__ */ jsx41("span", { className: "text-text-dim block truncate text-[11px]", children: item.description })
               ] }),
-              item.trailing && /* @__PURE__ */ jsx40("span", { className: "text-text-dim font-mono text-[10px]", children: item.trailing })
+              item.trailing && /* @__PURE__ */ jsx41("span", { className: "text-text-dim font-mono text-[10px]", children: item.trailing })
             ]
           },
           item.id
@@ -2508,7 +2674,7 @@ function filterCommandItems(query, groups) {
 
 // src/patterns/DataTable/DataTable.tsx
 import { useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5 } from "react";
-import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
 var alignClass = {
   left: "text-left",
   right: "text-right",
@@ -2596,10 +2762,10 @@ function DataTable(props) {
       return next;
     });
   };
-  return /* @__PURE__ */ jsxs34("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
-    caption && /* @__PURE__ */ jsx41("caption", { className: "sr-only", children: caption }),
-    /* @__PURE__ */ jsx41("thead", { className: cn("bg-panel-2", stickyHeader && "z-raised sticky top-0"), children: /* @__PURE__ */ jsxs34("tr", { children: [
-      selectable && /* @__PURE__ */ jsx41("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs35("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
+    caption && /* @__PURE__ */ jsx42("caption", { className: "sr-only", children: caption }),
+    /* @__PURE__ */ jsx42("thead", { className: cn("bg-panel-2", stickyHeader && "z-raised sticky top-0"), children: /* @__PURE__ */ jsxs35("tr", { children: [
+      selectable && /* @__PURE__ */ jsx42("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ jsx42(
         "input",
         {
           ref: headerCheckRef,
@@ -2615,8 +2781,8 @@ function DataTable(props) {
         const isSorted = sort?.key === col.key;
         const ariaSort = !sortable ? void 0 : isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : "none";
         const align = col.align ?? "left";
-        const indicator = sortable && isSorted && /* @__PURE__ */ jsx41("span", { "aria-hidden": true, className: "ml-1", children: sort?.direction === "asc" ? "\u2191" : "\u2193" });
-        return /* @__PURE__ */ jsx41(
+        const indicator = sortable && isSorted && /* @__PURE__ */ jsx42("span", { "aria-hidden": true, className: "ml-1", children: sort?.direction === "asc" ? "\u2191" : "\u2193" });
+        return /* @__PURE__ */ jsx42(
           "th",
           {
             scope: "col",
@@ -2628,7 +2794,7 @@ function DataTable(props) {
               sortable && "cursor-pointer",
               isSorted ? "text-accent" : "text-text-dim"
             ),
-            children: sortable ? /* @__PURE__ */ jsxs34(
+            children: sortable ? /* @__PURE__ */ jsxs35(
               "button",
               {
                 type: "button",
@@ -2645,8 +2811,8 @@ function DataTable(props) {
         );
       })
     ] }) }),
-    /* @__PURE__ */ jsxs34("tbody", { children: [
-      sortedData.length === 0 && /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsxs35("tbody", { children: [
+      sortedData.length === 0 && /* @__PURE__ */ jsx42("tr", { children: /* @__PURE__ */ jsx42(
         "td",
         {
           colSpan: columns.length + (selectable ? 1 : 0),
@@ -2657,7 +2823,7 @@ function DataTable(props) {
       sortedData.map((row) => {
         const id = rowKey(row);
         const isSelected = selectedSet.has(id);
-        return /* @__PURE__ */ jsxs34(
+        return /* @__PURE__ */ jsxs35(
           "tr",
           {
             "data-state": isSelected ? "selected" : void 0,
@@ -2666,7 +2832,7 @@ function DataTable(props) {
               isSelected ? "bg-accent-dim/50" : "hover:bg-panel-2"
             ),
             children: [
-              selectable && /* @__PURE__ */ jsx41("td", { className: "px-3 py-[10px]", children: /* @__PURE__ */ jsx41(
+              selectable && /* @__PURE__ */ jsx42("td", { className: "px-3 py-[10px]", children: /* @__PURE__ */ jsx42(
                 "input",
                 {
                   type: "checkbox",
@@ -2676,7 +2842,7 @@ function DataTable(props) {
                   className: "cursor-pointer accent-[var(--color-accent)]"
                 }
               ) }),
-              columns.map((col) => /* @__PURE__ */ jsx41("td", { className: cn("px-3 py-[10px]", alignClass[col.align ?? "left"]), children: col.cell ? col.cell(row) : col.accessor ? String(col.accessor(row)) : null }, col.key))
+              columns.map((col) => /* @__PURE__ */ jsx42("td", { className: cn("px-3 py-[10px]", alignClass[col.align ?? "left"]), children: col.cell ? col.cell(row) : col.accessor ? String(col.accessor(row)) : null }, col.key))
             ]
           },
           id
@@ -2688,13 +2854,13 @@ function DataTable(props) {
 
 // src/patterns/DatePicker/Calendar.tsx
 import {
-  forwardRef as forwardRef40,
+  forwardRef as forwardRef41,
   useCallback as useCallback7,
   useEffect as useEffect8,
   useRef as useRef6,
   useState as useState9
 } from "react";
-import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
 var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var DAYS = ["S", "M", "T", "W", "T", "F", "S"];
 function isSameDay(a, b) {
@@ -2705,7 +2871,7 @@ function clampDay(year, month, day) {
   const max = new Date(year, month + 1, 0).getDate();
   return Math.min(Math.max(1, day), max);
 }
-var Calendar = forwardRef40(function Calendar2({
+var Calendar = forwardRef41(function Calendar2({
   value,
   defaultValue,
   onValueChange,
@@ -2836,7 +3002,7 @@ var Calendar = forwardRef40(function Calendar2({
     },
     [month, year, moveFocus]
   );
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       ref,
@@ -2848,14 +3014,14 @@ var Calendar = forwardRef40(function Calendar2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs35("div", { className: "mb-3 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs35("span", { className: "text-[13px] font-medium", "aria-live": "polite", children: [
+        /* @__PURE__ */ jsxs36("div", { className: "mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs36("span", { className: "text-[13px] font-medium", "aria-live": "polite", children: [
             MONTHS[month],
             " ",
             year
           ] }),
-          /* @__PURE__ */ jsxs35("div", { className: "flex gap-1", children: [
-            /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsxs36("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx43(
               IconButton,
               {
                 size: "sm",
@@ -2865,11 +3031,11 @@ var Calendar = forwardRef40(function Calendar2({
                 onClick: goPrev
               }
             ),
-            /* @__PURE__ */ jsx42(IconButton, { size: "sm", variant: "ghost", icon: "\u203A", "aria-label": "Next month", onClick: goNext })
+            /* @__PURE__ */ jsx43(IconButton, { size: "sm", variant: "ghost", icon: "\u203A", "aria-label": "Next month", onClick: goNext })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs35("div", { role: "grid", "aria-label": `${MONTHS[month]} ${year}`, className: "flex flex-col gap-[2px]", children: [
-          /* @__PURE__ */ jsx42("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: DAYS.map((d, i) => /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsxs36("div", { role: "grid", "aria-label": `${MONTHS[month]} ${year}`, className: "flex flex-col gap-[2px]", children: [
+          /* @__PURE__ */ jsx43("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: DAYS.map((d, i) => /* @__PURE__ */ jsx43(
             "div",
             {
               role: "columnheader",
@@ -2889,7 +3055,7 @@ var Calendar = forwardRef40(function Calendar2({
                 const cellIndex = r * 7 + c;
                 const dayNum = cellIndex - firstDayOfMonth + 1;
                 if (dayNum < 1 || dayNum > daysInMonth) {
-                  cells.push(/* @__PURE__ */ jsx42("div", { role: "gridcell", "aria-hidden": true }, `pad-${r}-${c}`));
+                  cells.push(/* @__PURE__ */ jsx43("div", { role: "gridcell", "aria-hidden": true }, `pad-${r}-${c}`));
                   continue;
                 }
                 const date = new Date(year, month, dayNum);
@@ -2899,7 +3065,7 @@ var Calendar = forwardRef40(function Calendar2({
                 const isFocused = dayNum === effectiveFocusDay;
                 const day = dayNum;
                 cells.push(
-                  /* @__PURE__ */ jsx42("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx42(
+                  /* @__PURE__ */ jsx43("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx43(
                     "button",
                     {
                       ref: (node) => {
@@ -2930,7 +3096,7 @@ var Calendar = forwardRef40(function Calendar2({
                 );
               }
               rows.push(
-                /* @__PURE__ */ jsx42("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: cells }, `row-${r}`)
+                /* @__PURE__ */ jsx43("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: cells }, `row-${r}`)
               );
             }
             return rows;
@@ -2944,10 +3110,10 @@ Calendar.displayName = "Calendar";
 
 // src/patterns/DatePicker/DatePicker.tsx
 import * as RadixPopover2 from "@radix-ui/react-popover";
-import { forwardRef as forwardRef41, useState as useState10 } from "react";
-import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
+import { forwardRef as forwardRef42, useState as useState10 } from "react";
+import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
 var defaultFormat = (d) => d.toLocaleDateString();
-var DatePicker = forwardRef41(function DatePicker2({
+var DatePicker = forwardRef42(function DatePicker2({
   value: valueProp,
   defaultValue,
   onValueChange,
@@ -2967,8 +3133,8 @@ var DatePicker = forwardRef41(function DatePicker2({
     defaultValue,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ jsxs36(RadixPopover2.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx43(RadixPopover2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(RadixPopover2.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx44(RadixPopover2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs37(
       "button",
       {
         ref,
@@ -2985,18 +3151,18 @@ var DatePicker = forwardRef41(function DatePicker2({
         ),
         style: { width },
         children: [
-          /* @__PURE__ */ jsx43("span", { "aria-hidden": true, className: "text-text-dim", children: "\u25A2" }),
-          /* @__PURE__ */ jsx43("span", { className: cn("flex-1 truncate", !value && "text-text-dim"), children: value ? format(value) : emptyLabel ?? placeholder })
+          /* @__PURE__ */ jsx44("span", { "aria-hidden": true, className: "text-text-dim", children: "\u25A2" }),
+          /* @__PURE__ */ jsx44("span", { className: cn("flex-1 truncate", !value && "text-text-dim"), children: value ? format(value) : emptyLabel ?? placeholder })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx43(RadixPopover2.Portal, { children: /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44(RadixPopover2.Portal, { children: /* @__PURE__ */ jsx44(
       RadixPopover2.Content,
       {
         align: "start",
         sideOffset: 6,
         className: "z-popover outline-none data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
-        children: /* @__PURE__ */ jsx43(
+        children: /* @__PURE__ */ jsx44(
           Calendar,
           {
             value,
@@ -3011,17 +3177,17 @@ var DatePicker = forwardRef41(function DatePicker2({
         )
       }
     ) }),
-    name && /* @__PURE__ */ jsx43("input", { type: "hidden", name, value: value ? value.toISOString() : "", readOnly: true })
+    name && /* @__PURE__ */ jsx44("input", { type: "hidden", name, value: value ? value.toISOString() : "", readOnly: true })
   ] });
 });
 DatePicker.displayName = "DatePicker";
 
 // src/patterns/Dots/Dots.tsx
-import { forwardRef as forwardRef42 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
-var Dots = forwardRef42(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
+import { forwardRef as forwardRef43 } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var Dots = forwardRef43(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
   const interactive = typeof onChange === "function";
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "nav",
     {
       ref,
@@ -3035,7 +3201,7 @@ var Dots = forwardRef42(function Dots2({ total, current, onChange, className, "a
           isActive ? "w-[18px] bg-accent" : "w-[6px] bg-panel-2"
         );
         if (interactive) {
-          return /* @__PURE__ */ jsx44(
+          return /* @__PURE__ */ jsx45(
             "button",
             {
               type: "button",
@@ -3052,7 +3218,7 @@ var Dots = forwardRef42(function Dots2({ total, current, onChange, className, "a
             i
           );
         }
-        return /* @__PURE__ */ jsx44("span", { "aria-hidden": true, className: sharedClass }, i);
+        return /* @__PURE__ */ jsx45("span", { "aria-hidden": true, className: sharedClass }, i);
       })
     }
   );
@@ -3061,15 +3227,15 @@ Dots.displayName = "Dots";
 
 // src/patterns/Dropzone/Dropzone.tsx
 import {
-  forwardRef as forwardRef43,
+  forwardRef as forwardRef44,
   useState as useState11
 } from "react";
-import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
 function listToArray(list) {
   if (!list) return [];
   return Array.from(list);
 }
-var Dropzone = forwardRef43(function Dropzone2({
+var Dropzone = forwardRef44(function Dropzone2({
   onFiles,
   accept,
   multiple = true,
@@ -3094,7 +3260,7 @@ var Dropzone = forwardRef43(function Dropzone2({
     const files = listToArray(e.dataTransfer.files);
     if (files.length) onFiles?.(files);
   };
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     "label",
     {
       ref,
@@ -3111,7 +3277,7 @@ var Dropzone = forwardRef43(function Dropzone2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "input",
           {
             type: "file",
@@ -3127,7 +3293,7 @@ var Dropzone = forwardRef43(function Dropzone2({
             }
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             "aria-hidden": true,
@@ -3135,8 +3301,8 @@ var Dropzone = forwardRef43(function Dropzone2({
             children: icon
           }
         ),
-        /* @__PURE__ */ jsx45("div", { className: "mb-1 text-[13px] font-medium", children: title }),
-        description && /* @__PURE__ */ jsx45("div", { className: "text-text-dim text-[11px]", children: description })
+        /* @__PURE__ */ jsx46("div", { className: "mb-1 text-[13px] font-medium", children: title }),
+        description && /* @__PURE__ */ jsx46("div", { className: "text-text-dim text-[11px]", children: description })
       ]
     }
   );
@@ -3145,8 +3311,8 @@ Dropzone.displayName = "Dropzone";
 
 // src/patterns/EmptyState/EmptyState.tsx
 import { cva as cva10 } from "class-variance-authority";
-import { forwardRef as forwardRef44 } from "react";
-import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
+import { forwardRef as forwardRef45 } from "react";
+import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
 var plateStyles = cva10("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
   variants: {
     tone: {
@@ -3159,8 +3325,8 @@ var plateStyles = cva10("grid h-12 w-12 place-items-center rounded-base text-[22
   },
   defaultVariants: { tone: "neutral" }
 });
-var EmptyState = forwardRef44(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs38(
+var EmptyState = forwardRef45(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       ref,
@@ -3170,10 +3336,10 @@ var EmptyState = forwardRef44(function EmptyState2({ icon, title, description, a
       ),
       ...props,
       children: [
-        icon != null && /* @__PURE__ */ jsx46("span", { "aria-hidden": true, className: plateStyles({ tone: tone ?? "neutral" }), children: icon }),
-        /* @__PURE__ */ jsx46("div", { className: "text-[14px] font-medium", children: title }),
-        description && /* @__PURE__ */ jsx46("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
-        chips && chips.length > 0 && /* @__PURE__ */ jsx46("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ jsx46(
+        icon != null && /* @__PURE__ */ jsx47("span", { "aria-hidden": true, className: plateStyles({ tone: tone ?? "neutral" }), children: icon }),
+        /* @__PURE__ */ jsx47("div", { className: "text-[14px] font-medium", children: title }),
+        description && /* @__PURE__ */ jsx47("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
+        chips && chips.length > 0 && /* @__PURE__ */ jsx47("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ jsx47(
           "button",
           {
             type: "button",
@@ -3195,18 +3361,18 @@ var EmptyState = forwardRef44(function EmptyState2({ icon, title, description, a
 EmptyState.displayName = "EmptyState";
 
 // src/patterns/FileChip/FileChip.tsx
-import { forwardRef as forwardRef45 } from "react";
-import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
+import { forwardRef as forwardRef46 } from "react";
+import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
 function deriveExt(name) {
   const dot = name.lastIndexOf(".");
   if (dot < 0) return "FILE";
   return name.slice(dot + 1).slice(0, 4).toUpperCase();
 }
-var FileChip = forwardRef45(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
+var FileChip = forwardRef46(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
   const ext = deriveExt(name);
   const showProgress = typeof progress === "number";
   const isComplete = showProgress && progress >= 100;
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     "div",
     {
       ref,
@@ -3216,7 +3382,7 @@ var FileChip = forwardRef45(function FileChip2({ name, size, progress, icon, onR
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           "span",
           {
             "aria-hidden": true,
@@ -3224,17 +3390,17 @@ var FileChip = forwardRef45(function FileChip2({ name, size, progress, icon, onR
             children: icon ?? ext
           }
         ),
-        /* @__PURE__ */ jsxs39("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx47("div", { className: "truncate text-[12px] font-medium", children: name }),
-          /* @__PURE__ */ jsxs39("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
+        /* @__PURE__ */ jsxs40("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx48("div", { className: "truncate text-[12px] font-medium", children: name }),
+          /* @__PURE__ */ jsxs40("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
             size,
-            showProgress && !isComplete && /* @__PURE__ */ jsxs39("span", { children: [
+            showProgress && !isComplete && /* @__PURE__ */ jsxs40("span", { children: [
               " \xB7 ",
               Math.round(progress),
               "%"
             ] })
           ] }),
-          showProgress && !isComplete && /* @__PURE__ */ jsx47("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ jsx47(
+          showProgress && !isComplete && /* @__PURE__ */ jsx48("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ jsx48(
             "div",
             {
               className: cn(
@@ -3245,7 +3411,7 @@ var FileChip = forwardRef45(function FileChip2({ name, size, progress, icon, onR
             }
           ) })
         ] }),
-        onRemove && /* @__PURE__ */ jsx47(
+        onRemove && /* @__PURE__ */ jsx48(
           "button",
           {
             type: "button",
@@ -3264,120 +3430,429 @@ var FileChip = forwardRef45(function FileChip2({ name, size, progress, icon, onR
 });
 FileChip.displayName = "FileChip";
 
-// src/patterns/Menubar/Menubar.tsx
-import * as RadixMenubar from "@radix-ui/react-menubar";
-import { forwardRef as forwardRef46 } from "react";
-import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
-var Menubar = forwardRef46(function Menubar2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx48(
-    RadixMenubar.Root,
+// src/patterns/FilterPanel/FilterPanel.tsx
+import { forwardRef as forwardRef47, useCallback as useCallback8, useState as useState12 } from "react";
+import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
+var EMPTY = Object.freeze({});
+var FilterPanel = forwardRef47(function FilterPanel2({
+  facets,
+  value,
+  defaultValue,
+  onValueChange,
+  onReset,
+  counts,
+  title = "Filter",
+  resetLabel = "Reset",
+  className,
+  ...props
+}, ref) {
+  const [selection, setSelection] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? EMPTY,
+    onChange: onValueChange
+  });
+  const total = facets.reduce((sum, facet) => sum + (selection[facet.id]?.length ?? 0), 0);
+  const toggle = useCallback8(
+    (facetId, optionValue, next) => {
+      setSelection((prev) => {
+        const current = prev?.[facetId] ?? [];
+        const filtered = current.filter((v) => v !== optionValue);
+        const updated = next ? [...filtered, optionValue] : filtered;
+        return { ...prev ?? {}, [facetId]: updated };
+      });
+    },
+    [setSelection]
+  );
+  const handleReset = useCallback8(() => {
+    setSelection(EMPTY);
+    onReset?.();
+  }, [setSelection, onReset]);
+  return /* @__PURE__ */ jsxs41(
+    "div",
     {
       ref,
+      role: "group",
+      "aria-label": typeof title === "string" ? title : void 0,
       className: cn(
-        "border-border bg-panel flex h-[30px] items-center gap-[2px] border-b px-3",
+        "rounded-base border-border bg-panel flex w-[260px] flex-col gap-3 border p-4",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx49("span", { className: "text-text-dim font-mono text-[10px] tracking-[1.4px] uppercase", children: title }),
+          total > 0 && /* @__PURE__ */ jsx49(Badge, { size: "sm", variant: "accent", children: total }),
+          /* @__PURE__ */ jsx49(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: handleReset,
+              disabled: total === 0,
+              className: "ml-auto",
+              children: resetLabel
+            }
+          )
+        ] }),
+        facets.map((facet) => /* @__PURE__ */ jsx49(
+          FilterFacetGroup,
+          {
+            facet,
+            selected: selection[facet.id] ?? [],
+            counts: counts?.[facet.id],
+            onToggle: toggle
+          },
+          facet.id
+        ))
+      ]
     }
   );
 });
-Menubar.displayName = "Menubar";
-var MenubarMenu = RadixMenubar.Menu;
-var MenubarTrigger = forwardRef46(
-  function MenubarTrigger2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx48(
-      RadixMenubar.Trigger,
+FilterPanel.displayName = "FilterPanel";
+function FilterFacetGroup({ facet, selected, counts, onToggle }) {
+  const collapsible = facet.collapsible ?? true;
+  const [open, setOpen] = useState12(facet.defaultOpen ?? true);
+  const isOpen = !collapsible || open;
+  const selectedCount = selected.length;
+  const headingClass = "text-text-muted flex items-center gap-[6px] font-mono text-[10px] tracking-[1.4px] uppercase";
+  return /* @__PURE__ */ jsxs41("section", { className: "flex flex-col gap-1", children: [
+    collapsible ? /* @__PURE__ */ jsxs41(
+      "button",
       {
-        ref,
+        type: "button",
+        "aria-expanded": isOpen,
+        onClick: () => setOpen((v) => !v),
         className: cn(
-          "text-text cursor-pointer rounded-xs border-0 bg-transparent px-[10px] py-1 text-[12px] outline-none",
-          "transition-colors duration-(--duration-micro)",
-          "data-[state=open]:bg-panel-2 hover:bg-panel-2",
+          headingClass,
+          "cursor-pointer rounded-xs px-1 py-[2px] outline-none",
           "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
-          className
+          "hover:text-text"
         ),
-        ...props
+        children: [
+          /* @__PURE__ */ jsx49("span", { className: "flex-1 text-left", children: facet.label }),
+          selectedCount > 0 && /* @__PURE__ */ jsx49(Badge, { size: "sm", variant: "neutral", children: selectedCount }),
+          /* @__PURE__ */ jsx49("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
+        ]
       }
-    );
-  }
-);
-MenubarTrigger.displayName = "MenubarTrigger";
-var MenubarContent = forwardRef46(
-  function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
-    return /* @__PURE__ */ jsx48(RadixMenubar.Portal, { children: /* @__PURE__ */ jsx48(
-      RadixMenubar.Content,
-      {
-        ref,
-        sideOffset,
-        align,
-        className: cn(
-          "border-border-strong bg-panel z-popover min-w-[180px] rounded-md border p-1 shadow-lg outline-none",
-          "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
-          className
+    ) : /* @__PURE__ */ jsxs41("div", { className: cn(headingClass, "px-1 py-[2px]"), children: [
+      /* @__PURE__ */ jsx49("span", { className: "flex-1", children: facet.label }),
+      selectedCount > 0 && /* @__PURE__ */ jsx49(Badge, { size: "sm", variant: "neutral", children: selectedCount })
+    ] }),
+    isOpen && /* @__PURE__ */ jsx49("ul", { className: "m-0 flex list-none flex-col gap-[2px] p-0", children: facet.options.map((option) => {
+      const isSelected = selected.includes(option.value);
+      const count = counts?.[option.value];
+      return /* @__PURE__ */ jsxs41("li", { className: "flex items-center gap-2 px-1 py-[3px]", children: [
+        /* @__PURE__ */ jsx49(
+          Checkbox,
+          {
+            checked: isSelected,
+            onCheckedChange: (next) => onToggle(facet.id, option.value, next === true),
+            label: option.label
+          }
         ),
-        ...props
-      }
-    ) });
-  }
-);
-MenubarContent.displayName = "MenubarContent";
-var itemBase3 = cn(
-  "flex items-center gap-2 rounded-sm px-[10px] py-[6px] text-[12px] cursor-pointer outline-none",
-  "data-[highlighted]:bg-panel-2",
-  "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
-);
-var MenubarItem = forwardRef46(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs40(
-    RadixMenubar.Item,
-    {
-      ref,
-      className: cn(itemBase3, destructive ? "text-err" : "text-text", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx48("span", { className: "flex-1", children }),
-        trailing && /* @__PURE__ */ jsx48("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
-      ]
-    }
-  );
-});
-MenubarItem.displayName = "MenubarItem";
-var MenubarSeparator = forwardRef46(
-  function MenubarSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx48(
-      RadixMenubar.Separator,
-      {
-        ref,
-        className: cn("bg-border my-1 h-px", className),
-        ...props
-      }
-    );
-  }
-);
-MenubarSeparator.displayName = "MenubarSeparator";
+        typeof count === "number" && /* @__PURE__ */ jsx49("span", { className: "text-text-dim ml-auto font-mono text-[10px] tabular-nums", children: count })
+      ] }, option.value);
+    }) })
+  ] });
+}
 
-// src/patterns/NavBar/NavBar.tsx
-import * as RadixNav from "@radix-ui/react-navigation-menu";
-import {
-  forwardRef as forwardRef48,
-  useCallback as useCallback9,
-  useEffect as useEffect9,
-  useRef as useRef7,
-  useState as useState13
-} from "react";
+// src/patterns/HealthScore/HealthScore.tsx
+import { forwardRef as forwardRef49 } from "react";
 
-// src/patterns/Sidebar/Sidebar.tsx
-import {
-  forwardRef as forwardRef47,
-  useCallback as useCallback8,
-  useState as useState12
-} from "react";
-import { Fragment as Fragment2, jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
-var Sidebar = forwardRef47(function Sidebar2({ width = 240, className, style, ...props }, ref) {
-  return /* @__PURE__ */ jsx49(
-    "aside",
-    {
-      ref,
-      style: { width, ...style },
+// src/patterns/RadialProgress/RadialProgress.tsx
+import { forwardRef as forwardRef48 } from "react";
+import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
+var toneStrokeClass = {
+  accent: "stroke-accent",
+  ok: "stroke-ok",
+  warn: "stroke-warn",
+  err: "stroke-err"
+};
+var RadialProgress = forwardRef48(
+  function RadialProgress2({
+    value,
+    max = 100,
+    size = 64,
+    thickness = 4,
+    tone,
+    children,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) {
+    const clamped = Math.min(max, Math.max(0, value));
+    const pct = max > 0 ? clamped / max * 100 : 0;
+    const r = (size - thickness) / 2;
+    const c = 2 * Math.PI * r;
+    const dash = pct / 100 * c;
+    const resolvedTone = tone ?? (clamped >= max ? "ok" : "accent");
+    return /* @__PURE__ */ jsxs42(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": Math.round(pct),
+        "aria-label": ariaLabel ?? `${Math.round(pct)}%`,
+        className: cn("relative inline-grid place-items-center", className),
+        style: { width: size, height: size },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs42("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+            /* @__PURE__ */ jsx50(
+              "circle",
+              {
+                cx: size / 2,
+                cy: size / 2,
+                r,
+                fill: "none",
+                strokeWidth: thickness,
+                className: "stroke-panel-2"
+              }
+            ),
+            /* @__PURE__ */ jsx50(
+              "circle",
+              {
+                cx: size / 2,
+                cy: size / 2,
+                r,
+                fill: "none",
+                strokeWidth: thickness,
+                strokeLinecap: "round",
+                strokeDasharray: `${dash} ${c}`,
+                transform: `rotate(-90 ${size / 2} ${size / 2})`,
+                className: cn(
+                  "transition-[stroke-dasharray] duration-(--duration-step)",
+                  toneStrokeClass[resolvedTone]
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx50("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
+        ]
+      }
+    );
+  }
+);
+RadialProgress.displayName = "RadialProgress";
+
+// src/patterns/HealthScore/HealthScore.tsx
+import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
+function deltaTone(delta) {
+  if (delta > 0) return "ok";
+  if (delta < 0) return "err";
+  return "accent";
+}
+function deltaGlyph(delta) {
+  if (delta > 0) return "\u2191";
+  if (delta < 0) return "\u2193";
+  return "\xB7";
+}
+var toneTextClass = {
+  accent: "text-text-muted",
+  ok: "text-ok",
+  warn: "text-warn",
+  err: "text-err"
+};
+var HealthScore = forwardRef49(function HealthScore2({
+  value,
+  max = 100,
+  delta,
+  label,
+  breakdown,
+  size = 72,
+  tone,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) {
+  const pct = max > 0 ? Math.round(Math.min(max, Math.max(0, value)) / max * 100) : 0;
+  const resolvedTone = tone ?? (pct >= 80 ? "ok" : pct >= 50 ? "accent" : "warn");
+  const indicatorTone = typeof delta === "number" ? deltaTone(delta) : "accent";
+  const core = /* @__PURE__ */ jsxs43(
+    "div",
+    {
+      ref,
+      className: cn("inline-flex flex-col items-center gap-1", className),
+      "aria-label": ariaLabel ?? `${pct}% health`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx51(RadialProgress, { value, max, size, tone: resolvedTone }),
+        label && /* @__PURE__ */ jsx51("div", { className: "text-text-muted mt-1 text-[12px] leading-tight", children: label }),
+        typeof delta === "number" && /* @__PURE__ */ jsxs43("div", { className: cn("font-mono text-[11px] tabular-nums", toneTextClass[indicatorTone]), children: [
+          /* @__PURE__ */ jsx51("span", { "aria-hidden": true, children: deltaGlyph(delta) }),
+          " ",
+          Math.abs(delta)
+        ] })
+      ]
+    }
+  );
+  if (!breakdown || breakdown.length === 0) {
+    return core;
+  }
+  return /* @__PURE__ */ jsx51(
+    HoverCard,
+    {
+      trigger: /* @__PURE__ */ jsx51("span", { className: "inline-flex", children: core }),
+      content: /* @__PURE__ */ jsxs43("div", { className: "flex min-w-[180px] flex-col gap-2", children: [
+        /* @__PURE__ */ jsx51("div", { className: "text-text-dim font-mono text-[9px] tracking-[1.4px] uppercase", children: "Breakdown" }),
+        /* @__PURE__ */ jsx51("ul", { className: "m-0 flex list-none flex-col gap-1 p-0 text-[12px]", children: breakdown.map((entry, i) => /* @__PURE__ */ jsxs43("li", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx51("span", { className: "text-text-muted flex-1 truncate", children: entry.label }),
+          /* @__PURE__ */ jsx51(
+            "span",
+            {
+              className: cn(
+                "font-mono tabular-nums",
+                entry.tone ? toneTextClass[entry.tone] : "text-text"
+              ),
+              children: entry.value
+            }
+          )
+        ] }, i)) })
+      ] })
+    }
+  );
+});
+HealthScore.displayName = "HealthScore";
+
+// src/patterns/LargeTitle/LargeTitle.tsx
+import { forwardRef as forwardRef50 } from "react";
+import { jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
+var LargeTitle = forwardRef50(function LargeTitle2({ title, eyebrow, trailing, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs44(
+    "header",
+    {
+      ref,
+      className: cn("px-screen flex items-end justify-between gap-3 py-3 pb-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs44("div", { className: "min-w-0 flex-1", children: [
+          eyebrow && /* @__PURE__ */ jsx52("div", { className: "text-m-eyebrow text-accent mb-[6px] font-mono tracking-wide uppercase", children: eyebrow }),
+          /* @__PURE__ */ jsx52("h1", { className: "text-m-h1 m-0 truncate leading-tight font-medium tracking-tight", children: title })
+        ] }),
+        trailing && /* @__PURE__ */ jsx52("div", { className: "shrink-0", children: trailing })
+      ]
+    }
+  );
+});
+LargeTitle.displayName = "LargeTitle";
+
+// src/patterns/Menubar/Menubar.tsx
+import * as RadixMenubar from "@radix-ui/react-menubar";
+import { forwardRef as forwardRef51 } from "react";
+import { jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
+var Menubar = forwardRef51(function Menubar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx53(
+    RadixMenubar.Root,
+    {
+      ref,
+      className: cn(
+        "border-border bg-panel flex h-[30px] items-center gap-[2px] border-b px-3",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Menubar.displayName = "Menubar";
+var MenubarMenu = RadixMenubar.Menu;
+var MenubarTrigger = forwardRef51(
+  function MenubarTrigger2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx53(
+      RadixMenubar.Trigger,
+      {
+        ref,
+        className: cn(
+          "text-text cursor-pointer rounded-xs border-0 bg-transparent px-[10px] py-1 text-[12px] outline-none",
+          "transition-colors duration-(--duration-micro)",
+          "data-[state=open]:bg-panel-2 hover:bg-panel-2",
+          "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+MenubarTrigger.displayName = "MenubarTrigger";
+var MenubarContent = forwardRef51(
+  function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
+    return /* @__PURE__ */ jsx53(RadixMenubar.Portal, { children: /* @__PURE__ */ jsx53(
+      RadixMenubar.Content,
+      {
+        ref,
+        sideOffset,
+        align,
+        className: cn(
+          "border-border-strong bg-panel z-popover min-w-[180px] rounded-md border p-1 shadow-lg outline-none",
+          "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+MenubarContent.displayName = "MenubarContent";
+var itemBase3 = cn(
+  "flex items-center gap-2 rounded-sm px-[10px] py-[6px] text-[12px] cursor-pointer outline-none",
+  "data-[highlighted]:bg-panel-2",
+  "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
+);
+var MenubarItem = forwardRef51(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs45(
+    RadixMenubar.Item,
+    {
+      ref,
+      className: cn(itemBase3, destructive ? "text-err" : "text-text", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx53("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ jsx53("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+      ]
+    }
+  );
+});
+MenubarItem.displayName = "MenubarItem";
+var MenubarSeparator = forwardRef51(
+  function MenubarSeparator2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx53(
+      RadixMenubar.Separator,
+      {
+        ref,
+        className: cn("bg-border my-1 h-px", className),
+        ...props
+      }
+    );
+  }
+);
+MenubarSeparator.displayName = "MenubarSeparator";
+
+// src/patterns/NavBar/NavBar.tsx
+import * as RadixNav from "@radix-ui/react-navigation-menu";
+import {
+  forwardRef as forwardRef53,
+  useCallback as useCallback10,
+  useEffect as useEffect9,
+  useRef as useRef7,
+  useState as useState14
+} from "react";
+
+// src/patterns/Sidebar/Sidebar.tsx
+import {
+  forwardRef as forwardRef52,
+  useCallback as useCallback9,
+  useState as useState13
+} from "react";
+import { Fragment as Fragment2, jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
+var Sidebar = forwardRef52(function Sidebar2({ width = 240, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsx54(
+    "aside",
+    {
+      ref,
+      style: { width, ...style },
       className: cn(
         "border-border bg-panel flex h-full flex-col gap-2 border-r p-[14px]",
         className
@@ -3387,12 +3862,12 @@ var Sidebar = forwardRef47(function Sidebar2({ width = 240, className, style, ..
   );
 });
 Sidebar.displayName = "Sidebar";
-var NavItem = forwardRef47(
+var NavItem = forwardRef52(
   function NavItem2({ icon, label, active, badge, href, disabled, className, ...props }, ref) {
-    const inner = /* @__PURE__ */ jsxs41(Fragment2, { children: [
-      icon && /* @__PURE__ */ jsx49("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
-      /* @__PURE__ */ jsx49("span", { className: "flex-1 truncate", children: label }),
-      badge != null && /* @__PURE__ */ jsx49(
+    const inner = /* @__PURE__ */ jsxs46(Fragment2, { children: [
+      icon && /* @__PURE__ */ jsx54("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
+      /* @__PURE__ */ jsx54("span", { className: "flex-1 truncate", children: label }),
+      badge != null && /* @__PURE__ */ jsx54(
         "span",
         {
           className: cn(
@@ -3413,7 +3888,7 @@ var NavItem = forwardRef47(
     );
     if (href) {
       const anchorProps = props;
-      return /* @__PURE__ */ jsx49(
+      return /* @__PURE__ */ jsx54(
         "a",
         {
           ref,
@@ -3427,7 +3902,7 @@ var NavItem = forwardRef47(
       );
     }
     const buttonProps = props;
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx54(
       "button",
       {
         ref,
@@ -3442,7 +3917,7 @@ var NavItem = forwardRef47(
   }
 );
 NavItem.displayName = "NavItem";
-var NavSection = forwardRef47(function NavSection2({
+var NavSection = forwardRef52(function NavSection2({
   label,
   icon,
   action,
@@ -3456,16 +3931,16 @@ var NavSection = forwardRef47(function NavSection2({
   ...props
 }, ref) {
   const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = useState12(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState13(defaultOpen);
   const isOpen = !collapsible || (isControlled ? open : internalOpen);
-  const toggle = useCallback8(() => {
+  const toggle = useCallback9(() => {
     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__ */ jsxs41("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
-    collapsible ? /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs46("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+    collapsible ? /* @__PURE__ */ jsxs46(
       "button",
       {
         type: "button",
@@ -3478,18 +3953,18 @@ var NavSection = forwardRef47(function NavSection2({
           "hover:text-text-muted"
         ),
         children: [
-          icon != null && /* @__PURE__ */ jsx49("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
-          /* @__PURE__ */ jsx49("span", { className: "flex-1 text-left", children: label }),
+          icon != null && /* @__PURE__ */ jsx54("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
+          /* @__PURE__ */ jsx54("span", { className: "flex-1 text-left", children: label }),
           action,
-          /* @__PURE__ */ jsx49("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
+          /* @__PURE__ */ jsx54("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
         ]
       }
-    ) : /* @__PURE__ */ jsxs41("div", { className: eyebrowClass, children: [
-      icon != null && /* @__PURE__ */ jsx49("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
-      /* @__PURE__ */ jsx49("span", { className: "flex-1", children: label }),
+    ) : /* @__PURE__ */ jsxs46("div", { className: eyebrowClass, children: [
+      icon != null && /* @__PURE__ */ jsx54("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
+      /* @__PURE__ */ jsx54("span", { className: "flex-1", children: label }),
       action
     ] }),
-    isOpen && /* @__PURE__ */ jsx49(
+    isOpen && /* @__PURE__ */ jsx54(
       "div",
       {
         className: cn("flex flex-col gap-[2px]", indent > 0 && "border-border ml-2 border-l"),
@@ -3502,12 +3977,12 @@ var NavSection = forwardRef47(function NavSection2({
 NavSection.displayName = "NavSection";
 
 // src/patterns/NavBar/NavBar.tsx
-import { Fragment as Fragment3, jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx55, jsxs as jsxs47 } from "react/jsx-runtime";
 function isActiveTree(item, activeId) {
   if (item.id === activeId) return true;
   return item.children?.some((c) => isActiveTree(c, activeId)) ?? false;
 }
-var NavBar = forwardRef48(function NavBar2({
+var NavBar = forwardRef53(function NavBar2({
   orientation = "horizontal",
   items,
   brand,
@@ -3521,17 +3996,17 @@ var NavBar = forwardRef48(function NavBar2({
   ...props
 }, ref) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState13(defaultValue);
+  const [internalValue, setInternalValue] = useState14(defaultValue);
   const activeId = isControlled ? value : internalValue;
-  const [drawerOpen, setDrawerOpen] = useState13(false);
-  const select = useCallback9(
+  const [drawerOpen, setDrawerOpen] = useState14(false);
+  const select = useCallback10(
     (id) => {
       if (!isControlled) setInternalValue(id);
       onValueChange?.(id);
     },
     [isControlled, onValueChange]
   );
-  const handleItemActivate = useCallback9(
+  const handleItemActivate = useCallback10(
     (id) => {
       select(id);
       setDrawerOpen(false);
@@ -3543,7 +4018,7 @@ var NavBar = forwardRef48(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__ */ jsx50("nav", { "aria-label": "Mobile navigation", className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx55("nav", { "aria-label": "Mobile navigation", className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ jsx55(
       VerticalItem,
       {
         item,
@@ -3553,14 +4028,14 @@ var NavBar = forwardRef48(function NavBar2({
       item.id
     )) })
   );
-  const mobileBar = responsive ? /* @__PURE__ */ jsxs42(
+  const mobileBar = responsive ? /* @__PURE__ */ jsxs47(
     "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__ */ jsx50(
+        /* @__PURE__ */ jsx55(
           "button",
           {
             type: "button",
@@ -3570,15 +4045,15 @@ var NavBar = forwardRef48(function NavBar2({
             children: "\u2630"
           }
         ),
-        brand && /* @__PURE__ */ jsx50("div", { className: "flex flex-1 items-center text-[13px] font-medium whitespace-nowrap", children: brand }),
-        actions && /* @__PURE__ */ jsx50("div", { className: "flex items-center gap-3", children: actions })
+        brand && /* @__PURE__ */ jsx55("div", { className: "flex flex-1 items-center text-[13px] font-medium whitespace-nowrap", children: brand }),
+        actions && /* @__PURE__ */ jsx55("div", { className: "flex items-center gap-3", children: actions })
       ]
     }
   ) : null;
   if (orientation === "horizontal") {
-    return /* @__PURE__ */ jsxs42(Fragment3, { children: [
+    return /* @__PURE__ */ jsxs47(Fragment3, { children: [
       mobileBar,
-      /* @__PURE__ */ jsxs42(
+      /* @__PURE__ */ jsxs47(
         "header",
         {
           ref,
@@ -3589,10 +4064,10 @@ var NavBar = forwardRef48(function NavBar2({
           ),
           ...props,
           children: [
-            brand && /* @__PURE__ */ jsx50("div", { className: "shrink-0 text-[13px] font-medium whitespace-nowrap", children: brand }),
-            /* @__PURE__ */ jsxs42(RadixNav.Root, { className: "relative flex-1", delayDuration: 120, children: [
-              /* @__PURE__ */ jsx50(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__ */ jsx50(
+            brand && /* @__PURE__ */ jsx55("div", { className: "shrink-0 text-[13px] font-medium whitespace-nowrap", children: brand }),
+            /* @__PURE__ */ jsxs47(RadixNav.Root, { className: "relative flex-1", delayDuration: 120, children: [
+              /* @__PURE__ */ jsx55(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__ */ jsx55(
                   HorizontalDropdown,
                   {
                     item,
@@ -3601,7 +4076,7 @@ var NavBar = forwardRef48(function NavBar2({
                     onActivate: handleItemActivate
                   },
                   item.id
-                ) : /* @__PURE__ */ jsx50(RadixNav.Item, { children: /* @__PURE__ */ jsx50(
+                ) : /* @__PURE__ */ jsx55(RadixNav.Item, { children: /* @__PURE__ */ jsx55(
                   HorizontalLink,
                   {
                     item,
@@ -3610,13 +4085,13 @@ var NavBar = forwardRef48(function NavBar2({
                   }
                 ) }, item.id)
               ) }),
-              /* @__PURE__ */ jsx50("div", { className: "z-popover absolute top-full left-0 flex justify-start", children: /* @__PURE__ */ jsx50(RadixNav.Viewport, { className: "origin-top-left data-[state=open]:animate-[ship-fade-in_120ms_var(--easing-out)]" }) })
+              /* @__PURE__ */ jsx55("div", { className: "z-popover absolute top-full left-0 flex justify-start", children: /* @__PURE__ */ jsx55(RadixNav.Viewport, { className: "origin-top-left data-[state=open]:animate-[ship-fade-in_120ms_var(--easing-out)]" }) })
             ] }),
-            actions && /* @__PURE__ */ jsx50("div", { className: "flex items-center gap-3", children: actions })
+            actions && /* @__PURE__ */ jsx55("div", { className: "flex items-center gap-3", children: actions })
           ]
         }
       ),
-      responsive && /* @__PURE__ */ jsx50(
+      responsive && /* @__PURE__ */ jsx55(
         Drawer,
         {
           open: drawerOpen,
@@ -3629,9 +4104,9 @@ var NavBar = forwardRef48(function NavBar2({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs42(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs47(Fragment3, { children: [
     mobileBar,
-    /* @__PURE__ */ jsxs42(
+    /* @__PURE__ */ jsxs47(
       "aside",
       {
         ref,
@@ -3644,8 +4119,8 @@ var NavBar = forwardRef48(function NavBar2({
         ),
         ...props,
         children: [
-          brand && /* @__PURE__ */ jsx50("div", { className: "px-2 py-1 text-[13px] font-medium", children: brand }),
-          /* @__PURE__ */ jsx50("nav", { "aria-label": "Sidebar navigation", className: "flex flex-1 flex-col gap-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ jsx50(
+          brand && /* @__PURE__ */ jsx55("div", { className: "px-2 py-1 text-[13px] font-medium", children: brand }),
+          /* @__PURE__ */ jsx55("nav", { "aria-label": "Sidebar navigation", className: "flex flex-1 flex-col gap-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ jsx55(
             VerticalItem,
             {
               item,
@@ -3654,11 +4129,11 @@ var NavBar = forwardRef48(function NavBar2({
             },
             item.id
           )) }),
-          actions && /* @__PURE__ */ jsx50("div", { className: "border-border mt-auto flex flex-col gap-2 border-t pt-3", children: actions })
+          actions && /* @__PURE__ */ jsx55("div", { className: "border-border mt-auto flex flex-col gap-2 border-t pt-3", children: actions })
         ]
       }
     ),
-    responsive && /* @__PURE__ */ jsx50(
+    responsive && /* @__PURE__ */ jsx55(
       Drawer,
       {
         open: drawerOpen,
@@ -3687,13 +4162,13 @@ function HorizontalLink({ item, active, onActivate }) {
     }
     onActivate(item.id);
   };
-  const inner = /* @__PURE__ */ jsxs42(Fragment3, { children: [
-    item.icon != null && /* @__PURE__ */ jsx50("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
-    /* @__PURE__ */ jsx50("span", { children: item.label }),
-    item.badge != null && /* @__PURE__ */ jsx50(ItemBadge, { active, children: item.badge })
+  const inner = /* @__PURE__ */ jsxs47(Fragment3, { children: [
+    item.icon != null && /* @__PURE__ */ jsx55("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+    /* @__PURE__ */ jsx55("span", { children: item.label }),
+    item.badge != null && /* @__PURE__ */ jsx55(ItemBadge, { active, children: item.badge })
   ] });
   if (item.href) {
-    return /* @__PURE__ */ jsx50(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx55(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx55(
       "a",
       {
         href: item.href,
@@ -3705,7 +4180,7 @@ function HorizontalLink({ item, active, onActivate }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx50(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx55(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx55(
     "button",
     {
       type: "button",
@@ -3718,8 +4193,8 @@ function HorizontalLink({ item, active, onActivate }) {
   ) });
 }
 function HorizontalDropdown({ item, active, activeId, onActivate }) {
-  return /* @__PURE__ */ jsxs42(RadixNav.Item, { children: [
-    /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs47(RadixNav.Item, { children: [
+    /* @__PURE__ */ jsxs47(
       RadixNav.Trigger,
       {
         className: cn(
@@ -3731,9 +4206,9 @@ function HorizontalDropdown({ item, active, activeId, onActivate }) {
         ),
         disabled: item.disabled,
         children: [
-          item.icon != null && /* @__PURE__ */ jsx50("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
-          /* @__PURE__ */ jsx50("span", { children: item.label }),
-          /* @__PURE__ */ jsx50(
+          item.icon != null && /* @__PURE__ */ jsx55("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+          /* @__PURE__ */ jsx55("span", { children: item.label }),
+          /* @__PURE__ */ jsx55(
             "span",
             {
               "aria-hidden": true,
@@ -3744,7 +4219,7 @@ function HorizontalDropdown({ item, active, activeId, onActivate }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx50(RadixNav.Content, { className: "border-border bg-panel min-w-[220px] rounded-xs border p-2 shadow-lg", children: /* @__PURE__ */ jsx50("ul", { className: "m-0! flex list-none! flex-col gap-[2px] p-0! [&_li]:m-0!", children: item.children.map((child) => /* @__PURE__ */ jsx50("li", { children: /* @__PURE__ */ jsx50(DropdownLink, { item: child, active: child.id === activeId, onActivate }) }, child.id)) }) })
+    /* @__PURE__ */ jsx55(RadixNav.Content, { className: "border-border bg-panel min-w-[220px] rounded-xs border p-2 shadow-lg", children: /* @__PURE__ */ jsx55("ul", { className: "m-0! flex list-none! flex-col gap-[2px] p-0! [&_li]:m-0!", children: item.children.map((child) => /* @__PURE__ */ jsx55("li", { children: /* @__PURE__ */ jsx55(DropdownLink, { item: child, active: child.id === activeId, onActivate }) }, child.id)) }) })
   ] });
 }
 function DropdownLink({ item, active, onActivate }) {
@@ -3761,13 +4236,13 @@ function DropdownLink({ item, active, onActivate }) {
     }
     onActivate(item.id);
   };
-  const inner = /* @__PURE__ */ jsxs42(Fragment3, { children: [
-    item.icon != null && /* @__PURE__ */ jsx50("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
-    /* @__PURE__ */ jsx50("span", { className: "flex-1", children: item.label }),
-    item.badge != null && /* @__PURE__ */ jsx50(ItemBadge, { active, children: item.badge })
+  const inner = /* @__PURE__ */ jsxs47(Fragment3, { children: [
+    item.icon != null && /* @__PURE__ */ jsx55("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+    /* @__PURE__ */ jsx55("span", { className: "flex-1", children: item.label }),
+    item.badge != null && /* @__PURE__ */ jsx55(ItemBadge, { active, children: item.badge })
   ] });
   if (item.href) {
-    return /* @__PURE__ */ jsx50(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx55(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx55(
       "a",
       {
         href: item.href,
@@ -3779,7 +4254,7 @@ function DropdownLink({ item, active, onActivate }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx50(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx55(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx55(
     "button",
     {
       type: "button",
@@ -3794,7 +4269,7 @@ 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] = useState13(treeActive);
+  const [open, setOpen] = useState14(treeActive);
   const prevTreeActive = useRef7(treeActive);
   useEffect9(() => {
     if (treeActive && !prevTreeActive.current) setOpen(true);
@@ -3808,7 +4283,7 @@ function VerticalItem({ item, activeId, onActivate }) {
       }
       onActivate(item.id);
     };
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx55(
       NavItem,
       {
         icon: item.icon,
@@ -3821,8 +4296,8 @@ function VerticalItem({ item, activeId, onActivate }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs42("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs47("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs47(
       "button",
       {
         type: "button",
@@ -3838,18 +4313,18 @@ function VerticalItem({ item, activeId, onActivate }) {
           item.disabled && "pointer-events-none opacity-50"
         ),
         children: [
-          item.icon != null && /* @__PURE__ */ jsx50("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: item.icon }),
-          /* @__PURE__ */ jsx50("span", { className: "flex-1 truncate", children: item.label }),
-          item.badge != null && /* @__PURE__ */ jsx50(ItemBadge, { active: treeActive, children: item.badge }),
-          /* @__PURE__ */ jsx50("span", { "aria-hidden": true, className: "text-[10px] opacity-60", children: open ? "\u25BE" : "\u25B8" })
+          item.icon != null && /* @__PURE__ */ jsx55("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: item.icon }),
+          /* @__PURE__ */ jsx55("span", { className: "flex-1 truncate", children: item.label }),
+          item.badge != null && /* @__PURE__ */ jsx55(ItemBadge, { active: treeActive, children: item.badge }),
+          /* @__PURE__ */ jsx55("span", { "aria-hidden": true, className: "text-[10px] opacity-60", children: open ? "\u25BE" : "\u25B8" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx50("div", { className: "border-border mt-1 ml-[18px] flex flex-col gap-[2px] border-l pl-3", children: item.children.map((child) => /* @__PURE__ */ jsx50(VerticalItem, { item: child, activeId, onActivate }, child.id)) })
+    open && /* @__PURE__ */ jsx55("div", { className: "border-border mt-1 ml-[18px] flex flex-col gap-[2px] border-l pl-3", children: item.children.map((child) => /* @__PURE__ */ jsx55(VerticalItem, { item: child, activeId, onActivate }, child.id)) })
   ] });
 }
 function ItemBadge({ active, children }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx55(
     "span",
     {
       className: cn(
@@ -3861,9 +4336,105 @@ function ItemBadge({ active, children }) {
   );
 }
 
+// src/patterns/OnboardingChecklist/OnboardingChecklist.tsx
+import { forwardRef as forwardRef54 } from "react";
+import { Fragment as Fragment4, jsx as jsx56, jsxs as jsxs48 } from "react/jsx-runtime";
+var statusDot = {
+  pending: "off",
+  "in-progress": "sync",
+  done: "ok"
+};
+var labelStateClass = {
+  pending: "text-text",
+  "in-progress": "text-text",
+  done: "text-text-dim line-through"
+};
+var OnboardingChecklist = forwardRef54(
+  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__ */ jsxs48(
+      "section",
+      {
+        ref,
+        "aria-label": typeof title === "string" ? title : void 0,
+        className: cn(
+          "rounded-base border-border bg-panel flex flex-col gap-3 border p-5",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs48("header", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx56("span", { className: "text-[14px] font-medium", children: title }),
+            /* @__PURE__ */ jsx56("span", { className: "text-text-dim ml-auto font-mono text-[11px] tabular-nums", children: progressLabel ?? `${done} of ${total} complete` })
+          ] }),
+          !hideProgress && total > 0 && /* @__PURE__ */ jsx56(
+            "div",
+            {
+              role: "progressbar",
+              "aria-valuemin": 0,
+              "aria-valuemax": total,
+              "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__ */ jsx56(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "block h-full rounded-full transition-[width] duration-(--duration-step)",
+                    done === total ? "bg-ok" : "bg-accent"
+                  ),
+                  style: { width: `${total > 0 ? done / total * 100 : 0}%` }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx56("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__ */ jsxs48(Fragment4, { children: [
+              /* @__PURE__ */ jsx56(
+                StatusDot,
+                {
+                  state: statusDot[item.status],
+                  pulse: item.status === "in-progress",
+                  size: 10,
+                  className: "mt-[3px]"
+                }
+              ),
+              /* @__PURE__ */ jsxs48("div", { className: "flex min-w-0 flex-1 flex-col gap-[2px]", children: [
+                /* @__PURE__ */ jsx56("span", { className: cn("text-[13px]", labelStateClass[item.status]), children: item.label }),
+                item.description && /* @__PURE__ */ jsx56("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__ */ jsxs48("li", { className: "flex items-start gap-2", children: [
+              interactive ? /* @__PURE__ */ jsx56(
+                "button",
+                {
+                  type: "button",
+                  "aria-current": item.status === "in-progress" ? "step" : void 0,
+                  onClick: () => onItemClick(item.id),
+                  className: labelRegionClass,
+                  children: labelBlock
+                }
+              ) : /* @__PURE__ */ jsx56("div", { className: labelRegionClass, children: labelBlock }),
+              item.action && /* @__PURE__ */ jsx56("div", { className: "shrink-0 self-center", children: item.action })
+            ] }, item.id);
+          }) })
+        ]
+      }
+    );
+  }
+);
+OnboardingChecklist.displayName = "OnboardingChecklist";
+
 // src/patterns/Pagination/Pagination.tsx
-import { forwardRef as forwardRef49 } from "react";
-import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
+import { forwardRef as forwardRef55 } from "react";
+import { jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
 function buildRange(page, total, siblings) {
   if (total <= 0) return [];
   const items = [];
@@ -3876,9 +4447,9 @@ function buildRange(page, total, siblings) {
   if (total > 1) items.push(total);
   return items;
 }
-var Pagination = forwardRef49(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
+var Pagination = forwardRef55(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
   const items = buildRange(page, total, siblings);
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs49(
     "nav",
     {
       ref,
@@ -3886,7 +4457,7 @@ var Pagination = forwardRef49(function Pagination2({ page, total, onPageChange,
       className: cn("inline-flex items-center gap-1", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx57(
           IconButton,
           {
             size: "sm",
@@ -3899,7 +4470,7 @@ var Pagination = forwardRef49(function Pagination2({ page, total, onPageChange,
         ),
         items.map((item, i) => {
           if (item === "start-ellipsis" || item === "end-ellipsis") {
-            return /* @__PURE__ */ jsx51(
+            return /* @__PURE__ */ jsx57(
               "span",
               {
                 "aria-hidden": true,
@@ -3910,7 +4481,7 @@ var Pagination = forwardRef49(function Pagination2({ page, total, onPageChange,
             );
           }
           const isActive = item === page;
-          return /* @__PURE__ */ jsx51(
+          return /* @__PURE__ */ jsx57(
             "button",
             {
               type: "button",
@@ -3928,7 +4499,7 @@ var Pagination = forwardRef49(function Pagination2({ page, total, onPageChange,
             item
           );
         }),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx57(
           IconButton,
           {
             size: "sm",
@@ -3947,8 +4518,8 @@ Pagination.displayName = "Pagination";
 
 // src/patterns/Progress/Progress.tsx
 import { cva as cva11 } from "class-variance-authority";
-import { forwardRef as forwardRef50 } from "react";
-import { jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
+import { forwardRef as forwardRef56 } from "react";
+import { jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
 var trackStyles = cva11("w-full rounded-full bg-panel-2 overflow-hidden", {
   variants: {
     size: {
@@ -3970,7 +4541,7 @@ var fillStyles = cva11("h-full rounded-full transition-[width] duration-(--durat
   },
   defaultVariants: { tone: "accent" }
 });
-var Progress = forwardRef50(function Progress2({
+var Progress = forwardRef56(function Progress2({
   value = 0,
   max = 100,
   indeterminate = false,
@@ -3984,15 +4555,15 @@ var Progress = forwardRef50(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__ */ jsxs44("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
-    label != null && /* @__PURE__ */ jsxs44("div", { className: "flex text-[12px]", children: [
-      /* @__PURE__ */ jsx52("span", { className: "text-text-muted", children: label }),
-      showValue && !indeterminate && /* @__PURE__ */ jsxs44("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
+  return /* @__PURE__ */ jsxs50("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+    label != null && /* @__PURE__ */ jsxs50("div", { className: "flex text-[12px]", children: [
+      /* @__PURE__ */ jsx58("span", { className: "text-text-muted", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ jsxs50("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
         display,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx58(
       "div",
       {
         role: "progressbar",
@@ -4001,7 +4572,7 @@ var Progress = forwardRef50(function Progress2({
         "aria-valuenow": indeterminate ? void 0 : display,
         "aria-label": typeof label === "string" ? label : void 0,
         className: trackStyles({ size }),
-        children: indeterminate ? /* @__PURE__ */ jsx52(
+        children: indeterminate ? /* @__PURE__ */ jsx58(
           "span",
           {
             "aria-hidden": true,
@@ -4011,94 +4582,61 @@ var Progress = forwardRef50(function Progress2({
               "animate-[ship-indeterminate_1.4s_linear_infinite]"
             )
           }
-        ) : /* @__PURE__ */ jsx52("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
+        ) : /* @__PURE__ */ jsx58("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
       }
     )
   ] });
 });
 Progress.displayName = "Progress";
 
-// src/patterns/RadialProgress/RadialProgress.tsx
-import { forwardRef as forwardRef51 } from "react";
-import { jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
-var toneStrokeClass = {
-  accent: "stroke-accent",
-  ok: "stroke-ok",
-  warn: "stroke-warn",
-  err: "stroke-err"
+// src/patterns/PullToRefresh/PullToRefresh.tsx
+import { forwardRef as forwardRef57 } from "react";
+import { jsx as jsx59, jsxs as jsxs51 } from "react/jsx-runtime";
+var labels = {
+  idle: "Pull to refresh",
+  pulling: "Pull to refresh",
+  ready: "Release to refresh",
+  loading: "Refreshing\u2026"
 };
-var RadialProgress = forwardRef51(
-  function RadialProgress2({
-    value,
-    max = 100,
-    size = 64,
-    thickness = 4,
-    tone,
-    children,
-    className,
-    "aria-label": ariaLabel,
-    ...props
-  }, ref) {
-    const clamped = Math.min(max, Math.max(0, value));
-    const pct = max > 0 ? clamped / max * 100 : 0;
-    const r = (size - thickness) / 2;
-    const c = 2 * Math.PI * r;
-    const dash = pct / 100 * c;
-    const resolvedTone = tone ?? (clamped >= max ? "ok" : "accent");
-    return /* @__PURE__ */ jsxs45(
-      "div",
-      {
-        ref,
-        role: "progressbar",
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        "aria-valuenow": Math.round(pct),
-        "aria-label": ariaLabel ?? `${Math.round(pct)}%`,
-        className: cn("relative inline-grid place-items-center", className),
-        style: { width: size, height: size },
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs45("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-            /* @__PURE__ */ jsx53(
-              "circle",
-              {
-                cx: size / 2,
-                cy: size / 2,
-                r,
-                fill: "none",
-                strokeWidth: thickness,
-                className: "stroke-panel-2"
-              }
+var PullToRefresh = forwardRef57(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__ */ jsxs51(
+    "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__ */ jsx59(
+          "div",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "border-border border-t-accent rounded-full border-2",
+              isLoading && "animate-[ship-spin_700ms_linear_infinite]"
             ),
-            /* @__PURE__ */ jsx53(
-              "circle",
-              {
-                cx: size / 2,
-                cy: size / 2,
-                r,
-                fill: "none",
-                strokeWidth: thickness,
-                strokeLinecap: "round",
-                strokeDasharray: `${dash} ${c}`,
-                transform: `rotate(-90 ${size / 2} ${size / 2})`,
-                className: cn(
-                  "transition-[stroke-dasharray] duration-(--duration-step)",
-                  toneStrokeClass[resolvedTone]
-                )
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx53("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
-        ]
-      }
-    );
-  }
-);
-RadialProgress.displayName = "RadialProgress";
+            style: {
+              width: 22,
+              height: 22,
+              transform: isLoading ? void 0 : transform,
+              transition: isLoading ? void 0 : "transform 200ms var(--easing-out)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx59("span", { className: "text-m-eyebrow font-mono tracking-wide uppercase", children: label ?? labels[state] })
+      ]
+    }
+  );
+});
+PullToRefresh.displayName = "PullToRefresh";
 
 // src/patterns/Sparkline/Sparkline.tsx
-import { forwardRef as forwardRef52, useMemo as useMemo5 } from "react";
-import { jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
+import { forwardRef as forwardRef58, useMemo as useMemo5 } from "react";
+import { jsx as jsx60, jsxs as jsxs52 } from "react/jsx-runtime";
 function buildPath(values, w, h) {
   if (values.length === 0) return { line: "", area: "" };
   const pad = 2;
@@ -4117,7 +4655,7 @@ function buildPath(values, w, h) {
   )} L${pad.toFixed(2)},${(h - pad).toFixed(2)} Z`;
   return { line, area };
 }
-var Sparkline = forwardRef52(function Sparkline2({
+var Sparkline = forwardRef58(function Sparkline2({
   values,
   width = 160,
   height = 32,
@@ -4129,7 +4667,7 @@ var Sparkline = forwardRef52(function Sparkline2({
   ...props
 }, ref) {
   const { line, area } = useMemo5(() => buildPath(values, width, height), [values, width, height]);
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs52(
     "svg",
     {
       ref,
@@ -4141,8 +4679,8 @@ var Sparkline = forwardRef52(function Sparkline2({
       className: cn("inline-block", className),
       ...props,
       children: [
-        fill && /* @__PURE__ */ jsx54("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
-        /* @__PURE__ */ jsx54(
+        fill && /* @__PURE__ */ jsx60("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
+        /* @__PURE__ */ jsx60(
           "path",
           {
             d: line,
@@ -4160,16 +4698,16 @@ var Sparkline = forwardRef52(function Sparkline2({
 Sparkline.displayName = "Sparkline";
 
 // src/patterns/Spinner/Spinner.tsx
-import { forwardRef as forwardRef53 } from "react";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { forwardRef as forwardRef59 } from "react";
+import { jsx as jsx61 } from "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 = forwardRef53(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
+var Spinner2 = forwardRef59(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
   const s = sizes[size];
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx61(
     "span",
     {
       ref,
@@ -4177,7 +4715,7 @@ var Spinner2 = forwardRef53(function Spinner3({ size = "md", label = "Loading",
       "aria-label": label,
       className: cn("inline-block", className),
       ...props,
-      children: /* @__PURE__ */ jsx55(
+      children: /* @__PURE__ */ jsx61(
         "span",
         {
           "aria-hidden": true,
@@ -4194,15 +4732,15 @@ var Spinner2 = forwardRef53(function Spinner3({ size = "md", label = "Loading",
 Spinner2.displayName = "Spinner";
 
 // src/patterns/Stepper/Stepper.tsx
-import { forwardRef as forwardRef54, Fragment as Fragment4 } from "react";
-import { jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
+import { forwardRef as forwardRef60, Fragment as Fragment5 } from "react";
+import { jsx as jsx62, jsxs as jsxs53 } from "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",
   current: "bg-accent-dim text-accent border-accent",
   upcoming: "bg-panel text-text-dim border-border"
 };
-var labelStateClass = {
+var labelStateClass2 = {
   done: "text-text",
   current: "text-text font-medium",
   upcoming: "text-text-dim"
@@ -4212,8 +4750,8 @@ function stateFor(index, current) {
   if (index === current) return "current";
   return "upcoming";
 }
-var Stepper = forwardRef54(function Stepper2({ steps, current, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx56(
+var Stepper = forwardRef60(function Stepper2({ steps, current, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx62(
     "ol",
     {
       ref,
@@ -4225,19 +4763,19 @@ var Stepper = forwardRef54(function Stepper2({ steps, current, className, ...pro
         const id = typeof step === "string" ? void 0 : step.id;
         const state = stateFor(i, current);
         const connectorActive = i < current;
-        return /* @__PURE__ */ jsxs47(Fragment4, { children: [
-          /* @__PURE__ */ jsxs47(
+        return /* @__PURE__ */ jsxs53(Fragment5, { children: [
+          /* @__PURE__ */ jsxs53(
             "li",
             {
               "aria-current": state === "current" ? "step" : void 0,
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsx56("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
-                /* @__PURE__ */ jsx56("span", { className: cn("text-[12px]", labelStateClass[state]), children: label })
+                /* @__PURE__ */ jsx62("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
+                /* @__PURE__ */ jsx62("span", { className: cn("text-[12px]", labelStateClass2[state]), children: label })
               ]
             }
           ),
-          i < steps.length - 1 && /* @__PURE__ */ jsx56(
+          i < steps.length - 1 && /* @__PURE__ */ jsx62(
             "span",
             {
               "aria-hidden": true,
@@ -4251,11 +4789,113 @@ var Stepper = forwardRef54(function Stepper2({ steps, current, className, ...pro
 });
 Stepper.displayName = "Stepper";
 
+// src/patterns/TabBar/TabBar.tsx
+import {
+  forwardRef as forwardRef61,
+  useCallback as useCallback11,
+  useState as useState15
+} from "react";
+import { jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
+var TabBar = forwardRef61(function TabBar2({ items, value, defaultValue, onValueChange, className, ...props }, ref) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState15(defaultValue);
+  const activeId = isControlled ? value : internalValue;
+  const handleSelect = useCallback11(
+    (id, e) => {
+      if (!isControlled) setInternalValue(id);
+      onValueChange?.(id);
+      e.stopPropagation();
+    },
+    [isControlled, onValueChange]
+  );
+  return /* @__PURE__ */ jsx63(
+    "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__ */ jsx63("div", { className: "grid place-items-center", children: /* @__PURE__ */ jsxs54(
+            "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__ */ jsx63("span", { "aria-hidden": true, children: item.icon }),
+                /* @__PURE__ */ jsx63("span", { className: "sr-only", children: item.label })
+              ]
+            }
+          ) }, item.id);
+        }
+        return /* @__PURE__ */ jsxs54(
+          "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__ */ jsxs54("span", { className: "relative inline-flex", "aria-hidden": true, children: [
+                item.icon,
+                item.badge != null && /* @__PURE__ */ jsx63(
+                  "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__ */ jsxs54("span", { className: "text-[10px] font-medium tracking-tight", children: [
+                item.label,
+                item.badge != null && /* @__PURE__ */ jsxs54("span", { className: "sr-only", children: [
+                  ", ",
+                  item.badge,
+                  " unread"
+                ] })
+              ] })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+});
+TabBar.displayName = "TabBar";
+
 // src/patterns/Tabs/Tabs.tsx
 import * as RadixTabs from "@radix-ui/react-tabs";
 import { cva as cva12 } from "class-variance-authority";
-import { createContext as createContext2, forwardRef as forwardRef55, useContext as useContext2 } from "react";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { createContext as createContext2, forwardRef as forwardRef62, useContext as useContext2 } from "react";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var TabsVariantContext = createContext2("underline");
 var tabsListStyles = cva12("", {
   variants: {
@@ -4286,8 +4926,8 @@ var tabsTriggerStyles = cva12(
     }
   }
 );
-var Tabs = forwardRef55(function Tabs2({ variant = "underline", className, ...props }, ref) {
-  return /* @__PURE__ */ jsx57(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx57(
+var Tabs = forwardRef62(function Tabs2({ variant = "underline", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx64(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx64(
     RadixTabs.Root,
     {
       ref,
@@ -4297,14 +4937,14 @@ var Tabs = forwardRef55(function Tabs2({ variant = "underline", className, ...pr
   ) });
 });
 Tabs.displayName = "Tabs";
-var TabsList = forwardRef55(function TabsList2({ className, ...props }, ref) {
+var TabsList = forwardRef62(function TabsList2({ className, ...props }, ref) {
   const variant = useContext2(TabsVariantContext);
-  return /* @__PURE__ */ jsx57(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
+  return /* @__PURE__ */ jsx64(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
 });
 TabsList.displayName = "TabsList";
-var Tab = forwardRef55(function Tab2({ className, ...props }, ref) {
+var Tab = forwardRef62(function Tab2({ className, ...props }, ref) {
   const variant = useContext2(TabsVariantContext);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx64(
     RadixTabs.Trigger,
     {
       ref,
@@ -4314,9 +4954,9 @@ var Tab = forwardRef55(function Tab2({ className, ...props }, ref) {
   );
 });
 Tab.displayName = "Tab";
-var TabsContent = forwardRef55(
+var TabsContent = forwardRef62(
   function TabsContent2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx57(
+    return /* @__PURE__ */ jsx64(
       RadixTabs.Content,
       {
         ref,
@@ -4332,8 +4972,8 @@ var TabsContent = forwardRef55(
 TabsContent.displayName = "TabsContent";
 
 // src/patterns/Timeline/Timeline.tsx
-import { forwardRef as forwardRef56 } from "react";
-import { jsx as jsx58, jsxs as jsxs48 } from "react/jsx-runtime";
+import { forwardRef as forwardRef63 } from "react";
+import { jsx as jsx65, jsxs as jsxs55 } from "react/jsx-runtime";
 var ringClass = {
   accent: "border-accent",
   ok: "border-ok",
@@ -4341,8 +4981,8 @@ var ringClass = {
   err: "border-err",
   muted: "border-text-dim"
 };
-var Timeline = forwardRef56(function Timeline2({ events, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx58(
+var Timeline = forwardRef63(function Timeline2({ events, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx65(
     "ol",
     {
       ref,
@@ -4352,14 +4992,14 @@ var Timeline = forwardRef56(function Timeline2({ events, className, children, ..
         className
       ),
       ...props,
-      children: events ? events.map((e, i) => /* @__PURE__ */ jsx58(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
+      children: events ? events.map((e, i) => /* @__PURE__ */ jsx65(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
     }
   );
 });
 Timeline.displayName = "Timeline";
-var TimelineItem = forwardRef56(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs48("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
-    /* @__PURE__ */ jsx58(
+var TimelineItem = forwardRef63(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs55("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
+    /* @__PURE__ */ jsx65(
       "span",
       {
         "aria-hidden": true,
@@ -4369,31 +5009,174 @@ var TimelineItem = forwardRef56(function TimelineItem2({ tone = "accent", descri
         )
       }
     ),
-    /* @__PURE__ */ jsx58("div", { className: "text-[13px] font-medium", children }),
-    description && /* @__PURE__ */ jsx58("div", { className: "text-text-muted text-[12px]", children: description }),
-    time && /* @__PURE__ */ jsx58("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
+    /* @__PURE__ */ jsx65("div", { className: "text-[13px] font-medium", children }),
+    description && /* @__PURE__ */ jsx65("div", { className: "text-text-muted text-[12px]", children: description }),
+    time && /* @__PURE__ */ jsx65("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
   ] });
 });
 TimelineItem.displayName = "TimelineItem";
 
+// src/patterns/Timeline/ActivityTimeline.tsx
+import { forwardRef as forwardRef64 } from "react";
+
+// src/patterns/Timeline/formatRelative.ts
+var SECOND = 1e3;
+var MINUTE = 60 * SECOND;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+var WEEK = 7 * DAY;
+var MONTH = 30 * DAY;
+var YEAR = 365 * DAY;
+var UNITS = [
+  { ms: YEAR, short: "y" },
+  { ms: MONTH, short: "mo" },
+  { ms: WEEK, short: "w" },
+  { ms: DAY, short: "d" },
+  { ms: HOUR, short: "h" },
+  { ms: MINUTE, short: "m" },
+  { ms: SECOND, short: "s" }
+];
+function formatRelative(input, now = /* @__PURE__ */ new Date()) {
+  const target = input instanceof Date ? input : new Date(input);
+  if (Number.isNaN(target.getTime())) return "";
+  const diffMs = now.getTime() - target.getTime();
+  const abs = Math.abs(diffMs);
+  if (abs < 5 * SECOND) return "just now";
+  for (const unit of UNITS) {
+    if (abs >= unit.ms) {
+      const n = Math.floor(abs / unit.ms);
+      return diffMs >= 0 ? `${n}${unit.short} ago` : `in ${n}${unit.short}`;
+    }
+  }
+  return "just now";
+}
+
+// src/patterns/Timeline/ActivityTimeline.tsx
+import { jsx as jsx66, jsxs as jsxs56 } from "react/jsx-runtime";
+var ringClass2 = {
+  accent: "border-accent",
+  ok: "border-ok",
+  warn: "border-warn",
+  err: "border-err",
+  muted: "border-text-dim"
+};
+var ActivityTimeline = forwardRef64(
+  function ActivityTimeline2({ events, relativeNow, className, ...props }, ref) {
+    const now = relativeNow ?? /* @__PURE__ */ new Date();
+    return /* @__PURE__ */ jsx66(
+      "ol",
+      {
+        ref,
+        className: cn(
+          "relative m-0 list-none p-0 pl-6",
+          "before:bg-border before:absolute before:top-[6px] before:bottom-[6px] before:left-[7px] before:w-px",
+          className
+        ),
+        ...props,
+        children: events.map((event) => {
+          const tone = event.tone ?? "accent";
+          const time = formatRelative(event.at, now);
+          return /* @__PURE__ */ jsxs56("li", { className: "relative mb-4 last:mb-0", children: [
+            /* @__PURE__ */ jsx66(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "bg-bg absolute top-[4px] -left-6 h-[14px] w-[14px] rounded-full border-2",
+                  ringClass2[tone]
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs56("div", { className: "flex items-baseline gap-2", children: [
+              event.icon && /* @__PURE__ */ jsx66("span", { "aria-hidden": true, className: "text-text-muted font-mono text-[12px]", children: event.icon }),
+              /* @__PURE__ */ jsx66("div", { className: "text-[13px] font-medium", children: event.title }),
+              time && /* @__PURE__ */ jsx66("time", { className: "text-text-dim ml-auto font-mono text-[10px]", children: time })
+            ] }),
+            event.actor && /* @__PURE__ */ jsxs56("div", { className: "text-text-muted mt-[2px] flex items-center gap-[6px] text-[12px]", children: [
+              event.actor.avatar && /* @__PURE__ */ jsx66("span", { "aria-hidden": true, className: "inline-flex", children: event.actor.avatar }),
+              /* @__PURE__ */ jsx66("span", { children: event.actor.name })
+            ] }),
+            event.payload && /* @__PURE__ */ jsx66("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);
+        })
+      }
+    );
+  }
+);
+ActivityTimeline.displayName = "ActivityTimeline";
+
 // src/patterns/Topbar/Topbar.tsx
-import { forwardRef as forwardRef57 } from "react";
-import { jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
-var Topbar = forwardRef57(function Topbar2({ title, leading, actions, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs49(
+import { forwardRef as forwardRef65 } from "react";
+import { jsx as jsx67, jsxs as jsxs57 } from "react/jsx-runtime";
+var Topbar = forwardRef65(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__ */ jsxs57(
     "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__ */ jsx67(
+          "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__ */ jsx67(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsx67("path", { d: "m15 18-6-6 6-6" })
+              }
+            )
+          }
+        ),
         leading,
-        title && /* @__PURE__ */ jsx59("div", { className: "text-[13px] font-medium", children: title }),
-        /* @__PURE__ */ jsx59("div", { className: "flex flex-1 items-center" }),
-        actions && /* @__PURE__ */ jsx59("div", { className: "flex items-center gap-3", children: actions }),
+        (title || isTouch && eyebrow) && /* @__PURE__ */ jsxs57("div", { className: cn("min-w-0", isTouch && "flex-1"), children: [
+          isTouch && eyebrow && /* @__PURE__ */ jsx67("div", { className: "text-m-eyebrow text-accent font-mono tracking-wide uppercase", children: eyebrow }),
+          title && /* @__PURE__ */ jsx67(
+            "div",
+            {
+              className: cn(
+                isTouch ? "text-m-body-lg truncate font-semibold tracking-tight" : "text-[13px] font-medium"
+              ),
+              children: title
+            }
+          )
+        ] }),
+        !isTouch && /* @__PURE__ */ jsx67("div", { className: "flex flex-1 items-center" }),
+        actions && /* @__PURE__ */ jsx67("div", { className: cn("flex items-center", isTouch ? "gap-1" : "gap-3"), children: actions }),
         children
       ]
     }
@@ -4403,14 +5186,14 @@ Topbar.displayName = "Topbar";
 
 // src/patterns/Tree/Tree.tsx
 import {
-  forwardRef as forwardRef58,
-  useCallback as useCallback10,
+  forwardRef as forwardRef66,
+  useCallback as useCallback12,
   useEffect as useEffect10,
   useMemo as useMemo6,
   useRef as useRef8,
-  useState as useState14
+  useState as useState16
 } from "react";
-import { jsx as jsx60, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs58 } from "react/jsx-runtime";
 var EMPTY_SET2 = /* @__PURE__ */ new Set();
 function flattenVisible(items, expanded, level, parentId, out) {
   for (const item of items) {
@@ -4421,7 +5204,7 @@ function flattenVisible(items, expanded, level, parentId, out) {
     }
   }
 }
-var Tree = forwardRef58(function Tree2({
+var Tree = forwardRef66(function Tree2({
   items,
   expanded: expandedProp,
   defaultExpanded,
@@ -4449,7 +5232,7 @@ var Tree = forwardRef58(function Tree2({
     flattenVisible(items, expandedSet, 1, null, out);
     return out;
   }, [items, expandedSet]);
-  const [activeId, setActiveId] = useState14(null);
+  const [activeId, setActiveId] = useState16(null);
   useEffect10(() => {
     if (activeId && !flatVisible.some((f) => f.id === activeId)) {
       setActiveId(null);
@@ -4461,7 +5244,7 @@ var Tree = forwardRef58(function Tree2({
     return flatVisible[0]?.id ?? null;
   }, [activeId, flatVisible, value]);
   const listRef = useRef8(null);
-  const setRefs = useCallback10(
+  const setRefs = useCallback12(
     (node) => {
       listRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -4469,20 +5252,20 @@ var Tree = forwardRef58(function Tree2({
     },
     [ref]
   );
-  const focusItem = useCallback10((id) => {
+  const focusItem = useCallback12((id) => {
     const root = listRef.current;
     if (!root) return;
     const el = root.querySelector(`[data-treeitem-id="${CSS.escape(id)}"]`);
     el?.focus();
   }, []);
-  const moveActive = useCallback10(
+  const moveActive = useCallback12(
     (id) => {
       setActiveId(id);
       queueMicrotask(() => focusItem(id));
     },
     [focusItem]
   );
-  const toggle = useCallback10(
+  const toggle = useCallback12(
     (id) => {
       setExpanded((prev) => {
         const next = new Set(prev ?? EMPTY_SET2);
@@ -4493,7 +5276,7 @@ var Tree = forwardRef58(function Tree2({
     },
     [setExpanded]
   );
-  const expand = useCallback10(
+  const expand = useCallback12(
     (id) => {
       setExpanded((prev) => {
         const base = prev ?? EMPTY_SET2;
@@ -4505,7 +5288,7 @@ var Tree = forwardRef58(function Tree2({
     },
     [setExpanded]
   );
-  const collapse = useCallback10(
+  const collapse = useCallback12(
     (id) => {
       setExpanded((prev) => {
         const base = prev ?? EMPTY_SET2;
@@ -4517,13 +5300,13 @@ var Tree = forwardRef58(function Tree2({
     },
     [setExpanded]
   );
-  const selectItem = useCallback10(
+  const selectItem = useCallback12(
     (id) => {
       setValue(id);
     },
     [setValue]
   );
-  const handleKeyDown = useCallback10(
+  const handleKeyDown = useCallback12(
     (e) => {
       onKeyDown?.(e);
       if (e.defaultPrevented) return;
@@ -4603,7 +5386,7 @@ var Tree = forwardRef58(function Tree2({
       toggle
     ]
   );
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx68(
     "ul",
     {
       ref: setRefs,
@@ -4611,7 +5394,7 @@ var Tree = forwardRef58(function Tree2({
       className: cn("flex flex-col gap-px text-[12px]", className),
       onKeyDown: handleKeyDown,
       ...props,
-      children: items.map((item) => /* @__PURE__ */ jsx60(
+      children: items.map((item) => /* @__PURE__ */ jsx68(
         TreeItemRow,
         {
           item,
@@ -4646,8 +5429,8 @@ function TreeItemRow({
   const isExpanded = hasChildren && expanded.has(item.id);
   const isSelected = selected === item.id;
   const isTabStop = tabStopId === item.id;
-  return /* @__PURE__ */ jsxs50("li", { role: "none", children: [
-    /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs58("li", { role: "none", children: [
+    /* @__PURE__ */ jsxs58(
       "div",
       {
         role: "treeitem",
@@ -4670,14 +5453,14 @@ function TreeItemRow({
           isSelected ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
         ),
         children: [
-          /* @__PURE__ */ jsx60("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
-          item.icon && /* @__PURE__ */ jsx60("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
-          /* @__PURE__ */ jsx60("span", { className: "flex-1 truncate", children: item.label }),
+          /* @__PURE__ */ jsx68("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
+          item.icon && /* @__PURE__ */ jsx68("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
+          /* @__PURE__ */ jsx68("span", { className: "flex-1 truncate", children: item.label }),
           item.trailing
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx60("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ jsx60(
+    hasChildren && isExpanded && /* @__PURE__ */ jsx68("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ jsx68(
       TreeItemRow,
       {
         item: child,
@@ -4693,7 +5476,83 @@ function TreeItemRow({
     )) })
   ] });
 }
+
+// src/patterns/WizardDialog/WizardDialog.tsx
+import * as RadixDialog5 from "@radix-ui/react-dialog";
+import { forwardRef as forwardRef67, useCallback as useCallback13, useMemo as useMemo7, useState as useState17 } from "react";
+import { jsx as jsx69, jsxs as jsxs59 } from "react/jsx-runtime";
+var WizardDialog = forwardRef67(function WizardDialog2({
+  open,
+  defaultOpen,
+  onOpenChange,
+  steps,
+  initialStep = 0,
+  onComplete,
+  title,
+  description,
+  width = 560,
+  nextLabel = "Next",
+  completeLabel = "Done",
+  backLabel = "Back",
+  cancelLabel,
+  onCancel
+}, ref) {
+  const [current, setCurrent] = useState17(initialStep);
+  const total = steps.length;
+  const safeCurrent = Math.min(current, Math.max(0, total - 1));
+  const step = steps[safeCurrent];
+  const goTo = useCallback13(
+    (index) => {
+      setCurrent(Math.min(Math.max(0, index), Math.max(0, total - 1)));
+    },
+    [total]
+  );
+  const goNext = useCallback13(() => setCurrent((c) => Math.min(c + 1, total - 1)), [total]);
+  const goBack = useCallback13(() => setCurrent((c) => Math.max(c - 1, 0)), []);
+  const ctx = useMemo7(
+    () => ({
+      current: safeCurrent,
+      total,
+      goNext,
+      goBack,
+      goTo,
+      isFirst: safeCurrent === 0,
+      isLast: safeCurrent >= total - 1
+    }),
+    [safeCurrent, total, goNext, goBack, goTo]
+  );
+  const stepperSteps = useMemo7(() => 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;
+  const handlePrimary = () => {
+    if (ctx.isLast) {
+      onComplete?.();
+    } else {
+      goNext();
+    }
+  };
+  return /* @__PURE__ */ jsx69(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ jsxs59(DialogContent, { ref, width, children: [
+    title && /* @__PURE__ */ jsx69(WizardTitle, { children: title }),
+    description && /* @__PURE__ */ jsx69(WizardDescription, { children: description }),
+    /* @__PURE__ */ jsx69("div", { className: "mb-5", children: /* @__PURE__ */ jsx69(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
+    /* @__PURE__ */ jsx69("div", { className: "mb-5", children: body }),
+    /* @__PURE__ */ jsxs59("div", { className: "flex justify-end gap-2", children: [
+      cancelLabel && /* @__PURE__ */ jsx69(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ jsx69(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
+      /* @__PURE__ */ jsx69(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
+    ] })
+  ] }) });
+});
+function WizardTitle({ children }) {
+  return /* @__PURE__ */ jsx69(RadixDialog5.Title, { className: "mb-2 text-[16px] font-medium", children });
+}
+function WizardDescription({ children }) {
+  return /* @__PURE__ */ jsx69(RadixDialog5.Description, { className: "text-text-muted mb-4 text-[13px] leading-[1.55]", children });
+}
+WizardDialog.displayName = "WizardDialog";
 export {
+  ActivityTimeline,
   Alert,
   AlertDialog,
   AlertDialogAction,
@@ -4746,6 +5605,8 @@ export {
   FAB,
   Field,
   FileChip,
+  FilterPanel,
+  HealthScore,
   HoverCard,
   HoverCardContent,
   HoverCardPortal,
@@ -4754,6 +5615,7 @@ export {
   IconButton,
   Input,
   Kbd,
+  LargeTitle,
   MenuCheckboxItem,
   MenuItem,
   MenuSeparator,
@@ -4767,6 +5629,7 @@ export {
   NavItem,
   NavSection,
   OTP,
+  OnboardingChecklist,
   Pagination,
   Popover,
   PopoverAnchor,
@@ -4777,9 +5640,11 @@ export {
   PopoverRoot,
   PopoverTrigger,
   Progress,
+  PullToRefresh,
   RadialProgress,
   Radio,
   RadioGroup,
+  ScrollArea,
   SearchInput,
   Select,
   SelectContent,
@@ -4802,6 +5667,7 @@ export {
   Stepper,
   Switch,
   Tab,
+  TabBar,
   Tabs,
   TabsContent,
   TabsList,
@@ -4820,11 +5686,13 @@ export {
   TooltipTrigger,
   Topbar,
   Tree,
+  WizardDialog,
   badgeStyles,
   buttonStyles,
   cardStyles,
   cn,
   filterCommandItems,
+  formatRelative,
   iconButtonStyles,
   useControllableState,
   useDisclosure,