@ship-it-ui/ui 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,30 +1,14 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { forwardRef, Children, isValidElement, cloneElement, useId, useRef, useState, useImperativeHandle, createContext, useMemo, useEffect, Fragment as Fragment$1, useContext, useCallback } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
-import * as RadixRadio from '@radix-ui/react-radio-group';
-import * as RadixSelect from '@radix-ui/react-select';
-import * as RadixSlider from '@radix-ui/react-slider';
-import * as RadixSwitch from '@radix-ui/react-switch';
-import * as RadixAvatar from '@radix-ui/react-avatar';
-import * as RadixContext from '@radix-ui/react-context-menu';
-import * as RadixDialog from '@radix-ui/react-dialog';
-import * as RadixAlert from '@radix-ui/react-alert-dialog';
-import * as RadixMenu from '@radix-ui/react-dropdown-menu';
-import * as RadixHoverCard from '@radix-ui/react-hover-card';
-import * as RadixPopover from '@radix-ui/react-popover';
-import * as RadixToast from '@radix-ui/react-toast';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import * as RadixMenubar from '@radix-ui/react-menubar';
-import * as RadixTabs from '@radix-ui/react-tabs';
+'use client';
 
 // src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// src/hooks/useControllableState.ts
+import { useCallback, useRef, useState } from "react";
 function useControllableState({
   value: controlledValue,
   defaultValue,
@@ -51,31 +35,48 @@ function useControllableState({
   );
   return [value, setValue];
 }
+
+// src/hooks/useDisclosure.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
 function useDisclosure(initial = false) {
-  const [open, setOpen] = useState(initial);
-  const onOpen = useCallback(() => setOpen(true), []);
-  const onClose = useCallback(() => setOpen(false), []);
-  const onToggle = useCallback(() => setOpen((o) => !o), []);
+  const [open, setOpen] = useState2(initial);
+  const onOpen = useCallback2(() => setOpen(true), []);
+  const onClose = useCallback2(() => setOpen(false), []);
+  const onToggle = useCallback2(() => setOpen((o) => !o), []);
   return { open, onOpen, onClose, onToggle, setOpen };
 }
+
+// src/hooks/useEscape.ts
+import { useEffect, useRef as useRef2 } from "react";
 function useEscape(handler, enabled = true) {
+  const handlerRef = useRef2(handler);
+  useEffect(() => {
+    handlerRef.current = handler;
+  }, [handler]);
   useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
-      if (e.key === "Escape") handler();
+      if (e.key === "Escape") handlerRef.current();
     };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [handler, enabled]);
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled]);
 }
