@mt-gloss/ui 0.1.78 → 0.1.80

package/index.js

@@ -41,7 +41,7 @@ function nn(e) {
       n === void 0 && f(p), a?.(p);
     },
     [n, a]
-  ), w = _(() => t.map((p, b) => ({ item: p, index: b })).filter(({ item: p, index: b }) => !l?.(p, b)).map(({ index: p }) => p), [t, l]), S = _(
+  ), w = _(() => t.map((p, b) => ({ item: p, index: b })).filter(({ item: p, index: b }) => !l?.(p, b)).map(({ index: p }) => p), [t, l]), N = _(
     (p, b) => {
       const y = w();
       if (y.length === 0) return -1;
@@ -55,23 +55,23 @@ function nn(e) {
   ), h = _(() => {
     const p = w();
     p.length > 0 && g(p[0]);
-  }, [w, g]), N = _(() => {
+  }, [w, g]), S = _(() => {
     const p = w();
     p.length > 0 && g(p[p.length - 1]);
   }, [w, g]), M = _(() => {
-    const p = S(d, 1);
+    const p = N(d, 1);
     p !== -1 && g(p);
-  }, [d, S, g]), C = _(() => {
-    const p = S(d, -1);
+  }, [d, N, g]), C = _(() => {
+    const p = N(d, -1);
     p !== -1 && g(p);
-  }, [d, S, g]), k = _(() => {
+  }, [d, N, g]), k = _(() => {
     g(-1);
   }, [g]), R = _(
     (p) => {
       if (!o) return;
       const { key: b } = p, y = b === "ArrowUp" && (s === "vertical" || s === "both"), D = b === "ArrowDown" && (s === "vertical" || s === "both"), T = b === "ArrowLeft" && (s === "horizontal" || s === "both"), x = b === "ArrowRight" && (s === "horizontal" || s === "both");
       if (y || T) {
-        p.preventDefault(), d === -1 ? N() : C();
+        p.preventDefault(), d === -1 ? S() : C();
         return;
       }
       if (D || x) {
@@ -83,7 +83,7 @@ function nn(e) {
         return;
       }
       if (b === "End") {
-        p.preventDefault(), N();
+        p.preventDefault(), S();
         return;
       }
       if ((b === "Enter" || b === " ") && d >= 0 && d < t.length) {
@@ -103,7 +103,7 @@ function nn(e) {
       d,
       t,
       h,
-      N,
+      S,
       M,
       C,
       l,
@@ -116,7 +116,7 @@ function nn(e) {
     setFocusedIndex: g,
     handleKeyDown: R,
     focusFirst: h,
-    focusLast: N,
+    focusLast: S,
     focusNext: M,
     focusPrevious: C,
     resetFocus: k
@@ -521,6 +521,16 @@ function Ee(e) {
         // D-09 — uniform blue. NO conditional based on grow vs shrink.
         // STOP CONDITION: do not branch this on direction.
         width: o,
+        // Geometry — ghost is anchored at the host's TOP-LEFT and spans the
+        // host's full height (per resize-pill-prototype.jsx line 382:
+        //   left: 0, top: 0, width: spanToWidth(previewASpan), height: '100%').
+        // Required because the SCSS rule only sets `position: absolute` + z;
+        // without explicit top/left/height, motion/react falls back to natural
+        // flow (which placed the ghost below the card with 0 height —
+        // observed 2026-05-10 PM as "single dashed line below card").
+        top: 0,
+        left: 0,
+        height: "100%",
         borderStyle: "dashed",
         borderWidth: 2,
         borderColor: "rgba(53, 122, 232, 0.5)",
@@ -547,7 +557,7 @@ function Ae(e) {
     staggerMs: u
   } = e;
   if (!t) return null;
-  const c = s + a, m = o - i, f = Math.max(0, m - c);
+  const c = n === "grow", m = c ? s + a : s + i, f = c ? o - i : o - a, d = Math.max(0, f - m);
   return /* @__PURE__ */ r(
     "div",
     {
@@ -556,10 +566,18 @@ function Ae(e) {
       "data-resize-pill-chain-direction": n,
       className: "gloss-resize-pill-chain",
       style: {
-        left: c,
-        width: f
+        // Match prototype line 384: top:0, height:'100%', display:flex,
+        // alignItems:'center'. Without explicit top/height the chain falls
+        // to natural flow (below the card). SCSS already provides
+        // display:flex + justify-content:space-between; alignItems:center is
+        // set here so chevrons land at the host's vertical midline.
+        top: 0,
+        height: "100%",
+        alignItems: "center",
+        left: m,
+        width: d
       },
-      children: (n === "grow" ? [0, 1, 2, 3, 4] : [4, 3, 2, 1, 0]).map((g, w) => /* @__PURE__ */ r(
+      children: (n === "grow" ? [0, 1, 2, 3, 4] : [4, 3, 2, 1, 0]).map((w, N) => /* @__PURE__ */ r(
         G.span,
         {
           className: [
@@ -574,11 +592,11 @@ function Ae(e) {
             duration: l / 1e3,
             repeat: 1 / 0,
             ease: "easeInOut",
-            delay: g * u / 1e3
+            delay: w * u / 1e3
           },
           children: "›"
         },
-        w
+        N
       ))
     }
   );
@@ -853,11 +871,11 @@ function fn(e) {
   }, [e.forceIdle]), A(() => () => {
     c.current && clearTimeout(c.current), m.current && clearTimeout(m.current);
   }, []);
-  const S = _(() => {
+  const N = _(() => {
     u.current || g.current || (s(f.current), a("pill-visible"));
   }, []), h = _(() => {
     a("idle"), l(null);
-  }, []), N = _(
+  }, []), S = _(
     (x) => {
       u.current = !0, c.current && clearTimeout(c.current), c.current = setTimeout(() => {
         u.current = !1, c.current = null;
@@ -865,8 +883,8 @@ function fn(e) {
     },
     [t.fadeGraceMs]
   ), M = _(() => {
-    m.current && (clearTimeout(m.current), m.current = null), S();
-  }, [S]), C = _(() => {
+    m.current && (clearTimeout(m.current), m.current = null), N();
+  }, [N]), C = _(() => {
     m.current && clearTimeout(m.current), m.current = setTimeout(() => {
       h(), m.current = null;
     }, t.hoverHideGraceMs);
@@ -884,9 +902,9 @@ function fn(e) {
     l(null), a((x) => x === "pre-commit" ? "pill-visible" : x);
   }, []), y = _(
     (x) => {
-      N(x);
+      S(x);
     },
-    [N]
+    [S]
   );
   let D = null;
   return o !== null && (o === "compact" || o === "medium" || o === "full" ? (D = o, D === e.currentTarget && (D = null)) : o === "grow" && typeof e.currentTarget == "number" ? D = e.currentTarget + 1 : o === "shrink" && typeof e.currentTarget == "number" && (D = e.currentTarget - 1)), {
@@ -904,7 +922,7 @@ function fn(e) {
       onButtonLeave: b,
       onButtonClick: y
     },
-    commit: N
+    commit: S
   };
 }
 function bn(e) {
@@ -1290,10 +1308,10 @@ const Et = function({
   activePage: c
 }) {
   const m = P(null), [f, d] = E(!1), g = _(() => {
-    d((N) => !N);
+    d((S) => !S);
   }, []), w = _(() => {
     d(!1);
-  }, []), S = a[t]?.id ?? "";
+  }, []), N = a[t]?.id ?? "";
   return /* @__PURE__ */ v(
     "div",
     {
@@ -1334,7 +1352,7 @@ const Et = function({
             onDismiss: w,
             anchorRef: m,
             pages: a,
-            activePageId: S,
+            activePageId: N,
             onPageChange: i,
             onCreatePage: s,
             onManagePages: o
@@ -2026,27 +2044,27 @@ const Ht = ({
   const s = P(null), o = P([]), l = Gt(), u = re(() => Array.from(e), [e]);
   if (u.length === 0) return null;
   const c = a ? `Configure ${a}: choose a dimension` : void 0, m = l ? "10ms" : "200ms", f = (d, g) => {
-    const w = u.length - 1, S = (h) => {
-      const N = o.current[h];
-      N && N.focus();
+    const w = u.length - 1, N = (h) => {
+      const S = o.current[h];
+      S && S.focus();
     };
     switch (d.key) {
       case "ArrowRight":
       case "ArrowDown": {
-        d.preventDefault(), S(g === w ? 0 : g + 1);
+        d.preventDefault(), N(g === w ? 0 : g + 1);
         break;
       }
       case "ArrowLeft":
       case "ArrowUp": {
-        d.preventDefault(), S(g === 0 ? w : g - 1);
+        d.preventDefault(), N(g === 0 ? w : g - 1);
         break;
       }
       case "Home": {
-        d.preventDefault(), S(0);
+        d.preventDefault(), N(0);
         break;
       }
       case "End": {
-        d.preventDefault(), S(w);
+        d.preventDefault(), N(w);
         break;
       }
       case "Enter":
@@ -2070,7 +2088,7 @@ const Ht = ({
         "--gloss-reconfig-backside-buttons-transition-duration": m
       },
       children: u.map((d, g) => {
-        const w = Kt[d], S = n === d;
+        const w = Kt[d], N = n === d;
         return /* @__PURE__ */ v(
           "button",
           {
@@ -2081,9 +2099,9 @@ const Ht = ({
             "data-dimension": d,
             className: Se(
               "gloss-reconfig-backside-buttons__button",
-              S && "gloss-reconfig-backside-buttons__button--active"
+              N && "gloss-reconfig-backside-buttons__button--active"
             ),
-            "aria-current": S ? "true" : void 0,
+            "aria-current": N ? "true" : void 0,
             onClick: () => t(d),
             onKeyDown: (h) => f(h, g),
             children: [
@@ -2554,7 +2572,7 @@ function Yn({
   style: d
 }) {
   if (e === "hidden") return null;
-  const g = Math.max(0, i - a), w = Math.max(0, u - l), S = {
+  const g = Math.max(0, i - a), w = Math.max(0, u - l), N = {
     "--gloss-resize-envelope-enter-ms": `${c}ms`,
     "--gloss-resize-envelope-exit-ms": `${m}ms`,
     "--gloss-resize-envelope-origin-x": `${t - a}px`,
@@ -2571,7 +2589,7 @@ function Yn({
       className: ["gloss-resize-envelope", `gloss-resize-envelope--state-${e}`, f].filter(Boolean).join(" "),
       "data-state": e,
       "data-testid": "gloss-resize-envelope",
-      style: S,
+      style: N,
       "aria-hidden": "true",
       children: [
         /* @__PURE__ */ r(
@@ -2872,14 +2890,14 @@ function rr({
     if (process.env.NODE_ENV === "production")
       return { values: {}, spec: null, state: "idle", t: performance.now() };
     const f = m.current;
-    let d = 0, g = "", w = "", S = "";
+    let d = 0, g = "", w = "", N = "";
     if (f)
       try {
         const M = window.getComputedStyle(f), C = M.outline || "", k = M.border || "", R = M.boxShadow || "", p = !!C && C !== "none" && !/^0px(\s+none)?(\s+rgba?\(0,\s*0,\s*0,\s*0\))?$/i.test(C), b = !!k && k !== "none" && !/^0px(\s+none)?(\s+rgba?\(0,\s*0,\s*0,\s*0\))?$/i.test(k), y = !!R && R !== "none";
-        d = p || b || y ? 1 : 0, g = p ? C : "", w = b ? k : "", S = y ? R : "";
+        d = p || b || y ? 1 : 0, g = p ? C : "", w = b ? k : "", N = y ? R : "";
       } catch {
       }
-    const h = f?.getBoundingClientRect() ?? null, N = f ? "drag-clone" : "subsumed-by-tracking-outline";
+    const h = f?.getBoundingClientRect() ?? null, S = f ? "drag-clone" : "subsumed-by-tracking-outline";
     return {
       values: {
         x: s.get(),
@@ -2892,11 +2910,11 @@ function rr({
         outlineOnClone: d
       },
       spec: {
-        mode: N,
+        mode: S,
         tint: e,
         outlineSrc: g,
         borderSrc: w,
-        boxShadowSrc: S
+        boxShadowSrc: N
         // D-01 contract: Frame 1 (current/buggy) shows outline-on-clone=true;
         // Frame 2 (decided): outline-on-clone=false (subsumed by tracking
         // outline). Wave 2 audit-D-01 reads this field across drag mid-flight
@@ -2935,7 +2953,7 @@ function Ge({
   className: u,
   motionWidth: c
 }) {
-  const m = n * a + (n - 1) * i, d = (t.section * na + t.col) * (a + i), g = t.row * (s + i), w = e === "resize" ? 2.5 : 2, S = o === "dashed-retreated" ? "dashed" : "solid", h = e === "drag" ? "gloss-snap-outline" : "gloss-tracking-outline", N = {
+  const m = n * a + (n - 1) * i, d = (t.section * na + t.col) * (a + i), g = t.row * (s + i), w = e === "resize" ? 2.5 : 2, N = o === "dashed-retreated" ? "dashed" : "solid", h = e === "drag" ? "gloss-snap-outline" : "gloss-tracking-outline", S = {
     className: [
       "gloss-tracking-outline",
       `gloss-tracking-outline--${e}`,
@@ -2954,25 +2972,25 @@ function Ge({
   return c ? /* @__PURE__ */ r(
     G.div,
     {
-      ...N,
+      ...S,
       style: {
         transform: `translate(${d}px, ${g}px)`,
         width: c,
         height: s,
         borderWidth: w,
-        borderStyle: S
+        borderStyle: N
       }
     }
   ) : /* @__PURE__ */ r(
     "div",
     {
-      ...N,
+      ...S,
       style: {
         transform: `translate(${d}px, ${g}px)`,
         width: m,
         height: s,
         borderWidth: w,
-        borderStyle: S,
+        borderStyle: N,
         transition: `transform ${l}ms cubic-bezier(0.4, 0, 0.2, 1)`
       }
     }
@@ -3819,15 +3837,15 @@ function yr(e) {
     };
   const d = t.hysteresisTargetColSpan, g = t.previewColSpan, w = a?.result === "rejected";
   w || (o.current = d), w && l.current.armed && l.current.lastResult !== "rejected" && (l.current.fireKey += 1, l.current.armed = !1), l.current.lastResult = w ? "rejected" : "ok";
-  const S = w ? o.current : d, h = {
+  const N = w ? o.current : d, h = {
     cell: { section: 0, col: 0, row: 0 },
-    colSpan: S,
+    colSpan: N,
     pattern: w ? "dashed-retreated" : "solid"
-  }, N = [];
+  }, S = [];
   if (w) {
     const k = n.col + o.current, R = n.col + d - 1;
     for (let p = k; p <= R && p <= 2; p++)
-      N.push({
+      S.push({
         cell: {
           section: 0,
           col: p - n.col,
@@ -3844,11 +3862,11 @@ function yr(e) {
         col: p - n.col,
         row: 0
       };
-      b && t.direction.startsWith("grow") && d > 1 && !s && k > 0 && k < 1 ? N.push({
+      b && t.direction.startsWith("grow") && d > 1 && !s && k > 0 && k < 1 ? S.push({
         cell: y,
         variant: "ramp",
         rampColor: Ca(Me.eligibilityFill, Me.commitFill, R)
-      }) : b ? N.push({ cell: y, variant: "commit" }) : N.push({ cell: y, variant: "eligibility" });
+      }) : b ? S.push({ cell: y, variant: "commit" }) : S.push({ cell: y, variant: "eligibility" });
     }
   }
   const M = [];
@@ -3871,7 +3889,7 @@ function yr(e) {
   } : null;
   return {
     trackingOutline: h,
-    cellTints: N,
+    cellTints: S,
     refusePulse: C,
     shrinkFreedCells: M,
     phase: c.current,
@@ -3982,7 +4000,7 @@ function Ta({
   A(() => {
     w.current !== g && (w.current = g, !c && d(e));
   }, [g, e, c]);
-  const S = re(() => Da(f, n, a), [f, n, a]), h = _(
+  const N = re(() => Da(f, n, a), [f, n, a]), h = _(
     (p) => {
       if (!u.current) return n;
       const b = u.current.getBoundingClientRect(), y = b.width || 1, D = Math.max(0, Math.min(1, (p - b.left) / y)), T = n + D * (a - n);
@@ -3995,7 +4013,7 @@ function Ta({
       `ThresholdRamp: max (${a}) must be greater than min (${n}); rendering degenerate strip.`
     );
   }, [n, a]);
-  const N = _(
+  const S = _(
     (p, b) => {
       const y = f.find((D) => D.id === b);
       s || y?.disabled || (p.preventDefault(), m(b));
@@ -4061,7 +4079,7 @@ function Ta({
     {
       ref: u,
       className: "gloss-threshold-ramp__track",
-      style: { background: S },
+      style: { background: N },
       children: f.map((p) => {
         const b = (p.value - n) / k * 100;
         return /* @__PURE__ */ r(
@@ -4074,7 +4092,7 @@ function Ta({
             },
             "data-disabled": p.disabled || void 0,
             "data-dragging": c === p.id || void 0,
-            onPointerDown: (y) => N(y, p.id),
+            onPointerDown: (y) => S(y, p.id),
             onKeyDown: (y) => R(y, p),
             "aria-label": p.label ?? `Stop at ${p.value}`,
             role: "slider",
@@ -4143,10 +4161,10 @@ function Pa({
     [c]
   ), d = P(/* @__PURE__ */ new Map()), g = _((C, k) => {
     k ? d.current.set(C, k) : d.current.delete(C);
-  }, []), w = e.filter((C) => !C.disabled && !i), S = w.find((C) => C.value === c)?.value ?? w[0]?.value, h = _((C) => {
+  }, []), w = e.filter((C) => !C.disabled && !i), N = w.find((C) => C.value === c)?.value ?? w[0]?.value, h = _((C) => {
     const k = d.current.get(C);
     k && k.focus();
-  }, []), N = _(
+  }, []), S = _(
     (C, k) => {
       if (i) return;
       const R = e.filter((D) => !D.disabled);
@@ -4188,8 +4206,8 @@ function Pa({
     groupDisabled: i,
     name: s,
     registerRef: g,
-    firstFocusableValue: S,
-    onKeyNav: N
+    firstFocusableValue: N,
+    onKeyNav: S
   };
   return /* @__PURE__ */ r(We.Provider, { value: M, children: /* @__PURE__ */ r(
     "div",
@@ -4241,10 +4259,10 @@ function Aa(e) {
   }, [c, e.zones, a]);
   const f = _(
     (h) => {
-      const N = h.active.id;
+      const S = h.active.id;
       let M = null, C = null;
       for (const k of t) {
-        const R = k.items.find((p) => p.id === N);
+        const R = k.items.find((p) => p.id === S);
         if (R) {
           M = R, C = k.zoneKey;
           break;
@@ -4259,38 +4277,38 @@ function Aa(e) {
         o(l.current);
         return;
       }
-      const N = Pe(t, h.over.id);
-      o(N);
+      const S = Pe(t, h.over.id);
+      o(S);
     },
     [t]
   ), g = _(
     (h) => {
-      const { active: N, over: M } = h, C = () => {
+      const { active: S, over: M } = h, C = () => {
         l.current = null, i(null), o(null);
       };
       if (!M) {
         C();
         return;
       }
-      const k = he(t, N.id), R = Pe(t, M.id);
+      const k = he(t, S.id), R = Pe(t, M.id);
       if (!k || !R) {
         C();
         return;
       }
       let p = t.map((b) => ({ ...b, items: [...b.items] }));
       if (k === R) {
-        const b = p.findIndex((I) => I.zoneKey === k), y = p[b], D = y.items.findIndex((I) => I.id === N.id), T = y.items.findIndex((I) => I.id === M.id), x = T >= 0 ? T : Math.max(0, y.items.length - 1);
+        const b = p.findIndex((I) => I.zoneKey === k), y = p[b], D = y.items.findIndex((I) => I.id === S.id), T = y.items.findIndex((I) => I.id === M.id), x = T >= 0 ? T : Math.max(0, y.items.length - 1);
         p[b] = {
           ...y,
           items: Ia(y.items, D, x)
         };
       } else {
-        const b = p.findIndex((O) => O.zoneKey === k), y = p.findIndex((O) => O.zoneKey === R), D = p[b], T = p[y], x = D.items.find((O) => O.id === N.id);
+        const b = p.findIndex((O) => O.zoneKey === k), y = p.findIndex((O) => O.zoneKey === R), D = p[b], T = p[y], x = D.items.find((O) => O.id === S.id);
         if (!x) {
           C();
           return;
         }
-        const I = D.items.filter((O) => O.id !== N.id), L = T.items.findIndex((O) => O.id === M.id), Z = L >= 0 ? L : T.items.length;
+        const I = D.items.filter((O) => O.id !== S.id), L = T.items.findIndex((O) => O.id === M.id), Z = L >= 0 ? L : T.items.length;
         let be = I, H = [...T.items];
         if (T.maxItems !== void 0 && H.length >= T.maxItems) {
           const O = H[H.length - 1];
@@ -4312,13 +4330,13 @@ function Aa(e) {
       "data-zone-key": h
     }),
     []
-  ), S = _(
+  ), N = _(
     (h) => {
-      const N = he(t, h.id) ?? "";
+      const S = he(t, h.id) ?? "";
       return {
         id: h.id,
         "data-item-id": h.id,
-        "data-zone-key": N
+        "data-zone-key": S
       };
     },
     [t]
@@ -4328,7 +4346,7 @@ function Aa(e) {
     activeZone: s,
     activeItem: a,
     getZoneProps: w,
-    getItemProps: S,
+    getItemProps: N,
     handleDragStart: f,
     handleDragOver: d,
     handleDragEnd: g
@@ -4412,7 +4430,7 @@ function Ve({
   renderItem: a,
   renderDragOverlay: i
 }) {
-  const { core: s, sortable: o, utilities: l } = t, { DndContext: u, DragOverlay: c, useSensors: m, useSensor: f, useDroppable: d, PointerSensor: g, KeyboardSensor: w, closestCenter: S } = s, { SortableContext: h, verticalListSortingStrategy: N } = o, M = m(
+  const { core: s, sortable: o, utilities: l } = t, { DndContext: u, DragOverlay: c, useSensors: m, useSensor: f, useDroppable: d, PointerSensor: g, KeyboardSensor: w, closestCenter: N } = s, { SortableContext: h, verticalListSortingStrategy: S } = o, M = m(
     f(g, { activationConstraint: { distance: 5 } }),
     f(w)
   ), C = u, k = c, R = h;
@@ -4420,7 +4438,7 @@ function Ve({
     C,
     {
       sensors: M,
-      collisionDetection: S,
+      collisionDetection: N,
       onDragStart: e.handleDragStart,
       onDragOver: e.handleDragOver,
       onDragEnd: e.handleDragEnd,
@@ -4442,7 +4460,7 @@ function Ve({
               zoneKey: p.zoneKey,
               zoneProps: e.getZoneProps(p.zoneKey),
               useDroppable: d,
-              children: /* @__PURE__ */ r(R, { items: b, strategy: N, children: n(p.zoneKey, p.items, y) })
+              children: /* @__PURE__ */ r(R, { items: b, strategy: S, children: n(p.zoneKey, p.items, y) })
             },
             p.zoneKey
           );
@@ -4542,14 +4560,14 @@ function _r({
       "aria-label": a,
       "data-testid": "gloss-section-dots",
       className: "gloss-section-dots",
-      onKeyDown: (S) => {
+      onKeyDown: (N) => {
         if (e !== 0) {
-          if (S.key === "ArrowRight") {
-            S.preventDefault();
+          if (N.key === "ArrowRight") {
+            N.preventDefault();
             const h = (c + 1) % e;
             n(h), requestAnimationFrame(() => g.current[h]?.focus());
-          } else if (S.key === "ArrowLeft") {
-            S.preventDefault();
+          } else if (N.key === "ArrowLeft") {
+            N.preventDefault();
             const h = (c - 1 + e) % e;
             n(h), requestAnimationFrame(() => g.current[h]?.focus());
           }
@@ -4567,11 +4585,11 @@ function _r({
             }
           }
         ),
-        Array.from({ length: e }, (S, h) => /* @__PURE__ */ r(
+        Array.from({ length: e }, (N, h) => /* @__PURE__ */ r(
           "button",
           {
-            ref: (N) => {
-              g.current[h] = N;
+            ref: (S) => {
+              g.current[h] = S;
             },
             type: "button",
             role: "tab",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mt-gloss/ui",
-  "version": "0.1.78",
+  "version": "0.1.80",
   "type": "module",
   "publishConfig": {
     "access": "restricted"