@estiva-app/ui 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,28 +1,112 @@
-// src/Avatar.tsx
-import { useState } from "react";
-import { IconUserFilled } from "@tabler/icons-react";
-
 // src/cn.ts
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+var FONT_SIZE_TOKENS = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "body-1",
+  "body-2",
+  "body-2-strong",
+  "caption",
+  "menu",
+  "btn-default",
+  "btn-small",
+  "input-label",
+  "input-value",
+  "input-helper",
+  "chip"
+];
+var twMerge = extendTailwindMerge({
+  extend: { classGroups: { "font-size": [{ text: FONT_SIZE_TOKENS }] } }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/TopBar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TopBar({ variant = "solid", menu, logo, search, right, className }) {
+  const floating = variant === "floating";
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex h-[52px] items-center pl-5 pr-[26px]",
+        floating ? "pointer-events-none absolute left-0 right-0 top-0 z-10" : "shrink-0 gap-4 border-b border-border-default bg-bg-surface",
+        className
+      ),
+      children: [
+        (menu || logo) && /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2", floating && "pointer-events-auto"), children: [
+          menu,
+          logo && /* @__PURE__ */ jsx("div", { className: "flex items-center text-body-2-strong text-text-primary", children: logo })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1 items-center justify-center", floating && "pointer-events-auto"), children: search }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center gap-[6px]", floating && "pointer-events-auto"), children: right })
+      ]
+    }
+  );
+}
+
+// src/AppShell.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav, children }) {
+  const bar = /* @__PURE__ */ jsx2(TopBar, { variant, menu, logo, search, right: identity });
+  if (variant === "floating") {
+    return /* @__PURE__ */ jsxs2("div", { className: "relative h-full min-h-0 overflow-hidden bg-bg-base", children: [
+      bar,
+      /* @__PURE__ */ jsxs2("div", { className: "flex h-full pb-4 pr-4 pt-[52px]", children: [
+        nav,
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-bg-surface",
+              "signal:border signal:border-border-subtle signal:shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]"
+            ),
+            children: [
+              banner,
+              /* @__PURE__ */ jsx2("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full min-h-0 flex-col bg-bg-base text-text-primary", children: [
+    bar,
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1", children: [
+      nav,
+      /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
+        banner,
+        /* @__PURE__ */ jsx2("main", { className: "min-w-0 flex-1 overflow-y-auto", children })
+      ] })
+    ] })
+  ] });
+}
+
 // src/Avatar.tsx
-import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconUserFilled } from "@tabler/icons-react";
+import { jsx as jsx3 } 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) => name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+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, className }) {
   const [broken, setBroken] = useState(false);
   const label = name || alt;
   const picture = src && !broken ? src : void 0;
-  return /* @__PURE__ */ jsx("div", { className: cn("rounded-sm overflow-hidden shrink-0 bg-bg-inset", className), style: { width: size, height: size }, children: picture ? /* @__PURE__ */ jsx("img", { src: picture, alt: alt || name || "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3("div", { className: cn("rounded-sm overflow-hidden shrink-0 bg-bg-inset", className), style: { width: size, height: size }, children: picture ? /* @__PURE__ */ jsx3("img", { src: picture, alt: alt || name || "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx3(
     "div",
     {
       className: "w-full h-full flex items-center justify-center font-semibold",
@@ -33,11 +117,40 @@ function Avatar({ src, name, alt = "", size = 36, className }) {
       },
       children: initialsFor(label)
     }
-  ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx(IconUserFilled, { size: Math.round(size * 0.5) }) }) });
+  ) : /* @__PURE__ */ jsx3("div", { className: "w-full h-full bg-accent-muted flex items-center justify-center text-text-muted", children: /* @__PURE__ */ jsx3(IconUserFilled, { size: Math.round(size * 0.5) }) }) });
+}
+
+// src/AvatarGroup.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function AvatarGroup({ members }) {
+  const visible = members.slice(0, 3);
+  return /* @__PURE__ */ jsx4("div", { className: "flex items-center pr-2", children: visible.map((member, i) => /* @__PURE__ */ jsx4(
+    Avatar,
+    {
+      size: 24,
+      name: member.name,
+      src: member.picture,
+      alt: member.name,
+      className: "-mr-2 relative border-2 border-bg-surface"
+    },
+    i
+  )) });
+}
+
+// src/Banner.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var TONE = {
+  ok: "bg-success-muted text-success-default",
+  error: "bg-error-muted text-error-default",
+  info: "bg-info-muted text-info-default",
+  warning: "bg-warning-muted text-warning-default"
+};
+function Banner({ tone, children, className }) {
+  return /* @__PURE__ */ jsx5("div", { role: tone === "error" ? "alert" : "status", className: cn("px-4 py-2 text-body-2", TONE[tone], className), children });
 }
 
 // src/Button.tsx
-import { jsxs } from "react/jsx-runtime";
+import { jsxs as jsxs3 } from "react/jsx-runtime";
 function Button({
   variant = "muted",
   size = "default",
@@ -49,7 +162,7 @@ function Button({
   ...props
 }) {
   const hasLeadingIcon = !!leadingIcon;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       type,
@@ -78,8 +191,36 @@ function Button({
   );
 }
 
+// src/Checkbox.tsx
+import { IconCheck } from "@tabler/icons-react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Checkbox({ checked, onChange, disabled = false, className, ...aria }) {
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      role: "checkbox",
+      "aria-checked": checked,
+      "aria-label": aria["aria-label"],
+      disabled,
+      onClick: (e) => {
+        e.stopPropagation();
+        onChange?.(!checked);
+      },
+      className: cn(
+        "inline-flex items-center justify-center size-4 shrink-0 rounded-[4px] border transition-colors",
+        checked ? "bg-accent-primary border-accent-primary text-text-inverse" : "bg-transparent border-border-strong hover:border-text-muted",
+        disabled && "opacity-50 pointer-events-none",
+        onChange ? "cursor-pointer" : "pointer-events-none",
+        className
+      ),
+      children: checked && /* @__PURE__ */ jsx6(IconCheck, { size: 12, stroke: 3 })
+    }
+  );
+}
+
 // src/Chip.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var typeStyles = {
   neutral: "bg-bg-inset text-text-primary",
   brand: "bg-accent-muted text-accent-primary signal:border signal:border-[rgba(86,200,255,0.3)]",
