@ship-it-ui/ui 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -1,80 +1,200 @@
-'use strict';
-
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var react = require('react');
-var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
-var jsxRuntime = require('react/jsx-runtime');
-var RadixCheckbox = require('@radix-ui/react-checkbox');
-var RadixRadio = require('@radix-ui/react-radio-group');
-var RadixSelect = require('@radix-ui/react-select');
-var RadixSlider = require('@radix-ui/react-slider');
-var RadixSwitch = require('@radix-ui/react-switch');
-var RadixAvatar = require('@radix-ui/react-avatar');
-var RadixContext = require('@radix-ui/react-context-menu');
-var RadixDialog = require('@radix-ui/react-dialog');
-var RadixAlert = require('@radix-ui/react-alert-dialog');
-var RadixMenu = require('@radix-ui/react-dropdown-menu');
-var RadixHoverCard = require('@radix-ui/react-hover-card');
-var RadixPopover = require('@radix-ui/react-popover');
-var RadixToast = require('@radix-ui/react-toast');
-var RadixTooltip = require('@radix-ui/react-tooltip');
-var RadixMenubar = require('@radix-ui/react-menubar');
-var RadixTabs = require('@radix-ui/react-tabs');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
+'use client';
+
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  n.default = e;
-  return Object.freeze(n);
-}
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var RadixCheckbox__namespace = /*#__PURE__*/_interopNamespace(RadixCheckbox);
-var RadixRadio__namespace = /*#__PURE__*/_interopNamespace(RadixRadio);
-var RadixSelect__namespace = /*#__PURE__*/_interopNamespace(RadixSelect);
-var RadixSlider__namespace = /*#__PURE__*/_interopNamespace(RadixSlider);
-var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
-var RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
-var RadixContext__namespace = /*#__PURE__*/_interopNamespace(RadixContext);
-var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
-var RadixAlert__namespace = /*#__PURE__*/_interopNamespace(RadixAlert);
-var RadixMenu__namespace = /*#__PURE__*/_interopNamespace(RadixMenu);
-var RadixHoverCard__namespace = /*#__PURE__*/_interopNamespace(RadixHoverCard);
-var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
-var RadixToast__namespace = /*#__PURE__*/_interopNamespace(RadixToast);
-var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
-var RadixMenubar__namespace = /*#__PURE__*/_interopNamespace(RadixMenubar);
-var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Alert: () => Alert,
+  AlertDialog: () => AlertDialog,
+  AlertDialogAction: () => AlertDialogAction,
+  AlertDialogCancel: () => AlertDialogCancel,
+  AlertDialogRoot: () => AlertDialogRoot,
+  AlertDialogTrigger: () => AlertDialogTrigger,
+  Avatar: () => Avatar,
+  AvatarGroup: () => AvatarGroup,
+  Badge: () => Badge,
+  Banner: () => Banner,
+  Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
+  ButtonGroup: () => ButtonGroup,
+  Calendar: () => Calendar,
+  Card: () => Card,
+  CardLink: () => CardLink,
+  Checkbox: () => Checkbox,
+  Chip: () => Chip,
+  Combobox: () => Combobox,
+  CommandPalette: () => CommandPalette,
+  ContextMenu: () => ContextMenu,
+  ContextMenuContent: () => ContextMenuContent,
+  ContextMenuItem: () => ContextMenuItem,
+  ContextMenuPortal: () => ContextMenuPortal,
+  ContextMenuRoot: () => ContextMenuRoot,
+  ContextMenuSeparator: () => ContextMenuSeparator,
+  ContextMenuTrigger: () => ContextMenuTrigger,
+  Crumb: () => Crumb,
+  DataTable: () => DataTable,
+  DatePicker: () => DatePicker,
+  Dialog: () => Dialog,
+  DialogClose: () => DialogClose,
+  DialogContent: () => DialogContent,
+  DialogOverlay: () => DialogOverlay,
+  DialogPortal: () => DialogPortal,
+  DialogRoot: () => DialogRoot,
+  DialogTrigger: () => DialogTrigger,
+  Dots: () => Dots,
+  Drawer: () => Drawer,
+  DropdownMenu: () => DropdownMenu,
+  DropdownMenuContent: () => DropdownMenuContent,
+  DropdownMenuGroup: () => DropdownMenuGroup,
+  DropdownMenuLabel: () => DropdownMenuLabel,
+  DropdownMenuPortal: () => DropdownMenuPortal,
+  DropdownMenuRadioGroup: () => DropdownMenuRadioGroup,
+  DropdownMenuRoot: () => DropdownMenuRoot,
+  DropdownMenuTrigger: () => DropdownMenuTrigger,
+  EmptyState: () => EmptyState,
+  FAB: () => FAB,
+  Field: () => Field,
+  FileChip: () => FileChip,
+  HoverCard: () => HoverCard,
+  HoverCardContent: () => HoverCardContent,
+  HoverCardPortal: () => HoverCardPortal,
+  HoverCardRoot: () => HoverCardRoot,
+  HoverCardTrigger: () => HoverCardTrigger,
+  IconButton: () => IconButton,
+  Input: () => Input,
+  Kbd: () => Kbd,
+  MenuCheckboxItem: () => MenuCheckboxItem,
+  MenuItem: () => MenuItem,
+  MenuSeparator: () => MenuSeparator,
+  Menubar: () => Menubar,
+  MenubarContent: () => MenubarContent,
+  MenubarItem: () => MenubarItem,
+  MenubarMenu: () => MenubarMenu,
+  MenubarSeparator: () => MenubarSeparator,
+  MenubarTrigger: () => MenubarTrigger,
+  NavItem: () => NavItem,
+  NavSection: () => NavSection,
+  OTP: () => OTP,
+  Pagination: () => Pagination,
+  Popover: () => Popover,
+  PopoverAnchor: () => PopoverAnchor,
+  PopoverArrow: () => PopoverArrow,
+  PopoverClose: () => PopoverClose,
+  PopoverContent: () => PopoverContent,
+  PopoverPortal: () => PopoverPortal,
+  PopoverRoot: () => PopoverRoot,
+  PopoverTrigger: () => PopoverTrigger,
+  Progress: () => Progress,
+  RadialProgress: () => RadialProgress,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
+  SearchInput: () => SearchInput,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectGroup: () => SelectGroup,
+  SelectItem: () => SelectItem,
+  SelectLabel: () => SelectLabel,
+  SelectRoot: () => SelectRoot,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
+  Sheet: () => Sheet,
+  Sidebar: () => Sidebar,
+  Skeleton: () => Skeleton,
+  SkeletonGroup: () => SkeletonGroup,
+  Slider: () => Slider,
+  Sparkline: () => Sparkline,
+  Spinner: () => Spinner2,
+  SplitButton: () => SplitButton,
+  StatCard: () => StatCard,
+  StatusDot: () => StatusDot,
+  Stepper: () => Stepper,
+  Switch: () => Switch,
+  Tab: () => Tab,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  Tag: () => Tag,
+  Textarea: () => Textarea,
+  Timeline: () => Timeline,
+  TimelineItem: () => TimelineItem,
+  ToastCard: () => ToastCard,
+  ToastProvider: () => ToastProvider,
+  Tooltip: () => Tooltip,
+  TooltipArrow: () => TooltipArrow,
+  TooltipContent: () => TooltipContent,
+  TooltipPortal: () => TooltipPortal,
+  TooltipProvider: () => TooltipProvider,
+  TooltipRoot: () => TooltipRoot,
+  TooltipTrigger: () => TooltipTrigger,
+  Topbar: () => Topbar,
+  Tree: () => Tree,
+  badgeStyles: () => badgeStyles,
+  buttonStyles: () => buttonStyles,
+  cardStyles: () => cardStyles,
+  cn: () => cn,
+  filterCommandItems: () => filterCommandItems,
+  iconButtonStyles: () => iconButtonStyles,
+  useControllableState: () => useControllableState,
+  useDisclosure: () => useDisclosure,
+  useEscape: () => useEscape,
+  useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
+  useKeyboardList: () => useKeyboardList,
+  useOutsideClick: () => useOutsideClick,
+  useTheme: () => useTheme,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(index_exports);
 
 // src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
 function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
