@flytedan/flytebot-design-system 0.12.13 → 0.12.15

package/dist/index.cjs

@@ -405,14 +405,48 @@ var portal = (node) => {
 };
 var ROOT_LAYER = 0;
 var LAYER_STEP = 10;
+var ROOT_STEP = 100;
+var OVERLAY_CEILING = 1e4;
 var LayerContext = React2.createContext(ROOT_LAYER);
+var openRootIds = [];
+var rootListeners = /* @__PURE__ */ new Set();
+var notifyRootListeners = () => {
+  rootListeners.forEach((listener) => listener());
+};
+var subscribeRootOverlays = (listener) => {
+  rootListeners.add(listener);
+  return () => {
+    rootListeners.delete(listener);
+  };
+};
+var getRootOverlaysSnapshot = () => openRootIds;
+var registerRootOverlay = (id) => {
+  if (openRootIds.includes(id)) return;
+  openRootIds = [...openRootIds, id];
+  notifyRootListeners();
+};
+var unregisterRootOverlay = (id) => {
+  if (!openRootIds.includes(id)) return;
+  openRootIds = openRootIds.filter((existing) => existing !== id);
+  notifyRootListeners();
+};
 var useLayer = () => React2.useContext(LayerContext);
-var useOverlayLayer = (base) => {
+var useOverlayLayer = (isOpen) => {
   const parent = useLayer();
-  return parent === ROOT_LAYER ? base : parent + LAYER_STEP;
+  const isRoot = parent === ROOT_LAYER;
+  const id = React2.useId();
+  const openIds = React2.useSyncExternalStore(subscribeRootOverlays, getRootOverlaysSnapshot, getRootOverlaysSnapshot);
+  React2.useLayoutEffect(() => {
+    if (!isRoot || !isOpen) return;
+    registerRootOverlay(id);
+    return () => unregisterRootOverlay(id);
+  }, [isRoot, isOpen, id]);
+  if (!isRoot) return parent + LAYER_STEP;
+  if (!isOpen) return ROOT_LAYER;
+  const index = openIds.indexOf(id);
+  return index === -1 ? ROOT_LAYER : (index + 1) * ROOT_STEP;
 };
 var LayerProvider = ({ zIndex, children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LayerContext.Provider, { value: zIndex, children });
-var POPOVER_BASE = 140;
 function Popover({
   open,
   anchorRef,
@@ -449,7 +483,7 @@ function Popover({
     layerRef: ref
   });
   const restore = React2.useRef(null);
-  const zIndex = useOverlayLayer(POPOVER_BASE);
+  const zIndex = useOverlayLayer(!!open);
   React2.useEffect(() => {
     if (!open) return;
     restore.current = typeof document !== "undefined" ? document.activeElement : null;
@@ -778,7 +812,9 @@ function SegmentedControl({ options = [], value, onChange, className = "", ...re
 
 // src/components/textExposure.ts
 function truncationTitle(content) {
-  return typeof content === "string" || typeof content === "number" ? String(content) : void 0;
+  if (typeof content !== "string" && typeof content !== "number") return void 0;
+  const text = String(content);
+  return text === "" ? void 0 : text;
 }
 
 // src/components/surfaces/Card.tsx
@@ -855,9 +891,8 @@ function Collapsible({
 var React4 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var DRAWER_BASE = 90;
 function Drawer({ open = true, title, onClose, footer, children, className = "", ...rest }) {
-  const zIndex = useOverlayLayer(DRAWER_BASE);
+  const zIndex = useOverlayLayer(open);
   const [closing, setClosing] = React4.useState(false);
   const close = React4.useCallback(() => {
     if (!onClose) return;
@@ -895,6 +930,7 @@ var import_react_dom3 = require("react-dom");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function Modal({ open = true, title, description, onClose, footer, wide = false, children, className = "", ...rest }) {
   const [closing, setClosing] = React5.useState(false);
+  const zIndex = useOverlayLayer(!!open);
   const close = React5.useCallback(() => {
     if (!onClose) return;
     setClosing(true);
@@ -910,10 +946,11 @@ function Modal({ open = true, title, description, onClose, footer, wide = false,
   }, [open, onClose, close]);
   if (!open) return null;
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: "fd-scrim" + (closing ? " is-closing" : ""),
+        style: { zIndex: zIndex - LAYER_STEP },
         onClick: onClose ? (e) => {
           if (e.target === e.currentTarget) close();
         } : void 0,
@@ -939,7 +976,7 @@ function Modal({ open = true, title, description, onClose, footer, wide = false,
           }
         )
       }
-    ),
+    ) }),
     document.body
   );
 }
@@ -1074,7 +1111,7 @@ function SidebarNav({ brand, groups = [], current: current2, onNavigate, footer,
           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" }, children: it.label }),
+            /* @__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,
@@ -1177,7 +1214,6 @@ function Topbar({
         }
       )
     ] }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { flex: 1 } }),
     overflowActions != null ? narrow ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
@@ -1370,7 +1406,6 @@ function Toast({ title, children, tone = "success", onUndo, onDismiss, className
 // src/components/feedback/Tooltip.tsx
 var React7 = __toESM(require("react"), 1);
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var TOOLTIP_BASE = 150;
 var CLOSE_DELAY_MS = 120;
 function Tooltip({ label, placement = "top", children, className = "" }) {
   const anchorRef = React7.useRef(null);
@@ -1414,7 +1449,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
     layerRef: bubbleRef,
     onDetach: hide
   });
-  const zIndex = useOverlayLayer(TOOLTIP_BASE);
+  const zIndex = useOverlayLayer(open);
   React7.useEffect(() => {
     if (!open) return;
     const key = (e) => {
@@ -1657,11 +1692,10 @@ function DataTable({
 // src/components/data/FilterBar.tsx
 var React9 = __toESM(require("react"), 1);
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var FILTER_BAR_BASE = 120;
 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 zIndex = useOverlayLayer(FILTER_BAR_BASE);
+  const zIndex = useOverlayLayer(!!panel);
   const rootRef = React9.useRef(null);
   const textInputRef = React9.useRef(null);
   const optionsRef = React9.useRef(null);
@@ -2857,10 +2891,9 @@ function ScoreMeter({
 // src/components/data/SortMenu.tsx
 var React15 = __toESM(require("react"), 1);
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var SORT_MENU_BASE = 120;
 function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", className = "", ...rest }) {
   const [open, setOpen] = React15.useState(false);
-  const zIndex = useOverlayLayer(SORT_MENU_BASE);
+  const zIndex = useOverlayLayer(open);
   const ref = React15.useRef(null);
   React15.useEffect(() => {
     if (!open) return;
@@ -2954,7 +2987,7 @@ function StepList({
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: ["fd-steps", dense ? "is-dense" : "", open ? "is-open" : "", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("button", { type: "button", className: "fd-steps-head", onClick: toggle, "aria-expanded": open, children: [
       running ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fd-steps-spin", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", { className: "ph ph-" + (failed ? "warning-circle" : "check-circle"), "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fd-steps-title", children: summary }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fd-steps-title", title: truncationTitle(summary), children: summary }),
       /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "fd-steps-count fd-tabular", children: [
         steps.length,
         " step",
@@ -2982,11 +3015,11 @@ function StepList({
               "aria-expanded": isOpen,
               onClick: () => setExpanded((m) => Object.assign({}, m, { [id]: !isOpen })),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: s.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { title: truncationTitle(s.label), children: s.label }),
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", { className: "ph ph-caret-" + (isOpen ? "up" : "down"), "aria-hidden": "true" })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fd-step-label is-static", children: s.label }),
+          ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fd-step-label is-static", title: truncationTitle(s.label), children: s.label }),
           s.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fd-step-badge is-error", children: "failed" }) : null,
           showDurations && s.durationMs ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fd-step-dur fd-tabular", children: formatDuration(s.durationMs) }) : null
         ] }),
@@ -3212,7 +3245,7 @@ function EntityRow({
               // `title` is the exposure mechanism, same rule as every other identifier.
               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-title fd-body-sm", title: truncationTitle(title), children: title })
             ),
-            meta ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-meta", children: meta }) : null
+            meta ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-meta", title: truncationTitle(meta), children: meta }) : null
           ] }),
           hasStrip ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "fd-erow-strip", children: [
             metrics && metrics.length ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(EntityRowMetrics, { metrics }) : null,
@@ -3548,7 +3581,7 @@ function TransferList({
             height: drag.height,
             transform: `translate(${drag.x - drag.offsetX}px, ${drag.y - drag.offsetY}px) rotate(-3deg)`,
             pointerEvents: "none",
-            zIndex: 1e3
+            zIndex: OVERLAY_CEILING
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(EntityRow, { ...renderRow(drag.item), draggable: true, className: "fd-erow-dragging" })
         }
@@ -3893,7 +3926,7 @@ function Select({
           style: { all: "unset", flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 8, cursor: "inherit", overflow: "hidden" },
           children: [
             selected && selected.icon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-" + selected.icon, style: { flex: "none", color: "var(--text-2)" } }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: (multiple ? chosen.length : selected) ? "var(--text)" : "var(--text-muted)" }, children: boxText }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { title: truncationTitle(boxText), style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: (multiple ? chosen.length : selected) ? "var(--text)" : "var(--text-muted)" }, children: boxText }),
             multiple && chosen.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-mono", style: { flex: "none", fontSize: 11, fontWeight: 700, padding: "1px 6px", borderRadius: 99, background: "var(--brand)", color: "#fff" }, children: chosen.length }) : null
           ]
         }
@@ -4165,6 +4198,7 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
           type: "button",
           id: fieldId,
           "aria-labelledby": ariaLabelledBy,
+          title: truncationTitle(display),
           disabled,
           onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
@@ -6989,7 +7023,7 @@ function AccountMenu({
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Avatar, { name: user.name }),
         /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-stack", style: { gap: 1, minWidth: 0, flex: 1 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm", style: { fontWeight: 700 }, children: user.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm fd-muted fd-table-trunc", children: user.email })
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm fd-muted fd-table-trunc", title: truncationTitle(user.email), children: user.email })
         ] })
       ] }),
       showRoles && session.roles.length ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "fd-row", style: { gap: 6, padding: "10px 14px", flexWrap: "wrap", borderBottom: "1px solid var(--border)" }, children: session.roles.map((r) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Badge, { tone: r.id === "owner" ? "success" : "neutral", children: r.name }, r.id)) }) : null,
@@ -7804,7 +7838,6 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 var React36 = __toESM(require("react"), 1);
 var import_react_dom5 = require("react-dom");
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var SOON_HOVERCARD_BASE = 220;
 var BYPASS_STORE = "fd.soon.bypass.v1";
 function readBypassed() {
   try {
@@ -7999,7 +8032,7 @@ function ComingSoon({
 function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass, blur, tip, className, rest, children }) {
   const [open, setOpen] = React36.useState(false);
   const [anchor, pos] = useHoverCard(open);
-  const zIndex = useOverlayLayer(SOON_HOVERCARD_BASE);
+  const zIndex = useOverlayLayer(open);
   const close = React36.useRef(null);
   const show = () => {
     if (close.current) {
@@ -8188,11 +8221,10 @@ function PermissionHint({ perm, children }) {
 // src/components/platform/ModeSwitch.tsx
 var React37 = __toESM(require("react"), 1);
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var MODE_SWITCH_BASE = 140;
 function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog, onOpenSpec, summary }) {
   const mode2 = useRuntimeMode();
   const [open, setOpen] = React37.useState(false);
-  const zIndex = useOverlayLayer(MODE_SWITCH_BASE);
+  const zIndex = useOverlayLayer(open);
   const ref = React37.useRef(null);
   React37.useEffect(() => {
     if (!open) return;
@@ -9299,7 +9331,7 @@ function PacketCard({ packet, schema, render, onApply, applied }) {
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("section", { className: "fdc-packet" + (invalid ? " is-invalid" : ""), "aria-label": title, children: [
     /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("header", { className: "fdc-packet-head", children: [
       /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("i", { className: "ph ph-" + (s.icon || "package"), "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "fdc-packet-title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "fdc-packet-title", title: truncationTitle(title), children: title }),
       packet.repaired ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "fdc-packet-badge", children: "Repaired" }) : null,
       invalid ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "fdc-packet-badge is-danger", children: "Invalid" }) : null
     ] }),
@@ -9804,7 +9836,7 @@ function ChatComposer({
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "fdc-composer" + (disabled ? " is-disabled" : "") + (narrow ? " is-narrow" : ""), children: [
     queue.length ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "fdc-queue", "aria-label": "Queued messages", children: queue.map((q) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "fdc-queue-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("i", { className: "ph ph-clock-countdown", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "fdc-queue-text", children: q.text || (q.attachments ? q.attachments.length + " file(s)" : "") }),
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "fdc-queue-text", title: truncationTitle(q.text || (q.attachments ? q.attachments.length + " file(s)" : "")), children: q.text || (q.attachments ? q.attachments.length + " file(s)" : "") }),
       onRemoveQueued ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("button", { type: "button", className: "fdc-queue-x", onClick: () => onRemoveQueued(q.id), "aria-label": "Remove queued message", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("i", { className: "ph ph-x", "aria-hidden": "true" }) }) : null
     ] }, q.id)) }) : null,
     sessionBar,
@@ -9932,7 +9964,7 @@ function ChatSessionBar({ sessionStats, contextUsage, usageLimits, onClear, extr
           "aria-label": expandable ? "Usage details" : void 0,
           children: [
             cu ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "fdc-bar-mini", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SegmentedMeter, { total, segments: cu.segments, height: 4, showTotal: false }) }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "fdc-bar-text", children: bits.join(" \xB7 ") }),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "fdc-bar-text", title: truncationTitle(bits.join(" \xB7 ")), children: bits.join(" \xB7 ") }),
             expandable ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("i", { className: "ph ph-caret-right fdc-bar-caret", "aria-hidden": "true" }) : null
           ]
         }
@@ -10326,8 +10358,8 @@ function AgentChatPanel({
         showHeader ? /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("header", { className: "fdc-head", children: [
           /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "fdc-head-mark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("i", { className: "ph ph-" + assistantIcon }) }),
           /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("span", { className: "fdc-head-titles", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "fdc-head-title", children: title }),
-            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "fdc-head-sub", children: subtitle }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "fdc-head-title", title: truncationTitle(title), children: title }),
+            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "fdc-head-sub", title: truncationTitle(subtitle), children: subtitle }) : null
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("span", { className: "fdc-head-acts", children: [
             headerActions,