@estiva-app/ui 0.37.2 → 0.39.0

package/dist/index.js

@@ -20,7 +20,7 @@ var FONT_SIZE_TOKENS = [
   "chip",
   "small"
 ];
-var BOX_SHADOW_TOKENS = ["sm", "md", "lg", "focus-ring", "glow-warning", "glow-success", "glow-accent", "highlight-inset"];
+var BOX_SHADOW_TOKENS = ["sm", "md", "lg", "focus-ring", "field", "glow-warning", "glow-success", "glow-accent", "highlight-inset"];
 var DROP_SHADOW_TOKENS = ["glow-success", "glow-accent", "glow-warning"];
 var twMerge = extendTailwindMerge({
   extend: {
@@ -35,16 +35,110 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/Link.tsx
+import { jsx } from "react/jsx-runtime";
+var VARIANT_CLASSES = {
+  text: "text-info-default underline underline-offset-2 hover:opacity-80",
+  quiet: "hover:underline",
+  underlined: "underline underline-offset-2 hover:text-text-primary",
+  plain: ""
+};
+function Link({ href, variant = "text", external = false, truncate = false, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      className: cn(VARIANT_CLASSES[variant], truncate && "truncate", className),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/Card.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FILL_CLASSES = {
+  surface: "bg-bg-surface border-border-default",
+  elevated: "bg-bg-elevated border-border-default",
+  inset: "bg-bg-inset border-border-subtle",
+  none: "border-border-subtle"
+};
+var HAIRLINE_HOVER_CLASSES = {
+  surface: "hover:border-border-strong",
+  elevated: "hover:border-border-strong",
+  inset: "hover:border-border-default",
+  none: "hover:border-border-default"
+};
+var HAIRLINE_HELD_CLASSES = {
+  surface: "border-border-strong",
+  elevated: "border-border-strong",
+  inset: "border-border-default",
+  none: "border-border-default"
+};
+var ATTENTION_CLASSES = {
+  accent: "border-accent-muted hover:border-accent-muted",
+  warning: "border-warning-muted hover:border-warning-muted"
+};
+function Card({
+  fill = "surface",
+  href,
+  hover = href ? "hairline" : "none",
+  quietUntilHover = false,
+  hovered = false,
+  selected = false,
+  active = false,
+  attention,
+  unreadable = false,
+  clip = false,
+  className,
+  children,
+  ...props
+}) {
+  const still = selected || active;
+  const classes = cn(
+    "rounded-lg border",
+    // A card that never changes has nothing to ease between, and the apps' still cards carry no transition.
+    hover !== "none" && "transition-colors",
+    FILL_CLASSES[fill],
+    quietUntilHover && "border-transparent",
+    !still && hover === "hairline" && HAIRLINE_HOVER_CLASSES[fill],
+    !still && hover === "fill" && "hover:bg-bg-hover hover:border-border-default",
+    !still && hovered && hover === "hairline" && HAIRLINE_HELD_CLASSES[fill],
+    !still && hovered && hover === "fill" && "bg-bg-hover border-border-default",
+    // The one you are on can still be clicked (it opens again); the one being changed cannot.
+    !active && hover !== "none" && !href && props.onClick && "cursor-pointer",
+    selected && "bg-bg-selected border-border-subtle",
+    active && "bg-bg-selected border-accent-primary",
+    !active && attention && ATTENTION_CLASSES[attention],
+    unreadable && "border-dashed",
+    clip && "overflow-hidden",
+    href && "block",
+    className
+  );
+  if (href !== void 0) {
+    const { ref, ...anchorProps } = props;
+    return (
+      // @estiva-escape(no-copied-look, no-restyled-part): a card that leads somewhere is drawn on Link's anchor (UIG-27 ruling 1), so this frame is Card's own look, not Link restyled
+      /* @__PURE__ */ jsx2(Link, { href, variant: "plain", ref, className: classes, ...anchorProps, children })
+    );
+  }
+  return (
+    // @estiva-escape(no-copied-look): N6 (Katerina, 24 September: leave alone): a card that cuts its content to its corners shares four words with the palette's window by coincidence
+    /* @__PURE__ */ jsx2("div", { className: classes, ...props, children })
+  );
+}
+
 // src/ScrollArea.tsx
 import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 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";
   const horizontal = orientation !== "vertical";
   return /* @__PURE__ */ jsxs(BaseScrollArea.Root, { className: cn("relative min-h-0 min-w-0", className), children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx3(
       BaseScrollArea.Viewport,
       {
         ref: viewportRef,
@@ -53,17 +147,33 @@ function ScrollArea({ orientation = "vertical", className, viewportClassName, co
           "h-full w-full outline-none data-[has-overflow-x]:overscroll-x-contain data-[has-overflow-y]:overscroll-y-contain",
           viewportClassName
         ),
-        children: /* @__PURE__ */ jsx(BaseScrollArea.Content, { className: contentClassName, style: horizontal ? void 0 : { minWidth: 0 }, children })
+        children: /* @__PURE__ */ jsx3(BaseScrollArea.Content, { className: contentClassName, style: horizontal ? void 0 : { minWidth: 0 }, children })
       }
     ),
-    vertical && /* @__PURE__ */ jsx(BaseScrollArea.Scrollbar, { orientation: "vertical", className: cn(BAR, "w-1.5 justify-center py-0.5 pr-0.5 data-[has-overflow-y]:opacity-100"), children: /* @__PURE__ */ jsx(BaseScrollArea.Thumb, { className: cn(THUMB, "w-full") }) }),
-    horizontal && /* @__PURE__ */ jsx(BaseScrollArea.Scrollbar, { orientation: "horizontal", className: cn(BAR, "h-1.5 flex-col justify-center px-0.5 pb-0.5 data-[has-overflow-x]:opacity-100"), children: /* @__PURE__ */ jsx(BaseScrollArea.Thumb, { className: cn(THUMB, "h-full") }) }),
-    vertical && horizontal && /* @__PURE__ */ jsx(BaseScrollArea.Corner, {})
+    vertical && /* @__PURE__ */ jsx3(BaseScrollArea.Scrollbar, { orientation: "vertical", className: cn(BAR, "w-1.5 justify-center py-0.5 pr-0.5 data-[has-overflow-y]:opacity-100"), children: /* @__PURE__ */ jsx3(BaseScrollArea.Thumb, { className: cn(THUMB, "w-full") }) }),
+    horizontal && /* @__PURE__ */ jsx3(BaseScrollArea.Scrollbar, { orientation: "horizontal", className: cn(BAR, "h-1.5 flex-col justify-center px-0.5 pb-0.5 data-[has-overflow-x]:opacity-100"), children: /* @__PURE__ */ jsx3(BaseScrollArea.Thumb, { className: cn(THUMB, "h-full") }) }),
+    vertical && horizontal && /* @__PURE__ */ jsx3(BaseScrollArea.Corner, {})
   ] });
 }
 
+// src/Sidebar.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var SidebarOnGround = createContext(false);
+function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
+  const onGround = useContext(SidebarOnGround);
+  return /* @__PURE__ */ jsx4(
+    "nav",
+    {
+      "aria-label": ariaLabel,
+      className: cn("flex w-60 shrink-0 flex-col", !onGround && "border-r border-border-default bg-bg-surface", className),
+      children: /* @__PURE__ */ jsx4(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-px px-2.5 py-3", children })
+    }
+  );
+}
+
 // src/TopBar.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function TopBar({ variant = "solid", menu, logo, search, right, className }) {
   const floating = variant === "floating";
   return /* @__PURE__ */ jsxs2(
@@ -71,25 +181,26 @@ function TopBar({ variant = "solid", menu, logo, search, right, className }) {
     {
       className: cn(
         "flex h-[52px] items-center pl-5 pr-[26px]",
-        floating ? "pointer-events-none absolute left-0 right-0 top-0 z-10" : "shrink-0 gap-4 border-b border-border-default bg-bg-surface",
+        floating ? "pointer-events-none absolute left-0 right-0 top-0 z-10" : cn("shrink-0 gap-4", variant === "solid" && "border-b border-border-default bg-bg-surface"),
         className
       ),
       children: [
         (menu || logo) && /* @__PURE__ */ jsxs2("div", { className: cn("flex shrink-0 items-center gap-2", floating && "pointer-events-auto"), children: [
           menu,
-          logo && /* @__PURE__ */ jsx2("div", { className: "flex items-center text-body-2-strong text-text-primary", children: logo })
+          logo && /* @__PURE__ */ jsx5("div", { className: "flex items-center text-body-2-strong text-text-primary", children: logo })
         ] }),
-        /* @__PURE__ */ jsx2("div", { className: cn("flex min-w-0 flex-1 items-center justify-center", floating && "pointer-events-auto"), children: search }),
-        /* @__PURE__ */ jsx2("div", { className: cn("flex shrink-0 items-center gap-[6px]", floating && "pointer-events-auto"), children: right })
+        /* @__PURE__ */ jsx5("div", { className: cn("flex min-w-0 flex-1 items-center justify-center", floating && "pointer-events-auto"), children: search }),
+        /* @__PURE__ */ jsx5("div", { className: cn("flex shrink-0 items-center gap-[6px]", floating && "pointer-events-auto"), children: right })
       ]
     }
   );
 }
 
 // src/AppShell.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav, children }) {
-  const bar = /* @__PURE__ */ jsx3(TopBar, { variant, menu, logo, search, right: identity });
+  const bar = /* @__PURE__ */ jsx6(TopBar, { variant, menu, logo, search, right: identity });
+  const inset = variant === "inset";
   if (variant === "floating") {
     return (
       // `signal-canvas`: in the Signal theme, the preset draws the control-room dot
@@ -108,7 +219,7 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
               ),
               children: [
                 banner,
-                /* @__PURE__ */ jsx3("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
+                /* @__PURE__ */ jsx6("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
               ]
             }
           )
@@ -116,6 +227,10 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
       ] })
     );
   }
+  const column = /* @__PURE__ */ jsxs3(Fragment, { children: [
+    banner,
+    /* @__PURE__ */ jsx6(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex min-h-full flex-col", children: /* @__PURE__ */ jsx6("main", { className: "flex min-w-0 flex-1 flex-col", children }) })
+  ] });
   return (
     /* `relative overflow-hidden` is the seal the floating manner already has
        (and the ScrollArea's own root is `relative`, so an absolutely placed
@@ -129,11 +244,8 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
     /* @__PURE__ */ jsxs3("div", { className: "relative flex h-full min-h-0 flex-col overflow-hidden bg-bg-base text-text-primary", children: [
       bar,
       /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-1", children: [
-        nav,
-        /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
-          banner,
-          /* @__PURE__ */ jsx3(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex min-h-full flex-col", children: /* @__PURE__ */ jsx3("main", { className: "flex min-w-0 flex-1 flex-col", children }) })
-        ] })
+        /* @__PURE__ */ jsx6(SidebarOnGround.Provider, { value: inset, children: nav }),
+        inset ? /* @__PURE__ */ jsx6(Card, { fill: "surface", clip: true, className: "mb-4 mr-4 flex min-h-0 min-w-0 flex-1 flex-col", children: column }) : /* @__PURE__ */ jsx6("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: column })
       ] })
     ] })
   );
@@ -160,123 +272,32 @@ import {
   IconX as IconX2
 } from "@tabler/icons-react";
 
