@flytedan/flytebot-design-system 0.12.4 → 0.12.5

package/dist/index.cjs

@@ -1632,9 +1632,11 @@ function DataTable({
 // src/components/data/FilterBar.tsx
 var React8 = __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] = React8.useState(null);
+  const zIndex = useOverlayLayer(FILTER_BAR_BASE);
   const rootRef = React8.useRef(null);
   const textInputRef = React8.useRef(null);
   const optionsRef = React8.useRef(null);
@@ -1725,11 +1727,11 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
             field.label,
             chosen ? ": " + chosen.label : ""
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "span",
             {
               className: "fd-view-enter",
-              style: { position: "absolute", top: "calc(100% + 6px)", left: 0, zIndex: 120, minWidth: 200, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 },
+              style: { position: "absolute", top: "calc(100% + 6px)", left: 0, zIndex, minWidth: 200, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 },
               children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fd-stack", role: "listbox", "aria-label": field.label, ref: optionsRef, style: { gap: 2 }, children: field.options.map((o) => {
                 const on = o.value === value;
                 return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -1750,7 +1752,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
                 );
               }) })
             }
-          )
+          ) })
         ] }, field.key);
       }
       if (isSet(value)) {
@@ -1777,11 +1779,11 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
           children: "Filter"
         }
       ),
-      panel?.kind === "add" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      panel?.kind === "add" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "span",
         {
           className: "fd-view-enter",
-          style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex: 120, width: 220, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 },
+          style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex, width: 220, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 },
           children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fd-stack", role: "menu", "aria-label": "Add filter", style: { gap: 2 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Add filter" }),
             addableFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -1798,7 +1800,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
             ))
           ] })
         }
-      ) : null
+      ) }) : null
     ] }) : null
   ] });
 }
@@ -2824,8 +2826,10 @@ function ScoreMeter({
 // src/components/data/SortMenu.tsx
 var React14 = __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] = React14.useState(false);
+  const zIndex = useOverlayLayer(SORT_MENU_BASE);
   const ref = React14.useRef(null);
   React14.useEffect(() => {
     if (!open) return;
@@ -2874,7 +2878,7 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
       cur ? cur.label : "Unsorted",
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", { className: "ph ph-" + (dir === "asc" ? "arrow-up" : "arrow-down"), style: { fontSize: 12, marginLeft: 6, opacity: 0.75 } })
     ] }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fd-view-enter", style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex: 120, width: 280, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "fd-stack", style: { gap: 2 }, children: [
+    open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fd-view-enter", style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex, width: 280, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "fd-stack", style: { gap: 2 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sort by" }),
       fields.map((f) => {
         const active = cur && cur.key === f.key;
@@ -2884,7 +2888,7 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
           arrow(f, "desc")
         ] }, f.key);
       })
-    ] }) }) : null
+    ] }) }) }) : null
   ] });
 }
 
@@ -7745,6 +7749,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 var React35 = __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 {
@@ -7939,6 +7944,7 @@ function ComingSoon({
 function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass, blur, tip, className, rest, children }) {
   const [open, setOpen] = React35.useState(false);
   const [anchor, pos] = useHoverCard(open);
+  const zIndex = useOverlayLayer(SOON_HOVERCARD_BASE);
   const close = React35.useRef(null);
   const show = () => {
     if (close.current) {
@@ -7985,12 +7991,12 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
           }
         ),
         open && pos ? (0, import_react_dom5.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             "div",
             {
               className: "fd-soon-note fd-soon-hovercard",
               role: "tooltip",
-              style: { position: "fixed", left: pos.left, top: pos.top, bottom: pos.bottom, width: pos.width },
+              style: { position: "fixed", left: pos.left, top: pos.top, bottom: pos.bottom, width: pos.width, zIndex },
               onMouseEnter: show,
               onMouseLeave: hide,
               children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
@@ -8007,7 +8013,7 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
                 }
               )
             }
-          ),
+          ) }),
           document.body
         ) : null
       ]
@@ -8126,9 +8132,11 @@ function PermissionHint({ perm, children }) {
 // src/components/platform/ModeSwitch.tsx
 var React36 = __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] = React36.useState(false);
+  const zIndex = useOverlayLayer(MODE_SWITCH_BASE);
   const ref = React36.useRef(null);
   React36.useEffect(() => {
     if (!open) return;
@@ -8168,7 +8176,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
         ]
       }
     ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "fd-view-enter fd-mode-pop", children: [
+    open ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "fd-view-enter fd-mode-pop", style: { zIndex }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "fd-row", style: { gap: 10, padding: "12px 14px", borderBottom: "1px solid var(--border)" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "fd-badge " + (test ? "fd-badge-warning" : "fd-badge-neutral"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("i", { className: "ph " + (test ? "ph-flask" : "ph-lightning"), "aria-hidden": "true" }),
@@ -8226,7 +8234,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
         ] })
       ] }),
       test && renderLog ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { style: { display: "block", maxHeight: 340, overflowY: "auto", borderTop: "1px solid var(--border)" }, children: renderLog() }) : null
-    ] }) : null
+    ] }) }) : null
   ] });
 }
 function TestModeBar({ onExit }) {