@flytedan/flytebot-design-system 0.49.0 → 0.49.2

package/dist/index.cjs

@@ -112,6 +112,7 @@ __export(index_exports, {
   JobTray: () => JobTray,
   Json: () => Json,
   KeyHint: () => KeyHint,
+  LAYER_STEP: () => LAYER_STEP,
   LoadingRegion: () => LoadingRegion,
   Markdown: () => Markdown,
   MarkdownEditor: () => MarkdownEditor,
@@ -126,6 +127,7 @@ __export(index_exports, {
   ModeSwitch: () => ModeSwitch,
   ModelControls: () => ModelControls,
   NumberInput: () => NumberInput,
+  OVERLAY_CEILING: () => OVERLAY_CEILING,
   POPOVER_BODY_MIN: () => POPOVER_BODY_MIN,
   PacketCard: () => PacketCard,
   Pagination: () => Pagination,
@@ -138,6 +140,7 @@ __export(index_exports, {
   ProgressBar: () => ProgressBar,
   QueryKit: () => QueryKit,
   QuotaRow: () => QuotaRow,
+  ROOT_STEP: () => ROOT_STEP,
   Radio: () => Radio,
   RangeSlider: () => RangeSlider,
   RelativeTime: () => RelativeTime,
@@ -182,6 +185,7 @@ __export(index_exports, {
   VIRTUAL_LIST_BUFFER_ROWS: () => VIRTUAL_LIST_BUFFER_ROWS,
   VIRTUAL_LIST_ROW_GAP: () => VIRTUAL_LIST_ROW_GAP,
   VirtualList: () => VirtualList,
+  __resetLayerStackForTests: () => __resetLayerStackForTests,
   acceptMatches: () => acceptMatches,
   anyOfFilter: () => anyOfFilter,
   applyPrefs: () => applyPrefs,
@@ -231,6 +235,7 @@ __export(index_exports, {
   useChatEngine: () => useChatEngine,
   useDocumentTitle: () => useDocumentTitle,
   useFeatureStatus: () => useFeatureStatus,
+  useLayerZIndex: () => useLayerZIndex,
   usePopoverPosition: () => usePopoverPosition,
   useResponsiveRail: () => useResponsiveRail,
   useRuntimeMode: () => useRuntimeMode,
@@ -447,6 +452,8 @@ function open(layer) {
   layer.order = ++lastOrder;
   lastClosed = null;
   if (layer.options.trap && !contains(scopeOf(layer), document.activeElement)) focusInto(layer);
+  zIndexVersion++;
+  notifyZIndexListeners();
 }
 function close(layer) {
   openLayers.delete(layer);
@@ -457,7 +464,53 @@ function close(layer) {
     document.removeEventListener("keydown", onKeydown);
     pendingEscape = null;
   }
+  zIndexVersion++;
+  notifyZIndexListeners();
 }
+var LAYER_STEP = 10;
+var ROOT_STEP = 100;
+var OVERLAY_CEILING = 1e4;
+var zIndexListeners = /* @__PURE__ */ new Set();
+var notifyZIndexListeners = () => {
+  zIndexListeners.forEach((listener) => listener());
+};
+var subscribeZIndex = (listener) => {
+  zIndexListeners.add(listener);
+  return () => {
+    zIndexListeners.delete(listener);
+  };
+};
+var zIndexVersion = 0;
+var getZIndexVersion = () => zIndexVersion;
+function openSiblingsOf(layer) {
+  const siblings = [];
+  for (const l of openLayers) if (l.parent === layer.parent) siblings.push(l);
+  return siblings.sort((a, b) => a.order - b.order);
+}
+function computeZIndex(layer) {
+  const path = [];
+  for (let l = layer; l; l = l.parent) path.push(l);
+  path.reverse();
+  let z = 0;
+  for (const l of path) {
+    const siblings = openSiblingsOf(l);
+    const index = Math.max(0, siblings.indexOf(l));
+    z = l.parent === null ? (index + 1) * ROOT_STEP : z + LAYER_STEP + index;
+  }
+  return z;
+}
+function useLayerZIndex(layer) {
+  React2.useSyncExternalStore(subscribeZIndex, getZIndexVersion, getZIndexVersion);
+  const l = layer;
+  return l.order > 0 ? computeZIndex(l) : 0;
+}
+var __resetLayerStackForTests = () => {
+  openLayers.clear();
+  lastOrder = 0;
+  pendingEscape = null;
+  lastClosed = null;
+  notifyZIndexListeners();
+};
 function returnFocus(layer) {
   if (layer.options.returnFocus === false) return;
   const current2 = document.activeElement;
@@ -614,50 +667,6 @@ var portal = (node) => {
   if (typeof document !== "undefined") return (0, import_react_dom.createPortal)(node, document.body);
   return node;
 };
-var ROOT_LAYER = 0;
-var LAYER_STEP = 10;
-var ROOT_STEP = 100;
-var OVERLAY_CEILING = 1e4;
-var LayerContext2 = React3.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 = () => React3.useContext(LayerContext2);
-var useOverlayLayer = (isOpen) => {
-  const parent = useLayer();
-  const isRoot = parent === ROOT_LAYER;
-  const id = React3.useId();
-  const openIds = React3.useSyncExternalStore(subscribeRootOverlays, getRootOverlaysSnapshot, getRootOverlaysSnapshot);
-  React3.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_runtime4.jsx)(LayerContext2.Provider, { value: zIndex, children });
 function Popover({
   open: open2,
   anchorRef,
@@ -693,8 +702,8 @@ function Popover({
     onDetach: onClose,
     layerRef: ref
   });
-  const zIndex = useOverlayLayer(!!open2);
   const layer = useStackedLayer({ active: !!open2, containerRef: ref, onEscape: closeOnEscape ? onClose : void 0, returnFocus: returnFocus2 });
+  const zIndex = useLayerZIndex(layer);
   React3.useEffect(() => {
     if (!open2) return;
     const away = (e) => {
@@ -710,7 +719,7 @@ function Popover({
   }, [open2, closeOnOutside, onClose, anchorRef, triggerRef, layer]);
   if (!open2 || !pos) return null;
   return portal(
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StackedLayerProvider, { layer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StackedLayerProvider, { layer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
         ref,
@@ -753,7 +762,7 @@ function Popover({
           footer != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fd-pop-footer", children: footer }) : null
         ]
       }
-    ) }) })
+    ) })
   );
 }
 var isItem = (it) => !!it && it.kind !== "separator" && it.kind !== "section" && it.kind !== "custom" && !it.disabled;
@@ -1005,6 +1014,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function AnchoredPopover({ rect, width = 620, onClose, children }) {
   const ref = React4.useRef(null);
   const layer = useStackedLayer({ active: !!rect, containerRef: ref, onEscape: onClose });
+  const zIndex = useLayerZIndex(layer);
   const w = Math.min(width, window.innerWidth - 32);
   const [h, setH] = React4.useState(0);
   React4.useLayoutEffect(() => {
@@ -1046,7 +1056,7 @@ function AnchoredPopover({ rect, width = 620, onClose, children }) {
           left,
           top,
           width: w,
-          zIndex: 150,
+          zIndex,
           maxHeight: `calc(100vh - ${PAD * 2}px)`,
           overflowY: "auto",
           background: "var(--surface)",
@@ -1169,7 +1179,6 @@ var React6 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function Drawer({ open: open2 = true, title, onClose, footer, children, className = "", ...rest }) {
-  const zIndex = useOverlayLayer(open2);
   const asideRef = React6.useRef(null);
   const [closing, setClosing] = React6.useState(false);
   const close2 = React6.useCallback(() => {
@@ -1178,9 +1187,10 @@ function Drawer({ open: open2 = true, title, onClose, footer, children, classNam
     setTimeout(onClose, 210);
   }, [onClose]);
   const layer = useStackedLayer({ active: !!open2, containerRef: asideRef, trap: true, onEscape: onClose ? close2 : void 0 });
+  const zIndex = useLayerZIndex(layer);
   if (!open2) return null;
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(StackedLayerProvider, { layer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(StackedLayerProvider, { layer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close2 }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("aside", { ref: asideRef, className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, style: { zIndex }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fd-card-head", style: { flex: "none" }, children: [
@@ -1190,7 +1200,7 @@ function Drawer({ open: open2 = true, title, onClose, footer, children, classNam
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children }),
         footer ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fd-card-foot", style: { flex: "none" }, children: typeof footer === "function" ? footer(close2) : footer }) : null
       ] })
-    ] }) }),
+    ] }),
     document.body
   );
 }
@@ -1202,16 +1212,16 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 function Modal({ open: open2 = true, title, description, onClose, footer, wide = false, children, className = "", ...rest }) {
   const [closing, setClosing] = React7.useState(false);
   const boxRef = React7.useRef(null);
-  const zIndex = useOverlayLayer(!!open2);
   const close2 = React7.useCallback(() => {
     if (!onClose) return;
     setClosing(true);
     setTimeout(onClose, 190);
   }, [onClose]);
   const layer = useStackedLayer({ active: !!open2, containerRef: boxRef, trap: true, onEscape: onClose ? close2 : void 0 });
+  const zIndex = useLayerZIndex(layer);
   if (!open2) return null;
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StackedLayerProvider, { layer, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StackedLayerProvider, { layer, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         className: "fd-scrim" + (closing ? " is-closing" : ""),
@@ -1242,7 +1252,7 @@ function Modal({ open: open2 = true, title, description, onClose, footer, wide =
           }
         )
       }
-    ) }) }),
+    ) }),
     document.body
   );
 }
