@flytedan/flytebot-design-system 0.65.0 → 0.66.0

package/dist/index.d.cts

@@ -1521,8 +1521,9 @@ declare function StatGrid({ columns, className, children, ...rest }: StatGridPro
 
 /**
  * A flat figure tile — no shadow, no background color, never more than four in a row.
+ * Given `onPress` it becomes a button that can filter a list (MP-311).
  */
-interface StatTileProps extends React.HTMLAttributes<HTMLDivElement> {
+interface StatTileBaseProps {
     label: string;
     value?: React.ReactNode;
     sub?: React.ReactNode;
@@ -1541,7 +1542,24 @@ interface StatTileProps extends React.HTMLAttributes<HTMLDivElement> {
     compact?: boolean;
     className?: string;
 }
-declare function StatTile({ label, value, sub, delta, invert, loading, compact, className, ...rest }: StatTileProps): React.JSX.Element;
+/** Display mode: a `div`, exactly as before. `pressed` and `disabled` mean nothing without `onPress`. */
+interface StatTileDisplayProps extends StatTileBaseProps, React.HTMLAttributes<HTMLDivElement> {
+    onPress?: undefined;
+    pressed?: never;
+    disabled?: never;
+}
+/** Press mode: the tile is a real `<button>` with an `aria-pressed` state, so a dashboard's tiles
+ *  can filter the list below them. Enter and Space press it (native button behaviour); a pressed
+ *  tile wears the brand border and fill. */
+interface StatTilePressProps extends StatTileBaseProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type" | "disabled" | "value"> {
+    onPress: () => void;
+    /** Whether the list is currently filtered by this tile. Default false. */
+    pressed?: boolean;
+    /** Shown but cannot be pressed (nothing to go to). A `loading` tile is never pressable either. */
+    disabled?: boolean;
+}
+type StatTileProps = StatTileDisplayProps | StatTilePressProps;
+declare function StatTile(props: StatTileProps): React.JSX.Element;
 
 declare function languageLabel(lang?: string): string;
 /** Tokenise source into [{t, c}] where c is a token class or null for plain text. */

package/dist/index.d.ts

@@ -1521,8 +1521,9 @@ declare function StatGrid({ columns, className, children, ...rest }: StatGridPro
 
 /**
  * A flat figure tile — no shadow, no background color, never more than four in a row.
+ * Given `onPress` it becomes a button that can filter a list (MP-311).
  */
-interface StatTileProps extends React.HTMLAttributes<HTMLDivElement> {
+interface StatTileBaseProps {
     label: string;
     value?: React.ReactNode;
     sub?: React.ReactNode;
@@ -1541,7 +1542,24 @@ interface StatTileProps extends React.HTMLAttributes<HTMLDivElement> {
     compact?: boolean;
     className?: string;
 }
-declare function StatTile({ label, value, sub, delta, invert, loading, compact, className, ...rest }: StatTileProps): React.JSX.Element;
+/** Display mode: a `div`, exactly as before. `pressed` and `disabled` mean nothing without `onPress`. */
+interface StatTileDisplayProps extends StatTileBaseProps, React.HTMLAttributes<HTMLDivElement> {
+    onPress?: undefined;
+    pressed?: never;
+    disabled?: never;
+}
+/** Press mode: the tile is a real `<button>` with an `aria-pressed` state, so a dashboard's tiles
+ *  can filter the list below them. Enter and Space press it (native button behaviour); a pressed
+ *  tile wears the brand border and fill. */
+interface StatTilePressProps extends StatTileBaseProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type" | "disabled" | "value"> {
+    onPress: () => void;
+    /** Whether the list is currently filtered by this tile. Default false. */
+    pressed?: boolean;
+    /** Shown but cannot be pressed (nothing to go to). A `loading` tile is never pressable either. */
+    disabled?: boolean;
+}
+type StatTileProps = StatTileDisplayProps | StatTilePressProps;
+declare function StatTile(props: StatTileProps): React.JSX.Element;
 
 declare function languageLabel(lang?: string): string;
 /** Tokenise source into [{t, c}] where c is a token class or null for plain text. */

package/dist/index.js

@@ -4815,18 +4815,19 @@ function StatGrid({ columns, className = "", children, ...rest }) {
 }
 
 // src/components/data/StatTile.tsx
-import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
 function isZeroDelta(delta) {
   if (!delta) return false;
   const match = delta.match(/[\d.]+/);
   return match !== null && parseFloat(match[0]) === 0;
 }
-function StatTile({ label, value, sub, delta, invert = false, loading = false, compact: compact3 = false, className = "", ...rest }) {
+function StatTile(props) {
+  const { label, value, sub, delta, invert = false, loading = false, compact: compact3 = false, className = "", ...rest } = props;
   const isDecrease = delta?.startsWith("-") ?? false;
   const isZero = isZeroDelta(delta);
   const isGood = invert ? isDecrease : !isDecrease;
   const deltaToneClass = isZero ? "fd-stat-delta-neutral" : isGood ? "fd-stat-delta-up" : "fd-stat-delta-down";
-  return /* @__PURE__ */ jsxs42("div", { className: ["fd-stat", compact3 ? "fd-stat-compact" : "", className].filter(Boolean).join(" "), ...rest, children: [
+  const content = /* @__PURE__ */ jsxs42(Fragment8, { children: [
     loading ? /* @__PURE__ */ jsx52("span", { className: "fd-skel fd-skel-text", style: { display: "block", height: compact3 ? 20 : 28, width: "62%" } }) : /* @__PURE__ */ jsxs42("span", { className: "fd-stat-top", children: [
       /* @__PURE__ */ jsx52("span", { className: "fd-stat-figure", children: value }),
       delta ? /* @__PURE__ */ jsxs42("span", { className: "fd-stat-delta " + deltaToneClass, children: [
@@ -4838,6 +4839,12 @@ function StatTile({ label, value, sub, delta, invert = false, loading = false, c
     !loading && sub ? /* @__PURE__ */ jsx52("span", { className: "fd-stat-sub", children: sub }) : null,
     loading ? /* @__PURE__ */ jsx52("span", { className: "fd-skel fd-skel-text", style: { display: "block", height: 10, width: "40%", marginTop: 8 } }) : /* @__PURE__ */ jsx52("span", { className: "fd-stat-label", style: { display: "block" }, children: label })
   ] });
+  const classes = (...extra) => ["fd-stat", ...extra, compact3 ? "fd-stat-compact" : "", className].filter(Boolean).join(" ");
+  if (rest.onPress) {
+    const { onPress, pressed = false, disabled = false, ...buttonRest } = rest;
+    return /* @__PURE__ */ jsx52("button", { type: "button", className: classes("fd-stat-pressable"), "aria-pressed": pressed, disabled: disabled || loading, onClick: onPress, ...buttonRest, children: content });
+  }
+  return /* @__PURE__ */ jsx52("div", { className: classes(), ...rest, children: content });
 }
 
 // src/components/data/CodeBlock.tsx
@@ -4897,7 +4904,7 @@ function useCopyToClipboard() {
 }
 
 // src/components/data/CodeBlock.tsx
-import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx53, jsxs as jsxs43 } 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: [
@@ -5053,7 +5060,7 @@ function tokenize(src, lang) {
 }
 function Highlighted({ code, lang }) {
   const toks = React34.useMemo(() => tokenize(code, lang), [code, lang]);
-  return /* @__PURE__ */ jsx53(Fragment8, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ jsx53("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
+  return /* @__PURE__ */ jsx53(Fragment9, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ jsx53("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
 }
 function CodeBlock({
   code = "",
@@ -5389,7 +5396,7 @@ function Meter({ segments = [], unallocated = 0, height = 8, label, legend = fal
 }
 
 // src/components/data/Pagination.tsx
-import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx56, jsxs as jsxs46 } 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`;
@@ -5421,10 +5428,10 @@ function Pagination({
     else if (nums[nums.length - 1] !== "\u2026") nums.push("\u2026");
   }
   return /* @__PURE__ */ jsxs46("div", { className: ["fd-pag", className].filter(Boolean).join(" "), ...rest, children: [
-    /* @__PURE__ */ jsx56("span", { className: "fd-pag-count", children: loading ? /* @__PURE__ */ jsx56("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 12, width: 108 } }) : total === 0 ? /* @__PURE__ */ jsxs46(Fragment10, { children: [
+    /* @__PURE__ */ jsx56("span", { className: "fd-pag-count", children: loading ? /* @__PURE__ */ jsx56("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 12, width: 108 } }) : total === 0 ? /* @__PURE__ */ jsxs46(Fragment11, { children: [
       "No ",
       unitLabel
-    ] }) : /* @__PURE__ */ jsxs46(Fragment10, { children: [
+    ] }) : /* @__PURE__ */ jsxs46(Fragment11, { children: [
       /* @__PURE__ */ jsxs46("strong", { children: [
         from.toLocaleString(),
         "\u2013",
@@ -5619,7 +5626,7 @@ function InlinePanelSurface({ panel, align = "right", ...popover }) {
 }
 
 // src/components/data/SortMenu.tsx
-import { Fragment as Fragment12, jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
 var directionWord = (field, dir) => dir === "asc" ? field.numeric ? "lowest first" : "A to Z" : field.numeric ? "highest first" : "Z to A";
 function moved(sort, from, to) {
   const next = [...sort];
@@ -5692,7 +5699,7 @@ function SortMenu({
     ] }, f.key);
   });
   const unused = fields.filter((f) => !active.some((entry) => entry.key === f.key));
-  const multipleBody = /* @__PURE__ */ jsxs49(Fragment12, { children: [
+  const multipleBody = /* @__PURE__ */ jsxs49(Fragment13, { children: [
     /* @__PURE__ */ jsx59("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sorted by" }),
     active.length === 0 ? /* @__PURE__ */ jsx59("span", { className: "fd-body-sm fd-muted", style: { padding: "4px 8px" }, children: "Unsorted" }) : /* @__PURE__ */ jsx59("ol", { className: "fd-stack", style: { gap: 2, margin: 0, padding: 0, listStyle: "none" }, "aria-label": "Sort order", children: active.map((entry, index) => {
       const f = fieldOf(entry.key);
@@ -5741,7 +5748,7 @@ function SortMenu({
         )
       ] }, entry.key);
     }) }),
-    unused.length > 0 ? /* @__PURE__ */ jsxs49(Fragment12, { children: [
+    unused.length > 0 ? /* @__PURE__ */ jsxs49(Fragment13, { children: [
       /* @__PURE__ */ jsx59("span", { className: "fd-overline fd-muted", style: { padding: "10px 8px 6px" }, children: "Add a sort" }),
       unused.map((f) => /* @__PURE__ */ jsxs49("span", { className: "fd-row", style: rowStyle(false), children: [
         /* @__PURE__ */ jsx59("span", { className: "fd-body-sm", style: labelStyle(false), children: f.label }),
@@ -5765,7 +5772,7 @@ function SortMenu({
         ]
       }
     ),
-    /* @__PURE__ */ jsx59(InlinePanelSurface, { panel, align, offset: 6, width: multiple ? 340 : 280, label: "Sort by", children: /* @__PURE__ */ jsx59("span", { className: "fd-stack", style: { gap: 2, padding: 8 }, children: multiple ? multipleBody : /* @__PURE__ */ jsxs49(Fragment12, { children: [
+    /* @__PURE__ */ jsx59(InlinePanelSurface, { panel, align, offset: 6, width: multiple ? 340 : 280, label: "Sort by", children: /* @__PURE__ */ jsx59("span", { className: "fd-stack", style: { gap: 2, padding: 8 }, children: multiple ? multipleBody : /* @__PURE__ */ jsxs49(Fragment13, { children: [
       /* @__PURE__ */ jsx59("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sort by" }),
       singleBody
     ] }) }) })
@@ -8233,7 +8240,7 @@ function useSessionContext() {
 }
 
 // src/components/platform/AccountMenu.tsx
-import { Fragment as Fragment18, jsx as jsx79, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx79, jsxs as jsxs68 } from "react/jsx-runtime";
 var DEFAULT_LINKS = [];
 var DEFAULT_GROUPS = [];
 function Item({ item, onPick }) {
@@ -8295,7 +8302,7 @@ function AccountMenu({
     }
   };
   const showSwitcher = allowUserSwitch && !!demo;
-  return /* @__PURE__ */ jsxs68(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs68(Fragment19, { children: [
     /* @__PURE__ */ jsxs68(
       "button",
       {
@@ -9068,7 +9075,7 @@ function ProfilePage({
 
 // src/components/platform/SessionScreen.tsx
 import * as React61 from "react";
-import { Fragment as Fragment21, jsx as jsx85, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx85, jsxs as jsxs73 } from "react/jsx-runtime";
 var COPY = {
   "signing-in": { busy: "Signing you in\u2026" },
   "session-expired": { busy: "Your session expired \u2014 signing you back in\u2026" },
@@ -9096,7 +9103,7 @@ function SessionScreen({ kind, error, onRetry, productName }) {
       /* @__PURE__ */ jsx85("div", { className: "fd-session-screen-stripe" }),
       /* @__PURE__ */ jsx85(Card, { children: /* @__PURE__ */ jsxs73("div", { className: "fd-session-screen-body", children: [
         /* @__PURE__ */ jsx85("h1", { ref: titleRef, tabIndex: -1, className: "fd-h3 fd-session-screen-title", children: productName }),
-        /* @__PURE__ */ jsx85("div", { role: "status", "aria-live": "polite", className: "fd-session-screen-status", children: busyMessage !== null ? /* @__PURE__ */ jsxs73(Fragment21, { children: [
+        /* @__PURE__ */ jsx85("div", { role: "status", "aria-live": "polite", className: "fd-session-screen-status", children: busyMessage !== null ? /* @__PURE__ */ jsxs73(Fragment22, { children: [
           /* @__PURE__ */ jsx85("span", { className: "fd-spinner fd-spinner-lg fd-session-screen-spinner", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx85("p", { className: "fd-body fd-session-screen-message", children: announced })
         ] }) : null }),
@@ -11123,7 +11130,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 // src/components/platform/ComingSoon.tsx
 import * as React65 from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { Fragment as Fragment23, jsx as jsx87, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx87, jsxs as jsxs75 } from "react/jsx-runtime";
 var BYPASS_STORE = "fd.soon.bypass.v1";
 function readBypassed() {
   try {
@@ -11153,7 +11160,7 @@ function useBypass(key) {
   return [on, set];
 }
 function SoonCard({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass }) {
-  return /* @__PURE__ */ jsxs75(Fragment23, { children: [
+  return /* @__PURE__ */ jsxs75(Fragment24, { children: [
     /* @__PURE__ */ jsxs75("span", { className: "fd-soon-badge", children: [
       /* @__PURE__ */ jsx87("i", { className: "ph ph-traffic-cone", "aria-hidden": "true" }),
       label
@@ -11543,7 +11550,7 @@ function PermissionHint({ perm, children }) {
 }
 
 // src/components/platform/ModeSwitch.tsx
-import { Fragment as Fragment24, jsx as jsx89, jsxs as jsxs77 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx89, jsxs as jsxs77 } from "react/jsx-runtime";
 function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog, onOpenSpec, summary }) {
   const mode2 = useRuntimeMode();
   const panel = useInlinePanel();
@@ -11598,7 +11605,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
             s.total,
             " features complete"
           ] }),
-          onOpenSpec ? /* @__PURE__ */ jsxs77(Fragment24, { children: [
+          onOpenSpec ? /* @__PURE__ */ jsxs77(Fragment25, { children: [
             /* @__PURE__ */ jsx89("span", { style: { flex: 1 } }),
             /* @__PURE__ */ jsxs77("button", { type: "button", className: "fd-soon-link", onClick: () => {
               setOpen(false);
@@ -11790,7 +11797,7 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
 
 // src/components/planner/MixGap.tsx
 import * as React66 from "react";
-import { Fragment as Fragment25, jsx as jsx92, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx92, jsxs as jsxs80 } from "react/jsx-runtime";
 var MIX_GAP_LAYOUT = {
   trackHeight: 30,
   barHeight: 20,
@@ -11834,7 +11841,7 @@ function MixGap({ rows = [], loading = false, className = "" }) {
           onMouseLeave: () => setHover(null),
           children: [
             /* @__PURE__ */ jsx92("span", { style: { width: 128, flex: "none" }, children: /* @__PURE__ */ jsx92(ChannelTag, { channel: r.channel, size: "sm" }) }),
-            /* @__PURE__ */ jsx92("span", { style: { position: "relative", flex: 1, height: trackHeight, minWidth: 120 }, children: loading ? /* @__PURE__ */ jsx92("span", { className: "fd-skel", style: { position: "absolute", left: 0, right: 0, top: barTop, height: barHeight, borderRadius: 3 } }) : /* @__PURE__ */ jsxs80(Fragment25, { children: [
+            /* @__PURE__ */ jsx92("span", { style: { position: "relative", flex: 1, height: trackHeight, minWidth: 120 }, children: loading ? /* @__PURE__ */ jsx92("span", { className: "fd-skel", style: { position: "absolute", left: 0, right: 0, top: barTop, height: barHeight, borderRadius: 3 } }) : /* @__PURE__ */ jsxs80(Fragment26, { children: [
               /* @__PURE__ */ jsx92("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__ */ jsx92("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__ */ jsxs80("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: [
@@ -11948,7 +11955,7 @@ function ChannelContribution({
 
 // src/components/planner/BudgetReallocator.tsx
 import * as React67 from "react";
-import { Fragment as Fragment26, jsx as jsx94, jsxs as jsxs82 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx94, jsxs as jsxs82 } from "react/jsx-runtime";
 var bandFor = (crp) => crp >= 200 ? "dominant" : crp >= 100 ? "strong" : crp >= 50 ? "adequate" : "weak";
 function BudgetReallocator({
   campus,
@@ -12012,7 +12019,7 @@ function BudgetReallocator({
         /* @__PURE__ */ jsxs82("div", { className: "fd-row", style: { gap: 12, flexWrap: "wrap" }, children: [
           /* @__PURE__ */ jsx94("span", { className: "fd-h4", style: { flex: 1, minWidth: 140 }, children: campus }),
           /* @__PURE__ */ jsx94(CsiBadge, { band: nowBand, crp, size: "medium" }),
-          dirty ? /* @__PURE__ */ jsxs82(Fragment26, { children: [
+          dirty ? /* @__PURE__ */ jsxs82(Fragment27, { children: [
             /* @__PURE__ */ jsx94("i", { className: "ph ph-arrow-right fd-muted", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx94(CsiBadge, { band: nextBand, crp: nextCrp, size: "medium", preview: true })
           ] }) : null
@@ -13951,7 +13958,7 @@ function FileViewer({ file, resolveUrl, sidePanel, sidePanelLabel = "Details", o
 
 // src/components/files/FileBrowser.tsx
 import * as React76 from "react";
-import { Fragment as Fragment30, jsx as jsx104, jsxs as jsxs92 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx104, jsxs as jsxs92 } from "react/jsx-runtime";
 function childrenOf(folders, parentId) {
   return folders.filter((f) => f.parentId === parentId).sort((a, b) => a.name.localeCompare(b.name));
 }
@@ -14250,7 +14257,7 @@ function FileBrowser({
       ] }),
       /* @__PURE__ */ jsxs92("span", { className: "fd-fb-actions", children: [
         canCreateFolder ? /* @__PURE__ */ jsx104(Button, { variant: "secondary", size: "sm", icon: "folder-simple-plus", onClick: openCreate, children: "New folder" }) : null,
-        canUpload ? /* @__PURE__ */ jsxs92(Fragment30, { children: [
+        canUpload ? /* @__PURE__ */ jsxs92(Fragment31, { children: [
           /* @__PURE__ */ jsx104(Button, { variant: "secondary", size: "sm", icon: "upload-simple", onClick: () => uploadInputRef.current && uploadInputRef.current.click(), children: "Upload" }),
           /* @__PURE__ */ jsx104(
             "input",
@@ -14317,7 +14324,7 @@ function FileBrowser({
                 draggableId: canMove ? { kind: "folder", id: f.id } : void 0,
                 isDropTarget: canMove,
                 onDropPayload: (p) => moveIntoFolder(p, f.id),
-                actions: /* @__PURE__ */ jsxs92(Fragment30, { children: [
+                actions: /* @__PURE__ */ jsxs92(Fragment31, { children: [
                   canRenameFolder ? /* @__PURE__ */ jsx104(IconButton, { icon: "pencil-simple", label: "Rename " + f.name, size: "sm", variant: "ghost", onClick: () => openRename(f) }) : null,
                   canMove ? /* @__PURE__ */ jsx104(
                     FolderPickerMenu,
@@ -14340,7 +14347,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__ */ jsxs92(Fragment30, { children: [
+                actions: /* @__PURE__ */ jsxs92(Fragment31, { children: [
                   canMove ? /* @__PURE__ */ jsx104(
                     FolderPickerMenu,
                     {
@@ -14358,7 +14365,7 @@ function FileBrowser({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx104(Modal, { open: createOpen, title: "New folder", onClose: () => setCreateOpen(false), footer: /* @__PURE__ */ jsxs92(Fragment30, { children: [
+    /* @__PURE__ */ jsx104(Modal, { open: createOpen, title: "New folder", onClose: () => setCreateOpen(false), footer: /* @__PURE__ */ jsxs92(Fragment31, { children: [
       /* @__PURE__ */ jsx104(Button, { variant: "secondary", onClick: () => setCreateOpen(false), children: "Cancel" }),
       /* @__PURE__ */ jsx104(Button, { onClick: submitCreate, disabled: !createName.trim(), children: "Create" })
     ] }), children: /* @__PURE__ */ jsx104(
@@ -14375,7 +14382,7 @@ function FileBrowser({
         autoFocus: true
       }
     ) }),
-    /* @__PURE__ */ jsx104(Modal, { open: renameTarget != null, title: "Rename folder", onClose: () => setRenameTarget(null), footer: /* @__PURE__ */ jsxs92(Fragment30, { children: [
+    /* @__PURE__ */ jsx104(Modal, { open: renameTarget != null, title: "Rename folder", onClose: () => setRenameTarget(null), footer: /* @__PURE__ */ jsxs92(Fragment31, { children: [
       /* @__PURE__ */ jsx104(Button, { variant: "secondary", onClick: () => setRenameTarget(null), children: "Cancel" }),
       /* @__PURE__ */ jsx104(Button, { onClick: submitRename, disabled: !renameValue.trim(), children: "Save" })
     ] }), children: /* @__PURE__ */ jsx104(
@@ -14399,7 +14406,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__ */ jsxs92(Fragment30, { children: [
+        footer: /* @__PURE__ */ jsxs92(Fragment31, { children: [
           /* @__PURE__ */ jsx104(Button, { variant: "secondary", onClick: () => setDeleteTarget(null), children: "Cancel" }),
           /* @__PURE__ */ jsx104(Button, { variant: "danger", onClick: confirmDelete, children: "Delete" })
         ] })