@flytedan/flytebot-design-system 0.12.8 → 0.12.10

package/dist/index.cjs

@@ -275,7 +275,7 @@ function IconButton({
   const overflowRow = useOverflowRow();
   const cls = [
     "fd-btn-icon",
-    variant === "outline" ? "fd-btn-icon-outline" : variant === "solid" ? "fd-btn-icon-solid" : "",
+    variant === "outline" ? "fd-btn-icon-outline" : variant === "solid" ? "fd-btn-icon-solid" : variant === "soft" ? "fd-btn-icon-soft" : "",
     tone !== "neutral" ? "is-" + tone : "",
     size === "sm" ? "fd-btn-icon-sm" : size === "lg" ? "fd-btn-icon-lg" : "",
     round ? "fd-btn-icon-round" : "",
@@ -3141,6 +3141,7 @@ function EntityRowMetrics({ metrics, className = "", style }) {
 }
 function EntityRow({
   title,
+  titleIcon,
   meta,
   metrics,
   accessory,
@@ -3158,9 +3159,11 @@ function EntityRow({
       onPointerDown,
       className: ["fd-erow", tone === "danger" ? "fd-erow-danger" : "", className].filter(Boolean).join(" "),
       style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 10,
+        // display/alignItems/gap moved to the .fd-erow stylesheet rule (MP-114
+        // follow-up): an inline style always wins over a stylesheet rule regardless of
+        // specificity or media/container query, which would have made it impossible
+        // for the narrow-container rule below to ever switch this row from a flex row
+        // to a grid (see that rule's own comment for why it needs to).
         height: "100%",
         padding: "0 12px",
         cursor: draggable ? "grab" : void 0,
@@ -3170,10 +3173,20 @@ function EntityRow({
         ...style
       },
       children: [
-        draggable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-dots-six-vertical", "aria-hidden": "true", style: { fontSize: 14, flex: "none", color: "var(--text-muted)" } }) : null,
+        draggable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-dots-six-vertical fd-erow-grip", "aria-hidden": "true", style: { fontSize: 14, flex: "none", color: "var(--text-muted)" } }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "fd-erow-body", children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "fd-erow-titleline", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-title fd-body-sm", children: title }),
+            titleIcon ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Tooltip, { label: titleIcon.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: ["fd-erow-title-icon", titleIcon.tone ? "is-" + titleIcon.tone : ""].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-" + titleIcon.icon, "aria-hidden": "true" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-title fd-body-sm", children: title })
+                ]
+              }
+            ) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-title fd-body-sm", children: title }),
             meta ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-meta", children: meta }) : null
           ] }),
           hasStrip ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "fd-erow-strip", children: [
@@ -3187,7 +3200,7 @@ function EntityRow({
             icon: action.icon,
             label: action.label,
             size: "sm",
-            variant: "solid",
+            variant: action.tone ? "soft" : "solid",
             tone: action.tone === "add" ? "ok" : action.tone === "remove" ? "danger" : "neutral",
             className: "fd-erow-action",
             onClick: action.onClick
@@ -8356,7 +8369,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__ */ (0, import_jsx_runtime66.jsxs)("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, alignItems: "end" }, children: grouped.map((g) => {
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("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__ */ (0, import_jsx_runtime66.jsxs)(
@@ -8364,16 +8377,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__ */ (0, import_jsx_runtime66.jsx)("span", { style: { display: "flex", flexDirection: "column-reverse", gap: 4, minHeight: tallest * 24 }, children: loading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "fd-skel", style: { height: 16, borderRadius: 4 } }, i)) : g.items.map((c) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              "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__ */ (0, import_jsx_runtime66.jsx)("span", { style: { display: "flex", flexDirection: "column-reverse", gap: 4, minHeight: tallest * 24, minWidth: 0 }, children: loading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("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__ */ (0, import_jsx_runtime66.jsx)(
+                "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__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "fd-row", style: { gap: 8, alignItems: "baseline" }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "fd-num-hero", style: { fontSize: 30, color: g.items.length ? "var(--text)" : "var(--text-disabled)" }, children: loading ? "\u2013" : g.items.length }),