-// src/Link.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var VARIANT_CLASSES = {
-  text: "text-info-default underline underline-offset-2 hover:opacity-80",
-  quiet: "hover:underline",
-  underlined: "underline underline-offset-2 hover:text-text-primary",
-  plain: ""
-};
-function Link({ href, variant = "text", external = false, truncate = false, className, children, ...props }) {
-  return /* @__PURE__ */ jsx4(
-    "a",
-    {
-      href,
-      ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-      className: cn(VARIANT_CLASSES[variant], truncate && "truncate", className),
-      ...props,
-      children
-    }
-  );
-}
-
-// src/Card.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var FILL_CLASSES = {
-  surface: "bg-bg-surface border-border-default",
-  elevated: "bg-bg-elevated border-border-default",
-  inset: "bg-bg-inset border-border-subtle",
-  none: "border-border-subtle"
-};
-var HAIRLINE_HOVER_CLASSES = {
-  surface: "hover:border-border-strong",
-  elevated: "hover:border-border-strong",
-  inset: "hover:border-border-default",
-  none: "hover:border-border-default"
-};
-var HAIRLINE_HELD_CLASSES = {
-  surface: "border-border-strong",
-  elevated: "border-border-strong",
-  inset: "border-border-default",
-  none: "border-border-default"
-};
-var ATTENTION_CLASSES = {
-  accent: "border-accent-muted hover:border-accent-muted",
-  warning: "border-warning-muted hover:border-warning-muted"
-};
-function Card({
-  fill = "surface",
-  href,
-  hover = href ? "hairline" : "none",
-  quietUntilHover = false,
-  hovered = false,
-  selected = false,
-  active = false,
-  attention,
-  unreadable = false,
-  clip = false,
-  className,
-  children,
-  ...props
-}) {
-  const still = selected || active;
-  const classes = cn(
-    "rounded-lg border",
-    // A card that never changes has nothing to ease between, and the apps' still cards carry no transition.
-    hover !== "none" && "transition-colors",
-    FILL_CLASSES[fill],
-    quietUntilHover && "border-transparent",
-    !still && hover === "hairline" && HAIRLINE_HOVER_CLASSES[fill],
-    !still && hover === "fill" && "hover:bg-bg-hover hover:border-border-default",
-    !still && hovered && hover === "hairline" && HAIRLINE_HELD_CLASSES[fill],
-    !still && hovered && hover === "fill" && "bg-bg-hover border-border-default",
-    // The one you are on can still be clicked (it opens again); the one being changed cannot.
-    !active && hover !== "none" && !href && props.onClick && "cursor-pointer",
-    selected && "bg-bg-selected border-border-subtle",
-    active && "bg-bg-selected border-accent-primary",
-    !active && attention && ATTENTION_CLASSES[attention],
-    unreadable && "border-dashed",
-    clip && "overflow-hidden",
-    href && "block",
-    className
-  );
-  if (href !== void 0) {
-    const { ref, ...anchorProps } = props;
-    return (
-      // @estiva-escape(no-copied-look, no-restyled-part): a card that leads somewhere is drawn on Link's anchor (UIG-27 ruling 1), so this frame is Card's own look, not Link restyled
-      /* @__PURE__ */ jsx5(Link, { href, variant: "plain", ref, className: classes, ...anchorProps, children })
-    );
-  }
-  return (
-    // @estiva-escape(no-copied-look): N6 (Katerina, 24 September: leave alone): a card that cuts its content to its corners shares four words with the palette's window by coincidence
-    /* @__PURE__ */ jsx5("div", { className: classes, ...props, children })
-  );
-}
-
 // src/IconButton.tsx
 import { Button as BaseButton } from "@base-ui/react/button";
 
 // src/formBusy.ts
-import { createContext, useContext } from "react";
-var FormBusyContext = createContext(false);
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var FormBusyContext = createContext2(false);
 function useFormBusy() {
-  return useContext(FormBusyContext);
+  return useContext2(FormBusyContext);
 }
 
 // src/Tooltip.tsx
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 
 // src/Kbd.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function Kbd({ children, className }) {
