@flytedan/flytebot-design-system 0.12.8 → 0.12.10

package/dist/index.d.cts

@@ -31,12 +31,16 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     size?: "sm" | "md" | "lg";
     /** "ghost" and "outline" are quiet: no fill, the glyph carries the tone. "solid" is a
      *  filled button in the tone's colour — for the one action on a surface that has to be
-     *  found at a glance, like the add/remove button on every row of a transfer list. */
-    variant?: "ghost" | "outline" | "solid";
-    /** What the action does. On "solid" it picks the fill; on "ghost"/"outline" it tints the
-     *  glyph. "neutral" is the default look of each variant, which for "solid" is the brand
-     *  fill. Every tone has hover, pressed and focus states and is legible in both themes —
-     *  the fills are the --btn-solid-* tokens, measured against light and dark grounds. */
+     *  found at a glance, like the add/remove button on every row of a transfer list. "soft"
+     *  is the same idea with a lighter, less saturated fill and a visibly darker border
+     *  drawn around it, for a caller that wants the button to read as a button without the
+     *  full-saturation "solid" look — only "ok" and "danger" tones are defined for it. */
+    variant?: "ghost" | "outline" | "solid" | "soft";
+    /** What the action does. On "solid"/"soft" it picks the fill; on "ghost"/"outline" it
+     *  tints the glyph. "neutral" is the default look of each variant, which for "solid" is
+     *  the brand fill ("soft" has no neutral fill — pass "ok" or "danger"). Every tone has
+     *  hover, pressed and focus states and is legible in both themes — the fills are the
+     *  --btn-solid-* / --btn-soft-* tokens, measured against light and dark grounds. */
     tone?: "neutral" | "ok" | "danger";
     round?: boolean;
     disabled?: boolean;
@@ -1346,10 +1350,11 @@ interface EntityRowAction {
     label: string;
     onClick: () => void;
     /** Picks the fill — "add" is the constructive (ok) fill, "remove" the destructive
-     *  (danger) fill, and no tone the brand fill. The button is always a filled
-     *  IconButton (variant "solid"): it is the one action on the row, repeated down a long
-     *  list, and has to be findable at a glance on a default card and on a danger-toned one
-     *  alike. No effect on layout, so a caller can still pass any icon. */
+     *  (danger) fill, and no tone the brand fill. The button is always a filled IconButton
+     *  (variant "soft": a lighter fill with a darker border, MP-52): it is the one action on
+     *  the row, repeated down a long list, and has to be findable at a glance on a default
+     *  card and on a danger-toned one alike. No effect on layout, so a caller can still pass
+     *  any icon. */
     tone?: "add" | "remove";
 }
 /** Width in px a metric cell takes when it doesn't ask for its own. Wide enough for a
@@ -1390,8 +1395,23 @@ interface EntityRowMetric {
  * as the drag ghost) hands one of these around whole, so a prop added here can't be
  * silently dropped by the second render site the way individually-spread props were.
  */
