@mt-gloss/ui 0.1.51 → 0.1.53

package/index.js

@@ -15,31 +15,31 @@ import Pt from "@mui/icons-material/AspectRatio";
 import Ft from "@mui/icons-material/Palette";
 import Et from "@mui/icons-material/PushPin";
 function Nn(e = {}) {
-  const { enabled: t = !0, returnTo: a } = e, n = I(null);
+  const { enabled: t = !0, returnTo: n } = e, a = I(null);
   return O(() => {
-    t && (n.current = a || document.activeElement);
-  }, [t, a]), O(() => () => {
-    t && n.current && setTimeout(() => {
-      n.current?.focus?.();
+    t && (a.current = n || document.activeElement);
+  }, [t, n]), O(() => () => {
+    t && a.current && setTimeout(() => {
+      a.current?.focus?.();
     }, 0);
-  }, [t]), n;
+  }, [t]), a;
 }
 function Dn(e) {
   const {
     items: t,
-    activeIndex: a,
-    onActiveIndexChange: n,
+    activeIndex: n,
+    onActiveIndexChange: a,
     loop: i = !0,
     orientation: s = "vertical",
     enabled: o = !0,
     isItemDisabled: l,
     onSelect: d,
     onEscape: c
-  } = e, [f, h] = $(-1), g = a !== void 0 ? a : f, u = w(
+  } = e, [f, h] = $(-1), g = n !== void 0 ? n : f, u = w(
     (m) => {
-      a === void 0 && h(m), n?.(m);
+      n === void 0 && h(m), a?.(m);
     },
-    [a, n]
+    [n, a]
   ), N = w(() => t.map((m, v) => ({ item: m, index: v })).filter(({ item: m, index: v }) => !l?.(m, v)).map(({ index: m }) => m), [t, l]), b = w(
     (m, v) => {
       const k = N();
@@ -124,14 +124,14 @@ function Dn(e) {
 const At = ({
   label: e = "Set a target",
   unit: t,
-  currentValue: a,
-  onConfirm: n,
+  currentValue: n,
+  onConfirm: a,
   onSkip: i,
   hint: s
 }) => {
-  const [o, l] = $(a != null ? String(a) : ""), d = () => {
+  const [o, l] = $(n != null ? String(n) : ""), d = () => {
     const u = parseFloat(o);
-    Number.isNaN(u) || n(u);
+    Number.isNaN(u) || a(u);
   }, c = (u) => {
     u.key === "Enter" ? (u.preventDefault(), d()) : u.key === "Escape" && (u.preventDefault(), i?.());
   }, f = _t(), h = `gloss-target-input-field-${f}`, g = s ? `gloss-target-input-hint-${f}` : void 0;
@@ -288,8 +288,8 @@ const At = ({
 function Wt({
   open: e,
   anchorEl: t,
-  statusId: a,
-  onOpenInTable: n,
+  statusId: n,
+  onOpenInTable: a,
   onShowOnGraph: i,
   overflowActions: s,
   onClose: o
@@ -320,7 +320,7 @@ function Wt({
     "div",
     {
       ref: c,
-      "data-status-chip-menu": a,
+      "data-status-chip-menu": n,
       role: "menu",
       "aria-label": "Status actions",
       style: f(),
@@ -333,7 +333,7 @@ function Wt({
             onMouseEnter: () => d("__primary"),
             onMouseLeave: () => d(null),
             onClick: () => {
-              n(a), o();
+              a(n), o();
             },
             children: "Open in table"
           }
@@ -346,7 +346,7 @@ function Wt({
             onMouseEnter: () => d("__graph"),
             onMouseLeave: () => d(null),
             onClick: () => {
-              i(a), o();
+              i(n), o();
             },
             children: "Show on graph"
           }
@@ -360,7 +360,7 @@ function Wt({
             onMouseEnter: () => d(u.id),
             onMouseLeave: () => d(null),
             onClick: () => {
-              u.onSelect(a), o();
+              u.onSelect(n), o();
             },
             children: u.label
           },
@@ -420,7 +420,7 @@ function tt() {
     return "full";
   }
 }
-const Ee = ({ visible: e, variant: t, trigger: a, children: n, className: i }) => {
+const Ee = ({ visible: e, variant: t, trigger: n, children: a, className: i }) => {
   const s = {
     "--gloss-swing-enter-ms": `${ge.enterDurationMs}ms`,
     "--gloss-swing-exit-ms": `${ge.exitDurationMs}ms`,
@@ -430,7 +430,7 @@ const Ee = ({ visible: e, variant: t, trigger: a, children: n, className: i }) =
   }, o = [
     "gloss-swing-reveal",
     `gloss-swing-reveal--${t}`,
-    a === "hover+focus" ? "gloss-swing-reveal--hover-focus" : "",
+    n === "hover+focus" ? "gloss-swing-reveal--hover-focus" : "",
     i ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ r(
@@ -441,23 +441,23 @@ const Ee = ({ visible: e, variant: t, trigger: a, children: n, className: i }) =
       "data-visible": e ? "true" : "false",
       className: o,
       style: s,
-      children: n
+      children: a
     }
   );
 }, jt = Nt(
-  function({ state: t, onPointerDown: a, onPointerUp: n, onPointerEnter: i, onPointerLeave: s, onKeyboardStep: o, onLostPointerCapture: l, edge: d = "right", ariaLabel: c = "Resize card" }, f) {
+  function({ state: t, onPointerDown: n, onPointerUp: a, onPointerEnter: i, onPointerLeave: s, onKeyboardStep: o, onLostPointerCapture: l, edge: d = "right", ariaLabel: c = "Resize card" }, f) {
     const h = t === "handle-visible" || t === "dragging" || t === "settling", g = (b) => {
       try {
         b.currentTarget.setPointerCapture(b.pointerId);
       } catch {
       }
-      a(b);
+      n(b);
     }, u = (b) => {
       try {
         b.currentTarget.hasPointerCapture?.(b.pointerId) && b.currentTarget.releasePointerCapture(b.pointerId);
       } catch {
       }
-      n(b);
+      a(b);
     }, N = (b) => {
       !h || !o || (b.key === "ArrowRight" ? (b.preventDefault(), o("grow")) : b.key === "ArrowLeft" && (b.preventDefault(), o("shrink")));
     };
@@ -489,8 +489,8 @@ jt.displayName = "EdgeHoverHandle";
 function Gt({
   visible: e,
   targetColSpan: t,
-  ghostWidth: a,
-  enterMs: n = 180,
+  ghostWidth: n,
+  enterMs: a = 180,
   exitMs: i = 120
 }) {
   return /* @__PURE__ */ r(
@@ -504,8 +504,8 @@ function Gt({
         e ? "gloss-ghost-preview--visible" : ""
       ].filter(Boolean).join(" "),
       style: {
-        width: a,
-        transitionDuration: `${e ? n : i}ms`
+        width: n,
+        transitionDuration: `${e ? a : i}ms`
       }
     }
   );
@@ -552,7 +552,7 @@ class Vt {
       const [d, c] = this.samples, f = Math.max(1, c.t - d.t);
       return (c.x - d.x) / f * 1e3;
     }
-    const [a, n, i] = this.samples, s = (i.x - n.x) / Math.max(1, i.t - n.t) * 1e3, o = (n.x - a.x) / Math.max(1, n.t - a.t) * 1e3, l = o;
+    const [n, a, i] = this.samples, s = (i.x - a.x) / Math.max(1, i.t - a.t) * 1e3, o = (a.x - n.x) / Math.max(1, a.t - n.t) * 1e3, l = o;
     return (s * 3 + o * 2 + l * 1) / 6;
   }
 }
@@ -579,8 +579,8 @@ const at = {
 function Kn({
   currentColSpan: e,
   stackable: t,
-  onResize: a,
-  onCancel: n,
+  onResize: n,
+  onCancel: a,
   step: i = 180,
   gap: s = 0,
   tuning: o,
@@ -669,11 +669,11 @@ function Kn({
     (C, E) => {
       const A = We(C), K = C !== e;
       if (typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-        S.jump(A), K && E ? a({ direction: E, targetColSpan: C, mode: t ? "slot-fill" : "sparkline-fidelity" }) : K || n?.(), S.jump(0), y.current = "idle", b("idle");
+        S.jump(A), K && E ? n({ direction: E, targetColSpan: C, mode: t ? "slot-fill" : "sparkline-fidelity" }) : K || a?.(), S.jump(0), y.current = "idle", b("idle");
         return;
       }
       const q = U.current.getWeightedVelocity() * B.velocityMultiplier;
-      y.current = "settling", b("settling"), K && E ? a({ direction: E, targetColSpan: C, mode: t ? "slot-fill" : "sparkline-fidelity" }) : K || n?.(), H(), F.current = Ve(S, A, {
+      y.current = "settling", b("settling"), K && E ? n({ direction: E, targetColSpan: C, mode: t ? "slot-fill" : "sparkline-fidelity" }) : K || a?.(), H(), F.current = Ve(S, A, {
         type: "spring",
         stiffness: B.stiffness,
         damping: B.damping,
@@ -688,7 +688,7 @@ function Kn({
         }
       });
     },
-    [We, e, t, a, n, S, B, H]
+    [We, e, t, n, a, S, B, H]
   ), ht = w(
     (C) => {
       if (y.current !== "dragging") return;
@@ -702,7 +702,7 @@ function Kn({
     if (Z(), y.current === "dragging") {
       const C = R.current;
       if (typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-        S.jump(C), n?.(), S.jump(0), y.current = "idle", b("idle");
+        S.jump(C), a?.(), S.jump(0), y.current = "idle", b("idle");
         return;
       }
       const A = U.current.getWeightedVelocity();
@@ -713,13 +713,13 @@ function Kn({
         mass: B.mass,
         velocity: A,
         onComplete: () => {
-          F.current = null, n?.(), S.jump(0), y.current = "idle", b("idle");
+          F.current = null, a?.(), S.jump(0), y.current = "idle", b("idle");
         }
       });
       return;
     }
-    y.current === "handle-visible" && (n?.(), y.current = "cancelled", b("cancelled"));
-  }, [Z, S, n, B, H]);
+    y.current === "handle-visible" && (a?.(), y.current = "cancelled", b("cancelled"));
+  }, [Z, S, a, B, H]);
   O(() => {
     if (N !== "dragging" && N !== "handle-visible") return;
     const C = (E) => {
@@ -831,10 +831,10 @@ const ie = {
   sectionDividerStaggerMs: 40
 };
 function zn(e) {
-  const { cardWidthPx: t, slotCount: a, activeSlotIdx: n, pillWidthPx: i } = e;
-  if (n == null || !Number.isFinite(t) || t <= 0 || !Number.isFinite(a) || a <= 0 || !Number.isInteger(n) || n < 0 || n >= a)
+  const { cardWidthPx: t, slotCount: n, activeSlotIdx: a, pillWidthPx: i } = e;
+  if (a == null || !Number.isFinite(t) || t <= 0 || !Number.isFinite(n) || n <= 0 || !Number.isInteger(a) || a < 0 || a >= n)
     return;
-  const s = (n + 0.5) * (t / a);
+  const s = (a + 0.5) * (t / n);
   return i != null && Number.isFinite(i) && i > 0 ? s - i / 2 : s;
 }
 const Wn = [
@@ -1108,8 +1108,8 @@ const Wn = [
 function nt({
   open: e,
   onDismiss: t,
-  anchorRef: a,
-  pages: n,
+  anchorRef: n,
+  pages: a,
   activePageId: i,
   onPageChange: s,
   onCreatePage: o,
@@ -1141,10 +1141,10 @@ function nt({
       },
       open: e,
       onDismiss: t,
-      anchorRef: a,
+      anchorRef: n,
       className: "gloss-page-dropdown",
       children: [
-        /* @__PURE__ */ r("ul", { role: "menu", className: "gloss-page-dropdown__list", children: n.map((g) => {
+        /* @__PURE__ */ r("ul", { role: "menu", className: "gloss-page-dropdown__list", children: a.map((g) => {
           const u = g.id === i;
           return /* @__PURE__ */ D(
             "li",
@@ -1203,8 +1203,8 @@ function nt({
 nt.displayName = "PageDropdown";
 const Xt = function({
   currentIndex: t,
-  total: a,
-  pages: n,
+  total: n,
+  pages: a,
   onPageChange: i,
   onCreatePage: s,
   onManagePages: o,
@@ -1216,7 +1216,7 @@ const Xt = function({
     g((M) => !M);
   }, []), N = w(() => {
     g(!1);
-  }, []), b = n[t]?.id ?? "";
+  }, []), b = a[t]?.id ?? "";
   return /* @__PURE__ */ D(
     "div",
     {
@@ -1238,7 +1238,7 @@ const Xt = function({
             className: `gloss-page-chip__trigger${d === "name" ? " gloss-page-chip__trigger--name" : ""}`,
             "aria-haspopup": "menu",
             "aria-expanded": h,
-            "aria-label": d === "name" ? `${c ?? "Page"}. Click to switch pages.` : `Page ${t + 1} of ${a}. Click to switch pages.`,
+            "aria-label": d === "name" ? `${c ?? "Page"}. Click to switch pages.` : `Page ${t + 1} of ${n}. Click to switch pages.`,
             onClick: u,
             children: d === "name" ? /* @__PURE__ */ D(te, { children: [
               /* @__PURE__ */ r("span", { className: "gloss-page-chip__trigger-name", children: c ?? "" }),
@@ -1246,7 +1246,7 @@ const Xt = function({
             ] }) : /* @__PURE__ */ D(te, { children: [
               t + 1,
               " / ",
-              a
+              n
             ] })
           }
         ),
@@ -1256,7 +1256,7 @@ const Xt = function({
             open: h,
             onDismiss: N,
             anchorRef: f,
-            pages: n,
+            pages: a,
             activePageId: b,
             onPageChange: i,
             onCreatePage: s,
@@ -1933,22 +1933,22 @@ function oa() {
   const [e, t] = $(() => typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
   return O(() => {
     if (typeof window > "u" || typeof window.matchMedia != "function") return;
-    const a = window.matchMedia("(prefers-reduced-motion: reduce)"), n = (i) => t(i.matches);
-    return typeof a.addEventListener == "function" ? (a.addEventListener("change", n), () => a.removeEventListener("change", n)) : (a.addListener?.(n), () => {
-      a.removeListener?.(n);
+    const n = window.matchMedia("(prefers-reduced-motion: reduce)"), a = (i) => t(i.matches);
+    return typeof n.addEventListener == "function" ? (n.addEventListener("change", a), () => n.removeEventListener("change", a)) : (n.addListener?.(a), () => {
+      n.removeListener?.(a);
     });
   }, []), e;
 }
 const la = ({
   dimensions: e,
   onDimensionSelect: t,
-  activeDimension: a,
-  ariaCardTypeLabel: n,
+  activeDimension: n,
+  ariaCardTypeLabel: a,
   className: i
 }) => {
   const s = I(null), o = I([]), l = oa(), d = we(() => Array.from(e), [e]);
   if (d.length === 0) return null;
-  const c = n ? `Configure ${n}: choose a dimension` : void 0, f = l ? "10ms" : "200ms", h = (g, u) => {
+  const c = a ? `Configure ${a}: choose a dimension` : void 0, f = l ? "10ms" : "200ms", h = (g, u) => {
     const N = d.length - 1, b = (p) => {
       const M = o.current[p];
       M && M.focus();
@@ -1993,7 +1993,7 @@ const la = ({
         "--gloss-reconfig-backside-buttons-transition-duration": f
       },
       children: d.map((g, u) => {
-        const N = ia[g], b = a === g;
+        const N = ia[g], b = n === g;
         return /* @__PURE__ */ D(
           "button",
           {
@@ -2171,8 +2171,8 @@ function Oe(e) {
 }
 function ca(e) {
   let t = 0;
-  for (const n of e) {
-    const i = Oe(n.size), s = n.gridPosition.col + i.cols - 1;
+  for (const a of e) {
+    const i = Oe(a.size), s = a.gridPosition.col + i.cols - 1;
     s > t && (t = s);
   }
   return `repeat(${t > 0 ? t : Math.max(e.length, 1)}, minmax(0, 1fr))`;
@@ -2201,7 +2201,7 @@ const da = function(t) {
         })
       }
     );
-  const { cards: a, composite: n } = t;
+  const { cards: n, composite: a } = t;
   return /* @__PURE__ */ D(
     "div",
     {
@@ -2217,25 +2217,25 @@ const da = function(t) {
         padding: "10px 12px 8px",
         overflow: "visible"
       },
-      role: n?.label ? "group" : void 0,
-      "aria-label": n?.label,
+      role: a?.label ? "group" : void 0,
+      "aria-label": a?.label,
       tabIndex: void 0,
       children: [
-        n?.accentColor && /* @__PURE__ */ r(
+        a?.accentColor && /* @__PURE__ */ r(
           "div",
           {
             className: "gloss-metric-group__accent",
-            style: { background: n.accentColor }
+            style: { background: a.accentColor }
           }
         ),
-        n?.label && /* @__PURE__ */ D("div", { className: "gloss-metric-group__label", children: [
-          /* @__PURE__ */ r("span", { children: n.label }),
-          n?.trend && /* @__PURE__ */ r(
+        a?.label && /* @__PURE__ */ D("div", { className: "gloss-metric-group__label", children: [
+          /* @__PURE__ */ r("span", { children: a.label }),
+          a?.trend && /* @__PURE__ */ r(
             "span",
             {
               className: "gloss-metric-group__trend",
-              "data-direction": n.trend.direction,
-              children: n.trend.delta
+              "data-direction": a.trend.direction,
+              children: a.trend.delta
             }
           )
         ] }),
@@ -2246,9 +2246,9 @@ const da = function(t) {
             style: {
               display: "grid",
               gap: "var(--gloss-spacing-2, 8px)",
-              gridTemplateColumns: ca(a)
+              gridTemplateColumns: ca(n)
             },
-            children: a.map((i) => {
+            children: n.map((i) => {
               const s = Oe(i.size);
               return /* @__PURE__ */ r(
                 "div",
@@ -2295,12 +2295,12 @@ function ga() {
       } catch {
       }
   }, [e]);
-  const a = w(
+  const n = w(
     (s, o) => {
       t((l) => ({ ...l, [s]: o }));
     },
     []
-  ), n = w(
+  ), a = w(
     (s) => {
       t((o) => ({ ...o, [s]: re[s] }));
     },
@@ -2308,7 +2308,7 @@ function ga() {
   ), i = w(() => {
     t({ ...re });
   }, []);
-  return { values: e, setValue: a, resetRow: n, resetAll: i };
+  return { values: e, setValue: n, resetRow: a, resetAll: i };
 }
 const pa = [
   { key: "stiffness", label: "Spring stiffness", unit: "", min: 100, max: 1e3, step: 10 },
@@ -2344,12 +2344,12 @@ function fa() {
     }
   );
 }
-function ba({ spec: e, value: t, onChange: a, onReset: n, flashing: i }) {
+function ba({ spec: e, value: t, onChange: n, onReset: a, flashing: i }) {
   const s = w(
     (o) => {
-      (o.key === "r" || o.key === "R") && (o.preventDefault(), n());
+      (o.key === "r" || o.key === "R") && (o.preventDefault(), a());
     },
-    [n]
+    [a]
   );
   return /* @__PURE__ */ D(
     "div",
@@ -2374,7 +2374,7 @@ function ba({ spec: e, value: t, onChange: a, onReset: n, flashing: i }) {
             step: e.step,
             value: t,
             "aria-label": e.label,
-            onChange: (o) => a(Number(o.target.value))
+            onChange: (o) => n(Number(o.target.value))
           }
         ),
         /* @__PURE__ */ r(
@@ -2383,7 +2383,7 @@ function ba({ spec: e, value: t, onChange: a, onReset: n, flashing: i }) {
             type: "button",
             className: "gloss-dev-tuning-panel__reset",
             "aria-label": `Reset ${e.label}`,
-            onClick: n,
+            onClick: a,
             children: /* @__PURE__ */ r(fa, {})
           }
         )
@@ -2404,15 +2404,15 @@ function ya(e = {}) {
 }
 ya.displayName = "DevTuningPanel";
 function wa() {
-  const e = ga(), { values: t, setValue: a, resetRow: n, resetAll: i } = e, [s, o] = $(null), l = I(null), d = w((g) => {
+  const e = ga(), { values: t, setValue: n, resetRow: a, resetAll: i } = e, [s, o] = $(null), l = I(null), d = w((g) => {
     l.current && clearTimeout(l.current), o(g), l.current = setTimeout(() => {
       o(null), l.current = null;
     }, 200);
   }, []), c = w(
     (g, u) => {
-      a(g, u), g === "snapInPx" && u > t.snapOutPx && (a("snapOutPx", u), d("snapOutPx"));
+      n(g, u), g === "snapInPx" && u > t.snapOutPx && (n("snapOutPx", u), d("snapOutPx"));
     },
-    [a, t.snapOutPx, d]
+    [n, t.snapOutPx, d]
   ), f = we(() => pa, []), h = xt();
   return /* @__PURE__ */ D(
     Ce.div,
@@ -2443,7 +2443,7 @@ function wa() {
             spec: g,
             value: t[g.key],
             onChange: (u) => c(g.key, u),
-            onReset: () => n(g.key),
+            onReset: () => a(g.key),
             flashing: s === g.key
           },
           g.key
@@ -2464,8 +2464,8 @@ function wa() {
 function vr({
   state: e,
   originX: t,
-  originY: a,
-  leftEdgeX: n,
+  originY: n,
+  leftEdgeX: a,
   rightEdgeX: i,
   minBoundaryX: s,
   snapBoundariesX: o,
@@ -2477,12 +2477,12 @@ function vr({
   style: g
 }) {
   if (e === "hidden") return null;
-  const u = Math.max(0, i - n), N = Math.max(0, d - l), b = {
+  const u = Math.max(0, i - a), N = Math.max(0, d - l), b = {
     "--gloss-resize-envelope-enter-ms": `${c}ms`,
     "--gloss-resize-envelope-exit-ms": `${f}ms`,
-    "--gloss-resize-envelope-origin-x": `${t - n}px`,
-    "--gloss-resize-envelope-origin-y": `${a - l}px`,
-    left: n,
+    "--gloss-resize-envelope-origin-x": `${t - a}px`,
+    "--gloss-resize-envelope-origin-y": `${n - l}px`,
+    left: a,
     top: l,
     width: u,
     height: N,
@@ -2510,7 +2510,7 @@ function vr({
           {
             className: "gloss-resize-envelope__edge gloss-resize-envelope__edge--min-boundary",
             "data-edge": "min-boundary",
-            style: { left: s - n }
+            style: { left: s - a }
           }
         ),
         /* @__PURE__ */ r(
@@ -2526,7 +2526,7 @@ function vr({
           {
             className: "gloss-resize-envelope__snap-line",
             "data-snap-line": !0,
-            style: { left: p - n }
+            style: { left: p - a }
           },
           p
         ))
@@ -2537,14 +2537,14 @@ function vr({
 function yr({
   density: e,
   canAccept: t,
-  blocked: a = !1,
-  proximityOpacity: n,
+  blocked: n = !1,
+  proximityOpacity: a,
   state: i,
   className: s,
   children: o,
   ...l
 }) {
-  const d = n != null ? { ...l.style, "--_proximity-opacity": String(n) } : l.style;
+  const d = a != null ? { ...l.style, "--_proximity-opacity": String(a) } : l.style;
   return /* @__PURE__ */ r(
     "div",
     {
@@ -2552,34 +2552,34 @@ function yr({
       style: d,
       "data-density": e,
       "data-can-accept": t ? "true" : "false",
-      "data-blocked": a ? "true" : void 0,
-      "data-proximity-driven": n != null ? "true" : void 0,
+      "data-blocked": n ? "true" : void 0,
+      "data-proximity-driven": a != null ? "true" : void 0,
       "data-state": i ?? void 0,
       "data-testid": "gloss-drop-anchor-cell",
       className: [
         "gloss-drop-anchor-cell",
-        a && "gloss-drop-anchor-cell--blocked-pulse",
+        n && "gloss-drop-anchor-cell--blocked-pulse",
         s
       ].filter(Boolean).join(" "),
       children: o
     }
   );
 }
-function _a(e, t, a, n) {
-  const i = (e + a) / 2, s = Math.min(t, n) - 40;
-  return `M${e},${t} Q${i},${s} ${a},${n}`;
+function _a(e, t, n, a) {
+  const i = (e + n) / 2, s = Math.min(t, a) - 40;
+  return `M${e},${t} Q${i},${s} ${n},${a}`;
 }
 function wr({
   segments: e,
   durationMs: t = ie.spilloverArcDurationMs,
-  staggerMs: a = ie.spilloverStaggerMs,
-  className: n,
+  staggerMs: n = ie.spilloverStaggerMs,
+  className: a,
   style: i
 }) {
   return e.length === 0 ? null : /* @__PURE__ */ r(
     "svg",
     {
-      className: ["gloss-spillover-arc", n].filter(Boolean).join(" "),
+      className: ["gloss-spillover-arc", a].filter(Boolean).join(" "),
       "data-testid": "gloss-spillover-arc",
       "aria-hidden": "true",
       overflow: "visible",
@@ -2591,7 +2591,7 @@ function wr({
           className: "gloss-spillover-arc__path",
           d: _a(s.fromX, s.fromY, s.toX, s.toY),
           style: {
-            animationDelay: `${o * a}ms`,
+            animationDelay: `${o * n}ms`,
             animationDuration: `${t}ms`
           }
         },
@@ -2603,8 +2603,8 @@ function wr({
 function _r({
   state: e,
   staggerIndex: t = 0,
-  fadeInMs: a = ie.sectionDividerFadeInMs,
-  fadeOutMs: n = ie.sectionDividerFadeOutMs,
+  fadeInMs: n = ie.sectionDividerFadeInMs,
+  fadeOutMs: a = ie.sectionDividerFadeOutMs,
   staggerMs: i = ie.sectionDividerStaggerMs,
   variant: s = "dashed",
   className: o,
@@ -2612,8 +2612,8 @@ function _r({
   ...d
 }) {
   const c = {
-    "--gloss-section-divider-fade-in-ms": `${a}ms`,
-    "--gloss-section-divider-fade-out-ms": `${n}ms`,
+    "--gloss-section-divider-fade-in-ms": `${n}ms`,
+    "--gloss-section-divider-fade-out-ms": `${a}ms`,
     "--gloss-section-divider-stagger-delay": `${t * i}ms`,
     ...l
   };
@@ -2637,15 +2637,15 @@ function _r({
 function Nr({
   enabled: e,
   onCollapse: t,
-  onAdd: a,
-  addGlyphLabel: n,
+  onAdd: n,
+  addGlyphLabel: a,
   collapseGlyphLabel: i,
   className: s,
   style: o,
   onPack: l,
   ariaLabel: d
 }) {
-  const c = n ?? "Add card to this cell", f = i ?? d ?? "Pack row — shift cards left", h = t ?? l, g = yt();
+  const c = a ?? "Add card to this cell", f = i ?? d ?? "Pack row — shift cards left", h = t ?? l, g = yt();
   return /* @__PURE__ */ D(ke.Fragment, { children: [
     /* @__PURE__ */ r(Ee, { visible: !g.isActive, variant: "pack", trigger: "hover+focus", children: /* @__PURE__ */ r(
       "button",
@@ -2660,7 +2660,7 @@ function Nr({
         ].filter(Boolean).join(" "),
         style: o,
         onClick: (u) => {
-          u.stopPropagation(), a?.();
+          u.stopPropagation(), n?.();
         },
         children: /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "gloss-empty-cell-pack-affordance__glyph", children: "+" })
       }
@@ -2687,15 +2687,15 @@ function Dr() {
 function kr({
   tint: e,
   colSpan: t,
-  colWidth: a,
-  rowHeight: n,
+  colWidth: n,
+  rowHeight: a,
   gap: i,
   x: s,
   y: o,
   children: l,
   className: d
 }) {
-  const c = t * a + (t - 1) * i;
+  const c = t * n + (t - 1) * i;
   return /* @__PURE__ */ r(
     Ce.div,
     {
@@ -2707,7 +2707,7 @@ function kr({
         `gloss-drag-ghost--tint-${e}`,
         d
       ].filter(Boolean).join(" "),
-      style: { x: s, y: o, width: c, height: n },
+      style: { x: s, y: o, width: c, height: a },
       children: l
     }
   );
@@ -2716,15 +2716,15 @@ const Na = 3;
 function lt({
   gesture: e,
   cell: t,
-  colSpan: a,
-  colWidth: n,
+  colSpan: n,
+  colWidth: a,
   gap: i,
   rowHeight: s,
   pattern: o = "solid",
   transitionMs: l = 120,
   className: d
 }) {
-  const c = a * n + (a - 1) * i, h = (t.section * Na + t.col) * (n + i), g = t.row * (s + i), u = e === "resize" ? 2.5 : 2, N = o === "dashed-retreated" ? "dashed" : "solid", b = e === "drag" ? "gloss-snap-outline" : "gloss-tracking-outline";
+  const c = n * a + (n - 1) * i, h = (t.section * Na + t.col) * (a + i), g = t.row * (s + i), u = e === "resize" ? 2.5 : 2, N = o === "dashed-retreated" ? "dashed" : "solid", b = e === "drag" ? "gloss-snap-outline" : "gloss-tracking-outline";
   return /* @__PURE__ */ r(
     "div",
     {
@@ -2759,17 +2759,17 @@ function Cr(e) {
 function xr({
   items: e,
   children: t,
-  className: a,
-  debugMagenta: n
+  className: n,
+  debugMagenta: a
 }) {
-  const i = process.env.NODE_ENV !== "production" && (n || typeof window < "u" && window.__GLOSS_CASCADE_PREVIEW_DEBUG__ === !0);
+  const i = process.env.NODE_ENV !== "production" && (a || typeof window < "u" && window.__GLOSS_CASCADE_PREVIEW_DEBUG__ === !0);
   return e.length === 0 ? null : /* @__PURE__ */ r(te, { children: e.map((s) => /* @__PURE__ */ r(
     Ce.div,
     {
       "data-card-id": s.cardId,
       "data-testid": "gloss-cascade-preview-item",
       "aria-hidden": "true",
-      className: ["gloss-cascade-preview-item", a].filter(Boolean).join(" "),
+      className: ["gloss-cascade-preview-item", n].filter(Boolean).join(" "),
       style: {
         position: "absolute",
         left: s.left,
@@ -2788,12 +2788,12 @@ function xr({
 const Da = ({
   consumed: e,
   elapsed: t,
-  severity: a = "neutral"
+  severity: n = "neutral"
 }) => {
-  const n = I(null), i = I(null);
+  const a = I(null), i = I(null);
   O(() => {
     const l = Math.min(100, Math.max(0, e.value)), d = Math.min(100, Math.max(0, t.value)), c = requestAnimationFrame(() => {
-      n.current && (n.current.style.width = `${l}%`), i.current && (i.current.style.width = `${d}%`);
+      a.current && (a.current.style.width = `${l}%`), i.current && (i.current.style.width = `${d}%`);
     });
     return () => cancelAnimationFrame(c);
   }, [e.value, t.value]);
@@ -2810,8 +2810,8 @@ const Da = ({
           /* @__PURE__ */ r("div", { className: "gloss-dual-pace-bars__track", children: /* @__PURE__ */ r(
             "div",
             {
-              ref: n,
-              className: `gloss-dual-pace-bars__fill gloss-dual-pace-bars__fill--consumed gloss-dual-pace-bars__fill--${a}`,
+              ref: a,
+              className: `gloss-dual-pace-bars__fill gloss-dual-pace-bars__fill--consumed gloss-dual-pace-bars__fill--${n}`,
               style: { width: "0%" },
               role: "meter",
               "aria-valuenow": Math.min(100, Math.max(0, e.value)),
@@ -2848,10 +2848,10 @@ const Da = ({
       ]
     }
   );
-}, ka = ({ label: e, value: t, severity: a }) => /* @__PURE__ */ D(
+}, ka = ({ label: e, value: t, severity: n }) => /* @__PURE__ */ D(
   "div",
   {
-    className: `gloss-gap-readout gloss-gap-readout--${a}`,
+    className: `gloss-gap-readout gloss-gap-readout--${n}`,
     "aria-label": `${e}: ${t}`,
     children: [
       /* @__PURE__ */ r("hr", { className: "gloss-gap-readout__separator" }),
@@ -2878,17 +2878,17 @@ const Da = ({
     }
   )
 ] }), Sr = (e) => {
-  const [t, a] = $(!1), n = e.target?.value, i = n !== void 0, s = e.paceGapUnit === "usd" ? "$" : "%", o = /* @__PURE__ */ r(
+  const [t, n] = $(!1), a = e.target?.value, i = a !== void 0, s = e.paceGapUnit === "usd" ? "$" : "%", o = /* @__PURE__ */ r(
     At,
     {
       label: `Set a target for ${e.label}`,
       unit: s,
-      currentValue: n,
+      currentValue: a,
       onConfirm: (l) => {
-        e.onTargetChange(l), a(!1);
+        e.onTargetChange(l), n(!1);
       },
       onSkip: () => {
-        e.onTargetSkip?.(), a(!1);
+        e.onTargetSkip?.(), n(!1);
       }
     }
   );
@@ -2898,7 +2898,7 @@ const Da = ({
       colSpan: 2,
       enableQuickSettings: !0,
       isFlipped: t,
-      onFlipChange: a,
+      onFlipChange: n,
       quickConfigSlot: o,
       onRemove: e.onRemove,
       children: /* @__PURE__ */ D("div", { className: `gloss-pace-card ${e.isStale ? "gloss-metric-data-stale" : ""}`, children: [
@@ -2918,7 +2918,7 @@ const Da = ({
           Ca,
           {
             label: e.label,
-            onSetTarget: () => a(!0)
+            onSetTarget: () => n(!0)
           }
         ) })
       ] })
@@ -2941,16 +2941,16 @@ const Da = ({
   ),
   /* @__PURE__ */ r("div", { className: "gloss-pace-tile-preview__gap-strip" })
 ] });
-function xa({ id: e, label: t, selected: a, focused: n, disabled: i, badge: s, onClick: o }) {
+function xa({ id: e, label: t, selected: n, focused: a, disabled: i, badge: s, onClick: o }) {
   return /* @__PURE__ */ r(
     "span",
     {
       role: "radio",
-      "aria-checked": a,
+      "aria-checked": n,
       "aria-disabled": i || void 0,
-      tabIndex: n ? 0 : -1,
+      tabIndex: a ? 0 : -1,
       className: "gloss-lens-chip",
-      "data-selected": a || void 0,
+      "data-selected": n || void 0,
       "data-disabled": i || void 0,
       onClick: () => {
         i || o(e);
@@ -2965,8 +2965,8 @@ function xa({ id: e, label: t, selected: a, focused: n, disabled: i, badge: s, o
 function Sa({
   lenses: e,
   value: t,
-  onChange: a,
-  "aria-label": n = "Lens"
+  onChange: n,
+  "aria-label": a = "Lens"
 }) {
   const [i, s] = $(
     () => Math.max(0, e.findIndex((l) => l.id === t))
@@ -2978,7 +2978,7 @@ function Sa({
     "div",
     {
       role: "radiogroup",
-      "aria-label": n,
+      "aria-label": a,
       onKeyDown: (l) => {
         switch (l.key) {
           case "ArrowRight":
@@ -2999,7 +2999,7 @@ function Sa({
           case " ": {
             l.preventDefault();
             const d = e[i];
-            d && !d.disabled && a(d.id);
+            d && !d.disabled && n(d.id);
             break;
           }
         }
@@ -3014,7 +3014,7 @@ function Sa({
           focused: d === i,
           disabled: l.disabled,
           badge: l.badge,
-          onClick: a
+          onClick: n
         },
         l.id
       ))
@@ -3029,13 +3029,13 @@ function Ra({ heading: e, children: t }) {
   ] });
 }
 Ra.displayName = "StarterRail";
-function Ma({ heading: e, children: t, emptyStateLabel: a }) {
-  const n = !t || Array.isArray(t) && t.length === 0;
+function Ma({ heading: e, children: t, emptyStateLabel: n }) {
+  const a = !t || Array.isArray(t) && t.length === 0;
   return /* @__PURE__ */ D("section", { className: "gloss-more-in-lens-rail", "aria-label": e, children: [
     /* @__PURE__ */ r("header", { className: "gloss-more-in-lens-rail__heading", children: e }),
     /* @__PURE__ */ D("div", { className: "gloss-more-in-lens-rail__tiles", children: [
       t,
-      n && a && /* @__PURE__ */ r("p", { className: "gloss-more-in-lens-rail__empty", children: a })
+      a && n && /* @__PURE__ */ r("p", { className: "gloss-more-in-lens-rail__empty", children: n })
     ] })
   ] });
 }
@@ -3043,8 +3043,8 @@ Ma.displayName = "MoreInLensRail";
 function X({
   lead: e,
   name: t,
-  secondary: a,
-  value: n,
+  secondary: n,
+  value: a,
   trail: i,
   variant: s = "default",
   onClick: o,
@@ -3059,8 +3059,8 @@ function X({
   ].filter(Boolean).join(" "), f = /* @__PURE__ */ D(te, { children: [
     e !== void 0 && /* @__PURE__ */ r("span", { className: "gloss-entity-row__lead", children: e }),
     /* @__PURE__ */ r("span", { className: "gloss-entity-row__name", title: t, children: t }),
-    a !== void 0 && /* @__PURE__ */ r("span", { className: "gloss-entity-row__secondary", children: a }),
-    /* @__PURE__ */ r("span", { className: "gloss-entity-row__value", children: n }),
+    n !== void 0 && /* @__PURE__ */ r("span", { className: "gloss-entity-row__secondary", children: n }),
+    /* @__PURE__ */ r("span", { className: "gloss-entity-row__value", children: a }),
     i !== void 0 && /* @__PURE__ */ r("span", { className: "gloss-entity-row__trail", children: i })
   ] });
   return o ? /* @__PURE__ */ r("div", { role: "listitem", className: c, style: d, children: /* @__PURE__ */ r(
@@ -3110,35 +3110,35 @@ ve.displayName = "SeverityDot";
 function ct({
   delta: e,
   direction: t = "flat",
-  "aria-label": a
+  "aria-label": n
 }) {
   if (e === "new")
     return /* @__PURE__ */ r(
       "span",
       {
         role: "img",
-        "aria-label": a,
+        "aria-label": n,
         className: "gloss-rank-delta gloss-rank-delta--new",
         children: "NEW"
       }
     );
-  const n = t === "up" ? "▲" : t === "down" ? "▼" : "—";
+  const a = t === "up" ? "▲" : t === "down" ? "▼" : "—";
   return /* @__PURE__ */ D(
     "span",
     {
       role: "img",
-      "aria-label": a,
+      "aria-label": n,
       className: `gloss-rank-delta gloss-rank-delta--${t}`,
       children: [
-        n,
+        a,
         e
       ]
     }
   );
 }
 ct.displayName = "RankDelta";
-function ye({ fill: e, variant: t = "default", className: a }) {
-  const n = Math.max(0, Math.min(100, e));
+function ye({ fill: e, variant: t = "default", className: n }) {
+  const a = Math.max(0, Math.min(100, e));
   return /* @__PURE__ */ r(
     "div",
     {
@@ -3146,9 +3146,9 @@ function ye({ fill: e, variant: t = "default", className: a }) {
       className: [
         "gloss-magnitude-bar",
         `gloss-magnitude-bar--${t}`,
-        a ?? ""
+        n ?? ""
       ].filter(Boolean).join(" "),
-      style: { "--_fill": `${n}%` },
+      style: { "--_fill": `${a}%` },
       children: /* @__PURE__ */ r("div", { className: "gloss-magnitude-bar__fill" })
     }
   );
@@ -3158,11 +3158,11 @@ const Ta = (e) => e.rankDelta === "new" ? "New entry" : e.direction === "up" ? `
 function Ia({
   label: e,
   rows: t,
-  rowCount: a,
-  rankDeltaPeriod: n,
+  rowCount: n,
+  rankDeltaPeriod: a,
   isStale: i
 }) {
-  const s = a ?? 3;
+  const s = n ?? 3;
   return /* @__PURE__ */ D(te, { children: [
     /* @__PURE__ */ r(
       he,
@@ -3206,7 +3206,7 @@ function Ia({
       }
     ),
     /* @__PURE__ */ D("div", { className: "gloss-leaderboard__zone-c", children: [
-      n ?? "WoW",
+      a ?? "WoW",
       " rank change"
     ] })
   ] });
@@ -3227,19 +3227,19 @@ const Pa = () => /* @__PURE__ */ D(
 );
 Pa.displayName = "LeaderboardTilePreview";
 const Fa = (e) => e === "critical" ? "Critical severity" : e === "warn" ? "Warning severity" : "Info severity", Ea = (e, t) => {
-  const a = e.sourceValue;
-  if (typeof a != "number") return !1;
+  const n = e.sourceValue;
+  if (typeof n != "number") return !1;
   switch (t.condition) {
     case "lt":
-      return a < t.threshold;
+      return n < t.threshold;
     case "gt":
-      return a > t.threshold;
+      return n > t.threshold;
     case "eq":
-      return a === t.threshold;
+      return n === t.threshold;
     case "gte":
-      return a >= t.threshold;
+      return n >= t.threshold;
     case "lte":
-      return a <= t.threshold;
+      return n <= t.threshold;
     default:
       return !1;
   }
@@ -3247,13 +3247,13 @@ const Fa = (e) => e === "critical" ? "Critical severity" : e === "warn" ? "Warni
 function Aa({
   label: e,
   rows: t,
-  rule: a,
-  rowCount: n,
+  rule: n,
+  rowCount: a,
   emptyStateLabel: i,
   ruleSubtitle: s,
   isStale: o
 }) {
-  const l = t.filter((c) => Ea(c, a)), d = l.slice(0, n ?? 3);
+  const l = t.filter((c) => Ea(c, n)), d = l.slice(0, a ?? 3);
   return l.length === 0 ? /* @__PURE__ */ D(te, { children: [
     /* @__PURE__ */ r(
       he,
@@ -3340,19 +3340,19 @@ const qe = ["MTD", "QTD", "YTD", "LYTD", "7D"], Qe = ["$248K", "$612K", "$1.24M"
 ], La = ({
   slotCount: e = 3,
   labels: t = qe,
-  sampleValues: a = Qe
+  sampleValues: n = Qe
 }) => {
-  const n = Array.from({ length: e }, (i, s) => ({
+  const a = Array.from({ length: e }, (i, s) => ({
     label: t[s] ?? qe[s] ?? "",
-    value: a[s] ?? Qe[s] ?? "",
+    value: n[s] ?? Qe[s] ?? "",
     sparkPath: Xe[s % Xe.length]
   }));
-  return e === 1 ? /* @__PURE__ */ r("div", { className: "gloss-stacked-group-tile-preview gloss-stacked-group-tile-preview--single", "aria-hidden": "true", children: /* @__PURE__ */ r("div", { className: "gloss-stacked-group-tile-preview__single-value", children: n[0].value }) }) : /* @__PURE__ */ r(
+  return e === 1 ? /* @__PURE__ */ r("div", { className: "gloss-stacked-group-tile-preview gloss-stacked-group-tile-preview--single", "aria-hidden": "true", children: /* @__PURE__ */ r("div", { className: "gloss-stacked-group-tile-preview__single-value", children: a[0].value }) }) : /* @__PURE__ */ r(
     "div",
     {
       className: `gloss-stacked-group-tile-preview gloss-stacked-group-tile-preview--slots-${e}`,
       "aria-hidden": "true",
-      children: n.map((i, s) => /* @__PURE__ */ D("div", { className: "gloss-stacked-group-tile-preview__row", children: [
+      children: a.map((i, s) => /* @__PURE__ */ D("div", { className: "gloss-stacked-group-tile-preview__row", children: [
         /* @__PURE__ */ r("span", { className: "gloss-stacked-group-tile-preview__row-label", children: i.label }),
         /* @__PURE__ */ r("span", { className: "gloss-stacked-group-tile-preview__row-value", children: i.value }),
         /* @__PURE__ */ r(
@@ -3418,15 +3418,15 @@ const Mr = {
 function Er({
   cell: e,
   variant: t,
-  rampColor: a,
-  colWidth: n,
+  rampColor: n,
+  colWidth: a,
   rowHeight: i,
   gap: s,
   className: o
 }) {
-  const d = (e.section * $a + e.col) * (n + s), c = e.row * (i + s), f = t === "eligibility" ? se.eligibilityFill : t === "commit" ? se.commitFill : t === "rejection" ? se.rejectionFill : (
+  const d = (e.section * $a + e.col) * (a + s), c = e.row * (i + s), f = t === "eligibility" ? se.eligibilityFill : t === "commit" ? se.commitFill : t === "rejection" ? se.rejectionFill : (
     /* ramp */
-    a ?? se.eligibilityFill
+    n ?? se.eligibilityFill
   ), h = t === "rejection", g = h ? se.rejectionStroke : "transparent", u = h ? "dashed" : "solid";
   return /* @__PURE__ */ r(
     "div",
@@ -3441,7 +3441,7 @@ function Er({
       "aria-hidden": "true",
       style: {
         transform: `translate(${d}px, ${c}px)`,
-        width: n,
+        width: a,
         height: i,
         // Use background-color longhand (NOT background shorthand) so jsdom + DOM
         // both preserve `var(...)` in inline cssText. The shorthand getter strips
@@ -3461,12 +3461,12 @@ const Ba = 3, Ka = [
 function Ar({
   cell: e,
   fireKey: t,
-  colWidth: a,
-  rowHeight: n,
+  colWidth: n,
+  rowHeight: a,
   gap: i,
   className: s
 }) {
-  const l = (e.section * Ba + e.col) * (a + i) + a / 2, d = e.row * (n + i) + n / 2;
+  const l = (e.section * Ba + e.col) * (n + i) + n / 2, d = e.row * (a + i) + a / 2;
   return tt() === "reduced" ? /* @__PURE__ */ r(
     "div",
     {
@@ -3546,14 +3546,14 @@ const za = Object.freeze({
   refusePulse: null,
   shrinkFreedCells: []
 });
-function Wa(e, t, a) {
-  const n = Math.max(0, Math.min(1, a)), i = (h) => [
+function Wa(e, t, n) {
+  const a = Math.max(0, Math.min(1, n)), i = (h) => [
     parseInt(h.slice(1, 3), 16),
     parseInt(h.slice(3, 5), 16),
     parseInt(h.slice(5, 7), 16)
   ], [s, o, l] = i(e), [d, c, f] = i(t);
-  return `rgb(${Math.round(s + (d - s) * n)}, ${Math.round(o + (c - o) * n)}, ${Math.round(
-    l + (f - l) * n
+  return `rgb(${Math.round(s + (d - s) * a)}, ${Math.round(o + (c - o) * a)}, ${Math.round(
+    l + (f - l) * a
   )})`;
 }
 function ja(e) {
@@ -3563,31 +3563,35 @@ function Ga(e) {
   return e !== "idle" && e !== "settling" && e !== "cancelled";
 }
 function Lr(e) {
-  const { edgeHover: t, sourceCell: a, cascadeResult: n, colWidth: i, rowHeight: s, gap: o } = e, d = tt() === "reduced", c = ke.useRef(t.currentColSpan), f = ke.useRef({ armed: !0, fireKey: 0, lastResult: null });
+  const { edgeHover: t, sourceCell: n, cascadeResult: a, colWidth: i, rowHeight: s, gap: o } = e, d = tt() === "reduced", c = ke.useRef(t.currentColSpan), f = ke.useRef({ armed: !0, fireKey: 0, lastResult: null });
   if (!Ga(t.state))
     return f.current.armed = !0, f.current.lastResult = null, za;
-  const h = t.hysteresisTargetColSpan, g = t.previewColSpan, u = n?.result === "rejected";
+  const h = t.hysteresisTargetColSpan, g = t.previewColSpan, u = a?.result === "rejected";
   u || (c.current = h), u && f.current.armed && f.current.lastResult !== "rejected" && (f.current.fireKey += 1, f.current.armed = !1), f.current.lastResult = u ? "rejected" : "ok";
   const N = u ? c.current : h, b = {
-    cell: a,
+    cell: { section: 0, col: 0, row: 0 },
     colSpan: N,
     pattern: u ? "dashed-retreated" : "solid"
   }, p = [];
   if (u) {
-    const _ = a.col + c.current, T = a.col + h - 1;
+    const _ = n.col + c.current, T = n.col + h - 1;
     for (let x = _; x <= T && x <= 2; x++)
       p.push({
-        cell: { section: a.section, col: x, row: a.row },
+        cell: {
+          section: 0,
+          col: x - n.col,
+          row: 0
+        },
         variant: "rejection"
       });
   } else {
     const _ = Math.abs(g - h), T = Math.max(0, Math.min(1, 1 - _));
-    for (let x = a.col; x < a.col + h && x <= 2; x++) {
-      if (x === a.col) continue;
-      const m = x === a.col + h - 1, v = {
-        section: a.section,
-        col: x,
-        row: a.row
+    for (let x = n.col; x < n.col + h && x <= 2; x++) {
+      if (x === n.col) continue;
+      const m = x === n.col + h - 1, v = {
+        section: 0,
+        col: x - n.col,
+        row: 0
       };
       m && t.direction.startsWith("grow") && h > 1 && !d && _ > 0 && _ < 1 ? p.push({
         cell: v,
@@ -3598,20 +3602,19 @@ function Lr(e) {
   }
   const M = [];
   if (t.currentColSpan > h)
-    for (let _ = a.col + h; _ < a.col + t.currentColSpan && _ <= 2; _++)
+    for (let _ = n.col + h; _ < n.col + t.currentColSpan && _ <= 2; _++)
       M.push({
-        section: a.section,
-        col: _,
-        row: a.row
+        section: 0,
+        col: _ - n.col,
+        row: 0
       });
   const P = f.current.fireKey > 0 ? {
     cell: {
-      section: a.section,
-      // Past-boundary cell (best effort — first rejected col).
+      section: 0,
       col: ja(
-        Math.min(a.col + c.current, 2)
+        Math.min(c.current, 2)
       ),
-      row: a.row
+      row: 0
     },
     fireKey: f.current.fireKey
   } : null;
@@ -3633,8 +3636,8 @@ const ne = {
 function Va({
   message: e,
   primaryAction: t,
-  onDismiss: a,
-  anchorEl: n,
+  onDismiss: n,
+  anchorEl: a,
   anchorSelector: i
 }) {
   const [s, o] = V.useState(null), l = V.useMemo(
@@ -3642,19 +3645,19 @@ function Va({
     []
   );
   V.useEffect(() => {
-    !n && !i && (typeof process > "u" || process.env.NODE_ENV !== "production") && console.error(
+    !a && !i && (typeof process > "u" || process.env.NODE_ENV !== "production") && console.error(
       "[InlineNudge] requires anchorEl or anchorSelector. AP-07: Do not mount InlineNudge in Layout/** or _app.tsx."
     );
-  }, [n, i]), V.useLayoutEffect(() => {
+  }, [a, i]), V.useLayoutEffect(() => {
     let c = null;
-    if (n ? c = n : i && (c = document.querySelector(i)), c) {
+    if (a ? c = a : i && (c = document.querySelector(i)), c) {
       const f = c.getBoundingClientRect();
       o({
         top: f.bottom + window.scrollY + 6,
         left: f.left + window.scrollX
       });
     }
-  }, [n, i]);
+  }, [a, i]);
   const d = s ? { top: s.top, left: s.left } : {};
   return /* @__PURE__ */ D(
     "div",
@@ -3681,7 +3684,7 @@ function Va({
             {
               type: "button",
               className: `${ne["gloss-inline-nudge__btn"]} ${ne["gloss-inline-nudge__btn--dismiss"]}`,
-              onClick: a,
+              onClick: n,
               "aria-label": "Dismiss",
               children: "Dismiss"
             }
@@ -3695,13 +3698,13 @@ Va.displayName = "InlineNudge";
 function Le(e) {
   return e.colorToken ? `var(--gloss-color-${e.colorToken}, ${e.color ?? "#888"})` : e.color ?? "#888";
 }
-function Ha(e, t, a) {
-  if (a <= t) {
+function Ha(e, t, n) {
+  if (n <= t) {
     const o = e[0], l = o ? Le(o) : "#888";
     return `linear-gradient(to right, ${l}, ${l})`;
   }
-  const n = a - t, s = [...e].sort((o, l) => o.value - l.value).map((o) => {
-    const l = (o.value - t) / n * 100;
+  const a = n - t, s = [...e].sort((o, l) => o.value - l.value).map((o) => {
+    const l = (o.value - t) / a * 100;
     return `${Le(o)} ${l.toFixed(2)}%`;
   });
   return s.length === 0 ? "linear-gradient(to right, #888 0%, #888 100%)" : s.length === 1 ? `linear-gradient(to right, ${s[0]}, ${s[0]})` : `linear-gradient(to right, ${s.join(", ")})`;
@@ -3712,8 +3715,8 @@ function Ua(e) {
 function Za({
   stops: e,
   onChange: t,
-  min: a = 0,
-  max: n = 100,
+  min: n = 0,
+  max: a = 100,
   step: i,
   disabled: s = !1
 }) {
@@ -3726,19 +3729,19 @@ function Za({
   O(() => {
     N.current !== u && (N.current = u, !c && g(e));
   }, [u, e, c]);
-  const b = we(() => Ha(h, a, n), [h, a, n]), p = w(
+  const b = we(() => Ha(h, n, a), [h, n, a]), p = w(
     (m) => {
-      if (!d.current) return a;
-      const v = d.current.getBoundingClientRect(), k = v.width || 1, R = Math.max(0, Math.min(1, (m - v.left) / k)), y = a + R * (n - a);
+      if (!d.current) return n;
+      const v = d.current.getBoundingClientRect(), k = v.width || 1, R = Math.max(0, Math.min(1, (m - v.left) / k)), y = n + R * (a - n);
       return l(y);
     },
-    [a, n, l]
+    [n, a, l]
   );
   O(() => {
-    n <= a && process.env.NODE_ENV !== "production" && console.warn(
-      `ThresholdRamp: max (${n}) must be greater than min (${a}); rendering degenerate strip.`
+    a <= n && process.env.NODE_ENV !== "production" && console.warn(
+      `ThresholdRamp: max (${a}) must be greater than min (${n}); rendering degenerate strip.`
     );
-  }, [a, n]);
+  }, [n, a]);
   const M = w(
     (m, v) => {
       const k = h.find((R) => R.id === v);
@@ -3765,10 +3768,10 @@ function Za({
       window.removeEventListener("pointermove", m), window.removeEventListener("pointerup", v), window.removeEventListener("pointercancel", v);
     };
   }, [c, p]);
-  const T = n - a > 0 ? n - a : 1, x = w(
+  const T = a - n > 0 ? a - n : 1, x = w(
     (m, v) => {
       if (s || v.disabled) return;
-      const k = n - a;
+      const k = a - n;
       if (k <= 0) return;
       const R = m.shiftKey ? k / 20 : k / 100;
       let y = v.value;
@@ -3782,23 +3785,23 @@ function Za({
           y = v.value - R;
           break;
         case "Home":
-          y = a;
+          y = n;
           break;
         case "End":
-          y = n;
+          y = a;
           break;
         default:
           return;
       }
       m.preventDefault();
-      const S = Math.max(a, Math.min(n, y)), F = l(S);
+      const S = Math.max(n, Math.min(a, y)), F = l(S);
       if (F === v.value) return;
       const H = h.map(
         (Y) => Y.id === v.id ? { ...Y, value: F } : Y
       );
       g(H), t(H);
     },
-    [s, a, n, h, t, l]
+    [s, n, a, h, t, l]
   );
   return /* @__PURE__ */ r("div", { className: "gloss-threshold-ramp", "data-disabled": s || void 0, children: /* @__PURE__ */ r(
     "div",
@@ -3807,7 +3810,7 @@ function Za({
       className: "gloss-threshold-ramp__track",
       style: { background: b },
       children: h.map((m) => {
-        const v = (m.value - a) / T * 100;
+        const v = (m.value - n) / T * 100;
         return /* @__PURE__ */ r(
           "span",
           {
@@ -3823,8 +3826,8 @@ function Za({
             "aria-label": m.label ?? `Stop at ${m.value}`,
             role: "slider",
             "aria-valuenow": m.value,
-            "aria-valuemin": a,
-            "aria-valuemax": n,
+            "aria-valuemin": n,
+            "aria-valuemax": a,
             "aria-disabled": m.disabled || s || void 0,
             tabIndex: m.disabled || s ? -1 : 0
           },
@@ -3840,29 +3843,29 @@ function Ya() {
   return kt(dt);
 }
 function qa({ option: e }) {
-  const t = Ya(), a = t?.isSelected(e.value) ?? !1, n = e.disabled || t?.groupDisabled, i = w(() => {
-    n || t?.select(e.value);
-  }, [n, t, e.value]), s = w(
+  const t = Ya(), n = t?.isSelected(e.value) ?? !1, a = e.disabled || t?.groupDisabled, i = w(() => {
+    a || t?.select(e.value);
+  }, [a, t, e.value]), s = w(
     (c) => {
-      n || t?.onKeyNav(c, e.value);
+      a || t?.onKeyNav(c, e.value);
     },
-    [n, t, e.value]
-  ), o = e.colorToken ? `var(--gloss-color-${e.colorToken}, ${e.color ?? "#888"})` : e.color ?? "#888", l = t?.firstFocusableValue === e.value, d = n ? -1 : l ? 0 : -1;
+    [a, t, e.value]
+  ), o = e.colorToken ? `var(--gloss-color-${e.colorToken}, ${e.color ?? "#888"})` : e.color ?? "#888", l = t?.firstFocusableValue === e.value, d = a ? -1 : l ? 0 : -1;
   return /* @__PURE__ */ r(
     "button",
     {
       ref: (c) => t?.registerRef(e.value, c),
       type: "button",
       role: "radio",
-      "aria-checked": a,
+      "aria-checked": n,
       className: "gloss-preset-swatch-row__swatch",
       style: { backgroundColor: o },
-      "data-selected": a || void 0,
-      "data-disabled": n || void 0,
+      "data-selected": n || void 0,
+      "data-disabled": a || void 0,
       ...process.env.NODE_ENV === "test" ? { "data-bg-color": o } : {},
       "aria-label": e.label ?? e.value,
-      "aria-disabled": n,
-      disabled: n,
+      "aria-disabled": a,
+      disabled: a,
       tabIndex: d,
       onClick: i,
       onKeyDown: s
@@ -3872,16 +3875,16 @@ function qa({ option: e }) {
 function Qa({
   swatches: e,
   value: t,
-  defaultValue: a,
-  onChange: n,
+  defaultValue: n,
+  onChange: a,
   disabled: i = !1,
   name: s
 }) {
-  const o = t !== void 0, [l, d] = $(a), c = o ? t : l, f = w(
+  const o = t !== void 0, [l, d] = $(n), c = o ? t : l, f = w(
     (_) => {
-      o || d(_), n?.(_);
+      o || d(_), a?.(_);
     },
-    [o, n]
+    [o, a]
   ), h = w(
     (_) => c === _,
     [c]
@@ -3949,40 +3952,40 @@ function Qa({
 }
 Qa.displayName = "PresetSwatchRow";
 function $e(e, t) {
-  for (const a of e)
-    if (a.items.some((n) => n.id === t))
-      return a.zoneKey;
+  for (const n of e)
+    if (n.items.some((a) => a.id === t))
+      return n.zoneKey;
   return null;
 }
 function et(e, t) {
-  const a = e.find((n) => n.zoneKey === t);
-  return a ? a.zoneKey : $e(e, t);
+  const n = e.find((a) => a.zoneKey === t);
+  return n ? n.zoneKey : $e(e, t);
 }
-function Xa(e, t, a) {
-  const n = [...e], [i] = n.splice(t, 1);
-  return n.splice(a, 0, i), n;
+function Xa(e, t, n) {
+  const a = [...e], [i] = a.splice(t, 1);
+  return a.splice(n, 0, i), a;
 }
 function Ja(e) {
-  return e.map((t) => `${t.zoneKey}:${t.items.map((a) => a.id).join(",")}`).join("|");
+  return e.map((t) => `${t.zoneKey}:${t.items.map((n) => n.id).join(",")}`).join("|");
 }
 function en(e) {
-  const [t, a] = $(
+  const [t, n] = $(
     () => e.zones.map((p) => p.maxItems !== void 0 && p.items.length > p.maxItems ? (process.env.NODE_ENV !== "production" && console.warn(
       `useSortableZones: zone "${p.zoneKey}" exceeds maxItems (${p.items.length} > ${p.maxItems}); trimming to cap.`
     ), { ...p, items: p.items.slice(0, p.maxItems) }) : p)
-  ), [n, i] = $(null), [s, o] = $(null), l = I(null), d = I(e.onZoneChange);
+  ), [a, i] = $(null), [s, o] = $(null), l = I(null), d = I(e.onZoneChange);
   d.current = e.onZoneChange;
   const c = we(
     () => Ja(e.zones),
     [e.zones]
   ), f = I(c);
   O(() => {
-    f.current !== c && (f.current = c, !n && a(
+    f.current !== c && (f.current = c, !a && n(
       e.zones.map((p) => p.maxItems !== void 0 && p.items.length > p.maxItems ? (process.env.NODE_ENV !== "production" && console.warn(
         `useSortableZones: zone "${p.zoneKey}" exceeds maxItems (${p.items.length} > ${p.maxItems}); trimming to cap.`
       ), { ...p, items: p.items.slice(0, p.maxItems) }) : p)
     ));
-  }, [c, e.zones, n]);
+  }, [c, e.zones, a]);
   const h = w(
     (p) => {
       const M = p.active.id;
@@ -4047,7 +4050,7 @@ function en(e) {
         ];
         m[v] = { ...R, items: U }, m[k] = { ...y, items: Z };
       }
-      a(m), d.current?.(m), _();
+      n(m), d.current?.(m), _();
     },
     [t]
   ), N = w(
@@ -4070,7 +4073,7 @@ function en(e) {
   return {
     zones: t,
     activeZone: s,
-    activeItem: n,
+    activeItem: a,
     getZoneProps: N,
     getItemProps: b,
     handleDragStart: h,
@@ -4094,30 +4097,30 @@ const tn = [
   "verticalListSortingStrategy"
 ];
 function nn(e, t) {
-  const a = [], n = e ?? {};
+  const n = [], a = e ?? {};
   for (const s of tn)
-    n[s] === void 0 && a.push(`@dnd-kit/core:${s}`);
+    a[s] === void 0 && n.push(`@dnd-kit/core:${s}`);
   const i = t ?? {};
   for (const s of an)
-    i[s] === void 0 && a.push(`@dnd-kit/sortable:${s}`);
-  return a.length === 0 ? { ok: !0 } : { ok: !1, missing: a };
+    i[s] === void 0 && n.push(`@dnd-kit/sortable:${s}`);
+  return n.length === 0 ? { ok: !0 } : { ok: !1, missing: n };
 }
 function rn() {
   return pe ? Promise.resolve(pe) : Ie ? Promise.resolve(null) : De || (De = (async () => {
     try {
-      const [e, t, a] = await Promise.all([
+      const [e, t, n] = await Promise.all([
         import("@dnd-kit/core"),
         import("@dnd-kit/sortable"),
         import("@dnd-kit/utilities").catch(() => (process.env.NODE_ENV !== "production" && console.warn(
           "SortableZones: @dnd-kit/utilities failed to load; drag-overlay positioning will fall back (items may teleport instead of slide)."
         ), {}))
-      ]), n = nn(e, t);
-      return n.ok ? (pe = {
+      ]), a = nn(e, t);
+      return a.ok ? (pe = {
         core: e,
         sortable: t,
-        utilities: a
+        utilities: n
       }, pe) : (Ie = !0, process.env.NODE_ENV !== "production" && console.error(
-        `SortableZones: @dnd-kit shape mismatch — missing exports: ${n.missing.join(", ")}. Check installed versions against optionalDependencies in @mt-gloss/ui.`
+        `SortableZones: @dnd-kit shape mismatch — missing exports: ${a.missing.join(", ")}. Check installed versions against optionalDependencies in @mt-gloss/ui.`
       ), null);
     } catch {
       return Ie = !0, null;
@@ -4125,7 +4128,7 @@ function rn() {
   })(), De);
 }
 function sn(e) {
-  const { zones: t, onZoneChange: a, renderZone: n, renderItem: i, renderDragOverlay: s } = e, o = en({ zones: t, onZoneChange: a }), [l, d] = V.useState(pe);
+  const { zones: t, onZoneChange: n, renderZone: a, renderItem: i, renderDragOverlay: s } = e, o = en({ zones: t, onZoneChange: n }), [l, d] = V.useState(pe);
   return V.useEffect(() => {
     if (l) return;
     let c = !0;
@@ -4139,21 +4142,21 @@ function sn(e) {
     {
       state: o,
       modules: l,
-      renderZone: n,
+      renderZone: a,
       renderItem: i,
       renderDragOverlay: s
     }
   ) : /* @__PURE__ */ r("div", { "data-sortable-zones-passive": "true", children: o.zones.map((c) => {
     const f = c.items.map((h) => /* @__PURE__ */ r(V.Fragment, { children: i(h) }, h.id));
-    return /* @__PURE__ */ r("div", { ...o.getZoneProps(c.zoneKey), children: n(c.zoneKey, c.items, f) }, c.zoneKey);
+    return /* @__PURE__ */ r("div", { ...o.getZoneProps(c.zoneKey), children: a(c.zoneKey, c.items, f) }, c.zoneKey);
   }) });
 }
 sn.displayName = "SortableZones";
 function ut({
   state: e,
   modules: t,
-  renderZone: a,
-  renderItem: n,
+  renderZone: n,
+  renderItem: a,
   renderDragOverlay: i
 }) {
   const { core: s, sortable: o, utilities: l } = t, { DndContext: d, DragOverlay: c, useSensors: f, useSensor: h, useDroppable: g, PointerSensor: u, KeyboardSensor: N, closestCenter: b } = s, { SortableContext: p, verticalListSortingStrategy: M } = o, P = f(
@@ -4176,7 +4179,7 @@ function ut({
               id: R.id,
               useSortable: o.useSortable,
               cssHelper: l.CSS,
-              children: n(R)
+              children: a(R)
             },
             R.id
           ));
@@ -4186,47 +4189,47 @@ function ut({
               zoneKey: m.zoneKey,
               zoneProps: e.getZoneProps(m.zoneKey),
               useDroppable: g,
-              children: /* @__PURE__ */ r(x, { items: v, strategy: M, children: a(m.zoneKey, m.items, k) })
+              children: /* @__PURE__ */ r(x, { items: v, strategy: M, children: n(m.zoneKey, m.items, k) })
             },
             m.zoneKey
           );
         }),
-        /* @__PURE__ */ r(T, { children: e.activeItem ? i?.(e.activeItem) ?? n(e.activeItem) : null })
+        /* @__PURE__ */ r(T, { children: e.activeItem ? i?.(e.activeItem) ?? a(e.activeItem) : null })
       ]
     }
   );
 }
 ut.displayName = "SortableZonesInner";
-function mt({ id: e, useSortable: t, cssHelper: a, children: n }) {
+function mt({ id: e, useSortable: t, cssHelper: n, children: a }) {
   const { attributes: i, listeners: s, setNodeRef: o, transform: l, transition: d, isDragging: c } = t({ id: e }), f = {
-    transform: a?.Transform?.toString(l) ?? void 0,
+    transform: n?.Transform?.toString(l) ?? void 0,
     transition: d,
     opacity: c ? 0.5 : 1
   };
-  return /* @__PURE__ */ r("div", { ref: o, style: f, "data-sortable-item-id": e, ...i, ...s, children: n });
+  return /* @__PURE__ */ r("div", { ref: o, style: f, "data-sortable-item-id": e, ...i, ...s, children: a });
 }
 mt.displayName = "SortableItem";
 function gt({
   zoneKey: e,
   zoneProps: t,
-  useDroppable: a,
-  children: n
+  useDroppable: n,
+  children: a
 }) {
-  const { setNodeRef: i, isOver: s } = a({ id: e });
-  return /* @__PURE__ */ r("div", { ref: i, "data-zone-is-over": s || void 0, ...t, children: n });
+  const { setNodeRef: i, isOver: s } = n({ id: e });
+  return /* @__PURE__ */ r("div", { ref: i, "data-zone-is-over": s || void 0, ...t, children: a });
 }
 gt.displayName = "ZoneDroppable";
 function $r({
   slotLeft: e,
   slotCenter: t,
-  slotRight: a,
-  height: n = 36,
+  slotRight: n,
+  height: a = 36,
   className: i,
   style: s,
   "aria-label": o = "Dashboard navigation"
 }) {
   const l = {
-    "--gloss-bottom-toolbar-height": `${n}px`,
+    "--gloss-bottom-toolbar-height": `${a}px`,
     ...s
   };
   return /* @__PURE__ */ D(
@@ -4259,7 +4262,7 @@ function $r({
           {
             className: "gloss-bottom-toolbar__slot gloss-bottom-toolbar__slot--right",
             "data-slot": "right",
-            children: a
+            children: n
           }
         )
       ]
@@ -4269,8 +4272,8 @@ function $r({
 function Br({
   count: e,
   currentIndex: t,
-  onSelect: a,
-  "aria-label": n = "Sections",
+  onSelect: n,
+  "aria-label": a = "Sections",
   provisionalIndex: i,
   pulseIndex: s,
   pulseNonce: o,
@@ -4283,7 +4286,7 @@ function Br({
     "div",
     {
       role: "tablist",
-      "aria-label": n,
+      "aria-label": a,
       "data-testid": "gloss-section-dots",
       className: "gloss-section-dots",
       onKeyDown: (b) => {
@@ -4291,11 +4294,11 @@ function Br({
           if (b.key === "ArrowRight") {
             b.preventDefault();
             const p = (c + 1) % e;
-            a(p), requestAnimationFrame(() => u.current[p]?.focus());
+            n(p), requestAnimationFrame(() => u.current[p]?.focus());
           } else if (b.key === "ArrowLeft") {
             b.preventDefault();
             const p = (c - 1 + e) % e;
-            a(p), requestAnimationFrame(() => u.current[p]?.focus());
+            n(p), requestAnimationFrame(() => u.current[p]?.focus());
           }
         }
       },
@@ -4327,7 +4330,7 @@ function Br({
               "gloss-section-dots__dot",
               p === c && "gloss-section-dots__dot--current"
             ].filter(Boolean).join(" "),
-            onClick: () => a(p)
+            onClick: () => n(p)
           },
           p === s ? `${p}-${o ?? 0}` : p
         ))
@@ -4335,23 +4338,23 @@ function Br({
     }
   );
 }
-const on = V.forwardRef(({ density: e = "compact", children: t, ...a }, n) => {
-  const i = { ...a };
-  return delete i.className, delete i.style, /* @__PURE__ */ r("div", { ref: n, className: "gloss-container-toolbar", role: "toolbar", ...i, children: /* @__PURE__ */ r(Be, { region: "toolbar", density: e, children: t }) });
+const on = V.forwardRef(({ density: e = "compact", children: t, ...n }, a) => {
+  const i = { ...n };
+  return delete i.className, delete i.style, /* @__PURE__ */ r("div", { ref: a, className: "gloss-container-toolbar", role: "toolbar", ...i, children: /* @__PURE__ */ r(Be, { region: "toolbar", density: e, children: t }) });
 });
 on.displayName = "ContainerToolbar";
-const ln = V.forwardRef(({ legend: e, description: t, density: a = "default", children: n, ...i }, s) => {
+const ln = V.forwardRef(({ legend: e, description: t, density: n = "default", children: a, ...i }, s) => {
   const o = { ...i };
   return delete o.className, delete o.style, /* @__PURE__ */ D("fieldset", { ref: s, className: "gloss-container-form-section", ...o, children: [
     e && /* @__PURE__ */ r("legend", { className: "gloss-container-form-section__legend", children: e }),
     t && /* @__PURE__ */ r("p", { className: "gloss-container-form-section__description", children: t }),
-    /* @__PURE__ */ r(Be, { region: "form-section", density: a, children: n })
+    /* @__PURE__ */ r(Be, { region: "form-section", density: n, children: a })
   ] });
 });
 ln.displayName = "ContainerFormSection";
-const cn = V.forwardRef(({ density: e = "compact", children: t, ...a }, n) => {
-  const i = { ...a };
-  return delete i.className, delete i.style, /* @__PURE__ */ r("div", { ref: n, className: "gloss-container-table", ...i, children: /* @__PURE__ */ r(Be, { region: "table", density: e, children: t }) });
+const cn = V.forwardRef(({ density: e = "compact", children: t, ...n }, a) => {
+  const i = { ...n };
+  return delete i.className, delete i.style, /* @__PURE__ */ r("div", { ref: a, className: "gloss-container-table", ...i, children: /* @__PURE__ */ r(Be, { region: "table", density: e, children: t }) });
 });
 cn.displayName = "ContainerTable";
 export {