@salilvnair/dui 1.0.16 → 1.0.18

package/dist/index.js

@@ -5,7 +5,7 @@ import { A as ds, a as us, b as ps, c as fs, d as gs, e as hs, f as bs, g as ms,
 import { jsxs as x, jsx as o, Fragment as ve } from "react/jsx-runtime";
 import { u as Ie, D as ft, a as Lt, b as Gt, c as zt, d as Oe, e as lt, r as Xt, f as et, g as Da, h as Tb, i as $b, j as Ab, k as Oa, l as Mb, m as Lb, n as Db, o as Ob, C as Ba, p as Pa, q as Bb, E as Pb, s as Wa, t as Wb, v as Fb } from "./chunks/doc-path-CS9-ZNht.js";
 import { w as Q_, x as J_, y as eI, z as tI, A as nI, B as rI, F as oI, G as iI } from "./chunks/doc-path-CS9-ZNht.js";
-import { useState as z, useRef as M, forwardRef as yo, useEffect as U, useCallback as se, useMemo as ue, useImperativeHandle as Hb, cloneElement as Ub, useLayoutEffect as zn, Fragment as Vb } from "react";
+import { useState as z, useRef as L, forwardRef as yo, useEffect as U, useCallback as se, useMemo as ue, useImperativeHandle as Hb, cloneElement as Ub, useLayoutEffect as zn, Fragment as Vb } from "react";
 import { createPortal as Se } from "react-dom";
 import { u as Gb, g as Xb } from "./chunks/vis-runtime-DkpA8K_T.js";
 function Ue(t, e = {}) {
@@ -341,7 +341,7 @@ function qv({
   className: l = "",
   style: c
 }) {
-  const s = je(n), [d, u] = z(!1), p = M(void 0), g = () => {
+  const s = je(n), [d, u] = z(!1), p = L(void 0), g = () => {
     if (a)
       try {
         navigator.clipboard.writeText(e), u(!0), clearTimeout(p.current), p.current = setTimeout(() => u(!1), 1500);
@@ -1120,7 +1120,7 @@ function Qv({
   className: u = "",
   align: p = "auto"
 }) {
-  const [g, f] = z(!1), h = M(null), m = l || "var(--color-primary)", b = je(r === "default" ? void 0 : r), y = b.height, v = b.fontSize, k = b.paddingX, w = i ? b.borderRadius : "0px", S = c || s, _ = n === "primary", I = n === "danger", E = _ ? "var(--color-btn-primary-text, #fff)" : I ? "var(--color-btn-danger-text, #fff)" : "var(--color-text-primary)", N = _ ? m : I ? "var(--color-error)" : n === "ghost" ? "transparent" : "var(--color-surface-hover)", R = _ || I || n === "ghost" ? "1px solid transparent" : "1px solid var(--color-surface-border)", P = _ || I ? "rgba(0,0,0,0.12)" : "var(--color-surface-active)";
+  const [g, f] = z(!1), h = L(null), m = l || "var(--color-primary)", b = je(r === "default" ? void 0 : r), y = b.height, v = b.fontSize, k = b.paddingX, w = i ? b.borderRadius : "0px", S = c || s, _ = n === "primary", I = n === "danger", E = _ ? "var(--color-btn-primary-text, #fff)" : I ? "var(--color-btn-danger-text, #fff)" : "var(--color-text-primary)", N = _ ? m : I ? "var(--color-error)" : n === "ghost" ? "transparent" : "var(--color-surface-hover)", R = _ || I || n === "ghost" ? "1px solid transparent" : "1px solid var(--color-surface-border)", B = _ || I ? "rgba(0,0,0,0.12)" : "var(--color-surface-active)";
   return /* @__PURE__ */ x(ve, { children: [
     /* @__PURE__ */ x(
       "div",
@@ -1137,7 +1137,7 @@ function Qv({
           color: E,
           padding: 0,
           transition: "background 120ms",
-          "--dui-hover-btn-bg": P
+          "--dui-hover-btn-bg": B
         },
         children: [
           /* @__PURE__ */ x(
@@ -1181,7 +1181,7 @@ function Qv({
             {
               type: "button",
               disabled: c,
-              onClick: () => !c && f((D) => !D),
+              onClick: () => !c && f((M) => !M),
               className: "dui_dropdown-button__chevron",
               style: {
                 height: "100%",
@@ -1239,11 +1239,11 @@ const Or = yo(
     fontStyle: S,
     ..._
   }, I) {
-    const [E, N] = z(!1), [R, P] = z(!1), D = Ue(e === "default" ? void 0 : e, { width: v, borderRadius: k, color: w, fontStyle: S }), L = r || "var(--color-accent, var(--color-primary))", B = n ? D.borderRadius : "0px", T = c ?? a, O = d ? null : s ?? l, W = i ? "var(--color-error)" : E ? L : "var(--color-input-border)", $ = p ? {
+    const [E, N] = z(!1), [R, B] = z(!1), M = Ue(e === "default" ? void 0 : e, { width: v, borderRadius: k, color: w, fontStyle: S }), D = r || "var(--color-accent, var(--color-primary))", P = n ? M.borderRadius : "0px", T = c ?? a, O = d ? null : s ?? l, W = i ? "var(--color-error)" : E ? D : "var(--color-input-border)", $ = p ? {
       display: "inline-flex",
       alignItems: "center",
-      height: D.height,
-      width: D.width !== "auto" ? D.width : void 0,
+      height: M.height,
+      width: M.width !== "auto" ? M.width : void 0,
       border: "none",
       // When naked + error: red bottom underline so the error state is visible
       borderBottom: i ? "1px solid color-mix(in srgb, var(--color-error) 60%, transparent)" : "none",
@@ -1254,18 +1254,18 @@ const Or = yo(
     } : {
       display: "inline-flex",
       alignItems: "center",
-      height: D.height,
-      width: D.width !== "auto" ? D.width : void 0,
-      borderRadius: B,
+      height: M.height,
+      width: M.width !== "auto" ? M.width : void 0,
+      borderRadius: P,
       border: `1px solid ${W}`,
       background: "var(--color-input-bg)",
       transition: "border-color 140ms, box-shadow 140ms",
-      boxShadow: E ? `0 0 0 2px color-mix(in srgb, ${L} 20%, transparent)` : "none",
+      boxShadow: E ? `0 0 0 2px color-mix(in srgb, ${D} 20%, transparent)` : "none",
       overflow: "hidden",
       ...g
     }, A = d ? R ? "text" : "password" : y ?? "text", H = R ? (u == null ? void 0 : u.shown) ?? /* @__PURE__ */ o(cn, { size: 14 }) : (u == null ? void 0 : u.hidden) ?? /* @__PURE__ */ o(dn, { size: 14 });
     return /* @__PURE__ */ x("div", { style: $, className: h, children: [
-      T && /* @__PURE__ */ o("span", { style: { paddingLeft: D.paddingX, display: "flex", alignItems: "center", color: p && i ? "var(--color-error)" : "var(--color-text-muted)", flexShrink: 0, transition: "color 140ms" }, children: T }),
+      T && /* @__PURE__ */ o("span", { style: { paddingLeft: M.paddingX, display: "flex", alignItems: "center", color: p && i ? "var(--color-error)" : "var(--color-text-muted)", flexShrink: 0, transition: "color 140ms" }, children: T }),
       /* @__PURE__ */ o(
         "input",
         {
@@ -1274,14 +1274,14 @@ const Or = yo(
           style: {
             flex: 1,
             height: "100%",
-            paddingLeft: T ? "6px" : D.paddingX,
-            paddingRight: d || O ? "6px" : D.paddingX,
-            fontSize: D.fontSize,
+            paddingLeft: T ? "6px" : M.paddingX,
+            paddingRight: d || O ? "6px" : M.paddingX,
+            fontSize: M.fontSize,
             background: "transparent",
             border: "none",
             outline: "none",
-            color: p && i ? "var(--color-error)" : D.color || "var(--color-text-primary)",
-            fontStyle: D.fontStyle,
+            color: p && i ? "var(--color-error)" : M.color || "var(--color-text-primary)",
+            fontStyle: M.fontStyle,
             minWidth: 0,
             fontFamily: "inherit",
             caretColor: p && i ? "var(--color-error)" : void 0,
@@ -1296,14 +1296,14 @@ const Or = yo(
           ..._
         }
       ),
-      O && /* @__PURE__ */ o("span", { style: { paddingRight: D.paddingX, display: "flex", alignItems: "center", color: "var(--color-text-muted)", flexShrink: 0 }, children: O }),
+      O && /* @__PURE__ */ o("span", { style: { paddingRight: M.paddingX, display: "flex", alignItems: "center", color: "var(--color-text-muted)", flexShrink: 0 }, children: O }),
       d && /* @__PURE__ */ o(
         "button",
         {
           type: "button",
-          onClick: () => P((G) => !G),
+          onClick: () => B((G) => !G),
           style: {
-            paddingRight: D.paddingX,
+            paddingRight: M.paddingX,
             display: "flex",
             alignItems: "center",
             background: "none",
@@ -1382,7 +1382,7 @@ function e1({
   tooltip: s = "Double-click to edit",
   style: d
 }) {
-  const [u, p] = z(!1), [g, f] = z(e), [h, m] = z(!1), b = M(null), y = c || "var(--color-accent, var(--color-primary))";
+  const [u, p] = z(!1), [g, f] = z(e), [h, m] = z(!1), b = L(null), y = c || "var(--color-accent, var(--color-primary))";
   U(() => {
     u || f(e);
   }, [e, u]);
@@ -1504,7 +1504,7 @@ function Mn({
   width: h,
   borderRadius: m
 }) {
-  const [b, y] = z(!1), [v, k] = z(!1), w = M(null), S = M(null), _ = Jb(i), I = vt(_, { borderRadius: m }), E = u || "var(--color-accent, var(--color-primary))", N = s ? I.borderRadius : "0px", R = e.find((T) => T.value === n && !T.isHeader);
+  const [b, y] = z(!1), [v, k] = z(!1), w = L(null), S = L(null), _ = Jb(i), I = vt(_, { borderRadius: m }), E = u || "var(--color-accent, var(--color-primary))", N = s ? I.borderRadius : "0px", R = e.find((T) => T.value === n && !T.isHeader);
   U(() => {
     if (!b || !w.current || !S.current) return;
     const T = w.current, O = S.current, W = () => {
@@ -1529,9 +1529,9 @@ function Mn({
     };
     return document.addEventListener("mousedown", T), () => document.removeEventListener("mousedown", T);
   }, [b]);
-  const P = se((T) => {
+  const B = se((T) => {
     r(T), y(!1);
-  }, [r]), D = (T) => {
+  }, [r]), M = (T) => {
     if (p) return;
     if (!b) {
       (T.key === "Enter" || T.key === " " || T.key === "ArrowDown") && (T.preventDefault(), y(!0));
@@ -1540,23 +1540,23 @@ function Mn({
     const O = e.filter(($) => !$.isHeader).findIndex(($) => $.value === n), W = e.filter(($) => !$.isHeader);
     switch (T.key) {
       case "ArrowDown":
-        T.preventDefault(), P(W[(O + 1) % W.length].value);
+        T.preventDefault(), B(W[(O + 1) % W.length].value);
         break;
       case "ArrowUp":
-        T.preventDefault(), P(W[(O - 1 + W.length) % W.length].value);
+        T.preventDefault(), B(W[(O - 1 + W.length) % W.length].value);
         break;
       case "Escape":
         y(!1);
         break;
     }
-  }, L = b || v ? E : "var(--color-input-border)", B = b || v ? `0 0 0 2px color-mix(in srgb, ${E} 20%, transparent)` : "none";
+  }, D = b || v ? E : "var(--color-input-border)", P = b || v ? `0 0 0 2px color-mix(in srgb, ${E} 20%, transparent)` : "none";
   return /* @__PURE__ */ x(
     "div",
     {
       "data-testid": t,
       className: `relative inline-block ${g}`,
       style: { width: h, ...f },
-      onKeyDown: D,
+      onKeyDown: M,
       children: [
         /* @__PURE__ */ x(
           "button",
@@ -1578,12 +1578,12 @@ function Mn({
               paddingRight: I.paddingX,
               fontSize: I.fontSize,
               background: "var(--color-input-bg)",
-              border: `1px solid ${L}`,
+              border: `1px solid ${D}`,
               borderRadius: N,
               color: R ? "var(--color-text-primary)" : "var(--color-text-muted)",
               cursor: p ? "default" : "pointer",
               transition: "border-color 140ms, box-shadow 140ms",
-              boxShadow: B,
+              boxShadow: P,
               opacity: p ? 0.5 : 1,
               fontFamily: "inherit",
               fontWeight: 500,
@@ -1634,7 +1634,7 @@ function Mn({
                 {
                   role: "option",
                   "aria-selected": T.value === n,
-                  onClick: () => P(T.value),
+                  onClick: () => B(T.value),
                   className: `dui_select__option${T.value === n ? " dui_select__option--selected" : ""}`,
                   style: {
                     display: "flex",
@@ -1829,7 +1829,7 @@ function t1({
   fontStyle: w,
   className: S = ""
 }) {
-  const _ = Ie(), I = c ?? _.size, E = Ue(c, { width: y, borderRadius: v, color: k, fontStyle: w }), N = u ?? sm[I], R = d ?? "var(--color-accent, var(--color-primary))", P = Math.max(Math.round(parseFloat(E.fontSize) * 1.2 * 10) / 10, 16), D = Math.max(0, (parseFloat(E.height) - 2 - P) / 2), [L, B] = z(!1), [T, O] = z(!1), [W, $] = z(!1), [A, H] = z(-1), [G, te] = z(!1), Z = M(null), de = M(null), he = M(null), Ae = M(!1), Ee = M(!1), X = M(!1), pe = M(null), V = M(Fa()), { caret: xe, syncCaret: ke, setCaret: Ce } = Ua(he, i.length), [Te, at] = z({ top: 0, left: 0, width: 0 }), [tt, j] = z({ top: 0, left: 0, width: 0 }), oe = n.find((K) => K.value === e), q = (oe == null ? void 0 : oe.color) ?? "var(--color-text-primary)";
+  const _ = Ie(), I = c ?? _.size, E = Ue(c, { width: y, borderRadius: v, color: k, fontStyle: w }), N = u ?? sm[I], R = d ?? "var(--color-accent, var(--color-primary))", B = Math.max(Math.round(parseFloat(E.fontSize) * 1.2 * 10) / 10, 16), M = Math.max(0, (parseFloat(E.height) - 2 - B) / 2), [D, P] = z(!1), [T, O] = z(!1), [W, $] = z(!1), [A, H] = z(-1), [G, te] = z(!1), Z = L(null), de = L(null), he = L(null), Ae = L(!1), Ee = L(!1), X = L(!1), pe = L(null), V = L(Fa()), { caret: xe, syncCaret: ke, setCaret: Ce } = Ua(he, i.length), [Te, at] = z({ top: 0, left: 0, width: 0 }), [tt, j] = z({ top: 0, left: 0, width: 0 }), oe = n.find((K) => K.value === e), q = (oe == null ? void 0 : oe.color) ?? "var(--color-text-primary)";
   U(() => {
     const K = he.current;
     K && (K.innerHTML = Et(i), pe.current = i, V.current.reset(i, i.length));
@@ -1867,17 +1867,17 @@ function t1({
     const K = de.current;
     if (!K) return;
     const ae = K.getBoundingClientRect();
-    at({ top: ae.bottom + 4, left: ae.left, width: Math.max(ae.width, 120) }), B((we) => !we);
+    at({ top: ae.bottom + 4, left: ae.left, width: Math.max(ae.width, 120) }), P((we) => !we);
   };
   U(() => {
-    if (!L) return;
+    if (!D) return;
     const K = (ae) => {
       const we = ae.target;
-      !we.closest("[data-stiv-method]") && !we.closest("[data-stiv-trigger]") && B(!1);
+      !we.closest("[data-stiv-method]") && !we.closest("[data-stiv-trigger]") && P(!1);
     };
     return document.addEventListener("mousedown", K), () => document.removeEventListener("mousedown", K);
-  }, [L]), U(() => {
-    if (!L) return;
+  }, [D]), U(() => {
+    if (!D) return;
     const K = () => {
       const ae = de.current;
       if (!ae) return;
@@ -1887,7 +1887,7 @@ function t1({
     return window.addEventListener("scroll", K, { passive: !0, capture: !0 }), window.addEventListener("resize", K, { passive: !0 }), () => {
       window.removeEventListener("scroll", K, { capture: !0 }), window.removeEventListener("resize", K);
     };
-  }, [L]), U(() => {
+  }, [D]), U(() => {
     if (!Ae.current)
       if ((Ye.length > 0 || Qe.length > 0) && T) {
         const K = he.current;
@@ -1952,7 +1952,7 @@ function t1({
       }
     }
     h == null || h(K);
-  }, Bn = T || L ? R : "var(--color-input-border)";
+  }, Bn = T || D ? R : "var(--color-input-border)";
   return /* @__PURE__ */ x(ve, { children: [
     /* @__PURE__ */ x(
       "div",
@@ -2003,7 +2003,7 @@ function t1({
                     style: {
                       flexShrink: 0,
                       color: "var(--color-text-muted)",
-                      transform: L ? "rotate(180deg)" : "rotate(0deg)",
+                      transform: D ? "rotate(180deg)" : "rotate(0deg)",
                       transition: "transform 150ms ease"
                     }
                   }
@@ -2061,7 +2061,7 @@ function t1({
                 style: {
                   height: "100%",
                   width: "100%",
-                  padding: `${D}px ${E.paddingX}`,
+                  padding: `${M}px ${E.paddingX}`,
                   boxSizing: "border-box",
                   // display/align-content live in SelectTextInputView.css (block, never flex)
                   // so they can carry an @supports fallback — see the note there.
@@ -2071,7 +2071,7 @@ function t1({
                   // An explicit small line-height, never the field height: a full-height line
                   // box would make the selection highlight and caret span the whole field.
                   // Paired with editorPadY above, which is what actually centres it.
-                  lineHeight: `${P}px`,
+                  lineHeight: `${B}px`,
                   color: E.color ?? "var(--color-text-primary)",
                   fontFamily: "inherit",
                   fontStyle: E.fontStyle,
@@ -2089,9 +2089,9 @@ function t1({
                 ghost: Ot,
                 style: {
                   border: "none",
-                  padding: `${D}px ${E.paddingX}`,
+                  padding: `${M}px ${E.paddingX}`,
                   fontSize: E.fontSize,
-                  lineHeight: `${P}px`
+                  lineHeight: `${B}px`
                 }
               }
             )
@@ -2099,7 +2099,7 @@ function t1({
         ]
       }
     ),
-    L && Se(
+    D && Se(
       /* @__PURE__ */ o(
         "div",
         {
@@ -2124,7 +2124,7 @@ function t1({
               "div",
               {
                 onMouseDown: (we) => {
-                  we.preventDefault(), r(K.value), B(!1);
+                  we.preventDefault(), r(K.value), P(!1);
                 },
                 className: `dui_select-text__option${ae ? " dui_select-text__option--selected" : ""}`,
                 style: {
@@ -2243,36 +2243,36 @@ function n1({
   className: f = "",
   style: h
 }) {
-  const m = p === "compact", b = d ?? um[a], y = Sr(i, { width: s, borderRadius: b, color: u }), v = M(null), [k, w] = z({ left: 0, width: 0 }), [S, _] = z(!1), I = M(!1), E = e.findIndex((B) => B.value === n), N = se(() => {
-    const B = v.current;
-    if (!B) return;
-    const O = B.querySelectorAll("button[data-seg]")[E];
+  const m = p === "compact", b = d ?? um[a], y = Sr(i, { width: s, borderRadius: b, color: u }), v = L(null), [k, w] = z({ left: 0, width: 0 }), [S, _] = z(!1), I = L(!1), E = e.findIndex((P) => P.value === n), N = se(() => {
+    const P = v.current;
+    if (!P) return;
+    const O = P.querySelectorAll("button[data-seg]")[E];
     O && w({ left: O.offsetLeft, width: O.offsetWidth });
   }, [E]);
   U(() => {
     if (N(), I.current) {
       _(!0);
-      const B = setTimeout(() => _(!1), 360);
-      return () => clearTimeout(B);
+      const P = setTimeout(() => _(!1), 360);
+      return () => clearTimeout(P);
     }
     I.current = !0;
   }, [n, E, e.length]), U(() => {
-    const B = v.current;
-    if (B) {
+    const P = v.current;
+    if (P) {
       if (typeof ResizeObserver < "u") {
         const T = new ResizeObserver(() => N());
-        return T.observe(B), () => T.disconnect();
+        return T.observe(P), () => T.disconnect();
       }
       return window.addEventListener("resize", N), () => window.removeEventListener("resize", N);
     }
   }, [N]);
-  const R = se((B) => {
+  const R = se((P) => {
     if (g) return;
     const T = e.filter((W) => !W.disabled);
     if (!T.length) return;
     const O = T.findIndex((W) => W.value === n);
-    B.key === "ArrowRight" ? (B.preventDefault(), r(T[(O + 1) % T.length].value)) : B.key === "ArrowLeft" && (B.preventDefault(), r(T[(O - 1 + T.length) % T.length].value));
-  }, [g, e, n, r]), P = m ? 2 : 3, D = m ? "4px" : y.borderRadius, L = a === "pointy" ? D : `calc(${D} + ${P}px)`;
+    P.key === "ArrowRight" ? (P.preventDefault(), r(T[(O + 1) % T.length].value)) : P.key === "ArrowLeft" && (P.preventDefault(), r(T[(O - 1 + T.length) % T.length].value));
+  }, [g, e, n, r]), B = m ? 2 : 3, M = m ? "4px" : y.borderRadius, D = a === "pointy" ? M : `calc(${M} + ${B}px)`;
   return /* @__PURE__ */ x(
     "div",
     {
@@ -2286,8 +2286,8 @@ function n1({
         display: "inline-flex",
         position: "relative",
         height: m ? 26 : y.height,
-        padding: P,
-        borderRadius: L,
+        padding: B,
+        borderRadius: D,
         // Recessed, not raised. `--color-input-bg` is the token for a surface
         // the UI is cut into; falling back to the panel keeps it sane in
         // themes that do not define one.
@@ -2332,11 +2332,11 @@ function n1({
             className: `dui_segctrl__indicator${S ? " dui_segctrl__indicator--bounce" : ""}`,
             style: {
               position: "absolute",
-              top: P,
+              top: B,
               left: k.left,
               width: k.width,
-              height: `calc(100% - ${P * 2}px)`,
-              borderRadius: D,
+              height: `calc(100% - ${B * 2}px)`,
+              borderRadius: M,
               // Translucent accent wash + hairline, not a solid block — the
               // active segment should read as highlighted, not glow like a CTA.
               backgroundColor: `color-mix(in srgb, ${l} 22%, transparent)`,
@@ -2346,8 +2346,8 @@ function n1({
             }
           }
         ),
-        e.map((B) => {
-          const T = B.value === n;
+        e.map((P) => {
+          const T = P.value === n;
           return /* @__PURE__ */ x(
             "button",
             {
@@ -2355,8 +2355,8 @@ function n1({
               type: "button",
               role: "tab",
               "aria-selected": T,
-              disabled: B.disabled,
-              onClick: () => !B.disabled && B.value !== n && r(B.value),
+              disabled: P.disabled,
+              onClick: () => !P.disabled && P.value !== n && r(P.value),
               className: "dui_segctrl__seg",
               style: {
                 display: "flex",
@@ -2373,8 +2373,8 @@ function n1({
                 // Accent-tinted label on the translucent indicator — readable on
                 // both themes without the white-on-solid-accent glare.
                 color: T ? l : y.color ?? "var(--color-text-secondary)",
-                cursor: B.disabled ? "not-allowed" : "pointer",
-                opacity: B.disabled ? 0.35 : 1,
+                cursor: P.disabled ? "not-allowed" : "pointer",
+                opacity: P.disabled ? 0.35 : 1,
                 position: "relative",
                 zIndex: 1,
                 // Flex items default to `min-width: auto`, which resolves to
@@ -2390,7 +2390,7 @@ function n1({
                 userSelect: "none"
               },
               children: [
-                B.icon,
+                P.icon,
                 /* @__PURE__ */ o(
                   "span",
                   {
@@ -2400,12 +2400,12 @@ function n1({
                       whiteSpace: "nowrap",
                       minWidth: 0
                     },
-                    children: B.label
+                    children: P.label
                   }
                 )
               ]
             },
-            B.value
+            P.value
           );
         })
       ]
@@ -2754,7 +2754,7 @@ function l1({
   className: u = "",
   style: p
 }) {
-  const g = Ue(c, { borderRadius: s, color: d }), f = d ?? "var(--color-accent, var(--color-primary))", h = M([]), m = Array.from({ length: i }, (S, _) => e[_] ?? ""), b = (S) => {
+  const g = Ue(c, { borderRadius: s, color: d }), f = d ?? "var(--color-accent, var(--color-primary))", h = L([]), m = Array.from({ length: i }, (S, _) => e[_] ?? ""), b = (S) => {
     n(S), S.length === i && !S.includes("") && (r == null || r(S));
   }, y = (S, _) => {
     const I = m.slice();
@@ -2772,15 +2772,15 @@ function l1({
     var I, E, N;
     _.key === "Backspace" ? (m[S] ? y(S, "") : S > 0 && ((I = h.current[S - 1]) == null || I.focus(), y(S - 1, "")), _.preventDefault()) : _.key === "ArrowLeft" && S > 0 ? (E = h.current[S - 1]) == null || E.focus() : _.key === "ArrowRight" && S < i - 1 && ((N = h.current[S + 1]) == null || N.focus());
   }, w = (S, _) => {
-    var P;
+    var B;
     _.preventDefault();
     const I = _.clipboardData.getData("text"), E = a ? I.replace(/[^0-9]/g, "") : I;
     if (!E) return;
     const N = m.slice();
-    for (let D = 0; D < E.length && S + D < i; D++) N[S + D] = E[D];
+    for (let M = 0; M < E.length && S + M < i; M++) N[S + M] = E[M];
     b(N.join(""));
     const R = Math.min(S + E.length, i - 1);
-    (P = h.current[R]) == null || P.focus();
+    (B = h.current[R]) == null || B.focus();
   };
   return /* @__PURE__ */ o("div", { "data-testid": t, className: u, style: { display: "flex", gap: g.gap, ...p }, children: m.map((S, _) => /* @__PURE__ */ o(
     "input",
@@ -2935,7 +2935,7 @@ function c1({
   className: s = "",
   style: d
 }) {
-  const u = vt(a, { width: l, borderRadius: c }), [p, g] = z(!1), [f, h] = z(e), m = M(null), b = M(null);
+  const u = vt(a, { width: l, borderRadius: c }), [p, g] = z(!1), [f, h] = z(e), m = L(null), b = L(null);
   U(() => h(e), [e]), U(() => {
     if (!p || !m.current || !b.current) return;
     const v = m.current, k = b.current, w = () => {
@@ -3037,7 +3037,7 @@ function d1({
   className: s = "",
   style: d
 }) {
-  const u = vt(i, { width: a, borderRadius: l, color: c }), p = c ?? "var(--color-primary)", [g, f] = z(!1), [h, m] = z(""), b = M(null), y = M(null), v = Pr.find((w) => w.name === e), k = ue(() => {
+  const u = vt(i, { width: a, borderRadius: l, color: c }), p = c ?? "var(--color-primary)", [g, f] = z(!1), [h, m] = z(""), b = L(null), y = L(null), v = Pr.find((w) => w.name === e), k = ue(() => {
     const w = h.trim().toLowerCase();
     return w ? Pr.filter((S) => S.name.toLowerCase().includes(w)) : Pr;
   }, [h]);
@@ -3137,7 +3137,7 @@ function u1({
   className: s = "",
   style: d
 }) {
-  const u = vt(i, { width: a, borderRadius: l, color: c }), p = c ?? "var(--color-primary)", [g, f] = z(!1), [h, m] = z(""), b = M(null), y = M(null), v = ue(() => {
+  const u = vt(i, { width: a, borderRadius: l, color: c }), p = c ?? "var(--color-primary)", [g, f] = z(!1), [h, m] = z(""), b = L(null), y = L(null), v = ue(() => {
     const k = h.trim().toLowerCase(), w = k ? Vo.filter((_) => _.category.toLowerCase().includes(k)) : Vo, S = /* @__PURE__ */ new Map();
     for (const _ of w)
       S.has(_.category) || S.set(_.category, []), S.get(_.category).push(_);
@@ -3235,7 +3235,7 @@ function p1({
   className: p = "",
   style: g
 }) {
-  const f = We(c, { borderRadius: d, color: u }), h = u ?? "var(--color-primary)", [m, b] = z(!1), y = M(null), v = (k) => {
+  const f = We(c, { borderRadius: d, color: u }), h = u ?? "var(--color-primary)", [m, b] = z(!1), y = L(null), v = (k) => {
     !k || !k.length || n(Array.from(k));
   };
   return /* @__PURE__ */ x("div", { "data-testid": t, className: `dui_dropzone ${p}`, style: { width: s, ...g }, children: [
@@ -3297,7 +3297,7 @@ function f1({
   className: c = "",
   style: s
 }) {
-  const d = Ie(), u = a ?? d.size, p = l ?? d.activeColor ?? "var(--color-primary)", g = lt.card[u], f = M(null);
+  const d = Ie(), u = a ?? d.size, p = l ?? d.activeColor ?? "var(--color-primary)", g = lt.card[u], f = L(null);
   return /* @__PURE__ */ x(
     "div",
     {
@@ -3462,9 +3462,9 @@ function h1({
   className: u = "",
   style: p
 }) {
-  const g = vt(l, { borderRadius: c, color: s }), f = s ?? "var(--color-primary)", [h, m] = z(/* @__PURE__ */ new Set()), [b, y] = z(/* @__PURE__ */ new Set()), v = new Set(n), k = e.filter((R) => !v.has(R.value)), w = e.filter((R) => v.has(R.value)), S = (R, P, D) => {
-    const L = new Set(R);
-    L.has(D) ? L.delete(D) : L.add(D), P(L);
+  const g = vt(l, { borderRadius: c, color: s }), f = s ?? "var(--color-primary)", [h, m] = z(/* @__PURE__ */ new Set()), [b, y] = z(/* @__PURE__ */ new Set()), v = new Set(n), k = e.filter((R) => !v.has(R.value)), w = e.filter((R) => v.has(R.value)), S = (R, B, M) => {
+    const D = new Set(R);
+    D.has(M) ? D.delete(M) : D.add(M), B(D);
   }, _ = () => {
     r([...n, ...Array.from(h)]), m(/* @__PURE__ */ new Set());
   }, I = () => {
@@ -3731,7 +3731,7 @@ function x1({
   className: u = "",
   style: p
 }) {
-  const g = wt(l, { width: c, borderRadius: s, color: d }), f = d ?? "var(--color-primary)", h = M(null), m = () => {
+  const g = wt(l, { width: c, borderRadius: s, color: d }), f = d ?? "var(--color-primary)", h = L(null), m = () => {
     h.current && clearTimeout(h.current);
   }, b = () => {
     m(), a > 0 && (h.current = setTimeout(n, a));
@@ -4086,7 +4086,7 @@ function _1({
 }
 const _m = ["#6366F1", "#22C55E", "#F59E0B", "#EF4444", "#EC4899", "#06B6D4"], I1 = yo(
   function({ colors: e = _m, particleCount: n = 80 }, r) {
-    const i = M(null), a = M([]), l = M(null);
+    const i = L(null), a = L([]), l = L(null);
     return Hb(r, () => ({
       fire(c) {
         const s = i.current;
@@ -4139,7 +4139,7 @@ function E1({
   color: s,
   className: d = ""
 }) {
-  const u = Nt(l, { borderRadius: c, color: s }), p = M(null), [g, f] = z({ top: -9999, left: -9999 });
+  const u = Nt(l, { borderRadius: c, color: s }), p = L(null), [g, f] = z({ top: -9999, left: -9999 });
   return U(() => {
     if (!e || !r || !p.current) return;
     const h = p.current, m = () => {
@@ -4155,8 +4155,8 @@ function E1({
   }, [e, r, a]), U(() => {
     if (!e) return;
     const h = (b) => {
-      var y;
-      r != null && r.contains(b.target) || (y = p.current) != null && y.contains(b.target) || n();
+      var y, v, k;
+      r != null && r.contains(b.target) || (y = p.current) != null && y.contains(b.target) || (k = (v = b.target) == null ? void 0 : v.closest) != null && k.call(v, ".dui_combobox__menu, .dui_select__menu") || n();
     }, m = (b) => {
       b.key === "Escape" && n();
     };
@@ -4196,7 +4196,7 @@ function R1({
   color: a,
   disabled: l = !1
 }) {
-  const c = Nt(i, { color: a }), [s, d] = z(!1), [u, p] = z({ top: -9999, left: -9999 }), g = M(null), f = M(null), h = M(null), m = () => {
+  const c = Nt(i, { color: a }), [s, d] = z(!1), [u, p] = z({ top: -9999, left: -9999 }), g = L(null), f = L(null), h = L(null), m = () => {
     l || (h.current = setTimeout(() => d(!0), r));
   }, b = () => {
     h.current && clearTimeout(h.current), d(!1);
@@ -4363,7 +4363,7 @@ function N1({
   children: u,
   className: p = ""
 }) {
-  const g = M(null), [f, h] = z(0), [m, b] = z(!1), [y, v] = z(e), [k, w] = z(), [S, _] = z(!1), [I, E] = z(e);
+  const g = L(null), [f, h] = z(0), [m, b] = z(!1), [y, v] = z(e), [k, w] = z(), [S, _] = z(!1), [I, E] = z(e);
   U(() => {
     if (e) {
       E(!0), _(!1), h(0), v(!0);
@@ -4372,21 +4372,21 @@ function N1({
     }
     if (!I) return;
     h(0), _(!0);
-    const B = window.setTimeout(() => {
+    const P = window.setTimeout(() => {
       E(!1), _(!1);
     }, Am);
-    return () => window.clearTimeout(B);
+    return () => window.clearTimeout(P);
   }, [e, I]), U(() => {
     if (!I) return;
-    const B = (T) => {
+    const P = (T) => {
       T.key === "Escape" && n();
     };
-    return document.addEventListener("keydown", B), () => document.removeEventListener("keydown", B);
+    return document.addEventListener("keydown", P), () => document.removeEventListener("keydown", P);
   }, [I, n]);
-  const N = se((B) => {
-    if (!s || B.button !== 0) return;
-    B.preventDefault();
-    const T = { x: B.clientX, y: B.clientY, at: Date.now() };
+  const N = se((P) => {
+    if (!s || P.button !== 0) return;
+    P.preventDefault();
+    const T = { x: P.clientX, y: P.clientY, at: Date.now() };
     b(!0);
     const O = g.current ? mn(r) === "x" ? g.current.offsetWidth : g.current.offsetHeight : 0, W = Im(r), $ = () => mn(r) === "x" ? window.innerWidth : window.innerHeight, A = (G) => {
       const te = G.clientX - T.x, Z = G.clientY - T.y, de = Wr(W, te, Z);
@@ -4403,7 +4403,7 @@ function N1({
     window.addEventListener("pointermove", A), window.addEventListener("pointerup", H), window.addEventListener("pointercancel", H);
   }, [r, s, n]);
   if (!I) return null;
-  const R = mn(r) === "x", P = R ? "width" : "height", D = R ? "min(560px, 92vw)" : "min(60vh, 720px)", L = /* @__PURE__ */ x(ve, { children: [
+  const R = mn(r) === "x", B = R ? "width" : "height", M = R ? "min(560px, 92vw)" : "min(60vh, 720px)", D = /* @__PURE__ */ x(ve, { children: [
     l ?? (a !== void 0 && /* @__PURE__ */ x("div", { className: "dui_sheet__head", children: [
       /* @__PURE__ */ o("span", { className: "dui_sheet__title", children: a }),
       /* @__PURE__ */ o("button", { type: "button", className: "dui_sheet__x", onClick: n, "aria-label": "Close", children: /* @__PURE__ */ o(Ze, { size: 14 }) })
@@ -4417,8 +4417,8 @@ function N1({
       {
         "data-testid": t,
         className: `dui_sheet__backdrop dui_sheet__backdrop--${r}` + (S ? " dui_sheet__backdrop--closing" : ""),
-        onPointerDown: d ? (B) => {
-          B.target === B.currentTarget && n();
+        onPointerDown: d ? (P) => {
+          P.target === P.currentTarget && n();
         } : void 0,
         children: /* @__PURE__ */ x(
           "div",
@@ -4430,7 +4430,7 @@ function N1({
             style: {
               /* What the handle was pulled to wins over what the caller asked for
                  — it is the reader saying how much room this needs. */
-              [P]: k !== void 0 ? `${k}px` : typeof i == "number" ? `${i}px` : i ?? D,
+              [B]: k !== void 0 ? `${k}px` : typeof i == "number" ? `${i}px` : i ?? M,
               /* Only while it is being held or springing back — at rest this is
                  empty so the keyframes own the transform. */
               transform: zm(r, f) || void 0
@@ -4446,7 +4446,7 @@ function N1({
                   children: /* @__PURE__ */ o("i", {})
                 }
               ),
-              R ? /* @__PURE__ */ o("div", { className: "dui_sheet__body--side", children: L }) : L
+              R ? /* @__PURE__ */ o("div", { className: "dui_sheet__body--side", children: D }) : D
             ]
           }
         )
@@ -4507,7 +4507,7 @@ function T1({
   size: l,
   className: c = ""
 }) {
-  const s = Nt(l), d = M(null), u = M({ startY: 0, dy: 0, dragging: !1 }), [p, g] = z(0), [f, h] = z(!1);
+  const s = Nt(l), d = L(null), u = L({ startY: 0, dy: 0, dragging: !1 }), [p, g] = z(0), [f, h] = z(!1);
   U(() => {
     e && (g(0), h(!1));
   }, [e]);
@@ -4712,7 +4712,7 @@ function L1({
   className: d = "",
   style: u
 }) {
-  const p = i ?? "var(--color-primary)", g = r === "up-left" ? 1 : -1, [f, h] = z(n), [m, b] = z(!1), y = M(null);
+  const p = i ?? "var(--color-primary)", g = r === "up-left" ? 1 : -1, [f, h] = z(n), [m, b] = z(!1), y = L(null);
   return U(() => {
     if (y.current && clearTimeout(y.current), n) {
       h(!0), b(!1);
@@ -4800,7 +4800,7 @@ function O1({
 }) {
   const p = An(c, { activeColor: s }), g = p.activeColor ?? "var(--color-primary)", [f, h] = z(!1), m = i ?? f, b = (R) => {
     h(R), r == null || r(R);
-  }, [y, v] = z(t), [k, w] = z(!1), S = M(null);
+  }, [y, v] = z(t), [k, w] = z(!1), S = L(null);
   U(() => {
     m || v(t);
   }, [t, m]), U(() => {
@@ -4868,10 +4868,10 @@ function O1({
         fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
         cursor: n ? "text" : void 0
       },
-      children: N.map((R, P) => {
-        const D = P === N.length - 1, L = R.collapse;
+      children: N.map((R, B) => {
+        const M = B === N.length - 1, D = R.collapse;
         return /* @__PURE__ */ x("span", { style: { display: "flex", alignItems: "center", gap: 4, minWidth: 0 }, children: [
-          L ? /* @__PURE__ */ o(
+          D ? /* @__PURE__ */ o(
             "button",
             {
               type: "button",
@@ -4887,7 +4887,7 @@ function O1({
               },
               children: /* @__PURE__ */ o(ho, { size: 13 })
             }
-          ) : e && !D ? /* @__PURE__ */ o(
+          ) : e && !M ? /* @__PURE__ */ o(
             "button",
             {
               type: "button",
@@ -4907,19 +4907,19 @@ function O1({
               children: R.label
             }
           ) : /* @__PURE__ */ o("span", { style: {
-            color: D ? "var(--color-text-primary)" : g,
-            fontWeight: D ? 700 : 500,
+            color: M ? "var(--color-text-primary)" : g,
+            fontWeight: M ? 700 : 500,
             whiteSpace: "nowrap",
             padding: "1px 3px"
           }, children: R.label }),
-          !D && /* @__PURE__ */ o(
+          !M && /* @__PURE__ */ o(
             Pe,
             {
               size: 11,
               style: { color: "var(--color-text-muted)", opacity: 0.55, flexShrink: 0 }
             }
           )
-        ] }, `${R.path}-${P}`);
+        ] }, `${R.path}-${B}`);
       })
     }
   );
@@ -5252,7 +5252,7 @@ function V1({
   className: r = "",
   style: i
 }) {
-  const a = M(null), [l, c] = z(!1);
+  const a = L(null), [l, c] = z(!1);
   return U(() => {
     const s = a.current;
     if (!s) return;
@@ -5326,7 +5326,7 @@ function X1({
   className: r = "",
   style: i
 }) {
-  const a = it(n), l = M(null), [c, s] = z(!1);
+  const a = it(n), l = L(null), [c, s] = z(!1);
   return U(() => {
     const d = l.current;
     if (!d) return;
@@ -5541,7 +5541,7 @@ function Fm({
   className: d = "",
   style: u
 }) {
-  const p = Be(c, { color: s }), [g, f] = z(a ? 0 : e), h = M(null);
+  const p = Be(c, { color: s }), [g, f] = z(a ? 0 : e), h = L(null);
   return U(() => {
     if (!a) {
       f(e);
@@ -5612,23 +5612,23 @@ function ew({
   className: u = "",
   style: p
 }) {
-  const g = vt(l, { width: c, borderRadius: s, color: d }), f = d ?? "var(--color-accent, var(--color-primary))", [h, m] = z(!1), [b, y] = z(n), v = M(null), k = M(null);
+  const g = vt(l, { width: c, borderRadius: s, color: d }), f = d ?? "var(--color-accent, var(--color-primary))", [h, m] = z(!1), [b, y] = z(n), v = L(null), k = L(null);
   U(() => {
     h && y(n);
   }, [h, n]), U(() => {
     if (!h || !v.current || !k.current) return;
     const E = v.current, N = k.current, R = () => {
-      const D = E.getBoundingClientRect();
-      N.style.top = `${D.bottom + 4}px`, N.style.left = `${Math.min(D.left, window.innerWidth - N.offsetWidth - 8)}px`;
+      const M = E.getBoundingClientRect();
+      N.style.top = `${M.bottom + 4}px`, N.style.left = `${Math.min(M.left, window.innerWidth - N.offsetWidth - 8)}px`;
     };
     R();
-    const P = requestAnimationFrame(R);
-    return () => cancelAnimationFrame(P);
+    const B = requestAnimationFrame(R);
+    return () => cancelAnimationFrame(B);
   }, [h, b]), U(() => {
     if (!h) return;
     const E = (N) => {
-      var R, P;
-      (R = v.current) != null && R.contains(N.target) || (P = k.current) != null && P.contains(N.target) || m(!1);
+      var R, B;
+      (R = v.current) != null && R.contains(N.target) || (B = k.current) != null && B.contains(N.target) || m(!1);
     };
     return document.addEventListener("mousedown", E), () => document.removeEventListener("mousedown", E);
   }, [h]);
@@ -5674,14 +5674,14 @@ function ew({
     ),
     h && Se(
       /* @__PURE__ */ o("div", { ref: k, className: "dui_cascader__menu", style: { position: "fixed", zIndex: 99999 }, children: w.map((E, N) => /* @__PURE__ */ o("div", { className: "dui_cascader__column", children: E.map((R) => {
-        const P = b[N] === R.value;
+        const B = b[N] === R.value;
         return /* @__PURE__ */ x(
           "button",
           {
             type: "button",
-            className: `dui_cascader__item${P ? " dui_cascader__item--active" : ""}`,
+            className: `dui_cascader__item${B ? " dui_cascader__item--active" : ""}`,
             onClick: () => _(N, R),
-            style: { fontSize: g.fontSize, color: P ? f : "var(--color-text-primary)" },
+            style: { fontSize: g.fontSize, color: B ? f : "var(--color-text-primary)" },
             children: [
               R.label,
               R.children && /* @__PURE__ */ o(Pe, { size: 11, style: { marginLeft: "auto", opacity: 0.5 } })
@@ -5709,7 +5709,7 @@ function tw({
   className: p = "",
   style: g
 }) {
-  const f = vt(c, { width: s, borderRadius: d, color: u }), h = u ?? "var(--color-accent, var(--color-primary))", [m, b] = z(!1), [y, v] = z(n), k = M(null), w = M(null);
+  const f = vt(c, { width: s, borderRadius: d, color: u }), h = u ?? "var(--color-accent, var(--color-primary))", [m, b] = z(!1), [y, v] = z(n), k = L(null), w = L(null);
   U(() => v(n), [n]);
   const S = ue(() => {
     const I = y.trim().toLowerCase();
@@ -5718,8 +5718,8 @@ function tw({
   U(() => {
     if (!m || !k.current || !w.current) return;
     const I = k.current, E = w.current, N = () => {
-      const P = I.getBoundingClientRect();
-      E.style.top = `${P.bottom + 4}px`, E.style.left = `${P.left}px`, E.style.minWidth = `${P.width}px`;
+      const B = I.getBoundingClientRect();
+      E.style.top = `${B.bottom + 4}px`, E.style.left = `${B.left}px`, E.style.minWidth = `${B.width}px`;
     };
     N();
     const R = requestAnimationFrame(N);
@@ -5727,11 +5727,11 @@ function tw({
   }, [m, S.length]), U(() => {
     if (!m) return;
     const I = (E) => {
-      var N, R;
-      (N = k.current) != null && N.contains(E.target) || (R = w.current) != null && R.contains(E.target) || (b(!1), l && r(y));
+      var N, R, B;
+      (N = k.current) != null && N.contains(E.target) || (R = w.current) != null && R.contains(E.target) || (b(!1), l && r(((B = e.find((M) => M.label === y)) == null ? void 0 : B.value) ?? y));
     };
     return document.addEventListener("mousedown", I), () => document.removeEventListener("mousedown", I);
-  }, [m, l, y, r]);
+  }, [m, l, y, r, e]);
   const _ = (I) => {
     v(I.label), r(I.value), b(!1);
   };
@@ -5765,14 +5765,17 @@ function tw({
       }
     ),
     m && S.length > 0 && Se(
-      /* @__PURE__ */ o("div", { ref: w, className: "dui_combobox__menu", style: { position: "fixed", zIndex: 99999 }, children: S.map((I) => /* @__PURE__ */ o(
+      /* @__PURE__ */ o("div", { ref: w, className: "dui_combobox__menu", style: { position: "fixed", zIndex: 99999 }, children: S.map((I) => /* @__PURE__ */ x(
         "button",
         {
           type: "button",
           className: "dui_combobox__item",
           onClick: () => _(I),
-          style: { fontSize: f.fontSize },
-          children: I.label
+          style: { fontSize: f.fontSize, display: "flex", alignItems: "center", gap: 12 },
+          children: [
+            /* @__PURE__ */ o("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }, children: I.label }),
+            I.hint && /* @__PURE__ */ o("span", { style: { flexShrink: 0, opacity: 0.6, fontVariantNumeric: "tabular-nums" }, children: I.hint })
+          ]
         },
         I.value
       )) }),
@@ -5830,7 +5833,7 @@ function rw({
   className: a = "",
   style: l
 }) {
-  const c = M(null), [s, d] = z(0), u = t.length * e, p = Math.max(0, Math.floor(s / e) - i), g = Math.min(t.length, Math.ceil((s + n) / e) + i), f = ue(() => t.slice(p, g), [t, p, g]);
+  const c = L(null), [s, d] = z(0), u = t.length * e, p = Math.max(0, Math.floor(s / e) - i), g = Math.min(t.length, Math.ceil((s + n) / e) + i), f = ue(() => t.slice(p, g), [t, p, g]);
   return /* @__PURE__ */ o(
     "div",
     {
@@ -6039,7 +6042,7 @@ function sw({
   className: a = "",
   style: l
 }) {
-  const c = yt(n, { color: r }), s = r ?? "var(--color-primary)", [d, u] = z(!1), [p, g] = z(t), f = M(null);
+  const c = yt(n, { color: r }), s = r ?? "var(--color-primary)", [d, u] = z(!1), [p, g] = z(t), f = L(null);
   U(() => {
     var b, y;
     d && (g(t), (b = f.current) == null || b.focus(), (y = f.current) == null || y.select());
@@ -6107,7 +6110,7 @@ function Vm({
   label: c = "Columns",
   icon: s
 }) {
-  const d = Kb(r, { color: i }), [u, p] = z(!1), g = M(null), f = M(null), h = new Set(e);
+  const d = Kb(r, { color: i }), [u, p] = z(!1), g = L(null), f = L(null), h = new Set(e);
   U(() => {
     if (!u || !g.current || !f.current) return;
     const b = g.current.getBoundingClientRect();
@@ -6515,14 +6518,14 @@ function hw({
   className: p = "",
   style: g
 }) {
-  const f = s ?? "var(--color-primary)", h = M(null), [m, b] = e, y = (w) => Math.round(Math.min(i, Math.max(r, w)) / a) * a, v = (w) => (w - r) / (i - r) * 100, k = se((w) => (S) => {
+  const f = s ?? "var(--color-primary)", h = L(null), [m, b] = e, y = (w) => Math.round(Math.min(i, Math.max(r, w)) / a) * a, v = (w) => (w - r) / (i - r) * 100, k = se((w) => (S) => {
     if (l) return;
     S.target.setPointerCapture(S.pointerId);
     const _ = (E) => {
       const N = h.current;
       if (!N) return;
-      const R = N.getBoundingClientRect(), P = Math.min(1, Math.max(0, (E.clientX - R.left) / R.width)), D = y(r + P * (i - r));
-      n(w === "lo" ? [Math.min(D, b), b] : [m, Math.max(D, m)]);
+      const R = N.getBoundingClientRect(), B = Math.min(1, Math.max(0, (E.clientX - R.left) / R.width)), M = y(r + B * (i - r));
+      n(w === "lo" ? [Math.min(M, b), b] : [m, Math.max(M, m)]);
     }, I = () => {
       window.removeEventListener("pointermove", _), window.removeEventListener("pointerup", I);
     };
@@ -6699,7 +6702,7 @@ function vw({
   className: s = "",
   style: d
 }) {
-  const u = Ue(a, { borderRadius: l, color: c }), p = c ?? "var(--color-accent, var(--color-primary))", [g, f] = z(!1), [h, m] = z([]), b = M(null), y = () => {
+  const u = Ue(a, { borderRadius: l, color: c }), p = c ?? "var(--color-accent, var(--color-primary))", [g, f] = z(!1), [h, m] = z([]), b = L(null), y = () => {
     i || (m([]), f(!0), requestAnimationFrame(() => {
       var w;
       return (w = b.current) == null ? void 0 : w.focus();
@@ -6794,7 +6797,7 @@ function kw({
   className: u = "",
   style: p
 }) {
-  const g = Ue(c, { borderRadius: s, color: d }), f = d ?? "var(--color-accent, var(--color-primary))", h = M(null), m = () => {
+  const g = Ue(c, { borderRadius: s, color: d }), f = d ?? "var(--color-accent, var(--color-primary))", h = L(null), m = () => {
     e.trim() && r();
   };
   return /* @__PURE__ */ x(
@@ -6921,7 +6924,7 @@ function Iw({
   color: i,
   className: a = ""
 }) {
-  const l = Nt(r, { color: i }), c = i ?? "var(--color-primary)", [s, d] = z(!1), u = M(null), p = M(null), g = e.filter((f) => !f.read).length;
+  const l = Nt(r, { color: i }), c = i ?? "var(--color-primary)", [s, d] = z(!1), u = L(null), p = L(null), g = e.filter((f) => !f.read).length;
   return U(() => {
     if (!s || !u.current || !p.current) return;
     const f = u.current.getBoundingClientRect();
@@ -7932,7 +7935,7 @@ function tk({
   className: d = "",
   style: u
 }) {
-  const p = vt(a, { width: l, borderRadius: c, color: s }), g = s ?? "var(--color-primary)", [f, h] = z(!1), m = M(null), b = M(null), y = e.find((v) => v.value === n);
+  const p = vt(a, { width: l, borderRadius: c, color: s }), g = s ?? "var(--color-primary)", [f, h] = z(!1), m = L(null), b = L(null), y = e.find((v) => v.value === n);
   return U(() => {
     if (!f || !m.current || !b.current) return;
     const v = m.current.getBoundingClientRect();
@@ -8183,7 +8186,7 @@ function ak({
   className: a = "",
   style: l
 }) {
-  const c = fn(void 0, { aspectRatio: r }), s = M(null), d = M({ startX: 0, startY: 0, origX: 0, origY: 0, dragging: !1 }), u = (f) => {
+  const c = fn(void 0, { aspectRatio: r }), s = L(null), d = L({ startX: 0, startY: 0, origX: 0, origY: 0, dragging: !1 }), u = (f) => {
     d.current = { startX: f.clientX, startY: f.clientY, origX: e.x, origY: e.y, dragging: !0 }, f.target.setPointerCapture(f.pointerId);
   }, p = (f) => {
     if (!d.current.dragging || !s.current) return;
@@ -8242,7 +8245,7 @@ function lk({
   className: r = "",
   style: i
 }) {
-  const a = fn(void 0, { aspectRatio: 1.7777777777777777 }), l = n ?? "var(--color-primary)", c = M(null), [s, d] = z(!1), [u, p] = z(!1), [g, f] = z(0), [h, m] = z(0);
+  const a = fn(void 0, { aspectRatio: 1.7777777777777777 }), l = n ?? "var(--color-primary)", c = L(null), [s, d] = z(!1), [u, p] = z(!1), [g, f] = z(0), [h, m] = z(0);
   U(() => {
     const v = c.current;
     if (!v) return;
@@ -8326,7 +8329,7 @@ function sk({
   className: r = "",
   style: i
 }) {
-  const a = n ?? "var(--color-primary)", l = M(null), [c, s] = z(!1), [d, u] = z(0), [p, g] = z(0);
+  const a = n ?? "var(--color-primary)", l = L(null), [c, s] = z(!1), [d, u] = z(0), [p, g] = z(0);
   U(() => {
     const m = l.current;
     if (!m) return;
@@ -8926,7 +8929,7 @@ function mx({
   className: a,
   style: l
 }) {
-  const c = M(null), [s, d] = z(null);
+  const c = L(null), [s, d] = z(null);
   U(() => {
     if (n !== void 0) return;
     const p = c.current;
@@ -9066,24 +9069,24 @@ function uk({
   className: _ = "",
   style: I
 }) {
-  const E = Be(w), N = S ?? "var(--color-primary)", R = M(null);
+  const E = Be(w), N = S ?? "var(--color-primary)", R = L(null);
   U(() => {
     var O;
     if (!a) return;
-    const L = R.current;
-    if (!L) return;
-    const B = typeof window < "u" && ((O = window.matchMedia) == null ? void 0 : O.call(window, "(prefers-reduced-motion: reduce)").matches), T = requestAnimationFrame(() => {
-      L.scrollIntoView({
-        behavior: B ? "auto" : "smooth",
+    const D = R.current;
+    if (!D) return;
+    const P = typeof window < "u" && ((O = window.matchMedia) == null ? void 0 : O.call(window, "(prefers-reduced-motion: reduce)").matches), T = requestAnimationFrame(() => {
+      D.scrollIntoView({
+        behavior: P ? "auto" : "smooth",
         block: "nearest",
         inline: "nearest"
       });
     });
     return () => cancelAnimationFrame(T);
   }, [a, t]);
-  const P = M(void 0);
-  a && (P.current = a);
-  const D = {
+  const B = L(void 0);
+  a && (B.current = a);
+  const M = {
     fontSize: 9,
     fontWeight: 600,
     letterSpacing: ".07em",
@@ -9104,9 +9107,9 @@ function uk({
           padding: "5px 12px 6px",
           borderBottom: "1px solid var(--color-surface-border)"
         }, children: [
-          /* @__PURE__ */ o("span", { style: { ...D, flex: 1, minWidth: 0 }, children: "name" }),
-          l && /* @__PURE__ */ o("span", { style: { ...D, width: 88, textAlign: "right" }, children: "size" }),
-          c && /* @__PURE__ */ o("span", { style: { ...D, width: 132, textAlign: "right" }, children: "modified" }),
+          /* @__PURE__ */ o("span", { style: { ...M, flex: 1, minWidth: 0 }, children: "name" }),
+          l && /* @__PURE__ */ o("span", { style: { ...M, width: 88, textAlign: "right" }, children: "size" }),
+          c && /* @__PURE__ */ o("span", { style: { ...M, width: 132, textAlign: "right" }, children: "modified" }),
           d.length > 0 && /* @__PURE__ */ o("span", { style: { width: d.length * (s ? 21 : 29) } })
         ] }),
         /* @__PURE__ */ x(
@@ -9120,8 +9123,8 @@ function uk({
               display: "flex",
               flexDirection: "column"
             },
-            onContextMenu: r ? (L) => {
-              L.target.closest("[data-file-row]") || (L.preventDefault(), r(L));
+            onContextMenu: r ? (D) => {
+              D.target.closest("[data-file-row]") || (D.preventDefault(), r(D));
             } : void 0,
             children: [
               p && /* @__PURE__ */ x(
@@ -9202,19 +9205,19 @@ function uk({
                 color: "var(--color-text-muted)",
                 fontSize: E.fontSize
               }, children: b }),
-              t.map((L) => {
-                const B = !!L.disabledReason, T = L.kind === "dir", O = L.id === g, W = L.id === a, $ = d.filter((A) => !A.show || A.show(L));
+              t.map((D) => {
+                const P = !!D.disabledReason, T = D.kind === "dir", O = D.id === g, W = D.id === a, $ = d.filter((A) => !A.show || A.show(D));
                 return /* @__PURE__ */ x(
                   "div",
                   {
                     "data-file-row": "",
                     ref: W ? R : void 0,
-                    onClick: !B && i ? () => i(L) : void 0,
-                    onDoubleClick: !B && e ? () => e(L) : void 0,
+                    onClick: !P && i ? () => i(D) : void 0,
+                    onDoubleClick: !P && e ? () => e(D) : void 0,
                     onContextMenu: n ? (A) => {
-                      A.preventDefault(), i == null || i(L), n(L, A);
+                      A.preventDefault(), i == null || i(D), n(D, A);
                     } : void 0,
-                    title: L.disabledReason ?? L.name,
+                    title: D.disabledReason ?? D.name,
                     style: {
                       display: "flex",
                       alignItems: "center",
@@ -9230,9 +9233,9 @@ function uk({
                       // A row that responds to a click has to look like it will.
                       // The default text caret says "select this string" and is the
                       // single most common reason a list feels dead.
-                      cursor: B ? "default" : i || e ? "pointer" : "default",
-                      opacity: B ? 0.62 : 1,
-                      transition: L.id === P.current ? "background .5s ease, box-shadow .5s ease" : "background .12s ease, box-shadow .12s ease",
+                      cursor: P ? "default" : i || e ? "pointer" : "default",
+                      opacity: P ? 0.62 : 1,
+                      transition: D.id === B.current ? "background .5s ease, box-shadow .5s ease" : "background .12s ease, box-shadow .12s ease",
                       userSelect: "none"
                     },
                     children: [
@@ -9246,13 +9249,13 @@ function uk({
                         /* @__PURE__ */ o("span", { style: {
                           display: "flex",
                           flexShrink: 0,
-                          color: W ? xn : Ix(L)
-                        }, children: B ? /* @__PURE__ */ o($n, { size: 14 }) : T ? /* @__PURE__ */ o(xr, { size: 14 }) : L.kind === "link" ? /* @__PURE__ */ o(yr, { size: 14 }) : /* @__PURE__ */ o(mr, { size: 14 }) }),
-                        T && !B && e ? /* @__PURE__ */ o(
+                          color: W ? xn : Ix(D)
+                        }, children: P ? /* @__PURE__ */ o($n, { size: 14 }) : T ? /* @__PURE__ */ o(xr, { size: 14 }) : D.kind === "link" ? /* @__PURE__ */ o(yr, { size: 14 }) : /* @__PURE__ */ o(mr, { size: 14 }) }),
+                        T && !P && e ? /* @__PURE__ */ o(
                           "button",
                           {
                             type: "button",
-                            onClick: () => e(L),
+                            onClick: () => e(D),
                             style: {
                               border: "none",
                               background: "transparent",
@@ -9268,28 +9271,28 @@ function uk({
                               textOverflow: "ellipsis",
                               whiteSpace: "nowrap"
                             },
-                            children: L.name
+                            children: D.name
                           }
                         ) : /* @__PURE__ */ o("span", { style: {
                           fontFamily: "ui-monospace, monospace",
                           fontSize: s ? 10 : E.fontSize,
-                          color: W ? Hr : B ? "var(--color-text-muted)" : "var(--color-text-primary)",
+                          color: W ? Hr : P ? "var(--color-text-muted)" : "var(--color-text-primary)",
                           fontWeight: W ? 600 : void 0,
                           minWidth: 0,
                           overflow: "hidden",
                           textOverflow: "ellipsis",
                           whiteSpace: "nowrap"
-                        }, children: Sx(L.name, f, W ? xn : void 0) }),
-                        L.linkTarget && /* @__PURE__ */ x("span", { style: {
+                        }, children: Sx(D.name, f, W ? xn : void 0) }),
+                        D.linkTarget && /* @__PURE__ */ x("span", { style: {
                           fontFamily: "ui-monospace, monospace",
                           fontSize: E.fontSize,
                           color: W ? xn : "var(--color-text-muted)",
                           whiteSpace: "nowrap"
                         }, children: [
                           "→ ",
-                          L.linkTarget
+                          D.linkTarget
                         ] }),
-                        L.badge && /* @__PURE__ */ o(_x, { text: L.badge, tone: L.badgeTone, dense: s })
+                        D.badge && /* @__PURE__ */ o(_x, { text: D.badge, tone: D.badgeTone, dense: s })
                       ] }),
                       l && /* @__PURE__ */ o("span", { style: {
                         width: 88,
@@ -9299,7 +9302,7 @@ function uk({
                         fontSize: E.fontSize,
                         fontVariantNumeric: "tabular-nums",
                         color: W ? Hr : "var(--color-text-secondary)"
-                      }, children: L.detail ?? (T ? "—" : kx(L.size)) }),
+                      }, children: D.detail ?? (T ? "—" : kx(D.size)) }),
                       c && /* @__PURE__ */ o("span", { style: {
                         width: 132,
                         textAlign: "right",
@@ -9308,7 +9311,7 @@ function uk({
                         fontSize: E.fontSize,
                         fontVariantNumeric: "tabular-nums",
                         color: W ? xn : "var(--color-text-muted)"
-                      }, children: L.modified ?? "—" }),
+                      }, children: D.modified ?? "—" }),
                       d.length > 0 && /* @__PURE__ */ o("span", { style: {
                         width: d.length * (s ? 21 : 29),
                         flexShrink: 0,
@@ -9321,8 +9324,8 @@ function uk({
                           type: "button",
                           title: A.label,
                           "aria-label": A.label,
-                          disabled: B,
-                          onClick: () => u == null ? void 0 : u(A.id, L),
+                          disabled: P,
+                          onClick: () => u == null ? void 0 : u(A.id, D),
                           style: {
                             display: "grid",
                             placeItems: "center",
@@ -9330,7 +9333,7 @@ function uk({
                             height: s ? 16 : 20,
                             borderRadius: s ? 3 : 5,
                             padding: 0,
-                            cursor: B ? "default" : "pointer",
+                            cursor: P ? "default" : "pointer",
                             color: nr[A.tone ?? "neutral"],
                             /*
                                                       Dense rows drop the button chrome entirely.
@@ -9351,7 +9354,7 @@ function uk({
                       )) })
                     ]
                   },
-                  L.id
+                  D.id
                 );
               })
             ]
@@ -9403,7 +9406,7 @@ function fk({
   className: r = "",
   style: i
 }) {
-  const a = fn(), l = e ?? "var(--color-text-primary)", c = M(null), s = M(!1), [d, u] = z(!0);
+  const a = fn(), l = e ?? "var(--color-text-primary)", c = L(null), s = L(!1), [d, u] = z(!0);
   U(() => {
     const b = c.current;
     if (!b) return;
@@ -9566,7 +9569,7 @@ function xk({
   className: r = "",
   style: i
 }) {
-  const a = We(n), [l, c] = z(null), [s, d] = z(null), [u, p] = z(null), [g, f] = z(null), h = M(!1), m = M(!1), b = (v, k) => {
+  const a = We(n), [l, c] = z(null), [s, d] = z(null), [u, p] = z(null), [g, f] = z(null), h = L(!1), m = L(!1), b = (v, k) => {
     if (!l) return;
     const w = t.map((R) => ({ ...R, cards: [...R.cards] })), S = w.find((R) => R.id === l.colId), _ = S.cards.findIndex((R) => R.id === l.cardId);
     if (_ < 0) return;
@@ -10554,7 +10557,7 @@ function Mx() {
       return ie;
     }).map((ge) => `(${ge})`).join(F);
   }
-  const _ = /\b\B/, I = "[a-zA-Z]\\w*", E = "[a-zA-Z_]\\w*", N = "\\b\\d+(\\.\\d+)?", R = "(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)", P = "\\b(0b[01]+)", D = "!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~", L = (C = {}) => {
+  const _ = /\b\B/, I = "[a-zA-Z]\\w*", E = "[a-zA-Z_]\\w*", N = "\\b\\d+(\\.\\d+)?", R = "(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)", B = "\\b(0b[01]+)", M = "!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~", D = (C = {}) => {
     const F = /^#![ ]*\//;
     return C.binary && (C.begin = m(
       F,
@@ -10571,7 +10574,7 @@ function Mx() {
         Q.index !== 0 && ge.ignoreMatch();
       }
     }, C);
-  }, B = {
+  }, P = {
     begin: "\\\\[\\s\\S]",
     relevance: 0
   }, T = {
@@ -10579,13 +10582,13 @@ function Mx() {
     begin: "'",
     end: "'",
     illegal: "\\n",
-    contains: [B]
+    contains: [P]
   }, O = {
     scope: "string",
     begin: '"',
     end: '"',
     illegal: "\\n",
-    contains: [B]
+    contains: [P]
   }, W = {
     begin: /\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/
   }, $ = function(C, F, Q = {}) {
@@ -10664,19 +10667,19 @@ function Mx() {
     relevance: 0
   }, de = {
     scope: "number",
-    begin: P,
+    begin: B,
     relevance: 0
   }, he = {
     scope: "regexp",
     begin: /\/(?=[^/\n]*\/)/,
     end: /\/[gimuy]*/,
     contains: [
-      B,
+      P,
       {
         begin: /\[/,
         end: /\]/,
         relevance: 0,
-        contains: [B]
+        contains: [P]
       }
     ]
   }, Ae = {
@@ -10695,9 +10698,9 @@ function Mx() {
   var V = /* @__PURE__ */ Object.freeze({
     __proto__: null,
     APOS_STRING_MODE: T,
-    BACKSLASH_ESCAPE: B,
+    BACKSLASH_ESCAPE: P,
     BINARY_NUMBER_MODE: de,
-    BINARY_NUMBER_RE: P,
+    BINARY_NUMBER_RE: B,
     COMMENT: $,
     C_BLOCK_COMMENT_MODE: H,
     C_LINE_COMMENT_MODE: A,
@@ -10727,8 +10730,8 @@ function Mx() {
     PHRASAL_WORDS_MODE: W,
     QUOTE_STRING_MODE: O,
     REGEXP_MODE: he,
-    RE_STARTERS_RE: D,
-    SHEBANG: L,
+    RE_STARTERS_RE: M,
+    SHEBANG: D,
     TITLE_MODE: Ae,
     UNDERSCORE_IDENT_RE: E,
     UNDERSCORE_TITLE_MODE: Ee
@@ -11809,18 +11812,18 @@ function rn(t) {
     label: "func.def",
     contains: [_],
     illegal: /%/
-  }, P = {
+  }, B = {
     relevance: 0,
     match: /\b[A-Z][A-Z_0-9]+\b/,
     className: "variable.constant"
   };
-  function D($) {
+  function M($) {
     return e.concat("(?!", $.join("|"), ")");
   }
-  const L = {
+  const D = {
     match: e.concat(
       /\b/,
-      D([
+      M([
         ...Ja,
         "super",
         "import"
@@ -11830,7 +11833,7 @@ function rn(t) {
     ),
     className: "title.function",
     relevance: 0
-  }, B = {
+  }, P = {
     begin: e.concat(/\./, e.lookahead(
       e.concat(r, /(?![0-9A-Za-z$_(])/)
     )),
@@ -12007,7 +12010,7 @@ function rn(t) {
         match: /\.\.\./,
         relevance: 0
       },
-      B,
+      P,
       // hack: prevents detection of keywords in some circumstances
       // .keyword()
       // $keyword = x
@@ -12020,8 +12023,8 @@ function rn(t) {
         className: { 1: "title.function" },
         contains: [_]
       },
-      L,
-      P,
+      D,
+      B,
       I,
       T,
       {
@@ -12464,18 +12467,18 @@ function Wx(t) {
     label: "func.def",
     contains: [_],
     illegal: /%/
-  }, P = {
+  }, B = {
     relevance: 0,
     match: /\b[A-Z][A-Z_0-9]+\b/,
     className: "variable.constant"
   };
-  function D($) {
+  function M($) {
     return e.concat("(?!", $.join("|"), ")");
   }
-  const L = {
+  const D = {
     match: e.concat(
       /\b/,
-      D([
+      M([
         ...ol,
         "super",
         "import"
@@ -12485,7 +12488,7 @@ function Wx(t) {
     ),
     className: "title.function",
     relevance: 0
-  }, B = {
+  }, P = {
     begin: e.concat(/\./, e.lookahead(
       e.concat(r, /(?![0-9A-Za-z$_(])/)
     )),
@@ -12662,7 +12665,7 @@ function Wx(t) {
         match: /\.\.\./,
         relevance: 0
       },
-      B,
+      P,
       // hack: prevents detection of keywords in some circumstances
       // .keyword()
       // $keyword = x
@@ -12675,8 +12678,8 @@ function Wx(t) {
         className: { 1: "title.function" },
         contains: [_]
       },
-      L,
-      P,
+      D,
+      B,
       I,
       T,
       {
@@ -16849,7 +16852,7 @@ function Ak({
   className: a = "",
   style: l
 }) {
-  const c = fn(), [s, d] = z(50), u = M(null), p = M(!1), g = (f) => {
+  const c = fn(), [s, d] = z(50), u = L(null), p = L(!1), g = (f) => {
     var b;
     const h = (b = u.current) == null ? void 0 : b.getBoundingClientRect();
     if (!h) return;
@@ -16890,7 +16893,7 @@ function Mk({
   className: a = "",
   style: l
 }) {
-  const c = r ?? "var(--color-primary)", [s, d] = z(0), [u, p] = z(!1), g = M({ startX: 0, dragging: !1 });
+  const c = r ?? "var(--color-primary)", [s, d] = z(0), [u, p] = z(!1), g = L({ startX: 0, dragging: !1 });
   U(() => {
     if (!e || u || t.length <= 1) return;
     const m = setInterval(() => d((b) => (b + 1) % t.length), n);
@@ -18777,7 +18780,7 @@ function Fk({
 }) {
   const [f, h] = z("rich"), m = r ?? f, b = (T) => {
     i == null || i(T), r || h(T);
-  }, y = M(null), [v, k] = z("p"), [w, S] = z(null), [_, I] = z(""), E = M(null), N = () => {
+  }, y = L(null), [v, k] = z("p"), [w, S] = z(null), [_, I] = z(""), E = L(null), N = () => {
     const T = _.trim(), O = w;
     if (S(null), I(""), !T || !O) return;
     const W = y.current;
@@ -18786,7 +18789,7 @@ function Fk({
         const $ = window.getSelection();
         $ == null || $.removeAllRanges(), $ == null || $.addRange(E.current);
       }
-      O === "link" ? document.execCommand("createLink", !1, T) : document.execCommand("insertHTML", !1, `<img src="${Py(T)}" alt="" />`), P();
+      O === "link" ? document.execCommand("createLink", !1, T) : document.execCommand("insertHTML", !1, `<img src="${Py(T)}" alt="" />`), B();
     }
   }, R = ue(() => {
     try {
@@ -18799,10 +18802,10 @@ function Fk({
     const T = y.current;
     !T || m !== "rich" || pi(T.innerHTML).trim() !== (e || "").trim() && (T.innerHTML = R);
   }, [R, m, e]);
-  const P = se(() => {
+  const B = se(() => {
     const T = y.current;
     T && n(pi(T.innerHTML));
-  }, [n]), D = se(() => {
+  }, [n]), M = se(() => {
     var W;
     const T = window.getSelection();
     let O = T == null ? void 0 : T.anchorNode;
@@ -18815,7 +18818,7 @@ function Fk({
       O = O.parentElement;
     }
     k("p");
-  }, []), L = (T) => {
+  }, []), D = (T) => {
     if (s) return;
     const O = y.current;
     if (O) {
@@ -18831,9 +18834,9 @@ function Fk({
         !1,
         '<ul data-task="1"><li><input type="checkbox" disabled /> item</li></ul><p><br></p>'
       ) : T.startsWith("formatBlock:") ? document.execCommand("formatBlock", !1, T.slice(12)) : document.execCommand(T);
-      P(), D();
+      B(), M();
     }
-  }, B = s;
+  }, P = s;
   return /* @__PURE__ */ x("div", { "data-testid": t, className: `dui_mde ${p}`, style: g, children: [
     /* @__PURE__ */ x("div", { className: "dui_mde__toolbar", children: [
       m === "rich" && /* @__PURE__ */ x(ve, { children: [
@@ -18844,9 +18847,9 @@ function Fk({
             value: v,
             options: Ly,
             accentColor: u,
-            disabled: B,
+            disabled: P,
             onChange: (T) => {
-              k(T), L(`formatBlock:${T}`);
+              k(T), D(`formatBlock:${T}`);
             },
             style: { minWidth: 108 }
           }
@@ -18859,9 +18862,9 @@ function Fk({
             className: "dui_mde__btn",
             title: T.label,
             "aria-label": T.label,
-            disabled: B,
+            disabled: P,
             onMouseDown: (O) => {
-              O.preventDefault(), L(T.cmd);
+              O.preventDefault(), D(T.cmd);
             },
             children: /* @__PURE__ */ o(T.Icon, { size: 13 })
           },
@@ -18932,10 +18935,10 @@ function Fk({
         contentEditable: !s,
         suppressContentEditableWarning: !0,
         "data-placeholder": a,
-        onInput: P,
-        onBlur: P,
-        onKeyUp: D,
-        onMouseUp: D
+        onInput: B,
+        onBlur: B,
+        onKeyUp: M,
+        onMouseUp: M
       }
     ) : /* @__PURE__ */ o(
       "textarea",
@@ -19015,7 +19018,7 @@ function Uk({
   className: u = "",
   style: p
 }) {
-  const g = Ue(c, { borderRadius: s, color: d }), f = d ?? "var(--color-accent, var(--color-primary))", [h, m] = z(null), b = M(null), y = ue(() => {
+  const g = Ue(c, { borderRadius: s, color: d }), f = d ?? "var(--color-accent, var(--color-primary))", [h, m] = z(null), b = L(null), y = ue(() => {
     if (h === null) return [];
     const w = h.toLowerCase();
     return r.filter((S) => S.label.toLowerCase().includes(w)).slice(0, 6);
@@ -19143,7 +19146,7 @@ function Xk({
   className: c = "",
   style: s
 }) {
-  const d = Be(a, { color: l }), [u, p] = z(0), g = M(0);
+  const d = Be(a, { color: l }), [u, p] = z(0), g = L(0);
   return U(() => {
     const f = g.current, h = performance.now();
     let m = 0;
@@ -19167,7 +19170,7 @@ function Kk({
   className: a = "",
   style: l
 }) {
-  const c = je(r, { color: i }), s = i ?? "var(--color-primary)", d = M(null), [u, p] = z({ x: 0, y: 0 });
+  const c = je(r, { color: i }), s = i ?? "var(--color-primary)", d = L(null), [u, p] = z({ x: 0, y: 0 });
   return /* @__PURE__ */ o(
     "button",
     {
@@ -19207,7 +19210,7 @@ function jk({
   className: r = "",
   style: i
 }) {
-  const a = We(n), l = M(null), [c, s] = z({ rx: 0, ry: 0 });
+  const a = We(n), l = L(null), [c, s] = z({ rx: 0, ry: 0 });
   return /* @__PURE__ */ o(
     "div",
     {
@@ -19303,7 +19306,7 @@ function Zk({
   className: a = "",
   style: l
 }) {
-  const c = M(null), [s, d] = z(!1);
+  const c = L(null), [s, d] = z(!1);
   return U(() => {
     const u = c.current;
     if (!u) return;
@@ -19474,7 +19477,7 @@ function nS({
   className: a = "",
   style: l
 }) {
-  const c = Be(r, { color: i }), s = t.length ? t.split(/(\s+)/).filter(Boolean) : [], d = M(0), [u, p] = z(0);
+  const c = Be(r, { color: i }), s = t.length ? t.split(/(\s+)/).filter(Boolean) : [], d = L(0), [u, p] = z(0);
   return U(() => {
     p(d.current), d.current = s.length;
   }, [t]), e && s.length === 0 ? /* @__PURE__ */ o("span", { className: `dui_aistream__shimmer ${a}`, style: { fontSize: c.fontSize, fontWeight: 600, ...l }, children: "Thinking…" }) : /* @__PURE__ */ x("span", { className: a, style: { fontSize: c.fontSize, color: i ?? "var(--color-text-primary)", ...l }, children: [
@@ -19539,7 +19542,7 @@ function oS({
   className: d = "",
   style: u
 }) {
-  const p = Ue(s, { color: c }), g = c ?? "var(--color-primary)", f = M(null), h = t.map(r), m = Math.min(...h), y = Math.max(...h) - m || 1, v = Math.max(1, t.length - 1), k = h.map((I, E) => {
+  const p = Ue(s, { color: c }), g = c ?? "var(--color-primary)", f = L(null), h = t.map(r), m = Math.min(...h), y = Math.max(...h) - m || 1, v = Math.max(1, t.length - 1), k = h.map((I, E) => {
     const N = E / v * a, R = l - (I - m) / y * l;
     return `${N},${R}`;
   }).join(" "), w = (I) => {
@@ -19595,7 +19598,7 @@ function Vy(t, e) {
   return a;
 }
 function iS({ text: t, size: e, className: n = "", style: r }) {
-  const i = Be(e), a = M(t.split(/(\s+)/).filter(Boolean)), l = M(/* @__PURE__ */ new Map()), c = M(null), s = t.split(/(\s+)/).filter(Boolean), d = Vy(a.current, s);
+  const i = Be(e), a = L(t.split(/(\s+)/).filter(Boolean)), l = L(/* @__PURE__ */ new Map()), c = L(null), s = t.split(/(\s+)/).filter(Boolean), d = Vy(a.current, s);
   return zn(() => {
     const u = c.current;
     if (!u) return;
@@ -19756,19 +19759,19 @@ function cS({
   className: d = "",
   style: u
 }) {
-  const p = Ue(c, { color: s }), f = gi[c ?? "md"] ?? gi.md, h = s ?? "var(--color-primary)", m = M(null), [b, y] = z(!1), v = M(-1), k = (e - n) / (r - n), w = Wt + k * (qn - Wt), S = (I, E) => {
+  const p = Ue(c, { color: s }), f = gi[c ?? "md"] ?? gi.md, h = s ?? "var(--color-primary)", m = L(null), [b, y] = z(!1), v = L(-1), k = (e - n) / (r - n), w = Wt + k * (qn - Wt), S = (I, E) => {
     var W;
     const N = (W = m.current) == null ? void 0 : W.getBoundingClientRect();
     if (!N) return e;
-    const R = N.left + N.width / 2, P = N.top + N.height / 2;
-    let D = Math.atan2(E - P, I - R) * 180 / Math.PI + 90;
-    D > 180 && (D -= 360);
-    const B = (Math.min(qn, Math.max(Wt, D)) - Wt) / (qn - Wt), T = n + B * (r - n), O = (r - n) / i;
+    const R = N.left + N.width / 2, B = N.top + N.height / 2;
+    let M = Math.atan2(E - B, I - R) * 180 / Math.PI + 90;
+    M > 180 && (M -= 360);
+    const P = (Math.min(qn, Math.max(Wt, M)) - Wt) / (qn - Wt), T = n + P * (r - n), O = (r - n) / i;
     return Math.round(T / O) * O;
   }, _ = (I) => {
     const E = (R) => {
-      const P = S(R.clientX, R.clientY), D = Math.round((P - n) / (r - n) * i);
-      D !== v.current && (v.current = D, y(!0), setTimeout(() => y(!1), 140)), a(P);
+      const B = S(R.clientX, R.clientY), M = Math.round((B - n) / (r - n) * i);
+      M !== v.current && (v.current = M, y(!0), setTimeout(() => y(!1), 140)), a(B);
     };
     E(I.nativeEvent);
     const N = () => {
@@ -19840,7 +19843,7 @@ function dS({
   className: l = "",
   style: c
 }) {
-  const s = je(i, { color: a }), d = a ?? "var(--color-error)", [u, p] = z(0), g = M(0), f = M(0), h = () => {
+  const s = je(i, { color: a }), d = a ?? "var(--color-error)", [u, p] = z(0), g = L(0), f = L(0), h = () => {
     f.current = performance.now();
     const b = (y) => {
       const v = Math.min(1, (y - f.current) / r);
@@ -19946,7 +19949,7 @@ function pS({
   className: l = "",
   style: c
 }) {
-  const s = We(a), [d, u] = z(0), p = M(!1), g = M(0), f = t[0], h = t.slice(0, 3), m = (b) => {
+  const s = We(a), [d, u] = z(0), p = L(!1), g = L(0), f = t[0], h = t.slice(0, 3), m = (b) => {
     p.current = !0, g.current = b.clientX;
     const y = (k) => {
       p.current && u(k.clientX - g.current);
@@ -20051,7 +20054,7 @@ function hS({
   className: n = "",
   style: r
 }) {
-  const i = We(e), a = M(null), [l, c] = z({ x: 50, y: 50 }), [s, d] = z(!1);
+  const i = We(e), a = L(null), [l, c] = z({ x: 50, y: 50 }), [s, d] = z(!1);
   return /* @__PURE__ */ x(
     "div",
     {
@@ -20247,7 +20250,7 @@ function yS({
   className: c = "",
   style: s
 }) {
-  const d = Array.isArray(t) ? t : [t], u = M([]), [p, g] = z(!1), f = i ?? "var(--color-primary)";
+  const d = Array.isArray(t) ? t : [t], u = L([]), [p, g] = z(!1), f = i ?? "var(--color-primary)";
   return U(() => {
     u.current.forEach((h) => {
       if (!h) return;
@@ -20283,7 +20286,7 @@ function vS({
   className: s = "",
   style: d
 }) {
-  const u = Ue(c), p = M(null), g = (e - n) / (r - n), f = (m) => {
+  const u = Ue(c), p = L(null), g = (e - n) / (r - n), f = (m) => {
     var v;
     const b = (v = p.current) == null ? void 0 : v.getBoundingClientRect();
     if (!b) return;
@@ -20366,7 +20369,7 @@ function jy({
   activeColor: p,
   fontStyle: g
 }) {
-  const f = Sr(i, { width: s, borderRadius: d, color: u, activeColor: p, fontStyle: g }), h = M(null), [m, b] = z({ left: 0, width: 0 });
+  const f = Sr(i, { width: s, borderRadius: d, color: u, activeColor: p, fontStyle: g }), h = L(null), [m, b] = z({ left: 0, width: 0 });
   zn(() => {
     if (!h.current) return;
     const k = h.current.querySelector(`[data-tab="${n}"]`);
@@ -20849,18 +20852,18 @@ function AS({
   height: h,
   className: m = ""
 }) {
-  const b = Ie(), y = f ?? b.size, v = h ?? lt.nav[y], k = Oe[y], w = zt[y], S = M(null), [_, I] = z(!1), [E, N] = z(!1), [R, P] = z(null), D = M(null), L = ($, A) => {
+  const b = Ie(), y = f ?? b.size, v = h ?? lt.nav[y], k = Oe[y], w = zt[y], S = L(null), [_, I] = z(!1), [E, N] = z(!1), [R, B] = z(null), M = L(null), D = ($, A) => {
     if (!$.preview) return;
-    D.current && clearTimeout(D.current);
+    M.current && clearTimeout(M.current);
     const H = A.getBoundingClientRect();
-    D.current = setTimeout(() => {
-      P({ id: $.id, x: H.left + H.width / 2, y: H.bottom + 6 });
+    M.current = setTimeout(() => {
+      B({ id: $.id, x: H.left + H.width / 2, y: H.bottom + 6 });
     }, 350);
-  }, B = () => {
-    D.current && clearTimeout(D.current), D.current = null, P(null);
+  }, P = () => {
+    M.current && clearTimeout(M.current), M.current = null, B(null);
   };
   U(() => () => {
-    D.current && clearTimeout(D.current);
+    M.current && clearTimeout(M.current);
   }, []);
   const T = R ? e.find(($) => $.id === R.id) : void 0, O = se(() => {
     const $ = S.current;
@@ -20952,13 +20955,13 @@ function AS({
                       background: A ? `color-mix(in srgb, ${H} 5%, transparent)` : "transparent"
                     },
                     onClick: () => {
-                      B(), r($.id);
+                      P(), r($.id);
                     },
                     onContextMenu: (Z) => {
                       Z.preventDefault(), l == null || l($.id, Z);
                     },
-                    onMouseEnter: (Z) => L($, Z.currentTarget),
-                    onMouseLeave: B,
+                    onMouseEnter: (Z) => D($, Z.currentTarget),
+                    onMouseLeave: P,
                     children: [
                       A && /* @__PURE__ */ o("div", { style: {
                         position: "absolute",
@@ -21123,7 +21126,7 @@ function MS({
   className: l,
   style: c
 }) {
-  const s = Math.max(0, e.findIndex((b) => b.id === n)), d = i ?? "var(--color-primary, rgba(99,102,241,1))", u = a === "pill", p = u ? 999 : 8, g = u ? 999 : 6, f = M([]), [h, m] = z(null);
+  const s = Math.max(0, e.findIndex((b) => b.id === n)), d = i ?? "var(--color-primary, rgba(99,102,241,1))", u = a === "pill", p = u ? 999 : 8, g = u ? 999 : 6, f = L([]), [h, m] = z(null);
   return U(() => {
     const b = f.current[s];
     b && m({ left: b.offsetLeft, width: b.offsetWidth });
@@ -21267,7 +21270,7 @@ function DS({
   rowClassName: a = "",
   style: l
 }) {
-  const [c, s] = z(null), [d, u] = z(null), p = M(!1), g = n, f = (h, m) => {
+  const [c, s] = z(null), [d, u] = z(null), p = L(!1), g = n, f = (h, m) => {
     h.preventDefault(), c != null && c !== m && e(c, m), s(null), u(null);
   };
   return /* @__PURE__ */ o(ve, { children: t.map((h, m) => /* @__PURE__ */ x(
@@ -21325,7 +21328,7 @@ function OS({
   emptyText: a = "No matching commands",
   accentColor: l
 }) {
-  const [c, s] = z(""), [d, u] = z(0), p = M(null), g = l || "var(--color-primary)", f = ue(() => {
+  const [c, s] = z(""), [d, u] = z(0), p = L(null), g = l || "var(--color-primary)", f = ue(() => {
     const b = c.trim().toLowerCase();
     return b ? r.map((v) => {
       if (![v.label, v.hint ?? "", ...v.keywords ?? []].join(" ").toLowerCase().includes(b)) return null;
@@ -22114,7 +22117,7 @@ function FS({
   onWikiOpen: d,
   width: u = 320
 }) {
-  const p = M(null), [g, f] = z({
+  const p = L(null), [g, f] = z({
     top: -9999,
     left: -9999,
     visible: !1
@@ -22245,30 +22248,30 @@ function HS({
   style: b,
   className: y = ""
 }) {
-  const [v, k] = z(i ?? r), [w, S] = z(!1), [_, I] = z(!1), E = M(null), N = M(null), R = M(!1), P = M(!1), D = M(null), L = t === "horizontal", B = d || "var(--color-primary)", T = w || _;
+  const [v, k] = z(i ?? r), [w, S] = z(!1), [_, I] = z(!1), E = L(null), N = L(null), R = L(!1), B = L(!1), M = L(null), D = t === "horizontal", P = d || "var(--color-primary)", T = w || _;
   U(() => {
     i !== void 0 && k(i);
   }, [i]);
-  const O = i !== void 0 ? i : v, W = w && D.current != null ? D.current : O, $ = (X) => {
-    X.preventDefault(), X.target.setPointerCapture(X.pointerId), R.current = !0, P.current = !1, S(!0);
+  const O = i !== void 0 ? i : v, W = w && M.current != null ? M.current : O, $ = (X) => {
+    X.preventDefault(), X.target.setPointerCapture(X.pointerId), R.current = !0, B.current = !1, S(!0);
   }, A = (X) => {
     if (!R.current || !E.current) return;
-    P.current = !0;
-    const pe = E.current.getBoundingClientRect(), V = L ? pe.width : pe.height, xe = L ? X.clientX - pe.left : X.clientY - pe.top, ke = c ?? a / V * 100, Ce = s ?? l / V * 100, Te = Math.max(
+    B.current = !0;
+    const pe = E.current.getBoundingClientRect(), V = D ? pe.width : pe.height, xe = D ? X.clientX - pe.left : X.clientY - pe.top, ke = c ?? a / V * 100, Ce = s ?? l / V * 100, Te = Math.max(
       ke,
       Math.min(100 - Ce, xe / V * 100)
     );
-    D.current = Te, N.current && (L ? N.current.style.width = `${Te}%` : N.current.style.height = `${Te}%`), u == null || u(Te);
+    M.current = Te, N.current && (D ? N.current.style.width = `${Te}%` : N.current.style.height = `${Te}%`), u == null || u(Te);
   }, H = (X) => {
-    if (X.target.releasePointerCapture(X.pointerId), R.current = !1, S(!1), !P.current)
+    if (X.target.releasePointerCapture(X.pointerId), R.current = !1, S(!1), !B.current)
       g == null || g();
     else {
-      const pe = D.current ?? v;
-      D.current = null, k(pe), p == null || p(pe);
+      const pe = M.current ?? v;
+      M.current = null, k(pe), p == null || p(pe);
     }
   }, G = () => {
     k(r), u == null || u(r), p == null || p(r);
-  }, te = h && m === "first", Z = h && m === "second", de = L ? {
+  }, te = h && m === "first", Z = h && m === "second", de = D ? {
     width: Z ? "100%" : `${W}%`,
     minWidth: Z ? 0 : a,
     height: "100%",
@@ -22280,13 +22283,13 @@ function HS({
     width: "100%",
     overflow: "hidden",
     transition: w ? "none" : `height 180ms ${Gr}`
-  }, he = L ? { flex: 1, minWidth: te ? 0 : l, height: "100%", overflow: "hidden" } : {
+  }, he = D ? { flex: 1, minWidth: te ? 0 : l, height: "100%", overflow: "hidden" } : {
     flex: 1,
     minHeight: te ? 0 : l,
     width: "100%",
     overflow: "hidden",
     transition: w ? "none" : `all 180ms ${Gr}`
-  }, Ae = L ? 3 : T ? 80 : 44, Ee = L ? T ? 80 : 44 : 3;
+  }, Ae = D ? 3 : T ? 80 : 44, Ee = D ? T ? 80 : 44 : 3;
   return /* @__PURE__ */ x(
     "div",
     {
@@ -22294,7 +22297,7 @@ function HS({
       className: y,
       style: {
         display: "flex",
-        flexDirection: L ? "row" : "column",
+        flexDirection: D ? "row" : "column",
         width: "100%",
         height: "100%",
         overflow: "hidden",
@@ -22309,9 +22312,9 @@ function HS({
               display: h ? "none" : void 0,
               flexShrink: 0,
               // 8px: the line is 1px, and a 1px drag target is a frustration.
-              width: L ? 8 : "100%",
-              height: L ? "100%" : 8,
-              cursor: L ? "col-resize" : "row-resize",
+              width: D ? 8 : "100%",
+              height: D ? "100%" : 8,
+              cursor: D ? "col-resize" : "row-resize",
               position: "relative",
               userSelect: "none",
               zIndex: 10
@@ -22329,8 +22332,8 @@ function HS({
                 {
                   style: {
                     position: "absolute",
-                    ...L ? { left: "50%", top: 0, bottom: 0, width: 1, transform: "translateX(-50%)" } : { top: "50%", left: 0, right: 0, height: 1, transform: "translateY(-50%)" },
-                    background: T ? `color-mix(in srgb, ${B} 55%, transparent)` : "var(--color-surface-border)",
+                    ...D ? { left: "50%", top: 0, bottom: 0, width: 1, transform: "translateX(-50%)" } : { top: "50%", left: 0, right: 0, height: 1, transform: "translateY(-50%)" },
+                    background: T ? `color-mix(in srgb, ${P} 55%, transparent)` : "var(--color-surface-border)",
                     transition: "background 150ms ease",
                     pointerEvents: "none"
                   }
@@ -22347,8 +22350,8 @@ function HS({
                     width: Ae,
                     height: Ee,
                     borderRadius: 9999,
-                    background: T ? B : `color-mix(in srgb, ${B} 50%, var(--color-surface-border))`,
-                    transition: `${L ? "height" : "width"} 150ms ease, background 150ms ease`,
+                    background: T ? P : `color-mix(in srgb, ${P} 50%, var(--color-surface-border))`,
+                    transition: `${D ? "height" : "width"} 150ms ease, background 150ms ease`,
                     pointerEvents: "none"
                   }
                 }
@@ -22358,7 +22361,7 @@ function HS({
                 {
                   style: {
                     position: "absolute",
-                    ...L ? { left: "calc(100% + 4px)", top: "50%", transform: "translateY(-50%)" } : { left: "50%", top: "calc(100% + 4px)", transform: "translateX(-50%)" },
+                    ...D ? { left: "calc(100% + 4px)", top: "50%", transform: "translateY(-50%)" } : { left: "50%", top: "calc(100% + 4px)", transform: "translateX(-50%)" },
                     background: "var(--color-surface)",
                     color: "var(--color-text-primary)",
                     fontSize: 11,
@@ -22391,7 +22394,7 @@ function US({
   className: a = "",
   style: l
 }) {
-  const [c, s] = z(t), [d, u] = z(!1), p = M(null), g = se((m) => {
+  const [c, s] = z(t), [d, u] = z(!1), p = L(null), g = se((m) => {
     m.preventDefault(), m.stopPropagation(), m.target.setPointerCapture(m.pointerId), p.current = { startY: m.clientY, startHeight: c };
   }, [c]), f = se((m) => {
     if (!p.current) return;
@@ -22614,17 +22617,17 @@ function KS({
   maxHeight: u,
   className: p = ""
 }) {
-  const g = Ie(), f = s ? "sm" : d ?? g.size, [h, m] = z(null), [b, y] = z(!0), [v, k] = z(/* @__PURE__ */ new Set()), w = (L) => {
-    L.sortable && (h === L.key ? y((B) => !B) : (m(L.key), y(!0)));
-  }, S = (L, B) => {
-    B.stopPropagation(), k((T) => {
+  const g = Ie(), f = s ? "sm" : d ?? g.size, [h, m] = z(null), [b, y] = z(!0), [v, k] = z(/* @__PURE__ */ new Set()), w = (D) => {
+    D.sortable && (h === D.key ? y((P) => !P) : (m(D.key), y(!0)));
+  }, S = (D, P) => {
+    P.stopPropagation(), k((T) => {
       const O = new Set(T);
-      return O.has(L) ? O.delete(L) : O.add(L), O;
+      return O.has(D) ? O.delete(D) : O.add(D), O;
     });
-  }, _ = h ? [...e].sort((L, B) => {
-    const T = L[h], O = B[h], W = String(T ?? "").localeCompare(String(O ?? ""));
+  }, _ = h ? [...e].sort((D, P) => {
+    const T = D[h], O = P[h], W = String(T ?? "").localeCompare(String(O ?? ""));
     return b ? W : -W;
-  }) : e, E = (i ? "28px " : "") + t.map((L) => typeof L.width == "number" ? `${L.width}px` : L.width ?? "1fr").join(" "), N = lt.table[f], R = `${Math.round((N - 16) / 2)}px 12px`, P = Oe[f], D = !!i;
+  }) : e, E = (i ? "28px " : "") + t.map((D) => typeof D.width == "number" ? `${D.width}px` : D.width ?? "1fr").join(" "), N = lt.table[f], R = `${Math.round((N - 16) / 2)}px 12px`, B = Oe[f], M = !!i;
   return /* @__PURE__ */ x(
     "div",
     {
@@ -22643,7 +22646,7 @@ function KS({
         // of its real ~170-214px content height) — instead of the page
         // scrolling normally like every other settings panel. Refusing to
         // shrink here restores that normal behavior.
-        ...D ? {} : { maxHeight: u, display: "flex", flexDirection: "column", flexShrink: 0 }
+        ...M ? {} : { maxHeight: u, display: "flex", flexDirection: "column", flexShrink: 0 }
       },
       children: [
         /* @__PURE__ */ x("div", { style: {
@@ -22654,10 +22657,10 @@ function KS({
           flexShrink: 0
         }, children: [
           i && /* @__PURE__ */ o("div", {}),
-          t.map((L) => /* @__PURE__ */ x(
+          t.map((D) => /* @__PURE__ */ x(
             "div",
             {
-              onClick: () => w(L),
+              onClick: () => w(D),
               style: {
                 padding: R,
                 fontSize: "10px",
@@ -22665,37 +22668,37 @@ function KS({
                 textTransform: "uppercase",
                 letterSpacing: "0.06em",
                 color: "var(--color-text-muted)",
-                cursor: L.sortable ? "pointer" : "default",
+                cursor: D.sortable ? "pointer" : "default",
                 display: "flex",
                 alignItems: "center",
                 // text-align has no effect on a flex item — justify-content is
                 // the actual axis-alignment property for a flex container's
                 // children, which is what col.align needs to drive here.
-                justifyContent: L.align === "right" ? "flex-end" : L.align === "center" ? "center" : "flex-start",
+                justifyContent: D.align === "right" ? "flex-end" : D.align === "center" ? "center" : "flex-start",
                 gap: "4px",
                 userSelect: "none"
               },
               children: [
-                L.label,
-                L.sortable && h === L.key && (b ? /* @__PURE__ */ o(rt, { size: 10 }) : /* @__PURE__ */ o(Pe, { size: 10, style: { transform: "rotate(-90deg)" } }))
+                D.label,
+                D.sortable && h === D.key && (b ? /* @__PURE__ */ o(rt, { size: 10 }) : /* @__PURE__ */ o(Pe, { size: 10, style: { transform: "rotate(-90deg)" } }))
               ]
             },
-            L.key
+            D.key
           ))
         ] }),
-        /* @__PURE__ */ o("div", { style: D ? {} : { flex: "1 1 auto", overflowY: "auto" }, children: _.length === 0 ? /* @__PURE__ */ o(p0, { title: a, message: l, compact: !0 }) : _.map((L, B) => {
-          const T = String(L[n] ?? B), O = v.has(T), W = c && B % 2 === 1 ? "var(--color-table-stripe)" : "transparent";
+        /* @__PURE__ */ o("div", { style: M ? {} : { flex: "1 1 auto", overflowY: "auto" }, children: _.length === 0 ? /* @__PURE__ */ o(p0, { title: a, message: l, compact: !0 }) : _.map((D, P) => {
+          const T = String(D[n] ?? P), O = v.has(T), W = c && P % 2 === 1 ? "var(--color-table-stripe)" : "transparent";
           return /* @__PURE__ */ x(
             "div",
             {
               style: {
-                borderBottom: B < _.length - 1 ? "1px solid var(--color-surface-border)" : "none"
+                borderBottom: P < _.length - 1 ? "1px solid var(--color-surface-border)" : "none"
               },
               children: [
                 /* @__PURE__ */ x(
                   "div",
                   {
-                    onClick: () => r == null ? void 0 : r(L),
+                    onClick: () => r == null ? void 0 : r(D),
                     className: `dui_data-table__row${r || i ? " dui_data-table__row--clickable" : ""}`,
                     style: {
                       display: "grid",
@@ -22733,7 +22736,7 @@ function KS({
                         {
                           style: {
                             padding: R,
-                            fontSize: P,
+                            fontSize: B,
                             color: "var(--color-text-secondary)",
                             display: "flex",
                             alignItems: "center",
@@ -22745,7 +22748,7 @@ function KS({
                             whiteSpace: "nowrap",
                             textOverflow: "ellipsis"
                           },
-                          children: $.renderCell ? $.renderCell(L, L[$.key]) : /* @__PURE__ */ o("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: String(L[$.key] ?? "—") })
+                          children: $.renderCell ? $.renderCell(D, D[$.key]) : /* @__PURE__ */ o("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: String(D[$.key] ?? "—") })
                         },
                         $.key
                       ))
@@ -22755,7 +22758,7 @@ function KS({
                 i && O && /* @__PURE__ */ o("div", { style: {
                   background: "color-mix(in srgb, var(--color-text-primary) 3%, transparent)",
                   borderTop: "1px solid var(--color-surface-border)"
-                }, children: i(L) })
+                }, children: i(D) })
               ]
             },
             T
@@ -22857,7 +22860,7 @@ function jS({
   className: u,
   style: p
 }) {
-  const g = ue(() => v0(t, e), [t, e]), f = ue(() => w0(g), [g]), h = `${Math.max(2, String(g.length).length)}ch`, [m, b] = z(50), [y, v] = z(!1), k = M(null), w = se((I) => {
+  const g = ue(() => v0(t, e), [t, e]), f = ue(() => w0(g), [g]), h = `${Math.max(2, String(g.length).length)}ch`, [m, b] = z(50), [y, v] = z(!1), k = L(null), w = se((I) => {
     var R;
     const E = (R = k.current) == null ? void 0 : R.getBoundingClientRect();
     if (!E || E.width === 0) return;
@@ -23578,8 +23581,8 @@ function o_({
   className: b = "",
   style: y
 }) {
-  const v = An(m), [k, w] = z(i), [S, _] = z(() => c !== void 0 ? new Set(c) : new Set(t.filter((X) => X.isGroup).map((X) => X.id))), [I, E] = z(""), [N, R] = z(() => /* @__PURE__ */ new Set()), P = a !== void 0, D = P ? a : k, L = p || "var(--color-primary)", B = I.trim(), T = B.length > 0, O = parseInt(v.itemHeight, 10), W = Math.max(O - 6, 24), $ = ue(() => eo(t), [t]), A = ue(() => no(t, B), [t, B]), H = ue(() => eo(A), [A]), G = (X) => {
-    P || w(X), l == null || l(X);
+  const v = An(m), [k, w] = z(i), [S, _] = z(() => c !== void 0 ? new Set(c) : new Set(t.filter((X) => X.isGroup).map((X) => X.id))), [I, E] = z(""), [N, R] = z(() => /* @__PURE__ */ new Set()), B = a !== void 0, M = B ? a : k, D = p || "var(--color-primary)", P = I.trim(), T = P.length > 0, O = parseInt(v.itemHeight, 10), W = Math.max(O - 6, 24), $ = ue(() => eo(t), [t]), A = ue(() => no(t, P), [t, P]), H = ue(() => eo(A), [A]), G = (X) => {
+    B || w(X), l == null || l(X);
   }, te = (X) => {
     _((pe) => {
       const V = new Set(pe);
@@ -23596,18 +23599,18 @@ function o_({
     });
   }, he = (X, pe = 0) => {
     const V = X.id === e, xe = p ? `color-mix(in srgb, ${p} 18%, transparent)` : "var(--color-sidenav-active-bg)", ke = p ?? "var(--color-sidenav-active-text)", Ce = No(X), Te = Ce && Z(X), at = Ce && !V && to(X, e), tt = pe * $0;
-    if (Ce && D)
+    if (Ce && M)
       return /* @__PURE__ */ o("div", { children: (X.children ?? []).map((oe) => he(oe, pe)) }, X.id);
     const j = /* @__PURE__ */ x(
       "div",
       {
-        title: D ? X.label : void 0,
+        title: M ? X.label : void 0,
         onClick: () => Ce ? de(X) : n == null ? void 0 : n(X.id),
         "data-nav-id": X.id,
         role: Ce ? "button" : void 0,
         "aria-expanded": Ce ? Te : void 0,
         className: `dui_side-nav__item${V ? " dui_side-nav__item--active" : ""}${Ce ? " dui_side-nav__item--branch" : ""}`,
-        style: D ? {
+        style: M ? {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -23638,9 +23641,9 @@ function o_({
             justifyContent: "center",
             width: v.iconSize,
             /* A branch's pages sit a step below it: the icon a little smaller… */
-            ...pe > 0 && !D ? { transform: "scale(0.86)", opacity: V ? 1 : 0.9 } : {}
+            ...pe > 0 && !M ? { transform: "scale(0.86)", opacity: V ? 1 : 0.9 } : {}
           }, children: X.icon }),
-          !D && /* @__PURE__ */ x(ve, { children: [
+          !M && /* @__PURE__ */ x(ve, { children: [
             /* @__PURE__ */ o("span", { style: {
               /* …and the name a pixel smaller. */
               flex: 1,
@@ -23654,8 +23657,8 @@ function o_({
               fontSize: "10px",
               padding: "1px 5px",
               borderRadius: 99,
-              background: `color-mix(in srgb, ${L} 15%, transparent)`,
-              color: L,
+              background: `color-mix(in srgb, ${D} 15%, transparent)`,
+              color: D,
               fontWeight: 600,
               flexShrink: 0
             }, children: X.badge }),
@@ -23683,7 +23686,7 @@ function o_({
   }, Ae = (X) => {
     var Ce;
     const pe = S.has(X.id), V = ((Ce = X.children) == null ? void 0 : Ce.length) ?? 0, xe = T ? V : X.count ?? V, ke = X.children ?? [];
-    return D ? /* @__PURE__ */ o("div", { style: { marginBottom: 8 }, children: ke.map((Te) => he(Te)) }, X.id) : /* @__PURE__ */ x("div", { style: { marginBottom: 4 }, children: [
+    return M ? /* @__PURE__ */ o("div", { style: { marginBottom: 8 }, children: ke.map((Te) => he(Te)) }, X.id) : /* @__PURE__ */ x("div", { style: { marginBottom: 4 }, children: [
       /* @__PURE__ */ x(
         "button",
         {
@@ -23737,8 +23740,8 @@ function o_({
     {
       className: b,
       style: {
-        width: D ? d : u ? "100%" : s,
-        minWidth: D ? d : u ? void 0 : s,
+        width: M ? d : u ? "100%" : s,
+        minWidth: M ? d : u ? void 0 : s,
         height: "100%",
         display: "flex",
         flexDirection: "column",
@@ -23749,7 +23752,7 @@ function o_({
         ...y
       },
       children: [
-        g && !D && /* @__PURE__ */ o("div", { style: { padding: "10px 10px 8px", flexShrink: 0 }, children: /* @__PURE__ */ x("div", { style: {
+        g && !M && /* @__PURE__ */ o("div", { style: { padding: "10px 10px 8px", flexShrink: 0 }, children: /* @__PURE__ */ x("div", { style: {
           display: "flex",
           alignItems: "center",
           gap: 6,
@@ -23814,7 +23817,7 @@ function o_({
         /* @__PURE__ */ x("div", { style: {
           flex: 1,
           overflowY: "auto",
-          padding: D ? "4px 4px 16px" : "4px 6px 16px"
+          padding: M ? "4px 4px 16px" : "4px 6px 16px"
         }, children: [
           A.map(Ee),
           T && H === 0 && /* @__PURE__ */ o("div", { style: {
@@ -23824,7 +23827,7 @@ function o_({
             textAlign: "center"
           }, children: h })
         ] }),
-        r && !P && /* @__PURE__ */ o("div", { style: {
+        r && !B && /* @__PURE__ */ o("div", { style: {
           borderTop: "1px solid var(--color-panel-border)",
           display: "flex",
           alignItems: "center",
@@ -23834,7 +23837,7 @@ function o_({
           "button",
           {
             type: "button",
-            onClick: () => G(!D),
+            onClick: () => G(!M),
             className: "dui_side-nav__collapse-btn",
             style: {
               display: "flex",
@@ -23849,8 +23852,8 @@ function o_({
               color: "var(--color-text-muted)",
               cursor: "pointer"
             },
-            title: D ? "Expand sidebar" : "Collapse sidebar",
-            children: D ? /* @__PURE__ */ o(_a, { size: 14 }) : /* @__PURE__ */ o(Sa, { size: 14 })
+            title: M ? "Expand sidebar" : "Collapse sidebar",
+            children: M ? /* @__PURE__ */ o(_a, { size: 14 }) : /* @__PURE__ */ o(Sa, { size: 14 })
           }
         ) })
       ]
@@ -23945,16 +23948,16 @@ function Ml({
   enableItemDrag: E,
   getItemId: N,
   onItemDragStart: R,
-  onItemDragOver: P,
-  onItemDrop: D,
-  inlineCreate: L,
-  onInlineCreateCommit: B,
+  onItemDragOver: B,
+  onItemDrop: M,
+  inlineCreate: D,
+  onInlineCreateCommit: P,
   onInlineCreateCancel: T,
   renamingNodeId: O,
   onRenameDone: W
 }) {
   var j, oe, q, be, Re;
-  const $ = r.has(t.id), A = ((j = t.data) == null ? void 0 : j.color) || g, [H, G] = z(!1), [te, Z] = z(t.label), de = M(null);
+  const $ = r.has(t.id), A = ((j = t.data) == null ? void 0 : j.color) || g, [H, G] = z(!1), [te, Z] = z(t.label), de = L(null);
   U(() => {
     O === t.id && p && (Z(t.label), G(!0), setTimeout(() => {
       var ee;
@@ -24048,12 +24051,12 @@ function Ml({
     ),
     /* @__PURE__ */ o(En, { show: V === "after" && !$, color: A }),
     $ && /* @__PURE__ */ x("div", { style: { marginLeft: e > 0 ? 12 : 0, borderLeft: e > 0 ? "1px solid var(--color-surface-border)" : "none" }, children: [
-      (L == null ? void 0 : L.parentId) === t.id && /* @__PURE__ */ o(
+      (D == null ? void 0 : D.parentId) === t.id && /* @__PURE__ */ o(
         Al,
         {
           depth: e + 1,
           indentPx: f,
-          onCommit: (ee) => B == null ? void 0 : B(t.id, ee),
+          onCommit: (ee) => P == null ? void 0 : P(t.id, ee),
           onCancel: () => T == null ? void 0 : T()
         }
       ),
@@ -24087,10 +24090,10 @@ function Ml({
           enableItemDrag: E,
           getItemId: N,
           onItemDragStart: R,
-          onItemDragOver: P,
-          onItemDrop: D,
-          inlineCreate: L,
-          onInlineCreateCommit: B,
+          onItemDragOver: B,
+          onItemDrop: M,
+          inlineCreate: D,
+          onInlineCreateCommit: P,
           onInlineCreateCancel: T
         },
         ee.id
@@ -24110,9 +24113,9 @@ function Ml({
             accentColor: g,
             renderItem: u,
             onDragStart: R,
-            onDragOver: P,
+            onDragOver: B,
             onDragLeave: S,
-            onDrop: D,
+            onDrop: M,
             onDragEnd: I
           },
           Xe
@@ -24173,14 +24176,14 @@ function i_({
   onInlineCreateCommit: E,
   onInlineCreateCancel: N,
   renamingNodeId: R,
-  onRenameDone: P
+  onRenameDone: B
 }) {
-  const [D, L] = z(a ?? /* @__PURE__ */ new Set()), B = l ?? D, T = se((q) => {
+  const [M, D] = z(a ?? /* @__PURE__ */ new Set()), P = l ?? M, T = se((q) => {
     if (c) {
       c(q);
       return;
     }
-    L((be) => {
+    D((be) => {
       const Re = new Set(be);
       return Re.has(q) ? Re.delete(q) : Re.add(q), Re;
     });
@@ -24234,7 +24237,7 @@ function i_({
   if (t.length === 0 && !I)
     return /* @__PURE__ */ o("div", { style: { padding: "24px 12px", textAlign: "center", fontSize: 12, color: "var(--color-text-muted)" }, children: g });
   const oe = {
-    expandedIds: B,
+    expandedIds: P,
     toggleExpand: T,
     folderActions: n,
     onFolderClick: u,
@@ -24264,7 +24267,7 @@ function i_({
     onInlineCreateCommit: E,
     onInlineCreateCancel: N,
     renamingNodeId: R,
-    onRenameDone: P
+    onRenameDone: B
   };
   return /* @__PURE__ */ x("div", { className: f, children: [
     (I == null ? void 0 : I.parentId) === null && /* @__PURE__ */ o(
@@ -24886,7 +24889,7 @@ function c_({
   className: l = "",
   style: c
 }) {
-  const [s, d] = z(r), u = M(null), p = M(!0), g = e || "var(--color-primary)", f = n.filter((m) => m.enabled).length, h = a !== void 0;
+  const [s, d] = z(r), u = L(null), p = L(!0), g = e || "var(--color-primary)", f = n.filter((m) => m.enabled).length, h = a !== void 0;
   return zn(() => {
     const m = u.current;
     m && (m.style.transition = "none", m.style.height = r ? "auto" : "0px", m.style.overflow = "hidden", requestAnimationFrame(() => {
@@ -25008,7 +25011,7 @@ function d_({
   disabled: l = !1,
   className: c = ""
 }) {
-  const [s, d] = z(""), u = M(null), p = !l && (!a || e.length < a), g = (m) => {
+  const [s, d] = z(""), u = L(null), p = !l && (!a || e.length < a), g = (m) => {
     const b = m.trim();
     !b || e.includes(b) || !p || (n([...e, b]), d(""));
   }, f = (m) => {
@@ -25124,7 +25127,7 @@ function u_({
   className: l = ""
 }) {
   var S, _;
-  const [c, s] = z(((S = t[0]) == null ? void 0 : S.id) ?? ""), [d, u] = z(e), [p, g] = z(i), [f, h] = z(!1), m = M(0), b = M(e), y = a || "var(--color-primary)", v = se((I) => {
+  const [c, s] = z(((S = t[0]) == null ? void 0 : S.id) ?? ""), [d, u] = z(e), [p, g] = z(i), [f, h] = z(!1), m = L(0), b = L(e), y = a || "var(--color-primary)", v = se((I) => {
     if (!f) return;
     const E = m.current - I.clientY, N = Math.max(n, Math.min(r, b.current + E));
     u(N);
@@ -25256,7 +25259,7 @@ const U0 = {
   "bottom-center": { bottom: 16, left: "50%", transform: "translateX(-50%)" }
 };
 function V0({ toast: t, onDismiss: e }) {
-  const n = U0[t.variant], r = M(void 0);
+  const n = U0[t.variant], r = L(void 0);
   return U(() => {
     const i = t.duration ?? 4e3;
     return i > 0 && (r.current = setTimeout(() => e(t.id), i)), () => {
@@ -25331,7 +25334,7 @@ function p_({ toasts: t, onDismiss: e, position: n = "bottom-right" }) {
   );
 }
 function f_() {
-  const t = M([]), e = M([]), n = (l) => (e.current.push(l), () => {
+  const t = L([]), e = L([]), n = (l) => (e.current.push(l), () => {
     e.current = e.current.filter((c) => c !== l);
   }), r = () => e.current.forEach((l) => l([...t.current]));
   return { subscribe: n, toast: (l, c, s, d) => {
@@ -25716,7 +25719,7 @@ function j0({ text: t }) {
   }, children: n }, r) : /* @__PURE__ */ o("span", { children: n }, r)) });
 }
 function Y0({ value: t, onChange: e, accent: n, minHeight: r = 220 }) {
-  const i = M(null), a = M(null), [l, c] = z(!1), s = se(() => {
+  const i = L(null), a = L(null), [l, c] = z(!1), s = se(() => {
     i.current && a.current && (a.current.scrollTop = i.current.scrollTop, a.current.scrollLeft = i.current.scrollLeft);
   }, []), d = (t + `
 `).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(
@@ -26366,25 +26369,25 @@ function v_({
   maxSuggestions: b = 8,
   suggestionZIndex: y = 1e4
 }) {
-  const v = e.length > 0, k = M(null), [w, S] = z(!1), [_, I] = z(-1), [E, N] = z(!1), [R, P] = z({ top: 0, left: 0, width: 0 }), D = ue(() => {
+  const v = e.length > 0, k = L(null), [w, S] = z(!1), [_, I] = z(-1), [E, N] = z(!1), [R, B] = z({ top: 0, left: 0, width: 0 }), M = ue(() => {
     const O = (p ?? []).map(Z0).filter((A) => A.value.trim()), W = e.trim().toLowerCase();
     return (W ? O.filter((A) => A.value.toLowerCase().includes(W) && A.value !== e) : O).slice(0, b);
-  }, [p, e, b]), L = w && !E && D.length > 0;
+  }, [p, e, b]), D = w && !E && M.length > 0;
   U(() => {
-    if (!L) return;
+    if (!D) return;
     const O = () => {
       const W = k.current;
       if (!W) return;
       const $ = W.getBoundingClientRect();
-      P({ top: $.bottom + 4, left: $.left, width: $.width });
+      B({ top: $.bottom + 4, left: $.left, width: $.width });
     };
     return O(), window.addEventListener("scroll", O, { passive: !0, capture: !0 }), window.addEventListener("resize", O, { passive: !0 }), () => {
       window.removeEventListener("scroll", O, { capture: !0 }), window.removeEventListener("resize", O);
     };
-  }, [L, D.length]), U(() => {
+  }, [D, M.length]), U(() => {
     I(-1), N(!1);
   }, [e]);
-  const B = (O) => {
+  const P = (O) => {
     I(-1), N(!0), f ? f(O) : (n(O), r == null || r(O));
   };
   return /* @__PURE__ */ x("div", { ref: k, style: { position: "relative", width: c }, children: [
@@ -26403,22 +26406,22 @@ function v_({
         },
         onBlur: () => window.setTimeout(() => S(!1), 90),
         onKeyDown: (O) => {
-          if (L && (O.key === "ArrowDown" || O.key === "ArrowUp")) {
+          if (D && (O.key === "ArrowDown" || O.key === "ArrowUp")) {
             O.preventDefault();
             const W = O.key === "ArrowDown" ? 1 : -1;
             I(($) => {
               const A = $ + W;
-              return A < 0 ? D.length - 1 : A >= D.length ? 0 : A;
+              return A < 0 ? M.length - 1 : A >= M.length ? 0 : A;
             });
             return;
           }
-          if (O.key === "Escape" && L) {
+          if (O.key === "Escape" && D) {
             O.preventDefault(), O.stopPropagation(), I(-1), N(!0);
             return;
           }
           if (O.key === "Enter") {
-            if (O.preventDefault(), L && _ >= 0) {
-              B(D[_].value);
+            if (O.preventDefault(), D && _ >= 0) {
+              P(M[_].value);
               return;
             }
             r == null || r(e);
@@ -26456,7 +26459,7 @@ function v_({
         ] }) : void 0
       }
     ),
-    L && Se(
+    D && Se(
       /* @__PURE__ */ x(
         "div",
         {
@@ -26531,13 +26534,13 @@ function v_({
                 }
               )
             ] }),
-            /* @__PURE__ */ o("div", { style: { padding: "4px 3px 3px", maxHeight: 280, overflowY: "auto" }, children: D.map((O, W) => /* @__PURE__ */ x(
+            /* @__PURE__ */ o("div", { style: { padding: "4px 3px 3px", maxHeight: 280, overflowY: "auto" }, children: M.map((O, W) => /* @__PURE__ */ x(
               "div",
               {
                 role: "option",
                 "aria-selected": W === _,
                 onMouseDown: ($) => {
-                  $.preventDefault(), B(O.value);
+                  $.preventDefault(), P(O.value);
                 },
                 onMouseEnter: () => I(W),
                 style: {
@@ -27226,7 +27229,7 @@ function T_({
   className: l = ""
 }) {
   var _;
-  const c = Ue(i), [s, d] = z(() => e === 0 ? "ms" : e >= 36e5 && e % 36e5 === 0 ? "hr" : e >= 6e4 && e % 6e4 === 0 ? "m" : e >= 1e3 && e % 1e3 === 0 ? "s" : "ms"), [u, p] = z(!1), [g, f] = z({ top: 0, left: 0 }), h = M(null), m = M(null), b = e === 0 ? "" : String(Math.round(e / Ti[s])), y = se((I) => {
+  const c = Ue(i), [s, d] = z(() => e === 0 ? "ms" : e >= 36e5 && e % 36e5 === 0 ? "hr" : e >= 6e4 && e % 6e4 === 0 ? "m" : e >= 1e3 && e % 1e3 === 0 ? "s" : "ms"), [u, p] = z(!1), [g, f] = z({ top: 0, left: 0 }), h = L(null), m = L(null), b = e === 0 ? "" : String(Math.round(e / Ti[s])), y = se((I) => {
     const E = I.target.value;
     if (E === "" || E === "0") {
       n(0);
@@ -27244,8 +27247,8 @@ function T_({
   U(() => {
     if (!u) return;
     const I = (N) => {
-      var R, P;
-      !((R = h.current) != null && R.contains(N.target)) && !((P = m.current) != null && P.contains(N.target)) && p(!1);
+      var R, B;
+      !((R = h.current) != null && R.contains(N.target)) && !((B = m.current) != null && B.contains(N.target)) && p(!1);
     }, E = () => p(!1);
     return document.addEventListener("mousedown", I), document.addEventListener("scroll", E, !0), () => {
       document.removeEventListener("mousedown", I), document.removeEventListener("scroll", E, !0);
@@ -27356,12 +27359,12 @@ function $_({
   size: l = "md",
   accentColor: c
 }) {
-  const [s, d] = z(!1), [u, p] = z(-1), g = M(null), f = M(null), [h, m] = z({ top: 0, left: 0, minWidth: 0 }), b = je(l), y = c || (n === "danger" ? "var(--color-error)" : n === "primary" ? "var(--color-primary)" : "var(--color-surface-hover)"), v = n === "secondary" ? "var(--color-text-primary)" : n === "danger" ? "var(--color-btn-danger-text, #fff)" : "var(--color-btn-primary-text, #fff)", k = parseInt(b.height, 10), w = b.fontSize, S = n === "secondary" ? "var(--color-surface-border)" : "rgba(255,255,255,0.22)";
+  const [s, d] = z(!1), [u, p] = z(-1), g = L(null), f = L(null), [h, m] = z({ top: 0, left: 0, minWidth: 0 }), b = je(l), y = c || (n === "danger" ? "var(--color-error)" : n === "primary" ? "var(--color-primary)" : "var(--color-surface-hover)"), v = n === "secondary" ? "var(--color-text-primary)" : n === "danger" ? "var(--color-btn-danger-text, #fff)" : "var(--color-btn-primary-text, #fff)", k = parseInt(b.height, 10), w = b.fontSize, S = n === "secondary" ? "var(--color-surface-border)" : "rgba(255,255,255,0.22)";
   U(() => {
     if (!s) return;
     const E = (N) => {
-      var R, P;
-      (R = g.current) != null && R.contains(N.target) || (P = f.current) != null && P.contains(N.target) || d(!1);
+      var R, B;
+      (R = g.current) != null && R.contains(N.target) || (B = f.current) != null && B.contains(N.target) || d(!1);
     };
     return document.addEventListener("mousedown", E), () => document.removeEventListener("mousedown", E);
   }, [s]), U(() => {
@@ -27538,7 +27541,7 @@ function iv({
   style: h,
   className: m = ""
 }) {
-  const b = Ue(p), y = g ?? parseInt(b.height, 10), v = Math.max(Math.round(13 * 1.2 * 10) / 10, 16), k = Math.max(0, (y - 2 - v) / 2), w = f ?? b.borderRadius, S = M(null), _ = M(!1), I = M(null), E = M(Fa()), N = M(!1), [R, P] = z(!1), [D, L] = z(!1), [B, T] = z(!1), [O, W] = z(0), [$, A] = z({ top: 0, left: 0, width: 0 }), H = u || "var(--color-accent, var(--color-primary))";
+  const b = Ue(p), y = g ?? parseInt(b.height, 10), v = Math.max(Math.round(13 * 1.2 * 10) / 10, 16), k = Math.max(0, (y - 2 - v) / 2), w = f ?? b.borderRadius, S = L(null), _ = L(!1), I = L(null), E = L(Fa()), N = L(!1), [R, B] = z(!1), [M, D] = z(!1), [P, T] = z(!1), [O, W] = z(0), [$, A] = z({ top: 0, left: 0, width: 0 }), H = u || "var(--color-accent, var(--color-primary))";
   U(() => {
     const j = S.current;
     j && (j.innerHTML = Et(e), I.current = e, E.current.reset(e, e.length));
@@ -27553,13 +27556,13 @@ function iv({
     const q = S.current;
     q && (q.innerHTML = Et(j), nn(q, Math.min(oe, j.length)), I.current = j, n(j));
   }, [n]), { caret: te, syncCaret: Z, setCaret: de } = Ua(S, e.length), he = Va(e, te, l), Ae = e.slice(0, Math.min(te, e.length)).toLowerCase(), Ee = ue(
-    () => R && !B ? he.matches : [],
-    [R, B, he]
+    () => R && !P ? he.matches : [],
+    [R, P, he]
   ), X = ue(() => {
-    if (!R || B || !c.length) return [];
+    if (!R || P || !c.length) return [];
     const j = c.filter((oe, q) => c.findIndex((be) => be.url === oe.url) === q);
     return Ae.trim() ? j.filter((oe) => oe.url.toLowerCase().includes(Ae) || oe.name.toLowerCase().includes(Ae)).slice(0, 8) : j.slice(0, 8);
-  }, [Ae, R, B, c]), pe = R && !B ? he.ghost : "";
+  }, [Ae, R, P, c]), pe = R && !P ? he.ghost : "";
   U(() => {
     W(0);
   }, [Ee.length, X.length, e]), U(() => {
@@ -27575,7 +27578,7 @@ function iv({
       const ee = document.createRange();
       ee.selectNodeContents(oe), ee.collapse(!1), (q = window.getSelection()) == null || q.removeAllRanges(), (be = window.getSelection()) == null || be.addRange(ee);
     }
-    I.current = j, n(j), P(!1), (Re = S.current) == null || Re.focus();
+    I.current = j, n(j), B(!1), (Re = S.current) == null || Re.focus();
   }, xe = se(() => {
     if (_.current) return;
     const j = S.current;
@@ -27630,7 +27633,7 @@ function iv({
     j.preventDefault();
     const oe = j.clipboardData.getData("text/plain");
     document.execCommand("insertText", !1, oe);
-  }, tt = R && !B && (Ee.length > 0 || X.length > 0);
+  }, tt = R && !P && (Ee.length > 0 || X.length > 0);
   return /* @__PURE__ */ x("div", { className: `dui_highlighted-input ${m}`, style: h, children: [
     !e && !R && a && /* @__PURE__ */ o("span", { className: "dui_highlighted-input__placeholder", style: { lineHeight: `${y}px` }, children: a }),
     /* @__PURE__ */ o(
@@ -27647,10 +27650,10 @@ function iv({
         onMouseUp: Z,
         onPaste: at,
         onFocus: () => {
-          P(!0), T(!1), Z();
+          B(!0), T(!1), Z();
         },
         onBlur: () => {
-          setTimeout(() => P(!1), 150), i == null || i();
+          setTimeout(() => B(!1), 150), i == null || i();
         },
         onCompositionStart: () => {
           _.current = !0;
@@ -27659,12 +27662,12 @@ function iv({
           _.current = !1, xe();
         },
         "data-testid": t,
-        className: `dui_highlighted-input__editor${s ? " opacity-60" : ""}${d && !D ? " dui_highlighted-input__editor--masked" : ""}`,
+        className: `dui_highlighted-input__editor${s ? " opacity-60" : ""}${d && !M ? " dui_highlighted-input__editor--masked" : ""}`,
         style: {
           height: y,
           // Not in React's CSS types; a real property in every Chromium,
           // which is the only engine a VS Code webview runs in.
-          ...d && !D ? { WebkitTextSecurity: "disc" } : {},
+          ...d && !M ? { WebkitTextSecurity: "disc" } : {},
           paddingRight: d ? 30 : void 0,
           lineHeight: `${v}px`,
           paddingTop: k,
@@ -27680,8 +27683,8 @@ function iv({
         type: "button",
         tabIndex: -1,
         onMouseDown: (j) => j.preventDefault(),
-        onClick: () => L((j) => !j),
-        title: D ? "Hide value" : "Show value",
+        onClick: () => D((j) => !j),
+        title: M ? "Hide value" : "Show value",
         style: {
           position: "absolute",
           right: 8,
@@ -27697,7 +27700,7 @@ function iv({
         },
         onMouseEnter: (j) => j.currentTarget.style.color = "var(--color-text-primary)",
         onMouseLeave: (j) => j.currentTarget.style.color = "var(--color-text-muted)",
-        children: D ? /* @__PURE__ */ o(cn, { size: 14 }) : /* @__PURE__ */ o(dn, { size: 14 })
+        children: M ? /* @__PURE__ */ o(cn, { size: 14 }) : /* @__PURE__ */ o(dn, { size: 14 })
       }
     ),
     /* @__PURE__ */ o(
@@ -27790,7 +27793,7 @@ function av({
   onConfirm: a,
   onCancel: l
 }) {
-  const c = M(null);
+  const c = L(null);
   return U(() => {
     var d;
     (d = c.current) == null || d.focus();
@@ -28109,10 +28112,10 @@ function Mi({
   onEnabledChange: y,
   onRemove: v
 }) {
-  const [k, w] = z(!1), [S, _] = z(""), [I, E] = z(-1), [N, R] = z(!1), [P, D] = z(""), [L, B] = z(-1), T = M(null), O = M(null), W = M(null), $ = M(null), A = c || s && sv.includes(e.toLowerCase()), H = cv, G = g && !a && k ? lv.filter(
+  const [k, w] = z(!1), [S, _] = z(""), [I, E] = z(-1), [N, R] = z(!1), [B, M] = z(""), [D, P] = z(-1), T = L(null), O = L(null), W = L(null), $ = L(null), A = c || s && sv.includes(e.toLowerCase()), H = cv, G = g && !a && k ? lv.filter(
     (V) => V.toLowerCase().includes((S || e).toLowerCase()) && V.toLowerCase() !== e.toLowerCase()
   ).slice(0, 8) : [], te = g && !a && N && e ? (H[e.toLowerCase()] || []).filter(
-    (V) => V.toLowerCase().includes((P || n).toLowerCase()) && V.toLowerCase() !== n.toLowerCase()
+    (V) => V.toLowerCase().includes((B || n).toLowerCase()) && V.toLowerCase() !== n.toLowerCase()
   ).slice(0, 8) : [], Z = k && G.length > 0, de = N && te.length > 0;
   U(() => {
     if (!Z) return;
@@ -28130,11 +28133,11 @@ function Mi({
   const he = se((V) => {
     h == null || h(V), w(!1), _(""), E(-1);
   }, [h]), Ae = se((V) => {
-    m == null || m(V), R(!1), D(""), B(-1);
+    m == null || m(V), R(!1), M(""), P(-1);
   }, [m]), Ee = se((V, xe) => {
-    const ke = xe === "key", Ce = ke ? Z : de, Te = ke ? G : te, at = ke ? I : L, tt = ke ? E : B, j = ke ? he : Ae, oe = ke ? w : R;
+    const ke = xe === "key", Ce = ke ? Z : de, Te = ke ? G : te, at = ke ? I : D, tt = ke ? E : P, j = ke ? he : Ae, oe = ke ? w : R;
     Ce && (V.key === "ArrowDown" ? (V.preventDefault(), tt((q) => (q + 1) % Te.length)) : V.key === "ArrowUp" ? (V.preventDefault(), tt((q) => q <= 0 ? Te.length - 1 : q - 1)) : V.key === "Enter" && at >= 0 ? (V.preventDefault(), j(Te[at])) : V.key === "Escape" && (oe(!1), tt(-1)));
-  }, [Z, de, G, te, I, L, he, Ae]), X = u ? "grid-cols-[32px_1fr_1fr_1fr_32px]" : "grid-cols-[32px_1fr_1fr_32px]", pe = {
+  }, [Z, de, G, te, I, D, he, Ae]), X = u ? "grid-cols-[32px_1fr_1fr_1fr_32px]" : "grid-cols-[32px_1fr_1fr_32px]", pe = {
     border: "1px dashed var(--color-input-border)",
     background: "color-mix(in srgb, var(--color-text-primary) 3%, transparent)",
     boxShadow: "none"
@@ -28208,11 +28211,11 @@ function Mi({
               placeholder: (p == null ? void 0 : p.value) ?? "Value",
               size: f,
               onChange: (V) => {
-                m == null || m(V), D(V), B(-1);
+                m == null || m(V), M(V), P(-1);
               },
               onKeyDown: (V) => Ee(V, "val"),
               onBlur: () => setTimeout(() => {
-                R(!1), B(-1);
+                R(!1), P(-1);
               }, 150),
               style: { width: "100%" }
             }
@@ -28228,13 +28231,13 @@ function Mi({
               style: { width: "100%", ...a ? pe : {} },
               color: a ? "var(--color-text-secondary)" : void 0,
               onChange: (V) => {
-                m == null || m(V.target.value), D(V.target.value), B(-1);
+                m == null || m(V.target.value), M(V.target.value), P(-1);
               },
               onFocus: () => {
-                R(!0), D(n), B(-1);
+                R(!0), M(n), P(-1);
               },
               onBlur: () => setTimeout(() => {
-                R(!1), B(-1);
+                R(!1), P(-1);
               }, 150),
               onKeyDown: (V) => Ee(V, "val"),
               tabIndex: a ? -1 : void 0
@@ -28244,11 +28247,11 @@ function Mi({
             "button",
             {
               type: "button",
-              className: Ai(xe === L),
+              className: Ai(xe === D),
               onMouseDown: (ke) => {
                 ke.preventDefault(), Ae(V);
               },
-              onMouseEnter: () => B(xe),
+              onMouseEnter: () => P(xe),
               children: V
             },
             V
@@ -28360,19 +28363,19 @@ function A_({
   pinnedTopRows: m,
   onPinnedRemove: b
 }) {
-  const [y, v] = z(!1), [k, w] = z(!1), [S, _] = z(!1), I = M(""), E = p || "var(--color-accent, var(--color-primary))", N = m && m.length > 0, R = (A, H, G) => {
+  const [y, v] = z(!1), [k, w] = z(!1), [S, _] = z(!1), I = L(""), E = p || "var(--color-accent, var(--color-primary))", N = m && m.length > 0, R = (A, H, G) => {
     const te = [...e];
     te[A] = { ...te[A], [H]: G }, n(te);
-  }, P = () => n([...e, wn()]), D = (A) => {
+  }, B = () => n([...e, wn()]), M = (A) => {
     const H = [...e];
     H.splice(A, 0, wn()), n(H);
-  }, L = (A) => {
+  }, D = (A) => {
     if (e.length <= 1) {
       n([wn()]);
       return;
     }
     n(e.filter((H, G) => G !== A));
-  }, B = () => e.filter((A) => A.key || A.value).map((A) => `${A.enabled ? "" : "# "}${A.key}: ${A.value}`).join(`
+  }, P = () => e.filter((A) => A.key || A.value).map((A) => `${A.enabled ? "" : "# "}${A.key}: ${A.value}`).join(`
 `), T = (A) => {
     const H = A.split(`
 `).map((G) => {
@@ -28444,12 +28447,12 @@ function A_({
             size: "md",
             tooltip: "Add new row",
             style: { "--hover-color": E, "--hover-bg": `color-mix(in srgb, ${E} 8%, transparent)` },
-            onClick: P
+            onClick: B
           }
         )
       ] })
     ] }),
-    y ? /* @__PURE__ */ o(uv, { defaultValue: B(), onChangeRef: I, accentColor: p }) : /* @__PURE__ */ x(ve, { children: [
+    y ? /* @__PURE__ */ o(uv, { defaultValue: P(), onChangeRef: I, accentColor: p }) : /* @__PURE__ */ x(ve, { children: [
       /* @__PURE__ */ x("div", { className: `grid ${$} gap-2 px-1 mb-1.5 items-center`, children: [
         /* @__PURE__ */ o("div", {}),
         /* @__PURE__ */ o("div", { className: "text-[var(--color-text-muted)] font-medium text-[10px] uppercase tracking-wide px-2.5", children: u || "Key" }),
@@ -28497,10 +28500,10 @@ function A_({
             onValueChange: (G) => R(H, "value", G),
             onDescriptionChange: (G) => R(H, "description", G),
             onEnabledChange: (G) => R(H, "enabled", G),
-            onRemove: () => L(H)
+            onRemove: () => D(H)
           }
         ) }),
-        /* @__PURE__ */ o(dv, { onInsert: () => D(H + 1), accentColor: p })
+        /* @__PURE__ */ o(dv, { onInsert: () => M(H + 1), accentColor: p })
       ] }, A.id)) })
     ] }),
     k && /* @__PURE__ */ o(
@@ -28531,7 +28534,7 @@ function pv() {
   );
 }
 function fv({ seg: t, dims: e, accent: n, disabled: r }) {
-  const [i, a] = z(!1), l = M(null), [c, s] = z({ top: 0, left: 0, width: 0 }), d = t.width ?? (e.height <= 26 ? 72 : e.height <= 34 ? 88 : 106), u = t.options.find((f) => f.value === t.value), p = (u == null ? void 0 : u.color) ?? "var(--color-text-primary)", g = () => {
+  const [i, a] = z(!1), l = L(null), [c, s] = z({ top: 0, left: 0, width: 0 }), d = t.width ?? (e.height <= 26 ? 72 : e.height <= 34 ? 88 : 106), u = t.options.find((f) => f.value === t.value), p = (u == null ? void 0 : u.color) ?? "var(--color-text-primary)", g = () => {
     if (r) return;
     const f = l.current;
     if (!f) return;
@@ -28774,41 +28777,41 @@ function L_({
   onReset: f,
   resetTitle: h = "Reset view"
 }) {
-  const m = M(null), b = M({
+  const m = L(null), b = L({
     dragging: !1,
     startX: 0,
     startY: 0,
     originLeft: 0,
     originTop: 0
-  }), y = M(!1), [v, k] = z(u), w = p ?? v, S = se((R) => {
+  }), y = L(!1), [v, k] = z(u), w = p ?? v, S = se((R) => {
     p === void 0 && k(R), g == null || g(R);
   }, [p, g]), _ = se((R) => {
-    const P = b.current;
-    if (!P.dragging || !m.current) return;
-    const D = R.clientX - P.startX, L = c === "x" ? 0 : R.clientY - P.startY;
-    (Math.abs(D) > 3 || Math.abs(L) > 3) && (y.current = !0);
-    const B = m.current, T = Math.max(0, Math.min(window.innerWidth - B.offsetWidth, P.originLeft + D)), O = Math.max(0, Math.min(window.innerHeight - B.offsetHeight, P.originTop + L));
-    B.style.left = `${T}px`, B.style.top = `${O}px`, B.style.transform = "none";
+    const B = b.current;
+    if (!B.dragging || !m.current) return;
+    const M = R.clientX - B.startX, D = c === "x" ? 0 : R.clientY - B.startY;
+    (Math.abs(M) > 3 || Math.abs(D) > 3) && (y.current = !0);
+    const P = m.current, T = Math.max(0, Math.min(window.innerWidth - P.offsetWidth, B.originLeft + M)), O = Math.max(0, Math.min(window.innerHeight - P.offsetHeight, B.originTop + D));
+    P.style.left = `${T}px`, P.style.top = `${O}px`, P.style.transform = "none";
   }, [c]), I = se((R) => {
-    const P = b.current;
-    if (P.dragging) {
-      if (P.dragging = !1, document.removeEventListener("mousemove", _), document.removeEventListener("mouseup", I), m.current) {
-        const D = m.current.getBoundingClientRect();
-        a == null || a(D.left, D.top);
+    const B = b.current;
+    if (B.dragging) {
+      if (B.dragging = !1, document.removeEventListener("mousemove", _), document.removeEventListener("mouseup", I), m.current) {
+        const M = m.current.getBoundingClientRect();
+        a == null || a(M.left, M.top);
       }
       w && !y.current && S(!1), R.stopPropagation();
     }
   }, [_, a, w, S]), E = se((R) => {
     if (!m.current) return;
     R.preventDefault();
-    const P = m.current, D = P.getBoundingClientRect();
+    const B = m.current, M = B.getBoundingClientRect();
     y.current = !1, b.current = {
       dragging: !0,
       startX: R.clientX,
       startY: R.clientY,
-      originLeft: D.left,
-      originTop: D.top
-    }, P.style.position = "fixed", P.style.left = `${D.left}px`, P.style.top = `${D.top}px`, P.style.transform = "none", P.style.zIndex = "9999", document.addEventListener("mousemove", _), document.addEventListener("mouseup", I);
+      originLeft: M.left,
+      originTop: M.top
+    }, B.style.position = "fixed", B.style.left = `${M.left}px`, B.style.top = `${M.top}px`, B.style.transform = "none", B.style.zIndex = "9999", document.addEventListener("mousemove", _), document.addEventListener("mouseup", I);
   }, [_, I]);
   U(() => () => {
     document.removeEventListener("mousemove", _), document.removeEventListener("mouseup", I);
@@ -28872,18 +28875,18 @@ function L_({
           }
         ),
         t.map((R) => {
-          const P = R.dotColor !== void 0 || R.label !== void 0;
+          const B = R.dotColor !== void 0 || R.label !== void 0;
           return /* @__PURE__ */ x("div", { style: { display: "contents" }, children: [
             R.separator && /* @__PURE__ */ o("div", { className: "dui_hud__sep" }),
             /* @__PURE__ */ x(
               "button",
               {
                 type: "button",
-                className: `dui_hud__btn${P ? " dui_hud__btn--legend" : R.active ? " dui_hud__btn--active" : ""}`,
+                className: `dui_hud__btn${B ? " dui_hud__btn--legend" : R.active ? " dui_hud__btn--active" : ""}`,
                 onClick: R.onClick,
                 disabled: R.disabled,
                 title: R.title,
-                style: P ? {
+                style: B ? {
                   // disabled must win over the active/inactive dim —
                   // this inline style previously only branched on
                   // `active`, so a disabled-but-active legend item (e.g.
@@ -30759,7 +30762,7 @@ function Iv(t) {
   });
 }
 function W_({ content: t, className: e = "", style: n }) {
-  const r = M(null), i = ue(() => kv(t), [t]), a = se(() => {
+  const r = L(null), i = ue(() => kv(t), [t]), a = se(() => {
     r.current && Iv(r.current);
   }, []);
   return U(() => {
@@ -30792,7 +30795,7 @@ function F_({
   className: c = "",
   style: s
 }) {
-  const [d, u] = z(!1), p = M(/* @__PURE__ */ new Map()), g = i || "var(--color-accent, var(--color-primary))", f = (w, S) => {
+  const [d, u] = z(!1), p = L(/* @__PURE__ */ new Map()), g = i || "var(--color-accent, var(--color-primary))", f = (w, S) => {
     const _ = [...e];
     _[w] = { ..._[w], ...S }, n(_);
   }, h = (w) => {
@@ -30808,23 +30811,23 @@ function F_({
       r(I.id, _);
       return;
     }
-    const E = _.map((P) => P.name), N = _.map((P) => P.type || "application/octet-stream"), R = [];
-    for (const P of _) {
-      const D = await new Promise((L) => {
-        const B = new FileReader();
-        B.onload = () => {
-          const T = B.result;
-          L(T.includes(",") ? T.split(",")[1] : T);
-        }, B.readAsDataURL(P);
+    const E = _.map((B) => B.name), N = _.map((B) => B.type || "application/octet-stream"), R = [];
+    for (const B of _) {
+      const M = await new Promise((D) => {
+        const P = new FileReader();
+        P.onload = () => {
+          const T = P.result;
+          D(T.includes(",") ? T.split(",")[1] : T);
+        }, P.readAsDataURL(B);
       });
-      R.push(D);
+      R.push(M);
     }
     f(w, { fileNames: E, value: E.join(", "), fileData: R, fileMimeTypes: N });
   }, y = (w) => {
     var S;
     if (!(!w.fileData || !w.fileNames))
       for (let _ = 0; _ < w.fileData.length; _++) {
-        const I = ((S = w.fileMimeTypes) == null ? void 0 : S[_]) || "application/octet-stream", E = new Blob([Uint8Array.from(atob(w.fileData[_]), (P) => P.charCodeAt(0))], { type: I }), N = URL.createObjectURL(E), R = document.createElement("a");
+        const I = ((S = w.fileMimeTypes) == null ? void 0 : S[_]) || "application/octet-stream", E = new Blob([Uint8Array.from(atob(w.fileData[_]), (B) => B.charCodeAt(0))], { type: I }), N = URL.createObjectURL(E), R = document.createElement("a");
         R.href = N, R.download = w.fileNames[_] || "file", R.click(), URL.revokeObjectURL(N);
       }
   }, v = e.some((w) => w.key || w.value), k = {
@@ -31043,13 +31046,13 @@ function Rv({
   accent: i,
   disabled: a
 }) {
-  const { options: l, value: c, onChange: s, label: d } = t, u = M(null), p = M([]), g = M(null), f = M(null), h = M(!1), m = e * n, b = e * (n - 1) / 2, y = Math.max(0, l.findIndex((_) => _.value === c)), v = se((_) => {
+  const { options: l, value: c, onChange: s, label: d } = t, u = L(null), p = L([]), g = L(null), f = L(null), h = L(!1), m = e * n, b = e * (n - 1) / 2, y = Math.max(0, l.findIndex((_) => _.value === c)), v = se((_) => {
     const I = p.current, E = _ + m / 2;
     for (let N = 0; N < I.length; N++) {
       const R = I[N];
       if (!R) continue;
-      const D = (b + N * e + e / 2 - E) / e, L = Math.abs(D), B = Jt(1 - L * 0.38, 0.15, 1), T = Jt(1 - L * 0.14, 0.68, 1), O = Jt(D * 24, -58, 58);
-      R.style.opacity = String(B), R.style.transform = `perspective(700px) rotateX(${O}deg) scale(${T})`;
+      const M = (b + N * e + e / 2 - E) / e, D = Math.abs(M), P = Jt(1 - D * 0.38, 0.15, 1), T = Jt(1 - D * 0.14, 0.68, 1), O = Jt(M * 24, -58, 58);
+      R.style.opacity = String(P), R.style.transform = `perspective(700px) rotateX(${O}deg) scale(${T})`;
     }
   }, [e, m, b]), k = se((_, I) => {
     const E = u.current;
@@ -31230,7 +31233,7 @@ function Hi({
   fontSize: a
 }) {
   var g;
-  const [l, c] = z(!1), s = M(null), d = M(null), u = M(null);
+  const [l, c] = z(!1), s = L(null), d = L(null), u = L(null);
   U(() => {
     if (!l || !s.current || !d.current) return;
     const f = s.current, h = d.current, m = () => {
@@ -31323,15 +31326,15 @@ function Co({
   className: g = "",
   style: f
 }) {
-  const h = wo(s, { width: d, borderRadius: u, color: p }), m = p ?? "var(--color-primary)", b = ue(() => e === "single" && typeof n == "string" ? dt(n) : e === "range" && Array.isArray(n) && typeof n[0] == "string" || e === "multi" && Array.isArray(n) && n.length && typeof n[0] == "string" ? dt(n[0]) : /* @__PURE__ */ new Date(), []), [y, v] = z(Wl(b)), [k, w] = z("right"), S = i ? dt(i) : void 0, _ = a ? dt(a) : void 0, I = se(($) => !!(S && $ < S || _ && $ > _ || l != null && l($)), [S, _, l]), E = ue(() => Av(y), [y]), N = /* @__PURE__ */ new Date(), R = e === "range" && Array.isArray(n) ? n : [null, null], P = e === "multi" && Array.isArray(n) ? n : [], D = se(($) => {
+  const h = wo(s, { width: d, borderRadius: u, color: p }), m = p ?? "var(--color-primary)", b = ue(() => e === "single" && typeof n == "string" ? dt(n) : e === "range" && Array.isArray(n) && typeof n[0] == "string" || e === "multi" && Array.isArray(n) && n.length && typeof n[0] == "string" ? dt(n[0]) : /* @__PURE__ */ new Date(), []), [y, v] = z(Wl(b)), [k, w] = z("right"), S = i ? dt(i) : void 0, _ = a ? dt(a) : void 0, I = se(($) => !!(S && $ < S || _ && $ > _ || l != null && l($)), [S, _, l]), E = ue(() => Av(y), [y]), N = /* @__PURE__ */ new Date(), R = e === "range" && Array.isArray(n) ? n : [null, null], B = e === "multi" && Array.isArray(n) ? n : [], M = se(($) => {
     if (e === "single")
       return typeof n == "string" && kn($, dt(n)) ? "selected" : "none";
     if (e === "range") {
       const [A, H] = R;
       return A && kn($, dt(A)) ? "range-start" : H && kn($, dt(H)) ? "range-end" : A && H && $ > dt(A) && $ < dt(H) ? "in-range" : "none";
     }
-    return P.some((A) => kn($, dt(A))) ? "selected" : "none";
-  }, [e, n, R, P]), L = se(($) => {
+    return B.some((A) => kn($, dt(A))) ? "selected" : "none";
+  }, [e, n, R, B]), D = se(($) => {
     if (I($)) return;
     const A = Tv($);
     if (e === "single")
@@ -31340,10 +31343,10 @@ function Co({
       const [H, G] = R;
       !H || H && G ? r([A, null]) : dt(H) > $ ? r([A, H]) : r([H, A]);
     } else {
-      const H = P.includes(A);
-      r(H ? P.filter((G) => G !== A) : [...P, A]);
+      const H = B.includes(A);
+      r(H ? B.filter((G) => G !== A) : [...B, A]);
     }
-  }, [e, r, I, R, P]), B = ($) => {
+  }, [e, r, I, R, B]), P = ($) => {
     w($ > 0 ? "right" : "left"), v((A) => $v(A, $));
   }, T = ue(() => Cv.map(($, A) => ({ value: String(A), label: $ })), []), O = y.getFullYear(), W = ue(() => Array.from({ length: 121 }, ($, A) => {
     const H = O - 60 + A;
@@ -31390,14 +31393,14 @@ function Co({
             )
           ] }),
           /* @__PURE__ */ x("div", { style: { display: "flex", gap: 2 }, children: [
-            /* @__PURE__ */ o("button", { type: "button", className: "dui_calendar__nav", onClick: () => B(-1), "aria-label": "Previous month", children: /* @__PURE__ */ o(Rt, { size: h.cellSize * 0.4 }) }),
-            /* @__PURE__ */ o("button", { type: "button", className: "dui_calendar__nav", onClick: () => B(1), "aria-label": "Next month", children: /* @__PURE__ */ o(Pe, { size: h.cellSize * 0.4 }) })
+            /* @__PURE__ */ o("button", { type: "button", className: "dui_calendar__nav", onClick: () => P(-1), "aria-label": "Previous month", children: /* @__PURE__ */ o(Rt, { size: h.cellSize * 0.4 }) }),
+            /* @__PURE__ */ o("button", { type: "button", className: "dui_calendar__nav", onClick: () => P(1), "aria-label": "Next month", children: /* @__PURE__ */ o(Pe, { size: h.cellSize * 0.4 }) })
           ] })
         ] }),
         /* @__PURE__ */ x("div", { className: `dui_calendar__grid dui_calendar__grid--${k}`, children: [
           Nv.map(($, A) => /* @__PURE__ */ o("div", { className: "dui_calendar__weekday", style: { width: h.cellSize, fontSize: h.fontSize }, children: $ }, A)),
           E.map(($, A) => {
-            const H = $.getMonth() !== y.getMonth(), G = D($), te = I($), Z = kn($, N), de = (pe) => pe === "in-range" || pe === "range-start" || pe === "range-end", he = c === "block" && de(G), Ae = he && A % 7 !== 0 && de(D(E[A - 1])), Ee = he && A % 7 !== 6 && de(D(E[A + 1])), X = h.cellSize / 2;
+            const H = $.getMonth() !== y.getMonth(), G = M($), te = I($), Z = kn($, N), de = (pe) => pe === "in-range" || pe === "range-start" || pe === "range-end", he = c === "block" && de(G), Ae = he && A % 7 !== 0 && de(M(E[A - 1])), Ee = he && A % 7 !== 6 && de(M(E[A + 1])), X = h.cellSize / 2;
             return /* @__PURE__ */ x("div", { className: "dui_calendar__cell", style: { height: h.cellSize }, children: [
               he && /* @__PURE__ */ o(
                 "span",
@@ -31421,7 +31424,7 @@ function Co({
                 {
                   type: "button",
                   disabled: te,
-                  onClick: () => L($),
+                  onClick: () => D($),
                   className: [
                     "dui_calendar__day",
                     H && "dui_calendar__day--outside",
@@ -31467,7 +31470,7 @@ function U_({
   className: p = "",
   style: g
 }) {
-  const [f, h] = z(!1), m = M(null), b = M(null), y = Ue(l, { width: c, borderRadius: s, color: d }), v = d ?? "var(--color-accent, var(--color-primary))";
+  const [f, h] = z(!1), m = L(null), b = L(null), y = Ue(l, { width: c, borderRadius: s, color: d }), v = d ?? "var(--color-accent, var(--color-primary))";
   return U(() => {
     if (!f || !m.current || !b.current) return;
     const k = m.current, w = b.current, S = () => {
@@ -31482,8 +31485,8 @@ function U_({
   }, [f]), U(() => {
     if (!f) return;
     const k = (w) => {
-      var S, _;
-      (S = m.current) != null && S.contains(w.target) || (_ = b.current) != null && _.contains(w.target) || h(!1);
+      var S, _, I, E;
+      (S = m.current) != null && S.contains(w.target) || (_ = b.current) != null && _.contains(w.target) || (E = (I = w.target) == null ? void 0 : I.closest) != null && E.call(I, ".dui_calendar__dropdown") || h(!1);
     };
     return document.addEventListener("mousedown", k), () => document.removeEventListener("mousedown", k);
   }, [f]), /* @__PURE__ */ x("div", { "data-testid": t, className: `relative inline-block ${p}`, style: g, children: [
@@ -31629,12 +31632,12 @@ function V_({
   className: f = "",
   style: h
 }) {
-  const [m, b] = z(!1), y = M(null), v = M(null), k = Ue(s, { width: d, borderRadius: u, color: p }), w = p ?? "var(--color-accent, var(--color-primary))", { date: S, time: _ } = Dv(e);
+  const [m, b] = z(!1), y = L(null), v = L(null), k = Ue(s, { width: d, borderRadius: u, color: p }), w = p ?? "var(--color-accent, var(--color-primary))", { date: S, time: _ } = Dv(e);
   return U(() => {
     if (!m || !y.current || !v.current) return;
     const I = y.current, E = v.current, N = () => {
-      const P = I.getBoundingClientRect();
-      E.style.top = `${P.bottom + 6}px`, E.style.left = `${Math.min(P.left, window.innerWidth - E.offsetWidth - 8)}px`;
+      const B = I.getBoundingClientRect();
+      E.style.top = `${B.bottom + 6}px`, E.style.left = `${Math.min(B.left, window.innerWidth - E.offsetWidth - 8)}px`;
     };
     N();
     const R = requestAnimationFrame(N);
@@ -31644,8 +31647,8 @@ function V_({
   }, [m]), U(() => {
     if (!m) return;
     const I = (E) => {
-      var N, R;
-      (N = y.current) != null && N.contains(E.target) || (R = v.current) != null && R.contains(E.target) || b(!1);
+      var N, R, B, M;
+      (N = y.current) != null && N.contains(E.target) || (R = v.current) != null && R.contains(E.target) || (M = (B = E.target) == null ? void 0 : B.closest) != null && M.call(B, ".dui_calendar__dropdown") || b(!1);
     };
     return document.addEventListener("mousedown", I), () => document.removeEventListener("mousedown", I);
   }, [m]), /* @__PURE__ */ x("div", { "data-testid": t, className: `relative inline-block ${f}`, style: h, children: [
@@ -31983,21 +31986,21 @@ function Y_({
   className: u = "",
   style: p
 }) {
-  const g = wo(r, { width: a, borderRadius: l, color: c }), f = c ?? "var(--color-primary)", h = i ?? g.ringDiameter, m = Math.max(3, h * 0.07), b = (h - m) / 2, y = 2 * Math.PI * b, v = M(
+  const g = wo(r, { width: a, borderRadius: l, color: c }), f = c ?? "var(--color-primary)", h = i ?? g.ringDiameter, m = Math.max(3, h * 0.07), b = (h - m) / 2, y = 2 * Math.PI * b, v = L(
     t ? typeof t == "number" ? t : t.getTime() : Date.now() + (e ?? 60) * 1e3
-  ), k = M(Date.now()), w = M(Math.max(1, v.current - k.current)), [S, _] = z(() => Math.max(0, v.current - Date.now())), I = M(!1);
+  ), k = L(Date.now()), w = L(Math.max(1, v.current - k.current)), [S, _] = z(() => Math.max(0, v.current - Date.now())), I = L(!1);
   U(() => {
     if (d) return;
     let R;
-    const P = () => {
-      const D = Math.max(0, v.current - Date.now());
-      if (_(D), D <= 0) {
+    const B = () => {
+      const M = Math.max(0, v.current - Date.now());
+      if (_(M), M <= 0) {
         I.current || (I.current = !0, n == null || n());
         return;
       }
-      R = requestAnimationFrame(P);
+      R = requestAnimationFrame(B);
     };
-    return R = requestAnimationFrame(P), () => cancelAnimationFrame(R);
+    return R = requestAnimationFrame(B), () => cancelAnimationFrame(R);
   }, [d, n]);
   const E = 1 - Math.min(1, S / w.current), N = y * (1 - E);
   return /* @__PURE__ */ x(