@@ -89,27 +230,316 @@ var typeStyles = {
   error: "bg-error-muted text-error-default signal:border signal:border-[rgba(255,107,107,0.3)]"
 };
 function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className }) {
-  return /* @__PURE__ */ jsxs2("div", { className: cn("inline-flex items-center justify-center gap-1.5 rounded-full max-h-[20px] min-w-[16px] px-2 py-1", typeStyles[type], className), children: [
-    leadingIcon && /* @__PURE__ */ jsx2("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
-    label && /* @__PURE__ */ jsx2("span", { className: "text-chip whitespace-nowrap signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums", children: label }),
-    trailingIcon && /* @__PURE__ */ jsx2("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
+  return /* @__PURE__ */ jsxs4("div", { className: cn("inline-flex items-center justify-center gap-1.5 rounded-full max-h-[20px] min-w-[16px] px-2 py-1", typeStyles[type], className), children: [
+    leadingIcon && /* @__PURE__ */ jsx7("span", { className: "flex size-3 shrink-0 items-center justify-center", children: leadingIcon }),
+    label && /* @__PURE__ */ jsx7("span", { className: "text-chip whitespace-nowrap signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums", children: label }),
+    trailingIcon && /* @__PURE__ */ jsx7("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
   ] });
 }
 
-// src/Tooltip.tsx
-import { useCallback, useLayoutEffect, useRef, useState as useState2 } from "react";
+// src/ChipInput.tsx
+import { useState as useState2, useRef as useRef2, useMemo, useEffect as useEffect2, useLayoutEffect } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { IconX } from "@tabler/icons-react";
+
+// src/Menu.tsx
+import { useEffect, useRef } from "react";
+import { IconChevronRight } from "@tabler/icons-react";
 import { createPortal } from "react-dom";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/SectionLabel.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function SectionLabel({ children, className }) {
+  return /* @__PURE__ */ jsx8(
+    "span",
+    {
+      className: cn(
+        "text-[12px] leading-[12px] font-medium text-text-primary signal:font-mono signal:text-[10px] signal:uppercase signal:tracking-[0.14em]",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/Menu.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function Menu({ onClose, position, children, className }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const onDown = (event) => {
+      if (!ref.current?.contains(event.target)) onClose();
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [onClose]);
+  const style = position ? { top: position.top, ..."left" in position ? { left: position.left } : { right: position.right } } : void 0;
+  const node = /* @__PURE__ */ jsx9(
+    "div",
+    {
+      ref,
+      role: "menu",
+      "data-interactive": true,
+      className: cn(
+        "z-50 flex min-w-[180px] flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg",
+        position ? "fixed" : "absolute right-0 top-full mt-1",
+        className
+      ),
+      style,
+      onClick: (event) => event.stopPropagation(),
+      children
+    }
+  );
+  return position ? createPortal(node, document.body) : node;
+}
+function MenuItem({ label, children, size = "default", description, leading, trailing, shortcut, submenu, destructive, selected, className, ...props }) {
+  const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx9("kbd", { className: "inline-flex shrink-0 items-center justify-center rounded-sm border border-border-strong bg-bg-inset px-1 py-px text-caption text-text-secondary", children: shortcut }) : submenu ? /* @__PURE__ */ jsx9(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: cn(
+        "flex w-full cursor-pointer items-center rounded-lg text-left hover:bg-bg-hover transition-colors",
+        // tall: as tall as its content, never shorter than 40px (Katerina,
+        // 2026-09-01) — a single-line picker row sits at 40, a row with a
+        // 32px face and a role line comes out at its natural 48. One rule,
+        // not a hand-picked height per file.
+        size === "tall" ? "min-h-10 gap-3 px-3 py-1.5" : "gap-2 px-2 py-1.5",
+        selected && "bg-bg-hover",
+        className
+      ),
+      ...props,
+      children: [
+        leading && /* @__PURE__ */ jsx9("span", { className: "flex shrink-0 items-center", children: leading }),
+        children ?? /* @__PURE__ */ jsxs5("span", { className: cn("flex min-w-0 flex-1 flex-col", size === "tall" && "gap-[2px]"), children: [
+          /* @__PURE__ */ jsx9("span", { className: cn("truncate text-[14px] leading-[140%]", destructive ? "text-error-default" : "text-text-primary"), children: label }),
+          description && /* @__PURE__ */ jsx9("span", { className: "truncate text-[12px] leading-[120%] text-text-secondary", children: description })
+        ] }),
+        edge && /* @__PURE__ */ jsx9("span", { className: "flex shrink-0 items-center", children: edge })
+      ]
+    }
+  );
+}
+function EnterHint({ label = "Enter" }) {
+  return /* @__PURE__ */ jsxs5("span", { className: "flex shrink-0 items-center gap-2 text-text-muted", children: [
+    /* @__PURE__ */ jsx9("span", { className: "text-[12px] leading-[120%]", children: "\u21A9" }),
+    /* @__PURE__ */ jsx9("span", { className: "text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]", children: label })
+  ] });
+}
+function MenuSection({ label, children, className }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx9("div", { className: cn("flex h-8 items-center px-2", className), children: /* @__PURE__ */ jsx9(SectionLabel, { className: "text-text-secondary", children: label }) }),
+    children
+  ] });
+}
+function MenuRow({ children, className }) {
+  return /* @__PURE__ */ jsx9("div", { className: cn("flex items-center gap-2 px-2 py-1.5", className), children });
+}
+
+// src/ChipInput.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function InputChip({ label, leading, onRemove, className }) {
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn(
+        // Curved, not a pill (Katerina, 2026-09-01): the Avatar keeps its own
+        // rounded-sm corners — never a forced circle — and the chip's corner
+        // follows concentrically: 4px face + 2px inset = rounded-md.
+        "inline-flex items-center gap-1.5 bg-bg-elevated border border-border-subtle rounded-md py-0.5 max-h-[24px]",
+        // The padding follows the contents (Katerina, 2026-09-01): a face
+        // sits 2px from the edge, a bare label needs 8px of air; the ✕
+        // brings its own box, so 4px behind it — 8px when there isn't one.
+        leading ? "pl-[2px]" : "pl-2",
+        onRemove ? "pr-1" : "pr-2",
+        className
+      ),
+      children: [
+        leading && /* @__PURE__ */ jsx10("span", { className: "flex shrink-0 items-center", children: leading }),
+        /* @__PURE__ */ jsx10("span", { className: "text-caption font-medium text-text-primary", children: label }),
+        onRemove && /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            className: "size-4 flex items-center justify-center rounded-full hover:bg-bg-hover text-text-secondary",
+            "aria-label": `Remove ${label}`,
+            children: /* @__PURE__ */ jsx10(IconX, { size: 10, stroke: 1.5 })
+          }
+        )
+      ]
+    }
+  );
+}
+function ChipInput({
+  value,
+  onChange,
+  options,
+  placeholder = "Search\u2026",
+  autoFocus,
+  excludeIds = [],
+  chipLeading,
+  rowLeading
+}) {
+  const [query, setQuery] = useState2("");
+  const [highlight, setHighlight] = useState2(0);
+  const [isFocused, setIsFocused] = useState2(false);
+  const [anchorRect, setAnchorRect] = useState2(null);
+  const wrapperRef = useRef2(null);
+  const inputRef = useRef2(null);
+  const matches = useMemo(() => {
+    const selectedIds = new Set(value.map((o) => o.id));
+    const excludedIds = new Set(excludeIds);
+    const q = query.trim().toLowerCase();
+    return options.filter((o) => {
+      if (selectedIds.has(o.id)) return false;
+      if (excludedIds.has(o.id)) return false;
+      if (!q) return true;
+      return o.label.toLowerCase().includes(q) || (o.description ?? "").toLowerCase().includes(q);
+    });
+  }, [query, value, excludeIds, options]);
+  useEffect2(() => {
+    setHighlight(0);
+  }, [query, matches.length]);
+  const showDropdown = isFocused && query.trim().length > 0 && matches.length > 0;
+  useLayoutEffect(() => {
+    if (!showDropdown) return;
+    const update = () => {
+      if (wrapperRef.current) setAnchorRect(wrapperRef.current.getBoundingClientRect());
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [showDropdown, value.length]);
+  function addOption(option) {
+    onChange([...value, option]);
+    setQuery("");
+    inputRef.current?.focus();
+  }
+  function removeOption(id) {
+    onChange(value.filter((o) => o.id !== id));
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Backspace" && query === "" && value.length > 0) {
+      e.preventDefault();
+      removeOption(value[value.length - 1].id);
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlight((h) => Math.min(h + 1, Math.max(0, matches.length - 1)));
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlight((h) => Math.max(h - 1, 0));
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const target = matches[highlight];
+      if (target) addOption(target);
+      return;
+    }
+    if (e.key === "Escape") {
+      if (query !== "") {
+        e.preventDefault();
+        setQuery("");
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref: wrapperRef,
+        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",
+        onClick: () => inputRef.current?.focus(),
+        children: [
+          value.map((o) => /* @__PURE__ */ jsx10(InputChip, { label: o.label, leading: chipLeading?.(o), onRemove: () => removeOption(o.id) }, o.id)),
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              ref: inputRef,
+              autoFocus,
+              type: "text",
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              onKeyDown: handleKeyDown,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => {
+                setTimeout(() => setIsFocused(false), 150);
+              },
+              placeholder: value.length === 0 ? placeholder : "",
+              className: "flex-1 min-w-[120px] bg-transparent text-body-2 text-text-primary placeholder:text-text-muted outline-none border-none"
+            }
+          )
+        ]
+      }
+    ),
+    showDropdown && anchorRect && createPortal2(
+      /* @__PURE__ */ jsx10(
+        "div",
+        {
+          className: "fixed z-[60] max-h-[240px] overflow-y-auto bg-bg-elevated border border-border-default rounded-lg shadow-lg",
+          style: {
+            top: anchorRect.bottom + 4,
+            left: anchorRect.left,
+            width: anchorRect.width
+          },
+          children: matches.map((o, i) => /* @__PURE__ */ jsx10(
+            MenuItem,
+            {
+              size: "tall",
+              className: "h-12 rounded-none",
+              leading: rowLeading?.(o),
+              label: o.label,
+              description: o.description,
+              selected: i === highlight,
+              onMouseEnter: () => setHighlight(i),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                addOption(o);
+              }
+            },
+            o.id
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/Tooltip.tsx
+import { useCallback, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function Tooltip({ label, className }) {
-  return /* @__PURE__ */ jsx3("div", { role: "tooltip", className: cn("bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center px-2 shadow-lg", className), children: /* @__PURE__ */ jsx3("span", { className: "text-caption text-text-primary whitespace-nowrap", children: label }) });
+  return /* @__PURE__ */ jsx11("div", { role: "tooltip", className: cn("bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center px-2 shadow-lg", className), children: /* @__PURE__ */ jsx11("span", { className: "text-caption text-text-primary whitespace-nowrap", children: label }) });
 }
 var GAP = 6;
 var VIEWPORT_PAD = 8;
-function WithTooltip({ label, placement = "top", children }) {
-  const [show, setShow] = useState2(false);
-  const ref = useRef(null);
-  const tooltipRef = useRef(null);
-  const [style, setStyle] = useState2({ position: "fixed", zIndex: 9999, pointerEvents: "none", visibility: "hidden" });
+function WithTooltip({ label, placement = "top", wrapperClassName, children }) {
+  const [show, setShow] = useState3(false);
+  const ref = useRef3(null);
+  const tooltipRef = useRef3(null);
+  const [style, setStyle] = useState3({ position: "fixed", zIndex: 9999, pointerEvents: "none", visibility: "hidden" });
   const reposition = useCallback(() => {
     const trigger = ref.current;
     const tip = tooltipRef.current;
@@ -121,20 +551,20 @@ function WithTooltip({ label, placement = "top", children }) {
     left = Math.max(VIEWPORT_PAD, Math.min(left, window.innerWidth - tipRect.width - VIEWPORT_PAD));
     setStyle({ position: "fixed", top, left, zIndex: 9999, pointerEvents: "none", visibility: "visible" });
   }, [placement]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (show) reposition();
   }, [show, reposition]);
-  return /* @__PURE__ */ jsxs3("div", { ref, className: "inline-flex shrink-0", onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), children: [
+  return /* @__PURE__ */ jsxs7("div", { ref, className: cn("inline-flex shrink-0", wrapperClassName), onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), children: [
     children,
-    show && createPortal(
-      /* @__PURE__ */ jsx3("div", { ref: tooltipRef, style, children: /* @__PURE__ */ jsx3(Tooltip, { label }) }),
+    show && createPortal3(
+      /* @__PURE__ */ jsx11("div", { ref: tooltipRef, style, children: /* @__PURE__ */ jsx11(Tooltip, { label }) }),
       document.body
     )
   ] });
 }
 
 // src/IconButton.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function IconButton({
   variant = "muted",
   className,
@@ -145,7 +575,7 @@ function IconButton({
   type = "button",
   ...props
 }) {
-  const button = /* @__PURE__ */ jsx4(
+  const button = /* @__PURE__ */ jsx12(
     "button",
     {
       type,
@@ -166,36 +596,198 @@ function IconButton({
     }
   );
   if (tooltip) {
-    return /* @__PURE__ */ jsx4(WithTooltip, { label: tooltip, placement: tooltipPlacement, children: button });
+    return /* @__PURE__ */ jsx12(WithTooltip, { label: tooltip, placement: tooltipPlacement, children: button });
   }
   return button;
 }
 
+// src/IdentityMenu.tsx
+import { useState as useState4 } from "react";
+
+// src/Divider.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Divider({ orientation = "horizontal", className }) {
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": orientation,
+      className: cn("bg-border-subtle", orientation === "horizontal" ? "h-px mx-3" : "w-px self-stretch shrink-0", className)
+    }
+  );
+}
+
+// src/Person.tsx
+import { jsx as jsx14, jsxs as jsxs8 } 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__ */ jsxs8("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx14(Avatar, { name, src: picture, size }),
+      /* @__PURE__ */ jsx14("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
+    ] })
+  );
+}
+
+// src/PersonTrigger.tsx
+import { IconChevronDown } from "@tabler/icons-react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
+  if (compact) {
+    return /* @__PURE__ */ jsx15(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        className: cn("cursor-pointer rounded-full focus:outline-none", className),
+        ...props,
+        children: /* @__PURE__ */ jsx15(Avatar, { name, src: picture, size: size ?? 36 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      className: cn(
+        // The size is an arbitrary value (the body-2 token): this list goes through
+        // cn(), and tw-merge silently drops a custom text-{size} once a
+        // text-{colour} follows it. Measured: the name rendered 16px.
+        "flex h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-[14px] leading-[140%] text-text-primary transition-colors hover:bg-bg-hover",
+        open && "bg-bg-hover",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx15(Person, { name, picture, fallback, size: size ?? 22 }),
+        /* @__PURE__ */ jsx15(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+      ]
+    }
+  );
+}
+
+// src/IdentityMenu.tsx
+import { Fragment, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, className, children }) {
+  const act = (action) => () => {
+    onClose();
+    action();
+  };
+  const appRows = typeof children === "function" ? children(onClose) : children;
+  return /* @__PURE__ */ jsxs10(Menu, { onClose, className: cn("w-72", className), children: [
+    /* @__PURE__ */ jsxs10(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
+      /* @__PURE__ */ jsx16(MenuRow, { children: /* @__PURE__ */ jsx16(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
+      /* @__PURE__ */ jsx16(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__ */ jsxs10(Note, { children: [
+        me.email,
+        " \xB7 known to Estiva, never published to the relay"
+      ] })
+    ] }),
+    relayUrl && /* @__PURE__ */ jsxs10(Fragment, { children: [
+      /* @__PURE__ */ jsx16(Divider, { className: "mx-0 my-2" }),
+      /* @__PURE__ */ jsxs10(MenuSection, { label: "Workspace", children: [
+        /* @__PURE__ */ jsx16(MenuRow, { children: /* @__PURE__ */ jsx16("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
+        /* @__PURE__ */ jsx16(Note, { children: "Everyone on this relay shares this workspace, in every app." })
+      ] })
+    ] }),
+    appRows && /* @__PURE__ */ jsxs10(Fragment, { children: [
+      /* @__PURE__ */ jsx16(Divider, { className: "mx-0 my-2" }),
+      appRows
+    ] }),
+    signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx16(Divider, { className: "mx-0 my-2" }) : null,
+    signedIn && idBase && /* @__PURE__ */ jsx16(
+      MenuItem,
+      {
+        label: "Edit your profile in Estiva ID",
+        onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
+      }
+    ),
+    onCopyKey && /* @__PURE__ */ jsx16(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
+    idBase && onSignOut && /* @__PURE__ */ jsx16(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
+  ] });
+}
+function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
+  const [open, setOpen] = useState4(false);
+  return /* @__PURE__ */ jsxs10("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx16(
+      PersonTrigger,
+      {
+        name: me.name,
+        picture: me.picture,
+        fallback: "Anonymous",
+        compact,
+        size: compact ? 36 : void 0,
+        open,
+        onMouseDown: (event) => event.stopPropagation(),
+        onClick: () => setOpen((value) => !value),
+        "aria-label": compact ? "Account menu" : void 0
+      }
+    ),
+    open && /* @__PURE__ */ jsx16(
+      IdentityPanel,
+      {
+        me,
+        signedIn,
+        relayUrl,
+        idBase,
+        onCopyKey,
+        onSignOut,
+        onClose: () => setOpen(false),
+        children
+      }
+    )
+  ] });
+}
+function Note({ children }) {
+  return /* @__PURE__ */ jsx16("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
+}
+
 // src/Field.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function Field({ label, required = false, children }) {
-  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs4("label", { className: `text-input-label text-text-primary${required ? " flex items-center" : ""}`, children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs11("label", { className: `text-input-label text-text-primary${required ? " flex items-center" : ""}`, children: [
       label,
-      required && /* @__PURE__ */ jsx5("span", { className: "text-error-default ml-0.5", children: "*" })
+      required && /* @__PURE__ */ jsx17("span", { className: "text-error-default ml-0.5", children: "*" })
     ] }),
     children
   ] });
 }
 
 // src/Select.tsx
-import { IconCheck, IconChevronDown } from "@tabler/icons-react";
-import { useCallback as useCallback2, useEffect, useId, useMemo, useRef as useRef2, useState as useState3 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
+import { useCallback as useCallback2, useEffect as useEffect3, useId, useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function fitMenu({
+  anchor,
+  menu,
+  viewport
+}) {
+  const MARGIN = 8;
+  const GAP2 = 4;
+  const CAP = 288;
+  const left = Math.max(MARGIN, Math.min(anchor.left, viewport.width - menu.width - MARGIN));
+  const below = viewport.height - anchor.bottom - GAP2 - MARGIN;
+  const above = anchor.top - GAP2 - MARGIN;
+  const openUp = below < Math.min(menu.contentHeight, CAP) && above > below;
+  const maxHeight = Math.max(Math.min(CAP, openUp ? above : below), 120);
+  return openUp ? { left, bottom: viewport.height - anchor.top + GAP2, maxHeight } : { left, top: anchor.bottom + GAP2, maxHeight };
+}
 function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, className }) {
   const id = useId();
-  const triggerRef = useRef2(null);
-  const menuRef = useRef2(null);
-  const [rect, setRect] = useState3(null);
+  const triggerRef = useRef4(null);
+  const menuRef = useRef4(null);
+  const [rect, setRect] = useState5(null);
+  const [placement, setPlacement] = useState5(null);
   const open = rect !== null;
-  const selectedIndex = useMemo(() => Math.max(0, options.findIndex((o) => o.value === value)), [options, value]);
-  const [activeIndex, setActiveIndex] = useState3(selectedIndex);
+  const selectedIndex = useMemo2(() => Math.max(0, options.findIndex((o) => o.value === value)), [options, value]);
+  const [activeIndex, setActiveIndex] = useState5(selectedIndex);
   const close = useCallback2((refocus) => {
     setRect(null);
     if (refocus) triggerRef.current?.focus();
@@ -204,21 +796,42 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
     setActiveIndex(selectedIndex);
     setRect(triggerRef.current?.getBoundingClientRect() ?? null);
   }, [selectedIndex]);
-  useEffect(() => {
+  useLayoutEffect3(() => {
+    if (!rect || !menuRef.current) {
+      setPlacement(null);
+      return;
+    }
+    setPlacement(
+      fitMenu({
+        anchor: { left: rect.left, top: rect.top, bottom: rect.bottom },
+        menu: { width: menuRef.current.offsetWidth, contentHeight: menuRef.current.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight }
+      })
+    );
+  }, [rect, options.length]);
+  useEffect3(() => {
+    if (!open) return;
+    document.getElementById(`${id}-${activeIndex}`)?.scrollIntoView?.({ block: "nearest" });
+  }, [open, activeIndex, id]);
+  useEffect3(() => {
     if (!open) return;
     const onDown = (e) => {
       if (menuRef.current?.contains(e.target)) return;
       if (triggerRef.current?.contains(e.target)) return;
       setRect(null);
     };
-    const onMove = () => setRect(null);
+    const onResize = () => setRect(null);
+    const onScroll = (e) => {
+      if (e.target instanceof Node && menuRef.current?.contains(e.target)) return;
+      setRect(null);
+    };
     document.addEventListener("mousedown", onDown);
-    window.addEventListener("resize", onMove);
-    window.addEventListener("scroll", onMove, true);
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, true);
     return () => {
       document.removeEventListener("mousedown", onDown);
-      window.removeEventListener("resize", onMove);
-      window.removeEventListener("scroll", onMove, true);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
     };
   }, [open]);
   const pick = (index) => {
@@ -267,8 +880,8 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
     }
   };
   const selected = options.find((o) => o.value === value);
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs12(Fragment2, { children: [
+    /* @__PURE__ */ jsxs12(
       "button",
       {
         ref: triggerRef,
@@ -280,9 +893,20 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
         onClick: () => open ? close(false) : openMenu(),
         onKeyDown,
         className: cn(
-          "flex w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left",
+          /*
+           * `min-w-0 max-w-full`: a trigger must never outgrow its container
+           * (Katerina, 2026-09-01 — a long label stretched the files panel's
+           * Lead row past its card). In a flex row the default min-width:auto
+           * forbids shrinking below the label's width, which is what kept
+           * `truncate` from ever engaging; in a block container max-w-full is
+           * the cap. Full-width callers are unaffected.
+           */
+          "flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left",
           "border-border-default text-text-primary outline-none transition-colors",
-          "hover:border-border-strong disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
+          // The focused border survives a hover: hover alone strengthens the
+          // hairline, but hover while focused must not grey the focus colour —
+          // the stacked variant outranks plain hover by specificity.
+          "hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
           "focus-visible:border-border-focus aria-expanded:border-border-focus",
           "signal:transition-shadow signal:focus-visible:shadow-focus-ring",
           size === "default" && "px-3 py-2 text-[14px] leading-[1.4] font-normal",
@@ -290,25 +914,30 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs5("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-            selected?.leading && /* @__PURE__ */ jsx6("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-            /* @__PURE__ */ jsx6("span", { className: "truncate", children: selected?.label ?? placeholder })
+          /* @__PURE__ */ jsxs12("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+            selected?.leading && /* @__PURE__ */ jsx18("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+            /* @__PURE__ */ jsx18("span", { className: "truncate", children: selected?.label ?? placeholder })
           ] }),
-          /* @__PURE__ */ jsx6(IconChevronDown, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+          /* @__PURE__ */ jsx18(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
         ]
       }
     ),
-    open && rect && createPortal2(
-      /* @__PURE__ */ jsx6(
+    open && rect && createPortal4(
+      /* @__PURE__ */ jsx18(
         "div",
         {
           ref: menuRef,
           role: "listbox",
           "aria-activedescendant": `${id}-${activeIndex}`,
           tabIndex: -1,
-          style: { top: rect.bottom + 4, left: rect.left, minWidth: rect.width },
-          className: "fixed z-50 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg",
-          children: options.map((option, index) => /* @__PURE__ */ jsxs5(
+          style: placement ? { ...placement, minWidth: rect.width } : (
+            // Provisional frame: measured by the layout effect above,
+            // replaced before paint. Hidden so a cut-off position is
+            // never visible, not even for a frame.
+            { top: rect.bottom + 4, left: rect.left, minWidth: rect.width, visibility: "hidden" }
+          ),
+          className: "fixed z-50 overflow-y-auto rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg",
+          children: options.map((option, index) => /* @__PURE__ */ jsxs12(
             "div",
             {
               id: `${id}-${index}`,
@@ -326,11 +955,11 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
                 option.value === value && "font-medium"
               ),
               children: [
-                /* @__PURE__ */ jsxs5("span", { className: "flex min-w-0 items-center gap-2", children: [
-                  option.leading && /* @__PURE__ */ jsx6("span", { className: "flex shrink-0 items-center", children: option.leading }),
-                  /* @__PURE__ */ jsx6("span", { className: "truncate", children: option.label })
+                /* @__PURE__ */ jsxs12("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  option.leading && /* @__PURE__ */ jsx18("span", { className: "flex shrink-0 items-center", children: option.leading }),
+                  /* @__PURE__ */ jsx18("span", { className: "truncate", children: option.label })
                 ] }),
-                option.value === value && /* @__PURE__ */ jsx6(IconCheck, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+                option.value === value && /* @__PURE__ */ jsx18(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
               ]
             },
             option.value
@@ -344,9 +973,9 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
 
 // src/TextInput.tsx
 import { forwardRef } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var TextInput = forwardRef(function TextInput2({ className, type = "text", ...props }, ref) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx19(
     "input",
     {
       ref,
@@ -366,9 +995,9 @@ var TextInput = forwardRef(function TextInput2({ className, type = "text", ...pr
 
 // src/Textarea.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx20(
     "textarea",
     {
       ref,
@@ -385,23 +1014,26 @@ var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
   );
 });
 
+// src/ConfirmDialog.tsx
+import { useState as useState6 } from "react";
+
 // src/DialogShell.tsx
-import { useEffect as useEffect2 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
-import { IconX } from "@tabler/icons-react";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-function DialogShell({ title, onClose, footer, children, bodyClassName, width = 502 }) {
-  useEffect2(() => {
+import { useEffect as useEffect4 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
+import { IconX as IconX2 } from "@tabler/icons-react";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, width = 502 }) {
+  useEffect4(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [onClose]);
-  return createPortal3(
-    /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      /* @__PURE__ */ jsx9("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: onClose }),
-      /* @__PURE__ */ jsx9("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs6(
+  return createPortal5(
+    /* @__PURE__ */ jsxs13(Fragment3, { children: [
+      /* @__PURE__ */ jsx21("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: onClose }),
+      /* @__PURE__ */ jsx21("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs13(
         "div",
         {
           role: "dialog",
@@ -410,12 +1042,12 @@ function DialogShell({ title, onClose, footer, children, bodyClassName, width =
           className: "bg-bg-elevated border border-border-subtle rounded-lg shadow-lg pointer-events-auto flex flex-col overflow-hidden",
           style: { width },
           children: [
-            /* @__PURE__ */ jsxs6("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
-              /* @__PURE__ */ jsx9("span", { className: "text-h4 text-text-primary", children: title }),
-              /* @__PURE__ */ jsx9(IconButton, { tooltip: "Close", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx9(IconX, { size: 16, stroke: 1.5 }) })
+            /* @__PURE__ */ jsxs13("div", { className: "h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0", children: [
+              headerContent ?? /* @__PURE__ */ jsx21("span", { className: "text-h4 text-text-primary", children: title }),
+              /* @__PURE__ */ jsx21(IconButton, { tooltip: "Close", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx21(IconX2, { size: 16, stroke: 1.5 }) })
             ] }),
-            /* @__PURE__ */ jsx9("div", { className: cn("pl-5 pr-4 py-4 border-b border-border-subtle", bodyClassName), children }),
-            /* @__PURE__ */ jsx9("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
+            /* @__PURE__ */ jsx21("div", { className: cn("pl-5 pr-4 py-4", footer != null && "border-b border-border-subtle", bodyClassName), children }),
+            footer != null && /* @__PURE__ */ jsx21("div", { className: "h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0", children: footer })
           ]
         }
       ) })
@@ -424,63 +1056,579 @@ function DialogShell({ title, onClose, footer, children, bodyClassName, width =
   );
 }
 
-// src/Divider.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-function Divider({ orientation = "horizontal", className }) {
-  return /* @__PURE__ */ jsx10(
-    "div",
+// src/ConfirmDialog.tsx
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
+  const [busy, setBusy] = useState6(false);
+  const confirm = async () => {
+    setBusy(true);
+    try {
+      const ok = await onConfirm();
+      if (ok !== false) onClose();
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx22(
+    DialogShell,
     {
-      role: "separator",
-      "aria-orientation": orientation,
-      className: cn("bg-border-subtle", orientation === "horizontal" ? "h-px mx-3" : "w-px self-stretch shrink-0", className)
+      title,
+      onClose,
+      bodyClassName: "flex flex-col gap-3 text-body-2 text-text-primary",
+      footer: /* @__PURE__ */ jsxs14(Fragment4, { children: [
+        /* @__PURE__ */ jsx22(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx22(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
+      ] }),
+      children
+    }
+  );
+}
+
+// src/EditableText.tsx
+import { useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
+  const [editing, setEditing] = useState7(false);
+  const [draft, setDraft] = useState7(value);
+  const [busy, setBusy] = useState7(false);
+  const fieldRef = useRef5(null);
+  useEffect5(() => {
+    if (editing) {
+      fieldRef.current?.focus();
+      fieldRef.current?.select();
+    }
+  }, [editing]);
+  const open = () => {
+    setDraft(value);
+    setEditing(true);
+  };
+  const cancel = () => {
+    setEditing(false);
+    setDraft(value);
+  };
+  const commit = async () => {
+    if (busy) return;
+    const next = draft.trim();
+    if (next === value) {
+      setEditing(false);
+      return;
+    }
+    setBusy(true);
+    try {
+      const ok = await onCommit(next);
+      if (ok) setEditing(false);
+    } catch {
+    } finally {
+      setBusy(false);
+    }
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancel();
+    } else if (event.key === "Enter" && !(multiline && event.shiftKey)) {
+      event.preventDefault();
+      void commit();
+    }
+  };
+  const fieldClass = cn(
+    "w-full rounded-md border border-border-strong bg-bg-inset px-2 py-1 text-text-primary outline-none",
+    multiline && "resize-none",
+    className
+  );
+  if (readOnly) {
+    return /* @__PURE__ */ jsx23(
+      "div",
+      {
+        "aria-label": label,
+        className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
+        children: display ?? value ? displayNode ?? (display ?? value) : placeholder
+      }
+    );
+  }
+  if (editing) {
+    return multiline ? /* @__PURE__ */ jsx23(
+      "textarea",
+      {
+        ref: fieldRef,
+        "aria-label": label,
+        value: draft,
+        rows: 4,
+        disabled: busy,
+        onChange: (event) => setDraft(event.target.value),
+        onKeyDown,
+        onBlur: () => void commit(),
+        className: fieldClass
+      }
+    ) : /* @__PURE__ */ jsx23(
+      "input",
+      {
+        ref: fieldRef,
+        "aria-label": label,
+        value: draft,
+        disabled: busy,
+        onChange: (event) => setDraft(event.target.value),
+        onKeyDown,
+        onBlur: () => void commit(),
+        className: fieldClass
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx23(
+    "button",
+    {
+      type: "button",
+      onClick: open,
+      title: "Click to edit",
+      "aria-label": `Edit ${label.toLowerCase()}`,
+      className: cn(
+        "w-full rounded-md border border-transparent px-2 py-1 text-left transition-colors hover:border-border-default",
+        multiline && !displayNode && "whitespace-pre-wrap",
+        display ?? value ? "text-text-primary" : "text-text-muted",
+        className
+      ),
+      children: display ?? value ? displayNode ?? (display ?? value) : placeholder
     }
   );
 }
 
 // src/EmptyState.tsx
 import { IconMessage2 } from "@tabler/icons-react";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 function EmptyState({ icon, message, className }) {
-  return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col gap-2 items-center", className), children: [
-    /* @__PURE__ */ jsx11("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx11(IconMessage2, { size: 16, stroke: 1.5 }) }),
-    /* @__PURE__ */ jsx11("p", { className: "text-body-2 text-text-secondary text-center", children: message })
+  return /* @__PURE__ */ jsxs15("div", { className: cn("flex flex-col gap-2 items-center", className), children: [
+    /* @__PURE__ */ jsx24("span", { className: "text-text-secondary", children: icon ?? /* @__PURE__ */ jsx24(IconMessage2, { size: 16, stroke: 1.5 }) }),
+    /* @__PURE__ */ jsx24("p", { className: "text-body-2 text-text-secondary text-center", children: message })
   ] });
 }
 
 // src/Skeleton.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function SkeletonBar({ className, style }) {
-  return /* @__PURE__ */ jsx12("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
+  return /* @__PURE__ */ jsx25("div", { className: cn("bg-bg-inset rounded-sm animate-pulse", className), style });
 }
 var ROW_BAR_WIDTHS = [150, 100, 170, 120, 90, 140, 110, 160];
 function SkeletonRow({ barWidth = 130 }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
-    /* @__PURE__ */ jsx12(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
-    /* @__PURE__ */ jsx12(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
+  return /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 px-2 h-[32px] rounded-lg", children: [
+    /* @__PURE__ */ jsx25(SkeletonBar, { className: "w-4 h-4 shrink-0" }),
+    /* @__PURE__ */ jsx25(SkeletonBar, { className: "h-3.5", style: { width: barWidth } })
   ] });
 }
 function SkeletonList({ rows = 8, className }) {
-  return /* @__PURE__ */ jsx12("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx12(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
+  return /* @__PURE__ */ jsx25("div", { className: cn("flex flex-col gap-0.5 animate-skeleton-in", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx25(SkeletonRow, { barWidth: ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length] }, i)) });
+}
+
+// src/Breadcrumb.tsx
+import { Fragment as Fragment5, useCallback as useCallback3, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState8 } from "react";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+function Breadcrumb({ items, className }) {
+  const navRef = useRef6(null);
+  const labelRefs = useRef6([]);
+  const [truncated, setTruncated] = useState8(/* @__PURE__ */ new Set());
+  const measure = useCallback3(() => {
+    const next = /* @__PURE__ */ new Set();
+    labelRefs.current.forEach((el, index) => {
+      if (el && el.scrollWidth > el.clientWidth) next.add(index);
+    });
+    setTruncated((prev) => prev.size === next.size && [...next].every((i) => prev.has(i)) ? prev : next);
+  }, []);
+  useLayoutEffect4(() => {
+    measure();
+    const nav = navRef.current;
+    if (!nav || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(nav);
+    return () => observer.disconnect();
+  }, [measure, items]);
+  return /* @__PURE__ */ jsx26("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 text = cn(
+      "truncate",
+      // A mono crumb is a ref — the identity. It never gives up width to a
+      // long name beside it (the LongName story always claimed "the ref
+      // stays"; flexbox was squeezing it anyway until this line).
+      item.mono && "shrink-0 font-mono text-[12px] leading-[120%]",
+      item.muted || last && item.mono ? "text-text-muted" : last ? "text-text-primary" : "text-text-secondary"
+    );
+    const setLabelRef = (el) => {
+      labelRefs.current[index] = el;
+    };
+    const crumb = item.href ? /* @__PURE__ */ jsx26("a", { ref: setLabelRef, href: item.href, className: cn(text, "hover:text-text-primary"), children: item.label }) : /* @__PURE__ */ jsx26("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
+    return /* @__PURE__ */ jsxs17(Fragment5, { children: [
+      index > 0 && /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
+      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__ */ jsx26(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
+      ) : crumb
+    ] }, `${item.label}-${index}`);
+  }) });
+}
+
+// src/NavItem.tsx
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
+  return /* @__PURE__ */ jsxs18(
+    "a",
+    {
+      href,
+      "aria-current": active ? "page" : void 0,
+      className: cn(
+        // shrink-0: the row keeps its 32px inside an overflowing flex column
+        // — without it the list compresses instead of scrolling (the missing-
+        // shrink-0 family; Katerina, 2026-09-02).
+        "flex h-8 min-w-0 shrink-0 items-center gap-2 rounded-md px-2 text-body-2 transition-colors",
+        active ? "bg-bg-active text-text-primary" : "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx27("span", { className: "flex shrink-0 items-center", children: icon }),
+        /* @__PURE__ */ jsx27("span", { className: "flex-1 truncate", children: label }),
+        count ? /* @__PURE__ */ jsx27(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx27("span", { className: "shrink-0 font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+      ]
+    }
+  );
+}
+
+// src/Rail.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
+  return /* @__PURE__ */ jsx28("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 jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+function RailItem({ href, icon, label, active = false, className, ...props }) {
+  return /* @__PURE__ */ jsxs19(
+    "a",
+    {
+      href,
+      "aria-current": active ? "page" : void 0,
+      className: cn("group flex w-full shrink-0 flex-col items-center gap-0.5 px-2 py-0.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx29(
+          "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__ */ jsx29(
+              "span",
+              {
+                className: cn(
+                  "flex items-center transition-colors",
+                  active ? "text-text-primary signal:text-[color:var(--text-interactive)]" : "text-text-secondary"
+                ),
+                children: icon
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx29("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 jsx30 } from "react/jsx-runtime";
+function Sidebar({ "aria-label": ariaLabel = "Workspace", children, className }) {
+  return /* @__PURE__ */ jsx30(
+    "nav",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "flex w-60 shrink-0 flex-col gap-px overflow-y-auto border-r border-border-default bg-bg-surface px-2.5 py-3",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/Property.tsx
+import { jsx as jsx31, jsxs as jsxs20 } 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__ */ jsxs20("div", { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsx31("span", { className: "text-menu uppercase tracking-[0.08em] text-text-secondary", children: label }),
+        children
+      ] })
+    );
+  }
+  return /* @__PURE__ */ jsxs20("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx31("span", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
+    children
+  ] });
+}
+
+// src/SearchInput.tsx
+import "react";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
+  return /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      className: cn(
+        "flex gap-2 items-center px-3 py-2 rounded-lg",
+        "bg-bg-inset border border-border-default",
+        "focus-within:border-border-strong transition-colors",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx32(
+          "input",
+          {
+            className: "flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none",
+            placeholder,
+            ...props
+          }
+        ),
+        shortcut && /* @__PURE__ */ jsx32("div", { className: "flex items-center justify-center px-1 py-px rounded-sm bg-bg-inset border border-border-strong shrink-0 signal:bg-[rgba(255,255,255,.05)] signal:border-b-2", children: /* @__PURE__ */ jsx32("span", { className: "text-caption text-text-secondary whitespace-nowrap signal:font-mono signal:text-[10px]", children: shortcut }) })
+      ]
+    }
+  );
+}
+
+// src/SectionHeader.tsx
+import { useState as useState9 } from "react";
+import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, actions, showActions = "hover", className }) {
+  const [isHovered, setIsHovered] = useState9(false);
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      className: cn(
+        "flex h-[32px] items-center justify-between rounded-lg px-2 transition-colors",
+        isHovered && "bg-bg-hover",
+        chevron && "cursor-pointer",
+        className
+      ),
+      onClick: chevron ? onToggle : void 0,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs22("div", { className: "flex shrink-0 items-center gap-1", children: [
+          chevron && /* @__PURE__ */ jsx33(
+            IconChevronRight2,
+            {
+              size: 12,
+              stroke: 1.5,
+              className: cn("text-text-secondary transition-transform duration-150", isExpanded && "rotate-90")
+            }
+          ),
+          /* @__PURE__ */ jsx33(SectionLabel, { children: title })
+        ] }),
+        (showActions === "always" || isHovered) && actions && actions.length > 0 && /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1", children: actions.map((action) => /* @__PURE__ */ jsx33(
+          IconButton,
+          {
+            tooltip: action.tooltip,
+            "aria-label": action.tooltip,
+            onClick: (event) => {
+              event.stopPropagation();
+              action.onClick();
+            },
+            children: action.icon
+          },
+          action.tooltip
+        )) })
+      ]
+    }
+  );
+}
+
+// src/Tabs.tsx
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+function Tabs({ tabs, active, onChange, size = "default", className }) {
+  return /* @__PURE__ */ jsx34("div", { role: "tablist", className: cn("flex items-center gap-2", className), children: tabs.map((tab) => /* @__PURE__ */ jsxs23(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": active === tab.id,
+      onClick: () => onChange(tab.id),
+      className: cn(
+        "flex cursor-pointer items-center transition-colors",
+        // Arbitrary sizes (the body-2 and caption tokens): the colour branch below
+        // follows them through cn(), and tw-merge drops a custom text-{size}
+        // once a text-{colour} lands after it. Measured: tabs rendered 16px.
+        // gap: default is Ship's 6px; small keeps Peek's original 4px, or
+        // "small is Peek's geometry" stops being true.
+        size === "default" ? "gap-1.5 rounded-md px-2 py-1 text-[14px] leading-[140%]" : "gap-1 rounded px-1.5 py-0.5 text-[12px] leading-[120%]",
+        active === tab.id ? "bg-bg-active text-text-primary" : "text-text-secondary hover:bg-bg-hover"
+      ),
+      children: [
+        tab.icon,
+        /* @__PURE__ */ jsxs23("span", { className: "flex items-baseline", children: [
+          tab.label,
+          tab.count !== void 0 ? /* @__PURE__ */ jsx34("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
+        ] })
+      ]
+    },
+    tab.id
+  )) });
+}
+
+// src/Toast.tsx
+import { createContext, useCallback as useCallback4, useContext, useEffect as useEffect6, useMemo as useMemo3, useState as useState10 } from "react";
+import { createPortal as createPortal6 } from "react-dom";
+import { IconCircleCheck } from "@tabler/icons-react";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+var SURFACE_BY_TYPE = {
+  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)]",
+  neutral: "bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]"
+};
+var ICON_BY_TYPE = {
+  success: "signal:text-success-default signal:drop-shadow-[0_0_5px_rgba(63,222,140,0.7)]",
+  brand: "signal:text-text-interactive signal:drop-shadow-[0_0_5px_rgba(86,200,255,0.6)]",
+  neutral: "signal:text-text-secondary"
+};
+var ACTION_BORDER_BY_TYPE = {
+  success: "signal:border signal:border-border-default signal:hover:border-border-strong",
+  brand: "signal:border signal:border-border-default signal:hover:border-border-strong",
+  neutral: "border border-border-default"
+};
+function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
+  const hasAction = !!(actionLabel && onAction);
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center min-h-[32px] pl-2 py-1 rounded-lg shadow-lg",
+        // Without an action the label needs real right padding; the action
+        // button brings its own edge, so the tight pr-1 only applies there.
+        hasAction ? "pr-1 gap-[46px]" : "pr-3",
+        SURFACE_BY_TYPE[type],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 shrink-0", children: [
+          leadingIcon && /* @__PURE__ */ jsx35(IconCircleCheck, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_BY_TYPE[type]) }),
+          /* @__PURE__ */ jsx35("span", { className: "font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap", children: label })
+        ] }),
+        hasAction && /* @__PURE__ */ jsx35(
+          "button",
+          {
+            type: "button",
+            onClick: onAction,
+            className: cn(
+              "h-6 flex items-center justify-center gap-1 px-1 py-1 rounded-md shrink-0 transition-colors",
+              ACTION_BORDER_BY_TYPE[type],
+              type === "neutral" ? "hover:border-border-strong" : "hover:opacity-80"
+            ),
+            children: /* @__PURE__ */ jsx35("span", { className: "font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap", children: actionLabel })
+          }
+        )
+      ]
+    }
+  );
+}
+var ToastContext = createContext(null);
+var toastSeq = 0;
+function ToastProvider({ children }) {
+  const [toast, setToast] = useState10(null);
+  const showToast = useCallback4((opts) => {
+    setToast({ ...opts, id: ++toastSeq });
+  }, []);
+  const dismissToast = useCallback4(() => {
+    setToast(null);
+  }, []);
+  useEffect6(() => {
+    if (!toast) return;
+    const duration = toast.durationMs ?? 5e3;
+    if (duration <= 0) return;
+    const timer = setTimeout(() => {
+      setToast((current) => current?.id === toast.id ? null : current);
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [toast]);
+  const value = useMemo3(() => ({ showToast, dismissToast }), [showToast, dismissToast]);
+  return /* @__PURE__ */ jsxs24(ToastContext.Provider, { value, children: [
+    children,
+    toast && createPortal6(
+      /* @__PURE__ */ jsx35("div", { className: "fixed bottom-4 left-4 z-[100] pointer-events-none", children: /* @__PURE__ */ jsx35(
+        Toast,
+        {
+          className: "pointer-events-auto",
+          label: toast.label,
+          type: toast.type ?? "neutral",
+          leadingIcon: toast.leadingIcon ?? true,
+          actionLabel: toast.actionLabel,
+          onAction: toast.onAction ? () => {
+            toast.onAction?.();
+            dismissToast();
+          } : void 0
+        }
+      ) }),
+      document.body
+    )
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
 }
 export {
+  AppShell,
   Avatar,
+  AvatarGroup,
+  Banner,
+  Breadcrumb,
   Button,
+  Checkbox,
   Chip,
+  ChipInput,
+  ConfirmDialog,
   DialogShell,
   Divider,
+  EditableText,
   EmptyState,
+  EnterHint,
   Field,
   IconButton,
+  IdentityMenu,
+  IdentityPanel,
+  InputChip,
+  Menu,
+  MenuItem,
+  MenuRow,
+  MenuSection,
+  NavItem,
+  Person,
+  PersonTrigger,
+  Property,
+  Rail,
+  RailItem,
+  SearchInput,
+  SectionHeader,
+  SectionLabel,
   Select,
+  Sidebar,
   SkeletonBar,
   SkeletonList,
   SkeletonRow,
+  Tabs,
   TextInput,
   Textarea,
+  Toast,
+  ToastProvider,
   Tooltip,
+  TopBar,
   WithTooltip,
   cn,
   hueFor,
-  initialsFor
+  initialsFor,
+  useToast
 };
 //# sourceMappingURL=index.js.map