@@ -2019,7 +2029,7 @@ function Tag({ children, icon, selected = false, tone = "neutral", onRemove, onC
       ...rest,
       children: [
         icon ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("i", { className: "ph ph-" + icon, "aria-hidden": "true" }) : null,
-        children,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fd-tag-label", children }),
         onRemove ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "span",
           {
@@ -2105,8 +2115,8 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
     layerRef: bubbleRef,
     onDetach: hide
   });
-  const zIndex = useOverlayLayer(open2);
-  useStackedLayer({ active: open2, containerRef: bubbleRef, onEscape: hide, returnFocus: false });
+  const layer = useStackedLayer({ active: open2, containerRef: bubbleRef, onEscape: hide, returnFocus: false });
+  const zIndex = useLayerZIndex(layer);
   React14.useEffect(() => {
     if (!open2) return;
     const away = (e) => {
@@ -2801,7 +2811,7 @@ function BarList({
   const isEmpty = state === "ready" && ordered.every((r) => !(Number(r.value) > 0));
   const effectiveState = isEmpty ? "empty" : state;
   const maxValue = ordered.reduce((m, r) => Math.max(m, Number(r.value) || 0), 0) || 1;
-  const effectiveTotal = total != null ? total : ordered.reduce((n, r) => n + (Number(r.value) || 0), 0);
+  const effectiveTotal = total != null ? total : rows.reduce((n, r) => n + (Number(r.value) || 0), 0);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: ["fd-barlist", className].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     LoadingRegion,
     {
@@ -4554,11 +4564,11 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
       };
       const chipText = field.label + (set ? ": " + chipLabel(field, value) : "");
       if (field.type === "text") {
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, children: chipText }, field.key);
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, title: chipText, children: chipText }, field.key);
       }
       if (field.type === "select") {
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: chipRef, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, children: chipText }) }),
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "fd-filterbar-chip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: chipRef, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, title: chipText, children: chipText }) }),
           editing ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Popover,
             {
@@ -4592,8 +4602,8 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
         ] }, field.key);
       }
       if (field.type === "multiSelect") {
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: chipRef, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, children: chipText }) }),
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "fd-filterbar-chip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: chipRef, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, title: chipText, children: chipText }) }),
           editing ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             MultiSelectPanel,
             {
@@ -4607,8 +4617,8 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
         ] }, field.key);
       }
       if (field.type === "range") {
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: chipRef, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, children: chipText }) }),
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "fd-filterbar-chip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: chipRef, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, title: chipText, children: chipText }) }),
           editing ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             RangePanel,
             {
@@ -4622,8 +4632,8 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
         ] }, field.key);
       }
       if (field.type === "date") {
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: chipRef, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, children: chipText }) }),
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "fd-filterbar-chip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: chipRef, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Tag, { selected: true, onClick: toggleOrClose, onRemove: remove, title: chipText, children: chipText }) }),
           editing ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             DatePanel,
             {
@@ -5429,9 +5439,9 @@ var React31 = __toESM(require("react"), 1);
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function useInlinePanel() {
   const [open2, setOpen] = React31.useState(false);
-  const zIndex = useOverlayLayer(open2);
   const ref = React31.useRef(null);
   const layer = useStackedLayer({ active: open2, containerRef: ref, onEscape: () => setOpen(false) });
+  const zIndex = useLayerZIndex(layer);
   React31.useEffect(() => {
     if (!open2) return;
     const away = (e) => {
@@ -5443,7 +5453,7 @@ function useInlinePanel() {
   return { open: open2, setOpen, ref, zIndex, layer };
 }
 function InlinePanelLayers({ panel, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(LayerProvider, { zIndex: panel.zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StackedLayerProvider, { layer: panel.layer, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StackedLayerProvider, { layer: panel.layer, children });
 }
 
 // src/components/data/SortMenu.tsx
@@ -10973,7 +10983,9 @@ function ComingSoon({
 function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass, blur, tip, className, rest, children }) {
   const [open2, setOpen] = React55.useState(false);
   const [anchor, pos] = useHoverCard(open2);
-  const zIndex = useOverlayLayer(open2);
+  const hoverCardRef = React55.useRef(null);
+  const hoverLayer = useStackedLayer({ active: open2, containerRef: hoverCardRef, returnFocus: false });
+  const zIndex = useLayerZIndex(hoverLayer);
   const close2 = React55.useRef(null);
   const show = () => {
     if (close2.current) {
@@ -11020,9 +11032,10 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
           }
         ),
         open2 && pos ? (0, import_react_dom6.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             "div",
             {
+              ref: hoverCardRef,
               className: "fd-soon-note fd-soon-hovercard",
               role: "tooltip",
               style: { position: "fixed", left: pos.left, top: pos.top, bottom: pos.bottom, width: pos.width, zIndex },
@@ -11042,7 +11055,7 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
                 }
               )
             }
-          ) }),
+          ),
           document.body
         ) : null
       ]
@@ -14597,6 +14610,7 @@ function useDocumentTitle(routeTitle, appName) {
   JobTray,
   Json,
   KeyHint,
+  LAYER_STEP,
   LoadingRegion,
   Markdown,
   MarkdownEditor,
@@ -14611,6 +14625,7 @@ function useDocumentTitle(routeTitle, appName) {
   ModeSwitch,
   ModelControls,
   NumberInput,
+  OVERLAY_CEILING,
   POPOVER_BODY_MIN,
   PacketCard,
   Pagination,
@@ -14623,6 +14638,7 @@ function useDocumentTitle(routeTitle, appName) {
   ProgressBar,
   QueryKit,
   QuotaRow,
+  ROOT_STEP,
   Radio,
   RangeSlider,
   RelativeTime,
@@ -14667,6 +14683,7 @@ function useDocumentTitle(routeTitle, appName) {
   VIRTUAL_LIST_BUFFER_ROWS,
   VIRTUAL_LIST_ROW_GAP,
   VirtualList,
+  __resetLayerStackForTests,
   acceptMatches,
   anyOfFilter,
   applyPrefs,
@@ -14716,6 +14733,7 @@ function useDocumentTitle(routeTitle, appName) {
   useChatEngine,
   useDocumentTitle,
   useFeatureStatus,
+  useLayerZIndex,
   usePopoverPosition,
   useResponsiveRail,
   useRuntimeMode,