-  return /* @__PURE__ */ jsx6(
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Kbd({ children, className, tone = "default" }) {
+  return /* @__PURE__ */ jsx7(
     "kbd",
     {
       className: cn(
         "inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset px-1 py-px font-sans text-caption text-text-secondary",
         "signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-bg-wash signal:font-mono signal:text-small",
         "ship:border-b-2 ship:pt-[2px] ship:pb-px ship:bg-bg-wash ship:font-mono ship:text-small",
+        // Leaf sets its keys in mono, as Signal does (Katerina, 28 September): the type, not the key's shape.
+        "leaf:font-mono leaf:text-small",
+        tone === "tooltip" && "border-border-tooltip-key bg-bg-tooltip-key text-text-tooltip-key signal:bg-bg-tooltip-key ship:bg-bg-tooltip-key",
         className
       ),
       children
@@ -285,7 +306,7 @@ function Kbd({ children, className }) {
 }
 
 // src/looks.ts
-var FIELD_BOX_CLASSES = "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg";
+var FIELD_BOX_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg";
 var FIELD_TEXT_CLASSES = "text-text-primary placeholder:text-text-muted";
 var FIELD_DISABLED_CLASSES = "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled";
 var FIELD_FOCUS_RING_CLASSES = "signal:transition-shadow signal:focus:shadow-focus-ring";
@@ -293,27 +314,27 @@ var FIELD_SIZE_CLASSES = {
   default: "px-3 py-2 text-input-value",
   small: "h-6 min-h-6 px-2 text-caption"
 };
-var FIELD_SHELL_CLASSES = "bg-bg-inset border border-border-default hover:border-border-strong rounded-lg transition-colors";
+var FIELD_SHELL_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors";
 var FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
 var CHIP_TEXT_CLASSES = "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums";
 var BARE_INPUT_CLASSES = "bg-transparent text-text-primary placeholder:text-text-muted outline-none";
 
 // src/Tooltip.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var OPEN_DELAY = 300;
 function TooltipProvider({ delay = OPEN_DELAY, closeDelay, timeout, children }) {
-  return /* @__PURE__ */ jsx7(BaseTooltip.Provider, { delay, closeDelay, timeout, children });
+  return /* @__PURE__ */ jsx8(BaseTooltip.Provider, { delay, closeDelay, timeout, children });
 }
 function Tooltip({ label, shortcut, className, ...props }) {
-  return /* @__PURE__ */ jsxs4("div", { role: "tooltip", className: cn(FLOATING_SURFACE_CLASSES, "min-h-[30px] max-w-80 flex items-center justify-center gap-1.5 px-2 py-1", className), ...props, children: [
-    /* @__PURE__ */ jsx7("span", { className: "min-w-0 text-caption text-text-primary break-words", children: label }),
-    shortcut && /* @__PURE__ */ jsx7(Kbd, { children: shortcut })
+  return /* @__PURE__ */ jsxs4("div", { role: "tooltip", className: cn(FLOATING_SURFACE_CLASSES, "border-border-tooltip bg-bg-tooltip", "min-h-[30px] max-w-80 flex items-center justify-center gap-1.5 px-2 py-1", className), ...props, children: [
+    /* @__PURE__ */ jsx8("span", { className: "min-w-0 text-caption text-text-tooltip break-words", children: label }),
+    shortcut && /* @__PURE__ */ jsx8(Kbd, { tone: "tooltip", children: shortcut })
   ] });
 }
 var GAP = 6;
 var VIEWPORT_PAD = 8;
 function TooltipSurface({ label, shortcut, placement }) {
-  return /* @__PURE__ */ jsx7(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx8(
     BaseTooltip.Positioner,
     {
       side: placement,
@@ -322,10 +343,10 @@ function TooltipSurface({ label, shortcut, placement }) {
       collisionPadding: VIEWPORT_PAD,
       positionMethod: "fixed",
       className: "pointer-events-none z-[9999]",
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         BaseTooltip.Popup,
         {
-          render: /* @__PURE__ */ jsx7(Tooltip, { label, shortcut }),
+          render: /* @__PURE__ */ jsx8(Tooltip, { label, shortcut }),
           className: cn(
             "transition-[opacity,transform] duration-[120ms] ease-out motion-reduce:transition-none",
             "data-[ending-style]:duration-[80ms] data-[instant]:duration-0",
@@ -341,19 +362,19 @@ function TooltipSurface({ label, shortcut, placement }) {
 function WithTooltip({ label, shortcut, placement = "top", wrapperClassName, inline = false, children }) {
   const Wrapper = inline ? "span" : "div";
   return /* @__PURE__ */ jsxs4(BaseTooltip.Root, { disableHoverablePopup: true, children: [
-    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx7(Wrapper, { className: cn("inline-flex shrink-0", inline && "align-top", wrapperClassName) }), children }),
-    /* @__PURE__ */ jsx7(TooltipSurface, { label, shortcut, placement })
+    /* @__PURE__ */ jsx8(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx8(Wrapper, { className: cn("inline-flex shrink-0", inline && "align-top", wrapperClassName) }), children }),
+    /* @__PURE__ */ jsx8(TooltipSurface, { label, shortcut, placement })
   ] });
 }
 function TooltipTrigger({ label, shortcut, placement = "top", children }) {
   return /* @__PURE__ */ jsxs4(BaseTooltip.Root, { disableHoverablePopup: true, children: [
-    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: children }),
-    /* @__PURE__ */ jsx7(TooltipSurface, { label, shortcut, placement })
+    /* @__PURE__ */ jsx8(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: children }),
+    /* @__PURE__ */ jsx8(TooltipSurface, { label, shortcut, placement })
   ] });
 }
 
 // src/IconButton.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function IconButton({
   variant = "muted",
   pressed,
@@ -404,7 +425,7 @@ function IconButton({
     off && "cursor-not-allowed",
     className
   );
-  const button = href && !unusable ? /* @__PURE__ */ jsx8("a", { href, className: look(false), ...props, children }) : /* @__PURE__ */ jsx8(
+  const button = href && !unusable ? /* @__PURE__ */ jsx9("a", { href, className: look(false), ...props, children }) : /* @__PURE__ */ jsx9(
     BaseButton,
     {
       type,
@@ -418,7 +439,7 @@ function IconButton({
   );
   const label = disabledReason ?? tooltip;
   if (label) {
-    return /* @__PURE__ */ jsx8(TooltipTrigger, { label, shortcut: disabledReason ? void 0 : tooltipShortcut, placement: tooltipPlacement, children: button });
+    return /* @__PURE__ */ jsx9(TooltipTrigger, { label, shortcut: disabledReason ? void 0 : tooltipShortcut, placement: tooltipPlacement, children: button });
   }
   return button;
 }
@@ -427,10 +448,10 @@ function IconButton({
 import { useRef } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function Lightbox({ src, alt, onClose, className }) {
   const popupRef = useRef(null);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Dialog.Root,
     {
       open: true,
@@ -438,7 +459,7 @@ function Lightbox({ src, alt, onClose, className }) {
         if (!open) onClose();
       },
       children: /* @__PURE__ */ jsxs5(Dialog.Portal, { children: [
-        /* @__PURE__ */ jsx9(Dialog.Backdrop, { className: "fixed inset-0 z-40 bg-scrim-strong" }),
+        /* @__PURE__ */ jsx10(Dialog.Backdrop, { className: "fixed inset-0 z-40 bg-scrim-strong" }),
         /* @__PURE__ */ jsxs5(
           Dialog.Popup,
           {
@@ -448,7 +469,7 @@ function Lightbox({ src, alt, onClose, className }) {
             className: "fixed inset-0 z-50 flex items-center justify-center p-8 outline-none",
             onClick: onClose,
             children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "img",
                 {
                   src,
@@ -457,12 +478,12 @@ function Lightbox({ src, alt, onClose, className }) {
                   className: cn("max-w-full max-h-full object-contain rounded-lg", className)
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 Dialog.Close,
                 {
                   "aria-label": "Close",
-                  className: "absolute top-4 right-4 size-8 rounded-full bg-bg-elevated border border-border-strong flex items-center justify-center text-text-secondary hover:text-text-primary",
-                  children: /* @__PURE__ */ jsx9(IconX, { size: 16, stroke: 1.5 })
+                  className: "absolute top-4 right-4 size-8 rounded-full bg-bg-tooltip border border-border-tooltip-key flex items-center justify-center text-text-tooltip-key hover:text-text-tooltip",
+                  children: /* @__PURE__ */ jsx10(IconX, { size: 16, stroke: 1.5 })
                 }
               )
             ]
@@ -474,7 +495,7 @@ function Lightbox({ src, alt, onClose, className }) {
 }
 
 // src/AttachmentCard.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var ICON_BY_EXTENSION = {
   pdf: IconFileTypePdf,
   doc: IconFileTypeDocx,
@@ -508,7 +529,7 @@ var NAME_CLASSES = "text-caption font-medium text-text-primary truncate";
 var NOTE_CLASSES = "text-small tracking-wide leading-tight truncate";
 function TypeIcon({ name }) {
   const Icon = ICON_BY_EXTENSION[extensionOf(name)] ?? IconFile;
-  return /* @__PURE__ */ jsx10(Icon, { size: 20, stroke: 1.5 });
+  return /* @__PURE__ */ jsx11(Icon, { size: 20, stroke: 1.5 });
 }
 function Truncating({ text, hint, className, wrapperClassName, placement }) {
   const ref = useRef2(null);
@@ -530,9 +551,9 @@ function Truncating({ text, hint, className, wrapperClassName, placement }) {
       observer.disconnect();
     };
   }, [text, cut]);
-  const line = /* @__PURE__ */ jsx10("span", { ref, className, children: text });
+  const line = /* @__PURE__ */ jsx11("span", { ref, className, children: text });
   if (!hint && !cut) return line;
-  return /* @__PURE__ */ jsx10(WithTooltip, { label: hint ?? text, placement, wrapperClassName: cn("min-w-0 flex-col", wrapperClassName), children: line });
+  return /* @__PURE__ */ jsx11(WithTooltip, { label: hint ?? text, placement, wrapperClassName: cn("min-w-0 flex-col", wrapperClassName), children: line });
 }
 function useRemoteImage(url, fetchImage) {
   const [result, setResult] = useState({});
@@ -611,7 +632,7 @@ function AttachmentCard({
   const full = useRemoteImage(opened ? remoteFullSrc : void 0, fetchImage);
   const openable = image && !!picture && !pending;
   const openPicture = onOpen ?? (openable ? () => setOpened(true) : void 0);
-  const viewer = opened && picture ? /* @__PURE__ */ jsx10(Lightbox, { src: full.src ?? picture, alt: alt ?? name, onClose: () => setOpened(false) }) : null;
+  const viewer = opened && picture ? /* @__PURE__ */ jsx11(Lightbox, { src: full.src ?? picture, alt: alt ?? name, onClose: () => setOpened(false) }) : null;
   const saveHere = download ? () => {
     const source = remoteFullSrc ?? remoteSrc;
     if (source && fetchImage) {
@@ -640,10 +661,10 @@ function AttachmentCard({
           className: cn("group relative flex items-center gap-2 w-[200px] p-1.5 pr-3", failed ? "border-error-default" : warning && "border-warning-default", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsx10("div", { className: cn(TILE_CLASSES, "overflow-hidden"), children: state === "uploading" ? /* @__PURE__ */ jsx10(IconLoader2, { size: 16, stroke: 1.5, className: "animate-spin" }) : failed ? /* @__PURE__ */ jsx10(IconAlertCircle, { size: 16, stroke: 1.5, className: "text-error-default" }) : warning ? /* @__PURE__ */ jsx10(IconAlertTriangle, { size: 16, stroke: 1.5, className: "text-warning-default" }) : image && src ? /* @__PURE__ */ jsx10("img", { src, alt: name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx10("span", { className: "text-menu font-semibold", children: typeLabelOf(name) }) }),
+            /* @__PURE__ */ jsx11("div", { className: cn(TILE_CLASSES, "overflow-hidden"), children: state === "uploading" ? /* @__PURE__ */ jsx11(IconLoader2, { size: 16, stroke: 1.5, className: "animate-spin" }) : failed ? /* @__PURE__ */ jsx11(IconAlertCircle, { size: 16, stroke: 1.5, className: "text-error-default" }) : warning ? /* @__PURE__ */ jsx11(IconAlertTriangle, { size: 16, stroke: 1.5, className: "text-warning-default" }) : image && src ? /* @__PURE__ */ jsx11("img", { src, alt: name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx11("span", { className: "text-menu font-semibold", children: typeLabelOf(name) }) }),
             /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[1px] min-w-0", children: [
-              /* @__PURE__ */ jsx10(Truncating, { text: name, className: NAME_CLASSES, placement: onRemove ? "bottom" : void 0 }),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(Truncating, { text: name, className: NAME_CLASSES, placement: onRemove ? "bottom" : void 0 }),
+              /* @__PURE__ */ jsx11(
                 Truncating,
                 {
                   text: (failed || warning ? note : state === "uploading" ? note ?? "Uploading\u2026" : note ?? sizeText) ?? "",
@@ -652,8 +673,7 @@ function AttachmentCard({
                 }
               )
             ] }),
-            onRemove && // @estiva-escape(no-copied-look): N4 (Katerina, 24 September: record only): the small round button Lightbox's close also draws; a part if a third appears
-            /* @__PURE__ */ jsx10(
+            onRemove && /* @__PURE__ */ jsx11(
               BaseButton2,
               {
                 type: "button",
@@ -663,7 +683,7 @@ function AttachmentCard({
                   event.stopPropagation();
                   onRemove();
                 },
-                children: /* @__PURE__ */ jsx10(IconX2, { size: 11, stroke: 1.75 })
+                children: /* @__PURE__ */ jsx11(IconX2, { size: 11, stroke: 1.75 })
               }
             )
           ]
@@ -673,7 +693,7 @@ function AttachmentCard({
   }
   const downloadControl = saving ? (
     // @estiva-escape(no-restyled-part): Download shows when its card is pointed at or focused, AttachmentCard's own action; IconButton has no reveal on its card's hover (UIG-9, Katerina 17 September)
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       IconButton,
       {
         variant: "muted",
@@ -684,7 +704,7 @@ function AttachmentCard({
           event.stopPropagation();
           saving();
         },
-        children: /* @__PURE__ */ jsx10(IconDownload, { size: 16, stroke: 1.5 })
+        children: /* @__PURE__ */ jsx11(IconDownload, { size: 16, stroke: 1.5 })
       }
     )
   ) : null;
@@ -693,26 +713,26 @@ function AttachmentCard({
       // `role="status"`: a plain box may not carry a name (axe, aria-prohibited-attr), and a
       // status says what it is doing — loading — to a reader that cannot see the pulse.
       // @estiva-escape(no-restyled-part): the loading pulse is AttachmentCard's own state; Card has no loading state (UIG-9, Katerina 17 September)
-      /* @__PURE__ */ jsx10(Card, { role: "status", fill: "inset", "aria-busy": "true", "aria-label": `Loading ${name}`, className: cn("w-[180px] h-28 animate-pulse", className), ...props, children: null })
+      /* @__PURE__ */ jsx11(Card, { role: "status", fill: "inset", "aria-busy": "true", "aria-label": `Loading ${name}`, className: cn("w-[180px] h-28 animate-pulse", className), ...props, children: null })
     );
   }
   if (drawnState === "unreadable") {
     return (
       // @estiva-escape(no-restyled-part): a file that could not be read is faded as well as dashed, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
       /* @__PURE__ */ jsxs6(Card, { fill: "inset", unreadable: true, className: cn("flex items-center gap-2 w-[240px] p-1.5 opacity-70", className), ...props, children: [
-        /* @__PURE__ */ jsx10("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx10(TypeIcon, { name }) }),
+        /* @__PURE__ */ jsx11("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx11(TypeIcon, { name }) }),
         /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[1px] min-w-0 text-left", children: [
-          /* @__PURE__ */ jsx10(Truncating, { text: name, className: NAME_CLASSES }),
-          /* @__PURE__ */ jsx10("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? "Could not be loaded" })
+          /* @__PURE__ */ jsx11(Truncating, { text: name, className: NAME_CLASSES }),
+          /* @__PURE__ */ jsx11("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? "Could not be loaded" })
         ] })
       ] })
     );
   }
   if (image && picture) {
-    const thumbnail = /* @__PURE__ */ jsx10("img", { src: picture, alt: alt ?? name, className: "w-full h-28 object-cover" });
-    return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    const thumbnail = /* @__PURE__ */ jsx11("img", { src: picture, alt: alt ?? name, className: "w-full h-28 object-cover" });
+    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
       /* @__PURE__ */ jsxs6(Card, { fill: "inset", hover: "hairline", clip: true, className: cn("group relative flex flex-col w-[180px]", className), ...props, children: [
-        openPicture ? /* @__PURE__ */ jsx10(
+        openPicture ? /* @__PURE__ */ jsx11(
           BaseButton2,
           {
             type: "button",
@@ -724,26 +744,26 @@ function AttachmentCard({
             },
             children: thumbnail
           }
-        ) : /* @__PURE__ */ jsx10("div", { className: "block w-full", children: thumbnail }),
+        ) : /* @__PURE__ */ jsx11("div", { className: "block w-full", children: thumbnail }),
         /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 pl-2 pr-1 py-1 min-w-0", children: [
-          /* @__PURE__ */ jsx10(Truncating, { text: name, className: "flex-1 text-caption text-text-primary truncate", wrapperClassName: "flex-1" }),
+          /* @__PURE__ */ jsx11(Truncating, { text: name, className: "flex-1 text-caption text-text-primary truncate", wrapperClassName: "flex-1" }),
           downloadControl
         ] })
       ] }),
       viewer
     ] });
   }
-  const body = /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx10("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx10(TypeIcon, { name }) }),
+  const body = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx11("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx11(TypeIcon, { name }) }),
     /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[1px] min-w-0 text-left", children: [
-      /* @__PURE__ */ jsx10(Truncating, { text: name, className: NAME_CLASSES }),
-      /* @__PURE__ */ jsx10("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? `${typeLabelOf(name)} \xB7 ${sizeText}` })
+      /* @__PURE__ */ jsx11(Truncating, { text: name, className: NAME_CLASSES }),
+      /* @__PURE__ */ jsx11("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? `${typeLabelOf(name)} \xB7 ${sizeText}` })
     ] })
   ] });
   return (
     // @estiva-escape(no-restyled-part): a file that cannot be opened is faded, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
     /* @__PURE__ */ jsxs6(Card, { fill: "inset", hover: address ? "hairline" : "none", className: cn("group flex items-center gap-2 w-[240px] p-1.5 pr-1", !address && "opacity-70", className), ...props, children: [
-      address ? /* @__PURE__ */ jsx10(Link, { href: address, external: true, variant: "plain", className: "flex items-center gap-2 min-w-0 flex-1", onClick: (event) => event.stopPropagation(), children: body }) : /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: body }),
+      address ? /* @__PURE__ */ jsx11(Link, { href: address, external: true, variant: "plain", className: "flex items-center gap-2 min-w-0 flex-1", onClick: (event) => event.stopPropagation(), children: body }) : /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: body }),
       downloadControl
     ] })
   );
@@ -752,7 +772,7 @@ function AttachmentCard({
 // src/Avatar.tsx
 import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 import { IconUserFilled } from "@tabler/icons-react";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var HUES = ["#56c8ff", "#ff8f6b", "#4ade8c", "#b18cff", "#ffc94d", "#ff7eb0", "#7ea8ff", "#5fdfd6"];
 var hueFor = (key) => {
   let h = 0;
@@ -769,12 +789,12 @@ function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
   return /* @__PURE__ */ jsxs7(
     BaseAvatar.Root,
     {
-      render: /* @__PURE__ */ jsx11("div", {}),
+      render: /* @__PURE__ */ jsx12("div", {}),
       ...spoken ? { role: "img", "aria-label": spoken } : { "aria-hidden": true },
       className: cn("rounded-sm overflow-hidden shrink-0 bg-bg-inset", className),
       style: { width: size, height: size },
       children: [
-        src && /* @__PURE__ */ jsx11(
+        src && /* @__PURE__ */ jsx12(
           BaseAvatar.Image,
           {
             src,
@@ -783,10 +803,10 @@ function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
             className: "w-full h-full object-cover data-[error]:hidden"
           }
         ),
-        label ? /* @__PURE__ */ jsx11(
+        label ? /* @__PURE__ */ jsx12(
           BaseAvatar.Fallback,
           {
-            render: /* @__PURE__ */ jsx11("div", {}),
+            render: /* @__PURE__ */ jsx12("div", {}),
             className: "w-full h-full flex items-center justify-center font-semibold leading-none",
             style: {
               /* eslint-disable no-restricted-syntax -- @estiva-escape: the per-person palette (the note at
@@ -800,32 +820,32 @@ function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
               background: `linear-gradient(160deg, color-mix(in srgb, ${hueFor(label)} 92%, #fff) 0%, color-mix(in srgb, ${hueFor(label)} 70%, #0b0d11) 100%)`
               /* eslint-enable no-restricted-syntax */
             },
-            children: /* @__PURE__ */ jsx11("span", { className: "[text-box:trim-both_cap_alphabetic]", children: initialsFor(label) })
+            children: /* @__PURE__ */ jsx12("span", { className: "[text-box:trim-both_cap_alphabetic]", children: initialsFor(label) })
           }
-        ) : /* @__PURE__ */ jsx11(BaseAvatar.Fallback, { render: /* @__PURE__ */ jsx11("div", {}), className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx11(IconUserFilled, { size: Math.round(size * 0.5) }) })
+        ) : /* @__PURE__ */ jsx12(BaseAvatar.Fallback, { render: /* @__PURE__ */ jsx12("div", {}), className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx12(IconUserFilled, { size: Math.round(size * 0.5) }) })
       ]
     }
   );
 }
 
 // src/AvatarGroup.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function AvatarGroup({ members, size = 24 }) {
   const visible = members.slice(0, 3);
   const overlap = Math.round(size / 3);
   const ring = size / 12;
-  return /* @__PURE__ */ jsx12("div", { className: "flex items-center", style: { paddingRight: overlap }, children: visible.map((member, i) => (
+  return /* @__PURE__ */ jsx13("div", { className: "flex items-center", style: { paddingRight: overlap }, children: visible.map((member, i) => (
     /*
       The wrapper carries the overlap and the ring; the face carries
       neither. It must never clip — see the note at the top of the file —
       so it has the avatar's own radius and no overflow of its own.
     */
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "span",
       {
         className: "relative flex rounded-sm",
         style: { marginRight: -overlap, boxShadow: `0 0 0 ${ring}px var(--bg-surface)` },
-        children: /* @__PURE__ */ jsx12(Avatar, { size, name: member.name, src: member.picture, label: member.name })
+        children: /* @__PURE__ */ jsx13(Avatar, { size, name: member.name, src: member.picture, label: member.name })
       },
       i
     )
@@ -837,7 +857,7 @@ import { IconX as IconX3 } from "@tabler/icons-react";
 
 // src/Button.tsx
 import { Button as BaseButton3 } from "@base-ui/react/button";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -899,11 +919,11 @@ function Button({
       ]
     }
   );
-  return disabledReason ? /* @__PURE__ */ jsx13(TooltipTrigger, { label: disabledReason, children: button }) : button;
+  return disabledReason ? /* @__PURE__ */ jsx14(TooltipTrigger, { label: disabledReason, children: button }) : button;
 }
 
 // src/Banner.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var TONE_STYLES = {
   ok: "bg-success-muted text-success-default",
   error: "bg-error-muted text-error-default",
@@ -913,14 +933,14 @@ var TONE_STYLES = {
 function Banner({ tone, children, icon, action, onDismiss, dismissLabel = "Dismiss", className }) {
   const role = tone === "error" ? "alert" : "status";
   if (!onDismiss && !icon && !action) {
-    return /* @__PURE__ */ jsx14("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
+    return /* @__PURE__ */ jsx15("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
   }
   const oneLine = Boolean(icon || action);
   return /* @__PURE__ */ jsxs9("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
-    icon && /* @__PURE__ */ jsx14("span", { className: "flex shrink-0", children: icon }),
-    /* @__PURE__ */ jsx14("span", { className: cn("min-w-0 flex-1", oneLine && "truncate"), children }),
-    action && /* @__PURE__ */ jsx14(Button, { variant: "muted", size: "small", className: "shrink-0", onClick: action.onClick, children: action.label }),
-    onDismiss && /* @__PURE__ */ jsx14(IconButton, { variant: "current", "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0", children: /* @__PURE__ */ jsx14(IconX3, { size: 16, stroke: 1.5 }) })
+    icon && /* @__PURE__ */ jsx15("span", { className: "flex shrink-0", children: icon }),
+    /* @__PURE__ */ jsx15("span", { className: cn("min-w-0 flex-1", oneLine && "truncate"), children }),
+    action && /* @__PURE__ */ jsx15(Button, { variant: "muted", size: "small", className: "shrink-0", onClick: action.onClick, children: action.label }),
+    onDismiss && /* @__PURE__ */ jsx15(IconButton, { variant: "current", "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0", children: /* @__PURE__ */ jsx15(IconX3, { size: 16, stroke: 1.5 }) })
   ] });
 }
 
@@ -928,7 +948,7 @@ function Banner({ tone, children, icon, action, onDismiss, dismissLabel = "Dismi
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import { Field as BaseField } from "@base-ui/react/field";
 import { IconCheck } from "@tabler/icons-react";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function squareClasses(checked, disabled, interactive, className) {
   return cn(
     "inline-flex items-center justify-center size-4 shrink-0 rounded-sm border transition-colors",
@@ -945,14 +965,14 @@ function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, row
   const formBusy = useFormBusy();
   const disabled = ownDisabled || formBusy;
   if (!onChange) {
-    const picture = /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx15("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx15(IconCheck, { size: 12, stroke: 3 }) }) });
+    const picture = /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx16("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx16(IconCheck, { size: 12, stroke: 3 }) }) });
     if (label === void 0) return picture;
     return /* @__PURE__ */ jsxs10("span", { className: "flex items-center gap-2", children: [
       picture,
-      /* @__PURE__ */ jsx15("span", { className: WORDS_CLASSES, children: label })
+      /* @__PURE__ */ jsx16("span", { className: WORDS_CLASSES, children: label })
     ] });
   }
-  const box = /* @__PURE__ */ jsx15(
+  const box = /* @__PURE__ */ jsx16(
     BaseCheckbox.Root,
     {
       checked,
@@ -962,25 +982,25 @@ function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, row
       onCheckedChange: (next) => onChange(next),
       onClick: (e) => e.stopPropagation(),
       className: (state) => squareClasses(state.checked, state.disabled, true, className),
-      children: /* @__PURE__ */ jsx15(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx15(IconCheck, { size: 12, stroke: 3 }) })
+      children: /* @__PURE__ */ jsx16(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx16(IconCheck, { size: 12, stroke: 3 }) })
     }
   );
   if (label === void 0) return box;
   if (row) {
-    return /* @__PURE__ */ jsx15(BaseField.Root, { disabled, children: /* @__PURE__ */ jsxs10(BaseField.Label, { className: cn(ROW_CLASSES, checked && "bg-bg-selected", !disabled && "cursor-pointer hover:bg-bg-hover"), children: [
+    return /* @__PURE__ */ jsx16(BaseField.Root, { disabled, children: /* @__PURE__ */ jsxs10(BaseField.Label, { className: cn(ROW_CLASSES, checked && "bg-bg-selected", !disabled && "cursor-pointer hover:bg-bg-hover"), children: [
       leading,
-      /* @__PURE__ */ jsx15("span", { className: cn("flex-1 min-w-0 truncate", WORDS_CLASSES), children: label }),
+      /* @__PURE__ */ jsx16("span", { className: cn("flex-1 min-w-0 truncate", WORDS_CLASSES), children: label }),
       box
     ] }) });
   }
-  return /* @__PURE__ */ jsx15(BaseField.Root, { disabled, children: /* @__PURE__ */ jsxs10(BaseField.Label, { className: cn("flex items-center gap-2", !disabled && "cursor-pointer"), children: [
+  return /* @__PURE__ */ jsx16(BaseField.Root, { disabled, children: /* @__PURE__ */ jsxs10(BaseField.Label, { className: cn("flex items-center gap-2", !disabled && "cursor-pointer"), children: [
     box,
-    /* @__PURE__ */ jsx15("span", { className: WORDS_CLASSES, children: label })
+    /* @__PURE__ */ jsx16("span", { className: WORDS_CLASSES, children: label })
   ] }) });
 }
 
 // src/Chip.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var typeStyles = {
   neutral: "bg-bg-inset text-text-primary",
   brand: "bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
@@ -991,7 +1011,7 @@ var typeStyles = {
 };
 function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className }) {
   return /* @__PURE__ */ jsxs11("div", { className: cn("inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1", typeStyles[type], className), children: [
-    leadingIcon && /* @__PURE__ */ jsx16("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
+    leadingIcon && /* @__PURE__ */ jsx17("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
     label && // A chip given a `max-w-*` cuts a long label with an ellipsis instead
     // of growing past it — Ship's project chip on an issue row
     // (2026-09-09). Clipped sideways only: `overflow-x-clip`, not
@@ -1000,15 +1020,15 @@ function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className })
     // the screenshot diff caught every descender cut off. `clip` is the
     // one overflow that leaves the other axis visible. A chip with no cap
     // draws exactly as before.
-    /* @__PURE__ */ jsx16("span", { className: cn("min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide", CHIP_TEXT_CLASSES), children: label }),
-    trailingIcon && /* @__PURE__ */ jsx16("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
+    /* @__PURE__ */ jsx17("span", { className: cn("min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide", CHIP_TEXT_CLASSES), children: label }),
+    trailingIcon && /* @__PURE__ */ jsx17("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
   ] });
 }
 
 // src/CommandPalette.tsx
 import {
-  createContext as createContext4,
-  useContext as useContext4,
+  createContext as createContext5,
+  useContext as useContext5,
   useEffect as useEffect2,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo2,
@@ -1026,17 +1046,17 @@ import { Combobox } from "@base-ui/react/combobox";
 import { IconX as IconX4 } from "@tabler/icons-react";
 
 // src/Menu.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
+import { createContext as createContext4, useContext as useContext4 } from "react";
 import { IconChevronRight } from "@tabler/icons-react";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 
 // src/Divider.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
 import { Separator } from "@base-ui/react/separator";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-var DividerInPanel = createContext2(false);
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var DividerInPanel = createContext3(false);
 function Divider({ orientation = "horizontal", label, tone = "default", className }) {
-  const inset = useContext2(DividerInPanel) ? "mx-0" : "mx-3";
+  const inset = useContext3(DividerInPanel) ? "mx-0" : "mx-3";
   if (label && orientation === "horizontal") {
     const line = tone === "warning" ? "bg-warning-muted" : "bg-border-subtle";
     return /* @__PURE__ */ jsxs12(
@@ -1046,14 +1066,14 @@ function Divider({ orientation = "horizontal", label, tone = "default", classNam
         "aria-label": label,
         className: cn("flex shrink-0 items-center gap-2", inset, className),
         children: [
-          /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) }),
-          /* @__PURE__ */ jsx17("span", { className: cn("shrink-0 text-caption", tone === "warning" ? "text-warning-default" : "text-text-muted"), children: label }),
-          /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) })
+          /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) }),
+          /* @__PURE__ */ jsx18("span", { className: cn("shrink-0 text-caption", tone === "warning" ? "text-warning-default" : "text-text-muted"), children: label }),
+          /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Separator,
     {
       orientation,
@@ -1069,18 +1089,20 @@ function triggerDisabled(trigger) {
 }
 
 // src/SectionLabel.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function SectionLabel({
   children,
   tone = "primary",
   truncate = false,
   className
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "span",
     {
       className: cn(
         "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest",
+        // Leaf's section labels are Signal's type (Katerina, 28 September).
+        "leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest",
         tone === "secondary" ? "text-text-secondary" : tone === "muted" ? "text-text-muted" : "text-text-primary",
         truncate && "min-w-0 truncate",
         className
@@ -1091,10 +1113,10 @@ function SectionLabel({
 }
 
 // src/Menu.tsx
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
-var MenuContext = createContext3(null);
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var MenuContext = createContext4(null);
 function MenuPanel({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       className: cn(
@@ -1133,7 +1155,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
       actionsRef,
       modal: false,
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           BaseMenu.Trigger,
           {
             render: trigger,
@@ -1143,7 +1165,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
             closeDelay: HOVER_CLOSE_DELAY
           }
         ),
-        /* @__PURE__ */ jsx19(BaseMenu.Portal, { children: /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(BaseMenu.Portal, { children: /* @__PURE__ */ jsx20(
           BaseMenu.Positioner,
           {
             side: "bottom",
@@ -1151,13 +1173,13 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
             sideOffset: GAP2,
             collisionPadding: VIEWPORT_PAD2,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx19(
+            children: /* @__PURE__ */ jsx20(
               BaseMenu.Popup,
               {
                 "data-interactive": true,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx19(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx19(ScrollArea, { viewportClassName: "max-h-[var(--available-height)]", contentClassName: cn("flex flex-col p-2", contentClassName), children: /* @__PURE__ */ jsx19(MenuContext.Provider, { value: { openOnHover }, children: /* @__PURE__ */ jsx19(DividerInPanel.Provider, { value: true, children }) }) })
+                render: /* @__PURE__ */ jsx20(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx20(ScrollArea, { viewportClassName: "max-h-[var(--available-height)]", contentClassName: cn("flex flex-col p-2", contentClassName), children: /* @__PURE__ */ jsx20(MenuContext.Provider, { value: { openOnHover }, children: /* @__PURE__ */ jsx20(DividerInPanel.Provider, { value: true, children }) }) })
               }
             )
           }
@@ -1167,26 +1189,26 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
   );
 }
 function MenuSub({ label, leading, selected, children, className }) {
-  const menu = useContext3(MenuContext);
+  const menu = useContext4(MenuContext);
   if (!isProduction() && menu?.openOnHover) {
     console.error(
       '[@estiva-app/ui] Menu: `openOnHover` and `MenuSub` cannot be used together \u2014 leaving the submenu panel strands the menu open. Open this menu on a press instead. See Menu.mdx, "Hover-opened menus".'
     );
   }
   return /* @__PURE__ */ jsxs13(BaseMenu.SubmenuRoot, { children: [
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       BaseMenu.SubmenuTrigger,
       {
         openOnHover: true,
         delay: 0,
         closeDelay: 150,
         nativeButton: true,
-        render: /* @__PURE__ */ jsx19("button", { type: "button" }),
+        render: /* @__PURE__ */ jsx20("button", { type: "button" }),
         className: menuItemClassName({ size: "default", selected }),
-        children: /* @__PURE__ */ jsx19(MenuItemBody, { label, leading, submenu: true })
+        children: /* @__PURE__ */ jsx20(MenuItemBody, { label, leading, submenu: true })
       }
     ),
-    /* @__PURE__ */ jsx19(BaseMenu.Portal, { children: /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(BaseMenu.Portal, { children: /* @__PURE__ */ jsx20(
       BaseMenu.Positioner,
       {
         side: "inline-end",
@@ -1194,7 +1216,7 @@ function MenuSub({ label, leading, selected, children, className }) {
         sideOffset: GAP2,
         collisionPadding: VIEWPORT_PAD2,
         className: "z-50 data-[anchor-hidden]:hidden",
-        children: /* @__PURE__ */ jsx19(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx19(MenuPanel, {}), children })
+        children: /* @__PURE__ */ jsx20(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx20(MenuPanel, {}), children })
       }
     ) })
   ] });
@@ -1229,25 +1251,25 @@ function menuItemClassName({ size, selected, className }) {
   );
 }
 function MenuItemBody({ label, children, size = "default", description, leading, trailing, hint, shortcut, submenu, destructive, selected }) {
-  const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx19(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx19(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
-  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
-    leading && /* @__PURE__ */ jsx19("span", { className: "flex shrink-0 items-center", children: leading }),
+  const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx20(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx20(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
+  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+    leading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: leading }),
     children ?? /* @__PURE__ */ jsxs13("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
-      /* @__PURE__ */ jsx19("span", { className: cn("truncate text-body-2", destructive ? "text-error-default" : "text-text-primary"), children: label }),
-      description && /* @__PURE__ */ jsx19("span", { className: "truncate text-caption text-text-secondary", children: description })
+      /* @__PURE__ */ jsx20("span", { className: cn("truncate text-body-2", destructive ? "text-error-default" : "text-text-primary"), children: label }),
+      description && /* @__PURE__ */ jsx20("span", { className: "truncate text-caption text-text-secondary", children: description })
     ] }),
     (edge || hint) && // One grid cell holding both, right-aligned: the slot is as wide as
     // the wider of the two and never changes, so revealing the hint moves
     // nothing. No transition here either — the hint switches on the same
     // :hover / `selected` as the fill, in the same frame.
     /* @__PURE__ */ jsxs13("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
-      edge && /* @__PURE__ */ jsx19("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
-      hint && /* @__PURE__ */ jsx19("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100 group-data-[highlighted]:opacity-100", selected && "opacity-100"), children: hint })
+      edge && /* @__PURE__ */ jsx20("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
+      hint && /* @__PURE__ */ jsx20("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100 group-data-[highlighted]:opacity-100", selected && "opacity-100"), children: hint })
     ] })
   ] });
 }
 function MenuItem({ label, children, size = "default", description, leading, trailing, hint, shortcut, submenu, destructive, selected, className, ...props }) {
-  const body = /* @__PURE__ */ jsx19(
+  const body = /* @__PURE__ */ jsx20(
     MenuItemBody,
     {
       label,
@@ -1264,14 +1286,14 @@ function MenuItem({ label, children, size = "default", description, leading, tra
     }
   );
   const rowClassName = menuItemClassName({ size, selected, className });
-  if (!useContext3(MenuContext)) {
-    return /* @__PURE__ */ jsx19("button", { type: "button", className: rowClassName, ...props, children: body });
+  if (!useContext4(MenuContext)) {
+    return /* @__PURE__ */ jsx20("button", { type: "button", className: rowClassName, ...props, children: body });
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     BaseMenu.Item,
     {
       nativeButton: true,
-      render: /* @__PURE__ */ jsx19("button", { type: "button" }),
+      render: /* @__PURE__ */ jsx20("button", { type: "button" }),
       className: rowClassName,
       ...props,
       children: body
@@ -1280,13 +1302,13 @@ function MenuItem({ label, children, size = "default", description, leading, tra
 }
 function EnterHint({ target }) {
   return /* @__PURE__ */ jsxs13("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
-    /* @__PURE__ */ jsx19(Kbd, { children: "\u21A9 Enter" }),
-    target && /* @__PURE__ */ jsx19("span", { className: "text-menu signal:font-mono signal:text-small signal:tracking-wider", children: target })
+    /* @__PURE__ */ jsx20(Kbd, { children: "\u21A9 Enter" }),
+    target && /* @__PURE__ */ jsx20("span", { className: "text-menu signal:font-mono signal:text-small signal:tracking-wider leaf:font-mono leaf:text-small leaf:tracking-wider", children: target })
   ] });
 }
 function MenuSection({ label, children, className }) {
-  const inMenu = useContext3(MenuContext) !== null;
-  const heading = /* @__PURE__ */ jsx19("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx19(SectionLabel, { tone: "secondary", children: label }) });
+  const inMenu = useContext4(MenuContext) !== null;
+  const heading = /* @__PURE__ */ jsx20("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx20(SectionLabel, { tone: "secondary", children: label }) });
   if (!inMenu) {
     return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col", children: [
       heading,
@@ -1294,19 +1316,19 @@ function MenuSection({ label, children, className }) {
     ] });
   }
   return /* @__PURE__ */ jsxs13(BaseMenu.Group, { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx19(BaseMenu.GroupLabel, { render: heading }),
+    /* @__PURE__ */ jsx20(BaseMenu.GroupLabel, { render: heading }),
     children
   ] });
 }
 function MenuSeparator() {
-  return /* @__PURE__ */ jsx19(Divider, { className: "my-1" });
+  return /* @__PURE__ */ jsx20(Divider, { className: "my-1" });
 }
 function MenuRow({ children, className }) {
-  return /* @__PURE__ */ jsx19("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
+  return /* @__PURE__ */ jsx20("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
 }
 
 // src/ChipInput.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var CHIP_BOX = (
   // Curved, not a pill (Katerina, 2026-09-01): the Avatar keeps its own
   // rounded-sm corners — never a forced circle — and the chip's corner
@@ -1318,9 +1340,9 @@ var CHIP_REMOVE = "size-4 flex items-center justify-center rounded-full hover:bg
 var chipPadding = (leading, removable) => cn(leading ? "pl-[2px]" : "pl-2", removable ? "pr-1" : "pr-2");
 function InputChip({ label, leading, onRemove, removeLabel, truncate, className }) {
   return /* @__PURE__ */ jsxs14("div", { className: cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className), children: [
-    leading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: leading }),
-    /* @__PURE__ */ jsx20("span", { className: cn(CHIP_LABEL, truncate && "min-w-0 truncate"), children: label }),
-    onRemove && /* @__PURE__ */ jsx20(
+    leading && /* @__PURE__ */ jsx21("span", { className: "flex shrink-0 items-center", children: leading }),
+    /* @__PURE__ */ jsx21("span", { className: cn(CHIP_LABEL, truncate && "min-w-0 truncate"), children: label }),
+    onRemove && /* @__PURE__ */ jsx21(
       BaseButton4,
       {
         type: "button",
@@ -1330,7 +1352,7 @@ function InputChip({ label, leading, onRemove, removeLabel, truncate, className
         },
         className: cn(CHIP_REMOVE, truncate && "shrink-0"),
         "aria-label": removeLabel ?? `Remove ${label}`,
-        children: /* @__PURE__ */ jsx20(IconX4, { size: 10, stroke: 1.5 })
+        children: /* @__PURE__ */ jsx21(IconX4, { size: 10, stroke: 1.5 })
       }
     )
   ] });
@@ -1402,11 +1424,11 @@ function ChipInput({
       children: [
         /* @__PURE__ */ jsxs14(Combobox.Chips, { ref: setBox, className: cn(FIELD_SHELL_CLASSES, "focus-within:border-border-focus focus-within:hover:border-border-focus px-3 py-1.5 flex flex-wrap items-center gap-1.5 min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring"), children: [
           value.map((option) => /* @__PURE__ */ jsxs14(Combobox.Chip, { className: cn(CHIP_BOX, chipPadding(!!chipLeading, true)), children: [
-            chipLeading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: chipLeading(option) }),
-            /* @__PURE__ */ jsx20("span", { className: CHIP_LABEL, children: option.label }),
-            /* @__PURE__ */ jsx20(Combobox.ChipRemove, { className: CHIP_REMOVE, "aria-label": `Remove ${option.label}`, children: /* @__PURE__ */ jsx20(IconX4, { size: 10, stroke: 1.5 }) })
+            chipLeading && /* @__PURE__ */ jsx21("span", { className: "flex shrink-0 items-center", children: chipLeading(option) }),
+            /* @__PURE__ */ jsx21("span", { className: CHIP_LABEL, children: option.label }),
+            /* @__PURE__ */ jsx21(Combobox.ChipRemove, { className: CHIP_REMOVE, "aria-label": `Remove ${option.label}`, children: /* @__PURE__ */ jsx21(IconX4, { size: 10, stroke: 1.5 }) })
           ] }, option.id)),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             Combobox.Input,
             {
               autoFocus,
@@ -1418,18 +1440,18 @@ function ChipInput({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx20(Combobox.Portal, { children: /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(Combobox.Portal, { children: /* @__PURE__ */ jsx21(
           Combobox.Positioner,
           {
             anchor: box,
             sideOffset: GAP3,
             collisionPadding: VIEWPORT_PAD3,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx20(Combobox.Popup, { className: "w-[var(--anchor-width)] p-0", render: /* @__PURE__ */ jsx20(MenuPanel, {}), children: /* @__PURE__ */ jsx20(ScrollArea, { viewportClassName: "max-h-[240px]", contentClassName: "flex flex-col p-2", children: /* @__PURE__ */ jsx20(Combobox.List, { children: (option) => /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx21(Combobox.Popup, { className: "w-[var(--anchor-width)] p-0", render: /* @__PURE__ */ jsx21(MenuPanel, {}), children: /* @__PURE__ */ jsx21(ScrollArea, { viewportClassName: "max-h-[240px]", contentClassName: "flex flex-col p-2", children: /* @__PURE__ */ jsx21(Combobox.List, { children: (option) => /* @__PURE__ */ jsx21(
               Combobox.Item,
               {
                 value: option,
-                render: /* @__PURE__ */ jsx20(
+                render: /* @__PURE__ */ jsx21(
                   MenuItem,
                   {
                     size: "tall",
@@ -1452,22 +1474,22 @@ var VIEWPORT_PAD3 = 8;
 
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function EmptyState({ icon, message, scope = "page", action, className }) {
   if (scope === "section") {
-    return /* @__PURE__ */ jsx21("p", { className: cn("text-caption text-text-muted", className), children: message });
+    return /* @__PURE__ */ jsx22("p", { className: cn("text-caption text-text-muted", className), children: message });
   }
   return /* @__PURE__ */ jsxs15("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
-    /* @__PURE__ */ jsx21("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx21(IconMessage2, { size: 16, stroke: 1.5 }) }),
-    /* @__PURE__ */ jsx21("p", { className: "text-body-2 text-text-secondary text-center", children: message }),
-    action && /* @__PURE__ */ jsx21(Button, { variant: "outlined", className: "mt-2", onClick: action.onClick, children: action.label })
+    /* @__PURE__ */ jsx22("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx22(IconMessage2, { size: 16, stroke: 1.5 }) }),
+    /* @__PURE__ */ jsx22("p", { className: "text-body-2 text-text-secondary text-center", children: message }),
+    action && /* @__PURE__ */ jsx22(Button, { variant: "outlined", className: "mt-2", onClick: action.onClick, children: action.label })
   ] });
 }
 
 // src/Field.tsx
 import { cloneElement, isValidElement } from "react";
 import { Field as BaseField2 } from "@base-ui/react/field";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var LINE_STYLES = {
   helper: "text-caption text-text-muted",
   warning: "text-caption text-warning-default",
@@ -1480,23 +1502,23 @@ function Field({ label, required = false, helper, error, children }) {
   return /* @__PURE__ */ jsxs16(BaseField2.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs16(BaseField2.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
       label,
-      required && /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
+      required && /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
     ] }),
     /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1.5", children: [
       control,
-      error != null ? /* @__PURE__ */ jsx22(BaseField2.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx22(BaseField2.Description, { className: LINE_STYLES.helper, children: helper }) : null
+      error != null ? /* @__PURE__ */ jsx23(BaseField2.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx23(BaseField2.Description, { className: LINE_STYLES.helper, children: helper }) : null
     ] })
   ] });
 }
 function FieldLine({ tone = "helper", children, className }) {
-  return /* @__PURE__ */ jsx22("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
+  return /* @__PURE__ */ jsx23("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
 }
 
 // src/Form.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
 import { Fieldset } from "@base-ui/react/fieldset";
 import { Form as BaseForm } from "@base-ui/react/form";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } 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) {
@@ -1555,7 +1577,7 @@ function Form({ onSubmit, busy: ownBusy = false, enterSends = true, className, c
     const oneLine = ONE_LINE.has((target.getAttribute("type") ?? "").toLowerCase()) && target.getAttribute("role") !== "combobox";
     if (enterSends && oneLine) form.current?.requestSubmit();
   };
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     BaseForm,
     {
       ref: form,
@@ -1578,32 +1600,32 @@ function Form({ onSubmit, busy: ownBusy = false, enterSends = true, className, c
         if (busyNow.current) return;
         void onSubmit();
       },
-      children: /* @__PURE__ */ jsx23(Fieldset.Root, { disabled: busy, className: "contents", children: /* @__PURE__ */ jsx23(FormBusyContext.Provider, { value: busy, children }) })
+      children: /* @__PURE__ */ jsx24(Fieldset.Root, { disabled: busy, className: "contents", children: /* @__PURE__ */ jsx24(FormBusyContext.Provider, { value: busy, children }) })
     }
   );
 }
 
 // src/Skeleton.tsx
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 function SkeletonBar({ className, style }) {
-  return /* @__PURE__ */ jsx24("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
+  return /* @__PURE__ */ jsx25("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__ */ jsxs17("div", { className: "flex shrink-0 items-center gap-2 px-2 h-[32px] rounded-lg", children: [
-    /* @__PURE__ */ jsx24(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
-    /* @__PURE__ */ jsx24(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
+    /* @__PURE__ */ jsx25(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
+    /* @__PURE__ */ jsx25(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
   ] });
 }
 function SkeletonList({ rows = 8, className }) {
-  return /* @__PURE__ */ jsx24("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx24(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
+  return /* @__PURE__ */ jsx25("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx25(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
 }
 
 // src/CommandPalette.tsx
-import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
-var PaletteContext = createContext4(null);
+import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+var PaletteContext = createContext5(null);
 function usePalette(part) {
-  const palette = useContext4(PaletteContext);
+  const palette = useContext5(PaletteContext);
   if (!palette) throw new Error(`[@estiva-app/ui] ${part} must be inside a CommandPalette.`);
   return palette;
 }
@@ -1626,9 +1648,9 @@ function CommandPalette({ open, onOpenChange, label, where, modKey = "Ctrl", chi
     return () => cancelAnimationFrame(frame);
   });
   const context = useMemo2(() => ({ where, modKey, popupRef }), [where, modKey]);
-  return /* @__PURE__ */ jsx25(Dialog2.Root, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs18(Dialog2.Portal, { children: [
-    /* @__PURE__ */ jsx25(Dialog2.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-    /* @__PURE__ */ jsx25(Dialog2.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center pt-[16vh]", children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(Dialog2.Root, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs18(Dialog2.Portal, { children: [
+    /* @__PURE__ */ jsx26(Dialog2.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+    /* @__PURE__ */ jsx26(Dialog2.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center pt-[16vh]", children: /* @__PURE__ */ jsx26(
       Dialog2.Popup,
       {
         ref: popupRef,
@@ -1638,13 +1660,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__ */ jsx25(PaletteContext.Provider, { value: context, children })
+        children: /* @__PURE__ */ jsx26(PaletteContext.Provider, { value: context, children })
       }
     ) })
   ] }) });
 }
 function LevelChip({ chip, onBack }) {
-  return /* @__PURE__ */ jsx25(InputChip, { label: chip.label, leading: chip.leading, onRemove: onBack, removeLabel: `Leave ${chip.label}`, truncate: true, className: "max-w-[272px] shrink-0" });
+  return /* @__PURE__ */ jsx26(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 () => {
@@ -1655,10 +1677,10 @@ function useBack(chip, popupRef) {
 }
 function Footer({ keys }) {
   const { where } = usePalette("The footer");
-  return /* @__PURE__ */ jsxs18("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__ */ jsx25("span", { className: "min-w-0 flex-1 truncate", children: where }),
+  return /* @__PURE__ */ jsxs18("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 leaf:font-mono leaf:text-small", children: [
+    /* @__PURE__ */ jsx26("span", { className: "min-w-0 flex-1 truncate", children: where }),
     keys.map(([key, word]) => /* @__PURE__ */ jsxs18("span", { className: "flex shrink-0 items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx25(Kbd, { children: key }),
+      /* @__PURE__ */ jsx26(Kbd, { children: key }),
       " ",
       word
     ] }, key))
@@ -1759,9 +1781,9 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
       },
       children: [
         /* @__PURE__ */ jsxs18("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
-          /* @__PURE__ */ jsx25(IconSearch, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" }),
-          chip && /* @__PURE__ */ jsx25(LevelChip, { chip, onBack: back }),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(IconSearch, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" }),
+          chip && /* @__PURE__ */ jsx26(LevelChip, { chip, onBack: back }),
+          /* @__PURE__ */ jsx26(
             Autocomplete.Input,
             {
               ref: inputRef,
@@ -1774,42 +1796,42 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
           )
         ] }),
         /* @__PURE__ */ jsxs18(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col p-2", children: [
-          children != null && /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children }),
-          /* @__PURE__ */ jsx25(Autocomplete.List, { className: "flex flex-col", children: (group) => /* @__PURE__ */ jsxs18(Autocomplete.Group, { items: group.items, className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx25(Autocomplete.GroupLabel, { className: "flex h-7 shrink-0 items-center px-3", children: /* @__PURE__ */ jsx25(SectionLabel, { tone: "secondary", children: group.value }) }),
-            /* @__PURE__ */ jsx25(Autocomplete.Collection, { children: (row) => (
+          children != null && /* @__PURE__ */ jsx26("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children }),
+          /* @__PURE__ */ jsx26(Autocomplete.List, { className: "flex flex-col", children: (group) => /* @__PURE__ */ jsxs18(Autocomplete.Group, { items: group.items, className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx26(Autocomplete.GroupLabel, { className: "flex h-7 shrink-0 items-center px-3", children: /* @__PURE__ */ jsx26(SectionLabel, { tone: "secondary", children: group.value }) }),
+            /* @__PURE__ */ jsx26(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__ */ jsx25(Autocomplete.Item, { value: row, onClick: () => row.onSelect(), className: menuItemClassName({ size: "tall" }), children: /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26(Autocomplete.Item, { value: row, onClick: () => row.onSelect(), className: menuItemClassName({ size: "tall" }), children: /* @__PURE__ */ jsx26(
                 MenuItemBody,
                 {
                   size: "tall",
                   label: row.label,
                   description: row.description,
-                  leading: /* @__PURE__ */ jsx25(RowLeading, { row }),
+                  leading: /* @__PURE__ */ jsx26(RowLeading, { row }),
                   submenu: !!row.onGoIn,
-                  hint: row.onGoIn ? /* @__PURE__ */ jsx25(Kbd, { children: "Tab" }) : /* @__PURE__ */ jsx25(EnterHint, {})
+                  hint: row.onGoIn ? /* @__PURE__ */ jsx26(Kbd, { children: "Tab" }) : /* @__PURE__ */ jsx26(EnterHint, {})
                 }
               ) }, row.id)
             ) })
           ] }, group.value) }),
-          /* @__PURE__ */ jsx25(Autocomplete.Status, { className: "flex items-center gap-2 px-3 [&:not(:empty)]:h-8", children: pending && /* @__PURE__ */ jsxs18(Fragment3, { children: [
-            /* @__PURE__ */ jsx25(IconLoader22, { size: 12, stroke: 1.5, className: "shrink-0 animate-spin text-text-muted" }),
-            /* @__PURE__ */ jsx25("span", { className: "text-caption text-text-muted", children: pending })
+          /* @__PURE__ */ jsx26(Autocomplete.Status, { className: "flex items-center gap-2 px-3 [&:not(:empty)]:h-8", children: pending && /* @__PURE__ */ jsxs18(Fragment4, { children: [
+            /* @__PURE__ */ jsx26(IconLoader22, { size: 12, stroke: 1.5, className: "shrink-0 animate-spin text-text-muted" }),
+            /* @__PURE__ */ jsx26("span", { className: "text-caption text-text-muted", children: pending })
           ] }) }),
-          notes.map((note) => /* @__PURE__ */ jsx25("div", { className: "flex min-h-8 items-center px-3", children: /* @__PURE__ */ jsx25(FieldLine, { children: note }) }, note)),
-          /* @__PURE__ */ jsx25(Autocomplete.Empty, { className: "flex items-center px-3 [&:not(:empty)]:min-h-10", children: empty && /* @__PURE__ */ jsx25(EmptyState, { scope: "section", message: empty }) })
+          notes.map((note) => /* @__PURE__ */ jsx26("div", { className: "flex min-h-8 items-center px-3", children: /* @__PURE__ */ jsx26(FieldLine, { children: note }) }, note)),
+          /* @__PURE__ */ jsx26(Autocomplete.Empty, { className: "flex items-center px-3 [&:not(:empty)]:min-h-10", children: empty && /* @__PURE__ */ jsx26(EmptyState, { scope: "section", message: empty }) })
         ] }),
-        /* @__PURE__ */ jsx25(Footer, { keys })
+        /* @__PURE__ */ jsx26(Footer, { keys })
       ]
     }
   );
 }
 function RowLeading({ row }) {
   if (row.icon != null) {
-    return /* @__PURE__ */ jsx25("span", { className: "flex size-8 items-center justify-center rounded-sm bg-bg-inset text-text-secondary", children: row.icon });
+    return /* @__PURE__ */ jsx26("span", { className: "flex size-8 items-center justify-center rounded-sm bg-bg-inset text-text-secondary", children: row.icon });
   }
-  return /* @__PURE__ */ jsx25("span", { className: "flex size-8 items-center justify-center", children: row.leading });
+  return /* @__PURE__ */ jsx26("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) {
@@ -1853,54 +1875,54 @@ function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWaits, wo
   ];
   return /* @__PURE__ */ jsxs18("div", { ref: frameRef, tabIndex: -1, onKeyDown, onFocus: measure, onBlur: measure, onInput: measure, className: "flex min-h-0 flex-col outline-none", children: [
     /* @__PURE__ */ jsxs18("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
-      icon != null && /* @__PURE__ */ jsx25("span", { className: "flex shrink-0 items-center text-text-secondary", children: icon }),
-      /* @__PURE__ */ jsx25(LevelChip, { chip, onBack: back })
+      icon != null && /* @__PURE__ */ jsx26("span", { className: "flex shrink-0 items-center text-text-secondary", children: icon }),
+      /* @__PURE__ */ jsx26(LevelChip, { chip, onBack: back })
     ] }),
     /* @__PURE__ */ jsxs18(Form, { "data-command-palette-fields": "", busy, enterSends: false, onSubmit: submit, className: "flex min-h-0 flex-col", children: [
-      /* @__PURE__ */ jsx25(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col px-5 py-4", children: /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-4", children }) }),
+      /* @__PURE__ */ jsx26(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col px-5 py-4", children: /* @__PURE__ */ jsx26("div", { className: "flex flex-col gap-4", children }) }),
       /* @__PURE__ */ jsxs18("div", { className: "flex shrink-0 items-center gap-3 px-5 pb-4", children: [
-        /* @__PURE__ */ jsx25("div", { className: "min-w-0 flex-1", children: working ? /* @__PURE__ */ jsx25(FieldLine, { children: working.line }) : error ? /* @__PURE__ */ jsx25(FieldLine, { tone: "error", children: error }) : null }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26("div", { className: "min-w-0 flex-1", children: working ? /* @__PURE__ */ jsx26(FieldLine, { children: working.line }) : error ? /* @__PURE__ */ jsx26(FieldLine, { tone: "error", children: error }) : null }),
+        /* @__PURE__ */ jsx26(
           Button,
           {
             type: "submit",
             variant: "primary",
             disabled: busy,
             disabledReason: busy ? void 0 : submitWaits,
-            leadingIcon: busy ? /* @__PURE__ */ jsx25(IconLoader22, { size: 16, stroke: 1.5, className: "animate-spin" }) : void 0,
+            leadingIcon: busy ? /* @__PURE__ */ jsx26(IconLoader22, { size: 16, stroke: 1.5, className: "animate-spin" }) : void 0,
             children: working ? working.button : submitLabel
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx25(Footer, { keys })
+    /* @__PURE__ */ jsx26(Footer, { keys })
   ] });
 }
 var BAR_WIDTHS = ["w-4/5", "w-3/5", "w-2/3"];
 function CommandPaletteWorking({ children, bars = 2 }) {
   return /* @__PURE__ */ jsxs18("div", { role: "status", className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs18("span", { className: "flex items-center gap-2 text-caption text-text-secondary", children: [
-      /* @__PURE__ */ jsx25(IconLoader22, { size: 14, stroke: 1.5, className: "shrink-0 animate-spin" }),
+      /* @__PURE__ */ jsx26(IconLoader22, { size: 14, stroke: 1.5, className: "shrink-0 animate-spin" }),
       children
     ] }),
-    BAR_WIDTHS.slice(0, bars).map((width) => /* @__PURE__ */ jsx25(SkeletonBar, { className: cn("h-3", width) }, width))
+    BAR_WIDTHS.slice(0, bars).map((width) => /* @__PURE__ */ jsx26(SkeletonBar, { className: cn("h-3", width) }, width))
   ] });
 }
 function CommandPaletteAnswer({ children, note }) {
   const paragraphs = children.split(/\n\s*\n/).filter((p) => p.trim() !== "");
   return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2", children: [
-    paragraphs.map((paragraph, i) => /* @__PURE__ */ jsx25("p", { className: "whitespace-pre-wrap text-body-2 text-text-primary", children: paragraph.split(/\s*(\[\d+\])/).map(
-      (part, j) => /^\[\d+\]$/.test(part) ? /* @__PURE__ */ jsx25("sup", { className: "ml-0.5 font-mono text-small text-accent-primary", children: part.slice(1, -1) }, j) : part
+    paragraphs.map((paragraph, i) => /* @__PURE__ */ jsx26("p", { className: "whitespace-pre-wrap text-body-2 text-text-primary", children: paragraph.split(/\s*(\[\d+\])/).map(
+      (part, j) => /^\[\d+\]$/.test(part) ? /* @__PURE__ */ jsx26("sup", { className: "ml-0.5 font-mono text-small text-accent-primary", children: part.slice(1, -1) }, j) : part
     ) }, i)),
-    note && /* @__PURE__ */ jsx25(FieldLine, { children: note })
+    note && /* @__PURE__ */ jsx26(FieldLine, { children: note })
   ] });
 }
 function CommandPaletteQuote({ children }) {
-  return /* @__PURE__ */ jsx25("p", { className: "whitespace-pre-wrap border-l-2 border-border-default pl-3 text-body-2 text-text-primary", children });
+  return /* @__PURE__ */ jsx26("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 jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs19 } 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. */
@@ -1922,30 +1944,30 @@ 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__ */ jsxs19(Fragment4, { children: [
-    icon && /* @__PURE__ */ jsx26("span", { className: "flex size-4 shrink-0 items-center justify-center text-text-secondary", children: icon }),
+  const body = /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    icon && /* @__PURE__ */ jsx27("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__ */ jsx26("span", { className: classes, ...props, children: body });
+    return /* @__PURE__ */ jsx27("span", { className: classes, ...props, children: body });
   }
-  return /* @__PURE__ */ jsx26("a", { href, className: classes, ...props, children: body });
+  return /* @__PURE__ */ jsx27("a", { href, className: classes, ...props, children: body });
 }
 
 // src/IdentityMenu.tsx
 import { useCallback, useRef as useRef5 } from "react";
 
 // src/Person.tsx
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } 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__ */ jsxs20("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-      /* @__PURE__ */ jsx27(Avatar, { name, src: picture, size }),
-      /* @__PURE__ */ jsx27("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
+      /* @__PURE__ */ jsx28(Avatar, { name, src: picture, size }),
+      /* @__PURE__ */ jsx28("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
   );
 }
@@ -1953,10 +1975,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 jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       BaseButton5,
       {
         type: "button",
@@ -1965,7 +1987,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__ */ jsx28(Avatar, { name, src: picture, size: size ?? 36 })
+        children: /* @__PURE__ */ jsx29(Avatar, { name, src: picture, size: size ?? 36 })
       }
     );
   }
@@ -1989,8 +2011,8 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx28(Person, { name, picture, fallback, size: size ?? 22 }),
-          /* @__PURE__ */ jsx28(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+          /* @__PURE__ */ jsx29(Person, { name, picture, fallback, size: size ?? 22 }),
+          /* @__PURE__ */ jsx29(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
         ]
       }
     )
@@ -1998,10 +2020,10 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
 }
 
 // src/IdentityMenu.tsx
-import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 function IdentityPanel({ className, onClose = () => {
 }, ...rest }) {
-  return /* @__PURE__ */ jsx29(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx29(IdentityRows, { ...rest, onClose }) });
+  return /* @__PURE__ */ jsx30(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx30(IdentityRows, { ...rest, onClose }) });
 }
 function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, children }) {
   const act = (action) => () => {
@@ -2009,36 +2031,36 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
     action();
   };
   const appRows = typeof children === "function" ? children(onClose) : children;
-  return /* @__PURE__ */ jsxs22(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
     /* @__PURE__ */ jsxs22(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
-      /* @__PURE__ */ jsx29(MenuRow, { children: /* @__PURE__ */ jsx29("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx29(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
-      /* @__PURE__ */ jsx29(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__ */ jsx30(MenuRow, { children: /* @__PURE__ */ jsx30("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx30(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
+      /* @__PURE__ */ jsx30(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__ */ jsxs22(Note, { children: [
         me.email,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
-    relayUrl && /* @__PURE__ */ jsxs22(Fragment5, { children: [
-      /* @__PURE__ */ jsx29(Divider, { className: "mx-0 my-2" }),
+    relayUrl && /* @__PURE__ */ jsxs22(Fragment6, { children: [
+      /* @__PURE__ */ jsx30(Divider, { className: "mx-0 my-2" }),
       /* @__PURE__ */ jsxs22(MenuSection, { label: "Workspace", children: [
-        /* @__PURE__ */ jsx29(MenuRow, { children: /* @__PURE__ */ jsx29("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
-        /* @__PURE__ */ jsx29(Note, { children: "Everyone on this relay shares this workspace, in every app." })
+        /* @__PURE__ */ jsx30(MenuRow, { children: /* @__PURE__ */ jsx30("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
+        /* @__PURE__ */ jsx30(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
-    appRows && /* @__PURE__ */ jsxs22(Fragment5, { children: [
-      /* @__PURE__ */ jsx29(Divider, { className: "mx-0 my-2" }),
+    appRows && /* @__PURE__ */ jsxs22(Fragment6, { children: [
+      /* @__PURE__ */ jsx30(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
-    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx29(Divider, { className: "mx-0 my-2" }) : null,
-    signedIn && idBase && /* @__PURE__ */ jsx29(
+    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx30(Divider, { className: "mx-0 my-2" }) : null,
+    signedIn && idBase && /* @__PURE__ */ jsx30(
       MenuItem,
       {
         label: "Edit your profile in Estiva ID",
         onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
       }
     ),
-    onCopyKey && /* @__PURE__ */ jsx29(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
-    idBase && onSignOut && /* @__PURE__ */ jsx29(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
+    onCopyKey && /* @__PURE__ */ jsx30(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
+    idBase && onSignOut && /* @__PURE__ */ jsx30(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
   ] });
 }
 function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
@@ -2049,13 +2071,13 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
        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__ */ jsx29("div", { className, children: /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30("div", { className, children: /* @__PURE__ */ jsx30(
       Menu,
       {
         align: "right",
         actionsRef: actions,
         className: "w-72",
-        trigger: /* @__PURE__ */ jsx29(
+        trigger: /* @__PURE__ */ jsx30(
           PersonTrigger,
           {
             name: me.name,
@@ -2066,7 +2088,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
             "aria-label": compact ? "Account menu" : void 0
           }
         ),
-        children: /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx30(
           IdentityRows,
           {
             me,
@@ -2084,14 +2106,14 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
   );
 }
 function Note({ children }) {
-  return /* @__PURE__ */ jsx29("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
+  return /* @__PURE__ */ jsx30("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
 }
 
 // src/FilePicker.tsx
 import { forwardRef } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "input",
     {
       ref,
@@ -2112,7 +2134,7 @@ var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
 // 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 jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
 var GAP4 = 4;
 var VIEWPORT_PAD4 = 8;
 function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, disabledReason, className, ...aria }) {
@@ -2135,8 +2157,8 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
            * `truncate` from ever engaging; in a block container max-w-full is
            * the cap. Full-width callers are unaffected.
            */
-          "flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left",
-          "border-border-default outline-none transition-colors",
+          "flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-field shadow-field text-left",
+          "border-border-field outline-none transition-colors",
           FIELD_TEXT_CLASSES,
           // The focused border survives a hover: hover alone strengthens the
           // hairline, but hover while focused must not grey the focus colour —
@@ -2151,13 +2173,13 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
         ),
         children: [
           /* @__PURE__ */ jsxs23("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-            selected?.leading && /* @__PURE__ */ jsx31("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-            /* @__PURE__ */ jsx31(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+            selected?.leading && /* @__PURE__ */ jsx32("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+            /* @__PURE__ */ jsx32(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
           ] }),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(
             BaseSelect.Icon,
             {
-              render: /* @__PURE__ */ jsx31(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+              render: /* @__PURE__ */ jsx32(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
             }
           )
         ]
@@ -2176,8 +2198,8 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
       disabled: disabled && !held,
       modal: false,
       children: [
-        held ? /* @__PURE__ */ jsx31(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
-        /* @__PURE__ */ jsx31(BaseSelect.Portal, { children: /* @__PURE__ */ jsx31(
+        held ? /* @__PURE__ */ jsx32(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
+        /* @__PURE__ */ jsx32(BaseSelect.Portal, { children: /* @__PURE__ */ jsx32(
           BaseSelect.Positioner,
           {
             side: "bottom",
@@ -2186,25 +2208,25 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
             collisionPadding: VIEWPORT_PAD4,
             alignItemWithTrigger: false,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx31(
+            children: /* @__PURE__ */ jsx32(
               BaseSelect.Popup,
               {
-                render: /* @__PURE__ */ jsx31(MenuPanel, {}),
+                render: /* @__PURE__ */ jsx32(MenuPanel, {}),
                 className: "min-w-[var(--anchor-width)] p-0",
-                children: /* @__PURE__ */ jsx31(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs23(
+                children: /* @__PURE__ */ jsx32(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs23(
                   BaseSelect.Item,
                   {
                     value: option.value,
                     className: cn(menuItemClassName({ size: "default" }), "justify-between data-[selected]:font-medium"),
                     children: [
                       /* @__PURE__ */ jsxs23("span", { className: "flex min-w-0 items-center gap-2", children: [
-                        option.leading && /* @__PURE__ */ jsx31("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                        /* @__PURE__ */ jsx31(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
+                        option.leading && /* @__PURE__ */ jsx32("span", { className: "flex shrink-0 items-center", children: option.leading }),
+                        /* @__PURE__ */ jsx32(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
                       ] }),
-                      /* @__PURE__ */ jsx31(
+                      /* @__PURE__ */ jsx32(
                         BaseSelect.ItemIndicator,
                         {
-                          render: /* @__PURE__ */ jsx31(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                          render: /* @__PURE__ */ jsx32(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
                         }
                       )
                     ]
@@ -2223,9 +2245,9 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
 // src/TextInput.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { Input } from "@base-ui/react/input";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var TextInput = forwardRef2(function TextInput2({ className, type = "text", size = "default", ...props }, ref) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     Input,
     {
       ref,
@@ -2251,13 +2273,13 @@ var TextInput = forwardRef2(function TextInput2({ className, type = "text", size
 // src/Textarea.tsx
 import { forwardRef as forwardRef3 } from "react";
 import { Field as BaseField3 } from "@base-ui/react/field";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Textarea = forwardRef3(function Textarea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     BaseField3.Control,
     {
       ref,
-      render: /* @__PURE__ */ jsx33("textarea", {}),
+      render: /* @__PURE__ */ jsx34("textarea", {}),
       className: cn(
         // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
         // "aren't there hover states in text input and text area?"). Focus comes after hover in
@@ -2286,24 +2308,24 @@ import { IconX as IconX5 } from "@tabler/icons-react";
 
 // src/ContainerHeader.tsx
 import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 function ContainerHeader({ title, chevron = false, actions, className }) {
   const text = typeof title === "string";
   return /* @__PURE__ */ jsxs24("div", { className: cn("flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4 pl-5", className), children: [
-    /* @__PURE__ */ jsx34("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: /* @__PURE__ */ jsxs24("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
-      text ? /* @__PURE__ */ jsx34("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx34("div", { className: "min-w-0 flex-1", children: title }),
-      chevron && /* @__PURE__ */ jsx34(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+    /* @__PURE__ */ jsx35("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: /* @__PURE__ */ jsxs24("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
+      text ? /* @__PURE__ */ jsx35("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx35("div", { className: "min-w-0 flex-1", children: title }),
+      chevron && /* @__PURE__ */ jsx35(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
     ] }) }),
-    actions && /* @__PURE__ */ jsx34("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx34("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
+    actions && /* @__PURE__ */ jsx35("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx35("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
   ] });
 }
 
 // src/DialogShell.tsx
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, bodyMaxHeight, width = 502, alert = false }) {
   const Parts = alert ? AlertDialog : Dialog3;
   const popupRef = useRef6(null);
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     Parts.Root,
     {
       open: true,
@@ -2311,8 +2333,8 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
         if (!open) onClose();
       },
       children: /* @__PURE__ */ jsxs25(Parts.Portal, { children: [
-        /* @__PURE__ */ jsx35(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-        /* @__PURE__ */ jsx35("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsx36(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+        /* @__PURE__ */ jsx36("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs25(
           Parts.Popup,
           {
             ref: popupRef,
@@ -2321,10 +2343,10 @@ 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__ */ jsx35(
+              /* @__PURE__ */ jsx36(
                 ContainerHeader,
                 {
-                  title: headerContent ?? /* @__PURE__ */ jsx35(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx35("span", {}), children: title }),
+                  title: headerContent ?? /* @__PURE__ */ jsx36(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx36("span", {}), children: title }),
                   actions: (
                     /*
                                     The ✕ IS the `Close` part now, rather than a button that calls
@@ -2338,10 +2360,10 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
                                     so the ✕, Escape and the outside press are one path with one
                                     reason attached, instead of one of the three going around.
                                   */
-                    /* @__PURE__ */ jsx35(
+                    /* @__PURE__ */ jsx36(
                       Parts.Close,
                       {
-                        render: /* @__PURE__ */ jsx35(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx35(IconX5, { size: 16, stroke: 1.5 }) })
+                        render: /* @__PURE__ */ jsx36(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx36(IconX5, { size: 16, stroke: 1.5 }) })
                       }
                     )
                   )
@@ -2349,9 +2371,9 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
               ),
               bodyMaxHeight ? (
                 // The line above the footer on a box of the shell's own, not pushed into ScrollArea (UIG-9).
-                /* @__PURE__ */ jsx35("div", { className: cn(footer != null && "border-b border-border-subtle"), children: /* @__PURE__ */ jsx35(ScrollArea, { viewportClassName: bodyMaxHeight, contentClassName: cn("pl-5 pr-4 py-4", bodyClassName), children }) })
-              ) : /* @__PURE__ */ jsx35("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
-              footer != null && /* @__PURE__ */ jsx35("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
+                /* @__PURE__ */ jsx36("div", { className: cn(footer != null && "border-b border-border-subtle"), children: /* @__PURE__ */ jsx36(ScrollArea, { viewportClassName: bodyMaxHeight, contentClassName: cn("pl-5 pr-4 py-4", bodyClassName), children }) })
+              ) : /* @__PURE__ */ jsx36("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
+              footer != null && /* @__PURE__ */ jsx36("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
             ]
           }
         ) })
@@ -2361,7 +2383,7 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
 }
 
 // src/ConfirmDialog.tsx
-import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
   const [busy, setBusy] = useState4(false);
   const confirm = async () => {
@@ -2373,17 +2395,17 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     DialogShell,
     {
       alert: true,
       title,
       onClose,
-      footer: /* @__PURE__ */ jsxs26(Fragment6, { children: [
-        /* @__PURE__ */ jsx36(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx36(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
+      footer: /* @__PURE__ */ jsxs26(Fragment7, { children: [
+        /* @__PURE__ */ jsx37(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx37(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
-      children: /* @__PURE__ */ jsx36("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
+      children: /* @__PURE__ */ jsx37("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
     }
   );
 }
@@ -2392,7 +2414,7 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 import { useEffect as useEffect3, useRef as useRef7, useState as useState5 } from "react";
 import { Field as BaseField4 } from "@base-ui/react/field";
 import { Input as Input2 } from "@base-ui/react/input";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
   const [editing, setEditing] = useState5(false);
   const [draft, setDraft] = useState5(value);
@@ -2450,7 +2472,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__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         "div",
         {
           className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
@@ -2460,11 +2482,11 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     );
   }
   if (editing) {
-    return multiline ? /* @__PURE__ */ jsx37(
+    return multiline ? /* @__PURE__ */ jsx38(
       BaseField4.Control,
       {
         ref: fieldRef,
-        render: /* @__PURE__ */ jsx37("textarea", { rows: 4 }),
+        render: /* @__PURE__ */ jsx38("textarea", { rows: 4 }),
         "aria-label": label,
         value: draft,
         disabled: busy,
@@ -2473,7 +2495,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         onBlur: () => void commit(),
         className: fieldClass
       }
-    ) : /* @__PURE__ */ jsx37(
+    ) : /* @__PURE__ */ jsx38(
       Input2,
       {
         ref: fieldRef,
@@ -2487,7 +2509,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
       }
     );
   }
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "button",
     {
       type: "button",
@@ -2507,7 +2529,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
 // src/ErrorBoundary.tsx
 import { Component } from "react";
 import { IconAlertTriangle as IconAlertTriangle2 } from "@tabler/icons-react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var ErrorBoundary = class extends Component {
   state = { hasError: false };
   static getDerivedStateFromError() {
@@ -2518,22 +2540,22 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (!this.state.hasError) return this.props.children;
-    const message = /* @__PURE__ */ jsx38(
+    const message = /* @__PURE__ */ jsx39(
       EmptyState,
       {
-        icon: /* @__PURE__ */ jsx38(IconAlertTriangle2, { size: 16, stroke: 1.5 }),
+        icon: /* @__PURE__ */ jsx39(IconAlertTriangle2, { size: 16, stroke: 1.5 }),
         message: `Something went wrong${this.props.label ? ` in the ${this.props.label}` : ""}. Your data is safe \u2014 try again.`,
         action: { label: "Try again", onClick: () => this.setState({ hasError: false }) }
       }
     );
     if (this.props.frame) return this.props.frame(message);
-    return this.props.fallbackClassName ? /* @__PURE__ */ jsx38("div", { className: this.props.fallbackClassName, children: message }) : message;
+    return this.props.fallbackClassName ? /* @__PURE__ */ jsx39("div", { className: this.props.fallbackClassName, children: message }) : message;
   }
 };
 
 // src/ProgressBar.tsx
 import { Progress } from "@base-ui/react/progress";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } 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.
@@ -2546,13 +2568,13 @@ 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__ */ jsx39(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx39(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx39(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
+    /* @__PURE__ */ jsx40(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx40(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx40(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
   );
 }
 
 // src/Breadcrumb.tsx
-import { Fragment as Fragment7, useCallback as useCallback2, useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState6 } from "react";
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment8, useCallback as useCallback2, useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState6 } from "react";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
   const navRef = useRef8(null);
   const labelRefs = useRef8([]);
@@ -2572,7 +2594,7 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx40("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__ */ jsx41("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(
@@ -2593,23 +2615,23 @@ function Breadcrumb({ items, className }) {
       // on a box around it, which the link takes them from, rather than
       // pushed into it (UIG-9); the link is still the one element that
       // truncates and is measured.
-      /* @__PURE__ */ jsx40("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx40(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
-    ) : /* @__PURE__ */ jsx40("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
-    return /* @__PURE__ */ jsxs27(Fragment7, { children: [
-      index > 0 && /* @__PURE__ */ jsx40("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
-      item.icon && /* @__PURE__ */ jsx40("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
+      /* @__PURE__ */ jsx41("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx41(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
+    ) : /* @__PURE__ */ jsx41("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+    return /* @__PURE__ */ jsxs27(Fragment8, { children: [
+      index > 0 && /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+      item.icon && /* @__PURE__ */ jsx41("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__ */ jsx40(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+        /* @__PURE__ */ jsx41(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
       ) : crumb
     ] }, `${item.label}-${index}`);
   }) });
 }
 
 // src/NavItem.tsx
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
   return (
     // @estiva-escape(no-copied-look): N5 (Katerina, 24 September: record only): a row that fills on hover, as PersonTrigger's row also does
@@ -2628,9 +2650,9 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
         ),
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsx41("span", { className: "flex shrink-0 items-center", children: icon }),
-          /* @__PURE__ */ jsx41("span", { className: "flex-1 truncate", children: label }),
-          count ? /* @__PURE__ */ jsx41(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx41("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+          icon && /* @__PURE__ */ jsx42("span", { className: "flex shrink-0 items-center", children: icon }),
+          /* @__PURE__ */ jsx42("span", { className: "flex-1 truncate", children: label }),
+          count ? /* @__PURE__ */ jsx42(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx42("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
         ]
       }
     )
@@ -2640,7 +2662,7 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
 // src/Popover.tsx
 import { useMemo as useMemo3 } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs29 } 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 }) {
@@ -2657,8 +2679,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
       actionsRef,
       modal: false,
       children: [
-        trigger && /* @__PURE__ */ jsx42(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
-        /* @__PURE__ */ jsx42(BasePopover.Portal, { children: /* @__PURE__ */ jsx42(
+        trigger && /* @__PURE__ */ jsx43(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
+        /* @__PURE__ */ jsx43(BasePopover.Portal, { children: /* @__PURE__ */ jsx43(
           BasePopover.Positioner,
           {
             anchor: anchorTarget,
@@ -2667,20 +2689,20 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
             sideOffset: GAP5,
             collisionPadding: VIEWPORT_PAD5,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx42(
+            children: /* @__PURE__ */ jsx43(
               BasePopover.Popup,
               {
                 "aria-label": ariaLabel,
                 initialFocus: trigger ? void 0 : false,
                 finalFocus,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx42(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx42(
+                render: /* @__PURE__ */ jsx43(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx43(
                   ScrollArea,
                   {
                     viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
                     contentClassName: cn("flex flex-col p-2", contentClassName),
-                    children: /* @__PURE__ */ jsx42(DividerInPanel.Provider, { value: true, children })
+                    children: /* @__PURE__ */ jsx43(DividerInPanel.Provider, { value: true, children })
                   }
                 )
               }
@@ -2694,9 +2716,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 jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx43(
+  const strip = /* @__PURE__ */ jsx44(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -2707,27 +2729,27 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx43(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx44(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx43(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx44(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
 function ToolbarLink({ ref, href, ...props }) {
-  return /* @__PURE__ */ jsx43(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx43(IconButton, { href, ...props }) });
+  return /* @__PURE__ */ jsx44(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx44(IconButton, { href, ...props }) });
 }
 function ToolbarInput({ size, ...props }) {
-  return /* @__PURE__ */ jsx43(BaseToolbar.Input, { render: /* @__PURE__ */ jsx43(TextInput, { size }), ...props });
+  return /* @__PURE__ */ jsx44(BaseToolbar.Input, { render: /* @__PURE__ */ jsx44(TextInput, { size }), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -2737,9 +2759,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx44(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx45(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
@@ -2749,14 +2771,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__ */ jsx44(
+    /* @__PURE__ */ jsx45(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7",
-        children: /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
+        children: /* @__PURE__ */ jsx45("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
       },
       option.emoji
     )
@@ -2765,23 +2787,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 jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs30 } 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, contentClassName, wrapperClassName }) {
   return /* @__PURE__ */ jsxs30(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx45("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx46("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx45(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx46(
       BasePreviewCard.Positioner,
       {
         side,
@@ -2789,12 +2811,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__ */ jsx45(
+        children: /* @__PURE__ */ jsx46(
           BasePreviewCard.Popup,
           {
             className: cn("w-[360px] p-0 outline-none", className),
-            render: /* @__PURE__ */ jsx45(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx45(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
+            render: /* @__PURE__ */ jsx46(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx46(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
           }
         )
       }
@@ -2803,13 +2825,13 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx46("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__ */ jsx47("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 jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
   return /* @__PURE__ */ jsxs31(
     "a",
@@ -2819,14 +2841,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
       className: cn("group flex h-12 w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           "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__ */ jsx47(
+            children: /* @__PURE__ */ jsx48(
               "span",
               {
                 className: cn(
@@ -2838,25 +2860,12 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx47("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx48("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
-// src/Sidebar.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
-  return /* @__PURE__ */ jsx48(
-    "nav",
-    {
-      "aria-label": ariaLabel,
-      className: cn("flex w-60 shrink-0 flex-col border-r border-border-default bg-bg-surface", className),
-      children: /* @__PURE__ */ jsx48(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 jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
 var VALUE_CLASSES = "contents";
@@ -2948,7 +2957,7 @@ 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 Fragment8, jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", hover = "fill", render, className }) {
   const titleElement = useRender({
     render: render ?? (chevron ? /* @__PURE__ */ jsx52("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx52("span", {})),
@@ -2957,7 +2966,7 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
       // 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__ */ jsxs35(Fragment8, { children: [
+      children: /* @__PURE__ */ jsxs35(Fragment9, { children: [
         chevron && /* @__PURE__ */ jsx52(
           IconChevronRight2,
           {
@@ -3153,16 +3162,16 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 }
 
 // src/Toast.tsx
-import { createContext as createContext5, useContext as useContext5, useMemo as useMemo4 } from "react";
+import { createContext as createContext6, useContext as useContext6, 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 jsx57, jsxs as jsxs40 } 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",
-  neutral: "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md",
-  warning: "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md",
-  error: "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md"
+  success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+  brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+  neutral: "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+  warning: "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
+  error: "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md"
 };
 var ICONS = {
   success: IconCircleCheck,
@@ -3204,7 +3213,7 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
     hasAction && /* @__PURE__ */ jsx57(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
-var ToastContext = createContext5(null);
+var ToastContext = createContext6(null);
 var VISIBLE_TOASTS = 3;
 function ToastProvider({ children }) {
   const manager = useMemo4(() => BaseToast.createToastManager(), []);
@@ -3260,7 +3269,7 @@ function ToastList() {
   });
 }
 function useToast() {
-  const ctx = useContext5(ToastContext);
+  const ctx = useContext6(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 }