@estiva-app/ui 0.15.0 → 0.16.0

package/dist/index.js

@@ -789,6 +789,20 @@ function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className })
   ] });
 }
 
+// src/CommandPalette.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useEffect,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import { Dialog } from "@base-ui/react/dialog";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { IconLoader2 as IconLoader22, IconSearch } from "@tabler/icons-react";
+
 // src/ChipInput.tsx
 import { useMemo, useState as useState2 } from "react";
 import { Button as BaseButton4 } from "@base-ui/react/button";
@@ -1177,8 +1191,376 @@ function ChipInput({
 var GAP3 = 4;
 var VIEWPORT_PAD3 = 8;
 
+// src/EmptyState.tsx
+import { IconMessage2 } from "@tabler/icons-react";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function EmptyState({ icon, message, scope = "page", className }) {
+  if (scope === "section") {
+    return /* @__PURE__ */ jsx19("p", { className: cn("text-caption text-text-muted", className), children: message });
+  }
+  return /* @__PURE__ */ jsxs12("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
+    /* @__PURE__ */ jsx19("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx19(IconMessage2, { size: 16, stroke: 1.5 }) }),
+    /* @__PURE__ */ jsx19("p", { className: "text-body-2 text-text-secondary text-center", children: message })
+  ] });
+}
+
+// src/Field.tsx
+import { cloneElement, isValidElement } from "react";
+import { Field as BaseField } from "@base-ui/react/field";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var LINE_STYLES = {
+  helper: "text-caption text-text-muted",
+  warning: "text-caption text-warning-default",
+  error: "text-caption text-error-default"
+};
+function Field({ label, required = false, helper, error, children }) {
+  const control = required && isValidElement(children) ? cloneElement(children, {
+    "aria-required": children.props["aria-required"] ?? true
+  }) : children;
+  return /* @__PURE__ */ jsxs13(BaseField.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs13(BaseField.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
+      label,
+      required && /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1.5", children: [
+      control,
+      error != null ? /* @__PURE__ */ jsx20(BaseField.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx20(BaseField.Description, { className: LINE_STYLES.helper, children: helper }) : null
+    ] })
+  ] });
+}
+function FieldLine({ tone = "helper", children, className }) {
+  return /* @__PURE__ */ jsx20("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
+}
+
+// src/Skeleton.tsx
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+function SkeletonBar({ className, style }) {
+  return /* @__PURE__ */ jsx21("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
+}
+var ROW_BAR_WIDTHS = [150, 100, 170, 120, 90, 140, 110, 160];
+function SkeletonRow({ barWidth = 130 }) {
+  return /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
+    /* @__PURE__ */ jsx21(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
+    /* @__PURE__ */ jsx21(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
+  ] });
+}
+function SkeletonList({ rows = 8, className }) {
+  return /* @__PURE__ */ jsx21("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx21(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
+}
+
+// src/CommandPalette.tsx
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var PaletteContext = createContext2(null);
+function usePalette(part) {
+  const palette = useContext2(PaletteContext);
+  if (!palette) throw new Error(`[@estiva-app/ui] ${part} must be inside a CommandPalette.`);
+  return palette;
+}
+var CONTROL = 'input:not([type="hidden"]):not([tabindex="-1"]), textarea, button:not([tabindex="-1"]), [role="combobox"]';
+function firstControl(popup) {
+  if (!popup) return null;
+  const field = popup.querySelector("[data-command-palette-field]");
+  if (field) return field;
+  return popup.querySelector("[data-command-palette-fields]")?.querySelector(CONTROL) ?? null;
+}
+function CommandPalette({ open, onOpenChange, label, where, modKey = "Ctrl", children }) {
+  const popupRef = useRef2(null);
+  useEffect(() => {
+    if (!open) return;
+    const frame = requestAnimationFrame(() => {
+      const popup = popupRef.current;
+      const active = document.activeElement;
+      if (popup && (!active || active === document.body || active === popup)) firstControl(popup)?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  });
+  const context = useMemo2(() => ({ where, modKey, popupRef }), [where, modKey]);
+  return /* @__PURE__ */ jsx22(Dialog.Root, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs15(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx22(Dialog.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+    /* @__PURE__ */ jsx22(Dialog.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center pt-[16vh]", children: /* @__PURE__ */ jsx22(
+      Dialog.Popup,
+      {
+        ref: popupRef,
+        "aria-label": label,
+        initialFocus: () => firstControl(popupRef.current) ?? true,
+        onFocus: (e) => {
+          if (e.target === popupRef.current) firstControl(popupRef.current)?.focus();
+        },
+        className: "flex w-[658px] max-w-[calc(100vw-32px)] flex-col overflow-hidden rounded-lg border border-border-default bg-bg-elevated shadow-lg outline-none",
+        children: /* @__PURE__ */ jsx22(PaletteContext.Provider, { value: context, children })
+      }
+    ) })
+  ] }) });
+}
+function LevelChip({ chip, onBack }) {
+  return /* @__PURE__ */ jsx22(InputChip, { label: chip.label, leading: chip.leading, onRemove: onBack, removeLabel: `Leave ${chip.label}`, truncate: true, className: "max-w-[272px] shrink-0" });
+}
+function useBack(chip, popupRef) {
+  return () => {
+    if (!chip) return;
+    chip.onBack();
+    requestAnimationFrame(() => firstControl(popupRef.current)?.focus());
+  };
+}
+function Footer({ keys }) {
+  const { where } = usePalette("The footer");
+  return /* @__PURE__ */ jsxs15("div", { className: "flex h-9 shrink-0 items-center gap-4 border-t border-border-subtle px-5 text-caption text-text-secondary signal:font-mono signal:text-small signal:text-text-muted", children: [
+    /* @__PURE__ */ jsx22("span", { className: "min-w-0 flex-1 truncate", children: where }),
+    keys.map(([key, word]) => /* @__PURE__ */ jsxs15("span", { className: "flex shrink-0 items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx22(Kbd, { children: key }),
+      " ",
+      word
+    ] }, key))
+  ] });
+}
+var lowerFirst = (s) => s.charAt(0).toLowerCase() + s.slice(1);
+function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip, pending, empty, children }) {
+  const { modKey, popupRef } = usePalette("CommandPaletteSearch");
+  const back = useBack(chip, popupRef);
+  const items = useMemo2(() => groups.filter((g) => g.rows.length > 0).map((g) => ({ value: g.label, items: g.rows })), [groups]);
+  const rows = items.flatMap((g) => g.items);
+  const [litId, setLitId] = useState3();
+  const lit = litId === void 0 ? void 0 : rows.find((r) => r.id === litId);
+  const inputRef = useRef2(null);
+  const reported = useRef2({});
+  const settled = useRef2(null);
+  useLayoutEffect2(() => {
+    const before = settled.current;
+    const now = reported.current;
+    if (before?.id && now.reason === "none" && now.id !== before.id && before.query === query && before.level === chip?.label) {
+      const ids = rows.map((r) => r.id);
+      const want = ids.indexOf(before.id);
+      const at = now.id === void 0 ? -1 : ids.indexOf(now.id);
+      const input = inputRef.current;
+      if (input && want !== -1 && at !== -1) {
+        const key = want > at ? "ArrowDown" : "ArrowUp";
+        for (let step = 0; step < Math.abs(want - at); step++) {
+          input.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+        }
+      }
+    }
+    settled.current = { id: reported.current.id, query, level: chip?.label };
+  });
+  const onKeyDown = (e) => {
+    if (e.key === "Home" || e.key === "End") {
+      e.preventBaseUIHandler();
+      return;
+    }
+    const field = e.currentTarget;
+    const collapsed = field.selectionStart === field.selectionEnd;
+    const atStart = collapsed && field.selectionStart === 0;
+    const atEnd = collapsed && field.selectionEnd === field.value.length;
+    if (e.key === "Backspace" && (e.ctrlKey || e.metaKey)) {
+      if (lit?.onForget) {
+        e.preventDefault();
+        lit.onForget();
+      }
+      return;
+    }
+    if (e.key === "Backspace" && atStart && chip && !e.shiftKey && !e.altKey) {
+      e.preventDefault();
+      back();
+      return;
+    }
+    if (e.key === "Tab" && !e.shiftKey) {
+      e.preventDefault();
+      lit?.onGoIn?.();
+      return;
+    }
+    if (e.key === "ArrowRight" && atEnd && lit?.onGoIn && !e.shiftKey) {
+      e.preventDefault();
+      lit.onGoIn();
+    }
+  };
+  const keys = [
+    ...rows.length > 1 ? [["\u2191\u2193", "move"]] : [],
+    ...lit ? [lit.onGoIn ? ["Tab", "go in"] : ["Enter", "open"]] : [],
+    ...lit?.onForget ? [[`${modKey}+Backspace`, "forget"]] : [],
+    // Backspace goes back from the start of the field; it is named while the
+    // field is empty, when that is what it will do.
+    ...chip && query === "" ? [["Backspace", "back"]] : [],
+    ["Esc", "close"]
+  ];
+  return /* @__PURE__ */ jsxs15(
+    Autocomplete.Root,
+    {
+      items,
+      mode: "none",
+      inline: true,
+      open: true,
+      value: query,
+      onValueChange: (value, details) => {
+        if (details.reason === "item-press") return;
+        onQueryChange(value);
+      },
+      itemToStringValue: (row) => row.label,
+      autoHighlight: "always",
+      keepHighlight: true,
+      loopFocus: false,
+      onItemHighlighted: (row, details) => {
+        const id = row?.id;
+        reported.current = { id, reason: details.reason };
+        setLitId(id);
+      },
+      children: [
+        /* @__PURE__ */ jsxs15("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
+          /* @__PURE__ */ jsx22(IconSearch, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" }),
+          chip && /* @__PURE__ */ jsx22(LevelChip, { chip, onBack: back }),
+          /* @__PURE__ */ jsx22(
+            Autocomplete.Input,
+            {
+              ref: inputRef,
+              "data-command-palette-field": "",
+              placeholder,
+              "aria-label": placeholder,
+              onKeyDown,
+              className: "min-w-0 flex-1 bg-transparent text-input-value text-text-primary outline-none placeholder:text-text-muted"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs15(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col p-2", children: [
+          children != null && /* @__PURE__ */ jsx22("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children }),
+          /* @__PURE__ */ jsx22(Autocomplete.List, { className: "flex flex-col", children: (group) => /* @__PURE__ */ jsxs15(Autocomplete.Group, { items: group.items, className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx22(Autocomplete.GroupLabel, { className: "flex h-7 shrink-0 items-center px-3", children: /* @__PURE__ */ jsx22(SectionLabel, { className: "text-text-secondary", children: group.value }) }),
+            /* @__PURE__ */ jsx22(Autocomplete.Collection, { children: (row) => (
+              /* The menu row, as the list's own option — the way Select
+                 puts it on `Select.Item`. One row, two parts. */
+              /* @__PURE__ */ jsx22(Autocomplete.Item, { value: row, onClick: () => row.onSelect(), className: menuItemClassName({ size: "tall" }), children: /* @__PURE__ */ jsx22(
+                MenuItemBody,
+                {
+                  size: "tall",
+                  label: row.label,
+                  description: row.description,
+                  leading: /* @__PURE__ */ jsx22(RowLeading, { row }),
+                  submenu: !!row.onGoIn,
+                  hint: row.onGoIn ? /* @__PURE__ */ jsx22(Kbd, { children: "Tab" }) : /* @__PURE__ */ jsx22(EnterHint, {})
+                }
+              ) }, row.id)
+            ) })
+          ] }, group.value) }),
+          /* @__PURE__ */ jsx22(Autocomplete.Status, { className: "flex items-center gap-2 px-3 [&:not(:empty)]:h-8", children: pending && /* @__PURE__ */ jsxs15(Fragment3, { children: [
+            /* @__PURE__ */ jsx22(IconLoader22, { size: 12, stroke: 1.5, className: "shrink-0 animate-spin text-text-muted" }),
+            /* @__PURE__ */ jsx22("span", { className: "text-caption text-text-muted", children: pending })
+          ] }) }),
+          /* @__PURE__ */ jsx22(Autocomplete.Empty, { className: "flex items-center px-3 [&:not(:empty)]:min-h-10", children: empty && /* @__PURE__ */ jsx22(EmptyState, { scope: "section", message: empty }) })
+        ] }),
+        /* @__PURE__ */ jsx22(Footer, { keys })
+      ]
+    }
+  );
+}
+function RowLeading({ row }) {
+  if (row.icon != null) {
+    return /* @__PURE__ */ jsx22("span", { className: "flex size-8 items-center justify-center rounded-sm bg-bg-inset text-text-secondary", children: row.icon });
+  }
+  return /* @__PURE__ */ jsx22("span", { className: "flex size-8 items-center justify-center", children: row.leading });
+}
+var TEXT_TYPES = /* @__PURE__ */ new Set(["", "text", "search", "email", "url", "tel", "password", "number"]);
+function isTextField(el) {
+  if (el instanceof HTMLTextAreaElement) return true;
+  return el instanceof HTMLInputElement && TEXT_TYPES.has(el.getAttribute("type") ?? "") && el.getAttribute("role") !== "combobox" && el.tabIndex >= 0;
+}
+function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWaits, working, error, children }) {
+  const { modKey, popupRef } = usePalette("CommandPaletteForm");
+  const back = useBack(chip, popupRef);
+  const frameRef = useRef2(null);
+  const busy = !!working;
+  const busyRef = useRef2(busy);
+  busyRef.current = busy;
+  const returnTo = useRef2(null);
+  const firstInvalid = () => frameRef.current?.querySelector("[data-invalid]")?.querySelector(CONTROL) ?? null;
+  const submit = () => {
+    if (busyRef.current || submitWaits) return;
+    const active = document.activeElement;
+    returnTo.current = active instanceof HTMLElement && frameRef.current?.contains(active) ? active : null;
+    onSubmit();
+    requestAnimationFrame(() => {
+      if (!busyRef.current) firstInvalid()?.focus();
+    });
+  };
+  useLayoutEffect2(() => {
+    if (busy) {
+      frameRef.current?.focus();
+      return;
+    }
+    if (document.activeElement !== frameRef.current) return;
+    const was = returnTo.current;
+    const target = firstInvalid() ?? (was?.isConnected && !was.disabled ? was : null) ?? firstControl(popupRef.current);
+    target?.focus();
+  }, [busy]);
+  const backWorksFrom = (el) => {
+    const frame = frameRef.current;
+    if (!frame || busy || !el || !frame.contains(el)) return false;
+    if (isTextField(el)) return el.value === "";
+    return ![...frame.querySelectorAll("input, textarea")].some(isTextField);
+  };
+  const [backNamed, setBackNamed] = useState3(false);
+  const measure = () => setBackNamed(backWorksFrom(document.activeElement));
+  useLayoutEffect2(measure);
+  const onKeyDown = (e) => {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      submit();
+      return;
+    }
+    if (e.key === "Backspace" && !e.ctrlKey && !e.metaKey && !e.altKey && backWorksFrom(e.target)) {
+      e.preventDefault();
+      back();
+    }
+  };
+  const keys = [
+    ...!busy && !submitWaits ? [[`${modKey}+Enter`, lowerFirst(submitLabel)]] : [],
+    ...backNamed ? [["Backspace", "back"]] : [],
+    ["Esc", "close"]
+  ];
+  return /* @__PURE__ */ jsxs15("div", { ref: frameRef, tabIndex: -1, onKeyDown, onFocus: measure, onBlur: measure, onInput: measure, className: "flex min-h-0 flex-col outline-none", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
+      icon != null && /* @__PURE__ */ jsx22("span", { className: "flex shrink-0 items-center text-text-secondary", children: icon }),
+      /* @__PURE__ */ jsx22(LevelChip, { chip, onBack: back })
+    ] }),
+    /* @__PURE__ */ jsx22(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col px-5 py-4", children: /* @__PURE__ */ jsx22("fieldset", { "data-command-palette-fields": "", disabled: busy, className: "contents", children: /* @__PURE__ */ jsx22("div", { className: "flex flex-col gap-4", children }) }) }),
+    /* @__PURE__ */ jsxs15("div", { className: "flex shrink-0 items-center gap-3 px-5 pb-4", children: [
+      /* @__PURE__ */ jsx22("div", { className: "min-w-0 flex-1", children: working ? /* @__PURE__ */ jsx22(FieldLine, { children: working.line }) : error ? /* @__PURE__ */ jsx22(FieldLine, { tone: "error", children: error }) : null }),
+      /* @__PURE__ */ jsx22(
+        Button,
+        {
+          variant: "primary",
+          onClick: submit,
+          disabled: busy,
+          disabledReason: busy ? void 0 : submitWaits,
+          leadingIcon: busy ? /* @__PURE__ */ jsx22(IconLoader22, { size: 16, stroke: 1.5, className: "animate-spin" }) : void 0,
+          children: working ? working.button : submitLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx22(Footer, { keys })
+  ] });
+}
+var BAR_WIDTHS = ["w-4/5", "w-3/5", "w-2/3"];
+function CommandPaletteWorking({ children, bars = 2 }) {
+  return /* @__PURE__ */ jsxs15("div", { role: "status", className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs15("span", { className: "flex items-center gap-2 text-caption text-text-secondary", children: [
+      /* @__PURE__ */ jsx22(IconLoader22, { size: 14, stroke: 1.5, className: "shrink-0 animate-spin" }),
+      children
+    ] }),
+    BAR_WIDTHS.slice(0, bars).map((width) => /* @__PURE__ */ jsx22(SkeletonBar, { className: cn("h-3", width) }, width))
+  ] });
+}
+function CommandPaletteAnswer({ children, note }) {
+  const paragraphs = children.split(/\n\s*\n/).filter((p) => p.trim() !== "");
+  return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-2", children: [
+    paragraphs.map((paragraph, i) => /* @__PURE__ */ jsx22("p", { className: "whitespace-pre-wrap text-body-2 text-text-primary", children: paragraph.split(/\s*(\[\d+\])/).map(
+      (part, j) => /^\[\d+\]$/.test(part) ? /* @__PURE__ */ jsx22("sup", { className: "ml-0.5 font-mono text-small text-accent-primary", children: part.slice(1, -1) }, j) : part
+    ) }, i)),
+    note && /* @__PURE__ */ jsx22(FieldLine, { children: note })
+  ] });
+}
+function CommandPaletteQuote({ children }) {
+  return /* @__PURE__ */ jsx22("p", { className: "whitespace-pre-wrap border-l-2 border-border-default pl-3 text-body-2 text-text-primary", children });
+}
+
 // src/InlineChip.tsx
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var INLINE_CHIP_CLASSES = "inline-flex h-[1.4em] items-center gap-1 rounded-sm px-1 mx-0.5 align-top text-body-2 font-normal select-none";
 var INLINE_CHIP_TONE_CLASSES = {
   /** A thing or a place — anything that is not a person. */
@@ -1200,41 +1582,41 @@ function inlineChipClassName(tone, className) {
   return cn(INLINE_CHIP_CLASSES, INLINE_CHIP_TONE_CLASSES[tone], className);
 }
 function InlineChip({ tone = "neutral", icon, href, className, children, ...props }) {
-  const body = /* @__PURE__ */ jsxs12(Fragment3, { children: [
-    icon && /* @__PURE__ */ jsx19("span", { className: "flex size-4 shrink-0 items-center justify-center text-text-secondary", children: icon }),
+  const body = /* @__PURE__ */ jsxs16(Fragment4, { children: [
+    icon && /* @__PURE__ */ jsx23("span", { className: "flex size-4 shrink-0 items-center justify-center text-text-secondary", children: icon }),
     children
   ] });
   const classes = inlineChipClassName(tone, className);
   if (href === void 0) {
-    return /* @__PURE__ */ jsx19("span", { className: classes, ...props, children: body });
+    return /* @__PURE__ */ jsx23("span", { className: classes, ...props, children: body });
   }
-  return /* @__PURE__ */ jsx19("a", { href, className: classes, ...props, children: body });
+  return /* @__PURE__ */ jsx23("a", { href, className: classes, ...props, children: body });
 }
 
 // src/IdentityMenu.tsx
-import { useCallback, useRef as useRef2 } from "react";
+import { useCallback, useRef as useRef3 } from "react";
 
 // src/Divider.tsx
 import { Separator } from "@base-ui/react/separator";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function Divider({ orientation = "horizontal", label, tone = "default", className }) {
   if (label && orientation === "horizontal") {
     const line = tone === "warning" ? "bg-warning-muted" : "bg-border-subtle";
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs17(
       Separator,
       {
         orientation: "horizontal",
         "aria-label": label,
         className: cn("flex shrink-0 items-center gap-2 mx-3", className),
         children: [
-          /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) }),
-          /* @__PURE__ */ jsx20("span", { className: cn("shrink-0 text-caption", tone === "warning" ? "text-warning-default" : "text-text-muted"), children: label }),
-          /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) })
+          /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) }),
+          /* @__PURE__ */ jsx24("span", { className: cn("shrink-0 text-caption", tone === "warning" ? "text-warning-default" : "text-text-muted"), children: label }),
+          /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx24(
     Separator,
     {
       orientation,
@@ -1244,15 +1626,15 @@ function Divider({ orientation = "horizontal", label, tone = "default", classNam
 }
 
 // src/Person.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
   return (
     // gap-2: the face-to-name distance is one rule (8px) wherever a person
     // appears — Katerina, 2026-09-01, set on Person so PersonTrigger and every
     // row agree by construction.
-    /* @__PURE__ */ jsxs14("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-      /* @__PURE__ */ jsx21(Avatar, { name, src: picture, size }),
-      /* @__PURE__ */ jsx21("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
+    /* @__PURE__ */ jsxs18("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx25(Avatar, { name, src: picture, size }),
+      /* @__PURE__ */ jsx25("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
   );
 }
@@ -1260,10 +1642,10 @@ function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
 // src/PersonTrigger.tsx
 import { Button as BaseButton5 } from "@base-ui/react/button";
 import { IconChevronDown } from "@tabler/icons-react";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       BaseButton5,
       {
         type: "button",
@@ -1272,11 +1654,11 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
         "aria-label": props["aria-label"] ?? name ?? fallback,
         className: cn("cursor-pointer rounded-full", className),
         ...props,
-        children: /* @__PURE__ */ jsx22(Avatar, { name, src: picture, size: size ?? 36 })
+        children: /* @__PURE__ */ jsx26(Avatar, { name, src: picture, size: size ?? 36 })
       }
     );
   }
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs19(
     BaseButton5,
     {
       type: "button",
@@ -1294,18 +1676,18 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx22(Person, { name, picture, fallback, size: size ?? 22 }),
-        /* @__PURE__ */ jsx22(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+        /* @__PURE__ */ jsx26(Person, { name, picture, fallback, size: size ?? 22 }),
+        /* @__PURE__ */ jsx26(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
       ]
     }
   );
 }
 
 // src/IdentityMenu.tsx
-import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function IdentityPanel({ className, onClose = () => {
 }, ...rest }) {
-  return /* @__PURE__ */ jsx23(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx23(IdentityRows, { ...rest, onClose }) });
+  return /* @__PURE__ */ jsx27(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx27(IdentityRows, { ...rest, onClose }) });
 }
 function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, children }) {
   const act = (action) => () => {
@@ -1313,53 +1695,53 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
     action();
   };
   const appRows = typeof children === "function" ? children(onClose) : children;
-  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    /* @__PURE__ */ jsxs16(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
-      /* @__PURE__ */ jsx23(MenuRow, { children: /* @__PURE__ */ jsx23(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
-      /* @__PURE__ */ jsx23(Note, { children: signedIn ? "Your Estiva ID. The same person you are in every Estiva app." : "A key held by this browser only. Nobody else knows who you are." }),
-      me.email && /* @__PURE__ */ jsxs16(Note, { children: [
+  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
+    /* @__PURE__ */ jsxs20(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
+      /* @__PURE__ */ jsx27(MenuRow, { children: /* @__PURE__ */ jsx27(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
+      /* @__PURE__ */ jsx27(Note, { children: signedIn ? "Your Estiva ID. The same person you are in every Estiva app." : "A key held by this browser only. Nobody else knows who you are." }),
+      me.email && /* @__PURE__ */ jsxs20(Note, { children: [
         me.email,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
-    relayUrl && /* @__PURE__ */ jsxs16(Fragment4, { children: [
-      /* @__PURE__ */ jsx23(Divider, { className: "mx-0 my-2" }),
-      /* @__PURE__ */ jsxs16(MenuSection, { label: "Workspace", children: [
-        /* @__PURE__ */ jsx23(MenuRow, { children: /* @__PURE__ */ jsx23("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
-        /* @__PURE__ */ jsx23(Note, { children: "Everyone on this relay shares this workspace, in every app." })
+    relayUrl && /* @__PURE__ */ jsxs20(Fragment5, { children: [
+      /* @__PURE__ */ jsx27(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsxs20(MenuSection, { label: "Workspace", children: [
+        /* @__PURE__ */ jsx27(MenuRow, { children: /* @__PURE__ */ jsx27("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
+        /* @__PURE__ */ jsx27(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
-    appRows && /* @__PURE__ */ jsxs16(Fragment4, { children: [
-      /* @__PURE__ */ jsx23(Divider, { className: "mx-0 my-2" }),
+    appRows && /* @__PURE__ */ jsxs20(Fragment5, { children: [
+      /* @__PURE__ */ jsx27(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
-    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx23(Divider, { className: "mx-0 my-2" }) : null,
-    signedIn && idBase && /* @__PURE__ */ jsx23(
+    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx27(Divider, { className: "mx-0 my-2" }) : null,
+    signedIn && idBase && /* @__PURE__ */ jsx27(
       MenuItem,
       {
         label: "Edit your profile in Estiva ID",
         onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
       }
     ),
-    onCopyKey && /* @__PURE__ */ jsx23(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
-    idBase && onSignOut && /* @__PURE__ */ jsx23(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
+    onCopyKey && /* @__PURE__ */ jsx27(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
+    idBase && onSignOut && /* @__PURE__ */ jsx27(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
   ] });
 }
 function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
-  const actions = useRef2(null);
+  const actions = useRef3(null);
   const close = useCallback(() => actions.current?.close(), []);
   return (
     /* The wrapper carries the caller's `className` and nothing else. It used
        to be `relative`, because the panel was positioned against it; the panel
        hangs from the trigger and portals now, so a positioning context here
        would only be a lie about what this box does. */
-    /* @__PURE__ */ jsx23("div", { className, children: /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx27("div", { className, children: /* @__PURE__ */ jsx27(
       Menu,
       {
         align: "right",
         actionsRef: actions,
         className: "w-72",
-        trigger: /* @__PURE__ */ jsx23(
+        trigger: /* @__PURE__ */ jsx27(
           PersonTrigger,
           {
             name: me.name,
@@ -1370,7 +1752,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
             "aria-label": compact ? "Account menu" : void 0
           }
         ),
-        children: /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsx27(
           IdentityRows,
           {
             me,
@@ -1388,46 +1770,18 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
   );
 }
 function Note({ children }) {
-  return /* @__PURE__ */ jsx23("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
-}
-
-// src/Field.tsx
-import { cloneElement, isValidElement } from "react";
-import { Field as BaseField } from "@base-ui/react/field";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-var LINE_STYLES = {
-  helper: "text-caption text-text-muted",
-  warning: "text-caption text-warning-default",
-  error: "text-caption text-error-default"
-};
-function Field({ label, required = false, helper, error, children }) {
-  const control = required && isValidElement(children) ? cloneElement(children, {
-    "aria-required": children.props["aria-required"] ?? true
-  }) : children;
-  return /* @__PURE__ */ jsxs17(BaseField.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs17(BaseField.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
-      label,
-      required && /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-1.5", children: [
-      control,
-      error != null ? /* @__PURE__ */ jsx24(BaseField.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx24(BaseField.Description, { className: LINE_STYLES.helper, children: helper }) : null
-    ] })
-  ] });
-}
-function FieldLine({ tone = "helper", children, className }) {
-  return /* @__PURE__ */ jsx24("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
+  return /* @__PURE__ */ jsx27("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
 }
 
 // src/Select.tsx
 import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
 import { Select as BaseSelect } from "@base-ui/react/select";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var GAP4 = 4;
 var VIEWPORT_PAD4 = 8;
 function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, className, ...aria }) {
   const selected = options.find((o) => o.value === value);
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs21(
     BaseSelect.Root,
     {
       value,
@@ -1435,7 +1789,7 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
       disabled,
       modal: false,
       children: [
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsxs21(
           BaseSelect.Trigger,
           {
             "aria-label": ariaLabel,
@@ -1462,20 +1816,20 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs18("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-                selected?.leading && /* @__PURE__ */ jsx25("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-                /* @__PURE__ */ jsx25(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+              /* @__PURE__ */ jsxs21("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+                selected?.leading && /* @__PURE__ */ jsx28("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+                /* @__PURE__ */ jsx28(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
               ] }),
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx28(
                 BaseSelect.Icon,
                 {
-                  render: /* @__PURE__ */ jsx25(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                  render: /* @__PURE__ */ jsx28(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx25(BaseSelect.Portal, { children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28(BaseSelect.Portal, { children: /* @__PURE__ */ jsx28(
           BaseSelect.Positioner,
           {
             side: "bottom",
@@ -1484,25 +1838,25 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
             collisionPadding: VIEWPORT_PAD4,
             alignItemWithTrigger: false,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx25(
+            children: /* @__PURE__ */ jsx28(
               BaseSelect.Popup,
               {
-                render: /* @__PURE__ */ jsx25(MenuPanel, {}),
+                render: /* @__PURE__ */ jsx28(MenuPanel, {}),
                 className: "min-w-[var(--anchor-width)] p-0",
-                children: /* @__PURE__ */ jsx25(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs18(
+                children: /* @__PURE__ */ jsx28(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs21(
                   BaseSelect.Item,
                   {
                     value: option.value,
                     className: cn(menuItemClassName({ size: "default" }), "justify-between data-[selected]:font-medium"),
                     children: [
-                      /* @__PURE__ */ jsxs18("span", { className: "flex min-w-0 items-center gap-2", children: [
-                        option.leading && /* @__PURE__ */ jsx25("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                        /* @__PURE__ */ jsx25(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
+                      /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 items-center gap-2", children: [
+                        option.leading && /* @__PURE__ */ jsx28("span", { className: "flex shrink-0 items-center", children: option.leading }),
+                        /* @__PURE__ */ jsx28(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
                       ] }),
-                      /* @__PURE__ */ jsx25(
+                      /* @__PURE__ */ jsx28(
                         BaseSelect.ItemIndicator,
                         {
-                          render: /* @__PURE__ */ jsx25(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                          render: /* @__PURE__ */ jsx28(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
                         }
                       )
                     ]
@@ -1521,9 +1875,9 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
 // src/TextInput.tsx
 import { forwardRef } from "react";
 import { Input } from "@base-ui/react/input";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var TextInput = forwardRef(function TextInput2({ className, type = "text", size = "default", ...props }, ref) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx29(
     Input,
     {
       ref,
@@ -1547,13 +1901,13 @@ var TextInput = forwardRef(function TextInput2({ className, type = "text", size
 // src/Textarea.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { Field as BaseField2 } from "@base-ui/react/field";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx30(
     BaseField2.Control,
     {
       ref,
-      render: /* @__PURE__ */ jsx27("textarea", {}),
+      render: /* @__PURE__ */ jsx30("textarea", {}),
       className: cn(
         "bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2",
         "text-input-value text-text-primary placeholder:text-text-muted",
@@ -1568,27 +1922,27 @@ var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
 });
 
 // src/ConfirmDialog.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/DialogShell.tsx
-import { useRef as useRef3 } from "react";
-import { Dialog } from "@base-ui/react/dialog";
+import { useRef as useRef4 } from "react";
+import { Dialog as Dialog2 } from "@base-ui/react/dialog";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { IconX as IconX4 } from "@tabler/icons-react";
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, bodyMaxHeight, width = 502, alert = false }) {
-  const Parts = alert ? AlertDialog : Dialog;
-  const popupRef = useRef3(null);
-  return /* @__PURE__ */ jsx28(
+  const Parts = alert ? AlertDialog : Dialog2;
+  const popupRef = useRef4(null);
+  return /* @__PURE__ */ jsx31(
     Parts.Root,
     {
       open: true,
       onOpenChange: (open) => {
         if (!open) onClose();
       },
-      children: /* @__PURE__ */ jsxs19(Parts.Portal, { children: [
-        /* @__PURE__ */ jsx28(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-        /* @__PURE__ */ jsx28("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsxs22(Parts.Portal, { children: [
+        /* @__PURE__ */ jsx31(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+        /* @__PURE__ */ jsx31("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs22(
           Parts.Popup,
           {
             ref: popupRef,
@@ -1597,16 +1951,16 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
             className: "bg-bg-elevated border border-border-subtle rounded-lg shadow-lg pointer-events-auto flex flex-col overflow-hidden outline-none",
             style: { width },
             children: [
-              /* @__PURE__ */ jsxs19("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
-                headerContent ?? /* @__PURE__ */ jsx28(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx28("span", {}), children: title }),
-                /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsxs22("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
+                headerContent ?? /* @__PURE__ */ jsx31(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx31("span", {}), children: title }),
+                /* @__PURE__ */ jsx31(
                   Parts.Close,
                   {
-                    render: /* @__PURE__ */ jsx28(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx28(IconX4, { size: 16, stroke: 1.5 }) })
+                    render: /* @__PURE__ */ jsx31(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx31(IconX4, { size: 16, stroke: 1.5 }) })
                   }
                 )
               ] }),
-              bodyMaxHeight ? /* @__PURE__ */ jsx28(
+              bodyMaxHeight ? /* @__PURE__ */ jsx31(
                 ScrollArea,
                 {
                   className: cn(footer != null && "border-b border-border-subtle"),
@@ -1614,8 +1968,8 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
                   contentClassName: cn("pl-5 pr-4 py-4", bodyClassName),
                   children
                 }
-              ) : /* @__PURE__ */ jsx28("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
-              footer != null && /* @__PURE__ */ jsx28("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
+              ) : /* @__PURE__ */ jsx31("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
+              footer != null && /* @__PURE__ */ jsx31("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
             ]
           }
         ) })
@@ -1625,9 +1979,9 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
 }
 
 // src/ConfirmDialog.tsx
-import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
-  const [busy, setBusy] = useState3(false);
+  const [busy, setBusy] = useState4(false);
   const confirm = async () => {
     setBusy(true);
     try {
@@ -1637,16 +1991,16 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32(
     DialogShell,
     {
       alert: true,
       title,
       onClose,
       bodyClassName: "flex flex-col gap-3 text-body-2 text-text-primary",
-      footer: /* @__PURE__ */ jsxs20(Fragment5, { children: [
-        /* @__PURE__ */ jsx29(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx29(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
+      footer: /* @__PURE__ */ jsxs23(Fragment6, { children: [
+        /* @__PURE__ */ jsx32(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx32(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
       children
     }
@@ -1654,16 +2008,16 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 }
 
 // src/EditableText.tsx
-import { useEffect, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect2, useRef as useRef5, useState as useState5 } from "react";
 import { Field as BaseField3 } from "@base-ui/react/field";
 import { Input as Input2 } from "@base-ui/react/input";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
-  const [editing, setEditing] = useState4(false);
-  const [draft, setDraft] = useState4(value);
-  const [busy, setBusy] = useState4(false);
-  const fieldRef = useRef4(null);
-  useEffect(() => {
+  const [editing, setEditing] = useState5(false);
+  const [draft, setDraft] = useState5(value);
+  const [busy, setBusy] = useState5(false);
+  const fieldRef = useRef5(null);
+  useEffect2(() => {
     if (editing) {
       fieldRef.current?.focus();
       fieldRef.current?.select();
@@ -1715,7 +2069,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         written and never read. Read-only, this is a line of text: whatever
         names the region around it (a `Field`, a `Property`) names this too.
       */
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx33(
         "div",
         {
           className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
@@ -1725,11 +2079,11 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     );
   }
   if (editing) {
-    return multiline ? /* @__PURE__ */ jsx30(
+    return multiline ? /* @__PURE__ */ jsx33(
       BaseField3.Control,
       {
         ref: fieldRef,
-        render: /* @__PURE__ */ jsx30("textarea", { rows: 4 }),
+        render: /* @__PURE__ */ jsx33("textarea", { rows: 4 }),
         "aria-label": label,
         value: draft,
         disabled: busy,
@@ -1738,7 +2092,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         onBlur: () => void commit(),
         className: fieldClass
       }
-    ) : /* @__PURE__ */ jsx30(
+    ) : /* @__PURE__ */ jsx33(
       Input2,
       {
         ref: fieldRef,
@@ -1752,7 +2106,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
       }
     );
   }
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx33(
     "button",
     {
       type: "button",
@@ -1769,22 +2123,9 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
   );
 }
 
-// src/EmptyState.tsx
-import { IconMessage2 } from "@tabler/icons-react";
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
-function EmptyState({ icon, message, scope = "page", className }) {
-  if (scope === "section") {
-    return /* @__PURE__ */ jsx31("p", { className: cn("text-caption text-text-muted", className), children: message });
-  }
-  return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
-    /* @__PURE__ */ jsx31("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx31(IconMessage2, { size: 16, stroke: 1.5 }) }),
-    /* @__PURE__ */ jsx31("p", { className: "text-body-2 text-text-secondary text-center", children: message })
-  ] });
-}
-
 // src/ProgressBar.tsx
 import { Progress } from "@base-ui/react/progress";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var TRACK_CLASSES = {
   default: "h-1.5 w-full overflow-hidden rounded-full bg-bg-inset",
   // 4px, Katerina's ruling of 14 September; Peek's own bar is 3px until it takes this one.
@@ -1797,33 +2138,17 @@ var INDICATOR_CLASSES = {
 function ProgressBar({ value, max, label, variant = "default", className }) {
   return (
     // `max={0}` needs no guard: Base UI reads the 0/0 share as an empty bar.
-    /* @__PURE__ */ jsx32(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx32(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx32(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
+    /* @__PURE__ */ jsx34(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx34(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx34(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
   );
 }
 
-// src/Skeleton.tsx
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
-function SkeletonBar({ className, style }) {
-  return /* @__PURE__ */ jsx33("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
-}
-var ROW_BAR_WIDTHS = [150, 100, 170, 120, 90, 140, 110, 160];
-function SkeletonRow({ barWidth = 130 }) {
-  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
-    /* @__PURE__ */ jsx33(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
-    /* @__PURE__ */ jsx33(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
-  ] });
-}
-function SkeletonList({ rows = 8, className }) {
-  return /* @__PURE__ */ jsx33("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx33(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
-}
-
 // src/Breadcrumb.tsx
-import { Fragment as Fragment6, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState5 } from "react";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment7, useCallback as useCallback2, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState6 } from "react";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
-  const navRef = useRef5(null);
-  const labelRefs = useRef5([]);
-  const [truncated, setTruncated] = useState5(/* @__PURE__ */ new Set());
+  const navRef = useRef6(null);
+  const labelRefs = useRef6([]);
+  const [truncated, setTruncated] = useState6(/* @__PURE__ */ new Set());
   const measure = useCallback2(() => {
     const next = /* @__PURE__ */ new Set();
     labelRefs.current.forEach((el, index) => {
@@ -1831,7 +2156,7 @@ function Breadcrumb({ items, className }) {
     });
     setTruncated((prev) => prev.size === next.size && [...next].every((i) => prev.has(i)) ? prev : next);
   }, []);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     measure();
     const nav = navRef.current;
     if (!nav || typeof ResizeObserver === "undefined") return;
@@ -1839,7 +2164,7 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx34("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-body-2", className), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx35("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-body-2", className), children: items.map((item, index) => {
     const last = index === items.length - 1;
     const tone = item.muted || last && item.mono ? "text-text-muted" : last ? "text-text-primary" : "text-text-secondary";
     const text = cn(
@@ -1853,24 +2178,29 @@ function Breadcrumb({ items, className }) {
     const setLabelRef = (el) => {
       labelRefs.current[index] = el;
     };
-    const crumb = item.href ? /* @__PURE__ */ jsx34("a", { ref: setLabelRef, href: item.href, onClick: item.onClick, className: cn(text, "hover:text-text-primary"), children: item.label }) : /* @__PURE__ */ jsx34("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
-    return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-      index > 0 && /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
-      item.icon && /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
+    const crumb = item.href ? (
+      // `plain` adds no look of its own: a crumb keeps the trail's size and
+      // tone, and brightens on hover. The package's own Link, so a trail
+      // follows whatever a link learns to do (UIG-5).
+      /* @__PURE__ */ jsx35(Link, { ref: setLabelRef, variant: "plain", href: item.href, onClick: item.onClick, className: cn(text, "hover:text-text-primary"), children: item.label })
+    ) : /* @__PURE__ */ jsx35("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+    return /* @__PURE__ */ jsxs24(Fragment7, { children: [
+      index > 0 && /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+      item.icon && /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
       truncated.has(index) ? (
         // `min-w-0 shrink` undoes the wrapper's own shrink-0 — the crumb
         // must keep truncating inside it, or wrapping it would widen the
         // trail and the tooltip would never be needed again.
-        /* @__PURE__ */ jsx34(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+        /* @__PURE__ */ jsx35(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
       ) : crumb
     ] }, `${item.label}-${index}`);
   }) });
 }
 
 // src/NavItem.tsx
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "a",
     {
       href,
@@ -1885,27 +2215,27 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx35("span", { className: "flex shrink-0 items-center", children: icon }),
-        /* @__PURE__ */ jsx35("span", { className: "flex-1 truncate", children: label }),
-        count ? /* @__PURE__ */ jsx35(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx35("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+        icon && /* @__PURE__ */ jsx36("span", { className: "flex shrink-0 items-center", children: icon }),
+        /* @__PURE__ */ jsx36("span", { className: "flex-1 truncate", children: label }),
+        count ? /* @__PURE__ */ jsx36(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx36("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
       ]
     }
   );
 }
 
 // src/Popover.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var GAP5 = 4;
 var VIEWPORT_PAD5 = 8;
 function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className, contentClassName, maxHeight }) {
-  const anchorTarget = useMemo2(() => {
+  const anchorTarget = useMemo3(() => {
     if (!anchor) return void 0;
     if (anchor instanceof Element) return anchor;
     return { getBoundingClientRect: () => anchor };
   }, [anchor]);
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     BasePopover.Root,
     {
       open,
@@ -1913,8 +2243,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
       actionsRef,
       modal: false,
       children: [
-        trigger && /* @__PURE__ */ jsx36(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
-        /* @__PURE__ */ jsx36(BasePopover.Portal, { children: /* @__PURE__ */ jsx36(
+        trigger && /* @__PURE__ */ jsx37(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
+        /* @__PURE__ */ jsx37(BasePopover.Portal, { children: /* @__PURE__ */ jsx37(
           BasePopover.Positioner,
           {
             anchor: anchorTarget,
@@ -1923,15 +2253,15 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
             sideOffset: GAP5,
             collisionPadding: VIEWPORT_PAD5,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx36(
+            children: /* @__PURE__ */ jsx37(
               BasePopover.Popup,
               {
                 "aria-label": ariaLabel,
                 initialFocus: trigger ? void 0 : false,
                 finalFocus,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx36(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx36(
+                render: /* @__PURE__ */ jsx37(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx37(
                   ScrollArea,
                   {
                     viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
@@ -1950,9 +2280,9 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
 
 // src/Toolbar.tsx
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx37(
+  const strip = /* @__PURE__ */ jsx38(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -1963,24 +2293,24 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx37(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx38(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx37(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx38(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
 function ToolbarInput({ size, ...props }) {
-  return /* @__PURE__ */ jsx37(BaseToolbar.Input, { render: /* @__PURE__ */ jsx37(TextInput, { size }), ...props });
+  return /* @__PURE__ */ jsx38(BaseToolbar.Input, { render: /* @__PURE__ */ jsx38(TextInput, { size }), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -1990,9 +2320,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx38(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx39(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
     /*
               A `ToolbarButton`, not a button in a tooltip wrapper. The wrapper
               would become the toolbar's item and the button inside it would never
@@ -2002,14 +2332,14 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
               The tooltip names it for a pointer, `aria-label` for everything else,
               and both say the meaning rather than the glyph.
             */
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7 text-h3 leading-none",
-        children: /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", children: option.emoji })
+        children: /* @__PURE__ */ jsx39("span", { "aria-hidden": "true", children: option.emoji })
       },
       option.emoji
     )
@@ -2018,23 +2348,23 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
 
 // src/PreviewCard.tsx
 import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 var GAP6 = 12;
 var VIEWPORT_PAD6 = 8;
 var OPEN_DELAY2 = 350;
 var CLOSE_DELAY = 200;
 function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, closeDelay = CLOSE_DELAY, className, wrapperClassName }) {
-  return /* @__PURE__ */ jsxs26(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs27(BasePreviewCard.Root, { children: [
+    /* @__PURE__ */ jsx40(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx39("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx40("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx39(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx40(
       BasePreviewCard.Positioner,
       {
         side,
@@ -2042,12 +2372,12 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
         sideOffset: GAP6,
         collisionPadding: VIEWPORT_PAD6,
         className: "z-50 data-[anchor-hidden]:hidden",
-        children: /* @__PURE__ */ jsx39(
+        children: /* @__PURE__ */ jsx40(
           BasePreviewCard.Popup,
           {
             className: cn("w-[360px] p-3 outline-none", className),
-            render: /* @__PURE__ */ jsx39(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx39(ScrollArea, { viewportClassName: "max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]", contentClassName: "flex flex-col gap-3 [&>*]:shrink-0", children: content })
+            render: /* @__PURE__ */ jsx40(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx40(ScrollArea, { viewportClassName: "max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]", contentClassName: "flex flex-col gap-3 [&>*]:shrink-0", children: content })
           }
         )
       }
@@ -2056,15 +2386,15 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx40("nav", { "aria-label": ariaLabel, className: cn("flex w-16 shrink-0 flex-col items-start gap-2 px-2 py-3", className), children });
+  return /* @__PURE__ */ jsx41("nav", { "aria-label": ariaLabel, className: cn("flex w-16 shrink-0 flex-col items-start gap-2 px-2 py-3", className), children });
 }
 
 // src/RailItem.tsx
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "a",
     {
       href,
@@ -2072,14 +2402,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
       className: cn("group flex w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           "div",
           {
             className: cn(
               "flex items-center justify-center rounded-lg p-2 transition-colors",
               active ? "bg-bg-selected" : "group-hover:bg-bg-hover"
             ),
-            children: /* @__PURE__ */ jsx41(
+            children: /* @__PURE__ */ jsx42(
               "span",
               {
                 className: cn(
@@ -2091,27 +2421,27 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx41("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx42("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Sidebar.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "nav",
     {
       "aria-label": ariaLabel,
       className: cn("flex w-60 shrink-0 flex-col border-r border-border-default bg-bg-surface", className),
-      children: /* @__PURE__ */ jsx42(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-px px-2.5 py-3", children })
+      children: /* @__PURE__ */ jsx43(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-px px-2.5 py-3", children })
     }
   );
 }
 
 // src/Property.tsx
-import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var VALUE_CLASSES = "contents";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
@@ -2119,23 +2449,23 @@ function Property({ label, layout = "row", children, className }) {
       // gap-3 — the one label-above-content distance (Katerina, 2026-09-01):
       // Peek's topic-details sections already sit at 12px, Ship's rail was
       // 6px, and unifying means the bigger, calmer one.
-      /* @__PURE__ */ jsxs28("dl", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx43("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx43("dd", { className: VALUE_CLASSES, children })
+      /* @__PURE__ */ jsxs29("dl", { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsx44("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx44("dd", { className: VALUE_CLASSES, children })
       ] })
     );
   }
-  return /* @__PURE__ */ jsxs28("dl", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx43("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
-    /* @__PURE__ */ jsx43("dd", { className: VALUE_CLASSES, children })
+  return /* @__PURE__ */ jsxs29("dl", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx44("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx44("dd", { className: VALUE_CLASSES, children })
   ] });
 }
 
 // src/Reaction.tsx
 import { Toggle } from "@base-ui/react/toggle";
-import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     Toggle,
     {
       pressed,
@@ -2157,8 +2487,8 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
-        /* @__PURE__ */ jsx44("span", { className: "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums", children: count })
+        /* @__PURE__ */ jsx45("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
+        /* @__PURE__ */ jsx45("span", { className: "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums", children: count })
       ]
     }
   );
@@ -2167,9 +2497,9 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
 // src/SearchInput.tsx
 import "react";
 import { Input as Input3 } from "@base-ui/react/input";
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: cn(
@@ -2179,7 +2509,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           Input3,
           {
             className: "flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none",
@@ -2187,7 +2517,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx45(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx46(Kbd, { children: shortcut })
       ]
     }
   );
@@ -2196,17 +2526,17 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
 // src/SectionHeader.tsx
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment7, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", render, className }) {
   const titleElement = useRender({
-    render: render ?? (chevron ? /* @__PURE__ */ jsx46("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx46("span", {})),
+    render: render ?? (chevron ? /* @__PURE__ */ jsx47("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx47("span", {})),
     props: {
       // `text-left`: a button centres its text. `h-full` and `flex-1`: the
       // whole row up to the actions is the hit target, as it was when the
       // row itself carried the click.
       className: "flex h-full min-w-0 flex-1 items-center gap-1 text-left",
-      children: /* @__PURE__ */ jsxs31(Fragment7, { children: [
-        chevron && /* @__PURE__ */ jsx46(
+      children: /* @__PURE__ */ jsxs32(Fragment8, { children: [
+        chevron && /* @__PURE__ */ jsx47(
           IconChevronRight2,
           {
             size: 12,
@@ -2214,11 +2544,11 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
             className: cn("shrink-0 text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
           }
         ),
-        /* @__PURE__ */ jsx46(SectionLabel, { children: title })
+        /* @__PURE__ */ jsx47(SectionLabel, { children: title })
       ] })
     }
   });
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: cn(
@@ -2231,15 +2561,15 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
       ),
       children: [
         titleElement,
-        trailing != null && /* @__PURE__ */ jsx46("div", { className: "flex shrink-0 items-center", children: trailing }),
-        actions && actions.length > 0 && /* @__PURE__ */ jsx46(
+        trailing != null && /* @__PURE__ */ jsx47("div", { className: "flex shrink-0 items-center", children: trailing }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx47(
           "div",
           {
             className: cn(
               "-mr-1 flex shrink-0 items-center gap-1",
               showActions === "hover" && "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
             ),
-            children: actions.map((action) => /* @__PURE__ */ jsx46(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
+            children: actions.map((action) => /* @__PURE__ */ jsx47(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
           }
         )
       ]
@@ -2248,9 +2578,9 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
 }
 
 // src/CollapsibleSection.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -2270,21 +2600,21 @@ function writeStored(key, open) {
   }
 }
 function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, children, className, contentClassName }) {
-  const [openState, setOpenState] = useState6(() => readStored(storageKey) ?? defaultOpen);
+  const [openState, setOpenState] = useState7(() => readStored(storageKey) ?? defaultOpen);
   const open = openProp ?? openState;
   const setOpen = (next) => {
     setOpenState(next);
     writeStored(storageKey, next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs32(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx47(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx47(Collapsible.Trigger, {}) }),
-    /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs33(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx48(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx48(Collapsible.Trigger, {}) }),
+    /* @__PURE__ */ jsx48(
       Collapsible.Panel,
       {
         hiddenUntilFound: true,
         className: "h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0",
-        children: /* @__PURE__ */ jsx47("div", { className: cn("flex flex-col", contentClassName), children })
+        children: /* @__PURE__ */ jsx48("div", { className: cn("flex flex-col", contentClassName), children })
       }
     )
   ] });
@@ -2292,9 +2622,9 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     BaseTabs.Root,
     {
       value: active,
@@ -2302,14 +2632,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx48(
+      children: /* @__PURE__ */ jsx49(
         BaseTabs.List,
         {
           activateOnFocus: true,
           "aria-label": aria["aria-label"],
           "aria-labelledby": aria["aria-labelledby"],
           className: "flex items-center gap-2",
-          children: tabs.map((tab) => /* @__PURE__ */ jsxs33(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs34(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -2322,9 +2652,9 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs33("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs34("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx48("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx49("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
               ]
             },
@@ -2337,10 +2667,10 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 }
 
 // src/Toast.tsx
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3 } from "react";
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo4 } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { IconAlertCircle as IconAlertCircle2, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
-import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
 var SURFACE_STYLES = {
   success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
   brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
@@ -2365,13 +2695,6 @@ var ICON_STYLES = {
   // approximated here (D16).
   error: "signal:text-error-default"
 };
-var ACTION_BORDER_STYLES = {
-  success: "signal:border signal:border-border-default signal:hover:border-border-strong",
-  brand: "signal:border signal:border-border-default signal:hover:border-border-strong",
-  neutral: "border border-border-default",
-  warning: "signal:border signal:border-border-default signal:hover:border-border-strong",
-  error: "signal:border signal:border-border-default signal:hover:border-border-strong"
-};
 var LABEL_CLASSES = "text-body-2 text-text-primary whitespace-nowrap";
 var pillClassName = (type, hasAction, className) => cn(
   "inline-flex items-center min-h-[32px] pl-2 py-1 rounded-lg shadow-lg",
@@ -2381,31 +2704,25 @@ var pillClassName = (type, hasAction, className) => cn(
   SURFACE_STYLES[type],
   className
 );
-var actionClassName = (type) => cn(
-  "h-6 flex items-center justify-center gap-1 px-1 py-1 rounded-md shrink-0 transition-colors",
-  ACTION_BORDER_STYLES[type],
-  type === "neutral" ? "hover:border-border-strong" : "hover:opacity-80"
-);
 function LeadingIcon({ type }) {
   const Icon = ICONS[type];
-  return /* @__PURE__ */ jsx49(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
+  return /* @__PURE__ */ jsx50(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
 }
-var ACTION_LABEL_CLASSES = "text-btn-small text-text-primary whitespace-nowrap";
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
-  return /* @__PURE__ */ jsxs34("div", { className: pillClassName(type, hasAction, className), children: [
-    /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2 shrink-0", children: [
-      leadingIcon && /* @__PURE__ */ jsx49(LeadingIcon, { type }),
-      /* @__PURE__ */ jsx49("span", { className: LABEL_CLASSES, children: label })
+  return /* @__PURE__ */ jsxs35("div", { className: pillClassName(type, hasAction, className), children: [
+    /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 shrink-0", children: [
+      leadingIcon && /* @__PURE__ */ jsx50(LeadingIcon, { type }),
+      /* @__PURE__ */ jsx50("span", { className: LABEL_CLASSES, children: label })
     ] }),
-    hasAction && /* @__PURE__ */ jsx49("button", { type: "button", onClick: onAction, className: actionClassName(type), children: /* @__PURE__ */ jsx49("span", { className: ACTION_LABEL_CLASSES, children: actionLabel }) })
+    hasAction && /* @__PURE__ */ jsx50(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
-var ToastContext = createContext2(null);
+var ToastContext = createContext3(null);
 var VISIBLE_TOASTS = 3;
 function ToastProvider({ children }) {
-  const manager = useMemo3(() => BaseToast.createToastManager(), []);
-  const value = useMemo3(
+  const manager = useMemo4(() => BaseToast.createToastManager(), []);
+  const value = useMemo4(
     () => ({
       showToast: ({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, durationMs = 5e3 }) => manager.add({
         title: label,
@@ -2419,9 +2736,9 @@ function ToastProvider({ children }) {
     }),
     [manager]
   );
-  return /* @__PURE__ */ jsx49(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs34(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
+  return /* @__PURE__ */ jsx50(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs35(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
     children,
-    /* @__PURE__ */ jsx49(BaseToast.Portal, { children: /* @__PURE__ */ jsx49(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx49(ToastList, {}) }) })
+    /* @__PURE__ */ jsx50(BaseToast.Portal, { children: /* @__PURE__ */ jsx50(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx50(ToastList, {}) }) })
   ] }) });
 }
 function ToastList() {
@@ -2429,26 +2746,25 @@ function ToastList() {
   return toasts.map((toast) => {
     const type = toast.type ?? "neutral";
     const { leadingIcon = true, actionLabel, onAction } = toast.data ?? {};
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(
       BaseToast.Root,
       {
         toast,
         swipeDirection: ["left", "down"],
         className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
         children: [
-          /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2 shrink-0", children: [
-            leadingIcon && /* @__PURE__ */ jsx49(LeadingIcon, { type }),
-            /* @__PURE__ */ jsx49(BaseToast.Title, { render: /* @__PURE__ */ jsx49("span", {}), className: LABEL_CLASSES })
+          /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 shrink-0", children: [
+            leadingIcon && /* @__PURE__ */ jsx50(LeadingIcon, { type }),
+            /* @__PURE__ */ jsx50(BaseToast.Title, { render: /* @__PURE__ */ jsx50("span", {}), className: LABEL_CLASSES })
           ] }),
-          actionLabel && /* @__PURE__ */ jsx49(
+          actionLabel && /* @__PURE__ */ jsx50(
             BaseToast.Action,
             {
               onClick: () => {
                 onAction?.();
                 close(toast.id);
               },
-              className: actionClassName(type),
-              children: /* @__PURE__ */ jsx49("span", { className: ACTION_LABEL_CLASSES, children: actionLabel })
+              render: /* @__PURE__ */ jsx50(Button, { variant: "outlined", size: "small", children: actionLabel })
             }
           )
         ]
@@ -2458,7 +2774,7 @@ function ToastList() {
   });
 }
 function useToast() {
-  const ctx = useContext2(ToastContext);
+  const ctx = useContext3(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 }
@@ -2475,6 +2791,12 @@ export {
   Chip,
   ChipInput,
   CollapsibleSection,
+  CommandPalette,
+  CommandPaletteAnswer,
+  CommandPaletteForm,
+  CommandPaletteQuote,
+  CommandPaletteSearch,
+  CommandPaletteWorking,
   ConfirmDialog,
   DialogShell,
   Divider,