@estiva-app/ui 0.12.10 → 0.13.0

package/dist/index.js

@@ -133,77 +133,103 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
   );
 }
 
-// src/Avatar.tsx
-import { useState } from "react";
-import { IconUserFilled } from "@tabler/icons-react";
+// src/AttachmentCard.tsx
+import { useLayoutEffect, useRef, useState } from "react";
+import { Button as BaseButton2 } from "@base-ui/react/button";
+import {
+  IconAlertCircle,
+  IconAlertTriangle,
+  IconDownload,
+  IconFile,
+  IconFileTypeCsv,
+  IconFileTypeDocx,
+  IconFileTypePdf,
+  IconFileTypePpt,
+  IconFileTypeTxt,
+  IconFileTypeXls,
+  IconFileTypeZip,
+  IconJson,
+  IconLoader2,
+  IconMarkdown,
+  IconX
+} from "@tabler/icons-react";
+
+// src/Link.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var HUES = ["#56c8ff", "#ff8f6b", "#4ade8c", "#b18cff", "#ffc94d", "#ff7eb0", "#7ea8ff", "#5fdfd6"];
-var hueFor = (key) => {
-  let h = 0;
-  for (let i = 0; i < key.length; i++) h = h * 31 + key.charCodeAt(i) | 0;
-  return HUES[Math.abs(h) % HUES.length];
+var VARIANT_CLASSES = {
+  text: "text-info-default underline underline-offset-2 hover:opacity-80",
+  quiet: "hover:underline",
+  underlined: "underline underline-offset-2 hover:text-text-primary",
+  plain: ""
 };
-var initialsFor = (name) => {
-  const words = name.split(/\s+/).slice(0, 2).filter((w) => /^[\p{L}\p{N}]/u.test(w));
-  const initials = words.map((w) => w[0]).join("") || name.trim().charAt(0);
-  return initials.toUpperCase();
-};
-function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
-  const [broken, setBroken] = useState(false);
-  const label = name || alt;
-  const picture = src && !broken ? src : void 0;
+function Link({ href, variant = "text", external = false, className, children, ...props }) {
   return /* @__PURE__ */ jsx4(
-    "div",
+    "a",
     {
-      ...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: picture ? /* @__PURE__ */ jsx4("img", { src: picture, alt: "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx4(
-        "div",
-        {
-          className: "w-full h-full flex items-center justify-center font-semibold leading-none",
-          style: {
-            // The one ink colour that reads on all eight hues, which are a
-            // palette rather than tokens (see the note at the top) — so its
-            // ink cannot be a token either.
-            color: "#08121c",
-            fontSize: Math.round(size * 0.36),
-            background: `linear-gradient(160deg, color-mix(in srgb, ${hueFor(label)} 92%, #fff) 0%, color-mix(in srgb, ${hueFor(label)} 70%, #0b0d11) 100%)`
-          },
-          children: initialsFor(label)
-        }
-      ) : /* @__PURE__ */ jsx4("div", { className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx4(IconUserFilled, { size: Math.round(size * 0.5) }) })
+      href,
+      ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      className: cn(VARIANT_CLASSES[variant], className),
+      ...props,
+      children
     }
   );
 }
 
-// src/AvatarGroup.tsx
+// src/Card.tsx
 import { jsx as jsx5 } 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__ */ jsx5("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__ */ jsx5(
-      "span",
-      {
-        className: "relative flex rounded-sm",
-        style: { marginRight: -overlap, boxShadow: `0 0 0 ${ring}px var(--bg-surface)` },
-        children: /* @__PURE__ */ jsx5(Avatar, { size, name: member.name, src: member.picture, label: member.name })
-      },
-      i
-    )
-  )) });
+var FILL_CLASSES = {
+  surface: "bg-bg-surface border-border-default",
+  elevated: "bg-bg-elevated border-border-default",
+  inset: "bg-bg-inset border-border-subtle",
+  none: "border-border-subtle"
+};
+var HAIRLINE_HOVER_CLASSES = {
+  surface: "hover:border-border-strong",
+  elevated: "hover:border-border-strong",
+  inset: "hover:border-border-default",
+  none: "hover:border-border-default"
+};
+var ATTENTION_CLASSES = {
+  accent: "border-accent-muted hover:border-accent-muted",
+  warning: "border-warning-muted hover:border-warning-muted"
+};
+function Card({
+  fill = "surface",
+  href,
+  hover = href ? "hairline" : "none",
+  quietUntilHover = false,
+  selected = false,
+  active = false,
+  attention,
+  unreadable = false,
+  className,
+  children,
+  ...props
+}) {
+  const still = selected || active;
+  const classes = cn(
+    "rounded-lg border",
+    // A card that never changes has nothing to ease between, and the apps' still cards carry no transition.
+    hover !== "none" && "transition-colors",
+    FILL_CLASSES[fill],
+    quietUntilHover && "border-transparent",
+    !still && hover === "hairline" && HAIRLINE_HOVER_CLASSES[fill],
+    !still && hover === "fill" && "hover:bg-bg-hover hover:border-border-default",
+    !still && hover !== "none" && !href && props.onClick && "cursor-pointer",
+    selected && "bg-bg-selected border-border-subtle",
+    active && "bg-bg-selected border-accent-primary",
+    !active && attention && ATTENTION_CLASSES[attention],
+    unreadable && "border-dashed",
+    href && "block",
+    className
+  );
+  if (href !== void 0) {
+    const { ref, ...anchorProps } = props;
+    return /* @__PURE__ */ jsx5(Link, { href, variant: "plain", ref, className: classes, ...anchorProps, children });
+  }
+  return /* @__PURE__ */ jsx5("div", { className: classes, ...props, children });
 }
 
-// src/Banner.tsx
-import { IconX } from "@tabler/icons-react";
-
 // src/IconButton.tsx
 import { Button as BaseButton } from "@base-ui/react/button";
 
