@flytedan/flytebot-design-system 0.40.0 → 0.42.0

package/dist/index.cjs

@@ -102,6 +102,7 @@ __export(index_exports, {
   FormatEta: () => FormatEta,
   FunnelChart: () => FunnelChart,
   Gate: () => Gate,
+  GatePending: () => GatePending,
   IMPORTANCE_LEVELS: () => IMPORTANCE_LEVELS,
   IconButton: () => IconButton,
   ImportanceTag: () => ImportanceTag,
@@ -1012,54 +1013,17 @@ function Collapsible({
 }
 
 // src/components/surfaces/Drawer.tsx
-var React5 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function Drawer({ open = true, title, onClose, footer, children, className = "", ...rest }) {
-  const zIndex = useOverlayLayer(open);
-  const [closing, setClosing] = React5.useState(false);
-  const close = React5.useCallback(() => {
-    if (!onClose) return;
-    setClosing(true);
-    setTimeout(onClose, 210);
-  }, [onClose]);
-  React5.useEffect(() => {
-    if (!open || !onClose) return;
-    const h = (e) => {
-      if (e.key === "Escape") close();
-    };
-    document.addEventListener("keydown", h);
-    return () => document.removeEventListener("keydown", h);
-  }, [open, onClose, close]);
-  if (!open) return null;
-  return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(LayerProvider, { zIndex, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("aside", { className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, style: { zIndex }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "fd-card-head", style: { flex: "none" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
-          onClose ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Close", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("i", { className: "ph ph-x" }) }) : null
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fd-card-foot", style: { flex: "none" }, children: typeof footer === "function" ? footer(close) : footer }) : null
-      ] })
-    ] }),
-    document.body
-  );
-}
-
-// src/components/surfaces/Modal.tsx
-var React7 = __toESM(require("react"), 1);
-var import_react_dom4 = require("react-dom");
 
 // src/kits/useFocusTrap.ts
-var React6 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 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 useFocusTrap(containerRef, active) {
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (!active) return;
     const container = containerRef.current;
     if (!container) return;
@@ -1095,7 +1059,46 @@ function useFocusTrap(containerRef, active) {
   }, [active, containerRef]);
 }
 
+// src/components/surfaces/Drawer.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Drawer({ open = true, title, onClose, footer, children, className = "", ...rest }) {
+  const zIndex = useOverlayLayer(open);
+  const asideRef = React6.useRef(null);
+  useFocusTrap(asideRef, !!open);
+  const [closing, setClosing] = React6.useState(false);
+  const close = React6.useCallback(() => {
+    if (!onClose) return;
+    setClosing(true);
+    setTimeout(onClose, 210);
+  }, [onClose]);
+  React6.useEffect(() => {
+    if (!open || !onClose) return;
+    const h = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", h);
+    return () => document.removeEventListener("keydown", h);
+  }, [open, onClose, close]);
+  if (!open) return null;
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(LayerProvider, { zIndex, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsxs)("div", { className: "fd-card-head", style: { flex: "none" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
+          onClose ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Close", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("i", { className: "ph ph-x" }) }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fd-card-foot", style: { flex: "none" }, children: typeof footer === "function" ? footer(close) : footer }) : null
+      ] })
+    ] }),
+    document.body
+  );
+}
+
 // src/components/surfaces/Modal.tsx
