@sovereignfs/ui 0.23.0 → 0.33.0

package/dist/index.js

@@ -591,9 +591,9 @@ function AlertTriangleIcon(props) {
   );
 }
 
-// src/components/Icon/icons/sliders-horizontal.tsx
+// src/components/Icon/icons/calendar.tsx
 import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
-function SlidersHorizontalIcon(props) {
+function CalendarIcon(props) {
   return /* @__PURE__ */ jsxs21(
     "svg",
     {
@@ -606,23 +606,18 @@ function SlidersHorizontalIcon(props) {
       strokeLinejoin: "round",
       ...props,
       children: [
-        /* @__PURE__ */ jsx28("line", { x1: "21", x2: "14", y1: "4", y2: "4" }),
-        /* @__PURE__ */ jsx28("line", { x1: "10", x2: "3", y1: "4", y2: "4" }),
-        /* @__PURE__ */ jsx28("line", { x1: "21", x2: "12", y1: "12", y2: "12" }),
-        /* @__PURE__ */ jsx28("line", { x1: "8", x2: "3", y1: "12", y2: "12" }),
-        /* @__PURE__ */ jsx28("line", { x1: "21", x2: "16", y1: "20", y2: "20" }),
-        /* @__PURE__ */ jsx28("line", { x1: "12", x2: "3", y1: "20", y2: "20" }),
-        /* @__PURE__ */ jsx28("line", { x1: "14", x2: "14", y1: "2", y2: "6" }),
-        /* @__PURE__ */ jsx28("line", { x1: "8", x2: "8", y1: "10", y2: "14" }),
-        /* @__PURE__ */ jsx28("line", { x1: "16", x2: "16", y1: "18", y2: "22" })
+        /* @__PURE__ */ jsx28("path", { d: "M8 2v4" }),
+        /* @__PURE__ */ jsx28("path", { d: "M16 2v4" }),
+        /* @__PURE__ */ jsx28("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
+        /* @__PURE__ */ jsx28("path", { d: "M3 10h18" })
       ]
     }
   );
 }
 
-// src/components/Icon/icons/terminal.tsx
+// src/components/Icon/icons/sliders-horizontal.tsx
 import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
-function TerminalIcon(props) {
+function SlidersHorizontalIcon(props) {
   return /* @__PURE__ */ jsxs22(
     "svg",
     {
@@ -635,8 +630,38 @@ function TerminalIcon(props) {
       strokeLinejoin: "round",
       ...props,
       children: [
-        /* @__PURE__ */ jsx29("polyline", { points: "4 17 10 11 4 5" }),
-        /* @__PURE__ */ jsx29("line", { x1: "12", x2: "20", y1: "19", y2: "19" })
+        /* @__PURE__ */ jsx29("path", { d: "M10 5H3" }),
+        /* @__PURE__ */ jsx29("path", { d: "M12 19H3" }),
+        /* @__PURE__ */ jsx29("path", { d: "M14 3v4" }),
+        /* @__PURE__ */ jsx29("path", { d: "M16 17v4" }),
+        /* @__PURE__ */ jsx29("path", { d: "M21 12h-9" }),
+        /* @__PURE__ */ jsx29("path", { d: "M21 19h-5" }),
+        /* @__PURE__ */ jsx29("path", { d: "M21 5h-7" }),
+        /* @__PURE__ */ jsx29("path", { d: "M8 10v4" }),
+        /* @__PURE__ */ jsx29("path", { d: "M8 12H3" })
+      ]
+    }
+  );
+}
+
+// src/components/Icon/icons/ellipsis-vertical.tsx
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+function EllipsisVerticalIcon(props) {
+  return /* @__PURE__ */ jsxs23(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "5", r: "1" }),
+        /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "19", r: "1" })
       ]
     }
   );