@@ -344,8 +370,260 @@ function IconButton({
   return button;
 }
 
+// src/AttachmentCard.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var ICON_BY_EXTENSION = {
+  pdf: IconFileTypePdf,
+  doc: IconFileTypeDocx,
+  docx: IconFileTypeDocx,
+  xls: IconFileTypeXls,
+  xlsx: IconFileTypeXls,
+  ppt: IconFileTypePpt,
+  pptx: IconFileTypePpt,
+  csv: IconFileTypeCsv,
+  txt: IconFileTypeTxt,
+  rtf: IconFileTypeTxt,
+  zip: IconFileTypeZip,
+  json: IconJson,
+  md: IconMarkdown
+};
+var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set(["png", "jpg", "jpeg", "gif", "webp", "heic", "heif", "svg"]);
+var extensionOf = (name) => {
+  const dot = name.lastIndexOf(".");
+  return dot >= 0 ? name.slice(dot + 1).toLowerCase() : "";
+};
+var isImage = (name, contentType) => IMAGE_EXTENSIONS.has(extensionOf(name)) || (contentType?.startsWith("image/") ?? false);
+var formatBytes = (bytes) => {
+  if (bytes < 1024) return `${bytes} bytes`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${Math.round(kb)} KB`;
+  return `${(kb / 1024).toFixed(1)} MB`;
+};
+var typeLabelOf = (name) => extensionOf(name).toUpperCase() || "FILE";
+var TILE = "size-9 rounded-md bg-bg-active flex items-center justify-center shrink-0 text-text-secondary";
+var NAME = "text-[12px] font-medium leading-[1.3] text-text-primary truncate";
+var NOTE = "text-[10px] leading-[1.2] truncate";
+function TypeIcon({ name }) {
+  const Icon = ICON_BY_EXTENSION[extensionOf(name)] ?? IconFile;
+  return /* @__PURE__ */ jsx9(Icon, { size: 20, stroke: 1.5 });
+}
+function Truncating({ text, hint, className, wrapperClassName }) {
+  const ref = useRef(null);
+  const [cut, setCut] = useState(false);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let live = true;
+    const measure = () => {
+      if (live) setCut(el.scrollWidth > el.clientWidth);
+    };
+    measure();
+    void document.fonts?.ready.then(measure);
+    if (typeof ResizeObserver === "undefined") return () => void (live = false);
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => {
+      live = false;
+      observer.disconnect();
+    };
+  }, [text, cut]);
+  const line = /* @__PURE__ */ jsx9("span", { ref, className, children: text });
+  if (!hint && !cut) return line;
+  return /* @__PURE__ */ jsx9(WithTooltip, { label: hint ?? text, wrapperClassName: cn("min-w-0 flex-col", wrapperClassName), children: line });
+}
+function AttachmentCard({
+  name,
+  size,
+  contentType,
+  href,
+  src,
+  onOpen,
+  onDownload,
+  pending = false,
+  onRemove,
+  state = "ready",
+  note,
+  noteHint,
+  className,
+  ...props
+}) {
+  const image = isImage(name, contentType);
+  const sizeText = size === void 0 ? "" : formatBytes(size);
+  if (pending) {
+    const failed = state === "failed";
+    const warning = state === "warning";
+    return /* @__PURE__ */ jsxs5(
+      Card,
+      {
+        fill: "elevated",
+        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__ */ jsx9("div", { className: cn(TILE, "overflow-hidden"), children: state === "uploading" ? /* @__PURE__ */ jsx9(IconLoader2, { size: 16, stroke: 1.5, className: "animate-spin" }) : failed ? /* @__PURE__ */ jsx9(IconAlertCircle, { size: 16, stroke: 1.5, className: "text-error-default" }) : warning ? /* @__PURE__ */ jsx9(IconAlertTriangle, { size: 16, stroke: 1.5, className: "text-warning-default" }) : image && src ? /* @__PURE__ */ jsx9("img", { src, alt: name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx9("span", { className: "text-[9px] font-semibold", children: typeLabelOf(name) }) }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[1px] min-w-0", children: [
+            /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME }),
+            /* @__PURE__ */ jsx9(
+              Truncating,
+              {
+                text: (failed || warning ? note : state === "uploading" ? note ?? "Uploading\u2026" : note ?? sizeText) ?? "",
+                hint: noteHint,
+                className: cn(NOTE, failed ? "text-error-default" : warning ? "text-warning-default" : "text-text-secondary")
+              }
+            )
+          ] }),
+          onRemove && /* @__PURE__ */ jsx9(
+            BaseButton2,
+            {
+              type: "button",
+              "aria-label": `Remove ${name}`,
+              className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-bg-elevated border border-border-strong flex items-center justify-center text-text-secondary hover:text-text-primary opacity-0 group-hover:opacity-100 transition-opacity",
+              onClick: (event) => {
+                event.stopPropagation();
+                onRemove();
+              },
+              children: /* @__PURE__ */ jsx9(IconX, { size: 11, stroke: 1.75 })
+            }
+          )
+        ]
+      }
+    );
+  }
+  const download = onDownload ? /* @__PURE__ */ jsx9(
+    IconButton,
+    {
+      variant: "muted",
+      tooltip: "Download",
+      "aria-label": `Download ${name}`,
+      className: "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-opacity",
+      onClick: (event) => {
+        event.stopPropagation();
+        onDownload();
+      },
+      children: /* @__PURE__ */ jsx9(IconDownload, { size: 16, stroke: 1.5 })
+    }
+  ) : null;
+  if (state === "loading") {
+    return (
+      // `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.
+      /* @__PURE__ */ jsx9(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 (state === "unreadable") {
+    return /* @__PURE__ */ jsxs5(Card, { fill: "inset", unreadable: true, className: cn("flex items-center gap-2 w-[240px] p-1.5 opacity-70", className), ...props, children: [
+      /* @__PURE__ */ jsx9("div", { className: TILE, children: /* @__PURE__ */ jsx9(TypeIcon, { name }) }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[1px] min-w-0 text-left", children: [
+        /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME }),
+        /* @__PURE__ */ jsx9("span", { className: cn(NOTE, "text-text-secondary"), children: note ?? "Could not be loaded" })
+      ] })
+    ] });
+  }
+  if (image && src) {
+    const picture = /* @__PURE__ */ jsx9("img", { src, alt: name, className: "w-full h-28 object-cover" });
+    return /* @__PURE__ */ jsxs5(Card, { fill: "inset", hover: "hairline", className: cn("group relative flex flex-col w-[180px] overflow-hidden", className), ...props, children: [
+      onOpen ? /* @__PURE__ */ jsx9(
+        BaseButton2,
+        {
+          type: "button",
+          className: "block w-full",
+          "aria-label": `Preview ${name}`,
+          onClick: (event) => {
+            event.stopPropagation();
+            onOpen();
+          },
+          children: picture
+        }
+      ) : /* @__PURE__ */ jsx9("div", { className: "block w-full", children: picture }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 pl-2 pr-1 py-1 min-w-0", children: [
+        /* @__PURE__ */ jsx9(Truncating, { text: name, className: "flex-1 text-[12px] leading-[1.3] text-text-primary truncate", wrapperClassName: "flex-1" }),
+        download
+      ] })
+    ] });
+  }
+  const body = /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx9("div", { className: TILE, children: /* @__PURE__ */ jsx9(TypeIcon, { name }) }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[1px] min-w-0 text-left", children: [
+      /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME }),
+      /* @__PURE__ */ jsx9("span", { className: cn(NOTE, "text-text-secondary"), children: note ?? `${typeLabelOf(name)} \xB7 ${sizeText}` })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs5(Card, { fill: "inset", hover: href ? "hairline" : "none", className: cn("group flex items-center gap-2 w-[240px] p-1.5 pr-1", !href && "opacity-70", className), ...props, children: [
+    href ? /* @__PURE__ */ jsx9(Link, { href, external: true, variant: "plain", className: "flex items-center gap-2 min-w-0 flex-1 cursor-pointer", onClick: (event) => event.stopPropagation(), children: body }) : /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: body }),
+    download
+  ] });
+}
+
+// src/Avatar.tsx
+import { useState as useState2 } from "react";
+import { IconUserFilled } from "@tabler/icons-react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var HUES = ["#56c8ff", "#ff8f6b", "#4ade8c", "#b18cff", "#ffc94d", "#ff7eb0", "#7ea8ff", "#5fdfd6"];
+var hueFor = (key) => {
+  let h = 0;
+  for (let i = 0; i < key.length; i++) h = h * 31 + key.charCodeAt(i) | 0;
+  return HUES[Math.abs(h) % HUES.length];
+};
+var initialsFor = (name) => {
+  const words = name.split(/\s+/).slice(0, 2).filter((w) => /^[\p{L}\p{N}]/u.test(w));
+  const initials = words.map((w) => w[0]).join("") || name.trim().charAt(0);
+  return initials.toUpperCase();
+};
+function Avatar({ src, name, alt = "", size = 36, label: spoken, className }) {
+  const [broken, setBroken] = useState2(false);
+  const label = name || alt;
+  const picture = src && !broken ? src : void 0;
+  return /* @__PURE__ */ jsx10(
+    "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: picture ? /* @__PURE__ */ jsx10("img", { src: picture, alt: "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx10(
+        "div",
+        {
+          className: "w-full h-full flex items-center justify-center font-semibold leading-none",
+          style: {
+            // The one ink colour that reads on all eight hues, which are a
+            // palette rather than tokens (see the note at the top) — so its
+            // ink cannot be a token either.
+            color: "#08121c",
+            fontSize: Math.round(size * 0.36),
+            background: `linear-gradient(160deg, color-mix(in srgb, ${hueFor(label)} 92%, #fff) 0%, color-mix(in srgb, ${hueFor(label)} 70%, #0b0d11) 100%)`
+          },
+          children: initialsFor(label)
+        }
+      ) : /* @__PURE__ */ jsx10("div", { className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx10(IconUserFilled, { size: Math.round(size * 0.5) }) })
+    }
+  );
+}
+
+// src/AvatarGroup.tsx
+import { jsx as jsx11 } 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__ */ jsx11("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__ */ jsx11(
+      "span",
+      {
+        className: "relative flex rounded-sm",
+        style: { marginRight: -overlap, boxShadow: `0 0 0 ${ring}px var(--bg-surface)` },
+        children: /* @__PURE__ */ jsx11(Avatar, { size, name: member.name, src: member.picture, label: member.name })
+      },
+      i
+    )
+  )) });
+}
+
 // src/Banner.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { IconX as IconX2 } from "@tabler/icons-react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var TONE_STYLES = {
   ok: "bg-success-muted text-success-default",
   error: "bg-error-muted text-error-default",
