@salilvnair/dui 1.0.0 → 1.0.2

package/dist/chunks/{EditorView.shell-BGH2VhWM.js → EditorView.shell-DWGMOgiy.js}

@@ -1,7 +1,7 @@
-import { jsx as d, Fragment as A, jsxs as I } from "react/jsx-runtime";
-import { useMemo as S, useContext as P, createContext as T, useRef as _, useEffect as v, useState as E, useSyncExternalStore as $ } from "react";
-import { createPortal as C } from "react-dom";
-import { g as F } from "./daakia-icons-DxWnX_IQ.js";
+import { jsx as u, Fragment as T, jsxs as _ } from "react/jsx-runtime";
+import { useMemo as E, useContext as L, createContext as P, useRef as w, useEffect as v, useState as S, useSyncExternalStore as F } from "react";
+import { createPortal as R } from "react-dom";
+import { aw as O } from "./daakia-icons-BpwUOdSO.js";
 const et = {
   /** Standard form controls: text input, select, duration, search, highlighted input */
   input: { xxs: 16, xs: 20, sm: 24, md: 28, lg: 36, xl: 40, xxl: 48, xxxl: 56 },
@@ -26,7 +26,52 @@ const et = {
   xl: 28,
   xxl: 32,
   xxxl: 38
+}, xt = {
+  xxs: 18,
+  xs: 22,
+  sm: 26,
+  md: 30,
+  lg: 34,
+  xl: 38,
+  xxl: 44,
+  xxxl: 50
 }, rt = {
+  xxs: 40,
+  xs: 52,
+  sm: 64,
+  md: 80,
+  lg: 100,
+  xl: 120,
+  xxl: 144,
+  xxxl: 168
+}, ot = {
+  xxs: 2,
+  xs: 3,
+  sm: 4,
+  md: 5,
+  lg: 6,
+  xl: 8,
+  xxl: 10,
+  xxxl: 12
+}, st = {
+  xxs: 16,
+  xs: 20,
+  sm: 24,
+  md: 32,
+  lg: 40,
+  xl: 48,
+  xxl: 56,
+  xxxl: 72
+}, lt = {
+  xxs: 6,
+  xs: 7,
+  sm: 8,
+  md: 10,
+  lg: 12,
+  xl: 14,
+  xxl: 16,
+  xxxl: 20
+}, it = {
   xxs: { trackW: 18, trackH: 10, thumb: 8 },
   xs: { trackW: 24, trackH: 14, thumb: 10 },
   sm: { trackW: 28, trackH: 16, thumb: 12 },
@@ -35,7 +80,7 @@ const et = {
   xl: { trackW: 52, trackH: 28, thumb: 24 },
   xxl: { trackW: 60, trackH: 32, thumb: 28 },
   xxxl: { trackW: 68, trackH: 36, thumb: 32 }
-}, ot = {
+}, ct = {
   xxs: { box: 10, icon: 6 },
   xs: { box: 12, icon: 8 },
   sm: { box: 14, icon: 9 },
@@ -44,7 +89,7 @@ const et = {
   xl: { box: 20, icon: 15 },
   xxl: { box: 22, icon: 17 },
   xxxl: { box: 26, icon: 20 }
-}, xt = {
+}, at = {
   xxs: 8,
   xs: 10,
   sm: 11,
@@ -53,7 +98,7 @@ const et = {
   xl: 16,
   xxl: 18,
   xxxl: 20
-}, st = {
+}, dt = {
   xxs: "8px",
   xs: "9px",
   sm: "10px",
@@ -62,7 +107,7 @@ const et = {
   xl: "13px",
   xxl: "14px",
   xxxl: "16px"
-}, it = {
+}, ut = {
   xxs: "2px",
   xs: "3px",
   sm: "4px",
@@ -71,7 +116,7 @@ const et = {
   xl: "9px",
   xxl: "11px",
   xxxl: "14px"
-}, O = {
+}, $ = {
   xxs: 10,
   xs: 11,
   sm: 11,
@@ -80,7 +125,7 @@ const et = {
   xl: 14,
   xxl: 15,
   xxxl: 16
-}, lt = {
+}, pt = {
   xxs: "4px",
   xs: "6px",
   sm: "8px",
@@ -89,7 +134,7 @@ const et = {
   xl: "16px",
   xxl: "20px",
   xxxl: "24px"
-}, ct = {
+}, ft = {
   xxs: "2px",
   xs: "3px",
   sm: "4px",
@@ -104,7 +149,7 @@ const et = {
   md: "4px",
   lg: "6px",
   full: "999px"
-}, at = {
+}, mt = {
   xxs: "2px",
   xs: "3px",
   // DUI_RADIUS_MAP.sm
@@ -118,7 +163,7 @@ const et = {
   // DUI_RADIUS_MAP.lg
   xxl: "8px",
   xxxl: "10px"
-}, B = {
+}, N = {
   sm: "80px",
   md: "120px",
   default: "auto",
@@ -127,38 +172,38 @@ const et = {
   maxContent: "max-content",
   fw: "100%",
   mx: "max-content"
-}, G = { size: "md" }, R = T(G);
-function ut({
+}, B = { size: "md" }, C = P(B);
+function ht({
   size: t = "md",
   width: e,
-  borderRadius: r,
-  color: o,
+  borderRadius: x,
+  color: r,
   defaultColor: p,
-  activeColor: i,
+  activeColor: l,
   fontStyle: a,
-  children: x
+  children: o
 }) {
-  const f = S(
-    () => ({ size: t, width: e, borderRadius: r, color: o, defaultColor: p, activeColor: i, fontStyle: a }),
-    [t, e, r, o, p, i, a]
+  const f = E(
+    () => ({ size: t, width: e, borderRadius: x, color: r, defaultColor: p, activeColor: l, fontStyle: a }),
+    [t, e, x, r, p, l, a]
   );
-  return /* @__PURE__ */ d(R.Provider, { value: f, children: x });
+  return /* @__PURE__ */ u(C.Provider, { value: f, children: o });
 }
-function W() {
-  return P(R);
+function U() {
+  return L(C);
 }
-function N(t, e) {
+function G(t, e) {
   return t === void 0 ? e : typeof t == "number" ? `${t}px` : z[t];
 }
-function j(t) {
-  return t ? B[t] : "auto";
+function Z(t) {
+  return t ? N[t] : "auto";
 }
-function dt(t) {
-  const e = W();
-  return S(
+function gt(t) {
+  const e = U();
+  return E(
     () => ({
-      borderRadius: N(e.borderRadius, t),
-      width: j(e.width),
+      borderRadius: G(e.borderRadius, t),
+      width: Z(e.width),
       color: e.color,
       defaultColor: e.defaultColor,
       activeColor: e.activeColor,
@@ -167,50 +212,50 @@ function dt(t) {
     [e, t]
   );
 }
-function pt(t, e = {}) {
-  const r = W(), o = t ?? r.size;
+function bt(t, e = {}) {
+  const x = U(), r = t ?? x.size;
   return {
-    fontSize: O[o]
+    fontSize: $[r]
   };
 }
-const q = { auto: "max-content", sm: "140px", md: "180px", lg: "220px" };
-function X(t) {
-  return !t || t === "auto" ? "max-content" : typeof t == "number" ? `${t}px` : q[t] || "max-content";
+const j = { auto: "max-content", sm: "140px", md: "180px", lg: "220px" };
+function q(t) {
+  return !t || t === "auto" ? "max-content" : typeof t == "number" ? `${t}px` : j[t] || "max-content";
 }
 function H({
   items: t,
   onClose: e,
-  rounded: r
+  rounded: x
 }) {
-  const [o, p] = E(null);
-  return /* @__PURE__ */ d(A, { children: t.map((i) => /* @__PURE__ */ d(
-    Z,
+  const [r, p] = S(null);
+  return /* @__PURE__ */ u(T, { children: t.map((l) => /* @__PURE__ */ u(
+    X,
     {
-      item: i,
+      item: l,
       onClose: e,
-      rounded: r,
-      activeSubId: o,
+      rounded: x,
+      activeSubId: r,
       onSubOpen: p
     },
-    i.id
+    l.id
   )) });
 }
-function Z({
+function X({
   item: t,
   onClose: e,
-  rounded: r,
-  activeSubId: o,
+  rounded: x,
+  activeSubId: r,
   onSubOpen: p
 }) {
-  const i = _(null), a = _(null);
+  const l = w(null), a = w(null);
   if (t.separator)
-    return /* @__PURE__ */ d("div", { style: { height: "1px", background: "var(--color-surface-border)", margin: "4px 0" } });
-  const x = !!(t.children && t.children.length > 0), f = t.danger, m = x && o === t.id, y = () => {
-    p(x ? t.id : null);
-  }, u = (n) => {
+    return /* @__PURE__ */ u("div", { style: { height: "1px", background: "var(--color-surface-border)", margin: "4px 0" } });
+  const o = !!(t.children && t.children.length > 0), f = t.danger, m = o && r === t.id, I = () => {
+    p(o ? t.id : null);
+  }, d = (n) => {
     var c;
     if (n.stopPropagation(), !t.disabled) {
-      if (x) {
+      if (o) {
         p(t.id);
         return;
       }
@@ -218,35 +263,35 @@ function Z({
     }
   };
   return v(() => {
-    if (!m || !i.current || !a.current) return;
+    if (!m || !l.current || !a.current) return;
     const n = a.current;
     n.style.visibility = "hidden";
     const c = requestAnimationFrame(() => {
-      if (!i.current || !a.current) return;
-      const l = i.current.getBoundingClientRect();
-      n.style.top = `${l.top - 4}px`, n.style.left = `${l.right + 4}px`;
+      if (!l.current || !a.current) return;
+      const i = l.current.getBoundingClientRect();
+      n.style.top = `${i.top - 4}px`, n.style.left = `${i.right + 4}px`;
       const s = n.getBoundingClientRect();
-      s.right > window.innerWidth - 8 && (n.style.left = `${l.left - s.width - 4}px`), s.bottom > window.innerHeight - 8 && (n.style.top = `${window.innerHeight - s.height - 8}px`), n.style.visibility = "visible";
+      s.right > window.innerWidth - 8 && (n.style.left = `${i.left - s.width - 4}px`), s.bottom > window.innerHeight - 8 && (n.style.top = `${window.innerHeight - s.height - 8}px`), n.style.visibility = "visible";
     });
     return () => cancelAnimationFrame(c);
-  }, [m]), /* @__PURE__ */ I(
+  }, [m]), /* @__PURE__ */ _(
     "div",
     {
-      ref: i,
-      onMouseEnter: y,
+      ref: l,
+      onMouseEnter: I,
       style: { position: "relative" },
       children: [
-        /* @__PURE__ */ I(
+        /* @__PURE__ */ _(
           "div",
           {
-            onClick: u,
+            onClick: d,
             className: `dui_ctx-menu__item${f ? " dui_ctx-menu__item--danger" : ""}${t.disabled ? " dui_ctx-menu__item--disabled" : ""}`,
             style: {
               display: "flex",
               alignItems: "center",
               gap: "8px",
               padding: "8px 10px",
-              borderRadius: r ? "5px" : "0px",
+              borderRadius: x ? "5px" : "0px",
               fontSize: "12px",
               fontWeight: 500,
               cursor: t.disabled ? "default" : "pointer",
@@ -255,15 +300,15 @@ function Z({
               userSelect: "none"
             },
             children: [
-              t.icon && /* @__PURE__ */ d("span", { style: { width: "14px", display: "flex", alignItems: "center", flexShrink: 0, color: t.iconColor ?? (f ? "var(--color-error)" : "var(--color-text-muted)") }, children: t.icon }),
-              /* @__PURE__ */ d("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: t.label }),
-              t.shortcut && !x && /* @__PURE__ */ d("span", { style: { fontSize: "10px", color: "var(--color-text-muted)", marginLeft: "12px", flexShrink: 0 }, children: t.shortcut }),
-              x && /* @__PURE__ */ d(F, { size: 10, style: { color: "var(--color-text-muted)", flexShrink: 0, marginLeft: "8px" } })
+              t.icon && /* @__PURE__ */ u("span", { style: { width: "14px", display: "flex", alignItems: "center", flexShrink: 0, color: t.iconColor ?? (f ? "var(--color-error)" : "var(--color-text-muted)") }, children: t.icon }),
+              /* @__PURE__ */ u("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: t.label }),
+              t.shortcut && !o && /* @__PURE__ */ u("span", { style: { fontSize: "10px", color: "var(--color-text-muted)", marginLeft: "12px", flexShrink: 0 }, children: t.shortcut }),
+              o && /* @__PURE__ */ u(O, { size: 10, style: { color: "var(--color-text-muted)", flexShrink: 0, marginLeft: "8px" } })
             ]
           }
         ),
-        x && m && C(
-          /* @__PURE__ */ d(
+        o && m && R(
+          /* @__PURE__ */ u(
             "div",
             {
               ref: a,
@@ -274,13 +319,13 @@ function Z({
                 zIndex: 99999,
                 background: "var(--color-elevated, var(--color-surface-bg))",
                 border: "1px solid var(--color-surface-border)",
-                borderRadius: r ? "7px" : "0px",
+                borderRadius: x ? "7px" : "0px",
                 padding: "4px",
                 minWidth: "200px",
                 width: "max-content",
                 boxShadow: "0 12px 40px rgba(0,0,0,.35)"
               },
-              children: /* @__PURE__ */ d(H, { items: t.children, onClose: e, rounded: r })
+              children: /* @__PURE__ */ u(H, { items: t.children, onClose: e, rounded: x })
             }
           ),
           document.body
@@ -289,60 +334,60 @@ function Z({
     }
   );
 }
-function Y({
+function K({
   items: t,
   anchorEl: e,
-  open: r,
-  onClose: o,
+  open: x,
+  onClose: r,
   width: p = "auto",
-  rounded: i = !0,
+  rounded: l = !0,
   matchAnchorWidth: a = !1,
-  position: x,
+  position: o,
   align: f = "auto"
 }) {
-  const m = _(null);
+  const m = w(null);
   if (v(() => {
-    if (!r) return;
-    const u = (n) => {
-      var l, s;
+    if (!x) return;
+    const d = (n) => {
+      var i, s;
       const c = n.target;
-      (l = m.current) != null && l.contains(c) || e != null && e.contains(c) || (s = c.closest) != null && s.call(c, "[data-dui-ctx-menu]") || o();
+      (i = m.current) != null && i.contains(c) || e != null && e.contains(c) || (s = c.closest) != null && s.call(c, "[data-dui-ctx-menu]") || r();
     };
-    return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
-  }, [r, e, o]), v(() => {
-    if (!r) return;
-    const u = (n) => {
+    return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
+  }, [x, e, r]), v(() => {
+    if (!x) return;
+    const d = (n) => {
       if (n.key === "Escape") {
-        o();
+        r();
         return;
       }
-      const c = n.key.toUpperCase(), l = t.find((s) => s.disabled || s.separator || !s.shortcut || !s.onClick ? !1 : s.shortcut === "⌫" ? n.key === "Backspace" || n.key === "Delete" : s.shortcut.toUpperCase() === c);
-      l && (n.preventDefault(), l.onClick(), o());
+      const c = n.key.toUpperCase(), i = t.find((s) => s.disabled || s.separator || !s.shortcut || !s.onClick ? !1 : s.shortcut === "⌫" ? n.key === "Backspace" || n.key === "Delete" : s.shortcut.toUpperCase() === c);
+      i && (n.preventDefault(), i.onClick(), r());
     };
-    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
-  }, [r, o, t]), v(() => {
-    if (!r || !m.current) return;
-    const u = m.current, n = () => {
-      const l = u.scrollWidth, s = u.scrollHeight;
-      let h, b, w = 0;
-      if (x)
-        h = x.x, b = x.y, w = x.y;
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [x, r, t]), v(() => {
+    if (!x || !m.current) return;
+    const d = m.current, n = () => {
+      const i = d.scrollWidth, s = d.scrollHeight;
+      let h, b, y = 0;
+      if (o)
+        h = o.x, b = o.y, y = o.y;
       else if (e) {
         const g = e.getBoundingClientRect();
-        f === "right" ? h = g.right - l : f === "left" ? h = g.left : h = g.left + l <= window.innerWidth - 8 ? g.left : g.right - l, b = g.bottom + 4, w = g.top, a && (u.style.width = g.width + "px");
+        f === "right" ? h = g.right - i : f === "left" ? h = g.left : h = g.left + i <= window.innerWidth - 8 ? g.left : g.right - i, b = g.bottom + 4, y = g.top, a && (d.style.width = g.width + "px");
       } else
         return;
-      h + l > window.innerWidth - 8 && (h = Math.max(8, window.innerWidth - l - 8)), h < 8 && (h = 8), b + s > window.innerHeight - 8 && (b = Math.max(8, w - s - 4)), u.style.left = h + "px", u.style.top = b + "px";
+      h + i > window.innerWidth - 8 && (h = Math.max(8, window.innerWidth - i - 8)), h < 8 && (h = 8), b + s > window.innerHeight - 8 && (b = Math.max(8, y - s - 4)), d.style.left = h + "px", d.style.top = b + "px";
     };
     n();
     const c = requestAnimationFrame(n);
     return window.addEventListener("scroll", n, { passive: !0, capture: !0 }), window.addEventListener("resize", n, { passive: !0 }), () => {
       cancelAnimationFrame(c), window.removeEventListener("scroll", n, { capture: !0 }), window.removeEventListener("resize", n);
     };
-  }, [r, e, x, a, f]), !r) return null;
-  const y = X(p);
-  return C(
-    /* @__PURE__ */ d(
+  }, [x, e, o, a, f]), !x) return null;
+  const I = q(p);
+  return R(
+    /* @__PURE__ */ u(
       "div",
       {
         ref: m,
@@ -350,78 +395,78 @@ function Y({
         style: {
           position: "fixed",
           zIndex: 99998,
-          width: y,
+          width: I,
           minWidth: "140px",
           background: "var(--color-elevated, var(--color-surface-bg))",
           border: "1px solid var(--color-surface-border)",
-          borderRadius: i ? "8px" : "0px",
+          borderRadius: l ? "8px" : "0px",
           padding: "4px",
           boxShadow: "0 12px 40px rgba(0,0,0,.35), 0 0 0 1px var(--color-panel-border, rgba(255,255,255,.04))",
           animation: "dui_menu-in 120ms ease-out"
         },
-        children: /* @__PURE__ */ d(H, { items: t, onClose: o, rounded: i })
+        children: /* @__PURE__ */ u(H, { items: t, onClose: r, rounded: l })
       }
     ),
     document.body
   );
 }
-let U = "idle", M = null, L = null;
-const k = /* @__PURE__ */ new Set();
-function K() {
-  for (const t of k) t();
+let W = "idle", M = null, A = null;
+const D = /* @__PURE__ */ new Set();
+function V() {
+  for (const t of D) t();
 }
-function D() {
-  return U;
+function k() {
+  return W;
 }
-function ft(t) {
+function vt(t) {
   M = t;
 }
-function mt(t) {
-  L = t;
+function It(t) {
+  A = t;
 }
-function ht() {
+function yt() {
   return M;
 }
-function gt() {
-  return L;
+function _t() {
+  return A;
 }
-function bt() {
-  U = "ready", K();
+function wt() {
+  W = "ready", V();
 }
-function vt() {
-  return $(
-    (t) => (k.add(t), () => k.delete(t)),
-    D,
-    D
+function Dt() {
+  return F(
+    (t) => (D.add(t), () => D.delete(t)),
+    k,
+    k
   );
 }
-function yt({
+function kt({
   bordered: t,
   containerHeight: e,
-  children: r,
-  contextMenuMode: o = "native",
+  children: x,
+  contextMenuMode: r = "native",
   contextMenuItems: p,
-  accentColor: i
+  accentColor: l
 }) {
-  const [a, x] = E(null), f = o === "dui";
-  return /* @__PURE__ */ I(
+  const [a, o] = S(null), f = r === "dui";
+  return /* @__PURE__ */ _(
     "div",
     {
       className: `dui-editor-shell relative${t ? " rounded border border-[var(--color-surface-border)]" : ""}`,
-      style: { height: e, width: "100%", position: "relative", ...i ? { "--editor-accent": i } : {} },
+      style: { height: e, width: "100%", position: "relative", ...l ? { "--editor-accent": l } : {} },
       onContextMenu: f ? (m) => {
-        m.preventDefault(), x({ x: m.clientX, y: m.clientY });
+        m.preventDefault(), o({ x: m.clientX, y: m.clientY });
       } : void 0,
       children: [
-        r,
-        f && p && /* @__PURE__ */ d(
-          Y,
+        x,
+        f && p && /* @__PURE__ */ u(
+          K,
           {
             open: !!a,
             anchorEl: null,
             position: a ?? void 0,
             items: p,
-            onClose: () => x(null)
+            onClose: () => o(null)
           }
         )
       ]
@@ -429,32 +474,37 @@ function yt({
   );
 }
 export {
-  Y as C,
-  at as D,
-  yt as E,
-  ct as a,
-  lt as b,
-  xt as c,
-  st as d,
+  wt as A,
+  vt as B,
+  K as C,
+  mt as D,
+  kt as E,
+  It as F,
+  ft as a,
+  pt as b,
+  at as c,
+  dt as d,
   et as e,
-  N as f,
+  G as f,
   nt as g,
   z as h,
-  rt as i,
-  it as j,
-  pt as k,
-  vt as l,
-  ht as m,
-  gt as n,
-  ot as o,
-  O as p,
-  B as q,
-  j as r,
-  ut as s,
-  dt as t,
-  W as u,
-  bt as v,
-  ft as w,
-  mt as x
+  it as i,
+  ut as j,
+  rt as k,
+  xt as l,
+  ot as m,
+  lt as n,
+  st as o,
+  ct as p,
+  bt as q,
+  Z as r,
+  Dt as s,
+  yt as t,
+  U as u,
+  _t as v,
+  $ as w,
+  N as x,
+  ht as y,
+  gt as z
 };
-//# sourceMappingURL=EditorView.shell-BGH2VhWM.js.map
+//# sourceMappingURL=EditorView.shell-DWGMOgiy.js.map