+/** An icon shown before the row's title, itself the Tooltip trigger together with the
+ *  title text (MP-52: "hovering EITHER the icon or the name" opens the same explanation —
+ *  one hoverable/focusable region rather than two separate targets that could disagree). */
+interface EntityRowTitleIcon {
+    /** Phosphor icon name, e.g. "warning". */
+    icon: string;
+    tone?: "danger";
+    /** The long-form explanation, shown in the kit's Tooltip on hover, keyboard focus and
+     *  tap — never a native `title`, so it is never truncated to a browser tooltip. */
+    tooltip: React.ReactNode;
+}
 interface EntityRowContent {
     title: string;
+    /** Renders before `title`, wrapped with it in the kit Tooltip. Drive this from the
+     *  row's own existing state (e.g. the same signal that sets `tone: "danger"`) — it is
+     *  not a second source of truth, just a second thing that one signal explains. */
+    titleIcon?: EntityRowTitleIcon;
     /** A secondary line — a count, a subtitle, whatever the caller's data has that a raw
      *  title doesn't. Optional because plenty of rows are fine with just a name. Sits
      *  inline after the title; for numbers that must line up row-to-row use `metrics`. */
@@ -1470,7 +1490,7 @@ declare function EntityRowMetrics({ metrics, className, style }: EntityRowMetric
  * same move — pointer-only and keyboard users get an equally real affordance, not a
  * degraded fallback.
  */
-declare function EntityRow({ title, meta, metrics, accessory, tone, action, draggable, onPointerDown, style, className, }: EntityRowProps): React.JSX.Element;
+declare function EntityRow({ title, titleIcon, meta, metrics, accessory, tone, action, draggable, onPointerDown, style, className, }: EntityRowProps): React.JSX.Element;
 
 type TransferListSide = "left" | "right";
 interface TransferListSideProps<T> {

package/dist/index.d.ts

@@ -31,12 +31,16 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     size?: "sm" | "md" | "lg";
     /** "ghost" and "outline" are quiet: no fill, the glyph carries the tone. "solid" is a
      *  filled button in the tone's colour — for the one action on a surface that has to be
-     *  found at a glance, like the add/remove button on every row of a transfer list. */
-    variant?: "ghost" | "outline" | "solid";
-    /** What the action does. On "solid" it picks the fill; on "ghost"/"outline" it tints the
-     *  glyph. "neutral" is the default look of each variant, which for "solid" is the brand
-     *  fill. Every tone has hover, pressed and focus states and is legible in both themes —
-     *  the fills are the --btn-solid-* tokens, measured against light and dark grounds. */
+     *  found at a glance, like the add/remove button on every row of a transfer list. "soft"
+     *  is the same idea with a lighter, less saturated fill and a visibly darker border
+     *  drawn around it, for a caller that wants the button to read as a button without the
+     *  full-saturation "solid" look — only "ok" and "danger" tones are defined for it. */
+    variant?: "ghost" | "outline" | "solid" | "soft";
+    /** What the action does. On "solid"/"soft" it picks the fill; on "ghost"/"outline" it
+     *  tints the glyph. "neutral" is the default look of each variant, which for "solid" is
+     *  the brand fill ("soft" has no neutral fill — pass "ok" or "danger"). Every tone has
+     *  hover, pressed and focus states and is legible in both themes — the fills are the
+     *  --btn-solid-* / --btn-soft-* tokens, measured against light and dark grounds. */
     tone?: "neutral" | "ok" | "danger";
     round?: boolean;
     disabled?: boolean;
@@ -1346,10 +1350,11 @@ interface EntityRowAction {
     label: string;
     onClick: () => void;
     /** Picks the fill — "add" is the constructive (ok) fill, "remove" the destructive
-     *  (danger) fill, and no tone the brand fill. The button is always a filled
-     *  IconButton (variant "solid"): it is the one action on the row, repeated down a long
-     *  list, and has to be findable at a glance on a default card and on a danger-toned one
-     *  alike. No effect on layout, so a caller can still pass any icon. */
+     *  (danger) fill, and no tone the brand fill. The button is always a filled IconButton
+     *  (variant "soft": a lighter fill with a darker border, MP-52): it is the one action on
+     *  the row, repeated down a long list, and has to be findable at a glance on a default
+     *  card and on a danger-toned one alike. No effect on layout, so a caller can still pass
+     *  any icon. */
     tone?: "add" | "remove";
 }
 /** Width in px a metric cell takes when it doesn't ask for its own. Wide enough for a
@@ -1390,8 +1395,23 @@ interface EntityRowMetric {
  * as the drag ghost) hands one of these around whole, so a prop added here can't be
  * silently dropped by the second render site the way individually-spread props were.
  */
+/** An icon shown before the row's title, itself the Tooltip trigger together with the
+ *  title text (MP-52: "hovering EITHER the icon or the name" opens the same explanation —
+ *  one hoverable/focusable region rather than two separate targets that could disagree). */
+interface EntityRowTitleIcon {
+    /** Phosphor icon name, e.g. "warning". */
+    icon: string;
+    tone?: "danger";
+    /** The long-form explanation, shown in the kit's Tooltip on hover, keyboard focus and
+     *  tap — never a native `title`, so it is never truncated to a browser tooltip. */
+    tooltip: React.ReactNode;
+}
 interface EntityRowContent {
     title: string;
+    /** Renders before `title`, wrapped with it in the kit Tooltip. Drive this from the
+     *  row's own existing state (e.g. the same signal that sets `tone: "danger"`) — it is
+     *  not a second source of truth, just a second thing that one signal explains. */
+    titleIcon?: EntityRowTitleIcon;
     /** A secondary line — a count, a subtitle, whatever the caller's data has that a raw
      *  title doesn't. Optional because plenty of rows are fine with just a name. Sits
      *  inline after the title; for numbers that must line up row-to-row use `metrics`. */
@@ -1470,7 +1490,7 @@ declare function EntityRowMetrics({ metrics, className, style }: EntityRowMetric
  * same move — pointer-only and keyboard users get an equally real affordance, not a
  * degraded fallback.
  */
-declare function EntityRow({ title, meta, metrics, accessory, tone, action, draggable, onPointerDown, style, className, }: EntityRowProps): React.JSX.Element;
+declare function EntityRow({ title, titleIcon, meta, metrics, accessory, tone, action, draggable, onPointerDown, style, className, }: EntityRowProps): React.JSX.Element;
 
 type TransferListSide = "left" | "right";
 interface TransferListSideProps<T> {

package/dist/index.js

@@ -71,7 +71,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" : "",
@@ -2937,6 +2937,7 @@ function EntityRowMetrics({ metrics, className = "", style }) {
 }
 function EntityRow({
   title,
+  titleIcon,
   meta,
   metrics,
   accessory,
@@ -2954,9 +2955,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,
@@ -2966,10 +2969,20 @@ function EntityRow({
         ...style
       },
       children: [
-        draggable ? /* @__PURE__ */ jsx39("i", { className: "ph ph-dots-six-vertical", "aria-hidden": "true", style: { fontSize: 14, flex: "none", color: "var(--text-muted)" } }) : null,
+        draggable ? /* @__PURE__ */ jsx39("i", { className: "ph ph-dots-six-vertical fd-erow-grip", "aria-hidden": "true", style: { fontSize: 14, flex: "none", color: "var(--text-muted)" } }) : null,
         /* @__PURE__ */ jsxs36("span", { className: "fd-erow-body", children: [
           /* @__PURE__ */ jsxs36("span", { className: "fd-erow-titleline", children: [
-            /* @__PURE__ */ jsx39("span", { className: "fd-erow-title fd-body-sm", children: title }),
+            titleIcon ? /* @__PURE__ */ jsx39(Tooltip, { label: titleIcon.tooltip, children: /* @__PURE__ */ jsxs36(
+              "button",
+              {
+                type: "button",
+                className: ["fd-erow-title-icon", titleIcon.tone ? "is-" + titleIcon.tone : ""].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ jsx39("i", { className: "ph ph-" + titleIcon.icon, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx39("span", { className: "fd-erow-title fd-body-sm", children: title })
+                ]
+              }
+            ) }) : /* @__PURE__ */ jsx39("span", { className: "fd-erow-title fd-body-sm", children: title }),
             meta ? /* @__PURE__ */ jsx39("span", { className: "fd-erow-meta", children: meta }) : null
           ] }),
           hasStrip ? /* @__PURE__ */ jsxs36("span", { className: "fd-erow-strip", children: [
@@ -2983,7 +2996,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
@@ -8152,7 +8165,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(
@@ -8160,16 +8173,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 }),