@flytedan/flytebot-design-system 0.10.0 → 0.11.1

package/dist/index.cjs

@@ -106,6 +106,7 @@ __export(index_exports, {
   ModeSwitch: () => ModeSwitch,
   ModelControls: () => ModelControls,
   NumberInput: () => NumberInput,
+  POPOVER_BODY_MIN: () => POPOVER_BODY_MIN,
   PacketCard: () => PacketCard,
   Pagination: () => Pagination,
   PermissionDenied: () => PermissionDenied,
@@ -259,6 +260,7 @@ function IconButton({
   label,
   size = "md",
   variant = "ghost",
+  tone = "neutral",
   round = false,
   disabled = false,
   className = "",
@@ -266,7 +268,8 @@ function IconButton({
 }) {
   const cls = [
     "fd-btn-icon",
-    variant === "outline" ? "fd-btn-icon-outline" : "",
+    variant === "outline" ? "fd-btn-icon-outline" : variant === "solid" ? "fd-btn-icon-solid" : "",
+    tone !== "neutral" ? "is-" + tone : "",
     size === "sm" ? "fd-btn-icon-sm" : size === "lg" ? "fd-btn-icon-lg" : "",
     round ? "fd-btn-icon-round" : "",
     className
@@ -287,6 +290,23 @@ var samePosition = (a, b) => {
   if (!a || !b) return a === b;
   return a.left === b.left && a.top === b.top && a.bottom === b.bottom && a.width === b.width && a.minWidth === b.minWidth && a.maxH === b.maxH && a.side === b.side && a.anchorWidth === b.anchorWidth;
 };
+var SCROLL_REGIONS = ".fd-pop-body, .fd-pop-list";
+var PINNED_REGIONS = ":scope > .fd-pop-header, :scope > .fd-pop-footer";
+var POPOVER_BODY_MIN = 96;
+function measureLayer(el) {
+  if (!el || !el.offsetHeight) return { width: el ? el.offsetWidth : 0, height: 0, pinned: 0 };
+  let hidden = 0;
+  el.querySelectorAll(SCROLL_REGIONS).forEach((r) => {
+    hidden += Math.max(0, r.scrollHeight - r.clientHeight);
+  });
+  let pinned = 0;
+  el.querySelectorAll(PINNED_REGIONS).forEach((r) => {
+    pinned += r.offsetHeight;
+  });
+  const border = Math.max(0, el.offsetHeight - el.clientHeight);
+  const content = Math.max(el.scrollHeight, el.clientHeight);
+  return { width: el.offsetWidth, height: content + border + hidden, pinned: pinned + border };
+}
 function usePopoverPosition(open, anchorRef, opts) {
   const o = opts || {};
   const { side: wantSide, align } = parsePlacement(o.placement);
@@ -294,6 +314,7 @@ function usePopoverPosition(open, anchorRef, opts) {
   const posRef = React.useRef(null);
   const detachRef = React.useRef(o.onDetach);
   detachRef.current = o.onDetach;
+  const layerRef = o.layerRef;
   React.useLayoutEffect(() => {
     if (!open || !anchorRef || !anchorRef.current) {
       posRef.current = null;
@@ -305,23 +326,36 @@ function usePopoverPosition(open, anchorRef, opts) {
       if (!el) return;
       const r = el.getBoundingClientRect();
       const offset = o.offset == null ? 8 : o.offset;
-      const estH = o.estHeight || 300;
-      const below = window.innerHeight - r.bottom - offset - MARGIN;
+      const layer = measureLayer(layerRef ? layerRef.current : null);
+      const vh = window.innerHeight;
+      const need = layer.height || Math.min(o.estHeight || 300, 180);
+      const below = vh - r.bottom - offset - MARGIN;
       const above = r.top - offset - MARGIN;
       let side = wantSide;
-      if (side === "bottom" && below < Math.min(estH, 180) && above > below) side = "top";
-      else if (side === "top" && above < Math.min(estH, 180) && below > above) side = "bottom";
-      const width = o.matchWidth ? r.width : Math.max(o.width || 0, o.minWidth || 0);
-      const w = width || o.estWidth || 260;
+      if (side === "bottom" && below < need && above > below) side = "top";
+      else if (side === "top" && above < need && below > above) side = "bottom";
+      const ceiling = Math.min(vh - 2 * MARGIN, o.maxHeight != null ? o.maxHeight : Infinity);
+      const floor = Math.min(
+        ceiling,
+        layer.height ? layer.pinned + Math.min(POPOVER_BODY_MIN, layer.height - layer.pinned) : Math.min(need, 140)
+      );
+      const room = side === "top" ? above : below;
+      const beside = room >= floor;
+      const edge = beside ? 0 : Math.max(MARGIN, vh - MARGIN - Math.min(need, ceiling));
+      const top = side === "bottom" ? beside ? r.bottom + offset : edge : null;
+      const bottom = side === "top" ? beside ? vh - r.top + offset : edge : null;
+      const maxH = beside ? room : vh - MARGIN - edge;
+      const exact = o.matchWidth === true;
+      const width = exact ? r.width : Math.max(o.width || 0, o.minWidth || 0, o.matchWidth === "min" ? r.width : 0);
+      const w = exact || o.width ? width : Math.max(layer.width, width) || o.estWidth || 260;
       let left = align === "end" ? r.right - w : align === "center" ? r.left + r.width / 2 - w / 2 : r.left;
       left = Math.max(MARGIN, Math.min(left, window.innerWidth - w - MARGIN));
-      const maxH = Math.max(140, side === "top" ? above : below);
       const next = {
         left,
-        width: o.matchWidth ? r.width : void 0,
+        width: exact ? r.width : void 0,
         minWidth: o.minWidth,
-        top: side === "bottom" ? r.bottom + offset : null,
-        bottom: side === "top" ? window.innerHeight - r.top + offset : null,
+        top,
+        bottom,
         maxH,
         side,
         anchorWidth: r.width
@@ -344,7 +378,7 @@ function usePopoverPosition(open, anchorRef, opts) {
     };
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
-  }, [open, o.placement, o.offset, o.matchWidth, o.width, o.minWidth, o.estHeight]);
+  }, [open, o.placement, o.offset, o.matchWidth, o.width, o.minWidth, o.maxHeight, o.estHeight]);
   return pos;
 }
 var portal = (node) => {
@@ -354,6 +388,7 @@ var portal = (node) => {
 function Popover({
   open,
   anchorRef,
+  triggerRef,
   onClose,
   placement = "bottom-start",
   offset = 8,
@@ -369,6 +404,8 @@ function Popover({
   returnFocus = true,
   className = "",
   style,
+  header,
+  footer,
   children
 }) {
   const ref = React.useRef(null);
@@ -378,8 +415,10 @@ function Popover({
     matchWidth,
     width,
     minWidth,
+    maxHeight,
     estHeight: maxHeight || 320,
-    onDetach: onClose
+    onDetach: onClose,
+    layerRef: ref
   });
   const restore = React.useRef(null);
   React.useEffect(() => {
@@ -400,7 +439,8 @@ function Popover({
       if (!closeOnOutside) return;
       const target = e.target;
       if (ref.current && ref.current.contains(target)) return;
-      if (anchorRef && anchorRef.current && anchorRef.current.contains(target)) return;
+      const trigger = (triggerRef || anchorRef).current;
+      if (trigger && trigger.contains(target)) return;
       if (e.target.closest && e.target.closest(".fd-pop")) return;
       onClose && onClose();
     };
@@ -416,23 +456,23 @@ function Popover({
       document.removeEventListener("pointerdown", away, true);
       document.removeEventListener("keydown", key);
     };
-  }, [open, closeOnOutside, closeOnEscape, onClose, anchorRef]);
+  }, [open, closeOnOutside, closeOnEscape, onClose, anchorRef, triggerRef]);
   if (!open || !pos) return null;
   return portal(
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         ref,
         role,
         "aria-label": label,
-        className: ["fd-pop", pos.side === "top" ? "is-up" : "", padded ? "fd-pop-padded" : "", className].filter(Boolean).join(" "),
+        className: ["fd-pop", pos.side === "top" ? "is-up" : "", className].filter(Boolean).join(" "),
         style: {
           position: "fixed",
           left: pos.left,
           top: pos.top == null ? "auto" : pos.top,
           bottom: pos.bottom == null ? "auto" : pos.bottom,
-          width: matchWidth ? pos.width : width,
-          minWidth: minWidth || (matchWidth ? void 0 : 200),
+          width: matchWidth === true ? pos.width : width,
+          minWidth: matchWidth === "min" ? Math.max(pos.anchorWidth, minWidth || 0) : minWidth || (matchWidth ? void 0 : 200),
           // Size to content by default — cap only at real available room between the
           // anchor and the viewport edge (pos.maxH, computed by usePopoverPosition).
           // A caller-supplied `maxHeight` narrows that further (e.g. a long menu that
@@ -445,7 +485,11 @@ function Popover({
           zIndex: 140,
           ...style
         },
-        children
+        children: [
+          header != null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-pop-header", children: header }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: ["fd-pop-body", padded ? "fd-pop-padded" : ""].filter(Boolean).join(" "), children }),
+          footer != null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-pop-footer", children: footer }) : null
+        ]
       }
     )
   );
@@ -520,77 +564,79 @@ function Menu({ items = [], onSelect, onClose, autoFocus = true, className = "",
   };
   const sub = openSub != null ? items[openSub] : null;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(React.Fragment, { children: [
-    header,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "div",
-      {
-        ref: listRef,
-        tabIndex: -1,
-        role: "menu",
-        onKeyDown: onKey,
-        className: ["fd-pop-list", "fd-menu", className].filter(Boolean).join(" "),
-        children: items.map((it, i) => {
-          if (!it) return null;
-          if (it.kind === "separator") return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-menu-sep", role: "separator" }, "s" + i);
-          if (it.kind === "section") return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-pop-group", role: "presentation", children: it.label }, "h" + i);
-          if (it.kind === "custom") return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-menu-custom", children: it.render ? it.render() : null }, "c" + i);
-          const on = !!it.checked;
-          const row = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "button",
-            {
-              type: "button",
-              "data-i": i,
-              role: it.checked != null ? "menuitemradio" : "menuitem",
-              "aria-checked": it.checked != null ? on : void 0,
-              "aria-haspopup": it.submenu ? "menu" : void 0,
-              "aria-expanded": it.submenu ? openSub === i : void 0,
-              "aria-disabled": it.disabled || void 0,
-              className: ["fd-opt", "fd-menu-item", i === active ? "is-active" : "", on ? "is-selected" : ""].filter(Boolean).join(" "),
-              onMouseEnter: () => {
-                setActive(i);
-                if (openSub != null && openSub !== i) setOpenSub(null);
-              },
-              onClick: () => choose(it, i),
-              children: [
-                it.icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-menu-icon", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "ph ph-" + it.icon, "aria-hidden": "true" }) }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fd-menu-text", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-opt-label", children: it.label }),
-                  it.description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-opt-desc", children: it.description }) : null
-                ] }),
-                it.meta ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-opt-meta", children: it.meta }) : null,
-                it.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-menu-shortcut", "aria-hidden": "true", children: it.shortcut }) : null,
-                it.submenu ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "ph ph-caret-right fd-menu-more", "aria-hidden": "true" }) : null,
-                it.checked != null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-opt-check", children: on ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "ph ph-check", "aria-hidden": "true" }) : null }) : null
-              ]
-            },
-            it.id || it.label || i
-          );
-          const ta = it.trailingAction;
-          if (!ta) return row;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fd-menu-row", onMouseEnter: () => setActive(i), children: [
-            row,
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fd-menu-frame", children: [
+      header != null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-menu-header", children: header }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          ref: listRef,
+          tabIndex: -1,
+          role: "menu",
+          onKeyDown: onKey,
+          className: ["fd-pop-list", "fd-menu", className].filter(Boolean).join(" "),
+          children: items.map((it, i) => {
+            if (!it) return null;
+            if (it.kind === "separator") return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-menu-sep", role: "separator" }, "s" + i);
+            if (it.kind === "section") return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-pop-group", role: "presentation", children: it.label }, "h" + i);
+            if (it.kind === "custom") return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-menu-custom", children: it.render ? it.render() : null }, "c" + i);
+            const on = !!it.checked;
+            const row = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "button",
               {
                 type: "button",
-                className: ["fd-menu-row-act", ta.danger ? "is-danger" : ""].filter(Boolean).join(" "),
-                "aria-label": ta.label,
-                title: ta.label,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  ta.onSelect && ta.onSelect(it);
-                  if (ta.closeOnSelect !== false) {
-                    onClose && onClose();
-                  }
+                "data-i": i,
+                role: it.checked != null ? "menuitemradio" : "menuitem",
+                "aria-checked": it.checked != null ? on : void 0,
+                "aria-haspopup": it.submenu ? "menu" : void 0,
+                "aria-expanded": it.submenu ? openSub === i : void 0,
+                "aria-disabled": it.disabled || void 0,
+                className: ["fd-opt", "fd-menu-item", i === active ? "is-active" : "", on ? "is-selected" : ""].filter(Boolean).join(" "),
+                onMouseEnter: () => {
+                  setActive(i);
+                  if (openSub != null && openSub !== i) setOpenSub(null);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "ph ph-" + (ta.icon || "trash"), "aria-hidden": "true" })
-              }
-            )
-          ] }, it.id || it.label || i);
-        })
-      }
-    ),
-    footer,
+                onClick: () => choose(it, i),
+                children: [
+                  it.icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-menu-icon", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "ph ph-" + it.icon, "aria-hidden": "true" }) }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fd-menu-text", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-opt-label", children: it.label }),
+                    it.description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-opt-desc", children: it.description }) : null
+                  ] }),
+                  it.meta ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-opt-meta", children: it.meta }) : null,
+                  it.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-menu-shortcut", "aria-hidden": "true", children: it.shortcut }) : null,
+                  it.submenu ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "ph ph-caret-right fd-menu-more", "aria-hidden": "true" }) : null,
+                  it.checked != null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fd-opt-check", children: on ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "ph ph-check", "aria-hidden": "true" }) : null }) : null
+                ]
+              },
+              it.id || it.label || i
+            );
+            const ta = it.trailingAction;
+            if (!ta) return row;
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fd-menu-row", onMouseEnter: () => setActive(i), children: [
+              row,
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: ["fd-menu-row-act", ta.danger ? "is-danger" : ""].filter(Boolean).join(" "),
+                  "aria-label": ta.label,
+                  title: ta.label,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    ta.onSelect && ta.onSelect(it);
+                    if (ta.closeOnSelect !== false) {
+                      onClose && onClose();
+                    }
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "ph ph-" + (ta.icon || "trash"), "aria-hidden": "true" })
+                }
+              )
+            ] }, it.id || it.label || i);
+          })
+        }
+      ),
+      footer != null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-menu-footer", children: footer }) : null
+    ] }),
     sub && sub.submenu ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Popover,
       {
@@ -1218,20 +1264,123 @@ function Toast({ title, children, tone = "success", onUndo, onDismiss, className
 // src/components/feedback/Tooltip.tsx
 var React6 = __toESM(require("react"), 1);
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var CLOSE_DELAY_MS = 120;
 function Tooltip({ label, placement = "top", children, className = "" }) {
-  const [show, setShow] = React6.useState(false);
-  const pos = placement === "bottom" ? { top: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)" } : { bottom: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)" };
+  const anchorRef = React6.useRef(null);
+  const bubbleRef = React6.useRef(null);
+  const [reason, setReason] = React6.useState(null);
+  const closeTimer = React6.useRef(null);
+  const id = React6.useId();
+  const descId = id + "-desc";
+  const open = reason != null;
+  const cancelClose = React6.useCallback(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+  const show = (why) => {
+    cancelClose();
+    setReason(why);
+  };
+  const hide = React6.useCallback(() => {
+    cancelClose();
+    setReason(null);
+  }, [cancelClose]);
+  const hover = () => {
+    cancelClose();
+    setReason((r) => r || "hover");
+  };
+  const hideSoon = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => {
+      closeTimer.current = null;
+      setReason((r) => r === "hover" ? null : r);
+    }, CLOSE_DELAY_MS);
+  };
+  React6.useEffect(() => cancelClose, [cancelClose]);
+  const pos = usePopoverPosition(open, anchorRef, {
+    placement: placement === "bottom" ? "bottom-center" : "top-center",
+    offset: 8,
+    estHeight: 40,
+    estWidth: 160,
+    layerRef: bubbleRef,
+    onDetach: hide
+  });
+  React6.useEffect(() => {
+    if (!open) return;
+    const key = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    const away = (e) => {
+      const t = e.target;
+      if (anchorRef.current && anchorRef.current.contains(t)) return;
+      if (bubbleRef.current && bubbleRef.current.contains(t)) return;
+      hide();
+    };
+    document.addEventListener("keydown", key);
+    document.addEventListener("pointerdown", away, true);
+    return () => {
+      document.removeEventListener("keydown", key);
+      document.removeEventListener("pointerdown", away, true);
+    };
+  }, [open, hide]);
+  const isMouse = (e) => e.pointerType === "mouse";
+  const onFocus = (e) => {
+    const el = e.target;
+    let keyboard = true;
+    try {
+      keyboard = el.matches(":focus-visible");
+    } catch {
+    }
+    if (keyboard) show("focus");
+  };
+  const described = React6.isValidElement(children) ? React6.cloneElement(children, {
+    "aria-describedby": [children.props["aria-describedby"], descId].filter(Boolean).join(" ")
+  }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "span",
     {
-      style: { position: "relative", display: "inline-flex" },
-      onMouseEnter: () => setShow(true),
-      onMouseLeave: () => setShow(false),
-      onFocus: () => setShow(true),
-      onBlur: () => setShow(false),
+      ref: anchorRef,
+      className: "fd-tooltip-anchor",
+      "aria-describedby": React6.isValidElement(children) ? void 0 : descId,
+      onPointerEnter: (e) => {
+        if (isMouse(e)) hover();
+      },
+      onPointerLeave: (e) => {
+        if (isMouse(e)) hideSoon();
+      },
+      onPointerUp: (e) => {
+        if (!isMouse(e)) {
+          if (reason === "tap") hide();
+          else show("tap");
+        }
+      },
+      onFocus,
+      onBlur: () => {
+        if (reason === "focus") hide();
+      },
       children: [
-        children,
-        show ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: ["fd-tooltip", className].filter(Boolean).join(" "), role: "tooltip", style: pos, children: label }) : null
+        described,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { id: descId, hidden: true, children: label }),
+        open && pos ? portal(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "span",
+            {
+              ref: bubbleRef,
+              role: "tooltip",
+              className: ["fd-tooltip", pos.side === "bottom" ? "is-below" : "", className].filter(Boolean).join(" "),
+              style: { left: pos.left, top: pos.top == null ? "auto" : pos.top, bottom: pos.bottom == null ? "auto" : pos.bottom },
+              onPointerEnter: (e) => {
+                if (isMouse(e)) cancelClose();
+              },
+              onPointerLeave: (e) => {
+                if (isMouse(e)) hideSoon();
+              },
+              children: label
+            }
+          )
+        ) : null
       ]
     }
   );
