@flytedan/flytebot-design-system 0.12.0 → 0.12.3

package/dist/index.js

@@ -185,6 +185,16 @@ var portal = (node) => {
   if (typeof document !== "undefined") return createPortal(node, document.body);
   return node;
 };
+var ROOT_LAYER = 0;
+var LAYER_STEP = 10;
+var LayerContext = React.createContext(ROOT_LAYER);
+var useLayer = () => React.useContext(LayerContext);
+var useOverlayLayer = (base) => {
+  const parent = useLayer();
+  return parent === ROOT_LAYER ? base : parent + LAYER_STEP;
+};
+var LayerProvider = ({ zIndex, children }) => /* @__PURE__ */ jsx3(LayerContext.Provider, { value: zIndex, children });
+var POPOVER_BASE = 140;
 function Popover({
   open,
   anchorRef,
@@ -221,6 +231,7 @@ function Popover({
     layerRef: ref
   });
   const restore = React.useRef(null);
+  const zIndex = useOverlayLayer(POPOVER_BASE);
   React.useEffect(() => {
     if (!open) return;
     restore.current = typeof document !== "undefined" ? document.activeElement : null;
@@ -259,7 +270,7 @@ function Popover({
   }, [open, closeOnOutside, closeOnEscape, onClose, anchorRef, triggerRef]);
   if (!open || !pos) return null;
   return portal(
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx3(LayerProvider, { zIndex, children: /* @__PURE__ */ jsxs2(
       "div",
       {
         ref,
@@ -289,8 +300,12 @@ function Popover({
           // ordinary content that simply happens to be taller than some fixed number.
           maxHeight: maxHeight != null ? Math.min(maxHeight, pos.maxH) : pos.maxH,
           transformOrigin: pos.side === "top" ? "bottom center" : "top center",
-          zIndex: 140,
-          ...style
+          // Last, and always: a caller's `style` (Select, DatePicker, TimePicker all pass
+          // one) must never be able to clobber the computed layer — that silent override
+          // via object-spread order is exactly how the Select listbox (130) ended up
+          // fixed below the Popover (140) it opens from. zIndex is never a caller concern.
+          ...style,
+          zIndex
         },
         children: [
           header != null ? /* @__PURE__ */ jsx3("div", { className: "fd-pop-header", children: header }) : null,
@@ -298,7 +313,7 @@ function Popover({
           footer != null ? /* @__PURE__ */ jsx3("div", { className: "fd-pop-footer", children: footer }) : null
         ]
       }
-    )
+    ) })
   );
 }
 var isItem = (it) => !!it && it.kind !== "separator" && it.kind !== "section" && it.kind !== "custom" && !it.disabled;
@@ -616,8 +631,10 @@ function Collapsible({
 // src/components/surfaces/Drawer.tsx
 import * as React3 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var DRAWER_BASE = 90;
 function Drawer({ open = true, title, onClose, footer, children, className = "", ...rest }) {
+  const zIndex = useOverlayLayer(DRAWER_BASE);
   const [closing, setClosing] = React3.useState(false);
   const close = React3.useCallback(() => {
     if (!onClose) return;
@@ -634,9 +651,9 @@ function Drawer({ open = true, title, onClose, footer, children, className = "",
   }, [open, onClose, close]);
   if (!open) return null;
   return createPortal2(
-    /* @__PURE__ */ jsxs5(Fragment2, { children: [
-      /* @__PURE__ */ jsx7("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block" }, onClick: close }),
-      /* @__PURE__ */ jsxs5("aside", { className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, children: [
+    /* @__PURE__ */ jsxs5(LayerProvider, { zIndex, children: [
+      /* @__PURE__ */ jsx7("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close }),
+      /* @__PURE__ */ jsxs5("aside", { className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, style: { zIndex }, children: [
         /* @__PURE__ */ jsxs5("div", { className: "fd-card-head", style: { flex: "none" }, children: [
           /* @__PURE__ */ jsx7("span", { className: "fd-card-head-title", children: title }),
           onClose ? /* @__PURE__ */ jsx7("button", { type: "button", className: "fd-btn-icon", "aria-label": "Close", onClick: close, children: /* @__PURE__ */ jsx7("i", { className: "ph ph-x" }) }) : null
@@ -888,7 +905,7 @@ function Tabs({ tabs = [], value, onChange, className = "", ...rest }) {
 
 // src/components/navigation/Topbar.tsx
 import * as React5 from "react";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function useIsNarrow(breakpoint) {
   const [narrow, setNarrow] = React5.useState(
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches
@@ -933,7 +950,7 @@ function Topbar({
       )
     ] }, i)) }),
     /* @__PURE__ */ jsx16("span", { style: { flex: 1 } }),
-    overflowActions != null ? narrow ? /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    overflowActions != null ? narrow ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
       /* @__PURE__ */ jsx16(
         "button",
         {
@@ -1012,12 +1029,12 @@ function EmptyState({ icon = "tray", title, children, action, className = "", ..
 }
 
 // src/components/feedback/Flag.tsx
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function Flag({ statement, cost, actions, tone = "warning", className = "", ...rest }) {
   return /* @__PURE__ */ jsxs16("div", { className: ["fd-flag", "fd-flag-" + tone, className].filter(Boolean).join(" "), role: "status", ...rest, children: [
     /* @__PURE__ */ jsxs16("span", { className: "fd-flag-text", children: [
       statement,
-      cost ? /* @__PURE__ */ jsxs16(Fragment5, { children: [
+      cost ? /* @__PURE__ */ jsxs16(Fragment4, { children: [
         " ",
         /* @__PURE__ */ jsx20("span", { className: "fd-flag-cost", children: cost })
       ] }) : null
@@ -1125,6 +1142,7 @@ function Toast({ title, children, tone = "success", onUndo, onDismiss, className
 // src/components/feedback/Tooltip.tsx
 import * as React6 from "react";
 import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+var TOOLTIP_BASE = 150;
 var CLOSE_DELAY_MS = 120;
 function Tooltip({ label, placement = "top", children, className = "" }) {
   const anchorRef = React6.useRef(null);
@@ -1168,6 +1186,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
     layerRef: bubbleRef,
     onDetach: hide
   });
+  const zIndex = useOverlayLayer(TOOLTIP_BASE);
   React6.useEffect(() => {
     if (!open) return;
     const key = (e) => {
@@ -1231,7 +1250,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
               ref: bubbleRef,
               role: "tooltip",
               className: ["fd-tooltip", pos.side === "bottom" ? "is-below" : "", className].filter(Boolean).join(" "),
-              style: { left: pos.left, top: pos.top == null ? "auto" : pos.top, bottom: pos.bottom == null ? "auto" : pos.bottom },
+              style: { left: pos.left, top: pos.top == null ? "auto" : pos.top, bottom: pos.bottom == null ? "auto" : pos.bottom, zIndex },
               onPointerEnter: (e) => {
                 if (isMouse(e)) cancelClose();
               },
@@ -1600,7 +1619,7 @@ function StatTile({ label, value, sub, delta, loading = false, compact: compact3
 
 // src/components/data/CodeBlock.tsx
 import * as React9 from "react";
-import { Fragment as Fragment6, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs25 } from "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 = {
   js: [
@@ -1756,7 +1775,7 @@ function tokenize(src, lang) {
 }
 function Highlighted({ code, lang }) {
   const toks = React9.useMemo(() => tokenize(code, lang), [code, lang]);
-  return /* @__PURE__ */ jsx30(Fragment6, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ jsx30("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
+  return /* @__PURE__ */ jsx30(Fragment5, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ jsx30("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
 }
 function useCopy() {
   const [done, setDone] = React9.useState(false);
@@ -2120,7 +2139,7 @@ function Meter({ segments = [], unallocated = 0, height = 8, label, legend = fal
 }
 
 // src/components/data/Pagination.tsx
-import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 function Pagination({
   page = 1,
   pageSize = 25,
@@ -2146,10 +2165,10 @@ function Pagination({
     else if (nums[nums.length - 1] !== "\u2026") nums.push("\u2026");
   }
   return /* @__PURE__ */ jsxs28("div", { className: ["fd-pag", className].filter(Boolean).join(" "), ...rest, children: [
-    /* @__PURE__ */ jsx33("span", { className: "fd-pag-count", children: loading ? /* @__PURE__ */ jsx33("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 12, width: 108 } }) : total === 0 ? /* @__PURE__ */ jsxs28(Fragment8, { children: [
+    /* @__PURE__ */ jsx33("span", { className: "fd-pag-count", children: loading ? /* @__PURE__ */ jsx33("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 12, width: 108 } }) : total === 0 ? /* @__PURE__ */ jsxs28(Fragment7, { children: [
       "No ",
       unit
-    ] }) : /* @__PURE__ */ jsxs28(Fragment8, { children: [
+    ] }) : /* @__PURE__ */ jsxs28(Fragment7, { children: [
       /* @__PURE__ */ jsxs28("strong", { children: [
         from.toLocaleString(),
         "\u2013",
@@ -3644,7 +3663,7 @@ function Select({
         matchWidth: "min",
         minWidth: 260,
         role: "presentation",
-        style: { maxWidth: 380, zIndex: 130 },
+        style: { maxWidth: 380 },
         header: hasSearch ? /* @__PURE__ */ jsxs44("div", { className: "fd-pop-search", children: [
           /* @__PURE__ */ jsx49("i", { className: "ph ph-magnifying-glass", style: { color: "var(--text-muted)", fontSize: 14 } }),
           /* @__PURE__ */ jsx49(
@@ -3908,7 +3927,7 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
         placement: "bottom-start",
         offset: 6,
         role: "presentation",
-        style: { width: "max-content", zIndex: 130 },
+        style: { width: "max-content" },
         children: /* @__PURE__ */ jsx50(
           Calendar,
           {
@@ -4060,7 +4079,6 @@ function TimePicker({ label, help, error, required = false, disabled = false, va
         offset: 6,
         width: 262,
         role: "presentation",
-        style: { zIndex: 130 },
         footer: /* @__PURE__ */ jsxs46(React24.Fragment, { children: [
           /* @__PURE__ */ jsx51(
             "button",
@@ -6633,7 +6651,7 @@ var SessionKit = {
 };
 
 // src/components/platform/AccountMenu.tsx
-import { Fragment as Fragment15, jsx as jsx57, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx57, jsxs as jsxs52 } from "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" }
@@ -6686,7 +6704,7 @@ function AccountMenu({
     if (onSignOut) return onSignOut();
     window.alert("Signed out. (Simulated \u2014 no auth provider is wired up.)");
   };
-  return /* @__PURE__ */ jsxs52(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs52(Fragment14, { children: [
     /* @__PURE__ */ jsxs52(
       "button",
       {
@@ -7523,7 +7541,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 // src/components/platform/ComingSoon.tsx
 import * as React35 from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment17, jsx as jsx61, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx61, jsxs as jsxs56 } from "react/jsx-runtime";
 var BYPASS_STORE = "fd.soon.bypass.v1";
 function readBypassed() {
   try {
@@ -7553,7 +7571,7 @@ function useBypass(key) {
   return [on, set];
 }
 function SoonCard({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass }) {
-  return /* @__PURE__ */ jsxs56(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs56(Fragment16, { children: [
     /* @__PURE__ */ jsxs56("span", { className: "fd-soon-badge", children: [
       /* @__PURE__ */ jsx61("i", { className: "ph ph-traffic-cone", "aria-hidden": "true" }),
       label
@@ -7904,7 +7922,7 @@ function PermissionHint({ perm, children }) {
 
 // src/components/platform/ModeSwitch.tsx
 import * as React36 from "react";
-import { Fragment as Fragment18, jsx as jsx63, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx63, jsxs as jsxs58 } from "react/jsx-runtime";
 function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog, onOpenSpec, summary }) {
   const mode2 = useRuntimeMode();
   const [open, setOpen] = React36.useState(false);
@@ -7974,7 +7992,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
             s.total,
             " features complete"
           ] }),
-          onOpenSpec ? /* @__PURE__ */ jsxs58(Fragment18, { children: [
+          onOpenSpec ? /* @__PURE__ */ jsxs58(Fragment17, { children: [
             /* @__PURE__ */ jsx63("span", { style: { flex: 1 } }),
             /* @__PURE__ */ jsxs58("button", { type: "button", className: "fd-soon-link", onClick: () => {
               setOpen(false);
@@ -8159,7 +8177,7 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
 
 // src/components/planner/MixGap.tsx
 import * as React37 from "react";
-import { Fragment as Fragment19, jsx as jsx66, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx66, jsxs as jsxs61 } from "react/jsx-runtime";
 var MIX_GAP_LAYOUT = {
   trackHeight: 30,
   barHeight: 20,
@@ -8203,7 +8221,7 @@ function MixGap({ rows = [], loading = false, className = "" }) {
           onMouseLeave: () => setHover(null),
           children: [
             /* @__PURE__ */ jsx66("span", { style: { width: 128, flex: "none" }, children: /* @__PURE__ */ jsx66(ChannelTag, { channel: r.channel, size: "sm" }) }),
-            /* @__PURE__ */ jsx66("span", { style: { position: "relative", flex: 1, height: trackHeight, minWidth: 120 }, children: loading ? /* @__PURE__ */ jsx66("span", { className: "fd-skel", style: { position: "absolute", left: 0, right: 0, top: barTop, height: barHeight, borderRadius: 3 } }) : /* @__PURE__ */ jsxs61(Fragment19, { children: [
+            /* @__PURE__ */ jsx66("span", { style: { position: "relative", flex: 1, height: trackHeight, minWidth: 120 }, children: loading ? /* @__PURE__ */ jsx66("span", { className: "fd-skel", style: { position: "absolute", left: 0, right: 0, top: barTop, height: barHeight, borderRadius: 3 } }) : /* @__PURE__ */ jsxs61(Fragment18, { children: [
               /* @__PURE__ */ jsx66("span", { "data-mixgap-bar": "", style: { position: "absolute", left: 0, top: barTop, height: barHeight, width: mixGapOffset(r.realized, max), background: TONE[tone], borderRadius: "2px 3px 3px 2px", transition: "width var(--dur-slow) var(--ease), background var(--dur-base) var(--ease)" } }),
               /* @__PURE__ */ jsx66("span", { "data-mixgap-target": "", style: { position: "absolute", left: `calc(${mixGapOffset(r.target, max)} - ${targetWidth / 2}px)`, top: 0, width: targetWidth, height: trackHeight, background: MIX_GAP_TARGET_STRIPE, borderRadius: 1 } }),
               /* @__PURE__ */ jsxs61("span", { "data-mixgap-label": "", className: "fd-num", style: { position: "absolute", left: labelLeft, top: "50%", transform: "translateY(-50%)", fontSize: 12, color: "var(--text-muted)", whiteSpace: "nowrap" }, children: [
@@ -8317,7 +8335,7 @@ function ChannelContribution({
 
 // src/components/planner/BudgetReallocator.tsx
 import * as React38 from "react";
-import { Fragment as Fragment20, jsx as jsx68, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx68, jsxs as jsxs63 } from "react/jsx-runtime";
 var bandFor = (crp) => crp >= 200 ? "dominant" : crp >= 100 ? "strong" : crp >= 50 ? "adequate" : "weak";
 function BudgetReallocator({
   campus,
@@ -8357,7 +8375,7 @@ function BudgetReallocator({
         /* @__PURE__ */ jsxs63("div", { className: "fd-row", style: { gap: 12, flexWrap: "wrap" }, children: [
           /* @__PURE__ */ jsx68("span", { className: "fd-h4", style: { flex: 1, minWidth: 140 }, children: campus }),
           /* @__PURE__ */ jsx68(CsiBadge, { band: nowBand, crp, size: "medium" }),
-          dirty ? /* @__PURE__ */ jsxs63(Fragment20, { children: [
+          dirty ? /* @__PURE__ */ jsxs63(Fragment19, { children: [
             /* @__PURE__ */ jsx68("i", { className: "ph ph-arrow-right fd-muted", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx68(CsiBadge, { band: nextBand, crp: nextCrp, size: "medium", preview: true })
           ] }) : null