+
+// src/hooks/useIsomorphicLayoutEffect.ts
+import { useEffect as useEffect2, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect2;
+
+// src/hooks/useKeyboardList.ts
+import { useCallback as useCallback3, useState as useState3 } from "react";
 function useKeyboardList({
   count,
   loop = true,
   defaultCursor = 0,
   onSelect
 }) {
-  const [cursor, setCursor] = useState(defaultCursor);
-  const move = useCallback(
+  const [cursor, setCursor] = useState3(defaultCursor);
+  const move = useCallback3(
     (delta) => {
       if (count <= 0) return;
       setCursor((c) => {
@@ -86,7 +87,7 @@ function useKeyboardList({
     },
     [count, loop]
   );
-  const onKeyDown = useCallback(
+  const onKeyDown = useCallback3(
     (event) => {
       if (count <= 0) return;
       switch (event.key) {
@@ -112,6 +113,8 @@ function useKeyboardList({
             onSelect(cursor);
           }
           break;
+        default:
+          break;
       }
     },
     [count, cursor, move, onSelect]
@@ -119,23 +122,30 @@ function useKeyboardList({
   const safeCursor = count > 0 ? Math.min(cursor, count - 1) : 0;
   return { cursor: safeCursor, setCursor, onKeyDown };
 }
+
+// src/hooks/useOutsideClick.ts
+import { useEffect as useEffect3 } from "react";
 function useOutsideClick(ref, handler, enabled = true) {
-  useEffect(() => {
+  useEffect3(() => {
     if (!enabled) return;
     const onDown = (e) => {
       const el = ref.current;
       if (el && e.target instanceof Node && !el.contains(e.target)) handler();
     };
-    document.addEventListener("mousedown", onDown);
-    return () => document.removeEventListener("mousedown", onDown);
+    document.addEventListener("pointerdown", onDown);
+    return () => document.removeEventListener("pointerdown", onDown);
   }, [ref, handler, enabled]);
 }
+
+// src/hooks/useTheme.ts
+import { useCallback as useCallback4, useEffect as useEffect4, useState as useState4 } from "react";
 function useTheme() {
-  const [theme, setThemeState] = useState(() => {
-    if (typeof document === "undefined") return "dark";
-    return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
-  });
-  const setTheme = useCallback((next) => {
+  const [theme, setThemeState] = useState4("dark");
+  const setTheme = useCallback4((next) => {
+    if (typeof document === "undefined") {
+      setThemeState(next);
+      return;
+    }
     if (next === "light") {
       document.documentElement.setAttribute("data-theme", "light");
     } else {
@@ -143,10 +153,12 @@ function useTheme() {
     }
     setThemeState(next);
   }, []);
-  const toggle = useCallback(() => {
+  const toggle = useCallback4(() => {
     setTheme(theme === "dark" ? "light" : "dark");
   }, [theme, setTheme]);
-  useEffect(() => {
+  useEffect4(() => {
+    const initial = document.documentElement.getAttribute("data-theme");
+    setThemeState(initial === "light" ? "light" : "dark");
     const observer = new MutationObserver(() => {
       const attr = document.documentElement.getAttribute("data-theme");
       setThemeState(attr === "light" ? "light" : "dark");
@@ -159,6 +171,12 @@ function useTheme() {
   }, []);
   return { theme, setTheme, toggle };
 }
+
+// src/components/Button/Button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 var buttonStyles = cva(
   [
     "inline-flex items-center justify-center whitespace-nowrap",
@@ -255,7 +273,12 @@ var Button = forwardRef(function Button2({
   );
 });
 Button.displayName = "Button";
-var iconButtonStyles = cva(
+
+// src/components/Button/IconButton.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var iconButtonStyles = cva2(
   [
     "inline-grid place-items-center transition-[background,filter,color] duration-(--duration-micro)",
     "outline-none focus-visible:ring-[3px] focus-visible:ring-accent-dim",
@@ -263,11 +286,16 @@ var iconButtonStyles = cva(
   ],
   {
     variants: {
+      // Mirrors `Button`'s variant set, minus `link` — an underlined link
+      // affordance is awkward for an icon-only target, so we omit it
+      // intentionally. Use `<Button variant="link" icon={…} />` if you need it.
       variant: {
         primary: "bg-accent text-on-accent border border-accent hover:brightness-110",
         secondary: "bg-panel-2 text-text-muted border border-border hover:bg-[color-mix(in_oklab,var(--color-panel-2),white_4%)]",
         ghost: "bg-transparent text-text-muted border border-transparent hover:bg-panel-2 hover:text-text",
-        outline: "bg-transparent text-text-muted border border-border-strong hover:bg-panel-2 hover:text-text"
+        outline: "bg-transparent text-text-muted border border-border-strong hover:bg-panel-2 hover:text-text",
+        destructive: "bg-err text-on-accent border border-err hover:brightness-110 active:brightness-95",
+        success: "bg-ok text-on-accent border border-ok hover:brightness-110 active:brightness-95"
       },
       size: {
         sm: "h-[26px] w-[26px] text-[12px] rounded-[5px]",
@@ -278,8 +306,8 @@ var iconButtonStyles = cva(
     defaultVariants: { variant: "secondary", size: "md" }
   }
 );
-var IconButton = forwardRef(function IconButton2({ variant, size, icon, type, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
+var IconButton = forwardRef2(function IconButton2({ variant, size, icon, type, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       ref,
@@ -291,9 +319,18 @@ var IconButton = forwardRef(function IconButton2({ variant, size, icon, type, cl
   );
 });
 IconButton.displayName = "IconButton";
-var ButtonGroup = forwardRef(function ButtonGroup2({ orientation = "horizontal", className, children, ...props }, ref) {
+
+// src/components/Button/ButtonGroup.tsx
+import {
+  Children,
+  cloneElement,
+  forwardRef as forwardRef3,
+  isValidElement
+} from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ButtonGroup = forwardRef3(function ButtonGroup2({ orientation = "horizontal", className, children, ...props }, ref) {
   const items = Children.toArray(children).filter(isValidElement);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       ref,
@@ -320,27 +357,42 @@ var ButtonGroup = forwardRef(function ButtonGroup2({ orientation = "horizontal",
   );
 });
 ButtonGroup.displayName = "ButtonGroup";
-var SplitButton = forwardRef(function SplitButton2({ variant = "primary", size = "md", onClick, onMenu, disabled, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex", className), ...props, children: [
-    /* @__PURE__ */ jsx(
+
+// src/components/Button/SplitButton.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var SplitButton = forwardRef4(function SplitButton2({
+  variant = "primary",
+  size = "md",
+  onClick,
+  onMenu,
+  disabled,
+  menuAriaLabel = "More actions",
+  className,
+  children,
+  ...props
+}, ref) {
+  const dividerBorder = variant === "primary" || variant === "destructive" || variant === "success" ? "border-r-on-accent/20" : "border-r-border-strong";
+  return /* @__PURE__ */ jsxs2("div", { ref, className: cn("inline-flex", className), ...props, children: [
+    /* @__PURE__ */ jsx4(
       Button,
       {
         variant,
         size,
         onClick,
         disabled,
-        className: "rounded-r-none border-r border-r-black/20",
+        className: cn("rounded-r-none border-r", dividerBorder),
         children
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx4(
       Button,
       {
         variant,
         size,
         onClick: onMenu,
         disabled,
-        "aria-label": "More actions",
+        "aria-label": menuAriaLabel,
         className: "rounded-l-none px-2",
         children: "\u25BE"
       }
@@ -348,8 +400,12 @@ var SplitButton = forwardRef(function SplitButton2({ variant = "primary", size =
   ] });
 });
 SplitButton.displayName = "SplitButton";
-var FAB = forwardRef(function FAB2({ icon = "\u2726", type, className, style, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
+
+// src/components/Button/FAB.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var FAB = forwardRef5(function FAB2({ icon = "\u2726", type, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsx5(
     "button",
     {
       ref,
@@ -371,10 +427,15 @@ var FAB = forwardRef(function FAB2({ icon = "\u2726", type, className, style, ..
   );
 });
 FAB.displayName = "FAB";
-var Checkbox = forwardRef(function Checkbox2({ label, className, id: idProp, ...props }, ref) {
+
+// src/components/Checkbox/Checkbox.tsx
+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) {
   const reactId = useId();
   const id = idProp ?? `cb-${reactId}`;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3(
     "span",
     {
       className: cn(
@@ -383,7 +444,7 @@ var Checkbox = forwardRef(function Checkbox2({ label, className, id: idProp, ...
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx6(
           RadixCheckbox.Root,
           {
             ref,
@@ -397,36 +458,45 @@ var Checkbox = forwardRef(function Checkbox2({ label, className, id: idProp, ...
               "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
             ),
             ...props,
-            children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "text-on-accent text-[11px] leading-none", children: props.checked === "indeterminate" ? "\u2212" : "\u2713" })
+            children: /* @__PURE__ */ jsx6(RadixCheckbox.Indicator, { className: "text-on-accent text-[11px] leading-none", children: props.checked === "indeterminate" ? "\u2212" : "\u2713" })
           }
         ),
-        label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+        label && /* @__PURE__ */ jsx6("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
       ]
     }
   );
 });
 Checkbox.displayName = "Checkbox";
+
+// src/components/Field/Field.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function Field({ label, hint, error, required, className, children, ...props }) {
-  const reactId = useId();
+  const reactId = useId2();
   const id = `field-${reactId}`;
   const hintId = hint && !error ? `${id}-hint` : void 0;
   const errorId = error ? `${id}-error` : void 0;
   const describedBy = errorId ?? hintId;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-[6px]", className), ...props, children: [
-    label && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "text-text-muted text-[11px] font-medium", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col gap-[6px]", className), ...props, children: [
+    label && /* @__PURE__ */ jsxs4("label", { htmlFor: id, className: "text-text-muted text-[11px] font-medium", children: [
       label,
-      required && /* @__PURE__ */ jsx("span", { className: "text-err ml-1", children: "*" })
+      required && /* @__PURE__ */ jsx7("span", { className: "text-err ml-1", children: "*" })
     ] }),
     children({
       id,
       "aria-describedby": describedBy,
       "aria-invalid": error ? true : void 0
     }),
-    hint && !error && /* @__PURE__ */ jsx("div", { id: hintId, className: "text-text-dim text-[11px]", children: hint }),
-    error && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-err text-[11px]", children: error })
+    hint && !error && /* @__PURE__ */ jsx7("div", { id: hintId, className: "text-text-dim text-[11px]", children: hint }),
+    error && /* @__PURE__ */ jsx7("div", { id: errorId, className: "text-err text-[11px]", children: error })
   ] });
 }
-var inputWrapperStyles = cva(
+
+// src/components/Input/Input.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var inputWrapperStyles = cva3(
   [
     "flex items-center gap-[6px] font-sans transition-[border-color,box-shadow] duration-(--duration-micro)",
     "border focus-within:ring-[3px]",
@@ -441,22 +511,22 @@ var inputWrapperStyles = cva(
       },
       tone: {
         default: "bg-panel border-border focus-within:border-accent focus-within:ring-accent-dim",
-        error: "bg-panel border-err focus-within:border-err focus-within:ring-[oklch(0.55_0.18_30/0.18)]"
+        err: "bg-panel border-err focus-within:border-err focus-within:ring-err/30"
       }
     },
     defaultVariants: { size: "md", tone: "default" }
   }
 );
-var Input = forwardRef(function Input2({ size, tone, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
-  const computedTone = error ? "error" : tone;
-  return /* @__PURE__ */ jsxs(
+var Input = forwardRef7(function Input2({ size, tone, 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),
       style: { width, ...style },
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "text-text-dim leading-none", children: icon }),
-        /* @__PURE__ */ jsx(
+        icon && /* @__PURE__ */ jsx8("span", { className: "text-text-dim leading-none", children: icon }),
+        /* @__PURE__ */ jsx8(
           "input",
           {
             ref,
@@ -470,14 +540,26 @@ var Input = forwardRef(function Input2({ size, tone, icon, trailing, error, widt
             ...props
           }
         ),
-        trailing && /* @__PURE__ */ jsx("span", { className: "text-text-dim text-[11px]", children: trailing })
+        trailing && /* @__PURE__ */ jsx8("span", { className: "text-text-dim text-[11px]", children: trailing })
       ]
     }
   );
 });
 Input.displayName = "Input";
-var SearchInput = forwardRef(function SearchInput2({ shortcut = "\u2318K", width = 360, className, style, placeholder = "Search\u2026", ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+
+// src/components/Input/SearchInput.tsx
+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,
+  className,
+  style,
+  placeholder = "Search\u2026",
+  "aria-label": ariaLabel,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
@@ -489,46 +571,63 @@ var SearchInput = forwardRef(function SearchInput2({ shortcut = "\u2318K", width
       ),
       style: { width, ...style },
       children: [
-        /* @__PURE__ */ jsx("span", { className: "text-text-dim leading-none", children: "\u2315" }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx9("span", { className: "text-text-dim leading-none", "aria-hidden": true, children: "\u2315" }),
+        /* @__PURE__ */ jsx9(
           "input",
           {
             ref,
             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",
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: shortcut })
+        shortcut && /* @__PURE__ */ jsx9("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: shortcut })
       ]
     }
   );
 });
 SearchInput.displayName = "SearchInput";
-var OTP = forwardRef(function OTP2({ length = 6, onComplete, onChange, defaultValue = "", ariaLabel = "Code", className, disabled }, ref) {
-  const baseId = useId();
-  const refs = useRef([]);
-  const [values, setValues] = useState(
+
+// src/components/OTP/OTP.tsx
+import {
+  forwardRef as forwardRef9,
+  useId as useId3,
+  useImperativeHandle,
+  useRef as useRef3,
+  useState as useState5
+} from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var OTP = forwardRef9(function OTP2({ length = 6, onComplete, onChange, defaultValue = "", ariaLabel = "Code", className, disabled }, ref) {
+  const baseId = useId3();
+  const refs = useRef3([]);
+  const [values, setValues] = useState5(
     () => Array.from({ length }, (_, i) => defaultValue[i] ?? "")
   );
+  const [completedAnnouncement, setCompletedAnnouncement] = useState5("");
   useImperativeHandle(ref, () => ({
     focus: () => refs.current[0]?.focus(),
     reset: () => {
       setValues(Array(length).fill(""));
+      setCompletedAnnouncement("");
       refs.current[0]?.focus();
     }
   }));
   const writeAt = (i, char) => {
     if (!/^\d?$/.test(char)) return;
-    setValues((prev) => {
-      const next = [...prev];
-      next[i] = char;
-      const joined = next.join("");
-      onChange?.(joined);
-      if (joined.length === length && next.every((c) => c)) onComplete?.(joined);
-      return next;
-    });
+    const next = [...values];
+    next[i] = char;
+    setValues(next);
+    const joined = next.join("");
+    onChange?.(joined);
+    const isComplete = joined.length === length && next.every((c) => c);
+    if (isComplete) {
+      onComplete?.(joined);
+      setCompletedAnnouncement("Code complete");
+    } else {
+      setCompletedAnnouncement("");
+    }
     if (char && i < length - 1) refs.current[i + 1]?.focus();
   };
   const onKey = (i, e) => {
@@ -548,45 +647,59 @@ var OTP = forwardRef(function OTP2({ length = 6, onComplete, onChange, defaultVa
     setValues(next);
     const joined = next.join("");
     onChange?.(joined);
-    if (joined.length === length) onComplete?.(joined);
+    const isComplete = joined.length === length && next.every((c) => c);
+    if (isComplete) {
+      onComplete?.(joined);
+      setCompletedAnnouncement("Code complete");
+    } else {
+      setCompletedAnnouncement("");
+    }
     refs.current[Math.min(pasted.length, length - 1)]?.focus();
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", className), children: values.map((c, i) => /* @__PURE__ */ jsx(
-    "input",
-    {
-      id: `${baseId}-${i}`,
-      ref: (el) => {
-        refs.current[i] = el;
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex gap-2", className), children: [
+    values.map((c, i) => /* @__PURE__ */ jsx10(
+      "input",
+      {
+        id: `${baseId}-${i}`,
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        inputMode: "numeric",
+        autoComplete: "one-time-code",
+        maxLength: 1,
+        value: c,
+        disabled,
+        "aria-label": `${ariaLabel} ${i + 1} of ${length}`,
+        onChange: (e) => writeAt(i, e.target.value),
+        onKeyDown: (e) => onKey(i, e),
+        onFocus: (e) => e.target.select(),
+        onPaste: i === 0 ? onPaste : void 0,
+        className: cn(
+          "text-text bg-panel h-12 w-10 rounded-md text-center font-mono text-[20px] font-medium",
+          "border-border border transition-[border-color,box-shadow] duration-(--duration-micro) outline-none",
+          "focus:border-accent focus:ring-accent-dim focus:ring-[3px]",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        )
       },
-      inputMode: "numeric",
-      autoComplete: "one-time-code",
-      maxLength: 1,
-      value: c,
-      disabled,
-      "aria-label": `${ariaLabel} ${i + 1} of ${length}`,
-      onChange: (e) => writeAt(i, e.target.value),
-      onKeyDown: (e) => onKey(i, e),
-      onFocus: (e) => e.target.select(),
-      onPaste: i === 0 ? onPaste : void 0,
-      className: cn(
-        "text-text bg-panel h-12 w-10 rounded-md text-center font-mono text-[20px] font-medium",
-        "border-border border transition-[border-color,box-shadow] duration-(--duration-micro) outline-none",
-        "focus:border-accent focus:ring-accent-dim focus:ring-[3px]",
-        "disabled:cursor-not-allowed disabled:opacity-50"
-      )
-    },
-    i
-  )) });
+      i
+    )),
+    /* @__PURE__ */ jsx10("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: completedAnnouncement })
+  ] });
 });
 OTP.displayName = "OTP";
-var RadioGroup = forwardRef(function RadioGroup2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(RadixRadio.Root, { ref, className: cn("flex flex-col gap-2", className), ...props });
+
+// src/components/Radio/Radio.tsx
+import * as RadixRadio from "@radix-ui/react-radio-group";
+import { forwardRef as forwardRef10, useId as useId4 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var RadioGroup = forwardRef10(function RadioGroup2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx11(RadixRadio.Root, { ref, className: cn("flex flex-col gap-2", className), ...props });
 });
 RadioGroup.displayName = "RadioGroup";
-var Radio = forwardRef(function Radio2({ label, className, id: idProp, ...props }, ref) {
-  const reactId = useId();
+var Radio = forwardRef10(function Radio2({ label, className, id: idProp, ...props }, ref) {
+  const reactId = useId4();
   const id = idProp ?? `radio-${reactId}`;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs8(
     "span",
     {
       className: cn(
@@ -595,7 +708,7 @@ var Radio = forwardRef(function Radio2({ label, className, id: idProp, ...props
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx11(
           RadixRadio.Item,
           {
             ref,
@@ -608,15 +721,20 @@ var Radio = forwardRef(function Radio2({ label, className, id: idProp, ...props
               "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
             ),
             ...props,
-            children: /* @__PURE__ */ jsx(RadixRadio.Indicator, { className: "bg-accent block h-[7px] w-[7px] rounded-full" })
+            children: /* @__PURE__ */ jsx11(RadixRadio.Indicator, { className: "bg-accent block h-[7px] w-[7px] rounded-full" })
           }
         ),
-        label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+        label && /* @__PURE__ */ jsx11("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
       ]
     }
   );
 });
 Radio.displayName = "Radio";
+
+// src/components/Select/Select.tsx
+import * as RadixSelect from "@radix-ui/react-select";
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var SelectRoot = RadixSelect.Root;
 var SelectValue = RadixSelect.Value;
 var SelectGroup = RadixSelect.Group;
@@ -626,8 +744,8 @@ var triggerClasses = {
   md: "h-[34px] px-[10px] text-[13px]",
   lg: "h-10 px-3 text-[14px]"
 };
-var SelectTrigger = forwardRef(function SelectTrigger2({ size = "md", className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+var SelectTrigger = forwardRef11(function SelectTrigger2({ size = "md", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs9(
     RadixSelect.Trigger,
     {
       ref,
@@ -643,35 +761,35 @@ var SelectTrigger = forwardRef(function SelectTrigger2({ size = "md", className,
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(RadixSelect.Icon, { className: "text-text-dim text-[11px] leading-none", children: "\u25BE" })
+        /* @__PURE__ */ jsx12(RadixSelect.Icon, { className: "text-text-dim text-[11px] leading-none", children: "\u25BE" })
       ]
     }
   );
 });
 SelectTrigger.displayName = "SelectTrigger";
-var SelectContent = forwardRef(
+var SelectContent = forwardRef11(
   function SelectContent2({ className, children, position = "popper", sideOffset = 6, ...props }, ref) {
-    return /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx12(RadixSelect.Portal, { children: /* @__PURE__ */ jsx12(
       RadixSelect.Content,
       {
         ref,
         position,
         sideOffset,
         className: cn(
-          "bg-panel border-border z-50 min-w-[var(--radix-select-trigger-width)] rounded-md border p-1 shadow",
+          "bg-panel border-border z-popover min-w-[var(--radix-select-trigger-width)] rounded-md border p-1 shadow",
           "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsx(RadixSelect.Viewport, { children })
+        children: /* @__PURE__ */ jsx12(RadixSelect.Viewport, { children })
       }
     ) });
   }
 );
 SelectContent.displayName = "SelectContent";
-var SelectItem = forwardRef(
+var SelectItem = forwardRef11(
   function SelectItem2({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx12(
       RadixSelect.Item,
       {
         ref,
@@ -683,7 +801,7 @@ var SelectItem = forwardRef(
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsx(RadixSelect.ItemText, { children })
+        children: /* @__PURE__ */ jsx12(RadixSelect.ItemText, { children })
       }
     );
   }
@@ -698,64 +816,106 @@ function Select({
   "aria-labelledby": ariaLabelledBy,
   ...rootProps
 }) {
-  return /* @__PURE__ */ jsxs(RadixSelect.Root, { ...rootProps, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs9(RadixSelect.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsx12(
       SelectTrigger,
       {
         size,
         className,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
-        children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+        children: /* @__PURE__ */ jsx12(SelectValue, { placeholder })
       }
     ),
-    /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => {
+    /* @__PURE__ */ jsx12(SelectContent, { children: options.map((opt) => {
       const value = typeof opt === "string" ? opt : opt.value;
       const label = typeof opt === "string" ? opt : opt.label;
-      return /* @__PURE__ */ jsx(SelectItem, { value, children: label }, value);
+      return /* @__PURE__ */ jsx12(SelectItem, { value, children: label }, value);
     }) })
   ] });
 }
-var Slider = forwardRef(function Slider2({ showValue, width = 240, className, value, defaultValue, ...props }, ref) {
+
+// src/components/Slider/Slider.tsx
+import * as RadixSlider from "@radix-ui/react-slider";
+import { forwardRef as forwardRef12, useCallback as useCallback5, useState as useState6 } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var Slider = forwardRef12(function Slider2({
+  showValue,
+  width = 240,
+  className,
+  value,
+  defaultValue,
+  onValueChange,
+  thumbLabels,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}, ref) {
   const arrValue = Array.isArray(value) ? value : value !== void 0 ? [value] : void 0;
   const arrDefault = Array.isArray(defaultValue) ? defaultValue : defaultValue !== void 0 ? [defaultValue] : void 0;
-  const display = arrValue?.[0] ?? arrDefault?.[0] ?? props.min ?? 0;
-  return /* @__PURE__ */ jsxs(
+  const isControlled = arrValue !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState6(arrDefault);
+  const currentValue = isControlled ? arrValue : uncontrolledValue;
+  const wasScalar = !Array.isArray(value ?? defaultValue) && (value ?? defaultValue) !== void 0;
+  const handleValueChange = useCallback5(
+    (next) => {
+      if (!isControlled) setUncontrolledValue(next);
+      if (onValueChange) {
+        onValueChange(wasScalar ? next[0] ?? 0 : next);
+      }
+    },
+    [isControlled, onValueChange, wasScalar]
+  );
+  const display = currentValue?.[0] ?? props.min ?? 0;
+  const thumbCount = (arrValue ?? arrDefault)?.length ?? 1;
+  return /* @__PURE__ */ jsxs10(
     "span",
     {
       ref,
       className: cn("inline-flex items-center gap-[10px]", className),
       style: { width },
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs10(
           RadixSlider.Root,
           {
             value: arrValue,
             defaultValue: arrDefault,
+            onValueChange: handleValueChange,
             className: "relative flex h-4 flex-1 touch-none items-center select-none",
             ...props,
             children: [
-              /* @__PURE__ */ jsx(RadixSlider.Track, { className: "bg-panel-2 relative h-1 grow rounded-full", children: /* @__PURE__ */ jsx(RadixSlider.Range, { className: "bg-accent absolute h-full rounded-full" }) }),
-              /* @__PURE__ */ jsx(
-                RadixSlider.Thumb,
-                {
-                  className: cn(
-                    "bg-text border-accent block h-[14px] w-[14px] rounded-full border-2 shadow",
-                    "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
-                    "cursor-grab active:cursor-grabbing"
-                  ),
-                  "aria-label": "Value"
-                }
-              )
+              /* @__PURE__ */ jsx13(RadixSlider.Track, { className: "bg-panel-2 relative h-1 grow rounded-full", children: /* @__PURE__ */ jsx13(RadixSlider.Range, { className: "bg-accent absolute h-full rounded-full" }) }),
+              Array.from({ length: thumbCount }, (_, i) => {
+                const perThumb = thumbLabels?.[i];
+                const thumbAriaLabel = perThumb ?? (ariaLabelledBy ? void 0 : ariaLabel ?? "Value");
+                return /* @__PURE__ */ jsx13(
+                  RadixSlider.Thumb,
+                  {
+                    className: cn(
+                      "bg-text border-accent block h-[14px] w-[14px] rounded-full border-2 shadow",
+                      "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
+                      "cursor-grab active:cursor-grabbing"
+                    ),
+                    "aria-label": thumbAriaLabel,
+                    "aria-labelledby": perThumb ? void 0 : ariaLabelledBy
+                  },
+                  i
+                );
+              })
             ]
           }
         ),
-        showValue && /* @__PURE__ */ jsx("span", { className: "text-text-muted min-w-[28px] text-right font-mono text-[11px]", children: display })
+        showValue && /* @__PURE__ */ jsx13("span", { className: "text-text-muted min-w-[28px] text-right font-mono text-[11px]", children: display })
       ]
     }
   );
 });
 Slider.displayName = "Slider";
+
+// src/components/Switch/Switch.tsx
+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"
@@ -764,10 +924,10 @@ var thumbClasses = {
   sm: "h-3 w-3 data-[state=checked]:translate-x-3",
   md: "h-4 w-4 data-[state=checked]:translate-x-4"
 };
-var Switch = forwardRef(function Switch2({ label, size = "md", className, id: idProp, ...props }, ref) {
-  const reactId = useId();
+var Switch = forwardRef13(function Switch2({ label, size = "md", className, id: idProp, ...props }, ref) {
+  const reactId = useId5();
   const id = idProp ?? `sw-${reactId}`;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs11(
     "span",
     {
       className: cn(
@@ -776,7 +936,7 @@ var Switch = forwardRef(function Switch2({ label, size = "md", className, id: id
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx14(
           RadixSwitch.Root,
           {
             ref,
@@ -789,7 +949,7 @@ var Switch = forwardRef(function Switch2({ label, size = "md", className, id: id
               trackClasses[size]
             ),
             ...props,
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx14(
               RadixSwitch.Thumb,
               {
                 className: cn(
@@ -801,13 +961,18 @@ var Switch = forwardRef(function Switch2({ label, size = "md", className, id: id
             )
           }
         ),
-        label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+        label && /* @__PURE__ */ jsx14("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
       ]
     }
   );
 });
 Switch.displayName = "Switch";
-var textareaStyles = cva(
+
+// src/components/Textarea/Textarea.tsx
+import { cva as cva4 } from "class-variance-authority";
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var textareaStyles = cva4(
   [
     "w-full font-sans text-text bg-panel rounded-md p-[10px]",
     "border outline-none transition-[border-color,box-shadow] duration-(--duration-micro)",
@@ -819,26 +984,97 @@ var textareaStyles = cva(
     variants: {
       tone: {
         default: "border-border focus-visible:border-accent focus-visible:ring-accent-dim",
-        error: "border-err focus-visible:border-err focus-visible:ring-[oklch(0.55_0.18_30/0.18)]"
+        err: "border-err focus-visible:border-err focus-visible:ring-err/30"
       }
     },
     defaultVariants: { tone: "default" }
   }
 );
-var Textarea = forwardRef(function Textarea2({ tone, error, rows = 4, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
+var Textarea = forwardRef14(function Textarea2({ tone, error, rows = 4, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx15(
     "textarea",
     {
       ref,
       rows,
       "aria-invalid": error || void 0,
-      className: cn(textareaStyles({ tone: error ? "error" : tone }), className),
+      className: cn(textareaStyles({ tone: error ? "err" : tone }), className),
       ...props
     }
   );
 });
 Textarea.displayName = "Textarea";
-var sizePx = { xs: 20, sm: 24, md: 32, lg: 40, xl: 56 };
+
+// src/components/Avatar/Avatar.tsx
+import * as RadixAvatar from "@radix-ui/react-avatar";
+import { forwardRef as forwardRef16 } from "react";
+
+// src/components/StatusDot/StatusDot.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var stateColor = {
+  ok: "bg-ok",
+  warn: "bg-warn",
+  err: "bg-err",
+  off: "bg-text-dim",
+  sync: "bg-accent",
+  accent: "bg-accent"
+};
+var stateText = {
+  ok: "text-ok",
+  warn: "text-warn",
+  err: "text-err",
+  off: "text-text-dim",
+  sync: "text-accent",
+  accent: "text-accent"
+};
+var stateLabel = {
+  ok: "Online",
+  warn: "Warning",
+  err: "Error",
+  off: "Offline",
+  sync: "Syncing",
+  accent: "Active"
+};
+var StatusDot = forwardRef15(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs12(
+    "span",
+    {
+      ref,
+      role: label ? "status" : "img",
+      "aria-label": !label ? stateLabel[state] : void 0,
+      className: cn("inline-flex items-center gap-[6px]", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx16(
+          "span",
+          {
+            className: cn(
+              "inline-block rounded-full",
+              stateColor[state],
+              pulse && "animate-[ship-pulse-ring_1.6s_infinite]",
+              stateText[state]
+            ),
+            style: { width: size, height: size }
+          }
+        ),
+        label && /* @__PURE__ */ jsx16("span", { className: "text-text-muted text-[12px]", children: label })
+      ]
+    }
+  );
+});
+StatusDot.displayName = "StatusDot";
+
+// src/components/Avatar/sizes.ts
+var sizePx = {
+  xs: 20,
+  sm: 24,
+  md: 32,
+  lg: 40,
+  xl: 56
+};
+
+// src/components/Avatar/Avatar.tsx
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var statusBg = {
   ok: "bg-ok",
   warn: "bg-warn",
@@ -853,11 +1089,11 @@ function hashHue(str) {
   for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) % 360;
   return h;
 }
-var Avatar = forwardRef(function Avatar2({ name = "?", src, size = "md", status, initials, className, style, ...props }, ref) {
+var Avatar = forwardRef16(function Avatar2({ name = "?", src, size = "md", status, initials, className, style, ...props }, ref) {
   const dim = sizePx[size];
   const hue = hashHue(name);
   const computedInitials = initials ?? initialsFor(name);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs13(
     "span",
     {
       ref,
@@ -865,14 +1101,16 @@ var Avatar = forwardRef(function Avatar2({ name = "?", src, size = "md", status,
       style: { width: dim, height: dim, ...style },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs13(
           RadixAvatar.Root,
           {
             className: "border-border relative inline-flex h-full w-full shrink-0 overflow-hidden rounded-full border",
-            style: { background: src ? void 0 : `oklch(0.4 0.1 ${hue})` },
+            style: {
+              background: src ? void 0 : `oklch(var(--color-avatar-fallback-l) var(--color-avatar-fallback-c) ${hue})`
+            },
             children: [
-              src && /* @__PURE__ */ jsx(RadixAvatar.Image, { src, alt: name, className: "h-full w-full object-cover" }),
-              /* @__PURE__ */ jsx(
+              src && /* @__PURE__ */ jsx17(RadixAvatar.Image, { src, alt: name, className: "h-full w-full object-cover" }),
+              /* @__PURE__ */ jsx17(
                 RadixAvatar.Fallback,
                 {
                   className: "flex h-full w-full items-center justify-center font-sans font-semibold text-white",
@@ -883,11 +1121,11 @@ var Avatar = forwardRef(function Avatar2({ name = "?", src, size = "md", status,
             ]
           }
         ),
-        status && /* @__PURE__ */ jsx(
+        status && /* @__PURE__ */ jsx17(
           "span",
           {
             role: "img",
-            "aria-label": `status: ${status}`,
+            "aria-label": stateLabel[status],
             className: cn(
               "border-bg absolute right-0 bottom-0 rounded-full border-[2px]",
               statusBg[status]
@@ -900,15 +1138,18 @@ var Avatar = forwardRef(function Avatar2({ name = "?", src, size = "md", status,
   );
 });
 Avatar.displayName = "Avatar";
-var sizePx2 = { xs: 20, sm: 24, md: 32, lg: 40, xl: 56 };
-var AvatarGroup = forwardRef(function AvatarGroup2({ names, max = 3, size = "md", className, ...props }, ref) {
-  const dim = sizePx2[size];
+
+// src/components/Avatar/AvatarGroup.tsx
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var AvatarGroup = forwardRef17(function AvatarGroup2({ names, max = 3, size = "md", className, ...props }, ref) {
+  const dim = sizePx[size];
   const visible = names.slice(0, max);
   const rest = names.length - visible.length;
   const overlap = -dim * 0.35;
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex", className), ...props, children: [
-    visible.map((n, i) => /* @__PURE__ */ jsx("span", { style: { marginLeft: i === 0 ? 0 : overlap }, children: /* @__PURE__ */ jsx(Avatar, { name: n, size }) }, `${n}-${i}`)),
-    rest > 0 && /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs14("div", { ref, className: cn("inline-flex", className), ...props, children: [
+    visible.map((n, i) => /* @__PURE__ */ jsx18("span", { style: { marginLeft: i === 0 ? 0 : overlap }, children: /* @__PURE__ */ jsx18(Avatar, { name: n, size }) }, `${n}-${i}`)),
+    rest > 0 && /* @__PURE__ */ jsxs14(
       "span",
       {
         "aria-label": `+${rest} more`,
@@ -928,7 +1169,12 @@ var AvatarGroup = forwardRef(function AvatarGroup2({ names, max = 3, size = "md"
   ] });
 });
 AvatarGroup.displayName = "AvatarGroup";
-var badgeStyles = cva("inline-flex items-center font-sans leading-none whitespace-nowrap", {
+
+// src/components/Badge/Badge.tsx
+import { cva as cva5 } from "class-variance-authority";
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var badgeStyles = cva5("inline-flex items-center font-sans leading-none whitespace-nowrap", {
   variants: {
     variant: {
       neutral: "bg-panel-2 text-text-muted border border-border",
@@ -961,21 +1207,28 @@ var dotColorClass = {
   solid: "bg-bg"
 };
 var dotSize = { sm: "h-[5px] w-[5px]", md: "h-[6px] w-[6px]", lg: "h-[7px] w-[7px]" };
-var Badge = forwardRef(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
-    dot && /* @__PURE__ */ jsx(
+var Badge = forwardRef18(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
+  const sz = size ?? "md";
+  const v = variant ?? "neutral";
+  return /* @__PURE__ */ jsxs15("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
+    dot && /* @__PURE__ */ jsx19(
       "span",
       {
         "aria-hidden": true,
-        className: cn("inline-block rounded-full", dotSize[size], dotColorClass[variant])
+        className: cn("inline-block rounded-full", dotSize[sz], dotColorClass[v])
       }
     ),
-    icon && /* @__PURE__ */ jsx("span", { className: "inline-flex leading-none", children: icon }),
+    icon && /* @__PURE__ */ jsx19("span", { className: "inline-flex leading-none", children: icon }),
     children
   ] });
 });
 Badge.displayName = "Badge";
-var cardStyles = cva(
+
+// src/components/Card/Card.tsx
+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)",
   {
     variants: {
@@ -992,7 +1245,7 @@ var cardStyles = cva(
     defaultVariants: { variant: "default", interactive: false }
   }
 );
-var Card = forwardRef(function Card2({
+var Card = forwardRef19(function Card2({
   variant,
   interactive,
   title,
@@ -1002,57 +1255,96 @@ var Card = forwardRef(function Card2({
   className,
   children,
   onClick,
+  onActivate,
   ...props
 }, ref) {
-  const isInteractive = interactive ?? Boolean(onClick);
-  return /* @__PURE__ */ jsxs(
+  const wantsInteractive = interactive ?? Boolean(onClick);
+  const hasActions = actions != null;
+  if (wantsInteractive && hasActions && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[Card] `interactive` was requested but `actions` is also set, which would create a nested-interactive a11y violation. The card will render as a plain <div>. Use <CardLink> for whole-card links, or move the actions outside the card."
+    );
+  }
+  const isInteractive = wantsInteractive && !hasActions;
+  const handleKeyDown = isInteractive ? (e) => {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    if (onActivate) {
+      e.preventDefault();
+      onActivate();
+    } else if (onClick) {
+      e.preventDefault();
+      onClick(e);
+    }
+  } : void 0;
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref,
       onClick,
-      onKeyDown: isInteractive && onClick ? (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick(e);
-        }
-      } : void 0,
+      onKeyDown: handleKeyDown,
       role: isInteractive ? "button" : void 0,
       tabIndex: isInteractive ? 0 : void 0,
-      className: cn(cardStyles({ variant, interactive: isInteractive }), "p-[18px]", className),
+      className: cn(cardStyles({ variant, interactive: wantsInteractive }), "p-[18px]", className),
       ...props,
       children: [
-        (title || actions) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3", (description || children) && "mb-[10px]"), children: [
-          title && /* @__PURE__ */ jsx("div", { className: "flex-1 text-[14px] font-medium", children: title }),
-          actions && /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: actions })
+        (title || actions) && /* @__PURE__ */ jsxs16("div", { className: cn("flex items-start gap-3", (description || children) && "mb-[10px]"), children: [
+          title && /* @__PURE__ */ jsx20("div", { className: "flex-1 text-[14px] font-medium", children: title }),
+          actions && /* @__PURE__ */ jsx20("div", { className: "flex gap-1", children: actions })
         ] }),
-        description && /* @__PURE__ */ jsx("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
+        description && /* @__PURE__ */ jsx20("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
         children,
-        footer && /* @__PURE__ */ jsx("div", { className: "border-border text-text-dim mt-[14px] border-t pt-3 text-[11px]", children: footer })
+        footer && /* @__PURE__ */ jsx20("div", { className: "border-border text-text-dim mt-[14px] border-t pt-3 text-[11px]", children: footer })
       ]
     }
   );
 });
 Card.displayName = "Card";
+var CardLink = forwardRef19(function CardLink2({ variant, 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]",
+        className
+      ),
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsx20("div", { className: cn("flex items-start", (description || children) && "mb-[10px]"), children: /* @__PURE__ */ jsx20("div", { className: "flex-1 text-[14px] font-medium", children: title }) }),
+        description && /* @__PURE__ */ jsx20("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
+        children,
+        footer && /* @__PURE__ */ jsx20("div", { className: "border-border text-text-dim mt-[14px] border-t pt-3 text-[11px]", children: footer })
+      ]
+    }
+  );
+});
+CardLink.displayName = "CardLink";
+
+// src/components/Card/StatCard.tsx
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var trendClasses = {
   up: "text-ok",
   down: "text-err",
   flat: "text-text-dim"
 };
 var trendArrows = { up: "\u2191", down: "\u2193", flat: "\u2192" };
-var StatCard = forwardRef(function StatCard2({ label, value, delta, trend = "flat", icon, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+var StatCard = forwardRef20(function StatCard2({ label, value, delta, trend = "flat", icon, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref,
       className: cn("bg-panel border-border rounded-base block border p-[18px]", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-[10px] flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-text-dim font-mono text-[10px] tracking-wide uppercase", children: label }),
-          icon && /* @__PURE__ */ jsx("div", { className: "text-text-dim text-[14px]", children: icon })
+        /* @__PURE__ */ jsxs17("div", { className: "mb-[10px] flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx21("div", { className: "text-text-dim font-mono text-[10px] tracking-wide uppercase", children: label }),
+          icon && /* @__PURE__ */ jsx21("div", { className: "text-text-dim text-[14px]", children: icon })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "text-text font-mono text-[26px] leading-none font-medium tracking-tight", children: value }),
-        delta !== void 0 && /* @__PURE__ */ jsxs("div", { className: cn("mt-[6px] font-mono text-[11px]", trendClasses[trend]), children: [
+        /* @__PURE__ */ jsx21("div", { className: "text-text font-mono text-[26px] leading-none font-medium tracking-tight", children: value }),
+        delta !== void 0 && /* @__PURE__ */ jsxs17("div", { className: cn("mt-[6px] font-mono text-[11px]", trendClasses[trend]), children: [
           trendArrows[trend],
           " ",
           delta
@@ -1062,8 +1354,12 @@ var StatCard = forwardRef(function StatCard2({ label, value, delta, trend = "fla
   );
 });
 StatCard.displayName = "StatCard";
-var Chip = forwardRef(function Chip2({ icon, removable, onRemove, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+
+// 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) {
+  return /* @__PURE__ */ jsxs18(
     "span",
     {
       ref,
@@ -1074,9 +1370,9 @@ var Chip = forwardRef(function Chip2({ icon, removable, onRemove, className, chi
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "text-text-dim inline-flex text-[10px]", children: icon }),
+        icon && /* @__PURE__ */ jsx22("span", { className: "text-text-dim inline-flex text-[10px]", children: icon }),
         children,
-        removable && /* @__PURE__ */ jsx(
+        onRemove && /* @__PURE__ */ jsx22(
           "button",
           {
             type: "button",
@@ -1091,8 +1387,12 @@ var Chip = forwardRef(function Chip2({ icon, removable, onRemove, className, chi
   );
 });
 Chip.displayName = "Chip";
-var Kbd = forwardRef(function Kbd2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
+
+// src/components/Kbd/Kbd.tsx
+import { forwardRef as forwardRef22 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Kbd = forwardRef22(function Kbd2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx23(
     "kbd",
     {
       ref,
@@ -1108,7 +1408,12 @@ var Kbd = forwardRef(function Kbd2({ className, children, ...props }, ref) {
   );
 });
 Kbd.displayName = "Kbd";
-var skeletonStyles = cva("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite]", {
+
+// 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";
+var skeletonStyles = cva7("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite]", {
   variants: {
     shape: {
       line: "rounded-xs",
@@ -1119,16 +1424,15 @@ var skeletonStyles = cva("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite]
   defaultVariants: { shape: "line" }
 });
 var defaultHeight = { line: 14, block: 80, circle: 40 };
-var Skeleton = forwardRef(function Skeleton2({ shape = "line", width = "100%", height, className, style, ...props }, ref) {
+var Skeleton = forwardRef23(function Skeleton2({ shape = "line", width = "100%", height, standalone = false, className, style, ...props }, ref) {
   const h = height ?? defaultHeight[shape];
   const w = shape === "circle" ? h : width;
-  return /* @__PURE__ */ jsx(
+  const a11yProps = standalone ? { role: "status", "aria-busy": true, "aria-label": "Loading" } : { "aria-hidden": true };
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       ref,
-      role: "status",
-      "aria-busy": "true",
-      "aria-label": "Loading",
+      ...a11yProps,
       className: cn(skeletonStyles({ shape }), className),
       style: { width: w, height: h, ...style },
       ...props
@@ -1136,52 +1440,30 @@ var Skeleton = forwardRef(function Skeleton2({ shape = "line", width = "100%", h
   );
 });
 Skeleton.displayName = "Skeleton";
-var stateColor = {
-  ok: "bg-ok",
-  warn: "bg-warn",
-  err: "bg-err",
-  off: "bg-text-dim",
-  sync: "bg-accent",
-  accent: "bg-accent"
-};
-var stateText = {
-  ok: "text-ok",
-  warn: "text-warn",
-  err: "text-err",
-  off: "text-text-dim",
-  sync: "text-accent",
-  accent: "text-accent"
-};
-var StatusDot = forwardRef(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
-    "span",
+var SkeletonGroup = forwardRef23(function SkeletonGroup2({ label = "Loading", loading = true, className, children, ...props }, ref) {
+  if (!loading) {
+    return /* @__PURE__ */ jsx24("div", { ref, className, ...props, children });
+  }
+  return /* @__PURE__ */ jsx24(
+    "div",
     {
       ref,
-      role: label ? "status" : "img",
-      "aria-label": !label && typeof state === "string" ? state : void 0,
-      className: cn("inline-flex items-center gap-[6px]", className),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": label,
+      className,
       ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "inline-block rounded-full",
-              stateColor[state],
-              pulse && "animate-[ship-pulse-ring_1.6s_infinite]",
-              stateText[state]
-            ),
-            style: { width: size, height: size }
-          }
-        ),
-        label && /* @__PURE__ */ jsx("span", { className: "text-text-muted text-[12px]", children: label })
-      ]
+      children
     }
   );
 });
-StatusDot.displayName = "StatusDot";
-var Tag = forwardRef(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+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(
     "span",
     {
       ref,
@@ -1193,9 +1475,9 @@ var Tag = forwardRef(function Tag2({ onRemove, icon, size = 22, className, child
       style: { height: size },
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "text-text-dim inline-flex", children: icon }),
+        icon && /* @__PURE__ */ jsx25("span", { className: "text-text-dim inline-flex", children: icon }),
         children,
-        onRemove && /* @__PURE__ */ jsx(
+        onRemove && /* @__PURE__ */ jsx25(
           "button",
           {
             type: "button",
@@ -1210,17 +1492,22 @@ var Tag = forwardRef(function Tag2({ onRemove, icon, size = 22, className, child
   );
 });
 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";
 var ContextMenuRoot = RadixContext.Root;
 var ContextMenuTrigger = RadixContext.Trigger;
 var ContextMenuPortal = RadixContext.Portal;
-var ContextMenuContent = forwardRef(
+var ContextMenuContent = forwardRef25(
   function ContextMenuContent2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(RadixContext.Portal, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx26(RadixContext.Portal, { children: /* @__PURE__ */ jsx26(
       RadixContext.Content,
       {
         ref,
         className: cn(
-          "bg-panel border-border-strong z-40 min-w-[180px] rounded-md border p-1 shadow-lg outline-none",
+          "bg-panel border-border-strong 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
         ),
@@ -1235,26 +1522,26 @@ var itemBase = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var ContextMenuItem = forwardRef(
+var ContextMenuItem = forwardRef25(
   function ContextMenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs20(
       RadixContext.Item,
       {
         ref,
         className: cn(itemBase, destructive ? "text-err" : "text-text", className),
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsx("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
-          /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
-          trailing && /* @__PURE__ */ jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+          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 })
         ]
       }
     );
   }
 );
 ContextMenuItem.displayName = "ContextMenuItem";
-var ContextMenuSeparator = forwardRef(function ContextMenuSeparator2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
+var ContextMenuSeparator = forwardRef25(function ContextMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx26(
     RadixContext.Separator,
     {
       ref,
@@ -1265,18 +1552,23 @@ var ContextMenuSeparator = forwardRef(function ContextMenuSeparator2({ className
 });
 ContextMenuSeparator.displayName = "ContextMenuSeparator";
 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";
 var DialogRoot = RadixDialog.Root;
 var DialogTrigger = RadixDialog.Trigger;
 var DialogClose = RadixDialog.Close;
 var DialogPortal = RadixDialog.Portal;
-var DialogOverlay = forwardRef(
+var DialogOverlay = forwardRef26(
   function DialogOverlay2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx27(
       RadixDialog.Overlay,
       {
         ref,
         className: cn(
-          "fixed inset-0 z-50 bg-black/55 backdrop-blur-[4px]",
+          "z-overlay fixed inset-0 bg-black/55 backdrop-blur-[4px]",
           "data-[state=open]:animate-[ship-fade-in_150ms_ease]",
           className
         ),
@@ -1286,15 +1578,15 @@ var DialogOverlay = forwardRef(
   }
 );
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = forwardRef(function DialogContent2({ className, width = 460, style, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsx(
+var DialogContent = forwardRef26(function DialogContent2({ className, width = 460, style, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs21(DialogPortal, { children: [
+    /* @__PURE__ */ jsx27(DialogOverlay, {}),
+    /* @__PURE__ */ jsx27(
       RadixDialog.Content,
       {
         ref,
         className: cn(
-          "fixed top-1/2 left-1/2 z-[51] w-[calc(100%-40px)] -translate-x-1/2 -translate-y-1/2 p-6",
+          "z-modal fixed top-1/2 left-1/2 w-[calc(100%-40px)] -translate-x-1/2 -translate-y-1/2 p-6",
           "bg-panel border-border-strong rounded-lg border shadow-lg",
           "data-[state=open]:animate-[ship-dialog-in_180ms_var(--easing-out)]",
           "outline-none",
@@ -1309,27 +1601,32 @@ var DialogContent = forwardRef(function DialogContent2({ className, width = 460,
 });
 DialogContent.displayName = "DialogContent";
 function Dialog({ title, description, footer, width, children, ...rootProps }) {
-  return /* @__PURE__ */ jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs(DialogContent, { width, children: [
-    title && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx27(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs21(DialogContent, { width, children: [
+    title && /* @__PURE__ */ jsx27(
       RadixDialog.Title,
       {
         className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
         children: title
       }
     ),
-    description && /* @__PURE__ */ jsx(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+    description && /* @__PURE__ */ jsx27(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
     children,
-    footer && /* @__PURE__ */ jsx("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+    footer && /* @__PURE__ */ jsx27("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";
 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)]"
 };
-var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center justify-between border-b p-[16px] px-5", children: [
-  /* @__PURE__ */ jsx("span", { className: "text-[14px] font-medium", children: title }),
-  /* @__PURE__ */ jsx(
-    RadixDialog.Close,
+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(
+    RadixDialog2.Close,
     {
       onClick: onClose,
       "aria-label": "Close",
@@ -1338,43 +1635,49 @@ var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ jsxs("div", { classNa
     }
   )
 ] });
-var Drawer = forwardRef(function Drawer2({ side = "right", title, width = 420, children, ...rootProps }, ref) {
-  return /* @__PURE__ */ jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      RadixDialog.Content,
+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(
+      RadixDialog2.Content,
       {
         ref,
+        "aria-describedby": void 0,
         className: cn(
-          "bg-panel fixed top-0 bottom-0 z-[51] flex flex-col shadow-lg outline-none",
+          "bg-panel z-modal fixed top-0 bottom-0 flex flex-col shadow-lg outline-none",
           sideClasses[side]
         ),
         style: { width },
         children: [
-          title && /* @__PURE__ */ jsx(DrawerHeader, { title }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-5", 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 })
         ]
       }
     )
   ] }) });
 });
 Drawer.displayName = "Drawer";
-var Sheet = forwardRef(function Sheet2({ title, width = "min(640px, 90vw)", children, ...rootProps }, ref) {
-  return /* @__PURE__ */ jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      RadixDialog.Content,
+
+// 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(
+      RadixDialog3.Content,
       {
         ref,
+        "aria-describedby": void 0,
         className: cn(
-          "fixed bottom-0 left-1/2 z-[51] -translate-x-1/2 p-5",
+          "z-modal fixed bottom-0 left-1/2 -translate-x-1/2 p-5",
           "bg-panel border-border-strong rounded-tl-lg rounded-tr-lg border-t shadow-lg outline-none",
           "data-[state=open]:animate-[ship-slide-in-bottom_220ms_var(--easing-out)]"
         ),
         style: { width },
         children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-border mx-auto mb-[14px] h-1 w-9 rounded-full", "aria-hidden": true }),
-          title && /* @__PURE__ */ jsx(RadixDialog.Title, { className: "mb-1 text-[15px] font-medium", children: title }),
+          title ? /* @__PURE__ */ jsx29(RadixDialog3.Title, { className: "mb-1 text-[15px] font-medium", children: title }) : /* @__PURE__ */ jsx29(RadixDialog3.Title, { className: "sr-only", children: "Sheet" }),
           children
         ]
       }
@@ -1382,64 +1685,74 @@ var Sheet = forwardRef(function Sheet2({ title, width = "min(640px, 90vw)", chil
   ] }) });
 });
 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";
 var AlertDialogRoot = RadixAlert.Root;
 var AlertDialogTrigger = RadixAlert.Trigger;
 var AlertDialogAction = RadixAlert.Action;
 var AlertDialogCancel = RadixAlert.Cancel;
-var AlertDialog = forwardRef(function AlertDialog2({ title, description, footer, width = 460, children, ...rootProps }, ref) {
-  return /* @__PURE__ */ jsx(AlertDialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs(RadixAlert.Portal, { children: [
-    /* @__PURE__ */ jsx(
+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(
       RadixAlert.Overlay,
       {
         className: cn(
-          "fixed inset-0 z-50 bg-black/55 backdrop-blur-[4px]",
+          "z-overlay fixed inset-0 bg-black/55 backdrop-blur-[4px]",
           "data-[state=open]:animate-[ship-fade-in_150ms_ease]"
         )
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs24(
       RadixAlert.Content,
       {
         ref,
         style: { maxWidth: width },
         className: cn(
-          "fixed top-1/2 left-1/2 z-[51] w-[calc(100%-40px)] -translate-x-1/2 -translate-y-1/2 p-6",
+          "z-modal fixed top-1/2 left-1/2 w-[calc(100%-40px)] -translate-x-1/2 -translate-y-1/2 p-6",
           "bg-panel border-border-strong rounded-lg border shadow-lg outline-none",
           "data-[state=open]:animate-[ship-dialog-in_180ms_var(--easing-out)]"
         ),
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx30(
             RadixAlert.Title,
             {
               className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
               children: title
             }
           ),
-          description && /* @__PURE__ */ jsx(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+          description && /* @__PURE__ */ jsx30(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
           children,
-          footer && /* @__PURE__ */ jsx("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+          footer && /* @__PURE__ */ jsx30("div", { className: "mt-5 flex justify-end gap-2", children: footer })
         ]
       }
     )
   ] }) });
 });
 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";
 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 = forwardRef(
+var DropdownMenuContent = forwardRef30(
   function DropdownMenuContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
-    return /* @__PURE__ */ jsx(RadixMenu.Portal, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx31(RadixMenu.Portal, { children: /* @__PURE__ */ jsx31(
       RadixMenu.Content,
       {
         ref,
         sideOffset,
         align,
         className: cn(
-          "bg-panel border-border-strong z-40 min-w-[180px] rounded-md border p-1 shadow-lg outline-none",
+          "bg-panel border-border-strong 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
         ),
@@ -1454,32 +1767,32 @@ var itemBase2 = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var MenuItem = forwardRef(function MenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+var MenuItem = forwardRef30(function MenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs25(
     RadixMenu.Item,
     {
       ref,
       className: cn(itemBase2, destructive ? "text-err" : "text-text", className),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
-        trailing && /* @__PURE__ */ jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+        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 })
       ]
     }
   );
 });
 MenuItem.displayName = "MenuItem";
-var MenuCheckboxItem = forwardRef(
+var MenuCheckboxItem = forwardRef30(
   function MenuCheckboxItem2({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs25(
       RadixMenu.CheckboxItem,
       {
         ref,
         className: cn(itemBase2, "text-text relative pl-[26px]", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(RadixMenu.ItemIndicator, { className: "text-accent absolute top-1/2 left-2 -translate-y-1/2 text-[10px]", children: "\u2713" }),
+          /* @__PURE__ */ jsx31(RadixMenu.ItemIndicator, { className: "text-accent absolute top-1/2 left-2 -translate-y-1/2 text-[10px]", children: "\u2713" }),
           children
         ]
       }
@@ -1487,9 +1800,9 @@ var MenuCheckboxItem = forwardRef(
   }
 );
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
-var MenuSeparator = forwardRef(
+var MenuSeparator = forwardRef30(
   function MenuSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx31(
       RadixMenu.Separator,
       {
         ref,
@@ -1501,18 +1814,23 @@ var MenuSeparator = forwardRef(
 );
 MenuSeparator.displayName = "MenuSeparator";
 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";
 var HoverCardRoot = RadixHoverCard.Root;
 var HoverCardTrigger = RadixHoverCard.Trigger;
 var HoverCardPortal = RadixHoverCard.Portal;
-var HoverCardContent = forwardRef(
+var HoverCardContent = forwardRef31(
   function HoverCardContent2({ className, sideOffset = 4, ...props }, ref) {
-    return /* @__PURE__ */ jsx(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx32(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx32(
       RadixHoverCard.Content,
       {
         ref,
         sideOffset,
         className: cn(
-          "rounded-base bg-panel border-border-strong z-40 border p-[14px] shadow-lg outline-none",
+          "rounded-base bg-panel border-border-strong z-popover border p-[14px] shadow-lg outline-none",
           "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
           className
         ),
@@ -1523,27 +1841,32 @@ var HoverCardContent = forwardRef(
 );
 HoverCardContent.displayName = "HoverCardContent";
 function HoverCard({ trigger, content, ...rootProps }) {
-  return /* @__PURE__ */ jsxs(RadixHoverCard.Root, { openDelay: 200, closeDelay: 120, ...rootProps, children: [
-    /* @__PURE__ */ jsx(RadixHoverCard.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(HoverCardContent, { children: content })
+  return /* @__PURE__ */ jsxs26(RadixHoverCard.Root, { openDelay: 200, closeDelay: 120, ...rootProps, children: [
+    /* @__PURE__ */ jsx32(RadixHoverCard.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx32(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";
 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 = forwardRef(
+var PopoverContent = forwardRef32(
   function PopoverContent2({ className, align = "start", sideOffset = 6, ...props }, ref) {
-    return /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx33(RadixPopover.Portal, { children: /* @__PURE__ */ jsx33(
       RadixPopover.Content,
       {
         ref,
         align,
         sideOffset,
         className: cn(
-          "bg-panel border-border-strong z-40 rounded-md border p-[6px] shadow-lg outline-none",
+          "bg-panel border-border-strong z-popover rounded-md border p-[6px] shadow-lg outline-none",
           "data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
           className
         ),
@@ -1554,6 +1877,18 @@ var PopoverContent = forwardRef(
 );
 PopoverContent.displayName = "PopoverContent";
 var Popover = RadixPopover.Root;
+
+// src/components/Toast/Toast.tsx
+import * as RadixToast from "@radix-ui/react-toast";
+import {
+  createContext,
+  forwardRef as forwardRef33,
+  useCallback as useCallback6,
+  useContext,
+  useMemo,
+  useState as useState7
+} from "react";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 var ToastContext = createContext(null);
 var variantIcon = {
   default: "\u25CF",
@@ -1576,21 +1911,30 @@ var variantBorderLeft = {
   warn: "border-l-warn",
   err: "border-l-err"
 };
+var toastIdCounter = 0;
+var nextToastId = () => `toast-${++toastIdCounter}`;
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = useState([]);
-  const toast = useCallback((t) => {
-    const id = t.id ?? Math.random().toString(36).slice(2);
-    setToasts((prev) => [...prev, { ...t, id }]);
+  const [toasts, setToasts] = useState7([]);
+  const toast = useCallback6((t) => {
+    const explicitId = t.id;
+    const id = explicitId ?? nextToastId();
+    const entry = { ...t, id };
+    setToasts((prev) => {
+      if (explicitId !== void 0 && prev.some((existing) => existing.id === explicitId)) {
+        return prev.map((existing) => existing.id === explicitId ? entry : existing);
+      }
+      return [...prev, entry];
+    });
     return id;
   }, []);
-  const dismiss = useCallback((id) => {
+  const dismiss = useCallback6((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
-  return /* @__PURE__ */ jsx(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs(RadixToast.Provider, { swipeDirection: "right", children: [
+  return /* @__PURE__ */ jsx34(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs27(RadixToast.Provider, { swipeDirection: "right", children: [
     children,
-    toasts.map((t) => /* @__PURE__ */ jsx(ToastCard, { toast: t, onDismiss: () => dismiss(t.id) }, t.id)),
-    /* @__PURE__ */ jsx(RadixToast.Viewport, { className: "fixed right-5 bottom-5 z-[70] flex w-[380px] max-w-[calc(100vw-40px)] flex-col gap-2 outline-none" })
+    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" })
   ] }) });
 }
 function useToast() {
@@ -1598,9 +1942,9 @@ function useToast() {
   if (!ctx) throw new Error("useToast must be inside <ToastProvider>");
   return ctx;
 }
-var ToastCard = forwardRef(function ToastCard2({ toast, onDismiss }, ref) {
+var ToastCard = forwardRef33(function ToastCard2({ toast, onDismiss }, ref) {
   const variant = toast.variant ?? "default";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs27(
     RadixToast.Root,
     {
       ref,
@@ -1615,13 +1959,13 @@ var ToastCard = forwardRef(function ToastCard2({ toast, onDismiss }, ref) {
         variantBorderLeft[variant]
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: cn("mt-px text-[14px] leading-none", variantTextColor[variant]), children: variantIcon[variant] }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx(RadixToast.Title, { className: "text-text text-[13px] font-medium", children: toast.title }),
-          toast.description && /* @__PURE__ */ jsx(RadixToast.Description, { className: "text-text-muted mt-[2px] text-[12px] leading-[1.5]", children: toast.description }),
-          toast.action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: toast.action })
+        /* @__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__ */ jsx(
+        /* @__PURE__ */ jsx34(
           RadixToast.Close,
           {
             "aria-label": "Dismiss",
@@ -1634,20 +1978,25 @@ var ToastCard = forwardRef(function ToastCard2({ toast, onDismiss }, ref) {
   );
 });
 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";
 var TooltipProvider = RadixTooltip.Provider;
 var TooltipRoot = RadixTooltip.Root;
 var TooltipTrigger = RadixTooltip.Trigger;
 var TooltipPortal = RadixTooltip.Portal;
 var TooltipArrow = RadixTooltip.Arrow;
-var TooltipContent = forwardRef(
+var TooltipContent = forwardRef34(
   function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
-    return /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx35(RadixTooltip.Portal, { children: /* @__PURE__ */ jsx35(
       RadixTooltip.Content,
       {
         ref,
         sideOffset,
         className: cn(
-          "pointer-events-none z-[60] rounded-sm px-2 py-[5px] text-[11px] whitespace-nowrap",
+          "z-tooltip pointer-events-none rounded-sm px-2 py-[5px] text-[11px] whitespace-nowrap",
           "bg-text text-bg",
           "data-[state=delayed-open]:animate-[ship-pop-in_120ms_var(--easing-out)]",
           className
@@ -1659,124 +2008,152 @@ var TooltipContent = forwardRef(
 );
 TooltipContent.displayName = "TooltipContent";
 function Tooltip({ content, children, side = "top", delayDuration = 400 }) {
-  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx(TooltipContent, { side, children: content })
+  return /* @__PURE__ */ jsx35(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs28(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx35(TooltipContent, { side, children: content })
   ] }) });
 }
-var alertStyles = cva("flex items-start gap-3 rounded-base border bg-panel p-3 text-[13px]", {
+
+// 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";
+var alertStyles = cva8("flex items-start gap-3 rounded-base border bg-panel p-3 text-[13px]", {
   variants: {
-    variant: {
-      info: "border-border border-l-2 border-l-accent",
+    tone: {
+      accent: "border-border border-l-2 border-l-accent",
       ok: "border-border border-l-2 border-l-ok",
       warn: "border-border border-l-2 border-l-warn",
       err: "border-border border-l-2 border-l-err"
     }
   },
-  defaultVariants: { variant: "info" }
+  defaultVariants: { tone: "accent" }
 });
 var iconColorClass = {
-  info: "text-accent",
+  accent: "text-accent",
   ok: "text-ok",
   warn: "text-warn",
   err: "text-err"
 };
 var defaultGlyph = {
-  info: "\u2139",
+  accent: "\u2139",
   ok: "\u2713",
   warn: "!",
   err: "\xD7"
 };
-var Alert = forwardRef(function Alert2({ variant = "info", title, description, icon, action, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+var Alert = forwardRef35(function Alert2({
+  tone = "accent",
+  title,
+  description,
+  icon,
+  action,
+  live = "polite",
+  className,
+  children,
+  ...props
+}, ref) {
+  const t = tone ?? "accent";
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       ref,
-      role: variant === "err" || variant === "warn" ? "alert" : "status",
-      className: cn(alertStyles({ variant }), className),
+      role: live === "assertive" ? "alert" : "status",
+      "aria-live": live === "off" ? void 0 : live,
+      className: cn(alertStyles({ tone }), className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn("mt-[1px] text-[14px] leading-none", iconColorClass[variant]),
-            children: icon ?? defaultGlyph[variant]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          title && /* @__PURE__ */ jsx("div", { className: "font-medium", children: title }),
-          description && /* @__PURE__ */ jsx("div", { className: "text-text-muted mt-[2px] text-[12px]", children: description }),
+        /* @__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 }),
           children
         ] }),
-        action && /* @__PURE__ */ jsx("div", { className: "ml-1 shrink-0", children: action })
+        action && /* @__PURE__ */ jsx36("div", { className: "ml-1 shrink-0", children: action })
       ]
     }
   );
 });
 Alert.displayName = "Alert";
-var bannerStyles = cva(
-  "flex items-center gap-[10px] border-b border-border px-[14px] py-2 text-[12px]",
+
+// 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";
+var bannerStyles = cva9(
+  "flex items-center gap-3 border-b border-border px-[14px] py-2 text-[12px]",
   {
     variants: {
-      variant: {
-        info: "bg-[color-mix(in_oklab,var(--color-accent),transparent_82%)] text-accent",
+      tone: {
+        accent: "bg-[color-mix(in_oklab,var(--color-accent),transparent_82%)] text-accent",
         ok: "bg-[color-mix(in_oklab,var(--color-ok),transparent_82%)] text-ok",
         warn: "bg-[color-mix(in_oklab,var(--color-warn),transparent_82%)] text-warn",
         err: "bg-[color-mix(in_oklab,var(--color-err),transparent_82%)] text-err"
       },
       sticky: {
-        true: "sticky top-0 z-30",
+        true: "sticky top-0 z-sticky",
         false: ""
       }
     },
-    defaultVariants: { variant: "info", sticky: false }
+    defaultVariants: { tone: "accent", sticky: false }
   }
 );
 var defaultGlyph2 = {
-  info: "\u2726",
+  accent: "\u2726",
   ok: "\u2713",
   warn: "!",
   err: "\xD7"
 };
-var Banner = forwardRef(function Banner2({ variant = "info", sticky, icon, action, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+var Banner = forwardRef36(function Banner2({ tone = "accent", sticky, icon, action, live = "polite", className, children, ...props }, ref) {
+  const t = tone ?? "accent";
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       ref,
-      role: variant === "err" || variant === "warn" ? "alert" : "status",
-      className: cn(bannerStyles({ variant, sticky }), className),
+      role: live === "assertive" ? "alert" : "status",
+      "aria-live": live === "off" ? void 0 : live,
+      className: cn(bannerStyles({ tone, sticky }), className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "leading-none", children: icon ?? defaultGlyph2[variant] }),
-        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
-        action && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: action })
+        /* @__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 })
       ]
     }
   );
 });
 Banner.displayName = "Banner";
-var Breadcrumbs = forwardRef(function Breadcrumbs2({ separator = "/", className, children, ...props }, ref) {
-  const crumbs = Children.toArray(children).filter(isValidElement);
+
+// src/patterns/Breadcrumbs/Breadcrumbs.tsx
+import {
+  Children as Children2,
+  forwardRef as forwardRef37,
+  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) {
+  const crumbs = Children2.toArray(children).filter(isValidElement2);
   const last = crumbs.length - 1;
-  return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-[13px]", className), ...props, children: /* @__PURE__ */ jsx("ol", { className: "text-text-muted flex flex-wrap items-center gap-[6px]", children: crumbs.map((crumb, i) => {
+  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) => {
     const isCurrent = i === last;
-    return /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center gap-[6px]", children: [
-      isCurrent ? /* @__PURE__ */ jsx(Crumb, { ...crumb.props, current: true }) : crumb,
-      !isCurrent && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-text-dim", children: separator })
+    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 })
     ] }, i);
   }) }) });
 });
 Breadcrumbs.displayName = "Breadcrumbs";
-var Crumb = forwardRef(function Crumb2({ current, className, href, children, ...props }, ref) {
+var Crumb = forwardRef37(function Crumb2({ current, className, href, children, ...props }, ref) {
   if (current) {
-    return /* @__PURE__ */ jsx("span", { "aria-current": "page", className: cn("text-text", className), children });
+    return /* @__PURE__ */ jsx38("span", { "aria-current": "page", className: cn("text-text", className), children });
   }
-  return /* @__PURE__ */ jsx(
+  if (href === void 0) {
+    return /* @__PURE__ */ jsx38("span", { className: cn("text-text-dim", className), children });
+  }
+  return /* @__PURE__ */ jsx38(
     "a",
     {
       ref,
-      href: href ?? "#",
+      href,
       className: cn("hover:text-text transition-colors duration-(--duration-micro)", className),
       ...props,
       children
@@ -1784,6 +2161,17 @@ var Crumb = forwardRef(function Crumb2({ current, className, href, children, ...
   );
 });
 Crumb.displayName = "Crumb";
+
+// src/patterns/Combobox/Combobox.tsx
+import {
+  forwardRef as forwardRef38,
+  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";
 function normalize(option) {
   if (typeof option === "string") {
     return { value: option, label: option, searchText: option.toLowerCase() };
@@ -1799,7 +2187,7 @@ function normalize(option) {
   };
 }
 var defaultFilter = (option, query) => option.searchText.includes(query.toLowerCase());
-var Combobox = forwardRef(function Combobox2({
+var Combobox = forwardRef38(function Combobox2({
   options,
   value: valueProp,
   defaultValue,
@@ -1816,16 +2204,16 @@ var Combobox = forwardRef(function Combobox2({
   id,
   "aria-label": ariaLabel
 }, ref) {
-  const reactId = useId();
+  const reactId = useId6();
   const listboxId = `${id ?? reactId}-listbox`;
   const inputId = id ?? `${reactId}-input`;
-  const normalized = useMemo(() => options.map(normalize), [options]);
+  const normalized = useMemo2(() => options.map(normalize), [options]);
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
     onChange: onValueChange
   });
-  const initialQuery = useMemo(() => {
+  const initialQuery = useMemo2(() => {
     if (defaultQuery !== void 0) return defaultQuery;
     if (defaultValue !== void 0) {
       const opt = normalized.find((o) => o.value === defaultValue);
@@ -1838,10 +2226,10 @@ var Combobox = forwardRef(function Combobox2({
     defaultValue: initialQuery,
     onChange: onQueryChange
   });
-  const [open, setOpen] = useState(false);
-  const wrapperRef = useRef(null);
+  const [open, setOpen] = useState8(false);
+  const wrapperRef = useRef4(null);
   useOutsideClick(wrapperRef, () => setOpen(false));
-  const filtered = useMemo(
+  const filtered = useMemo2(
     () => query ? normalized.filter((o) => filter(o, query)) : normalized,
     [normalized, query, filter]
   );
@@ -1853,7 +2241,7 @@ var Combobox = forwardRef(function Combobox2({
       if (item && !item.disabled) commit(item);
     }
   });
-  useEffect(() => {
+  useEffect5(() => {
     setCursor(0);
   }, [query, setCursor]);
   function commit(option) {
@@ -1876,8 +2264,8 @@ var Combobox = forwardRef(function Combobox2({
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: "relative", style: { width }, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs32("div", { ref: wrapperRef, className: "relative", style: { width }, children: [
+    /* @__PURE__ */ jsx39(
       "input",
       {
         ref,
@@ -1911,19 +2299,19 @@ var Combobox = forwardRef(function Combobox2({
         )
       }
     ),
-    open && /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsx39(
       "ul",
       {
         id: listboxId,
         role: "listbox",
         "aria-label": ariaLabel ?? "Suggestions",
         className: cn(
-          "absolute top-full right-0 left-0 z-30 mt-1 max-h-[220px] overflow-auto",
+          "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__ */ jsx("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__ */ jsx39("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__ */ jsxs(
+          return /* @__PURE__ */ jsxs32(
             "li",
             {
               id: `${listboxId}-option-${i}`,
@@ -1941,8 +2329,8 @@ var Combobox = forwardRef(function Combobox2({
                 option.disabled && "pointer-events-none opacity-40"
               ),
               children: [
-                /* @__PURE__ */ jsx("div", { children: option.label }),
-                option.description && /* @__PURE__ */ jsx("div", { className: "text-text-dim text-[11px]", children: option.description })
+                /* @__PURE__ */ jsx39("div", { children: option.label }),
+                option.description && /* @__PURE__ */ jsx39("div", { className: "text-text-dim text-[11px]", children: option.description })
               ]
             },
             option.value
@@ -1950,14 +2338,19 @@ var Combobox = forwardRef(function Combobox2({
         })
       }
     ),
-    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "", readOnly: true })
+    name && /* @__PURE__ */ jsx39("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";
 function flatItems(groups) {
   return groups.flatMap((g) => g.items);
 }
-var CommandPalette = forwardRef(
+var CommandPalette = forwardRef39(
   function CommandPalette2({
     open,
     onOpenChange,
@@ -1970,7 +2363,7 @@ var CommandPalette = forwardRef(
     emptyState,
     width = 540
   }, ref) {
-    const flat = useMemo(() => flatItems(groups), [groups]);
+    const flat = useMemo3(() => flatItems(groups), [groups]);
     const { cursor, setCursor, onKeyDown } = useKeyboardList({
       count: flat.length,
       defaultCursor: 0,
@@ -1979,37 +2372,41 @@ var CommandPalette = forwardRef(
         if (item) onSelect(item.id);
       }
     });
-    useEffect(() => {
+    const reactId = useId7();
+    const listboxId = `${reactId}-listbox`;
+    const optionId = (i) => `${listboxId}-option-${i}`;
+    const hasMatches = flat.length > 0;
+    useEffect6(() => {
       setCursor(0);
     }, [query, groups, setCursor]);
-    return /* @__PURE__ */ jsx(RadixDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
-      /* @__PURE__ */ jsx(
-        RadixDialog.Overlay,
+    return /* @__PURE__ */ jsx40(RadixDialog4.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs33(RadixDialog4.Portal, { children: [
+      /* @__PURE__ */ jsx40(
+        RadixDialog4.Overlay,
         {
           className: cn(
-            "fixed inset-0 z-50 bg-black/55 backdrop-blur-[4px]",
+            "z-overlay fixed inset-0 bg-black/55 backdrop-blur-[4px]",
             "data-[state=open]:animate-[ship-fade-in_150ms_ease]"
           )
         }
       ),
-      /* @__PURE__ */ jsxs(
-        RadixDialog.Content,
+      /* @__PURE__ */ jsxs33(
+        RadixDialog4.Content,
         {
           ref,
           "aria-label": "Command palette",
           "aria-describedby": void 0,
           style: { width },
           className: cn(
-            "fixed top-[20%] left-1/2 z-[51] max-w-[calc(100%-40px)] -translate-x-1/2",
+            "z-modal fixed top-[20%] left-1/2 max-w-[calc(100%-40px)] -translate-x-1/2",
             "border-border-strong bg-panel overflow-hidden rounded-xl border shadow-lg",
             "outline-none data-[state=open]:animate-[ship-dialog-in_180ms_var(--easing-out)]"
           ),
           onKeyDown,
           children: [
-            /* @__PURE__ */ jsx(RadixDialog.Title, { className: "sr-only", children: "Command palette" }),
-            /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center gap-[10px] border-b px-4 py-[14px]", children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-text-dim", children: "\u2315" }),
-              /* @__PURE__ */ jsx(
+            /* @__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(
                 "input",
                 {
                   autoFocus: true,
@@ -2018,22 +2415,27 @@ var CommandPalette = forwardRef(
                   onChange: (e) => onQueryChange(e.target.value),
                   placeholder,
                   "aria-label": "Search",
+                  role: "combobox",
                   "aria-autocomplete": "list",
+                  "aria-expanded": true,
+                  "aria-controls": listboxId,
+                  "aria-activedescendant": hasMatches ? optionId(cursor) : void 0,
                   className: "text-text placeholder:text-text-dim flex-1 border-0 bg-transparent text-[14px] outline-none"
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "border-border text-text-dim rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: "ESC" })
+              /* @__PURE__ */ jsx40("span", { className: "border-border text-text-dim rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: "ESC" })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "min-h-[220px] p-2", role: "listbox", "aria-label": "Results", children: flat.length === 0 ? emptyState ?? /* @__PURE__ */ jsx("div", { className: "text-text-dim px-3 py-5 text-center text-[12px]", children: "No matches" }) : /* @__PURE__ */ jsx(
+            /* @__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(
               CommandGroups,
               {
                 groups,
                 cursor,
                 setCursor,
-                onSelect
+                onSelect,
+                optionId
               }
             ) }),
-            footer && /* @__PURE__ */ jsx("div", { className: "border-border text-text-dim flex gap-4 border-t px-[14px] py-[10px] font-mono text-[10px]", children: footer })
+            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 })
           ]
         }
       )
@@ -2041,12 +2443,12 @@ var CommandPalette = forwardRef(
   }
 );
 CommandPalette.displayName = "CommandPalette";
-function CommandGroups({ groups, cursor, setCursor, onSelect }) {
+function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
   let runningIndex = 0;
-  return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group, gIdx) => {
+  return /* @__PURE__ */ jsx40(Fragment, { children: groups.map((group, gIdx) => {
     if (group.items.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { children: [
-      group.label && /* @__PURE__ */ jsxs("div", { className: "text-text-dim px-2 pt-2 pb-1 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
+    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: [
         group.label,
         " \xB7 ",
         group.items.length
@@ -2054,9 +2456,10 @@ function CommandGroups({ groups, cursor, setCursor, onSelect }) {
       group.items.map((item) => {
         const myIndex = runningIndex++;
         const isActive = cursor === myIndex;
-        return /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsxs33(
           "button",
           {
+            id: optionId(myIndex),
             type: "button",
             role: "option",
             "aria-selected": isActive,
@@ -2067,7 +2470,7 @@ function CommandGroups({ groups, cursor, setCursor, onSelect }) {
               isActive ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
             ),
             children: [
-              item.glyph != null && /* @__PURE__ */ jsx(
+              item.glyph != null && /* @__PURE__ */ jsx40(
                 "span",
                 {
                   "aria-hidden": true,
@@ -2078,11 +2481,11 @@ function CommandGroups({ groups, cursor, setCursor, onSelect }) {
                   children: item.glyph
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px]", children: item.label }),
-                item.description && /* @__PURE__ */ jsx("span", { className: "text-text-dim block truncate text-[11px]", children: item.description })
+              /* @__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 })
               ] }),
-              item.trailing && /* @__PURE__ */ jsx("span", { className: "text-text-dim font-mono text-[10px]", children: item.trailing })
+              item.trailing && /* @__PURE__ */ jsx40("span", { className: "text-text-dim font-mono text-[10px]", children: item.trailing })
             ]
           },
           item.id
@@ -2102,11 +2505,16 @@ function filterCommandItems(query, groups) {
     })
   })).filter((g) => g.items.length > 0);
 }
+
+// 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";
 var alignClass = {
   left: "text-left",
   right: "text-right",
   center: "text-center"
 };
+var EMPTY_SET = /* @__PURE__ */ new Set();
 function DataTable(props) {
   const {
     data,
@@ -2131,16 +2539,16 @@ function DataTable(props) {
     onChange: onSortChange
   });
   const [selected, setSelected] = useControllableState({
-    value: selectedProp instanceof Set ? selectedProp : selectedProp,
+    value: selectedProp,
     defaultValue: new Set(defaultSelected ?? []),
     onChange: onSelectionChange
   });
-  const sortableMap = useMemo(() => {
+  const sortableMap = useMemo4(() => {
     const m = /* @__PURE__ */ new Map();
     for (const c of columns) if (c.accessor) m.set(c.key, c);
     return m;
   }, [columns]);
-  const sortedData = useMemo(() => {
+  const sortedData = useMemo4(() => {
     if (!sort) return [...data];
     const col = sortableMap.get(sort.key);
     if (!col || !col.accessor) return [...data];
@@ -2152,11 +2560,12 @@ function DataTable(props) {
       return String(av).localeCompare(String(bv)) * factor;
     });
   }, [data, sort, sortableMap]);
-  const allIds = useMemo(() => sortedData.map(rowKey), [sortedData, rowKey]);
-  const allSelected = allIds.length > 0 && allIds.every((id) => selected.has(id));
-  const someSelected = !allSelected && allIds.some((id) => selected.has(id));
-  const headerCheckRef = useRef(null);
-  useEffect(() => {
+  const allIds = useMemo4(() => sortedData.map(rowKey), [sortedData, rowKey]);
+  const selectedSet = selected ?? EMPTY_SET;
+  const allSelected = allIds.length > 0 && allIds.every((id) => selectedSet.has(id));
+  const someSelected = !allSelected && allIds.some((id) => selectedSet.has(id));
+  const headerCheckRef = useRef5(null);
+  useEffect7(() => {
     if (headerCheckRef.current) headerCheckRef.current.indeterminate = someSelected;
   }, [someSelected]);
   const toggleSort = (key) => {
@@ -2187,10 +2596,10 @@ function DataTable(props) {
       return next;
     });
   };
-  return /* @__PURE__ */ jsxs("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
-    caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
-    /* @__PURE__ */ jsx("thead", { className: cn("bg-panel-2", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { children: [
-      selectable && /* @__PURE__ */ jsx("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ jsx(
+  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(
         "input",
         {
           ref: headerCheckRef,
@@ -2206,12 +2615,12 @@ 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";
-        return /* @__PURE__ */ jsxs(
+        const indicator = sortable && isSorted && /* @__PURE__ */ jsx41("span", { "aria-hidden": true, className: "ml-1", children: sort?.direction === "asc" ? "\u2191" : "\u2193" });
+        return /* @__PURE__ */ jsx41(
           "th",
           {
             scope: "col",
             "aria-sort": ariaSort,
-            onClick: sortable ? () => toggleSort(col.key) : void 0,
             style: col.width != null ? { width: col.width } : void 0,
             className: cn(
               "border-border border-b px-3 py-2 font-mono text-[10px] font-medium tracking-[1.4px] uppercase select-none",
@@ -2219,17 +2628,25 @@ function DataTable(props) {
               sortable && "cursor-pointer",
               isSorted ? "text-accent" : "text-text-dim"
             ),
-            children: [
-              col.header,
-              sortable && isSorted && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ml-1", children: sort?.direction === "asc" ? "\u2191" : "\u2193" })
-            ]
+            children: sortable ? /* @__PURE__ */ jsxs34(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleSort(col.key),
+                className: "focus-visible:ring-accent-dim inline-flex cursor-pointer items-center gap-1 font-mono text-[10px] font-medium tracking-[1.4px] uppercase outline-none focus-visible:ring-[3px]",
+                children: [
+                  col.header,
+                  indicator
+                ]
+              }
+            ) : col.header
           },
           col.key
         );
       })
     ] }) }),
-    /* @__PURE__ */ jsxs("tbody", { children: [
-      sortedData.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs34("tbody", { children: [
+      sortedData.length === 0 && /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41(
         "td",
         {
           colSpan: columns.length + (selectable ? 1 : 0),
@@ -2239,8 +2656,8 @@ function DataTable(props) {
       ) }),
       sortedData.map((row) => {
         const id = rowKey(row);
-        const isSelected = selected.has(id);
-        return /* @__PURE__ */ jsxs(
+        const isSelected = selectedSet.has(id);
+        return /* @__PURE__ */ jsxs34(
           "tr",
           {
             "data-state": isSelected ? "selected" : void 0,
@@ -2249,7 +2666,7 @@ function DataTable(props) {
               isSelected ? "bg-accent-dim/50" : "hover:bg-panel-2"
             ),
             children: [
-              selectable && /* @__PURE__ */ jsx("td", { className: "px-3 py-[10px]", children: /* @__PURE__ */ jsx(
+              selectable && /* @__PURE__ */ jsx41("td", { className: "px-3 py-[10px]", children: /* @__PURE__ */ jsx41(
                 "input",
                 {
                   type: "checkbox",
@@ -2259,7 +2676,7 @@ function DataTable(props) {
                   className: "cursor-pointer accent-[var(--color-accent)]"
                 }
               ) }),
-              columns.map((col) => /* @__PURE__ */ jsx("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__ */ 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))
             ]
           },
           id
@@ -2268,29 +2685,30 @@ function DataTable(props) {
     ] })
   ] });
 }
-var MONTHS = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "April",
-  "May",
-  "June",
-  "July",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
+
+// src/patterns/DatePicker/Calendar.tsx
+import {
+  forwardRef as forwardRef40,
+  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";
+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) {
   if (!a) return false;
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
-var Calendar = forwardRef(function Calendar2({
-  selected,
-  defaultSelected,
-  onSelect,
+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({
+  value,
+  defaultValue,
+  onValueChange,
   month: monthProp,
   year: yearProp,
   defaultMonth,
@@ -2300,39 +2718,125 @@ var Calendar = forwardRef(function Calendar2({
   className,
   ...props
 }, ref) {
-  const today = /* @__PURE__ */ new Date();
+  const [today] = useState9(() => /* @__PURE__ */ new Date());
+  const [hydrated, setHydrated] = useState9(false);
+  useEffect8(() => setHydrated(true), []);
   const [selectedDate, setSelectedDate] = useControllableState({
-    value: selected,
-    defaultValue: defaultSelected,
-    onChange: onSelect
+    value,
+    defaultValue,
+    onChange: onValueChange
   });
-  const initialMonth = defaultMonth ?? defaultSelected?.getMonth() ?? today.getMonth();
-  const initialYear = defaultYear ?? defaultSelected?.getFullYear() ?? today.getFullYear();
-  const [internalMonth, setInternalMonth] = useState(initialMonth);
-  const [internalYear, setInternalYear] = useState(initialYear);
+  const initialMonth = defaultMonth ?? defaultValue?.getMonth() ?? today.getMonth();
+  const initialYear = defaultYear ?? defaultValue?.getFullYear() ?? today.getFullYear();
+  const [internalMonth, setInternalMonth] = useState9(initialMonth);
+  const [internalYear, setInternalYear] = useState9(initialYear);
   const month = monthProp ?? internalMonth;
   const year = yearProp ?? internalYear;
   const isControlled = monthProp !== void 0 && yearProp !== void 0;
-  const setVisible = (m, y) => {
-    if (!isControlled) {
-      setInternalMonth(m);
-      setInternalYear(y);
-    }
-    onVisibleMonthChange?.({ month: m, year: y });
-  };
-  const goPrev = () => {
+  const setVisible = useCallback7(
+    (m, y) => {
+      if (!isControlled) {
+        setInternalMonth(m);
+        setInternalYear(y);
+      }
+      onVisibleMonthChange?.({ month: m, year: y });
+    },
+    [isControlled, onVisibleMonthChange]
+  );
+  const goPrev = useCallback7(() => {
     const m = month === 0 ? 11 : month - 1;
     const y = month === 0 ? year - 1 : year;
     setVisible(m, y);
-  };
-  const goNext = () => {
+  }, [month, year, setVisible]);
+  const goNext = useCallback7(() => {
     const m = month === 11 ? 0 : month + 1;
     const y = month === 11 ? year + 1 : year;
     setVisible(m, y);
-  };
+  }, [month, year, setVisible]);
   const daysInMonth = new Date(year, month + 1, 0).getDate();
   const firstDayOfMonth = new Date(year, month, 1).getDay();
-  return /* @__PURE__ */ jsxs(
+  const [focusedDate, setFocusedDate] = useState9(() => {
+    if (selectedDate) return selectedDate;
+    return new Date(initialYear, initialMonth, 1);
+  });
+  useEffect8(() => {
+    if (selectedDate) setFocusedDate(selectedDate);
+  }, [selectedDate]);
+  const focusedInVisibleMonth = focusedDate.getMonth() === month && focusedDate.getFullYear() === year;
+  const effectiveFocusDay = focusedInVisibleMonth ? focusedDate.getDate() : clampDay(year, month, focusedDate.getDate());
+  const dayRefs = useRef6(/* @__PURE__ */ new Map());
+  const shouldFocusRef = useRef6(false);
+  useEffect8(() => {
+    if (!shouldFocusRef.current) return;
+    shouldFocusRef.current = false;
+    const node = dayRefs.current.get(effectiveFocusDay);
+    node?.focus();
+  }, [effectiveFocusDay, month, year]);
+  const moveFocus = useCallback7(
+    (next) => {
+      setFocusedDate(next);
+      shouldFocusRef.current = true;
+      const nextMonth = next.getMonth();
+      const nextYear = next.getFullYear();
+      if (nextMonth !== month || nextYear !== year) {
+        setVisible(nextMonth, nextYear);
+      }
+    },
+    [month, year, setVisible]
+  );
+  const onCellKeyDown = useCallback7(
+    (e, day) => {
+      const current = new Date(year, month, day);
+      let next = null;
+      let handled = true;
+      switch (e.key) {
+        case "ArrowLeft":
+          next = new Date(year, month, day - 1);
+          break;
+        case "ArrowRight":
+          next = new Date(year, month, day + 1);
+          break;
+        case "ArrowUp":
+          next = new Date(year, month, day - 7);
+          break;
+        case "ArrowDown":
+          next = new Date(year, month, day + 7);
+          break;
+        case "Home": {
+          const dow = current.getDay();
+          next = new Date(year, month, day - dow);
+          break;
+        }
+        case "End": {
+          const dow = current.getDay();
+          next = new Date(year, month, day + (6 - dow));
+          break;
+        }
+        case "PageUp": {
+          const targetMonth = month === 0 ? 11 : month - 1;
+          const targetYear = month === 0 ? year - 1 : year;
+          const targetDay = clampDay(targetYear, targetMonth, day);
+          next = new Date(targetYear, targetMonth, targetDay);
+          break;
+        }
+        case "PageDown": {
+          const targetMonth = month === 11 ? 0 : month + 1;
+          const targetYear = month === 11 ? year + 1 : year;
+          const targetDay = clampDay(targetYear, targetMonth, day);
+          next = new Date(targetYear, targetMonth, targetDay);
+          break;
+        }
+        default:
+          handled = false;
+      }
+      if (handled && next) {
+        e.preventDefault();
+        moveFocus(next);
+      }
+    },
+    [month, year, moveFocus]
+  );
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       ref,
@@ -2344,14 +2848,14 @@ var Calendar = forwardRef(function Calendar2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-medium", "aria-live": "polite", 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: [
             MONTHS[month],
             " ",
             year
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs35("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx42(
               IconButton,
               {
                 size: "sm",
@@ -2361,48 +2865,89 @@ var Calendar = forwardRef(function Calendar2({
                 onClick: goPrev
               }
             ),
-            /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", icon: "\u203A", "aria-label": "Next month", onClick: goNext })
+            /* @__PURE__ */ jsx42(IconButton, { size: "sm", variant: "ghost", icon: "\u203A", "aria-label": "Next month", onClick: goNext })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-[2px]", children: [
-          DAYS.map((d, i) => /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "text-text-dim p-1 text-center font-mono text-[10px]", children: d }, i)),
-          Array.from({ length: firstDayOfMonth }).map((_, i) => /* @__PURE__ */ jsx("div", { "aria-hidden": true }, `pad-${i}`)),
-          Array.from({ length: daysInMonth }).map((_, i) => {
-            const d = i + 1;
-            const date = new Date(year, month, d);
-            const isSelected = isSameDay(selectedDate, date);
-            const isToday = isSameDay(today, date);
-            const disabled = isDateDisabled?.(date) ?? false;
-            return /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                disabled,
-                "aria-pressed": isSelected,
-                "aria-current": isToday ? "date" : void 0,
-                "aria-label": date.toDateString(),
-                onClick: () => setSelectedDate(date),
-                className: cn(
-                  "cursor-pointer rounded-xs border-0 bg-transparent py-[6px] text-center text-[12px] outline-none",
-                  "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
-                  "disabled:cursor-not-allowed disabled:opacity-30",
-                  !isSelected && !disabled && "text-text hover:bg-panel-2",
-                  isSelected && "bg-accent text-on-accent font-semibold",
-                  !isSelected && isToday && "border-border-strong border"
-                ),
-                children: d
-              },
-              d
-            );
-          })
+        /* @__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(
+            "div",
+            {
+              role: "columnheader",
+              "aria-label": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][i],
+              className: "text-text-dim p-1 text-center font-mono text-[10px]",
+              children: d
+            },
+            i
+          )) }),
+          (() => {
+            const totalCells = firstDayOfMonth + daysInMonth;
+            const rowCount = Math.ceil(totalCells / 7);
+            const rows = [];
+            for (let r = 0; r < rowCount; r++) {
+              const cells = [];
+              for (let c = 0; c < 7; c++) {
+                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}`));
+                  continue;
+                }
+                const date = new Date(year, month, dayNum);
+                const isSelected = isSameDay(selectedDate, date);
+                const isToday = hydrated && isSameDay(today, date);
+                const disabled = isDateDisabled?.(date) ?? false;
+                const isFocused = dayNum === effectiveFocusDay;
+                const day = dayNum;
+                cells.push(
+                  /* @__PURE__ */ jsx42("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx42(
+                    "button",
+                    {
+                      ref: (node) => {
+                        if (node) dayRefs.current.set(day, node);
+                        else dayRefs.current.delete(day);
+                      },
+                      type: "button",
+                      disabled,
+                      "aria-current": isToday ? "date" : void 0,
+                      "aria-label": date.toDateString(),
+                      tabIndex: isFocused ? 0 : -1,
+                      onClick: () => {
+                        setSelectedDate(date);
+                        setFocusedDate(date);
+                      },
+                      onKeyDown: (e) => onCellKeyDown(e, day),
+                      className: cn(
+                        "w-full cursor-pointer rounded-xs border-0 bg-transparent py-[6px] text-center text-[12px] outline-none",
+                        "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+                        "disabled:cursor-not-allowed disabled:opacity-30",
+                        !isSelected && !disabled && "text-text hover:bg-panel-2",
+                        isSelected && "bg-accent text-on-accent font-semibold",
+                        !isSelected && isToday && "border-border-strong border"
+                      ),
+                      children: day
+                    }
+                  ) }, day)
+                );
+              }
+              rows.push(
+                /* @__PURE__ */ jsx42("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: cells }, `row-${r}`)
+              );
+            }
+            return rows;
+          })()
         ] })
       ]
     }
   );
 });
 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";
 var defaultFormat = (d) => d.toLocaleDateString();
-var DatePicker = forwardRef(function DatePicker2({
+var DatePicker = forwardRef41(function DatePicker2({
   value: valueProp,
   defaultValue,
   onValueChange,
@@ -2416,14 +2961,14 @@ var DatePicker = forwardRef(function DatePicker2({
   id,
   name
 }, ref) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState10(false);
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs36(RadixPopover2.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx43(RadixPopover2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs36(
       "button",
       {
         ref,
@@ -2440,24 +2985,24 @@ var DatePicker = forwardRef(function DatePicker2({
         ),
         style: { width },
         children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-text-dim", children: "\u25A2" }),
-          /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate", !value && "text-text-dim"), children: value ? format(value) : emptyLabel ?? placeholder })
+          /* @__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__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
-      RadixPopover.Content,
+    /* @__PURE__ */ jsx43(RadixPopover2.Portal, { children: /* @__PURE__ */ jsx43(
+      RadixPopover2.Content,
       {
         align: "start",
         sideOffset: 6,
-        className: "z-40 outline-none data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
-        children: /* @__PURE__ */ jsx(
+        className: "z-popover outline-none data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+        children: /* @__PURE__ */ jsx43(
           Calendar,
           {
-            selected: value,
+            value,
             defaultMonth: value?.getMonth(),
             defaultYear: value?.getFullYear(),
-            onSelect: (date) => {
+            onValueChange: (date) => {
               setValue(date);
               setOpen(false);
             },
@@ -2466,13 +3011,17 @@ var DatePicker = forwardRef(function DatePicker2({
         )
       }
     ) }),
-    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ? value.toISOString() : "", readOnly: true })
+    name && /* @__PURE__ */ jsx43("input", { type: "hidden", name, value: value ? value.toISOString() : "", readOnly: true })
   ] });
 });
 DatePicker.displayName = "DatePicker";
-var Dots = forwardRef(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
+
+// 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) {
   const interactive = typeof onChange === "function";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx44(
     "nav",
     {
       ref,
@@ -2486,7 +3035,7 @@ var Dots = forwardRef(function Dots2({ total, current, onChange, className, "ari
           isActive ? "w-[18px] bg-accent" : "w-[6px] bg-panel-2"
         );
         if (interactive) {
-          return /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx44(
             "button",
             {
               type: "button",
@@ -2503,24 +3052,115 @@ var Dots = forwardRef(function Dots2({ total, current, onChange, className, "ari
             i
           );
         }
-        return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: sharedClass }, i);
+        return /* @__PURE__ */ jsx44("span", { "aria-hidden": true, className: sharedClass }, i);
       })
     }
   );
 });
 Dots.displayName = "Dots";
-var plateStyles = cva("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
+
+// src/patterns/Dropzone/Dropzone.tsx
+import {
+  forwardRef as forwardRef43,
+  useState as useState11
+} from "react";
+import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
+function listToArray(list) {
+  if (!list) return [];
+  return Array.from(list);
+}
+var Dropzone = forwardRef43(function Dropzone2({
+  onFiles,
+  accept,
+  multiple = true,
+  title = "Drop files to ingest",
+  description,
+  icon = "\u21A5",
+  disabled,
+  className,
+  ...props
+}, ref) {
+  const [isDragging, setIsDragging] = useState11(false);
+  const onDragOver = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const onDragLeave = () => setIsDragging(false);
+  const onDrop = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(false);
+    const files = listToArray(e.dataTransfer.files);
+    if (files.length) onFiles?.(files);
+  };
+  return /* @__PURE__ */ jsxs37(
+    "label",
+    {
+      ref,
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      className: cn(
+        "rounded-base flex max-w-[420px] cursor-pointer flex-col items-center border-[1.5px] border-dashed p-8 text-center",
+        "transition-[background,border] duration-(--duration-micro)",
+        "focus-within:ring-accent-dim focus-within:ring-[3px]",
+        isDragging ? "border-accent bg-accent-dim" : "border-border-strong bg-panel hover:bg-panel-2",
+        disabled && "pointer-events-none cursor-not-allowed opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx45(
+          "input",
+          {
+            type: "file",
+            accept,
+            multiple,
+            disabled,
+            "aria-label": typeof title === "string" ? title : "Upload files",
+            className: "sr-only",
+            onChange: (e) => {
+              const files = listToArray(e.target.files);
+              if (files.length) onFiles?.(files);
+              e.target.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx45(
+          "div",
+          {
+            "aria-hidden": true,
+            className: cn("mb-2 text-[28px]", isDragging ? "text-accent" : "text-text-dim"),
+            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 })
+      ]
+    }
+  );
+});
+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";
+var plateStyles = cva10("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
   variants: {
     tone: {
+      neutral: "bg-panel-2 text-text-muted",
       accent: "bg-accent-dim text-accent",
-      danger: "bg-[color-mix(in_oklab,var(--color-err),transparent_85%)] text-err",
-      muted: "bg-panel-2 text-text-muted"
+      ok: "bg-[color-mix(in_oklab,var(--color-ok),transparent_85%)] text-ok",
+      warn: "bg-[color-mix(in_oklab,var(--color-warn),transparent_85%)] text-warn",
+      err: "bg-[color-mix(in_oklab,var(--color-err),transparent_85%)] text-err"
     }
   },
-  defaultVariants: { tone: "accent" }
+  defaultVariants: { tone: "neutral" }
 });
-var EmptyState = forwardRef(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+var EmptyState = forwardRef44(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       ref,
@@ -2530,10 +3170,10 @@ var EmptyState = forwardRef(function EmptyState2({ icon, title, description, act
       ),
       ...props,
       children: [
-        icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: plateStyles({ tone }), children: icon }),
-        /* @__PURE__ */ jsx("div", { className: "text-[14px] font-medium", children: title }),
-        description && /* @__PURE__ */ jsx("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
-        chips && chips.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ jsx(
+        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(
           "button",
           {
             type: "button",
@@ -2553,16 +3193,20 @@ var EmptyState = forwardRef(function EmptyState2({ icon, title, description, act
   );
 });
 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";
 function deriveExt(name) {
   const dot = name.lastIndexOf(".");
   if (dot < 0) return "FILE";
   return name.slice(dot + 1).slice(0, 4).toUpperCase();
 }
-var FileChip = forwardRef(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
+var FileChip = forwardRef45(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__ */ jsxs(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       ref,
@@ -2572,7 +3216,7 @@ var FileChip = forwardRef(function FileChip2({ name, size, progress, icon, onRem
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx47(
           "span",
           {
             "aria-hidden": true,
@@ -2580,17 +3224,17 @@ var FileChip = forwardRef(function FileChip2({ name, size, progress, icon, onRem
             children: icon ?? ext
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] font-medium", children: name }),
-          /* @__PURE__ */ jsxs("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
+        /* @__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: [
             size,
-            showProgress && !isComplete && /* @__PURE__ */ jsxs("span", { children: [
+            showProgress && !isComplete && /* @__PURE__ */ jsxs39("span", { children: [
               " \xB7 ",
               Math.round(progress),
               "%"
             ] })
           ] }),
-          showProgress && !isComplete && /* @__PURE__ */ jsx("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ jsx(
+          showProgress && !isComplete && /* @__PURE__ */ jsx47("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ jsx47(
             "div",
             {
               className: cn(
@@ -2601,7 +3245,7 @@ var FileChip = forwardRef(function FileChip2({ name, size, progress, icon, onRem
             }
           ) })
         ] }),
-        onRemove && /* @__PURE__ */ jsx(
+        onRemove && /* @__PURE__ */ jsx47(
           "button",
           {
             type: "button",
@@ -2619,8 +3263,13 @@ var FileChip = forwardRef(function FileChip2({ name, size, progress, icon, onRem
   );
 });
 FileChip.displayName = "FileChip";
-var Menubar = forwardRef(function Menubar2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
+
+// 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,
     {
       ref,
@@ -2634,9 +3283,9 @@ var Menubar = forwardRef(function Menubar2({ className, ...props }, ref) {
 });
 Menubar.displayName = "Menubar";
 var MenubarMenu = RadixMenubar.Menu;
-var MenubarTrigger = forwardRef(
+var MenubarTrigger = forwardRef46(
   function MenubarTrigger2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx48(
       RadixMenubar.Trigger,
       {
         ref,
@@ -2653,16 +3302,16 @@ var MenubarTrigger = forwardRef(
   }
 );
 MenubarTrigger.displayName = "MenubarTrigger";
-var MenubarContent = forwardRef(
+var MenubarContent = forwardRef46(
   function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
-    return /* @__PURE__ */ jsx(RadixMenubar.Portal, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx48(RadixMenubar.Portal, { children: /* @__PURE__ */ jsx48(
       RadixMenubar.Content,
       {
         ref,
         sideOffset,
         align,
         className: cn(
-          "border-border-strong bg-panel z-40 min-w-[180px] rounded-md border p-1 shadow-lg outline-none",
+          "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
         ),
@@ -2677,24 +3326,24 @@ var itemBase3 = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var MenubarItem = forwardRef(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+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__ */ jsx("span", { className: "flex-1", children }),
-        trailing && /* @__PURE__ */ jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+        /* @__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 = forwardRef(
+var MenubarSeparator = forwardRef46(
   function MenubarSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx48(
       RadixMenubar.Separator,
       {
         ref,
@@ -2705,6 +3354,516 @@ var MenubarSeparator = forwardRef(
   }
 );
 MenubarSeparator.displayName = "MenubarSeparator";
+
+// 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/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 },
+      className: cn(
+        "border-border bg-panel flex h-full flex-col gap-2 border-r p-[14px]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Sidebar.displayName = "Sidebar";
+var NavItem = forwardRef47(
+  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(
+        "span",
+        {
+          className: cn(
+            "rounded-xs px-[6px] py-px font-mono text-[10px]",
+            active ? "bg-accent text-on-accent" : "bg-panel-2 text-text-muted"
+          ),
+          children: badge
+        }
+      )
+    ] });
+    const baseClass = cn(
+      "flex cursor-pointer items-center gap-[10px] rounded-xs px-2 py-[6px] text-[13px] outline-none",
+      "transition-colors duration-(--duration-micro)",
+      "focus-visible:ring-[3px] focus-visible:ring-accent-dim",
+      active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
+      disabled && "opacity-50 pointer-events-none",
+      className
+    );
+    if (href) {
+      const anchorProps = props;
+      return /* @__PURE__ */ jsx49(
+        "a",
+        {
+          ref,
+          href,
+          "aria-current": active ? "page" : void 0,
+          "aria-disabled": disabled || void 0,
+          className: baseClass,
+          ...anchorProps,
+          children: inner
+        }
+      );
+    }
+    const buttonProps = props;
+    return /* @__PURE__ */ jsx49(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-current": active ? "page" : void 0,
+        disabled,
+        className: cn(baseClass, "w-full text-left"),
+        ...buttonProps,
+        children: inner
+      }
+    );
+  }
+);
+NavItem.displayName = "NavItem";
+var NavSection = forwardRef47(function NavSection2({
+  label,
+  icon,
+  action,
+  collapsible = false,
+  defaultOpen = true,
+  open,
+  onOpenChange,
+  indent = 0,
+  className,
+  children,
+  ...props
+}, ref) {
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = useState12(defaultOpen);
+  const isOpen = !collapsible || (isControlled ? open : internalOpen);
+  const toggle = useCallback8(() => {
+    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(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": isOpen,
+        onClick: toggle,
+        className: cn(
+          eyebrowClass,
+          "cursor-pointer rounded-xs outline-none",
+          "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          "hover:text-text-muted"
+        ),
+        children: [
+          icon != null && /* @__PURE__ */ jsx49("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
+          /* @__PURE__ */ jsx49("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__ */ 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 }),
+      action
+    ] }),
+    isOpen && /* @__PURE__ */ jsx49(
+      "div",
+      {
+        className: cn("flex flex-col gap-[2px]", indent > 0 && "border-border ml-2 border-l"),
+        style: indent > 0 ? { paddingLeft: indent } : void 0,
+        children
+      }
+    )
+  ] });
+});
+NavSection.displayName = "NavSection";
+
+// src/patterns/NavBar/NavBar.tsx
+import { Fragment as Fragment3, jsx as jsx50, jsxs as jsxs42 } 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({
+  orientation = "horizontal",
+  items,
+  brand,
+  actions,
+  value,
+  defaultValue,
+  onValueChange,
+  width = 240,
+  responsive = true,
+  className,
+  ...props
+}, ref) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState13(defaultValue);
+  const activeId = isControlled ? value : internalValue;
+  const [drawerOpen, setDrawerOpen] = useState13(false);
+  const select = useCallback9(
+    (id) => {
+      if (!isControlled) setInternalValue(id);
+      onValueChange?.(id);
+    },
+    [isControlled, onValueChange]
+  );
+  const handleItemActivate = useCallback9(
+    (id) => {
+      select(id);
+      setDrawerOpen(false);
+    },
+    [select]
+  );
+  const drawerBody = (
+    // Distinct aria-label from the desktop <aside>'s <nav> below — when the
+    // drawer is open on a viewport that's resizing past `md`, both navs can
+    // sit in the DOM together. Identical accessible names would trip axe's
+    // `landmark-unique` rule.
+    /* @__PURE__ */ jsx50("nav", { "aria-label": "Mobile navigation", className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ jsx50(
+      VerticalItem,
+      {
+        item,
+        activeId,
+        onActivate: handleItemActivate
+      },
+      item.id
+    )) })
+  );
+  const mobileBar = responsive ? /* @__PURE__ */ jsxs42(
+    "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(
+          "button",
+          {
+            type: "button",
+            onClick: () => setDrawerOpen(true),
+            "aria-label": "Open navigation",
+            className: "text-text-muted hover:text-text focus-visible:ring-accent-dim rounded-xs px-2 py-1 text-[18px] outline-none focus-visible:ring-[3px]",
+            children: "\u2630"
+          }
+        ),
+        brand && /* @__PURE__ */ 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 })
+      ]
+    }
+  ) : null;
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsxs42(Fragment3, { children: [
+      mobileBar,
+      /* @__PURE__ */ jsxs42(
+        "header",
+        {
+          ref,
+          className: cn(
+            "border-border bg-panel flex h-[52px] items-center gap-4 border-b px-5",
+            responsive && "hidden md:flex",
+            className
+          ),
+          ...props,
+          children: [
+            brand && /* @__PURE__ */ 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(
+                  HorizontalDropdown,
+                  {
+                    item,
+                    active: isActiveTree(item, activeId),
+                    activeId,
+                    onActivate: handleItemActivate
+                  },
+                  item.id
+                ) : /* @__PURE__ */ jsx50(RadixNav.Item, { children: /* @__PURE__ */ jsx50(
+                  HorizontalLink,
+                  {
+                    item,
+                    active: item.id === activeId,
+                    onActivate: handleItemActivate
+                  }
+                ) }, 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)]" }) })
+            ] }),
+            actions && /* @__PURE__ */ jsx50("div", { className: "flex items-center gap-3", children: actions })
+          ]
+        }
+      ),
+      responsive && /* @__PURE__ */ jsx50(
+        Drawer,
+        {
+          open: drawerOpen,
+          onOpenChange: setDrawerOpen,
+          side: "left",
+          title: brand ?? "Navigation",
+          width: 300,
+          children: drawerBody
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs42(Fragment3, { children: [
+    mobileBar,
+    /* @__PURE__ */ jsxs42(
+      "aside",
+      {
+        ref,
+        "aria-label": "Primary navigation",
+        style: { width },
+        className: cn(
+          "border-border bg-panel flex h-full flex-col gap-2 border-r p-[14px]",
+          responsive && "hidden md:flex",
+          className
+        ),
+        ...props,
+        children: [
+          brand && /* @__PURE__ */ 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(
+            VerticalItem,
+            {
+              item,
+              activeId,
+              onActivate: handleItemActivate
+            },
+            item.id
+          )) }),
+          actions && /* @__PURE__ */ jsx50("div", { className: "border-border mt-auto flex flex-col gap-2 border-t pt-3", children: actions })
+        ]
+      }
+    ),
+    responsive && /* @__PURE__ */ jsx50(
+      Drawer,
+      {
+        open: drawerOpen,
+        onOpenChange: setDrawerOpen,
+        side: "left",
+        title: brand ?? "Navigation",
+        width: 300,
+        children: drawerBody
+      }
+    )
+  ] });
+});
+NavBar.displayName = "NavBar";
+function HorizontalLink({ item, active, onActivate }) {
+  const baseClass = cn(
+    "flex items-center gap-[6px] rounded-xs px-3 py-[6px] text-[13px] outline-none",
+    "transition-colors duration-(--duration-micro)",
+    "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+    active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
+    item.disabled && "pointer-events-none opacity-50"
+  );
+  const handleClick = (e) => {
+    if (item.disabled) {
+      e.preventDefault();
+      return;
+    }
+    onActivate(item.id);
+  };
+  const inner = /* @__PURE__ */ 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 })
+  ] });
+  if (item.href) {
+    return /* @__PURE__ */ jsx50(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx50(
+      "a",
+      {
+        href: item.href,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": item.disabled || void 0,
+        className: baseClass,
+        onClick: handleClick,
+        children: inner
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx50(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx50(
+    "button",
+    {
+      type: "button",
+      "aria-current": active ? "page" : void 0,
+      disabled: item.disabled,
+      className: baseClass,
+      onClick: handleClick,
+      children: inner
+    }
+  ) });
+}
+function HorizontalDropdown({ item, active, activeId, onActivate }) {
+  return /* @__PURE__ */ jsxs42(RadixNav.Item, { children: [
+    /* @__PURE__ */ jsxs42(
+      RadixNav.Trigger,
+      {
+        className: cn(
+          "group flex items-center gap-1 rounded-xs px-3 py-[6px] text-[13px] outline-none",
+          "transition-colors duration-(--duration-micro)",
+          "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
+          "data-[state=open]:bg-panel-2"
+        ),
+        disabled: item.disabled,
+        children: [
+          item.icon != null && /* @__PURE__ */ jsx50("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
+          /* @__PURE__ */ jsx50("span", { children: item.label }),
+          /* @__PURE__ */ jsx50(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "ml-1 text-[10px] opacity-70 transition-transform group-data-[state=open]:rotate-180",
+              children: "\u25BE"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__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)) }) })
+  ] });
+}
+function DropdownLink({ item, active, onActivate }) {
+  const baseClass = cn(
+    "flex w-full items-center gap-2 rounded-xs px-2 py-[6px] text-left text-[13px] outline-none",
+    "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+    active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
+    item.disabled && "pointer-events-none opacity-50"
+  );
+  const handleClick = (e) => {
+    if (item.disabled) {
+      e.preventDefault();
+      return;
+    }
+    onActivate(item.id);
+  };
+  const inner = /* @__PURE__ */ 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 })
+  ] });
+  if (item.href) {
+    return /* @__PURE__ */ jsx50(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx50(
+      "a",
+      {
+        href: item.href,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": item.disabled || void 0,
+        className: baseClass,
+        onClick: handleClick,
+        children: inner
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx50(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx50(
+    "button",
+    {
+      type: "button",
+      "aria-current": active ? "page" : void 0,
+      disabled: item.disabled,
+      className: baseClass,
+      onClick: handleClick,
+      children: inner
+    }
+  ) });
+}
+function VerticalItem({ item, activeId, onActivate }) {
+  const hasChildren = (item.children?.length ?? 0) > 0;
+  const treeActive = isActiveTree(item, activeId);
+  const [open, setOpen] = useState13(treeActive);
+  const prevTreeActive = useRef7(treeActive);
+  useEffect9(() => {
+    if (treeActive && !prevTreeActive.current) setOpen(true);
+    prevTreeActive.current = treeActive;
+  }, [treeActive]);
+  if (!hasChildren) {
+    const handleClick = (e) => {
+      if (item.disabled) {
+        e.preventDefault();
+        return;
+      }
+      onActivate(item.id);
+    };
+    return /* @__PURE__ */ jsx50(
+      NavItem,
+      {
+        icon: item.icon,
+        label: item.label,
+        active: item.id === activeId,
+        badge: item.badge,
+        disabled: item.disabled,
+        href: item.href,
+        onClick: handleClick
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs42("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs42(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        disabled: item.disabled,
+        className: cn(
+          "flex w-full items-center gap-[10px] rounded-xs px-2 py-[6px] text-left text-[13px] outline-none",
+          "transition-colors duration-(--duration-micro)",
+          "focus-visible:ring-accent-dim focus-visible:ring-[3px]",
+          treeActive ? "text-text" : "text-text-muted",
+          "hover:bg-panel-2",
+          item.disabled && "pointer-events-none opacity-50"
+        ),
+        children: [
+          item.icon != null && /* @__PURE__ */ 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" })
+        ]
+      }
+    ),
+    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)) })
+  ] });
+}
+function ItemBadge({ active, children }) {
+  return /* @__PURE__ */ jsx50(
+    "span",
+    {
+      className: cn(
+        "rounded-xs px-[6px] py-px font-mono text-[10px]",
+        active ? "bg-accent text-on-accent" : "bg-panel-2 text-text-muted"
+      ),
+      children
+    }
+  );
+}
+
+// src/patterns/Pagination/Pagination.tsx
+import { forwardRef as forwardRef49 } from "react";
+import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
 function buildRange(page, total, siblings) {
   if (total <= 0) return [];
   const items = [];
@@ -2717,9 +3876,9 @@ function buildRange(page, total, siblings) {
   if (total > 1) items.push(total);
   return items;
 }
-var Pagination = forwardRef(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
+var Pagination = forwardRef49(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
   const items = buildRange(page, total, siblings);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs43(
     "nav",
     {
       ref,
@@ -2727,7 +3886,7 @@ var Pagination = forwardRef(function Pagination2({ page, total, onPageChange, si
       className: cn("inline-flex items-center gap-1", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx51(
           IconButton,
           {
             size: "sm",
@@ -2740,7 +3899,7 @@ var Pagination = forwardRef(function Pagination2({ page, total, onPageChange, si
         ),
         items.map((item, i) => {
           if (item === "start-ellipsis" || item === "end-ellipsis") {
-            return /* @__PURE__ */ jsx(
+            return /* @__PURE__ */ jsx51(
               "span",
               {
                 "aria-hidden": true,
@@ -2751,7 +3910,7 @@ var Pagination = forwardRef(function Pagination2({ page, total, onPageChange, si
             );
           }
           const isActive = item === page;
-          return /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx51(
             "button",
             {
               type: "button",
@@ -2769,7 +3928,7 @@ var Pagination = forwardRef(function Pagination2({ page, total, onPageChange, si
             item
           );
         }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx51(
           IconButton,
           {
             size: "sm",
@@ -2785,7 +3944,12 @@ var Pagination = forwardRef(function Pagination2({ page, total, onPageChange, si
   );
 });
 Pagination.displayName = "Pagination";
-var trackStyles = cva("w-full rounded-full bg-panel-2 overflow-hidden", {
+
+// 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";
+var trackStyles = cva11("w-full rounded-full bg-panel-2 overflow-hidden", {
   variants: {
     size: {
       sm: "h-[3px]",
@@ -2795,7 +3959,7 @@ var trackStyles = cva("w-full rounded-full bg-panel-2 overflow-hidden", {
   },
   defaultVariants: { size: "md" }
 });
-var fillStyles = cva("h-full rounded-full transition-[width] duration-(--duration-step)", {
+var fillStyles = cva11("h-full rounded-full transition-[width] duration-(--duration-step)", {
   variants: {
     tone: {
       accent: "bg-accent",
@@ -2806,7 +3970,7 @@ var fillStyles = cva("h-full rounded-full transition-[width] duration-(--duratio
   },
   defaultVariants: { tone: "accent" }
 });
-var Progress = forwardRef(function Progress2({
+var Progress = forwardRef50(function Progress2({
   value = 0,
   max = 100,
   indeterminate = false,
@@ -2820,15 +3984,15 @@ var Progress = forwardRef(function Progress2({
   const clamped = Math.min(max, Math.max(0, value));
   const pct = max > 0 ? clamped / max * 100 : 0;
   const display = Math.round(pct);
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
-    label != null && /* @__PURE__ */ jsxs("div", { className: "flex text-[12px]", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: label }),
-      showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
+  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: [
         display,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx52(
       "div",
       {
         role: "progressbar",
@@ -2837,7 +4001,7 @@ var Progress = forwardRef(function Progress2({
         "aria-valuenow": indeterminate ? void 0 : display,
         "aria-label": typeof label === "string" ? label : void 0,
         className: trackStyles({ size }),
-        children: indeterminate ? /* @__PURE__ */ jsx(
+        children: indeterminate ? /* @__PURE__ */ jsx52(
           "span",
           {
             "aria-hidden": true,
@@ -2847,19 +4011,23 @@ var Progress = forwardRef(function Progress2({
               "animate-[ship-indeterminate_1.4s_linear_infinite]"
             )
           }
-        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
+        ) : /* @__PURE__ */ jsx52("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"
 };
-var RadialProgress = forwardRef(
+var RadialProgress = forwardRef51(
   function RadialProgress2({
     value,
     max = 100,
@@ -2877,7 +4045,7 @@ var RadialProgress = forwardRef(
     const c = 2 * Math.PI * r;
     const dash = pct / 100 * c;
     const resolvedTone = tone ?? (clamped >= max ? "ok" : "accent");
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs45(
       "div",
       {
         ref,
@@ -2890,8 +4058,8 @@ var RadialProgress = forwardRef(
         style: { width: size, height: size },
         ...props,
         children: [
-          /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs45("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+            /* @__PURE__ */ jsx53(
               "circle",
               {
                 cx: size / 2,
@@ -2902,7 +4070,7 @@ var RadialProgress = forwardRef(
                 className: "stroke-panel-2"
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx53(
               "circle",
               {
                 cx: size / 2,
@@ -2920,98 +4088,17 @@ var RadialProgress = forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
+          /* @__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";
-var Sidebar = forwardRef(function Sidebar2({ width = 240, className, style, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "aside",
-    {
-      ref,
-      style: { width, ...style },
-      className: cn(
-        "border-border bg-panel flex h-full flex-col gap-2 border-r p-[14px]",
-        className
-      ),
-      ...props
-    }
-  );
-});
-Sidebar.displayName = "Sidebar";
-var NavItem = forwardRef(function NavItem2({ icon, label, active, badge, href, disabled, className, onClick, ...props }, ref) {
-  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
-    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: label }),
-    badge != null && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "rounded-xs px-[6px] py-px font-mono text-[10px]",
-          active ? "bg-accent text-on-accent" : "bg-panel-2 text-text-muted"
-        ),
-        children: badge
-      }
-    )
-  ] });
-  const baseClass = cn(
-    "flex cursor-pointer items-center gap-[10px] rounded-xs px-2 py-[6px] text-[13px] outline-none",
-    "transition-colors duration-(--duration-micro)",
-    "focus-visible:ring-[3px] focus-visible:ring-accent-dim",
-    active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
-    disabled && "opacity-50 pointer-events-none",
-    className
-  );
-  if (href) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        ref,
-        href,
-        "aria-current": active ? "page" : void 0,
-        "aria-disabled": disabled || void 0,
-        className: baseClass,
-        onClick,
-        ...props,
-        children: inner
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      ref,
-      role: "button",
-      tabIndex: disabled ? -1 : 0,
-      "aria-current": active ? "page" : void 0,
-      "aria-disabled": disabled || void 0,
-      className: baseClass,
-      onClick,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          e.currentTarget.click();
-        }
-      },
-      ...props,
-      children: inner
-    }
-  );
-});
-NavItem.displayName = "NavItem";
-var NavSection = forwardRef(function NavSection2({ label, action, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: "text-text-dim flex items-center px-2 pt-2 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
-      /* @__PURE__ */ jsx("span", { className: "flex-1", children: label }),
-      action
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children })
-  ] });
-});
-NavSection.displayName = "NavSection";
+
+// 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";
 function buildPath(values, w, h) {
   if (values.length === 0) return { line: "", area: "" };
   const pad = 2;
@@ -3030,7 +4117,7 @@ function buildPath(values, w, h) {
   )} L${pad.toFixed(2)},${(h - pad).toFixed(2)} Z`;
   return { line, area };
 }
-var Sparkline = forwardRef(function Sparkline2({
+var Sparkline = forwardRef52(function Sparkline2({
   values,
   width = 160,
   height = 32,
@@ -3041,8 +4128,8 @@ var Sparkline = forwardRef(function Sparkline2({
   "aria-label": ariaLabel = "Trend",
   ...props
 }, ref) {
-  const { line, area } = useMemo(() => buildPath(values, width, height), [values, width, height]);
-  return /* @__PURE__ */ jsxs(
+  const { line, area } = useMemo5(() => buildPath(values, width, height), [values, width, height]);
+  return /* @__PURE__ */ jsxs46(
     "svg",
     {
       ref,
@@ -3054,8 +4141,8 @@ var Sparkline = forwardRef(function Sparkline2({
       className: cn("inline-block", className),
       ...props,
       children: [
-        fill && /* @__PURE__ */ jsx("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
-        /* @__PURE__ */ jsx(
+        fill && /* @__PURE__ */ jsx54("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
+        /* @__PURE__ */ jsx54(
           "path",
           {
             d: line,
@@ -3071,14 +4158,18 @@ var Sparkline = forwardRef(function Sparkline2({
   );
 });
 Sparkline.displayName = "Sparkline";
+
+// src/patterns/Spinner/Spinner.tsx
+import { forwardRef as forwardRef53 } from "react";
+import { jsx as jsx55 } 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 = forwardRef(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
+var Spinner2 = forwardRef53(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
   const s = sizes[size];
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx55(
     "span",
     {
       ref,
@@ -3086,7 +4177,7 @@ var Spinner2 = forwardRef(function Spinner3({ size = "md", label = "Loading", cl
       "aria-label": label,
       className: cn("inline-block", className),
       ...props,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx55(
         "span",
         {
           "aria-hidden": true,
@@ -3101,6 +4192,10 @@ var Spinner2 = forwardRef(function Spinner3({ size = "md", label = "Loading", cl
   );
 });
 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";
 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",
@@ -3117,46 +4212,52 @@ function stateFor(index, current) {
   if (index === current) return "current";
   return "upcoming";
 }
-var Stepper = forwardRef(function Stepper2({ steps, current, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
+var Stepper = forwardRef54(function Stepper2({ steps, current, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx56(
+    "ol",
     {
       ref,
-      role: "list",
       "aria-label": "Progress",
-      className: cn("flex w-full items-center", className),
+      className: cn("m-0 flex w-full list-none items-center p-0", className),
       ...props,
-      children: steps.map((label, i) => {
+      children: steps.map((step, i) => {
+        const label = typeof step === "string" ? step : step.label;
+        const id = typeof step === "string" ? void 0 : step.id;
         const state = stateFor(i, current);
         const connectorActive = i < current;
-        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          /* @__PURE__ */ jsxs(
-            "div",
+        return /* @__PURE__ */ jsxs47(Fragment4, { children: [
+          /* @__PURE__ */ jsxs47(
+            "li",
             {
-              role: "listitem",
               "aria-current": state === "current" ? "step" : void 0,
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
-                /* @__PURE__ */ jsx("span", { className: cn("text-[12px]", labelStateClass[state]), children: label })
+                /* @__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 })
               ]
             }
           ),
-          i < steps.length - 1 && /* @__PURE__ */ jsx(
+          i < steps.length - 1 && /* @__PURE__ */ jsx56(
             "span",
             {
               "aria-hidden": true,
               className: cn("mx-3 h-px flex-1", connectorActive ? "bg-accent" : "bg-border")
             }
           )
-        ] }, label);
+        ] }, id ?? i);
       })
     }
   );
 });
 Stepper.displayName = "Stepper";
-var TabsVariantContext = createContext("underline");
-var tabsListStyles = cva("", {
+
+// 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";
+var TabsVariantContext = createContext2("underline");
+var tabsListStyles = cva12("", {
   variants: {
     variant: {
       underline: "flex gap-6 border-b border-border",
@@ -3164,7 +4265,7 @@ var tabsListStyles = cva("", {
     }
   }
 });
-var tabsTriggerStyles = cva(
+var tabsTriggerStyles = cva12(
   "cursor-pointer outline-none transition-colors duration-(--duration-micro) focus-visible:ring-[3px] focus-visible:ring-accent-dim",
   {
     variants: {
@@ -3185,8 +4286,8 @@ var tabsTriggerStyles = cva(
     }
   }
 );
-var Tabs = forwardRef(function Tabs2({ variant = "underline", className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
+var Tabs = forwardRef55(function Tabs2({ variant = "underline", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx57(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx57(
     RadixTabs.Root,
     {
       ref,
@@ -3196,14 +4297,14 @@ var Tabs = forwardRef(function Tabs2({ variant = "underline", className, ...prop
   ) });
 });
 Tabs.displayName = "Tabs";
-var TabsList = forwardRef(function TabsList2({ className, ...props }, ref) {
-  const variant = useContext(TabsVariantContext);
-  return /* @__PURE__ */ jsx(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
+var TabsList = forwardRef55(function TabsList2({ className, ...props }, ref) {
+  const variant = useContext2(TabsVariantContext);
+  return /* @__PURE__ */ jsx57(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
 });
 TabsList.displayName = "TabsList";
-var Tab = forwardRef(function Tab2({ className, ...props }, ref) {
-  const variant = useContext(TabsVariantContext);
-  return /* @__PURE__ */ jsx(
+var Tab = forwardRef55(function Tab2({ className, ...props }, ref) {
+  const variant = useContext2(TabsVariantContext);
+  return /* @__PURE__ */ jsx57(
     RadixTabs.Trigger,
     {
       ref,
@@ -3213,9 +4314,9 @@ var Tab = forwardRef(function Tab2({ className, ...props }, ref) {
   );
 });
 Tab.displayName = "Tab";
-var TabsContent = forwardRef(
+var TabsContent = forwardRef55(
   function TabsContent2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx57(
       RadixTabs.Content,
       {
         ref,
@@ -3229,6 +4330,10 @@ var TabsContent = forwardRef(
   }
 );
 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";
 var ringClass = {
   accent: "border-accent",
   ok: "border-ok",
@@ -3236,8 +4341,8 @@ var ringClass = {
   err: "border-err",
   muted: "border-text-dim"
 };
-var Timeline = forwardRef(function Timeline2({ events, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
+var Timeline = forwardRef56(function Timeline2({ events, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx58(
     "ol",
     {
       ref,
@@ -3247,14 +4352,14 @@ var Timeline = forwardRef(function Timeline2({ events, className, children, ...p
         className
       ),
       ...props,
-      children: events ? events.map((e, i) => /* @__PURE__ */ jsx(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
+      children: events ? events.map((e, i) => /* @__PURE__ */ jsx58(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
     }
   );
 });
 Timeline.displayName = "Timeline";
-var TimelineItem = forwardRef(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
-    /* @__PURE__ */ jsx(
+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(
       "span",
       {
         "aria-hidden": true,
@@ -3264,14 +4369,18 @@ var TimelineItem = forwardRef(function TimelineItem2({ tone = "accent", descript
         )
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium", children }),
-    description && /* @__PURE__ */ jsx("div", { className: "text-text-muted text-[12px]", children: description }),
-    time && /* @__PURE__ */ jsx("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
+    /* @__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 })
   ] });
 });
 TimelineItem.displayName = "TimelineItem";
-var Topbar = forwardRef(function Topbar2({ title, leading, actions, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
+
+// 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(
     "header",
     {
       ref,
@@ -3282,40 +4391,101 @@ var Topbar = forwardRef(function Topbar2({ title, leading, actions, className, c
       ...props,
       children: [
         leading,
-        title && /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium", children: title }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center" }),
-        actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: actions }),
+        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 }),
         children
       ]
     }
   );
 });
 Topbar.displayName = "Topbar";
-var Tree = forwardRef(function Tree2({
+
+// src/patterns/Tree/Tree.tsx
+import {
+  forwardRef as forwardRef58,
+  useCallback as useCallback10,
+  useEffect as useEffect10,
+  useMemo as useMemo6,
+  useRef as useRef8,
+  useState as useState14
+} from "react";
+import { jsx as jsx60, jsxs as jsxs50 } from "react/jsx-runtime";
+var EMPTY_SET2 = /* @__PURE__ */ new Set();
+function flattenVisible(items, expanded, level, parentId, out) {
+  for (const item of items) {
+    const hasChildren = !!item.children && item.children.length > 0;
+    out.push({ id: item.id, level, hasChildren, parentId });
+    if (hasChildren && expanded.has(item.id)) {
+      flattenVisible(item.children ?? [], expanded, level + 1, item.id, out);
+    }
+  }
+}
+var Tree = forwardRef58(function Tree2({
   items,
   expanded: expandedProp,
   defaultExpanded,
   onExpandedChange,
-  selected: selectedProp,
-  defaultSelected,
-  onSelect,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
   className,
+  onKeyDown,
   ...props
 }, ref) {
   const [expanded, setExpanded] = useControllableState({
-    value: expandedProp instanceof Set ? expandedProp : expandedProp,
-    defaultValue: defaultExpanded ? new Set(defaultExpanded) : /* @__PURE__ */ new Set(),
+    value: expandedProp,
+    defaultValue: defaultExpanded ? new Set(defaultExpanded) : void 0,
     onChange: onExpandedChange
   });
-  const [selected, setSelected] = useControllableState({
-    value: selectedProp,
-    defaultValue: defaultSelected,
-    onChange: onSelect
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
   });
-  const toggle = useCallback(
+  const expandedSet = expanded ?? EMPTY_SET2;
+  const flatVisible = useMemo6(() => {
+    const out = [];
+    flattenVisible(items, expandedSet, 1, null, out);
+    return out;
+  }, [items, expandedSet]);
+  const [activeId, setActiveId] = useState14(null);
+  useEffect10(() => {
+    if (activeId && !flatVisible.some((f) => f.id === activeId)) {
+      setActiveId(null);
+    }
+  }, [activeId, flatVisible]);
+  const tabStopId = useMemo6(() => {
+    if (activeId && flatVisible.some((f) => f.id === activeId)) return activeId;
+    if (value && flatVisible.some((f) => f.id === value)) return value;
+    return flatVisible[0]?.id ?? null;
+  }, [activeId, flatVisible, value]);
+  const listRef = useRef8(null);
+  const setRefs = useCallback10(
+    (node) => {
+      listRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const focusItem = useCallback10((id) => {
+    const root = listRef.current;
+    if (!root) return;
+    const el = root.querySelector(`[data-treeitem-id="${CSS.escape(id)}"]`);
+    el?.focus();
+  }, []);
+  const moveActive = useCallback10(
+    (id) => {
+      setActiveId(id);
+      queueMicrotask(() => focusItem(id));
+    },
+    [focusItem]
+  );
+  const toggle = useCallback10(
     (id) => {
       setExpanded((prev) => {
-        const next = new Set(prev ?? []);
+        const next = new Set(prev ?? EMPTY_SET2);
         if (next.has(id)) next.delete(id);
         else next.add(id);
         return next;
@@ -3323,22 +4493,138 @@ var Tree = forwardRef(function Tree2({
     },
     [setExpanded]
   );
-  return /* @__PURE__ */ jsx(
+  const expand = useCallback10(
+    (id) => {
+      setExpanded((prev) => {
+        const base = prev ?? EMPTY_SET2;
+        if (base.has(id)) return base;
+        const next = new Set(base);
+        next.add(id);
+        return next;
+      });
+    },
+    [setExpanded]
+  );
+  const collapse = useCallback10(
+    (id) => {
+      setExpanded((prev) => {
+        const base = prev ?? EMPTY_SET2;
+        if (!base.has(id)) return base;
+        const next = new Set(base);
+        next.delete(id);
+        return next;
+      });
+    },
+    [setExpanded]
+  );
+  const selectItem = useCallback10(
+    (id) => {
+      setValue(id);
+    },
+    [setValue]
+  );
+  const handleKeyDown = useCallback10(
+    (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      if (flatVisible.length === 0) return;
+      const currentId = tabStopId;
+      const currentIndex = currentId ? flatVisible.findIndex((f) => f.id === currentId) : -1;
+      const current = currentIndex >= 0 ? flatVisible[currentIndex] : void 0;
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = flatVisible[Math.min(flatVisible.length - 1, currentIndex + 1)];
+          if (next) moveActive(next.id);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = flatVisible[Math.max(0, currentIndex - 1)];
+          if (prev) moveActive(prev.id);
+          break;
+        }
+        case "ArrowRight": {
+          if (!current) return;
+          e.preventDefault();
+          if (current.hasChildren) {
+            if (!expandedSet.has(current.id)) {
+              expand(current.id);
+            } else {
+              const child = flatVisible[currentIndex + 1];
+              if (child && child.parentId === current.id) moveActive(child.id);
+            }
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          if (!current) return;
+          e.preventDefault();
+          if (current.hasChildren && expandedSet.has(current.id)) {
+            collapse(current.id);
+          } else if (current.parentId) {
+            moveActive(current.parentId);
+          }
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          const first = flatVisible[0];
+          if (first) moveActive(first.id);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const last = flatVisible[flatVisible.length - 1];
+          if (last) moveActive(last.id);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          if (!current) return;
+          e.preventDefault();
+          selectItem(current.id);
+          if (current.hasChildren) toggle(current.id);
+          break;
+        }
+        default:
+          break;
+      }
+    },
+    [
+      collapse,
+      expand,
+      expandedSet,
+      flatVisible,
+      moveActive,
+      onKeyDown,
+      selectItem,
+      tabStopId,
+      toggle
+    ]
+  );
+  return /* @__PURE__ */ jsx60(
     "ul",
     {
-      ref,
+      ref: setRefs,
       role: "tree",
       className: cn("flex flex-col gap-px text-[12px]", className),
+      onKeyDown: handleKeyDown,
       ...props,
-      children: items.map((item) => /* @__PURE__ */ jsx(
+      children: items.map((item) => /* @__PURE__ */ jsx60(
         TreeItemRow,
         {
           item,
           level: 1,
-          expanded: expanded ?? /* @__PURE__ */ new Set(),
-          selected,
-          onToggle: toggle,
-          onSelect: (id) => setSelected(id)
+          expanded: expandedSet,
+          selected: value,
+          tabStopId,
+          onFocusItem: setActiveId,
+          onActivate: (id) => {
+            setActiveId(id);
+            selectItem(id);
+          },
+          onToggle: toggle
         },
         item.id
       ))
@@ -3346,36 +4632,37 @@ var Tree = forwardRef(function Tree2({
   );
 });
 Tree.displayName = "Tree";
-function TreeItemRow({ item, level, expanded, selected, onToggle, onSelect }) {
+function TreeItemRow({
+  item,
+  level,
+  expanded,
+  selected,
+  tabStopId,
+  onFocusItem,
+  onActivate,
+  onToggle
+}) {
   const hasChildren = !!item.children && item.children.length > 0;
   const isExpanded = hasChildren && expanded.has(item.id);
   const isSelected = selected === item.id;
-  return /* @__PURE__ */ jsxs("li", { role: "none", children: [
-    /* @__PURE__ */ jsxs(
+  const isTabStop = tabStopId === item.id;
+  return /* @__PURE__ */ jsxs50("li", { role: "none", children: [
+    /* @__PURE__ */ jsxs50(
       "div",
       {
         role: "treeitem",
+        "data-treeitem-id": item.id,
         "aria-level": level,
         "aria-expanded": hasChildren ? isExpanded : void 0,
         "aria-selected": isSelected,
-        tabIndex: isSelected ? 0 : -1,
+        tabIndex: isTabStop ? 0 : -1,
+        onFocus: (e) => {
+          if (e.target === e.currentTarget) onFocusItem(item.id);
+        },
         onClick: () => {
-          onSelect(item.id);
+          onActivate(item.id);
           if (hasChildren) onToggle(item.id);
         },
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onSelect(item.id);
-            if (hasChildren) onToggle(item.id);
-          } else if (e.key === "ArrowRight" && hasChildren && !isExpanded) {
-            e.preventDefault();
-            onToggle(item.id);
-          } else if (e.key === "ArrowLeft" && hasChildren && isExpanded) {
-            e.preventDefault();
-            onToggle(item.id);
-          }
-        },
         style: { paddingLeft: 4 + (level - 1) * 16 },
         className: cn(
           "flex cursor-pointer items-center gap-[6px] rounded-xs py-[5px] pr-2 outline-none",
@@ -3383,28 +4670,169 @@ function TreeItemRow({ item, level, expanded, selected, onToggle, onSelect }) {
           isSelected ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
-          item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
-          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+          /* @__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 }),
           item.trailing
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { role: "group", className: "flex flex-col gap-px", children: item.children.map((child) => /* @__PURE__ */ jsx(
+    hasChildren && isExpanded && /* @__PURE__ */ jsx60("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ jsx60(
       TreeItemRow,
       {
         item: child,
         level: level + 1,
         expanded,
         selected,
-        onToggle,
-        onSelect
+        tabStopId,
+        onFocusItem,
+        onActivate,
+        onToggle
       },
       child.id
     )) })
   ] });
 }
-
-export { Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogRoot, AlertDialogTrigger, Avatar, AvatarGroup, Badge, Banner, Breadcrumbs, Button, ButtonGroup, Calendar, Card, Checkbox, Chip, Combobox, CommandPalette, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTrigger, Dots, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, EmptyState, FAB, Field, FileChip, HoverCard, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, IconButton, Input, Kbd, MenuCheckboxItem, MenuItem, MenuSeparator, Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger, NavItem, NavSection, OTP, Pagination, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, RadialProgress, Radio, RadioGroup, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectTrigger, SelectValue, Sheet, Sidebar, Skeleton, Slider, Sparkline, Spinner2 as Spinner, SplitButton, StatCard, StatusDot, Stepper, Switch, Tab, Tabs, TabsContent, TabsList, Tag, Textarea, Timeline, TimelineItem, ToastCard, ToastProvider, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, Topbar, Tree, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, iconButtonStyles, useControllableState, useDisclosure, useEscape, useKeyboardList, useOutsideClick, useTheme, useToast };
-//# sourceMappingURL=index.js.map
+export {
+  Alert,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogRoot,
+  AlertDialogTrigger,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Banner,
+  Breadcrumbs,
+  Button,
+  ButtonGroup,
+  Calendar,
+  Card,
+  CardLink,
+  Checkbox,
+  Chip,
+  Combobox,
+  CommandPalette,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+  Crumb,
+  DataTable,
+  DatePicker,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTrigger,
+  Dots,
+  Drawer,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  Dropzone,
+  EmptyState,
+  FAB,
+  Field,
+  FileChip,
+  HoverCard,
+  HoverCardContent,
+  HoverCardPortal,
+  HoverCardRoot,
+  HoverCardTrigger,
+  IconButton,
+  Input,
+  Kbd,
+  MenuCheckboxItem,
+  MenuItem,
+  MenuSeparator,
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarTrigger,
+  NavBar,
+  NavItem,
+  NavSection,
+  OTP,
+  Pagination,
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+  Progress,
+  RadialProgress,
+  Radio,
+  RadioGroup,
+  SearchInput,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  Sheet,
+  Sidebar,
+  Skeleton,
+  SkeletonGroup,
+  Slider,
+  Sparkline,
+  Spinner2 as Spinner,
+  SplitButton,
+  StatCard,
+  StatusDot,
+  Stepper,
+  Switch,
+  Tab,
+  Tabs,
+  TabsContent,
+  TabsList,
+  Tag,
+  Textarea,
+  Timeline,
+  TimelineItem,
+  ToastCard,
+  ToastProvider,
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  Topbar,
+  Tree,
+  badgeStyles,
+  buttonStyles,
+  cardStyles,
+  cn,
+  filterCommandItems,
+  iconButtonStyles,
+  useControllableState,
+  useDisclosure,
+  useEscape,
+  useIsomorphicLayoutEffect,
+  useKeyboardList,
+  useOutsideClick,
+  useTheme,
+  useToast
+};
 //# sourceMappingURL=index.js.map