@@ -2865,6 +3014,7 @@ function VirtualList({
 }
 
 // src/components/data/EntityRow.tsx
+var React17 = __toESM(require("react"), 1);
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var ENTITY_ROW_METRIC_WIDTH = 74;
 var METRIC_TONE_COLOR = {
@@ -2873,20 +3023,20 @@ var METRIC_TONE_COLOR = {
   danger: "var(--danger-text)"
 };
 function EntityRowMetrics({ metrics, className = "", style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: ["fd-erow-metrics", className].filter(Boolean).join(" "), style, children: metrics.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-    "span",
-    {
-      className: ["fd-erow-metric", m.tone && m.tone !== "default" ? "is-" + m.tone : ""].filter(Boolean).join(" "),
-      style: { width: (m.width || ENTITY_ROW_METRIC_WIDTH) + "px", color: METRIC_TONE_COLOR[m.tone || "default"] },
-      title: m.label,
-      children: [
-        m.icon ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-" + m.icon, "aria-hidden": "true" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-metric-value fd-tabular", children: m.value }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-sr", children: " " + m.label })
-      ]
-    },
-    m.id || m.label || i
-  )) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: ["fd-erow-metrics", className].filter(Boolean).join(" "), style, children: metrics.map((m, i) => {
+    const key = m.id || m.label || i;
+    const className2 = ["fd-erow-metric", m.tone && m.tone !== "default" ? "is-" + m.tone : "", m.tooltip != null ? "is-described" : ""].filter(Boolean).join(" ");
+    const cellStyle = { width: (m.width || ENTITY_ROW_METRIC_WIDTH) + "px", color: METRIC_TONE_COLOR[m.tone || "default"] };
+    const content = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(React17.Fragment, { children: [
+      m.icon ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-" + m.icon, "aria-hidden": "true" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-metric-value fd-tabular", children: m.value }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-sr", children: " " + m.label })
+    ] });
+    if (m.tooltip == null) {
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: className2, style: cellStyle, title: m.label, children: content }, key);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Tooltip, { label: m.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: className2, style: cellStyle, children: content }) }, key);
+  }) });
 }
 function EntityRow({
   title,
@@ -2936,8 +3086,10 @@ function EntityRow({
             icon: action.icon,
             label: action.label,
             size: "sm",
-            onClick: action.onClick,
-            style: { color: action.tone === "add" ? "var(--ok-text)" : action.tone === "remove" ? "var(--danger-text)" : void 0 }
+            variant: "solid",
+            tone: action.tone === "add" ? "ok" : action.tone === "remove" ? "danger" : "neutral",
+            className: "fd-erow-action",
+            onClick: action.onClick
           }
         ) : null
       ]
@@ -2946,14 +3098,14 @@ function EntityRow({
 }
 
 // src/components/data/TransferList.tsx
-var React18 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
 
 // src/components/forms/field.tsx
-var React17 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function useFieldId(id) {
-  const generated = React17.useId();
+  const generated = React18.useId();
   return id || generated;
 }
 function FieldLabel({ htmlFor, id, required = false, onClick, children }) {
@@ -2994,10 +3146,9 @@ function Input({
     numeric ? "fd-input-num" : "",
     error ? "fd-input-error" : "",
     disabled ? "fd-input-disabled" : "",
-    size === "lg" ? "fd-input-lg" : "",
-    className
+    size === "lg" ? "fd-input-lg" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "fd-field", style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
     label ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: box, children: [
       icon ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fd-input-icon", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "ph ph-" + icon, "aria-hidden": "true" }) }) : null,
@@ -3072,12 +3223,12 @@ function TransferList({
   listHeight = 440,
   className = ""
 }) {
-  const [drag, setDrag] = React18.useState(null);
-  const [dragOverSide, setDragOverSide] = React18.useState(null);
-  const dragRef = React18.useRef(null);
-  const armedRef = React18.useRef(null);
-  const sideRefs = React18.useRef({ left: null, right: null });
-  const hitTestSide = React18.useCallback((x, y) => {
+  const [drag, setDrag] = React19.useState(null);
+  const [dragOverSide, setDragOverSide] = React19.useState(null);
+  const dragRef = React19.useRef(null);
+  const armedRef = React19.useRef(null);
+  const sideRefs = React19.useRef({ left: null, right: null });
+  const hitTestSide = React19.useCallback((x, y) => {
     for (const side of ["left", "right"]) {
       const el = sideRefs.current[side];
       if (!el) continue;
@@ -3086,7 +3237,7 @@ function TransferList({
     }
     return null;
   }, []);
-  const findItem = React18.useCallback(
+  const findItem = React19.useCallback(
     (side, key) => (side === "left" ? left.items : right.items).find((it) => keyOf(it) === key),
     [left.items, right.items, keyOf]
   );
@@ -3108,7 +3259,7 @@ function TransferList({
       height: rect.height
     };
   };
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     const onMovePointer = (e) => {
       const armed = armedRef.current;
       if (!armed || e.pointerId !== armed.pointerId) return;
@@ -3161,7 +3312,7 @@ function TransferList({
       window.removeEventListener("pointercancel", endDrag);
     };
   }, [hitTestSide, findItem, onMove]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (!drag || typeof document === "undefined") return;
     const prev = document.body.style.userSelect;
     document.body.style.userSelect = "none";
@@ -3273,11 +3424,11 @@ function TransferList({
 }
 
 // src/components/forms/Checkbox.tsx
-var React19 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function Checkbox({ label, description, card = false, indeterminate = false, className = "", ...rest }) {
-  const ref = React19.useRef(null);
-  React19.useEffect(() => {
+  const ref = React20.useRef(null);
+  React20.useEffect(() => {
     if (ref.current) ref.current.indeterminate = indeterminate;
   }, [indeterminate]);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("label", { className: ["fd-choice", card ? "fd-choice-card" : "", className].filter(Boolean).join(" "), children: [
@@ -3324,8 +3475,8 @@ function Switch({ label, description, className = "", ...rest }) {
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function Textarea({ label, help, error, required = false, rows = 4, disabled = false, id, className = "", style, ...rest }) {
   const fieldId = useFieldId(id);
-  const box = ["fd-input", "fd-input-textarea", error ? "fd-input-error" : "", disabled ? "fd-input-disabled" : "", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "fd-field", style, children: [
+  const box = ["fd-input", "fd-input-textarea", error ? "fd-input-error" : "", disabled ? "fd-input-disabled" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
     label ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: box, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("textarea", { id: fieldId, rows, disabled, "aria-invalid": error ? "true" : void 0, ...rest }) }),
     error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "fd-field-error", children: [
@@ -3336,7 +3487,7 @@ function Textarea({ label, help, error, required = false, rows = 4, disabled = f
 }
 
 // src/components/forms/NumberInput.tsx
-var React20 = __toESM(require("react"), 1);
+var React21 = __toESM(require("react"), 1);
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function NumberInput({
   label,
@@ -3364,10 +3515,10 @@ function NumberInput({
     const n = Number(String(v == null ? "" : v).replace(/[^0-9.-]/g, ""));
     return isNaN(n) ? null : n;
   };
-  const [text, setText] = React20.useState(value == null || value === "" ? "" : String(value));
-  const [editing, setEditing] = React20.useState(false);
-  const timer = React20.useRef(null);
-  React20.useEffect(() => {
+  const [text, setText] = React21.useState(value == null || value === "" ? "" : String(value));
+  const [editing, setEditing] = React21.useState(false);
+  const timer = React21.useRef(null);
+  React21.useEffect(() => {
     if (!editing) setText(value == null || value === "" ? "" : String(value));
   }, [value, editing]);
   const clamp = (n) => Math.min(max, Math.max(min, n));
@@ -3391,7 +3542,7 @@ function NumberInput({
   const release = () => {
     if (timer.current) clearTimeout(timer.current);
   };
-  React20.useEffect(() => () => {
+  React21.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
   const shown = editing ? text : (() => {
@@ -3478,52 +3629,9 @@ function NumberInput({
 }
 
 // src/components/forms/Select.tsx
-var React21 = __toESM(require("react"), 1);
-var import_react_dom5 = require("react-dom");
+var React22 = __toESM(require("react"), 1);
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var norm = (o) => typeof o === "string" ? { value: o, label: o } : o;
-function usePopPos(open, ref, estH, estW) {
-  const [pos, setPos] = React21.useState(null);
-  React21.useLayoutEffect(() => {
-    if (!open || !ref.current) {
-      setPos(null);
-      return;
-    }
-    const calc = () => {
-      const r = ref.current.getBoundingClientRect();
-      const below = window.innerHeight - r.bottom;
-      const up = below < estH && r.top > below;
-      const w = Math.max(r.width, estW || 0);
-      const maxH = Math.min(window.innerHeight - 16, Math.max(160, (up ? r.top : below) - 14));
-      setPos({
-        left: Math.max(8, Math.min(r.left, window.innerWidth - w - 8)),
-        width: r.width,
-        top: up ? null : r.bottom + 6,
-        bottom: up ? window.innerHeight - r.top + 6 : null,
-        up,
-        maxH
-      });
-    };
-    calc();
-    window.addEventListener("scroll", calc, true);
-    window.addEventListener("resize", calc);
-    return () => {
-      window.removeEventListener("scroll", calc, true);
-      window.removeEventListener("resize", calc);
-    };
-  }, [open]);
-  return pos;
-}
-var popStyle = (pos, extra) => ({
-  position: "fixed",
-  left: pos.left,
-  top: pos.top == null ? "auto" : pos.top,
-  bottom: pos.bottom == null ? "auto" : pos.bottom,
-  transformOrigin: pos.up ? "bottom center" : "top center",
-  maxHeight: pos.maxH,
-  overflowY: "auto",
-  ...extra
-});
 function Select({
   label,
   help,
@@ -3548,17 +3656,15 @@ function Select({
   const isOn = (v) => multiple ? vals.includes(v) : v === value;
   const hasSearch = searchable === void 0 ? opts.length > 8 : searchable;
   const { fieldId, labelId, ariaLabelledBy } = useTriggerLabelling(label, id);
-  const [open, setOpen] = React21.useState(false);
-  const [q, setQ] = React21.useState("");
-  const [active, setActive] = React21.useState(-1);
-  const rootRef = React21.useRef(null);
-  const boxRef = React21.useRef(null);
-  const popRef = React21.useRef(null);
-  const listRef = React21.useRef(null);
-  const typeBuf = React21.useRef({ s: "", t: 0 });
+  const [open, setOpen] = React22.useState(false);
+  const [q, setQ] = React22.useState("");
+  const [active, setActive] = React22.useState(-1);
+  const rootRef = React22.useRef(null);
+  const boxRef = React22.useRef(null);
+  const listRef = React22.useRef(null);
+  const typeBuf = React22.useRef({ s: "", t: 0 });
   const selected = multiple ? null : opts.find((o) => o.value === value);
   const chosen = multiple ? opts.filter((o) => vals.includes(o.value)) : [];
-  const pos = usePopPos(open, boxRef, hasSearch ? 390 : 340, 260);
   const boxText = multiple ? chosen.length === 0 ? placeholder : chosen.length === 1 ? chosen[0].label : summary ? summary(chosen.map((o) => o.value)) : chosen.length + " selected" : selected ? selected.label : placeholder;
   const visible = q ? opts.filter((o) => (o.label + " " + (o.description || "") + " " + (o.group || "")).toLowerCase().includes(q.toLowerCase())) : opts;
   const fire = (v) => {
@@ -3581,17 +3687,7 @@ function Select({
     }
     setOpen(!open);
   };
-  React21.useEffect(() => {
-    if (!open) return;
-    const away = (e) => {
-      if (rootRef.current && rootRef.current.contains(e.target)) return;
-      if (popRef.current && popRef.current.contains(e.target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("pointerdown", away);
-    return () => document.removeEventListener("pointerdown", away);
-  }, [open]);
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (!open || active < 0 || !listRef.current) return;
     const el = listRef.current.querySelector('[data-i="' + active + '"]');
     if (el) {
@@ -3682,94 +3778,96 @@ function Select({
       ) : null,
       loading ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-spinner", style: { color: "var(--text-muted)" }, "aria-label": "Loading options" }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-select-caret", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-caret-down", "aria-hidden": "true" }) })
     ] }),
-    open && pos ? (0, import_react_dom5.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-        "div",
-        {
-          className: "fd-pop" + (pos.up ? " is-up" : ""),
-          ref: popRef,
-          style: popStyle(pos, { minWidth: Math.max(pos.width, 260), maxWidth: 380, zIndex: 130, overflowY: "hidden" }),
-          children: [
-            hasSearch ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "fd-pop-search", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-magnifying-glass", style: { color: "var(--text-muted)", fontSize: 14 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                "input",
-                {
-                  autoFocus: true,
-                  placeholder: "Search\u2026",
-                  value: q,
-                  onKeyDown: onKey,
-                  onChange: (e) => {
-                    setQ(e.target.value);
-                    setActive(0);
-                  }
-                }
-              ),
-              q ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-body-sm fd-muted", children: visible.length }) : null
-            ] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "fd-pop-list", role: "listbox", "aria-multiselectable": multiple || void 0, ref: listRef, style: { maxHeight: Math.max(120, pos.maxH - (hasSearch ? 64 : 12) - (multiple ? 42 : 0)) }, children: visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "fd-pop-empty", children: [
-              'Nothing matches "',
-              q,
-              '".'
-            ] }) : groups.map((grp) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(React21.Fragment, { children: [
-              grp.g ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "fd-pop-group", children: grp.g }) : null,
-              grp.items.map(({ o, i }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  "data-i": i,
-                  role: "option",
-                  "aria-selected": isOn(o.value),
-                  "aria-disabled": o.disabled || void 0,
-                  className: ["fd-opt", i === active ? "is-active" : "", isOn(o.value) ? "is-selected" : ""].filter(Boolean).join(" "),
-                  onMouseEnter: () => setActive(i),
-                  onClick: () => pick(o),
-                  children: [
-                    multiple ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": "true", style: { flex: "none", display: "grid", placeItems: "center", width: 16, height: 16, borderRadius: 4, border: "1.5px solid " + (isOn(o.value) ? "var(--brand)" : "var(--border-strong, var(--border))"), background: isOn(o.value) ? "var(--brand)" : "var(--surface)", color: "#fff" }, children: isOn(o.value) ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-check", style: { fontSize: 11 } }) : null }) : null,
-                    o.icon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-opt-icon", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-" + o.icon }) }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { style: { flex: 1, minWidth: 0 }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-opt-label", children: o.label }),
-                      o.description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-opt-desc", children: o.description }) : null
-                    ] }),
-                    o.meta ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-opt-meta", children: o.meta }) : null,
-                    multiple ? null : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-opt-check", children: o.value === value ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-check" }) : null })
-                  ]
-                },
-                String(o.value)
-              ))
-            ] }, grp.g || "_")) }),
-            multiple ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "fd-row", style: { gap: 10, padding: "8px 12px", borderTop: "1px solid var(--border)" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => fire(visible.filter((o) => !o.disabled).map((o) => o.value)),
-                  style: { all: "unset", cursor: "pointer", fontSize: "var(--body-sm-size)", fontWeight: 600, color: "var(--brand)" },
-                  children: "Select all"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { style: { flex: 1 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "fd-body-sm fd-muted", children: [
-                vals.length,
-                " of ",
-                opts.length
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                "button",
-                {
-                  type: "button",
-                  disabled: !vals.length,
-                  onClick: () => fire([]),
-                  style: { all: "unset", cursor: vals.length ? "pointer" : "default", fontSize: "var(--body-sm-size)", fontWeight: 600, color: vals.length ? "var(--text-2)" : "var(--text-muted)" },
-                  children: "Clear"
-                }
-              )
-            ] }) : null
-          ]
-        }
-      ),
-      document.body
-    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      Popover,
+      {
+        open,
+        anchorRef: boxRef,
+        triggerRef: rootRef,
+        onClose: () => setOpen(false),
+        placement: "bottom-start",
+        offset: 6,
+        matchWidth: "min",
+        minWidth: 260,
+        role: "presentation",
+        style: { maxWidth: 380, zIndex: 130 },
+        header: hasSearch ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "fd-pop-search", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-magnifying-glass", style: { color: "var(--text-muted)", fontSize: 14 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            "input",
+            {
+              autoFocus: true,
+              placeholder: "Search\u2026",
+              value: q,
+              onKeyDown: onKey,
+              onChange: (e) => {
+                setQ(e.target.value);
+                setActive(0);
+              }
+            }
+          ),
+          q ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-body-sm fd-muted", children: visible.length }) : null
+        ] }) : void 0,
+        footer: multiple ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(React22.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => fire(visible.filter((o) => !o.disabled).map((o) => o.value)),
+              style: { all: "unset", cursor: "pointer", fontSize: "var(--body-sm-size)", fontWeight: 600, color: "var(--brand)" },
+              children: "Select all"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { style: { flex: 1 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "fd-body-sm fd-muted", children: [
+            vals.length,
+            " of ",
+            opts.length
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            "button",
+            {
+              type: "button",
+              disabled: !vals.length,
+              onClick: () => fire([]),
+              style: { all: "unset", cursor: vals.length ? "pointer" : "default", fontSize: "var(--body-sm-size)", fontWeight: 600, color: vals.length ? "var(--text-2)" : "var(--text-muted)" },
+              children: "Clear"
+            }
+          )
+        ] }) : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "fd-pop-list", role: "listbox", "aria-multiselectable": multiple || void 0, ref: listRef, children: visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "fd-pop-empty", children: [
+          'Nothing matches "',
+          q,
+          '".'
+        ] }) : groups.map((grp) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(React22.Fragment, { children: [
+          grp.g ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "fd-pop-group", children: grp.g }) : null,
+          grp.items.map(({ o, i }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+            "button",
+            {
+              type: "button",
+              "data-i": i,
+              role: "option",
+              "aria-selected": isOn(o.value),
+              "aria-disabled": o.disabled || void 0,
+              className: ["fd-opt", i === active ? "is-active" : "", isOn(o.value) ? "is-selected" : ""].filter(Boolean).join(" "),
+              onMouseEnter: () => setActive(i),
+              onClick: () => pick(o),
+              children: [
+                multiple ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": "true", style: { flex: "none", display: "grid", placeItems: "center", width: 16, height: 16, borderRadius: 4, border: "1.5px solid " + (isOn(o.value) ? "var(--brand)" : "var(--border-strong, var(--border))"), background: isOn(o.value) ? "var(--brand)" : "var(--surface)", color: "#fff" }, children: isOn(o.value) ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-check", style: { fontSize: 11 } }) : null }) : null,
+                o.icon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-opt-icon", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-" + o.icon }) }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-opt-label", children: o.label }),
+                  o.description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-opt-desc", children: o.description }) : null
+                ] }),
+                o.meta ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-opt-meta", children: o.meta }) : null,
+                multiple ? null : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-opt-check", children: o.value === value ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-check" }) : null })
+              ]
+            },
+            String(o.value)
+          ))
+        ] }, grp.g || "_")) })
+      }
+    ),
     error ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "fd-field-error", children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       error
@@ -3778,8 +3876,7 @@ function Select({
 }
 
 // src/components/forms/DatePicker.tsx
-var React22 = __toESM(require("react"), 1);
-var import_react_dom6 = require("react-dom");
+var React23 = __toESM(require("react"), 1);
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 var DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -3793,56 +3890,14 @@ var fmt = (s) => {
   const d = parse(s);
   return d ? MONTHS[d.getMonth()].slice(0, 3) + " " + d.getDate() + ", " + d.getFullYear() : "";
 };
-function usePopPos2(open, ref, estH, estW) {
-  const [pos, setPos] = React22.useState(null);
-  React22.useLayoutEffect(() => {
-    if (!open || !ref.current) {
-      setPos(null);
-      return;
-    }
-    const calc = () => {
-      const r = ref.current.getBoundingClientRect();
-      const below = window.innerHeight - r.bottom;
-      const up = below < estH && r.top > below;
-      const w = Math.max(r.width, estW || 0);
-      const maxH = Math.min(window.innerHeight - 16, Math.max(160, (up ? r.top : below) - 14));
-      setPos({
-        left: Math.max(8, Math.min(r.left, window.innerWidth - w - 8)),
-        width: r.width,
-        top: up ? null : r.bottom + 6,
-        bottom: up ? window.innerHeight - r.top + 6 : null,
-        up,
-        maxH
-      });
-    };
-    calc();
-    window.addEventListener("scroll", calc, true);
-    window.addEventListener("resize", calc);
-    return () => {
-      window.removeEventListener("scroll", calc, true);
-      window.removeEventListener("resize", calc);
-    };
-  }, [open]);
-  return pos;
-}
-var popStyle2 = (pos, extra) => ({
-  position: "fixed",
-  left: pos.left,
-  top: pos.top == null ? "auto" : pos.top,
-  bottom: pos.bottom == null ? "auto" : pos.bottom,
-  transformOrigin: pos.up ? "bottom center" : "top center",
-  maxHeight: pos.maxH,
-  overflowY: "auto",
-  ...extra
-});
 function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
   const today = /* @__PURE__ */ new Date();
   const sel = range ? value || {} : { start: value, end: value };
   const anchor = parse(sel.start) || parse(initialMonth) || today;
-  const [vy, setVy] = React22.useState(anchor.getFullYear());
-  const [vm, setVm] = React22.useState(anchor.getMonth());
-  const [mode2, setMode] = React22.useState("days");
-  const [hover, setHover] = React22.useState(null);
+  const [vy, setVy] = React23.useState(anchor.getFullYear());
+  const [vm, setVm] = React23.useState(anchor.getMonth());
+  const [mode2, setMode] = React23.useState("days");
+  const [hover, setHover] = React23.useState(null);
   const s = parse(sel.start), e = parse(sel.end);
   const hoverEnd = range && s && !e && hover ? parse(hover) : null;
   const inRange = (d) => {
@@ -3958,28 +4013,9 @@ function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
 }
 function DatePicker({ label, help, error, required = false, disabled = false, range = false, value, onChange, placeholder, id, className = "", style, ...rest }) {
   const { fieldId, labelId, ariaLabelledBy } = useTriggerLabelling(label, id);
-  const [open, setOpen] = React22.useState(false);
-  const rootRef = React22.useRef(null);
-  const boxRef = React22.useRef(null);
-  const popRef = React22.useRef(null);
-  const pos = usePopPos2(open, boxRef, 430, range ? 600 : 316);
-  React22.useEffect(() => {
-    if (!open) return;
-    const away = (e) => {
-      if (rootRef.current && rootRef.current.contains(e.target)) return;
-      if (popRef.current && popRef.current.contains(e.target)) return;
-      setOpen(false);
-    };
-    const esc = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", away);
-    document.addEventListener("keydown", esc);
-    return () => {
-      document.removeEventListener("pointerdown", away);
-      document.removeEventListener("keydown", esc);
-    };
-  }, [open]);
+  const [open, setOpen] = React23.useState(false);
+  const rootRef = React23.useRef(null);
+  const boxRef = React23.useRef(null);
   const display = range ? value && value.start ? fmt(value.start) + (value.end ? "  \u2192  " + fmt(value.end) : "  \u2192  \u2026") : "" : fmt(value);
   const toggle = () => {
     if (!disabled) setOpen(!open);
@@ -4008,21 +4044,31 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
       ),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "fd-select-caret", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("i", { className: "ph ph-caret-down", "aria-hidden": "true" }) })
     ] }),
-    open && pos ? (0, import_react_dom6.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "fd-pop" + (pos.up ? " is-up" : ""), ref: popRef, style: popStyle2(pos, { width: "max-content", minWidth: 0, zIndex: 130 }), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        Calendar,
-        {
-          range,
-          months: range ? 2 : 1,
-          value,
-          onPick: (v) => {
-            onChange && onChange({ target: { value: v } });
-            if (!range || v.start && v.end) setOpen(false);
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      Popover,
+      {
+        open,
+        anchorRef: boxRef,
+        triggerRef: rootRef,
+        onClose: () => setOpen(false),
+        placement: "bottom-start",
+        offset: 6,
+        role: "presentation",
+        style: { width: "max-content", zIndex: 130 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          Calendar,
+          {
+            range,
+            months: range ? 2 : 1,
+            value,
+            onPick: (v) => {
+              onChange && onChange({ target: { value: v } });
+              if (!range || v.start && v.end) setOpen(false);
+            }
           }
-        }
-      ) }),
-      document.body
-    ) : null,
+        )
+      }
+    ),
     error ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "fd-field-error", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       error
