@flytedan/flytebot-design-system 0.12.7 → 0.12.9

package/dist/index.d.cts

@@ -2416,8 +2416,16 @@ interface FeatureGateProps {
     variant?: "block" | "inline";
     /** When false, an incomplete-in-live-mode feature renders `fallback` instead of the ComingSoon banner. Default true. */
     preview?: boolean;
-    /** Permission that lets the viewer bypass the ComingSoon veil and use the feature early. Default "flags.manage". */
-    bypassPerm?: string;
+    /**
+     * Permission that lets the viewer bypass the ComingSoon veil and use the feature early.
+     * Default `"flags.manage"`. Pass `null` to declare the gate NOT bypassable by anyone,
+     * regardless of permissions — the veil still renders, but no "View and use it anyway"
+     * control appears, and a bypass stored from before this call site turned `null` is
+     * ignored rather than honored. Use this for a gate whose content is itself the problem
+     * (e.g. fixture/demo data standing in for another record), where letting even an
+     * administrator click through would show something untrue, not just something unfinished.
+     */
+    bypassPerm?: string | null;
 }
 /** 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;

package/dist/index.d.ts

@@ -2416,8 +2416,16 @@ interface FeatureGateProps {
     variant?: "block" | "inline";
     /** When false, an incomplete-in-live-mode feature renders `fallback` instead of the ComingSoon banner. Default true. */
     preview?: boolean;
-    /** Permission that lets the viewer bypass the ComingSoon veil and use the feature early. Default "flags.manage". */
-    bypassPerm?: string;
+    /**
+     * Permission that lets the viewer bypass the ComingSoon veil and use the feature early.
+     * Default `"flags.manage"`. Pass `null` to declare the gate NOT bypassable by anyone,
+     * regardless of permissions — the veil still renders, but no "View and use it anyway"
+     * control appears, and a bypass stored from before this call site turned `null` is
+     * ignored rather than honored. Use this for a gate whose content is itself the problem
+     * (e.g. fixture/demo data standing in for another record), where letting even an
+     * administrator click through would show something untrue, not just something unfinished.
+     */
+    bypassPerm?: string | null;
 }
 /** 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;

package/dist/index.js

@@ -7910,6 +7910,7 @@ function FeatureGate({
   if (!preview) return fallback;
   const f = SessionKit.findFlag(flag) || {};
   const missing = rt.missing || [];
+  const canBypass = bypassPerm === null ? false : !bypassPerm || SessionKit.can(bypassPerm);
   return /* @__PURE__ */ jsx62(
     ComingSoon,
     {
@@ -7923,7 +7924,7 @@ function FeatureGate({
       minHeight,
       onRoadmap,
       bypassKey: flag,
-      canBypass: !bypassPerm || SessionKit.can(bypassPerm),
+      canBypass,
       children
     }
   );
@@ -8151,7 +8152,7 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
   const tallest = Math.max(1, ...grouped.map((g) => g.items.length));
   const floor = BANDS2.find((b) => b.key === floorBand) || BANDS2[0];
   return /* @__PURE__ */ jsxs61("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 16 }, children: [
-    /* @__PURE__ */ jsx65("div", { style: { display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, alignItems: "end" }, children: grouped.map((g) => {
+    /* @__PURE__ */ jsx65("div", { style: { display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 12, alignItems: "end" }, children: grouped.map((g) => {
       const mark = "var(--csi-" + g.n + "-mark)";
       const active = selectedBand === g.key;
       return /* @__PURE__ */ jsxs61(
@@ -8159,16 +8160,23 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
         {
           type: "button",
           onClick: onSelectBand ? () => onSelectBand(active ? null : g.key) : void 0,
-          style: { display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 10, padding: 12, border: "1px solid " + (active ? "var(--border-strong)" : "var(--border)"), borderRadius: "var(--r-lg)", background: active ? "var(--surface-2)" : "var(--surface)", cursor: onSelectBand ? "pointer" : "default", textAlign: "left", minHeight: 190, transition: "background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)" },
+          style: { display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 10, padding: 12, border: "1px solid " + (active ? "var(--border-strong)" : "var(--border)"), borderRadius: "var(--r-lg)", background: active ? "var(--surface-2)" : "var(--surface)", cursor: onSelectBand ? "pointer" : "default", textAlign: "left", minHeight: 190, minWidth: 0, transition: "background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)" },
           children: [
-            /* @__PURE__ */ jsx65("span", { style: { display: "flex", flexDirection: "column-reverse", gap: 4, minHeight: tallest * 24 }, children: loading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx65("span", { className: "fd-skel", style: { height: 16, borderRadius: 4 } }, i)) : g.items.map((c) => /* @__PURE__ */ jsx65(
-              "span",
-              {
-                title: c.name + " \xB7 " + c.crp,
-                style: { height: 18, borderRadius: 4, background: "var(--csi-" + g.n + "-fill)", border: "1px solid var(--csi-" + g.n + "-edge)", color: "var(--csi-" + g.n + "-text)", display: "flex", alignItems: "center", padding: "0 7px", fontSize: 10, fontWeight: 700, overflow: "hidden", whiteSpace: "nowrap" },
-                children: c.short || c.name
-              },
-              c.name
+            /* @__PURE__ */ jsx65("span", { style: { display: "flex", flexDirection: "column-reverse", gap: 4, minHeight: tallest * 24, minWidth: 0 }, children: loading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx65("span", { className: "fd-skel", style: { height: 16, borderRadius: 4 } }, i)) : g.items.map((c) => (
+              // `overflow: hidden` + `white-space: nowrap` only clips once the span
+              // actually HAS a bounded width to clip against (see the grid/flex
+              // `minWidth: 0` chain above) — `textOverflow: ellipsis` then makes
+              // that clip readable instead of a hard cut mid-letter; the full name
+              // is still one hover away via `title`.
+              /* @__PURE__ */ jsx65(
+                "span",
+                {
+                  title: c.name + " \xB7 " + c.crp,
+                  style: { height: 18, borderRadius: 4, background: "var(--csi-" + g.n + "-fill)", border: "1px solid var(--csi-" + g.n + "-edge)", color: "var(--csi-" + g.n + "-text)", display: "flex", alignItems: "center", padding: "0 7px", fontSize: 10, fontWeight: 700, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" },
+                  children: c.short || c.name
+                },
+                c.name
+              )
             )) }),
             /* @__PURE__ */ jsxs61("span", { className: "fd-row", style: { gap: 8, alignItems: "baseline" }, children: [
               /* @__PURE__ */ jsx65("span", { className: "fd-num-hero", style: { fontSize: 30, color: g.items.length ? "var(--text)" : "var(--text-disabled)" }, children: loading ? "\u2013" : g.items.length }),