@estiva-app/ui 0.58.0 → 0.60.0

package/dist/index.js

@@ -1,3 +1,35 @@
+// src/AppProvider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var Setup = createContext({});
+function AppProvider({ pictureFor, navigate, children }) {
+  const value = useMemo(() => ({ pictureFor, navigate }), [pictureFor, navigate]);
+  return /* @__PURE__ */ jsx(Setup.Provider, { value, children });
+}
+function usePictureFor() {
+  return useContext(Setup).pictureFor;
+}
+function useInAppClick(href, onClick) {
+  const navigate = useContext(Setup).navigate;
+  if (!navigate || href === void 0) return onClick;
+  return (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const link = event.currentTarget;
+    const target = link.getAttribute("target");
+    if (target && target !== "_self" || link.hasAttribute("download")) return;
+    let url;
+    try {
+      url = new URL(href, window.location.href);
+    } catch {
+      return;
+    }
+    if (url.origin !== window.location.origin) return;
+    event.preventDefault();
+    navigate(href);
+  };
+}
+
 // src/cn.ts
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
@@ -36,7 +68,7 @@ function cn(...inputs) {
 }
 
 // src/Link.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var COVER_CLASSES = "after:absolute after:inset-0 after:rounded-md focus-visible:outline-none focus-visible:after:[outline-style:auto]";
 var VARIANT_CLASSES = {
   text: "text-info-default underline underline-offset-2 hover:opacity-80",
@@ -44,21 +76,23 @@ var VARIANT_CLASSES = {
   underlined: "underline underline-offset-2 hover:text-text-primary",
   plain: ""
 };
-function Link({ href, variant = "text", external = false, truncate = false, cover = false, className, children, ...props }) {
-  return /* @__PURE__ */ jsx(
+function Link({ href, variant = "text", external = false, truncate = false, cover = false, className, children, onClick, ...props }) {
+  const inApp = useInAppClick(href, onClick);
+  return /* @__PURE__ */ jsx2(
     "a",
     {
       href,
       ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
       className: cn(VARIANT_CLASSES[variant], truncate && "truncate", cover && COVER_CLASSES, className),
       ...props,
+      onClick: inApp,
       children
     }
   );
 }
 
 // src/Card.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var FILL_CLASSES = {
   surface: "bg-bg-surface border-border-default",
   elevated: "bg-bg-elevated border-border-default",
@@ -121,25 +155,25 @@ function Card({
     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 })
+      /* @__PURE__ */ jsx3(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 })
+    /* @__PURE__ */ jsx3("div", { className: classes, ...props, children })
   );
 }
 
 // src/ScrollArea.tsx
 import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, 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__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       BaseScrollArea.Viewport,
       {
         ref: viewportRef,
@@ -148,35 +182,114 @@ 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__ */ jsx3(BaseScrollArea.Content, { className: contentClassName, style: horizontal ? void 0 : { minWidth: 0 }, children })
+        children: /* @__PURE__ */ jsx4(BaseScrollArea.Content, { className: contentClassName, style: horizontal ? void 0 : { minWidth: 0 }, children })
       }
     ),
-    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, {})
+    vertical && /* @__PURE__ */ jsx4(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__ */ jsx4(BaseScrollArea.Thumb, { className: cn(THUMB, "w-full") }) }),
+    horizontal && /* @__PURE__ */ jsx4(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__ */ jsx4(BaseScrollArea.Thumb, { className: cn(THUMB, "h-full") }) }),
+    vertical && horizontal && /* @__PURE__ */ jsx4(BaseScrollArea.Corner, {})
   ] });
 }
 
 // src/Sidebar.tsx
-import { createContext, useContext } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var SidebarOnGround = createContext(false);
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SidebarOnGround = createContext2(false);
 function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
-  const onGround = useContext(SidebarOnGround);
-  return /* @__PURE__ */ jsx4(
+  const onGround = useContext2(SidebarOnGround);
+  return /* @__PURE__ */ jsx5(
     "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-0.5 px-2.5 py-3", children })
+      children: /* @__PURE__ */ jsx5(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-0.5 px-2.5 py-3", children })
+    }
+  );
+}
+
+// src/TopBar.tsx
+import { useEffect, useRef } from "react";
+import { Button as BaseButton } from "@base-ui/react/button";
+
+// src/looks.ts
+var FIELD_BOX_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong focus:border-border-focus group-hover/field: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 disabled:border-border-field group-hover/field:disabled:border-border-field";
+var FIELD_FOCUS_RING_CLASSES = "signal:transition-shadow signal:focus:shadow-focus-ring";
+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-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong rounded-lg transition-colors";
+var FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
+var COUNT_TEXT_CLASSES = "font-mono text-caption tabular-nums text-text-muted";
+var CHIP_TEXT_CLASSES = "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums";
+var MONO_CAPTION_CLASSES = "text-caption text-text-secondary signal:font-mono signal:text-small";
+var BARE_INPUT_CLASSES = "bg-transparent text-text-primary placeholder:text-text-muted outline-none";
+var SIDEBAR_ROW_CLASSES = "rounded-lg transition-colors";
+var SIDEBAR_ROW_TEXT_CLASSES = "text-text-secondary hover:text-text-primary";
+var MUTED_CONTROL_CLASSES = "text-text-secondary hover:bg-bg-hover hover:text-text-primary";
+var MENU_TRIGGER_CLASSES = "cursor-pointer rounded-md transition-colors hover:bg-bg-hover data-[popup-open]:bg-bg-hover";
+var COLLAPSIBLE_PANEL_CLASSES = "h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0";
+
+// src/Kbd.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Kbd({ children, className, tone = "default" }) {
+  return /* @__PURE__ */ jsx6(
+    "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",
+        MONO_CAPTION_CLASSES,
+        "signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-bg-wash",
+        "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
     }
   );
 }
 
+// src/shortcuts.ts
+function isApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
+}
+function shortcutLabel(keys, apple = isApplePlatform()) {
+  return keys.split("-").map((part, i, all) => {
+    if (i === all.length - 1) return part.length === 1 ? part.toUpperCase() : part;
+    if (part === "Mod") return apple ? "Cmd" : "Ctrl";
+    return part;
+  }).join("+");
+}
+
 // src/TopBar.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-function TopBar({ variant = "solid", menu, logo, search, right, className }) {
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function TopBar({ variant = "solid", menu, logo, search, onSearch, searchPlaceholder = "Search\u2026", right, className }) {
   const floating = variant === "floating";
+  const searchRef = useRef(onSearch);
+  useEffect(() => {
+    searchRef.current = onSearch;
+  });
+  const searches = onSearch !== void 0;
+  useEffect(() => {
+    if (!searches) return;
+    const onKey = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        searchRef.current?.();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [searches]);
+  const centre = search ?? (onSearch && /* @__PURE__ */ jsxs2(BaseButton, { type: "button", onClick: onSearch, className: cn("flex w-[290px] cursor-pointer items-center gap-2 px-3 py-2", FIELD_SHELL_CLASSES), children: [
+    /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate text-left text-input-value text-text-muted", children: searchPlaceholder }),
+    /* @__PURE__ */ jsx7(Kbd, { children: shortcutLabel("Mod-K") })
+  ] }));
   return /* @__PURE__ */ jsxs2(
     "header",
     {
@@ -188,19 +301,19 @@ function TopBar({ variant = "solid", menu, logo, search, right, className }) {
       children: [
         (menu || logo) && /* @__PURE__ */ jsxs2("div", { className: cn("flex shrink-0 items-center gap-2", floating && "pointer-events-auto"), children: [
           menu,
-          logo && /* @__PURE__ */ jsx5("div", { className: "flex items-center text-body-2-strong text-text-primary", children: logo })
+          logo && /* @__PURE__ */ jsx7("div", { className: "flex items-center text-body-2-strong text-text-primary", children: logo })
         ] }),
-        /* @__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 })
+        /* @__PURE__ */ jsx7("div", { className: cn("flex min-w-0 flex-1 items-center justify-center", floating && "pointer-events-auto"), children: centre }),
+        /* @__PURE__ */ jsx7("div", { className: cn("flex shrink-0 items-center gap-[6px]", floating && "pointer-events-auto"), children: right })
       ]
     }
   );
 }
 
 // src/AppShell.tsx
-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__ */ jsx6(TopBar, { variant, menu, logo, search, right: identity });
+import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function AppShell({ variant = "solid", menu, logo, search, onSearch, searchPlaceholder, identity, banner, nav, children }) {
+  const bar = /* @__PURE__ */ jsx8(TopBar, { variant, menu, logo, search, onSearch, searchPlaceholder, right: identity });
   const inset = variant === "inset";
   if (variant === "floating") {
     return (
@@ -220,7 +333,7 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
               ),
               children: [
                 banner,
-                /* @__PURE__ */ jsx6("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
+                /* @__PURE__ */ jsx8("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
               ]
             }
           )
@@ -230,7 +343,7 @@ 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 }) })
+    /* @__PURE__ */ jsx8(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex min-h-full flex-col", children: /* @__PURE__ */ jsx8("main", { className: "flex min-w-0 flex-1 flex-col", children }) })
   ] });
   return (
     /* `relative overflow-hidden` is the seal the floating manner already has
@@ -245,16 +358,16 @@ 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: [
-        /* @__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 })
+        /* @__PURE__ */ jsx8(SidebarOnGround.Provider, { value: inset, children: nav }),
+        inset ? /* @__PURE__ */ jsx8(Card, { fill: "surface", clip: true, className: "mb-4 mr-4 flex min-h-0 min-w-0 flex-1 flex-col", children: column }) : /* @__PURE__ */ jsx8("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: column })
       ] })
     ] })
   );
 }
 
 // src/AttachmentCard.tsx
-import { useEffect, useLayoutEffect, useRef as useRef2, useState } from "react";
-import { Button as BaseButton2 } from "@base-ui/react/button";
+import { useEffect as useEffect2, useLayoutEffect, useRef as useRef3, useState } from "react";
+import { Button as BaseButton3 } from "@base-ui/react/button";
 import {
   IconAlertCircle,
   IconAlertTriangle,
@@ -274,74 +387,32 @@ import {
 } from "@tabler/icons-react";
 
 // src/IconButton.tsx
-import { Button as BaseButton } from "@base-ui/react/button";
-
-// src/looks.ts
-var FIELD_BOX_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong focus:border-border-focus group-hover/field: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 disabled:border-border-field group-hover/field:disabled:border-border-field";
-var FIELD_FOCUS_RING_CLASSES = "signal:transition-shadow signal:focus:shadow-focus-ring";
-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-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong rounded-lg transition-colors";
-var FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
-var COUNT_TEXT_CLASSES = "font-mono text-caption tabular-nums text-text-muted";
-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";
-var SIDEBAR_ROW_CLASSES = "rounded-lg transition-colors";
-var SIDEBAR_ROW_TEXT_CLASSES = "text-text-secondary hover:text-text-primary";
-var MUTED_CONTROL_CLASSES = "text-text-secondary hover:bg-bg-hover hover:text-text-primary";
-var MENU_TRIGGER_CLASSES = "cursor-pointer rounded-md transition-colors hover:bg-bg-hover data-[popup-open]:bg-bg-hover";
-var COLLAPSIBLE_PANEL_CLASSES = "h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0";
+import { Button as BaseButton2 } from "@base-ui/react/button";
 
 // src/formBusy.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var FormBusyContext = createContext2(false);
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var FormBusyContext = createContext3(false);
 function useFormBusy() {
-  return useContext2(FormBusyContext);
+  return useContext3(FormBusyContext);
 }
 
 // src/Tooltip.tsx
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-
-// src/Kbd.tsx
-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
-    }
-  );
-}
-
-// src/Tooltip.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var OPEN_DELAY = 300;
 function TooltipProvider({ delay = OPEN_DELAY, closeDelay, timeout, children }) {
-  return /* @__PURE__ */ jsx8(BaseTooltip.Provider, { delay, closeDelay, timeout, children });
+  return /* @__PURE__ */ jsx9(BaseTooltip.Provider, { delay, closeDelay, timeout, children });
 }
 function Tooltip({ label, shortcut, className, ...props }) {
   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 })
+    /* @__PURE__ */ jsx9("span", { className: "min-w-0 text-caption text-text-tooltip break-words", children: label }),
+    shortcut && /* @__PURE__ */ jsx9(Kbd, { tone: "tooltip", children: shortcut })
   ] });
 }
 var GAP = 6;
 var VIEWPORT_PAD = 8;
 function TooltipSurface({ label, shortcut, placement }) {
-  return /* @__PURE__ */ jsx8(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx9(
     BaseTooltip.Positioner,
     {
       side: placement,
@@ -350,10 +421,10 @@ function TooltipSurface({ label, shortcut, placement }) {
       collisionPadding: VIEWPORT_PAD,
       positionMethod: "fixed",
       className: "pointer-events-none z-[9999]",
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx9(
         BaseTooltip.Popup,
         {
-          render: /* @__PURE__ */ jsx8(Tooltip, { label, shortcut }),
+          render: /* @__PURE__ */ jsx9(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",
@@ -369,19 +440,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__ */ 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 })
+    /* @__PURE__ */ jsx9(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx9(Wrapper, { className: cn("inline-flex shrink-0", inline && "align-top", wrapperClassName) }), children }),
+    /* @__PURE__ */ jsx9(TooltipSurface, { label, shortcut, placement })
   ] });
 }
 function TooltipTrigger({ label, shortcut, placement = "top", children }) {
   return /* @__PURE__ */ jsxs4(BaseTooltip.Root, { disableHoverablePopup: true, children: [
-    /* @__PURE__ */ jsx8(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: children }),
-    /* @__PURE__ */ jsx8(TooltipSurface, { label, shortcut, placement })
+    /* @__PURE__ */ jsx9(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: children }),
+    /* @__PURE__ */ jsx9(TooltipSurface, { label, shortcut, placement })
   ] });
 }
 
 // src/IconButton.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function IconButton({
   variant = "muted",
   pressed,