@@ -4031,61 +4077,18 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
 }
 
 // src/components/forms/TimePicker.tsx
-var React23 = __toESM(require("react"), 1);
-var import_react_dom7 = require("react-dom");
+var React24 = __toESM(require("react"), 1);
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var pad = (n) => String(n).padStart(2, "0");
-function usePopPos3(open, ref, estH, estW) {
-  const [pos, setPos] = React23.useState(null);
-  React23.useLayoutEffect(() => {
-    if (!open || !ref.current) {
-      setPos(null);
-      return;
-    }
-    const calc = () => {
-      const r = ref.current.getBoundingClientRect();
-      const below = window.innerHeight - r.bottom;
-      const up = below < estH && r.top > below;
-      const w = Math.max(r.width, estW || 0);
-      const maxH = Math.min(window.innerHeight - 16, Math.max(160, (up ? r.top : below) - 14));
-      setPos({
-        left: Math.max(8, Math.min(r.left, window.innerWidth - w - 8)),
-        width: r.width,
-        top: up ? null : r.bottom + 6,
-        bottom: up ? window.innerHeight - r.top + 6 : null,
-        up,
-        maxH
-      });
-    };
-    calc();
-    window.addEventListener("scroll", calc, true);
-    window.addEventListener("resize", calc);
-    return () => {
-      window.removeEventListener("scroll", calc, true);
-      window.removeEventListener("resize", calc);
-    };
-  }, [open]);
-  return pos;
-}
-var popStyle3 = (pos, extra) => ({
-  position: "fixed",
-  left: pos.left,
-  top: pos.top == null ? "auto" : pos.top,
-  bottom: pos.bottom == null ? "auto" : pos.bottom,
-  transformOrigin: pos.up ? "bottom center" : "top center",
-  maxHeight: pos.maxH,
-  overflowY: "auto",
-  ...extra
-});
 function ClockFace({ value = "09:00", onChange }) {
   let [h24, m] = value.split(":").map(Number);
   if (isNaN(h24)) h24 = 9;
   if (isNaN(m)) m = 0;
   const pm = h24 >= 12;
   const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
-  const [mode2, setMode] = React23.useState("h");
-  const faceRef = React23.useRef(null);
-  const dragging = React23.useRef(false);
+  const [mode2, setMode] = React24.useState("h");
+  const faceRef = React24.useRef(null);
+  const dragging = React24.useRef(false);
   const set = (h, mm, isPm) => onChange((isPm ? h % 12 + 12 : h % 12) + ":" + pad(mm));
   const R = 108, NR = 80;
   const nums = mode2 === "h" ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 12 }, (_, i) => i * 5);