@@ -670,13 +695,14 @@ var ICONS = {
   "grid-2x2": Grid2x2Icon,
   info: InfoIcon,
   "alert-triangle": AlertTriangleIcon,
+  calendar: CalendarIcon,
   "sliders-horizontal": SlidersHorizontalIcon,
-  terminal: TerminalIcon
+  "ellipsis-vertical": EllipsisVerticalIcon
 };
 
 // src/components/Icon/Icon.tsx
 import styles2 from "./Icon.module.css";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function Icon({
   name,
   size = "md",
@@ -685,14 +711,14 @@ function Icon({
 }) {
   const Svg = ICONS[name];
   const classes = [styles2.root, styles2[size], className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx30(Svg, { className: classes, role: aria["aria-label"] ? "img" : void 0, ...aria });
+  return /* @__PURE__ */ jsx31(Svg, { className: classes, role: aria["aria-label"] ? "img" : void 0, ...aria });
 }
 
 // src/components/Toggle/Toggle.tsx
 import styles3 from "./Toggle.module.css";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Toggle({ checked, onChange, disabled, className, ...rest }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "button",
     {
       type: "button",
@@ -702,14 +728,14 @@ function Toggle({ checked, onChange, disabled, className, ...rest }) {
       className: [styles3.track, checked ? styles3.on : styles3.off, className].filter(Boolean).join(" "),
       onClick: () => onChange(!checked),
       ...rest,
-      children: /* @__PURE__ */ jsx31("span", { className: styles3.thumb })
+      children: /* @__PURE__ */ jsx32("span", { className: styles3.thumb })
     }
   );
 }
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import styles4 from "./SegmentedControl.module.css";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function SegmentedControl({
   value,
   onChange,
@@ -717,7 +743,7 @@ function SegmentedControl({
   size = "md",
   "aria-label": ariaLabel
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       role: "radiogroup",
@@ -725,7 +751,7 @@ function SegmentedControl({
       className: [styles4.track, styles4[size]].join(" "),
       children: options.map((opt) => {
         const active = opt.value === value;
-        return /* @__PURE__ */ jsx32(
+        return /* @__PURE__ */ jsx33(
           "button",
           {
             type: "button",
@@ -744,11 +770,11 @@ function SegmentedControl({
 
 // src/components/Tabs/Tabs.tsx
 import styles5 from "./Tabs.module.css";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, "aria-label": ariaLabel }) {
-  return /* @__PURE__ */ jsx33("div", { role: "tablist", "aria-label": ariaLabel, className: styles5.tablist, children: items.map((item) => {
+  return /* @__PURE__ */ jsx34("div", { role: "tablist", "aria-label": ariaLabel, className: styles5.tablist, children: items.map((item) => {
     const active = item.value === value;
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       "button",
       {
         type: "button",
@@ -765,15 +791,15 @@ function Tabs({ items, value, onChange, "aria-label": ariaLabel }) {
 
 // src/components/Select/Select.tsx
 import styles6 from "./Select.module.css";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 function Select({ className, size = "md", children, ...rest }) {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: [styles6.wrapper, size === "sm" ? styles6.sm : void 0, className].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx34("select", { className: styles6.select, ...rest, children }),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35("select", { className: styles6.select, ...rest, children }),
+        /* @__PURE__ */ jsx35(
           "svg",
           {
             className: styles6.chevron,
@@ -786,7 +812,7 @@ function Select({ className, size = "md", children, ...rest }) {
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx34("polyline", { points: "6 9 12 15 18 9" })
+            children: /* @__PURE__ */ jsx35("polyline", { points: "6 9 12 15 18 9" })
           }
         )
       ]
@@ -796,18 +822,18 @@ function Select({ className, size = "md", children, ...rest }) {
 
 // src/components/SystemBanner/SystemBanner.tsx
 import styles7 from "./SystemBanner.module.css";
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function SystemBanner({ variant = "info", onDismiss, children }) {
-  return /* @__PURE__ */ jsxs24("div", { role: "status", "aria-live": "polite", className: [styles7.banner, styles7[variant]].join(" "), children: [
-    /* @__PURE__ */ jsx35("span", { className: styles7.content, children }),
-    onDismiss && /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs25("div", { role: "status", "aria-live": "polite", className: [styles7.banner, styles7[variant]].join(" "), children: [
+    /* @__PURE__ */ jsx36("span", { className: styles7.content, children }),
+    onDismiss && /* @__PURE__ */ jsx36(
       "button",
       {
         type: "button",
         className: styles7.dismiss,
         onClick: onDismiss,
         "aria-label": "Dismiss banner",
-        children: /* @__PURE__ */ jsx35(
+        children: /* @__PURE__ */ jsx36(
           "svg",
           {
             width: "14",
@@ -816,7 +842,7 @@ function SystemBanner({ variant = "info", onDismiss, children }) {
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
             "aria-hidden": true,
-            children: /* @__PURE__ */ jsx35(
+            children: /* @__PURE__ */ jsx36(
               "path",
               {
                 d: "M1 1L13 13M13 1L1 13",
@@ -833,19 +859,71 @@ function SystemBanner({ variant = "info", onDismiss, children }) {
 }
 
 // src/components/Popover/Popover.tsx
-import { useEffect, useRef } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
 import styles8 from "./Popover.module.css";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+var TRIGGER_GAP = 8;
+var VIEWPORT_MARGIN = 4;
 function Popover({
   trigger,
   open,
   onClose,
   align = "right",
   width = 288,
+  panelStyle,
   "aria-label": ariaLabel,
   children
 }) {
   const containerRef = useRef(null);
+  const panelRef = useRef(null);
+  const [triggerWidth, setTriggerWidth] = useState(null);
+  const [openUpward, setOpenUpward] = useState(false);
+  const [maxHeight, setMaxHeight] = useState(null);
+  useEffect(() => {
+    if (width !== "trigger") return;
+    const el = containerRef.current?.firstElementChild;
+    if (!el) return;
+    function recompute() {
+      if (el) setTriggerWidth(el.getBoundingClientRect().width);
+    }
+    recompute();
+    const ro = new ResizeObserver(recompute);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [width]);
+  useLayoutEffect(() => {
+    if (!open) {
+      setOpenUpward(false);
+      setMaxHeight(null);
+      return;
+    }
+    const container = containerRef.current;
+    const panel = panelRef.current;
+    if (!container || !panel) return;
+    const measure = () => {
+      const triggerRect = container.getBoundingClientRect();
+      const panelHeight2 = panel.getBoundingClientRect().height;
+      return {
+        panelHeight: panelHeight2,
+        spaceBelow: window.innerHeight - triggerRect.bottom - TRIGGER_GAP - VIEWPORT_MARGIN,
+        spaceAbove: triggerRect.top - TRIGGER_GAP - VIEWPORT_MARGIN
+      };
+    };
+    let { panelHeight, spaceBelow, spaceAbove } = measure();
+    if (panelHeight > spaceBelow && panelHeight > spaceAbove) {
+      container.scrollIntoView({ block: "start", behavior: "instant" });
+      ({ panelHeight, spaceBelow, spaceAbove } = measure());
+    }
+    const upward = panelHeight > spaceBelow && spaceAbove > spaceBelow;
+    setOpenUpward(upward);
+    const available = upward ? spaceAbove : spaceBelow;
+    setMaxHeight(panelHeight > available ? Math.max(available, 0) : null);
+  }, [open, children]);
   useEffect(() => {
     if (!open) return;
     function handleMouseDown(e) {
@@ -864,16 +942,21 @@ function Popover({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  return /* @__PURE__ */ jsxs25("div", { ref: containerRef, className: styles8.container, children: [
+  return /* @__PURE__ */ jsxs26("div", { ref: containerRef, className: styles8.container, children: [
     trigger,
-    open && /* @__PURE__ */ jsx36(
+    open && /* @__PURE__ */ jsx37(
       "div",
       {
+        ref: panelRef,
         role: "dialog",
         "aria-label": ariaLabel,
         "aria-modal": false,
-        className: [styles8.panel, styles8[align]].join(" "),
-        style: { width },
+        className: [styles8.panel, styles8[align], openUpward ? styles8.upward : ""].filter(Boolean).join(" "),
+        style: {
+          width: width === "trigger" ? triggerWidth ?? void 0 : width,
+          maxHeight: maxHeight ?? void 0,
+          ...panelStyle
+        },
         children
       }
     )
@@ -882,37 +965,372 @@ function Popover({
 
 // src/components/Button/Button.tsx
 import styles9 from "./Button.module.css";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 function Button({
   variant = "primary",
   size = "md",
   type = "button",
+  loading = false,
+  disabled,
   className,
   children,
   ...rest
 }) {
   const classes = [styles9.button, styles9[variant], styles9[size], className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx37("button", { type, className: classes, ...rest, children });
+  return /* @__PURE__ */ jsxs27(
+    "button",
+    {
+      type,
+      className: classes,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...rest,
+      children: [
+        loading && // aria-hidden: the button's own accessible name (its visible children,
+        // unchanged below) plus aria-busy already communicate the pending
+        // state — an unhidden Spinner-style status region would double-narrate it.
+        /* @__PURE__ */ jsx38("span", { className: styles9.spinner, "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
 }
 
 // src/components/Input/Input.tsx
 import styles10 from "./Input.module.css";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function Input({ type = "text", className, ...rest }) {
   const classes = [styles10.input, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx38("input", { type, className: classes, ...rest });
+  return /* @__PURE__ */ jsx39("input", { type, className: classes, ...rest });
 }
 
 // src/components/Textarea/Textarea.tsx
 import styles11 from "./Textarea.module.css";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function Textarea({ className, rows = 4, ...rest }) {
   const classes = [styles11.textarea, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx39("textarea", { rows, className: classes, ...rest });
+  return /* @__PURE__ */ jsx40("textarea", { rows, className: classes, ...rest });
+}
+
+// src/components/CodeTextarea/CodeTextarea.tsx
+import styles12 from "./CodeTextarea.module.css";
+import { jsx as jsx41 } from "react/jsx-runtime";
+function CodeTextarea({
+  className,
+  rows = 12,
+  spellCheck = false,
+  wrap = "off",
+  invalid = false,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}) {
+  const classes = [styles12.textarea, invalid ? styles12.invalid : void 0, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx41(
+    "textarea",
+    {
+      rows,
+      spellCheck,
+      wrap,
+      className: classes,
+      "aria-invalid": ariaInvalid ?? (invalid || void 0),
+      ...rest
+    }
+  );
+}
+
+// src/components/StatusBadge/StatusBadge.tsx
+import styles13 from "./StatusBadge.module.css";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+var STATUS_CLASS = {
+  unmodified: styles13.neutral,
+  draft: styles13.info,
+  committed: styles13.success,
+  conflict: styles13.error,
+  "pending-delete": styles13.warning,
+  synced: styles13.success,
+  warning: styles13.warning,
+  error: styles13.error
+};
+var STATUS_LABEL = {
+  unmodified: "Unmodified",
+  draft: "Draft",
+  committed: "Committed",
+  conflict: "Conflict",
+  "pending-delete": "Pending delete",
+  synced: "Synced",
+  warning: "Warning",
+  error: "Error"
+};
+function StatusBadge({
+  status,
+  children,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const label = children ?? STATUS_LABEL[status];
+  return /* @__PURE__ */ jsxs28(
+    "span",
+    {
+      className: [styles13.badge, STATUS_CLASS[status], className].filter(Boolean).join(" "),
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsx42("span", { className: styles13.dot, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx42("span", { className: styles13.label, children: label })
+      ]
+    }
+  );
+}
+
+// src/components/SplitPane/SplitPane.tsx
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import styles14 from "./SplitPane.module.css";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+var clampSize = (value, min, max) => Math.min(Math.max(value, min), max);
+function SplitPane({
+  primary,
+  secondary,
+  defaultPrimarySize = 50,
+  minPrimarySize = 30,
+  maxPrimarySize = 70,
+  resizable = true,
+  primaryLabel = "Primary pane",
+  secondaryLabel = "Secondary pane",
+  resizeLabel = "Resize panes",
+  className
+}) {
+  const initialSize = clampSize(defaultPrimarySize, minPrimarySize, maxPrimarySize);
+  const [primarySize, setPrimarySize] = useState2(initialSize);
+  const containerRef = useRef2(null);
+  const dragState = useRef2(null);
+  const updateFromClientX = useCallback(
+    (clientX) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect || rect.width === 0) {
+        return;
+      }
+      const next = (clientX - rect.left) / rect.width * 100;
+      setPrimarySize(clampSize(next, minPrimarySize, maxPrimarySize));
+    },
+    [maxPrimarySize, minPrimarySize]
+  );
+  useEffect2(() => {
+    const handlePointerMove = (event) => {
+      if (!dragState.current || event.pointerId !== dragState.current.pointerId) {
+        return;
+      }
+      updateFromClientX(event.clientX);
+    };
+    const stopDragging = (event) => {
+      if (!dragState.current || event.pointerId !== dragState.current.pointerId) {
+        return;
+      }
+      dragState.current = null;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", stopDragging);
+    window.addEventListener("pointercancel", stopDragging);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", stopDragging);
+      window.removeEventListener("pointercancel", stopDragging);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [updateFromClientX]);
+  const startDragging = (event) => {
+    if (!resizable) {
+      return;
+    }
+    dragState.current = { pointerId: event.pointerId };
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const resizeWithKeyboard = (event) => {
+    const step = event.shiftKey ? 10 : 5;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      setPrimarySize((size) => clampSize(size - step, minPrimarySize, maxPrimarySize));
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      setPrimarySize((size) => clampSize(size + step, minPrimarySize, maxPrimarySize));
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      setPrimarySize(minPrimarySize);
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      setPrimarySize(maxPrimarySize);
+    }
+  };
+  const style = {
+    "--split-pane-primary-size": `${primarySize}%`
+  };
+  return /* @__PURE__ */ jsxs29(
+    "div",
+    {
+      ref: containerRef,
+      className: [styles14.splitPane, className].filter(Boolean).join(" "),
+      style,
+      children: [
+        /* @__PURE__ */ jsx43("section", { className: styles14.pane, "aria-label": primaryLabel, children: primary }),
+        resizable && /* @__PURE__ */ jsx43(
+          "button",
+          {
+            type: "button",
+            className: styles14.handle,
+            "aria-label": `${resizeLabel}, primary pane ${Math.round(primarySize)} percent`,
+            onPointerDown: startDragging,
+            onKeyDown: resizeWithKeyboard
+          }
+        ),
+        /* @__PURE__ */ jsx43("section", { className: styles14.pane, "aria-label": secondaryLabel, children: secondary })
+      ]
+    }
+  );
+}
+
+// src/components/TagInput/TagInput.tsx
+import { useMemo, useState as useState3 } from "react";
+import styles15 from "./TagInput.module.css";
+import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+var DEFAULT_SEPARATORS = /[\n,]+/;
+var splitTags = (value, separators) => value.split(separators).map((tag) => tag.trim()).filter(Boolean);
+function TagInput({
+  value,
+  onChange,
+  id,
+  name,
+  placeholder = "Add tag",
+  disabled = false,
+  required = false,
+  error,
+  hint,
+  validateTag,
+  separators = DEFAULT_SEPARATORS,
+  className,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel
+}) {
+  const [draft, setDraft] = useState3("");
+  const [localError, setLocalError] = useState3();
+  const message = error ?? localError ?? hint;
+  const messageId = message && id ? `${id}-tag-message` : void 0;
+  const describedBy = [ariaDescribedBy, messageId].filter(Boolean).join(" ") || void 0;
+  const normalized = useMemo(() => new Set(value.map((tag) => tag.toLocaleLowerCase())), [value]);
+  const addTags = (tags) => {
+    const next = [...value];
+    const nextNormalized = new Set(normalized);
+    for (const tag of tags) {
+      const normalizedTag = tag.toLocaleLowerCase();
+      const duplicate = nextNormalized.has(normalizedTag);
+      const validationMessage = duplicate ? "Tag already exists." : validateTag?.(tag, next) ?? void 0;
+      if (validationMessage) {
+        setLocalError(validationMessage);
+        return;
+      }
+      next.push(tag);
+      nextNormalized.add(normalizedTag);
+    }
+    setLocalError(void 0);
+    setDraft("");
+    onChange(next);
+  };
+  const commitDraft = () => {
+    const tags = splitTags(draft, separators);
+    if (tags.length === 0) {
+      return;
+    }
+    addTags(tags);
+  };
+  const removeTag = (index) => {
+    setLocalError(void 0);
+    onChange(value.filter((_, tagIndex) => tagIndex !== index));
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === ",") {
+      event.preventDefault();
+      commitDraft();
+    }
+    if (event.key === "Backspace" && draft.length === 0 && value.length > 0) {
+      event.preventDefault();
+      removeTag(value.length - 1);
+    }
+  };
+  const handlePaste = (event) => {
+    const text = event.clipboardData.getData("text");
+    const tags = splitTags(text, separators);
+    if (tags.length <= 1) {
+      return;
+    }
+    event.preventDefault();
+    addTags(tags);
+  };
+  return /* @__PURE__ */ jsxs30("div", { className: [styles15.wrapper, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs30(
+      "div",
+      {
+        className: [
+          styles15.control,
+          disabled ? styles15.disabled : void 0,
+          error || localError || ariaInvalid ? styles15.invalid : void 0
+        ].filter(Boolean).join(" "),
+        children: [
+          value.map((tag, index) => /* @__PURE__ */ jsxs30("span", { className: styles15.tag, children: [
+            /* @__PURE__ */ jsx44("span", { className: styles15.tagLabel, children: tag }),
+            /* @__PURE__ */ jsx44(
+              "button",
+              {
+                type: "button",
+                className: styles15.removeButton,
+                onClick: () => removeTag(index),
+                disabled,
+                "aria-label": `Remove ${tag}`,
+                children: "\xD7"
+              }
+            )
+          ] }, `${tag}-${index}`)),
+          /* @__PURE__ */ jsx44(
+            "input",
+            {
+              id,
+              name,
+              className: styles15.input,
+              value: draft,
+              placeholder: value.length === 0 ? placeholder : void 0,
+              disabled,
+              required: required && value.length === 0,
+              "aria-describedby": describedBy,
+              "aria-invalid": ariaInvalid ?? (Boolean(error || localError) || void 0),
+              "aria-label": ariaLabel,
+              onChange: (event) => setDraft(event.currentTarget.value),
+              onKeyDown: handleKeyDown,
+              onBlur: commitDraft,
+              onPaste: handlePaste
+            }
+          )
+        ]
+      }
+    ),
+    message && /* @__PURE__ */ jsx44(
+      "p",
+      {
+        id: messageId,
+        className: error || localError ? styles15.error : styles15.hint,
+        role: error || localError ? "alert" : void 0,
+        children: message
+      }
+    )
+  ] });
 }
 
 // src/components/Dialog/Dialog.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { createContext, useContext, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 
 // src/scroll-lock.ts
 function lockBodyScroll() {
@@ -926,9 +1344,74 @@ function unlockBodyScroll() {
   if (next === 0) document.body.style.overflowY = "";
 }
 
+// src/motion.ts
+import { useEffect as useEffect3, useState as useState4 } from "react";
+function useMountTransition(open, durationMs) {
+  const [phase, setPhase] = useState4(open ? "entering" : "closed");
+  useEffect3(() => {
+    if (open) {
+      setPhase("entering");
+      const raf = requestAnimationFrame(() => setPhase("open"));
+      return () => cancelAnimationFrame(raf);
+    }
+    setPhase((p) => p === "closed" ? "closed" : "closing");
+    const timer = setTimeout(() => setPhase("closed"), durationMs);
+    return () => clearTimeout(timer);
+  }, [open, durationMs]);
+  return { mounted: phase !== "closed", phase };
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState4(false);
+  useEffect3(() => {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mql.matches);
+    function handleChange(e) {
+      setReduced(e.matches);
+    }
+    mql.addEventListener("change", handleChange);
+    return () => mql.removeEventListener("change", handleChange);
+  }, []);
+  return reduced;
+}
+
+// src/components/OverlayHeader/OverlayHeader.tsx
+import styles16 from "./OverlayHeader.module.css";
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+function OverlayHeader({
+  title,
+  onClose,
+  onBack,
+  action,
+  secondRow,
+  className
+}) {
+  return /* @__PURE__ */ jsxs31("div", { className: [styles16.header, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs31("div", { className: styles16.row, children: [
+      onBack && /* @__PURE__ */ jsx45("button", { type: "button", className: styles16.backButton, "aria-label": "Back", onClick: onBack, children: /* @__PURE__ */ jsx45(Icon, { name: "chevron-left", size: "md", "aria-hidden": true }) }),
+      /* @__PURE__ */ jsx45("span", { className: styles16.title, children: title }),
+      action && /* @__PURE__ */ jsx45("div", { className: styles16.action, children: action }),
+      /* @__PURE__ */ jsx45("button", { type: "button", className: styles16.closeButton, "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx45(Icon, { name: "x", size: "sm", "aria-hidden": true }) })
+    ] }),
+    secondRow && /* @__PURE__ */ jsx45("div", { className: styles16.secondRow, children: secondRow })
+  ] });
+}
+
 // src/components/Dialog/Dialog.tsx
-import styles12 from "./Dialog.module.css";
-import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import styles17 from "./Dialog.module.css";
+import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+var MOTION_DURATION_MS = 250;
+var OverlaySecondRowContext = createContext(
+  void 0
+);
+function useOverlaySecondRow(node) {
+  const setSecondRow = useContext(OverlaySecondRowContext);
+  useEffect4(() => {
+    if (!setSecondRow) return;
+    setSecondRow(node);
+    return () => setSecondRow(null);
+  }, [setSecondRow, node]);
+  return setSecondRow !== void 0;
+}
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Dialog({
   open,
@@ -938,14 +1421,17 @@ function Dialog({
   title,
   children
 }) {
-  const panelRef = useRef2(null);
-  const previouslyFocused = useRef2(null);
-  useEffect2(() => {
-    if (!open) return;
+  const panelRef = useRef3(null);
+  const previouslyFocused = useRef3(null);
+  const reducedMotion = usePrefersReducedMotion();
+  const { mounted, phase } = useMountTransition(open, reducedMotion ? 0 : MOTION_DURATION_MS);
+  const [secondRow, setSecondRow] = useState5(null);
+  useEffect4(() => {
+    if (!mounted) return;
     lockBodyScroll();
     return unlockBodyScroll;
-  }, [open]);
-  useEffect2(() => {
+  }, [mounted]);
+  useEffect4(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     const panel = panelRef.current;
@@ -953,7 +1439,7 @@ function Dialog({
     (first ?? panel)?.focus();
     return () => previouslyFocused.current?.focus();
   }, [open]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (!open) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") {
@@ -983,14 +1469,15 @@ function Dialog({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  if (!open) return null;
+  if (!mounted) return null;
+  const isOpenPhase = phase === "open";
   return (
     // role="presentation" removes the scrim from the AT (it is purely visual).
     // e.target check lets clicks inside the panel bubble without triggering dismiss.
-    /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx46(
       "div",
       {
-        className: styles12.scrim,
+        className: [styles17.scrim, isOpenPhase ? styles17.scrimOpen : ""].filter(Boolean).join(" "),
         role: "presentation",
         onClick: (e) => {
           if (e.target === e.currentTarget) onClose();
@@ -998,7 +1485,7 @@ function Dialog({
         onKeyDown: (e) => {
           if (e.key === "Escape") onClose();
         },
-        children: /* @__PURE__ */ jsxs26(
+        children: /* @__PURE__ */ jsxs32(
           "div",
           {
             ref: panelRef,
@@ -1006,23 +1493,19 @@ function Dialog({
             "aria-modal": "true",
             "aria-label": ariaLabel ?? title,
             tabIndex: -1,
-            className: [styles12.panel, styles12[size]].join(" "),
+            className: [styles17.panel, styles17[size], isOpenPhase ? styles17.panelOpen : ""].filter(Boolean).join(" "),
             children: [
-              /* @__PURE__ */ jsxs26("div", { className: styles12.mobileBar, children: [
-                title && /* @__PURE__ */ jsx40("span", { className: styles12.mobileBarTitle, children: title }),
-                /* @__PURE__ */ jsx40(
-                  "button",
-                  {
-                    type: "button",
-                    className: styles12.mobileBarClose,
-                    "aria-label": "Close",
-                    onClick: onClose,
-                    children: "\xD7"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx40("button", { type: "button", className: styles12.close, "aria-label": "Close", onClick: onClose, children: "\xD7" }),
-              /* @__PURE__ */ jsx40("div", { className: styles12.content, children })
+              /* @__PURE__ */ jsx46(
+                OverlayHeader,
+                {
+                  title,
+                  onClose,
+                  secondRow,
+                  className: styles17.mobileHeader
+                }
+              ),
+              /* @__PURE__ */ jsx46("button", { type: "button", className: styles17.close, "aria-label": "Close", onClick: onClose, children: "\xD7" }),
+              /* @__PURE__ */ jsx46("div", { className: styles17.content, children: /* @__PURE__ */ jsx46(OverlaySecondRowContext.Provider, { value: setSecondRow, children }) })
             ]
           }
         )
@@ -1032,19 +1515,30 @@ function Dialog({
 }
 
 // src/components/Drawer/Drawer.tsx
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
-import styles13 from "./Drawer.module.css";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import styles18 from "./Drawer.module.css";
+import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
+var MOTION_DURATION_MS2 = 250;
 var FOCUSABLE2 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
-  const panelRef = useRef3(null);
-  const previouslyFocused = useRef3(null);
-  useEffect3(() => {
-    if (!open) return;
+var SWIPE_DISMISS_THRESHOLD_PX = 100;
+function Drawer({
+  open,
+  onClose,
+  "aria-label": ariaLabel,
+  snapHeight = "content",
+  children
+}) {
+  const panelRef = useRef4(null);
+  const previouslyFocused = useRef4(null);
+  const reducedMotion = usePrefersReducedMotion();
+  const { mounted, phase } = useMountTransition(open, reducedMotion ? 0 : MOTION_DURATION_MS2);
+  const dragStartY = useRef4(null);
+  useEffect5(() => {
+    if (!mounted) return;
     lockBodyScroll();
     return unlockBodyScroll;
-  }, [open]);
-  useEffect3(() => {
+  }, [mounted]);
+  useEffect5(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     const panel = panelRef.current;
@@ -1052,7 +1546,7 @@ function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
     (first ?? panel)?.focus();
     return () => previouslyFocused.current?.focus();
   }, [open]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (!open) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") {
@@ -1082,14 +1576,40 @@ function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  if (!open) return null;
+  function handleHandlePointerDown(e) {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragStartY.current = e.clientY;
+  }
+  function handleHandlePointerMove(e) {
+    const startY = dragStartY.current;
+    if (startY === null) return;
+    const dy = Math.max(0, e.clientY - startY);
+    const panel = panelRef.current;
+    if (!panel) return;
+    panel.style.transition = "none";
+    panel.style.transform = `translateY(${dy}px)`;
+  }
+  function releaseDrag(e, honorDistance) {
+    const startY = dragStartY.current;
+    dragStartY.current = null;
+    if (startY === null) return;
+    const dy = Math.max(0, e.clientY - startY);
+    const panel = panelRef.current;
+    if (panel) {
+      panel.style.transform = "";
+      panel.style.transition = "";
+    }
+    if (honorDistance && dy > SWIPE_DISMISS_THRESHOLD_PX) onClose();
+  }
+  if (!mounted) return null;
+  const isOpenPhase = phase === "open";
   return (
     // role="presentation" removes the scrim from the AT (it is purely visual).
     // e.target check lets clicks inside the panel bubble without triggering dismiss.
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx47(
       "div",
       {
-        className: styles13.scrim,
+        className: [styles18.scrim, isOpenPhase ? styles18.scrimOpen : ""].filter(Boolean).join(" "),
         role: "presentation",
         onClick: (e) => {
           if (e.target === e.currentTarget) onClose();
@@ -1097,7 +1617,7 @@ function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
         onKeyDown: (e) => {
           if (e.key === "Escape") onClose();
         },
-        children: /* @__PURE__ */ jsx41(
+        children: /* @__PURE__ */ jsxs33(
           "div",
           {
             ref: panelRef,
@@ -1105,8 +1625,25 @@ function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
             "aria-modal": "true",
             "aria-label": ariaLabel,
             tabIndex: -1,
-            className: styles13.panel,
-            children
+            className: [
+              styles18.panel,
+              snapHeight === "half" ? styles18.panelHalf : "",
+              isOpenPhase ? styles18.panelOpen : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ jsx47(
+                "div",
+                {
+                  className: styles18.handle,
+                  "aria-hidden": "true",
+                  onPointerDown: handleHandlePointerDown,
+                  onPointerMove: handleHandlePointerMove,
+                  onPointerUp: (e) => releaseDrag(e, true),
+                  onPointerCancel: (e) => releaseDrag(e, false)
+                }
+              ),
+              children
+            ]
           }
         )
       }
@@ -1114,37 +1651,391 @@ function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
   );
 }
 
+// src/components/Sheet/Sheet.tsx
+import { useEffect as useEffect6, useRef as useRef5 } from "react";
+import styles19 from "./Sheet.module.css";
+import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
+var FOCUSABLE3 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var MOTION_DURATION_MS3 = 250;
+function Sheet({
+  open,
+  onClose,
+  "aria-label": ariaLabel,
+  title,
+  onBack,
+  headerAction,
+  slideFrom = "bottom",
+  children
+}) {
+  const panelRef = useRef5(null);
+  const previouslyFocused = useRef5(null);
+  const reducedMotion = usePrefersReducedMotion();
+  const { mounted, phase } = useMountTransition(open, reducedMotion ? 0 : MOTION_DURATION_MS3);
+  useEffect6(() => {
+    if (!mounted) return;
+    lockBodyScroll();
+    return unlockBodyScroll;
+  }, [mounted]);
+  useEffect6(() => {
+    if (!mounted) return;
+    previouslyFocused.current = document.activeElement;
+    const panel = panelRef.current;
+    const first = panel?.querySelector(FOCUSABLE3);
+    (first ?? panel)?.focus();
+    return () => previouslyFocused.current?.focus();
+  }, [mounted]);
+  useEffect6(() => {
+    if (!open) return;
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusable = [...panel.querySelectorAll(FOCUSABLE3)];
+      const first = focusable[0];
+      const last = focusable.at(-1);
+      if (!first || !last) {
+        e.preventDefault();
+        return;
+      }
+      const active = document.activeElement;
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsxs34(
+    "div",
+    {
+      ref: panelRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel ?? title,
+      tabIndex: -1,
+      className: [
+        styles19.panel,
+        slideFrom === "top" ? styles19.panelFromTop : "",
+        phase === "open" ? styles19.panelOpen : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        title && /* @__PURE__ */ jsx48(OverlayHeader, { title, onClose, onBack, action: headerAction }),
+        /* @__PURE__ */ jsx48("div", { className: styles19.content, children })
+      ]
+    }
+  );
+}
+
+// src/components/ConfirmDialog/ConfirmDialog.tsx
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
+import styles20 from "./ConfirmDialog.module.css";
+import { jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  onClose,
+  title,
+  message,
+  onConfirm,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  pending = false,
+  error
+}) {
+  const dialogRef = useRef6(null);
+  useEffect7(() => {
+    const el = dialogRef.current;
+    if (!el) return;
+    if (open) el.showModal();
+    else el.close();
+  }, [open]);
+  useEffect7(() => {
+    const el = dialogRef.current;
+    if (!el) return;
+    const handleClose = () => onClose();
+    el.addEventListener("close", handleClose);
+    return () => el.removeEventListener("close", handleClose);
+  }, [onClose]);
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ jsx49(
+      "dialog",
+      {
+        ref: dialogRef,
+        className: styles20.dialog,
+        "aria-label": title,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ jsxs35("div", { className: styles20.body, children: [
+          /* @__PURE__ */ jsx49("h2", { className: styles20.title, children: title }),
+          /* @__PURE__ */ jsx49("div", { className: styles20.message, children: message }),
+          error && /* @__PURE__ */ jsx49("p", { className: styles20.error, children: error }),
+          /* @__PURE__ */ jsxs35("div", { className: styles20.actions, children: [
+            /* @__PURE__ */ jsx49(Button, { type: "button", variant: "secondary", onClick: onClose, disabled: pending, children: cancelLabel }),
+            destructive ? (
+              // A solid red fill, not Button's own `destructive` variant (an
+              // outlined/ghost style meant for lower-emphasis placements) — a
+              // confirm action should read as strongly as `Button`'s primary
+              // variant does. Uses the same --sv-color-error-solid /
+              // -text-on-error tokens the codebase already introduced for this
+              // exact "reads as a filled action button, not a tinted status
+              // surface" case (see semantic.css).
+              /* @__PURE__ */ jsx49(
+                "button",
+                {
+                  type: "button",
+                  className: styles20.destructiveConfirm,
+                  onClick: onConfirm,
+                  disabled: pending,
+                  children: confirmLabel
+                }
+              )
+            ) : /* @__PURE__ */ jsx49(Button, { type: "button", variant: "primary", onClick: onConfirm, disabled: pending, children: confirmLabel })
+          ] })
+        ] })
+      }
+    )
+  );
+}
+
+// src/hooks/useLongPress.ts
+import { useCallback as useCallback2, useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
+var DEFAULT_DELAY_MS = 500;
+var DEFAULT_MOVE_TOLERANCE_PX = 10;
+var DEFAULT_SUPPRESS_CLICK_MS = 700;
+function usePrefersCoarsePointer() {
+  const [coarse, setCoarse] = useState6(false);
+  useEffect8(() => {
+    const mql = window.matchMedia("(pointer: coarse)");
+    setCoarse(mql.matches);
+    function handleChange(e) {
+      setCoarse(e.matches);
+    }
+    mql.addEventListener("change", handleChange);
+    return () => mql.removeEventListener("change", handleChange);
+  }, []);
+  return coarse;
+}
+function useLongPress({
+  onLongPress,
+  delay = DEFAULT_DELAY_MS,
+  moveTolerance = DEFAULT_MOVE_TOLERANCE_PX,
+  suppressClickMs = DEFAULT_SUPPRESS_CLICK_MS,
+  vibrate = true,
+  disabled = false
+}) {
+  const timerRef = useRef7(null);
+  const startRef = useRef7(null);
+  const suppressUntilRef = useRef7(0);
+  const clearTimer = useCallback2(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  useEffect8(() => clearTimer, [clearTimer]);
+  const onPointerDown = useCallback2(
+    (e) => {
+      if (disabled || e.pointerType !== "touch") return;
+      startRef.current = { x: e.clientX, y: e.clientY };
+      clearTimer();
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        suppressUntilRef.current = Date.now() + suppressClickMs;
+        if (vibrate && typeof navigator !== "undefined" && navigator.vibrate) {
+          navigator.vibrate(10);
+        }
+        onLongPress();
+      }, delay);
+    },
+    [disabled, delay, suppressClickMs, vibrate, onLongPress, clearTimer]
+  );
+  const onPointerMove = useCallback2(
+    (e) => {
+      const start = startRef.current;
+      if (!start || !timerRef.current) return;
+      const dx = e.clientX - start.x;
+      const dy = e.clientY - start.y;
+      if (Math.hypot(dx, dy) > moveTolerance) clearTimer();
+    },
+    [moveTolerance, clearTimer]
+  );
+  const cancelPress = useCallback2(() => {
+    clearTimer();
+    startRef.current = null;
+  }, [clearTimer]);
+  const onContextMenu = useCallback2((e) => {
+    if (timerRef.current || Date.now() < suppressUntilRef.current) e.preventDefault();
+  }, []);
+  const onClick = useCallback2((e) => {
+    if (Date.now() < suppressUntilRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, []);
+  const isCoarsePointer = usePrefersCoarsePointer();
+  const style = isCoarsePointer ? {
+    WebkitTouchCallout: "none",
+    WebkitUserSelect: "none",
+    userSelect: "none",
+    touchAction: "manipulation"
+  } : {};
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp: cancelPress,
+    onPointerCancel: cancelPress,
+    onPointerLeave: cancelPress,
+    onContextMenu,
+    onClick,
+    style
+  };
+}
+
+// src/hooks/useDoubleTap.ts
+import { useRef as useRef8 } from "react";
+var DOUBLE_TAP_MS = 350;
+function useDoubleTapHandler(onDoubleTap) {
+  const lastTime = useRef8(0);
+  return (e) => {
+    if (e.detail === 2) {
+      onDoubleTap(e);
+      return;
+    }
+    const now = Date.now();
+    if (now - lastTime.current < DOUBLE_TAP_MS) {
+      lastTime.current = 0;
+      onDoubleTap(e);
+    } else {
+      lastTime.current = now;
+    }
+  };
+}
+function useSingleOrDoubleTap(onSingle, onDouble) {
+  const timer = useRef8(null);
+  return (e) => {
+    if (e.detail === 2) {
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = null;
+      }
+      onDouble(e);
+      return;
+    }
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+      onDouble(e);
+      return;
+    }
+    timer.current = setTimeout(() => {
+      timer.current = null;
+      onSingle(e);
+    }, DOUBLE_TAP_MS);
+  };
+}
+
+// src/hooks/useIsMobile.ts
+import { useEffect as useEffect9, useState as useState7 } from "react";
+var MOBILE_BREAKPOINT_PX = 768;
+function useIsMobile(breakpointPx = MOBILE_BREAKPOINT_PX) {
+  const [isMobile, setIsMobile] = useState7(false);
+  useEffect9(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpointPx}px)`);
+    setIsMobile(mql.matches);
+    function handleChange(e) {
+      setIsMobile(e.matches);
+    }
+    mql.addEventListener("change", handleChange);
+    return () => mql.removeEventListener("change", handleChange);
+  }, [breakpointPx]);
+  return isMobile;
+}
+
+// src/components/Menu/Menu.tsx
+import styles21 from "./Menu.module.css";
+import { Fragment, jsx as jsx50, jsxs as jsxs36 } from "react/jsx-runtime";
+function Menu({ trigger, open, onClose, items, "aria-label": ariaLabel, align }) {
+  const isMobile = useIsMobile();
+  const list = /* @__PURE__ */ jsx50("ul", { className: styles21.list, role: "menu", children: items.map((entry, index) => {
+    if (entry.type === "separator") {
+      return /* @__PURE__ */ jsx50("li", { role: "separator", className: styles21.separator }, index);
+    }
+    if (entry.type === "label") {
+      return /* @__PURE__ */ jsx50("li", { role: "presentation", className: styles21.label, children: entry.label }, index);
+    }
+    const isCheckable = entry.checked !== void 0;
+    return /* @__PURE__ */ jsx50("li", { role: "none", children: /* @__PURE__ */ jsxs36(
+      "button",
+      {
+        role: isCheckable ? "menuitemradio" : "menuitem",
+        "aria-checked": isCheckable ? entry.checked : void 0,
+        type: "button",
+        className: [styles21.item, entry.destructive ? styles21.itemDestructive : ""].filter(Boolean).join(" "),
+        disabled: entry.disabled,
+        onClick: () => {
+          onClose();
+          entry.onSelect();
+        },
+        children: [
+          isCheckable && /* @__PURE__ */ jsx50("span", { className: styles21.check, "aria-hidden": true, children: entry.checked && /* @__PURE__ */ jsx50(Icon, { name: "check", size: "sm", "aria-hidden": true }) }),
+          entry.icon && /* @__PURE__ */ jsx50(Icon, { name: entry.icon, size: "sm", "aria-hidden": true }),
+          entry.label
+        ]
+      }
+    ) }, index);
+  }) });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs36(Fragment, { children: [
+      trigger,
+      /* @__PURE__ */ jsx50(Drawer, { open, onClose, "aria-label": ariaLabel, children: list })
+    ] });
+  }
+  return /* @__PURE__ */ jsx50(Popover, { trigger, open, onClose, "aria-label": ariaLabel, align, children: list });
+}
+
 // src/components/Toast/Toast.tsx
 import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect as useEffect4,
+  createContext as createContext2,
+  useCallback as useCallback3,
+  useContext as useContext2,
+  useEffect as useEffect10,
   useId,
-  useMemo,
-  useRef as useRef4,
-  useState
+  useMemo as useMemo2,
+  useRef as useRef9,
+  useState as useState8
 } from "react";
-import styles14 from "./Toast.module.css";
-import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
-var ToastContext = createContext(null);
+import styles22 from "./Toast.module.css";
+import { jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
+var ToastContext = createContext2(null);
 function useToast() {
-  const ctx = useContext(ToastContext);
+  const ctx = useContext2(ToastContext);
   if (!ctx) throw new Error("useToast() must be used inside <ToastProvider>");
   return ctx;
 }
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = useState([]);
-  const timers = useRef4(/* @__PURE__ */ new Map());
+  const [toasts, setToasts] = useState8([]);
+  const timers = useRef9(/* @__PURE__ */ new Map());
   const seedId = useId();
-  const counter = useRef4(0);
-  const dismiss = useCallback((id) => {
+  const counter = useRef9(0);
+  const dismiss = useCallback3((id) => {
     setToasts((prev) => prev.map((t) => t.id === id ? { ...t, exiting: true } : t));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
     }, 220);
   }, []);
-  const show = useCallback(
+  const show = useCallback3(
     (item) => {
       const id = `${seedId}-${++counter.current}`;
       const duration = item.duration ?? 5e3;
@@ -1157,23 +2048,23 @@ function ToastProvider({ children }) {
     },
     [seedId, dismiss]
   );
-  useEffect4(() => {
+  useEffect10(() => {
     const currentTimers = timers.current;
     return () => {
       currentTimers.forEach((t) => clearTimeout(t));
     };
   }, []);
-  const value = useMemo(() => ({ show, dismiss }), [show, dismiss]);
-  return /* @__PURE__ */ jsxs27(ToastContext.Provider, { value, children: [
+  const value = useMemo2(() => ({ show, dismiss }), [show, dismiss]);
+  return /* @__PURE__ */ jsxs37(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx51(
       "ol",
       {
-        className: styles14.region,
+        className: styles22.region,
         "aria-label": "Notifications",
         "aria-live": "polite",
         "aria-atomic": "false",
-        children: toasts.map((toast) => /* @__PURE__ */ jsx42(Toast, { ...toast, onDismiss: dismiss }, toast.id))
+        children: toasts.map((toast) => /* @__PURE__ */ jsx51(Toast, { ...toast, onDismiss: dismiss }, toast.id))
       }
     )
   ] });
@@ -1194,24 +2085,24 @@ function Toast({
   exiting,
   onDismiss
 }) {
-  const categoryClass = styles14[category] ?? styles14.info;
+  const categoryClass = styles22[category] ?? styles22.info;
   const iconName = CATEGORY_ICON[category] ?? "info";
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs37(
     "li",
     {
       role: "status",
-      className: `${styles14.toast} ${String(categoryClass)} ${exiting ? styles14.exiting : ""}`,
+      className: `${styles22.toast} ${String(categoryClass)} ${exiting ? styles22.exiting : ""}`,
       children: [
-        /* @__PURE__ */ jsx42("span", { className: styles14.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx42(Icon, { name: iconName, size: "sm", "aria-hidden": true }) }),
-        /* @__PURE__ */ jsxs27("div", { className: styles14.body, children: [
-          /* @__PURE__ */ jsx42("div", { className: styles14.title, children: title }),
-          message && /* @__PURE__ */ jsx42("div", { className: styles14.message, children: message })
+        /* @__PURE__ */ jsx51("span", { className: styles22.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx51(Icon, { name: iconName, size: "sm", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs37("div", { className: styles22.body, children: [
+          /* @__PURE__ */ jsx51("div", { className: styles22.title, children: title }),
+          message && /* @__PURE__ */ jsx51("div", { className: styles22.message, children: message })
         ] }),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx51(
           "button",
           {
             type: "button",
-            className: styles14.close,
+            className: styles22.close,
             "aria-label": "Dismiss notification",
             onClick: () => onDismiss(id),
             children: "\u2715"
@@ -1223,12 +2114,12 @@ function Toast({
 }
 
 // src/components/Card/Card.tsx
-import styles15 from "./Card.module.css";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import styles23 from "./Card.module.css";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var paddingClass = {
-  sm: styles15.paddingSm,
-  md: styles15.paddingMd,
-  lg: styles15.paddingLg
+  sm: styles23.paddingSm,
+  md: styles23.paddingMd,
+  lg: styles23.paddingLg
 };
 function Card({
   as: Tag = "div",
@@ -1238,14 +2129,14 @@ function Card({
   children,
   ...rest
 }) {
-  const cls = [styles15.card, paddingClass[padding], interactive && styles15.interactive, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx43(Tag, { className: cls, ...rest, children });
+  const cls = [styles23.card, paddingClass[padding], interactive && styles23.interactive, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx52(Tag, { className: cls, ...rest, children });
 }
 
 // src/components/FormField/FormField.tsx
 import { useId as useId2 } from "react";
-import styles16 from "./FormField.module.css";
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import styles24 from "./FormField.module.css";
+import { jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
 function FormField({
   label,
   hint,
@@ -1266,98 +2157,98 @@ function FormField({
     "aria-invalid": error ? true : void 0,
     required: required || void 0
   };
-  return /* @__PURE__ */ jsxs28("div", { className: [styles16.field, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs28("label", { className: styles16.label, htmlFor: fieldId, children: [
+  return /* @__PURE__ */ jsxs38("div", { className: [styles24.field, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs38("label", { className: styles24.label, htmlFor: fieldId, children: [
       label,
-      required && /* @__PURE__ */ jsx44("span", { className: styles16.required, "aria-hidden": "true", children: "*" })
+      required && /* @__PURE__ */ jsx53("span", { className: styles24.required, "aria-hidden": "true", children: "*" })
     ] }),
     children(field),
-    hint && !error && /* @__PURE__ */ jsx44("p", { id: hintId, className: styles16.hint, children: hint }),
-    error && /* @__PURE__ */ jsx44("p", { id: errorId, className: styles16.error, role: "alert", children: error })
+    hint && !error && /* @__PURE__ */ jsx53("p", { id: hintId, className: styles24.hint, children: hint }),
+    error && /* @__PURE__ */ jsx53("p", { id: errorId, className: styles24.error, role: "alert", children: error })
   ] });
 }
 
 // src/components/PageHeader/PageHeader.tsx
-import styles17 from "./PageHeader.module.css";
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import styles25 from "./PageHeader.module.css";
+import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
 function PageHeader({ title, description, action, className }) {
-  return /* @__PURE__ */ jsxs29("header", { className: [styles17.header, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs29("div", { className: styles17.text, children: [
-      /* @__PURE__ */ jsx45("h1", { className: styles17.title, children: title }),
-      description && /* @__PURE__ */ jsx45("p", { className: styles17.description, children: description })
+  return /* @__PURE__ */ jsxs39("header", { className: [styles25.header, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs39("div", { className: styles25.text, children: [
+      /* @__PURE__ */ jsx54("h1", { className: styles25.title, children: title }),
+      description && /* @__PURE__ */ jsx54("p", { className: styles25.description, children: description })
     ] }),
-    action && /* @__PURE__ */ jsx45("div", { className: styles17.action, children: action })
+    action && /* @__PURE__ */ jsx54("div", { className: styles25.action, children: action })
   ] });
 }
 
 // src/components/EmptyState/EmptyState.tsx
-import styles18 from "./EmptyState.module.css";
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import styles26 from "./EmptyState.module.css";
+import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
 function EmptyState({ icon, heading, description, action, className }) {
-  return /* @__PURE__ */ jsxs30("div", { className: [styles18.root, className].filter(Boolean).join(" "), children: [
-    icon && /* @__PURE__ */ jsx46("span", { className: styles18.icon, children: /* @__PURE__ */ jsx46(Icon, { name: icon, size: "lg", "aria-hidden": true }) }),
-    /* @__PURE__ */ jsx46("h2", { className: styles18.heading, children: heading }),
-    description && /* @__PURE__ */ jsx46("p", { className: styles18.description, children: description }),
+  return /* @__PURE__ */ jsxs40("div", { className: [styles26.root, className].filter(Boolean).join(" "), children: [
+    icon && /* @__PURE__ */ jsx55("span", { className: styles26.icon, children: /* @__PURE__ */ jsx55(Icon, { name: icon, size: "lg", "aria-hidden": true }) }),
+    /* @__PURE__ */ jsx55("h2", { className: styles26.heading, children: heading }),
+    description && /* @__PURE__ */ jsx55("p", { className: styles26.description, children: description }),
     action
   ] });
 }
 
 // src/components/Spinner/Spinner.tsx
-import styles19 from "./Spinner.module.css";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import styles27 from "./Spinner.module.css";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var sizeClass = {
-  sm: styles19.sm,
-  md: styles19.md,
-  lg: styles19.lg
+  sm: styles27.sm,
+  md: styles27.md,
+  lg: styles27.lg
 };
 function Spinner({ size = "md", label = "Loading\u2026", className }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx56(
     "span",
     {
       role: "status",
       "aria-label": label,
-      className: [styles19.spinner, sizeClass[size], className].filter(Boolean).join(" ")
+      className: [styles27.spinner, sizeClass[size], className].filter(Boolean).join(" ")
     }
   );
 }
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState2 } from "react";
-import styles20 from "./Avatar.module.css";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { useState as useState9 } from "react";
+import styles28 from "./Avatar.module.css";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function initials(name) {
   const parts = name.trim().split(/\s+/);
   if (parts.length === 1) return (parts[0] ?? "").slice(0, 2).toUpperCase();
   return ((parts[0]?.[0] ?? "") + (parts[parts.length - 1]?.[0] ?? "")).toUpperCase();
 }
 var sizeClass2 = {
-  sm: styles20.sm,
-  md: styles20.md,
-  lg: styles20.lg
+  sm: styles28.sm,
+  md: styles28.md,
+  lg: styles28.lg
 };
 function Avatar({ name, src, size = "md", className }) {
-  const [imgFailed, setImgFailed] = useState2(false);
-  const cls = [styles20.avatar, sizeClass2[size], className].filter(Boolean).join(" ");
+  const [imgFailed, setImgFailed] = useState9(false);
+  const cls = [styles28.avatar, sizeClass2[size], className].filter(Boolean).join(" ");
   if (src && !imgFailed) {
-    return /* @__PURE__ */ jsx48("span", { className: cls, "aria-label": name, children: /* @__PURE__ */ jsx48("img", { src, alt: name, className: styles20.img, onError: () => setImgFailed(true) }) });
+    return /* @__PURE__ */ jsx57("span", { className: cls, "aria-label": name, children: /* @__PURE__ */ jsx57("img", { src, alt: name, className: styles28.img, onError: () => setImgFailed(true) }) });
   }
-  return /* @__PURE__ */ jsx48("span", { className: cls, "aria-label": name, children: initials(name) });
+  return /* @__PURE__ */ jsx57("span", { className: cls, "aria-label": name, children: initials(name) });
 }
 
 // src/components/NavTabs/NavTabs.tsx
-import styles21 from "./NavTabs.module.css";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import styles29 from "./NavTabs.module.css";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function NavTabs({ items, className, "aria-label": ariaLabel }) {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx58(
     "nav",
     {
-      className: [styles21.nav, className].filter(Boolean).join(" "),
+      className: [styles29.nav, className].filter(Boolean).join(" "),
       "aria-label": ariaLabel ?? "Page navigation",
-      children: items.map((item) => /* @__PURE__ */ jsx49(
+      children: items.map((item) => /* @__PURE__ */ jsx58(
         "a",
         {
           href: item.href,
-          className: [styles21.link, item.active && styles21.active].filter(Boolean).join(" "),
+          className: [styles29.link, item.active && styles29.active].filter(Boolean).join(" "),
           "aria-current": item.active ? "page" : void 0,
           children: item.label
         },
@@ -1369,25 +2260,25 @@ function NavTabs({ items, className, "aria-label": ariaLabel }) {
 
 // src/components/Tooltip/Tooltip.tsx
 import { useId as useId3 } from "react";
-import styles22 from "./Tooltip.module.css";
-import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
+import styles30 from "./Tooltip.module.css";
+import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
 var sideClass = {
-  top: styles22.top,
-  bottom: styles22.bottom,
-  left: styles22.left,
-  right: styles22.right
+  top: styles30.top,
+  bottom: styles30.bottom,
+  left: styles30.left,
+  right: styles30.right
 };
 function Tooltip({ content, children, side = "top" }) {
   const tipId = useId3();
-  return /* @__PURE__ */ jsxs31("span", { className: styles22.wrapper, children: [
-    /* @__PURE__ */ jsx50("span", { "aria-describedby": tipId, children }),
-    /* @__PURE__ */ jsx50("span", { id: tipId, role: "tooltip", className: [styles22.tip, sideClass[side]].join(" "), children: content })
+  return /* @__PURE__ */ jsxs41("span", { className: styles30.wrapper, children: [
+    /* @__PURE__ */ jsx59("span", { "aria-describedby": tipId, children }),
+    /* @__PURE__ */ jsx59("span", { id: tipId, role: "tooltip", className: [styles30.tip, sideClass[side]].join(" "), children: content })
   ] });
 }
 
 // src/components/Checkbox/Checkbox.tsx
-import styles23 from "./Checkbox.module.css";
-import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
+import styles31 from "./Checkbox.module.css";
+import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
 function Checkbox({
   checked,
   onChange,
@@ -1399,9 +2290,9 @@ function Checkbox({
   ...rest
 }) {
   const inputId = id ?? `checkbox-${label.toLowerCase().replace(/\s+/g, "-")}`;
-  return /* @__PURE__ */ jsxs32("span", { className: [styles23.root, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs32("span", { className: [styles23.box, checked ? styles23.checked : ""].filter(Boolean).join(" "), children: [
-      /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs42("span", { className: [styles31.root, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs42("span", { className: [styles31.box, checked ? styles31.checked : ""].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsx60(
         "input",
         {
           ...rest,
@@ -1409,11 +2300,11 @@ function Checkbox({
           type: "checkbox",
           checked,
           disabled,
-          className: styles23.input,
+          className: styles31.input,
           onChange: (e) => onChange(e.target.checked)
         }
       ),
-      checked && /* @__PURE__ */ jsx51("svg", { className: styles23.tick, viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx51(
+      checked && /* @__PURE__ */ jsx60("svg", { className: styles31.tick, viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx60(
         "path",
         {
           d: "M1 4l3 3 5-6",
@@ -1424,14 +2315,14 @@ function Checkbox({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx51(
+    label && /* @__PURE__ */ jsx60(
       "label",
       {
         htmlFor: inputId,
         className: [
-          styles23.label,
-          strikeThrough && checked ? styles23.struck : "",
-          disabled ? styles23.disabled : ""
+          styles31.label,
+          strikeThrough && checked ? styles31.struck : "",
+          disabled ? styles31.disabled : ""
         ].filter(Boolean).join(" "),
         children: label
       }
@@ -1440,8 +2331,8 @@ function Checkbox({
 }
 
 // src/components/DragHandleRow/DragHandleRow.tsx
-import styles24 from "./DragHandleRow.module.css";
-import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
+import styles32 from "./DragHandleRow.module.css";
+import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
 function DragHandleRow({
   children,
   handleProps,
@@ -1449,30 +2340,30 @@ function DragHandleRow({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs43(
     "div",
     {
       ...rest,
-      className: [styles24.row, isDragging ? styles24.dragging : "", className].filter(Boolean).join(" "),
+      className: [styles32.row, isDragging ? styles32.dragging : "", className].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx61(
           "button",
           {
             type: "button",
             "aria-label": "Drag to reorder",
-            className: styles24.handle,
+            className: styles32.handle,
             tabIndex: -1,
             ...handleProps,
-            children: /* @__PURE__ */ jsx52(DragIcon, {})
+            children: /* @__PURE__ */ jsx61(DragIcon, {})
           }
         ),
-        /* @__PURE__ */ jsx52("div", { className: styles24.content, children })
+        /* @__PURE__ */ jsx61("div", { className: styles32.content, children })
       ]
     }
   );
 }
 function DragIcon() {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx61(
     "svg",
     {
       width: "14",
@@ -1480,19 +2371,297 @@ function DragIcon() {
       viewBox: "0 0 14 14",
       fill: "none",
       "aria-hidden": "true",
-      className: styles24.icon,
+      className: styles32.icon,
       children: [3, 7, 11].map(
-        (cy) => [4, 10].map((cx) => /* @__PURE__ */ jsx52("circle", { cx, cy, r: 1.2, fill: "currentColor" }, `${cx}-${cy}`))
+        (cy) => [4, 10].map((cx) => /* @__PURE__ */ jsx61("circle", { cx, cy, r: 1.2, fill: "currentColor" }, `${cx}-${cy}`))
       )
     }
   );
 }
+
+// src/components/Calendar/Calendar.tsx
+import { useRef as useRef10, useState as useState10 } from "react";
+
+// src/components/Calendar/dateUtils.ts
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addMonths(date, count) {
+  return new Date(date.getFullYear(), date.getMonth() + count, date.getDate());
+}
+function addDays(date, count) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + count);
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function isBeforeDay(a, b) {
+  return a.getFullYear() < b.getFullYear() || a.getFullYear() === b.getFullYear() && (a.getMonth() < b.getMonth() || a.getMonth() === b.getMonth() && a.getDate() < b.getDate());
+}
+function isAfterDay(a, b) {
+  return isBeforeDay(b, a);
+}
+function isWithinRange(date, min, max) {
+  if (min && isBeforeDay(date, min)) return false;
+  if (max && isAfterDay(date, max)) return false;
+  return true;
+}
+function getMonthGrid(month) {
+  const first = startOfMonth(month);
+  const startOffset = first.getDay();
+  const gridStart = addDays(first, -startOffset);
+  const weeks = [];
+  for (let week = 0; week < 6; week++) {
+    const days = [];
+    for (let day = 0; day < 7; day++) {
+      days.push(addDays(gridStart, week * 7 + day));
+    }
+    weeks.push(days);
+  }
+  return weeks;
+}
+function formatMonthYear(date) {
+  return new Intl.DateTimeFormat(void 0, { month: "long", year: "numeric" }).format(date);
+}
+function formatWeekdayShort(date) {
+  return new Intl.DateTimeFormat(void 0, { weekday: "short" }).format(date);
+}
+function formatDateShort(date) {
+  return new Intl.DateTimeFormat(void 0, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(date);
+}
+function formatDateLabel(date) {
+  return new Intl.DateTimeFormat(void 0, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }).format(date);
+}
+
+// src/components/Calendar/Calendar.tsx
+import styles33 from "./Calendar.module.css";
+import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
+var WEEKDAY_LABEL_WEEK = getMonthGrid(new Date(2026, 0, 1))[0] ?? [];
+function Calendar({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  "aria-label": ariaLabel
+}) {
+  const [displayedMonth, setDisplayedMonth] = useState10(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
+  const [focusedDate, setFocusedDate] = useState10(() => value ?? /* @__PURE__ */ new Date());
+  const gridRef = useRef10(null);
+  const weeks = getMonthGrid(displayedMonth);
+  function goToMonth(next) {
+    setDisplayedMonth(startOfMonth(next));
+  }
+  function moveFocus(next) {
+    setFocusedDate(next);
+    if (!isSameMonth(next, displayedMonth)) goToMonth(next);
+    requestAnimationFrame(() => {
+      gridRef.current?.querySelector('[tabindex="0"]')?.focus();
+    });
+  }
+  function selectDate(date) {
+    if (!isWithinRange(date, minDate, maxDate)) return;
+    onChange(date);
+    setFocusedDate(date);
+  }
+  function handleKeyDown(e) {
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        moveFocus(addDays(focusedDate, -1));
+        return;
+      case "ArrowRight":
+        e.preventDefault();
+        moveFocus(addDays(focusedDate, 1));
+        return;
+      case "ArrowUp":
+        e.preventDefault();
+        moveFocus(addDays(focusedDate, -7));
+        return;
+      case "ArrowDown":
+        e.preventDefault();
+        moveFocus(addDays(focusedDate, 7));
+        return;
+      case "Home":
+        e.preventDefault();
+        moveFocus(addDays(focusedDate, -focusedDate.getDay()));
+        return;
+      case "End":
+        e.preventDefault();
+        moveFocus(addDays(focusedDate, 6 - focusedDate.getDay()));
+        return;
+      case "PageUp":
+        e.preventDefault();
+        moveFocus(addMonths(focusedDate, -1));
+        return;
+      case "PageDown":
+        e.preventDefault();
+        moveFocus(addMonths(focusedDate, 1));
+        return;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        selectDate(focusedDate);
+        return;
+      default:
+    }
+  }
+  return /* @__PURE__ */ jsxs44("div", { className: styles33.calendar, "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsxs44("div", { className: styles33.header, children: [
+      /* @__PURE__ */ jsx62(
+        "button",
+        {
+          type: "button",
+          className: styles33.navButton,
+          "aria-label": "Previous month",
+          onClick: () => goToMonth(addMonths(displayedMonth, -1)),
+          children: /* @__PURE__ */ jsx62(Icon, { name: "chevron-left", size: "sm", "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsx62("span", { className: styles33.monthLabel, children: formatMonthYear(displayedMonth) }),
+      /* @__PURE__ */ jsx62(
+        "button",
+        {
+          type: "button",
+          className: styles33.navButton,
+          "aria-label": "Next month",
+          onClick: () => goToMonth(addMonths(displayedMonth, 1)),
+          children: /* @__PURE__ */ jsx62(Icon, { name: "chevron-right", size: "sm", "aria-hidden": true })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs44(
+      "div",
+      {
+        ref: gridRef,
+        role: "grid",
+        "aria-label": formatMonthYear(displayedMonth),
+        className: styles33.grid,
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsx62("div", { role: "row", className: styles33.weekdayRow, children: WEEKDAY_LABEL_WEEK.map((d) => /* @__PURE__ */ jsx62("span", { role: "columnheader", className: styles33.weekday, "aria-hidden": true, children: formatWeekdayShort(d) }, d.getDay())) }),
+          weeks.map((week) => {
+            const firstDayOfWeek = week[0];
+            if (!firstDayOfWeek) return null;
+            return /* @__PURE__ */ jsx62("div", { role: "row", className: styles33.week, children: week.map((date) => {
+              const isCurrentMonth = isSameMonth(date, displayedMonth);
+              const isSelected = value !== null && isSameDay(date, value);
+              const isToday = isSameDay(date, /* @__PURE__ */ new Date());
+              const isFocusTarget = isSameDay(date, focusedDate);
+              const disabled = !isWithinRange(date, minDate, maxDate);
+              return /* @__PURE__ */ jsx62("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx62(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: isFocusTarget ? 0 : -1,
+                  disabled,
+                  "aria-current": isToday ? "date" : void 0,
+                  "aria-label": formatDateLabel(date),
+                  className: [
+                    styles33.day,
+                    !isCurrentMonth ? styles33.dayOutside : "",
+                    isSelected ? styles33.daySelected : "",
+                    isToday && !isSelected ? styles33.dayToday : ""
+                  ].filter(Boolean).join(" "),
+                  onClick: () => selectDate(date),
+                  onFocus: () => setFocusedDate(date),
+                  children: date.getDate()
+                }
+              ) }, date.toISOString());
+            }) }, firstDayOfWeek.toISOString());
+          })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/DatePicker/DatePicker.tsx
+import { useState as useState11 } from "react";
+import styles34 from "./DatePicker.module.css";
+import { Fragment as Fragment2, jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
+var POPOVER_WIDTH = 320;
+function DatePicker({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  placeholder = "Select date",
+  "aria-label": ariaLabel,
+  disabled = false
+}) {
+  const [open, setOpen] = useState11(false);
+  const isMobile = useIsMobile();
+  function handleSelect(date) {
+    onChange(date);
+    setOpen(false);
+  }
+  const trigger = /* @__PURE__ */ jsxs45(
+    "button",
+    {
+      type: "button",
+      className: styles34.trigger,
+      disabled,
+      "aria-label": ariaLabel,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      onClick: () => setOpen((o) => !o),
+      children: [
+        /* @__PURE__ */ jsx63("span", { className: value ? styles34.triggerValue : styles34.triggerPlaceholder, children: value ? formatDateShort(value) : placeholder }),
+        /* @__PURE__ */ jsx63(Icon, { name: "calendar", size: "sm", "aria-hidden": true })
+      ]
+    }
+  );
+  const calendar = /* @__PURE__ */ jsx63(
+    Calendar,
+    {
+      value,
+      onChange: handleSelect,
+      minDate,
+      maxDate,
+      "aria-label": ariaLabel
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs45(Fragment2, { children: [
+      trigger,
+      /* @__PURE__ */ jsx63(Drawer, { open, onClose: () => setOpen(false), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx63("div", { className: styles34.drawerBody, children: calendar }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx63(
+    Popover,
+    {
+      trigger,
+      open,
+      onClose: () => setOpen(false),
+      "aria-label": ariaLabel,
+      width: POPOVER_WIDTH,
+      children: /* @__PURE__ */ jsx63("div", { className: styles34.popoverBody, children: calendar })
+    }
+  );
+}
 export {
   Avatar,
   Badge,
   Button,
+  Calendar,
   Card,
   Checkbox,
+  CodeTextarea,
+  ConfirmDialog,
+  DatePicker,
   Dialog,
   DragHandleRow,
   Drawer,
@@ -1500,17 +2669,29 @@ export {
   FormField,
   Icon,
   Input,
+  MOBILE_BREAKPOINT_PX,
+  Menu,
   NavTabs,
+  OverlayHeader,
   PageHeader,
   Popover,
   SegmentedControl,
   Select,
+  Sheet,
   Spinner,
+  SplitPane,
+  StatusBadge,
   SystemBanner,
   Tabs,
+  TagInput,
   Textarea,
   ToastProvider,
   Toggle,
   Tooltip,
+  useDoubleTapHandler,
+  useIsMobile,
+  useLongPress,
+  useOverlaySecondRow,
+  useSingleOrDoubleTap,
   useToast
 };