+
+// src/hooks/useControllableState.ts
+var import_react = require("react");
 function useControllableState({
   value: controlledValue,
   defaultValue,
   onChange
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : uncontrolledValue;
-  const onChangeRef = react.useRef(onChange);
+  const onChangeRef = (0, import_react.useRef)(onChange);
   onChangeRef.current = onChange;
-  const valueRef = react.useRef(value);
+  const valueRef = (0, import_react.useRef)(value);
   valueRef.current = value;
-  const setValue = react.useCallback(
+  const setValue = (0, import_react.useCallback)(
     (next) => {
       const resolved = typeof next === "function" ? next(valueRef.current) : next;
       if (!isControlled) {
@@ -88,31 +208,48 @@ function useControllableState({
   );
   return [value, setValue];
 }
+
+// src/hooks/useDisclosure.ts
+var import_react2 = require("react");
 function useDisclosure(initial = false) {
-  const [open, setOpen] = react.useState(initial);
-  const onOpen = react.useCallback(() => setOpen(true), []);
-  const onClose = react.useCallback(() => setOpen(false), []);
-  const onToggle = react.useCallback(() => setOpen((o) => !o), []);
+  const [open, setOpen] = (0, import_react2.useState)(initial);
+  const onOpen = (0, import_react2.useCallback)(() => setOpen(true), []);
+  const onClose = (0, import_react2.useCallback)(() => setOpen(false), []);
+  const onToggle = (0, import_react2.useCallback)(() => setOpen((o) => !o), []);
   return { open, onOpen, onClose, onToggle, setOpen };
 }
+
+// src/hooks/useEscape.ts
+var import_react3 = require("react");
 function useEscape(handler, enabled = true) {
-  react.useEffect(() => {
+  const handlerRef = (0, import_react3.useRef)(handler);
+  (0, import_react3.useEffect)(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+  (0, import_react3.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
+var import_react4 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react4.useLayoutEffect : import_react4.useEffect;
+
+// src/hooks/useKeyboardList.ts
+var import_react5 = require("react");
 function useKeyboardList({
   count,
   loop = true,
   defaultCursor = 0,
   onSelect
 }) {
-  const [cursor, setCursor] = react.useState(defaultCursor);
-  const move = react.useCallback(
+  const [cursor, setCursor] = (0, import_react5.useState)(defaultCursor);
+  const move = (0, import_react5.useCallback)(
     (delta) => {
       if (count <= 0) return;
       setCursor((c) => {
@@ -123,7 +260,7 @@ function useKeyboardList({
     },
     [count, loop]
   );
-  const onKeyDown = react.useCallback(
+  const onKeyDown = (0, import_react5.useCallback)(
     (event) => {
       if (count <= 0) return;
       switch (event.key) {
@@ -149,6 +286,8 @@ function useKeyboardList({
             onSelect(cursor);
           }
           break;
+        default:
+          break;
       }
     },
     [count, cursor, move, onSelect]
@@ -156,23 +295,30 @@ function useKeyboardList({
   const safeCursor = count > 0 ? Math.min(cursor, count - 1) : 0;
   return { cursor: safeCursor, setCursor, onKeyDown };
 }
+
+// src/hooks/useOutsideClick.ts
+var import_react6 = require("react");
 function useOutsideClick(ref, handler, enabled = true) {
-  react.useEffect(() => {
+  (0, import_react6.useEffect)(() => {
     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
+var import_react7 = require("react");
 function useTheme() {
-  const [theme, setThemeState] = react.useState(() => {
-    if (typeof document === "undefined") return "dark";
-    return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
-  });
-  const setTheme = react.useCallback((next) => {
+  const [theme, setThemeState] = (0, import_react7.useState)("dark");
+  const setTheme = (0, import_react7.useCallback)((next) => {
+    if (typeof document === "undefined") {
+      setThemeState(next);
+      return;
+    }
     if (next === "light") {
       document.documentElement.setAttribute("data-theme", "light");
     } else {
@@ -180,10 +326,12 @@ function useTheme() {
     }
     setThemeState(next);
   }, []);
-  const toggle = react.useCallback(() => {
+  const toggle = (0, import_react7.useCallback)(() => {
     setTheme(theme === "dark" ? "light" : "dark");
   }, [theme, setTheme]);
-  react.useEffect(() => {
+  (0, import_react7.useEffect)(() => {
+    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");
@@ -196,7 +344,13 @@ function useTheme() {
   }, []);
   return { theme, setTheme, toggle };
 }
-var buttonStyles = classVarianceAuthority.cva(
+
+// src/components/Button/Button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react8 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonStyles = (0, import_class_variance_authority.cva)(
   [
     "inline-flex items-center justify-center whitespace-nowrap",
     "font-medium transition-[background,filter,box-shadow,color] duration-(--duration-micro)",
@@ -233,7 +387,7 @@ var buttonStyles = classVarianceAuthority.cva(
   }
 );
 function Spinner({ size }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
       "aria-hidden": true,
@@ -243,7 +397,7 @@ function Spinner({ size }) {
   );
 }
 var iconSize = { sm: 11, md: 12, lg: 13 };
-var Button = react.forwardRef(function Button2({
+var Button = (0, import_react8.forwardRef)(function Button2({
   variant,
   size,
   fullWidth,
@@ -261,8 +415,8 @@ var Button = react.forwardRef(function Button2({
   const iconPx = iconSize[size ?? "md"];
   const composedClassName = cn(buttonStyles({ variant, size, fullWidth }), className);
   if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactSlot.Slot,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_slot.Slot,
       {
         ref,
         "aria-busy": loading || void 0,
@@ -274,7 +428,7 @@ var Button = react.forwardRef(function Button2({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
       ref,
@@ -284,15 +438,20 @@ var Button = react.forwardRef(function Button2({
       className: composedClassName,
       ...props,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: iconPx }) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: icon }) : null,
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { size: iconPx }) : icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex", children: icon }) : null,
         children,
-        trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex opacity-60", children: trailing })
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex opacity-60", children: trailing })
       ]
     }
   );
 });
 Button.displayName = "Button";
-var iconButtonStyles = classVarianceAuthority.cva(
+
+// src/components/Button/IconButton.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_react9 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var iconButtonStyles = (0, import_class_variance_authority2.cva)(
   [
     "inline-grid place-items-center transition-[background,filter,color] duration-(--duration-micro)",
     "outline-none focus-visible:ring-[3px] focus-visible:ring-accent-dim",
@@ -300,11 +459,16 @@ var iconButtonStyles = classVarianceAuthority.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]",
@@ -315,8 +479,8 @@ var iconButtonStyles = classVarianceAuthority.cva(
     defaultVariants: { variant: "secondary", size: "md" }
   }
 );
-var IconButton = react.forwardRef(function IconButton2({ variant, size, icon, type, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+var IconButton = (0, import_react9.forwardRef)(function IconButton2({ variant, size, icon, type, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       ref,
@@ -328,9 +492,13 @@ var IconButton = react.forwardRef(function IconButton2({ variant, size, icon, ty
   );
 });
 IconButton.displayName = "IconButton";
-var ButtonGroup = react.forwardRef(function ButtonGroup2({ orientation = "horizontal", className, children, ...props }, ref) {
-  const items = react.Children.toArray(children).filter(react.isValidElement);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+
+// src/components/Button/ButtonGroup.tsx
+var import_react10 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ButtonGroup = (0, import_react10.forwardRef)(function ButtonGroup2({ orientation = "horizontal", className, children, ...props }, ref) {
+  const items = import_react10.Children.toArray(children).filter(import_react10.isValidElement);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       ref,
@@ -344,7 +512,7 @@ var ButtonGroup = react.forwardRef(function ButtonGroup2({ orientation = "horizo
       children: items.map((child, i) => {
         const isFirst = i === 0;
         const childProps = child.props ?? {};
-        return react.cloneElement(child, {
+        return (0, import_react10.cloneElement)(child, {
           key: i,
           className: cn(
             childProps.className,
@@ -357,27 +525,42 @@ var ButtonGroup = react.forwardRef(function ButtonGroup2({ orientation = "horizo
   );
 });
 ButtonGroup.displayName = "ButtonGroup";
-var SplitButton = react.forwardRef(function SplitButton2({ variant = "primary", size = "md", onClick, onMenu, disabled, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("inline-flex", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+
+// src/components/Button/SplitButton.tsx
+var import_react11 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SplitButton = (0, import_react11.forwardRef)(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__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: cn("inline-flex", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       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__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Button,
       {
         variant,
         size,
         onClick: onMenu,
         disabled,
-        "aria-label": "More actions",
+        "aria-label": menuAriaLabel,
         className: "rounded-l-none px-2",
         children: "\u25BE"
       }
@@ -385,8 +568,12 @@ var SplitButton = react.forwardRef(function SplitButton2({ variant = "primary",
   ] });
 });
 SplitButton.displayName = "SplitButton";
-var FAB = react.forwardRef(function FAB2({ icon = "\u2726", type, className, style, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+
+// src/components/Button/FAB.tsx
+var import_react12 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var FAB = (0, import_react12.forwardRef)(function FAB2({ icon = "\u2726", type, className, style, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
       ref,
@@ -408,10 +595,15 @@ var FAB = react.forwardRef(function FAB2({ icon = "\u2726", type, className, sty
   );
 });
 FAB.displayName = "FAB";
-var Checkbox = react.forwardRef(function Checkbox2({ label, className, id: idProp, ...props }, ref) {
-  const reactId = react.useId();
+
+// src/components/Checkbox/Checkbox.tsx
+var RadixCheckbox = __toESM(require("@radix-ui/react-checkbox"), 1);
+var import_react13 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Checkbox = (0, import_react13.forwardRef)(function Checkbox2({ label, className, id: idProp, ...props }, ref) {
+  const reactId = (0, import_react13.useId)();
   const id = idProp ?? `cb-${reactId}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "span",
     {
       className: cn(
@@ -420,8 +612,8 @@ var Checkbox = react.forwardRef(function Checkbox2({ label, className, id: idPro
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          RadixCheckbox__namespace.Root,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          RadixCheckbox.Root,
           {
             ref,
             id,
@@ -434,36 +626,45 @@ var Checkbox = react.forwardRef(function Checkbox2({ label, className, id: idPro
               "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
             ),
             ...props,
-            children: /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: "text-on-accent text-[11px] leading-none", children: props.checked === "indeterminate" ? "\u2212" : "\u2713" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadixCheckbox.Indicator, { className: "text-on-accent text-[11px] leading-none", children: props.checked === "indeterminate" ? "\u2212" : "\u2713" })
           }
         ),
-        label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
       ]
     }
   );
 });
 Checkbox.displayName = "Checkbox";
+
+// src/components/Field/Field.tsx
+var import_react14 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Field({ label, hint, error, required, className, children, ...props }) {
-  const reactId = react.useId();
+  const reactId = (0, import_react14.useId)();
   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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-[6px]", className), ...props, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: id, className: "text-text-muted text-[11px] font-medium", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex flex-col gap-[6px]", className), ...props, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: id, className: "text-text-muted text-[11px] font-medium", children: [
       label,
-      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-err ml-1", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-err ml-1", children: "*" })
     ] }),
     children({
       id,
       "aria-describedby": describedBy,
       "aria-invalid": error ? true : void 0
     }),
-    hint && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: hintId, className: "text-text-dim text-[11px]", children: hint }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-err text-[11px]", children: error })
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: hintId, className: "text-text-dim text-[11px]", children: hint }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: errorId, className: "text-err text-[11px]", children: error })
   ] });
 }
-var inputWrapperStyles = classVarianceAuthority.cva(
+
+// src/components/Input/Input.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_react15 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var inputWrapperStyles = (0, import_class_variance_authority3.cva)(
   [
     "flex items-center gap-[6px] font-sans transition-[border-color,box-shadow] duration-(--duration-micro)",
     "border focus-within:ring-[3px]",
@@ -478,22 +679,22 @@ var inputWrapperStyles = classVarianceAuthority.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 = react.forwardRef(function Input2({ size, tone, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
-  const computedTone = error ? "error" : tone;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+var Input = (0, import_react15.forwardRef)(function Input2({ size, tone, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
+  const computedTone = error ? "err" : tone;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: cn(inputWrapperStyles({ size, tone: computedTone }), className),
       style: { width, ...style },
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim leading-none", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-text-dim leading-none", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "input",
           {
             ref,
@@ -507,14 +708,26 @@ var Input = react.forwardRef(function Input2({ size, tone, icon, trailing, error
             ...props
           }
         ),
-        trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim text-[11px]", children: trailing })
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-text-dim text-[11px]", children: trailing })
       ]
     }
   );
 });
 Input.displayName = "Input";
-var SearchInput = react.forwardRef(function SearchInput2({ shortcut = "\u2318K", width = 360, className, style, placeholder = "Search\u2026", ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+
+// src/components/Input/SearchInput.tsx
+var import_react16 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SearchInput = (0, import_react16.forwardRef)(function SearchInput2({
+  shortcut = "\u2318K",
+  width = 360,
+  className,
+  style,
+  placeholder = "Search\u2026",
+  "aria-label": ariaLabel,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className: cn(
@@ -526,46 +739,57 @@ var SearchInput = react.forwardRef(function SearchInput2({ shortcut = "\u2318K",
       ),
       style: { width, ...style },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim leading-none", children: "\u2315" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-text-dim leading-none", "aria-hidden": true, children: "\u2315" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "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__ */ jsxRuntime.jsx("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: shortcut })
+        shortcut && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: shortcut })
       ]
     }
   );
 });
 SearchInput.displayName = "SearchInput";
-var OTP = react.forwardRef(function OTP2({ length = 6, onComplete, onChange, defaultValue = "", ariaLabel = "Code", className, disabled }, ref) {
-  const baseId = react.useId();
-  const refs = react.useRef([]);
-  const [values, setValues] = react.useState(
+
+// src/components/OTP/OTP.tsx
+var import_react17 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var OTP = (0, import_react17.forwardRef)(function OTP2({ length = 6, onComplete, onChange, defaultValue = "", ariaLabel = "Code", className, disabled }, ref) {
+  const baseId = (0, import_react17.useId)();
+  const refs = (0, import_react17.useRef)([]);
+  const [values, setValues] = (0, import_react17.useState)(
     () => Array.from({ length }, (_, i) => defaultValue[i] ?? "")
   );
-  react.useImperativeHandle(ref, () => ({
+  const [completedAnnouncement, setCompletedAnnouncement] = (0, import_react17.useState)("");
+  (0, import_react17.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) => {
@@ -585,45 +809,59 @@ var OTP = react.forwardRef(function OTP2({ length = 6, onComplete, onChange, def
     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__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2", className), children: values.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      id: `${baseId}-${i}`,
-      ref: (el) => {
-        refs.current[i] = el;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex gap-2", className), children: [
+    values.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "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__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: completedAnnouncement })
+  ] });
 });
 OTP.displayName = "OTP";
-var RadioGroup = react.forwardRef(function RadioGroup2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixRadio__namespace.Root, { ref, className: cn("flex flex-col gap-2", className), ...props });
+
+// src/components/Radio/Radio.tsx
+var RadixRadio = __toESM(require("@radix-ui/react-radio-group"), 1);
+var import_react18 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react18.forwardRef)(function RadioGroup2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixRadio.Root, { ref, className: cn("flex flex-col gap-2", className), ...props });
 });
 RadioGroup.displayName = "RadioGroup";
-var Radio = react.forwardRef(function Radio2({ label, className, id: idProp, ...props }, ref) {
-  const reactId = react.useId();
+var Radio = (0, import_react18.forwardRef)(function Radio2({ label, className, id: idProp, ...props }, ref) {
+  const reactId = (0, import_react18.useId)();
   const id = idProp ?? `radio-${reactId}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "span",
     {
       className: cn(
@@ -632,8 +870,8 @@ var Radio = react.forwardRef(function Radio2({ label, className, id: idProp, ...
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          RadixRadio__namespace.Item,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          RadixRadio.Item,
           {
             ref,
             id,
@@ -645,27 +883,32 @@ var Radio = react.forwardRef(function Radio2({ label, className, id: idProp, ...
               "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
             ),
             ...props,
-            children: /* @__PURE__ */ jsxRuntime.jsx(RadixRadio__namespace.Indicator, { className: "bg-accent block h-[7px] w-[7px] rounded-full" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixRadio.Indicator, { className: "bg-accent block h-[7px] w-[7px] rounded-full" })
           }
         ),
-        label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
       ]
     }
   );
 });
 Radio.displayName = "Radio";
-var SelectRoot = RadixSelect__namespace.Root;
-var SelectValue = RadixSelect__namespace.Value;
-var SelectGroup = RadixSelect__namespace.Group;
-var SelectLabel = RadixSelect__namespace.Label;
+
+// src/components/Select/Select.tsx
+var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
+var import_react19 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SelectRoot = RadixSelect.Root;
+var SelectValue = RadixSelect.Value;
+var SelectGroup = RadixSelect.Group;
+var SelectLabel = RadixSelect.Label;
 var triggerClasses = {
   sm: "h-7 px-2 text-[12px]",
   md: "h-[34px] px-[10px] text-[13px]",
   lg: "h-10 px-3 text-[14px]"
 };
-var SelectTrigger = react.forwardRef(function SelectTrigger2({ size = "md", className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixSelect__namespace.Trigger,
+var SelectTrigger = (0, import_react19.forwardRef)(function SelectTrigger2({ size = "md", className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    RadixSelect.Trigger,
     {
       ref,
       className: cn(
@@ -680,36 +923,36 @@ var SelectTrigger = react.forwardRef(function SelectTrigger2({ size = "md", clas
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Icon, { className: "text-text-dim text-[11px] leading-none", children: "\u25BE" })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixSelect.Icon, { className: "text-text-dim text-[11px] leading-none", children: "\u25BE" })
       ]
     }
   );
 });
 SelectTrigger.displayName = "SelectTrigger";
-var SelectContent = react.forwardRef(
+var SelectContent = (0, import_react19.forwardRef)(
   function SelectContent2({ className, children, position = "popper", sideOffset = 6, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSelect__namespace.Content,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      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__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixSelect.Viewport, { children })
       }
     ) });
   }
 );
 SelectContent.displayName = "SelectContent";
-var SelectItem = react.forwardRef(
+var SelectItem = (0, import_react19.forwardRef)(
   function SelectItem2({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSelect__namespace.Item,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      RadixSelect.Item,
       {
         ref,
         className: cn(
@@ -720,7 +963,7 @@ var SelectItem = react.forwardRef(
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemText, { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixSelect.ItemText, { children })
       }
     );
   }
@@ -735,64 +978,91 @@ function Select({
   "aria-labelledby": ariaLabelledBy,
   ...rootProps
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(RadixSelect__namespace.Root, { ...rootProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(RadixSelect.Root, { ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       SelectTrigger,
       {
         size,
         className,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
-        children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder })
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectValue, { placeholder })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((opt) => {
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectContent, { children: options.map((opt) => {
       const value = typeof opt === "string" ? opt : opt.value;
       const label = typeof opt === "string" ? opt : opt.label;
-      return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value, children: label }, value);
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value, children: label }, value);
     }) })
   ] });
 }
-var Slider = react.forwardRef(function Slider2({ showValue, width = 240, className, value, defaultValue, ...props }, ref) {
+
+// src/components/Slider/Slider.tsx
+var RadixSlider = __toESM(require("@radix-ui/react-slider"), 1);
+var import_react20 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Slider = (0, import_react20.forwardRef)(function Slider2({
+  showValue,
+  width = 240,
+  className,
+  value,
+  defaultValue,
+  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__ */ jsxRuntime.jsxs(
+  const thumbCount = (arrValue ?? arrDefault)?.length ?? 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "span",
     {
       ref,
       className: cn("inline-flex items-center gap-[10px]", className),
       style: { width },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          RadixSlider__namespace.Root,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          RadixSlider.Root,
           {
             value: arrValue,
             defaultValue: arrDefault,
             className: "relative flex h-4 flex-1 touch-none items-center select-none",
             ...props,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadixSlider__namespace.Track, { className: "bg-panel-2 relative h-1 grow rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(RadixSlider__namespace.Range, { className: "bg-accent absolute h-full rounded-full" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                RadixSlider__namespace.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__ */ (0, import_jsx_runtime13.jsx)(RadixSlider.Track, { className: "bg-panel-2 relative h-1 grow rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.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": thumbAriaLabel,
+                    "aria-labelledby": perThumb ? void 0 : ariaLabelledBy
+                  },
+                  i
+                );
+              })
             ]
           }
         ),
-        showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted min-w-[28px] text-right font-mono text-[11px]", children: display })
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-text-muted min-w-[28px] text-right font-mono text-[11px]", children: display })
       ]
     }
   );
 });
 Slider.displayName = "Slider";
+
+// src/components/Switch/Switch.tsx
+var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
+var import_react21 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var trackClasses = {
   sm: "h-4 w-7",
   md: "h-5 w-9"
@@ -801,10 +1071,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 = react.forwardRef(function Switch2({ label, size = "md", className, id: idProp, ...props }, ref) {
-  const reactId = react.useId();
+var Switch = (0, import_react21.forwardRef)(function Switch2({ label, size = "md", className, id: idProp, ...props }, ref) {
+  const reactId = (0, import_react21.useId)();
   const id = idProp ?? `sw-${reactId}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "span",
     {
       className: cn(
@@ -813,8 +1083,8 @@ var Switch = react.forwardRef(function Switch2({ label, size = "md", className,
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          RadixSwitch__namespace.Root,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          RadixSwitch.Root,
           {
             ref,
             id,
@@ -826,8 +1096,8 @@ var Switch = react.forwardRef(function Switch2({ label, size = "md", className,
               trackClasses[size]
             ),
             ...props,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              RadixSwitch__namespace.Thumb,
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              RadixSwitch.Thumb,
               {
                 className: cn(
                   "bg-text absolute top-1/2 left-[1px] -translate-y-1/2 rounded-full shadow-sm",
@@ -838,13 +1108,18 @@ var Switch = react.forwardRef(function Switch2({ label, size = "md", className,
             )
           }
         ),
-        label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
       ]
     }
   );
 });
 Switch.displayName = "Switch";
-var textareaStyles = classVarianceAuthority.cva(
+
+// src/components/Textarea/Textarea.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_react22 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var textareaStyles = (0, import_class_variance_authority4.cva)(
   [
     "w-full font-sans text-text bg-panel rounded-md p-[10px]",
     "border outline-none transition-[border-color,box-shadow] duration-(--duration-micro)",
@@ -856,26 +1131,97 @@ var textareaStyles = classVarianceAuthority.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 = react.forwardRef(function Textarea2({ tone, error, rows = 4, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+var Textarea = (0, import_react22.forwardRef)(function Textarea2({ tone, error, rows = 4, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "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
+var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
+var import_react24 = require("react");
+
+// src/components/StatusDot/StatusDot.tsx
+var import_react23 = require("react");
+var import_jsx_runtime16 = require("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 = (0, import_react23.forwardRef)(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "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__ */ (0, import_jsx_runtime16.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__ */ (0, import_jsx_runtime16.jsx)("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
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var statusBg = {
   ok: "bg-ok",
   warn: "bg-warn",
@@ -890,11 +1236,11 @@ function hashHue(str) {
   for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) % 360;
   return h;
 }
-var Avatar = react.forwardRef(function Avatar2({ name = "?", src, size = "md", status, initials, className, style, ...props }, ref) {
+var Avatar = (0, import_react24.forwardRef)(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__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "span",
     {
       ref,
@@ -902,15 +1248,17 @@ var Avatar = react.forwardRef(function Avatar2({ name = "?", src, size = "md", s
       style: { width: dim, height: dim, ...style },
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          RadixAvatar__namespace.Root,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          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__ */ jsxRuntime.jsx(RadixAvatar__namespace.Image, { src, alt: name, className: "h-full w-full object-cover" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                RadixAvatar__namespace.Fallback,
+              src && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RadixAvatar.Image, { src, alt: name, className: "h-full w-full object-cover" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                RadixAvatar.Fallback,
                 {
                   className: "flex h-full w-full items-center justify-center font-sans font-semibold text-white",
                   style: { fontSize: dim * 0.38 },
@@ -920,11 +1268,11 @@ var Avatar = react.forwardRef(function Avatar2({ name = "?", src, size = "md", s
             ]
           }
         ),
-        status && /* @__PURE__ */ jsxRuntime.jsx(
+        status && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "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]
@@ -937,15 +1285,18 @@ var Avatar = react.forwardRef(function Avatar2({ name = "?", src, size = "md", s
   );
 });
 Avatar.displayName = "Avatar";
-var sizePx2 = { xs: 20, sm: 24, md: 32, lg: 40, xl: 56 };
-var AvatarGroup = react.forwardRef(function AvatarGroup2({ names, max = 3, size = "md", className, ...props }, ref) {
-  const dim = sizePx2[size];
+
+// src/components/Avatar/AvatarGroup.tsx
+var import_react25 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var AvatarGroup = (0, import_react25.forwardRef)(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__ */ jsxRuntime.jsxs("div", { ref, className: cn("inline-flex", className), ...props, children: [
-    visible.map((n, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: i === 0 ? 0 : overlap }, children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { name: n, size }) }, `${n}-${i}`)),
-    rest > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref, className: cn("inline-flex", className), ...props, children: [
+    visible.map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { marginLeft: i === 0 ? 0 : overlap }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { name: n, size }) }, `${n}-${i}`)),
+    rest > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "span",
       {
         "aria-label": `+${rest} more`,
@@ -965,7 +1316,12 @@ var AvatarGroup = react.forwardRef(function AvatarGroup2({ names, max = 3, size
   ] });
 });
 AvatarGroup.displayName = "AvatarGroup";
-var badgeStyles = classVarianceAuthority.cva("inline-flex items-center font-sans leading-none whitespace-nowrap", {
+
+// src/components/Badge/Badge.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_react26 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var badgeStyles = (0, import_class_variance_authority5.cva)("inline-flex items-center font-sans leading-none whitespace-nowrap", {
   variants: {
     variant: {
       neutral: "bg-panel-2 text-text-muted border border-border",
@@ -998,21 +1354,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 = react.forwardRef(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
-    dot && /* @__PURE__ */ jsxRuntime.jsx(
+var Badge = (0, import_react26.forwardRef)(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
+  const sz = size ?? "md";
+  const v = variant ?? "neutral";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
+    dot && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "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__ */ jsxRuntime.jsx("span", { className: "inline-flex leading-none", children: icon }),
+    icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "inline-flex leading-none", children: icon }),
     children
   ] });
 });
 Badge.displayName = "Badge";
-var cardStyles = classVarianceAuthority.cva(
+
+// src/components/Card/Card.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_react27 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var cardStyles = (0, import_class_variance_authority6.cva)(
   "block bg-panel border border-border rounded-base transition-[border-color,transform,box-shadow] duration-(--duration-step)",
   {
     variants: {
@@ -1029,7 +1392,7 @@ var cardStyles = classVarianceAuthority.cva(
     defaultVariants: { variant: "default", interactive: false }
   }
 );
-var Card = react.forwardRef(function Card2({
+var Card = (0, import_react27.forwardRef)(function Card2({
   variant,
   interactive,
   title,
@@ -1039,57 +1402,96 @@ var Card = react.forwardRef(function Card2({
   className,
   children,
   onClick,
+  onActivate,
   ...props
 }, ref) {
-  const isInteractive = interactive ?? Boolean(onClick);
-  return /* @__PURE__ */ jsxRuntime.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__ */ (0, import_jsx_runtime20.jsxs)(
     "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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-3", (description || children) && "mb-[10px]"), children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-[14px] font-medium", children: title }),
-          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: actions })
+        (title || actions) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex items-start gap-3", (description || children) && "mb-[10px]"), children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 text-[14px] font-medium", children: title }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex gap-1", children: actions })
         ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
         children,
-        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border text-text-dim mt-[14px] border-t pt-3 text-[11px]", children: footer })
+        footer && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "border-border text-text-dim mt-[14px] border-t pt-3 text-[11px]", children: footer })
       ]
     }
   );
 });
 Card.displayName = "Card";
+var CardLink = (0, import_react27.forwardRef)(function CardLink2({ variant, title, description, footer, className, children, href, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "a",
+    {
+      ref,
+      href,
+      className: cn(
+        cardStyles({ variant, interactive: true }),
+        "focus-visible:ring-accent-dim p-[18px] no-underline outline-none focus-visible:ring-[3px]",
+        className
+      ),
+      ...props,
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("flex items-start", (description || children) && "mb-[10px]"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 text-[14px] font-medium", children: title }) }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
+        children,
+        footer && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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
+var import_react28 = require("react");
+var import_jsx_runtime21 = require("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 = react.forwardRef(function StatCard2({ label, value, delta, trend = "flat", icon, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+var StatCard = (0, import_react28.forwardRef)(function StatCard2({ label, value, delta, trend = "flat", icon, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       ref,
       className: cn("bg-panel border-border rounded-base block border p-[18px]", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-[10px] flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-dim font-mono text-[10px] tracking-wide uppercase", children: label }),
-          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-dim text-[14px]", children: icon })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mb-[10px] flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-text-dim font-mono text-[10px] tracking-wide uppercase", children: label }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-text-dim text-[14px]", children: icon })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text font-mono text-[26px] leading-none font-medium tracking-tight", children: value }),
-        delta !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-[6px] font-mono text-[11px]", trendClasses[trend]), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-text font-mono text-[26px] leading-none font-medium tracking-tight", children: value }),
+        delta !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("mt-[6px] font-mono text-[11px]", trendClasses[trend]), children: [
           trendArrows[trend],
           " ",
           delta
@@ -1099,8 +1501,12 @@ var StatCard = react.forwardRef(function StatCard2({ label, value, delta, trend
   );
 });
 StatCard.displayName = "StatCard";
-var Chip = react.forwardRef(function Chip2({ icon, removable, onRemove, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+
+// src/components/Chip/Chip.tsx
+var import_react29 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Chip = (0, import_react29.forwardRef)(function Chip2({ icon, onRemove, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "span",
     {
       ref,
@@ -1111,9 +1517,9 @@ var Chip = react.forwardRef(function Chip2({ icon, removable, onRemove, classNam
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim inline-flex text-[10px]", children: icon }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-text-dim inline-flex text-[10px]", children: icon }),
         children,
-        removable && /* @__PURE__ */ jsxRuntime.jsx(
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "button",
           {
             type: "button",
@@ -1128,8 +1534,12 @@ var Chip = react.forwardRef(function Chip2({ icon, removable, onRemove, classNam
   );
 });
 Chip.displayName = "Chip";
-var Kbd = react.forwardRef(function Kbd2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+
+// src/components/Kbd/Kbd.tsx
+var import_react30 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Kbd = (0, import_react30.forwardRef)(function Kbd2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "kbd",
     {
       ref,
@@ -1145,7 +1555,12 @@ var Kbd = react.forwardRef(function Kbd2({ className, children, ...props }, ref)
   );
 });
 Kbd.displayName = "Kbd";
-var skeletonStyles = classVarianceAuthority.cva("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite]", {
+
+// src/components/Skeleton/Skeleton.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_react31 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var skeletonStyles = (0, import_class_variance_authority7.cva)("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite]", {
   variants: {
     shape: {
       line: "rounded-xs",
@@ -1156,16 +1571,15 @@ var skeletonStyles = classVarianceAuthority.cva("block bg-panel-2 animate-[ship-
   defaultVariants: { shape: "line" }
 });
 var defaultHeight = { line: 14, block: 80, circle: 40 };
-var Skeleton = react.forwardRef(function Skeleton2({ shape = "line", width = "100%", height, className, style, ...props }, ref) {
+var Skeleton = (0, import_react31.forwardRef)(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__ */ jsxRuntime.jsx(
+  const a11yProps = standalone ? { role: "status", "aria-busy": true, "aria-label": "Loading" } : { "aria-hidden": true };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       ref,
-      role: "status",
-      "aria-busy": "true",
-      "aria-label": "Loading",
+      ...a11yProps,
       className: cn(skeletonStyles({ shape }), className),
       style: { width: w, height: h, ...style },
       ...props
@@ -1173,52 +1587,30 @@ var Skeleton = react.forwardRef(function Skeleton2({ shape = "line", width = "10
   );
 });
 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 = react.forwardRef(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
+var SkeletonGroup = (0, import_react31.forwardRef)(function SkeletonGroup2({ label = "Loading", loading = true, className, children, ...props }, ref) {
+  if (!loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className, ...props, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-text-muted text-[12px]", children: label })
-      ]
+      children
     }
   );
 });
-StatusDot.displayName = "StatusDot";
-var Tag = react.forwardRef(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+SkeletonGroup.displayName = "SkeletonGroup";
+
+// src/components/Tag/Tag.tsx
+var import_react32 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Tag = (0, import_react32.forwardRef)(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "span",
     {
       ref,
@@ -1230,9 +1622,9 @@ var Tag = react.forwardRef(function Tag2({ onRemove, icon, size = 22, className,
       style: { height: size },
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim inline-flex", children: icon }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-text-dim inline-flex", children: icon }),
         children,
-        onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             type: "button",
@@ -1247,17 +1639,22 @@ var Tag = react.forwardRef(function Tag2({ onRemove, icon, size = 22, className,
   );
 });
 Tag.displayName = "Tag";
-var ContextMenuRoot = RadixContext__namespace.Root;
-var ContextMenuTrigger = RadixContext__namespace.Trigger;
-var ContextMenuPortal = RadixContext__namespace.Portal;
-var ContextMenuContent = react.forwardRef(
+
+// src/components/ContextMenu/ContextMenu.tsx
+var RadixContext = __toESM(require("@radix-ui/react-context-menu"), 1);
+var import_react33 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ContextMenuRoot = RadixContext.Root;
+var ContextMenuTrigger = RadixContext.Trigger;
+var ContextMenuPortal = RadixContext.Portal;
+var ContextMenuContent = (0, import_react33.forwardRef)(
   function ContextMenuContent2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixContext__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixContext__namespace.Content,
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadixContext.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      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
         ),
@@ -1272,27 +1669,27 @@ var itemBase = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var ContextMenuItem = react.forwardRef(
+var ContextMenuItem = (0, import_react33.forwardRef)(
   function ContextMenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixContext__namespace.Item,
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      RadixContext.Item,
       {
         ref,
         className: cn(itemBase, destructive ? "text-err" : "text-text", className),
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
-          trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "flex-1", children }),
+          trailing && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
         ]
       }
     );
   }
 );
 ContextMenuItem.displayName = "ContextMenuItem";
-var ContextMenuSeparator = react.forwardRef(function ContextMenuSeparator2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixContext__namespace.Separator,
+var ContextMenuSeparator = (0, import_react33.forwardRef)(function ContextMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    RadixContext.Separator,
     {
       ref,
       className: cn("bg-border my-1 h-[1px]", className),
@@ -1301,19 +1698,24 @@ var ContextMenuSeparator = react.forwardRef(function ContextMenuSeparator2({ cla
   );
 });
 ContextMenuSeparator.displayName = "ContextMenuSeparator";
-var ContextMenu = RadixContext__namespace.Root;
-var DialogRoot = RadixDialog__namespace.Root;
-var DialogTrigger = RadixDialog__namespace.Trigger;
-var DialogClose = RadixDialog__namespace.Close;
-var DialogPortal = RadixDialog__namespace.Portal;
-var DialogOverlay = react.forwardRef(
+var ContextMenu = RadixContext.Root;
+
+// src/components/Dialog/Dialog.tsx
+var RadixDialog = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react34 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var DialogRoot = RadixDialog.Root;
+var DialogTrigger = RadixDialog.Trigger;
+var DialogClose = RadixDialog.Close;
+var DialogPortal = RadixDialog.Portal;
+var DialogOverlay = (0, import_react34.forwardRef)(
   function DialogOverlay2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixDialog__namespace.Overlay,
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      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
         ),
@@ -1323,15 +1725,15 @@ var DialogOverlay = react.forwardRef(
   }
 );
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = react.forwardRef(function DialogContent2({ className, width = 460, style, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      RadixDialog__namespace.Content,
+var DialogContent = (0, import_react34.forwardRef)(function DialogContent2({ className, width = 460, style, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      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",
@@ -1346,27 +1748,32 @@ var DialogContent = react.forwardRef(function DialogContent2({ className, width
 });
 DialogContent.displayName = "DialogContent";
 function Dialog({ title, description, footer, width, children, ...rootProps }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { width, children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(
-      RadixDialog__namespace.Title,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DialogContent, { width, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      RadixDialog.Title,
       {
         className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
         children: title
       }
     ),
-    description && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
     children,
-    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+    footer && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mt-5 flex justify-end gap-2", children: footer })
   ] }) });
 }
+
+// src/components/Dialog/Drawer.tsx
+var RadixDialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react35 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var sideClasses = {
   left: "left-0 border-r border-border-strong data-[state=open]:animate-[ship-slide-in-left_220ms_var(--easing-out)]",
   right: "right-0 border-l border-border-strong data-[state=open]:animate-[ship-slide-in-right_220ms_var(--easing-out)]"
 };
-var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border flex items-center justify-between border-b p-[16px] px-5", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] font-medium", children: title }),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDialog__namespace.Close,
+var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "border-border flex items-center justify-between border-b p-[16px] px-5", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadixDialog2.Title, { className: "text-[14px] font-medium", children: title }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    RadixDialog2.Close,
     {
       onClick: onClose,
       "aria-label": "Close",
@@ -1375,43 +1782,49 @@ var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ jsxRuntime.jsxs("div"
     }
   )
 ] });
-var Drawer = react.forwardRef(function Drawer2({ side = "right", title, width = 420, children, ...rootProps }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixDialog__namespace.Content,
+var Drawer = (0, import_react35.forwardRef)(function Drawer2({ side = "right", title, width = 420, children, ...rootProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      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__ */ jsxRuntime.jsx(DrawerHeader, { title }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto p-5", children })
+          title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DrawerHeader, { title }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadixDialog2.Title, { className: "sr-only", children: "Drawer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1 overflow-auto p-5", children })
         ]
       }
     )
   ] }) });
 });
 Drawer.displayName = "Drawer";
-var Sheet = react.forwardRef(function Sheet2({ title, width = "min(640px, 90vw)", children, ...rootProps }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixDialog__namespace.Content,
+
+// src/components/Dialog/Sheet.tsx
+var RadixDialog3 = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react36 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Sheet = (0, import_react36.forwardRef)(function Sheet2({ title, width = "min(640px, 90vw)", children, ...rootProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(DialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      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__ */ jsxRuntime.jsx("div", { className: "bg-border mx-auto mb-[14px] h-1 w-9 rounded-full", "aria-hidden": true }),
-          title && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { className: "mb-1 text-[15px] font-medium", children: title }),
+          title ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixDialog3.Title, { className: "mb-1 text-[15px] font-medium", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixDialog3.Title, { className: "sr-only", children: "Sheet" }),
           children
         ]
       }
@@ -1419,64 +1832,74 @@ var Sheet = react.forwardRef(function Sheet2({ title, width = "min(640px, 90vw)"
   ] }) });
 });
 Sheet.displayName = "Sheet";
-var AlertDialogRoot = RadixAlert__namespace.Root;
-var AlertDialogTrigger = RadixAlert__namespace.Trigger;
-var AlertDialogAction = RadixAlert__namespace.Action;
-var AlertDialogCancel = RadixAlert__namespace.Cancel;
-var AlertDialog = react.forwardRef(function AlertDialog2({ title, description, footer, width = 460, children, ...rootProps }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixAlert__namespace.Portal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      RadixAlert__namespace.Overlay,
+
+// src/components/Dialog/AlertDialog.tsx
+var RadixAlert = __toESM(require("@radix-ui/react-alert-dialog"), 1);
+var import_react37 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var AlertDialogRoot = RadixAlert.Root;
+var AlertDialogTrigger = RadixAlert.Trigger;
+var AlertDialogAction = RadixAlert.Action;
+var AlertDialogCancel = RadixAlert.Cancel;
+var AlertDialog = (0, import_react37.forwardRef)(function AlertDialog2({ title, description, footer, width = 460, children, ...rootProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AlertDialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(RadixAlert.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      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__ */ jsxRuntime.jsxs(
-      RadixAlert__namespace.Content,
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      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__ */ jsxRuntime.jsx(
-            RadixAlert__namespace.Title,
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            RadixAlert.Title,
             {
               className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
               children: title
             }
           ),
-          description && /* @__PURE__ */ jsxRuntime.jsx(RadixAlert__namespace.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
           children,
-          footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+          footer && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-5 flex justify-end gap-2", children: footer })
         ]
       }
     )
   ] }) });
 });
 AlertDialog.displayName = "AlertDialog";
-var DropdownMenuRoot = RadixMenu__namespace.Root;
-var DropdownMenuTrigger = RadixMenu__namespace.Trigger;
-var DropdownMenuPortal = RadixMenu__namespace.Portal;
-var DropdownMenuGroup = RadixMenu__namespace.Group;
-var DropdownMenuLabel = RadixMenu__namespace.Label;
-var DropdownMenuRadioGroup = RadixMenu__namespace.RadioGroup;
-var DropdownMenuContent = react.forwardRef(
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var import_react38 = require("react");
+var import_jsx_runtime31 = require("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 = (0, import_react38.forwardRef)(
   function DropdownMenuContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixMenu__namespace.Content,
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      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
         ),
@@ -1491,32 +1914,32 @@ var itemBase2 = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var MenuItem = react.forwardRef(function MenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixMenu__namespace.Item,
+var MenuItem = (0, import_react38.forwardRef)(function MenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    RadixMenu.Item,
     {
       ref,
       className: cn(itemBase2, destructive ? "text-err" : "text-text", className),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
-        trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
       ]
     }
   );
 });
 MenuItem.displayName = "MenuItem";
-var MenuCheckboxItem = react.forwardRef(
+var MenuCheckboxItem = (0, import_react38.forwardRef)(
   function MenuCheckboxItem2({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixMenu__namespace.CheckboxItem,
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      RadixMenu.CheckboxItem,
       {
         ref,
         className: cn(itemBase2, "text-text relative pl-[26px]", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.ItemIndicator, { className: "text-accent absolute top-1/2 left-2 -translate-y-1/2 text-[10px]", children: "\u2713" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixMenu.ItemIndicator, { className: "text-accent absolute top-1/2 left-2 -translate-y-1/2 text-[10px]", children: "\u2713" }),
           children
         ]
       }
@@ -1524,10 +1947,10 @@ var MenuCheckboxItem = react.forwardRef(
   }
 );
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
-var MenuSeparator = react.forwardRef(
+var MenuSeparator = (0, import_react38.forwardRef)(
   function MenuSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixMenu__namespace.Separator,
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      RadixMenu.Separator,
       {
         ref,
         className: cn("bg-border my-1 h-[1px]", className),
@@ -1537,19 +1960,24 @@ var MenuSeparator = react.forwardRef(
   }
 );
 MenuSeparator.displayName = "MenuSeparator";
-var DropdownMenu = RadixMenu__namespace.Root;
-var HoverCardRoot = RadixHoverCard__namespace.Root;
-var HoverCardTrigger = RadixHoverCard__namespace.Trigger;
-var HoverCardPortal = RadixHoverCard__namespace.Portal;
-var HoverCardContent = react.forwardRef(
+var DropdownMenu = RadixMenu.Root;
+
+// src/components/HoverCard/HoverCard.tsx
+var RadixHoverCard = __toESM(require("@radix-ui/react-hover-card"), 1);
+var import_react39 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var HoverCardRoot = RadixHoverCard.Root;
+var HoverCardTrigger = RadixHoverCard.Trigger;
+var HoverCardPortal = RadixHoverCard.Portal;
+var HoverCardContent = (0, import_react39.forwardRef)(
   function HoverCardContent2({ className, sideOffset = 4, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixHoverCard__namespace.Content,
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RadixHoverCard.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      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
         ),
@@ -1560,27 +1988,32 @@ var HoverCardContent = react.forwardRef(
 );
 HoverCardContent.displayName = "HoverCardContent";
 function HoverCard({ trigger, content, ...rootProps }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(RadixHoverCard__namespace.Root, { openDelay: 200, closeDelay: 120, ...rootProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(HoverCardContent, { children: content })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(RadixHoverCard.Root, { openDelay: 200, closeDelay: 120, ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RadixHoverCard.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HoverCardContent, { children: content })
   ] });
 }
-var PopoverRoot = RadixPopover__namespace.Root;
-var PopoverTrigger = RadixPopover__namespace.Trigger;
-var PopoverAnchor = RadixPopover__namespace.Anchor;
-var PopoverPortal = RadixPopover__namespace.Portal;
-var PopoverClose = RadixPopover__namespace.Close;
-var PopoverArrow = RadixPopover__namespace.Arrow;
-var PopoverContent = react.forwardRef(
+
+// src/components/Popover/Popover.tsx
+var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
+var import_react40 = require("react");
+var import_jsx_runtime33 = require("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 = (0, import_react40.forwardRef)(
   function PopoverContent2({ className, align = "start", sideOffset = 6, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixPopover__namespace.Content,
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      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
         ),
@@ -1590,8 +2023,13 @@ var PopoverContent = react.forwardRef(
   }
 );
 PopoverContent.displayName = "PopoverContent";
-var Popover = RadixPopover__namespace.Root;
-var ToastContext = react.createContext(null);
+var Popover = RadixPopover.Root;
+
+// src/components/Toast/Toast.tsx
+var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
+var import_react41 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var ToastContext = (0, import_react41.createContext)(null);
 var variantIcon = {
   default: "\u25CF",
   info: "\u2139",
@@ -1613,32 +2051,41 @@ var variantBorderLeft = {
   warn: "border-l-warn",
   err: "border-l-err"
 };
+var toastIdCounter = 0;
+var nextToastId = () => `toast-${++toastIdCounter}`;
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = react.useState([]);
-  const toast = react.useCallback((t) => {
-    const id = t.id ?? Math.random().toString(36).slice(2);
-    setToasts((prev) => [...prev, { ...t, id }]);
+  const [toasts, setToasts] = (0, import_react41.useState)([]);
+  const toast = (0, import_react41.useCallback)((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 = react.useCallback((id) => {
+  const dismiss = (0, import_react41.useCallback)((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const value = react.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixToast__namespace.Provider, { swipeDirection: "right", children: [
+  const value = (0, import_react41.useMemo)(() => ({ toast, dismiss }), [toast, dismiss]);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToastContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(RadixToast.Provider, { swipeDirection: "right", children: [
     children,
-    toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { toast: t, onDismiss: () => dismiss(t.id) }, t.id)),
-    /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.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__ */ (0, import_jsx_runtime34.jsx)(ToastCard, { toast: t, onDismiss: () => dismiss(t.id) }, t.id)),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(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() {
-  const ctx = react.useContext(ToastContext);
+  const ctx = (0, import_react41.useContext)(ToastContext);
   if (!ctx) throw new Error("useToast must be inside <ToastProvider>");
   return ctx;
 }
-var ToastCard = react.forwardRef(function ToastCard2({ toast, onDismiss }, ref) {
+var ToastCard = (0, import_react41.forwardRef)(function ToastCard2({ toast, onDismiss }, ref) {
   const variant = toast.variant ?? "default";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixToast__namespace.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    RadixToast.Root,
     {
       ref,
       duration: toast.duration ?? 4e3,
@@ -1652,14 +2099,14 @@ var ToastCard = react.forwardRef(function ToastCard2({ toast, onDismiss }, ref)
         variantBorderLeft[variant]
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mt-px text-[14px] leading-none", variantTextColor[variant]), children: variantIcon[variant] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Title, { className: "text-text text-[13px] font-medium", children: toast.title }),
-          toast.description && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Description, { className: "text-text-muted mt-[2px] text-[12px] leading-[1.5]", children: toast.description }),
-          toast.action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: toast.action })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: cn("mt-px text-[14px] leading-none", variantTextColor[variant]), children: variantIcon[variant] }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RadixToast.Title, { className: "text-text text-[13px] font-medium", children: toast.title }),
+          toast.description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RadixToast.Description, { className: "text-text-muted mt-[2px] text-[12px] leading-[1.5]", children: toast.description }),
+          toast.action && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-2", children: toast.action })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          RadixToast__namespace.Close,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          RadixToast.Close,
           {
             "aria-label": "Dismiss",
             className: "text-text-dim hover:text-text -mt-px text-[15px] leading-none",
@@ -1671,20 +2118,25 @@ var ToastCard = react.forwardRef(function ToastCard2({ toast, onDismiss }, ref)
   );
 });
 ToastCard.displayName = "ToastCard";
-var TooltipProvider = RadixTooltip__namespace.Provider;
-var TooltipRoot = RadixTooltip__namespace.Root;
-var TooltipTrigger = RadixTooltip__namespace.Trigger;
-var TooltipPortal = RadixTooltip__namespace.Portal;
-var TooltipArrow = RadixTooltip__namespace.Arrow;
-var TooltipContent = react.forwardRef(
+
+// src/components/Tooltip/Tooltip.tsx
+var RadixTooltip = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_react42 = require("react");
+var import_jsx_runtime35 = require("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 = (0, import_react42.forwardRef)(
   function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixTooltip__namespace.Content,
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      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
@@ -1696,124 +2148,148 @@ var TooltipContent = react.forwardRef(
 );
 TooltipContent.displayName = "TooltipContent";
 function Tooltip({ content, children, side = "top", delayDuration = 400 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipRoot, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side, children: content })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipProvider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(TooltipRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { side, children: content })
   ] }) });
 }
-var alertStyles = classVarianceAuthority.cva("flex items-start gap-3 rounded-base border bg-panel p-3 text-[13px]", {
+
+// src/patterns/Alert/Alert.tsx
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_react43 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var alertStyles = (0, import_class_variance_authority8.cva)("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 = react.forwardRef(function Alert2({ variant = "info", title, description, icon, action, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+var Alert = (0, import_react43.forwardRef)(function Alert2({
+  tone = "accent",
+  title,
+  description,
+  icon,
+  action,
+  live = "polite",
+  className,
+  children,
+  ...props
+}, ref) {
+  const t = tone ?? "accent";
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "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__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn("mt-[1px] text-[14px] leading-none", iconColorClass[variant]),
-            children: icon ?? defaultGlyph[variant]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-muted mt-[2px] text-[12px]", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: cn("mt-[1px] text-[14px] leading-none", iconColorClass[t]), children: icon ?? defaultGlyph[t] }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "font-medium", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-text-muted mt-[2px] text-[12px]", children: description }),
           children
         ] }),
-        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-1 shrink-0", children: action })
+        action && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ml-1 shrink-0", children: action })
       ]
     }
   );
 });
 Alert.displayName = "Alert";
-var bannerStyles = classVarianceAuthority.cva(
-  "flex items-center gap-[10px] border-b border-border px-[14px] py-2 text-[12px]",
+
+// src/patterns/Banner/Banner.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_react44 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var bannerStyles = (0, import_class_variance_authority9.cva)(
+  "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 = react.forwardRef(function Banner2({ variant = "info", sticky, icon, action, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+var Banner = (0, import_react44.forwardRef)(function Banner2({ tone = "accent", sticky, icon, action, live = "polite", className, children, ...props }, ref) {
+  const t = tone ?? "accent";
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "leading-none", children: icon ?? defaultGlyph2[variant] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
-        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: action })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "leading-none", children: icon ?? defaultGlyph2[t] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "min-w-0 flex-1", children }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "ml-auto", children: action })
       ]
     }
   );
 });
 Banner.displayName = "Banner";
-var Breadcrumbs = react.forwardRef(function Breadcrumbs2({ separator = "/", className, children, ...props }, ref) {
-  const crumbs = react.Children.toArray(children).filter(react.isValidElement);
+
+// src/patterns/Breadcrumbs/Breadcrumbs.tsx
+var import_react45 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Breadcrumbs = (0, import_react45.forwardRef)(function Breadcrumbs2({ separator = "/", className, children, ...props }, ref) {
+  const crumbs = import_react45.Children.toArray(children).filter(import_react45.isValidElement);
   const last = crumbs.length - 1;
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-[13px]", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "text-text-muted flex flex-wrap items-center gap-[6px]", children: crumbs.map((crumb, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-[13px]", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ol", { className: "text-text-muted flex flex-wrap items-center gap-[6px]", children: crumbs.map((crumb, i) => {
     const isCurrent = i === last;
-    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "inline-flex items-center gap-[6px]", children: [
-      isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(Crumb, { ...crumb.props, current: true }) : crumb,
-      !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-text-dim", children: separator })
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { className: "inline-flex items-center gap-[6px]", children: [
+      isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Crumb, { ...crumb.props, current: true }) : crumb,
+      !isCurrent && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "text-text-dim", children: separator })
     ] }, i);
   }) }) });
 });
 Breadcrumbs.displayName = "Breadcrumbs";
-var Crumb = react.forwardRef(function Crumb2({ current, className, href, children, ...props }, ref) {
+var Crumb = (0, import_react45.forwardRef)(function Crumb2({ current, className, href, children, ...props }, ref) {
   if (current) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": "page", className: cn("text-text", className), children });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-current": "page", className: cn("text-text", className), children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  if (href === void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("text-text-dim", className), children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "a",
     {
       ref,
-      href: href ?? "#",
+      href,
       className: cn("hover:text-text transition-colors duration-(--duration-micro)", className),
       ...props,
       children
@@ -1821,6 +2297,10 @@ var Crumb = react.forwardRef(function Crumb2({ current, className, href, childre
   );
 });
 Crumb.displayName = "Crumb";
+
+// src/patterns/Combobox/Combobox.tsx
+var import_react46 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function normalize(option) {
   if (typeof option === "string") {
     return { value: option, label: option, searchText: option.toLowerCase() };
@@ -1836,7 +2316,7 @@ function normalize(option) {
   };
 }
 var defaultFilter = (option, query) => option.searchText.includes(query.toLowerCase());
-var Combobox = react.forwardRef(function Combobox2({
+var Combobox = (0, import_react46.forwardRef)(function Combobox2({
   options,
   value: valueProp,
   defaultValue,
@@ -1853,16 +2333,16 @@ var Combobox = react.forwardRef(function Combobox2({
   id,
   "aria-label": ariaLabel
 }, ref) {
-  const reactId = react.useId();
+  const reactId = (0, import_react46.useId)();
   const listboxId = `${id ?? reactId}-listbox`;
   const inputId = id ?? `${reactId}-input`;
-  const normalized = react.useMemo(() => options.map(normalize), [options]);
+  const normalized = (0, import_react46.useMemo)(() => options.map(normalize), [options]);
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
     onChange: onValueChange
   });
-  const initialQuery = react.useMemo(() => {
+  const initialQuery = (0, import_react46.useMemo)(() => {
     if (defaultQuery !== void 0) return defaultQuery;
     if (defaultValue !== void 0) {
       const opt = normalized.find((o) => o.value === defaultValue);
@@ -1875,10 +2355,10 @@ var Combobox = react.forwardRef(function Combobox2({
     defaultValue: initialQuery,
     onChange: onQueryChange
   });
-  const [open, setOpen] = react.useState(false);
-  const wrapperRef = react.useRef(null);
+  const [open, setOpen] = (0, import_react46.useState)(false);
+  const wrapperRef = (0, import_react46.useRef)(null);
   useOutsideClick(wrapperRef, () => setOpen(false));
-  const filtered = react.useMemo(
+  const filtered = (0, import_react46.useMemo)(
     () => query ? normalized.filter((o) => filter(o, query)) : normalized,
     [normalized, query, filter]
   );
@@ -1890,7 +2370,7 @@ var Combobox = react.forwardRef(function Combobox2({
       if (item && !item.disabled) commit(item);
     }
   });
-  react.useEffect(() => {
+  (0, import_react46.useEffect)(() => {
     setCursor(0);
   }, [query, setCursor]);
   function commit(option) {
@@ -1913,8 +2393,8 @@ var Combobox = react.forwardRef(function Combobox2({
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: "relative", style: { width }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref: wrapperRef, className: "relative", style: { width }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "input",
       {
         ref,
@@ -1948,19 +2428,19 @@ var Combobox = react.forwardRef(function Combobox2({
         )
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
+    open && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "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__ */ jsxRuntime.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__ */ (0, import_jsx_runtime39.jsx)("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__ */ jsxRuntime.jsxs(
+          return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
             "li",
             {
               id: `${listboxId}-option-${i}`,
@@ -1978,8 +2458,8 @@ var Combobox = react.forwardRef(function Combobox2({
                 option.disabled && "pointer-events-none opacity-40"
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { children: option.label }),
-                option.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-dim text-[11px]", children: option.description })
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: option.label }),
+                option.description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-text-dim text-[11px]", children: option.description })
               ]
             },
             option.value
@@ -1987,14 +2467,19 @@ var Combobox = react.forwardRef(function Combobox2({
         })
       }
     ),
-    name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: value ?? "", readOnly: true })
+    name && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "hidden", name, value: value ?? "", readOnly: true })
   ] });
 });
 Combobox.displayName = "Combobox";
+
+// src/patterns/CommandPalette/CommandPalette.tsx
+var RadixDialog4 = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react47 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function flatItems(groups) {
   return groups.flatMap((g) => g.items);
 }
-var CommandPalette = react.forwardRef(
+var CommandPalette = (0, import_react47.forwardRef)(
   function CommandPalette2({
     open,
     onOpenChange,
@@ -2007,7 +2492,7 @@ var CommandPalette = react.forwardRef(
     emptyState,
     width = 540
   }, ref) {
-    const flat = react.useMemo(() => flatItems(groups), [groups]);
+    const flat = (0, import_react47.useMemo)(() => flatItems(groups), [groups]);
     const { cursor, setCursor, onKeyDown } = useKeyboardList({
       count: flat.length,
       defaultCursor: 0,
@@ -2016,37 +2501,41 @@ var CommandPalette = react.forwardRef(
         if (item) onSelect(item.id);
       }
     });
-    react.useEffect(() => {
+    const reactId = (0, import_react47.useId)();
+    const listboxId = `${reactId}-listbox`;
+    const optionId = (i) => `${listboxId}-option-${i}`;
+    const hasMatches = flat.length > 0;
+    (0, import_react47.useEffect)(() => {
       setCursor(0);
     }, [query, groups, setCursor]);
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog__namespace.Portal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        RadixDialog__namespace.Overlay,
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RadixDialog4.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(RadixDialog4.Portal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        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__ */ jsxRuntime.jsxs(
-        RadixDialog__namespace.Content,
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        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__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { className: "sr-only", children: "Command palette" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border flex items-center gap-[10px] border-b px-4 py-[14px]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-text-dim", children: "\u2315" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RadixDialog4.Title, { className: "sr-only", children: "Command palette" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "border-border flex items-center gap-[10px] border-b px-4 py-[14px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: "text-text-dim", children: "\u2315" }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "input",
                 {
                   autoFocus: true,
@@ -2055,22 +2544,27 @@ var CommandPalette = react.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__ */ jsxRuntime.jsx("span", { className: "border-border text-text-dim rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: "ESC" })
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "border-border text-text-dim rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: "ESC" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[220px] p-2", role: "listbox", "aria-label": "Results", children: flat.length === 0 ? emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-dim px-3 py-5 text-center text-[12px]", children: "No matches" }) : /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { id: listboxId, className: "min-h-[220px] p-2", role: "listbox", "aria-label": "Results", children: flat.length === 0 ? emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-text-dim px-3 py-5 text-center text-[12px]", children: "No matches" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               CommandGroups,
               {
                 groups,
                 cursor,
                 setCursor,
-                onSelect
+                onSelect,
+                optionId
               }
             ) }),
-            footer && /* @__PURE__ */ jsxRuntime.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__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-border text-text-dim flex gap-4 border-t px-[14px] py-[10px] font-mono text-[10px]", children: footer })
           ]
         }
       )
@@ -2078,12 +2572,12 @@ var CommandPalette = react.forwardRef(
   }
 );
 CommandPalette.displayName = "CommandPalette";
-function CommandGroups({ groups, cursor, setCursor, onSelect }) {
+function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
   let runningIndex = 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: groups.map((group, gIdx) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: groups.map((group, gIdx) => {
     if (group.items.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      group.label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-dim px-2 pt-2 pb-1 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+      group.label && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("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
@@ -2091,9 +2585,10 @@ function CommandGroups({ groups, cursor, setCursor, onSelect }) {
       group.items.map((item) => {
         const myIndex = runningIndex++;
         const isActive = cursor === myIndex;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
           "button",
           {
+            id: optionId(myIndex),
             type: "button",
             role: "option",
             "aria-selected": isActive,
@@ -2104,7 +2599,7 @@ function CommandGroups({ groups, cursor, setCursor, onSelect }) {
               isActive ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
             ),
             children: [
-              item.glyph != null && /* @__PURE__ */ jsxRuntime.jsx(
+              item.glyph != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "span",
                 {
                   "aria-hidden": true,
@@ -2115,11 +2610,11 @@ function CommandGroups({ groups, cursor, setCursor, onSelect }) {
                   children: item.glyph
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[13px]", children: item.label }),
-                item.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim block truncate text-[11px]", children: item.description })
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "block truncate text-[13px]", children: item.label }),
+                item.description && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-text-dim block truncate text-[11px]", children: item.description })
               ] }),
-              item.trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim font-mono text-[10px]", children: item.trailing })
+              item.trailing && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: item.trailing })
             ]
           },
           item.id
@@ -2139,11 +2634,16 @@ function filterCommandItems(query, groups) {
     })
   })).filter((g) => g.items.length > 0);
 }
+
+// src/patterns/DataTable/DataTable.tsx
+var import_react48 = require("react");
+var import_jsx_runtime41 = require("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,
@@ -2168,16 +2668,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 = react.useMemo(() => {
+  const sortableMap = (0, import_react48.useMemo)(() => {
     const m = /* @__PURE__ */ new Map();
     for (const c of columns) if (c.accessor) m.set(c.key, c);
     return m;
   }, [columns]);
-  const sortedData = react.useMemo(() => {
+  const sortedData = (0, import_react48.useMemo)(() => {
     if (!sort) return [...data];
     const col = sortableMap.get(sort.key);
     if (!col || !col.accessor) return [...data];
@@ -2189,11 +2689,12 @@ function DataTable(props) {
       return String(av).localeCompare(String(bv)) * factor;
     });
   }, [data, sort, sortableMap]);
-  const allIds = react.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 = react.useRef(null);
-  react.useEffect(() => {
+  const allIds = (0, import_react48.useMemo)(() => 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 = (0, import_react48.useRef)(null);
+  (0, import_react48.useEffect)(() => {
     if (headerCheckRef.current) headerCheckRef.current.indeterminate = someSelected;
   }, [someSelected]);
   const toggleSort = (key) => {
@@ -2224,10 +2725,10 @@ function DataTable(props) {
       return next;
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
-    caption && /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }),
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn("bg-panel-2", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-      selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
+    caption && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("caption", { className: "sr-only", children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("thead", { className: cn("bg-panel-2", stickyHeader && "z-raised sticky top-0"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { children: [
+      selectable && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "input",
         {
           ref: headerCheckRef,
@@ -2243,12 +2744,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__ */ jsxRuntime.jsxs(
+        const indicator = sortable && isSorted && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "aria-hidden": true, className: "ml-1", children: sort?.direction === "asc" ? "\u2191" : "\u2193" });
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "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",
@@ -2256,17 +2757,25 @@ function DataTable(props) {
               sortable && "cursor-pointer",
               isSorted ? "text-accent" : "text-text-dim"
             ),
-            children: [
-              col.header,
-              sortable && isSorted && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "ml-1", children: sort?.direction === "asc" ? "\u2191" : "\u2193" })
-            ]
+            children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+              "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__ */ jsxRuntime.jsxs("tbody", { children: [
-      sortedData.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tbody", { children: [
+      sortedData.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "td",
         {
           colSpan: columns.length + (selectable ? 1 : 0),
@@ -2276,8 +2785,8 @@ function DataTable(props) {
       ) }),
       sortedData.map((row) => {
         const id = rowKey(row);
-        const isSelected = selected.has(id);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
+        const isSelected = selectedSet.has(id);
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           "tr",
           {
             "data-state": isSelected ? "selected" : void 0,
@@ -2286,7 +2795,7 @@ function DataTable(props) {
               isSelected ? "bg-accent-dim/50" : "hover:bg-panel-2"
             ),
             children: [
-              selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-[10px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+              selectable && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "px-3 py-[10px]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 "input",
                 {
                   type: "checkbox",
@@ -2296,7 +2805,7 @@ function DataTable(props) {
                   className: "cursor-pointer accent-[var(--color-accent)]"
                 }
               ) }),
-              columns.map((col) => /* @__PURE__ */ jsxRuntime.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__ */ (0, import_jsx_runtime41.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))
             ]
           },
           id
@@ -2305,29 +2814,24 @@ function DataTable(props) {
     ] })
   ] });
 }
-var MONTHS = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "April",
-  "May",
-  "June",
-  "July",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
+
+// src/patterns/DatePicker/Calendar.tsx
+var import_react49 = require("react");
+var import_jsx_runtime42 = require("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 = react.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 = (0, import_react49.forwardRef)(function Calendar2({
+  value,
+  defaultValue,
+  onValueChange,
   month: monthProp,
   year: yearProp,
   defaultMonth,
@@ -2337,39 +2841,125 @@ var Calendar = react.forwardRef(function Calendar2({
   className,
   ...props
 }, ref) {
-  const today = /* @__PURE__ */ new Date();
+  const [today] = (0, import_react49.useState)(() => /* @__PURE__ */ new Date());
+  const [hydrated, setHydrated] = (0, import_react49.useState)(false);
+  (0, import_react49.useEffect)(() => 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] = react.useState(initialMonth);
-  const [internalYear, setInternalYear] = react.useState(initialYear);
+  const initialMonth = defaultMonth ?? defaultValue?.getMonth() ?? today.getMonth();
+  const initialYear = defaultYear ?? defaultValue?.getFullYear() ?? today.getFullYear();
+  const [internalMonth, setInternalMonth] = (0, import_react49.useState)(initialMonth);
+  const [internalYear, setInternalYear] = (0, import_react49.useState)(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 = (0, import_react49.useCallback)(
+    (m, y) => {
+      if (!isControlled) {
+        setInternalMonth(m);
+        setInternalYear(y);
+      }
+      onVisibleMonthChange?.({ month: m, year: y });
+    },
+    [isControlled, onVisibleMonthChange]
+  );
+  const goPrev = (0, import_react49.useCallback)(() => {
     const m = month === 0 ? 11 : month - 1;
     const y = month === 0 ? year - 1 : year;
     setVisible(m, y);
-  };
-  const goNext = () => {
+  }, [month, year, setVisible]);
+  const goNext = (0, import_react49.useCallback)(() => {
     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__ */ jsxRuntime.jsxs(
+  const [focusedDate, setFocusedDate] = (0, import_react49.useState)(() => {
+    if (selectedDate) return selectedDate;
+    return new Date(initialYear, initialMonth, 1);
+  });
+  (0, import_react49.useEffect)(() => {
+    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 = (0, import_react49.useRef)(/* @__PURE__ */ new Map());
+  const shouldFocusRef = (0, import_react49.useRef)(false);
+  (0, import_react49.useEffect)(() => {
+    if (!shouldFocusRef.current) return;
+    shouldFocusRef.current = false;
+    const node = dayRefs.current.get(effectiveFocusDay);
+    node?.focus();
+  }, [effectiveFocusDay, month, year]);
+  const moveFocus = (0, import_react49.useCallback)(
+    (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 = (0, import_react49.useCallback)(
+    (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__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       ref,
@@ -2381,14 +2971,14 @@ var Calendar = react.forwardRef(function Calendar2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[13px] font-medium", "aria-live": "polite", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-[13px] font-medium", "aria-live": "polite", children: [
             MONTHS[month],
             " ",
             year
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               IconButton,
               {
                 size: "sm",
@@ -2398,48 +2988,89 @@ var Calendar = react.forwardRef(function Calendar2({
                 onClick: goPrev
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(IconButton, { size: "sm", variant: "ghost", icon: "\u203A", "aria-label": "Next month", onClick: goNext })
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconButton, { size: "sm", variant: "ghost", icon: "\u203A", "aria-label": "Next month", onClick: goNext })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-[2px]", children: [
-          DAYS.map((d, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ (0, import_jsx_runtime42.jsxs)("div", { role: "grid", "aria-label": `${MONTHS[month]} ${year}`, className: "flex flex-col gap-[2px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: DAYS.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "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__ */ (0, import_jsx_runtime42.jsx)("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__ */ (0, import_jsx_runtime42.jsx)("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                    "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__ */ (0, import_jsx_runtime42.jsx)("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: cells }, `row-${r}`)
+              );
+            }
+            return rows;
+          })()
         ] })
       ]
     }
   );
 });
 Calendar.displayName = "Calendar";
+
+// src/patterns/DatePicker/DatePicker.tsx
+var RadixPopover2 = __toESM(require("@radix-ui/react-popover"), 1);
+var import_react50 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var defaultFormat = (d) => d.toLocaleDateString();
-var DatePicker = react.forwardRef(function DatePicker2({
+var DatePicker = (0, import_react50.forwardRef)(function DatePicker2({
   value: valueProp,
   defaultValue,
   onValueChange,
@@ -2453,14 +3084,14 @@ var DatePicker = react.forwardRef(function DatePicker2({
   id,
   name
 }, ref) {
-  const [open, setOpen] = react.useState(false);
+  const [open, setOpen] = (0, import_react50.useState)(false);
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RadixPopover__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(RadixPopover2.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixPopover2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "button",
       {
         ref,
@@ -2477,24 +3108,24 @@ var DatePicker = react.forwardRef(function DatePicker2({
         ),
         style: { width },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-text-dim", children: "\u25A2" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-1 truncate", !value && "text-text-dim"), children: value ? format(value) : emptyLabel ?? placeholder })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { "aria-hidden": true, className: "text-text-dim", children: "\u25A2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: cn("flex-1 truncate", !value && "text-text-dim"), children: value ? format(value) : emptyLabel ?? placeholder })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixPopover__namespace.Content,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixPopover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      RadixPopover2.Content,
       {
         align: "start",
         sideOffset: 6,
-        className: "z-40 outline-none data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
+        className: "z-popover outline-none data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Calendar,
           {
-            selected: value,
+            value,
             defaultMonth: value?.getMonth(),
             defaultYear: value?.getFullYear(),
-            onSelect: (date) => {
+            onValueChange: (date) => {
               setValue(date);
               setOpen(false);
             },
@@ -2503,13 +3134,17 @@ var DatePicker = react.forwardRef(function DatePicker2({
         )
       }
     ) }),
-    name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: value ? value.toISOString() : "", readOnly: true })
+    name && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("input", { type: "hidden", name, value: value ? value.toISOString() : "", readOnly: true })
   ] });
 });
 DatePicker.displayName = "DatePicker";
-var Dots = react.forwardRef(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
+
+// src/patterns/Dots/Dots.tsx
+var import_react51 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Dots = (0, import_react51.forwardRef)(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
   const interactive = typeof onChange === "function";
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "nav",
     {
       ref,
@@ -2523,7 +3158,7 @@ var Dots = react.forwardRef(function Dots2({ total, current, onChange, className
           isActive ? "w-[18px] bg-accent" : "w-[6px] bg-panel-2"
         );
         if (interactive) {
-          return /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "button",
             {
               type: "button",
@@ -2540,24 +3175,31 @@ var Dots = react.forwardRef(function Dots2({ total, current, onChange, className
             i
           );
         }
-        return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: sharedClass }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": true, className: sharedClass }, i);
       })
     }
   );
 });
 Dots.displayName = "Dots";
-var plateStyles = classVarianceAuthority.cva("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
+
+// src/patterns/EmptyState/EmptyState.tsx
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_react52 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var plateStyles = (0, import_class_variance_authority10.cva)("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
   variants: {
     tone: {
+      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 = react.forwardRef(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+var EmptyState = (0, import_react52.forwardRef)(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       ref,
@@ -2567,10 +3209,10 @@ var EmptyState = react.forwardRef(function EmptyState2({ icon, title, descriptio
       ),
       ...props,
       children: [
-        icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: plateStyles({ tone }), children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14px] font-medium", children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
-        chips && chips.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        icon != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "aria-hidden": true, className: plateStyles({ tone: tone ?? "neutral" }), children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-[14px] font-medium", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
+        chips && chips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "button",
           {
             type: "button",
@@ -2590,16 +3232,20 @@ var EmptyState = react.forwardRef(function EmptyState2({ icon, title, descriptio
   );
 });
 EmptyState.displayName = "EmptyState";
+
+// src/patterns/FileChip/FileChip.tsx
+var import_react53 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function deriveExt(name) {
   const dot = name.lastIndexOf(".");
   if (dot < 0) return "FILE";
   return name.slice(dot + 1).slice(0, 4).toUpperCase();
 }
-var FileChip = react.forwardRef(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
+var FileChip = (0, import_react53.forwardRef)(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
   const ext = deriveExt(name);
   const showProgress = typeof progress === "number";
   const isComplete = showProgress && progress >= 100;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
       ref,
@@ -2609,7 +3255,7 @@ var FileChip = react.forwardRef(function FileChip2({ name, size, progress, icon,
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -2617,17 +3263,17 @@ var FileChip = react.forwardRef(function FileChip2({ name, size, progress, icon,
             children: icon ?? ext
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[12px] font-medium", children: name }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "truncate text-[12px] font-medium", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
             size,
-            showProgress && !isComplete && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { children: [
               " \xB7 ",
               Math.round(progress),
               "%"
             ] })
           ] }),
-          showProgress && !isComplete && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+          showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "div",
             {
               className: cn(
@@ -2638,7 +3284,7 @@ var FileChip = react.forwardRef(function FileChip2({ name, size, progress, icon,
             }
           ) })
         ] }),
-        onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "button",
           {
             type: "button",
@@ -2656,9 +3302,14 @@ var FileChip = react.forwardRef(function FileChip2({ name, size, progress, icon,
   );
 });
 FileChip.displayName = "FileChip";
-var Menubar = react.forwardRef(function Menubar2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixMenubar__namespace.Root,
+
+// src/patterns/Menubar/Menubar.tsx
+var RadixMenubar = __toESM(require("@radix-ui/react-menubar"), 1);
+var import_react54 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var Menubar = (0, import_react54.forwardRef)(function Menubar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    RadixMenubar.Root,
     {
       ref,
       className: cn(
@@ -2670,11 +3321,11 @@ var Menubar = react.forwardRef(function Menubar2({ className, ...props }, ref) {
   );
 });
 Menubar.displayName = "Menubar";
-var MenubarMenu = RadixMenubar__namespace.Menu;
-var MenubarTrigger = react.forwardRef(
+var MenubarMenu = RadixMenubar.Menu;
+var MenubarTrigger = (0, import_react54.forwardRef)(
   function MenubarTrigger2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixMenubar__namespace.Trigger,
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      RadixMenubar.Trigger,
       {
         ref,
         className: cn(
@@ -2690,16 +3341,16 @@ var MenubarTrigger = react.forwardRef(
   }
 );
 MenubarTrigger.displayName = "MenubarTrigger";
-var MenubarContent = react.forwardRef(
+var MenubarContent = (0, import_react54.forwardRef)(
   function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixMenubar__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixMenubar__namespace.Content,
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RadixMenubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      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
         ),
@@ -2714,25 +3365,25 @@ var itemBase3 = cn(
   "data-[highlighted]:bg-panel-2",
   "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
 );
-var MenubarItem = react.forwardRef(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixMenubar__namespace.Item,
+var MenubarItem = (0, import_react54.forwardRef)(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    RadixMenubar.Item,
     {
       ref,
       className: cn(itemBase3, destructive ? "text-err" : "text-text", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
-        trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex-1", children }),
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
       ]
     }
   );
 });
 MenubarItem.displayName = "MenubarItem";
-var MenubarSeparator = react.forwardRef(
+var MenubarSeparator = (0, import_react54.forwardRef)(
   function MenubarSeparator2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixMenubar__namespace.Separator,
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      RadixMenubar.Separator,
       {
         ref,
         className: cn("bg-border my-1 h-px", className),
@@ -2742,6 +3393,10 @@ var MenubarSeparator = react.forwardRef(
   }
 );
 MenubarSeparator.displayName = "MenubarSeparator";
+
+// src/patterns/Pagination/Pagination.tsx
+var import_react55 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function buildRange(page, total, siblings) {
   if (total <= 0) return [];
   const items = [];
@@ -2754,9 +3409,9 @@ function buildRange(page, total, siblings) {
   if (total > 1) items.push(total);
   return items;
 }
-var Pagination = react.forwardRef(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
+var Pagination = (0, import_react55.forwardRef)(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
   const items = buildRange(page, total, siblings);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "nav",
     {
       ref,
@@ -2764,7 +3419,7 @@ var Pagination = react.forwardRef(function Pagination2({ page, total, onPageChan
       className: cn("inline-flex items-center gap-1", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           IconButton,
           {
             size: "sm",
@@ -2777,7 +3432,7 @@ var Pagination = react.forwardRef(function Pagination2({ page, total, onPageChan
         ),
         items.map((item, i) => {
           if (item === "start-ellipsis" || item === "end-ellipsis") {
-            return /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               "span",
               {
                 "aria-hidden": true,
@@ -2788,7 +3443,7 @@ var Pagination = react.forwardRef(function Pagination2({ page, total, onPageChan
             );
           }
           const isActive = item === page;
-          return /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "button",
             {
               type: "button",
@@ -2806,7 +3461,7 @@ var Pagination = react.forwardRef(function Pagination2({ page, total, onPageChan
             item
           );
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           IconButton,
           {
             size: "sm",
@@ -2822,7 +3477,12 @@ var Pagination = react.forwardRef(function Pagination2({ page, total, onPageChan
   );
 });
 Pagination.displayName = "Pagination";
-var trackStyles = classVarianceAuthority.cva("w-full rounded-full bg-panel-2 overflow-hidden", {
+
+// src/patterns/Progress/Progress.tsx
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_react56 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var trackStyles = (0, import_class_variance_authority11.cva)("w-full rounded-full bg-panel-2 overflow-hidden", {
   variants: {
     size: {
       sm: "h-[3px]",
@@ -2832,7 +3492,7 @@ var trackStyles = classVarianceAuthority.cva("w-full rounded-full bg-panel-2 ove
   },
   defaultVariants: { size: "md" }
 });
-var fillStyles = classVarianceAuthority.cva("h-full rounded-full transition-[width] duration-(--duration-step)", {
+var fillStyles = (0, import_class_variance_authority11.cva)("h-full rounded-full transition-[width] duration-(--duration-step)", {
   variants: {
     tone: {
       accent: "bg-accent",
@@ -2843,7 +3503,7 @@ var fillStyles = classVarianceAuthority.cva("h-full rounded-full transition-[wid
   },
   defaultVariants: { tone: "accent" }
 });
-var Progress = react.forwardRef(function Progress2({
+var Progress = (0, import_react56.forwardRef)(function Progress2({
   value = 0,
   max = 100,
   indeterminate = false,
@@ -2857,15 +3517,15 @@ var Progress = react.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__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
-    label != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[12px]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted", children: label }),
-      showValue && !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex text-[12px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-text-muted", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
         display,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "div",
       {
         role: "progressbar",
@@ -2874,7 +3534,7 @@ var Progress = react.forwardRef(function Progress2({
         "aria-valuenow": indeterminate ? void 0 : display,
         "aria-label": typeof label === "string" ? label : void 0,
         className: trackStyles({ size }),
-        children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
+        children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -2884,19 +3544,23 @@ var Progress = react.forwardRef(function Progress2({
               "animate-[ship-indeterminate_1.4s_linear_infinite]"
             )
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
       }
     )
   ] });
 });
 Progress.displayName = "Progress";
+
+// src/patterns/RadialProgress/RadialProgress.tsx
+var import_react57 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var toneStrokeClass = {
   accent: "stroke-accent",
   ok: "stroke-ok",
   warn: "stroke-warn",
   err: "stroke-err"
 };
-var RadialProgress = react.forwardRef(
+var RadialProgress = (0, import_react57.forwardRef)(
   function RadialProgress2({
     value,
     max = 100,
@@ -2914,7 +3578,7 @@ var RadialProgress = react.forwardRef(
     const c = 2 * Math.PI * r;
     const dash = pct / 100 * c;
     const resolvedTone = tone ?? (clamped >= max ? "ok" : "accent");
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       "div",
       {
         ref,
@@ -2927,8 +3591,8 @@ var RadialProgress = react.forwardRef(
         style: { width: size, height: size },
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               "circle",
               {
                 cx: size / 2,
@@ -2939,7 +3603,7 @@ var RadialProgress = react.forwardRef(
                 className: "stroke-panel-2"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               "circle",
               {
                 cx: size / 2,
@@ -2957,15 +3621,19 @@ var RadialProgress = react.forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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 = react.forwardRef(function Sidebar2({ width = 240, className, style, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+
+// src/patterns/Sidebar/Sidebar.tsx
+var import_react58 = require("react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var Sidebar = (0, import_react58.forwardRef)(function Sidebar2({ width = 240, className, style, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "aside",
     {
       ref,
@@ -2979,76 +3647,75 @@ var Sidebar = react.forwardRef(function Sidebar2({ width = 240, className, style
   );
 });
 Sidebar.displayName = "Sidebar";
-var NavItem = react.forwardRef(function NavItem2({ icon, label, active, badge, href, disabled, className, onClick, ...props }, ref) {
-  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label }),
-    badge != null && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      "a",
+var NavItem = (0, import_react58.forwardRef)(
+  function NavItem2({ icon, label, active, badge, href, disabled, className, ...props }, ref) {
+    const inner = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "flex-1 truncate", children: label }),
+      badge != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "span",
+        {
+          className: cn(
+            "rounded-xs px-[6px] py-px font-mono text-[10px]",
+            active ? "bg-accent text-on-accent" : "bg-panel-2 text-text-muted"
+          ),
+          children: badge
+        }
+      )
+    ] });
+    const baseClass = cn(
+      "flex cursor-pointer items-center gap-[10px] rounded-xs px-2 py-[6px] text-[13px] outline-none",
+      "transition-colors duration-(--duration-micro)",
+      "focus-visible:ring-[3px] focus-visible:ring-accent-dim",
+      active ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2",
+      disabled && "opacity-50 pointer-events-none",
+      className
+    );
+    if (href) {
+      const anchorProps = props;
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "a",
+        {
+          ref,
+          href,
+          "aria-current": active ? "page" : void 0,
+          "aria-disabled": disabled || void 0,
+          className: baseClass,
+          ...anchorProps,
+          children: inner
+        }
+      );
+    }
+    const buttonProps = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "button",
       {
         ref,
-        href,
+        type: "button",
         "aria-current": active ? "page" : void 0,
-        "aria-disabled": disabled || void 0,
-        className: baseClass,
-        onClick,
-        ...props,
+        disabled,
+        className: cn(baseClass, "w-full text-left"),
+        ...buttonProps,
         children: inner
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function NavSection2({ label, action, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-text-dim flex items-center px-2 pt-2 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: label }),
+var NavSection = (0, import_react58.forwardRef)(function NavSection2({ label, action, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "text-text-dim flex items-center px-2 pt-2 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "flex-1", children: label }),
       action
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children })
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex flex-col gap-[2px]", children })
   ] });
 });
 NavSection.displayName = "NavSection";
+
+// src/patterns/Sparkline/Sparkline.tsx
+var import_react59 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function buildPath(values, w, h) {
   if (values.length === 0) return { line: "", area: "" };
   const pad = 2;
@@ -3067,7 +3734,7 @@ function buildPath(values, w, h) {
   )} L${pad.toFixed(2)},${(h - pad).toFixed(2)} Z`;
   return { line, area };
 }
-var Sparkline = react.forwardRef(function Sparkline2({
+var Sparkline = (0, import_react59.forwardRef)(function Sparkline2({
   values,
   width = 160,
   height = 32,
@@ -3078,8 +3745,8 @@ var Sparkline = react.forwardRef(function Sparkline2({
   "aria-label": ariaLabel = "Trend",
   ...props
 }, ref) {
-  const { line, area } = react.useMemo(() => buildPath(values, width, height), [values, width, height]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const { line, area } = (0, import_react59.useMemo)(() => buildPath(values, width, height), [values, width, height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "svg",
     {
       ref,
@@ -3091,8 +3758,8 @@ var Sparkline = react.forwardRef(function Sparkline2({
       className: cn("inline-block", className),
       ...props,
       children: [
-        fill && /* @__PURE__ */ jsxRuntime.jsx("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        fill && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "path",
           {
             d: line,
@@ -3108,14 +3775,18 @@ var Sparkline = react.forwardRef(function Sparkline2({
   );
 });
 Sparkline.displayName = "Sparkline";
+
+// src/patterns/Spinner/Spinner.tsx
+var import_react60 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var 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 = react.forwardRef(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
+var Spinner2 = (0, import_react60.forwardRef)(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
   const s = sizes[size];
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "span",
     {
       ref,
@@ -3123,7 +3794,7 @@ var Spinner2 = react.forwardRef(function Spinner3({ size = "md", label = "Loadin
       "aria-label": label,
       className: cn("inline-block", className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "span",
         {
           "aria-hidden": true,
@@ -3138,6 +3809,10 @@ var Spinner2 = react.forwardRef(function Spinner3({ size = "md", label = "Loadin
   );
 });
 Spinner2.displayName = "Spinner";
+
+// src/patterns/Stepper/Stepper.tsx
+var import_react61 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var dotBase = "h-6 w-6 rounded-full grid place-items-center text-[11px] font-mono font-semibold border";
 var dotStateClass = {
   done: "bg-accent text-on-accent border-accent",
@@ -3154,46 +3829,52 @@ function stateFor(index, current) {
   if (index === current) return "current";
   return "upcoming";
 }
-var Stepper = react.forwardRef(function Stepper2({ steps, current, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+var Stepper = (0, import_react61.forwardRef)(function Stepper2({ steps, current, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    "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__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react61.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+            "li",
             {
-              role: "listitem",
               "aria-current": state === "current" ? "step" : void 0,
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[12px]", labelStateClass[state]), children: label })
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: cn("text-[12px]", labelStateClass[state]), children: label })
               ]
             }
           ),
-          i < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             "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 = react.createContext("underline");
-var tabsListStyles = classVarianceAuthority.cva("", {
+
+// src/patterns/Tabs/Tabs.tsx
+var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_react62 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var TabsVariantContext = (0, import_react62.createContext)("underline");
+var tabsListStyles = (0, import_class_variance_authority12.cva)("", {
   variants: {
     variant: {
       underline: "flex gap-6 border-b border-border",
@@ -3201,7 +3882,7 @@ var tabsListStyles = classVarianceAuthority.cva("", {
     }
   }
 });
-var tabsTriggerStyles = classVarianceAuthority.cva(
+var tabsTriggerStyles = (0, import_class_variance_authority12.cva)(
   "cursor-pointer outline-none transition-colors duration-(--duration-micro) focus-visible:ring-[3px] focus-visible:ring-accent-dim",
   {
     variants: {
@@ -3222,9 +3903,9 @@ var tabsTriggerStyles = classVarianceAuthority.cva(
     }
   }
 );
-var Tabs = react.forwardRef(function Tabs2({ variant = "underline", className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(
-    RadixTabs__namespace.Root,
+var Tabs = (0, import_react62.forwardRef)(function Tabs2({ variant = "underline", className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    RadixTabs.Root,
     {
       ref,
       className: cn("flex flex-col", variant === "underline" && "gap-3", className),
@@ -3233,15 +3914,15 @@ var Tabs = react.forwardRef(function Tabs2({ variant = "underline", className, .
   ) });
 });
 Tabs.displayName = "Tabs";
-var TabsList = react.forwardRef(function TabsList2({ className, ...props }, ref) {
-  const variant = react.useContext(TabsVariantContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
+var TabsList = (0, import_react62.forwardRef)(function TabsList2({ className, ...props }, ref) {
+  const variant = (0, import_react62.useContext)(TabsVariantContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
 });
 TabsList.displayName = "TabsList";
-var Tab = react.forwardRef(function Tab2({ className, ...props }, ref) {
-  const variant = react.useContext(TabsVariantContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixTabs__namespace.Trigger,
+var Tab = (0, import_react62.forwardRef)(function Tab2({ className, ...props }, ref) {
+  const variant = (0, import_react62.useContext)(TabsVariantContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    RadixTabs.Trigger,
     {
       ref,
       className: cn(tabsTriggerStyles({ variant }), className),
@@ -3250,10 +3931,10 @@ var Tab = react.forwardRef(function Tab2({ className, ...props }, ref) {
   );
 });
 Tab.displayName = "Tab";
-var TabsContent = react.forwardRef(
+var TabsContent = (0, import_react62.forwardRef)(
   function TabsContent2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixTabs__namespace.Content,
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      RadixTabs.Content,
       {
         ref,
         className: cn(
@@ -3266,6 +3947,10 @@ var TabsContent = react.forwardRef(
   }
 );
 TabsContent.displayName = "TabsContent";
+
+// src/patterns/Timeline/Timeline.tsx
+var import_react63 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var ringClass = {
   accent: "border-accent",
   ok: "border-ok",
@@ -3273,8 +3958,8 @@ var ringClass = {
   err: "border-err",
   muted: "border-text-dim"
 };
-var Timeline = react.forwardRef(function Timeline2({ events, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+var Timeline = (0, import_react63.forwardRef)(function Timeline2({ events, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "ol",
     {
       ref,
@@ -3284,14 +3969,14 @@ var Timeline = react.forwardRef(function Timeline2({ events, className, children
         className
       ),
       ...props,
-      children: events ? events.map((e, i) => /* @__PURE__ */ jsxRuntime.jsx(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
+      children: events ? events.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
     }
   );
 });
 Timeline.displayName = "Timeline";
-var TimelineItem = react.forwardRef(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+var TimelineItem = (0, import_react63.forwardRef)(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "span",
       {
         "aria-hidden": true,
@@ -3301,14 +3986,18 @@ var TimelineItem = react.forwardRef(function TimelineItem2({ tone = "accent", de
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[13px] font-medium", children }),
-    description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-muted text-[12px]", children: description }),
-    time && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-[13px] font-medium", children }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-text-muted text-[12px]", children: description }),
+    time && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
   ] });
 });
 TimelineItem.displayName = "TimelineItem";
-var Topbar = react.forwardRef(function Topbar2({ title, leading, actions, className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+
+// src/patterns/Topbar/Topbar.tsx
+var import_react64 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var Topbar = (0, import_react64.forwardRef)(function Topbar2({ title, leading, actions, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "header",
     {
       ref,
@@ -3319,40 +4008,94 @@ var Topbar = react.forwardRef(function Topbar2({ title, leading, actions, classN
       ...props,
       children: [
         leading,
-        title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[13px] font-medium", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center" }),
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: actions }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "text-[13px] font-medium", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-1 items-center" }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex items-center gap-3", children: actions }),
         children
       ]
     }
   );
 });
 Topbar.displayName = "Topbar";
-var Tree = react.forwardRef(function Tree2({
+
+// src/patterns/Tree/Tree.tsx
+var import_react65 = require("react");
+var import_jsx_runtime58 = require("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 = (0, import_react65.forwardRef)(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 = react.useCallback(
+  const expandedSet = expanded ?? EMPTY_SET2;
+  const flatVisible = (0, import_react65.useMemo)(() => {
+    const out = [];
+    flattenVisible(items, expandedSet, 1, null, out);
+    return out;
+  }, [items, expandedSet]);
+  const [activeId, setActiveId] = (0, import_react65.useState)(null);
+  (0, import_react65.useEffect)(() => {
+    if (activeId && !flatVisible.some((f) => f.id === activeId)) {
+      setActiveId(null);
+    }
+  }, [activeId, flatVisible]);
+  const tabStopId = (0, import_react65.useMemo)(() => {
+    if (activeId && flatVisible.some((f) => f.id === activeId)) return activeId;
+    if (value && flatVisible.some((f) => f.id === value)) return value;
+    return flatVisible[0]?.id ?? null;
+  }, [activeId, flatVisible, value]);
+  const listRef = (0, import_react65.useRef)(null);
+  const setRefs = (0, import_react65.useCallback)(
+    (node) => {
+      listRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const focusItem = (0, import_react65.useCallback)((id) => {
+    const root = listRef.current;
+    if (!root) return;
+    const el = root.querySelector(`[data-treeitem-id="${CSS.escape(id)}"]`);
+    el?.focus();
+  }, []);
+  const moveActive = (0, import_react65.useCallback)(
+    (id) => {
+      setActiveId(id);
+      queueMicrotask(() => focusItem(id));
+    },
+    [focusItem]
+  );
+  const toggle = (0, import_react65.useCallback)(
     (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;
@@ -3360,22 +4103,138 @@ var Tree = react.forwardRef(function Tree2({
     },
     [setExpanded]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const expand = (0, import_react65.useCallback)(
+    (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 = (0, import_react65.useCallback)(
+    (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 = (0, import_react65.useCallback)(
+    (id) => {
+      setValue(id);
+    },
+    [setValue]
+  );
+  const handleKeyDown = (0, import_react65.useCallback)(
+    (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__ */ (0, import_jsx_runtime58.jsx)(
     "ul",
     {
-      ref,
+      ref: setRefs,
       role: "tree",
       className: cn("flex flex-col gap-px text-[12px]", className),
+      onKeyDown: handleKeyDown,
       ...props,
-      children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         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
       ))
@@ -3383,36 +4242,37 @@ var Tree = react.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__ */ jsxRuntime.jsxs("li", { role: "none", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+  const isTabStop = tabStopId === item.id;
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("li", { role: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
       "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",
@@ -3420,162 +4280,168 @@ function TreeItemRow({ item, level, expanded, selected, onToggle, onSelect }) {
           isSelected ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "flex-1 truncate", children: item.label }),
           item.trailing
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", className: "flex flex-col gap-px", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       TreeItemRow,
       {
         item: child,
         level: level + 1,
         expanded,
         selected,
-        onToggle,
-        onSelect
+        tabStopId,
+        onFocusItem,
+        onActivate,
+        onToggle
       },
       child.id
     )) })
   ] });
 }
-
-exports.Alert = Alert;
-exports.AlertDialog = AlertDialog;
-exports.AlertDialogAction = AlertDialogAction;
-exports.AlertDialogCancel = AlertDialogCancel;
-exports.AlertDialogRoot = AlertDialogRoot;
-exports.AlertDialogTrigger = AlertDialogTrigger;
-exports.Avatar = Avatar;
-exports.AvatarGroup = AvatarGroup;
-exports.Badge = Badge;
-exports.Banner = Banner;
-exports.Breadcrumbs = Breadcrumbs;
-exports.Button = Button;
-exports.ButtonGroup = ButtonGroup;
-exports.Calendar = Calendar;
-exports.Card = Card;
-exports.Checkbox = Checkbox;
-exports.Chip = Chip;
-exports.Combobox = Combobox;
-exports.CommandPalette = CommandPalette;
-exports.ContextMenu = ContextMenu;
-exports.ContextMenuContent = ContextMenuContent;
-exports.ContextMenuItem = ContextMenuItem;
-exports.ContextMenuPortal = ContextMenuPortal;
-exports.ContextMenuRoot = ContextMenuRoot;
-exports.ContextMenuSeparator = ContextMenuSeparator;
-exports.ContextMenuTrigger = ContextMenuTrigger;
-exports.Crumb = Crumb;
-exports.DataTable = DataTable;
-exports.DatePicker = DatePicker;
-exports.Dialog = Dialog;
-exports.DialogClose = DialogClose;
-exports.DialogContent = DialogContent;
-exports.DialogOverlay = DialogOverlay;
-exports.DialogPortal = DialogPortal;
-exports.DialogRoot = DialogRoot;
-exports.DialogTrigger = DialogTrigger;
-exports.Dots = Dots;
-exports.Drawer = Drawer;
-exports.DropdownMenu = DropdownMenu;
-exports.DropdownMenuContent = DropdownMenuContent;
-exports.DropdownMenuGroup = DropdownMenuGroup;
-exports.DropdownMenuLabel = DropdownMenuLabel;
-exports.DropdownMenuPortal = DropdownMenuPortal;
-exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
-exports.DropdownMenuRoot = DropdownMenuRoot;
-exports.DropdownMenuTrigger = DropdownMenuTrigger;
-exports.EmptyState = EmptyState;
-exports.FAB = FAB;
-exports.Field = Field;
-exports.FileChip = FileChip;
-exports.HoverCard = HoverCard;
-exports.HoverCardContent = HoverCardContent;
-exports.HoverCardPortal = HoverCardPortal;
-exports.HoverCardRoot = HoverCardRoot;
-exports.HoverCardTrigger = HoverCardTrigger;
-exports.IconButton = IconButton;
-exports.Input = Input;
-exports.Kbd = Kbd;
-exports.MenuCheckboxItem = MenuCheckboxItem;
-exports.MenuItem = MenuItem;
-exports.MenuSeparator = MenuSeparator;
-exports.Menubar = Menubar;
-exports.MenubarContent = MenubarContent;
-exports.MenubarItem = MenubarItem;
-exports.MenubarMenu = MenubarMenu;
-exports.MenubarSeparator = MenubarSeparator;
-exports.MenubarTrigger = MenubarTrigger;
-exports.NavItem = NavItem;
-exports.NavSection = NavSection;
-exports.OTP = OTP;
-exports.Pagination = Pagination;
-exports.Popover = Popover;
-exports.PopoverAnchor = PopoverAnchor;
-exports.PopoverArrow = PopoverArrow;
-exports.PopoverClose = PopoverClose;
-exports.PopoverContent = PopoverContent;
-exports.PopoverPortal = PopoverPortal;
-exports.PopoverRoot = PopoverRoot;
-exports.PopoverTrigger = PopoverTrigger;
-exports.Progress = Progress;
-exports.RadialProgress = RadialProgress;
-exports.Radio = Radio;
-exports.RadioGroup = RadioGroup;
-exports.SearchInput = SearchInput;
-exports.Select = Select;
-exports.SelectContent = SelectContent;
-exports.SelectGroup = SelectGroup;
-exports.SelectItem = SelectItem;
-exports.SelectLabel = SelectLabel;
-exports.SelectRoot = SelectRoot;
-exports.SelectTrigger = SelectTrigger;
-exports.SelectValue = SelectValue;
-exports.Sheet = Sheet;
-exports.Sidebar = Sidebar;
-exports.Skeleton = Skeleton;
-exports.Slider = Slider;
-exports.Sparkline = Sparkline;
-exports.Spinner = Spinner2;
-exports.SplitButton = SplitButton;
-exports.StatCard = StatCard;
-exports.StatusDot = StatusDot;
-exports.Stepper = Stepper;
-exports.Switch = Switch;
-exports.Tab = Tab;
-exports.Tabs = Tabs;
-exports.TabsContent = TabsContent;
-exports.TabsList = TabsList;
-exports.Tag = Tag;
-exports.Textarea = Textarea;
-exports.Timeline = Timeline;
-exports.TimelineItem = TimelineItem;
-exports.ToastCard = ToastCard;
-exports.ToastProvider = ToastProvider;
-exports.Tooltip = Tooltip;
-exports.TooltipArrow = TooltipArrow;
-exports.TooltipContent = TooltipContent;
-exports.TooltipPortal = TooltipPortal;
-exports.TooltipProvider = TooltipProvider;
-exports.TooltipRoot = TooltipRoot;
-exports.TooltipTrigger = TooltipTrigger;
-exports.Topbar = Topbar;
-exports.Tree = Tree;
-exports.badgeStyles = badgeStyles;
-exports.buttonStyles = buttonStyles;
-exports.cardStyles = cardStyles;
-exports.cn = cn;
-exports.filterCommandItems = filterCommandItems;
-exports.iconButtonStyles = iconButtonStyles;
-exports.useControllableState = useControllableState;
-exports.useDisclosure = useDisclosure;
-exports.useEscape = useEscape;
-exports.useKeyboardList = useKeyboardList;
-exports.useOutsideClick = useOutsideClick;
-exports.useTheme = useTheme;
-exports.useToast = useToast;
-//# sourceMappingURL=index.cjs.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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,
+  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,
+  SkeletonGroup,
+  Slider,
+  Sparkline,
+  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.cjs.map