@@ -398,6 +469,8 @@ function IconButton({
   ...props
 }) {
   const formBusy = useFormBusy();
+  const anchor = props;
+  const inApp = useInAppClick(href, anchor.onClick);
   const unusable = disabled || !!disabledReason || formBusy;
   const look = (off) => cn(
     // `shrink-0` stops a flex parent squashing the button; `self-center`
@@ -432,8 +505,8 @@ function IconButton({
     off && "cursor-not-allowed",
     className
   );
-  const button = href && !unusable ? /* @__PURE__ */ jsx9("a", { href, className: look(false), ...props, children }) : /* @__PURE__ */ jsx9(
-    BaseButton,
+  const button = href && !unusable ? /* @__PURE__ */ jsx10("a", { href, className: look(false), ...anchor, onClick: inApp, children }) : /* @__PURE__ */ jsx10(
+    BaseButton2,
     {
       type,
       disabled: unusable,
@@ -446,19 +519,19 @@ function IconButton({
   );
   const label = disabledReason ?? tooltip;
   if (label) {
-    return /* @__PURE__ */ jsx9(TooltipTrigger, { label, shortcut: disabledReason ? void 0 : tooltipShortcut, placement: tooltipPlacement, children: button });
+    return /* @__PURE__ */ jsx10(TooltipTrigger, { label, shortcut: disabledReason ? void 0 : tooltipShortcut, placement: tooltipPlacement, children: button });
   }
   return button;
 }
 
 // src/Lightbox.tsx
-import { useRef } from "react";
+import { useRef as useRef2 } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function Lightbox({ src, alt, onClose, className }) {
-  const popupRef = useRef(null);
-  return /* @__PURE__ */ jsx10(
+  const popupRef = useRef2(null);
+  return /* @__PURE__ */ jsx11(
     Dialog.Root,
     {
       open: true,
@@ -466,7 +539,7 @@ function Lightbox({ src, alt, onClose, className }) {
         if (!open) onClose();
       },
       children: /* @__PURE__ */ jsxs5(Dialog.Portal, { children: [
-        /* @__PURE__ */ jsx10(Dialog.Backdrop, { className: "fixed inset-0 z-40 bg-scrim-strong" }),
+        /* @__PURE__ */ jsx11(Dialog.Backdrop, { className: "fixed inset-0 z-40 bg-scrim-strong" }),
         /* @__PURE__ */ jsxs5(
           Dialog.Popup,
           {
@@ -476,7 +549,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__ */ jsx10(
+              /* @__PURE__ */ jsx11(
                 "img",
                 {
                   src,
@@ -485,12 +558,12 @@ function Lightbox({ src, alt, onClose, className }) {
                   className: cn("max-w-full max-h-full object-contain rounded-lg", className)
                 }
               ),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(
                 Dialog.Close,
                 {
                   "aria-label": "Close",
                   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 })
+                  children: /* @__PURE__ */ jsx11(IconX, { size: 16, stroke: 1.5 })
                 }
               )
             ]
@@ -502,7 +575,7 @@ function Lightbox({ src, alt, onClose, className }) {
 }
 
 // src/AttachmentCard.tsx
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var ICON_BY_EXTENSION = {
   pdf: IconFileTypePdf,
   doc: IconFileTypeDocx,
@@ -536,10 +609,10 @@ 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__ */ jsx11(Icon, { size: 20, stroke: 1.5 });
+  return /* @__PURE__ */ jsx12(Icon, { size: 20, stroke: 1.5 });
 }
 function Truncating({ text, hint, className, wrapperClassName, placement }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const [cut, setCut] = useState(false);
   useLayoutEffect(() => {
     const el = ref.current;
@@ -558,15 +631,15 @@ function Truncating({ text, hint, className, wrapperClassName, placement }) {
       observer.disconnect();
     };
   }, [text, cut]);
-  const line = /* @__PURE__ */ jsx11("span", { ref, className, children: text });
+  const line = /* @__PURE__ */ jsx12("span", { ref, className, children: text });
   if (!hint && !cut) return line;
-  return /* @__PURE__ */ jsx11(WithTooltip, { label: hint ?? text, placement, wrapperClassName: cn("min-w-0 flex-col", wrapperClassName), children: line });
+  return /* @__PURE__ */ jsx12(WithTooltip, { label: hint ?? text, placement, wrapperClassName: cn("min-w-0 flex-col", wrapperClassName), children: line });
 }
 function useRemoteImage(url, fetchImage) {
   const [result, setResult] = useState({});
-  const fetcher = useRef2(fetchImage);
+  const fetcher = useRef3(fetchImage);
   fetcher.current = fetchImage;
-  useEffect(() => {
+  useEffect2(() => {
     if (!url || !fetcher.current) return;
     let live = true;
     fetcher.current(url).then(
@@ -639,7 +712,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__ */ jsx11(Lightbox, { src: full.src ?? picture, alt: alt ?? name, onClose: () => setOpened(false) }) : null;
+  const viewer = opened && picture ? /* @__PURE__ */ jsx12(Lightbox, { src: full.src ?? picture, alt: alt ?? name, onClose: () => setOpened(false) }) : null;
   const saveHere = download ? () => {
     const source = remoteFullSrc ?? remoteSrc;
     if (source && fetchImage) {
@@ -668,10 +741,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__ */ 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__ */ jsx12("div", { className: cn(TILE_CLASSES, "overflow-hidden"), children: state === "uploading" ? /* @__PURE__ */ jsx12(IconLoader2, { size: 16, stroke: 1.5, className: "animate-spin" }) : failed ? /* @__PURE__ */ jsx12(IconAlertCircle, { size: 16, stroke: 1.5, className: "text-error-default" }) : warning ? /* @__PURE__ */ jsx12(IconAlertTriangle, { size: 16, stroke: 1.5, className: "text-warning-default" }) : image && src ? /* @__PURE__ */ jsx12("img", { src, alt: name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx12("span", { className: "text-menu font-semibold", children: typeLabelOf(name) }) }),
             /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[1px] min-w-0", children: [
-              /* @__PURE__ */ jsx11(Truncating, { text: name, className: NAME_CLASSES, placement: onRemove ? "bottom" : void 0 }),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx12(Truncating, { text: name, className: NAME_CLASSES, placement: onRemove ? "bottom" : void 0 }),
+              /* @__PURE__ */ jsx12(
                 Truncating,
                 {
                   text: (failed || warning ? note : state === "uploading" ? note ?? "Uploading\u2026" : note ?? sizeText) ?? "",
@@ -680,8 +753,8 @@ function AttachmentCard({
                 }
               )
             ] }),
-            onRemove && /* @__PURE__ */ jsx11(
-              BaseButton2,
+            onRemove && /* @__PURE__ */ jsx12(
+              BaseButton3,
               {
                 type: "button",
                 "aria-label": `Remove ${name}`,
@@ -690,7 +763,7 @@ function AttachmentCard({
                   event.stopPropagation();
                   onRemove();
                 },
-                children: /* @__PURE__ */ jsx11(IconX2, { size: 11, stroke: 1.75 })
+                children: /* @__PURE__ */ jsx12(IconX2, { size: 11, stroke: 1.75 })
               }
             )
           ]
@@ -700,7 +773,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__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       IconButton,
       {
         variant: "muted",
@@ -711,7 +784,7 @@ function AttachmentCard({
           event.stopPropagation();
           saving();
         },
-        children: /* @__PURE__ */ jsx11(IconDownload, { size: 16, stroke: 1.5 })
+        children: /* @__PURE__ */ jsx12(IconDownload, { size: 16, stroke: 1.5 })
       }
     )
   ) : null;
@@ -720,27 +793,27 @@ 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__ */ 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 })
+      /* @__PURE__ */ jsx12(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__ */ jsx11("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx11(TypeIcon, { name }) }),
+        /* @__PURE__ */ jsx12("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx12(TypeIcon, { name }) }),
         /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[1px] min-w-0 text-left", children: [
-          /* @__PURE__ */ jsx11(Truncating, { text: name, className: NAME_CLASSES }),
-          /* @__PURE__ */ jsx11("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? "Could not be loaded" })
+          /* @__PURE__ */ jsx12(Truncating, { text: name, className: NAME_CLASSES }),
+          /* @__PURE__ */ jsx12("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? "Could not be loaded" })
         ] })
       ] })
     );
   }
   if (image && picture) {
-    const thumbnail = /* @__PURE__ */ jsx11("img", { src: picture, alt: alt ?? name, className: "w-full h-28 object-cover" });
+    const thumbnail = /* @__PURE__ */ jsx12("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__ */ jsx11(
-          BaseButton2,
+        openPicture ? /* @__PURE__ */ jsx12(
+          BaseButton3,
           {
             type: "button",
             className: "block w-full",
@@ -751,9 +824,9 @@ function AttachmentCard({
             },
             children: thumbnail
           }
-        ) : /* @__PURE__ */ jsx11("div", { className: "block w-full", children: thumbnail }),
+        ) : /* @__PURE__ */ jsx12("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__ */ jsx11(Truncating, { text: name, className: "flex-1 text-caption text-text-primary truncate", wrapperClassName: "flex-1" }),
+          /* @__PURE__ */ jsx12(Truncating, { text: name, className: "flex-1 text-caption text-text-primary truncate", wrapperClassName: "flex-1" }),
           downloadControl
         ] })
       ] }),
@@ -761,16 +834,16 @@ function AttachmentCard({
     ] });
   }
   const body = /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx11("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx11(TypeIcon, { name }) }),
+    /* @__PURE__ */ jsx12("div", { className: TILE_CLASSES, children: /* @__PURE__ */ jsx12(TypeIcon, { name }) }),
     /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[1px] min-w-0 text-left", children: [
-      /* @__PURE__ */ jsx11(Truncating, { text: name, className: NAME_CLASSES }),
-      /* @__PURE__ */ jsx11("span", { className: cn(NOTE_CLASSES, "text-text-secondary"), children: note ?? `${typeLabelOf(name)} \xB7 ${sizeText}` })
+      /* @__PURE__ */ jsx12(Truncating, { text: name, className: NAME_CLASSES }),
+      /* @__PURE__ */ jsx12("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__ */ 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 }),
+      address ? /* @__PURE__ */ jsx12(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__ */ jsx12("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: body }),
       downloadControl
     ] })
   );
@@ -779,7 +852,7 @@ function AttachmentCard({
 // src/Avatar.tsx
 import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 import { IconUserFilled } from "@tabler/icons-react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var HUES = ["#56c8ff", "#ff8f6b", "#4ade8c", "#b18cff", "#ffc94d", "#ff7eb0", "#7ea8ff", "#5fdfd6"];
 var hueFor = (key) => {
   let h = 0;
@@ -793,27 +866,29 @@ var initialsFor = (name) => {
 };
 function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
   const label = name || alt;
+  const pictureFor = usePictureFor();
+  const picture = src ?? (label && pictureFor ? pictureFor(label) ?? void 0 : void 0);
   return /* @__PURE__ */ jsxs7(
     BaseAvatar.Root,
     {
-      render: /* @__PURE__ */ jsx12("div", {}),
+      render: /* @__PURE__ */ jsx13("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__ */ jsx12(
+        picture && /* @__PURE__ */ jsx13(
           BaseAvatar.Image,
           {
-            src,
+            src: picture,
             alt: "",
             keepMounted: true,
             className: "w-full h-full object-cover data-[error]:hidden"
           }
         ),
-        label ? /* @__PURE__ */ jsx12(
+        label ? /* @__PURE__ */ jsx13(
           BaseAvatar.Fallback,
           {
-            render: /* @__PURE__ */ jsx12("div", {}),
+            render: /* @__PURE__ */ jsx13("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
@@ -827,44 +902,41 @@ 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__ */ jsx12("span", { className: "[text-box:trim-both_cap_alphabetic]", children: initialsFor(label) })
+            children: /* @__PURE__ */ jsx13("span", { className: "[text-box:trim-both_cap_alphabetic]", children: initialsFor(label) })
           }
-        ) : /* @__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) }) })
+        ) : /* @__PURE__ */ jsx13(BaseAvatar.Fallback, { render: /* @__PURE__ */ jsx13("div", {}), className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx13(IconUserFilled, { size: Math.round(size * 0.5) }) })
       ]
     }
   );
 }
 
 // src/AvatarGroup.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } 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__ */ jsx13("div", { className: "flex items-center", style: { paddingRight: overlap }, children: visible.map((member, i) => (
+  return /* @__PURE__ */ jsx14("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__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "span",
       {
         className: "relative flex rounded-sm",
         style: { marginRight: -overlap, boxShadow: `0 0 0 ${ring}px var(--bg-surface)` },
-        children: /* @__PURE__ */ jsx13(Avatar, { size, name: member.name, src: member.picture, label: member.name })
+        children: /* @__PURE__ */ jsx14(Avatar, { size, name: member.name, src: member.picture, label: member.name })
       },
       i
     )
   )) });
 }
 
-// src/Banner.tsx
-import { IconX as IconX3 } from "@tabler/icons-react";
-
 // src/Button.tsx
-import { Button as BaseButton3 } from "@base-ui/react/button";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Button as BaseButton4 } from "@base-ui/react/button";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -879,7 +951,7 @@ function Button({
   const hasLeadingIcon = !!leadingIcon;
   const formBusy = useFormBusy();
   const button = /* @__PURE__ */ jsxs8(
-    BaseButton3,
+    BaseButton4,
     {
       type,
       disabled: disabled || !!disabledReason || formBusy,
@@ -926,64 +998,89 @@ function Button({
       ]
     }
   );
-  return disabledReason ? /* @__PURE__ */ jsx14(TooltipTrigger, { label: disabledReason, children: button }) : button;
+  return disabledReason ? /* @__PURE__ */ jsx15(TooltipTrigger, { label: disabledReason, children: button }) : button;
 }
 
-// src/Banner.tsx
-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",
-  info: "bg-info-muted text-info-default",
-  warning: "bg-warning-muted text-warning-default"
+// src/MembersPill.tsx
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+function MembersPill({ members, count, onClick, className }) {
+  const total = count ?? members.length;
+  if (total === 0) return null;
+  return /* @__PURE__ */ jsxs9(Button, { variant: "outlined", "aria-label": `${total} ${total === 1 ? "member" : "members"}`, disabled: !onClick, onClick, className: cn("gap-2 pl-[3px] pr-2", className), children: [
+    /* @__PURE__ */ jsx16(AvatarGroup, { members }),
+    /* @__PURE__ */ jsx16("span", { className: cn(MONO_CAPTION_CLASSES, "signal:tabular-nums"), children: total })
+  ] });
+}
+
+// src/MembersDialog.tsx
+import { useId, useState as useState3 } from "react";
+import { IconArrowLeft, IconUserMinus, IconUserPlus } from "@tabler/icons-react";
+
+// src/Chip.tsx
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var typeStyles = {
+  neutral: "bg-bg-inset text-text-primary",
+  brand: "bg-accent-muted text-accent-text signal:border signal:border-accent-outline",
+  info: "bg-info-muted text-info-default signal:border signal:border-info-outline",
+  warning: "bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
+  success: "bg-success-muted text-success-default signal:border signal:border-success-outline",
+  error: "bg-error-muted text-error-default signal:border signal:border-error-outline"
 };
-function Banner({ tone, children, icon, action, onDismiss, dismissLabel = "Dismiss", className }) {
-  const role = tone === "error" ? "alert" : "status";
-  if (!onDismiss && !icon && !action) {
-    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__ */ 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 }) })
+function Chip({ type = "neutral", label, leadingIcon, trailingIcon, href, onClick, className }) {
+  const inApp = useInAppClick(href, onClick);
+  const classes = 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);
+  const inside = /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    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
+    // `truncate`, because `truncate` is `overflow: hidden` on both axes and
+    // the label's line box (11px under Signal) is tighter than its glyphs —
+    // 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__ */ 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 })
   ] });
+  if (href) return /* @__PURE__ */ jsx17("a", { href, onClick: inApp, className: cn("relative", classes), children: inside });
+  return /* @__PURE__ */ jsx17("div", { className: classes, children: inside });
 }
 
-// src/BlockHandle.tsx
-import { useCallback, useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
-import { IconGripVertical } from "@tabler/icons-react";
+// src/ChipInput.tsx
+import { useMemo as useMemo2, useState as useState2 } from "react";
+import { Button as BaseButton5 } from "@base-ui/react/button";
+import { Combobox } from "@base-ui/react/combobox";
+import { IconX as IconX3 } from "@tabler/icons-react";
 
 // src/Menu.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
+import { createContext as createContext5, useContext as useContext5 } from "react";
 import { IconChevronRight } from "@tabler/icons-react";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 
 // src/Divider.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
+import { createContext as createContext4, useContext as useContext4 } from "react";
 import { Separator } from "@base-ui/react/separator";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var DividerInPanel = createContext3(false);
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var DividerInPanel = createContext4(false);
 function Divider({ orientation = "horizontal", label, tone = "default", className }) {
-  const inset = useContext3(DividerInPanel) ? "mx-0" : "mx-3";
+  const inset = useContext4(DividerInPanel) ? "mx-0" : "mx-3";
   if (label && orientation === "horizontal") {
     const line = tone === "warning" ? "bg-warning-muted" : "bg-border-subtle";
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       Separator,
       {
         orientation: "horizontal",
         "aria-label": label,
         className: cn("flex shrink-0 items-center gap-2", inset, className),
         children: [
-          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) }),
-          /* @__PURE__ */ jsx16("span", { className: cn("shrink-0 text-caption", tone === "warning" ? "text-warning-default" : "text-text-muted"), children: label }),
-          /* @__PURE__ */ jsx16("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__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     Separator,
     {
       orientation,
@@ -999,7 +1096,7 @@ function triggerDisabled(trigger) {
 }
 
 // src/SectionLabel.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function SectionLabel({
   children,
   tone = "primary",
@@ -1007,7 +1104,7 @@ function SectionLabel({
   folds = false,
   className
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "span",
     {
       className: cn(
@@ -1028,10 +1125,10 @@ function SectionLabel({
 }
 
 // src/Menu.tsx
-import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var MenuContext = createContext4(null);
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+var MenuContext = createContext5(null);
 function MenuPanel({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       className: cn(
@@ -1063,7 +1160,7 @@ var VIEWPORT_PAD2 = 8;
 var HOVER_OPEN_DELAY = 0;
 var HOVER_CLOSE_DELAY = 150;
 function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange, actionsRef, children, className, contentClassName }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     BaseMenu.Root,
     {
       open,
@@ -1071,7 +1168,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
       actionsRef,
       modal: false,
       children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx20(
           BaseMenu.Trigger,
           {
             render: trigger,
@@ -1081,7 +1178,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
             closeDelay: HOVER_CLOSE_DELAY
           }
         ),
-        /* @__PURE__ */ jsx18(BaseMenu.Portal, { children: /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx20(BaseMenu.Portal, { children: /* @__PURE__ */ jsx20(
           BaseMenu.Positioner,
           {
             side: "bottom",
@@ -1089,13 +1186,13 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
             sideOffset: GAP2,
             collisionPadding: VIEWPORT_PAD2,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx18(
+            children: /* @__PURE__ */ jsx20(
               BaseMenu.Popup,
               {
                 "data-interactive": true,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx18(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx18(ScrollArea, { viewportClassName: "max-h-[var(--available-height)]", contentClassName: cn("flex flex-col gap-0.5 p-2", contentClassName), children: /* @__PURE__ */ jsx18(MenuContext.Provider, { value: { openOnHover }, children: /* @__PURE__ */ jsx18(DividerInPanel.Provider, { value: true, children }) }) })
+                render: /* @__PURE__ */ jsx20(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx20(ScrollArea, { viewportClassName: "max-h-[var(--available-height)]", contentClassName: cn("flex flex-col gap-0.5 p-2", contentClassName), children: /* @__PURE__ */ jsx20(MenuContext.Provider, { value: { openOnHover }, children: /* @__PURE__ */ jsx20(DividerInPanel.Provider, { value: true, children }) }) })
               }
             )
           }
@@ -1105,26 +1202,26 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
   );
 }
 function MenuSub({ label, leading, selected, children, className }) {
-  const menu = useContext4(MenuContext);
+  const menu = useContext5(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__ */ jsxs11(BaseMenu.SubmenuRoot, { children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs12(BaseMenu.SubmenuRoot, { children: [
+    /* @__PURE__ */ jsx20(
       BaseMenu.SubmenuTrigger,
       {
         openOnHover: true,
         delay: 0,
         closeDelay: 150,
         nativeButton: true,
-        render: /* @__PURE__ */ jsx18("button", { type: "button" }),
+        render: /* @__PURE__ */ jsx20("button", { type: "button" }),
         className: menuItemClassName({ size: "default", selected }),
-        children: /* @__PURE__ */ jsx18(MenuItemBody, { label, leading, submenu: true })
+        children: /* @__PURE__ */ jsx20(MenuItemBody, { label, leading, submenu: true })
       }
     ),
-    /* @__PURE__ */ jsx18(BaseMenu.Portal, { children: /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20(BaseMenu.Portal, { children: /* @__PURE__ */ jsx20(
       BaseMenu.Positioner,
       {
         side: "inline-end",
@@ -1132,7 +1229,7 @@ function MenuSub({ label, leading, selected, children, className }) {
         sideOffset: GAP2,
         collisionPadding: VIEWPORT_PAD2,
         className: "z-50 data-[anchor-hidden]:hidden",
-        children: /* @__PURE__ */ jsx18(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx18(MenuPanel, {}), children })
+        children: /* @__PURE__ */ jsx20(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx20(MenuPanel, {}), children })
       }
     ) })
   ] });
@@ -1167,25 +1264,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__ */ jsx18(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx18(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
-  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
-    leading && /* @__PURE__ */ jsx18("span", { className: "flex shrink-0 items-center", children: leading }),
-    children ?? /* @__PURE__ */ jsxs11("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
-      /* @__PURE__ */ jsx18("span", { className: cn("truncate text-body-2", destructive ? "text-error-default" : "text-text-primary"), children: label }),
-      description && /* @__PURE__ */ jsx18("span", { className: "truncate text-caption text-text-secondary", children: description })
+  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__ */ jsxs12(Fragment4, { children: [
+    leading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: leading }),
+    children ?? /* @__PURE__ */ jsxs12("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
+      /* @__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__ */ jsxs11("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
-      edge && /* @__PURE__ */ jsx18("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
-      hint && /* @__PURE__ */ jsx18("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100 group-data-[highlighted]:opacity-100", selected && "opacity-100"), children: hint })
+    /* @__PURE__ */ jsxs12("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
+      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__ */ jsx18(
+  const body = /* @__PURE__ */ jsx20(
     MenuItemBody,
     {
       label,
@@ -1202,14 +1299,14 @@ function MenuItem({ label, children, size = "default", description, leading, tra
     }
   );
   const rowClassName = menuItemClassName({ size, selected, className });
-  if (!useContext4(MenuContext)) {
-    return /* @__PURE__ */ jsx18("button", { type: "button", className: rowClassName, ...props, children: body });
+  if (!useContext5(MenuContext)) {
+    return /* @__PURE__ */ jsx20("button", { type: "button", className: rowClassName, ...props, children: body });
   }
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     BaseMenu.Item,
     {
       nativeButton: true,
-      render: /* @__PURE__ */ jsx18("button", { type: "button" }),
+      render: /* @__PURE__ */ jsx20("button", { type: "button" }),
       className: rowClassName,
       ...props,
       children: body
@@ -1217,86 +1314,581 @@ function MenuItem({ label, children, size = "default", description, leading, tra
   );
 }
 function EnterHint({ target }) {
-  return /* @__PURE__ */ jsxs11("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
-    /* @__PURE__ */ jsx18(Kbd, { children: "\u21A9 Enter" }),
-    target && /* @__PURE__ */ jsx18("span", { className: "text-menu signal:font-mono signal:text-small signal:tracking-wider leaf:font-mono leaf:text-small leaf:tracking-wider", children: target })
+  return /* @__PURE__ */ jsxs12("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
+    /* @__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 = useContext4(MenuContext) !== null;
-  const heading = /* @__PURE__ */ jsx18("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx18(SectionLabel, { tone: "secondary", children: label }) });
+  const inMenu = useContext5(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__ */ jsxs11("div", { className: "flex flex-col gap-0.5", children: [
+    return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-0.5", children: [
       heading,
       children
     ] });
   }
-  return /* @__PURE__ */ jsxs11(BaseMenu.Group, { className: "flex flex-col gap-0.5", children: [
-    /* @__PURE__ */ jsx18(BaseMenu.GroupLabel, { render: heading }),
+  return /* @__PURE__ */ jsxs12(BaseMenu.Group, { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx20(BaseMenu.GroupLabel, { render: heading }),
     children
   ] });
 }
 function MenuSeparator() {
-  return /* @__PURE__ */ jsx18(Divider, { className: "my-1" });
+  return /* @__PURE__ */ jsx20(Divider, { className: "my-1" });
 }
 function MenuRow({ children, className }) {
-  return /* @__PURE__ */ jsx18("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/BlockHandle.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
-function readId(element) {
-  const own = element.getAttribute("data-block-id") ?? element.querySelector("[data-block-id]")?.getAttribute("data-block-id");
-  return own || void 0;
-}
-function blockAtY(blocks, y) {
-  let found = null;
-  for (const block of blocks) {
-    if (block.element.getBoundingClientRect().top > y) break;
-    found = block;
-  }
-  return found ?? blocks[0] ?? null;
-}
-function readingBlocks(root) {
-  if (!root) return [];
-  return Array.from(root.children).filter((el) => el instanceof HTMLElement).map((element) => ({ id: readId(element), element })).filter((b) => b.id !== void 0);
-}
-var HANDLE = 24;
-function firstLineOffset(element) {
-  const text = element.querySelector("p, h1, h2, h3, pre, li") ?? element;
-  const line = parseFloat(getComputedStyle(text).lineHeight);
-  if (!Number.isFinite(line)) return 0;
-  const inset = text === element ? 0 : text.getBoundingClientRect().top - element.getBoundingClientRect().top;
-  return inset + (line - HANDLE) / 2;
+// src/ChipInput.tsx
+import { jsx as jsx21, jsxs as jsxs13 } 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
+  // follows concentrically: 4px face + 2px inset = rounded-md.
+  "inline-flex items-center gap-1.5 bg-bg-elevated border border-border-subtle rounded-md py-0.5 max-h-[24px]"
+);
+var CHIP_LABEL = "text-caption font-medium text-text-primary";
+var CHIP_REMOVE = "size-4 flex items-center justify-center rounded-full hover:bg-bg-hover text-text-secondary";
+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__ */ jsxs13("div", { className: cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className), children: [
+    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(
+      BaseButton5,
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        className: cn(CHIP_REMOVE, truncate && "shrink-0"),
+        "aria-label": removeLabel ?? `Remove ${label}`,
+        children: /* @__PURE__ */ jsx21(IconX3, { size: 10, stroke: 1.5 })
+      }
+    )
+  ] });
 }
-function BlockHandle({ actions, editing, children, className }) {
-  const frame = useRef3(null);
-  const content = useRef3(null);
-  const [block, setBlock] = useState2(null);
-  const [top, setTop] = useState2(0);
-  const [open, setOpen] = useState2(false);
-  const follow = useCallback(
-    (y) => {
-      if (!content.current || !frame.current) return;
-      const found = editing ? editing.find(y) : blockAtY(readingBlocks(content.current.firstElementChild), y);
-      setBlock(found);
-      if (found) setTop(found.element.getBoundingClientRect().top - frame.current.getBoundingClientRect().top + firstLineOffset(found.element));
+function ChipInput({
+  value,
+  onChange,
+  options,
+  placeholder = "Search\u2026",
+  autoFocus,
+  excludeIds = [],
+  chipLeading,
+  rowLeading,
+  ...aria
+}) {
+  const [query, setQuery] = useState2("");
+  const [box, setBox] = useState2(null);
+  const available = useMemo2(() => {
+    const chosen = new Set(value.map((o) => o.id));
+    const excluded = new Set(excludeIds);
+    return options.filter((o) => !chosen.has(o.id) && !excluded.has(o.id));
+  }, [options, value, excludeIds]);
+  const filter = useMemo2(
+    () => (item, q) => {
+      const needle = q.trim().toLowerCase();
+      if (!needle) return true;
+      return item.label.toLowerCase().includes(needle) || (item.description ?? "").toLowerCase().includes(needle);
     },
-    [editing]
+    []
   );
-  useEffect2(() => {
-    if (!editing) return;
-    return editing.onChange(() => {
-      if (!open) setBlock(null);
-    });
-  }, [editing, open]);
-  const rows = editing && block ? editing.rows(block) : null;
-  const own = actions && block ? actions(block) : null;
-  const dragging = useRef3(false);
-  const [line, setLine] = useState2(null);
-  const inGutter = (e) => dragging.current && !!editing && !!content.current && !content.current.contains(e.target);
-  const landing = (y) => {
-    const target = editing?.find(y);
+  const open = query.trim().length > 0;
+  const ariaLabel = aria["aria-label"] ?? (value.length > 0 ? placeholder : void 0);
+  const naming = {
+    ...ariaLabel !== void 0 && { "aria-label": ariaLabel },
+    ...aria["aria-labelledby"] !== void 0 && { "aria-labelledby": aria["aria-labelledby"] }
+  };
+  function removeLast() {
+    if (value.length > 0) onChange(value.slice(0, -1));
+  }
+  function onInputKeyDown(event) {
+    if (event.key === "Backspace" && query === "" && value.length > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      removeLast();
+      return;
+    }
+    if (event.key === "Escape" && query !== "") {
+      event.preventDefault();
+      event.stopPropagation();
+      setQuery("");
+    }
+  }
+  return /* @__PURE__ */ jsxs13(
+    Combobox.Root,
+    {
+      multiple: true,
+      items: available,
+      value,
+      onValueChange: (next) => {
+        onChange(next);
+        setQuery("");
+      },
+      inputValue: query,
+      onInputValueChange: setQuery,
+      open,
+      openOnInputClick: false,
+      filter,
+      itemToStringLabel: (option) => option.label,
+      children: [
+        /* @__PURE__ */ jsxs13(Combobox.Chips, { ref: setBox, className: cn(FIELD_SHELL_CLASSES, "focus-within:border-border-focus focus-within:hover:border-border-focus group-hover/field:focus-within: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__ */ jsxs13(Combobox.Chip, { className: cn(CHIP_BOX, chipPadding(!!chipLeading, true)), children: [
+            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(IconX3, { size: 10, stroke: 1.5 }) })
+          ] }, option.id)),
+          /* @__PURE__ */ jsx21(
+            Combobox.Input,
+            {
+              autoFocus,
+              placeholder: value.length === 0 ? placeholder : "",
+              "aria-required": aria["aria-required"],
+              ...naming,
+              onKeyDown: onInputKeyDown,
+              className: cn("flex-1 min-w-[120px] text-body-2 border-none", BARE_INPUT_CLASSES)
+            }
+          )
+        ] }),
+        /* @__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__ */ 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, { className: "flex flex-col gap-0.5", children: (option) => /* @__PURE__ */ jsx21(
+              Combobox.Item,
+              {
+                value: option,
+                render: /* @__PURE__ */ jsx21(
+                  MenuItem,
+                  {
+                    size: "tall",
+                    leading: rowLeading?.(option),
+                    label: option.label,
+                    description: option.description
+                  }
+                )
+              },
+              option.id
+            ) }) }) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+var GAP3 = 4;
+var VIEWPORT_PAD3 = 8;
+
+// src/DialogShell.tsx
+import { useRef as useRef4 } from "react";
+import { Dialog as Dialog2 } from "@base-ui/react/dialog";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import { IconX as IconX4 } from "@tabler/icons-react";
+
+// src/ContainerHeader.tsx
+import { IconChevronDown } from "@tabler/icons-react";
+import { Button as BaseButton6 } from "@base-ui/react/button";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+function ContainerHeader({ title, chevron = false, titleMenu, actions, className }) {
+  const text = typeof title === "string";
+  const name = /* @__PURE__ */ jsxs14("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
+    text ? /* @__PURE__ */ jsx22("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx22("div", { className: "min-w-0 flex-1", children: title }),
+    (chevron || titleMenu != null) && /* @__PURE__ */ jsx22(IconChevronDown, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+  ] });
+  return (
+    // The title 16px in, where the column's content starts (Katerina, 7 October; it was 20px).
+    // With a title menu the bar gives the button 6px of its left padding
+    // (pl-2.5 + the button's px-1.5 = pl-4): the words stay where a title's
+    // are, and the fill is inside the bar — a negative margin had it clipped
+    // (Katerina, 5 October).
+    /* @__PURE__ */ jsxs14("div", { className: cn("flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4", titleMenu != null ? "pl-2.5" : "pl-4", className), children: [
+      /* @__PURE__ */ jsx22("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: titleMenu != null ? /* @__PURE__ */ jsx22(
+        Menu,
+        {
+          trigger: /* @__PURE__ */ jsx22(BaseButton6, { type: "button", className: cn("flex min-w-0 items-center px-1.5 py-1", MENU_TRIGGER_CLASSES), children: name }),
+          children: titleMenu
+        }
+      ) : name }),
+      actions && /* @__PURE__ */ jsx22("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx22("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
+    ] })
+  );
+}
+
+// src/DialogShell.tsx
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, bodyMaxHeight, width = 502, alert = false }) {
+  const Parts = alert ? AlertDialog : Dialog2;
+  const popupRef = useRef4(null);
+  return /* @__PURE__ */ jsx23(
+    Parts.Root,
+    {
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      children: /* @__PURE__ */ jsxs15(Parts.Portal, { children: [
+        /* @__PURE__ */ jsx23(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+        /* @__PURE__ */ jsx23("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs15(
+          Parts.Popup,
+          {
+            ref: popupRef,
+            initialFocus: popupRef,
+            "aria-label": headerContent != null ? title : void 0,
+            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__ */ jsx23(
+                ContainerHeader,
+                {
+                  className: "pl-5",
+                  title: headerContent ?? /* @__PURE__ */ jsx23(Parts.Title, { className: "block truncate text-h4 text-text-primary", render: /* @__PURE__ */ jsx23("span", {}), children: title }),
+                  actions: (
+                    /*
+                                    The ✕ IS the `Close` part now, rather than a button that calls
+                                    `onClose` beside one (stage 4, 2026-09-07). Stage 3 could not do
+                                    this: an `IconButton` carrying a `tooltip` returned the tooltip
+                                    wrapper `<div>` as its root, so the part composed onto the
+                                    wrapper and not the button. Porting Tooltip removed the wrapper
+                                    — the trigger is the button itself — and the composition works.
+                    
+                                    What it buys: the dialog closes through its own state machine,
+                                    so the ✕, Escape and the outside press are one path with one
+                                    reason attached, instead of one of the three going around.
+                                  */
+                    /* @__PURE__ */ jsx23(
+                      Parts.Close,
+                      {
+                        render: /* @__PURE__ */ jsx23(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx23(IconX4, { size: 16, stroke: 1.5 }) })
+                      }
+                    )
+                  )
+                }
+              ),
+              bodyMaxHeight ? (
+                // The line above the footer on a box of the shell's own, not pushed into ScrollArea (UIG-9).
+                /* @__PURE__ */ jsx23("div", { className: cn(footer != null && "border-b border-border-subtle"), children: /* @__PURE__ */ jsx23(ScrollArea, { viewportClassName: bodyMaxHeight, contentClassName: cn("pl-5 pr-4 py-4", bodyClassName), children }) })
+              ) : /* @__PURE__ */ jsx23("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
+              footer != null && /* @__PURE__ */ jsx23("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/Field.tsx
+import { cloneElement, isValidElement } from "react";
+import { Field as BaseField } from "@base-ui/react/field";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+var LINE_STYLES = {
+  helper: "text-caption text-text-muted",
+  warning: "text-caption text-warning-default",
+  error: "text-caption text-error-default"
+};
+function Field({ label, required = false, helper, error, children }) {
+  const control = required && isValidElement(children) ? cloneElement(children, {
+    "aria-required": children.props["aria-required"] ?? true
+  }) : children;
+  return (
+    // `group/field`: the label, the box and the line under it are one thing under the pointer —
+    // anywhere in it strengthens the box's border, as hovering the box does (Katerina, 28 September).
+    // Before, the 8px between the label and the box was a gap where the border went out again.
+    /* @__PURE__ */ jsxs16(BaseField.Root, { invalid: !!error, className: "group/field flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs16(BaseField.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
+        label,
+        required && /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1.5", children: [
+        control,
+        error != null ? /* @__PURE__ */ jsx24(BaseField.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx24(BaseField.Description, { className: LINE_STYLES.helper, children: helper }) : null
+      ] })
+    ] })
+  );
+}
+function FieldLine({ tone = "helper", children, className }) {
+  return /* @__PURE__ */ jsx24("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
+}
+
+// src/Form.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
+import { Fieldset } from "@base-ui/react/fieldset";
+import { Form as BaseForm } from "@base-ui/react/form";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var FIELDS_CLASSES = "flex flex-col gap-6";
+var CONTROL = 'input:not([type="hidden"]), textarea, select, button, [role="checkbox"], [role="combobox"], [tabindex]:not([tabindex="-1"])';
+var ONE_LINE = /* @__PURE__ */ new Set(["", "text", "search", "email", "url", "tel", "password", "number"]);
+function usable(element) {
+  return element instanceof HTMLElement && element.isConnected && element.matches(CONTROL) && !element.matches(":disabled") && element.getAttribute("aria-disabled") !== "true";
+}
+function firstInvalid(form) {
+  for (const marked of form.querySelectorAll("[data-invalid]")) {
+    if (usable(marked)) return marked;
+    const inside = Array.from(marked.querySelectorAll(CONTROL)).find(usable);
+    if (inside) return inside;
+  }
+  return void 0;
+}
+function Form({ onSubmit, busy: ownBusy = false, enterSends = true, layout = "fields", className, children, ...props }) {
+  const outerBusy = useFormBusy();
+  const busy = ownBusy || outerBusy;
+  const form = useRef5(null);
+  const busyNow = useRef5(busy);
+  busyNow.current = busy;
+  const sender = useRef5(null);
+  const holding = useRef5(false);
+  const lastInside = useRef5(null);
+  useLayoutEffect2(() => {
+    const element = form.current;
+    if (!element) return;
+    if (busy) {
+      const active = document.activeElement;
+      const from = active && active !== element && element.contains(active) ? active : !active || active === document.body ? lastInside.current : null;
+      if (from?.isConnected) {
+        sender.current = from;
+        holding.current = true;
+        element.focus();
+      }
+      return;
+    }
+    if (!holding.current) return;
+    holding.current = false;
+    if (document.activeElement !== element && document.activeElement !== document.body) return;
+    const target = firstInvalid(element) ?? (usable(sender.current) ? sender.current : Array.from(element.querySelectorAll(CONTROL)).find(usable));
+    sender.current = null;
+    target?.focus();
+  }, [busy]);
+  const onKeyDown = (event) => {
+    props.onKeyDown?.(event);
+    if (event.key !== "Enter" || event.defaultPrevented || event.nativeEvent.isComposing) return;
+    const target = event.target;
+    const inInput = target instanceof HTMLInputElement;
+    if (inInput) event.preventDefault();
+    if (event.altKey || event.shiftKey) return;
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault();
+      form.current?.requestSubmit();
+      return;
+    }
+    if (!inInput) return;
+    const oneLine = ONE_LINE.has((target.getAttribute("type") ?? "").toLowerCase()) && target.getAttribute("role") !== "combobox";
+    if (enterSends && oneLine) form.current?.requestSubmit();
+  };
+  return /* @__PURE__ */ jsx25(
+    BaseForm,
+    {
+      ref: form,
+      ...props,
+      tabIndex: busy ? -1 : props.tabIndex,
+      className: cn("outline-none", layout === "fields" && FIELDS_CLASSES, className),
+      onFocus: (event) => {
+        if (event.target !== form.current) lastInside.current = event.target;
+        props.onFocus?.(event);
+      },
+      onBlur: (event) => {
+        const next = event.relatedTarget;
+        if (next && !form.current?.contains(next)) lastInside.current = null;
+        props.onBlur?.(event);
+      },
+      onKeyDown,
+      onSubmit: (event) => {
+        if (event.target !== event.currentTarget) return;
+        event.preventDefault();
+        if (busyNow.current) return;
+        void onSubmit();
+      },
+      children: /* @__PURE__ */ jsx25(Fieldset.Root, { disabled: busy, className: "contents", children: /* @__PURE__ */ jsx25(FormBusyContext.Provider, { value: busy, children }) })
+    }
+  );
+}
+
+// src/MembersDialog.tsx
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+var LEADING_CLASSES = "size-8 rounded-md bg-accent-muted flex items-center justify-center shrink-0 text-accent-primary";
+function MembersDialog({ members, count, self, candidates = [], onAdd, note, initialView = "list", onClose }) {
+  const [view, setView] = useState3(onAdd ? initialView : "list");
+  const [chosen, setChosen] = useState3([]);
+  const [toggling, setToggling] = useState3(false);
+  const formId = useId();
+  const toggle = async () => {
+    if (!self || toggling) return;
+    setToggling(true);
+    try {
+      await self.onToggle();
+    } finally {
+      setToggling(false);
+    }
+  };
+  const add = async () => {
+    if (!onAdd || chosen.length === 0) return;
+    if (await onAdd(chosen) === false) return;
+    setChosen([]);
+    setView("list");
+  };
+  if (view === "add" && onAdd) {
+    return /* @__PURE__ */ jsx26(
+      DialogShell,
+      {
+        title: "Add members",
+        onClose,
+        headerContent: /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx26(IconButton, { tooltip: "Back to members", "aria-label": "Back to members", className: "-ml-2", onClick: () => setView("list"), children: /* @__PURE__ */ jsx26(IconArrowLeft, { size: 16, stroke: 1.5 }) }),
+          /* @__PURE__ */ jsx26("span", { className: "truncate text-h4 text-text-primary", children: "Add members" })
+        ] }),
+        bodyClassName: "flex flex-col gap-6",
+        footer: /* @__PURE__ */ jsxs17(Fragment5, { children: [
+          /* @__PURE__ */ jsx26(Button, { variant: "muted", onClick: onClose, children: "Cancel" }),
+          /* @__PURE__ */ jsx26(Button, { variant: "primary", type: "submit", form: formId, disabled: chosen.length === 0, children: "Invite" })
+        ] }),
+        children: /* @__PURE__ */ jsx26(Form, { id: formId, onSubmit: add, children: /* @__PURE__ */ jsx26(Field, { label: "Invite people", required: true, children: /* @__PURE__ */ jsx26(
+          ChipInput,
+          {
+            value: chosen,
+            onChange: setChosen,
+            options: candidates,
+            placeholder: "Search people...",
+            excludeIds: members.map((m) => m.id),
+            chipLeading: (o) => /* @__PURE__ */ jsx26(Avatar, { name: o.label, src: o.picture, size: 16 }),
+            rowLeading: (o) => /* @__PURE__ */ jsx26(Avatar, { name: o.label, src: o.picture, size: 32 }),
+            autoFocus: true
+          }
+        ) }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs17(
+    DialogShell,
+    {
+      title: "Members",
+      onClose,
+      headerContent: /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx26("span", { className: "truncate text-h4 text-text-primary", children: "Members" }),
+        /* @__PURE__ */ jsx26(Chip, { label: String(count ?? members.length) })
+      ] }),
+      bodyMaxHeight: "max-h-[400px]",
+      bodyClassName: "p-0 py-2",
+      children: [
+        (self || onAdd) && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col px-2", children: [
+          self && /* @__PURE__ */ jsx26(
+            MenuItem,
+            {
+              size: "tall",
+              className: "py-2",
+              disabled: toggling,
+              onClick: () => void toggle(),
+              leading: /* @__PURE__ */ jsx26("span", { className: LEADING_CLASSES, children: self.action === "join" ? /* @__PURE__ */ jsx26(IconUserPlus, { size: 16, stroke: 1.5 }) : /* @__PURE__ */ jsx26(IconUserMinus, { size: 16, stroke: 1.5 }) }),
+              label: self.action === "join" ? "Join" : "Leave"
+            }
+          ),
+          onAdd && /* @__PURE__ */ jsx26(
+            MenuItem,
+            {
+              size: "tall",
+              className: "py-2",
+              onClick: () => setView("add"),
+              leading: /* @__PURE__ */ jsx26("span", { className: LEADING_CLASSES, children: /* @__PURE__ */ jsx26(IconUserPlus, { size: 16, stroke: 1.5 }) }),
+              label: "Add members"
+            }
+          )
+        ] }),
+        members.map((member) => /* @__PURE__ */ jsxs17("div", { className: "flex h-12 items-center gap-3 px-5", children: [
+          /* @__PURE__ */ jsx26(Avatar, { size: 32, name: member.name, src: member.picture }),
+          /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-[2px]", children: [
+            /* @__PURE__ */ jsx26("div", { className: "truncate text-body-2 text-text-primary", children: member.name }),
+            member.caption && /* @__PURE__ */ jsx26("div", { className: "truncate text-caption text-text-secondary", children: member.caption })
+          ] })
+        ] }, member.id)),
+        note && /* @__PURE__ */ jsx26("div", { className: "px-5 pb-2 pt-3 text-caption text-text-secondary", children: note })
+      ]
+    }
+  );
+}
+
+// src/Banner.tsx
+import { IconX as IconX5 } from "@tabler/icons-react";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+var TONE_STYLES = {
+  ok: "bg-success-muted text-success-default",
+  error: "bg-error-muted text-error-default",
+  info: "bg-info-muted text-info-default",
+  warning: "bg-warning-muted text-warning-default"
+};
+function Banner({ tone, children, icon, action, onDismiss, dismissLabel = "Dismiss", className }) {
+  const role = tone === "error" ? "alert" : "status";
+  if (!onDismiss && !icon && !action) {
+    return /* @__PURE__ */ jsx27("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
+  }
+  const oneLine = Boolean(icon || action);
+  return /* @__PURE__ */ jsxs18("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
+    icon && /* @__PURE__ */ jsx27("span", { className: "flex shrink-0", children: icon }),
+    /* @__PURE__ */ jsx27("span", { className: cn("min-w-0 flex-1", oneLine && "truncate"), children }),
+    action && /* @__PURE__ */ jsx27(Button, { variant: "muted", size: "small", className: "shrink-0", onClick: action.onClick, children: action.label }),
+    onDismiss && /* @__PURE__ */ jsx27(IconButton, { variant: "current", "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0", children: /* @__PURE__ */ jsx27(IconX5, { size: 16, stroke: 1.5 }) })
+  ] });
+}
+
+// src/BlockHandle.tsx
+import { useCallback, useEffect as useEffect3, useRef as useRef6, useState as useState4 } from "react";
+import { IconGripVertical } from "@tabler/icons-react";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+function readId(element) {
+  const own = element.getAttribute("data-block-id") ?? element.querySelector("[data-block-id]")?.getAttribute("data-block-id");
+  return own || void 0;
+}
+function blockAtY(blocks, y) {
+  let found = null;
+  for (const block of blocks) {
+    if (block.element.getBoundingClientRect().top > y) break;
+    found = block;
+  }
+  return found ?? blocks[0] ?? null;
+}
+function readingBlocks(root) {
+  if (!root) return [];
+  return Array.from(root.children).filter((el) => el instanceof HTMLElement).map((element) => ({ id: readId(element), element })).filter((b) => b.id !== void 0);
+}
+var HANDLE = 24;
+function firstLineOffset(element) {
+  const text = element.querySelector("p, h1, h2, h3, pre, li") ?? element;
+  const line = parseFloat(getComputedStyle(text).lineHeight);
+  if (!Number.isFinite(line)) return 0;
+  const inset = text === element ? 0 : text.getBoundingClientRect().top - element.getBoundingClientRect().top;
+  return inset + (line - HANDLE) / 2;
+}
+function BlockHandle({ actions, editing, children, className }) {
+  const frame = useRef6(null);
+  const content = useRef6(null);
+  const [block, setBlock] = useState4(null);
+  const [top, setTop] = useState4(0);
+  const [open, setOpen] = useState4(false);
+  const follow = useCallback(
+    (y) => {
+      if (!content.current || !frame.current) return;
+      const found = editing ? editing.find(y) : blockAtY(readingBlocks(content.current.firstElementChild), y);
+      setBlock(found);
+      if (found) setTop(found.element.getBoundingClientRect().top - frame.current.getBoundingClientRect().top + firstLineOffset(found.element));
+    },
+    [editing]
+  );
+  useEffect3(() => {
+    if (!editing) return;
+    return editing.onChange(() => {
+      if (!open) setBlock(null);
+    });
+  }, [editing, open]);
+  const rows = editing && block ? editing.rows(block) : null;
+  const own = actions && block ? actions(block) : null;
+  const dragging = useRef6(false);
+  const [line, setLine] = useState4(null);
+  const inGutter = (e) => dragging.current && !!editing && !!content.current && !content.current.contains(e.target);
+  const landing = (y) => {
+    const target = editing?.find(y);
     if (!target || !frame.current) return null;
     const box = target.element.getBoundingClientRect();
     const after = y > box.top + box.height / 2;
@@ -1309,7 +1901,7 @@ function BlockHandle({ actions, editing, children, className }) {
     setLine(null);
     editing?.endDrag();
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       ref: frame,
@@ -1337,16 +1929,16 @@ function BlockHandle({ actions, editing, children, className }) {
         if (!frame.current?.contains(e.relatedTarget)) setLine(null);
       },
       children: [
-        /* @__PURE__ */ jsx19("div", { ref: content, children }),
-        /* @__PURE__ */ jsx19("div", { "aria-hidden": true, className: "absolute inset-y-0 -left-7 w-7" }),
-        line !== null && /* @__PURE__ */ jsx19("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 h-px bg-accent-primary", style: { top: line } }),
+        /* @__PURE__ */ jsx28("div", { ref: content, children }),
+        /* @__PURE__ */ jsx28("div", { "aria-hidden": true, className: "absolute inset-y-0 -left-7 w-7" }),
+        line !== null && /* @__PURE__ */ jsx28("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 h-px bg-accent-primary", style: { top: line } }),
         block && (rows || own) && // The top is the block's, measured: it depends on the document, not on a size of ours.
-        /* @__PURE__ */ jsx19("div", { className: cn("absolute -left-7", rows && "cursor-grab active:cursor-grabbing"), style: { top }, children: /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsx28("div", { className: cn("absolute -left-7", rows && "cursor-grab active:cursor-grabbing"), style: { top }, children: /* @__PURE__ */ jsxs19(
           Menu,
           {
             open,
             onOpenChange: setOpen,
-            trigger: /* @__PURE__ */ jsx19(
+            trigger: /* @__PURE__ */ jsx28(
               IconButton,
               {
                 "aria-label": "Block menu",
@@ -1367,12 +1959,12 @@ function BlockHandle({ actions, editing, children, className }) {
                   endDrag();
                   setBlock(null);
                 },
-                children: /* @__PURE__ */ jsx19(IconGripVertical, { size: 16, stroke: 1.5 })
+                children: /* @__PURE__ */ jsx28(IconGripVertical, { size: 16, stroke: 1.5 })
               }
             ),
             children: [
               rows,
-              rows && own && /* @__PURE__ */ jsx19(MenuSeparator, {}),
+              rows && own && /* @__PURE__ */ jsx28(MenuSeparator, {}),
               own
             ]
           }
@@ -1384,9 +1976,9 @@ function BlockHandle({ actions, editing, children, className }) {
 
 // src/Checkbox.tsx
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
-import { Field as BaseField } from "@base-ui/react/field";
+import { Field as BaseField2 } from "@base-ui/react/field";
 import { IconCheck } from "@tabler/icons-react";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } 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",
@@ -1403,392 +1995,89 @@ function Checkbox({ checked, onChange, disabled: ownDisabled = false, label, row
   const formBusy = useFormBusy();
   const disabled = ownDisabled || formBusy;
   if (!onChange) {
-    const picture = /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx20("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx20(IconCheck, { size: 12, stroke: 3 }) }) });
+    const picture = /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx29("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx29(IconCheck, { size: 12, stroke: 3 }) }) });
     if (label === void 0) return picture;
-    return /* @__PURE__ */ jsxs13("span", { className: "flex items-center gap-2", children: [
+    return /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-2", children: [
       picture,
-      /* @__PURE__ */ jsx20("span", { className: WORDS_CLASSES, children: label })
+      /* @__PURE__ */ jsx29("span", { className: WORDS_CLASSES, children: label })
     ] });
   }
-  const box = /* @__PURE__ */ jsx20(
+  const box = /* @__PURE__ */ jsx29(
     BaseCheckbox.Root,
     {
       checked,
       disabled,
-      "aria-label": aria["aria-label"],
-      "aria-required": aria["aria-required"],
-      onCheckedChange: (next) => onChange(next),
-      onClick: (e) => e.stopPropagation(),
-      className: (state) => squareClasses(state.checked, state.disabled, true, className),
-      children: /* @__PURE__ */ jsx20(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx20(IconCheck, { size: 12, stroke: 3 }) })
-    }
-  );
-  if (label === void 0) return box;
-  if (row) {
-    return /* @__PURE__ */ jsx20(BaseField.Root, { disabled, children: /* @__PURE__ */ jsxs13(BaseField.Label, { className: cn(ROW_CLASSES, checked && "bg-bg-selected", !disabled && "cursor-pointer hover:bg-bg-hover"), children: [
-      leading,
-      /* @__PURE__ */ jsx20("span", { className: cn("flex-1 min-w-0 truncate", WORDS_CLASSES), children: label }),
-      box
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx20(BaseField.Root, { disabled, children: /* @__PURE__ */ jsxs13(BaseField.Label, { className: cn("flex items-center gap-2", !disabled && "cursor-pointer"), children: [
-    box,
-    /* @__PURE__ */ jsx20("span", { className: WORDS_CLASSES, children: label })
-  ] }) });
-}
-
-// src/Chip.tsx
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
-var typeStyles = {
-  neutral: "bg-bg-inset text-text-primary",
-  brand: "bg-accent-muted text-accent-text signal:border signal:border-accent-outline",
-  info: "bg-info-muted text-info-default signal:border signal:border-info-outline",
-  warning: "bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
-  success: "bg-success-muted text-success-default signal:border signal:border-success-outline",
-  error: "bg-error-muted text-error-default signal:border signal:border-error-outline"
-};
-function Chip({ type = "neutral", label, leadingIcon, trailingIcon, href, onClick, className }) {
-  const classes = 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);
-  const inside = /* @__PURE__ */ jsxs14(Fragment4, { children: [
-    leadingIcon && /* @__PURE__ */ jsx21("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
-    // `truncate`, because `truncate` is `overflow: hidden` on both axes and
-    // the label's line box (11px under Signal) is tighter than its glyphs —
-    // 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__ */ jsx21("span", { className: cn("min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide", CHIP_TEXT_CLASSES), children: label }),
-    trailingIcon && /* @__PURE__ */ jsx21("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
-  ] });
-  if (href) return /* @__PURE__ */ jsx21("a", { href, onClick, className: cn("relative", classes), children: inside });
-  return /* @__PURE__ */ jsx21("div", { className: classes, children: inside });
-}
-
-// src/CommandPalette.tsx
-import {
-  createContext as createContext5,
-  useContext as useContext5,
-  useEffect as useEffect3,
-  useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo2,
-  useRef as useRef5,
-  useState as useState4
-} from "react";
-import { Dialog as Dialog2 } from "@base-ui/react/dialog";
-import { Autocomplete } from "@base-ui/react/autocomplete";
-import { IconLoader2 as IconLoader22, IconSearch } from "@tabler/icons-react";
-
-// src/ChipInput.tsx
-import { useMemo, useState as useState3 } from "react";
-import { Button as BaseButton4 } from "@base-ui/react/button";
-import { Combobox } from "@base-ui/react/combobox";
-import { IconX as IconX4 } from "@tabler/icons-react";
-import { jsx as jsx22, jsxs as jsxs15 } 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
-  // follows concentrically: 4px face + 2px inset = rounded-md.
-  "inline-flex items-center gap-1.5 bg-bg-elevated border border-border-subtle rounded-md py-0.5 max-h-[24px]"
-);
-var CHIP_LABEL = "text-caption font-medium text-text-primary";
-var CHIP_REMOVE = "size-4 flex items-center justify-center rounded-full hover:bg-bg-hover text-text-secondary";
-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__ */ jsxs15("div", { className: cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className), children: [
-    leading && /* @__PURE__ */ jsx22("span", { className: "flex shrink-0 items-center", children: leading }),
-    /* @__PURE__ */ jsx22("span", { className: cn(CHIP_LABEL, truncate && "min-w-0 truncate"), children: label }),
-    onRemove && /* @__PURE__ */ jsx22(
-      BaseButton4,
-      {
-        type: "button",
-        onClick: (e) => {
-          e.stopPropagation();
-          onRemove();
-        },
-        className: cn(CHIP_REMOVE, truncate && "shrink-0"),
-        "aria-label": removeLabel ?? `Remove ${label}`,
-        children: /* @__PURE__ */ jsx22(IconX4, { size: 10, stroke: 1.5 })
-      }
-    )
-  ] });
-}
-function ChipInput({
-  value,
-  onChange,
-  options,
-  placeholder = "Search\u2026",
-  autoFocus,
-  excludeIds = [],
-  chipLeading,
-  rowLeading,
-  ...aria
-}) {
-  const [query, setQuery] = useState3("");
-  const [box, setBox] = useState3(null);
-  const available = useMemo(() => {
-    const chosen = new Set(value.map((o) => o.id));
-    const excluded = new Set(excludeIds);
-    return options.filter((o) => !chosen.has(o.id) && !excluded.has(o.id));
-  }, [options, value, excludeIds]);
-  const filter = useMemo(
-    () => (item, q) => {
-      const needle = q.trim().toLowerCase();
-      if (!needle) return true;
-      return item.label.toLowerCase().includes(needle) || (item.description ?? "").toLowerCase().includes(needle);
-    },
-    []
-  );
-  const open = query.trim().length > 0;
-  const ariaLabel = aria["aria-label"] ?? (value.length > 0 ? placeholder : void 0);
-  const naming = {
-    ...ariaLabel !== void 0 && { "aria-label": ariaLabel },
-    ...aria["aria-labelledby"] !== void 0 && { "aria-labelledby": aria["aria-labelledby"] }
-  };
-  function removeLast() {
-    if (value.length > 0) onChange(value.slice(0, -1));
-  }
-  function onInputKeyDown(event) {
-    if (event.key === "Backspace" && query === "" && value.length > 0) {
-      event.preventDefault();
-      event.stopPropagation();
-      removeLast();
-      return;
-    }
-    if (event.key === "Escape" && query !== "") {
-      event.preventDefault();
-      event.stopPropagation();
-      setQuery("");
-    }
-  }
-  return /* @__PURE__ */ jsxs15(
-    Combobox.Root,
-    {
-      multiple: true,
-      items: available,
-      value,
-      onValueChange: (next) => {
-        onChange(next);
-        setQuery("");
-      },
-      inputValue: query,
-      onInputValueChange: setQuery,
-      open,
-      openOnInputClick: false,
-      filter,
-      itemToStringLabel: (option) => option.label,
-      children: [
-        /* @__PURE__ */ jsxs15(Combobox.Chips, { ref: setBox, className: cn(FIELD_SHELL_CLASSES, "focus-within:border-border-focus focus-within:hover:border-border-focus group-hover/field:focus-within: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__ */ jsxs15(Combobox.Chip, { className: cn(CHIP_BOX, chipPadding(!!chipLeading, true)), children: [
-            chipLeading && /* @__PURE__ */ jsx22("span", { className: "flex shrink-0 items-center", children: chipLeading(option) }),
-            /* @__PURE__ */ jsx22("span", { className: CHIP_LABEL, children: option.label }),
-            /* @__PURE__ */ jsx22(Combobox.ChipRemove, { className: CHIP_REMOVE, "aria-label": `Remove ${option.label}`, children: /* @__PURE__ */ jsx22(IconX4, { size: 10, stroke: 1.5 }) })
-          ] }, option.id)),
-          /* @__PURE__ */ jsx22(
-            Combobox.Input,
-            {
-              autoFocus,
-              placeholder: value.length === 0 ? placeholder : "",
-              "aria-required": aria["aria-required"],
-              ...naming,
-              onKeyDown: onInputKeyDown,
-              className: cn("flex-1 min-w-[120px] text-body-2 border-none", BARE_INPUT_CLASSES)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx22(Combobox.Portal, { children: /* @__PURE__ */ jsx22(
-          Combobox.Positioner,
-          {
-            anchor: box,
-            sideOffset: GAP3,
-            collisionPadding: VIEWPORT_PAD3,
-            className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx22(Combobox.Popup, { className: "w-[var(--anchor-width)] p-0", render: /* @__PURE__ */ jsx22(MenuPanel, {}), children: /* @__PURE__ */ jsx22(ScrollArea, { viewportClassName: "max-h-[240px]", contentClassName: "flex flex-col p-2", children: /* @__PURE__ */ jsx22(Combobox.List, { className: "flex flex-col gap-0.5", children: (option) => /* @__PURE__ */ jsx22(
-              Combobox.Item,
-              {
-                value: option,
-                render: /* @__PURE__ */ jsx22(
-                  MenuItem,
-                  {
-                    size: "tall",
-                    leading: rowLeading?.(option),
-                    label: option.label,
-                    description: option.description
-                  }
-                )
-              },
-              option.id
-            ) }) }) })
-          }
-        ) })
-      ]
+      "aria-label": aria["aria-label"],
+      "aria-required": aria["aria-required"],
+      onCheckedChange: (next) => onChange(next),
+      onClick: (e) => e.stopPropagation(),
+      className: (state) => squareClasses(state.checked, state.disabled, true, className),
+      children: /* @__PURE__ */ jsx29(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx29(IconCheck, { size: 12, stroke: 3 }) })
     }
   );
+  if (label === void 0) return box;
+  if (row) {
+    return /* @__PURE__ */ jsx29(BaseField2.Root, { disabled, children: /* @__PURE__ */ jsxs20(BaseField2.Label, { className: cn(ROW_CLASSES, checked && "bg-bg-selected", !disabled && "cursor-pointer hover:bg-bg-hover"), children: [
+      leading,
+      /* @__PURE__ */ jsx29("span", { className: cn("flex-1 min-w-0 truncate", WORDS_CLASSES), children: label }),
+      box
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx29(BaseField2.Root, { disabled, children: /* @__PURE__ */ jsxs20(BaseField2.Label, { className: cn("flex items-center gap-2", !disabled && "cursor-pointer"), children: [
+    box,
+    /* @__PURE__ */ jsx29("span", { className: WORDS_CLASSES, children: label })
+  ] }) });
 }
-var GAP3 = 4;
-var VIEWPORT_PAD3 = 8;
+
+// src/CommandPalette.tsx
+import {
+  createContext as createContext6,
+  useContext as useContext6,
+  useEffect as useEffect4,
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo3,
+  useRef as useRef7,
+  useState as useState5
+} from "react";
+import { Dialog as Dialog3 } from "@base-ui/react/dialog";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { IconLoader2 as IconLoader22, IconSearch } from "@tabler/icons-react";
 
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function EmptyState({ icon, message, scope = "page", action, className }) {
   if (scope === "section") {
-    return /* @__PURE__ */ jsx23("p", { className: cn("text-caption text-text-muted", className), children: message });
+    return /* @__PURE__ */ jsx30("p", { className: cn("text-caption text-text-muted", className), children: message });
   }
-  return /* @__PURE__ */ jsxs16("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
-    /* @__PURE__ */ jsx23("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx23(IconMessage2, { size: 16, stroke: 1.5 }) }),
-    /* @__PURE__ */ jsx23("p", { className: "text-body-2 text-text-secondary text-center", children: message }),
-    action && /* @__PURE__ */ jsx23(Button, { variant: "outlined", className: "mt-2", onClick: action.onClick, children: action.label })
+  return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
+    /* @__PURE__ */ jsx30("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx30(IconMessage2, { size: 16, stroke: 1.5 }) }),
+    /* @__PURE__ */ jsx30("p", { className: "text-body-2 text-text-secondary text-center", children: message }),
+    action && /* @__PURE__ */ jsx30(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 jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-var LINE_STYLES = {
-  helper: "text-caption text-text-muted",
-  warning: "text-caption text-warning-default",
-  error: "text-caption text-error-default"
-};
-function Field({ label, required = false, helper, error, children }) {
-  const control = required && isValidElement(children) ? cloneElement(children, {
-    "aria-required": children.props["aria-required"] ?? true
-  }) : children;
-  return (
-    // `group/field`: the label, the box and the line under it are one thing under the pointer —
-    // anywhere in it strengthens the box's border, as hovering the box does (Katerina, 28 September).
-    // Before, the 8px between the label and the box was a gap where the border went out again.
-    /* @__PURE__ */ jsxs17(BaseField2.Root, { invalid: !!error, className: "group/field flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs17(BaseField2.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
-        label,
-        required && /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
-      ] }),
-      /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-1.5", children: [
-        control,
-        error != null ? /* @__PURE__ */ jsx24(BaseField2.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx24(BaseField2.Description, { className: LINE_STYLES.helper, children: helper }) : null
-      ] })
-    ] })
-  );
-}
-function FieldLine({ tone = "helper", children, className }) {
-  return /* @__PURE__ */ jsx24("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
-}
-
-// src/Form.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
-import { Fieldset } from "@base-ui/react/fieldset";
-import { Form as BaseForm } from "@base-ui/react/form";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var FIELDS_CLASSES = "flex flex-col gap-6";
-var CONTROL = 'input:not([type="hidden"]), textarea, select, button, [role="checkbox"], [role="combobox"], [tabindex]:not([tabindex="-1"])';
-var ONE_LINE = /* @__PURE__ */ new Set(["", "text", "search", "email", "url", "tel", "password", "number"]);
-function usable(element) {
-  return element instanceof HTMLElement && element.isConnected && element.matches(CONTROL) && !element.matches(":disabled") && element.getAttribute("aria-disabled") !== "true";
-}
-function firstInvalid(form) {
-  for (const marked of form.querySelectorAll("[data-invalid]")) {
-    if (usable(marked)) return marked;
-    const inside = Array.from(marked.querySelectorAll(CONTROL)).find(usable);
-    if (inside) return inside;
-  }
-  return void 0;
-}
-function Form({ onSubmit, busy: ownBusy = false, enterSends = true, layout = "fields", className, children, ...props }) {
-  const outerBusy = useFormBusy();
-  const busy = ownBusy || outerBusy;
-  const form = useRef4(null);
-  const busyNow = useRef4(busy);
-  busyNow.current = busy;
-  const sender = useRef4(null);
-  const holding = useRef4(false);
-  const lastInside = useRef4(null);
-  useLayoutEffect2(() => {
-    const element = form.current;
-    if (!element) return;
-    if (busy) {
-      const active = document.activeElement;
-      const from = active && active !== element && element.contains(active) ? active : !active || active === document.body ? lastInside.current : null;
-      if (from?.isConnected) {
-        sender.current = from;
-        holding.current = true;
-        element.focus();
-      }
-      return;
-    }
-    if (!holding.current) return;
-    holding.current = false;
-    if (document.activeElement !== element && document.activeElement !== document.body) return;
-    const target = firstInvalid(element) ?? (usable(sender.current) ? sender.current : Array.from(element.querySelectorAll(CONTROL)).find(usable));
-    sender.current = null;
-    target?.focus();
-  }, [busy]);
-  const onKeyDown = (event) => {
-    props.onKeyDown?.(event);
-    if (event.key !== "Enter" || event.defaultPrevented || event.nativeEvent.isComposing) return;
-    const target = event.target;
-    const inInput = target instanceof HTMLInputElement;
-    if (inInput) event.preventDefault();
-    if (event.altKey || event.shiftKey) return;
-    if (event.ctrlKey || event.metaKey) {
-      event.preventDefault();
-      form.current?.requestSubmit();
-      return;
-    }
-    if (!inInput) return;
-    const oneLine = ONE_LINE.has((target.getAttribute("type") ?? "").toLowerCase()) && target.getAttribute("role") !== "combobox";
-    if (enterSends && oneLine) form.current?.requestSubmit();
-  };
-  return /* @__PURE__ */ jsx25(
-    BaseForm,
-    {
-      ref: form,
-      ...props,
-      tabIndex: busy ? -1 : props.tabIndex,
-      className: cn("outline-none", layout === "fields" && FIELDS_CLASSES, className),
-      onFocus: (event) => {
-        if (event.target !== form.current) lastInside.current = event.target;
-        props.onFocus?.(event);
-      },
-      onBlur: (event) => {
-        const next = event.relatedTarget;
-        if (next && !form.current?.contains(next)) lastInside.current = null;
-        props.onBlur?.(event);
-      },
-      onKeyDown,
-      onSubmit: (event) => {
-        if (event.target !== event.currentTarget) return;
-        event.preventDefault();
-        if (busyNow.current) return;
-        void onSubmit();
-      },
-      children: /* @__PURE__ */ jsx25(Fieldset.Root, { disabled: busy, className: "contents", children: /* @__PURE__ */ jsx25(FormBusyContext.Provider, { value: busy, children }) })
-    }
-  );
-}
-
 // src/Skeleton.tsx
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 function SkeletonBar({ className, style }) {
-  return /* @__PURE__ */ jsx26("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
+  return /* @__PURE__ */ jsx31("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__ */ jsxs18("div", { className: "flex shrink-0 items-center gap-2 px-2 h-[32px] rounded-lg", children: [
-    /* @__PURE__ */ jsx26(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
-    /* @__PURE__ */ jsx26(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
+  return /* @__PURE__ */ jsxs22("div", { className: "flex shrink-0 items-center gap-2 px-2 h-[32px] rounded-lg", children: [
+    /* @__PURE__ */ jsx31(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
+    /* @__PURE__ */ jsx31(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
   ] });
 }
 function SkeletonList({ rows = 8, className }) {
-  return /* @__PURE__ */ jsx26("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx26(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
+  return /* @__PURE__ */ jsx31("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx31(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
 }
 
 // src/CommandPalette.tsx
-import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
-var PaletteContext = createContext5(null);
+import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+var PaletteContext = createContext6(null);
 function usePalette(part) {
-  const palette = useContext5(PaletteContext);
+  const palette = useContext6(PaletteContext);
   if (!palette) throw new Error(`[@estiva-app/ui] ${part} must be inside a CommandPalette.`);
   return palette;
 }
@@ -1800,8 +2089,8 @@ function firstControl(popup) {
   return popup.querySelector("[data-command-palette-fields]")?.querySelector(CONTROL2) ?? null;
 }
 function CommandPalette({ open, onOpenChange, label, where, modKey = "Ctrl", children }) {
-  const popupRef = useRef5(null);
-  useEffect3(() => {
+  const popupRef = useRef7(null);
+  useEffect4(() => {
     if (!open) return;
     const frame = requestAnimationFrame(() => {
       const popup = popupRef.current;
@@ -1810,11 +2099,11 @@ function CommandPalette({ open, onOpenChange, label, where, modKey = "Ctrl", chi
     });
     return () => cancelAnimationFrame(frame);
   });
-  const context = useMemo2(() => ({ where, modKey, popupRef }), [where, modKey]);
-  return /* @__PURE__ */ jsx27(Dialog2.Root, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs19(Dialog2.Portal, { children: [
-    /* @__PURE__ */ jsx27(Dialog2.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-    /* @__PURE__ */ jsx27(Dialog2.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center pt-[16vh]", children: /* @__PURE__ */ jsx27(
-      Dialog2.Popup,
+  const context = useMemo3(() => ({ where, modKey, popupRef }), [where, modKey]);
+  return /* @__PURE__ */ jsx32(Dialog3.Root, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs23(Dialog3.Portal, { children: [
+    /* @__PURE__ */ jsx32(Dialog3.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+    /* @__PURE__ */ jsx32(Dialog3.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center pt-[16vh]", children: /* @__PURE__ */ jsx32(
+      Dialog3.Popup,
       {
         ref: popupRef,
         "aria-label": label,
@@ -1823,13 +2112,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__ */ jsx27(PaletteContext.Provider, { value: context, children })
+        children: /* @__PURE__ */ jsx32(PaletteContext.Provider, { value: context, children })
       }
     ) })
   ] }) });
 }
 function LevelChip({ chip, onBack }) {
-  return /* @__PURE__ */ jsx27(InputChip, { label: chip.label, leading: chip.leading, onRemove: onBack, removeLabel: `Leave ${chip.label}`, truncate: true, className: "max-w-[272px] shrink-0" });
+  return /* @__PURE__ */ jsx32(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 () => {
@@ -1840,10 +2129,10 @@ function useBack(chip, popupRef) {
 }
 function Footer({ keys }) {
   const { where } = usePalette("The footer");
-  return /* @__PURE__ */ jsxs19("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__ */ jsx27("span", { className: "min-w-0 flex-1 truncate", children: where }),
-    keys.map(([key, word]) => /* @__PURE__ */ jsxs19("span", { className: "flex shrink-0 items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx27(Kbd, { children: key }),
+  return /* @__PURE__ */ jsxs23("div", { className: cn("flex h-9 shrink-0 items-center gap-4 border-t border-border-subtle px-5", MONO_CAPTION_CLASSES, "signal:text-text-muted leaf:font-mono leaf:text-small"), children: [
+    /* @__PURE__ */ jsx32("span", { className: "min-w-0 flex-1 truncate", children: where }),
+    keys.map(([key, word]) => /* @__PURE__ */ jsxs23("span", { className: "flex shrink-0 items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx32(Kbd, { children: key }),
       " ",
       word
     ] }, key))
@@ -1853,14 +2142,14 @@ var lowerFirst = (s) => s.charAt(0).toLowerCase() + s.slice(1);
 function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip, pending, notes = [], empty, children }) {
   const { modKey, popupRef } = usePalette("CommandPaletteSearch");
   const back = useBack(chip, popupRef);
-  const items = useMemo2(() => groups.filter((g) => g.rows.length > 0).map((g) => ({ value: g.label, items: g.rows })), [groups]);
+  const items = useMemo3(() => groups.filter((g) => g.rows.length > 0).map((g) => ({ value: g.label, items: g.rows })), [groups]);
   const rows = items.flatMap((g) => g.items);
-  const [litId, setLitId] = useState4();
+  const [litId, setLitId] = useState5();
   const lit = litId === void 0 ? void 0 : rows.find((r) => r.id === litId);
-  const inputRef = useRef5(null);
-  const reported = useRef5({});
-  const settled = useRef5(null);
-  const moved = useRef5(false);
+  const inputRef = useRef7(null);
+  const reported = useRef7({});
+  const settled = useRef7(null);
+  const moved = useRef7(false);
   useLayoutEffect3(() => {
     const before = settled.current;
     const now = reported.current;
@@ -1920,7 +2209,7 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
     ...chip && query === "" ? [["Backspace", "back"]] : [],
     ["Esc", "close"]
   ];
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs23(
     Autocomplete.Root,
     {
       items,
@@ -1943,10 +2232,10 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
         setLitId(id);
       },
       children: [
-        /* @__PURE__ */ jsxs19("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
-          /* @__PURE__ */ jsx27(IconSearch, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" }),
-          chip && /* @__PURE__ */ jsx27(LevelChip, { chip, onBack: back }),
-          /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsxs23("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
+          /* @__PURE__ */ jsx32(IconSearch, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" }),
+          chip && /* @__PURE__ */ jsx32(LevelChip, { chip, onBack: back }),
+          /* @__PURE__ */ jsx32(
             Autocomplete.Input,
             {
               ref: inputRef,
@@ -1958,43 +2247,43 @@ function CommandPaletteSearch({ query, onQueryChange, placeholder, groups, chip,
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs19(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col p-2", children: [
-          children != null && /* @__PURE__ */ jsx27("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children }),
-          /* @__PURE__ */ jsx27(Autocomplete.List, { className: "flex flex-col", children: (group) => /* @__PURE__ */ jsxs19(Autocomplete.Group, { items: group.items, className: "flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsx27(Autocomplete.GroupLabel, { className: "flex h-7 shrink-0 items-center px-3", children: /* @__PURE__ */ jsx27(SectionLabel, { tone: "secondary", children: group.value }) }),
-            /* @__PURE__ */ jsx27(Autocomplete.Collection, { children: (row) => (
+        /* @__PURE__ */ jsxs23(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col p-2", children: [
+          children != null && /* @__PURE__ */ jsx32("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children }),
+          /* @__PURE__ */ jsx32(Autocomplete.List, { className: "flex flex-col", children: (group) => /* @__PURE__ */ jsxs23(Autocomplete.Group, { items: group.items, className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx32(Autocomplete.GroupLabel, { className: "flex h-7 shrink-0 items-center px-3", children: /* @__PURE__ */ jsx32(SectionLabel, { tone: "secondary", children: group.value }) }),
+            /* @__PURE__ */ jsx32(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__ */ jsx27(Autocomplete.Item, { value: row, onClick: () => row.onSelect(), className: menuItemClassName({ size: "tall" }), children: /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx32(Autocomplete.Item, { value: row, onClick: () => row.onSelect(), className: menuItemClassName({ size: "tall" }), children: /* @__PURE__ */ jsx32(
                 MenuItemBody,
                 {
                   size: "tall",
                   label: row.label,
                   description: row.description,
-                  leading: /* @__PURE__ */ jsx27(RowLeading, { row }),
+                  leading: /* @__PURE__ */ jsx32(RowLeading, { row }),
                   submenu: !!row.onGoIn,
-                  hint: row.onGoIn ? /* @__PURE__ */ jsx27(Kbd, { children: "Tab" }) : /* @__PURE__ */ jsx27(EnterHint, {})
+                  hint: row.onGoIn ? /* @__PURE__ */ jsx32(Kbd, { children: "Tab" }) : /* @__PURE__ */ jsx32(EnterHint, {})
                 }
               ) }, row.id)
             ) })
           ] }, group.value) }),
-          /* @__PURE__ */ jsx27(Autocomplete.Status, { className: "flex items-center gap-2 px-3 [&:not(:empty)]:h-8", children: pending && /* @__PURE__ */ jsxs19(Fragment5, { children: [
-            /* @__PURE__ */ jsx27(IconLoader22, { size: 12, stroke: 1.5, className: "shrink-0 animate-spin text-text-muted" }),
-            /* @__PURE__ */ jsx27("span", { className: "text-caption text-text-muted", children: pending })
+          /* @__PURE__ */ jsx32(Autocomplete.Status, { className: "flex items-center gap-2 px-3 [&:not(:empty)]:h-8", children: pending && /* @__PURE__ */ jsxs23(Fragment6, { children: [
+            /* @__PURE__ */ jsx32(IconLoader22, { size: 12, stroke: 1.5, className: "shrink-0 animate-spin text-text-muted" }),
+            /* @__PURE__ */ jsx32("span", { className: "text-caption text-text-muted", children: pending })
           ] }) }),
-          notes.map((note) => /* @__PURE__ */ jsx27("div", { className: "flex min-h-8 items-center px-3", children: /* @__PURE__ */ jsx27(FieldLine, { children: note }) }, note)),
-          /* @__PURE__ */ jsx27(Autocomplete.Empty, { className: "flex items-center px-3 [&:not(:empty)]:min-h-10", children: empty && /* @__PURE__ */ jsx27(EmptyState, { scope: "section", message: empty }) })
+          notes.map((note) => /* @__PURE__ */ jsx32("div", { className: "flex min-h-8 items-center px-3", children: /* @__PURE__ */ jsx32(FieldLine, { children: note }) }, note)),
+          /* @__PURE__ */ jsx32(Autocomplete.Empty, { className: "flex items-center px-3 [&:not(:empty)]:min-h-10", children: empty && /* @__PURE__ */ jsx32(EmptyState, { scope: "section", message: empty }) })
         ] }),
-        /* @__PURE__ */ jsx27(Footer, { keys })
+        /* @__PURE__ */ jsx32(Footer, { keys })
       ]
     }
   );
 }
 function RowLeading({ row }) {
   if (row.icon != null) {
-    return /* @__PURE__ */ jsx27("span", { className: "flex size-8 items-center justify-center rounded-sm bg-bg-inset text-text-secondary", children: row.icon });
+    return /* @__PURE__ */ jsx32("span", { className: "flex size-8 items-center justify-center rounded-sm bg-bg-inset text-text-secondary", children: row.icon });
   }
-  return /* @__PURE__ */ jsx27("span", { className: "flex size-8 items-center justify-center", children: row.leading });
+  return /* @__PURE__ */ jsx32("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) {
@@ -2004,9 +2293,9 @@ function isTextField(el) {
 function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWaits, working, error, children }) {
   const { modKey, popupRef } = usePalette("CommandPaletteForm");
   const back = useBack(chip, popupRef);
-  const frameRef = useRef5(null);
+  const frameRef = useRef7(null);
   const busy = !!working;
-  const busyRef = useRef5(busy);
+  const busyRef = useRef7(busy);
   busyRef.current = busy;
   const firstInvalid2 = () => frameRef.current?.querySelector("[data-invalid]")?.querySelector(CONTROL2) ?? null;
   const submit = () => {
@@ -2022,7 +2311,7 @@ function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWaits, wo
     if (isTextField(el)) return el.value === "";
     return ![...frame.querySelectorAll("input, textarea")].some(isTextField);
   };
-  const [backNamed, setBackNamed] = useState4(false);
+  const [backNamed, setBackNamed] = useState5(false);
   const measure = () => setBackNamed(backWorksFrom(document.activeElement));
   useLayoutEffect3(measure);
   const onKeyDown = (e) => {
@@ -2036,65 +2325,65 @@ function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWaits, wo
     ...backNamed ? [["Backspace", "back"]] : [],
     ["Esc", "close"]
   ];
-  return /* @__PURE__ */ jsxs19("div", { ref: frameRef, tabIndex: -1, onKeyDown, onFocus: measure, onBlur: measure, onInput: measure, className: "flex min-h-0 flex-col outline-none", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
-      icon != null && /* @__PURE__ */ jsx27("span", { className: "flex shrink-0 items-center text-text-secondary", children: icon }),
-      /* @__PURE__ */ jsx27(LevelChip, { chip, onBack: back })
+  return /* @__PURE__ */ jsxs23("div", { ref: frameRef, tabIndex: -1, onKeyDown, onFocus: measure, onBlur: measure, onInput: measure, className: "flex min-h-0 flex-col outline-none", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5", children: [
+      icon != null && /* @__PURE__ */ jsx32("span", { className: "flex shrink-0 items-center text-text-secondary", children: icon }),
+      /* @__PURE__ */ jsx32(LevelChip, { chip, onBack: back })
     ] }),
-    /* @__PURE__ */ jsxs19(Form, { "data-command-palette-fields": "", busy, enterSends: false, onSubmit: submit, layout: "free", className: "flex min-h-0 flex-col", children: [
-      /* @__PURE__ */ jsx27(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col px-5 py-4", children: /* @__PURE__ */ jsx27("div", { className: FIELDS_CLASSES, children }) }),
-      /* @__PURE__ */ jsxs19("div", { className: "flex shrink-0 items-center gap-3 px-5 pb-4", children: [
-        /* @__PURE__ */ jsx27("div", { className: "min-w-0 flex-1", children: working ? /* @__PURE__ */ jsx27(FieldLine, { children: working.line }) : error ? /* @__PURE__ */ jsx27(FieldLine, { tone: "error", children: error }) : null }),
-        /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsxs23(Form, { "data-command-palette-fields": "", busy, enterSends: false, onSubmit: submit, layout: "free", className: "flex min-h-0 flex-col", children: [
+      /* @__PURE__ */ jsx32(ScrollArea, { viewportClassName: "max-h-[420px]", contentClassName: "flex flex-col px-5 py-4", children: /* @__PURE__ */ jsx32("div", { className: FIELDS_CLASSES, children }) }),
+      /* @__PURE__ */ jsxs23("div", { className: "flex shrink-0 items-center gap-3 px-5 pb-4", children: [
+        /* @__PURE__ */ jsx32("div", { className: "min-w-0 flex-1", children: working ? /* @__PURE__ */ jsx32(FieldLine, { children: working.line }) : error ? /* @__PURE__ */ jsx32(FieldLine, { tone: "error", children: error }) : null }),
+        /* @__PURE__ */ jsx32(
           Button,
           {
             type: "submit",
             variant: "primary",
             disabled: busy,
             disabledReason: busy ? void 0 : submitWaits,
-            leadingIcon: busy ? /* @__PURE__ */ jsx27(IconLoader22, { size: 16, stroke: 1.5, className: "animate-spin" }) : void 0,
+            leadingIcon: busy ? /* @__PURE__ */ jsx32(IconLoader22, { size: 16, stroke: 1.5, className: "animate-spin" }) : void 0,
             children: working ? working.button : submitLabel
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx27(Footer, { keys })
+    /* @__PURE__ */ jsx32(Footer, { keys })
   ] });
 }
 var BAR_WIDTHS = ["w-4/5", "w-3/5", "w-2/3"];
 function CommandPaletteWorking({ children, bars = 2 }) {
-  return /* @__PURE__ */ jsxs19("div", { role: "status", className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs19("span", { className: "flex items-center gap-2 text-caption text-text-secondary", children: [
-      /* @__PURE__ */ jsx27(IconLoader22, { size: 14, stroke: 1.5, className: "shrink-0 animate-spin" }),
+  return /* @__PURE__ */ jsxs23("div", { role: "status", className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-2 text-caption text-text-secondary", children: [
+      /* @__PURE__ */ jsx32(IconLoader22, { size: 14, stroke: 1.5, className: "shrink-0 animate-spin" }),
       children
     ] }),
-    BAR_WIDTHS.slice(0, bars).map((width) => /* @__PURE__ */ jsx27(SkeletonBar, { className: cn("h-3", width) }, width))
+    BAR_WIDTHS.slice(0, bars).map((width) => /* @__PURE__ */ jsx32(SkeletonBar, { className: cn("h-3", width) }, width))
   ] });
 }
 function CommandPaletteAnswer({ children, note }) {
   const paragraphs = children.split(/\n\s*\n/).filter((p) => p.trim() !== "");
-  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", children: [
-    paragraphs.map((paragraph, i) => /* @__PURE__ */ jsx27("p", { className: "whitespace-pre-wrap text-body-2 text-text-primary", children: paragraph.split(/\s*(\[\d+\])/).map(
-      (part, j) => /^\[\d+\]$/.test(part) ? /* @__PURE__ */ jsx27("sup", { className: "ml-0.5 font-mono text-small text-accent-text", children: part.slice(1, -1) }, j) : part
+  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-2", children: [
+    paragraphs.map((paragraph, i) => /* @__PURE__ */ jsx32("p", { className: "whitespace-pre-wrap text-body-2 text-text-primary", children: paragraph.split(/\s*(\[\d+\])/).map(
+      (part, j) => /^\[\d+\]$/.test(part) ? /* @__PURE__ */ jsx32("sup", { className: "ml-0.5 font-mono text-small text-accent-text", children: part.slice(1, -1) }, j) : part
     ) }, i)),
-    note && /* @__PURE__ */ jsx27(FieldLine, { children: note })
+    note && /* @__PURE__ */ jsx32(FieldLine, { children: note })
   ] });
 }
 function CommandPaletteQuote({ children }) {
-  return /* @__PURE__ */ jsx27("p", { className: "whitespace-pre-wrap border-l-2 border-border-default pl-3 text-body-2 text-text-primary", children });
+  return /* @__PURE__ */ jsx32("p", { className: "whitespace-pre-wrap border-l-2 border-border-default pl-3 text-body-2 text-text-primary", children });
 }
 function CommandPaletteProposal({ source, mark, children }) {
-  return /* @__PURE__ */ jsxs19(Card, { fill: "surface", className: "flex flex-col gap-1 p-3", children: [
-    /* @__PURE__ */ jsxs19("span", { className: "flex items-center gap-2 text-caption text-text-secondary", children: [
+  return /* @__PURE__ */ jsxs23(Card, { fill: "surface", className: "flex flex-col gap-1 p-3", children: [
+    /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-2 text-caption text-text-secondary", children: [
       mark,
       source
     ] }),
-    /* @__PURE__ */ jsx27("span", { className: "text-body-2 text-text-primary", children })
+    /* @__PURE__ */ jsx32("span", { className: "text-body-2 text-text-primary", children })
   ] });
 }
 
 // src/InlineChip.tsx
-import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs24 } 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. */
@@ -2116,19 +2405,20 @@ 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__ */ jsxs20(Fragment6, { children: [
-    icon && /* @__PURE__ */ jsx28("span", { className: "flex size-4 shrink-0 items-center justify-center text-text-secondary", children: icon }),
+  const inApp = useInAppClick(href, props.onClick);
+  const body = /* @__PURE__ */ jsxs24(Fragment7, { children: [
+    icon && /* @__PURE__ */ jsx33("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__ */ jsx28("span", { className: classes, ...props, children: body });
+    return /* @__PURE__ */ jsx33("span", { className: classes, ...props, children: body });
   }
-  return /* @__PURE__ */ jsx28("a", { href, className: classes, ...props, children: body });
+  return /* @__PURE__ */ jsx33("a", { href, className: classes, ...props, onClick: inApp, children: body });
 }
 
 // src/RichText.tsx
-import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 var RICH_TEXT_CLASSES = {
   base: "flex flex-col gap-1 break-words text-text-secondary",
   /* A heading binds to what follows it: 12px above (8 and the 4px gap), 8px below (4 and the gap); two headings in a row, 12px apart. Level 3 keeps the text's colour, one step lower. */
@@ -2160,35 +2450,35 @@ function textWithLinks(text, renderText) {
   return parts.map((part, i) => {
     const written = part.match(WRITTEN_LINK);
     if (written) {
-      return /* @__PURE__ */ jsx29("span", { className: "break-words", children: /* @__PURE__ */ jsx29(Link, { href: written[2], external: true, onClick: keepToLink, children: written[1] }) }, i);
+      return /* @__PURE__ */ jsx34("span", { className: "break-words", children: /* @__PURE__ */ jsx34(Link, { href: written[2], external: true, onClick: keepToLink, children: written[1] }) }, i);
     }
     const bare = i % 2 === 1 ? part.match(BARE_LINK) : null;
     if (bare) {
       return (
         // An address has no spaces to wrap at, so it may break anywhere.
-        /* @__PURE__ */ jsxs21("span", { className: "break-all", children: [
-          /* @__PURE__ */ jsx29(Link, { href: bare[1], external: true, onClick: keepToLink, children: bare[1] }),
+        /* @__PURE__ */ jsxs25("span", { className: "break-all", children: [
+          /* @__PURE__ */ jsx34(Link, { href: bare[1], external: true, onClick: keepToLink, children: bare[1] }),
           bare[2]
         ] }, i)
       );
     }
-    return part ? /* @__PURE__ */ jsx29("span", { children: renderText(part) }, i) : null;
+    return part ? /* @__PURE__ */ jsx34("span", { children: renderText(part) }, i) : null;
   });
 }
 function Runs({ runs, draw }) {
-  return /* @__PURE__ */ jsx29(Fragment7, { children: (runs ?? []).map((run, i) => {
-    if (run.reference) return /* @__PURE__ */ jsx29("span", { children: draw.renderReference(run.reference, run) }, i);
+  return /* @__PURE__ */ jsx34(Fragment8, { children: (runs ?? []).map((run, i) => {
+    if (run.reference) return /* @__PURE__ */ jsx34("span", { children: draw.renderReference(run.reference, run) }, i);
     if (run.marks.includes("code")) {
-      return /* @__PURE__ */ jsx29("code", { children: run.text }, i);
+      return /* @__PURE__ */ jsx34("code", { children: run.text }, i);
     }
-    let node = run.text.split("\n").map((line, j) => /* @__PURE__ */ jsxs21("span", { children: [
-      j > 0 && /* @__PURE__ */ jsx29("br", {}),
+    let node = run.text.split("\n").map((line, j) => /* @__PURE__ */ jsxs25("span", { children: [
+      j > 0 && /* @__PURE__ */ jsx34("br", {}),
       textWithLinks(line, draw.renderText)
     ] }, j));
-    if (run.marks.includes("underline")) node = /* @__PURE__ */ jsx29("u", { children: node });
-    if (run.marks.includes("italic")) node = /* @__PURE__ */ jsx29("em", { children: node });
-    if (run.marks.includes("bold")) node = /* @__PURE__ */ jsx29("strong", { children: node });
-    return /* @__PURE__ */ jsx29("span", { children: node }, i);
+    if (run.marks.includes("underline")) node = /* @__PURE__ */ jsx34("u", { children: node });
+    if (run.marks.includes("italic")) node = /* @__PURE__ */ jsx34("em", { children: node });
+    if (run.marks.includes("bold")) node = /* @__PURE__ */ jsx34("strong", { children: node });
+    return /* @__PURE__ */ jsx34("span", { children: node }, i);
   }) });
 }
 var named = (block) => block.typeName ?? block.type;
@@ -2199,15 +2489,15 @@ function Table({ block, draw }) {
     const header = named(cell) === "tableHeader";
     const Cell = header ? "th" : "td";
     const { colspan, rowspan } = cell.attrs ?? {};
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs25(
       Cell,
       {
         "data-block-id": cell.id,
         colSpan: colspan && colspan > 1 ? colspan : void 0,
         rowSpan: rowspan && rowspan > 1 ? rowspan : void 0,
         children: [
-          (cell.children ?? []).map((child, j) => /* @__PURE__ */ jsx29(Runs, { runs: child.inline, draw }, j)),
-          /* @__PURE__ */ jsx29(Runs, { runs: cell.inline, draw })
+          (cell.children ?? []).map((child, j) => /* @__PURE__ */ jsx34(Runs, { runs: child.inline, draw }, j)),
+          /* @__PURE__ */ jsx34(Runs, { runs: cell.inline, draw })
         ]
       },
       cell.id ?? i
@@ -2215,43 +2505,43 @@ function Table({ block, draw }) {
   });
   const first = rows[0].children ?? [];
   const headerRow = first.length > 0 && first.every((cell) => named(cell) === "tableHeader");
-  return /* @__PURE__ */ jsxs21("table", { "data-block-id": block.id, children: [
-    headerRow && /* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsx29("tr", { "data-block-id": rows[0].id, children: cells(rows[0]) }) }),
-    /* @__PURE__ */ jsx29("tbody", { children: (headerRow ? rows.slice(1) : rows).map((row, i) => /* @__PURE__ */ jsx29("tr", { "data-block-id": row.id, children: cells(row) }, row.id ?? i)) })
+  return /* @__PURE__ */ jsxs25("table", { "data-block-id": block.id, children: [
+    headerRow && /* @__PURE__ */ jsx34("thead", { children: /* @__PURE__ */ jsx34("tr", { "data-block-id": rows[0].id, children: cells(rows[0]) }) }),
+    /* @__PURE__ */ jsx34("tbody", { children: (headerRow ? rows.slice(1) : rows).map((row, i) => /* @__PURE__ */ jsx34("tr", { "data-block-id": row.id, children: cells(row) }, row.id ?? i)) })
   ] });
 }
 function Block({ block, draw }) {
   const own = draw.renderBlock?.(block);
   if (own !== void 0) return own;
-  const runs = /* @__PURE__ */ jsx29(Runs, { runs: block.inline, draw });
+  const runs = /* @__PURE__ */ jsx34(Runs, { runs: block.inline, draw });
   switch (block.type) {
     case "heading": {
-      if (block.level === 1) return /* @__PURE__ */ jsx29("h1", { "data-block-id": block.id, children: runs });
-      if (block.level === 3) return /* @__PURE__ */ jsx29("h3", { "data-block-id": block.id, children: runs });
-      return /* @__PURE__ */ jsx29("h2", { "data-block-id": block.id, children: runs });
+      if (block.level === 1) return /* @__PURE__ */ jsx34("h1", { "data-block-id": block.id, children: runs });
+      if (block.level === 3) return /* @__PURE__ */ jsx34("h3", { "data-block-id": block.id, children: runs });
+      return /* @__PURE__ */ jsx34("h2", { "data-block-id": block.id, children: runs });
     }
     case "paragraph":
-      return /* @__PURE__ */ jsx29("p", { "data-block-id": block.id, children: runs });
+      return /* @__PURE__ */ jsx34("p", { "data-block-id": block.id, children: runs });
     case "bulletList":
     case "orderedList": {
-      const items = (block.children ?? []).map((item, i) => /* @__PURE__ */ jsx29("li", { "data-block-id": item.id, children: /* @__PURE__ */ jsx29(Runs, { runs: item.inline, draw }) }, item.id ?? i));
-      return block.type === "bulletList" ? /* @__PURE__ */ jsx29("ul", { "data-block-id": block.id, children: items }) : /* @__PURE__ */ jsx29("ol", { "data-block-id": block.id, start: block.start, children: items });
+      const items = (block.children ?? []).map((item, i) => /* @__PURE__ */ jsx34("li", { "data-block-id": item.id, children: /* @__PURE__ */ jsx34(Runs, { runs: item.inline, draw }) }, item.id ?? i));
+      return block.type === "bulletList" ? /* @__PURE__ */ jsx34("ul", { "data-block-id": block.id, children: items }) : /* @__PURE__ */ jsx34("ol", { "data-block-id": block.id, start: block.start, children: items });
     }
     case "blockquote":
-      return /* @__PURE__ */ jsx29("blockquote", { "data-block-id": block.id, children: runs });
+      return /* @__PURE__ */ jsx34("blockquote", { "data-block-id": block.id, children: runs });
     case "codeBlock":
-      return /* @__PURE__ */ jsx29("pre", { "data-block-id": block.id, "data-language": block.language, children: /* @__PURE__ */ jsx29("code", { children: (block.inline ?? []).map((run) => run.text).join("") }) });
+      return /* @__PURE__ */ jsx34("pre", { "data-block-id": block.id, "data-language": block.language, children: /* @__PURE__ */ jsx34("code", { children: (block.inline ?? []).map((run) => run.text).join("") }) });
     case "horizontalRule":
-      return /* @__PURE__ */ jsx29("hr", { "data-block-id": block.id });
+      return /* @__PURE__ */ jsx34("hr", { "data-block-id": block.id });
     case "table": {
-      const table = /* @__PURE__ */ jsx29(Table, { block, draw });
+      const table = /* @__PURE__ */ jsx34(Table, { block, draw });
       if ((block.children ?? []).some((row) => named(row) === "tableRow")) return table;
       break;
     }
   }
-  return /* @__PURE__ */ jsxs21("div", { "data-block-id": block.id, "data-block-type": named(block), children: [
+  return /* @__PURE__ */ jsxs25("div", { "data-block-id": block.id, "data-block-type": named(block), children: [
     runs,
-    (block.children ?? []).map((child, i) => /* @__PURE__ */ jsx29(Block, { block: child, draw }, child.id ?? i))
+    (block.children ?? []).map((child, i) => /* @__PURE__ */ jsx34(Block, { block: child, draw }, child.id ?? i))
   ] });
 }
 function RichText({
@@ -2263,34 +2553,34 @@ function RichText({
 }) {
   if (blocks.length === 0) return null;
   const draw = { renderText, renderReference, renderBlock };
-  return /* @__PURE__ */ jsx29("div", { "data-rich-text": true, className: richTextClassName(size), children: blocks.map((block, i) => /* @__PURE__ */ jsx29(Block, { block, draw }, block.id ?? i)) });
+  return /* @__PURE__ */ jsx34("div", { "data-rich-text": true, className: richTextClassName(size), children: blocks.map((block, i) => /* @__PURE__ */ jsx34(Block, { block, draw }, block.id ?? i)) });
 }
 
 // src/IdentityMenu.tsx
-import { useCallback as useCallback2, useRef as useRef6 } from "react";
+import { useCallback as useCallback2, useRef as useRef8 } from "react";
 
 // src/Person.tsx
-import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs26 } 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__ */ jsxs22("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-      /* @__PURE__ */ jsx30(Avatar, { name, src: picture, size }),
-      /* @__PURE__ */ jsx30("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
+    /* @__PURE__ */ jsxs26("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx35(Avatar, { name, src: picture, size }),
+      /* @__PURE__ */ jsx35("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
   );
 }
 
 // src/PersonTrigger.tsx
-import { Button as BaseButton5 } from "@base-ui/react/button";
-import { IconChevronDown } from "@tabler/icons-react";
-import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Button as BaseButton7 } from "@base-ui/react/button";
+import { IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
+import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
-    return /* @__PURE__ */ jsx31(
-      BaseButton5,
+    return /* @__PURE__ */ jsx36(
+      BaseButton7,
       {
         type: "button",
         "aria-haspopup": "menu",
@@ -2298,14 +2588,14 @@ 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__ */ jsx31(Avatar, { name, src: picture, size: size ?? 36 })
+        children: /* @__PURE__ */ jsx36(Avatar, { name, src: picture, size: size ?? 36 })
       }
     );
   }
   return (
     // @estiva-escape(no-copied-look): N5 (Katerina, 24 September: record only): a row that fills on hover, as NavItem also does
-    /* @__PURE__ */ jsxs23(
-      BaseButton5,
+    /* @__PURE__ */ jsxs27(
+      BaseButton7,
       {
         type: "button",
         "aria-haspopup": "menu",
@@ -2322,8 +2612,8 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx31(Person, { name, picture, fallback, size: size ?? 22 }),
-          /* @__PURE__ */ jsx31(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+          /* @__PURE__ */ jsx36(Person, { name, picture, fallback, size: size ?? 22 }),
+          /* @__PURE__ */ jsx36(IconChevronDown2, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
         ]
       }
     )
@@ -2331,10 +2621,10 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
 }
 
 // src/IdentityMenu.tsx
-import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
 function IdentityPanel({ className, onClose = () => {
 }, ...rest }) {
-  return /* @__PURE__ */ jsx32(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx32(IdentityRows, { ...rest, onClose }) });
+  return /* @__PURE__ */ jsx37(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx37(IdentityRows, { ...rest, onClose }) });
 }
 function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, children }) {
   const act = (action) => () => {
@@ -2342,53 +2632,53 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
     action();
   };
   const appRows = typeof children === "function" ? children(onClose) : children;
-  return /* @__PURE__ */ jsxs24(Fragment8, { children: [
-    /* @__PURE__ */ jsxs24(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
-      /* @__PURE__ */ jsx32(MenuRow, { children: /* @__PURE__ */ jsx32("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx32(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
-      /* @__PURE__ */ jsx32(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__ */ jsxs24(Note, { children: [
+  return /* @__PURE__ */ jsxs28(Fragment9, { children: [
+    /* @__PURE__ */ jsxs28(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
+      /* @__PURE__ */ jsx37(MenuRow, { children: /* @__PURE__ */ jsx37("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx37(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
+      /* @__PURE__ */ jsx37(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__ */ jsxs28(Note, { children: [
         me.email,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
-    relayUrl && /* @__PURE__ */ jsxs24(Fragment8, { children: [
-      /* @__PURE__ */ jsx32(Divider, { className: "mx-0 my-2" }),
-      /* @__PURE__ */ jsxs24(MenuSection, { label: "Workspace", children: [
-        /* @__PURE__ */ jsx32(MenuRow, { children: /* @__PURE__ */ jsx32("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
-        /* @__PURE__ */ jsx32(Note, { children: "Everyone on this relay shares this workspace, in every app." })
+    relayUrl && /* @__PURE__ */ jsxs28(Fragment9, { children: [
+      /* @__PURE__ */ jsx37(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsxs28(MenuSection, { label: "Workspace", children: [
+        /* @__PURE__ */ jsx37(MenuRow, { children: /* @__PURE__ */ jsx37("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
+        /* @__PURE__ */ jsx37(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
-    appRows && /* @__PURE__ */ jsxs24(Fragment8, { children: [
-      /* @__PURE__ */ jsx32(Divider, { className: "mx-0 my-2" }),
+    appRows && /* @__PURE__ */ jsxs28(Fragment9, { children: [
+      /* @__PURE__ */ jsx37(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
-    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx32(Divider, { className: "mx-0 my-2" }) : null,
-    signedIn && idBase && /* @__PURE__ */ jsx32(
+    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx37(Divider, { className: "mx-0 my-2" }) : null,
+    signedIn && idBase && /* @__PURE__ */ jsx37(
       MenuItem,
       {
         label: "Edit your profile in Estiva ID",
         onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
       }
     ),
-    onCopyKey && /* @__PURE__ */ jsx32(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
-    idBase && onSignOut && /* @__PURE__ */ jsx32(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
+    onCopyKey && /* @__PURE__ */ jsx37(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
+    idBase && onSignOut && /* @__PURE__ */ jsx37(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
   ] });
 }
 function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
-  const actions = useRef6(null);
+  const actions = useRef8(null);
   const close = useCallback2(() => actions.current?.close(), []);
   return (
     /* The wrapper carries the caller's `className` and nothing else. It used
        to be `relative`, because the panel was positioned against it; the panel
        hangs from the trigger and portals now, so a positioning context here
        would only be a lie about what this box does. */
-    /* @__PURE__ */ jsx32("div", { className, children: /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx37("div", { className, children: /* @__PURE__ */ jsx37(
       Menu,
       {
         align: "right",
         actionsRef: actions,
         className: "w-72",
-        trigger: /* @__PURE__ */ jsx32(
+        trigger: /* @__PURE__ */ jsx37(
           PersonTrigger,
           {
             name: me.name,
@@ -2399,7 +2689,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
             "aria-label": compact ? "Account menu" : void 0
           }
         ),
-        children: /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx37(
           IdentityRows,
           {
             me,
@@ -2417,14 +2707,14 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
   );
 }
 function Note({ children }) {
-  return /* @__PURE__ */ jsx32("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
+  return /* @__PURE__ */ jsx37("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
 }
 
 // src/FilePicker.tsx
 import { forwardRef } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx38(
     "input",
     {
       ref,
@@ -2443,9 +2733,9 @@ var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
 });
 
 // src/Select.tsx
-import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
+import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
 import { Select as BaseSelect } from "@base-ui/react/select";
-import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs29 } 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 }) {
@@ -2453,7 +2743,7 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
   const held = Boolean(disabledReason);
   const trigger = (
     // @estiva-escape(no-copied-look): N1 (Katerina, 24 September: record only): Select's box drops the hover while held, so it cannot take FIELD_SHELL_CLASSES as it is
-    /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsxs29(
       BaseSelect.Trigger,
       {
         "aria-label": ariaLabel,
@@ -2486,21 +2776,21 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs25("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-            selected?.leading && /* @__PURE__ */ jsx34("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-            /* @__PURE__ */ jsx34(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+          /* @__PURE__ */ jsxs29("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+            selected?.leading && /* @__PURE__ */ jsx39("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+            /* @__PURE__ */ jsx39(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
           ] }),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx39(
             BaseSelect.Icon,
             {
-              render: /* @__PURE__ */ jsx34(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+              render: /* @__PURE__ */ jsx39(IconChevronDown3, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
             }
           )
         ]
       }
     )
   );
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs29(
     BaseSelect.Root,
     {
       value,
@@ -2512,8 +2802,8 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
       disabled: disabled && !held,
       modal: false,
       children: [
-        held ? /* @__PURE__ */ jsx34(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
-        /* @__PURE__ */ jsx34(BaseSelect.Portal, { children: /* @__PURE__ */ jsx34(
+        held ? /* @__PURE__ */ jsx39(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
+        /* @__PURE__ */ jsx39(BaseSelect.Portal, { children: /* @__PURE__ */ jsx39(
           BaseSelect.Positioner,
           {
             side: "bottom",
@@ -2522,25 +2812,25 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
             collisionPadding: VIEWPORT_PAD4,
             alignItemWithTrigger: false,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx34(
+            children: /* @__PURE__ */ jsx39(
               BaseSelect.Popup,
               {
-                render: /* @__PURE__ */ jsx34(MenuPanel, {}),
+                render: /* @__PURE__ */ jsx39(MenuPanel, {}),
                 className: "min-w-[var(--anchor-width)] p-0",
-                children: /* @__PURE__ */ jsx34(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col gap-0.5 p-2", children: options.map((option) => /* @__PURE__ */ jsxs25(
+                children: /* @__PURE__ */ jsx39(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col gap-0.5 p-2", children: options.map((option) => /* @__PURE__ */ jsxs29(
                   BaseSelect.Item,
                   {
                     value: option.value,
                     className: cn(menuItemClassName({ size: "default" }), "justify-between data-[selected]:font-medium"),
                     children: [
-                      /* @__PURE__ */ jsxs25("span", { className: "flex min-w-0 items-center gap-2", children: [
-                        option.leading && /* @__PURE__ */ jsx34("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                        /* @__PURE__ */ jsx34(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
+                      /* @__PURE__ */ jsxs29("span", { className: "flex min-w-0 items-center gap-2", children: [
+                        option.leading && /* @__PURE__ */ jsx39("span", { className: "flex shrink-0 items-center", children: option.leading }),
+                        /* @__PURE__ */ jsx39(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
                       ] }),
-                      /* @__PURE__ */ jsx34(
+                      /* @__PURE__ */ jsx39(
                         BaseSelect.ItemIndicator,
                         {
-                          render: /* @__PURE__ */ jsx34(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                          render: /* @__PURE__ */ jsx39(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
                         }
                       )
                     ]
@@ -2559,9 +2849,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 jsx35 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var TextInput = forwardRef2(function TextInput2({ className, type = "text", size = "default", ...props }, ref) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx40(
     Input,
     {
       ref,
@@ -2587,13 +2877,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 jsx36 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Textarea = forwardRef3(function Textarea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx41(
     BaseField3.Control,
     {
       ref,
-      render: /* @__PURE__ */ jsx36("textarea", {}),
+      render: /* @__PURE__ */ jsx41("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
@@ -2612,110 +2902,10 @@ var Textarea = forwardRef3(function Textarea2({ className, ...props }, ref) {
 });
 
 // src/ConfirmDialog.tsx
-import { useState as useState5 } from "react";
-
-// src/DialogShell.tsx
-import { useRef as useRef7 } from "react";
-import { Dialog as Dialog3 } from "@base-ui/react/dialog";
-import { AlertDialog } from "@base-ui/react/alert-dialog";
-import { IconX as IconX5 } from "@tabler/icons-react";
-
-// src/ContainerHeader.tsx
-import { IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
-import { Button as BaseButton6 } from "@base-ui/react/button";
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
-function ContainerHeader({ title, chevron = false, titleMenu, actions, className }) {
-  const text = typeof title === "string";
-  const name = /* @__PURE__ */ jsxs26("div", { className: cn("flex items-center gap-1", text ? "shrink-0" : "min-w-0 flex-1"), children: [
-    text ? /* @__PURE__ */ jsx37("span", { className: "whitespace-nowrap text-body-2-strong text-text-primary", children: title }) : /* @__PURE__ */ jsx37("div", { className: "min-w-0 flex-1", children: title }),
-    (chevron || titleMenu != null) && /* @__PURE__ */ jsx37(IconChevronDown3, { size: 12, stroke: 1.5, className: "shrink-0 text-text-secondary" })
-  ] });
-  return (
-    // The title 16px in, where the column's content starts (Katerina, 7 October; it was 20px).
-    // With a title menu the bar gives the button 6px of its left padding
-    // (pl-2.5 + the button's px-1.5 = pl-4): the words stay where a title's
-    // are, and the fill is inside the bar — a negative margin had it clipped
-    // (Katerina, 5 October).
-    /* @__PURE__ */ jsxs26("div", { className: cn("flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4", titleMenu != null ? "pl-2.5" : "pl-4", className), children: [
-      /* @__PURE__ */ jsx37("div", { className: cn("flex items-center gap-2 overflow-hidden", text ? "shrink-0" : "min-w-0 flex-1"), children: titleMenu != null ? /* @__PURE__ */ jsx37(
-        Menu,
-        {
-          trigger: /* @__PURE__ */ jsx37(BaseButton6, { type: "button", className: cn("flex min-w-0 items-center px-1.5 py-1", MENU_TRIGGER_CLASSES), children: name }),
-          children: titleMenu
-        }
-      ) : name }),
-      actions && /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center justify-end gap-3", children: /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center gap-1", children: actions }) })
-    ] })
-  );
-}
-
-// src/DialogShell.tsx
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
-function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, bodyMaxHeight, width = 502, alert = false }) {
-  const Parts = alert ? AlertDialog : Dialog3;
-  const popupRef = useRef7(null);
-  return /* @__PURE__ */ jsx38(
-    Parts.Root,
-    {
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) onClose();
-      },
-      children: /* @__PURE__ */ jsxs27(Parts.Portal, { children: [
-        /* @__PURE__ */ jsx38(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-        /* @__PURE__ */ jsx38("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs27(
-          Parts.Popup,
-          {
-            ref: popupRef,
-            initialFocus: popupRef,
-            "aria-label": headerContent != null ? title : void 0,
-            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__ */ jsx38(
-                ContainerHeader,
-                {
-                  className: "pl-5",
-                  title: headerContent ?? /* @__PURE__ */ jsx38(Parts.Title, { className: "block truncate text-h4 text-text-primary", render: /* @__PURE__ */ jsx38("span", {}), children: title }),
-                  actions: (
-                    /*
-                                    The ✕ IS the `Close` part now, rather than a button that calls
-                                    `onClose` beside one (stage 4, 2026-09-07). Stage 3 could not do
-                                    this: an `IconButton` carrying a `tooltip` returned the tooltip
-                                    wrapper `<div>` as its root, so the part composed onto the
-                                    wrapper and not the button. Porting Tooltip removed the wrapper
-                                    — the trigger is the button itself — and the composition works.
-                    
-                                    What it buys: the dialog closes through its own state machine,
-                                    so the ✕, Escape and the outside press are one path with one
-                                    reason attached, instead of one of the three going around.
-                                  */
-                    /* @__PURE__ */ jsx38(
-                      Parts.Close,
-                      {
-                        render: /* @__PURE__ */ jsx38(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx38(IconX5, { size: 16, stroke: 1.5 }) })
-                      }
-                    )
-                  )
-                }
-              ),
-              bodyMaxHeight ? (
-                // The line above the footer on a box of the shell's own, not pushed into ScrollArea (UIG-9).
-                /* @__PURE__ */ jsx38("div", { className: cn(footer != null && "border-b border-border-subtle"), children: /* @__PURE__ */ jsx38(ScrollArea, { viewportClassName: bodyMaxHeight, contentClassName: cn("pl-5 pr-4 py-4", bodyClassName), children }) })
-              ) : /* @__PURE__ */ jsx38("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
-              footer != null && /* @__PURE__ */ jsx38("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
-            ]
-          }
-        ) })
-      ] })
-    }
-  );
-}
-
-// src/ConfirmDialog.tsx
-import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
-  const [busy, setBusy] = useState5(false);
+  const [busy, setBusy] = useState6(false);
   const confirm = async () => {
     setBusy(true);
     try {
@@ -2725,32 +2915,32 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx42(
     DialogShell,
     {
       alert: true,
       title,
       onClose,
-      footer: /* @__PURE__ */ jsxs28(Fragment9, { children: [
-        /* @__PURE__ */ jsx39(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx39(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
+      footer: /* @__PURE__ */ jsxs30(Fragment10, { children: [
+        /* @__PURE__ */ jsx42(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx42(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
-      children: /* @__PURE__ */ jsx39("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
+      children: /* @__PURE__ */ jsx42("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
     }
   );
 }
 
 // src/EditableText.tsx
-import { useEffect as useEffect4, useRef as useRef8, useState as useState6 } from "react";
+import { useEffect as useEffect5, useRef as useRef9, useState as useState7 } from "react";
 import { Field as BaseField4 } from "@base-ui/react/field";
 import { Input as Input2 } from "@base-ui/react/input";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
-  const [editing, setEditing] = useState6(false);
-  const [draft, setDraft] = useState6(value);
-  const [busy, setBusy] = useState6(false);
-  const fieldRef = useRef8(null);
-  useEffect4(() => {
+  const [editing, setEditing] = useState7(false);
+  const [draft, setDraft] = useState7(value);
+  const [busy, setBusy] = useState7(false);
+  const fieldRef = useRef9(null);
+  useEffect5(() => {
     if (editing) {
       fieldRef.current?.focus();
       fieldRef.current?.select();
@@ -2802,7 +2992,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__ */ jsx40(
+      /* @__PURE__ */ jsx43(
         "div",
         {
           className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
@@ -2812,11 +3002,11 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     );
   }
   if (editing) {
-    return multiline ? /* @__PURE__ */ jsx40(
+    return multiline ? /* @__PURE__ */ jsx43(
       BaseField4.Control,
       {
         ref: fieldRef,
-        render: /* @__PURE__ */ jsx40("textarea", { rows: 4 }),
+        render: /* @__PURE__ */ jsx43("textarea", { rows: 4 }),
         "aria-label": label,
         value: draft,
         disabled: busy,
@@ -2825,7 +3015,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         onBlur: () => void commit(),
         className: fieldClass
       }
-    ) : /* @__PURE__ */ jsx40(
+    ) : /* @__PURE__ */ jsx43(
       Input2,
       {
         ref: fieldRef,
@@ -2839,7 +3029,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
       }
     );
   }
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx43(
     "button",
     {
       type: "button",
@@ -2859,7 +3049,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 jsx41 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var ErrorBoundary = class extends Component {
   state = { hasError: false };
   static getDerivedStateFromError() {
@@ -2870,22 +3060,22 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (!this.state.hasError) return this.props.children;
-    const message = /* @__PURE__ */ jsx41(
+    const message = /* @__PURE__ */ jsx44(
       EmptyState,
       {
-        icon: /* @__PURE__ */ jsx41(IconAlertTriangle2, { size: 16, stroke: 1.5 }),
+        icon: /* @__PURE__ */ jsx44(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__ */ jsx41("div", { className: this.props.fallbackClassName, children: message }) : message;
+    return this.props.fallbackClassName ? /* @__PURE__ */ jsx44("div", { className: this.props.fallbackClassName, children: message }) : message;
   }
 };
 
 // src/ProgressBar.tsx
 import { Progress } from "@base-ui/react/progress";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx45 } 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.
@@ -2898,17 +3088,17 @@ var INDICATOR_CLASSES = {
 function ProgressBar({ value, max, label, variant = "default", className }) {
   return (
     // `max={0}` needs no guard: Base UI reads the 0/0 share as an empty bar.
-    /* @__PURE__ */ jsx42(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx42(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx42(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
+    /* @__PURE__ */ jsx45(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx45(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx45(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
   );
 }
 
 // src/Breadcrumb.tsx
-import { Fragment as Fragment10, useCallback as useCallback3, useLayoutEffect as useLayoutEffect4, useRef as useRef9, useState as useState7 } from "react";
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment11, useCallback as useCallback3, useLayoutEffect as useLayoutEffect4, useRef as useRef10, useState as useState8 } from "react";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
-  const navRef = useRef9(null);
-  const labelRefs = useRef9([]);
-  const [truncated, setTruncated] = useState7(/* @__PURE__ */ new Set());
+  const navRef = useRef10(null);
+  const labelRefs = useRef10([]);
+  const [truncated, setTruncated] = useState8(/* @__PURE__ */ new Set());
   const measure = useCallback3(() => {
     const next = /* @__PURE__ */ new Set();
     labelRefs.current.forEach((el, index) => {
@@ -2924,7 +3114,7 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx43("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__ */ jsx46("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(
@@ -2945,34 +3135,34 @@ 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__ */ jsx43("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx43(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
-    ) : /* @__PURE__ */ jsx43("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
-    return /* @__PURE__ */ jsxs29(Fragment10, { children: [
-      index > 0 && /* @__PURE__ */ jsx43("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
-      item.icon && /* @__PURE__ */ jsx43("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
+      /* @__PURE__ */ jsx46("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx46(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
+    ) : /* @__PURE__ */ jsx46("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+    return /* @__PURE__ */ jsxs31(Fragment11, { children: [
+      index > 0 && /* @__PURE__ */ jsx46("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+      item.icon && /* @__PURE__ */ jsx46("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__ */ jsx43(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+        /* @__PURE__ */ jsx46(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
       ) : crumb
     ] }, `${item.label}-${index}`);
   }) });
 }
 
 // src/NavItem.tsx
-import { useId, useState as useState8 } from "react";
+import { useId as useId2, useState as useState9 } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
 import { IconAlertSquareRounded, IconChevronRight as IconChevronRight2, IconDotsVertical } from "@tabler/icons-react";
 
 // src/UnreadDot.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function UnreadDot({ className }) {
-  return /* @__PURE__ */ jsx44("div", { className: cn("flex h-6 w-6 shrink-0 items-center justify-center", className), "data-unread": true, children: /* @__PURE__ */ jsx44("div", { className: "h-1.5 w-1.5 rounded-full bg-accent-primary" }) });
+  return /* @__PURE__ */ jsx47("div", { className: cn("flex h-6 w-6 shrink-0 items-center justify-center", className), "data-unread": true, children: /* @__PURE__ */ jsx47("div", { className: "h-1.5 w-1.5 rounded-full bg-accent-primary" }) });
 }
 
 // src/NavItem.tsx
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 function NavItem({
   label,
   href,
@@ -2990,10 +3180,12 @@ function NavItem({
   open: openProp,
   onOpenChange,
   className,
+  onClick,
   ...props
 }) {
-  const [openState, setOpenState] = useState8(defaultOpen);
-  const panelId = useId();
+  const inApp = useInAppClick(href, onClick);
+  const [openState, setOpenState] = useState9(defaultOpen);
+  const panelId = useId2();
   const hasRows = children != null && children !== false;
   const open = openProp ?? openState;
   const setOpen = (next) => {
@@ -3001,9 +3193,9 @@ function NavItem({
     onOpenChange?.(next);
   };
   const besides = menu != null || hasRows;
-  const mark = unread ? urgent ? /* @__PURE__ */ jsx45(UrgentMark, {}) : /* @__PURE__ */ jsx45(UnreadDot, {}) : null;
+  const mark = unread ? urgent ? /* @__PURE__ */ jsx48(UrgentMark, {}) : /* @__PURE__ */ jsx48(UnreadDot, {}) : null;
   const stepsAside = menu != null && "transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0 [@media(hover:none)]:opacity-0";
-  const row = /* @__PURE__ */ jsxs30(
+  const row = /* @__PURE__ */ jsxs32(
     "a",
     {
       href,
@@ -3023,8 +3215,9 @@ function NavItem({
         className
       ),
       ...props,
+      onClick: inApp,
       children: [
-        (icon || hasRows) && /* @__PURE__ */ jsx45(
+        (icon || hasRows) && /* @__PURE__ */ jsx48(
           "span",
           {
             className: cn(
@@ -3035,10 +3228,10 @@ function NavItem({
             children: icon
           }
         ),
-        /* @__PURE__ */ jsx45("span", { className: cn("flex-1 truncate", unread && "font-medium"), children: label }),
+        /* @__PURE__ */ jsx48("span", { className: cn("flex-1 truncate", unread && "font-medium"), children: label }),
         hint != null && // Takes room only while it shows, so the label gives way to it.
-        /* @__PURE__ */ jsx45("span", { className: "hidden shrink-0 items-center group-hover/nav:flex group-has-[:focus-visible]/nav:flex", children: hint }),
-        count ? /* @__PURE__ */ jsx45(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx48("span", { className: "hidden shrink-0 items-center group-hover/nav:flex group-has-[:focus-visible]/nav:flex", children: hint }),
+        count ? /* @__PURE__ */ jsx48(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx48(
           "span",
           {
             className: cn(
@@ -3054,7 +3247,7 @@ function NavItem({
           // `-mr-1`: the 24px slot's dot then sits on the axis of a count and
           // of the ⋮ (8px from the edge to the 16px box), one column with a
           // folder heading's dot and ⋮ (Katerina, 5 October).
-          /* @__PURE__ */ jsx45("span", { className: cn("-mr-1 flex shrink-0", stepsAside), children: mark })
+          /* @__PURE__ */ jsx48("span", { className: cn("-mr-1 flex shrink-0", stepsAside), children: mark })
         ) : menu != null && !count ? (
           // Nothing at the right, but a menu: no room is kept at rest, so the
           // label has the row's whole width; while the ⋮ shows, its 24px slot
@@ -3062,18 +3255,18 @@ function NavItem({
           // `-mr-1`: the ⋮ sits at `right-1`, 4px into the row's padding, so the
           // slot does too — at the padding's edge it kept 4px the ⋮ never
           // covers, and the label stopped 12px short of the button, not 8.
-          /* @__PURE__ */ jsx45("span", { "aria-hidden": "true", className: "-mr-1 hidden w-6 shrink-0 group-hover/nav:block group-has-[:focus-visible]/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block [@media(hover:none)]:block" })
+          /* @__PURE__ */ jsx48("span", { "aria-hidden": "true", className: "-mr-1 hidden w-6 shrink-0 group-hover/nav:block group-has-[:focus-visible]/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block [@media(hover:none)]:block" })
         ) : null
       ]
     }
   );
   if (!besides && hint == null) return row;
   const name = menuLabel ?? `More options for ${label}`;
-  const line = /* @__PURE__ */ jsxs30("div", { className: "group/nav relative shrink-0", children: [
+  const line = /* @__PURE__ */ jsxs32("div", { className: "group/nav relative shrink-0", children: [
     row,
     hasRows && // `left-1`: the 24px button's 16px arrow then sits where the icon
     // sits (the row's px-2), so the icon turns into the arrow in place.
-    /* @__PURE__ */ jsx45("div", { className: "absolute inset-y-0 left-1 flex items-center opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100", children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx48("div", { className: "absolute inset-y-0 left-1 flex items-center opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100", children: /* @__PURE__ */ jsx48(
       IconButton,
       {
         tooltip: open ? "Collapse" : "Expand",
@@ -3081,7 +3274,7 @@ function NavItem({
         "aria-expanded": open,
         "aria-controls": panelId,
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx45(IconChevronRight2, { size: 16, stroke: 1.5, className: cn("transition-transform duration-150", open && "rotate-90") })
+        children: /* @__PURE__ */ jsx48(IconChevronRight2, { size: 16, stroke: 1.5, className: cn("transition-transform duration-150", open && "rotate-90") })
       }
     ) }),
     menu != null && // `right-1`: the 24px button's 16px icon ends 8px from the row's
@@ -3092,61 +3285,61 @@ function NavItem({
     // right of the slot's centre.
     // On a screen with no hover it always shows: nothing there can point
     // at the row, and the menu has no other way in.
-    /* @__PURE__ */ jsx45("div", { "data-nav-menu": true, className: cn("absolute inset-y-0 right-1 flex items-center", "opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100"), children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx48("div", { "data-nav-menu": true, className: cn("absolute inset-y-0 right-1 flex items-center", "opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100"), children: /* @__PURE__ */ jsx48(
       Menu,
       {
         align: "right",
-        trigger: /* @__PURE__ */ jsx45(IconButton, { tooltip: "More options", "aria-label": name, children: /* @__PURE__ */ jsx45(IconDotsVertical, { size: 16, stroke: 1.5 }) }),
+        trigger: /* @__PURE__ */ jsx48(IconButton, { tooltip: "More options", "aria-label": name, children: /* @__PURE__ */ jsx48(IconDotsVertical, { size: 16, stroke: 1.5 }) }),
         children: menu
       }
     ) })
   ] });
   if (!hasRows) return line;
-  return /* @__PURE__ */ jsxs30(Collapsible.Root, { open, onOpenChange: setOpen, className: "flex shrink-0 flex-col", children: [
+  return /* @__PURE__ */ jsxs32(Collapsible.Root, { open, onOpenChange: setOpen, className: "flex shrink-0 flex-col", children: [
     line,
-    /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx48(
       Collapsible.Panel,
       {
         id: panelId,
         hiddenUntilFound: true,
         className: COLLAPSIBLE_PANEL_CLASSES,
-        children: /* @__PURE__ */ jsx45("div", { className: "flex flex-col gap-0.5 pt-0.5 pl-6", children })
+        children: /* @__PURE__ */ jsx48("div", { className: "flex flex-col gap-0.5 pt-0.5 pl-6", children })
       }
     )
   ] });
 }
 function UrgentMark() {
-  return /* @__PURE__ */ jsx45("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center", "data-urgent": true, children: /* @__PURE__ */ jsx45("div", { className: "flex items-center rounded-full bg-warning-muted p-0.5 signal:shadow-glow-warning", children: /* @__PURE__ */ jsx45(IconAlertSquareRounded, { size: 12, stroke: 2.5, className: "text-warning-default" }) }) });
+  return /* @__PURE__ */ jsx48("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center", "data-urgent": true, children: /* @__PURE__ */ jsx48("div", { className: "flex items-center rounded-full bg-warning-muted p-0.5 signal:shadow-glow-warning", children: /* @__PURE__ */ jsx48(IconAlertSquareRounded, { size: 12, stroke: 2.5, className: "text-warning-default" }) }) });
 }
 
 // src/NavTree.tsx
-import { useEffect as useEffect5, useRef as useRef10 } from "react";
+import { useEffect as useEffect6, useRef as useRef11 } from "react";
 
 // src/CollapsibleSection.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { Collapsible as Collapsible2 } from "@base-ui/react/collapsible";
 
 // src/SectionHeader.tsx
 import { IconChevronRight as IconChevronRight3, IconDotsVertical as IconDotsVertical2 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment11, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, icon, isExpanded = true, onToggle, trailing, count, actions, menu, menuLabel, showActions = "hover", hover = "fill", look = "heading", render, className }) {
   const row = look === "row";
   const acts = actions && actions.length > 0 || menu != null;
   const trailingClasses = !acts ? "has-[[data-unread]]:-mr-1" : showActions === "hover" && "has-[[data-unread]]:pointer-events-none has-[[data-unread]]:absolute has-[[data-unread]]:inset-y-0 has-[[data-unread]]:right-1 has-[[data-unread]]:w-6 has-[[data-unread]]:justify-center has-[[data-unread]]:transition-opacity group-hover:has-[[data-unread]]:opacity-0 group-has-[:focus-visible]:has-[[data-unread]]:opacity-0 group-has-[[data-section-menu]_[aria-expanded=true]]:has-[[data-unread]]:opacity-0 [@media(hover:none)]:has-[[data-unread]]:opacity-0";
   const reveal = showActions === "hover" && "opacity-0 transition-opacity group-hover:opacity-100 group-has-[:focus-visible]:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100";
   const titleElement = useRender({
-    render: render ?? (chevron ? /* @__PURE__ */ jsx46("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx46("span", {})),
+    render: render ?? (chevron ? /* @__PURE__ */ jsx49("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx49("span", {})),
     props: {
       // `text-left`: a button centres its text. `h-full` and `flex-1`: the
       // whole row up to the actions is the hit target, as it was when the
       // row itself carried the click.
       // An icon is a row's: NavItem's 8px after it.
       className: cn("flex h-full min-w-0 flex-1 items-center text-left", row || chevron || icon != null ? "gap-2" : "gap-1"),
-      children: /* @__PURE__ */ jsxs31(Fragment11, { children: [
-        icon != null ? /* @__PURE__ */ jsxs31("span", { className: "relative flex size-4 shrink-0 items-center justify-center text-text-secondary", children: [
-          /* @__PURE__ */ jsx46("span", { className: cn("flex", chevron && "transition-opacity group-hover:opacity-0 group-has-[:focus-visible]:opacity-0"), children: icon }),
-          chevron && /* @__PURE__ */ jsx46(
+      children: /* @__PURE__ */ jsxs33(Fragment12, { children: [
+        icon != null ? /* @__PURE__ */ jsxs33("span", { className: "relative flex size-4 shrink-0 items-center justify-center text-text-secondary", children: [
+          /* @__PURE__ */ jsx49("span", { className: cn("flex", chevron && "transition-opacity group-hover:opacity-0 group-has-[:focus-visible]:opacity-0"), children: icon }),
+          chevron && /* @__PURE__ */ jsx49(
             IconChevronRight3,
             {
               size: 16,
@@ -3154,7 +3347,7 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
               className: cn("absolute opacity-0 transition-[opacity,transform] duration-150 group-hover:opacity-100 group-has-[:focus-visible]:opacity-100", isExpanded && "rotate-90")
             }
           )
-        ] }) : chevron && /* @__PURE__ */ jsx46(
+        ] }) : chevron && /* @__PURE__ */ jsx49(
           IconChevronRight3,
           {
             size: 16,
@@ -3162,15 +3355,15 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
             className: cn("shrink-0 transition-transform duration-150", !row && "text-text-secondary", isExpanded && "rotate-90")
           }
         ),
-        look === "quiet" ? /* @__PURE__ */ jsx46("span", { className: "min-w-0 truncate text-caption text-text-muted", children: title }) : row ? (
+        look === "quiet" ? /* @__PURE__ */ jsx49("span", { className: "min-w-0 truncate text-caption text-text-muted", children: title }) : row ? (
           // A row's words: NavItem's size and colour, brightening under the pointer with the row.
-          /* @__PURE__ */ jsx46("span", { className: "min-w-0 flex-1 truncate text-body-2", children: title })
-        ) : /* @__PURE__ */ jsx46(SectionLabel, { folds: chevron, children: title }),
-        count != null && /* @__PURE__ */ jsx46("span", { className: cn("ml-1 shrink-0", COUNT_TEXT_CLASSES), children: count })
+          /* @__PURE__ */ jsx49("span", { className: "min-w-0 flex-1 truncate text-body-2", children: title })
+        ) : /* @__PURE__ */ jsx49(SectionLabel, { folds: chevron, children: title }),
+        count != null && /* @__PURE__ */ jsx49("span", { className: cn("ml-1 shrink-0", COUNT_TEXT_CLASSES), children: count })
       ] })
     }
   });
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: cn(
@@ -3191,18 +3384,18 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
       ),
       children: [
         titleElement,
-        trailing != null && /* @__PURE__ */ jsx46("div", { className: cn("flex shrink-0 items-center", trailingClasses), children: trailing }),
-        acts && /* @__PURE__ */ jsx46(
+        trailing != null && /* @__PURE__ */ jsx49("div", { className: cn("flex shrink-0 items-center", trailingClasses), children: trailing }),
+        acts && /* @__PURE__ */ jsx49(
           "div",
           {
             className: "-mr-1 flex shrink-0 items-center",
-            children: /* @__PURE__ */ jsxs31("div", { className: cn("flex items-center gap-1", reveal), children: [
-              actions?.map((action) => /* @__PURE__ */ jsx46(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip)),
-              menu != null && /* @__PURE__ */ jsx46("div", { "data-section-menu": true, className: "flex items-center", children: /* @__PURE__ */ jsx46(
+            children: /* @__PURE__ */ jsxs33("div", { className: cn("flex items-center gap-1", reveal), children: [
+              actions?.map((action) => /* @__PURE__ */ jsx49(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip)),
+              menu != null && /* @__PURE__ */ jsx49("div", { "data-section-menu": true, className: "flex items-center", children: /* @__PURE__ */ jsx49(
                 Menu,
                 {
                   align: "right",
-                  trigger: /* @__PURE__ */ jsx46(IconButton, { tooltip: "More options", "aria-label": menuLabel ?? `More options for ${title}`, children: /* @__PURE__ */ jsx46(IconDotsVertical2, { size: 16, stroke: 1.5 }) }),
+                  trigger: /* @__PURE__ */ jsx49(IconButton, { tooltip: "More options", "aria-label": menuLabel ?? `More options for ${title}`, children: /* @__PURE__ */ jsx49(IconDotsVertical2, { size: 16, stroke: 1.5 }) }),
                   children: menu
                 }
               ) })
@@ -3215,7 +3408,7 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
 }
 
 // src/CollapsibleSection.tsx
-import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -3235,38 +3428,38 @@ function writeStored(key, open) {
   }
 }
 function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, icon, trailing, actions, menu, menuLabel, showActions, look = "heading", indent = false, children, className, contentClassName }) {
-  const [openState, setOpenState] = useState9(() => readStored(storageKey) ?? defaultOpen);
+  const [openState, setOpenState] = useState10(() => readStored(storageKey) ?? defaultOpen);
   const open = openProp ?? openState;
   const setOpen = (next) => {
     setOpenState(next);
     writeStored(storageKey, next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs32(Collapsible2.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx47(SectionHeader, { title, chevron: true, icon, isExpanded: open, trailing, actions, menu, menuLabel, showActions, look, className: "shrink-0", render: /* @__PURE__ */ jsx47(Collapsible2.Trigger, {}) }),
-    /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs34(Collapsible2.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx50(SectionHeader, { title, chevron: true, icon, isExpanded: open, trailing, actions, menu, menuLabel, showActions, look, className: "shrink-0", render: /* @__PURE__ */ jsx50(Collapsible2.Trigger, {}) }),
+    /* @__PURE__ */ jsx50(
       Collapsible2.Panel,
       {
         hiddenUntilFound: true,
         className: COLLAPSIBLE_PANEL_CLASSES,
-        children: /* @__PURE__ */ jsx47("div", { className: cn("flex flex-col pt-0.5", (look === "row" || indent) && "pl-6", contentClassName), children })
+        children: /* @__PURE__ */ jsx50("div", { className: cn("flex flex-col pt-0.5", (look === "row" || indent) && "pl-6", contentClassName), children })
       }
     )
   ] });
 }
 
 // src/NavTree.tsx
-import { Fragment as Fragment12, jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
 var NAV_TREE_INTENT_MS = 150;
 function holds(nodes, id) {
   return !!nodes && id !== void 0 && nodes.some((node) => node.id === id || holds(node.children ?? null, id));
 }
 function Line({ message }) {
-  return /* @__PURE__ */ jsx48("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx48(EmptyState, { scope: "section", message }) });
+  return /* @__PURE__ */ jsx51("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx51(EmptyState, { scope: "section", message }) });
 }
 function Row({ node, selected, onSelect }) {
-  const under = node.childrenMessage !== void 0 ? /* @__PURE__ */ jsx48(Line, { message: node.childrenMessage }) : node.children?.length ? node.children.map((child) => /* @__PURE__ */ jsx48(Row, { node: child, selected, onSelect }, child.id)) : node.children === null || node.hasChildren && node.children === void 0 ? /* @__PURE__ */ jsx48(SkeletonList, { rows: 2 }) : void 0;
-  return /* @__PURE__ */ jsx48(
+  const under = node.childrenMessage !== void 0 ? /* @__PURE__ */ jsx51(Line, { message: node.childrenMessage }) : node.children?.length ? node.children.map((child) => /* @__PURE__ */ jsx51(Row, { node: child, selected, onSelect }, child.id)) : node.children === null || node.hasChildren && node.children === void 0 ? /* @__PURE__ */ jsx51(SkeletonList, { rows: 2 }) : void 0;
+  return /* @__PURE__ */ jsx51(
     NavItem,
     {
       href: node.href,
@@ -3288,7 +3481,7 @@ function Row({ node, selected, onSelect }) {
   );
 }
 function Group({ group, selected, onSelect, storageKey }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx51(
     NavTreeSection,
     {
       id: group.id,
@@ -3304,15 +3497,15 @@ function Group({ group, selected, onSelect, storageKey }) {
       onOpenChange: group.onOpenChange,
       storageKey: storageKey ? `${storageKey}.${group.id}` : void 0,
       onIntent: group.onIntent,
-      children: group.nodes?.map((node) => /* @__PURE__ */ jsx48(Row, { node, selected, onSelect }, node.id))
+      children: group.nodes?.map((node) => /* @__PURE__ */ jsx51(Row, { node, selected, onSelect }, node.id))
     }
   );
 }
 function NavTreeSection({ id, title, message, loading = false, trailing, actions, menu, icon, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }) {
-  const timer = useRef10(void 0);
-  useEffect5(() => () => clearTimeout(timer.current), []);
+  const timer = useRef11(void 0);
+  useEffect6(() => () => clearTimeout(timer.current), []);
   const intent = onIntent;
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       className: "shrink-0 [&+&]:mt-1",
@@ -3323,7 +3516,7 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
       } : void 0,
       onPointerLeave: intent ? () => clearTimeout(timer.current) : void 0,
       onFocus: intent,
-      children: /* @__PURE__ */ jsx48(
+      children: /* @__PURE__ */ jsx51(
         CollapsibleSection,
         {
           title,
@@ -3338,35 +3531,35 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
           icon,
           className: "shrink-0",
           contentClassName: "gap-0.5",
-          children: message !== void 0 ? /* @__PURE__ */ jsx48(Line, { message }) : loading ? /* @__PURE__ */ jsx48(SkeletonList, { rows: 3 }) : children
+          children: message !== void 0 ? /* @__PURE__ */ jsx51(Line, { message }) : loading ? /* @__PURE__ */ jsx51(SkeletonList, { rows: 3 }) : children
         }
       )
     }
   );
 }
 function NavTree({ title, titleActions, groups, children, selected, onSelect, emptyMessage = "", storageKey }) {
-  return /* @__PURE__ */ jsxs33(Fragment12, { children: [
-    title && /* @__PURE__ */ jsx48(SectionHeader, { title, look: "quiet", showActions: "always", actions: titleActions, className: "mt-4 shrink-0" }),
-    groups === void 0 ? children : groups === null ? /* @__PURE__ */ jsx48(SkeletonList, { rows: 5 }) : groups.length === 0 ? (
+  return /* @__PURE__ */ jsxs35(Fragment13, { children: [
+    title && /* @__PURE__ */ jsx51(SectionHeader, { title, look: "quiet", showActions: "always", actions: titleActions, className: "mt-4 shrink-0" }),
+    groups === void 0 ? children : groups === null ? /* @__PURE__ */ jsx51(SkeletonList, { rows: 5 }) : groups.length === 0 ? (
       // No words, no line: an app that says nothing when it has no groups.
-      emptyMessage ? /* @__PURE__ */ jsx48(Line, { message: emptyMessage }) : null
-    ) : groups.map((group) => /* @__PURE__ */ jsx48(Group, { group, selected, onSelect, storageKey }, group.id))
+      emptyMessage ? /* @__PURE__ */ jsx51(Line, { message: emptyMessage }) : null
+    ) : groups.map((group) => /* @__PURE__ */ jsx51(Group, { group, selected, onSelect, storageKey }, group.id))
   ] });
 }
 
 // src/Popover.tsx
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
 var GAP5 = 4;
 var VIEWPORT_PAD5 = 8;
 function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className, contentClassName, maxHeight }) {
-  const anchorTarget = useMemo3(() => {
+  const anchorTarget = useMemo4(() => {
     if (!anchor) return void 0;
     if (anchor instanceof Element) return anchor;
     return { getBoundingClientRect: () => anchor };
   }, [anchor]);
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs36(
     BasePopover.Root,
     {
       open,
@@ -3374,8 +3567,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
       actionsRef,
       modal: false,
       children: [
-        trigger && /* @__PURE__ */ jsx49(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
-        /* @__PURE__ */ jsx49(BasePopover.Portal, { children: /* @__PURE__ */ jsx49(
+        trigger && /* @__PURE__ */ jsx52(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
+        /* @__PURE__ */ jsx52(BasePopover.Portal, { children: /* @__PURE__ */ jsx52(
           BasePopover.Positioner,
           {
             anchor: anchorTarget,
@@ -3384,20 +3577,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__ */ jsx49(
+            children: /* @__PURE__ */ jsx52(
               BasePopover.Popup,
               {
                 "aria-label": ariaLabel,
                 initialFocus: trigger ? void 0 : false,
                 finalFocus,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx49(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx49(
+                render: /* @__PURE__ */ jsx52(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx52(
                   ScrollArea,
                   {
                     viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
                     contentClassName: cn("flex flex-col p-2", contentClassName),
-                    children: /* @__PURE__ */ jsx49(DividerInPanel.Provider, { value: true, children })
+                    children: /* @__PURE__ */ jsx52(DividerInPanel.Provider, { value: true, children })
                   }
                 )
               }
@@ -3410,18 +3603,18 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
 }
 
 // src/SuggestionMenu.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useId as useId2, useImperativeHandle, useMemo as useMemo4, useRef as useRef11, useState as useState10 } from "react";
-import { jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useEffect as useEffect7, useId as useId3, useImperativeHandle, useMemo as useMemo5, useRef as useRef12, useState as useState11 } from "react";
+import { jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
 function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sections, itemKey, row, onSelect, handle }) {
-  const shown = useMemo4(() => sections.filter((section) => section.items.length > 0), [sections]);
-  const items = useMemo4(() => shown.flatMap((section) => section.items), [shown]);
+  const shown = useMemo5(() => sections.filter((section) => section.items.length > 0), [sections]);
+  const items = useMemo5(() => shown.flatMap((section) => section.items), [shown]);
   const keys = items.map(itemKey).join("\n");
-  const [highlight, setHighlight] = useState10(0);
-  const base = useId2();
+  const [highlight, setHighlight] = useState11(0);
+  const base = useId3();
   const listboxId = `${base}-list`;
-  const chosen = useRef11(null);
-  useEffect6(() => void (chosen.current = highlight > 0 ? keys.split("\n")[highlight] ?? null : null), [highlight]);
-  useEffect6(() => {
+  const chosen = useRef12(null);
+  useEffect7(() => void (chosen.current = highlight > 0 ? keys.split("\n")[highlight] ?? null : null), [highlight]);
+  useEffect7(() => {
     const at = chosen.current ? keys.split("\n").indexOf(chosen.current) : -1;
     setHighlight(at > 0 ? at : 0);
   }, [keys]);
@@ -3446,7 +3639,7 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
     }
   }), [items, highlight, onSelect]);
   const open = rect !== null && items.length > 0;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!editorElement || !open) return;
     editorElement.setAttribute("aria-autocomplete", "list");
     editorElement.setAttribute("aria-haspopup", "listbox");
@@ -3455,7 +3648,7 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
       for (const name of ["aria-autocomplete", "aria-haspopup", "aria-controls", "aria-activedescendant"]) editorElement.removeAttribute(name);
     };
   }, [editorElement, open, listboxId]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!editorElement || !open) return;
     editorElement.setAttribute("aria-activedescendant", `${base}-${highlight}`);
   }, [editorElement, open, base, highlight]);
@@ -3476,7 +3669,7 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
     const { label, description, leading, shortcut, hint, size } = row(item);
     return (
       // A row of a list the editor drives from its caret: focus stays in the text, so the row is no Tab stop.
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx53(
         MenuItem,
         {
           role: "option",
@@ -3503,21 +3696,21 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
   };
   return (
     // finalFocus={false}: focus never left the text, and a list that closes because focus moved elsewhere must not pull it back (71a4577b).
-    /* @__PURE__ */ jsx50(Popover, { anchor: rect, open: rect !== null, side: "top", align: "left", className: width, maxHeight, ariaLabel, finalFocus: false, children: /* @__PURE__ */ jsx50("div", { ref: keepFocus, id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "flex flex-col gap-0.5", children: shown.map((section, i) => /* @__PURE__ */ jsxs35("div", { className: "contents", children: [
-      i > 0 && /* @__PURE__ */ jsx50(MenuSeparator, {}),
-      section.label ? /* @__PURE__ */ jsx50("div", { role: "group", "aria-label": section.label, children: /* @__PURE__ */ jsx50(MenuSection, { label: section.label, className: section.className, children: section.items.map(drawRow) }) }) : section.items.map(drawRow)
+    /* @__PURE__ */ jsx53(Popover, { anchor: rect, open: rect !== null, side: "top", align: "left", className: width, maxHeight, ariaLabel, finalFocus: false, children: /* @__PURE__ */ jsx53("div", { ref: keepFocus, id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "flex flex-col gap-0.5", children: shown.map((section, i) => /* @__PURE__ */ jsxs37("div", { className: "contents", children: [
+      i > 0 && /* @__PURE__ */ jsx53(MenuSeparator, {}),
+      section.label ? /* @__PURE__ */ jsx53("div", { role: "group", "aria-label": section.label, children: /* @__PURE__ */ jsx53(MenuSection, { label: section.label, className: section.className, children: section.items.map(drawRow) }) }) : section.items.map(drawRow)
     ] }, section.label ?? i)) }) })
   );
 }
 
 // src/ShowMore.tsx
-import { useLayoutEffect as useLayoutEffect5, useRef as useRef12, useState as useState11 } from "react";
-import { jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef13, useState as useState12 } from "react";
+import { jsx as jsx54, jsxs as jsxs38 } from "react/jsx-runtime";
 var FADE_CLASSES = { surface: "from-bg-surface", inset: "from-bg-inset" };
 function ShowMore({ children, maxHeight = 96, surface = "surface", className }) {
-  const box = useRef12(null);
-  const [open, setOpen] = useState11(false);
-  const [overflows, setOverflows] = useState11(false);
+  const box = useRef13(null);
+  const [open, setOpen] = useState12(false);
+  const [overflows, setOverflows] = useState12(false);
   useLayoutEffect5(() => {
     const el = box.current;
     if (!el) return;
@@ -3529,21 +3722,21 @@ function ShowMore({ children, maxHeight = 96, surface = "surface", className })
     return () => observer.disconnect();
   }, [maxHeight]);
   const cut = overflows && !open;
-  return /* @__PURE__ */ jsxs36("div", { className: cn("flex flex-col items-start", className), children: [
-    /* @__PURE__ */ jsxs36("div", { ref: box, className: cn("relative w-full", cut && "overflow-hidden"), style: cut ? { maxHeight } : void 0, onFocus: cut ? () => setOpen(true) : void 0, children: [
+  return /* @__PURE__ */ jsxs38("div", { className: cn("flex flex-col items-start", className), children: [
+    /* @__PURE__ */ jsxs38("div", { ref: box, className: cn("relative w-full", cut && "overflow-hidden"), style: cut ? { maxHeight } : void 0, onFocus: cut ? () => setOpen(true) : void 0, children: [
       children,
-      cut && /* @__PURE__ */ jsx51("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent", FADE_CLASSES[surface]) })
+      cut && /* @__PURE__ */ jsx54("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent", FADE_CLASSES[surface]) })
     ] }),
     overflows && // `-ml-1.5`: the small button's own 6px inset, so its words start where the content's do.
-    /* @__PURE__ */ jsx51(Button, { variant: "muted", size: "small", className: "-ml-1.5 mt-1", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: open ? "Show less" : "Show more" })
+    /* @__PURE__ */ jsx54(Button, { variant: "muted", size: "small", className: "-ml-1.5 mt-1", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: open ? "Show less" : "Show more" })
   ] });
 }
 
 // src/Toolbar.tsx
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx52(
+  const strip = /* @__PURE__ */ jsx55(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -3554,27 +3747,27 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx52(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx55(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx55(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx52(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx55(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
 function ToolbarLink({ ref, href, ...props }) {
-  return /* @__PURE__ */ jsx52(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx52(IconButton, { href, ...props }) });
+  return /* @__PURE__ */ jsx55(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx55(IconButton, { href, ...props }) });
 }
 function ToolbarInput({ size, ...props }) {
-  return /* @__PURE__ */ jsx52(BaseToolbar.Input, { render: /* @__PURE__ */ jsx52(TextInput, { size }), ...props });
+  return /* @__PURE__ */ jsx55(BaseToolbar.Input, { render: /* @__PURE__ */ jsx55(TextInput, { size }), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx55(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -3584,9 +3777,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx53(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx56(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
@@ -3596,14 +3789,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__ */ jsx53(
+    /* @__PURE__ */ jsx56(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7",
-        children: /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
+        children: /* @__PURE__ */ jsx56("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
       },
       option.emoji
     )
@@ -3612,23 +3805,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 jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs39 } 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__ */ jsxs37(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs39(BasePreviewCard.Root, { children: [
+    /* @__PURE__ */ jsx57(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx54("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx57("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx54(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx57(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx57(
       BasePreviewCard.Positioner,
       {
         side,
@@ -3636,12 +3829,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__ */ jsx54(
+        children: /* @__PURE__ */ jsx57(
           BasePreviewCard.Popup,
           {
             className: cn("w-[360px] p-0 outline-none", className),
-            render: /* @__PURE__ */ jsx54(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx54(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
+            render: /* @__PURE__ */ jsx57(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx57(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
           }
         )
       }
@@ -3650,30 +3843,32 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx55("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__ */ jsx58("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 jsx56, jsxs as jsxs38 } from "react/jsx-runtime";
-function RailItem({ href, icon, label, active = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs38(
+import { jsx as jsx59, jsxs as jsxs40 } from "react/jsx-runtime";
+function RailItem({ href, icon, label, active = false, className, onClick, ...props }) {
+  const inApp = useInAppClick(href, onClick);
+  return /* @__PURE__ */ jsxs40(
     "a",
     {
       href,
       "aria-current": active ? "page" : void 0,
       className: cn("group flex h-12 w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
       ...props,
+      onClick: inApp,
       children: [
-        /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsx59(
           "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__ */ jsx56(
+            children: /* @__PURE__ */ jsx59(
               "span",
               {
                 className: cn(
@@ -3685,14 +3880,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx56("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx59("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Property.tsx
-import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs41 } from "react/jsx-runtime";
 var VALUE_CLASSES = "contents";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
@@ -3700,25 +3895,25 @@ function Property({ label, layout = "row", children, className }) {
       // gap-3 — the one label-above-content distance (Katerina, 2026-09-01):
       // Peek's topic-details sections already sit at 12px, Ship's rail was
       // 6px, and unifying means the bigger, calmer one.
-      /* @__PURE__ */ jsxs39("dl", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx57("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx57("dd", { className: VALUE_CLASSES, children })
+      /* @__PURE__ */ jsxs41("dl", { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsx60("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx60("dd", { className: VALUE_CLASSES, children })
       ] })
     );
   }
-  return /* @__PURE__ */ jsxs39("dl", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx57("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
-    /* @__PURE__ */ jsx57("dd", { className: VALUE_CLASSES, children })
+  return /* @__PURE__ */ jsxs41("dl", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx60("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    /* @__PURE__ */ jsx60("dd", { className: VALUE_CLASSES, children })
   ] });
 }
 
 // src/Reaction.tsx
 import { Toggle } from "@base-ui/react/toggle";
-import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs42 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, ...props }) {
   return (
     // @estiva-escape(no-copied-look): W1 (Katerina, 24 September: leave alone): a reaction pill shares four words with a field's box by coincidence
-    /* @__PURE__ */ jsxs40(
+    /* @__PURE__ */ jsxs42(
       Toggle,
       {
         pressed,
@@ -3740,8 +3935,8 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx58("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
-          /* @__PURE__ */ jsx58("span", { className: CHIP_TEXT_CLASSES, children: count })
+          /* @__PURE__ */ jsx61("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
+          /* @__PURE__ */ jsx61("span", { className: CHIP_TEXT_CLASSES, children: count })
         ]
       }
     )
@@ -3751,9 +3946,9 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
 // src/SearchInput.tsx
 import "react";
 import { Input as Input3 } from "@base-ui/react/input";
-import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs43 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs43(
     "div",
     {
       className: cn(
@@ -3765,7 +3960,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx62(
           Input3,
           {
             className: cn("flex-1 min-w-0 text-input-value", BARE_INPUT_CLASSES),
@@ -3773,42 +3968,42 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx59(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx62(Kbd, { children: shortcut })
       ]
     }
   );
 }
 
 // src/Panel.tsx
-import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs44 } from "react/jsx-runtime";
 function Frame({ title, chevron = false, actions, children, footer, bodyClassName, bodyRef, onBodyScroll, className, broken = false }) {
-  return /* @__PURE__ */ jsxs42("div", { className: cn("flex h-full min-h-0 flex-1 flex-col", className), children: [
-    /* @__PURE__ */ jsx60(ContainerHeader, { title, chevron, actions }),
+  return /* @__PURE__ */ jsxs44("div", { className: cn("flex h-full min-h-0 flex-1 flex-col", className), children: [
+    /* @__PURE__ */ jsx63(ContainerHeader, { title, chevron, actions }),
     broken ? (
       // The message takes the room the body had and centres itself in it.
-      /* @__PURE__ */ jsx60("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
-    ) : /* @__PURE__ */ jsx60(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
-    !broken && footer && /* @__PURE__ */ jsx60("div", { className: "shrink-0", children: footer })
+      /* @__PURE__ */ jsx63("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
+    ) : /* @__PURE__ */ jsx63(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
+    !broken && footer && /* @__PURE__ */ jsx63("div", { className: "shrink-0", children: footer })
   ] });
 }
 function Panel(props) {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx63(
     ErrorBoundary,
     {
       label: "panel",
       frame: (message) => (
         // Only the name comes back with the message: the actions and the footer may be what threw.
-        /* @__PURE__ */ jsx60(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
+        /* @__PURE__ */ jsx63(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
       ),
-      children: /* @__PURE__ */ jsx60(Frame, { ...props })
+      children: /* @__PURE__ */ jsx63(Frame, { ...props })
     }
   );
 }
 
 // src/ListColumn.tsx
-import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs45 } from "react/jsx-runtime";
 function Column({ title, chevron = false, titleMenu, actions, above, collapsed = false, children, className, broken = false }) {
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       className: cn(
@@ -3819,35 +4014,35 @@ function Column({ title, chevron = false, titleMenu, actions, above, collapsed =
       ),
       "data-collapsed": collapsed || void 0,
       children: [
-        /* @__PURE__ */ jsx61(ContainerHeader, { title, chevron, titleMenu, actions }),
+        /* @__PURE__ */ jsx64(ContainerHeader, { title, chevron, titleMenu, actions }),
         above,
         broken ? (
           // The message takes the room the list had and centres itself in it (Katerina, 19 September).
-          /* @__PURE__ */ jsx61("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
-        ) : /* @__PURE__ */ jsx61(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
+          /* @__PURE__ */ jsx64("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
+        ) : /* @__PURE__ */ jsx64(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
       ]
     }
   );
 }
 function ListColumn(props) {
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx64(
     ErrorBoundary,
     {
       label: "list panel",
       frame: (message) => (
         // Only the name comes back with the message: the actions and the row above may be what threw.
-        /* @__PURE__ */ jsx61(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
+        /* @__PURE__ */ jsx64(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
       ),
-      children: /* @__PURE__ */ jsx61(Column, { ...props })
+      children: /* @__PURE__ */ jsx64(Column, { ...props })
     }
   );
 }
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx65(
     BaseTabs.Root,
     {
       value: active,
@@ -3855,14 +4050,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsx65(
         BaseTabs.List,
         {
           activateOnFocus: true,
           "aria-label": aria["aria-label"],
           "aria-labelledby": aria["aria-labelledby"],
           className: "flex items-center gap-2",
-          children: tabs.map((tab) => /* @__PURE__ */ jsxs44(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs46(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -3875,10 +4070,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs44("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs46("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx62("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
-                ] })
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx65("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                ] }),
+                tab.unread ? /* @__PURE__ */ jsxs46(Fragment14, { children: [
+                  /* @__PURE__ */ jsx65(UnreadDot, { className: "h-auto w-auto" }),
+                  /* @__PURE__ */ jsx65("span", { className: "sr-only", children: "new" })
+                ] }) : null
               ]
             },
             tab.id
@@ -3890,10 +4089,10 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 }
 
 // src/Toast.tsx
-import { createContext as createContext6, useContext as useContext6, useMemo as useMemo5 } from "react";
+import { createContext as createContext7, useContext as useContext7, useMemo as useMemo6 } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { IconAlertCircle as IconAlertCircle2, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
-import { jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
 var SURFACE_STYLES = {
   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",
@@ -3929,23 +4128,23 @@ var pillClassName = (type, hasAction, className) => cn(
 );
 function LeadingIcon({ type }) {
   const Icon = ICONS[type];
-  return /* @__PURE__ */ jsx63(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
+  return /* @__PURE__ */ jsx66(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
 }
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
-  return /* @__PURE__ */ jsxs45("div", { className: pillClassName(type, hasAction, className), children: [
-    /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2 shrink-0", children: [
-      leadingIcon && /* @__PURE__ */ jsx63(LeadingIcon, { type }),
-      /* @__PURE__ */ jsx63("span", { className: LABEL_CLASSES, children: label })
+  return /* @__PURE__ */ jsxs47("div", { className: pillClassName(type, hasAction, className), children: [
+    /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2 shrink-0", children: [
+      leadingIcon && /* @__PURE__ */ jsx66(LeadingIcon, { type }),
+      /* @__PURE__ */ jsx66("span", { className: LABEL_CLASSES, children: label })
     ] }),
-    hasAction && /* @__PURE__ */ jsx63(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
+    hasAction && /* @__PURE__ */ jsx66(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
   ] });
 }
-var ToastContext = createContext6(null);
+var ToastContext = createContext7(null);
 var VISIBLE_TOASTS = 3;
 function ToastProvider({ children }) {
-  const manager = useMemo5(() => BaseToast.createToastManager(), []);
-  const value = useMemo5(
+  const manager = useMemo6(() => BaseToast.createToastManager(), []);
+  const value = useMemo6(
     () => ({
       showToast: ({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, durationMs = 5e3 }) => manager.add({
         title: label,
@@ -3959,9 +4158,9 @@ function ToastProvider({ children }) {
     }),
     [manager]
   );
-  return /* @__PURE__ */ jsx63(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs45(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
+  return /* @__PURE__ */ jsx66(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs47(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
     children,
-    /* @__PURE__ */ jsx63(BaseToast.Portal, { children: /* @__PURE__ */ jsx63(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx63(ToastList, {}) }) })
+    /* @__PURE__ */ jsx66(BaseToast.Portal, { children: /* @__PURE__ */ jsx66(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx66(ToastList, {}) }) })
   ] }) });
 }
 function ToastList() {
@@ -3969,25 +4168,25 @@ function ToastList() {
   return toasts.map((toast) => {
     const type = toast.type ?? "neutral";
     const { leadingIcon = true, actionLabel, onAction } = toast.data ?? {};
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs47(
       BaseToast.Root,
       {
         toast,
         swipeDirection: ["left", "down"],
         className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
         children: [
-          /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2 shrink-0", children: [
-            leadingIcon && /* @__PURE__ */ jsx63(LeadingIcon, { type }),
-            /* @__PURE__ */ jsx63(BaseToast.Title, { render: /* @__PURE__ */ jsx63("span", {}), className: LABEL_CLASSES })
+          /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2 shrink-0", children: [
+            leadingIcon && /* @__PURE__ */ jsx66(LeadingIcon, { type }),
+            /* @__PURE__ */ jsx66(BaseToast.Title, { render: /* @__PURE__ */ jsx66("span", {}), className: LABEL_CLASSES })
           ] }),
-          actionLabel && /* @__PURE__ */ jsx63(
+          actionLabel && /* @__PURE__ */ jsx66(
             BaseToast.Action,
             {
               onClick: () => {
                 onAction?.();
                 close(toast.id);
               },
-              render: /* @__PURE__ */ jsx63(Button, { variant: "outlined", size: "small", children: actionLabel })
+              render: /* @__PURE__ */ jsx66(Button, { variant: "outlined", size: "small", children: actionLabel })
             }
           )
         ]
@@ -3997,24 +4196,12 @@ function ToastList() {
   });
 }
 function useToast() {
-  const ctx = useContext6(ToastContext);
+  const ctx = useContext7(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 }
-
-// src/shortcuts.ts
-function isApplePlatform() {
-  if (typeof navigator === "undefined") return false;
-  return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
-}
-function shortcutLabel(keys, apple = isApplePlatform()) {
-  return keys.split("-").map((part, i, all) => {
-    if (i === all.length - 1) return part.length === 1 ? part.toUpperCase() : part;
-    if (part === "Mod") return apple ? "Cmd" : "Ctrl";
-    return part;
-  }).join("+");
-}
 export {
+  AppProvider,
   AppShell,
   AttachmentCard,
   Avatar,
@@ -4058,6 +4245,8 @@ export {
   Lightbox,
   Link,
   ListColumn,
+  MembersDialog,
+  MembersPill,
   Menu,
   MenuItem,
   MenuPanel,