@flytedan/flytebot-design-system 0.48.0 → 0.48.1

package/dist/index.d.cts

@@ -294,15 +294,22 @@ interface CardProps {
      *  with no new colour. */
     draft?: boolean;
     /** Renders the card as a real `<a>` (keeps `hoverable`'s lift, adds real
-     *  hover/focus-visible/press states, MP-271). Takes precedence over `onClick`. */
+     *  hover/focus-visible/press states, MP-271). Takes precedence over `onClick`.
+     *  Review (comment 2920, finding 3): when either `href` or `onClick` is set, `action`
+     *  and `footer` are rendered OUTSIDE the `<a>`/`<button>` (as ordinary siblings, via
+     *  `.fd-card-shell`) rather than inside it — an interactive Card can never nest another
+     *  interactive element, whatever `action`/`footer` contain. */
     href?: string;
     /** Renders the card as a real `<button type="button">` when there's no `href`
      *  (MP-271) — never a `<div onClick>`, so it's reachable by Tab and activates on
      *  both Enter and Space for free, and gets the kit's global `:focus-visible`
-     *  ring (styles/foundations.css) without this component drawing its own. */
+     *  ring (styles/foundations.css) without this component drawing its own. Same
+     *  `action`/`footer`-stay-outside rule as `href` above applies here too. */
     onClick?: (e: React.MouseEvent<HTMLElement>) => void;
-    /** Passed through to the root element — CardGrid (MP-271) sets this to
-     *  "listitem" on every card it lays out, unless the caller already chose one. */
+    /** Passed through to the root element. A Card rendered inside CardGrid does NOT need this
+     *  set — CardGrid (MP-271) wraps each item in its own `<div role="listitem">` rather than
+     *  setting `role` on the card itself; set this only when Card is used outside CardGrid and
+     *  needs a specific ARIA role of its own. */
     role?: string;
     tabIndex?: number;
     className?: string;
@@ -391,7 +398,10 @@ declare function ScreenHead({ kicker, title, lede, actions }: ScreenHeadProps):
  * other block box. `--card-grid-min` (default 280px) is the floor a card may shrink to before
  * a track drops; two 280px cards plus the gap don't fit in a 375px-wide content column, so
  * that width is always exactly one column, and a typical ~1280px desktop content column fits
- * four (see CardGrid.browser.test.tsx for the measured counts this rests on).
+ * four (see CardGrid.browser.test.tsx for the measured counts this rests on, including the
+ * container-vs-viewport regression case added under review comment 2920 finding 1: a fixed-
+ * width container nested inside a differently-sized real viewport still shows the container's
+ * own column count, which a `@media` breakpoint on `.fd-card-grid` could never do).
  *
  * Equal-height rows fall out of the grid's own default `align-items: stretch` (restated below
  * for clarity, not because the default would otherwise fail): every item in a row stretches to
@@ -403,12 +413,25 @@ declare function ScreenHead({ kicker, title, lede, actions }: ScreenHeadProps):
  * property `fd-gap-*` already sets on a flex container, so extending that vocabulary to grids
  * costs nothing new and keeps "the medium gap" meaning one token everywhere it's used.
  *
