@estiva-app/ui 0.17.0 → 0.19.0

package/dist/index.js

@@ -38,7 +38,7 @@ function cn(...inputs) {
 // src/ScrollArea.tsx
 import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import { jsx, jsxs } from "react/jsx-runtime";
-var BAR = "flex touch-none select-none rounded-full opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0";
+var BAR = "z-10 flex touch-none select-none rounded-full opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0";
 var THUMB = "rounded-full bg-border-strong";
 function ScrollArea({ orientation = "vertical", className, viewportClassName, contentClassName, viewportRef, onScroll, children }) {
   const vertical = orientation !== "horizontal";
@@ -755,7 +755,8 @@ function squareClasses(checked, disabled, interactive, className) {
 }
 var tickClasses = (checked) => cn("flex", !checked && "invisible");
 var WORDS_CLASSES = "text-body-2 text-text-primary";
-function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, className, ...aria }) {
+var ROW_CLASSES = "flex shrink-0 items-center gap-3 h-10 px-3 rounded-lg transition-colors";
+function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, row, leading, className, ...aria }) {
   const formBusy = useFormBusy();
   const disabled = ownDisabled || formBusy;
   if (!onChange) {
@@ -780,6 +781,13 @@ function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, cla
     }
   );
   if (label === void 0) return box;
