@flytedan/flytebot-design-system 0.11.4 → 0.11.6

package/dist/index.d.cts

@@ -1354,8 +1354,9 @@ interface EntityRowMetric {
     icon?: string;
     /** Fixed cell width in px. Same value on the same column of every row is what makes
      *  the strip a real aligned column rather than text that happens to sit near text.
-     *  On a narrow screen (≤768px) cells size to their figure instead, so a phone-width row
-     *  shows every figure rather than clipping whole columns off its end. */
+     *  It is the width a cell takes when the strip has room for every column at its width;
+     *  in a strip too narrow for that, cells shrink toward their own figure first, so a
+     *  narrow row loses alignment before it loses a figure. */
     width?: number;
     tone?: "default" | "muted" | "danger";
 }
@@ -2558,9 +2559,9 @@ declare function SaturationDistribution({ campuses, floorBand, floorScore, onSel
 
 /**
  * Realized media mix against the strategic target, one row per channel.
- * Realized is a solid brand bar, target a neutral tick on the same row, and the
- * gap is labelled directly on the bar — the gap is the story, so it never hides
- * in a legend.
+ * Realized is a solid tone bar, target a striped marker on the same row, and the
+ * realized share is labelled directly beside them — the gap is the story, so it
+ * never hides in a legend.
  */
 interface MixGapRow {
     channel: string;

package/dist/index.d.ts

@@ -1354,8 +1354,9 @@ interface EntityRowMetric {
     icon?: string;
     /** Fixed cell width in px. Same value on the same column of every row is what makes
      *  the strip a real aligned column rather than text that happens to sit near text.
-     *  On a narrow screen (≤768px) cells size to their figure instead, so a phone-width row
-     *  shows every figure rather than clipping whole columns off its end. */
+     *  It is the width a cell takes when the strip has room for every column at its width;
+     *  in a strip too narrow for that, cells shrink toward their own figure first, so a
+     *  narrow row loses alignment before it loses a figure. */
     width?: number;
     tone?: "default" | "muted" | "danger";
 }
@@ -2558,9 +2559,9 @@ declare function SaturationDistribution({ campuses, floorBand, floorScore, onSel
 
 /**
  * Realized media mix against the strategic target, one row per channel.
- * Realized is a solid brand bar, target a neutral tick on the same row, and the
- * gap is labelled directly on the bar — the gap is the story, so it never hides
- * in a legend.
+ * Realized is a solid tone bar, target a striped marker on the same row, and the
+ * realized share is labelled directly beside them — the gap is the story, so it
+ * never hides in a legend.
  */
 interface MixGapRow {
     channel: string;

package/dist/index.js

@@ -2833,16 +2833,13 @@ function EntityRowMetrics({ metrics, className = "", style }) {
   return /* @__PURE__ */ jsx39("span", { className: ["fd-erow-metrics", className].filter(Boolean).join(" "), style, children: metrics.map((m, i) => {
     const key = m.id || m.label || i;
     const className2 = ["fd-erow-metric", m.tone && m.tone !== "default" ? "is-" + m.tone : "", m.tooltip != null ? "is-described" : ""].filter(Boolean).join(" ");
-    const cellStyle = { "--erow-metric-w": (m.width || ENTITY_ROW_METRIC_WIDTH) + "px", color: METRIC_TONE_COLOR[m.tone || "default"] };
+    const tone = { color: METRIC_TONE_COLOR[m.tone || "default"] };
     const content = /* @__PURE__ */ jsxs35(React17.Fragment, { children: [
       m.icon ? /* @__PURE__ */ jsx39("i", { className: "ph ph-" + m.icon, "aria-hidden": "true" }) : null,
       /* @__PURE__ */ jsx39("span", { className: "fd-erow-metric-value fd-tabular", children: m.value }),
       /* @__PURE__ */ jsx39("span", { className: "fd-sr", children: " " + m.label })
     ] });
-    if (m.tooltip == null) {
-      return /* @__PURE__ */ jsx39("span", { className: className2, style: cellStyle, title: m.label, children: content }, key);
-    }
-    return /* @__PURE__ */ jsx39(Tooltip, { label: m.tooltip, children: /* @__PURE__ */ jsx39("button", { type: "button", className: className2, style: cellStyle, children: content }) }, key);
+    return /* @__PURE__ */ jsx39("span", { className: "fd-erow-cell", style: { "--erow-metric-w": (m.width || ENTITY_ROW_METRIC_WIDTH) + "px" }, children: m.tooltip == null ? /* @__PURE__ */ jsx39("span", { className: className2, style: tone, title: m.label, children: content }) : /* @__PURE__ */ jsx39(Tooltip, { label: m.tooltip, children: /* @__PURE__ */ jsx39("button", { type: "button", className: className2, style: tone, children: content }) }) }, key);
   }) });
 }
 function EntityRow({
@@ -3198,8 +3195,10 @@ function TransferList({
     );
   };
   return /* @__PURE__ */ jsxs38("div", { className: ["fd-tlist", className].filter(Boolean).join(" "), children: [
-    renderSide("left", left, "right"),
-    renderSide("right", right, "left"),
+    /* @__PURE__ */ jsxs38("div", { className: "fd-tlist-panes", children: [
+      renderSide("left", left, "right"),
+      renderSide("right", right, "left")
+    ] }),
     drag ? createPortal4(
       /* @__PURE__ */ jsx43(
         "div",
@@ -8107,11 +8106,24 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
 // src/components/planner/MixGap.tsx
 import * as React37 from "react";
 import { Fragment as Fragment18, jsx as jsx66, jsxs as jsxs61 } from "react/jsx-runtime";
+var MIX_GAP_LAYOUT = {
+  trackHeight: 30,
+  barHeight: 20,
+  targetWidth: 6,
+  labelGap: 6,
+  labelGutter: 50
+};
+var MIX_GAP_TARGET_STRIPE = "repeating-linear-gradient(135deg, var(--n-600) 0 2px, var(--n-300) 2px 4px)";
+function mixGapOffset(value, max) {
+  return `calc((100% - ${MIX_GAP_LAYOUT.labelGutter}px) * ${value / max})`;
+}
 function MixGap({ rows = [], loading = false, className = "" }) {
   const max = Math.max(1, ...rows.flatMap((r) => [r.target, r.realized]));
   const [hover, setHover] = React37.useState(null);
   const toneOf = (gap) => gap >= -1 ? "ok" : gap >= -4 ? "warn" : "danger";
   const TONE = { ok: "var(--ok-solid)", warn: "var(--warn-solid)", danger: "var(--danger-solid)" };
+  const { trackHeight, barHeight, targetWidth, labelGap } = MIX_GAP_LAYOUT;
+  const barTop = (trackHeight - barHeight) / 2;
   return /* @__PURE__ */ jsxs61("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 4 }, children: [
     /* @__PURE__ */ jsxs61("div", { className: "fd-row", style: { gap: 16, justifyContent: "flex-end", paddingBottom: 6, flexWrap: "wrap" }, children: [
       [["On target", TONE.ok], ["Close", TONE.warn], ["Short", TONE.danger]].map(([l, c]) => /* @__PURE__ */ jsxs61("span", { className: "fd-row fd-body-sm fd-muted", style: { gap: 6 }, children: [
@@ -8119,7 +8131,7 @@ function MixGap({ rows = [], loading = false, className = "" }) {
         l
       ] }, l)),
       /* @__PURE__ */ jsxs61("span", { className: "fd-row fd-body-sm fd-muted", style: { gap: 6 }, children: [
-        /* @__PURE__ */ jsx66("span", { style: { width: 3, height: 14, background: "var(--n-500)" } }),
+        /* @__PURE__ */ jsx66("span", { "data-mixgap-legend-target": "", style: { width: targetWidth, height: 16, borderRadius: 1, background: MIX_GAP_TARGET_STRIPE } }),
         "Target"
       ] })
     ] }),
@@ -8127,6 +8139,7 @@ function MixGap({ rows = [], loading = false, className = "" }) {
       const gap = r.realized - r.target;
       const tone = toneOf(gap);
       const tip = "Realized " + r.realized + "% vs " + r.target + "% target" + (gap < -1 ? " \xB7 " + Math.abs(gap).toFixed(0) + " pts short" : gap > 1 ? " \xB7 " + gap.toFixed(0) + " pts over" : " \xB7 on target") + (r.note ? " \u2014 " + r.note : "");
+      const labelLeft = r.realized > r.target ? `calc(${mixGapOffset(r.realized, max)} + ${labelGap}px)` : `calc(${mixGapOffset(r.target, max)} + ${targetWidth / 2 + labelGap}px)`;
       return /* @__PURE__ */ jsxs61(
         "div",
         {
@@ -8136,14 +8149,14 @@ function MixGap({ rows = [], loading = false, className = "" }) {
           onMouseLeave: () => setHover(null),
           children: [
             /* @__PURE__ */ jsx66("span", { style: { width: 128, flex: "none" }, children: /* @__PURE__ */ jsx66(ChannelTag, { channel: r.channel, size: "sm" }) }),
-            /* @__PURE__ */ jsx66("span", { style: { position: "relative", flex: 1, height: 22, minWidth: 120 }, children: loading ? /* @__PURE__ */ jsx66("span", { className: "fd-skel", style: { position: "absolute", inset: "5px 0", borderRadius: 3 } }) : /* @__PURE__ */ jsxs61(Fragment18, { children: [
-              /* @__PURE__ */ jsx66("span", { style: { position: "absolute", left: 0, top: 5, height: 12, width: r.realized / max * 100 + "%", background: TONE[tone], borderRadius: "2px 3px 3px 2px", transition: "width var(--dur-slow) var(--ease), background var(--dur-base) var(--ease)" } }),
-              /* @__PURE__ */ jsx66("span", { style: { position: "absolute", left: r.target / max * 100 + "%", top: 0, width: 3, height: 22, background: "var(--n-500)", borderRadius: 1 } }),
-              /* @__PURE__ */ jsxs61("span", { className: "fd-num", style: { position: "absolute", right: Math.max(r.realized, r.target) / max > 0.82 ? 0 : "auto", left: Math.max(r.realized, r.target) / max > 0.82 ? "auto" : "calc(" + Math.max(r.realized, r.target) / max * 100 + "% + 10px)", top: 2, fontSize: 12, color: "var(--text-muted)", whiteSpace: "nowrap", background: Math.max(r.realized, r.target) / max > 0.82 ? "var(--surface)" : "none", paddingLeft: 3 }, children: [
+            /* @__PURE__ */ jsx66("span", { style: { position: "relative", flex: 1, height: trackHeight, minWidth: 120 }, children: loading ? /* @__PURE__ */ jsx66("span", { className: "fd-skel", style: { position: "absolute", left: 0, right: 0, top: barTop, height: barHeight, borderRadius: 3 } }) : /* @__PURE__ */ jsxs61(Fragment18, { children: [
+              /* @__PURE__ */ jsx66("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__ */ jsx66("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__ */ jsxs61("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: [
                 r.realized,
                 "%"
               ] }),
-              hover === r.channel ? /* @__PURE__ */ jsx66("span", { className: "fd-tooltip", role: "tooltip", style: { position: "absolute", left: 0, right: "auto", bottom: 26, maxWidth: "min(340px, 100%)", whiteSpace: "normal", textAlign: "left", width: "max-content" }, children: tip }) : null
+              hover === r.channel ? /* @__PURE__ */ jsx66("span", { className: "fd-tooltip", role: "tooltip", style: { position: "absolute", left: 0, right: "auto", bottom: trackHeight + 4, maxWidth: "min(340px, 100%)", whiteSpace: "normal", textAlign: "left", width: "max-content" }, children: tip }) : null
             ] }) })
           ]
         },