@mt-gloss/ui 0.1.14 → 0.1.15

package/index.js

@@ -1,4 +1,4 @@
-import { N as On, T as An, O as Ln, Q as $n, a3 as Bn, b6 as zn, az as Kn, ah as Wn, Z as Gn, an as Hn, K as Vn, a8 as jn, bn as Un, P as Zn, B as Yn, a as qn, y as Qn, H as Xn, bi as Jn, F as er, J as tr, A as ar, z as nr, bh as rr, E as sr, D as or, bw as ir, b as lr, C as cr, L as dr, o as ur, ad as mr, aN as gr, y as pr, H as fr, F as hr, J as br, A as vr, z as yr, E as wr, D as Dr, a$ as Nr, b2 as Cr, b1 as kr, b0 as _r, b3 as xr, aC as Sr, a5 as Mr, a4 as Tr, aq as Rr, k as Ir, m as Pr, aF as Fr, ab as Er, b8 as Or, a9 as Ar, bo as Lr, Y as $r, bG as Br, bF as zr, bH as Kr, ap as Wr, aQ as Gr, ba as Hr, bL as Vr, bu as jr, n as Ur, am as Zr, bA as Yr, br as qr, a0 as Qr, ar as Xr, a2 as Jr, bz as es, G as ts, d as as, aa as ns, bI as rs, aT as ss, r as os, v as is, I as ls, g as cs, aw as ds, bM as us, M as ms, w as gs, U as ps, X as fs, V as hs, W as bs, as as vs, bg as ys, bO as ws, bK as Ds, ao as Ns, t as Cs, bp as ks, aS as _s, aj as xs, aK as Ss, ag as Ms, al as Ts, au as Rs, aR as Is, ac as Ps, at as Fs, c as Es, R as Os, j as As, p as Ls, aH as $s, bx as Bs, by as zs, ai as Ks, ae as Ws, h as Gs, x as Hs, b7 as Vs, af as js, bN as Us, bc as Zs, bf as Ys, bd as qs, be as Qs, i as Xs, b9 as Js, bm as eo, S as to, bk as ao, bl as no, av as ro, bb as so, bP as oo, ak as io, s as lo, bJ as co, l as uo, f as mo, q as go, _ as po, $ as fo, a7 as ho, bj as bo, bv as vo, bC as yo, aA as wo, aB as Do, a6 as No, aO as Co, aP as ko, aD as _o, aE as xo, aG as So, aV as Mo, aW as To, bE as Ro, bD as Io, aY as Po, aZ as Fo, ax as Eo, ay as Oo, b5 as Ao, b4 as Lo, a_ as $o, aL as Bo, aM as zo, aX as Ko, aI as Wo, aJ as Go, u as Ho, bB as Vo, bq as jo, bs as Uo, bt as Zo, aU as Yo, a1 as qo, e as Qo } from "./Expandable-CTI-osAf.js";
+import { N as On, T as An, O as Ln, Q as $n, a3 as Bn, b6 as zn, az as Kn, ah as Wn, Z as Gn, an as Hn, K as Vn, a8 as jn, bn as Un, P as Zn, B as Yn, a as qn, y as Qn, H as Xn, bi as Jn, F as er, J as tr, A as ar, z as nr, bh as rr, E as sr, D as or, bw as ir, b as lr, C as cr, L as dr, o as ur, ad as mr, aN as gr, y as pr, H as fr, F as hr, J as br, A as vr, z as yr, E as wr, D as Dr, a$ as Nr, b2 as Cr, b1 as kr, b0 as _r, b3 as xr, aC as Sr, a5 as Mr, a4 as Tr, aq as Rr, k as Ir, m as Pr, aF as Fr, ab as Er, b8 as Or, a9 as Ar, bo as Lr, Y as $r, bG as Br, bF as zr, bH as Kr, ap as Wr, aQ as Gr, ba as Hr, bL as Vr, bu as jr, n as Ur, am as Zr, bA as Yr, br as qr, a0 as Qr, ar as Xr, a2 as Jr, bz as es, G as ts, d as as, aa as ns, bI as rs, aT as ss, r as os, v as is, I as ls, g as cs, aw as ds, bM as us, M as ms, w as gs, U as ps, X as fs, V as hs, W as bs, as as vs, bg as ys, bO as ws, bK as Ds, ao as Ns, t as Cs, bp as ks, aS as _s, aj as xs, aK as Ss, ag as Ms, al as Ts, au as Rs, aR as Is, ac as Ps, at as Fs, c as Es, R as Os, j as As, p as Ls, aH as $s, bx as Bs, by as zs, ai as Ks, ae as Ws, h as Gs, x as Hs, b7 as Vs, af as js, bN as Us, bc as Zs, bf as Ys, bd as qs, be as Qs, i as Xs, b9 as Js, bm as eo, S as to, bk as ao, bl as no, av as ro, bb as so, bP as oo, ak as io, s as lo, bJ as co, l as uo, f as mo, q as go, _ as po, $ as fo, a7 as ho, bj as bo, bv as vo, bC as yo, aA as wo, aB as Do, a6 as No, aO as Co, aP as ko, aD as _o, aE as xo, aG as So, aV as Mo, aW as To, bE as Ro, bD as Io, aY as Po, aZ as Fo, ax as Eo, ay as Oo, b5 as Ao, b4 as Lo, a_ as $o, aL as Bo, aM as zo, aX as Ko, aI as Wo, aJ as Go, u as Ho, bB as Vo, bq as jo, bs as Uo, bt as Zo, aU as Yo, a1 as qo, e as Qo } from "./Expandable-ByRpX7qt.js";
 import { jsxs as O, jsx as i, Fragment as be } from "react/jsx-runtime";
 import * as qe from "react";
 import H, { useRef as R, useEffect as L, useState as W, useCallback as y, forwardRef as Qe, useMemo as se, createContext as Xe, useContext as Je } from "react";
