@flytedan/flytebot-design-system 0.41.0 → 0.42.0

package/dist/index.d.cts

@@ -316,7 +316,11 @@ interface CollapsibleProps {
 }
 declare function Collapsible({ title, subtitle, badge, icon, defaultOpen, open, onToggle, children, className, ...rest }: CollapsibleProps): React.JSX.Element;
 
-/** A right-side panel for detail and editing without losing the list behind it. */
+/** A right-side panel for detail and editing without losing the list behind it.
+ *  MP-248: always modal (declares `aria-modal="true"`), so it traps Tab/Shift+Tab inside
+ *  itself and returns focus to its trigger on close, via the design system's shared
+ *  `useFocusTrap` (the same hook Modal uses) — one focus-trap implementation, reused
+ *  rather than hand-rolled a second time. */
 interface DrawerProps {
     open?: boolean;
     title?: React.ReactNode;
@@ -3177,7 +3181,12 @@ interface FeatureGateProps {
 }
 /** Feature gate. ALWAYS silent when off — an unreleased feature should leave no trace. */
 declare function FeatureGate({ flag, fallback, children, onRoadmap, blur, minHeight, label, variant, preview, bypassPerm }: FeatureGateProps): React.ReactNode;
-/** Inline "why is this disabled" affordance for buttons that must stay visible. */
+/** Inline "why is this disabled" affordance for buttons that must stay visible.
+ *  MP-253: while the session is pending, permission is unknown, not denied — the same rule
+ *  Gate applies. Rendering the control live would risk a stale-role grant; rendering the
+ *  "Requires X" denial would assert a permission gap that might not be real. So it dims the
+ *  control (never `can()`), with a title that says the state is unverified rather than
+ *  claiming a specific permission is missing. */
 declare function PermissionHint({ perm, children }: {
     perm: string | string[];
     children?: React.ReactNode;

package/dist/index.d.ts

@@ -316,7 +316,11 @@ interface CollapsibleProps {
 }
 declare function Collapsible({ title, subtitle, badge, icon, defaultOpen, open, onToggle, children, className, ...rest }: CollapsibleProps): React.JSX.Element;
 
-/** A right-side panel for detail and editing without losing the list behind it. */
+/** A right-side panel for detail and editing without losing the list behind it.
+ *  MP-248: always modal (declares `aria-modal="true"`), so it traps Tab/Shift+Tab inside
+ *  itself and returns focus to its trigger on close, via the design system's shared
+ *  `useFocusTrap` (the same hook Modal uses) — one focus-trap implementation, reused
+ *  rather than hand-rolled a second time. */
 interface DrawerProps {
     open?: boolean;
     title?: React.ReactNode;
@@ -3177,7 +3181,12 @@ interface FeatureGateProps {
 }
 /** Feature gate. ALWAYS silent when off — an unreleased feature should leave no trace. */
 declare function FeatureGate({ flag, fallback, children, onRoadmap, blur, minHeight, label, variant, preview, bypassPerm }: FeatureGateProps): React.ReactNode;
-/** Inline "why is this disabled" affordance for buttons that must stay visible. */
+/** Inline "why is this disabled" affordance for buttons that must stay visible.
+ *  MP-253: while the session is pending, permission is unknown, not denied — the same rule
+ *  Gate applies. Rendering the control live would risk a stale-role grant; rendering the
+ *  "Requires X" denial would assert a permission gap that might not be real. So it dims the
+ *  control (never `can()`), with a title that says the state is unverified rather than
+ *  claiming a specific permission is missing. */
 declare function PermissionHint({ perm, children }: {
     perm: string | string[];
     children?: React.ReactNode;

package/dist/index.js

@@ -772,54 +772,17 @@ function Collapsible({
 }
 
 // src/components/surfaces/Drawer.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx8, jsxs as jsxs6 } from "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 createPortal2(
-    /* @__PURE__ */ jsxs6(LayerProvider, { zIndex, children: [
-      /* @__PURE__ */ jsx8("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close }),
-      /* @__PURE__ */ jsxs6("aside", { className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, style: { zIndex }, children: [
-        /* @__PURE__ */ jsxs6("div", { className: "fd-card-head", style: { flex: "none" }, children: [
-          /* @__PURE__ */ jsx8("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
-          onClose ? /* @__PURE__ */ jsx8("button", { type: "button", className: "fd-btn-icon", "aria-label": "Close", onClick: close, children: /* @__PURE__ */ jsx8("i", { className: "ph ph-x" }) }) : null
-        ] }),
-        /* @__PURE__ */ jsx8("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children }),
-        footer ? /* @__PURE__ */ jsx8("div", { className: "fd-card-foot", style: { flex: "none" }, children: typeof footer === "function" ? footer(close) : footer }) : null
-      ] })
-    ] }),
-    document.body
-  );
-}
-
-// src/components/surfaces/Modal.tsx
-import * as React7 from "react";
-import { createPortal as createPortal3 } from "react-dom";
 
 // src/kits/useFocusTrap.ts
-import * as React6 from "react";
+import * as React5 from "react";
 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;
@@ -855,7 +818,46 @@ function useFocusTrap(containerRef, active) {
   }, [active, containerRef]);
 }
 
+// src/components/surfaces/Drawer.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "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 createPortal2(
+    /* @__PURE__ */ jsxs6(LayerProvider, { zIndex, children: [
+      /* @__PURE__ */ jsx8("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close }),
+      /* @__PURE__ */ jsxs6("aside", { ref: asideRef, className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, style: { zIndex }, children: [
+        /* @__PURE__ */ jsxs6("div", { className: "fd-card-head", style: { flex: "none" }, children: [
+          /* @__PURE__ */ jsx8("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
+          onClose ? /* @__PURE__ */ jsx8("button", { type: "button", className: "fd-btn-icon", "aria-label": "Close", onClick: close, children: /* @__PURE__ */ jsx8("i", { className: "ph ph-x" }) }) : null
+        ] }),
+        /* @__PURE__ */ jsx8("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children }),
+        footer ? /* @__PURE__ */ jsx8("div", { className: "fd-card-foot", style: { flex: "none" }, children: typeof footer === "function" ? footer(close) : footer }) : null
+      ] })
+    ] }),
+    document.body
+  );
+}
+
 // src/components/surfaces/Modal.tsx
+import * as React7 from "react";
+import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function Modal({ open = true, title, description, onClose, footer, wide = false, children, className = "", ...rest }) {
   const [closing, setClosing] = React7.useState(false);
@@ -7060,14 +7062,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);
@@ -10379,6 +10381,7 @@ function GatePending({ compact: compact3 = false, className = "" }) {
     "div",
     {
       className: ["fd-stack", className].filter(Boolean).join(" "),
+      role: "status",
       style: {
         gap: 10,
         alignItems: "flex-start",
@@ -10428,14 +10431,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__ */ jsx77(
     ComingSoon,
     {
@@ -10455,7 +10458,10 @@ function FeatureGate({
   );
 }
 function PermissionHint({ perm, children }) {
-  const { can: can2 } = useSessionContext();
+  const { can: can2, pending } = useSessionContext();
+  if (pending) {
+    return /* @__PURE__ */ jsx77("span", { title: "Access can't be verified right now", style: { display: "inline-flex", opacity: 0.45, cursor: "not-allowed" }, "aria-disabled": "true", children: /* @__PURE__ */ jsx77("span", { style: { pointerEvents: "none" }, children }) });
+  }
   if (can2(perm)) return children;
   return /* @__PURE__ */ jsx77(
     "span",