@@ -4158,28 +4161,9 @@ function ClockFace({ value = "09:00", onChange }) {
 }
 function TimePicker({ label, help, error, required = false, disabled = false, value = "", onChange, placeholder = "Pick a time", id, className = "", style }) {
   const { fieldId, labelId, ariaLabelledBy } = useTriggerLabelling(label, id);
-  const [open, setOpen] = React23.useState(false);
-  const rootRef = React23.useRef(null);
-  const boxRef = React23.useRef(null);
-  const popRef = React23.useRef(null);
-  const pos = usePopPos3(open, boxRef, 420, 262);
-  React23.useEffect(() => {
-    if (!open) return;
-    const away = (e) => {
-      if (rootRef.current && rootRef.current.contains(e.target)) return;
-      if (popRef.current && popRef.current.contains(e.target)) return;
-      setOpen(false);
-    };
-    const esc = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", away);
-    document.addEventListener("keydown", esc);
-    return () => {
-      document.removeEventListener("pointerdown", away);
-      document.removeEventListener("keydown", esc);
-    };
-  }, [open]);
+  const [open, setOpen] = React24.useState(false);
+  const rootRef = React24.useRef(null);
+  const boxRef = React24.useRef(null);
   const disp = () => {
     if (!value) return "";
     const [h, m] = value.split(":").map(Number);
@@ -4211,10 +4195,19 @@ function TimePicker({ label, help, error, required = false, disabled = false, va
       ),
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fd-select-caret", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("i", { className: "ph ph-caret-down", "aria-hidden": "true" }) })
     ] }),