@@ -355,17 +633,17 @@ var TONE_STYLES = {
 function Banner({ tone, children, onDismiss, dismissLabel = "Dismiss", className }) {
   const role = tone === "error" ? "alert" : "status";
   if (!onDismiss) {
-    return /* @__PURE__ */ jsx9("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
+    return /* @__PURE__ */ jsx12("div", { role, className: cn("px-4 py-2 text-body-2", TONE_STYLES[tone], className), children });
   }
-  return /* @__PURE__ */ jsxs5("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
-    /* @__PURE__ */ jsx9("span", { className: "min-w-0 flex-1", children }),
-    /* @__PURE__ */ jsx9(IconButton, { "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0 text-current hover:text-current", children: /* @__PURE__ */ jsx9(IconX, { size: 16, stroke: 1.5 }) })
+  return /* @__PURE__ */ jsxs6("div", { role, className: cn("flex items-center gap-3 px-4 py-2 text-body-2", TONE_STYLES[tone], className), children: [
+    /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1", children }),
+    /* @__PURE__ */ jsx12(IconButton, { "aria-label": dismissLabel, onClick: onDismiss, className: "-mr-1 shrink-0 text-current hover:text-current", children: /* @__PURE__ */ jsx12(IconX2, { size: 16, stroke: 1.5 }) })
   ] });
 }
 
 // src/Button.tsx
-import { Button as BaseButton2 } from "@base-ui/react/button";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Button as BaseButton3 } from "@base-ui/react/button";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -378,8 +656,8 @@ function Button({
   ...props
 }) {
   const hasLeadingIcon = !!leadingIcon;
-  const button = /* @__PURE__ */ jsxs6(
-    BaseButton2,
+  const button = /* @__PURE__ */ jsxs7(
+    BaseButton3,
     {
       type,
       disabled: disabled || !!disabledReason,
@@ -423,13 +701,13 @@ function Button({
       ]
     }
   );
-  return disabledReason ? /* @__PURE__ */ jsx10(TooltipTrigger, { label: disabledReason, children: button }) : button;
+  return disabledReason ? /* @__PURE__ */ jsx13(TooltipTrigger, { label: disabledReason, children: button }) : button;
 }
 
 // src/Checkbox.tsx
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import { IconCheck } from "@tabler/icons-react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function squareClasses(checked, disabled, interactive, className) {
   return cn(
     "inline-flex items-center justify-center size-4 shrink-0 rounded-[4px] border transition-colors",
@@ -442,9 +720,9 @@ function squareClasses(checked, disabled, interactive, className) {
 var tickClasses = (checked) => cn("flex", !checked && "invisible");
 function Checkbox({ checked, onChange, disabled = false, className, ...aria }) {
   if (!onChange) {
-    return /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx11("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx11(IconCheck, { size: 12, stroke: 3 }) }) });
+    return /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", className: squareClasses(checked, disabled, false, className), children: /* @__PURE__ */ jsx14("span", { className: tickClasses(checked), children: /* @__PURE__ */ jsx14(IconCheck, { size: 12, stroke: 3 }) }) });
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     BaseCheckbox.Root,
     {
       checked,
@@ -454,13 +732,13 @@ function Checkbox({ checked, onChange, disabled = false, className, ...aria }) {
       onCheckedChange: (next) => onChange(next),
       onClick: (e) => e.stopPropagation(),
       className: (state) => squareClasses(state.checked, state.disabled, true, className),
-      children: /* @__PURE__ */ jsx11(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx11(IconCheck, { size: 12, stroke: 3 }) })
+      children: /* @__PURE__ */ jsx14(BaseCheckbox.Indicator, { keepMounted: true, className: (state) => tickClasses(state.checked), children: /* @__PURE__ */ jsx14(IconCheck, { size: 12, stroke: 3 }) })
     }
   );
 }
 
 // src/Chip.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var typeStyles = {
   neutral: "bg-bg-inset text-text-primary",
   brand: "bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
@@ -470,8 +748,8 @@ var typeStyles = {
   error: "bg-error-muted text-error-default signal:border signal:border-error-outline"
 };
 function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className }) {
-  return /* @__PURE__ */ jsxs7("div", { className: cn("inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1", typeStyles[type], className), children: [
-    leadingIcon && /* @__PURE__ */ jsx12("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
+  return /* @__PURE__ */ jsxs8("div", { className: cn("inline-flex min-w-0 items-center justify-center gap-1.5 rounded-full max-h-[20px] px-2 py-1", typeStyles[type], className), children: [
+    leadingIcon && /* @__PURE__ */ jsx15("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
@@ -480,16 +758,16 @@ function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className })
     // the screenshot diff caught every descender cut off. `clip` is the
     // one overflow that leaves the other axis visible. A chip with no cap
     // draws exactly as before.
-    /* @__PURE__ */ jsx12("span", { className: "min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums", children: label }),
-    trailingIcon && /* @__PURE__ */ jsx12("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
+    /* @__PURE__ */ jsx15("span", { className: "min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums", children: label }),
+    trailingIcon && /* @__PURE__ */ jsx15("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
   ] });
 }
 
 // src/ChipInput.tsx
-import { useMemo, useState as useState2 } from "react";
-import { Button as BaseButton3 } from "@base-ui/react/button";
+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 IconX2 } from "@tabler/icons-react";
+import { IconX as IconX3 } from "@tabler/icons-react";
 
 // src/Menu.tsx
 import { createContext, useContext } from "react";
@@ -503,9 +781,9 @@ function triggerDisabled(trigger) {
 }
 
 // src/SectionLabel.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function SectionLabel({ children, className }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     "span",
     {
       className: cn(
@@ -518,10 +796,10 @@ function SectionLabel({ children, className }) {
 }
 
 // src/Menu.tsx
-import { Fragment, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var MenuContext = createContext(null);
 function MenuPanel({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       className: cn(
@@ -551,7 +829,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__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     BaseMenu.Root,
     {
       open,
@@ -559,7 +837,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
       actionsRef,
       modal: false,
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx17(
           BaseMenu.Trigger,
           {
             render: trigger,
@@ -569,7 +847,7 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
             closeDelay: HOVER_CLOSE_DELAY
           }
         ),
-        /* @__PURE__ */ jsx14(BaseMenu.Portal, { children: /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx17(BaseMenu.Portal, { children: /* @__PURE__ */ jsx17(
           BaseMenu.Positioner,
           {
             side: "bottom",
@@ -577,13 +855,13 @@ function Menu({ trigger, align = "left", openOnHover = false, open, onOpenChange
             sideOffset: GAP2,
             collisionPadding: VIEWPORT_PAD2,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx14(
+            children: /* @__PURE__ */ jsx17(
               BaseMenu.Popup,
               {
                 "data-interactive": true,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx14(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx14(ScrollArea, { viewportClassName: "max-h-[var(--available-height)]", contentClassName: cn("flex flex-col p-2 [&>[role=separator]]:mx-0", contentClassName), children: /* @__PURE__ */ jsx14(MenuContext.Provider, { value: { openOnHover }, children }) })
+                render: /* @__PURE__ */ jsx17(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx17(ScrollArea, { viewportClassName: "max-h-[var(--available-height)]", contentClassName: cn("flex flex-col p-2 [&>[role=separator]]:mx-0", contentClassName), children: /* @__PURE__ */ jsx17(MenuContext.Provider, { value: { openOnHover }, children }) })
               }
             )
           }
@@ -599,20 +877,20 @@ function MenuSub({ label, leading, selected, children, className }) {
       '[@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__ */ jsxs8(BaseMenu.SubmenuRoot, { children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs9(BaseMenu.SubmenuRoot, { children: [
+    /* @__PURE__ */ jsx17(
       BaseMenu.SubmenuTrigger,
       {
         openOnHover: true,
         delay: 0,
         closeDelay: 150,
         nativeButton: true,
-        render: /* @__PURE__ */ jsx14("button", { type: "button" }),
+        render: /* @__PURE__ */ jsx17("button", { type: "button" }),
         className: menuItemClassName({ size: "default", selected }),
-        children: /* @__PURE__ */ jsx14(MenuItemBody, { label, leading, submenu: true })
+        children: /* @__PURE__ */ jsx17(MenuItemBody, { label, leading, submenu: true })
       }
     ),
-    /* @__PURE__ */ jsx14(BaseMenu.Portal, { children: /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx17(BaseMenu.Portal, { children: /* @__PURE__ */ jsx17(
       BaseMenu.Positioner,
       {
         side: "inline-end",
@@ -620,7 +898,7 @@ function MenuSub({ label, leading, selected, children, className }) {
         sideOffset: GAP2,
         collisionPadding: VIEWPORT_PAD2,
         className: "z-50 data-[anchor-hidden]:hidden",
-        children: /* @__PURE__ */ jsx14(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx14(MenuPanel, {}), children })
+        children: /* @__PURE__ */ jsx17(BaseMenu.Popup, { className: cn("w-[160px]", className), "data-interactive": true, render: /* @__PURE__ */ jsx17(MenuPanel, {}), children })
       }
     ) })
   ] });
@@ -655,25 +933,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__ */ jsx14(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx14(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
-    leading && /* @__PURE__ */ jsx14("span", { className: "flex shrink-0 items-center", children: leading }),
-    children ?? /* @__PURE__ */ jsxs8("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
-      /* @__PURE__ */ jsx14("span", { className: cn("truncate text-[14px] leading-[140%]", destructive ? "text-error-default" : "text-text-primary"), children: label }),
-      description && /* @__PURE__ */ jsx14("span", { className: "truncate text-[12px] leading-[120%] text-text-secondary", children: description })
+  const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx17(Kbd, { children: shortcut }) : submenu ? /* @__PURE__ */ jsx17(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    leading && /* @__PURE__ */ jsx17("span", { className: "flex shrink-0 items-center", children: leading }),
+    children ?? /* @__PURE__ */ jsxs9("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
+      /* @__PURE__ */ jsx17("span", { className: cn("truncate text-[14px] leading-[140%]", destructive ? "text-error-default" : "text-text-primary"), children: label }),
+      description && /* @__PURE__ */ jsx17("span", { className: "truncate text-[12px] leading-[120%] 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__ */ jsxs8("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
-      edge && /* @__PURE__ */ jsx14("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
-      hint && /* @__PURE__ */ jsx14("span", { className: cn("flex items-center opacity-0 group-hover:opacity-100 group-data-[highlighted]:opacity-100", selected && "opacity-100"), children: hint })
+    /* @__PURE__ */ jsxs9("span", { className: "grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1", children: [
+      edge && /* @__PURE__ */ jsx17("span", { className: cn("flex items-center", hint && "group-hover:opacity-0 group-data-[highlighted]:opacity-0", hint && selected && "opacity-0"), children: edge }),
+      hint && /* @__PURE__ */ jsx17("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__ */ jsx14(
+  const body = /* @__PURE__ */ jsx17(
     MenuItemBody,
     {
       label,
@@ -691,13 +969,13 @@ function MenuItem({ label, children, size = "default", description, leading, tra
   );
   const rowClassName = menuItemClassName({ size, selected, className });
   if (!useContext(MenuContext)) {
-    return /* @__PURE__ */ jsx14("button", { type: "button", className: rowClassName, ...props, children: body });
+    return /* @__PURE__ */ jsx17("button", { type: "button", className: rowClassName, ...props, children: body });
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     BaseMenu.Item,
     {
       nativeButton: true,
-      render: /* @__PURE__ */ jsx14("button", { type: "button" }),
+      render: /* @__PURE__ */ jsx17("button", { type: "button" }),
       className: rowClassName,
       ...props,
       children: body
@@ -705,31 +983,31 @@ function MenuItem({ label, children, size = "default", description, leading, tra
   );
 }
 function EnterHint({ target }) {
-  return /* @__PURE__ */ jsxs8("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
-    /* @__PURE__ */ jsx14(Kbd, { children: "\u21A9 Enter" }),
-    target && /* @__PURE__ */ jsx14("span", { className: "text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]", children: target })
+  return /* @__PURE__ */ jsxs9("span", { className: "flex shrink-0 items-center gap-1.5 text-text-muted", children: [
+    /* @__PURE__ */ jsx17(Kbd, { children: "\u21A9 Enter" }),
+    target && /* @__PURE__ */ jsx17("span", { className: "text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]", children: target })
   ] });
 }
 function MenuSection({ label, children, className }) {
   const inMenu = useContext(MenuContext) !== null;
-  const heading = /* @__PURE__ */ jsx14("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx14(SectionLabel, { className: "text-text-secondary", children: label }) });
+  const heading = /* @__PURE__ */ jsx17("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx17(SectionLabel, { className: "text-text-secondary", children: label }) });
   if (!inMenu) {
-    return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+    return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col", children: [
       heading,
       children
     ] });
   }
-  return /* @__PURE__ */ jsxs8(BaseMenu.Group, { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx14(BaseMenu.GroupLabel, { render: heading }),
+  return /* @__PURE__ */ jsxs9(BaseMenu.Group, { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx17(BaseMenu.GroupLabel, { render: heading }),
     children
   ] });
 }
 function MenuRow({ children, className }) {
-  return /* @__PURE__ */ jsx14("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
+  return /* @__PURE__ */ jsx17("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
 }
 
 // src/ChipInput.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } 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
@@ -740,11 +1018,11 @@ 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, className }) {
-  return /* @__PURE__ */ jsxs9("div", { className: cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className), children: [
-    leading && /* @__PURE__ */ jsx15("span", { className: "flex shrink-0 items-center", children: leading }),
-    /* @__PURE__ */ jsx15("span", { className: CHIP_LABEL, children: label }),
-    onRemove && /* @__PURE__ */ jsx15(
-      BaseButton3,
+  return /* @__PURE__ */ jsxs10("div", { className: cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className), children: [
+    leading && /* @__PURE__ */ jsx18("span", { className: "flex shrink-0 items-center", children: leading }),
+    /* @__PURE__ */ jsx18("span", { className: CHIP_LABEL, children: label }),
+    onRemove && /* @__PURE__ */ jsx18(
+      BaseButton4,
       {
         type: "button",
         onClick: (e) => {
@@ -753,7 +1031,7 @@ function InputChip({ label, leading, onRemove, className }) {
         },
         className: CHIP_REMOVE,
         "aria-label": `Remove ${label}`,
-        children: /* @__PURE__ */ jsx15(IconX2, { size: 10, stroke: 1.5 })
+        children: /* @__PURE__ */ jsx18(IconX3, { size: 10, stroke: 1.5 })
       }
     )
   ] });
@@ -769,8 +1047,8 @@ function ChipInput({
   rowLeading,
   ...aria
 }) {
-  const [query, setQuery] = useState2("");
-  const [box, setBox] = useState2(null);
+  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);
@@ -806,7 +1084,7 @@ function ChipInput({
       setQuery("");
     }
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     Combobox.Root,
     {
       multiple: true,
@@ -823,13 +1101,13 @@ function ChipInput({
       filter,
       itemToStringLabel: (option) => option.label,
       children: [
-        /* @__PURE__ */ jsxs9(Combobox.Chips, { ref: setBox, className: "bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring", children: [
-          value.map((option) => /* @__PURE__ */ jsxs9(Combobox.Chip, { className: cn(CHIP_BOX, chipPadding(!!chipLeading, true)), children: [
-            chipLeading && /* @__PURE__ */ jsx15("span", { className: "flex shrink-0 items-center", children: chipLeading(option) }),
-            /* @__PURE__ */ jsx15("span", { className: CHIP_LABEL, children: option.label }),
-            /* @__PURE__ */ jsx15(Combobox.ChipRemove, { className: CHIP_REMOVE, "aria-label": `Remove ${option.label}`, children: /* @__PURE__ */ jsx15(IconX2, { size: 10, stroke: 1.5 }) })
+        /* @__PURE__ */ jsxs10(Combobox.Chips, { ref: setBox, className: "bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring", children: [
+          value.map((option) => /* @__PURE__ */ jsxs10(Combobox.Chip, { className: cn(CHIP_BOX, chipPadding(!!chipLeading, true)), children: [
+            chipLeading && /* @__PURE__ */ jsx18("span", { className: "flex shrink-0 items-center", children: chipLeading(option) }),
+            /* @__PURE__ */ jsx18("span", { className: CHIP_LABEL, children: option.label }),
+            /* @__PURE__ */ jsx18(Combobox.ChipRemove, { className: CHIP_REMOVE, "aria-label": `Remove ${option.label}`, children: /* @__PURE__ */ jsx18(IconX3, { size: 10, stroke: 1.5 }) })
           ] }, option.id)),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx18(
             Combobox.Input,
             {
               autoFocus,
@@ -841,18 +1119,18 @@ function ChipInput({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx15(Combobox.Portal, { children: /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx18(Combobox.Portal, { children: /* @__PURE__ */ jsx18(
           Combobox.Positioner,
           {
             anchor: box,
             sideOffset: GAP3,
             collisionPadding: VIEWPORT_PAD3,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx15(Combobox.Popup, { className: "w-[var(--anchor-width)] p-0", render: /* @__PURE__ */ jsx15(MenuPanel, {}), children: /* @__PURE__ */ jsx15(ScrollArea, { viewportClassName: "max-h-[240px]", contentClassName: "flex flex-col p-2", children: /* @__PURE__ */ jsx15(Combobox.List, { children: (option) => /* @__PURE__ */ jsx15(
+            children: /* @__PURE__ */ jsx18(Combobox.Popup, { className: "w-[var(--anchor-width)] p-0", render: /* @__PURE__ */ jsx18(MenuPanel, {}), children: /* @__PURE__ */ jsx18(ScrollArea, { viewportClassName: "max-h-[240px]", contentClassName: "flex flex-col p-2", children: /* @__PURE__ */ jsx18(Combobox.List, { children: (option) => /* @__PURE__ */ jsx18(
               Combobox.Item,
               {
                 value: option,
-                render: /* @__PURE__ */ jsx15(
+                render: /* @__PURE__ */ jsx18(
                   MenuItem,
                   {
                     size: "tall",
@@ -873,15 +1151,49 @@ function ChipInput({
 var GAP3 = 4;
 var VIEWPORT_PAD3 = 8;
 
+// src/InlineChip.tsx
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs11 } 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. */
+  neutral: "bg-bg-active text-text-primary",
+  /** A person. */
+  person: "bg-accent-muted text-accent-primary",
+  /** A person, called urgently. */
+  urgent: "bg-warning-muted text-warning-default",
+  /**
+   * A reference nobody could resolve — still a mention, just an anonymous one.
+   * Its height is the body line's 19.6px written out, because `1.4em` here is
+   * the caption's em: 16.8px, with the letters 1.8px above the sentence's
+   * baseline. At 19.6px they sit 0.4px off it (measured 2026-09-14; Peek's
+   * copy of this chip still has the 16.8px box).
+   */
+  quiet: "h-[19.6px] bg-bg-active text-text-muted font-mono text-caption"
+};
+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__ */ jsxs11(Fragment3, { children: [
+    icon && /* @__PURE__ */ jsx19("span", { className: "flex size-4 shrink-0 items-center justify-center text-text-secondary", children: icon }),
+    children
+  ] });
+  const classes = inlineChipClassName(tone, className);
+  if (href === void 0) {
+    return /* @__PURE__ */ jsx19("span", { className: classes, ...props, children: body });
+  }
+  return /* @__PURE__ */ jsx19("a", { href, className: classes, ...props, children: body });
+}
+
 // src/IdentityMenu.tsx
-import { useCallback, useRef } from "react";
+import { useCallback, useRef as useRef2 } from "react";
 
 // src/Divider.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function Divider({ orientation = "horizontal", label, tone = "default", className }) {
   if (label && orientation === "horizontal") {
     const line = tone === "warning" ? "bg-warning-muted" : "bg-border-subtle";
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         role: "separator",
@@ -889,14 +1201,14 @@ function Divider({ orientation = "horizontal", label, tone = "default", classNam
         "aria-label": label,
         className: cn("flex shrink-0 items-center gap-2 mx-3", className),
         children: [
-          /* @__PURE__ */ 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__ */ jsx20("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) }),
+          /* @__PURE__ */ jsx20("span", { className: cn("shrink-0 text-caption", tone === "warning" ? "text-warning-default" : "text-text-muted"), children: label }),
+          /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", className: cn("h-px flex-1", line) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       role: "separator",
@@ -907,27 +1219,27 @@ function Divider({ orientation = "horizontal", label, tone = "default", classNam
 }
 
 // src/Person.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } 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__ */ jsxs11("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-      /* @__PURE__ */ jsx17(Avatar, { name, src: picture, size }),
-      /* @__PURE__ */ jsx17("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
+    /* @__PURE__ */ jsxs13("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx21(Avatar, { name, src: picture, size }),
+      /* @__PURE__ */ jsx21("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
     ] })
   );
 }
 
 // src/PersonTrigger.tsx
-import { Button as BaseButton4 } from "@base-ui/react/button";
+import { Button as BaseButton5 } from "@base-ui/react/button";
 import { IconChevronDown } from "@tabler/icons-react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
   if (compact) {
-    return /* @__PURE__ */ jsx18(
-      BaseButton4,
+    return /* @__PURE__ */ jsx22(
+      BaseButton5,
       {
         type: "button",
         "aria-haspopup": "menu",
@@ -935,12 +1247,12 @@ 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__ */ jsx18(Avatar, { name, src: picture, size: size ?? 36 })
+        children: /* @__PURE__ */ jsx22(Avatar, { name, src: picture, size: size ?? 36 })
       }
     );
   }
-  return /* @__PURE__ */ jsxs12(
-    BaseButton4,
+  return /* @__PURE__ */ jsxs14(
+    BaseButton5,
     {
       type: "button",
       "aria-haspopup": "menu",
@@ -957,18 +1269,18 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx18(Person, { name, picture, fallback, size: size ?? 22 }),
-        /* @__PURE__ */ jsx18(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+        /* @__PURE__ */ jsx22(Person, { name, picture, fallback, size: size ?? 22 }),
+        /* @__PURE__ */ jsx22(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
       ]
     }
   );
 }
 
 // src/IdentityMenu.tsx
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function IdentityPanel({ className, onClose = () => {
 }, ...rest }) {
-  return /* @__PURE__ */ jsx19(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx19(IdentityRows, { ...rest, onClose }) });
+  return /* @__PURE__ */ jsx23(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx23(IdentityRows, { ...rest, onClose }) });
 }
 function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, children }) {
   const act = (action) => () => {
@@ -976,53 +1288,53 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
     action();
   };
   const appRows = typeof children === "function" ? children(onClose) : children;
-  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
-    /* @__PURE__ */ jsxs13(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
-      /* @__PURE__ */ jsx19(MenuRow, { children: /* @__PURE__ */ jsx19(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
-      /* @__PURE__ */ jsx19(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__ */ jsxs13(Note, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    /* @__PURE__ */ jsxs15(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
+      /* @__PURE__ */ jsx23(MenuRow, { children: /* @__PURE__ */ jsx23(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
+      /* @__PURE__ */ jsx23(Note, { children: signedIn ? "Your Estiva ID. The same person you are in every Estiva app." : "A key held by this browser only. Nobody else knows who you are." }),
+      me.email && /* @__PURE__ */ jsxs15(Note, { children: [
         me.email,
         " \xB7 known to Estiva, never published to the relay"
       ] })
     ] }),
-    relayUrl && /* @__PURE__ */ jsxs13(Fragment2, { children: [
-      /* @__PURE__ */ jsx19(Divider, { className: "mx-0 my-2" }),
-      /* @__PURE__ */ jsxs13(MenuSection, { label: "Workspace", children: [
-        /* @__PURE__ */ jsx19(MenuRow, { children: /* @__PURE__ */ jsx19("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
-        /* @__PURE__ */ jsx19(Note, { children: "Everyone on this relay shares this workspace, in every app." })
+    relayUrl && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+      /* @__PURE__ */ jsx23(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsxs15(MenuSection, { label: "Workspace", children: [
+        /* @__PURE__ */ jsx23(MenuRow, { children: /* @__PURE__ */ jsx23("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
+        /* @__PURE__ */ jsx23(Note, { children: "Everyone on this relay shares this workspace, in every app." })
       ] })
     ] }),
-    appRows && /* @__PURE__ */ jsxs13(Fragment2, { children: [
-      /* @__PURE__ */ jsx19(Divider, { className: "mx-0 my-2" }),
+    appRows && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+      /* @__PURE__ */ jsx23(Divider, { className: "mx-0 my-2" }),
       appRows
     ] }),
-    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx19(Divider, { className: "mx-0 my-2" }) : null,
-    signedIn && idBase && /* @__PURE__ */ jsx19(
+    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx23(Divider, { className: "mx-0 my-2" }) : null,
+    signedIn && idBase && /* @__PURE__ */ jsx23(
       MenuItem,
       {
         label: "Edit your profile in Estiva ID",
         onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
       }
     ),
-    onCopyKey && /* @__PURE__ */ jsx19(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
-    idBase && onSignOut && /* @__PURE__ */ jsx19(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
+    onCopyKey && /* @__PURE__ */ jsx23(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
+    idBase && onSignOut && /* @__PURE__ */ jsx23(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
   ] });
 }
 function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
-  const actions = useRef(null);
+  const actions = useRef2(null);
   const close = useCallback(() => actions.current?.close(), []);
   return (
     /* The wrapper carries the caller's `className` and nothing else. It used
        to be `relative`, because the panel was positioned against it; the panel
        hangs from the trigger and portals now, so a positioning context here
        would only be a lie about what this box does. */
-    /* @__PURE__ */ jsx19("div", { className, children: /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx23("div", { className, children: /* @__PURE__ */ jsx23(
       Menu,
       {
         align: "right",
         actionsRef: actions,
         className: "w-72",
-        trigger: /* @__PURE__ */ jsx19(
+        trigger: /* @__PURE__ */ jsx23(
           PersonTrigger,
           {
             name: me.name,
@@ -1033,7 +1345,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
             "aria-label": compact ? "Account menu" : void 0
           }
         ),
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx23(
           IdentityRows,
           {
             me,
@@ -1051,13 +1363,13 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
   );
 }
 function Note({ children }) {
-  return /* @__PURE__ */ jsx19("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
+  return /* @__PURE__ */ jsx23("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
 }
 
 // src/Field.tsx
 import { cloneElement, isValidElement } from "react";
 import { Field as BaseField } from "@base-ui/react/field";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+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",
@@ -1067,30 +1379,30 @@ function Field({ label, required = false, helper, error, children }) {
   const control = required && isValidElement(children) ? cloneElement(children, {
     "aria-required": children.props["aria-required"] ?? true
   }) : children;
-  return /* @__PURE__ */ jsxs14(BaseField.Root, { invalid: !!error, className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs14(BaseField.Label, { className: cn("text-input-label text-text-primary", required && "flex items-center"), children: [
+  return /* @__PURE__ */ jsxs16(BaseField.Root, { invalid: !!error, className: "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__ */ jsx20("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
+      required && /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "text-error-default ml-0.5", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1.5", children: [
       control,
-      error != null ? /* @__PURE__ */ jsx20(BaseField.Error, { match: true, className: LINE_STYLES.error, children: error }) : helper != null ? /* @__PURE__ */ jsx20(BaseField.Description, { className: LINE_STYLES.helper, children: helper }) : null
+      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__ */ jsx20("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
+  return /* @__PURE__ */ jsx24("p", { role: tone === "error" ? "alert" : "status", className: cn(LINE_STYLES[tone], className), children });
 }
 
 // src/Select.tsx
 import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
 import { Select as BaseSelect } from "@base-ui/react/select";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 var GAP4 = 4;
 var VIEWPORT_PAD4 = 8;
 function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, className, ...aria }) {
   const selected = options.find((o) => o.value === value);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     BaseSelect.Root,
     {
       value,
@@ -1098,7 +1410,7 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
       disabled,
       modal: false,
       children: [
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs17(
           BaseSelect.Trigger,
           {
             "aria-label": ariaLabel,
@@ -1125,20 +1437,20 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs15("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-                selected?.leading && /* @__PURE__ */ jsx21("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-                /* @__PURE__ */ jsx21(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+              /* @__PURE__ */ jsxs17("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+                selected?.leading && /* @__PURE__ */ jsx25("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+                /* @__PURE__ */ jsx25(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
               ] }),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx25(
                 BaseSelect.Icon,
                 {
-                  render: /* @__PURE__ */ jsx21(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                  render: /* @__PURE__ */ jsx25(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx21(BaseSelect.Portal, { children: /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx25(BaseSelect.Portal, { children: /* @__PURE__ */ jsx25(
           BaseSelect.Positioner,
           {
             side: "bottom",
@@ -1147,25 +1459,25 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
             collisionPadding: VIEWPORT_PAD4,
             alignItemWithTrigger: false,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx21(
+            children: /* @__PURE__ */ jsx25(
               BaseSelect.Popup,
               {
-                render: /* @__PURE__ */ jsx21(MenuPanel, {}),
+                render: /* @__PURE__ */ jsx25(MenuPanel, {}),
                 className: "min-w-[var(--anchor-width)] p-0",
-                children: /* @__PURE__ */ jsx21(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs15(
+                children: /* @__PURE__ */ jsx25(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col p-2", children: options.map((option) => /* @__PURE__ */ jsxs17(
                   BaseSelect.Item,
                   {
                     value: option.value,
                     className: cn(menuItemClassName({ size: "default" }), "justify-between data-[selected]:font-medium"),
                     children: [
-                      /* @__PURE__ */ jsxs15("span", { className: "flex min-w-0 items-center gap-2", children: [
-                        option.leading && /* @__PURE__ */ jsx21("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                        /* @__PURE__ */ jsx21(BaseSelect.ItemText, { className: "truncate text-[14px] leading-[140%] text-text-primary", children: option.label })
+                      /* @__PURE__ */ jsxs17("span", { className: "flex min-w-0 items-center gap-2", children: [
+                        option.leading && /* @__PURE__ */ jsx25("span", { className: "flex shrink-0 items-center", children: option.leading }),
+                        /* @__PURE__ */ jsx25(BaseSelect.ItemText, { className: "truncate text-[14px] leading-[140%] text-text-primary", children: option.label })
                       ] }),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx25(
                         BaseSelect.ItemIndicator,
                         {
-                          render: /* @__PURE__ */ jsx21(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                          render: /* @__PURE__ */ jsx25(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
                         }
                       )
                     ]
@@ -1184,9 +1496,9 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
 // src/TextInput.tsx
 import { forwardRef } from "react";
 import { Input } from "@base-ui/react/input";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var TextInput = forwardRef(function TextInput2({ className, type = "text", ...props }, ref) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx26(
     Input,
     {
       ref,
@@ -1207,13 +1519,13 @@ var TextInput = forwardRef(function TextInput2({ className, type = "text", ...pr
 // src/Textarea.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { Field as BaseField2 } from "@base-ui/react/field";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx27(
     BaseField2.Control,
     {
       ref,
-      render: /* @__PURE__ */ jsx23("textarea", {}),
+      render: /* @__PURE__ */ jsx27("textarea", {}),
       className: cn(
         "bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2",
         "text-[14px] leading-[1.4] font-normal text-text-primary placeholder:text-text-muted",
@@ -1228,27 +1540,27 @@ var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
 });
 
 // src/ConfirmDialog.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/DialogShell.tsx
-import { useRef as useRef2 } from "react";
+import { useRef as useRef3 } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
-import { IconX as IconX3 } from "@tabler/icons-react";
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { IconX as IconX4 } from "@tabler/icons-react";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, bodyMaxHeight, width = 502, alert = false }) {
   const Parts = alert ? AlertDialog : Dialog;
-  const popupRef = useRef2(null);
-  return /* @__PURE__ */ jsx24(
+  const popupRef = useRef3(null);
+  return /* @__PURE__ */ jsx28(
     Parts.Root,
     {
       open: true,
       onOpenChange: (open) => {
         if (!open) onClose();
       },
-      children: /* @__PURE__ */ jsxs16(Parts.Portal, { children: [
-        /* @__PURE__ */ jsx24(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
-        /* @__PURE__ */ jsx24("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs16(
+      children: /* @__PURE__ */ jsxs18(Parts.Portal, { children: [
+        /* @__PURE__ */ jsx28(Parts.Backdrop, { className: "fixed inset-0 z-40 bg-scrim" }),
+        /* @__PURE__ */ jsx28("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs18(
           Parts.Popup,
           {
             ref: popupRef,
@@ -1257,16 +1569,16 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
             className: "bg-bg-elevated border border-border-subtle rounded-lg shadow-lg pointer-events-auto flex flex-col overflow-hidden outline-none",
             style: { width },
             children: [
-              /* @__PURE__ */ jsxs16("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
-                headerContent ?? /* @__PURE__ */ jsx24(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx24("span", {}), children: title }),
-                /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsxs18("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
+                headerContent ?? /* @__PURE__ */ jsx28(Parts.Title, { className: "text-h4 text-text-primary", render: /* @__PURE__ */ jsx28("span", {}), children: title }),
+                /* @__PURE__ */ jsx28(
                   Parts.Close,
                   {
-                    render: /* @__PURE__ */ jsx24(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx24(IconX3, { size: 16, stroke: 1.5 }) })
+                    render: /* @__PURE__ */ jsx28(IconButton, { tooltip: "Close", "aria-label": "Close", children: /* @__PURE__ */ jsx28(IconX4, { size: 16, stroke: 1.5 }) })
                   }
                 )
               ] }),
-              bodyMaxHeight ? /* @__PURE__ */ jsx24(
+              bodyMaxHeight ? /* @__PURE__ */ jsx28(
                 ScrollArea,
                 {
                   className: cn(footer != null && "border-b border-border-subtle"),
@@ -1274,8 +1586,8 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
                   contentClassName: cn("pl-5 pr-4 py-4", bodyClassName),
                   children
                 }
-              ) : /* @__PURE__ */ jsx24("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
-              footer != null && /* @__PURE__ */ jsx24("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
+              ) : /* @__PURE__ */ jsx28("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
+              footer != null && /* @__PURE__ */ jsx28("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
             ]
           }
         ) })
@@ -1285,9 +1597,9 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
 }
 
 // src/ConfirmDialog.tsx
-import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
-  const [busy, setBusy] = useState3(false);
+  const [busy, setBusy] = useState4(false);
   const confirm = async () => {
     setBusy(true);
     try {
@@ -1297,16 +1609,16 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx29(
     DialogShell,
     {
       alert: true,
       title,
       onClose,
       bodyClassName: "flex flex-col gap-3 text-body-2 text-text-primary",
-      footer: /* @__PURE__ */ jsxs17(Fragment3, { children: [
-        /* @__PURE__ */ jsx25(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx25(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
+      footer: /* @__PURE__ */ jsxs19(Fragment5, { children: [
+        /* @__PURE__ */ jsx29(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx29(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
       ] }),
       children
     }
@@ -1314,15 +1626,15 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 }
 
 // src/EditableText.tsx
-import { useEffect, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect, useRef as useRef4, useState as useState5 } from "react";
 import { Field as BaseField3 } from "@base-ui/react/field";
 import { Input as Input2 } from "@base-ui/react/input";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
-  const [editing, setEditing] = useState4(false);
-  const [draft, setDraft] = useState4(value);
-  const [busy, setBusy] = useState4(false);
-  const fieldRef = useRef3(null);
+  const [editing, setEditing] = useState5(false);
+  const [draft, setDraft] = useState5(value);
+  const [busy, setBusy] = useState5(false);
+  const fieldRef = useRef4(null);
   useEffect(() => {
     if (editing) {
       fieldRef.current?.focus();
@@ -1375,7 +1687,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__ */ jsx26(
+      /* @__PURE__ */ jsx30(
         "div",
         {
           className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
@@ -1385,11 +1697,11 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
     );
   }
   if (editing) {
-    return multiline ? /* @__PURE__ */ jsx26(
+    return multiline ? /* @__PURE__ */ jsx30(
       BaseField3.Control,
       {
         ref: fieldRef,
-        render: /* @__PURE__ */ jsx26("textarea", { rows: 4 }),
+        render: /* @__PURE__ */ jsx30("textarea", { rows: 4 }),
         "aria-label": label,
         value: draft,
         disabled: busy,
@@ -1398,7 +1710,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
         onBlur: () => void commit(),
         className: fieldClass
       }
-    ) : /* @__PURE__ */ jsx26(
+    ) : /* @__PURE__ */ jsx30(
       Input2,
       {
         ref: fieldRef,
@@ -1412,7 +1724,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
       }
     );
   }
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx30(
     "button",
     {
       type: "button",
@@ -1431,40 +1743,59 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
 
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 function EmptyState({ icon, message, scope = "page", className }) {
   if (scope === "section") {
-    return /* @__PURE__ */ jsx27("p", { className: cn("text-body-2 text-text-secondary", className), children: message });
+    return /* @__PURE__ */ jsx31("p", { className: cn("text-body-2 text-text-secondary", className), children: message });
   }
-  return /* @__PURE__ */ jsxs18("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
-    /* @__PURE__ */ jsx27("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx27(IconMessage2, { size: 16, stroke: 1.5 }) }),
-    /* @__PURE__ */ jsx27("p", { className: "text-body-2 text-text-secondary text-center", children: message })
+  return /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-1 flex-col items-center justify-center gap-2", className), children: [
+    /* @__PURE__ */ jsx31("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx31(IconMessage2, { size: 16, stroke: 1.5 }) }),
+    /* @__PURE__ */ jsx31("p", { className: "text-body-2 text-text-secondary text-center", children: message })
   ] });
 }
 
+// src/ProgressBar.tsx
+import { Progress } from "@base-ui/react/progress";
+import { jsx as jsx32 } from "react/jsx-runtime";
+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.
+  quiet: "h-1 w-full overflow-hidden rounded-full bg-bg-inset"
+};
+var INDICATOR_CLASSES = {
+  default: "h-full rounded-full bg-success-default transition-[width]",
+  quiet: "h-full rounded-full bg-success-muted transition-[width] duration-300"
+};
+function ProgressBar({ value, max, label, variant = "default", className }) {
+  return (
+    // `max={0}` needs no guard: Base UI reads the 0/0 share as an empty bar.
+    /* @__PURE__ */ jsx32(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx32(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx32(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
+  );
+}
+
 // src/Skeleton.tsx
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 function SkeletonBar({ className, style }) {
-  return /* @__PURE__ */ jsx28("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
+  return /* @__PURE__ */ jsx33("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
 }
 var ROW_BAR_WIDTHS = [150, 100, 170, 120, 90, 140, 110, 160];
 function SkeletonRow({ barWidth = 130 }) {
-  return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
-    /* @__PURE__ */ jsx28(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
-    /* @__PURE__ */ jsx28(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
+  return /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
+    /* @__PURE__ */ jsx33(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
+    /* @__PURE__ */ jsx33(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
   ] });
 }
 function SkeletonList({ rows = 8, className }) {
-  return /* @__PURE__ */ jsx28("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx28(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
+  return /* @__PURE__ */ jsx33("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx33(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
 }
 
 // src/Breadcrumb.tsx
-import { Fragment as Fragment4, useCallback as useCallback2, useLayoutEffect, useRef as useRef4, useState as useState5 } from "react";
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState6 } from "react";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
-  const navRef = useRef4(null);
-  const labelRefs = useRef4([]);
-  const [truncated, setTruncated] = useState5(/* @__PURE__ */ new Set());
+  const navRef = useRef5(null);
+  const labelRefs = useRef5([]);
+  const [truncated, setTruncated] = useState6(/* @__PURE__ */ new Set());
   const measure = useCallback2(() => {
     const next = /* @__PURE__ */ new Set();
     labelRefs.current.forEach((el, index) => {
@@ -1472,7 +1803,7 @@ function Breadcrumb({ items, className }) {
     });
     setTruncated((prev) => prev.size === next.size && [...next].every((i) => prev.has(i)) ? prev : next);
   }, []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     measure();
     const nav = navRef.current;
     if (!nav || typeof ResizeObserver === "undefined") return;
@@ -1480,7 +1811,7 @@ function Breadcrumb({ items, className }) {
     observer.observe(nav);
     return () => observer.disconnect();
   }, [measure, items]);
-  return /* @__PURE__ */ jsx29("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-[14px] leading-[140%]", className), children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx34("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-[14px] leading-[140%]", 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(
@@ -1494,24 +1825,24 @@ function Breadcrumb({ items, className }) {
     const setLabelRef = (el) => {
       labelRefs.current[index] = el;
     };
-    const crumb = item.href ? /* @__PURE__ */ jsx29("a", { ref: setLabelRef, href: item.href, onClick: item.onClick, className: cn(text, "hover:text-text-primary"), children: item.label }) : /* @__PURE__ */ jsx29("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
-    return /* @__PURE__ */ jsxs20(Fragment4, { children: [
-      index > 0 && /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
-      item.icon && /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
+    const crumb = item.href ? /* @__PURE__ */ jsx34("a", { ref: setLabelRef, href: item.href, onClick: item.onClick, className: cn(text, "hover:text-text-primary"), children: item.label }) : /* @__PURE__ */ jsx34("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+    return /* @__PURE__ */ jsxs22(Fragment6, { children: [
+      index > 0 && /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+      item.icon && /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
       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__ */ jsx29(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+        /* @__PURE__ */ jsx34(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
       ) : crumb
     ] }, `${item.label}-${index}`);
   }) });
 }
 
 // src/NavItem.tsx
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs23(
     "a",
     {
       href,
@@ -1526,9 +1857,9 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx30("span", { className: "flex shrink-0 items-center", children: icon }),
-        /* @__PURE__ */ jsx30("span", { className: "flex-1 truncate", children: label }),
-        count ? /* @__PURE__ */ jsx30(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx30("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+        icon && /* @__PURE__ */ jsx35("span", { className: "flex shrink-0 items-center", children: icon }),
+        /* @__PURE__ */ jsx35("span", { className: "flex-1 truncate", children: label }),
+        count ? /* @__PURE__ */ jsx35(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx35("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
       ]
     }
   );
@@ -1537,7 +1868,7 @@ function NavItem({ label, href, count, countLabel, active = false, icon, classNa
 // src/Popover.tsx
 import { useMemo as useMemo2 } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs24 } 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 }) {
@@ -1546,7 +1877,7 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
     if (anchor instanceof Element) return anchor;
     return { getBoundingClientRect: () => anchor };
   }, [anchor]);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs24(
     BasePopover.Root,
     {
       open,
@@ -1554,8 +1885,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
       actionsRef,
       modal: false,
       children: [
-        trigger && /* @__PURE__ */ jsx31(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
-        /* @__PURE__ */ jsx31(BasePopover.Portal, { children: /* @__PURE__ */ jsx31(
+        trigger && /* @__PURE__ */ jsx36(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
+        /* @__PURE__ */ jsx36(BasePopover.Portal, { children: /* @__PURE__ */ jsx36(
           BasePopover.Positioner,
           {
             anchor: anchorTarget,
@@ -1564,15 +1895,15 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
             sideOffset: GAP5,
             collisionPadding: VIEWPORT_PAD5,
             className: "z-50 data-[anchor-hidden]:hidden",
-            children: /* @__PURE__ */ jsx31(
+            children: /* @__PURE__ */ jsx36(
               BasePopover.Popup,
               {
                 "aria-label": ariaLabel,
                 initialFocus: trigger ? void 0 : false,
                 finalFocus,
                 className: cn("min-w-[180px] outline-none p-0", className),
-                render: /* @__PURE__ */ jsx31(MenuPanel, {}),
-                children: /* @__PURE__ */ jsx31(
+                render: /* @__PURE__ */ jsx36(MenuPanel, {}),
+                children: /* @__PURE__ */ jsx36(
                   ScrollArea,
                   {
                     viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
@@ -1591,9 +1922,9 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
 
 // src/Toolbar.tsx
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
-  const strip = /* @__PURE__ */ jsx32(
+  const strip = /* @__PURE__ */ jsx37(
     BaseToolbar.Root,
     {
       "aria-label": ariaLabel,
@@ -1604,24 +1935,24 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
     }
   );
   if (!surface) return strip;
-  return /* @__PURE__ */ jsx32(MenuPanel, { className: "w-fit p-1", children: strip });
+  return /* @__PURE__ */ jsx37(MenuPanel, { className: "w-fit p-1", children: strip });
 }
 function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx37(
     BaseToolbar.Button,
     {
       ref,
       disabled: disabled || !!disabledReason,
       focusableWhenDisabled: true,
-      render: /* @__PURE__ */ jsx32(IconButton, { disabled, disabledReason, ...props })
+      render: /* @__PURE__ */ jsx37(IconButton, { disabled, disabledReason, ...props })
     }
   );
 }
 function ToolbarInput(props) {
-  return /* @__PURE__ */ jsx32(BaseToolbar.Input, { render: /* @__PURE__ */ jsx32(TextInput, {}), ...props });
+  return /* @__PURE__ */ jsx37(BaseToolbar.Input, { render: /* @__PURE__ */ jsx37(TextInput, {}), ...props });
 }
 function ToolbarSeparator({ className }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx37(
     BaseToolbar.Separator,
     {
       orientation: "vertical",
@@ -1631,9 +1962,9 @@ function ToolbarSeparator({ className }) {
 }
 
 // src/ReactionPicker.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
-  return /* @__PURE__ */ jsx33(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
+  return /* @__PURE__ */ jsx38(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
@@ -1643,14 +1974,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__ */ jsx33(
+    /* @__PURE__ */ jsx38(
       ToolbarButton,
       {
         "aria-label": option.label,
         tooltip: option.label,
         onClick: () => onSelect(option.emoji),
         className: "size-7 text-[18px] leading-none",
-        children: /* @__PURE__ */ jsx33("span", { "aria-hidden": "true", children: option.emoji })
+        children: /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", children: option.emoji })
       },
       option.emoji
     )
@@ -1659,23 +1990,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 jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var GAP6 = 12;
 var VIEWPORT_PAD6 = 8;
 var OPEN_DELAY2 = 350;
 var CLOSE_DELAY = 200;
 function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, closeDelay = CLOSE_DELAY, className, wrapperClassName }) {
-  return /* @__PURE__ */ jsxs23(BasePreviewCard.Root, { children: [
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs25(BasePreviewCard.Root, { children: [
+    /* @__PURE__ */ jsx39(
       BasePreviewCard.Trigger,
       {
         delay,
         closeDelay,
-        render: /* @__PURE__ */ jsx34("span", { className: cn("inline-flex", wrapperClassName) }),
+        render: /* @__PURE__ */ jsx39("span", { className: cn("inline-flex", wrapperClassName) }),
         children
       }
     ),
-    /* @__PURE__ */ jsx34(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx39(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx39(
       BasePreviewCard.Positioner,
       {
         side,
@@ -1683,12 +2014,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__ */ jsx34(
+        children: /* @__PURE__ */ jsx39(
           BasePreviewCard.Popup,
           {
             className: cn("w-[360px] p-3 outline-none", className),
-            render: /* @__PURE__ */ jsx34(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx34(ScrollArea, { viewportClassName: "max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]", contentClassName: "flex flex-col gap-3 [&>*]:shrink-0", children: content })
+            render: /* @__PURE__ */ jsx39(MenuPanel, {}),
+            children: /* @__PURE__ */ jsx39(ScrollArea, { viewportClassName: "max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]", contentClassName: "flex flex-col gap-3 [&>*]:shrink-0", children: content })
           }
         )
       }
@@ -1697,15 +2028,15 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
 }
 
 // src/Rail.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
-  return /* @__PURE__ */ jsx35("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__ */ jsx40("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 jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 function RailItem({ href, icon, label, active = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs26(
     "a",
     {
       href,
@@ -1713,14 +2044,14 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
       className: cn("group flex w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx41(
           "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__ */ jsx36(
+            children: /* @__PURE__ */ jsx41(
               "span",
               {
                 className: cn(
@@ -1732,49 +2063,49 @@ function RailItem({ href, icon, label, active = false, className, ...props }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx36("span", { className: cn("text-center text-[9px] font-medium leading-[115%]", active ? "text-text-primary" : "text-text-secondary"), children: label })
+        /* @__PURE__ */ jsx41("span", { className: cn("text-center text-[9px] font-medium leading-[115%]", active ? "text-text-primary" : "text-text-secondary"), children: label })
       ]
     }
   );
 }
 
 // src/Sidebar.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx42(
     "nav",
     {
       "aria-label": ariaLabel,
       className: cn("flex w-60 shrink-0 flex-col border-r border-border-default bg-bg-surface", className),
-      children: /* @__PURE__ */ jsx37(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-px px-2.5 py-3", children })
+      children: /* @__PURE__ */ jsx42(ScrollArea, { className: "min-h-0 flex-1", contentClassName: "flex flex-col gap-px px-2.5 py-3", children })
     }
   );
 }
 
 // src/Property.tsx
-import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 function Property({ label, layout = "row", children, className }) {
   if (layout === "stacked") {
     return (
       // 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__ */ jsxs25("div", { className: cn("flex flex-col gap-3", className), children: [
-        /* @__PURE__ */ jsx38("span", { className: "text-menu uppercase tracking-[0.08em] text-text-secondary", children: label }),
+      /* @__PURE__ */ jsxs27("div", { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsx43("span", { className: "text-menu uppercase tracking-[0.08em] text-text-secondary", children: label }),
         children
       ] })
     );
   }
-  return /* @__PURE__ */ jsxs25("div", { className: cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx38("span", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+  return /* @__PURE__ */ jsxs27("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx43("span", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
     children
   ] });
 }
 
 // src/Reaction.tsx
-import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, type, ...props }) {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs28(
     "button",
     {
       type: type ?? "button",
@@ -1797,8 +2128,8 @@ function Reaction({ emoji, count, pressed = false, className, type, ...props })
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx39("span", { "aria-hidden": "true", className: "shrink-0 text-[16px] leading-none", children: emoji }),
-        /* @__PURE__ */ jsx39("span", { className: "text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tabular-nums", children: count })
+        /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", className: "shrink-0 text-[16px] leading-none", children: emoji }),
+        /* @__PURE__ */ jsx44("span", { className: "text-chip signal:font-mono signal:text-[10px] signal:font-semibold signal:tabular-nums", children: count })
       ]
     }
   );
@@ -1807,9 +2138,9 @@ function Reaction({ emoji, count, pressed = false, className, type, ...props })
 // src/SearchInput.tsx
 import "react";
 import { Input as Input3 } from "@base-ui/react/input";
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: cn(
@@ -1819,7 +2150,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
         className
       ),
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx45(
           Input3,
           {
             className: "flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none",
@@ -1827,7 +2158,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsx40(Kbd, { children: shortcut })
+        shortcut && /* @__PURE__ */ jsx45(Kbd, { children: shortcut })
       ]
     }
   );
@@ -1836,17 +2167,17 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
 // src/SectionHeader.tsx
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", render, className }) {
   const titleElement = useRender({
-    render: render ?? (chevron ? /* @__PURE__ */ jsx41("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx41("span", {})),
+    render: render ?? (chevron ? /* @__PURE__ */ jsx46("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx46("span", {})),
     props: {
       // `text-left`: a button centres its text. `h-full` and `flex-1`: the
       // whole row up to the actions is the hit target, as it was when the
       // row itself carried the click.
       className: "flex h-full min-w-0 flex-1 items-center gap-1 text-left",
-      children: /* @__PURE__ */ jsxs28(Fragment5, { children: [
-        chevron && /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsxs30(Fragment7, { children: [
+        chevron && /* @__PURE__ */ jsx46(
           IconChevronRight2,
           {
             size: 12,
@@ -1854,11 +2185,11 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
             className: cn("shrink-0 text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
           }
         ),
-        /* @__PURE__ */ jsx41(SectionLabel, { children: title })
+        /* @__PURE__ */ jsx46(SectionLabel, { children: title })
       ] })
     }
   });
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cn(
@@ -1871,15 +2202,15 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
       ),
       children: [
         titleElement,
-        trailing != null && /* @__PURE__ */ jsx41("div", { className: "flex shrink-0 items-center", children: trailing }),
-        actions && actions.length > 0 && /* @__PURE__ */ jsx41(
+        trailing != null && /* @__PURE__ */ jsx46("div", { className: "flex shrink-0 items-center", children: trailing }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx46(
           "div",
           {
             className: cn(
               "-mr-1 flex shrink-0 items-center gap-1",
               showActions === "hover" && "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
             ),
-            children: actions.map((action) => /* @__PURE__ */ jsx41(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
+            children: actions.map((action) => /* @__PURE__ */ jsx46(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip))
           }
         )
       ]
@@ -1888,9 +2219,9 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
 }
 
 // src/CollapsibleSection.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
 var OPEN = "open";
 var CLOSED = "closed";
 function readStored(key) {
@@ -1910,21 +2241,21 @@ function writeStored(key, open) {
   }
 }
 function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, children, className, contentClassName }) {
-  const [openState, setOpenState] = useState6(() => readStored(storageKey) ?? defaultOpen);
+  const [openState, setOpenState] = useState7(() => readStored(storageKey) ?? defaultOpen);
   const open = openProp ?? openState;
   const setOpen = (next) => {
     setOpenState(next);
     writeStored(storageKey, next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs29(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx42(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx42(Collapsible.Trigger, {}) }),
-    /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs31(Collapsible.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx47(SectionHeader, { title, chevron: true, isExpanded: open, trailing, actions, showActions, className: "shrink-0", render: /* @__PURE__ */ jsx47(Collapsible.Trigger, {}) }),
+    /* @__PURE__ */ jsx47(
       Collapsible.Panel,
       {
         hiddenUntilFound: true,
         className: "h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0",
-        children: /* @__PURE__ */ jsx42("div", { className: cn("flex flex-col", contentClassName), children })
+        children: /* @__PURE__ */ jsx47("div", { className: cn("flex flex-col", contentClassName), children })
       }
     )
   ] });
@@ -1932,9 +2263,9 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
 
 // src/Tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx48(
     BaseTabs.Root,
     {
       value: active,
@@ -1942,14 +2273,14 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
         if (details.reason === "none") onChange(value);
       },
       className,
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx48(
         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__ */ jsxs30(
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs32(
             BaseTabs.Tab,
             {
               value: tab.id,
@@ -1962,9 +2293,9 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
               ),
               children: [
                 tab.icon,
-                /* @__PURE__ */ jsxs30("span", { className: "flex items-baseline", children: [
+                /* @__PURE__ */ jsxs32("span", { className: "flex items-baseline", children: [
                   tab.label,
-                  tab.count !== void 0 ? /* @__PURE__ */ jsx43("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+                  tab.count !== void 0 ? /* @__PURE__ */ jsx48("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
                 ] })
               ]
             },
@@ -1977,10 +2308,10 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
 }
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo3, useState as useState7 } from "react";
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo3, useState as useState8 } from "react";
 import { createPortal } from "react-dom";
-import { IconAlertCircle, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
-import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
+import { IconAlertCircle as IconAlertCircle2, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 var SURFACE_STYLES = {
   success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
   brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]",
@@ -1992,7 +2323,7 @@ var ICONS = {
   success: IconCircleCheck,
   brand: IconCircleCheck,
   neutral: IconCircleCheck,
-  warning: IconAlertCircle,
+  warning: IconAlertCircle2,
   error: IconCircleX
 };
 var ICON_STYLES = {
@@ -2015,7 +2346,7 @@ var ACTION_BORDER_STYLES = {
 function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
   const hasAction = !!(actionLabel && onAction);
   const LeadingIcon = ICONS[type];
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: cn(
@@ -2027,11 +2358,11 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 shrink-0", children: [
-          leadingIcon && /* @__PURE__ */ jsx44(LeadingIcon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) }),
-          /* @__PURE__ */ jsx44("span", { className: "font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap", children: label })
+        /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2 shrink-0", children: [
+          leadingIcon && /* @__PURE__ */ jsx49(LeadingIcon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) }),
+          /* @__PURE__ */ jsx49("span", { className: "font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap", children: label })
         ] }),
-        hasAction && /* @__PURE__ */ jsx44(
+        hasAction && /* @__PURE__ */ jsx49(
           "button",
           {
             type: "button",
@@ -2041,7 +2372,7 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
               ACTION_BORDER_STYLES[type],
               type === "neutral" ? "hover:border-border-strong" : "hover:opacity-80"
             ),
-            children: /* @__PURE__ */ jsx44("span", { className: "font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap", children: actionLabel })
+            children: /* @__PURE__ */ jsx49("span", { className: "font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap", children: actionLabel })
           }
         )
       ]
@@ -2051,7 +2382,7 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
 var ToastContext = createContext2(null);
 var toastSeq = 0;
 function ToastProvider({ children }) {
-  const [toast, setToast] = useState7(null);
+  const [toast, setToast] = useState8(null);
   const showToast = useCallback3((opts) => {
     setToast({ ...opts, id: ++toastSeq });
   }, []);
@@ -2068,10 +2399,10 @@ function ToastProvider({ children }) {
     return () => clearTimeout(timer);
   }, [toast]);
   const value = useMemo3(() => ({ showToast, dismissToast }), [showToast, dismissToast]);
-  return /* @__PURE__ */ jsxs31(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs33(ToastContext.Provider, { value, children: [
     children,
     toast && createPortal(
-      /* @__PURE__ */ jsx44("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx49("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx49(
         Toast,
         {
           className: "pointer-events-auto",
@@ -2096,11 +2427,13 @@ function useToast() {
 }
 export {
   AppShell,
+  AttachmentCard,
   Avatar,
   AvatarGroup,
   Banner,
   Breadcrumb,
   Button,
+  Card,
   Checkbox,
   Chip,
   ChipInput,
@@ -2113,11 +2446,15 @@ export {
   EnterHint,
   Field,
   FieldLine,
+  INLINE_CHIP_CLASSES,
+  INLINE_CHIP_TONE_CLASSES,
   IconButton,
   IdentityMenu,
   IdentityPanel,
+  InlineChip,
   InputChip,
   Kbd,
+  Link,
   Menu,
   MenuItem,
   MenuPanel,
@@ -2129,6 +2466,7 @@ export {
   PersonTrigger,
   Popover,
   PreviewCard,
+  ProgressBar,
   Property,
   Rail,
   RailItem,
@@ -2159,6 +2497,7 @@ export {
   cn,
   hueFor,
   initialsFor,
+  inlineChipClassName,
   useToast
 };
 //# sourceMappingURL=index.js.map