+var React7 = __toESM(require("react"), 1);
+var import_react_dom4 = require("react-dom");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function Modal({ open = true, title, description, onClose, footer, wide = false, children, className = "", ...rest }) {
   const [closing, setClosing] = React7.useState(false);
@@ -7300,14 +7303,14 @@ function AccountMenu({
   className = "",
   ...rest
 }) {
-  const { user, roles, can: can2, signOut: ctxSignOut, demo } = useSessionContext();
+  const { user, roles, can: can2, signOut: ctxSignOut, demo, pending } = useSessionContext();
   const [open, setOpen] = React43.useState(false);
   const [switching, setSwitching] = React43.useState(false);
   const [signingOut, setSigningOut] = React43.useState(false);
   const [signOutError, setSignOutError] = React43.useState(null);
   const ref = React43.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 visibleLinks = links.filter((l) => !l.perm || !pending && can2(l.perm));
+  const visibleGroups = groups.map((g) => ({ label: g.label, links: g.links.filter((l) => !l.perm || !pending && can2(l.perm)) })).filter((g) => g.links.length);
   const closeMenu = () => {
     setOpen(false);
     setSignOutError(null);
@@ -10614,8 +10617,39 @@ function PermissionDenied({ permission, title, detail, compact: compact3 = false
     }
   );
 }
-function Gate({ perm, anyOf, role, silent = false, fallback, compact: compact3 = false, children }) {
-  const { can: can2, canAny: canAny2, hasRole: hasRole2 } = useSessionContext();
+function GatePending({ compact: compact3 = false, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    "div",
+    {
+      className: ["fd-stack", className].filter(Boolean).join(" "),
+      role: "status",
+      style: {
+        gap: 10,
+        alignItems: "flex-start",
+        padding: compact3 ? "14px 16px" : "28px 24px",
+        borderRadius: 10,
+        border: "1px dashed var(--border-strong)",
+        background: "var(--surface-2)",
+        maxWidth: 560,
+        textAlign: "left"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "fd-row", style: { gap: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("i", { className: "ph ph-arrows-clockwise", style: { fontSize: 16, color: "var(--text-muted)" }, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: compact3 ? "fd-label-lg" : "fd-h3", children: "Reconnecting\u2026" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "fd-body-sm fd-secondary", style: { margin: 0, textWrap: "pretty" }, children: "Your access can't be verified right now. This will resolve on its own once the connection is back." })
+      ]
+    }
+  );
+}
+function Gate({ perm, anyOf, role, silent = false, fallback, pendingFallback, compact: compact3 = false, children }) {
+  const { can: can2, canAny: canAny2, hasRole: hasRole2, pending } = useSessionContext();
+  if (pending) {
+    if (pendingFallback !== void 0) return pendingFallback;
+    if (silent) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(GatePending, { compact: compact3 });
+  }
   let ok = true;
   if (perm) ok = ok && can2(perm);
   if (anyOf) ok = ok && canAny2(anyOf);
@@ -10638,14 +10672,14 @@ function FeatureGate({
   bypassPerm = "flags.manage"
 }) {
   SessionKit.useSession();
-  const { can: can2 } = useSessionContext();
+  const { can: can2, pending } = useSessionContext();
   const rt = useFeatureStatus(flag);
   if (!SessionKit.isEnabled(flag)) return fallback;
   if (rt.complete || rt.mode === "test") return children;
   if (!preview) return fallback;
   const f = SessionKit.findFlag(flag) || {};
   const missing = rt.missing || [];
-  const canBypass = bypassPerm === null ? false : !bypassPerm || can2(bypassPerm);
+  const canBypass = pending ? false : bypassPerm === null ? false : !bypassPerm || can2(bypassPerm);
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     ComingSoon,
     {
@@ -10665,7 +10699,10 @@ function FeatureGate({
   );
 }
 function PermissionHint({ perm, children }) {
-  const { can: can2 } = useSessionContext();
+  const { can: can2, pending } = useSessionContext();
+  if (pending) {
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { title: "Access can't be verified right now", style: { display: "inline-flex", opacity: 0.45, cursor: "not-allowed" }, "aria-disabled": "true", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { style: { pointerEvents: "none" }, children }) });
+  }
   if (can2(perm)) return children;
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "span",
@@ -14107,6 +14144,7 @@ function useDocumentTitle(routeTitle, appName) {
   FormatEta,
   FunnelChart,
   Gate,
+  GatePending,
   IMPORTANCE_LEVELS,
   IconButton,
   ImportanceTag,