-    open && pos ? (0, import_react_dom7.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "fd-pop" + (pos.up ? " is-up" : ""), ref: popRef, style: popStyle3(pos, { width: 262, minWidth: 0, zIndex: 130 }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ClockFace, { value: value || "09:00", onChange: (v) => onChange && onChange({ target: { value: v } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "fd-cal-foot", style: { margin: "0 14px 12px", paddingTop: 10 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      Popover,
+      {
+        open,
+        anchorRef: boxRef,
+        triggerRef: rootRef,
+        onClose: () => setOpen(false),
+        placement: "bottom-start",
+        offset: 6,
+        width: 262,
+        role: "presentation",
+        style: { zIndex: 130 },
+        footer: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(React24.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "button",
             {
@@ -4230,10 +4223,10 @@ function TimePicker({ label, help, error, required = false, disabled = false, va
           ),
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { style: { flex: 1 } }),
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { type: "button", className: "fd-btn fd-btn-primary fd-btn-sm", onClick: () => setOpen(false), children: "Done" })
-        ] })
-      ] }),
-      document.body
-    ) : null,
+        ] }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ClockFace, { value: value || "09:00", onChange: (v) => onChange && onChange({ target: { value: v } }) })
+      }
+    ),
     error ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "fd-field-error", children: [
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       error
@@ -4242,7 +4235,7 @@ function TimePicker({ label, help, error, required = false, disabled = false, va
 }
 
 // src/components/forms/Slider.tsx
-var React24 = __toESM(require("react"), 1);
+var React25 = __toESM(require("react"), 1);
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function Slider({
   label,
@@ -4260,7 +4253,7 @@ function Slider({
   ...rest
 }) {
   const fieldId = useFieldId(id);
-  const [dragging, setDragging] = React24.useState(false);
+  const [dragging, setDragging] = React25.useState(false);
   const v = value === void 0 ? min : Number(value);
   const pct = max === min ? 0 : (v - min) / (max - min) * 100;
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: ["fd-field", className].filter(Boolean).join(" "), children: [
@@ -4294,7 +4287,7 @@ function Slider({
 }
 
 // src/components/forms/RangeSlider.tsx
-var React25 = __toESM(require("react"), 1);
+var React26 = __toESM(require("react"), 1);
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function RangeSlider({
   label,
@@ -4314,9 +4307,9 @@ function RangeSlider({
 }) {
   const fmt2 = format || ((v) => String(v));
   const [a, b] = value || [min, max];
-  const [drag, setDrag] = React25.useState(null);
-  const [focus, setFocus] = React25.useState(null);
-  const railRef = React25.useRef(null);
+  const [drag, setDrag] = React26.useState(null);
+  const [focus, setFocus] = React26.useState(null);
+  const railRef = React26.useRef(null);
   const pct = (v) => max === min ? 0 : (v - min) / (max - min) * 100;
   const clampPair = (i, v) => {
     v = Math.min(max, Math.max(min, Math.round(v / step) * step));
@@ -4331,7 +4324,7 @@ function RangeSlider({
     const r = railRef.current.getBoundingClientRect();
     return min + Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * (max - min);
   };
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (drag === null) return;
     const mv = (e) => onChange && onChange(clampPair(drag, fromEvent(e)));
     const upH = () => setDrag(null);
@@ -4412,7 +4405,7 @@ function RangeSlider({
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "fd-range" + (hasLabels ? " has-labels" : ""), onPointerDown: onRailDown, children: [
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-range-rail", ref: railRef }),
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-range-fill", style: { left: pct(a) + "%", width: pct(b) - pct(a) + "%" } }),
-      marks.map((m) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(React25.Fragment, { children: [
+      marks.map((m) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(React26.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-range-mark" + (m.value >= a && m.value <= b ? " is-in" : ""), style: { left: pct(m.value) + "%" } }),
         m.label ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fd-range-mark-label", style: { left: pct(m.value) + "%" }, children: m.label }) : null
       ] }, m.value)),
@@ -4441,7 +4434,7 @@ function RangeSlider({
 }
 
 // src/components/forms/Dropzone.tsx
-var React26 = __toESM(require("react"), 1);
+var React27 = __toESM(require("react"), 1);
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function Dropzone({
   onFiles,
@@ -4456,8 +4449,8 @@ function Dropzone({
   className = "",
   style
 }) {
-  const [over, setOver] = React26.useState(false);
-  const depth = React26.useRef(0);
+  const [over, setOver] = React27.useState(false);
+  const depth = React27.useRef(0);
   const has = (e) => {
     const dt = e.dataTransfer;
     if (!dt) return false;
@@ -4519,8 +4512,8 @@ function FilePickButton({
   className = "",
   children
 }) {
-  const ref = React26.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(React26.Fragment, { children: [
+  const ref = React27.useRef(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(React27.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "button",
       {
@@ -4553,10 +4546,10 @@ function FilePickButton({
 }
 function useStagedFiles(upload, opts) {
   const o = opts || {};
-  const [items, setItems] = React26.useState([]);
-  const controllers = React26.useRef({});
+  const [items, setItems] = React27.useState([]);
+  const controllers = React27.useRef({});
   const patch = (id, next) => setItems((list) => list.map((f) => f.id === id ? Object.assign({}, f, next) : f));
-  const run = React26.useCallback((att) => {
+  const run = React27.useCallback((att) => {
     if (!upload) return;
     const ac = typeof AbortController !== "undefined" ? new AbortController() : null;
     controllers.current[att.id] = ac;
@@ -4573,14 +4566,14 @@ function useStagedFiles(upload, opts) {
       delete controllers.current[att.id];
     });
   }, [upload]);
-  const add = React26.useCallback((files) => {
+  const add = React27.useCallback((files) => {
     if (!upload) return [];
     const atts = Array.from(files).map((f) => toAttachment(f));
     setItems((list) => list.concat(atts));
     atts.forEach(run);
     return atts;
   }, [upload, run]);
-  const remove = React26.useCallback((att) => {
+  const remove = React27.useCallback((att) => {
     const ac = controllers.current[att.id];
     if (ac) {
       try {
@@ -4591,10 +4584,10 @@ function useStagedFiles(upload, opts) {
     }
     setItems((list) => list.filter((f) => f.id !== att.id));
   }, []);
-  const retry = React26.useCallback((att) => {
+  const retry = React27.useCallback((att) => {
     run(att);
   }, [run]);
-  const clear = React26.useCallback(() => {
+  const clear = React27.useCallback(() => {
     Object.values(controllers.current).forEach((ac) => {
       try {
         ac && ac.abort();
@@ -4718,7 +4711,7 @@ function FileGrid({ files = [], onOpen, onRemove, onRetry, tiles = true, maxHeig
 }
 
 // src/components/forms/MarkdownEditor.tsx
-var React27 = __toESM(require("react"), 1);
+var React28 = __toESM(require("react"), 1);
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || "");
 var INLINE_RE = /(\*\*\*[^*\n]+\*\*\*|\*\*[^*\n]+\*\*|__[^_\n]+__|~~[^~\n]+~~|`[^`\n]+`|\*[^*\s][^*\n]*\*|(?<![A-Za-z0-9_])_[^_\s][^_\n]*_|\[[^\]\n]*\]\([^)\s\n]*\)|https?:\/\/\S+)/g;
@@ -4932,7 +4925,7 @@ function syncDom(root, value) {
   while (root.children.length > lines.length) root.removeChild(root.lastChild);
 }
 var LIST_CONT = RE_LI;
-var MarkdownEditor = React27.forwardRef(function MarkdownEditor2({
+var MarkdownEditor = React28.forwardRef(function MarkdownEditor2({
   value = "",
   onChange,
   onSubmit,
@@ -4951,10 +4944,10 @@ var MarkdownEditor = React27.forwardRef(function MarkdownEditor2({
   className = "",
   id
 }, ref) {
-  const boxRef = React27.useRef(null);
-  const composing = React27.useRef(false);
-  const pendingCaret = React27.useRef(null);
-  React27.useLayoutEffect(() => {
+  const boxRef = React28.useRef(null);
+  const composing = React28.useRef(false);
+  const pendingCaret = React28.useRef(null);
+  React28.useLayoutEffect(() => {
     const root = boxRef.current;
     if (!root || composing.current) return;
     const active = document.activeElement === root || root.contains(document.activeElement);
@@ -4963,7 +4956,7 @@ var MarkdownEditor = React27.forwardRef(function MarkdownEditor2({
     pendingCaret.current = null;
     if (active && caret != null) placeCaret(root, caret);
   }, [value]);
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (autoFocus && boxRef.current) boxRef.current.focus();
   }, [autoFocus]);
   const caretNow = () => {
@@ -5030,7 +5023,7 @@ var MarkdownEditor = React27.forwardRef(function MarkdownEditor2({
       api.replaceRange(from, to, next, from + next.length);
     }
   };
-  React27.useImperativeHandle(ref, () => api);
+  React28.useImperativeHandle(ref, () => api);
   function detect(text, caret) {
     if (!onTrigger) return;
     const upto = text.slice(0, caret);
@@ -5182,10 +5175,10 @@ var MarkdownEditor = React27.forwardRef(function MarkdownEditor2({
 });
 
 // src/components/platform/AccountMenu.tsx
-var React29 = __toESM(require("react"), 1);
+var React30 = __toESM(require("react"), 1);
 
 // src/kits/session.ts
-var React28 = __toESM(require("react"), 1);
+var React29 = __toESM(require("react"), 1);
 var PERMISSION_CATALOG = [
   { group: "Plans", items: [
     { key: "plan.view", label: "View plans", detail: "Read any plan in the workspace." },
@@ -6752,8 +6745,8 @@ function roadmap(overrides) {
   };
 }
 function useSession() {
-  const [s, setS] = React28.useState(getSession);
-  React28.useEffect(() => subscribe(setS), []);
+  const [s, setS] = React29.useState(getSession);
+  React29.useEffect(() => subscribe(setS), []);
   return s;
 }
 var SessionKit = {
@@ -6823,9 +6816,9 @@ function AccountMenu({
   ...rest
 }) {
   const session = SessionKit.useSession();
-  const [open, setOpen] = React29.useState(false);
-  const [switching, setSwitching] = React29.useState(false);
-  const ref = React29.useRef(null);
+  const [open, setOpen] = React30.useState(false);
+  const [switching, setSwitching] = React30.useState(false);
+  const ref = React30.useRef(null);
   const user = session.user;
   const visibleAdmin = adminLinks.filter((l) => !l.perm || SessionKit.can(l.perm));
   const pick = (item) => {
@@ -6877,7 +6870,7 @@ function AccountMenu({
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { style: { flex: 1 }, children: "View as another member" }),
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-caret-" + (switching ? "up" : "down"), "aria-hidden": "true", style: { fontSize: 11 } })
         ] }),
-        switching ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "fd-stack", style: { gap: 0, maxHeight: 208, overflowY: "auto" }, children: session.allUsers.filter((u) => u.status === "active").map((u) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        switching ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "fd-stack", style: { gap: 0 }, children: session.allUsers.filter((u) => u.status === "active").map((u) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
           "button",
           {
             type: "button",
@@ -6909,14 +6902,14 @@ function AccountMenu({
 }
 
 // src/components/platform/ApiSpecBrowser.tsx
-var React30 = __toESM(require("react"), 1);
+var React31 = __toESM(require("react"), 1);
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var METHOD_TONE = { GET: "success", POST: "info", PATCH: "warning", PUT: "warning", DELETE: "danger" };
 function Json({ obj }) {
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("pre", { className: "fd-json", children: JSON.stringify(obj, null, 2) });
 }
 function Endpoint({ s, onRequest }) {
-  const [tried, setTried] = React30.useState(null);
+  const [tried, setTried] = React31.useState(null);
   const run = async () => {
     setTried("busy");
     const t0 = (window.performance || Date).now();
@@ -6989,10 +6982,10 @@ function ApiSpecBrowser({
   className = "",
   ...rest
 }) {
-  const [q, setQ] = React30.useState("");
-  const [method, setMethod] = React30.useState(null);
-  const [mod, setMod] = React30.useState(null);
-  const [listOnly, setListOnly] = React30.useState(false);
+  const [q, setQ] = React31.useState("");
+  const [method, setMethod] = React31.useState(null);
+  const [mod, setMod] = React31.useState(null);
+  const [listOnly, setListOnly] = React31.useState(false);
   const activeModule = modules && modules.find((m) => m.id === mod);
   const hits = spec.filter((s) => (!method || s.method === method) && (!listOnly || s.isList) && (!activeModule || activeModule.endpoints.indexOf(s.id) >= 0) && (!q || (s.path + " " + s.title + " " + s.purpose + " " + (s.usedBy || []).join(" ")).toLowerCase().includes(q.toLowerCase())));
   const effGroups = groups && groups.length ? groups : [["All endpoints", spec.map((s) => s.id)]];
@@ -7071,7 +7064,7 @@ function ApiSpecBrowser({
 }
 
 // src/components/platform/ProfilePage.tsx
-var React31 = __toESM(require("react"), 1);
+var React32 = __toESM(require("react"), 1);
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var TIMEZONES = ["America/New_York", "America/Chicago", "America/Denver", "America/Los_Angeles", "America/Anchorage", "Pacific/Honolulu", "Europe/London", "Europe/Berlin"];
 var NOTIFY = [
@@ -7084,7 +7077,7 @@ var NOTIFY = [
 function ProfilePage({ user: userProp, onSave, onNavigate, sessions, showSessions = true, className = "", ...rest }) {
   const session = SessionKit.useSession();
   const user = userProp || session.user;
-  const [draft, setDraft] = React31.useState(() => ({
+  const [draft, setDraft] = React32.useState(() => ({
     name: user.name || "",
     title: user.title || "",
     email: user.email || "",
@@ -7093,8 +7086,8 @@ function ProfilePage({ user: userProp, onSave, onNavigate, sessions, showSession
     bio: user.bio || "",
     notify: user.notify || { planShared: true, planChanged: true, goalMissed: true, flagChanged: false, weekly: true }
   }));
-  const [saving, setSaving] = React31.useState(false);
-  const [saved, setSaved] = React31.useState(false);
+  const [saving, setSaving] = React32.useState(false);
+  const [saved, setSaved] = React32.useState(false);
   const set = (k, v) => {
     setDraft((d) => Object.assign({}, d, { [k]: v }));
     setSaved(false);
@@ -7284,10 +7277,10 @@ function ProfilePage({ user: userProp, onSave, onNavigate, sessions, showSession
 }
 
 // src/components/platform/RoadmapTimeline.tsx
-var React33 = __toESM(require("react"), 1);
+var React34 = __toESM(require("react"), 1);
 
 // src/kits/runtime.ts
-var React32 = __toESM(require("react"), 1);
+var React33 = __toESM(require("react"), 1);
 var WIRED_ENDPOINTS = [
   // Nothing yet. Every id below would come from a real service:
   //   "plan.get", "placements.list", …
@@ -7458,8 +7451,8 @@ var RuntimeKit = {
 };
 RuntimeKit.declare(FEATURE_NEEDS);
 function useRuntimeMode() {
-  const [m, setM] = React32.useState(RuntimeKit.getMode());
-  React32.useEffect(() => RuntimeKit.subscribe(setM), []);
+  const [m, setM] = React33.useState(RuntimeKit.getMode());
+  React33.useEffect(() => RuntimeKit.subscribe(setM), []);
   return m;
 }
 function useFeatureStatus(key) {
@@ -7542,12 +7535,12 @@ function RoadmapCard({ item, byKey, onOpenFlag }) {
 }
 function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
   const session = SessionKit.useSession();
-  const [project, setProject] = React33.useState("");
-  const [q, setQ] = React33.useState("");
-  const scrollRef = React33.useRef(null);
-  const nowRef = React33.useRef(null);
-  const rm = React33.useMemo(() => SessionKit.roadmap({ isComplete: RuntimeKit.isComplete }), [session]);
-  const byKey = React33.useMemo(() => {
+  const [project, setProject] = React34.useState("");
+  const [q, setQ] = React34.useState("");
+  const scrollRef = React34.useRef(null);
+  const nowRef = React34.useRef(null);
+  const rm = React34.useMemo(() => SessionKit.roadmap({ isComplete: RuntimeKit.isComplete }), [session]);
+  const byKey = React34.useMemo(() => {
     const m = {};
     rm.items.forEach((i) => {
       m[i.key] = i;
@@ -7556,7 +7549,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
   }, [rm]);
   const items = rm.items.filter((i) => (!project || i.project === project) && (!q || (i.label + " " + i.description + " " + (i.backend || "") + " " + i.key).toLowerCase().includes(q.toLowerCase())));
   const projects = [...new Set(rm.items.map((i) => i.project))];
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     let raf1 = 0, raf2 = 0;
     const place = () => {
       const box = scrollRef.current, mark = nowRef.current;
@@ -7630,7 +7623,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
         lastPhase = item.phase;
         const inPhase = items.filter((i) => i.phase === item.phase).length;
         const isBoundary = n === firstPending;
-        return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(React33.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(React34.Fragment, { children: [
           showPhase ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "fd-rm-era", children: [
             /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "fd-row", style: { gap: 8, flexWrap: "wrap", alignItems: "baseline" }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { style: { fontWeight: 700 }, children: item.phase === 0 ? "Shipped" : "Phase " + item.phase + " \u2014 " + item.phaseName }),
@@ -7674,8 +7667,8 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 }
 
 // src/components/platform/ComingSoon.tsx
-var React34 = __toESM(require("react"), 1);
-var import_react_dom8 = require("react-dom");
+var React35 = __toESM(require("react"), 1);
+var import_react_dom5 = require("react-dom");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var BYPASS_STORE = "fd.soon.bypass.v1";
 function readBypassed() {
@@ -7692,8 +7685,8 @@ function writeBypassed(list) {
   }
 }
 function useBypass(key) {
-  const [on, setOn] = React34.useState(() => !!key && readBypassed().indexOf(key) >= 0);
-  React34.useEffect(() => {
+  const [on, setOn] = React35.useState(() => !!key && readBypassed().indexOf(key) >= 0);
+  React35.useEffect(() => {
     setOn(!!key && readBypassed().indexOf(key) >= 0);
   }, [key]);
   const set = (next) => {
@@ -7740,9 +7733,9 @@ function SoonCard({ label, detail, backend, eta, effort, onRoadmap, allowed, onB
   ] });
 }
 function useHoverCard(open) {
-  const anchor = React34.useRef(null);
-  const [pos, setPos] = React34.useState(null);
-  React34.useLayoutEffect(() => {
+  const anchor = React35.useRef(null);
+  const [pos, setPos] = React35.useState(null);
+  React35.useLayoutEffect(() => {
     if (!open || !anchor.current) {
       setPos(null);
       return;
@@ -7869,9 +7862,9 @@ function ComingSoon({
   ] });
 }
 function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass, blur, tip, className, rest, children }) {
-  const [open, setOpen] = React34.useState(false);
+  const [open, setOpen] = React35.useState(false);
   const [anchor, pos] = useHoverCard(open);
-  const close = React34.useRef(null);
+  const close = React35.useRef(null);
   const show = () => {
     if (close.current) {
       clearTimeout(close.current);
@@ -7887,7 +7880,7 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
       setOpen(false);
     }, 140);
   };
-  React34.useEffect(() => () => {
+  React35.useEffect(() => () => {
     if (close.current) clearTimeout(close.current);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
@@ -7916,7 +7909,7 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
             children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-traffic-cone", "aria-hidden": "true" })
           }
         ),
-        open && pos ? (0, import_react_dom8.createPortal)(
+        open && pos ? (0, import_react_dom5.createPortal)(
           /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             "div",
             {
@@ -8056,13 +8049,13 @@ function PermissionHint({ perm, children }) {
 }
 
 // src/components/platform/ModeSwitch.tsx
-var React35 = __toESM(require("react"), 1);
+var React36 = __toESM(require("react"), 1);
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog, onOpenSpec, summary }) {
   const mode2 = useRuntimeMode();
-  const [open, setOpen] = React35.useState(false);
-  const ref = React35.useRef(null);
-  React35.useEffect(() => {
+  const [open, setOpen] = React36.useState(false);
+  const ref = React36.useRef(null);
+  React36.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -8311,11 +8304,11 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
 }
 
 // src/components/planner/MixGap.tsx
-var React36 = __toESM(require("react"), 1);
+var React37 = __toESM(require("react"), 1);
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function MixGap({ rows = [], loading = false, className = "" }) {
   const max = Math.max(1, ...rows.flatMap((r) => [r.target, r.realized]));
-  const [hover, setHover] = React36.useState(null);
+  const [hover, setHover] = React37.useState(null);
   const toneOf = (gap) => gap >= -1 ? "ok" : gap >= -4 ? "warn" : "danger";
   const TONE = { ok: "var(--ok-solid)", warn: "var(--warn-solid)", danger: "var(--danger-solid)" };
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 4 }, children: [
@@ -8455,7 +8448,7 @@ function ChannelContribution({
 }
 
 // src/components/planner/BudgetReallocator.tsx
-var React37 = __toESM(require("react"), 1);
+var React38 = __toESM(require("react"), 1);
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var bandFor = (crp) => crp >= 200 ? "dominant" : crp >= 100 ? "strong" : crp >= 50 ? "adequate" : "weak";
 function BudgetReallocator({
@@ -8471,8 +8464,8 @@ function BudgetReallocator({
   onCancel,
   className = ""
 }) {
-  const [draft, setDraft] = React37.useState(spend);
-  React37.useEffect(() => setDraft(spend), [spend]);
+  const [draft, setDraft] = React38.useState(spend);
+  React38.useEffect(() => setDraft(spend), [spend]);
   const dirty = draft !== spend;
   const nextCrp = scoreFor ? scoreFor(draft) : crp;
   const nextBand = bandFor(nextCrp);
@@ -8642,7 +8635,7 @@ function ImportanceTag({ level, showLabel = true, size = "sm", className = "" })
 }
 
 // src/components/planner/PreferenceMeter.tsx
-var React38 = __toESM(require("react"), 1);
+var React39 = __toESM(require("react"), 1);
 var import_jsx_runtime72 = require("react/jsx-runtime");
 function preferenceScore(criteria) {
   const earned = criteria.reduce((n, c) => n + (Number(c.earned) || 0), 0);
@@ -8672,7 +8665,7 @@ function PreferenceMeter({
   className = ""
 }) {
   const value = score == null ? preferenceScore(criteria) : score;
-  const segments = React38.useMemo(() => preferenceSegments(criteria), [criteria]);
+  const segments = React39.useMemo(() => preferenceSegments(criteria), [criteria]);
   return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     ScoreMeter,
     {
@@ -8711,10 +8704,10 @@ function PreferenceMeter({
 }
 
 // src/components/chat/AgentChatPanel.tsx
-var React44 = __toESM(require("react"), 1);
+var React45 = __toESM(require("react"), 1);
 
 // src/components/chat/chatEngine.ts
-var React39 = __toESM(require("react"), 1);
+var React40 = __toESM(require("react"), 1);
 var CHAT_UNAVAILABLE = "chat_unavailable";
 var JOB_PENDING = ["queued", "running"];
 var JOB_SUCCESS = ["completed", "recovered"];
@@ -8768,22 +8761,22 @@ function useChatEngine(opts) {
     onClear,
     onFeedback
   } = opts || {};
-  const [status, setStatus] = React39.useState("idle");
-  const [threadId, setThreadId] = React39.useState(null);
-  const [messages, setMessages] = React39.useState([]);
-  const [queue, setQueue] = React39.useState([]);
-  const [fatal, setFatal] = React39.useState(null);
-  const [busy, setBusy] = React39.useState(false);
-  const [turnStartedAt, setTurnStartedAt] = React39.useState(null);
-  const listRef = React39.useRef([]);
-  const queueRef = React39.useRef([]);
-  const busyRef = React39.useRef(false);
-  const stoppedRef = React39.useRef(false);
-  const abortRef = React39.useRef(null);
-  const serverCount = React39.useRef(0);
-  const threadRef = React39.useRef(null);
-  const mounted = React39.useRef(true);
-  React39.useEffect(() => {
+  const [status, setStatus] = React40.useState("idle");
+  const [threadId, setThreadId] = React40.useState(null);
+  const [messages, setMessages] = React40.useState([]);
+  const [queue, setQueue] = React40.useState([]);
+  const [fatal, setFatal] = React40.useState(null);
+  const [busy, setBusy] = React40.useState(false);
+  const [turnStartedAt, setTurnStartedAt] = React40.useState(null);
+  const listRef = React40.useRef([]);
+  const queueRef = React40.useRef([]);
+  const busyRef = React40.useRef(false);
+  const stoppedRef = React40.useRef(false);
+  const abortRef = React40.useRef(null);
+  const serverCount = React40.useRef(0);
+  const threadRef = React40.useRef(null);
+  const mounted = React40.useRef(true);
+  React40.useEffect(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -8805,14 +8798,14 @@ function useChatEngine(opts) {
     }
     return false;
   };
-  const loadThread = React39.useCallback(async (id) => {
+  const loadThread = React40.useCallback(async (id) => {
     const data = await apiAdapter.getThread(id);
     const list = [...data && data.messages || []];
     serverCount.current = list.length;
     commit(list);
     return list;
   }, [apiAdapter]);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (!apiAdapter) {
       setStatus("idle");
       setFatal(null);
@@ -9025,7 +9018,7 @@ function useChatEngine(opts) {
       await dispatchTurn(turn);
     }
   }
-  const send = React39.useCallback((text, attachments) => {
+  const send = React40.useCallback((text, attachments) => {
     const body = (text || "").trim();
     if (!body && !(attachments && attachments.length)) return;
     if (status === "disconnected") return;
@@ -9035,7 +9028,7 @@ function useChatEngine(opts) {
     stoppedRef.current = false;
     drain();
   }, [status]);
-  const stop = React39.useCallback(() => {
+  const stop = React40.useCallback(() => {
     stoppedRef.current = true;
     const ac = abortRef.current;
     if (ac) {
@@ -9054,11 +9047,11 @@ function useChatEngine(opts) {
       store.del(STORAGE_PREFIX + threadRef.current);
     }
   }, [apiAdapter]);
-  const removeQueued = React39.useCallback((id) => {
+  const removeQueued = React40.useCallback((id) => {
     queueRef.current = queueRef.current.filter((t) => t.id !== id);
     setQueue(queueRef.current.slice());
   }, []);
-  const retry = React39.useCallback(() => {
+  const retry = React40.useCallback(() => {
     const list = listRef.current;
     let at = -1;
     for (let i = list.length - 1; i >= 0; i--) if (list[i].role === "user") {
@@ -9074,19 +9067,19 @@ function useChatEngine(opts) {
     setQueue(queueRef.current.slice());
     drain();
   }, []);
-  const clear = React39.useCallback(() => {
+  const clear = React40.useCallback(() => {
     commit([]);
     serverCount.current = 0;
     queueRef.current = [];
     setQueue([]);
     onClear && onClear();
   }, [onClear]);
-  const setFeedback = React39.useCallback((id, value) => {
+  const setFeedback = React40.useCallback((id, value) => {
     patch(id, (m) => ({ feedback: m.feedback === value ? null : value }));
     const msg = listRef.current.find((m) => m.id === id);
     onFeedback && onFeedback({ message: msg, feedback: msg ? msg.feedback : value });
   }, [onFeedback]);
-  const reload = React39.useCallback(async () => {
+  const reload = React40.useCallback(async () => {
     if (!threadRef.current) return;
     setStatus("loading");
     try {
@@ -9124,10 +9117,10 @@ var ChatKit = {
 };
 
 // src/components/chat/ChatTranscript.tsx
-var React41 = __toESM(require("react"), 1);
+var React42 = __toESM(require("react"), 1);
 
 // src/components/chat/ChatTurn.tsx
-var React40 = __toESM(require("react"), 1);
+var React41 = __toESM(require("react"), 1);
 var import_jsx_runtime73 = require("react/jsx-runtime");
 function JsonView({ value }) {
   let text;
@@ -9164,7 +9157,7 @@ function PacketCard({ packet, schema, render, onApply, applied }) {
   ] });
 }
 function ThinkingBlock({ text, durationMs, streaming, defaultOpen = false }) {
-  const [open, setOpen] = React40.useState(defaultOpen);
+  const [open, setOpen] = React41.useState(defaultOpen);
   if (!text) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "fdc-think" + (open ? " is-open" : ""), children: [
     /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("button", { type: "button", className: "fdc-think-head", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
@@ -9181,7 +9174,7 @@ function ThinkingBlock({ text, durationMs, streaming, defaultOpen = false }) {
   ] });
 }
 function Citations({ items = [], onOpen }) {
-  const [open, setOpen] = React40.useState(false);
+  const [open, setOpen] = React41.useState(false);
   if (!items.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "fdc-cites", children: [
     /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("button", { type: "button", className: "fdc-cites-head", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
@@ -9207,7 +9200,7 @@ function clampText(text, max) {
   return (at > max * 0.6 ? cut.slice(0, at) : cut).trimEnd() + "\u2026";
 }
 function MessageBody({ message: m, ctx }) {
-  const [expanded, setExpanded] = React40.useState(false);
+  const [expanded, setExpanded] = React41.useState(false);
   const isUser = m.role === "user";
   const raw = m.text || "";
   const clamped = !expanded && !m.streaming ? clampText(raw, ctx.maxVisibleChars) : null;
@@ -9274,9 +9267,9 @@ function MessageBody({ message: m, ctx }) {
   ] });
 }
 function useCopyRun() {
-  const [done, setDone] = React40.useState(false);
-  const t = React40.useRef(null);
-  React40.useEffect(() => () => {
+  const [done, setDone] = React41.useState(false);
+  const t = React41.useRef(null);
+  React41.useEffect(() => () => {
     if (t.current) clearTimeout(t.current);
   }, []);
   return [done, (text) => {
@@ -9303,7 +9296,7 @@ function RunActions({ group, ctx }) {
     ] }),
     isAssistant && ctx.onRetry ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", className: "fdc-act", onClick: ctx.onRetry, "aria-label": "Retry this turn", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("i", { className: "ph ph-arrow-clockwise", "aria-hidden": "true" }) }) : null,
     group.role === "user" && ctx.onEdit ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", className: "fdc-act", onClick: () => ctx.onEdit(last), "aria-label": "Edit and resend", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("i", { className: "ph ph-pencil-simple", "aria-hidden": "true" }) }) : null,
-    isAssistant && ctx.onFeedback ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(React40.Fragment, { children: [
+    isAssistant && ctx.onFeedback ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(React41.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", className: "fdc-act" + (fb === "up" ? " is-on" : ""), onClick: () => ctx.onFeedback(last.id, "up"), "aria-pressed": fb === "up", "aria-label": "Good response", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("i", { className: "ph ph-thumbs-up", "aria-hidden": "true" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", className: "fdc-act" + (fb === "down" ? " is-on" : ""), onClick: () => ctx.onFeedback(last.id, "down"), "aria-pressed": fb === "down", "aria-label": "Bad response", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("i", { className: "ph ph-thumbs-down", "aria-hidden": "true" }) })
     ] }) : null,
@@ -9398,10 +9391,10 @@ function ChatTranscript({
   renderEmpty,
   className = ""
 }) {
-  const scroller = React41.useRef(null);
-  const stick = React41.useRef(true);
-  const [pill, setPill] = React41.useState(0);
-  const seen = React41.useRef(0);
+  const scroller = React42.useRef(null);
+  const stick = React42.useRef(true);
+  const [pill, setPill] = React42.useState(0);
+  const seen = React42.useRef(0);
   const toBottom = (smooth) => {
     const el = scroller.current;
     if (!el) return;
@@ -9420,7 +9413,7 @@ function ChatTranscript({
       seen.current = messages.length;
     }
   };
-  React41.useLayoutEffect(() => {
+  React42.useLayoutEffect(() => {
     const el = scroller.current;
     if (!el) return;
     if (stick.current) {
@@ -9428,7 +9421,7 @@ function ChatTranscript({
       seen.current = messages.length;
     } else setPill(Math.max(0, messages.length - seen.current));
   }, [messages]);
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     const el = scroller.current;
     const inner = el && el.firstChild;
     if (!el || !inner || typeof ResizeObserver === "undefined") return;
@@ -9438,7 +9431,7 @@ function ChatTranscript({
     ro.observe(inner);
     return () => ro.disconnect();
   }, []);
-  const groups = React41.useMemo(() => groupMessages(messages), [messages]);
+  const groups = React42.useMemo(() => groupMessages(messages), [messages]);
   const empty = !messages.length && status === "ready";
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: ["fdc-scroll", className].filter(Boolean).join(" "), ref: scroller, onScroll, children: [
     /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "fdc-log", role: "log", "aria-label": "Conversation", children: [
@@ -9462,7 +9455,7 @@ function ChatTranscript({
         const prev = groups[i - 1];
         const k = dayKey(g.messages[0].timestamp);
         const showDay = !!k && (!prev || dayKey(prev.messages[0].timestamp) !== k);
-        return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(React41.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(React42.Fragment, { children: [
           showDay ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "fdc-day", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: dayLabel(k) }) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ChatTurn, { group: g, ctx })
         ] }, g.key || i);
@@ -9479,7 +9472,7 @@ function ChatTranscript({
 var TranscriptKit = { groupMessages };
 
 // src/components/chat/ChatComposer.tsx
-var React42 = __toESM(require("react"), 1);
+var React43 = __toESM(require("react"), 1);
 var import_jsx_runtime75 = require("react/jsx-runtime");
 function ChatComposer({
   onSubmit,
@@ -9507,17 +9500,17 @@ function ChatComposer({
   onReject,
   onOpenAttachment
 }) {
-  const [text, setText] = React42.useState(draft || "");
-  const [trigger, setTrigger] = React42.useState(null);
-  const [mentionItems, setMentionItems] = React42.useState([]);
-  const [listening, setListening] = React42.useState(false);
-  const [notice, setNotice] = React42.useState(null);
-  const editor = React42.useRef(null);
-  const wrap = React42.useRef(null);
-  const stopVoice = React42.useRef(null);
+  const [text, setText] = React43.useState(draft || "");
+  const [trigger, setTrigger] = React43.useState(null);
+  const [mentionItems, setMentionItems] = React43.useState([]);
+  const [listening, setListening] = React43.useState(false);
+  const [notice, setNotice] = React43.useState(null);
+  const editor = React43.useRef(null);
+  const wrap = React43.useRef(null);
+  const stopVoice = React43.useRef(null);
   const staged = useStagedFiles(fileUploadHandler, { onError: () => {
   } });
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (draft != null && draft !== text) setText(draft);
   }, [draft]);
   const change = (v) => {
@@ -9551,7 +9544,7 @@ function ChatComposer({
     e.preventDefault();
     staged.add(found.files);
   };
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (!trigger || trigger.type !== "mention" || !mentionSources) {
       setMentionItems([]);
       return;
@@ -9569,7 +9562,7 @@ function ChatComposer({
     const q = (trigger.query || "").toLowerCase();
     setMentionItems(mentionSources.filter((m) => !q || (m.label + " " + (m.description || "")).toLowerCase().includes(q)));
   }, [trigger, mentionSources]);
-  const slashItems = React42.useMemo(() => {
+  const slashItems = React43.useMemo(() => {
     if (!trigger || trigger.type !== "slash" || !slashCommands) return [];
     const q = (trigger.query || "").toLowerCase();
     return slashCommands.filter((c) => !q || (c.id + " " + c.label + " " + (c.description || "")).toLowerCase().includes(q));
@@ -9743,12 +9736,12 @@ function ChatComposer({
 }
 
 // src/components/chat/ChatSessionBar.tsx
-var React43 = __toESM(require("react"), 1);
+var React44 = __toESM(require("react"), 1);
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var compact2 = meterFormats.compact;
 function ChatSessionBar({ sessionStats, contextUsage, usageLimits, onClear, extras }) {
-  const [open, setOpen] = React43.useState(false);
-  const anchor = React43.useRef(null);
+  const [open, setOpen] = React44.useState(false);
+  const anchor = React44.useRef(null);
   const stats = sessionStats || null;
   const cu = contextUsage || null;
   const limits = usageLimits || null;
@@ -9763,7 +9756,7 @@ function ChatSessionBar({ sessionStats, contextUsage, usageLimits, onClear, extr
   if (stats && stats.runningTasks) bits.push(stats.runningTasks + " running task" + (stats.runningTasks === 1 ? "" : "s"));
   if (cu) bits.push(pct + "% context");
   const expandable = !!(cu || limits);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(React43.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(React44.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "fdc-bar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
         "button",
@@ -9784,60 +9777,73 @@ function ChatSessionBar({ sessionStats, contextUsage, usageLimits, onClear, extr
       ),
       extras
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Popover, { open, anchorRef: anchor, placement: "top-start", onClose: () => setOpen(false), minWidth: 330, maxHeight: 460, padded: true, label: "Usage", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "fdc-usage", children: [
-      cu ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("section", { className: "fdc-usage-sec", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-        SegmentedMeter,
-        {
-          total,
-          segments: cu.segments,
-          label: cu.label || "Context window",
-          format: cu.format === "bytes" ? meterFormats.bytes : compact2,
-          height: 8,
-          legend: true,
-          remainderLabel: "Free"
-        }
-      ) }) : null,
-      limits && limits.length ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("section", { className: "fdc-usage-sec", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("h4", { className: "fdc-usage-h", children: "Usage limits" }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "fdc-usage-rows", children: limits.map((l) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          QuotaRow,
-          {
-            label: l.label,
-            percent: l.percent,
-            note: l.resetsAt ? "Resets " + formatRelative(l.resetsAt) : l.note
-          },
-          l.id
-        )) })
-      ] }) : null,
-      stats ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("section", { className: "fdc-usage-sec fdc-usage-stats", children: [
-        stats.elapsedMs ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: "Session" }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("b", { className: "fd-tabular", children: formatDuration(stats.elapsedMs) })
-        ] }) : null,
-        stats.tokens ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: "Tokens" }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("b", { className: "fd-tabular", children: stats.tokens.toLocaleString() })
-        ] }) : null,
-        stats.costUsd != null ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: "Cost" }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("b", { className: "fd-tabular", children: [
-            "$",
-            Number(stats.costUsd).toFixed(3)
-          ] })
-        ] }) : null,
-        stats.turns ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: "Turns" }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("b", { className: "fd-tabular", children: stats.turns })
-        ] }) : null
-      ] }) : null,
-      onClear ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("footer", { className: "fdc-usage-foot", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("button", { type: "button", className: "fdc-usage-clear", onClick: () => {
-        setOpen(false);
-        onClear();
-      }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("i", { className: "ph ph-trash", "aria-hidden": "true" }),
-        "Clear conversation"
-      ] }) }) : null
-    ] }) })
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      Popover,
+      {
+        open,
+        anchorRef: anchor,
+        placement: "top-start",
+        onClose: () => setOpen(false),
+        minWidth: 330,
+        maxHeight: 460,
+        padded: true,
+        label: "Usage",
+        footer: onClear ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("button", { type: "button", className: "fdc-usage-clear", onClick: () => {
+          setOpen(false);
+          onClear();
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("i", { className: "ph ph-trash", "aria-hidden": "true" }),
+          "Clear conversation"
+        ] }) : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "fdc-usage", children: [
+          cu ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("section", { className: "fdc-usage-sec", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+            SegmentedMeter,
+            {
+              total,
+              segments: cu.segments,
+              label: cu.label || "Context window",
+              format: cu.format === "bytes" ? meterFormats.bytes : compact2,
+              height: 8,
+              legend: true,
+              remainderLabel: "Free"
+            }
+          ) }) : null,
+          limits && limits.length ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("section", { className: "fdc-usage-sec", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("h4", { className: "fdc-usage-h", children: "Usage limits" }),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "fdc-usage-rows", children: limits.map((l) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              QuotaRow,
+              {
+                label: l.label,
+                percent: l.percent,
+                note: l.resetsAt ? "Resets " + formatRelative(l.resetsAt) : l.note
+              },
+              l.id
+            )) })
+          ] }) : null,
+          stats ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("section", { className: "fdc-usage-sec fdc-usage-stats", children: [
+            stats.elapsedMs ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: "Session" }),
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("b", { className: "fd-tabular", children: formatDuration(stats.elapsedMs) })
+            ] }) : null,
+            stats.tokens ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: "Tokens" }),
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("b", { className: "fd-tabular", children: stats.tokens.toLocaleString() })
+            ] }) : null,
+            stats.costUsd != null ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: "Cost" }),
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("b", { className: "fd-tabular", children: [
+                "$",
+                Number(stats.costUsd).toFixed(3)
+              ] })
+            ] }) : null,
+            stats.turns ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: "Turns" }),
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("b", { className: "fd-tabular", children: stats.turns })
+            ] }) : null
+          ] }) : null
+        ] })
+      }
+    )
   ] });
 }
 function ModelControls({
@@ -9891,7 +9897,7 @@ function ModelControls({
       ] })
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(React43.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(React44.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       MenuButton,
       {
@@ -10008,11 +10014,11 @@ function AgentChatPanel({
   onFeedback,
   onEditMessage
 }) {
-  const [panelWidth, setPanelWidth] = React44.useState(width);
-  const [applied, setApplied] = React44.useState({});
-  const [draft, setDraft] = React44.useState("");
-  const dragging = React44.useRef(null);
-  React44.useEffect(() => setPanelWidth(width), [width]);
+  const [panelWidth, setPanelWidth] = React45.useState(width);
+  const [applied, setApplied] = React45.useState({});
+  const [draft, setDraft] = React45.useState("");
+  const dragging = React45.useRef(null);
+  React45.useEffect(() => setPanelWidth(width), [width]);
   const engine = useChatEngine({
     contextType,
     contextId,
@@ -10216,7 +10222,7 @@ function AgentChatPanel({
 }
 
 // src/kits/query.ts
-var React45 = __toESM(require("react"), 1);
+var React46 = __toESM(require("react"), 1);
 function eqFilter(get2) {
   return (row, value) => Array.isArray(value) ? value.includes(get2(row)) : get2(row) === value;
 }
@@ -10248,22 +10254,22 @@ function compare(a, b, dir) {
 var API = null;
 var PREFS = null;
 function useServerTable({ endpoint, params, defaults, deps, prefsKey }) {
-  const [query, setQuery] = React45.useState(() => {
+  const [query, setQuery] = React46.useState(() => {
     const store = PREFS || window.PlannerPrefs;
     const saved = prefsKey && store ? store.getTable(prefsKey) : {};
     return { ...DEFAULTS, ...defaults || {}, ...saved.pageSize ? { pageSize: saved.pageSize } : {}, ...saved.sort ? { sort: saved.sort, dir: saved.dir || "desc" } : {} };
   });
-  const savePref = React45.useCallback((patch2) => {
+  const savePref = React46.useCallback((patch2) => {
     const store = PREFS || window.PlannerPrefs;
     if (prefsKey && store) store.setTable(prefsKey, patch2);
   }, [prefsKey]);
-  const [res, setRes] = React45.useState(null);
-  const [loading, setLoading] = React45.useState(true);
-  const seq2 = React45.useRef(0);
+  const [res, setRes] = React46.useState(null);
+  const [loading, setLoading] = React46.useState(true);
+  const seq2 = React46.useRef(0);
   const depKey = (deps || []).join("|");
   const paramKey = JSON.stringify(params || {});
   const queryKey = JSON.stringify(query);
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     const id = ++seq2.current;
     setLoading(true);
     const t = setTimeout(() => {
@@ -10638,6 +10644,7 @@ function createVersionStore(initialState, options) {
   ModeSwitch,
   ModelControls,
   NumberInput,
+  POPOVER_BODY_MIN,
   PacketCard,
   Pagination,
   PermissionDenied,