- * List semantics: the grid itself is `role="list"`, and each direct child is cloned with
- * `role="listitem"` added — the caller just renders `<CardGrid><Card .../><Card .../></CardGrid>`
- * and never has to remember the ARIA role itself. A child that already sets its own `role` is
- * left alone (cloning only fills in a role when the child didn't already choose one), so a
- * consumer with an unusual case (e.g. a child that should stay out of the list, such as an
- * inline empty-state message spanning every column) can opt out explicitly.
+ * List semantics (review comment 2920 finding 2): the grid itself is `role="list"`, and every
+ * item WRAPS in a plain `<div role="listitem">`, rather than cloning `role` onto the child's own
+ * props. Wrapping instead of cloning is deliberate: `React.cloneElement` on a child whose type is
+ * `React.Fragment` silently drops an added `role` prop (Fragments only accept `key`/`children`),
+ * so cloning left a Fragment child with NO listitem semantics at all and no warning either. A
+ * wrapper element needs no such prop-cloning heuristic, and it works identically no matter what
+ * the child is — an element, a Fragment, a string, a number — because it never inspects or
+ * touches the child's own props. Two behaviours fall out on top of "wrap by default":
+ *   - Fragments are flattened first (recursively), so `<><Card/><Card/></>` as one CardGrid
+ *     child becomes TWO listitems, not one listitem wrapping a Fragment.
+ *   - A child that already sets its own `role` opts out of being a listitem at all (left
+ *     unwrapped, exactly where React put it) — e.g. an inline empty-state message that should
+ *     span every column rather than sit inside the list structure. This is the one case where
+ *     "leave it alone" (the old cloning behaviour) is still correct, since wrapping it would
+ *     just move the opt-out problem one level down.
+ * The wrapper needs a stylesheet counterpart (`.fd-card-grid > [role="listitem"]`, components.css)
+ * so the wrapper — now the actual grid item — passes the row's stretched height through to its
+ * one real child, the same way `.fd-card`'s own internal flex column already passes extra height
+ * down to `.fd-card-foot`.
  */
 interface CardGridProps {
     children?: React.ReactNode;

package/dist/index.d.ts

@@ -294,15 +294,22 @@ interface CardProps {
      *  with no new colour. */
     draft?: boolean;
     /** Renders the card as a real `<a>` (keeps `hoverable`'s lift, adds real
-     *  hover/focus-visible/press states, MP-271). Takes precedence over `onClick`. */
+     *  hover/focus-visible/press states, MP-271). Takes precedence over `onClick`.
+     *  Review (comment 2920, finding 3): when either `href` or `onClick` is set, `action`
+     *  and `footer` are rendered OUTSIDE the `<a>`/`<button>` (as ordinary siblings, via
+     *  `.fd-card-shell`) rather than inside it — an interactive Card can never nest another
+     *  interactive element, whatever `action`/`footer` contain. */
     href?: string;
     /** Renders the card as a real `<button type="button">` when there's no `href`
      *  (MP-271) — never a `<div onClick>`, so it's reachable by Tab and activates on
      *  both Enter and Space for free, and gets the kit's global `:focus-visible`
-     *  ring (styles/foundations.css) without this component drawing its own. */
+     *  ring (styles/foundations.css) without this component drawing its own. Same
+     *  `action`/`footer`-stay-outside rule as `href` above applies here too. */
     onClick?: (e: React.MouseEvent<HTMLElement>) => void;
-    /** Passed through to the root element — CardGrid (MP-271) sets this to
-     *  "listitem" on every card it lays out, unless the caller already chose one. */
+    /** Passed through to the root element. A Card rendered inside CardGrid does NOT need this
+     *  set — CardGrid (MP-271) wraps each item in its own `<div role="listitem">` rather than
+     *  setting `role` on the card itself; set this only when Card is used outside CardGrid and
+     *  needs a specific ARIA role of its own. */
     role?: string;
     tabIndex?: number;
     className?: string;
@@ -391,7 +398,10 @@ declare function ScreenHead({ kicker, title, lede, actions }: ScreenHeadProps):
  * other block box. `--card-grid-min` (default 280px) is the floor a card may shrink to before
  * a track drops; two 280px cards plus the gap don't fit in a 375px-wide content column, so
  * that width is always exactly one column, and a typical ~1280px desktop content column fits
- * four (see CardGrid.browser.test.tsx for the measured counts this rests on).
+ * four (see CardGrid.browser.test.tsx for the measured counts this rests on, including the
+ * container-vs-viewport regression case added under review comment 2920 finding 1: a fixed-
+ * width container nested inside a differently-sized real viewport still shows the container's
+ * own column count, which a `@media` breakpoint on `.fd-card-grid` could never do).
  *
  * Equal-height rows fall out of the grid's own default `align-items: stretch` (restated below
  * for clarity, not because the default would otherwise fail): every item in a row stretches to
@@ -403,12 +413,25 @@ declare function ScreenHead({ kicker, title, lede, actions }: ScreenHeadProps):
  * property `fd-gap-*` already sets on a flex container, so extending that vocabulary to grids
  * costs nothing new and keeps "the medium gap" meaning one token everywhere it's used.
  *
- * List semantics: the grid itself is `role="list"`, and each direct child is cloned with
- * `role="listitem"` added — the caller just renders `<CardGrid><Card .../><Card .../></CardGrid>`
- * and never has to remember the ARIA role itself. A child that already sets its own `role` is
- * left alone (cloning only fills in a role when the child didn't already choose one), so a
- * consumer with an unusual case (e.g. a child that should stay out of the list, such as an
- * inline empty-state message spanning every column) can opt out explicitly.
+ * List semantics (review comment 2920 finding 2): the grid itself is `role="list"`, and every
+ * item WRAPS in a plain `<div role="listitem">`, rather than cloning `role` onto the child's own
+ * props. Wrapping instead of cloning is deliberate: `React.cloneElement` on a child whose type is
+ * `React.Fragment` silently drops an added `role` prop (Fragments only accept `key`/`children`),
+ * so cloning left a Fragment child with NO listitem semantics at all and no warning either. A
+ * wrapper element needs no such prop-cloning heuristic, and it works identically no matter what
+ * the child is — an element, a Fragment, a string, a number — because it never inspects or
+ * touches the child's own props. Two behaviours fall out on top of "wrap by default":
+ *   - Fragments are flattened first (recursively), so `<><Card/><Card/></>` as one CardGrid
+ *     child becomes TWO listitems, not one listitem wrapping a Fragment.
+ *   - A child that already sets its own `role` opts out of being a listitem at all (left
+ *     unwrapped, exactly where React put it) — e.g. an inline empty-state message that should
+ *     span every column rather than sit inside the list structure. This is the one case where
+ *     "leave it alone" (the old cloning behaviour) is still correct, since wrapping it would
+ *     just move the opt-out problem one level down.
+ * The wrapper needs a stylesheet counterpart (`.fd-card-grid > [role="listitem"]`, components.css)
+ * so the wrapper — now the actual grid item — passes the row's stretched height through to its
+ * one real child, the same way `.fd-card`'s own internal flex column already passes extra height
+ * down to `.fd-card-foot`.
  */
 interface CardGridProps {
     children?: React.ReactNode;

package/dist/index.js

@@ -851,28 +851,28 @@ function Card({
     interactive ? "fd-card-interactive" : "",
     className
   ].filter(Boolean).join(" ");
-  const head = title ? /* @__PURE__ */ jsxs4("div", { className: "fd-card-head", children: [
+  const titleOnlyHead = title ? /* @__PURE__ */ jsxs4("div", { className: "fd-card-head", children: [
     /* @__PURE__ */ jsx7("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
-    action
+    !interactive && action
   ] }) : null;
   const body = padded ? /* @__PURE__ */ jsx7("div", { className: "fd-card-body", children }) : children;
   const foot = footer ? /* @__PURE__ */ jsx7("div", { className: "fd-card-foot", children: footer }) : null;
-  if (href != null) {
-    return /* @__PURE__ */ jsxs4("a", { href, onClick, className: cls, role, tabIndex, ...rest, children: [
-      head,
-      body,
-      foot
+  if (interactive) {
+    const inner = href != null ? /* @__PURE__ */ jsxs4("a", { href, onClick, className: cls, role, tabIndex, ...rest, children: [
+      titleOnlyHead,
+      body
+    ] }) : /* @__PURE__ */ jsxs4("button", { type: "button", onClick, className: cls, role, tabIndex, ...rest, children: [
+      titleOnlyHead,
+      body
     ] });
-  }
-  if (onClick != null) {
-    return /* @__PURE__ */ jsxs4("button", { type: "button", onClick, className: cls, role, tabIndex, ...rest, children: [
-      head,
-      body,
+    return /* @__PURE__ */ jsxs4("div", { className: "fd-card-shell", children: [
+      inner,
+      action ? /* @__PURE__ */ jsx7("div", { className: "fd-card-shell-action", children: action }) : null,
       foot
     ] });
   }
   return /* @__PURE__ */ jsxs4("div", { className: cls, role, tabIndex, ...rest, children: [
-    head,
+    titleOnlyHead,
     body,
     foot
   ] });
@@ -1046,8 +1046,21 @@ function ScreenHead({ kicker, title, lede, actions }) {
 // src/components/layout/CardGrid.tsx
 import * as React8 from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
+function flattenFragments(children) {
+  const out = [];
+  React8.Children.forEach(children, (child) => {
+    if (child === null || child === void 0 || typeof child === "boolean") return;
+    if (React8.isValidElement(child) && child.type === React8.Fragment) {
+      const fragmentChildren = child.props.children;
+      out.push(...flattenFragments(fragmentChildren));
+      return;
+    }
+    out.push(child);
+  });
+  return out;
+}
 function CardGrid({ children, minCardWidth = 280, gap = "lg", className = "", style }) {
-  const items = React8.Children.toArray(children);
+  const items = flattenFragments(children);
   return /* @__PURE__ */ jsx12(
     "div",
     {
@@ -1055,10 +1068,12 @@ function CardGrid({ children, minCardWidth = 280, gap = "lg", className = "", st
       className: ["fd-card-grid", "fd-gap-" + gap, className].filter(Boolean).join(" "),
       style: { ["--card-grid-min"]: minCardWidth + "px", ...style },
       children: items.map((child, i) => {
-        if (!React8.isValidElement(child)) return child;
-        const existingProps = child.props;
-        if (existingProps.role) return child;
-        return React8.cloneElement(child, { role: "listitem", key: child.key ?? i });
+        if (React8.isValidElement(child)) {
+          const existingRole = child.props.role;
+          if (existingRole) return child;
+          return /* @__PURE__ */ jsx12("div", { role: "listitem", children: child }, child.key ?? i);
+        }
+        return /* @__PURE__ */ jsx12("div", { role: "listitem", children: child }, i);
       })
     }
   );
@@ -1330,7 +1345,7 @@ var SidebarNav = React11.forwardRef(function SidebarNav2({ brand, groups = [], c
 
 // src/components/navigation/Topbar.tsx
 import * as React12 from "react";
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function useIsNarrow(breakpoint) {
   const [narrow, setNarrow] = React12.useState(
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches
@@ -1379,7 +1394,7 @@ function Topbar({
         }
       )
     ] }, i)) }),
-    overflowActions != null ? narrow ? /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    overflowActions != null ? narrow ? /* @__PURE__ */ jsxs14(Fragment4, { children: [
       /* @__PURE__ */ jsx20(
         "button",
         {
@@ -1689,12 +1704,12 @@ function EmptyState({ icon = "tray", title, children, action, className = "", ..
 }
 
 // src/components/feedback/Flag.tsx
-import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function Flag({ statement, cost, actions, tone = "warning", className = "", ...rest }) {
   return /* @__PURE__ */ jsxs22("div", { className: ["fd-flag", "fd-flag-" + tone, className].filter(Boolean).join(" "), role: "status", ...rest, children: [
     /* @__PURE__ */ jsxs22("span", { className: "fd-flag-text", children: [
       statement,
-      cost ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
+      cost ? /* @__PURE__ */ jsxs22(Fragment5, { children: [
         " ",
         /* @__PURE__ */ jsx28("span", { className: "fd-flag-cost", children: cost })
       ] }) : null
@@ -1921,7 +1936,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
 
 // src/components/data/AnimNum.tsx
 import * as React15 from "react";
-import { Fragment as Fragment5, jsx as jsx33 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx33 } from "react/jsx-runtime";
 function shouldSkipEasing() {
   if (typeof document !== "undefined" && document.hidden) return true;
   return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
@@ -1953,7 +1968,7 @@ function AnimNum({ value, format, duration = 550 }) {
       setDisplay(to);
     };
   }, [value, duration]);
-  return /* @__PURE__ */ jsx33(Fragment5, { children: format ? format(display) : Math.round(display).toLocaleString() });
+  return /* @__PURE__ */ jsx33(Fragment6, { children: format ? format(display) : Math.round(display).toLocaleString() });
 }
 
 // src/components/data/TrendChart.tsx
@@ -4436,7 +4451,7 @@ function StatTile({ label, value, sub, delta, invert = false, loading = false, c
 
 // src/components/data/CodeBlock.tsx
 import * as React27 from "react";
-import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx49, jsxs as jsxs41 } 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: [
@@ -4592,7 +4607,7 @@ function tokenize(src, lang) {
 }
 function Highlighted({ code, lang }) {
   const toks = React27.useMemo(() => tokenize(code, lang), [code, lang]);
-  return /* @__PURE__ */ jsx49(Fragment6, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ jsx49("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
+  return /* @__PURE__ */ jsx49(Fragment7, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ jsx49("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
 }
 function useCopy() {
   const [done, setDone] = React27.useState(false);
@@ -4956,7 +4971,7 @@ function Meter({ segments = [], unallocated = 0, height = 8, label, legend = fal
 }
 
 // src/components/data/Pagination.tsx
-import { Fragment as Fragment8, jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
 var unitPluralRules = new Intl.PluralRules("en-US");
 function pluralizeUnit(n, singular, irregularPlural) {
   return unitPluralRules.select(n) === "one" ? singular : irregularPlural ?? `${singular}s`;
@@ -4988,10 +5003,10 @@ function Pagination({
     else if (nums[nums.length - 1] !== "\u2026") nums.push("\u2026");
   }
   return /* @__PURE__ */ jsxs44("div", { className: ["fd-pag", className].filter(Boolean).join(" "), ...rest, children: [
-    /* @__PURE__ */ jsx52("span", { className: "fd-pag-count", children: loading ? /* @__PURE__ */ jsx52("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 12, width: 108 } }) : total === 0 ? /* @__PURE__ */ jsxs44(Fragment8, { children: [
+    /* @__PURE__ */ jsx52("span", { className: "fd-pag-count", children: loading ? /* @__PURE__ */ jsx52("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 12, width: 108 } }) : total === 0 ? /* @__PURE__ */ jsxs44(Fragment9, { children: [
       "No ",
       unitLabel
-    ] }) : /* @__PURE__ */ jsxs44(Fragment8, { children: [
+    ] }) : /* @__PURE__ */ jsxs44(Fragment9, { children: [
       /* @__PURE__ */ jsxs44("strong", { children: [
         from.toLocaleString(),
         "\u2013",
@@ -7256,7 +7271,7 @@ function useSessionContext() {
 }
 
 // src/components/platform/AccountMenu.tsx
-import { Fragment as Fragment15, jsx as jsx72, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx72, jsxs as jsxs63 } from "react/jsx-runtime";
 var DEFAULT_LINKS = [];
 var DEFAULT_GROUPS = [];
 function Item({ item, onPick }) {
@@ -7318,7 +7333,7 @@ function AccountMenu({
     }
   };
   const showSwitcher = allowUserSwitch && !!demo;
-  return /* @__PURE__ */ jsxs63(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs63(Fragment16, { children: [
     /* @__PURE__ */ jsxs63(
       "button",
       {
@@ -8076,7 +8091,7 @@ function ProfilePage({
 
 // src/components/platform/SignInPage.tsx
 import * as React50 from "react";
-import { Fragment as Fragment18, jsx as jsx77, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx77, jsxs as jsxs68 } from "react/jsx-runtime";
 function SignInPage({ productName, onSignIn, continueAs, error }) {
   const [signingIn, setSigningIn] = React50.useState(false);
   const [resuming, setResuming] = React50.useState(false);
@@ -8164,7 +8179,7 @@ function SignInPage({ productName, onSignIn, continueAs, error }) {
                             /* @__PURE__ */ jsx77("p", { className: "fd-body-sm fd-muted", style: { marginTop: "var(--s-4)" }, children: continueAs ? "Your session timed out, but you're likely still signed in" : "Sign in with your flytedesk workspace account" })
                           ] }),
                           error ? /* @__PURE__ */ jsx77("div", { role: "alert", style: { width: "100%" }, children: /* @__PURE__ */ jsx77(Banner, { tone: "danger", title: error }) }) : null,
-                          continueAs ? /* @__PURE__ */ jsxs68(Fragment18, { children: [
+                          continueAs ? /* @__PURE__ */ jsxs68(Fragment19, { children: [
                             /* @__PURE__ */ jsx77(
                               Button,
                               {
@@ -10281,7 +10296,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 // src/components/platform/ComingSoon.tsx
 import * as React54 from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment20, jsx as jsx79, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx79, jsxs as jsxs70 } from "react/jsx-runtime";
 var BYPASS_STORE = "fd.soon.bypass.v1";
 function readBypassed() {
   try {
@@ -10311,7 +10326,7 @@ function useBypass(key) {
   return [on, set];
 }
 function SoonCard({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass }) {
-  return /* @__PURE__ */ jsxs70(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs70(Fragment21, { children: [
     /* @__PURE__ */ jsxs70("span", { className: "fd-soon-badge", children: [
       /* @__PURE__ */ jsx79("i", { className: "ph ph-traffic-cone", "aria-hidden": "true" }),
       label
@@ -10698,7 +10713,7 @@ function PermissionHint({ perm, children }) {
 }
 
 // src/components/platform/ModeSwitch.tsx
-import { Fragment as Fragment21, jsx as jsx81, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx81, jsxs as jsxs72 } from "react/jsx-runtime";
 function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog, onOpenSpec, summary }) {
   const mode2 = useRuntimeMode();
   const panel = useInlinePanel();
@@ -10753,7 +10768,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
             s.total,
             " features complete"
           ] }),
-          onOpenSpec ? /* @__PURE__ */ jsxs72(Fragment21, { children: [
+          onOpenSpec ? /* @__PURE__ */ jsxs72(Fragment22, { children: [
             /* @__PURE__ */ jsx81("span", { style: { flex: 1 } }),
             /* @__PURE__ */ jsxs72("button", { type: "button", className: "fd-soon-link", onClick: () => {
               setOpen(false);
@@ -10945,7 +10960,7 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
 
 // src/components/planner/MixGap.tsx
 import * as React55 from "react";
-import { Fragment as Fragment22, jsx as jsx84, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx84, jsxs as jsxs75 } from "react/jsx-runtime";
 var MIX_GAP_LAYOUT = {
   trackHeight: 30,
   barHeight: 20,
@@ -10989,7 +11004,7 @@ function MixGap({ rows = [], loading = false, className = "" }) {
           onMouseLeave: () => setHover(null),
           children: [
             /* @__PURE__ */ jsx84("span", { style: { width: 128, flex: "none" }, children: /* @__PURE__ */ jsx84(ChannelTag, { channel: r.channel, size: "sm" }) }),
-            /* @__PURE__ */ jsx84("span", { style: { position: "relative", flex: 1, height: trackHeight, minWidth: 120 }, children: loading ? /* @__PURE__ */ jsx84("span", { className: "fd-skel", style: { position: "absolute", left: 0, right: 0, top: barTop, height: barHeight, borderRadius: 3 } }) : /* @__PURE__ */ jsxs75(Fragment22, { children: [
+            /* @__PURE__ */ jsx84("span", { style: { position: "relative", flex: 1, height: trackHeight, minWidth: 120 }, children: loading ? /* @__PURE__ */ jsx84("span", { className: "fd-skel", style: { position: "absolute", left: 0, right: 0, top: barTop, height: barHeight, borderRadius: 3 } }) : /* @__PURE__ */ jsxs75(Fragment23, { children: [
               /* @__PURE__ */ jsx84("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__ */ jsx84("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__ */ jsxs75("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: [
@@ -11103,7 +11118,7 @@ function ChannelContribution({
 
 // src/components/planner/BudgetReallocator.tsx
 import * as React56 from "react";
-import { Fragment as Fragment23, jsx as jsx86, jsxs as jsxs77 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx86, jsxs as jsxs77 } from "react/jsx-runtime";
 var bandFor = (crp) => crp >= 200 ? "dominant" : crp >= 100 ? "strong" : crp >= 50 ? "adequate" : "weak";
 function BudgetReallocator({
   campus,
@@ -11167,7 +11182,7 @@ function BudgetReallocator({
         /* @__PURE__ */ jsxs77("div", { className: "fd-row", style: { gap: 12, flexWrap: "wrap" }, children: [
           /* @__PURE__ */ jsx86("span", { className: "fd-h4", style: { flex: 1, minWidth: 140 }, children: campus }),
           /* @__PURE__ */ jsx86(CsiBadge, { band: nowBand, crp, size: "medium" }),
-          dirty ? /* @__PURE__ */ jsxs77(Fragment23, { children: [
+          dirty ? /* @__PURE__ */ jsxs77(Fragment24, { children: [
             /* @__PURE__ */ jsx86("i", { className: "ph ph-arrow-right fd-muted", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx86(CsiBadge, { band: nextBand, crp: nextCrp, size: "medium", preview: true })
           ] }) : null
@@ -13122,7 +13137,7 @@ function FileViewer({ file, resolveUrl, sidePanel, sidePanelLabel = "Details", o
 
 // src/components/files/FileBrowser.tsx
 import * as React65 from "react";
-import { Fragment as Fragment27, jsx as jsx96, jsxs as jsxs87 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx96, jsxs as jsxs87 } from "react/jsx-runtime";
 function childrenOf(folders, parentId) {
   return folders.filter((f) => f.parentId === parentId).sort((a, b) => a.name.localeCompare(b.name));
 }
@@ -13421,7 +13436,7 @@ function FileBrowser({
       ] }),
       /* @__PURE__ */ jsxs87("span", { className: "fd-fb-actions", children: [
         canCreateFolder ? /* @__PURE__ */ jsx96(Button, { variant: "secondary", size: "sm", icon: "folder-simple-plus", onClick: openCreate, children: "New folder" }) : null,
-        canUpload ? /* @__PURE__ */ jsxs87(Fragment27, { children: [
+        canUpload ? /* @__PURE__ */ jsxs87(Fragment28, { children: [
           /* @__PURE__ */ jsx96(Button, { variant: "secondary", size: "sm", icon: "upload-simple", onClick: () => uploadInputRef.current && uploadInputRef.current.click(), children: "Upload" }),
           /* @__PURE__ */ jsx96(
             "input",
@@ -13488,7 +13503,7 @@ function FileBrowser({
                 draggableId: canMove ? { kind: "folder", id: f.id } : void 0,
                 isDropTarget: canMove,
                 onDropPayload: (p) => moveIntoFolder(p, f.id),
-                actions: /* @__PURE__ */ jsxs87(Fragment27, { children: [
+                actions: /* @__PURE__ */ jsxs87(Fragment28, { children: [
                   canRenameFolder ? /* @__PURE__ */ jsx96(IconButton, { icon: "pencil-simple", label: "Rename " + f.name, size: "sm", variant: "ghost", onClick: () => openRename(f) }) : null,
                   canMove ? /* @__PURE__ */ jsx96(
                     FolderPickerMenu,
@@ -13511,7 +13526,7 @@ function FileBrowser({
                 meta: file.size ? formatBytes(file.size) : void 0,
                 onOpen: onOpenFile ? () => onOpenFile(file) : void 0,
                 draggableId: canMove ? { kind: "file", id: file.id } : void 0,
-                actions: /* @__PURE__ */ jsxs87(Fragment27, { children: [
+                actions: /* @__PURE__ */ jsxs87(Fragment28, { children: [
                   canMove ? /* @__PURE__ */ jsx96(
                     FolderPickerMenu,
                     {
@@ -13529,7 +13544,7 @@ function FileBrowser({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx96(Modal, { open: createOpen, title: "New folder", onClose: () => setCreateOpen(false), footer: /* @__PURE__ */ jsxs87(Fragment27, { children: [
+    /* @__PURE__ */ jsx96(Modal, { open: createOpen, title: "New folder", onClose: () => setCreateOpen(false), footer: /* @__PURE__ */ jsxs87(Fragment28, { children: [
       /* @__PURE__ */ jsx96(Button, { variant: "secondary", onClick: () => setCreateOpen(false), children: "Cancel" }),
       /* @__PURE__ */ jsx96(Button, { onClick: submitCreate, disabled: !createName.trim(), children: "Create" })
     ] }), children: /* @__PURE__ */ jsx96(
@@ -13546,7 +13561,7 @@ function FileBrowser({
         autoFocus: true
       }
     ) }),
-    /* @__PURE__ */ jsx96(Modal, { open: renameTarget != null, title: "Rename folder", onClose: () => setRenameTarget(null), footer: /* @__PURE__ */ jsxs87(Fragment27, { children: [
+    /* @__PURE__ */ jsx96(Modal, { open: renameTarget != null, title: "Rename folder", onClose: () => setRenameTarget(null), footer: /* @__PURE__ */ jsxs87(Fragment28, { children: [
       /* @__PURE__ */ jsx96(Button, { variant: "secondary", onClick: () => setRenameTarget(null), children: "Cancel" }),
       /* @__PURE__ */ jsx96(Button, { onClick: submitRename, disabled: !renameValue.trim(), children: "Save" })
     ] }), children: /* @__PURE__ */ jsx96(
@@ -13570,7 +13585,7 @@ function FileBrowser({
         title: deleteTarget ? "Delete \u201C" + deleteTarget.name + "\u201D?" : "Delete folder?",
         description: "This can't be undone. The folder must be empty.",
         onClose: () => setDeleteTarget(null),
-        footer: /* @__PURE__ */ jsxs87(Fragment27, { children: [
+        footer: /* @__PURE__ */ jsxs87(Fragment28, { children: [
           /* @__PURE__ */ jsx96(Button, { variant: "secondary", onClick: () => setDeleteTarget(null), children: "Cancel" }),
           /* @__PURE__ */ jsx96(Button, { variant: "danger", onClick: confirmDelete, children: "Delete" })
         ] })