@flytedan/flytebot-design-system 0.15.0 → 0.17.0

package/dist/index.cjs

@@ -172,6 +172,7 @@ __export(index_exports, {
   channelWeightOf: () => channelWeightOf,
   computeNeedMore: () => computeNeedMore,
   computeVirtualWindow: () => computeVirtualWindow,
+  createLocalStorageAppearanceStore: () => createLocalStorageAppearanceStore,
   createVersionStore: () => createVersionStore,
   eqFilter: () => eqFilter,
   extensionOf: () => extensionOf,
@@ -211,6 +212,7 @@ __export(index_exports, {
   useChatEngine: () => useChatEngine,
   useFeatureStatus: () => useFeatureStatus,
   usePopoverPosition: () => usePopoverPosition,
+  useResponsiveRail: () => useResponsiveRail,
   useRuntimeMode: () => useRuntimeMode,
   useServerTable: () => useServerTable,
   useSessionContext: () => useSessionContext,
@@ -1106,37 +1108,48 @@ function Spinner({ size = "md", label = "Loading", className = "", style, ...res
 }
 
 // src/components/navigation/SidebarNav.tsx
+var React6 = __toESM(require("react"), 1);
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function Tip({ label, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { title: label, style: { display: "inline-flex", flex: "none" }, children });
 }
-function SidebarNav({ brand, groups = [], current: current2, onNavigate, footer, open = false, className = "", ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("nav", { className: ["fd-side", className].filter(Boolean).join(" "), "data-open": open ? "true" : "false", ...rest, children: [
-    brand ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { height: "var(--topbar-h)", display: "flex", alignItems: "center", padding: "0 18px", borderBottom: "1px solid var(--border)", flex: "none", overflow: "hidden" }, children: brand }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flex: 1, overflow: "auto", padding: "4px 10px 18px" }, children: groups.map((g, gi) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-      g.label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fd-side-group", children: g.label }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fd-stack", style: { gap: 2 }, children: g.items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-        "button",
-        {
-          type: "button",
-          className: "fd-side-item",
-          "aria-current": current2 === it.value ? "page" : void 0,
-          onClick: onNavigate ? () => onNavigate(it.value) : void 0,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fd-side-item-icon", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "ph ph-" + it.icon, "aria-hidden": "true" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title: truncationTitle(it.label), children: it.label }),
-            it.preview ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tip, { label: "Designed, backend not wired yet", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "ph ph-traffic-cone", style: { fontSize: 13, color: "var(--warn-solid)", flex: "none" } }) }) : null,
-            it.locked ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tip, { label: "You do not have permission for this", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "ph ph-lock-simple", style: { fontSize: 13, color: "var(--text-muted)", flex: "none" } }) }) : null,
-            it.count !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fd-side-item-count", children: it.count }) : null,
-            it.loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fd-skel fd-skel-text", style: { width: 22, height: 11, marginLeft: "auto" } }) : null
-          ]
-        },
-        it.value
-      )) })
-    ] }, gi)) }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { borderTop: "1px solid var(--border)", padding: 14, flex: "none" }, children: footer }) : null
-  ] });
-}
+var SidebarNav = React6.forwardRef(function SidebarNav2({ brand, groups = [], current: current2, onNavigate, footer, open = false, className = "", ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "nav",
+    {
+      ref,
+      tabIndex: -1,
+      className: ["fd-side", className].filter(Boolean).join(" "),
+      "data-open": open ? "true" : "false",
+      ...rest,
+      children: [
+        brand ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { height: "var(--topbar-h)", display: "flex", alignItems: "center", padding: "0 18px", borderBottom: "1px solid var(--border)", flex: "none", overflow: "hidden" }, children: brand }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flex: 1, overflow: "auto", padding: "4px 10px 18px" }, children: groups.map((g, gi) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+          g.label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fd-side-group", children: g.label }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fd-stack", style: { gap: 2 }, children: g.items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "fd-side-item",
+              "aria-current": current2 === it.value ? "page" : void 0,
+              onClick: onNavigate ? () => onNavigate(it.value) : void 0,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fd-side-item-icon", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "ph ph-" + it.icon, "aria-hidden": "true" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title: truncationTitle(it.label), children: it.label }),
+                it.preview ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tip, { label: "Designed, backend not wired yet", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "ph ph-traffic-cone", style: { fontSize: 13, color: "var(--warn-solid)", flex: "none" } }) }) : null,
+                it.locked ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tip, { label: "You do not have permission for this", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "ph ph-lock-simple", style: { fontSize: 13, color: "var(--text-muted)", flex: "none" } }) }) : null,
+                it.count !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fd-side-item-count", children: it.count }) : null,
+                it.loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fd-skel fd-skel-text", style: { width: 22, height: 11, marginLeft: "auto" } }) : null
+              ]
+            },
+            it.value
+          )) })
+        ] }, gi)) }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { borderTop: "1px solid var(--border)", padding: 14, flex: "none" }, children: footer }) : null
+      ]
+    }
+  );
+});
 
 // src/components/navigation/FlytedeskBrand.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -1177,13 +1190,13 @@ function Tabs({ tabs = [], value, onChange, className = "", ...rest }) {
 }
 
 // src/components/navigation/Topbar.tsx
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function useIsNarrow(breakpoint) {
-  const [narrow, setNarrow] = React6.useState(
+  const [narrow, setNarrow] = React7.useState(
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches
   );
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
     const apply = () => setNarrow(mq.matches);
@@ -1204,11 +1217,11 @@ function Topbar({
   ...rest
 }) {
   const narrow = useIsNarrow(overflowBreakpoint);
-  const [moreOpen, setMoreOpen] = React6.useState(false);
-  const moreRef = React6.useRef(null);
+  const [moreOpen, setMoreOpen] = React7.useState(false);
+  const moreRef = React7.useRef(null);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: ["fd-topbar", narrow ? "is-narrow" : "", className].filter(Boolean).join(" "), ...rest, children: [
     onMenu ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Menu", onClick: onMenu, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "ph ph-list" }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { className: "fd-crumb", "aria-label": "Breadcrumb", children: crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(React6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { className: "fd-crumb", "aria-label": "Breadcrumb", children: crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(React7.Fragment, { children: [
       i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "ph ph-caret-right", style: { fontSize: 11, opacity: 0.6 }, "aria-hidden": "true" }) : null,
       i === crumbs.length - 1 ? (
         // MP-141: the current crumb mixes a static route label with (usually) a
@@ -1417,18 +1430,18 @@ function Toast({ title, children, tone = "success", onUndo, onDismiss, className
 }
 
 // src/components/feedback/Tooltip.tsx
-var React7 = __toESM(require("react"), 1);
+var React8 = __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 anchorRef = React7.useRef(null);
-  const bubbleRef = React7.useRef(null);
-  const [reason, setReason] = React7.useState(null);
-  const closeTimer = React7.useRef(null);
-  const id = React7.useId();
+  const anchorRef = React8.useRef(null);
+  const bubbleRef = React8.useRef(null);
+  const [reason, setReason] = React8.useState(null);
+  const closeTimer = React8.useRef(null);
+  const id = React8.useId();
   const descId = id + "-desc";
   const open = reason != null;
-  const cancelClose = React7.useCallback(() => {
+  const cancelClose = React8.useCallback(() => {
     if (closeTimer.current) {
       clearTimeout(closeTimer.current);
       closeTimer.current = null;
@@ -1438,7 +1451,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
     cancelClose();
     setReason(why);
   };
-  const hide = React7.useCallback(() => {
+  const hide = React8.useCallback(() => {
     cancelClose();
     setReason(null);
   }, [cancelClose]);
@@ -1453,7 +1466,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
       setReason((r) => r === "hover" ? null : r);
     }, CLOSE_DELAY_MS);
   };
-  React7.useEffect(() => cancelClose, [cancelClose]);
+  React8.useEffect(() => cancelClose, [cancelClose]);
   const pos = usePopoverPosition(open, anchorRef, {
     placement: placement === "bottom" ? "bottom-center" : "top-center",
     offset: 8,
@@ -1463,7 +1476,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
     onDetach: hide
   });
   const zIndex = useOverlayLayer(open);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!open) return;
     const key = (e) => {
       if (e.key === "Escape") hide();
@@ -1491,7 +1504,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
     }
     if (keyboard) show("focus");
   };
-  const described = React7.isValidElement(children) ? React7.cloneElement(children, {
+  const described = React8.isValidElement(children) ? React8.cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], descId].filter(Boolean).join(" ")
   }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
@@ -1499,7 +1512,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
     {
       ref: anchorRef,
       className: "fd-tooltip-anchor",
-      "aria-describedby": React7.isValidElement(children) ? void 0 : descId,
+      "aria-describedby": React8.isValidElement(children) ? void 0 : descId,
       onPointerEnter: (e) => {
         if (isMouse(e)) hover();
       },
@@ -1543,7 +1556,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
 }
 
 // src/components/data/Clamp.tsx
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function Clamp({
   children,
@@ -1555,16 +1568,16 @@ function Clamp({
   onToggle,
   className = ""
 }) {
-  const [open, setOpen] = React8.useState(false);
-  const [overflows, setOverflows] = React8.useState(false);
-  const bodyRef = React8.useRef(null);
-  const charClamped = React8.useMemo(() => {
+  const [open, setOpen] = React9.useState(false);
+  const [overflows, setOverflows] = React9.useState(false);
+  const bodyRef = React9.useRef(null);
+  const charClamped = React9.useMemo(() => {
     if (open || !maxChars || typeof text !== "string" || text.length <= maxChars) return null;
     const cut = text.slice(0, maxChars);
     const at = cut.lastIndexOf(" ");
     return (at > maxChars * 0.6 ? cut.slice(0, at) : cut).trimEnd() + "\u2026";
   }, [text, maxChars, open]);
-  React8.useLayoutEffect(() => {
+  React9.useLayoutEffect(() => {
     const node = bodyRef.current;
     if (maxChars || !node || !maxHeight) return;
     const measure = () => {
@@ -1703,18 +1716,18 @@ function DataTable({
 }
 
 // src/components/data/FilterBar.tsx
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var isSet = (v) => !(v == null || v === "" || v === false);
 function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align = "left", className = "", ...rest }) {
-  const [panel, setPanel] = React9.useState(null);
+  const [panel, setPanel] = React10.useState(null);
   const zIndex = useOverlayLayer(!!panel);
-  const rootRef = React9.useRef(null);
-  const textInputRef = React9.useRef(null);
-  const optionsRef = React9.useRef(null);
+  const rootRef = React10.useRef(null);
+  const textInputRef = React10.useRef(null);
+  const optionsRef = React10.useRef(null);
   const editingField = panel && panel.kind === "edit" ? fields.find((f) => f.key === panel.key) : void 0;
   const dismissible = !!panel && (panel.kind === "add" || panel.kind === "edit" && editingField?.type === "select");
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!dismissible) return;
     const away = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) setPanel(null);
@@ -1729,7 +1742,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
       document.removeEventListener("keydown", esc);
     };
   }, [dismissible]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!panel || panel.kind !== "edit") return;
     if (editingField?.type === "text") {
       textInputRef.current?.focus();
@@ -1895,7 +1908,7 @@ function StatTile({ label, value, sub, delta, loading = false, compact: compact3
 }
 
 // src/components/data/CodeBlock.tsx
-var React10 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var JS_KW = /^(?:const|let|var|function|return|if|else|for|while|do|new|class|extends|import|from|export|default|await|async|try|catch|finally|throw|typeof|instanceof|of|in|switch|case|break|continue|delete|void|yield|static|get|set|this|super|interface|type|enum|implements|public|private|protected|readonly|abstract|as|satisfies|declare|namespace)$/;
 var RULES = {
@@ -2051,13 +2064,13 @@ function tokenize(src, lang) {
   return out;
 }
 function Highlighted({ code, lang }) {
-  const toks = React10.useMemo(() => tokenize(code, lang), [code, lang]);
+  const toks = React11.useMemo(() => tokenize(code, lang), [code, lang]);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
 }
 function useCopy() {
-  const [done, setDone] = React10.useState(false);
-  const timer = React10.useRef(null);
-  React10.useEffect(() => () => {
+  const [done, setDone] = React11.useState(false);
+  const timer = React11.useRef(null);
+  React11.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
   const copy = (text) => {
@@ -2093,8 +2106,8 @@ function CodeBlock({
   actions,
   className = ""
 }) {
-  const [wrap, setWrap] = React10.useState(!!wrapDefault);
-  const [open, setOpen] = React10.useState(false);
+  const [wrap, setWrap] = React11.useState(!!wrapDefault);
+  const [open, setOpen] = React11.useState(false);
   const [copied, copy] = useCopy();
   const body = String(code).replace(/\n$/, "");
   const lines = body.split("\n");
@@ -2123,7 +2136,7 @@ function CodeBlock({
   ] });
 }
 function DiffBlock({ diff = "", filename, collapseAfter = 34, className = "" }) {
-  const [open, setOpen] = React10.useState(false);
+  const [open, setOpen] = React11.useState(false);
   const [copied, copy] = useCopy();
   const raw = String(diff).replace(/\n$/, "");
   const all = raw.split("\n").map((line) => {
@@ -2169,7 +2182,7 @@ function DiffBlock({ diff = "", filename, collapseAfter = 34, className = "" })
 }
 
 // src/components/data/Markdown.tsx
-var React11 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var SAFE = /^(?:https?:|mailto:|tel:|#|\/|\.{1,2}\/)/i;
 var safeHref = (h) => SAFE.test(String(h || "").trim()) ? String(h).trim() : null;
@@ -2208,7 +2221,7 @@ function inlineNodes(src, ctx, keyBase) {
       const href = safeHref(g(2));
       out.push(href ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("a", { href, title: g(3) || void 0, target: /^https?:/i.test(href) ? "_blank" : void 0, rel: "noopener noreferrer", onClick: ctx.onLinkClick, children: inlineNodes(g(1), ctx, key()) }, key()) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: g(1) }, key()));
     } else if (kind === "cite") {
-      out.push(ctx.renderCitation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(React11.Fragment, { children: ctx.renderCitation(g(1)) }, key()) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("sup", { className: "fd-md-cite", children: g(1) }, key()));
+      out.push(ctx.renderCitation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(React12.Fragment, { children: ctx.renderCitation(g(1)) }, key()) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("sup", { className: "fd-md-cite", children: g(1) }, key()));
     } else if (kind === "strongem") out.push(/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("strong", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("em", { children: inlineNodes(g(1), ctx, key()) }) }, key()));
     else if (kind === "strong") out.push(/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("strong", { children: inlineNodes(g(1) || g(2), ctx, key()) }, key()));
     else if (kind === "em") out.push(/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("em", { children: inlineNodes(g(1) || g(2), ctx, key()) }, key()));
@@ -2373,7 +2386,7 @@ function Markdown({
   onLinkClick
 }) {
   const ctx = { allowImages, headingOffset, renderCitation, onLinkClick, codeProps };
-  const blocks = React11.useMemo(() => parseBlocks(source), [source]);
+  const blocks = React12.useMemo(() => parseBlocks(source), [source]);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: ["fd-md", className].filter(Boolean).join(" "), children: renderBlocks(blocks, ctx, "b") });
 }
 function MarkdownInline({ source = "", className = "", onLinkClick }) {
@@ -2487,7 +2500,7 @@ function Pagination({
 }
 
 // src/components/data/RelativeTime.tsx
-var React12 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var MIN = 6e4;
 var HOUR = 36e5;
@@ -2539,9 +2552,9 @@ function formatDuration(ms) {
   return h + "h" + (m % 60 ? " " + m % 60 + "m" : "");
 }
 function RelativeTime({ value, prefix, className = "", refresh: refresh2 = true, ...rest }) {
-  const [, force] = React12.useState(0);
+  const [, force] = React13.useState(0);
   const t = value instanceof Date ? value.getTime() : Date.parse(value);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     if (!refresh2 || !t || isNaN(t)) return;
     const abs = Math.abs(t - Date.now());
     if (abs > DAY) return;
@@ -2557,10 +2570,10 @@ function RelativeTime({ value, prefix, className = "", refresh: refresh2 = true,
 }
 
 // src/components/data/ScoreMeter.tsx
-var React14 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 
 // src/components/data/SegmentedMeter.tsx
-var React13 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 
 // src/kits/files.ts
 function formatBytes(n) {
@@ -2765,7 +2778,7 @@ function SegmentedMeter({
   const pct = safeTotal ? Math.min(100, Math.round(used / safeTotal * 100)) : 0;
   const w = (v) => safeTotal ? Math.max(0, Math.min(100, Number(v) / safeTotal * 100)) : 0;
   const fill = (s, i) => s.color || (s.variant ? VARIANT_FILL[s.variant] : void 0) || CHART[i % CHART.length];
-  const generatedId = React13.useId();
+  const generatedId = React14.useId();
   const uid2 = id || generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: ["fd-segmeter", className].filter(Boolean).join(" "), onClick, children: [
     label || showTotal ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "fd-segmeter-head", children: [
@@ -2849,10 +2862,10 @@ function ScoreMeter({
   breakdownWidth = 280,
   className = ""
 }) {
-  const [open, setOpen] = React14.useState(false);
-  const ref = React14.useRef(null);
+  const [open, setOpen] = React15.useState(false);
+  const ref = React15.useRef(null);
   const value = Math.max(0, Math.min(100, Math.round(Number(score) || 0)));
-  const body = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(React14.Fragment, { children: [
+  const body = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(React15.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fd-scoremeter-rail", style: { width }, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SegmentedMeter, { total: 100, segments, height, showTotal: false, showPercent: false, legend: false }) }),
     showScore ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fd-scoremeter-value fd-tabular", "aria-hidden": "true", children: value }) : null
   ] });
@@ -2871,7 +2884,7 @@ function ScoreMeter({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(React14.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(React15.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "button",
       {
@@ -2902,13 +2915,13 @@ function ScoreMeter({
 }
 
 // src/components/data/SortMenu.tsx
-var React15 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", className = "", ...rest }) {
-  const [open, setOpen] = React15.useState(false);
+  const [open, setOpen] = React16.useState(false);
   const zIndex = useOverlayLayer(open);
-  const ref = React15.useRef(null);
-  React15.useEffect(() => {
+  const ref = React16.useRef(null);
+  React16.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -2970,7 +2983,7 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
 }
 
 // src/components/data/StepList.tsx
-var React16 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var KIND_ICON = { tool: "wrench", search: "magnifying-glass", read: "file-text", write: "pencil-simple", reasoning: "brain", run: "terminal", fetch: "cloud-arrow-down" };
 function StepList({
@@ -2983,9 +2996,9 @@ function StepList({
   dense = false,
   className = ""
 }) {
-  const [openState, setOpenState] = React16.useState(defaultOpen);
+  const [openState, setOpenState] = React17.useState(defaultOpen);
   const open = openProp == null ? openState : openProp;
-  const [expanded, setExpanded] = React16.useState({});
+  const [expanded, setExpanded] = React17.useState({});
   if (!steps.length) return null;
   const running = steps.some((s) => s.status === "running");
   const failed = steps.filter((s) => s.status === "error").length;
@@ -3043,7 +3056,7 @@ function StepList({
 }
 
 // src/components/data/VirtualList.tsx
-var React17 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var VIRTUAL_LIST_BUFFER_ROWS = 20;
 var VIRTUAL_LIST_ROW_GAP = 6;
@@ -3095,35 +3108,35 @@ function VirtualList({
   className = "",
   style
 }) {
-  const [scrollTop, setScrollTop] = React17.useState(0);
-  const loaded = React17.useMemo(
+  const [scrollTop, setScrollTop] = React18.useState(0);
+  const loaded = React18.useMemo(
     () => ({ firstItemIndex, count: items.length }),
     [firstItemIndex, items.length]
   );
   const total = Math.max(totalCount == null ? 0 : totalCount, firstItemIndex + items.length);
   const bandKey = firstItemIndex + ":" + items.length;
-  const win = React17.useMemo(
+  const win = React18.useMemo(
     () => computeVirtualWindow({ scrollTop, viewportHeight: height, itemHeight, itemCount: total, loaded }),
     [scrollTop, height, itemHeight, total, loaded]
   );
-  const need = React17.useMemo(() => computeNeedMore(win, loaded), [win, loaded]);
+  const need = React18.useMemo(() => computeNeedMore(win, loaded), [win, loaded]);
   const wantStart = need.start && hasMore?.start !== false;
   const wantEnd = need.end && hasMore?.end !== false;
   const bucket2 = Math.floor(win.visibleStart / VIRTUAL_LIST_BUFFER_ROWS);
   const askKey = bandKey + "@" + bucket2;
-  const asked = React17.useRef({ start: null, end: null });
-  React17.useEffect(() => {
+  const asked = React18.useRef({ start: null, end: null });
+  React18.useEffect(() => {
     if (loading || !wantStart || asked.current.start === askKey) return;
     asked.current.start = askKey;
     onNeedMore("start", win);
   }, [wantStart, loading, askKey, onNeedMore, win]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (loading || !wantEnd || asked.current.end === askKey) return;
     asked.current.end = askKey;
     onNeedMore("end", win);
   }, [wantEnd, loading, askKey, onNeedMore, win]);
-  const lastKeysRef = React17.useRef(null);
-  const newKeys = React17.useMemo(() => {
+  const lastKeysRef = React18.useRef(null);
+  const newKeys = React18.useMemo(() => {
     const prev = lastKeysRef.current;
     if (!prev) return /* @__PURE__ */ new Set();
     const fresh = /* @__PURE__ */ new Set();
@@ -3133,7 +3146,7 @@ function VirtualList({
     }
     return fresh;
   }, [items]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     lastKeysRef.current = new Set(items.map(keyOf));
   }, [items]);
   const gapStyle = { "--fd-vlist-gap": rowGap + "px" };
@@ -3178,7 +3191,7 @@ function VirtualList({
 }
 
 // src/components/data/EntityRow.tsx
-var React18 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var ENTITY_ROW_METRIC_WIDTH = 74;
 var METRIC_TONE_COLOR = {
@@ -3191,7 +3204,7 @@ function EntityRowMetrics({ metrics, className = "", style }) {
     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 tone = { color: METRIC_TONE_COLOR[m.tone || "default"] };
-    const content = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(React18.Fragment, { children: [
+    const content = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(React19.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 })
@@ -3283,14 +3296,14 @@ function EntityRow({
 }
 
 // src/components/data/TransferList.tsx
-var React20 = __toESM(require("react"), 1);
+var React21 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
 
 // src/components/forms/field.tsx
-var React19 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function useFieldId(id) {
-  const generated = React19.useId();
+  const generated = React20.useId();
   return id || generated;
 }
 function FieldLabel({ htmlFor, id, required = false, onClick, children }) {
@@ -3408,12 +3421,12 @@ function TransferList({
   listHeight = 440,
   className = ""
 }) {
-  const [drag, setDrag] = React20.useState(null);
-  const [dragOverSide, setDragOverSide] = React20.useState(null);
-  const dragRef = React20.useRef(null);
-  const armedRef = React20.useRef(null);
-  const sideRefs = React20.useRef({ left: null, right: null });
-  const hitTestSide = React20.useCallback((x, y) => {
+  const [drag, setDrag] = React21.useState(null);
+  const [dragOverSide, setDragOverSide] = React21.useState(null);
+  const dragRef = React21.useRef(null);
+  const armedRef = React21.useRef(null);
+  const sideRefs = React21.useRef({ left: null, right: null });
+  const hitTestSide = React21.useCallback((x, y) => {
     for (const side of ["left", "right"]) {
       const el = sideRefs.current[side];
       if (!el) continue;
@@ -3422,7 +3435,7 @@ function TransferList({
     }
     return null;
   }, []);
-  const findItem = React20.useCallback(
+  const findItem = React21.useCallback(
     (side, key) => (side === "left" ? left.items : right.items).find((it) => keyOf(it) === key),
     [left.items, right.items, keyOf]
   );
@@ -3444,7 +3457,7 @@ function TransferList({
       height: rect.height
     };
   };
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const onMovePointer = (e) => {
       const armed = armedRef.current;
       if (!armed || e.pointerId !== armed.pointerId) return;
@@ -3497,7 +3510,7 @@ function TransferList({
       window.removeEventListener("pointercancel", endDrag);
     };
   }, [hitTestSide, findItem, onMove]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!drag || typeof document === "undefined") return;
     const prev = document.body.style.userSelect;
     document.body.style.userSelect = "none";
@@ -3605,11 +3618,11 @@ function TransferList({
 }
 
 // src/components/forms/Checkbox.tsx
-var React21 = __toESM(require("react"), 1);
+var React22 = __toESM(require("react"), 1);
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function Checkbox({ label, description, card = false, indeterminate = false, className = "", ...rest }) {
-  const ref = React21.useRef(null);
-  React21.useEffect(() => {
+  const ref = React22.useRef(null);
+  React22.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: [
@@ -3668,7 +3681,7 @@ function Textarea({ label, help, error, required = false, rows = 4, disabled = f
 }
 
 // src/components/forms/NumberInput.tsx
-var React22 = __toESM(require("react"), 1);
+var React23 = __toESM(require("react"), 1);
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function NumberInput({
   label,
@@ -3696,10 +3709,10 @@ function NumberInput({
     const n = Number(String(v == null ? "" : v).replace(/[^0-9.-]/g, ""));
     return isNaN(n) ? null : n;
   };
-  const [text, setText] = React22.useState(value == null || value === "" ? "" : String(value));
-  const [editing, setEditing] = React22.useState(false);
-  const timer = React22.useRef(null);
-  React22.useEffect(() => {
+  const [text, setText] = React23.useState(value == null || value === "" ? "" : String(value));
+  const [editing, setEditing] = React23.useState(false);
+  const timer = React23.useRef(null);
+  React23.useEffect(() => {
     if (!editing) setText(value == null || value === "" ? "" : String(value));
   }, [value, editing]);
   const clamp = (n) => Math.min(max, Math.max(min, n));
@@ -3723,7 +3736,7 @@ function NumberInput({
   const release = () => {
     if (timer.current) clearTimeout(timer.current);
   };
-  React22.useEffect(() => () => {
+  React23.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
   const shown = editing ? text : (() => {
@@ -3810,7 +3823,7 @@ function NumberInput({
 }
 
 // src/components/forms/Select.tsx
-var React23 = __toESM(require("react"), 1);
+var React24 = __toESM(require("react"), 1);
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var norm = (o) => typeof o === "string" ? { value: o, label: o } : o;
 function Select({
@@ -3837,13 +3850,13 @@ 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] = React23.useState(false);
-  const [q, setQ] = React23.useState("");
-  const [active, setActive] = React23.useState(-1);
-  const rootRef = React23.useRef(null);
-  const boxRef = React23.useRef(null);
-  const listRef = React23.useRef(null);
-  const typeBuf = React23.useRef({ s: "", t: 0 });
+  const [open, setOpen] = React24.useState(false);
+  const [q, setQ] = React24.useState("");
+  const [active, setActive] = React24.useState(-1);
+  const rootRef = React24.useRef(null);
+  const boxRef = React24.useRef(null);
+  const listRef = React24.useRef(null);
+  const typeBuf = React24.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 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;
@@ -3868,7 +3881,7 @@ function Select({
     }
     setOpen(!open);
   };
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     if (!open || active < 0 || !listRef.current) return;
     const el = listRef.current.querySelector('[data-i="' + active + '"]');
     if (el) {
@@ -3989,7 +4002,7 @@ function Select({
           ),
           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)(React23.Fragment, { children: [
+        footer: multiple ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(React24.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "button",
             {
@@ -4020,7 +4033,7 @@ function Select({
           'Nothing matches "',
           q,
           '".'
-        ] }) : groups.map((grp) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(React23.Fragment, { children: [
+        ] }) : groups.map((grp) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(React24.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",
@@ -4057,7 +4070,7 @@ function Select({
 }
 
 // src/components/forms/DatePicker.tsx
-var React24 = __toESM(require("react"), 1);
+var React25 = __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"];
@@ -4075,10 +4088,10 @@ 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] = React24.useState(anchor.getFullYear());
-  const [vm, setVm] = React24.useState(anchor.getMonth());
-  const [mode2, setMode] = React24.useState("days");
-  const [hover, setHover] = React24.useState(null);
+  const [vy, setVy] = React25.useState(anchor.getFullYear());
+  const [vm, setVm] = React25.useState(anchor.getMonth());
+  const [mode2, setMode] = React25.useState("days");
+  const [hover, setHover] = React25.useState(null);
   const s = parse(sel.start), e = parse(sel.end);
   const hoverEnd = range && s && !e && hover ? parse(hover) : null;
   const inRange = (d) => {
@@ -4194,9 +4207,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] = React24.useState(false);
-  const rootRef = React24.useRef(null);
-  const boxRef = React24.useRef(null);
+  const [open, setOpen] = React25.useState(false);
+  const rootRef = React25.useRef(null);
+  const boxRef = React25.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);
@@ -4259,7 +4272,7 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
 }
 
 // src/components/forms/TimePicker.tsx
-var React25 = __toESM(require("react"), 1);
+var React26 = __toESM(require("react"), 1);
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var pad = (n) => String(n).padStart(2, "0");
 function ClockFace({ value = "09:00", onChange }) {
@@ -4268,9 +4281,9 @@ function ClockFace({ value = "09:00", onChange }) {
   if (isNaN(m)) m = 0;
   const pm = h24 >= 12;
   const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
-  const [mode2, setMode] = React25.useState("h");
-  const faceRef = React25.useRef(null);
-  const dragging = React25.useRef(false);
+  const [mode2, setMode] = React26.useState("h");
+  const faceRef = React26.useRef(null);
+  const dragging = React26.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);
@@ -4343,9 +4356,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] = React25.useState(false);
-  const rootRef = React25.useRef(null);
-  const boxRef = React25.useRef(null);
+  const [open, setOpen] = React26.useState(false);
+  const rootRef = React26.useRef(null);
+  const boxRef = React26.useRef(null);
   const disp = () => {
     if (!value) return "";
     const [h, m] = value.split(":").map(Number);
@@ -4388,7 +4401,7 @@ function TimePicker({ label, help, error, required = false, disabled = false, va
         offset: 6,
         width: 262,
         role: "presentation",
-        footer: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(React25.Fragment, { children: [
+        footer: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(React26.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "button",
             {
@@ -4416,7 +4429,7 @@ function TimePicker({ label, help, error, required = false, disabled = false, va
 }
 
 // src/components/forms/Slider.tsx
-var React26 = __toESM(require("react"), 1);
+var React27 = __toESM(require("react"), 1);
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function Slider({
   label,
@@ -4434,7 +4447,7 @@ function Slider({
   ...rest
 }) {
   const fieldId = useFieldId(id);
-  const [dragging, setDragging] = React26.useState(false);
+  const [dragging, setDragging] = React27.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: [
@@ -4468,7 +4481,7 @@ function Slider({
 }
 
 // src/components/forms/RangeSlider.tsx
-var React27 = __toESM(require("react"), 1);
+var React28 = __toESM(require("react"), 1);
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function RangeSlider({
   label,
@@ -4488,9 +4501,9 @@ function RangeSlider({
 }) {
   const fmt2 = format || ((v) => String(v));
   const [a, b] = value || [min, max];
-  const [drag, setDrag] = React27.useState(null);
-  const [focus, setFocus] = React27.useState(null);
-  const railRef = React27.useRef(null);
+  const [drag, setDrag] = React28.useState(null);
+  const [focus, setFocus] = React28.useState(null);
+  const railRef = React28.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));
@@ -4505,7 +4518,7 @@ function RangeSlider({
     const r = railRef.current.getBoundingClientRect();
     return min + Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * (max - min);
   };
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (drag === null) return;
     const mv = (e) => onChange && onChange(clampPair(drag, fromEvent(e)));
     const upH = () => setDrag(null);
@@ -4586,7 +4599,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)(React27.Fragment, { children: [
+      marks.map((m) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(React28.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)),
@@ -4615,7 +4628,7 @@ function RangeSlider({
 }
 
 // src/components/forms/Dropzone.tsx
-var React28 = __toESM(require("react"), 1);
+var React29 = __toESM(require("react"), 1);
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function Dropzone({
   onFiles,
@@ -4630,8 +4643,8 @@ function Dropzone({
   className = "",
   style
 }) {
-  const [over, setOver] = React28.useState(false);
-  const depth = React28.useRef(0);
+  const [over, setOver] = React29.useState(false);
+  const depth = React29.useRef(0);
   const has = (e) => {
     const dt = e.dataTransfer;
     if (!dt) return false;
@@ -4693,8 +4706,8 @@ function FilePickButton({
   className = "",
   children
 }) {
-  const ref = React28.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(React28.Fragment, { children: [
+  const ref = React29.useRef(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(React29.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "button",
       {
@@ -4727,10 +4740,10 @@ function FilePickButton({
 }
 function useStagedFiles(upload, opts) {
   const o = opts || {};
-  const [items, setItems] = React28.useState([]);
-  const controllers = React28.useRef({});
+  const [items, setItems] = React29.useState([]);
+  const controllers = React29.useRef({});
   const patch = (id, next) => setItems((list) => list.map((f) => f.id === id ? Object.assign({}, f, next) : f));
-  const run = React28.useCallback((att) => {
+  const run = React29.useCallback((att) => {
     if (!upload) return;
     const ac = typeof AbortController !== "undefined" ? new AbortController() : null;
     controllers.current[att.id] = ac;
@@ -4747,14 +4760,14 @@ function useStagedFiles(upload, opts) {
       delete controllers.current[att.id];
     });
   }, [upload]);
-  const add = React28.useCallback((files) => {
+  const add = React29.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 = React28.useCallback((att) => {
+  const remove = React29.useCallback((att) => {
     const ac = controllers.current[att.id];
     if (ac) {
       try {
@@ -4765,10 +4778,10 @@ function useStagedFiles(upload, opts) {
     }
     setItems((list) => list.filter((f) => f.id !== att.id));
   }, []);
-  const retry = React28.useCallback((att) => {
+  const retry = React29.useCallback((att) => {
     run(att);
   }, [run]);
-  const clear = React28.useCallback(() => {
+  const clear = React29.useCallback(() => {
     Object.values(controllers.current).forEach((ac) => {
       try {
         ac && ac.abort();
@@ -4892,7 +4905,7 @@ function FileGrid({ files = [], onOpen, onRemove, onRetry, tiles = true, maxHeig
 }
 
 // src/components/forms/MarkdownEditor.tsx
-var React29 = __toESM(require("react"), 1);
+var React30 = __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;
@@ -5106,7 +5119,7 @@ function syncDom(root, value) {
   while (root.children.length > lines.length) root.removeChild(root.lastChild);
 }
 var LIST_CONT = RE_LI;
-var MarkdownEditor = React29.forwardRef(function MarkdownEditor2({
+var MarkdownEditor = React30.forwardRef(function MarkdownEditor2({
   value = "",
   onChange,
   onSubmit,
@@ -5125,10 +5138,10 @@ var MarkdownEditor = React29.forwardRef(function MarkdownEditor2({
   className = "",
   id
 }, ref) {
-  const boxRef = React29.useRef(null);
-  const composing = React29.useRef(false);
-  const pendingCaret = React29.useRef(null);
-  React29.useLayoutEffect(() => {
+  const boxRef = React30.useRef(null);
+  const composing = React30.useRef(false);
+  const pendingCaret = React30.useRef(null);
+  React30.useLayoutEffect(() => {
     const root = boxRef.current;
     if (!root || composing.current) return;
     const active = document.activeElement === root || root.contains(document.activeElement);
@@ -5137,7 +5150,7 @@ var MarkdownEditor = React29.forwardRef(function MarkdownEditor2({
     pendingCaret.current = null;
     if (active && caret != null) placeCaret(root, caret);
   }, [value]);
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     if (autoFocus && boxRef.current) boxRef.current.focus();
   }, [autoFocus]);
   const caretNow = () => {
@@ -5204,7 +5217,7 @@ var MarkdownEditor = React29.forwardRef(function MarkdownEditor2({
       api.replaceRange(from, to, next, from + next.length);
     }
   };
-  React29.useImperativeHandle(ref, () => api);
+  React30.useImperativeHandle(ref, () => api);
   function detect(text, caret) {
     if (!onTrigger) return;
     const upto = text.slice(0, caret);
@@ -5356,16 +5369,16 @@ var MarkdownEditor = React29.forwardRef(function MarkdownEditor2({
 });
 
 // src/components/platform/AccountMenu.tsx
-var React31 = __toESM(require("react"), 1);
+var React32 = __toESM(require("react"), 1);
 
 // src/kits/sessionContext.tsx
-var React30 = __toESM(require("react"), 1);
-var SessionContext = React30.createContext(null);
+var React31 = __toESM(require("react"), 1);
+var SessionContext = React31.createContext(null);
 function SessionProvider({ value, children }) {
-  return React30.createElement(SessionContext.Provider, { value }, children);
+  return React31.createElement(SessionContext.Provider, { value }, children);
 }
 function useSessionContext() {
-  const ctx = React30.useContext(SessionContext);
+  const ctx = React31.useContext(SessionContext);
   if (!ctx) {
     throw new Error(
       "useSessionContext() was called outside a <SessionProvider>. Wrap your app root in <SessionProvider value={...}> with your real session, or \u2014 in the docs site or a demo \u2014 in <DemoSessionProvider>, before rendering AccountMenu, Gate, ProfilePage or AppSwitcher."
@@ -5376,20 +5389,8 @@ function useSessionContext() {
 
 // src/components/platform/AccountMenu.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var DEFAULT_LINKS = [
-  { id: "profile", label: "Your profile", icon: "user-circle", href: "../admin/index.html#profile" },
-  { id: "preferences", label: "Preferences", icon: "sliders-horizontal", href: "../admin/index.html#preferences" }
-];
-var DEFAULT_GROUPS = [
-  {
-    label: "Administration",
-    links: [
-      { id: "users", label: "Users", icon: "users-three", href: "../admin/index.html#users", perm: "users.view" },
-      { id: "roles", label: "Roles & permissions", icon: "shield-check", href: "../admin/index.html#roles", perm: "roles.manage" },
-      { id: "flags", label: "Feature flags", icon: "toggle-right", href: "../admin/index.html#flags", perm: "flags.manage" }
-    ]
-  }
-];
+var DEFAULT_LINKS = [];
+var DEFAULT_GROUPS = [];
 function Item({ item, onPick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     "button",
@@ -5417,10 +5418,10 @@ function AccountMenu({
   ...rest
 }) {
   const { user, roles, can: can2, signOut: ctxSignOut, demo } = useSessionContext();
-  const [open, setOpen] = React31.useState(false);
-  const [switching, setSwitching] = React31.useState(false);
-  const [signingOut, setSigningOut] = React31.useState(false);
-  const ref = React31.useRef(null);
+  const [open, setOpen] = React32.useState(false);
+  const [switching, setSwitching] = React32.useState(false);
+  const [signingOut, setSigningOut] = React32.useState(false);
+  const ref = React32.useRef(null);
   const visibleLinks = links.filter((l) => !l.perm || can2(l.perm));
   const visibleGroups = groups.map((g) => ({ label: g.label, links: g.links.filter((l) => !l.perm || can2(l.perm)) })).filter((g) => g.links.length);
   const pick = (item) => {
@@ -5523,13 +5524,13 @@ function AccountMenu({
 }
 
 // src/components/platform/AppSwitcher.tsx
-var React32 = __toESM(require("react"), 1);
+var React33 = __toESM(require("react"), 1);
 var import_jsx_runtime59 = require("react/jsx-runtime");
 function AppSwitcher({ apps: appsProp, onNavigate, className = "" }) {
   const { apps: contextApps } = useSessionContext();
   const apps = appsProp ?? contextApps ?? [];
-  const [open, setOpen] = React32.useState(false);
-  const anchorRef = React32.useRef(null);
+  const [open, setOpen] = React33.useState(false);
+  const anchorRef = React33.useRef(null);
   if (!apps.length) return null;
   const items = apps.map((app) => ({
     id: app.key,
@@ -5543,7 +5544,7 @@ function AppSwitcher({ apps: appsProp, onNavigate, className = "" }) {
       window.location.href = app.url;
     }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(React32.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(React33.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { ref: anchorRef, className: ["fd-appswitch-anchor", className].filter(Boolean).join(" "), style: { display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       IconButton,
       {
@@ -5572,10 +5573,10 @@ function AppSwitcher({ apps: appsProp, onNavigate, className = "" }) {
 }
 
 // src/components/platform/AppearanceMenu.tsx
-var React34 = __toESM(require("react"), 1);
+var React35 = __toESM(require("react"), 1);
 
 // src/kits/appearance.ts
-var React33 = __toESM(require("react"), 1);
+var React34 = __toESM(require("react"), 1);
 var DEFAULT_STORAGE_KEY = "fd-appearance";
 var DEFAULT_PREFS = {
   theme: "system",
@@ -5624,6 +5625,43 @@ function savePrefs(prefs, opts) {
   } catch {
   }
 }
+function createLocalStorageAppearanceStore(opts) {
+  const key = opts?.storageKey ?? DEFAULT_STORAGE_KEY;
+  const storage = resolveStorage(opts);
+  let snapshot = loadPrefs(opts);
+  const listeners3 = /* @__PURE__ */ new Set();
+  const notify = () => listeners3.forEach((l) => l());
+  const onStorageEvent = (e) => {
+    if (e.key !== null && e.key !== key) return;
+    snapshot = loadPrefs(opts);
+    notify();
+  };
+  return {
+    getSnapshot: () => snapshot,
+    write(prefs) {
+      snapshot = prefs;
+      if (storage) {
+        try {
+          storage.setItem(key, JSON.stringify(prefs));
+        } catch {
+        }
+      }
+      notify();
+    },
+    subscribe(onChange) {
+      listeners3.add(onChange);
+      if (listeners3.size === 1 && typeof window !== "undefined") {
+        window.addEventListener("storage", onStorageEvent);
+      }
+      return () => {
+        listeners3.delete(onChange);
+        if (listeners3.size === 0 && typeof window !== "undefined") {
+          window.removeEventListener("storage", onStorageEvent);
+        }
+      };
+    }
+  };
+}
 function applyPrefs(prefs, root = document.documentElement) {
   root.setAttribute("data-theme", resolveTheme(prefs.theme));
   root.setAttribute("data-text-scale", prefs.textScale);
@@ -5632,13 +5670,12 @@ function applyPrefs(prefs, root = document.documentElement) {
   if (prefs.reduceMotion) root.setAttribute("data-motion", "reduce");
   else root.removeAttribute("data-motion");
 }
-function useAppearancePrefs(opts) {
-  const [prefs, setPrefs] = React33.useState(() => loadPrefs(opts));
-  React33.useEffect(() => {
+function useAppearancePrefs(store) {
+  const prefs = React34.useSyncExternalStore(store.subscribe, store.getSnapshot);
+  React34.useEffect(() => {
     applyPrefs(prefs);
-    savePrefs(prefs, opts);
   }, [prefs]);
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     if (prefs.theme !== "system" || typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return;
     }
@@ -5647,9 +5684,12 @@ function useAppearancePrefs(opts) {
     mq.addEventListener("change", onChange);
     return () => mq.removeEventListener("change", onChange);
   }, [prefs]);
-  const update = React33.useCallback((patch) => {
-    setPrefs((p) => ({ ...p, ...patch }));
-  }, []);
+  const update = React34.useCallback(
+    (patch) => {
+      store.write({ ...store.getSnapshot(), ...patch });
+    },
+    [store]
+  );
   return [prefs, update];
 }
 
@@ -5666,12 +5706,16 @@ var TEXT_SCALE_OPTIONS = [
   { value: "lg", label: "L" },
   { value: "xl", label: "XL" }
 ];
-function AppearanceMenu({ className = "", ...storeOptions }) {
-  const [prefs, update] = useAppearancePrefs(storeOptions);
-  const [open, setOpen] = React34.useState(false);
-  const anchorRef = React34.useRef(null);
+function AppearanceMenu({ className = "", store: storeProp, storageKey, storage, defaults }) {
+  const store = React35.useMemo(
+    () => storeProp ?? createLocalStorageAppearanceStore({ storageKey, storage, defaults }),
+    [storeProp, storageKey, storage, defaults]
+  );
+  const [prefs, update] = useAppearancePrefs(store);
+  const [open, setOpen] = React35.useState(false);
+  const anchorRef = React35.useRef(null);
   const patch = (p) => update(p);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(React34.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(React35.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { ref: anchorRef, className: ["fd-appearance-anchor", className].filter(Boolean).join(" "), style: { display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       IconButton,
       {
@@ -5740,14 +5784,14 @@ function AppearanceMenu({ className = "", ...storeOptions }) {
 }
 
 // src/components/platform/ApiSpecBrowser.tsx
-var React35 = __toESM(require("react"), 1);
+var React36 = __toESM(require("react"), 1);
 var import_jsx_runtime61 = 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_runtime61.jsx)("pre", { className: "fd-json", children: JSON.stringify(obj, null, 2) });
 }
 function Endpoint({ s, onRequest }) {
-  const [tried, setTried] = React35.useState(null);
+  const [tried, setTried] = React36.useState(null);
   const run = async () => {
     setTried("busy");
     const t0 = (window.performance || Date).now();
@@ -5820,10 +5864,10 @@ function ApiSpecBrowser({
   className = "",
   ...rest
 }) {
-  const [q, setQ] = React35.useState("");
-  const [method, setMethod] = React35.useState(null);
-  const [mod, setMod] = React35.useState(null);
-  const [listOnly, setListOnly] = React35.useState(false);
+  const [q, setQ] = React36.useState("");
+  const [method, setMethod] = React36.useState(null);
+  const [mod, setMod] = React36.useState(null);
+  const [listOnly, setListOnly] = React36.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)]];
@@ -5902,139 +5946,174 @@ function ApiSpecBrowser({
 }
 
 // src/components/platform/ProfilePage.tsx
-var React36 = __toESM(require("react"), 1);
+var React37 = __toESM(require("react"), 1);
 var import_jsx_runtime62 = 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 = [
-  { key: "planShared", label: "A plan is shared with me", detail: "Someone sends you a plan or a client link." },
-  { key: "planChanged", label: "A plan I own changes", detail: "Budget moves, campuses added or removed." },
-  { key: "goalMissed", label: "The reviewer flags a missed criterion", detail: "After every solve, if a criterion is short." },
-  { key: "flagChanged", label: "A feature flag affecting me changes", detail: "Someone toggles a feature you can see." },
-  { key: "weekly", label: "Weekly digest", detail: "Monday summary of plan activity." }
-];
-function ProfilePage({ user: userProp, onSave, onNavigate, sessions, showSessions = true, className = "", ...rest }) {
+function fieldInitialValue(field, user) {
+  if (field.value) return field.value(user);
+  const raw = user[field.key];
+  return raw == null ? "" : String(raw);
+}
+function groupFields(fields) {
+  const order = [];
+  const byGroup = /* @__PURE__ */ new Map();
+  for (const field of fields) {
+    const group = field.group ?? "Identity";
+    if (!byGroup.has(group)) {
+      byGroup.set(group, { group, description: field.groupDescription, fields: [] });
+      order.push(group);
+    }
+    const entry = byGroup.get(group);
+    if (entry.description === void 0) entry.description = field.groupDescription;
+    entry.fields.push(field);
+  }
+  return order.map((g) => byGroup.get(g));
+}
+function ProfilePage({
+  user: userProp,
+  fields = [],
+  notifications = [],
+  extra,
+  onChangePhoto,
+  onSave,
+  onNavigate,
+  sessions,
+  onSignOutEverywhere,
+  className = ""
+}) {
   const { user: sessionUser, roles, permissions, saveProfile: saveProfile2 } = useSessionContext();
   const user = userProp || sessionUser;
-  const [draft, setDraft] = React36.useState(() => ({
-    name: user.name || "",
-    title: user.title || "",
-    email: user.email || "",
-    phone: user.phone || "",
-    timezone: user.timezone || TIMEZONES[2],
-    bio: user.bio || "",
-    notify: user.notify || { planShared: true, planChanged: true, goalMissed: true, flagChanged: false, weekly: true }
-  }));
-  const [saving, setSaving] = React36.useState(false);
-  const [saved, setSaved] = React36.useState(false);
-  const set = (k, v) => {
-    setDraft((d) => Object.assign({}, d, { [k]: v }));
+  const initialFieldValues = React37.useMemo(() => {
+    const values2 = {};
+    for (const field of fields) values2[field.key] = fieldInitialValue(field, user);
+    return values2;
+  }, [user.id, fields]);
+  const initialNotify = React37.useMemo(() => {
+    const values2 = {};
+    for (const n of notifications) values2[n.key] = !!user.notify?.[n.key];
+    return values2;
+  }, [user.id, notifications]);
+  const [values, setValues] = React37.useState(initialFieldValues);
+  const [notify, setNotify] = React37.useState(initialNotify);
+  const [saving, setSaving] = React37.useState(false);
+  const [saved, setSaved] = React37.useState(false);
+  const [prevUserId, setPrevUserId] = React37.useState(user.id);
+  if (user.id !== prevUserId) {
+    setPrevUserId(user.id);
+    setValues(initialFieldValues);
+    setNotify(initialNotify);
+    setSaved(false);
+  }
+  const setField = (key, v) => {
+    setValues((d) => ({ ...d, [key]: v }));
     setSaved(false);
   };
-  const setNotify = (k) => {
-    setDraft((d) => Object.assign({}, d, { notify: Object.assign({}, d.notify, { [k]: !d.notify[k] }) }));
+  const toggleNotify = (key) => {
+    setNotify((d) => ({ ...d, [key]: !d[key] }));
     setSaved(false);
   };
-  const dirty = draft.name !== (user.name || "") || draft.title !== (user.title || "") || draft.phone !== (user.phone || "") || draft.timezone !== (user.timezone || TIMEZONES[2]) || draft.bio !== (user.bio || "") || JSON.stringify(draft.notify) !== JSON.stringify(user.notify || { planShared: true, planChanged: true, goalMissed: true, flagChanged: false, weekly: true });
-  const canSave = !!(onSave || saveProfile2);
+  const dirty = fields.some((f) => values[f.key] !== initialFieldValues[f.key]) || notifications.some((n) => notify[n.key] !== initialNotify[n.key]);
+  const canSave = !!(onSave || saveProfile2) && (fields.length > 0 || notifications.length > 0);
   const save = async () => {
     if (!canSave) return;
     setSaving(true);
-    if (onSave) await onSave(draft);
-    else await saveProfile2(draft);
-    setSaving(false);
-    setSaved(true);
+    const draft = { ...values };
+    if (notifications.length > 0) draft.notify = notify;
+    try {
+      if (onSave) await onSave(draft);
+      else await saveProfile2(draft);
+      setSaved(true);
+    } finally {
+      setSaving(false);
+    }
   };
-  const liveSessions = sessions || [
-    { id: "s1", device: "MacBook Pro \xB7 Chrome", where: "Denver, CO", when: "Active now", current: true },
-    { id: "s2", device: "iPhone 15 \xB7 Safari", where: "Denver, CO", when: "2 hours ago" },
-    { id: "s3", device: "Windows \xB7 Edge", where: "Chicago, IL", when: "Aug 12" }
-  ];
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 20, maxWidth: 860 }, ...rest, children: [
+  const discard = () => {
+    setValues(initialFieldValues);
+    setNotify(initialNotify);
+    setSaved(false);
+  };
+  const displayName = fields.some((f) => f.key === "name") ? values.name || user.name : user.name;
+  const fieldGroups = groupFields(fields);
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 20, maxWidth: 860 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "fd-stack", style: { gap: 10 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-overline fd-muted", children: "Account" }),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h1", { className: "fd-h1", style: { margin: 0 }, children: "Your profile" }),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "fd-body fd-secondary fd-prose", style: { margin: 0 }, children: "How you appear to colleagues and clients across every flytedesk app, and what we send you." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Card, { elevation: "flat", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "fd-row", style: { gap: 16, flexWrap: "wrap", alignItems: "flex-start" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Avatar, { name: draft.name || user.name, size: "lg" }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Avatar, { name: displayName, size: "lg" }),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "fd-stack", style: { gap: 4, flex: 1, minWidth: 200 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-h3", style: { margin: 0 }, children: draft.name || user.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-body-sm fd-muted", children: [
-          draft.title || "No title set",
-          " \xB7 ",
-          user.team || "No team"
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-h3", style: { margin: 0 }, children: displayName }),
         /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-row", style: { gap: 6, flexWrap: "wrap", paddingTop: 4 }, children: [
           roles.map((r) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Badge, { tone: r.id === "owner" ? "success" : "neutral", children: r.name }, r.id)),
           user.sso ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Badge, { tone: "info", icon: "shield-check", children: "SSO" }) : null
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { variant: "secondary", size: "sm", icon: "image", children: "Change photo" })
+      onChangePhoto ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { variant: "secondary", size: "sm", icon: "image", onClick: onChangePhoto, children: "Change photo" }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    fieldGroups.map(({ group, description, fields: groupFieldDefs }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       Card,
       {
-        title: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-stack", style: { gap: 2 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: "Identity" }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-body-sm fd-muted", style: { fontWeight: 400 }, children: "Name and title appear on plans you share" })
-        ] }),
+        title: description ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-stack", style: { gap: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: group }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-body-sm fd-muted", style: { fontWeight: 400 }, children: description })
+        ] }) : group,
         elevation: "flat",
         children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "fd-stack", style: { gap: 14 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Input, { label: "Full name", value: draft.name, onChange: (e) => set("name", e.target.value) }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Input, { label: "Job title", value: draft.title, onChange: (e) => set("title", e.target.value), placeholder: "e.g. Senior media planner" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }, children: groupFieldDefs.filter((f) => f.type !== "textarea").map((field) => {
+            const help = typeof field.help === "function" ? field.help(user) : field.help;
+            const readOnly = field.readOnly || field.type === "readonly";
+            if (field.type === "select") {
+              return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                Select,
+                {
+                  label: field.label,
+                  value: values[field.key],
+                  onChange: readOnly ? void 0 : (e) => setField(field.key, e.target.value),
+                  options: field.options ?? [],
+                  placeholder: field.placeholder,
+                  help,
+                  disabled: readOnly
+                },
+                field.key
+              );
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
               Input,
               {
-                label: "Work email",
-                value: draft.email,
-                readOnly: true,
-                disabled: true,
-                help: user.sso ? "Managed by your identity provider \u2014 change it there." : "Contact an administrator to change this."
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Input, { label: "Phone", value: draft.phone, onChange: (e) => set("phone", e.target.value), placeholder: "Optional" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-            Textarea,
-            {
-              label: "Short bio",
-              value: draft.bio,
-              onChange: (e) => set("bio", e.target.value),
-              rows: 3,
-              placeholder: "Optional \u2014 shown to colleagues on shared plans.",
-              help: "Never shown to clients."
-            }
-          )
+                label: field.label,
+                value: values[field.key],
+                onChange: readOnly ? void 0 : (e) => setField(field.key, e.target.value),
+                readOnly,
+                disabled: readOnly,
+                placeholder: field.placeholder,
+                help
+              },
+              field.key
+            );
+          }) }),
+          groupFieldDefs.filter((f) => f.type === "textarea").map((field) => {
+            const help = typeof field.help === "function" ? field.help(user) : field.help;
+            return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+              Textarea,
+              {
+                label: field.label,
+                value: values[field.key],
+                onChange: field.readOnly ? void 0 : (e) => setField(field.key, e.target.value),
+                readOnly: field.readOnly,
+                disabled: field.readOnly,
+                rows: field.rows ?? 3,
+                placeholder: field.placeholder,
+                help
+              },
+              field.key
+            );
+          })
         ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Card, { title: "Working preferences", elevation: "flat", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        Select,
-        {
-          label: "Time zone",
-          value: draft.timezone,
-          onChange: (e) => set("timezone", e.target.value),
-          options: TIMEZONES,
-          help: "Flight dates and schedules render in this zone."
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Select, { label: "Start of week", options: ["Monday", "Sunday"], placeholder: "Monday" })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-      Card,
-      {
-        title: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-stack", style: { gap: 2 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: "Notifications" }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-body-sm fd-muted", style: { fontWeight: 400 }, children: "Email only for now \u2014 in-app notifications are on the roadmap" })
-        ] }),
-        elevation: "flat",
-        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fd-stack", style: { gap: 14 }, children: NOTIFY.map((n) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Switch, { checked: !!draft.notify[n.key], onChange: () => setNotify(n.key), label: n.label, description: n.detail }, n.key)) })
-      }
-    ),
+      },
+      group
+    )),
+    extra,
+    notifications.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Card, { title: "Notifications", elevation: "flat", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fd-stack", style: { gap: 14 }, children: notifications.map((n) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Switch, { checked: !!notify[n.key], onChange: () => toggleNotify(n.key), label: n.label, description: n.description }, n.key)) }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       Card,
       {
@@ -6066,13 +6145,13 @@ function ProfilePage({ user: userProp, onSave, onNavigate, sessions, showSession
         ]
       }
     ),
-    showSessions ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    sessions ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       Card,
       {
         title: "Signed-in devices",
         elevation: "flat",
-        action: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size: "sm", variant: "ghost", icon: "sign-out", children: "Sign out everywhere" }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fd-stack", style: { gap: 0 }, children: liveSessions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "fd-row", style: { gap: 12, padding: "10px 0", borderTop: "1px solid var(--border)", flexWrap: "wrap" }, children: [
+        action: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size: "sm", variant: "ghost", icon: "sign-out", onClick: onSignOutEverywhere, children: "Sign out everywhere" }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fd-stack", style: { gap: 0 }, children: sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "fd-body-sm fd-muted", style: { margin: 0 }, children: "No other signed-in devices." }) : sessions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "fd-row", style: { gap: 12, padding: "10px 0", borderTop: "1px solid var(--border)", flexWrap: "wrap" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-device-mobile", style: { fontSize: 16, color: "var(--text-muted)" }, "aria-hidden": "true" }),
           /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-stack", style: { gap: 1, flex: 1, minWidth: 160 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-body-sm", style: { fontWeight: 600 }, children: s.device }),
@@ -6098,29 +6177,17 @@ function ProfilePage({ user: userProp, onSave, onNavigate, sessions, showSession
       boxShadow: "0 -4px 16px rgba(11,13,17,.06)"
     }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-body-sm", style: { fontWeight: 600, flex: 1 }, children: saved ? "Saved." : dirty ? "Unsaved changes" : "No pending changes" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        Button,
-        {
-          size: "sm",
-          variant: "ghost",
-          disabled: !dirty || saving,
-          onClick: () => {
-            setDraft({ name: user.name || "", title: user.title || "", email: user.email || "", phone: user.phone || "", timezone: user.timezone || TIMEZONES[2], bio: user.bio || "", notify: user.notify || { planShared: true, planChanged: true, goalMissed: true, flagChanged: false, weekly: true } });
-            setSaved(false);
-          },
-          children: "Discard"
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size: "sm", variant: "ghost", disabled: !dirty || saving, onClick: discard, children: "Discard" }),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size: "sm", icon: "check", disabled: !dirty || !canSave, loading: saving, onClick: save, children: "Save changes" })
     ] })
   ] });
 }
 
 // src/components/platform/RoadmapTimeline.tsx
-var React39 = __toESM(require("react"), 1);
+var React40 = __toESM(require("react"), 1);
 
 // src/kits/session.ts
-var React37 = __toESM(require("react"), 1);
+var React38 = __toESM(require("react"), 1);
 var PERMISSION_CATALOG = [
   { group: "Plans", items: [
     { key: "plan.view", label: "View plans", detail: "Read any plan in the workspace." },
@@ -7687,8 +7754,8 @@ function roadmap(overrides) {
   };
 }
 function useSession() {
-  const [s, setS] = React37.useState(getSession);
-  React37.useEffect(() => subscribe(setS), []);
+  const [s, setS] = React38.useState(getSession);
+  React38.useEffect(() => subscribe(setS), []);
   return s;
 }
 var SessionKit = {
@@ -7721,7 +7788,7 @@ var SessionKit = {
 };
 function DemoSessionProvider({ children }) {
   const session = useSession();
-  const value = React37.useMemo(
+  const value = React38.useMemo(
     () => ({
       user: session.user,
       roles: session.roles,
@@ -7737,11 +7804,11 @@ function DemoSessionProvider({ children }) {
     }),
     [session]
   );
-  return React37.createElement(SessionProvider, { value }, children);
+  return React38.createElement(SessionProvider, { value }, children);
 }
 
 // src/kits/runtime.ts
-var React38 = __toESM(require("react"), 1);
+var React39 = __toESM(require("react"), 1);
 var WIRED_ENDPOINTS = [
   // Nothing yet. Every id below would come from a real service:
   //   "plan.get", "placements.list", …
@@ -7912,8 +7979,8 @@ var RuntimeKit = {
 };
 RuntimeKit.declare(FEATURE_NEEDS);
 function useRuntimeMode() {
-  const [m, setM] = React38.useState(RuntimeKit.getMode());
-  React38.useEffect(() => RuntimeKit.subscribe(setM), []);
+  const [m, setM] = React39.useState(RuntimeKit.getMode());
+  React39.useEffect(() => RuntimeKit.subscribe(setM), []);
   return m;
 }
 function useFeatureStatus(key) {
@@ -7996,12 +8063,12 @@ function RoadmapCard({ item, byKey, onOpenFlag }) {
 }
 function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
   const session = SessionKit.useSession();
-  const [project, setProject] = React39.useState("");
-  const [q, setQ] = React39.useState("");
-  const scrollRef = React39.useRef(null);
-  const nowRef = React39.useRef(null);
-  const rm = React39.useMemo(() => SessionKit.roadmap({ isComplete: RuntimeKit.isComplete }), [session]);
-  const byKey = React39.useMemo(() => {
+  const [project, setProject] = React40.useState("");
+  const [q, setQ] = React40.useState("");
+  const scrollRef = React40.useRef(null);
+  const nowRef = React40.useRef(null);
+  const rm = React40.useMemo(() => SessionKit.roadmap({ isComplete: RuntimeKit.isComplete }), [session]);
+  const byKey = React40.useMemo(() => {
     const m = {};
     rm.items.forEach((i) => {
       m[i.key] = i;
@@ -8010,7 +8077,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))];
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     let raf1 = 0, raf2 = 0;
     const place = () => {
       const box = scrollRef.current, mark = nowRef.current;
@@ -8084,7 +8151,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_runtime63.jsxs)(React39.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(React40.Fragment, { children: [
           showPhase ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "fd-rm-era", children: [
             /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "fd-row", style: { gap: 8, flexWrap: "wrap", alignItems: "baseline" }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { style: { fontWeight: 700 }, children: item.phase === 0 ? "Shipped" : "Phase " + item.phase + " \u2014 " + item.phaseName }),
@@ -8128,7 +8195,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 }
 
 // src/components/platform/ComingSoon.tsx
-var React40 = __toESM(require("react"), 1);
+var React41 = __toESM(require("react"), 1);
 var import_react_dom5 = require("react-dom");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var BYPASS_STORE = "fd.soon.bypass.v1";
@@ -8146,8 +8213,8 @@ function writeBypassed(list) {
   }
 }
 function useBypass(key) {
-  const [on, setOn] = React40.useState(() => !!key && readBypassed().indexOf(key) >= 0);
-  React40.useEffect(() => {
+  const [on, setOn] = React41.useState(() => !!key && readBypassed().indexOf(key) >= 0);
+  React41.useEffect(() => {
     setOn(!!key && readBypassed().indexOf(key) >= 0);
   }, [key]);
   const set = (next) => {
@@ -8194,9 +8261,9 @@ function SoonCard({ label, detail, backend, eta, effort, onRoadmap, allowed, onB
   ] });
 }
 function useHoverCard(open) {
-  const anchor = React40.useRef(null);
-  const [pos, setPos] = React40.useState(null);
-  React40.useLayoutEffect(() => {
+  const anchor = React41.useRef(null);
+  const [pos, setPos] = React41.useState(null);
+  React41.useLayoutEffect(() => {
     if (!open || !anchor.current) {
       setPos(null);
       return;
@@ -8323,10 +8390,10 @@ function ComingSoon({
   ] });
 }
 function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass, blur, tip, className, rest, children }) {
-  const [open, setOpen] = React40.useState(false);
+  const [open, setOpen] = React41.useState(false);
   const [anchor, pos] = useHoverCard(open);
   const zIndex = useOverlayLayer(open);
-  const close = React40.useRef(null);
+  const close = React41.useRef(null);
   const show = () => {
     if (close.current) {
       clearTimeout(close.current);
@@ -8342,7 +8409,7 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
       setOpen(false);
     }, 140);
   };
-  React40.useEffect(() => () => {
+  React41.useEffect(() => () => {
     if (close.current) clearTimeout(close.current);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
@@ -8513,14 +8580,14 @@ function PermissionHint({ perm, children }) {
 }
 
 // src/components/platform/ModeSwitch.tsx
-var React41 = __toESM(require("react"), 1);
+var React42 = __toESM(require("react"), 1);
 var import_jsx_runtime66 = require("react/jsx-runtime");
 function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog, onOpenSpec, summary }) {
   const mode2 = useRuntimeMode();
-  const [open, setOpen] = React41.useState(false);
+  const [open, setOpen] = React42.useState(false);
   const zIndex = useOverlayLayer(open);
-  const ref = React41.useRef(null);
-  React41.useEffect(() => {
+  const ref = React42.useRef(null);
+  React42.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -8776,7 +8843,7 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
 }
 
 // src/components/planner/MixGap.tsx
-var React42 = __toESM(require("react"), 1);
+var React43 = __toESM(require("react"), 1);
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var MIX_GAP_LAYOUT = {
   trackHeight: 30,
@@ -8791,7 +8858,7 @@ function mixGapOffset(value, max) {
 }
 function MixGap({ rows = [], loading = false, className = "" }) {
   const max = Math.max(1, ...rows.flatMap((r) => [r.target, r.realized]));
-  const [hover, setHover] = React42.useState(null);
+  const [hover, setHover] = React43.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)" };
   const { trackHeight, barHeight, targetWidth, labelGap } = MIX_GAP_LAYOUT;
@@ -8934,7 +9001,7 @@ function ChannelContribution({
 }
 
 // src/components/planner/BudgetReallocator.tsx
-var React43 = __toESM(require("react"), 1);
+var React44 = __toESM(require("react"), 1);
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var bandFor = (crp) => crp >= 200 ? "dominant" : crp >= 100 ? "strong" : crp >= 50 ? "adequate" : "weak";
 function BudgetReallocator({
@@ -8950,8 +9017,8 @@ function BudgetReallocator({
   onCancel,
   className = ""
 }) {
-  const [draft, setDraft] = React43.useState(spend);
-  React43.useEffect(() => setDraft(spend), [spend]);
+  const [draft, setDraft] = React44.useState(spend);
+  React44.useEffect(() => setDraft(spend), [spend]);
   const dirty = draft !== spend;
   const nextCrp = scoreFor ? scoreFor(draft) : crp;
   const nextBand = bandFor(nextCrp);
@@ -8966,10 +9033,10 @@ function BudgetReallocator({
     setDraft(spend);
     if (onCancel) onCancel();
   };
-  const trackRef = React43.useRef(null);
-  const chipRef = React43.useRef(null);
-  const [chipLeft, setChipLeft] = React43.useState(null);
-  React43.useLayoutEffect(() => {
+  const trackRef = React44.useRef(null);
+  const chipRef = React44.useRef(null);
+  const [chipLeft, setChipLeft] = React44.useState(null);
+  React44.useLayoutEffect(() => {
     const track = trackRef.current;
     if (!dirty || !track) {
       setChipLeft(null);
@@ -9156,7 +9223,7 @@ function ImportanceTag({ level, showLabel = true, size = "sm", className = "" })
 }
 
 // src/components/planner/PreferenceMeter.tsx
-var React44 = __toESM(require("react"), 1);
+var React45 = __toESM(require("react"), 1);
 var import_jsx_runtime74 = require("react/jsx-runtime");
 function preferenceScore(criteria) {
   const earned = criteria.reduce((n, c) => n + (Number(c.earned) || 0), 0);
@@ -9186,7 +9253,7 @@ function PreferenceMeter({
   className = ""
 }) {
   const value = score == null ? preferenceScore(criteria) : score;
-  const segments = React44.useMemo(() => preferenceSegments(criteria), [criteria]);
+  const segments = React45.useMemo(() => preferenceSegments(criteria), [criteria]);
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     ScoreMeter,
     {
@@ -9225,10 +9292,10 @@ function PreferenceMeter({
 }
 
 // src/components/chat/AgentChatPanel.tsx
-var React50 = __toESM(require("react"), 1);
+var React51 = __toESM(require("react"), 1);
 
 // src/components/chat/chatEngine.ts
-var React45 = __toESM(require("react"), 1);
+var React46 = __toESM(require("react"), 1);
 var CHAT_UNAVAILABLE = "chat_unavailable";
 var JOB_PENDING = ["queued", "running"];
 var JOB_SUCCESS = ["completed", "recovered"];
@@ -9282,22 +9349,22 @@ function useChatEngine(opts) {
     onClear,
     onFeedback
   } = opts || {};
-  const [status, setStatus] = React45.useState("idle");
-  const [threadId, setThreadId] = React45.useState(null);
-  const [messages, setMessages] = React45.useState([]);
-  const [queue, setQueue] = React45.useState([]);
-  const [fatal, setFatal] = React45.useState(null);
-  const [busy, setBusy] = React45.useState(false);
-  const [turnStartedAt, setTurnStartedAt] = React45.useState(null);
-  const listRef = React45.useRef([]);
-  const queueRef = React45.useRef([]);
-  const busyRef = React45.useRef(false);
-  const stoppedRef = React45.useRef(false);
-  const abortRef = React45.useRef(null);
-  const serverCount = React45.useRef(0);
-  const threadRef = React45.useRef(null);
-  const mounted = React45.useRef(true);
-  React45.useEffect(() => {
+  const [status, setStatus] = React46.useState("idle");
+  const [threadId, setThreadId] = React46.useState(null);
+  const [messages, setMessages] = React46.useState([]);
+  const [queue, setQueue] = React46.useState([]);
+  const [fatal, setFatal] = React46.useState(null);
+  const [busy, setBusy] = React46.useState(false);
+  const [turnStartedAt, setTurnStartedAt] = React46.useState(null);
+  const listRef = React46.useRef([]);
+  const queueRef = React46.useRef([]);
+  const busyRef = React46.useRef(false);
+  const stoppedRef = React46.useRef(false);
+  const abortRef = React46.useRef(null);
+  const serverCount = React46.useRef(0);
+  const threadRef = React46.useRef(null);
+  const mounted = React46.useRef(true);
+  React46.useEffect(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -9319,14 +9386,14 @@ function useChatEngine(opts) {
     }
     return false;
   };
-  const loadThread = React45.useCallback(async (id) => {
+  const loadThread = React46.useCallback(async (id) => {
     const data = await apiAdapter.getThread(id);
     const list = [...data && data.messages || []];
     serverCount.current = list.length;
     commit(list);
     return list;
   }, [apiAdapter]);
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     if (!apiAdapter) {
       setStatus("idle");
       setFatal(null);
@@ -9539,7 +9606,7 @@ function useChatEngine(opts) {
       await dispatchTurn(turn);
     }
   }
-  const send = React45.useCallback((text, attachments) => {
+  const send = React46.useCallback((text, attachments) => {
     const body = (text || "").trim();
     if (!body && !(attachments && attachments.length)) return;
     if (status === "disconnected") return;
@@ -9549,7 +9616,7 @@ function useChatEngine(opts) {
     stoppedRef.current = false;
     drain();
   }, [status]);
-  const stop = React45.useCallback(() => {
+  const stop = React46.useCallback(() => {
     stoppedRef.current = true;
     const ac = abortRef.current;
     if (ac) {
@@ -9568,11 +9635,11 @@ function useChatEngine(opts) {
       store.del(STORAGE_PREFIX + threadRef.current);
     }
   }, [apiAdapter]);
-  const removeQueued = React45.useCallback((id) => {
+  const removeQueued = React46.useCallback((id) => {
     queueRef.current = queueRef.current.filter((t) => t.id !== id);
     setQueue(queueRef.current.slice());
   }, []);
-  const retry = React45.useCallback(() => {
+  const retry = React46.useCallback(() => {
     const list = listRef.current;
     let at = -1;
     for (let i = list.length - 1; i >= 0; i--) if (list[i].role === "user") {
@@ -9588,19 +9655,19 @@ function useChatEngine(opts) {
     setQueue(queueRef.current.slice());
     drain();
   }, []);
-  const clear = React45.useCallback(() => {
+  const clear = React46.useCallback(() => {
     commit([]);
     serverCount.current = 0;
     queueRef.current = [];
     setQueue([]);
     onClear && onClear();
   }, [onClear]);
-  const setFeedback = React45.useCallback((id, value) => {
+  const setFeedback = React46.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 = React45.useCallback(async () => {
+  const reload = React46.useCallback(async () => {
     if (!threadRef.current) return;
     setStatus("loading");
     try {
@@ -9638,10 +9705,10 @@ var ChatKit = {
 };
 
 // src/components/chat/ChatTranscript.tsx
-var React47 = __toESM(require("react"), 1);
+var React48 = __toESM(require("react"), 1);
 
 // src/components/chat/ChatTurn.tsx
-var React46 = __toESM(require("react"), 1);
+var React47 = __toESM(require("react"), 1);
 var import_jsx_runtime75 = require("react/jsx-runtime");
 function JsonView({ value }) {
   let text;
@@ -9678,7 +9745,7 @@ function PacketCard({ packet, schema, render, onApply, applied }) {
   ] });
 }
 function ThinkingBlock({ text, durationMs, streaming, defaultOpen = false }) {
-  const [open, setOpen] = React46.useState(defaultOpen);
+  const [open, setOpen] = React47.useState(defaultOpen);
   if (!text) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "fdc-think" + (open ? " is-open" : ""), children: [
     /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("button", { type: "button", className: "fdc-think-head", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
@@ -9695,7 +9762,7 @@ function ThinkingBlock({ text, durationMs, streaming, defaultOpen = false }) {
   ] });
 }
 function Citations({ items = [], onOpen }) {
-  const [open, setOpen] = React46.useState(false);
+  const [open, setOpen] = React47.useState(false);
   if (!items.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "fdc-cites", children: [
     /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("button", { type: "button", className: "fdc-cites-head", onClick: () => setOpen((v) => !v), "aria-expanded": open, children: [
@@ -9721,7 +9788,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] = React46.useState(false);
+  const [expanded, setExpanded] = React47.useState(false);
   const isUser = m.role === "user";
   const raw = m.text || "";
   const clamped = !expanded && !m.streaming ? clampText(raw, ctx.maxVisibleChars) : null;
@@ -9788,9 +9855,9 @@ function MessageBody({ message: m, ctx }) {
   ] });
 }
 function useCopyRun() {
-  const [done, setDone] = React46.useState(false);
-  const t = React46.useRef(null);
-  React46.useEffect(() => () => {
+  const [done, setDone] = React47.useState(false);
+  const t = React47.useRef(null);
+  React47.useEffect(() => () => {
     if (t.current) clearTimeout(t.current);
   }, []);
   return [done, (text) => {
@@ -9817,7 +9884,7 @@ function RunActions({ group, ctx }) {
     ] }),
     isAssistant && ctx.onRetry ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("button", { type: "button", className: "fdc-act", onClick: ctx.onRetry, "aria-label": "Retry this turn", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("i", { className: "ph ph-arrow-clockwise", "aria-hidden": "true" }) }) : null,
     group.role === "user" && ctx.onEdit ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("button", { type: "button", className: "fdc-act", onClick: () => ctx.onEdit(last), "aria-label": "Edit and resend", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("i", { className: "ph ph-pencil-simple", "aria-hidden": "true" }) }) : null,
-    isAssistant && ctx.onFeedback ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(React46.Fragment, { children: [
+    isAssistant && ctx.onFeedback ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(React47.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime75.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_runtime75.jsx)("i", { className: "ph ph-thumbs-up", "aria-hidden": "true" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime75.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_runtime75.jsx)("i", { className: "ph ph-thumbs-down", "aria-hidden": "true" }) })
     ] }) : null,
@@ -9912,10 +9979,10 @@ function ChatTranscript({
   renderEmpty,
   className = ""
 }) {
-  const scroller = React47.useRef(null);
-  const stick = React47.useRef(true);
-  const [pill, setPill] = React47.useState(0);
-  const seen = React47.useRef(0);
+  const scroller = React48.useRef(null);
+  const stick = React48.useRef(true);
+  const [pill, setPill] = React48.useState(0);
+  const seen = React48.useRef(0);
   const toBottom = (smooth) => {
     const el = scroller.current;
     if (!el) return;
@@ -9934,7 +10001,7 @@ function ChatTranscript({
       seen.current = messages.length;
     }
   };
-  React47.useLayoutEffect(() => {
+  React48.useLayoutEffect(() => {
     const el = scroller.current;
     if (!el) return;
     if (stick.current) {
@@ -9942,7 +10009,7 @@ function ChatTranscript({
       seen.current = messages.length;
     } else setPill(Math.max(0, messages.length - seen.current));
   }, [messages]);
-  React47.useEffect(() => {
+  React48.useEffect(() => {
     const el = scroller.current;
     const inner = el && el.firstChild;
     if (!el || !inner || typeof ResizeObserver === "undefined") return;
@@ -9952,7 +10019,7 @@ function ChatTranscript({
     ro.observe(inner);
     return () => ro.disconnect();
   }, []);
-  const groups = React47.useMemo(() => groupMessages(messages), [messages]);
+  const groups = React48.useMemo(() => groupMessages(messages), [messages]);
   const empty = !messages.length && status === "ready";
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: ["fdc-scroll", className].filter(Boolean).join(" "), ref: scroller, onScroll, children: [
     /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "fdc-log", role: "log", "aria-label": "Conversation", children: [
@@ -9976,7 +10043,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_runtime76.jsxs)(React47.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(React48.Fragment, { children: [
           showDay ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "fdc-day", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: dayLabel(k) }) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ChatTurn, { group: g, ctx })
         ] }, g.key || i);
@@ -9993,7 +10060,7 @@ function ChatTranscript({
 var TranscriptKit = { groupMessages };
 
 // src/components/chat/ChatComposer.tsx
-var React48 = __toESM(require("react"), 1);
+var React49 = __toESM(require("react"), 1);
 var import_jsx_runtime77 = require("react/jsx-runtime");
 function ChatComposer({
   onSubmit,
@@ -10021,17 +10088,17 @@ function ChatComposer({
   onReject,
   onOpenAttachment
 }) {
-  const [text, setText] = React48.useState(draft || "");
-  const [trigger, setTrigger] = React48.useState(null);
-  const [mentionItems, setMentionItems] = React48.useState([]);
-  const [listening, setListening] = React48.useState(false);
-  const [notice, setNotice] = React48.useState(null);
-  const editor = React48.useRef(null);
-  const wrap = React48.useRef(null);
-  const stopVoice = React48.useRef(null);
+  const [text, setText] = React49.useState(draft || "");
+  const [trigger, setTrigger] = React49.useState(null);
+  const [mentionItems, setMentionItems] = React49.useState([]);
+  const [listening, setListening] = React49.useState(false);
+  const [notice, setNotice] = React49.useState(null);
+  const editor = React49.useRef(null);
+  const wrap = React49.useRef(null);
+  const stopVoice = React49.useRef(null);
   const staged = useStagedFiles(fileUploadHandler, { onError: () => {
   } });
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (draft != null && draft !== text) setText(draft);
   }, [draft]);
   const change = (v) => {
@@ -10067,7 +10134,7 @@ function ChatComposer({
     e.preventDefault();
     staged.add(found.files);
   };
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (!trigger || trigger.type !== "mention" || !mentionSources) {
       setMentionItems([]);
       return;
@@ -10085,7 +10152,7 @@ function ChatComposer({
     const q = (trigger.query || "").toLowerCase();
     setMentionItems(mentionSources.filter((m) => !q || (m.label + " " + (m.description || "")).toLowerCase().includes(q)));
   }, [trigger, mentionSources]);
-  const slashItems = React48.useMemo(() => {
+  const slashItems = React49.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));
@@ -10259,12 +10326,12 @@ function ChatComposer({
 }
 
 // src/components/chat/ChatSessionBar.tsx
-var React49 = __toESM(require("react"), 1);
+var React50 = __toESM(require("react"), 1);
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var compact2 = meterFormats.compact;
 function ChatSessionBar({ sessionStats, contextUsage, usageLimits, onClear, extras }) {
-  const [open, setOpen] = React49.useState(false);
-  const anchor = React49.useRef(null);
+  const [open, setOpen] = React50.useState(false);
+  const anchor = React50.useRef(null);
   const stats = sessionStats || null;
   const cu = contextUsage || null;
   const limits = usageLimits || null;
@@ -10279,7 +10346,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_runtime78.jsxs)(React49.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(React50.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "fdc-bar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
         "button",
@@ -10420,7 +10487,7 @@ function ModelControls({
       ] })
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(React49.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(React50.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       MenuButton,
       {
@@ -10537,11 +10604,11 @@ function AgentChatPanel({
   onFeedback,
   onEditMessage
 }) {
-  const [panelWidth, setPanelWidth] = React50.useState(width);
-  const [applied, setApplied] = React50.useState({});
-  const [draft, setDraft] = React50.useState("");
-  const dragging = React50.useRef(null);
-  React50.useEffect(() => setPanelWidth(width), [width]);
+  const [panelWidth, setPanelWidth] = React51.useState(width);
+  const [applied, setApplied] = React51.useState({});
+  const [draft, setDraft] = React51.useState("");
+  const dragging = React51.useRef(null);
+  React51.useEffect(() => setPanelWidth(width), [width]);
   const engine = useChatEngine({
     contextType,
     contextId,
@@ -10745,7 +10812,7 @@ function AgentChatPanel({
 }
 
 // src/components/files/FileViewer.tsx
-var React51 = __toESM(require("react"), 1);
+var React52 = __toESM(require("react"), 1);
 var import_jsx_runtime80 = require("react/jsx-runtime");
 function previewKindOf(file) {
   const mime = (file.mime || "").toLowerCase();
@@ -10802,13 +10869,13 @@ function parseDelimited(text, delimiter) {
   return rows;
 }
 function usePreview(file, kind, resolveUrl) {
-  const [state, setState] = React51.useState({ status: "loading" });
-  const [attempt, setAttempt] = React51.useState(0);
-  const resolveRef = React51.useRef(resolveUrl);
-  React51.useEffect(() => {
+  const [state, setState] = React52.useState({ status: "loading" });
+  const [attempt, setAttempt] = React52.useState(0);
+  const resolveRef = React52.useRef(resolveUrl);
+  React52.useEffect(() => {
     resolveRef.current = resolveUrl;
   }, [resolveUrl]);
-  React51.useEffect(() => {
+  React52.useEffect(() => {
     if (kind === "none") {
       setState({ status: "ready" });
       return;
@@ -10838,7 +10905,7 @@ function usePreview(file, kind, resolveUrl) {
       if (ac) ac.abort();
     };
   }, [file.id, kind, attempt]);
-  return { ...state, retry: React51.useCallback(() => setAttempt((a) => a + 1), []) };
+  return { ...state, retry: React52.useCallback(() => setAttempt((a) => a + 1), []) };
 }
 function PreviewBody({ file, kind, state }) {
   if (kind === "image") return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("img", { className: "fd-fv-image", src: state.url, alt: file.name || "Preview" });
@@ -10883,13 +10950,13 @@ function PreviewBody({ file, kind, state }) {
   ] });
 }
 function FileViewer({ file, resolveUrl, sidePanel, sidePanelLabel = "Details", onClose, actions, className = "" }) {
-  const kind = React51.useMemo(() => previewKindOf(file), [file]);
+  const kind = React52.useMemo(() => previewKindOf(file), [file]);
   const preview = usePreview(file, kind, resolveUrl);
-  const [tab, setTab] = React51.useState("preview");
-  const [downloading, setDownloading] = React51.useState(false);
-  const [downloadError, setDownloadError] = React51.useState(null);
+  const [tab, setTab] = React52.useState("preview");
+  const [downloading, setDownloading] = React52.useState(false);
+  const [downloadError, setDownloadError] = React52.useState(null);
   const hasSide = sidePanel != null;
-  React51.useEffect(() => {
+  React52.useEffect(() => {
     setTab("preview");
   }, [file.id]);
   const download = () => {
@@ -10956,7 +11023,7 @@ function FileViewer({ file, resolveUrl, sidePanel, sidePanelLabel = "Details", o
 }
 
 // src/components/files/FileBrowser.tsx
-var React52 = __toESM(require("react"), 1);
+var React53 = __toESM(require("react"), 1);
 var import_jsx_runtime81 = require("react/jsx-runtime");
 function childrenOf(folders, parentId) {
   return folders.filter((f) => f.parentId === parentId).sort((a, b) => a.name.localeCompare(b.name));
@@ -11027,10 +11094,10 @@ function FolderPickerMenu({
   destinations,
   onPick
 }) {
-  const [open, setOpen] = React52.useState(false);
+  const [open, setOpen] = React53.useState(false);
   const zIndex = useOverlayLayer(open);
-  const ref = React52.useRef(null);
-  React52.useEffect(() => {
+  const ref = React53.useRef(null);
+  React53.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -11082,8 +11149,8 @@ function FolderPickerMenu({
   ] });
 }
 function RowShell({ icon, name, meta, onOpen, draggableId, isDropTarget, onDropPayload, actions, className = "" }) {
-  const [over, setOver] = React52.useState(false);
-  const dragCounter = React52.useRef(0);
+  const [over, setOver] = React53.useState(false);
+  const dragCounter = React53.useRef(0);
   const dropHandlers = isDropTarget ? {
     onDragEnter: (e) => {
       if (!hasInternalPayload(e)) return;
@@ -11131,8 +11198,8 @@ function RowShell({ icon, name, meta, onOpen, draggableId, isDropTarget, onDropP
 }
 function TreeNode({ folder, depth, folders, currentFolderId, onNavigate, onMoveInto, canMove }) {
   const kids = childrenOf(folders, folder.id);
-  const [expanded, setExpanded] = React52.useState(() => currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId));
-  React52.useEffect(() => {
+  const [expanded, setExpanded] = React53.useState(() => currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId));
+  React53.useEffect(() => {
     if (currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId)) setExpanded(true);
   }, [currentFolderId, folder.id, folders]);
   const isCurrent = folder.id === currentFolderId;
@@ -11198,15 +11265,15 @@ function FileBrowser({
   const canUpload = perm.canUpload !== false && !!onUpload;
   const canRemoveFile = perm.canRemoveFile !== false && !!onRemoveFile;
   const canDeleteFolder = perm.canDeleteFolder !== false && !!onDeleteFolder;
-  const [createOpen, setCreateOpen] = React52.useState(false);
-  const [createName, setCreateName] = React52.useState("");
-  const [renameTarget, setRenameTarget] = React52.useState(null);
-  const [renameValue, setRenameValue] = React52.useState("");
-  const [deleteTarget, setDeleteTarget] = React52.useState(null);
-  const uploadInputRef = React52.useRef(null);
-  const crumbFolders = React52.useMemo(() => ancestorsOf(folders, currentFolderId), [folders, currentFolderId]);
-  const subfolders = React52.useMemo(() => childrenOf(folders, currentFolderId), [folders, currentFolderId]);
-  const currentFiles = React52.useMemo(
+  const [createOpen, setCreateOpen] = React53.useState(false);
+  const [createName, setCreateName] = React53.useState("");
+  const [renameTarget, setRenameTarget] = React53.useState(null);
+  const [renameValue, setRenameValue] = React53.useState("");
+  const [deleteTarget, setDeleteTarget] = React53.useState(null);
+  const uploadInputRef = React53.useRef(null);
+  const crumbFolders = React53.useMemo(() => ancestorsOf(folders, currentFolderId), [folders, currentFolderId]);
+  const subfolders = React53.useMemo(() => childrenOf(folders, currentFolderId), [folders, currentFolderId]);
+  const currentFiles = React53.useMemo(
     () => files.filter((f) => f.folderId === currentFolderId).sort((a, b) => a.name.localeCompare(b.name)),
     [files, currentFolderId]
   );
@@ -11438,8 +11505,8 @@ function BreadcrumbCrumb({
   isDropTarget,
   onDropPayload
 }) {
-  const [over, setOver] = React52.useState(false);
-  const dragCounter = React52.useRef(0);
+  const [over, setOver] = React53.useState(false);
+  const dragCounter = React53.useRef(0);
   const dropHandlers = isDropTarget ? {
     onDragEnter: (e) => {
       if (!hasInternalPayload(e)) return;
@@ -11468,7 +11535,7 @@ function BreadcrumbCrumb({
 }
 
 // src/kits/query.ts
-var React53 = __toESM(require("react"), 1);
+var React54 = __toESM(require("react"), 1);
 function eqFilter(get2) {
   return (row, value) => Array.isArray(value) ? value.includes(get2(row)) : get2(row) === value;
 }
@@ -11500,22 +11567,22 @@ function compare(a, b, dir) {
 var API = null;
 var PREFS = null;
 function useServerTable({ endpoint, params, defaults, deps, prefsKey }) {
-  const [query, setQuery] = React53.useState(() => {
+  const [query, setQuery] = React54.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 = React53.useCallback((patch2) => {
+  const savePref = React54.useCallback((patch2) => {
     const store = PREFS || window.PlannerPrefs;
     if (prefsKey && store) store.setTable(prefsKey, patch2);
   }, [prefsKey]);
-  const [res, setRes] = React53.useState(null);
-  const [loading, setLoading] = React53.useState(true);
-  const seq2 = React53.useRef(0);
+  const [res, setRes] = React54.useState(null);
+  const [loading, setLoading] = React54.useState(true);
+  const seq2 = React54.useRef(0);
   const depKey = (deps || []).join("|");
   const paramKey = JSON.stringify(params || {});
   const queryKey = JSON.stringify(query);
-  React53.useEffect(() => {
+  React54.useEffect(() => {
     const id = ++seq2.current;
     setLoading(true);
     const t = setTimeout(() => {
@@ -11812,6 +11879,92 @@ function createVersionStore(initialState, options) {
     }
   };
 }
+
+// src/kits/useResponsiveRail.ts
+var React55 = __toESM(require("react"), 1);
+function matchesBreakpoint(breakpoint) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches;
+}
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function getFocusable(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function useResponsiveRail(options = {}) {
+  const { breakpoint = 1024, initialOpen = true, onPersist } = options;
+  const navRef = React55.useRef(null);
+  const [overlay, setOverlay] = React55.useState(() => matchesBreakpoint(breakpoint));
+  const [open, setOpenRaw] = React55.useState(() => matchesBreakpoint(breakpoint) ? false : initialOpen);
+  const setOpen = React55.useCallback(
+    (value) => {
+      setOpenRaw(value);
+      if (!matchesBreakpoint(breakpoint)) onPersist?.(value);
+    },
+    [breakpoint, onPersist]
+  );
+  const toggle = React55.useCallback(() => setOpen(!open), [open, setOpen]);
+  const close = React55.useCallback(() => setOpenRaw(false), []);
+  React55.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
+    const handler = (e) => {
+      setOverlay(e.matches);
+      setOpenRaw(!e.matches);
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [breakpoint]);
+  React55.useEffect(() => {
+    if (!overlay || !open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [overlay, open, close]);
+  React55.useEffect(() => {
+    if (!overlay || !open) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [overlay, open]);
+  React55.useEffect(() => {
+    if (!overlay || !open) return;
+    const container = navRef.current;
+    if (!container) return;
+    const previouslyFocused = document.activeElement;
+    const focusable = getFocusable(container);
+    (focusable[0] ?? container).focus();
+    const handler = (e) => {
+      if (e.key !== "Tab") return;
+      const items = getFocusable(container);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      const outside = !(active instanceof Node) || !container.contains(active);
+      if (e.shiftKey) {
+        if (outside || active === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (outside || active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+      previouslyFocused?.focus?.();
+    };
+  }, [overlay, open]);
+  return { open, overlay, navRef, toggle, close, setOpen };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AccountMenu,
@@ -11956,6 +12109,7 @@ function createVersionStore(initialState, options) {
   channelWeightOf,
   computeNeedMore,
   computeVirtualWindow,
+  createLocalStorageAppearanceStore,
   createVersionStore,
   eqFilter,
   extensionOf,
@@ -11995,6 +12149,7 @@ function createVersionStore(initialState, options) {
   useChatEngine,
   useFeatureStatus,
   usePopoverPosition,
+  useResponsiveRail,
   useRuntimeMode,
   useServerTable,
   useSessionContext,