+  if (row) {
+    return /* @__PURE__ */ jsx14(BaseField.Root, { disabled, children: /* @__PURE__ */ jsxs9(BaseField.Label, { className: cn(ROW_CLASSES, checked && "bg-bg-selected", !disabled && "cursor-pointer hover:bg-bg-hover"), children: [
+      leading,
+      /* @__PURE__ */ jsx14("span", { className: cn("flex-1 min-w-0 truncate", WORDS_CLASSES), children: label }),
+      box
+    ] }) });
+  }
   return /* @__PURE__ */ jsx14(BaseField.Root, { disabled, children: /* @__PURE__ */ jsxs9(BaseField.Label, { className: cn("flex items-center gap-2", !disabled && "cursor-pointer"), children: [
     box,
     /* @__PURE__ */ jsx14("span", { className: WORDS_CLASSES, children: label })
@@ -817,9 +825,9 @@ import {
   createContext as createContext3,
   useContext as useContext3,
   useEffect,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo2,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState3
 } from "react";
 import { Dialog } from "@base-ui/react/dialog";
@@ -1255,39 +1263,129 @@ function FieldLine({ tone = "helper", children, className }) {
   return /* @__PURE__ */ jsx20("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
 }
 
+// src/Form.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { Fieldset } from "@base-ui/react/fieldset";
+import { Form as BaseForm } from "@base-ui/react/form";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var CONTROL = 'input:not([type="hidden"]), textarea, select, button, [role="checkbox"], [role="combobox"], [tabindex]:not([tabindex="-1"])';
+var ONE_LINE = /* @__PURE__ */ new Set(["", "text", "search", "email", "url", "tel", "password", "number"]);
+function usable(element) {
+  return element instanceof HTMLElement && element.isConnected && element.matches(CONTROL) && !element.matches(":disabled") && element.getAttribute("aria-disabled") !== "true";
+}
+function firstInvalid(form) {
+  for (const marked of form.querySelectorAll("[data-invalid]")) {
+    if (usable(marked)) return marked;
+    const inside = Array.from(marked.querySelectorAll(CONTROL)).find(usable);
+    if (inside) return inside;
+  }
+  return void 0;
+}
+function Form({ onSubmit, busy: ownBusy = false, enterSends = true, className, children, ...props }) {
+  const outerBusy = useFormBusy();
+  const busy = ownBusy || outerBusy;
+  const form = useRef2(null);
+  const busyNow = useRef2(busy);
+  busyNow.current = busy;
+  const sender = useRef2(null);
+  const holding = useRef2(false);
+  const lastInside = useRef2(null);
+  useLayoutEffect2(() => {
+    const element = form.current;
+    if (!element) return;
+    if (busy) {
+      const active = document.activeElement;
+      const from = active && active !== element && element.contains(active) ? active : !active || active === document.body ? lastInside.current : null;
+      if (from?.isConnected) {
+        sender.current = from;
+        holding.current = true;
+        element.focus();
+      }
+      return;
+    }
+    if (!holding.current) return;
+    holding.current = false;
+    if (document.activeElement !== element && document.activeElement !== document.body) return;
+    const target = firstInvalid(element) ?? (usable(sender.current) ? sender.current : Array.from(element.querySelectorAll(CONTROL)).find(usable));
+    sender.current = null;
+    target?.focus();
+  }, [busy]);
+  const onKeyDown = (event) => {
+    props.onKeyDown?.(event);
+    if (event.key !== "Enter" || event.defaultPrevented || event.nativeEvent.isComposing) return;
+    const target = event.target;
+    const inInput = target instanceof HTMLInputElement;
+    if (inInput) event.preventDefault();
+    if (event.altKey || event.shiftKey) return;
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault();
+      form.current?.requestSubmit();
+      return;
+    }
+    if (!inInput) return;
+    const oneLine = ONE_LINE.has((target.getAttribute("type") ?? "").toLowerCase()) && target.getAttribute("role") !== "combobox";
+    if (enterSends && oneLine) form.current?.requestSubmit();
+  };
+  return /* @__PURE__ */ jsx21(
+    BaseForm,
+    {
+      ref: form,
+      ...props,
+      tabIndex: busy ? -1 : props.tabIndex,
+      className: cn("outline-none", className),
+      onFocus: (event) => {
+        if (event.target !== form.current) lastInside.current = event.target;
+        props.onFocus?.(event);
+      },
+      onBlur: (event) => {
+        const next = event.relatedTarget;
+        if (next && !form.current?.contains(next)) lastInside.current = null;
+        props.onBlur?.(event);
+      },
+      onKeyDown,
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (busyNow.current) return;
+        void onSubmit();
+      },
+      children: /* @__PURE__ */ jsx21(Fieldset.Root, { disabled: busy, className: "contents", children: /* @__PURE__ */ jsx21(FormBusyContext.Provider, { value: busy, children }) })
+    }
+  );
+}
+
 // src/Skeleton.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function SkeletonBar({ className, style }) {
-  return /* @__PURE__ */ jsx21("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
+  return /* @__PURE__ */ jsx22("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__ */ jsxs15("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 } })
+    /* @__PURE__ */ jsx22(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
+    /* @__PURE__ */ jsx22(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)) });
+  return /* @__PURE__ */ jsx22("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx22(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
 }
 
 // src/CommandPalette.tsx
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var PaletteContext = createContext3(null);
 function usePalette(part) {
   const palette = useContext3(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"]';
+var CONTROL2 = '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;
+  return popup.querySelector("[data-command-palette-fields]")?.querySelector(CONTROL2) ?? null;
 }
 function CommandPalette({ open, onOpenChange, label, where, modKey = "Ctrl", children }) {
-  const popupRef = useRef2(null);
+  const popupRef = useRef3(null);
   useEffect(() => {
     if (!open) return;
     const frame = requestAnimationFrame(() => {
@@ -1298,9 +1396,9 @@ function CommandPalette({ open, onOpenChange, label, where, modKey = "Ctrl", chi
     return () => cancelAnimationFrame(frame);
   });
   const context = useMemo2(() => ({ where, modKey, popupRef }), [where, modKey]);
-  return /* @__PURE__ */ jsx22(Dialog.Root, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs16(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(
+  return /* @__PURE__ */ jsx23(Dialog.Root, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs16(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx23(Dialog.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+    /* @__PURE__ */ jsx23(Dialog.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center pt-[16vh]", children: /* @__PURE__ */ jsx23(
       Dialog.Popup,
       {
         ref: popupRef,
@@ -1310,13 +1408,13 @@ function CommandPalette({ open, onOpenChange, label, where, modKey = "Ctrl", chi
           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 })
+        children: /* @__PURE__ */ jsx23(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" });
+  return /* @__PURE__ */ jsx23(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 () => {
@@ -1328,9 +1426,9 @@ function useBack(chip, popupRef) {
 function Footer({ keys }) {
   const { where } = usePalette("The footer");
   return /* @__PURE__ */ jsxs16("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 }),
+    /* @__PURE__ */ jsx23("span", { className: "min-w-0 flex-1 truncate", children: where }),
     keys.map(([key, word]) => /* @__PURE__ */ jsxs16("span", { className: "flex shrink-0 items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx22(Kbd, { children: key }),
+      /* @__PURE__ */ jsx23(Kbd, { children: key }),
       " ",
       word
     ] }, key))
@@ -1344,11 +1442,11 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
   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);
-  const moved = useRef2(false);
-  useLayoutEffect2(() => {
+  const inputRef = useRef3(null);
+  const reported = useRef3({});
+  const settled = useRef3(null);
+  const moved = useRef3(false);
+  useLayoutEffect3(() => {
     const before = settled.current;
     const now = reported.current;
     const sameLevel = before?.query === query && before?.level === chip?.label;
@@ -1431,9 +1529,9 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
       },
       children: [
         /* @__PURE__ */ jsxs16("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(
+          /* @__PURE__ */ jsx23(IconSearch, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" }),
+          chip && /* @__PURE__ */ jsx23(LevelChip, { chip, onBack: back }),
+          /* @__PURE__ */ jsx23(
             Autocomplete.Input,
             {
               ref: inputRef,
@@ -1446,42 +1544,42 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
           )
         ] }),
         /* @__PURE__ */ jsxs16(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__ */ jsxs16(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) => (
+          children != null && /* @__PURE__ */ jsx23("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children }),
+          /* @__PURE__ */ jsx23(Autocomplete.List, { className: "flex flex-col", children: (group) => /* @__PURE__ */ jsxs16(Autocomplete.Group, { items: group.items, className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx23(Autocomplete.GroupLabel, { className: "flex h-7 shrink-0 items-center px-3", children: /* @__PURE__ */ jsx23(SectionLabel, { className: "text-text-secondary", children: group.value }) }),
+            /* @__PURE__ */ jsx23(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(
+              /* @__PURE__ */ jsx23(Autocomplete.Item, { value: row, onClick: () => row.onSelect(), className: menuItemClassName({ size: "tall" }), children: /* @__PURE__ */ jsx23(
                 MenuItemBody,
                 {
                   size: "tall",
                   label: row.label,
                   description: row.description,
-                  leading: /* @__PURE__ */ jsx22(RowLeading, { row }),
+                  leading: /* @__PURE__ */ jsx23(RowLeading, { row }),
                   submenu: !!row.onGoIn,
-                  hint: row.onGoIn ? /* @__PURE__ */ jsx22(Kbd, { children: "Tab" }) : /* @__PURE__ */ jsx22(EnterHint, {})
+                  hint: row.onGoIn ? /* @__PURE__ */ jsx23(Kbd, { children: "Tab" }) : /* @__PURE__ */ jsx23(EnterHint, {})
                 }
               ) }, row.id)
             ) })
           ] }, group.value) }),
-          /* @__PURE__ */ jsx22(Autocomplete.Status, { className: "flex items-center gap-2 px-3 [&:not(:empty)]:h-8", children: pending && /* @__PURE__ */ jsxs16(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__ */ jsx23(Autocomplete.Status, { className: "flex items-center gap-2 px-3 [&:not(:empty)]:h-8", children: pending && /* @__PURE__ */ jsxs16(Fragment3, { children: [
+            /* @__PURE__ */ jsx23(IconLoader22, { size: 12, stroke: 1.5, className: "shrink-0 animate-spin text-text-muted" }),
+            /* @__PURE__ */ jsx23("span", { className: "text-caption text-text-muted", children: pending })
           ] }) }),
-          notes.map((note) => /* @__PURE__ */ jsx22("div", { className: "flex min-h-8 items-center px-3", children: /* @__PURE__ */ jsx22(FieldLine, { children: note }) }, note)),
-          /* @__PURE__ */ jsx22(Autocomplete.Empty, { className: "flex items-center px-3 [&:not(:empty)]:min-h-10", children: empty && /* @__PURE__ */ jsx22(EmptyState, { scope: "section", message: empty }) })
+          notes.map((note) => /* @__PURE__ */ jsx23("div", { className: "flex min-h-8 items-center px-3", children: /* @__PURE__ */ jsx23(FieldLine, { children: note }) }, note)),
+          /* @__PURE__ */ jsx23(Autocomplete.Empty, { className: "flex items-center px-3 [&:not(:empty)]:min-h-10", children: empty && /* @__PURE__ */ jsx23(EmptyState, { scope: "section", message: empty }) })
         ] }),
-        /* @__PURE__ */ jsx22(Footer, { keys })
+        /* @__PURE__ */ jsx23(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__ */ jsx23("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 });
+  return /* @__PURE__ */ jsx23("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) {
@@ -1491,31 +1589,18 @@ function isTextField(el) {
 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 frameRef = useRef3(null);
   const busy = !!working;
-  const busyRef = useRef2(busy);
+  const busyRef = useRef3(busy);
   busyRef.current = busy;
-  const returnTo = useRef2(null);
-  const firstInvalid = () => frameRef.current?.querySelector("[data-invalid]")?.querySelector(CONTROL) ?? null;
+  const firstInvalid2 = () => frameRef.current?.querySelector("[data-invalid]")?.querySelector(CONTROL2) ?? 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();
+      if (!busyRef.current) firstInvalid2()?.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;
@@ -1524,13 +1609,8 @@ function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWaits, wo
   };
   const [backNamed, setBackNamed] = useState3(false);
   const measure = () => setBackNamed(backWorksFrom(document.activeElement));
-  useLayoutEffect2(measure);
+  useLayoutEffect3(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();
@@ -1543,52 +1623,54 @@ function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWaits, wo
   ];
   return /* @__PURE__ */ jsxs16("div", { ref: frameRef, tabIndex: -1, onKeyDown, onFocus: measure, onBlur: measure, onInput: measure, className: "flex min-h-0 flex-col outline-none", children: [
     /* @__PURE__ */ jsxs16("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 })
+      icon != null && /* @__PURE__ */ jsx23("span", { className: "flex shrink-0 items-center text-text-secondary", children: icon }),
+      /* @__PURE__ */ jsx23(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__ */ jsxs16("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__ */ jsxs16(Form, { "data-command-palette-fields": "", busy, enterSends: false, onSubmit: submit, className: "flex min-h-0 flex-col", children: [
+      /* @__PURE__ */ jsx23(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col px-5 py-4", children: /* @__PURE__ */ jsx23("div", { className: "flex flex-col gap-4", children }) }),
+      /* @__PURE__ */ jsxs16("div", { className: "flex shrink-0 items-center gap-3 px-5 pb-4", children: [
+        /* @__PURE__ */ jsx23("div", { className: "min-w-0 flex-1", children: working ? /* @__PURE__ */ jsx23(FieldLine, { children: working.line }) : error ? /* @__PURE__ */ jsx23(FieldLine, { tone: "error", children: error }) : null }),
+        /* @__PURE__ */ jsx23(
+          Button,
+          {
+            type: "submit",
+            variant: "primary",
+            disabled: busy,
+            disabledReason: busy ? void 0 : submitWaits,
+            leadingIcon: busy ? /* @__PURE__ */ jsx23(IconLoader22, { size: 16, stroke: 1.5, className: "animate-spin" }) : void 0,
+            children: working ? working.button : submitLabel
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsx22(Footer, { keys })
+    /* @__PURE__ */ jsx23(Footer, { keys })
   ] });
 }
 var BAR_WIDTHS = ["w-4/5", "w-3/5", "w-2/3"];
 function CommandPaletteWorking({ children, bars = 2 }) {
   return /* @__PURE__ */ jsxs16("div", { role: "status", className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs16("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" }),
+      /* @__PURE__ */ jsx23(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))
+    BAR_WIDTHS.slice(0, bars).map((width) => /* @__PURE__ */ jsx23(SkeletonBar, { className: cn("h-3", width) }, width))
   ] });
 }
 function CommandPaletteAnswer({ children, note }) {
   const paragraphs = children.split(/\n\s*\n/).filter((p) => p.trim() !== "");
   return /* @__PURE__ */ jsxs16("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
+    paragraphs.map((paragraph, i) => /* @__PURE__ */ jsx23("p", { className: "whitespace-pre-wrap text-body-2 text-text-primary", children: paragraph.split(/\s*(\[\d+\])/).map(
+      (part, j) => /^\[\d+\]$/.test(part) ? /* @__PURE__ */ jsx23("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 })
+    note && /* @__PURE__ */ jsx23(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 });
+  return /* @__PURE__ */ jsx23("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 Fragment4, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs17 } 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. */
@@ -1611,22 +1693,22 @@ function inlineChipClassName(tone, className) {
 }
 function InlineChip({ tone = "neutral", icon, href, className, children, ...props }) {
   const body = /* @__PURE__ */ jsxs17(Fragment4, { children: [
-    icon && /* @__PURE__ */ jsx23("span", { className: "flex size-4 shrink-0 items-center justify-center text-text-secondary", children: icon }),
+    icon && /* @__PURE__ */ jsx24("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__ */ jsx23("span", { className: classes, ...props, children: body });
+    return /* @__PURE__ */ jsx24("span", { className: classes, ...props, children: body });
   }
-  return /* @__PURE__ */ jsx23("a", { href, className: classes, ...props, children: body });
+  return /* @__PURE__ */ jsx24("a", { href, className: classes, ...props, children: body });
 }
 
 // src/IdentityMenu.tsx
-import { useCallback, useRef as useRef3 } from "react";
+import { useCallback, useRef as useRef4 } from "react";
 
 // src/Divider.tsx
 import { Separator } from "@base-ui/react/separator";
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } 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";
@@ -1637,14 +1719,14 @@ function Divider({ orientation = "horizontal", label, tone = "default", classNam
         "aria-label": label,
         className: cn("flex shrink-0 items-center gap-2 mx-3", className),
         children: [
-          /* @__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) })
+          /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) }),
+          /* @__PURE__ */ jsx25("span", { className: cn("shrink-0 text-caption", tone === "warning" ? "text-warning-default" : "text-text-muted"), children: label }),
+          /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Separator,
     {
       orientation,
@@ -1654,15 +1736,15 @@ function Divider({ orientation = "horizontal", label, tone = "default", classNam
 }
 
 // src/Person.tsx
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } 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__ */ jsxs19("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 })
+      /* @__PURE__ */ jsx26(Avatar, { name, src: picture, size }),
+      /* @__PURE__ */ jsx26("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
   );
 }
@@ -1670,10 +1752,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 jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       BaseButton5,
       {
         type: "button",
@@ -1682,7 +1764,7 @@ 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__ */ jsx26(Avatar, { name, src: picture, size: size ?? 36 })
+        children: /* @__PURE__ */ jsx27(Avatar, { name, src: picture, size: size ?? 36 })
       }
     );
   }
@@ -1704,18 +1786,18 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx26(Person, { name, picture, fallback, size: size ?? 22 }),
-        /* @__PURE__ */ jsx26(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+        /* @__PURE__ */ jsx27(Person, { name, picture, fallback, size: size ?? 22 }),
+        /* @__PURE__ */ jsx27(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
       ]
     }
   );
 }
 
 // src/IdentityMenu.tsx
-import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function IdentityPanel({ className, onClose = () => {
 }, ...rest }) {
-  return /* @__PURE__ */ jsx27(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx27(IdentityRows, { ...rest, onClose }) });
+  return /* @__PURE__ */ jsx28(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx28(IdentityRows, { ...rest, onClose }) });
 }
 function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, children }) {
   const act = (action) => () => {
@@ -1725,51 +1807,51 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
   const appRows = typeof children === "function" ? children(onClose) : children;
   return /* @__PURE__ */ jsxs21(Fragment5, { children: [
     /* @__PURE__ */ jsxs21(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." }),
+      /* @__PURE__ */ jsx28(MenuRow, { children: /* @__PURE__ */ jsx28(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
+      /* @__PURE__ */ jsx28(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__ */ jsxs21(Note, { children: [
         me.email,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
     relayUrl && /* @__PURE__ */ jsxs21(Fragment5, { children: [
-      /* @__PURE__ */ jsx27(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsx28(Divider, { className: "mx-0 my-2" }),
       /* @__PURE__ */ jsxs21(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." })
+        /* @__PURE__ */ jsx28(MenuRow, { children: /* @__PURE__ */ jsx28("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
+        /* @__PURE__ */ jsx28(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
     appRows && /* @__PURE__ */ jsxs21(Fragment5, { children: [
-      /* @__PURE__ */ jsx27(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsx28(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
-    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx27(Divider, { className: "mx-0 my-2" }) : null,
-    signedIn && idBase && /* @__PURE__ */ jsx27(
+    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx28(Divider, { className: "mx-0 my-2" }) : null,
+    signedIn && idBase && /* @__PURE__ */ jsx28(
       MenuItem,
       {
         label: "Edit your profile in Estiva ID",
         onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
       }
     ),
-    onCopyKey && /* @__PURE__ */ jsx27(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
-    idBase && onSignOut && /* @__PURE__ */ jsx27(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
+    onCopyKey && /* @__PURE__ */ jsx28(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
+    idBase && onSignOut && /* @__PURE__ */ jsx28(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
   ] });
 }
 function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
-  const actions = useRef3(null);
+  const actions = useRef4(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__ */ jsx27("div", { className, children: /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28("div", { className, children: /* @__PURE__ */ jsx28(
       Menu,
       {
         align: "right",
         actionsRef: actions,
         className: "w-72",
-        trigger: /* @__PURE__ */ jsx27(
+        trigger: /* @__PURE__ */ jsx28(
           PersonTrigger,
           {
             name: me.name,
@@ -1780,7 +1862,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
             "aria-label": compact ? "Account menu" : void 0
           }
         ),
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx28(
           IdentityRows,
           {
             me,
@@ -1798,14 +1880,14 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
   );
 }
 function Note({ children }) {
-  return /* @__PURE__ */ jsx27("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
+  return /* @__PURE__ */ jsx28("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
 }
 
 // src/FilePicker.tsx
 import { forwardRef } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "input",
     {
       ref,
@@ -1823,68 +1905,6 @@ var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
   );
 });
 
-// src/Form.tsx
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef4 } from "react";
-import { Fieldset } from "@base-ui/react/fieldset";
-import { Form as BaseForm } from "@base-ui/react/form";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var CONTROL2 = 'input:not([type="hidden"]), textarea, select, button, [role="checkbox"], [role="combobox"], [tabindex]:not([tabindex="-1"])';
-function usable(element) {
-  return element instanceof HTMLElement && element.isConnected && element.matches(CONTROL2) && !element.matches(":disabled") && element.getAttribute("aria-disabled") !== "true";
-}
-function Form({ onSubmit, busy: ownBusy = false, className, children, ...props }) {
-  const outerBusy = useFormBusy();
-  const busy = ownBusy || outerBusy;
-  const form = useRef4(null);
-  const sender = useRef4(null);
-  const holding = useRef4(false);
-  const lastInside = useRef4(null);
-  useLayoutEffect3(() => {
-    const element = form.current;
-    if (!element) return;
-    if (busy) {
-      const active = document.activeElement;
-      const from = active && active !== element && element.contains(active) ? active : !active || active === document.body ? lastInside.current : null;
-      if (from?.isConnected) {
-        sender.current = from;
-        holding.current = true;
-        element.focus();
-      }
-      return;
-    }
-    if (!holding.current) return;
-    holding.current = false;
-    if (document.activeElement !== element && document.activeElement !== document.body) return;
-    const invalid = Array.from(element.querySelectorAll("[data-invalid]")).find(usable);
-    const target = invalid ?? (usable(sender.current) ? sender.current : Array.from(element.querySelectorAll(CONTROL2)).find(usable));
-    sender.current = null;
-    target?.focus();
-  }, [busy]);
-  return /* @__PURE__ */ jsx29(
-    BaseForm,
-    {
-      ref: form,
-      ...props,
-      tabIndex: busy ? -1 : props.tabIndex,
-      className: cn("outline-none", className),
-      onFocus: (event) => {
-        if (event.target !== form.current) lastInside.current = event.target;
-        props.onFocus?.(event);
-      },
-      onBlur: (event) => {
-        const next = event.relatedTarget;
-        if (next && !form.current?.contains(next)) lastInside.current = null;
-        props.onBlur?.(event);
-      },
-      onSubmit: (event) => {
-        event.preventDefault();
-        void onSubmit();
-      },
-      children: /* @__PURE__ */ jsx29(Fieldset.Root, { disabled: busy, className: "contents", children: /* @__PURE__ */ jsx29(FormBusyContext.Provider, { value: busy, children }) })
-    }
-  );
-}
-
 // src/Select.tsx
 import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
 import { Select as BaseSelect } from "@base-ui/react/select";