@@ -33,8 +33,8 @@ function xa(e) {
     enabled: o = !0,
     isItemDisabled: d,
     onSelect: b,
-    onEscape: g
-  } = e, [m, C] = W(-1), u = n !== void 0 ? n : m, c = y(
+    onEscape: u
+  } = e, [g, C] = W(-1), m = n !== void 0 ? n : g, c = y(
     (l) => {
       n === void 0 && C(l), a?.(l);
     },
@@ -57,23 +57,23 @@ function xa(e) {
     const l = h();
     l.length > 0 && c(l[l.length - 1]);
   }, [h, c]), I = y(() => {
-    const l = x(u, 1);
+    const l = x(m, 1);
     l !== -1 && c(l);
-  }, [u, x, c]), N = y(() => {
-    const l = x(u, -1);
+  }, [m, x, c]), N = y(() => {
+    const l = x(m, -1);
     l !== -1 && c(l);
-  }, [u, x, c]), _ = y(() => {
+  }, [m, x, c]), _ = y(() => {
     c(-1);
   }, [c]), T = y(
     (l) => {
       if (!o) return;
       const { key: v } = l, p = v === "ArrowUp" && (s === "vertical" || s === "both"), w = v === "ArrowDown" && (s === "vertical" || s === "both"), k = v === "ArrowLeft" && (s === "horizontal" || s === "both"), M = v === "ArrowRight" && (s === "horizontal" || s === "both");
       if (p || k) {
-        l.preventDefault(), u === -1 ? S() : N();
+        l.preventDefault(), m === -1 ? S() : N();
         return;
       }
       if (w || M) {
-        l.preventDefault(), u === -1 ? f() : I();
+        l.preventDefault(), m === -1 ? f() : I();
         return;
       }
       if (v === "Home") {
@@ -84,21 +84,21 @@ function xa(e) {
         l.preventDefault(), S();
         return;
       }
-      if ((v === "Enter" || v === " ") && u >= 0 && u < t.length) {
+      if ((v === "Enter" || v === " ") && m >= 0 && m < t.length) {
         l.preventDefault();
-        const E = t[u];
-        d?.(E, u) || b?.(E, u);
+        const E = t[m];
+        d?.(E, m) || b?.(E, m);
         return;
       }
       if (v === "Escape") {
-        g?.();
+        u?.();
         return;
       }
     },
     [
       o,
       s,
-      u,
+      m,
       t,
       f,
       S,
@@ -106,11 +106,11 @@ function xa(e) {
       N,
       d,
       b,
-      g
+      u
     ]
   );
   return {
-    focusedIndex: u,
+    focusedIndex: m,
     setFocusedIndex: c,
     handleKeyDown: T,
     focusFirst: f,
@@ -239,7 +239,7 @@ function ht({
   overflowActions: s,
   onClose: o
 }) {
-  const [d, b] = W(null), g = R(null), m = y(() => {
+  const [d, b] = W(null), u = R(null), g = y(() => {
     if (!t) return { ...Me, top: 0, left: 0 };
     const c = t.getBoundingClientRect();
     return {
@@ -257,18 +257,18 @@ function ht({
   }, [e, o]), L(() => {
     if (!e) return;
     const c = (h) => {
-      g.current && !g.current.contains(h.target) && o();
+      u.current && !u.current.contains(h.target) && o();
     };
     return document.addEventListener("pointerdown", c, !0), () => document.removeEventListener("pointerdown", c, !0);
   }, [e, o]), !e) return null;
-  const C = s && s.length > 0, u = /* @__PURE__ */ O(
+  const C = s && s.length > 0, m = /* @__PURE__ */ O(
     "div",
     {
-      ref: g,
+      ref: u,
       "data-status-chip-menu": n,
       role: "menu",
       "aria-label": "Status actions",
-      style: m(),
+      style: g(),
       children: [
         /* @__PURE__ */ i(
           "button",
@@ -314,7 +314,7 @@ function ht({
       ]
     }
   );
-  return nt(u, document.body);
+  return nt(m, document.body);
 }
 ht.displayName = "StatusSlotChipMenu";
 const La = {
@@ -390,26 +390,26 @@ const Fe = ({ visible: e, variant: t, trigger: n, children: a, className: r }) =
     }
   );
 }, bt = Qe(
-  function({ state: t, onPointerDown: n, onPointerUp: a, onPointerEnter: r, onPointerLeave: s, onKeyboardStep: o, edge: d = "right", ariaLabel: b = "Resize card" }, g) {
-    const m = t === "handle-visible" || t === "dragging" || t === "settling", C = (h) => {
+  function({ state: t, onPointerDown: n, onPointerUp: a, onPointerEnter: r, onPointerLeave: s, onKeyboardStep: o, edge: d = "right", ariaLabel: b = "Resize card" }, u) {
+    const g = t === "handle-visible" || t === "dragging" || t === "settling", C = (h) => {
       try {
         h.currentTarget.setPointerCapture(h.pointerId);
       } catch {
       }
       n(h);
-    }, u = (h) => {
+    }, m = (h) => {
       try {
         h.currentTarget.hasPointerCapture?.(h.pointerId) && h.currentTarget.releasePointerCapture(h.pointerId);
       } catch {
       }
       a(h);
     }, c = (h) => {
-      !m || !o || (h.key === "ArrowRight" ? (h.preventDefault(), o("grow")) : h.key === "ArrowLeft" && (h.preventDefault(), o("shrink")));
+      !g || !o || (h.key === "ArrowRight" ? (h.preventDefault(), o("grow")) : h.key === "ArrowLeft" && (h.preventDefault(), o("shrink")));
     };
-    return /* @__PURE__ */ i(Fe, { visible: m, variant: "handle", trigger: "hover", children: /* @__PURE__ */ i(
+    return /* @__PURE__ */ i(Fe, { visible: g, variant: "handle", trigger: "hover", children: /* @__PURE__ */ i(
       "button",
       {
-        ref: g,
+        ref: u,
         type: "button",
         "aria-label": b,
         "data-edge": d,
@@ -417,14 +417,14 @@ const Fe = ({ visible: e, variant: t, trigger: n, children: a, className: r }) =
         className: [
           "gloss-edge-handle",
           `gloss-edge-handle--${d}`,
-          m ? "gloss-edge-handle--visible" : ""
+          g ? "gloss-edge-handle--visible" : ""
         ].filter(Boolean).join(" "),
         onPointerDown: C,
-        onPointerUp: u,
+        onPointerUp: m,
         onPointerEnter: r,
         onPointerLeave: s,
         onKeyDown: c,
-        tabIndex: m ? 0 : -1
+        tabIndex: g ? 0 : -1
       }
     ) });
   }
@@ -479,8 +479,8 @@ class yt {
     const t = this.samples.length;
     if (t < 2) return 0;
     if (t === 2) {
-      const [b, g] = this.samples, m = Math.max(1, g.t - b.t);
-      return (g.x - b.x) / m * 1e3;
+      const [b, u] = this.samples, g = Math.max(1, u.t - b.t);
+      return (u.x - b.x) / g * 1e3;
     }
     const [n, a, r] = this.samples, s = (r.x - a.x) / Math.max(1, r.t - a.t) * 1e3, o = (a.x - n.x) / Math.max(1, a.t - n.t) * 1e3, d = o;
     return (s * 3 + o * 2 + d * 1) / 6;
@@ -516,12 +516,12 @@ function Ha({
   tuning: o,
   dwellMs: d = 120,
   enterMs: b = 180,
-  exitMs: g = 120,
-  maxColSpan: m = 3,
+  exitMs: u = 120,
+  maxColSpan: g = 3,
   containerRef: C,
-  forceIdle: u
+  forceIdle: m
 }) {
-  const [c, h] = W("idle"), [x, f] = W(e), S = R(null), I = R(null), N = R(null), _ = R(r), T = R(s), l = R(m), v = R(0), p = R("idle");
+  const [c, h] = W("idle"), [x, f] = W(e), S = R(null), I = R(null), N = R(null), _ = R(r), T = R(s), l = R(g), v = R(0), p = R("idle");
   L(() => {
     p.current = c;
   }, [c]);
@@ -550,8 +550,8 @@ function Ha({
     I.current && (clearTimeout(I.current), I.current = null);
   }, []);
   L(() => {
-    u && (p.current === "dragging" || p.current === "settling" || (A(), j(), p.current = "idle", h("idle")));
-  }, [u, A, j]);
+    m && (p.current === "dragging" || p.current === "settling" || (A(), j(), p.current = "idle", h("idle")));
+  }, [m, A, j]);
   const oe = y(() => {
     h((D) => D === "settling" || D !== "idle" ? D : (S.current = setTimeout(() => h("handle-visible"), d), "dwelling"));
   }, [d]), K = y(() => {
@@ -560,7 +560,7 @@ function Ha({
     (D, P, F) => {
       const B = _.current, Q = B * $.snapInFraction, Z = B * $.snapOutFraction, Y = P - F, q = Math.max(
         F,
-        l.current ?? m
+        l.current ?? g
       );
       let z = Y;
       for (; F + z < q; ) {
@@ -576,15 +576,15 @@ function Ha({
         }
       return Math.min(q, Math.max(1, F + z));
     },
-    [$.snapInFraction, $.snapOutFraction, m]
+    [$.snapInFraction, $.snapOutFraction, g]
   ), He = y(
     (D) => {
       if (p.current !== "handle-visible") return;
-      M(), N.current = D.clientX, _.current = r, T.current = s, l.current = m;
+      M(), N.current = D.clientX, _.current = r, T.current = s, l.current = g;
       const P = e * r + (e - 1) * s;
       v.current = P, G.current.clear(), G.current.push({ x: D.clientX, t: performance.now() }), w.jump(P), p.current = "dragging", h("dragging");
     },
-    [r, s, m, e, w, M]
+    [r, s, g, e, w, M]
   ), ke = y(
     (D) => D * _.current + (D - 1) * T.current,
     []
@@ -611,12 +611,12 @@ function Ha({
   ), Ve = y(
     (D) => {
       if (p.current !== "dragging") return;
-      const P = D.clientX - (N.current ?? D.clientX), F = _.current, Q = ((l.current ?? m) - e) * F, Z = (1 - e) * F, Y = Math.max(Z, Math.min(Q, P));
+      const P = D.clientX - (N.current ?? D.clientX), F = _.current, Q = ((l.current ?? g) - e) * F, Z = (1 - e) * F, Y = Math.max(Z, Math.min(Q, P));
       G.current.push({ x: D.clientX, t: performance.now() });
       const q = ie(Y, V.current, e), z = q > e ? "grow" : q < e ? "shrink" : null;
       le(q, z);
     },
-    [ie, e, m, le]
+    [ie, e, g, le]
   ), me = y(() => {
     if (A(), p.current === "dragging") {
       const D = v.current;
@@ -651,31 +651,31 @@ function Ha({
       return;
     }
     const D = (P) => {
-      const F = P.clientX - (N.current ?? P.clientX), B = v.current, Q = E(1), Z = E(m), Y = B + F, q = Math.max(Q, Math.min(Z, Y));
+      const F = P.clientX - (N.current ?? P.clientX), B = v.current, Q = E(1), Z = E(g), Y = B + F, q = Math.max(Q, Math.min(Z, Y));
       w.set(q);
-      const z = _.current, xe = (m - e) * z, te = (1 - e) * z, Ye = Math.max(te, Math.min(xe, F));
+      const z = _.current, xe = (g - e) * z, te = (1 - e) * z, Ye = Math.max(te, Math.min(xe, F));
       G.current.push({ x: P.clientX, t: performance.now() });
       const ge = ie(Ye, V.current, e);
       ge !== V.current && (V.current = ge, f(ge));
     };
     return window.addEventListener("pointermove", D), () => window.removeEventListener("pointermove", D);
-  }, [c, e, w, ie, m, E]), L(() => () => {
+  }, [c, e, w, ie, g, E]), L(() => () => {
     A(), j();
   }, [A, j]), L(() => {
     if (c !== "cancelled") return;
-    const D = setTimeout(() => h("idle"), g);
+    const D = setTimeout(() => h("idle"), u);
     return () => clearTimeout(D);
-  }, [c, g]);
+  }, [c, u]);
   const je = y(
     (D) => {
       if (p.current === "settling") return;
-      const F = Math.min(m, Math.max(1, e + (D === "grow" ? 1 : -1)));
+      const F = Math.min(g, Math.max(1, e + (D === "grow" ? 1 : -1)));
       if (F === e) return;
-      _.current = r, T.current = s, l.current = m, G.current.clear();
+      _.current = r, T.current = s, l.current = g, G.current.clear();
       const B = e * r + (e - 1) * s;
       v.current = B, w.jump(B), le(F, D);
     },
-    [e, r, s, m, w, le]
+    [e, r, s, g, w, le]
   ), _e = y(() => {
     j(), I.current = setTimeout(() => {
       p.current === "handle-visible" && (p.current = "idle", h("idle"));
@@ -703,7 +703,7 @@ function Ha({
       targetColSpan: x,
       ghostWidth: w,
       enterMs: b,
-      exitMs: g
+      exitMs: u
     },
     onKeyboardStep: je,
     onTouchReveal: Ue,
@@ -994,16 +994,16 @@ function Oe({
   onManagePages: d
 }) {
   const b = y(
-    (u) => {
-      s(u), t();
+    (m) => {
+      s(m), t();
     },
     [s, t]
-  ), g = y(
-    (u, c) => {
-      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), b(u));
+  ), u = y(
+    (m, c) => {
+      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), b(m));
     },
     [b]
-  ), m = y(() => {
+  ), g = y(() => {
     o(), t();
   }, [o, t]), C = y(() => {
     d(), t();
@@ -1022,8 +1022,8 @@ function Oe({
       anchorRef: n,
       className: "gloss-page-dropdown",
       children: [
-        /* @__PURE__ */ i("ul", { role: "menu", className: "gloss-page-dropdown__list", children: a.map((u) => {
-          const c = u.id === r;
+        /* @__PURE__ */ i("ul", { role: "menu", className: "gloss-page-dropdown__list", children: a.map((m) => {
+          const c = m.id === r;
           return /* @__PURE__ */ O(
             "li",
             {
@@ -1032,8 +1032,8 @@ function Oe({
               "aria-current": c ? "page" : void 0,
               tabIndex: 0,
               className: `gloss-page-dropdown__item${c ? " gloss-page-dropdown__item--active" : ""}`,
-              onClick: () => b(u.id),
-              onKeyDown: (h) => g(u.id, h),
+              onClick: () => b(m.id),
+              onKeyDown: (h) => u(m.id, h),
               children: [
                 /* @__PURE__ */ i(
                   "span",
@@ -1044,14 +1044,14 @@ function Oe({
                 /* @__PURE__ */ i(
                   "span",
                   {
-                    className: `gloss-page-dropdown__name${u.named ? "" : " gloss-page-dropdown__name--unnamed"}`,
-                    children: u.name
+                    className: `gloss-page-dropdown__name${m.named ? "" : " gloss-page-dropdown__name--unnamed"}`,
+                    children: m.name
                   }
                 ),
-                /* @__PURE__ */ i("span", { className: "gloss-page-dropdown__count", children: u.cardCount })
+                /* @__PURE__ */ i("span", { className: "gloss-page-dropdown__count", children: m.cardCount })
               ]
             },
-            u.id
+            m.id
           );
         }) }),
         /* @__PURE__ */ i("hr", { className: "gloss-page-dropdown__separator" }),
@@ -1060,7 +1060,7 @@ function Oe({
           {
             role: "menuitem",
             className: "gloss-page-dropdown__action",
-            onClick: m,
+            onClick: g,
             children: "+ New page"
           }
         ),
@@ -1088,18 +1088,18 @@ const xt = function({
   onManagePages: o,
   maskRadius: d = "var(--gloss-radius-md)",
   displayMode: b = "count",
-  activePage: g
+  activePage: u
 }) {
-  const m = R(null), [C, u] = W(!1), c = y(() => {
-    u((f) => !f);
+  const g = R(null), [C, m] = W(!1), c = y(() => {
+    m((f) => !f);
   }, []), h = y(() => {
-    u(!1);
+    m(!1);
   }, []), x = a[t]?.id ?? "";
   return /* @__PURE__ */ O(
     "div",
     {
       className: "gloss-page-chip",
-      ref: m,
+      ref: g,
       style: { position: "absolute", top: 0, right: 0 },
       "data-page-chip": !0,
       children: [
@@ -1116,10 +1116,10 @@ const xt = function({
             className: "gloss-page-chip__trigger",
             "aria-haspopup": "menu",
             "aria-expanded": C,
-            "aria-label": b === "name" ? `${g ?? "Page"}. Click to switch pages.` : `Page ${t + 1} of ${n}. Click to switch pages.`,
+            "aria-label": b === "name" ? `${u ?? "Page"}. Click to switch pages.` : `Page ${t + 1} of ${n}. Click to switch pages.`,
             onClick: c,
             children: b === "name" ? /* @__PURE__ */ O(be, { children: [
-              /* @__PURE__ */ i("span", { className: "gloss-page-chip__trigger-name", children: g ?? "" }),
+              /* @__PURE__ */ i("span", { className: "gloss-page-chip__trigger-name", children: u ?? "" }),
               /* @__PURE__ */ i("span", { className: "gloss-page-chip__trigger-chevron", "aria-hidden": "true", children: "▾" })
             ] }) : /* @__PURE__ */ O(be, { children: [
               t + 1,
@@ -1133,7 +1133,7 @@ const xt = function({
           {
             open: C,
             onDismiss: h,
-            anchorRef: m,
+            anchorRef: g,
             pages: a,
             activePageId: x,
             onPageChange: r,
@@ -1826,33 +1826,33 @@ const At = ({
 }) => {
   const s = R(null), o = R([]), d = Ot(), b = se(() => Array.from(e), [e]);
   if (b.length === 0) return null;
-  const g = a ? `Configure ${a}: choose a dimension` : void 0, m = d ? "10ms" : "200ms", C = (u, c) => {
+  const u = a ? `Configure ${a}: choose a dimension` : void 0, g = d ? "10ms" : "200ms", C = (m, c) => {
     const h = b.length - 1, x = (f) => {
       const S = o.current[f];
       S && S.focus();
     };
-    switch (u.key) {
+    switch (m.key) {
       case "ArrowRight":
       case "ArrowDown": {
-        u.preventDefault(), x(c === h ? 0 : c + 1);
+        m.preventDefault(), x(c === h ? 0 : c + 1);
         break;
       }
       case "ArrowLeft":
       case "ArrowUp": {
-        u.preventDefault(), x(c === 0 ? h : c - 1);
+        m.preventDefault(), x(c === 0 ? h : c - 1);
         break;
       }
       case "Home": {
-        u.preventDefault(), x(0);
+        m.preventDefault(), x(0);
         break;
       }
       case "End": {
-        u.preventDefault(), x(h);
+        m.preventDefault(), x(h);
         break;
       }
       case "Enter":
       case " ": {
-        u.preventDefault(), t(b[c]);
+        m.preventDefault(), t(b[c]);
         break;
       }
     }
@@ -1862,16 +1862,16 @@ const At = ({
     {
       ref: s,
       role: "group",
-      "aria-label": g,
+      "aria-label": u,
       className: Re("gloss-reconfig-backside-buttons", r),
       style: {
         // Expose the reduced-motion-resolved duration as a CSS custom prop
         // so the SCSS transition rule can consume it without a nested media
         // query in the JS. Also surfaces the value for the unit test.
-        "--gloss-reconfig-backside-buttons-transition-duration": m
+        "--gloss-reconfig-backside-buttons-transition-duration": g
       },
-      children: b.map((u, c) => {
-        const h = Et[u], x = n === u;
+      children: b.map((m, c) => {
+        const h = Et[m], x = n === m;
         return /* @__PURE__ */ O(
           "button",
           {
@@ -1879,13 +1879,13 @@ const At = ({
               o.current[c] = f;
             },
             type: "button",
-            "data-dimension": u,
+            "data-dimension": m,
             className: Re(
               "gloss-reconfig-backside-buttons__button",
               x && "gloss-reconfig-backside-buttons__button--active"
             ),
             "aria-current": x ? "true" : void 0,
-            onClick: () => t(u),
+            onClick: () => t(m),
             onKeyDown: (f) => C(f, c),
             children: [
               /* @__PURE__ */ i(
@@ -1895,10 +1895,10 @@ const At = ({
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ i("span", { className: "gloss-reconfig-backside-buttons__button-label", children: Ft[u] })
+              /* @__PURE__ */ i("span", { className: "gloss-reconfig-backside-buttons__button-label", children: Ft[m] })
             ]
           },
-          u
+          m
         );
       })
     }
@@ -2282,16 +2282,16 @@ function Ut(e = {}) {
 }
 Ut.displayName = "DevTuningPanel";
 function Zt() {
-  const e = Kt(), { values: t, setValue: n, resetRow: a, resetAll: r } = e, [s, o] = W(null), d = R(null), b = y((u) => {
-    d.current && clearTimeout(d.current), o(u), d.current = setTimeout(() => {
+  const e = Kt(), { values: t, setValue: n, resetRow: a, resetAll: r } = e, [s, o] = W(null), d = R(null), b = y((m) => {
+    d.current && clearTimeout(d.current), o(m), d.current = setTimeout(() => {
       o(null), d.current = null;
     }, 200);
-  }, []), g = y(
-    (u, c) => {
-      n(u, c), u === "snapInPx" && c > t.snapOutPx && (n("snapOutPx", c), b("snapOutPx"));
+  }, []), u = y(
+    (m, c) => {
+      n(m, c), m === "snapInPx" && c > t.snapOutPx && (n("snapOutPx", c), b("snapOutPx"));
     },
     [n, t.snapOutPx, b]
-  ), m = se(() => Wt, []), C = tt();
+  ), g = se(() => Wt, []), C = tt();
   return /* @__PURE__ */ O(
     de.div,
     {
@@ -2308,23 +2308,23 @@ function Zt() {
           "div",
           {
             className: "gloss-dev-tuning-panel__header",
-            onPointerDown: (u) => C.start(u),
+            onPointerDown: (m) => C.start(m),
             children: [
               /* @__PURE__ */ i("span", { className: "gloss-dev-tuning-panel__title", children: "Resize Tuning — dev only" }),
               /* @__PURE__ */ i("span", { className: "gloss-dev-tuning-panel__hint", children: "?devtune=1" })
             ]
           }
         ),
-        /* @__PURE__ */ i("div", { className: "gloss-dev-tuning-panel__body", children: m.map((u) => /* @__PURE__ */ i(
+        /* @__PURE__ */ i("div", { className: "gloss-dev-tuning-panel__body", children: g.map((m) => /* @__PURE__ */ i(
           Vt,
           {
-            spec: u,
-            value: t[u.key],
-            onChange: (c) => g(u.key, c),
-            onReset: () => a(u.key),
-            flashing: s === u.key
+            spec: m,
+            value: t[m.key],
+            onChange: (c) => u(m.key, c),
+            onReset: () => a(m.key),
+            flashing: s === m.key
           },
-          u.key
+          m.key
         )) }),
         /* @__PURE__ */ i("div", { className: "gloss-dev-tuning-panel__footer", children: /* @__PURE__ */ i(
           "button",
@@ -2349,22 +2349,22 @@ function Cn({
   snapBoundariesX: o,
   topY: d,
   bottomY: b,
-  enterMs: g = ee.envelopeEnterMs,
-  exitMs: m = ee.envelopeExitMs,
+  enterMs: u = ee.envelopeEnterMs,
+  exitMs: g = ee.envelopeExitMs,
   className: C,
-  style: u
+  style: m
 }) {
   if (e === "hidden") return null;
   const c = Math.max(0, r - a), h = Math.max(0, b - d), x = {
-    "--gloss-resize-envelope-enter-ms": `${g}ms`,
-    "--gloss-resize-envelope-exit-ms": `${m}ms`,
+    "--gloss-resize-envelope-enter-ms": `${u}ms`,
+    "--gloss-resize-envelope-exit-ms": `${g}ms`,
     "--gloss-resize-envelope-origin-x": `${t - a}px`,
     "--gloss-resize-envelope-origin-y": `${n - d}px`,
     left: a,
     top: d,
     width: c,
     height: h,
-    ...u
+    ...m
   };
   return /* @__PURE__ */ O(
     "div",
@@ -2482,29 +2482,31 @@ function xn({
   fadeInMs: n = ee.sectionDividerFadeInMs,
   fadeOutMs: a = ee.sectionDividerFadeOutMs,
   staggerMs: r = ee.sectionDividerStaggerMs,
-  className: s,
-  style: o,
-  ...d
+  variant: s = "dashed",
+  className: o,
+  style: d,
+  ...b
 }) {
-  const b = {
+  const u = {
     "--gloss-section-divider-fade-in-ms": `${n}ms`,
     "--gloss-section-divider-fade-out-ms": `${a}ms`,
     "--gloss-section-divider-stagger-delay": `${t * r}ms`,
-    ...o
+    ...d
   };
   return /* @__PURE__ */ i(
     "div",
     {
-      ...d,
+      ...b,
       "data-state": e,
       "data-testid": "gloss-section-divider",
       "aria-hidden": "true",
       className: [
         "gloss-section-divider",
         `gloss-section-divider--state-${e}`,
-        s
+        s === "seam-bleed" ? "gloss-section-divider--variant-seam-bleed" : "",
+        o
       ].filter(Boolean).join(" "),
-      style: b
+      style: u
     }
   );
 }
@@ -2539,7 +2541,7 @@ function Mn({
   children: d,
   className: b
 }) {
-  const g = t * n + (t - 1) * r;
+  const u = t * n + (t - 1) * r;
   return /* @__PURE__ */ i(
     de.div,
     {
@@ -2551,7 +2553,7 @@ function Mn({
         `gloss-drag-ghost--tint-${e}`,
         b
       ].filter(Boolean).join(" "),
-      style: { x: s, y: o, width: g, height: a },
+      style: { x: s, y: o, width: u, height: a },
       children: d
     }
   );
@@ -2565,7 +2567,7 @@ function Tn({
   transitionMs: s = 120,
   className: o
 }) {
-  const d = t * n + (t - 1) * a, b = e.col * (n + a), g = e.row * (r + a);
+  const d = t * n + (t - 1) * a, b = e.col * (n + a), u = e.row * (r + a);
   return /* @__PURE__ */ i(
     "div",
     {
@@ -2573,7 +2575,7 @@ function Tn({
       "data-testid": "gloss-snap-outline",
       "aria-hidden": "true",
       style: {
-        transform: `translate(${b}px, ${g}px)`,
+        transform: `translate(${b}px, ${u}px)`,
         width: d,
         height: r,
         transition: `transform ${s}ms cubic-bezier(0.4, 0, 0.2, 1)`
@@ -2623,12 +2625,12 @@ function qt({
       "[InlineNudge] requires anchorEl or anchorSelector. AP-07: Do not mount InlineNudge in Layout/** or _app.tsx."
     );
   }, [a, r]), H.useLayoutEffect(() => {
-    let g = null;
-    if (a ? g = a : r && (g = document.querySelector(r)), g) {
-      const m = g.getBoundingClientRect();
+    let u = null;
+    if (a ? u = a : r && (u = document.querySelector(r)), u) {
+      const g = u.getBoundingClientRect();
       o({
-        top: m.bottom + window.scrollY + 6,
-        left: m.left + window.scrollX
+        top: g.bottom + window.scrollY + 6,
+        left: g.left + window.scrollX
       });
     }
   }, [a, r]);
@@ -2699,10 +2701,10 @@ function Jt({
   ), 0.01) : r, d = y(
     (l) => Math.round(l / o) * o,
     [o]
-  ), b = R(null), [g, m] = W(null), [C, u] = W(e), c = Xt(e), h = R(c);
+  ), b = R(null), [u, g] = W(null), [C, m] = W(e), c = Xt(e), h = R(c);
   L(() => {
-    h.current !== c && (h.current = c, !g && u(e));
-  }, [c, e, g]);
+    h.current !== c && (h.current = c, !u && m(e));
+  }, [c, e, u]);
   const x = se(() => Qt(C, n, a), [C, n, a]), f = y(
     (l) => {
       if (!b.current) return n;
@@ -2719,29 +2721,29 @@ function Jt({
   const S = y(
     (l, v) => {
       const p = C.find((w) => w.id === v);
-      s || p?.disabled || (l.preventDefault(), m(v));
+      s || p?.disabled || (l.preventDefault(), g(v));
     },
     [s, C]
   ), I = R(C);
   I.current = C;
   const N = R(t);
   N.current = t, L(() => {
-    if (!g) return;
+    if (!u) return;
     const l = (p) => {
       const w = f(p.clientX);
-      u(
-        (k) => k.map((M) => M.id === g ? { ...M, value: w } : M)
+      m(
+        (k) => k.map((M) => M.id === u ? { ...M, value: w } : M)
       );
     }, v = (p) => {
       const w = f(p.clientX), k = I.current.map(
-        (M) => M.id === g ? { ...M, value: w } : M
+        (M) => M.id === u ? { ...M, value: w } : M
       );
-      u(k), m(null), N.current(k);
+      m(k), g(null), N.current(k);
     };
     return window.addEventListener("pointermove", l), window.addEventListener("pointerup", v), window.addEventListener("pointercancel", v), () => {
       window.removeEventListener("pointermove", l), window.removeEventListener("pointerup", v), window.removeEventListener("pointercancel", v);
     };
-  }, [g, f]);
+  }, [u, f]);
   const _ = a - n > 0 ? a - n : 1, T = y(
     (l, v) => {
       if (s || v.disabled) return;
@@ -2773,7 +2775,7 @@ function Jt({
       const G = C.map(
         (V) => V.id === v.id ? { ...V, value: E } : V
       );
-      u(G), t(G);
+      m(G), t(G);
     },
     [s, n, a, C, t, d]
   );
@@ -2794,7 +2796,7 @@ function Jt({
               color: De(l)
             },
             "data-disabled": l.disabled || void 0,
-            "data-dragging": g === l.id || void 0,
+            "data-dragging": u === l.id || void 0,
             onPointerDown: (p) => S(p, l.id),
             onKeyDown: (p) => T(p, l),
             "aria-label": l.label ?? `Stop at ${l.value}`,
@@ -2820,15 +2822,15 @@ function ta({ option: e }) {
   const t = ea(), n = t?.isSelected(e.value) ?? !1, a = e.disabled || t?.groupDisabled, r = y(() => {
     a || t?.select(e.value);
   }, [a, t, e.value]), s = y(
-    (g) => {
-      a || t?.onKeyNav(g, e.value);
+    (u) => {
+      a || t?.onKeyNav(u, e.value);
     },
     [a, t, e.value]
   ), o = e.colorToken ? `var(--gloss-color-${e.colorToken}, ${e.color ?? "#888"})` : e.color ?? "#888", d = t?.firstFocusableValue === e.value, b = a ? -1 : d ? 0 : -1;
   return /* @__PURE__ */ i(
     "button",
     {
-      ref: (g) => t?.registerRef(e.value, g),
+      ref: (u) => t?.registerRef(e.value, u),
       type: "button",
       role: "radio",
       "aria-checked": n,
@@ -2854,18 +2856,18 @@ function aa({
   disabled: r = !1,
   name: s
 }) {
-  const o = t !== void 0, [d, b] = W(n), g = o ? t : d, m = y(
+  const o = t !== void 0, [d, b] = W(n), u = o ? t : d, g = y(
     (N) => {
       o || b(N), a?.(N);
     },
     [o, a]
   ), C = y(
-    (N) => g === N,
-    [g]
-  ), u = R(/* @__PURE__ */ new Map()), c = y((N, _) => {
-    _ ? u.current.set(N, _) : u.current.delete(N);
-  }, []), h = e.filter((N) => !N.disabled && !r), x = h.find((N) => N.value === g)?.value ?? h[0]?.value, f = y((N) => {
-    const _ = u.current.get(N);
+    (N) => u === N,
+    [u]
+  ), m = R(/* @__PURE__ */ new Map()), c = y((N, _) => {
+    _ ? m.current.set(N, _) : m.current.delete(N);
+  }, []), h = e.filter((N) => !N.disabled && !r), x = h.find((N) => N.value === u)?.value ?? h[0]?.value, f = y((N) => {
+    const _ = m.current.get(N);
     _ && _.focus();
   }, []), S = y(
     (N, _) => {
@@ -2892,19 +2894,19 @@ function aa({
           break;
         case " ":
         case "Enter":
-          N.preventDefault(), m(_);
+          N.preventDefault(), g(_);
           return;
         default:
           return;
       }
       N.preventDefault();
       const p = T[v].value;
-      f(p), m(p);
+      f(p), g(p);
     },
-    [r, e, m, f]
+    [r, e, g, f]
   ), I = {
-    selectedValue: g,
-    select: m,
+    selectedValue: u,
+    select: g,
     isSelected: C,
     groupDisabled: r,
     name: s,
@@ -2949,17 +2951,17 @@ function sa(e) {
     ), { ...f, items: f.items.slice(0, f.maxItems) }) : f)
   ), [a, r] = W(null), [s, o] = W(null), d = R(null), b = R(e.onZoneChange);
   b.current = e.onZoneChange;
-  const g = se(
+  const u = se(
     () => ra(e.zones),
     [e.zones]
-  ), m = R(g);
+  ), g = R(u);
   L(() => {
-    m.current !== g && (m.current = g, !a && n(
+    g.current !== u && (g.current = u, !a && n(
       e.zones.map((f) => f.maxItems !== void 0 && f.items.length > f.maxItems ? (process.env.NODE_ENV !== "production" && console.warn(
         `useSortableZones: zone "${f.zoneKey}" exceeds maxItems (${f.items.length} > ${f.maxItems}); trimming to cap.`
       ), { ...f, items: f.items.slice(0, f.maxItems) }) : f)
     ));
-  }, [g, e.zones, a]);
+  }, [u, e.zones, a]);
   const C = y(
     (f) => {
       const S = f.active.id;
@@ -2974,7 +2976,7 @@ function sa(e) {
       d.current = N, r(I), o(N);
     },
     [t]
-  ), u = y(
+  ), m = y(
     (f) => {
       if (!f.over) {
         o(d.current);
@@ -3051,7 +3053,7 @@ function sa(e) {
     getZoneProps: h,
     getItemProps: x,
     handleDragStart: C,
-    handleDragOver: u,
+    handleDragOver: m,
     handleDragEnd: c
   };
 }
@@ -3105,11 +3107,11 @@ function da(e) {
   const { zones: t, onZoneChange: n, renderZone: a, renderItem: r, renderDragOverlay: s } = e, o = sa({ zones: t, onZoneChange: n }), [d, b] = H.useState(ne);
   return H.useEffect(() => {
     if (d) return;
-    let g = !0;
-    return ca().then((m) => {
-      g && b(m);
+    let u = !0;
+    return ca().then((g) => {
+      u && b(g);
     }), () => {
-      g = !1;
+      u = !1;
     };
   }, [d]), d ? /* @__PURE__ */ i(
     Ke,
@@ -3120,9 +3122,9 @@ function da(e) {
       renderItem: r,
       renderDragOverlay: s
     }
-  ) : /* @__PURE__ */ i("div", { "data-sortable-zones-passive": "true", children: o.zones.map((g) => {
-    const m = g.items.map((C) => /* @__PURE__ */ i(H.Fragment, { children: r(C) }, C.id));
-    return /* @__PURE__ */ i("div", { ...o.getZoneProps(g.zoneKey), children: a(g.zoneKey, g.items, m) }, g.zoneKey);
+  ) : /* @__PURE__ */ i("div", { "data-sortable-zones-passive": "true", children: o.zones.map((u) => {
+    const g = u.items.map((C) => /* @__PURE__ */ i(H.Fragment, { children: r(C) }, C.id));
+    return /* @__PURE__ */ i("div", { ...o.getZoneProps(u.zoneKey), children: a(u.zoneKey, u.items, g) }, u.zoneKey);
   }) });
 }
 da.displayName = "SortableZones";
@@ -3133,10 +3135,10 @@ function Ke({
   renderItem: a,
   renderDragOverlay: r
 }) {
-  const { core: s, sortable: o, utilities: d } = t, { DndContext: b, DragOverlay: g, useSensors: m, useSensor: C, useDroppable: u, PointerSensor: c, KeyboardSensor: h, closestCenter: x } = s, { SortableContext: f, verticalListSortingStrategy: S } = o, I = m(
+  const { core: s, sortable: o, utilities: d } = t, { DndContext: b, DragOverlay: u, useSensors: g, useSensor: C, useDroppable: m, PointerSensor: c, KeyboardSensor: h, closestCenter: x } = s, { SortableContext: f, verticalListSortingStrategy: S } = o, I = g(
     C(c, { activationConstraint: { distance: 5 } }),
     C(h)
-  ), N = b, _ = g, T = f;
+  ), N = b, _ = u, T = f;
   return /* @__PURE__ */ O(
     N,
     {
@@ -3162,7 +3164,7 @@ function Ke({
             {
               zoneKey: l.zoneKey,
               zoneProps: e.getZoneProps(l.zoneKey),
-              useDroppable: u,
+              useDroppable: m,
               children: /* @__PURE__ */ i(T, { items: v, strategy: S, children: n(l.zoneKey, l.items, p) })
             },
             l.zoneKey
@@ -3175,12 +3177,12 @@ function Ke({
 }
 Ke.displayName = "SortableZonesInner";
 function We({ id: e, useSortable: t, cssHelper: n, children: a }) {
-  const { attributes: r, listeners: s, setNodeRef: o, transform: d, transition: b, isDragging: g } = t({ id: e }), m = {
+  const { attributes: r, listeners: s, setNodeRef: o, transform: d, transition: b, isDragging: u } = t({ id: e }), g = {
     transform: n?.Transform?.toString(d) ?? void 0,
     transition: b,
-    opacity: g ? 0.5 : 1
+    opacity: u ? 0.5 : 1
   };
-  return /* @__PURE__ */ i("div", { ref: o, style: m, "data-sortable-item-id": e, ...r, ...s, children: a });
+  return /* @__PURE__ */ i("div", { ref: o, style: g, "data-sortable-item-id": e, ...r, ...s, children: a });
 }
 We.displayName = "SortableItem";
 function Ge({
@@ -3260,38 +3262,38 @@ function Pn({
       "aria-label": a,
       "data-testid": "gloss-section-dots",
       className: "gloss-section-dots",
-      onKeyDown: (g) => {
+      onKeyDown: (u) => {
         if (e !== 0) {
-          if (g.key === "ArrowRight") {
-            g.preventDefault();
-            const m = (t + 1) % e;
-            n(m), requestAnimationFrame(() => d.current[m]?.focus());
-          } else if (g.key === "ArrowLeft") {
-            g.preventDefault();
-            const m = (t - 1 + e) % e;
-            n(m), requestAnimationFrame(() => d.current[m]?.focus());
+          if (u.key === "ArrowRight") {
+            u.preventDefault();
+            const g = (t + 1) % e;
+            n(g), requestAnimationFrame(() => d.current[g]?.focus());
+          } else if (u.key === "ArrowLeft") {
+            u.preventDefault();
+            const g = (t - 1 + e) % e;
+            n(g), requestAnimationFrame(() => d.current[g]?.focus());
           }
         }
       },
-      children: Array.from({ length: e }, (g, m) => /* @__PURE__ */ i(
+      children: Array.from({ length: e }, (u, g) => /* @__PURE__ */ i(
         "button",
         {
           ref: (C) => {
-            d.current[m] = C;
+            d.current[g] = C;
           },
           type: "button",
           role: "tab",
-          "aria-selected": m === t,
-          "aria-label": m === r ? "Unconfirmed section" : `Section ${m + 1}`,
-          "data-state": m === r ? "provisional-hollow" : m === s ? "pulse" : m === t ? "current" : "hollow",
-          "data-section-index": m,
+          "aria-selected": g === t,
+          "aria-label": g === r ? "Unconfirmed section" : `Section ${g + 1}`,
+          "data-state": g === r ? "provisional-hollow" : g === s ? "pulse" : g === t ? "current" : "hollow",
+          "data-section-index": g,
           className: [
             "gloss-section-dots__dot",
-            m === t && "gloss-section-dots__dot--current"
+            g === t && "gloss-section-dots__dot--current"
           ].filter(Boolean).join(" "),
-          onClick: () => n(m)
+          onClick: () => n(g)
         },
-        m === s ? `${m}-${o ?? 0}` : m
+        g === s ? `${g}-${o ?? 0}` : g
       ))
     }
   );