@contember/echo 0.0.29 → 0.0.30

package/dist/echo.es.js

@@ -1,6 +1,6 @@
-import { sharedConfig as L, createRoot as Ue, createRenderEffect as b, untrack as Ye, getOwner as De, createEffect as Y, runWithOwner as lt, createMemo as S, createSignal as A, onCleanup as ee, $PROXY as R, $TRACK as Fe, getListener as Ce, batch as ct, onMount as ye, createContext as dt, createComponent as g, useContext as ut, For as _, Show as D, mergeProps as ge, Switch as ht, Match as te } from "solid-js";
-import gt from "html2canvas";
-const ft = [
+import { sharedConfig as L, createRoot as Ue, createRenderEffect as b, untrack as Ye, getOwner as De, createEffect as Y, runWithOwner as lt, createMemo as k, createSignal as A, onCleanup as ee, $PROXY as R, $TRACK as Fe, getListener as Ce, batch as ct, onMount as ye, createContext as dt, createComponent as f, useContext as ut, For as _, Show as D, mergeProps as ge, Switch as ht, Match as te } from "solid-js";
+import ft from "html2canvas";
+const gt = [
   "allowfullscreen",
   "async",
   "autofocus",
@@ -34,7 +34,7 @@ const ft = [
   "isMap",
   "noModule",
   "playsInline",
-  ...ft
+  ...gt
 ]), vt = /* @__PURE__ */ new Set([
   "innerHTML",
   "textContent",
@@ -123,10 +123,10 @@ function xt(e, n, t) {
       const d = c.get(n[i]);
       if (d != null)
         if (l < d && d < o) {
-          let h = i, f = 1, m;
-          for (; ++h < a && h < o && !((m = c.get(n[h])) == null || m !== d + f); )
-            f++;
-          if (f > d - l) {
+          let h = i, g = 1, m;
+          for (; ++h < a && h < o && !((m = c.get(n[h])) == null || m !== d + g); )
+            g++;
+          if (g > d - l) {
             const y = n[i];
             for (; l < d; ) e.insertBefore(t[l++], y);
           } else e.replaceChild(t[l++], n[i++]);
@@ -160,13 +160,13 @@ function T(e, n = window.document) {
   }
 }
 function u(e, n, t) {
-  le(e) || (t == null ? e.removeAttribute(n) : e.setAttribute(n, t));
+  ce(e) || (t == null ? e.removeAttribute(n) : e.setAttribute(n, t));
 }
 function St(e, n, t) {
-  le(e) || (t ? e.setAttribute(n, "") : e.removeAttribute(n));
+  ce(e) || (t ? e.setAttribute(n, "") : e.removeAttribute(n));
 }
 function Re(e, n) {
-  le(e) || (n == null ? e.removeAttribute("class") : e.className = n);
+  ce(e) || (n == null ? e.removeAttribute("class") : e.className = n);
 }
 function U(e, n, t, r) {
   if (r)
@@ -204,15 +204,15 @@ function F(e, n, t) {
 function $t(e, n = {}, t, r) {
   const a = {};
   return b(
-    () => a.children = oe(e, n.children, a.children)
+    () => a.children = ae(e, n.children, a.children)
   ), b(() => typeof n.ref == "function" && V(n.ref, e)), b(() => Et(e, n, t, !0, a, !0)), a;
 }
 function V(e, n, t) {
   return Ye(() => e(n, t));
 }
 function v(e, n, t, r) {
-  if (t !== void 0 && !r && (r = []), typeof n != "function") return oe(e, n, r, t);
-  b((a) => oe(e, n(), a, t), r);
+  if (t !== void 0 && !r && (r = []), typeof n != "function") return ae(e, n, r, t);
+  b((a) => ae(e, n(), a, t), r);
 }
 function Et(e, n, t, r, a = {}, o = !1) {
   n || (n = {});
@@ -228,7 +228,7 @@ function Et(e, n, t, r, a = {}, o = !1) {
     a[i] = Ne(e, i, l, a[i], t, o, n);
   }
 }
-function le(e) {
+function ce(e) {
   return !!L.context && !L.done && (!e || e.isConnected);
 }
 function Pt(e) {
@@ -247,18 +247,18 @@ function Ne(e, n, t, r, a, o, i) {
   if (n === "ref")
     o || t(e);
   else if (n.slice(0, 3) === "on:") {
-    const f = n.slice(3);
-    r && e.removeEventListener(f, r, typeof r != "function" && r), t && e.addEventListener(f, t, typeof t != "function" && t);
+    const g = n.slice(3);
+    r && e.removeEventListener(g, r, typeof r != "function" && r), t && e.addEventListener(g, t, typeof t != "function" && t);
   } else if (n.slice(0, 10) === "oncapture:") {
-    const f = n.slice(10);
-    r && e.removeEventListener(f, r, !0), t && e.addEventListener(f, t, !0);
+    const g = n.slice(10);
+    r && e.removeEventListener(g, r, !0), t && e.addEventListener(g, t, !0);
   } else if (n.slice(0, 2) === "on") {
-    const f = n.slice(2).toLowerCase(), m = pt.has(f);
+    const g = n.slice(2).toLowerCase(), m = pt.has(g);
     if (!m && r) {
       const y = Array.isArray(r) ? r[0] : r;
-      e.removeEventListener(f, y);
+      e.removeEventListener(g, y);
     }
-    (m || t) && (U(e, f, t, m), m && T([f]));
+    (m || t) && (U(e, g, t, m), m && T([g]));
   } else if (n.slice(0, 5) === "attr:")
     u(e, n.slice(5), t);
   else if (n.slice(0, 5) === "bool:")
@@ -266,7 +266,7 @@ function Ne(e, n, t, r, a, o, i) {
   else if ((h = n.slice(0, 5) === "prop:") || (c = vt.has(n)) || (d = yt(n, e.tagName)) || (s = mt.has(n)) || (l = e.nodeName.includes("-") || "is" in i)) {
     if (h)
       n = n.slice(5), s = !0;
-    else if (le(e)) return t;
+    else if (ce(e)) return t;
     n === "class" || n === "className" ? Re(e, t) : l && !s && !c ? e[Pt(n)] = t : e[d || n] = t;
   } else
     u(e, bt[n] || n, t);
@@ -308,8 +308,8 @@ function zt(e) {
   } else l();
   o(r);
 }
-function oe(e, n, t, r, a) {
-  const o = le(e);
+function ae(e, n, t, r, a) {
+  const o = ce(e);
   if (o) {
     !t && (t = [...e.childNodes]);
     let s = [];
@@ -338,12 +338,12 @@ function oe(e, n, t, r, a) {
       return b(() => {
         let s = n();
         for (; typeof s == "function"; ) s = s();
-        t = oe(e, s, t, r);
+        t = ae(e, s, t, r);
       }), () => t;
     if (Array.isArray(n)) {
       const s = [], c = t && Array.isArray(t);
       if ($e(s, n, t, a))
-        return b(() => t = oe(e, s, t, r, !0)), () => t;
+        return b(() => t = ae(e, s, t, r, !0)), () => t;
       if (o) {
         if (!s.length) return t;
         if (r === void 0) return t = [...e.childNodes];
@@ -420,7 +420,7 @@ function Ot(e) {
   let o, i = !!L.context;
   return Y(
     () => {
-      i && (De().user = i = !1), o || (o = lt(a, () => S(() => e.children)));
+      i && (De().user = i = !1), o || (o = lt(a, () => k(() => e.children)));
       const l = r();
       if (l instanceof HTMLHeadElement) {
         const [s, c] = A(!1), d = () => c(!0);
@@ -498,7 +498,7 @@ const Mt = 5e3, At = (e) => {
   } catch {
     return n;
   }
-}, ae = (e, n) => {
+}, ie = (e, n) => {
   try {
     localStorage.setItem(Je(e), JSON.stringify(n));
   } catch (t) {
@@ -520,7 +520,7 @@ const Mt = 5e3, At = (e) => {
       drawing: {
         shapes: n.drawing.shapes
       }
-    }), ae(K, r), Xe();
+    }), ie(K, r), Xe();
   } catch (t) {
     console.warn("Failed to save page state:", t);
   }
@@ -534,7 +534,7 @@ const Mt = 5e3, At = (e) => {
 }, Ze = (e) => {
   try {
     const n = G(K, {});
-    delete n[e], ae(K, n), Xe();
+    delete n[e], ie(K, n), Xe();
   } catch (n) {
     console.error("Failed to clear page state:", n);
   }
@@ -574,33 +574,33 @@ function tt(e) {
   }
   return n;
 }
-function fe(e) {
+function me(e) {
   let n;
   return e != null && typeof e == "object" && (e[R] || !(n = Object.getPrototypeOf(e)) || n === Object.prototype || Array.isArray(e));
 }
-function ie(e, n = /* @__PURE__ */ new Set()) {
+function se(e, n = /* @__PURE__ */ new Set()) {
   let t, r, a, o;
   if (t = e != null && e[Pe]) return t;
-  if (!fe(e) || n.has(e)) return e;
+  if (!me(e) || n.has(e)) return e;
   if (Array.isArray(e)) {
     Object.isFrozen(e) ? e = e.slice(0) : n.add(e);
     for (let i = 0, l = e.length; i < l; i++)
-      a = e[i], (r = ie(a, n)) !== a && (e[i] = r);
+      a = e[i], (r = se(a, n)) !== a && (e[i] = r);
   } else {
     Object.isFrozen(e) ? e = Object.assign({}, e) : n.add(e);
     const i = Object.keys(e), l = Object.getOwnPropertyDescriptors(e);
     for (let s = 0, c = i.length; s < c; s++)
-      o = i[s], !l[o].get && (a = e[o], (r = ie(a, n)) !== a && (e[o] = r));
+      o = i[s], !l[o].get && (a = e[o], (r = se(a, n)) !== a && (e[o] = r));
   }
   return e;
 }
-function me(e, n) {
+function ve(e, n) {
   let t = e[n];
   return t || Object.defineProperty(e, n, {
     value: t = /* @__PURE__ */ Object.create(null)
   }), t;
 }
-function se(e, n, t) {
+function le(e, n, t) {
   if (e[n]) return e[n];
   const [r, a] = A(t, {
     equals: !1,
@@ -613,7 +613,7 @@ function Nt(e, n) {
   return !t || t.get || !t.configurable || n === R || n === J || (delete t.value, delete t.writable, t.get = () => e[R][n]), t;
 }
 function nt(e) {
-  Ce() && se(me(e, J), et)();
+  Ce() && le(ve(e, J), et)();
 }
 function qt(e) {
   return nt(e), Reflect.ownKeys(e);
@@ -624,17 +624,17 @@ const Vt = {
     if (n === R) return t;
     if (n === Fe)
       return nt(e), t;
-    const r = me(e, J), a = r[n];
+    const r = ve(e, J), a = r[n];
     let o = a ? a() : e[n];
     if (n === J || n === j || n === "__proto__") return o;
     if (!a) {
       const i = Object.getOwnPropertyDescriptor(e, n);
-      Ce() && (typeof o != "function" || e.hasOwnProperty(n)) && !(i && i.get) && (o = se(r, n, o)());
+      Ce() && (typeof o != "function" || e.hasOwnProperty(n)) && !(i && i.get) && (o = le(r, n, o)());
     }
-    return fe(o) ? tt(o) : o;
+    return me(o) ? tt(o) : o;
   },
   has(e, n) {
-    return n === Pe || n === R || n === Fe || n === J || n === j || n === "__proto__" ? !0 : (Ce() && se(me(e, j), n)(), n in e);
+    return n === Pe || n === R || n === Fe || n === J || n === j || n === "__proto__" ? !0 : (Ce() && le(ve(e, j), n)(), n in e);
   },
   set() {
     return !0;
@@ -645,14 +645,14 @@ const Vt = {
   ownKeys: qt,
   getOwnPropertyDescriptor: Nt
 };
-function ve(e, n, t, r = !1) {
+function be(e, n, t, r = !1) {
   if (!r && e[n] === t) return;
   const a = e[n], o = e.length;
   t === void 0 ? (delete e[n], e[j] && e[j][n] && a !== void 0 && e[j][n].$()) : (e[n] = t, e[j] && e[j][n] && a === void 0 && e[j][n].$());
-  let i = me(e, J), l;
-  if ((l = se(i, n, a)) && l.$(() => t), Array.isArray(e) && e.length !== o) {
+  let i = ve(e, J), l;
+  if ((l = le(i, n, a)) && l.$(() => t), Array.isArray(e) && e.length !== o) {
     for (let s = e.length; s < o; s++) (l = i[s]) && l.$();
-    (l = se(i, "length", o)) && l.$(e.length);
+    (l = le(i, "length", o)) && l.$(e.length);
   }
   (l = i[et]) && l.$();
 }
@@ -660,18 +660,18 @@ function rt(e, n) {
   const t = Object.keys(n);
   for (let r = 0; r < t.length; r += 1) {
     const a = t[r];
-    ve(e, a, n[a]);
+    be(e, a, n[a]);
   }
 }
 function Bt(e, n) {
-  if (typeof n == "function" && (n = n(e)), n = ie(n), Array.isArray(n)) {
+  if (typeof n == "function" && (n = n(e)), n = se(n), Array.isArray(n)) {
     if (e === n) return;
     let t = 0, r = n.length;
     for (; t < r; t++) {
       const a = n[t];
-      e[t] !== a && ve(e, t, a);
+      e[t] !== a && be(e, t, a);
     }
-    ve(e, "length", r);
+    be(e, "length", r);
   } else rt(e, n);
 }
 function re(e, n, t = []) {
@@ -699,10 +699,10 @@ function re(e, n, t = []) {
     a = e[r], t = [r].concat(t);
   }
   let o = n[0];
-  typeof o == "function" && (o = o(a, t), o === a) || r === void 0 && o == null || (o = ie(o), r === void 0 || fe(a) && fe(o) && !Array.isArray(o) ? rt(a, o) : ve(e, r, o));
+  typeof o == "function" && (o = o(a, t), o === a) || r === void 0 && o == null || (o = se(o), r === void 0 || me(a) && me(o) && !Array.isArray(o) ? rt(a, o) : be(e, r, o));
 }
 function Te(...[e, n]) {
-  const t = ie(e || {}), r = Array.isArray(t), a = tt(t);
+  const t = se(e || {}), r = Array.isArray(t), a = tt(t);
   function o(...i) {
     ct(() => {
       r && i.length === 1 ? Bt(t, i[0]) : re(t, i);
@@ -794,7 +794,7 @@ Location: ${t}:${r}:${a}`,
 }, Yt = () => [...N], Rt = () => {
   var e;
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || ((e = window.matchMedia) == null ? void 0 : e.call(window, "(max-width: 768px)").matches);
-}, ue = (e, { useClientCoords: n = !1 } = {}) => {
+}, he = (e, { useClientCoords: n = !1 } = {}) => {
   const r = typeof TouchEvent < "u" && e instanceof TouchEvent ? e.touches[0] : null;
   return {
     x: r ? n ? r.clientX : r.pageX : n ? e.clientX : e.pageX,
@@ -812,23 +812,29 @@ Location: ${t}:${r}:${a}`,
     width: Math.abs(t.x - n.x),
     height: Math.abs(t.y - n.y)
   };
-}, Kt = (e) => e.length < 2 ? null : `M ${e[0].x} ${e[0].y} ${e.slice(1).map((n) => `L ${n.x} ${n.y}`).join(" ")}`, Ie = window.EventTarget.prototype.addEventListener, be = window.EventTarget.prototype.removeEventListener;
+}, Kt = (e) => e.length < 2 ? null : `M ${e[0].x} ${e[0].y} ${e.slice(1).map((n) => `L ${n.x} ${n.y}`).join(" ")}`, Ie = window.EventTarget.prototype.addEventListener, oe = window.EventTarget.prototype.removeEventListener;
 let we = !1;
 const Gt = (e, n, t, r) => {
   Ie.call(e, n, t, r);
 }, Xt = (e, n, t, r) => {
-  be.call(e, n, t, r);
+  oe.call(e, n, t, r);
 }, ne = /* @__PURE__ */ new WeakMap(), Jt = (e) => {
   we || (we = !0, window.EventTarget.prototype.addEventListener = function(n, t, r) {
     const a = Qt(t, e);
-    ne.has(this) || ne.set(this, /* @__PURE__ */ new WeakMap()), ne.get(this).set(t, a), Ie.call(this, n, a, r);
+    ne.has(this) || ne.set(this, /* @__PURE__ */ new Map());
+    const o = { listener: t }, i = ne.get(this);
+    i && i.set(t, o), Ie.call(this, n, a, r);
   }, window.EventTarget.prototype.removeEventListener = function(n, t, r) {
-    var o, i;
-    const a = (o = ne.get(this)) == null ? void 0 : o.get(t);
-    a ? (be.call(this, n, a, r), (i = ne.get(this)) == null || i.delete(t)) : be.call(this, n, t, r);
+    const a = ne.get(this);
+    if (!a) {
+      oe.call(this, n, t, r);
+      return;
+    }
+    const o = a.get(t);
+    o ? (oe.call(this, n, o.listener, r), a.delete(t), a.size === 0 && ne.delete(this)) : oe.call(this, n, t, r);
   });
 }, Zt = () => {
-  we && (window.EventTarget.prototype.addEventListener = Ie, window.EventTarget.prototype.removeEventListener = be, we = !1);
+  we && (window.EventTarget.prototype.addEventListener = Ie, window.EventTarget.prototype.removeEventListener = oe, we = !1);
 }, M = (e) => {
   const { event: n, callback: t, onMount: r, onCleanup: a, useOriginal: o = !0 } = e;
   ye(() => {
@@ -850,7 +856,7 @@ const Gt = (e, n, t, r) => {
   try {
     const n = document.createElement("style");
     document.head.appendChild(n), (e = n.sheet) == null || e.insertRule("body > div:last-child img { display: inline-block; }");
-    const t = await gt(document.body, {
+    const t = await ft(document.body, {
       logging: !1,
       useCORS: !0,
       scale: window.devicePixelRatio,
@@ -900,8 +906,8 @@ const Gt = (e, n, t, r) => {
     cursor: We("rectangle", e.primaryColor)
   }), o = (c, d = !1) => {
     if (c.selectedTool || c.selectedColor) {
-      const h = c.selectedTool || r.selectedTool, f = c.selectedColor || r.selectedColor;
-      c.cursor = We(h, f);
+      const h = c.selectedTool || r.selectedTool, g = c.selectedColor || r.selectedColor;
+      c.cursor = We(h, g);
     }
     a(c), t == null || t(c, d);
   }, i = {
@@ -937,13 +943,13 @@ const Gt = (e, n, t, r) => {
         if (!h.classList.contains("echo-drawing-layer-mask") && !h.classList.contains("echo-shape"))
           return;
       }
-      const d = ue(c);
+      const d = he(c);
       if (c.target instanceof SVGElement && c.target.classList.contains("echo-shape")) {
         const h = c.target.dataset.shapeId;
         if (h && r.selectedShapeId === h) {
-          const f = r.shapes.find((m) => m.id === h);
-          if (f) {
-            i.startDrag(d), i.updateDragOffset(f, d);
+          const g = r.shapes.find((m) => m.id === h);
+          if (g) {
+            i.startDrag(d), i.updateDragOffset(g, d);
             return;
           }
         }
@@ -951,16 +957,16 @@ const Gt = (e, n, t, r) => {
       i.setInitialClick(d);
     },
     handleMove: (c) => {
-      const d = ue(c, { useClientCoords: !0 }), h = ue(c);
+      const d = he(c, { useClientCoords: !0 }), h = he(c);
       if (o({ mousePosition: d }), r.isDragging && r.selectedShapeId && r.dragStartPos && r.shapes.find((m) => m.id === r.selectedShapeId)) {
-        const m = h.x - r.dragStartPos.x, y = h.y - r.dragStartPos.y, x = r.shapes.map((C) => C.id === r.selectedShapeId ? {
-          ...C,
-          points: C.points.map(($) => ({
-            x: $.x + m,
-            y: $.y + y
+        const m = h.x - r.dragStartPos.x, y = h.y - r.dragStartPos.y, E = r.shapes.map((S) => S.id === r.selectedShapeId ? {
+          ...S,
+          points: S.points.map((C) => ({
+            x: C.x + m,
+            y: C.y + y
           }))
-        } : C);
-        o({ shapes: x }), i.startDrag(h);
+        } : S);
+        o({ shapes: E }), i.startDrag(h);
         return;
       }
       if (r.initialClickPos && !r.isDrawing) {
@@ -975,10 +981,10 @@ const Gt = (e, n, t, r) => {
         return;
       }
       if (r.initialClickPos && !r.isDrawing) {
-        const d = ue(c);
+        const d = he(c);
         if (Ve(r.initialClickPos, d) < Be && c.target instanceof SVGElement && c.target.classList.contains("echo-shape")) {
-          const f = c.target.dataset.shapeId;
-          f && o({ selectedShapeId: f });
+          const g = c.target.dataset.shapeId;
+          g && o({ selectedShapeId: g });
         }
       }
       i.setInitialClick(null), i.finishDrawing();
@@ -1024,7 +1030,7 @@ const Gt = (e, n, t, r) => {
 }, an = (e, n, t, r) => {
   var h;
   const a = (r == null ? void 0 : r.reduce(
-    (f, m) => (f[m.id] = m.defaultValue ?? (m.type === "checkbox" ? [] : ""), f),
+    (g, m) => (g[m.id] = m.defaultValue ?? (m.type === "checkbox" ? [] : ""), g),
     {}
   )) || {}, o = ze(n), i = (o == null ? void 0 : o.feedback.customInputValues) || {}, l = {
     ...a,
@@ -1039,9 +1045,9 @@ const Gt = (e, n, t, r) => {
   });
   return {
     state: s,
-    setState: (f, m = !1) => {
-      const y = "isCapturing" in f || "isMinimized" in f || m;
-      !y && !s.hasUserInteracted && c({ hasUserInteracted: !0 }), c(f), (s.hasUserInteracted || y) && (t == null || t(f, m));
+    setState: (g, m = !1) => {
+      const y = "isCapturing" in g || "isMinimized" in g || m;
+      !y && !s.hasUserInteracted && c({ hasUserInteracted: !0 }), c(g), (s.hasUserInteracted || y) && (t == null || t(g, m));
     }
   };
 }, sn = (e, n) => {
@@ -1171,13 +1177,13 @@ const Gt = (e, n, t, r) => {
     position: e.position,
     customInputs: e.customInputs
   });
-  return g(at.Provider, {
+  return f(at.Provider, {
     value: n,
     get children() {
       return e.children;
     }
   });
-}, E = () => {
+}, $ = () => {
   const e = ut(at);
   if (!e)
     throw new Error("useEchoStore must be used within EchoProvider");
@@ -1222,8 +1228,8 @@ const Gt = (e, n, t, r) => {
     },
     callback: t
   });
-}, hn = `*,*:before,*:after{box-sizing:border-box}.echo-root{position:absolute;top:0;left:0;z-index:var(--z-root);isolation:isolate;pointer-events:none;--z-root: 999999;--z-launcher: 2;--z-overlay: 1;--z-drawing-toolbar: 3;--z-drawing-tooltip: 3;--z-shape-actions: 3;--z-notification: 2;--z-welcome-message: 2;--z-widget-button: 2;--z-feedback-form: 4;--primary-color: #000;--primary-text-color: #fff;--error-color: #f44336;--success-color: var(--primary-color);--text-dark: #1a1a1a;--text-medium: #333;--text-light: #666;--text-lighter: #999;--border-color: rgba(0, 0, 0, .1);--border-color-light: rgba(0, 0, 0, .05);--border-color-medium: rgba(0, 0, 0, .08);--primary-color-lighter: color-mix(in srgb, var(--primary-color) 100%, white 40%);--primary-color-lightest: color-mix(in srgb, var(--primary-color) 7%, white 100%);--hover-color: color-mix(in srgb, var(--primary-color) 80%, #fff);--shadow-color-dark: rgba(0, 0, 0, .6);--shadow-color-light: rgba(255, 255, 255, .1);--shadow-color-medium: rgba(0, 0, 0, .2);--shadow-sm: 0 1px 3px;--shadow-md: 0 4px 10px;--shadow-lg: 0 10px 20px;--shadow-black-sm: var(--shadow-sm) rgba(0, 0, 0, .5);--shadow-black-md: var(--shadow-md) rgba(0, 0, 0, .5);--shadow-black-lg: var(--shadow-lg) rgba(0, 0, 0, .5);--shadow-black-lightened-sm: var(--shadow-sm) var(--shadow-color-medium);--shadow-black-lightened-md: var(--shadow-md) var(--shadow-color-medium);--shadow-black-lightened-lg: var(--shadow-lg) var(--shadow-color-medium);--shadow-primary-sm: var(--shadow-sm) color-mix(in srgb, var(--primary-color) 60%, transparent 80%);--shadow-primary-md: var(--shadow-md) color-mix(in srgb, var(--primary-color) 50%, transparent 80%);--shadow-primary-lg: var(--shadow-lg) color-mix(in srgb, var(--primary-color) 40%, transparent 80%);--shadow-primary-lighter-sm: var(--shadow-sm) color-mix(in srgb, var(--primary-color-lighter) 70%, transparent 80%);--shadow-primary-lighter-md: var(--shadow-md) color-mix(in srgb, var(--primary-color-lighter) 60%, transparent 80%);--shadow-primary-lighter-lg: var(--shadow-lg) color-mix(in srgb, var(--primary-color-lighter) 50%, transparent 80%);--shadow-primary-lightest-sm: var(--shadow-sm) color-mix(in srgb, var(--primary-color-lightest) 70%, transparent 80%);--shadow-primary-lightest-md: var(--shadow-md) color-mix(in srgb, var(--primary-color-lightest) 60%, transparent 80%);--shadow-primary-lightest-lg: var(--shadow-lg) color-mix(in srgb, var(--primary-color-lightest) 50%, transparent 80%);--shadow-combined-sm: var(--shadow-primary-sm), var(--shadow-black-lightened-sm);--shadow-combined-md: var(--shadow-primary-md), var(--shadow-black-lightened-md);--shadow-combined-lg: var(--shadow-primary-lg), var(--shadow-black-lightened-lg);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--font-xs: .8125rem;--font-sm: .875rem;--font-base: .9375rem;--font-md: 1rem;--font-lg: 1.125rem;--duration-fast: .1s;--duration-base: .2s;--duration-slow: .3s;--duration-slower: .4s;--duration-slowest: .6s;--ease-default: ease;--ease-in-out: ease-in-out;--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.16, 1, .3, 1)}.echo-stored-feedback{position:absolute;display:flex;flex-direction:column;bottom:calc(100% + var(--spacing-lg));right:0;width:320px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-black-lightened-lg);animation:slideUpFade var(--duration-base) var(--ease-smooth);z-index:calc(var(--z-widget-button) + 1);transform-origin:bottom right;transition:all var(--duration-base) var(--ease-smooth)}.echo-stored-feedback-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg)}.echo-stored-feedback-header h3{margin:0;font-size:var(--font-md);font-weight:600}.echo-stored-feedback-list{max-height:400px;overflow-y:auto;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.echo-stored-feedback-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color-light);transition:all var(--duration-base) var(--ease-smooth);background:#fff;position:relative}.echo-stored-feedback-item:hover{background:var(--primary-color-lightest)}.echo-stored-feedback-item-current{background:var(--primary-color-lightest);padding-left:calc(var(--spacing-lg) - 3px)}.echo-stored-feedback-item-current:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary-color);border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.echo-stored-feedback-item:last-child{border-bottom:none;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.echo-stored-feedback-item:last-child.echo-stored-feedback-item-current:before{border-bottom-left-radius:var(--radius-lg)}.echo-stored-feedback-content{flex:1;min-width:0;margin-right:var(--spacing-md)}.echo-stored-feedback-path{font-size:var(--font-sm);font-weight:500;color:var(--text-medium);margin-bottom:var(--spacing-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.echo-stored-feedback-preview{font-size:var(--font-xs);color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.echo-stored-feedback-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.echo-stored-feedback-link{color:var(--text-light)}.echo-stored-feedback-link:hover{color:var(--primary-color)}.echo-stored-feedback-delete{color:var(--text-light);font-size:var(--font-xs);padding:var(--spacing-xs) var(--spacing-md)}.echo-stored-feedback-delete:hover{color:var(--error-color);background:color-mix(in srgb,var(--error-color) 10%,transparent)}.echo-stored-feedback-empty{padding:var(--spacing-3xl) var(--spacing-lg);text-align:center;color:var(--text-light);font-size:var(--font-sm);border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.echo-launcher{position:fixed;z-index:var(--z-launcher);bottom:var(--spacing-xl);right:var(--spacing-xl)}.echo-overlay{position:absolute;top:0;left:0;margin:0;padding:0;max-width:none;max-height:none;border:3px solid var(--primary-color);background:transparent}.echo-overlay::backdrop{background:transparent}[data-hidden=true],[data-hidden=false]{transition:opacity var(--duration-slow) var(--ease-in-out),visibility var(--duration-slow) var(--ease-in-out)}[data-hidden=true]{opacity:0;visibility:hidden;pointer-events:none}[data-hidden=false]{opacity:1;visibility:visible;pointer-events:auto;user-select:none;-webkit-user-select:none}.echo-launcher-button{z-index:var(--z-widget-button);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;background:radial-gradient(circle at 40% 40%,var(--primary-color) 0%,var(--primary-color-lighter) 65%,var(--primary-color-lighter) 100%);border:none;border-radius:var(--radius-full);width:48px;height:48px;box-shadow:var(--shadow-black-md);transition:all var(--duration-slow) var(--ease-default),left var(--duration-slower) var(--ease-smooth),opacity var(--duration-slow) var(--ease-in-out)}.echo-launcher-button:hover{box-shadow:var(--shadow-black-lg);transform:translateY(-2px)}.echo-launcher-button:active{transform:scale(.95)}.echo-launcher-button-count{position:absolute;top:calc(-1 * var(--spacing-xs));right:calc(-1 * var(--spacing-xs));background:var(--primary-color-lightest);color:var(--primary-color-lighter);border-radius:var(--radius-md);min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-black-sm);padding:0 var(--spacing-xs);font-weight:600;pointer-events:auto;cursor:pointer;transform-origin:center center;animation:popIn var(--duration-slow) var(--ease-bounce);transition:transform var(--duration-base) var(--ease-default)}.echo-launcher-button-count:hover{transform:scale(1.1)}.echo-feedback{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);width:min(calc(100vw - var(--spacing-2xl)),24rem);z-index:var(--z-feedback-form);box-shadow:var(--shadow-black-lightened-lg);display:flex;flex-direction:column;gap:var(--spacing-lg);background:#fff;border-radius:var(--radius-lg);will-change:transform;padding:var(--spacing-lg)}.echo-feedback[data-minimized=true]{transition:transform .4s var(--ease-default),box-shadow .4s var(--ease-default);transform:translate(calc(100% - 48px),calc(100% - 48px));box-shadow:0 8px 16px #0003}.echo-feedback[data-minimized=true]:hover{cursor:pointer;transform:translate(calc(100% - 48px),calc(100% - 48px)) rotate(-2deg) scale(1.1);box-shadow:0 12px 24px #00000040}.echo-feedback[data-minimized=false]{transition:transform .4s var(--ease-smooth),box-shadow .4s var(--ease-smooth);transform:translate(0)}.echo-feedback[style*=transition]{pointer-events:none}.echo-feedback-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}.echo-feedback-header{display:flex;justify-content:space-between;align-items:center}.echo-feedback-title{font-size:var(--font-lg);font-weight:600;color:var(--text-dark);margin:0}.echo-feedback-header-actions{display:flex;gap:var(--spacing-xs);margin:calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) 0}.echo-feedback-form-textarea{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#fff;color:var(--text-medium);font-size:var(--font-sm);transition:all var(--duration-base) var(--ease-default);min-height:120px;resize:vertical;font-family:inherit}.echo-feedback-form-textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 15%,transparent)}.echo-feedback-form-textarea::placeholder{color:var(--text-lighter)}[data-hide-when-drawing=true]{opacity:1;visibility:visible;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}[data-drawing=true] [data-hide-when-drawing=true]{opacity:0;visibility:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}.echo-drawing-layer,.echo-drawing-layer-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;user-select:none;-webkit-user-select:none}.echo-drawing-layer-container svg{pointer-events:auto}.echo-drawing-toolbar{position:fixed;top:var(--spacing-xl);left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-sm);z-index:var(--z-drawing-toolbar);opacity:1;transition:opacity var(--duration-base) var(--ease-default)}.echo-drawing-toolbar-button{width:50px;height:50px;border-radius:var(--radius-full);border:2px solid #ddd;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all var(--duration-base) var(--ease-default);box-shadow:var(--shadow-black-sm);position:relative}.echo-drawing-toolbar-icon{width:25px;height:25px;color:var(--primary-color);transition:color var(--duration-base) var(--ease-default)}.echo-drawing-toolbar-button:hover{transform:scale(1.05);border-color:var(--hover-color)}.echo-drawing-toolbar-button[data-selected=true]{background:var(--primary-color-lightest);border-color:var(--primary-color)}.echo-color-selector{position:relative}.echo-color-selector:hover .echo-drawing-toolbar-button{border-top-right-radius:0;border-bottom-right-radius:0;transform:scale(1.05);border-right-color:transparent;background:rgba(var(--primary-color),.9);border-color:var(--hover-color)}.echo-color-swatch-wrapper{position:absolute;left:calc(100% - 2px);top:50%;transform:translateY(-50%);height:52.5px;padding-right:var(--spacing-sm);display:none}.echo-color-selector:hover .echo-color-swatch-wrapper{display:block}.echo-color-swatch{height:100%;background:#fff;border-radius:var(--radius-md);border-top-left-radius:0;border-bottom-left-radius:0;padding:var(--spacing-sm);padding-left:var(--spacing-md);box-shadow:var(--shadow-black-sm);display:flex;align-items:center;gap:var(--spacing-sm);border:2px solid #ddd;border-left:none}.echo-color-selector:hover .echo-color-swatch{border-color:var(--hover-color)}.echo-color-swatch-button{width:24px;height:24px;border-radius:var(--radius-full);border:2px solid transparent;cursor:pointer;padding:0;transition:transform var(--duration-base) var(--ease-default)}.echo-color-swatch-button:hover{transform:scale(1.1)}.echo-color-swatch-button[data-selected=true]{border-color:var(--primary-color)}.echo-drawing-tooltip{display:flex;text-wrap:nowrap;position:fixed;background:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-combined-sm);font-size:var(--font-sm);color:var(--primary-color);z-index:var(--z-drawing-tooltip);pointer-events:none;animation:slideDownFade var(--duration-slow) var(--ease-default);border:1px solid var(--primary-color);background:var(--primary-color-lightest)}.echo-shape-actions{position:fixed;z-index:var(--z-shape-actions);display:flex;gap:var(--spacing-xs);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-combined-md);transform:translate(-50%,-100%) translateY(calc(-1 * var(--spacing-sm)));animation:popInSlideDown var(--duration-fast) var(--ease-default);cursor:default;pointer-events:auto;padding:var(--spacing-xs);border:1px solid var(--primary-color)}.echo-shape-actions-divider{width:1px;margin:var(--spacing-sm) 0;background:var(--border-color);pointer-events:none}.echo-shape-actions[hidden]{display:none}.echo-notification{position:absolute;z-index:var(--z-notification);bottom:70px;right:0;width:300px;padding:var(--spacing-2xl);border-radius:var(--radius-lg);font-size:var(--font-md);font-weight:500;box-shadow:var(--shadow-combined-md);background:#fff;border:1px solid var(--primary-color);transform-origin:bottom right;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);opacity:1;pointer-events:auto;transition:all var(--duration-base) var(--ease-smooth)}.echo-notification:not([data-empty=true]){animation:popInSlideUp var(--duration-slower) var(--ease-spring)}.echo-notification[data-empty=true]{opacity:0;pointer-events:none;transform:translateY(var(--spacing-sm)) scale(.95);transition:none}.echo-notification-hide{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);width:24px;height:24px;padding:var(--spacing-xs);border:none;background:transparent;color:var(--text-light);opacity:.7;cursor:pointer;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;transition:all var(--duration-base) var(--ease-bounce);flex-shrink:0}.echo-notification-hide:hover{opacity:1;background:var(--primary-color-lightest);transform:scale(1.1);color:var(--primary-color)}.echo-notification-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transform:scale(1.5);background:var(--primary-color-lightest);padding:var(--spacing-md);border-radius:var(--radius-full);margin-top:var(--spacing-md);transition:all var(--duration-base) var(--ease-bounce)}.echo-notification[data-type=success]{border-color:var(--success-color)}.echo-notification[data-type=success] .echo-notification-icon{color:var(--success-color)}.echo-notification[data-type=error]{border-color:var(--error-color)}.echo-notification[data-type=error] .echo-notification-icon{color:var(--error-color);background:color-mix(in srgb,var(--error-color) 10%,white)}.echo-notification-content{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 12px}.echo-notification-title{font-size:1rem;font-weight:600;color:#1a1a1a}.echo-notification-message{font-size:.875rem;font-weight:400;color:#666;line-height:1.4;max-width:100%}@media (max-width: 768px){.echo-notification{right:0;width:calc(100vw - 40px);height:auto;min-height:180px;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:.9375rem;padding:20px;gap:16px;bottom:calc(100% + 20px)}.echo-notification-icon{transform:scale(1.3);padding:10px;margin-top:8px}.echo-notification-title{font-size:.9375rem}.echo-notification-message{font-size:.8125rem}}.echo-welcome-message{display:flex;align-items:center;gap:var(--spacing-xs);position:fixed;z-index:var(--z-welcome-message);background:var(--primary-color-lightest);border:1px solid var(--primary-color);color:var(--primary-color);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-lg);font-size:var(--font-sm);font-weight:500;box-shadow:var(--shadow-combined-md);opacity:1;transform:translateY(0) scale(1);transition:all var(--duration-slow) var(--ease-smooth);animation:bounceIn var(--duration-slowest) var(--ease-bounce);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer;text-align:left}.echo-welcome-message:hover{transform:translateY(-2px) scale(1.02);background:var(--primary-color-lightest);box-shadow:var(--shadow-combined-lg)}.echo-welcome-message:active{transform:translateY(0) scale(.98)}.echo-welcome-message-close{width:20px;height:20px;padding:2px;margin-left:var(--spacing-xs);border:none;background:transparent;opacity:.7;cursor:pointer;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;transition:all var(--duration-base) var(--ease-default)}.echo-welcome-message-close:hover{opacity:1;background:var(--shadow-color-light);transform:scale(1.1)}.echo-welcome-message-close:active{transform:scale(.95)}.echo-welcome-message:after{content:"";position:absolute;bottom:-4px;right:17px;width:16px;height:16px;background:inherit;transform:rotate(45deg);border-radius:var(--radius-xs);border:1px solid var(--primary-color);z-index:-2}.echo-welcome-message:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary-color-lightest);z-index:-1;border-radius:var(--radius-lg)}.echo-welcome-message-pulsar{content:"";display:inline-block;width:6px;height:6px;background:var(--primary-color);border-radius:50%;margin-right:8px;animation:pulse 1.5s var(--ease-in-out) infinite}.echo-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:all var(--duration-base) var(--ease-default);line-height:1}.echo-button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.echo-button-primary{background:var(--primary-color);color:#fff}.echo-button-primary:hover{background:var(--hover-color);transform:translateY(-1px)}.echo-button-primary:active{transform:translateY(0)}.echo-button-secondary{background:transparent;color:var(--text-light)}.echo-button-secondary:hover{background-color:var(--primary-color-lightest);color:var(--primary-color)}.echo-button-xs{padding:var(--spacing-xs);font-size:var(--font-xs)}.echo-button-sm{padding:var(--spacing-xs);font-size:var(--font-sm)}.echo-button-md{padding:var(--spacing-md) var(--spacing-2xl);font-size:var(--font-base)}.echo-button-lg{padding:var(--spacing-md) var(--spacing-3xl);font-size:var(--font-md)}@keyframes slideUpFade{0%{opacity:0;transform:translateY(var(--spacing-sm))}to{opacity:1;transform:translateY(0)}}@keyframes slideDownFade{0%{opacity:0;transform:translateY(calc(-1 * var(--spacing-sm)))}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popInSlideUp{0%{opacity:0;transform:translateY(var(--spacing-sm)) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes popInSlideDown{0%{opacity:0;transform:translate(-50%,-100%) translateY(calc(-1 * var(--spacing-xs))) scale(.95)}to{opacity:1;transform:translate(-50%,-100%) translateY(calc(-1 * var(--spacing-sm))) scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:translateY(var(--spacing-xl)) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}to{transform:scale(1);opacity:1}}.echo-inputs{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.echo-input{display:flex;flex-direction:column;gap:.5rem}.echo-input-label{font-size:.875rem;font-weight:500;color:var(--text-color)}.echo-input-required{color:#dc2626;margin-left:.25rem}.echo-input-field{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#fff;color:var(--text-medium);font-size:var(--font-sm);transition:all var(--duration-base) var(--ease-default)}.echo-input-field:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 15%,transparent)}.echo-input-field::placeholder{color:var(--text-lighter)}select.echo-input-field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;padding-right:2.5rem;cursor:pointer}.echo-input-options{display:flex;flex-direction:column;gap:var(--spacing-sm);border:none;margin:0;padding:0}.echo-input-option{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:all var(--duration-base) var(--ease-default)}.echo-input-option:hover{background:var(--primary-color-lightest)}.echo-input-option input[type=radio],.echo-input-option input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:18px;height:18px;border:1px solid var(--border-color);background-color:#fff;display:grid;place-content:center;cursor:pointer;transition:all var(--duration-base) var(--ease-default)}.echo-input-option input[type=radio]{border-radius:50%}.echo-input-option input[type=radio]:before{content:"";width:10px;height:10px;border-radius:50%;transform:scale(0);transition:transform var(--duration-base) var(--ease-default);background-color:var(--primary-color)}.echo-input-option input[type=radio]:checked:before{transform:scale(1)}.echo-input-option input[type=checkbox]{border-radius:var(--radius-sm)}.echo-input-option input[type=checkbox]:before{content:"";width:12px;height:12px;transform:scale(0);transition:all var(--duration-base) var(--ease-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center}.echo-input-option input[type=checkbox]:checked{background-color:var(--primary-color-lighter);border-color:var(--primary-color-lighter)}.echo-input-option input[type=checkbox]:checked:before{transform:scale(1)}.echo-input-option input[type=radio]:hover,.echo-input-option input[type=checkbox]:hover{border-color:var(--primary-color-lighter)}.echo-input-option input[type=radio]:focus,.echo-input-option input[type=checkbox]:focus{outline:none;border-color:var(--primary-color-lighter);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 15%,transparent)}.echo-input-option input[type=radio]:checked,.echo-input-option input[type=checkbox]:checked{border-color:var(--primary-color-lighter)}.echo-input-option span{font-size:var(--font-sm);color:var(--text-medium);-webkit-user-select:none;user-select:none}.echo-select{position:relative;width:100%}.echo-select-trigger{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#fff;color:var(--text-medium);font-size:var(--font-sm);transition:all var(--duration-base) var(--ease-default);cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:.5rem;outline:none}.echo-select-trigger[data-placeholder=true]{color:var(--text-lighter)}.echo-select-trigger:hover{border-color:var(--border-color-medium)}.echo-select-trigger:focus,.echo-select-trigger[data-open=true]{border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 15%,transparent)}.echo-select-arrow{flex-shrink:0;transition:transform var(--duration-base) var(--ease-default)}.echo-select-trigger[data-open=true] .echo-select-arrow{transform:rotate(180deg)}.echo-select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--border-color-medium);border-radius:var(--radius-md);box-shadow:var(--shadow-black-lightened-md);max-height:15rem;overflow-y:auto;z-index:10;animation:slideDownFade var(--duration-base) var(--ease-default);padding:var(--spacing-xs)}.echo-select-option{width:100%;padding:.5rem .75rem;background:none;border:none;text-align:left;color:var(--text-medium);font-size:var(--font-sm);cursor:pointer;transition:all var(--duration-base) var(--ease-default);outline:none;border-radius:var(--radius-sm)}.echo-select-option:hover{background:var(--primary-color-lightest)}.echo-select-option:focus{background:var(--primary-color-lightest);box-shadow:0 0 0 1px var(--primary-color) inset}.echo-select-option[data-selected=true]{background:var(--primary-color-lightest);color:var(--primary-color);font-weight:500}select.echo-input-field{display:none}.visually-hidden{position:absolute;left:50%;bottom:0;transform:translate(-50%);width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}`;
-var gn = /* @__PURE__ */ w('<div class=echo-color-selector role=group aria-label="Color Selection"><button class=echo-drawing-toolbar-button title="Current Color"></button><div class=echo-color-swatch-wrapper role=listbox aria-label="Available Colors"><div class=echo-color-swatch>'), fn = /* @__PURE__ */ w("<button class=echo-color-swatch-button role=option>");
+}, hn = `*,*:before,*:after{box-sizing:border-box}.echo-root{position:absolute;top:0;left:0;z-index:var(--z-root);isolation:isolate;pointer-events:none;--z-root: 999999;--z-launcher: 2;--z-overlay: 1;--z-drawing-toolbar: 3;--z-drawing-tooltip: 3;--z-shape-actions: 3;--z-notification: 2;--z-welcome-message: 2;--z-widget-button: 2;--z-feedback-form: 4;--primary-color: #000;--primary-text-color: #fff;--error-color: #f44336;--success-color: var(--primary-color);--text-dark: #1a1a1a;--text-medium: #333;--text-light: #666;--text-lighter: #999;--border-color: rgba(0, 0, 0, .1);--border-color-light: rgba(0, 0, 0, .05);--border-color-medium: rgba(0, 0, 0, .08);--primary-color-lighter: color-mix(in srgb, var(--primary-color) 100%, white 40%);--primary-color-lightest: color-mix(in srgb, var(--primary-color) 7%, white 100%);--hover-color: color-mix(in srgb, var(--primary-color) 80%, #fff);--shadow-color-dark: rgba(0, 0, 0, .6);--shadow-color-light: rgba(255, 255, 255, .1);--shadow-color-medium: rgba(0, 0, 0, .2);--shadow-sm: 0 1px 3px;--shadow-md: 0 4px 10px;--shadow-lg: 0 10px 20px;--shadow-black-sm: var(--shadow-sm) rgba(0, 0, 0, .5);--shadow-black-md: var(--shadow-md) rgba(0, 0, 0, .5);--shadow-black-lg: var(--shadow-lg) rgba(0, 0, 0, .5);--shadow-black-lightened-sm: var(--shadow-sm) var(--shadow-color-medium);--shadow-black-lightened-md: var(--shadow-md) var(--shadow-color-medium);--shadow-black-lightened-lg: var(--shadow-lg) var(--shadow-color-medium);--shadow-primary-sm: var(--shadow-sm) color-mix(in srgb, var(--primary-color) 60%, transparent 80%);--shadow-primary-md: var(--shadow-md) color-mix(in srgb, var(--primary-color) 50%, transparent 80%);--shadow-primary-lg: var(--shadow-lg) color-mix(in srgb, var(--primary-color) 40%, transparent 80%);--shadow-primary-lighter-sm: var(--shadow-sm) color-mix(in srgb, var(--primary-color-lighter) 70%, transparent 80%);--shadow-primary-lighter-md: var(--shadow-md) color-mix(in srgb, var(--primary-color-lighter) 60%, transparent 80%);--shadow-primary-lighter-lg: var(--shadow-lg) color-mix(in srgb, var(--primary-color-lighter) 50%, transparent 80%);--shadow-primary-lightest-sm: var(--shadow-sm) color-mix(in srgb, var(--primary-color-lightest) 70%, transparent 80%);--shadow-primary-lightest-md: var(--shadow-md) color-mix(in srgb, var(--primary-color-lightest) 60%, transparent 80%);--shadow-primary-lightest-lg: var(--shadow-lg) color-mix(in srgb, var(--primary-color-lightest) 50%, transparent 80%);--shadow-combined-sm: var(--shadow-primary-sm), var(--shadow-black-lightened-sm);--shadow-combined-md: var(--shadow-primary-md), var(--shadow-black-lightened-md);--shadow-combined-lg: var(--shadow-primary-lg), var(--shadow-black-lightened-lg);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--font-xs: .8125rem;--font-sm: .875rem;--font-base: .9375rem;--font-md: 1rem;--font-lg: 1.125rem;--duration-fast: .1s;--duration-base: .2s;--duration-slow: .3s;--duration-slower: .4s;--duration-slowest: .6s;--ease-default: ease;--ease-in-out: ease-in-out;--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.16, 1, .3, 1)}.echo-stored-feedback{position:absolute;display:flex;flex-direction:column;bottom:calc(100% + var(--spacing-lg));right:0;width:320px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-black-lightened-lg);animation:slideUpFade var(--duration-base) var(--ease-smooth);z-index:calc(var(--z-widget-button) + 1);transform-origin:bottom right;transition:all var(--duration-base) var(--ease-smooth)}.echo-stored-feedback-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg)}.echo-stored-feedback-header h3{margin:0;font-size:var(--font-md);font-weight:600}.echo-stored-feedback-list{max-height:400px;overflow-y:auto;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.echo-stored-feedback-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color-light);transition:all var(--duration-base) var(--ease-smooth);background:#fff;position:relative}.echo-stored-feedback-item:hover{background:var(--primary-color-lightest)}.echo-stored-feedback-item-current{background:var(--primary-color-lightest);padding-left:calc(var(--spacing-lg) - 3px)}.echo-stored-feedback-item-current:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary-color);border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.echo-stored-feedback-item:last-child{border-bottom:none;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.echo-stored-feedback-item:last-child.echo-stored-feedback-item-current:before{border-bottom-left-radius:var(--radius-lg)}.echo-stored-feedback-content{flex:1;min-width:0;margin-right:var(--spacing-md)}.echo-stored-feedback-path{font-size:var(--font-sm);font-weight:500;color:var(--text-medium);margin-bottom:var(--spacing-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.echo-stored-feedback-preview{font-size:var(--font-xs);color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.echo-stored-feedback-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.echo-stored-feedback-link{color:var(--text-light)}.echo-stored-feedback-link:hover{color:var(--primary-color)}.echo-stored-feedback-delete{color:var(--text-light);font-size:var(--font-xs);padding:var(--spacing-xs) var(--spacing-md)}.echo-stored-feedback-delete:hover{color:var(--error-color);background:color-mix(in srgb,var(--error-color) 10%,transparent)}.echo-stored-feedback-empty{padding:var(--spacing-3xl) var(--spacing-lg);text-align:center;color:var(--text-light);font-size:var(--font-sm);border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.echo-launcher{position:fixed;z-index:var(--z-launcher);bottom:var(--spacing-xl);right:var(--spacing-xl);pointer-events:none}.echo-overlay{position:absolute;top:0;left:0;margin:0;padding:0;max-width:none;max-height:none;border:3px solid var(--primary-color);background:transparent}.echo-overlay::backdrop{background:transparent}[data-hidden=true],[data-hidden=false]{transition:opacity var(--duration-slow) var(--ease-in-out),visibility var(--duration-slow) var(--ease-in-out)}[data-hidden=true]{opacity:0;visibility:hidden;pointer-events:none}[data-hidden=false]{opacity:1;visibility:visible;pointer-events:auto;user-select:none;-webkit-user-select:none}.echo-launcher-button{z-index:var(--z-widget-button);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;background:radial-gradient(circle at 40% 40%,var(--primary-color) 0%,var(--primary-color-lighter) 65%,var(--primary-color-lighter) 100%);border:none;border-radius:var(--radius-full);width:48px;height:48px;box-shadow:var(--shadow-black-md);transition:all var(--duration-slow) var(--ease-default),transform var(--duration-slower) var(--ease-smooth),opacity var(--duration-slow) var(--ease-in-out);will-change:transform}.echo-launcher-button:hover{box-shadow:var(--shadow-black-lg);transform:translateY(-2px)}.echo-launcher-button:active{transform:scale(.95)}.echo-launcher-button-count{position:absolute;top:calc(-1 * var(--spacing-xs));right:calc(-1 * var(--spacing-xs));background:var(--primary-color-lightest);color:var(--primary-color-lighter);border-radius:var(--radius-md);min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-black-sm);padding:0 var(--spacing-xs);font-weight:600;pointer-events:auto;cursor:pointer;transform-origin:center center;animation:popIn var(--duration-slow) var(--ease-bounce);transition:transform var(--duration-base) var(--ease-default)}.echo-launcher-button-count:hover{transform:scale(1.1)}.echo-feedback{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);width:min(calc(100vw - var(--spacing-2xl)),24rem);z-index:var(--z-feedback-form);box-shadow:var(--shadow-black-lightened-lg);display:flex;flex-direction:column;gap:var(--spacing-lg);background:#fff;border-radius:var(--radius-lg);will-change:transform;padding:var(--spacing-lg)}.echo-feedback[data-minimized=true]{transition:transform .4s var(--ease-default),box-shadow .4s var(--ease-default);transform:translate(calc(100% - 48px),calc(100% - 48px));box-shadow:0 8px 16px #0003}.echo-feedback[data-minimized=true]:hover{cursor:pointer;transform:translate(calc(100% - 48px),calc(100% - 48px)) rotate(-2deg) scale(1.1);box-shadow:0 12px 24px #00000040}.echo-feedback[data-minimized=false]{transition:transform .4s var(--ease-smooth),box-shadow .4s var(--ease-smooth);transform:translate(0)}.echo-feedback[style*=transition]{pointer-events:none}.echo-feedback-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}.echo-feedback-header{display:flex;justify-content:space-between;align-items:center}.echo-feedback-title{font-size:var(--font-lg);font-weight:600;color:var(--text-dark);margin:0}.echo-feedback-header-actions{display:flex;gap:var(--spacing-xs);margin:calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) 0}.echo-feedback-form-textarea{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#fff;color:var(--text-medium);font-size:var(--font-sm);transition:all var(--duration-base) var(--ease-default);min-height:120px;resize:vertical;font-family:inherit}.echo-feedback-form-textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 15%,transparent)}.echo-feedback-form-textarea::placeholder{color:var(--text-lighter)}[data-hide-when-drawing=true]{opacity:1;visibility:visible;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}[data-drawing=true] [data-hide-when-drawing=true]{opacity:0;visibility:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}.echo-drawing-layer,.echo-drawing-layer-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;user-select:none;-webkit-user-select:none}.echo-drawing-layer-container svg{pointer-events:auto}.echo-drawing-toolbar{position:fixed;top:var(--spacing-xl);left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-sm);z-index:var(--z-drawing-toolbar);opacity:1;transition:opacity var(--duration-base) var(--ease-default)}.echo-drawing-toolbar-button{width:50px;height:50px;border-radius:var(--radius-full);border:2px solid #ddd;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all var(--duration-base) var(--ease-default);box-shadow:var(--shadow-black-sm);position:relative}.echo-drawing-toolbar-icon{width:25px;height:25px;color:var(--primary-color);transition:color var(--duration-base) var(--ease-default)}.echo-drawing-toolbar-button:hover{transform:scale(1.05);border-color:var(--hover-color)}.echo-drawing-toolbar-button[data-selected=true]{background:var(--primary-color-lightest);border-color:var(--primary-color)}.echo-color-selector{position:relative}.echo-color-selector:hover .echo-drawing-toolbar-button{border-top-right-radius:0;border-bottom-right-radius:0;transform:scale(1.05);border-right-color:transparent;background:rgba(var(--primary-color),.9);border-color:var(--hover-color)}.echo-color-swatch-wrapper{position:absolute;left:calc(100% - 2px);top:50%;transform:translateY(-50%);height:52.5px;padding-right:var(--spacing-sm);display:none}.echo-color-selector:hover .echo-color-swatch-wrapper{display:block}.echo-color-swatch{height:100%;background:#fff;border-radius:var(--radius-md);border-top-left-radius:0;border-bottom-left-radius:0;padding:var(--spacing-sm);padding-left:var(--spacing-md);box-shadow:var(--shadow-black-sm);display:flex;align-items:center;gap:var(--spacing-sm);border:2px solid #ddd;border-left:none}.echo-color-selector:hover .echo-color-swatch{border-color:var(--hover-color)}.echo-color-swatch-button{width:24px;height:24px;border-radius:var(--radius-full);border:2px solid transparent;cursor:pointer;padding:0;transition:transform var(--duration-base) var(--ease-default)}.echo-color-swatch-button:hover{transform:scale(1.1)}.echo-color-swatch-button[data-selected=true]{border-color:var(--primary-color)}.echo-drawing-tooltip{display:flex;text-wrap:nowrap;position:fixed;background:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-combined-sm);font-size:var(--font-sm);color:var(--primary-color);z-index:var(--z-drawing-tooltip);pointer-events:none;animation:slideDownFade var(--duration-slow) var(--ease-default);border:1px solid var(--primary-color);background:var(--primary-color-lightest)}.echo-shape-actions{position:fixed;z-index:var(--z-shape-actions);display:flex;gap:var(--spacing-xs);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-combined-md);transform:translate(-50%,-100%) translateY(calc(-1 * var(--spacing-sm)));animation:popInSlideDown var(--duration-fast) var(--ease-default);cursor:default;pointer-events:auto;padding:var(--spacing-xs);border:1px solid var(--primary-color)}.echo-shape-actions-divider{width:1px;margin:var(--spacing-sm) 0;background:var(--border-color);pointer-events:none}.echo-shape-actions[hidden]{display:none}.echo-notification{position:absolute;z-index:var(--z-notification);bottom:70px;right:0;width:300px;padding:var(--spacing-2xl);border-radius:var(--radius-lg);font-size:var(--font-md);font-weight:500;box-shadow:var(--shadow-combined-md);background:#fff;border:1px solid var(--primary-color);transform-origin:bottom right;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);opacity:1;pointer-events:auto;transition:all var(--duration-base) var(--ease-smooth)}.echo-notification:not([data-empty=true]){animation:popInSlideUp var(--duration-slower) var(--ease-spring)}.echo-notification[data-empty=true]{opacity:0;pointer-events:none;transform:translateY(var(--spacing-sm)) scale(.95);transition:none}.echo-notification-hide{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);width:24px;height:24px;padding:var(--spacing-xs);border:none;background:transparent;color:var(--text-light);opacity:.7;cursor:pointer;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;transition:all var(--duration-base) var(--ease-bounce);flex-shrink:0}.echo-notification-hide:hover{opacity:1;background:var(--primary-color-lightest);transform:scale(1.1);color:var(--primary-color)}.echo-notification-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transform:scale(1.5);background:var(--primary-color-lightest);padding:var(--spacing-md);border-radius:var(--radius-full);margin-top:var(--spacing-md);transition:all var(--duration-base) var(--ease-bounce)}.echo-notification[data-type=success]{border-color:var(--success-color)}.echo-notification[data-type=success] .echo-notification-icon{color:var(--success-color)}.echo-notification[data-type=error]{border-color:var(--error-color)}.echo-notification[data-type=error] .echo-notification-icon{color:var(--error-color);background:color-mix(in srgb,var(--error-color) 10%,white)}.echo-notification-content{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 12px}.echo-notification-title{font-size:1rem;font-weight:600;color:#1a1a1a}.echo-notification-message{font-size:.875rem;font-weight:400;color:#666;line-height:1.4;max-width:100%}@media (max-width: 768px){.echo-notification{right:0;width:calc(100vw - 40px);height:auto;min-height:180px;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:.9375rem;padding:20px;gap:16px;bottom:calc(100% + 20px)}.echo-notification-icon{transform:scale(1.3);padding:10px;margin-top:8px}.echo-notification-title{font-size:.9375rem}.echo-notification-message{font-size:.8125rem}}.echo-welcome-message{display:flex;align-items:center;gap:var(--spacing-xs);position:fixed;z-index:var(--z-welcome-message);background:var(--primary-color-lightest);border:1px solid var(--primary-color);color:var(--primary-color);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-lg);font-size:var(--font-sm);font-weight:500;box-shadow:var(--shadow-combined-md);opacity:1;transform:translateY(0) scale(1);transition:all var(--duration-slow) var(--ease-smooth);animation:bounceIn var(--duration-slowest) var(--ease-bounce);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer;text-align:left}.echo-welcome-message:hover{transform:translateY(-2px) scale(1.02);background:var(--primary-color-lightest);box-shadow:var(--shadow-combined-lg)}.echo-welcome-message:active{transform:translateY(0) scale(.98)}.echo-welcome-message-close{width:20px;height:20px;padding:2px;margin-left:var(--spacing-xs);border:none;background:transparent;opacity:.7;cursor:pointer;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;transition:all var(--duration-base) var(--ease-default)}.echo-welcome-message-close:hover{opacity:1;background:var(--shadow-color-light);transform:scale(1.1)}.echo-welcome-message-close:active{transform:scale(.95)}.echo-welcome-message:after{content:"";position:absolute;bottom:-4px;right:17px;width:16px;height:16px;background:inherit;transform:rotate(45deg);border-radius:var(--radius-xs);border:1px solid var(--primary-color);z-index:-2}.echo-welcome-message:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary-color-lightest);z-index:-1;border-radius:var(--radius-lg)}.echo-welcome-message-pulsar{content:"";display:inline-block;width:6px;height:6px;background:var(--primary-color);border-radius:50%;margin-right:8px;animation:pulse 1.5s var(--ease-in-out) infinite}.echo-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:all var(--duration-base) var(--ease-default);line-height:1}.echo-button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.echo-button-primary{background:var(--primary-color);color:#fff}.echo-button-primary:hover{background:var(--hover-color);transform:translateY(-1px)}.echo-button-primary:active{transform:translateY(0)}.echo-button-secondary{background:transparent;color:var(--text-light)}.echo-button-secondary:hover{background-color:var(--primary-color-lightest);color:var(--primary-color)}.echo-button-xs{padding:var(--spacing-xs);font-size:var(--font-xs)}.echo-button-sm{padding:var(--spacing-xs);font-size:var(--font-sm)}.echo-button-md{padding:var(--spacing-md) var(--spacing-2xl);font-size:var(--font-base)}.echo-button-lg{padding:var(--spacing-md) var(--spacing-3xl);font-size:var(--font-md)}@keyframes slideUpFade{0%{opacity:0;transform:translateY(var(--spacing-sm))}to{opacity:1;transform:translateY(0)}}@keyframes slideDownFade{0%{opacity:0;transform:translateY(calc(-1 * var(--spacing-sm)))}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popInSlideUp{0%{opacity:0;transform:translateY(var(--spacing-sm)) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes popInSlideDown{0%{opacity:0;transform:translate(-50%,-100%) translateY(calc(-1 * var(--spacing-xs))) scale(.95)}to{opacity:1;transform:translate(-50%,-100%) translateY(calc(-1 * var(--spacing-sm))) scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:translateY(var(--spacing-xl)) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}to{transform:scale(1);opacity:1}}.echo-inputs{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.echo-input{display:flex;flex-direction:column;gap:.5rem}.echo-input-label{font-size:.875rem;font-weight:500;color:var(--text-color)}.echo-input-required{color:#dc2626;margin-left:.25rem}.echo-input-field{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#fff;color:var(--text-medium);font-size:var(--font-sm);transition:all var(--duration-base) var(--ease-default)}.echo-input-field:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 15%,transparent)}.echo-input-field::placeholder{color:var(--text-lighter)}select.echo-input-field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;padding-right:2.5rem;cursor:pointer}.echo-input-options{display:flex;flex-direction:column;gap:var(--spacing-sm);border:none;margin:0;padding:0}.echo-input-option{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:all var(--duration-base) var(--ease-default)}.echo-input-option:hover{background:var(--primary-color-lightest)}.echo-input-option input[type=radio],.echo-input-option input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:18px;height:18px;border:1px solid var(--border-color);background-color:#fff;display:grid;place-content:center;cursor:pointer;transition:all var(--duration-base) var(--ease-default)}.echo-input-option input[type=radio]{border-radius:50%}.echo-input-option input[type=radio]:before{content:"";width:10px;height:10px;border-radius:50%;transform:scale(0);transition:transform var(--duration-base) var(--ease-default);background-color:var(--primary-color)}.echo-input-option input[type=radio]:checked:before{transform:scale(1)}.echo-input-option input[type=checkbox]{border-radius:var(--radius-sm)}.echo-input-option input[type=checkbox]:before{content:"";width:12px;height:12px;transform:scale(0);transition:all var(--duration-base) var(--ease-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center}.echo-input-option input[type=checkbox]:checked{background-color:var(--primary-color-lighter);border-color:var(--primary-color-lighter)}.echo-input-option input[type=checkbox]:checked:before{transform:scale(1)}.echo-input-option input[type=radio]:hover,.echo-input-option input[type=checkbox]:hover{border-color:var(--primary-color-lighter)}.echo-input-option input[type=radio]:focus,.echo-input-option input[type=checkbox]:focus{outline:none;border-color:var(--primary-color-lighter);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 15%,transparent)}.echo-input-option input[type=radio]:checked,.echo-input-option input[type=checkbox]:checked{border-color:var(--primary-color-lighter)}.echo-input-option span{font-size:var(--font-sm);color:var(--text-medium);-webkit-user-select:none;user-select:none}.echo-select{position:relative;width:100%}.echo-select-trigger{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#fff;color:var(--text-medium);font-size:var(--font-sm);transition:all var(--duration-base) var(--ease-default);cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:.5rem;outline:none}.echo-select-trigger[data-placeholder=true]{color:var(--text-lighter)}.echo-select-trigger:hover{border-color:var(--border-color-medium)}.echo-select-trigger:focus,.echo-select-trigger[data-open=true]{border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 15%,transparent)}.echo-select-arrow{flex-shrink:0;transition:transform var(--duration-base) var(--ease-default)}.echo-select-trigger[data-open=true] .echo-select-arrow{transform:rotate(180deg)}.echo-select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--border-color-medium);border-radius:var(--radius-md);box-shadow:var(--shadow-black-lightened-md);max-height:15rem;overflow-y:auto;z-index:10;animation:slideDownFade var(--duration-base) var(--ease-default);padding:var(--spacing-xs)}.echo-select-option{width:100%;padding:.5rem .75rem;background:none;border:none;text-align:left;color:var(--text-medium);font-size:var(--font-sm);cursor:pointer;transition:all var(--duration-base) var(--ease-default);outline:none;border-radius:var(--radius-sm)}.echo-select-option:hover{background:var(--primary-color-lightest)}.echo-select-option:focus{background:var(--primary-color-lightest);box-shadow:0 0 0 1px var(--primary-color) inset}.echo-select-option[data-selected=true]{background:var(--primary-color-lightest);color:var(--primary-color);font-weight:500}select.echo-input-field{display:none}.visually-hidden{position:absolute;left:50%;bottom:0;transform:translate(-50%);width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}`;
+var fn = /* @__PURE__ */ w('<div class=echo-color-selector role=group aria-label="Color Selection"><button class=echo-drawing-toolbar-button title="Current Color"></button><div class=echo-color-swatch-wrapper role=listbox aria-label="Available Colors"><div class=echo-color-swatch>'), gn = /* @__PURE__ */ w("<button class=echo-color-swatch-button role=option>");
 const mn = [
   "#ff6b6b",
   // Soft Red
@@ -1251,15 +1257,15 @@ const mn = [
   "#ffa94d": "Soft Orange",
   "#e599f7": "Soft Pink"
 }, Se = (e) => vn[e] || "Primary", bn = () => {
-  const e = E();
+  const e = $();
   return (() => {
-    var n = gn(), t = n.firstChild, r = t.nextSibling, a = r.firstChild;
-    return u(t, "aria-expanded", !1), v(a, g(_, {
+    var n = fn(), t = n.firstChild, r = t.nextSibling, a = r.firstChild;
+    return u(t, "aria-expanded", !1), v(a, f(_, {
       get each() {
         return [e.widget.state.primaryColor, ...mn];
       },
       children: (o) => (() => {
-        var i = fn();
+        var i = gn();
         return i.$$click = () => e.drawing.setState({
           selectedColor: o
         }), o != null ? i.style.setProperty("background-color", o) : i.style.removeProperty("background-color"), b((l) => {
@@ -1413,10 +1419,10 @@ const Dn = {
   rectangle: Sn,
   path: $n
 }, Fn = () => {
-  const e = E(), n = Object.values(B);
+  const e = $(), n = Object.values(B);
   return (() => {
     var t = Mn(), r = t.firstChild;
-    return v(t, g(_, {
+    return v(t, f(_, {
       each: n,
       children: (a) => {
         const o = Dn[a.id];
@@ -1424,7 +1430,7 @@ const Dn = {
           var i = An();
           return i.$$click = () => e.drawing.setState({
             selectedTool: a.id
-          }), v(i, g(o, {
+          }), v(i, f(o, {
             class: "echo-drawing-toolbar-icon",
             "aria-hidden": "true"
           })), b((l) => {
@@ -1438,9 +1444,9 @@ const Dn = {
           }), i;
         })();
       }
-    }), r), v(t, g(bn, {}), r), r.$$click = () => e.drawing.setState({
+    }), r), v(t, f(bn, {}), r), r.$$click = () => e.drawing.setState({
       shapes: []
-    }, !0), v(r, g(it, {
+    }, !0), v(r, f(it, {
       class: "echo-drawing-toolbar-icon",
       "aria-hidden": "true"
     })), t;
@@ -1449,8 +1455,8 @@ const Dn = {
 T(["click"]);
 var Ln = /* @__PURE__ */ w("<div class=echo-drawing-tooltip data-hide-when-drawing=true>");
 const jn = () => {
-  const e = E(), n = S(() => e.drawing.state.showTooltip && e.drawing.state.mousePosition.y && e.drawing.state.mousePosition.x && e.widget.state.isOpen && !Rt());
-  return g(D, {
+  const e = $(), n = k(() => e.drawing.state.showTooltip && e.drawing.state.mousePosition.y && e.drawing.state.mousePosition.x && e.widget.state.isOpen && !Rt());
+  return f(D, {
     get when() {
       return n();
     },
@@ -1496,7 +1502,7 @@ const Vn = (e) => (() => {
 })();
 var Bn = /* @__PURE__ */ w("<div class=echo-stored-feedback-empty>No unsubmitted feedback"), Wn = /* @__PURE__ */ w("<div class=echo-stored-feedback><div class=echo-stored-feedback-header><h3>Unsubmitted Feedback</h3></div><div class=echo-stored-feedback-list>"), _n = /* @__PURE__ */ w("<div><div class=echo-stored-feedback-content><div class=echo-stored-feedback-path></div><div class=echo-stored-feedback-preview></div></div><div class=echo-stored-feedback-actions>");
 const Hn = () => {
-  const e = E();
+  const e = $();
   let n;
   const [t, r] = A(xe()), [a, o] = A(window.location.pathname), i = (m) => {
     m.key === "Escape" && e.widget.state.isStoredFeedbackOpen && e.widget.setState({
@@ -1538,8 +1544,8 @@ const Hn = () => {
     callback: l
   });
   const d = (m, y) => {
-    const x = y ? `${m}${y}` : m;
-    window.location.href = x, e.widget.setState({
+    const E = y ? `${m}${y}` : m;
+    window.location.href = E, e.widget.setState({
       isStoredFeedbackOpen: !1
     });
   }, h = (m) => {
@@ -1548,65 +1554,65 @@ const Hn = () => {
     r(y), e.widget.setState({
       pagesCount: y.length
     });
-  }, f = (m) => {
+  }, g = (m) => {
     if (m === "/") return "/";
     const y = m.split("/");
     return y.length <= 4 ? m : `/${y[1]}/.../${y[y.length - 1]}`;
   };
-  return g(D, {
+  return f(D, {
     get when() {
       return e.widget.state.isStoredFeedbackOpen;
     },
     get children() {
       var m = Wn(), y = m.firstChild;
       y.firstChild;
-      var x = y.nextSibling, C = n;
-      return typeof C == "function" ? V(C, m) : n = m, v(y, g(W, {
+      var E = y.nextSibling, S = n;
+      return typeof S == "function" ? V(S, m) : n = m, v(y, f(W, {
         variant: "secondary",
         size: "sm",
         onClick: () => e.widget.setState({
           isStoredFeedbackOpen: !1
         }),
         get children() {
-          return g(pe, {
+          return f(pe, {
             size: 20
           });
         }
-      }), null), v(x, g(_, {
+      }), null), v(E, f(_, {
         get each() {
           return t();
         },
-        children: ($) => {
-          const p = S(() => $.path === a());
+        children: (C) => {
+          const p = k(() => C.path === a());
           return (() => {
-            var P = _n(), z = P.firstChild, k = z.firstChild, H = k.nextSibling, q = z.nextSibling;
-            return v(k, () => f($.path)), v(H, () => $.state.feedback.message), v(q, (() => {
-              var I = S(() => !p());
-              return () => I() && g(W, {
+            var P = _n(), z = P.firstChild, x = z.firstChild, H = x.nextSibling, q = z.nextSibling;
+            return v(x, () => g(C.path)), v(H, () => C.state.feedback.message), v(q, (() => {
+              var I = k(() => !p());
+              return () => I() && f(W, {
                 class: "echo-stored-feedback-link",
                 variant: "secondary",
                 size: "sm",
-                onClick: () => d($.path, $.state.latestQuery),
+                onClick: () => d(C.path, C.state.latestQuery),
                 get children() {
-                  return g(Vn, {});
+                  return f(Vn, {});
                 }
               });
-            })(), null), v(q, g(W, {
+            })(), null), v(q, f(W, {
               class: "echo-stored-feedback-delete",
               variant: "secondary",
               size: "sm",
-              onClick: () => h($.path),
+              onClick: () => h(C.path),
               children: "Delete"
             }), null), b((I) => {
-              var Me = `echo-stored-feedback-item ${p() ? "echo-stored-feedback-item-current" : ""}`, Ae = $.path;
-              return Me !== I.e && Re(P, I.e = Me), Ae !== I.t && u(k, "title", I.t = Ae), I;
+              var Me = `echo-stored-feedback-item ${p() ? "echo-stored-feedback-item-current" : ""}`, Ae = C.path;
+              return Me !== I.e && Re(P, I.e = Me), Ae !== I.t && u(x, "title", I.t = Ae), I;
             }, {
               e: void 0,
               t: void 0
             }), P;
           })();
         }
-      }), null), v(x, g(D, {
+      }), null), v(E, f(D, {
         get when() {
           return t().length === 0;
         },
@@ -1619,7 +1625,7 @@ const Hn = () => {
 };
 var Un = /* @__PURE__ */ w('<button class=echo-launcher-button aria-label="Open feedback form"role=button>'), Yn = /* @__PURE__ */ w("<span class=echo-launcher-button-count role=button tabindex=0>");
 const Rn = () => {
-  const e = E(), [n, t] = A(!1);
+  const e = $(), [n, t] = A(!1);
   let r;
   const a = () => {
     r && window.clearTimeout(r), r = window.setTimeout(() => {
@@ -1635,7 +1641,7 @@ const Rn = () => {
       isOpen: !e.widget.state.isOpen
     }), e.widget.setState({
       welcomeMessageIsClosing: !0
-    }), ae("welcome_message_shown", !0);
+    }), ie("welcome_message_shown", !0);
   };
   Y(() => {
     e.widget.state.isOpen || (t(!1), a()), e.widget.state.isStoredFeedbackOpen && t(!1);
@@ -1647,30 +1653,30 @@ const Rn = () => {
   };
   return [(() => {
     var c = Un();
-    return c.addEventListener("pointerleave", i), c.addEventListener("pointerenter", o), c.$$click = l, v(c, g(xn, {
+    return c.addEventListener("pointerleave", i), c.addEventListener("pointerenter", o), c.$$click = l, v(c, f(xn, {
       stroke: "white",
       fill: "#ffffff",
       "aria-hidden": "true"
     }), null), v(c, (() => {
-      var d = S(() => e.widget.state.pagesCount > 0);
+      var d = k(() => e.widget.state.pagesCount > 0);
       return () => d() && (() => {
         var h = Yn();
         return h.$$click = s, v(h, () => e.widget.state.pagesCount), b(() => u(h, "aria-label", `View ${e.widget.state.pagesCount} stored feedback items`)), h;
       })();
     })(), null), b((d) => {
-      var h = e.widget.state.isOpen, f = n() ? "45px" : "0", m = e.widget.state.isOpen;
-      return h !== d.e && u(c, "data-hidden", d.e = h), f !== d.t && ((d.t = f) != null ? c.style.setProperty("left", f) : c.style.removeProperty("left")), m !== d.a && u(c, "aria-expanded", d.a = m), d;
+      var h = e.widget.state.isOpen, g = `translateX(${n() ? "45px" : "0"})`, m = e.widget.state.isOpen;
+      return h !== d.e && u(c, "data-hidden", d.e = h), g !== d.t && ((d.t = g) != null ? c.style.setProperty("transform", g) : c.style.removeProperty("transform")), m !== d.a && u(c, "aria-expanded", d.a = m), d;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     }), c;
-  })(), g(Hn, {})];
+  })(), f(Hn, {})];
 };
 T(["click"]);
 var Kn = /* @__PURE__ */ w("<div class=echo-notification><div class=echo-notification-icon></div><div class=echo-notification-content><div class=echo-notification-title></div><div class=echo-notification-message>");
 const Gn = () => {
-  const e = E(), n = () => {
+  const e = $(), n = () => {
     e.widget.setState({
       notification: {
         ...e.widget.state.notification,
@@ -1689,7 +1695,7 @@ const Gn = () => {
   };
   return (() => {
     var r = Kn(), a = r.firstChild, o = a.nextSibling, i = o.firstChild, l = i.nextSibling;
-    return v(r, g(W, {
+    return v(r, f(W, {
       class: "echo-notification-hide",
       variant: "secondary",
       size: "sm",
@@ -1698,17 +1704,17 @@ const Gn = () => {
         return e.widget.state.text.notification.hideTitle;
       },
       get children() {
-        return g(pe, {
+        return f(pe, {
           size: 20
         });
       }
     }), a), v(a, (() => {
-      var s = S(() => e.widget.state.notification.type === "success");
-      return () => s() ? g(zn, {
+      var s = k(() => e.widget.state.notification.type === "success");
+      return () => s() ? f(zn, {
         size: 32
       }) : (() => {
-        var c = S(() => e.widget.state.notification.type === "error");
-        return () => c() ? g(In, {
+        var c = k(() => e.widget.state.notification.type === "error");
+        return () => c() ? f(In, {
           size: 32
         }) : null;
       })();
@@ -1727,7 +1733,7 @@ const Gn = () => {
 };
 var Xn = /* @__PURE__ */ w("<div class=echo-shape-actions data-hide-when-drawing=true>");
 const Jn = () => {
-  const e = E();
+  const e = $();
   let n;
   const [t, r] = A({
     x: window.scrollX,
@@ -1747,7 +1753,7 @@ const Jn = () => {
       shapes: e.drawing.state.shapes.filter((s) => s.id !== e.drawing.state.selectedShapeId),
       selectedShapeId: null
     });
-  }, i = S(() => e.drawing.state.selectedShapeId ? e.drawing.state.shapes.find((s) => s.id === e.drawing.state.selectedShapeId) : null), l = S(() => {
+  }, i = k(() => e.drawing.state.selectedShapeId ? e.drawing.state.shapes.find((s) => s.id === e.drawing.state.selectedShapeId) : null), l = k(() => {
     const s = i(), c = n == null ? void 0 : n.getBoundingClientRect();
     if (!s || !c) return null;
     let d = null;
@@ -1765,51 +1771,50 @@ const Jn = () => {
       };
     else
       return null;
-    const h = 8, f = t();
+    const h = 8, g = t();
     return {
-      x: Math.max(c.width / 2 + h, Math.min(window.innerWidth - c.width / 2 - h, d.x - f.x)),
-      y: Math.max(c.height + h, Math.min(window.innerHeight - h, d.y - f.y))
+      x: Math.max(c.width / 2 + h, Math.min(window.innerWidth - c.width / 2 - h, d.x - g.x)),
+      y: Math.max(c.height + h, Math.min(window.innerHeight - h, d.y - g.y))
     };
   });
   return (() => {
     var s = Xn(), c = n;
-    return typeof c == "function" ? V(c, s) : n = s, v(s, g(W, {
+    return typeof c == "function" ? V(c, s) : n = s, s.style.setProperty("top", "0"), s.style.setProperty("left", "0"), v(s, f(W, {
       onClick: o,
       size: "sm",
       variant: "secondary",
       title: "Delete shape",
       get children() {
-        return g(it, {
+        return f(it, {
           size: 20
         });
       }
     })), b((d) => {
-      var y, x;
-      var h = !l(), f = l() ? `${(y = l()) == null ? void 0 : y.x}px` : "0", m = l() ? `${(x = l()) == null ? void 0 : x.y}px` : "0";
-      return h !== d.e && (s.hidden = d.e = h), f !== d.t && ((d.t = f) != null ? s.style.setProperty("left", f) : s.style.removeProperty("left")), m !== d.a && ((d.a = m) != null ? s.style.setProperty("top", m) : s.style.removeProperty("top")), d;
+      var m, y;
+      var h = !l(), g = `translate(calc(${(m = l()) == null ? void 0 : m.x}px - 50%), calc(${(y = l()) == null ? void 0 : y.y}px - 125%))`;
+      return h !== d.e && (s.hidden = d.e = h), g !== d.t && ((d.t = g) != null ? s.style.setProperty("transform", g) : s.style.removeProperty("transform")), d;
     }, {
       e: void 0,
-      t: void 0,
-      a: void 0
+      t: void 0
     }), s;
   })();
 };
 var Zn = /* @__PURE__ */ w("<button class=echo-welcome-message><span class=echo-welcome-message-pulsar></span><div class=echo-welcome-message-close role=button tabindex=0>");
 const Qn = () => {
-  const e = E(), n = G("welcome_message_shown", !1), t = (a) => {
+  const e = $(), n = G("welcome_message_shown", !1), t = (a) => {
     a.stopPropagation(), e.widget.setState({
       welcomeMessageIsClosing: !0
-    }), ae("welcome_message_shown", !0);
+    }), ie("welcome_message_shown", !0);
   }, r = () => {
     e.widget.setState({
       isOpen: !0
     }), e.widget.setState({
       welcomeMessageIsClosing: !0
-    }), ae("welcome_message_shown", !0);
+    }), ie("welcome_message_shown", !0);
   };
   return n ? null : (() => {
     var a = Zn(), o = a.firstChild, i = o.nextSibling;
-    return a.$$click = r, a.style.setProperty("bottom", "80px"), a.style.setProperty("right", "20px"), v(a, () => e.widget.state.text.welcomeMessage.text, i), i.$$keydown = (l) => l.key === "Enter" && t(l), i.$$click = t, v(i, g(pe, {
+    return a.$$click = r, a.style.setProperty("bottom", "80px"), a.style.setProperty("right", "20px"), v(a, () => e.widget.state.text.welcomeMessage.text, i), i.$$keydown = (l) => l.key === "Enter" && t(l), i.$$click = t, v(i, f(pe, {
       size: 16,
       strokeWidth: 3
     })), b((l) => {
@@ -1824,24 +1829,24 @@ const Qn = () => {
 T(["click", "keydown"]);
 var er = /* @__PURE__ */ w("<svg><rect class=echo-shape fill=transparent vector-effect=non-scaling-stroke role=img></svg>", !1, !0), tr = /* @__PURE__ */ w("<svg><path class=echo-shape fill=none vector-effect=non-scaling-stroke stroke-linecap=round role=img></svg>", !1, !0);
 const He = (e) => {
-  const n = S(() => e.id === e.selectedShapeId);
-  return [g(D, {
+  const n = k(() => e.id === e.selectedShapeId);
+  return [f(D, {
     get when() {
       return e.type === "rectangle";
     },
     get children() {
-      return g(nr, ge(e, {
+      return f(nr, ge(e, {
         get isSelected() {
           return n();
         }
       }));
     }
-  }), g(D, {
+  }), f(D, {
     get when() {
       return e.type === "path";
     },
     get children() {
-      return g(rr, ge(e, {
+      return f(rr, ge(e, {
         get isSelected() {
           return n();
         }
@@ -1849,8 +1854,8 @@ const He = (e) => {
     }
   })];
 }, nr = (e) => {
-  const n = S(() => ot(e.points));
-  return g(D, {
+  const n = k(() => ot(e.points));
+  return f(D, {
     get when() {
       return n();
     },
@@ -1863,8 +1868,8 @@ const He = (e) => {
         var r;
         return (r = e.onShapeClick) == null ? void 0 : r.call(e, e.id);
       }, b((r) => {
-        var a = e.id, o = e.isSelected, i = n().x, l = n().y, s = n().width, c = n().height, d = e.color, h = B.rectangle.strokeWidth, f = e.isSelected ? B.rectangle.opacity.selected : B.rectangle.opacity.default, m = e.isSelected ? "5,5" : "none", y = e.isSelected ? "move" : "pointer", x = `Rectangle shape ${e.isSelected ? "(selected)" : ""}`, C = e.onShapeClick ? 0 : -1;
-        return a !== r.e && u(t, "data-shape-id", r.e = a), o !== r.t && u(t, "data-selected", r.t = o), i !== r.a && u(t, "x", r.a = i), l !== r.o && u(t, "y", r.o = l), s !== r.i && u(t, "width", r.i = s), c !== r.n && u(t, "height", r.n = c), d !== r.s && u(t, "stroke", r.s = d), h !== r.h && u(t, "stroke-width", r.h = h), f !== r.r && u(t, "opacity", r.r = f), m !== r.d && u(t, "stroke-dasharray", r.d = m), y !== r.l && u(t, "cursor", r.l = y), x !== r.u && u(t, "aria-label", r.u = x), C !== r.c && u(t, "tabindex", r.c = C), r;
+        var a = e.id, o = e.isSelected, i = n().x, l = n().y, s = n().width, c = n().height, d = e.color, h = B.rectangle.strokeWidth, g = e.isSelected ? B.rectangle.opacity.selected : B.rectangle.opacity.default, m = e.isSelected ? "5,5" : "none", y = e.isSelected ? "move" : "pointer", E = `Rectangle shape ${e.isSelected ? "(selected)" : ""}`, S = e.onShapeClick ? 0 : -1;
+        return a !== r.e && u(t, "data-shape-id", r.e = a), o !== r.t && u(t, "data-selected", r.t = o), i !== r.a && u(t, "x", r.a = i), l !== r.o && u(t, "y", r.o = l), s !== r.i && u(t, "width", r.i = s), c !== r.n && u(t, "height", r.n = c), d !== r.s && u(t, "stroke", r.s = d), h !== r.h && u(t, "stroke-width", r.h = h), g !== r.r && u(t, "opacity", r.r = g), m !== r.d && u(t, "stroke-dasharray", r.d = m), y !== r.l && u(t, "cursor", r.l = y), E !== r.u && u(t, "aria-label", r.u = E), S !== r.c && u(t, "tabindex", r.c = S), r;
       }, {
         e: void 0,
         t: void 0,
@@ -1883,8 +1888,8 @@ const He = (e) => {
     }
   });
 }, rr = (e) => {
-  const n = S(() => Kt(e.points));
-  return g(D, {
+  const n = k(() => Kt(e.points));
+  return f(D, {
     get when() {
       return n();
     },
@@ -1897,8 +1902,8 @@ const He = (e) => {
         var r;
         return (r = e.onShapeClick) == null ? void 0 : r.call(e, e.id);
       }, b((r) => {
-        var a = e.id, o = e.isSelected, i = n(), l = e.color, s = B.path.strokeWidth, c = e.isSelected ? B.path.opacity.selected : B.path.opacity.default, d = e.isSelected ? "move" : "pointer", h = `Freehand shape ${e.isSelected ? "(selected)" : ""}`, f = e.onShapeClick ? 0 : -1;
-        return a !== r.e && u(t, "data-shape-id", r.e = a), o !== r.t && u(t, "data-selected", r.t = o), i !== r.a && u(t, "d", r.a = i), l !== r.o && u(t, "stroke", r.o = l), s !== r.i && u(t, "stroke-width", r.i = s), c !== r.n && u(t, "opacity", r.n = c), d !== r.s && u(t, "cursor", r.s = d), h !== r.h && u(t, "aria-label", r.h = h), f !== r.r && u(t, "tabindex", r.r = f), r;
+        var a = e.id, o = e.isSelected, i = n(), l = e.color, s = B.path.strokeWidth, c = e.isSelected ? B.path.opacity.selected : B.path.opacity.default, d = e.isSelected ? "move" : "pointer", h = `Freehand shape ${e.isSelected ? "(selected)" : ""}`, g = e.onShapeClick ? 0 : -1;
+        return a !== r.e && u(t, "data-shape-id", r.e = a), o !== r.t && u(t, "data-selected", r.t = o), i !== r.a && u(t, "d", r.a = i), l !== r.o && u(t, "stroke", r.o = l), s !== r.i && u(t, "stroke-width", r.i = s), c !== r.n && u(t, "opacity", r.n = c), d !== r.s && u(t, "cursor", r.s = d), h !== r.h && u(t, "aria-label", r.h = h), g !== r.r && u(t, "tabindex", r.r = g), r;
       }, {
         e: void 0,
         t: void 0,
@@ -1916,7 +1921,7 @@ const He = (e) => {
 T(["click", "keydown"]);
 var or = /* @__PURE__ */ w('<div class=echo-drawing-layer-container role=application aria-label="Drawing Canvas"><svg width=100% height=100% class=echo-drawing-layer preserveAspectRatio=none role=img aria-label="Drawing Area"><path class=echo-drawing-layer-mask fill="rgba(33, 43, 55, 1)"fill-opacity=0.2 fill-rule=evenodd aria-hidden=true>');
 const ar = () => {
-  const e = E();
+  const e = $();
   let n;
   return ye(() => {
     n == null || n.addEventListener("mousemove", e.drawing.methods.handleMove), n == null || n.addEventListener("mouseup", e.drawing.methods.handleEnd), n == null || n.addEventListener("touchmove", e.drawing.methods.handleMove, {
@@ -1926,7 +1931,7 @@ const ar = () => {
     n == null || n.removeEventListener("mousemove", e.drawing.methods.handleMove), n == null || n.removeEventListener("mouseup", e.drawing.methods.handleEnd), n == null || n.removeEventListener("touchmove", e.drawing.methods.handleMove), n == null || n.removeEventListener("touchend", e.drawing.methods.handleEnd);
   }), (() => {
     var t = or(), r = t.firstChild, a = r.firstChild, o = n;
-    return typeof o == "function" ? V(o, t) : n = t, v(t, g(jn, {}), r), v(t, g(Jn, {}), r), U(r, "touchend", e.drawing.methods.handleLeave, !0), U(r, "mouseleave", e.drawing.methods.handleLeave), U(r, "mouseenter", e.drawing.methods.handleEnter), r.$$touchmove = (i) => {
+    return typeof o == "function" ? V(o, t) : n = t, v(t, f(jn, {}), r), v(t, f(Jn, {}), r), U(r, "touchend", e.drawing.methods.handleLeave, !0), U(r, "mouseleave", e.drawing.methods.handleLeave), U(r, "mouseenter", e.drawing.methods.handleEnter), r.$$touchmove = (i) => {
       i.preventDefault(), e.drawing.methods.handleMove(i);
     }, U(r, "mousemove", e.drawing.methods.handleMove, !0), r.$$touchstart = (i) => {
       i.preventDefault(), e.drawing.methods.handleStart(i), e.drawing.methods.handleEnter(i), e.drawing.setState({
@@ -1938,11 +1943,11 @@ const ar = () => {
         showTooltip: !1,
         hasDrawn: !0
       });
-    }, v(r, g(_, {
+    }, v(r, f(_, {
       get each() {
         return e.drawing.state.shapes;
       },
-      children: (i) => g(He, {
+      children: (i) => f(He, {
         get id() {
           return i.id;
         },
@@ -1962,7 +1967,7 @@ const ar = () => {
           return e.drawing.methods.handleShapeClick;
         }
       })
-    }), null), v(r, g(He, {
+    }), null), v(r, f(He, {
       id: "temp",
       get type() {
         return e.drawing.state.selectedTool;
@@ -1989,7 +1994,7 @@ const ar = () => {
   })();
 };
 T(["mousedown", "touchstart", "mousemove", "touchmove", "touchend"]);
-const ce = (e) => ({
+const de = (e) => ({
   handleTextChange: (o) => {
     const i = o.target;
     e(i.value);
@@ -2004,14 +2009,14 @@ const ce = (e) => ({
   getCheckboxValue: (o) => Array.isArray(o) ? o : []
 });
 var ir = /* @__PURE__ */ w("<div class=echo-input role=group>"), sr = /* @__PURE__ */ w("<label class=echo-input-label><span>"), lr = /* @__PURE__ */ w('<span class=echo-input-required aria-label="Required field">*');
-const de = (e) => (() => {
+const ue = (e) => (() => {
   var n = ir();
   return v(n, (() => {
-    var t = S(() => !!e.label);
+    var t = k(() => !!e.label);
     return () => t() && (() => {
       var r = sr(), a = r.firstChild;
       return v(a, () => e.label), v(r, (() => {
-        var o = S(() => !!e.required);
+        var o = k(() => !!e.required);
         return () => o() && lr();
       })(), null), r;
     })();
@@ -2021,8 +2026,8 @@ var cr = /* @__PURE__ */ w("<textarea class=echo-input-field rows=5>"), dr = /*
 const st = (e) => {
   const {
     handleTextChange: n
-  } = ce(e.onChange);
-  return g(de, {
+  } = de(e.onChange);
+  return f(ue, {
     get label() {
       return e.config.label;
     },
@@ -2053,12 +2058,12 @@ const st = (e) => {
 };
 T(["input"]);
 var ur = /* @__PURE__ */ w("<fieldset class=echo-input-options role=group>"), hr = /* @__PURE__ */ w("<label class=echo-input-option><input type=checkbox><span>");
-const gr = (e) => {
+const fr = (e) => {
   const {
     handleCheckboxChange: n,
     getCheckboxValue: t
-  } = ce(e.onChange), r = () => t(e.value), a = () => r().length > 0;
-  return g(de, {
+  } = de(e.onChange), r = () => t(e.value), a = () => r().length > 0;
+  return f(ue, {
     get label() {
       return e.config.label;
     },
@@ -2067,7 +2072,7 @@ const gr = (e) => {
     },
     get children() {
       var o = ur();
-      return v(o, g(_, {
+      return v(o, f(_, {
         get each() {
           return e.config.options;
         },
@@ -2079,12 +2084,12 @@ const gr = (e) => {
     }
   });
 };
-var fr = /* @__PURE__ */ w("<fieldset class=echo-input-options role=radiogroup>"), mr = /* @__PURE__ */ w("<label class=echo-input-option><input type=radio><span>");
+var gr = /* @__PURE__ */ w("<fieldset class=echo-input-options role=radiogroup>"), mr = /* @__PURE__ */ w("<label class=echo-input-option><input type=radio><span>");
 const vr = (e) => {
   const {
     handleSelectChange: n
-  } = ce(e.onChange);
-  return g(de, {
+  } = de(e.onChange);
+  return f(ue, {
     get label() {
       return e.config.label;
     },
@@ -2092,8 +2097,8 @@ const vr = (e) => {
       return e.config.required;
     },
     get children() {
-      var t = fr();
-      return v(t, g(_, {
+      var t = gr();
+      return v(t, f(_, {
         get each() {
           return e.config.options;
         },
@@ -2115,10 +2120,10 @@ var br = /* @__PURE__ */ w("<div class=echo-select-dropdown role=listbox>"), wr
 const pr = (e) => {
   const {
     handleSelectChange: n
-  } = ce(e.onChange), [t, r] = A(!1);
+  } = de(e.onChange), [t, r] = A(!1);
   let a, o, i;
-  const l = () => e.config.options.find((h) => h.value === (e.value === void 0 ? "" : e.value)), s = (h, f) => {
-    f.stopPropagation(), h.value === e.value ? e.config.required || n("") : n(h.value), r(!1);
+  const l = () => e.config.options.find((h) => h.value === (e.value === void 0 ? "" : e.value)), s = (h, g) => {
+    g.stopPropagation(), h.value === e.value ? e.config.required || n("") : n(h.value), r(!1);
   }, c = () => {
     r(!t());
   };
@@ -2128,7 +2133,7 @@ const pr = (e) => {
       if (!t() || !a) return;
       h.composedPath().includes(a) || r(!1);
     }
-  }), g(de, {
+  }), f(ue, {
     get label() {
       return e.config.label;
     },
@@ -2136,29 +2141,29 @@ const pr = (e) => {
       return e.config.required;
     },
     get children() {
-      var h = wr(), f = h.firstChild, m = f.firstChild, y = f.nextSibling, x = a;
-      typeof x == "function" ? V(x, h) : a = h, f.$$click = (p) => {
+      var h = wr(), g = h.firstChild, m = g.firstChild, y = g.nextSibling, E = a;
+      typeof E == "function" ? V(E, h) : a = h, g.$$click = (p) => {
         p.stopPropagation(), c();
       };
-      var C = o;
-      typeof C == "function" ? V(C, f) : o = f, v(m, () => {
+      var S = o;
+      typeof S == "function" ? V(S, g) : o = g, v(m, () => {
         var p;
         return ((p = l()) == null ? void 0 : p.label) || e.config.placeholder;
-      }), v(h, g(D, {
+      }), v(h, f(D, {
         get when() {
           return t();
         },
         get children() {
           var p = br();
-          return v(p, g(_, {
+          return v(p, f(_, {
             get each() {
               return e.config.options;
             },
             children: (P) => (() => {
               var z = yr();
-              return z.$$click = (k) => s(P, k), v(z, () => P.label), b((k) => {
+              return z.$$click = (x) => s(P, x), v(z, () => P.label), b((x) => {
                 var H = P.value === e.value, q = P.value === e.value;
-                return H !== k.e && u(z, "aria-selected", k.e = H), q !== k.t && u(z, "data-selected", k.t = q), k;
+                return H !== x.e && u(z, "aria-selected", x.e = H), q !== x.t && u(z, "data-selected", x.t = q), x;
               }, {
                 e: void 0,
                 t: void 0
@@ -2167,10 +2172,10 @@ const pr = (e) => {
           })), p;
         }
       }), y);
-      var $ = i;
-      return typeof $ == "function" ? V($, y) : i = y, b((p) => {
-        var P = t(), z = !e.value, k = e.config.required, H = t(), q = e.config.required, I = e.config.required;
-        return P !== p.e && u(f, "data-open", p.e = P), z !== p.t && u(f, "data-placeholder", p.t = z), k !== p.a && u(f, "data-required", p.a = k), H !== p.o && u(f, "aria-expanded", p.o = H), q !== p.i && u(f, "aria-required", p.i = q), I !== p.n && (y.required = p.n = I), p;
+      var C = i;
+      return typeof C == "function" ? V(C, y) : i = y, b((p) => {
+        var P = t(), z = !e.value, x = e.config.required, H = t(), q = e.config.required, I = e.config.required;
+        return P !== p.e && u(g, "data-open", p.e = P), z !== p.t && u(g, "data-placeholder", p.t = z), x !== p.a && u(g, "data-required", p.a = x), H !== p.o && u(g, "aria-expanded", p.o = H), q !== p.i && u(g, "aria-required", p.i = q), I !== p.n && (y.required = p.n = I), p;
       }, {
         e: void 0,
         t: void 0,
@@ -2187,8 +2192,8 @@ var xr = /* @__PURE__ */ w("<input type=text class=echo-input-field>");
 const kr = (e) => {
   const {
     handleTextChange: n
-  } = ce(e.onChange);
-  return g(de, {
+  } = de(e.onChange);
+  return f(ue, {
     get label() {
       return e.config.label;
     },
@@ -2209,7 +2214,7 @@ const kr = (e) => {
 };
 T(["input"]);
 var Sr = /* @__PURE__ */ w("<div class=echo-input-error>Invalid input type"), Cr = /* @__PURE__ */ w("<div class=echo-input-error>Unsupported input type: ");
-const $r = (e) => g(D, {
+const $r = (e) => f(D, {
   get when() {
     return e.config.type;
   },
@@ -2218,7 +2223,7 @@ const $r = (e) => g(D, {
     return Sr();
   },
   get children() {
-    return g(ht, {
+    return f(ht, {
       get fallback() {
         return (() => {
           var n = Cr();
@@ -2226,12 +2231,12 @@ const $r = (e) => g(D, {
         })();
       },
       get children() {
-        return [g(te, {
+        return [f(te, {
           get when() {
             return e.config.type === "text";
           },
           get children() {
-            return g(kr, {
+            return f(kr, {
               get config() {
                 return e.config;
               },
@@ -2243,12 +2248,12 @@ const $r = (e) => g(D, {
               }
             });
           }
-        }), g(te, {
+        }), f(te, {
           get when() {
             return e.config.type === "textarea";
           },
           get children() {
-            return g(st, {
+            return f(st, {
               get config() {
                 return e.config;
               },
@@ -2260,12 +2265,12 @@ const $r = (e) => g(D, {
               }
             });
           }
-        }), g(te, {
+        }), f(te, {
           get when() {
             return e.config.type === "radio";
           },
           get children() {
-            return g(vr, {
+            return f(vr, {
               get config() {
                 return e.config;
               },
@@ -2277,12 +2282,12 @@ const $r = (e) => g(D, {
               }
             });
           }
-        }), g(te, {
+        }), f(te, {
           get when() {
             return e.config.type === "checkbox";
           },
           get children() {
-            return g(gr, {
+            return f(fr, {
               get config() {
                 return e.config;
               },
@@ -2294,12 +2299,12 @@ const $r = (e) => g(D, {
               }
             });
           }
-        }), g(te, {
+        }), f(te, {
           get when() {
             return e.config.type === "select";
           },
           get children() {
-            return g(pr, {
+            return f(pr, {
               get config() {
                 return e.config;
               },
@@ -2362,7 +2367,7 @@ const $r = (e) => g(D, {
 });
 var Or = /* @__PURE__ */ w("<fieldset class=echo-input-options><legend class=visually-hidden>Additional Information"), Mr = /* @__PURE__ */ w('<section class=echo-feedback data-hide-when-drawing=true role=dialog aria-label="Feedback Form"><form class=echo-feedback-content aria-label="Submit Feedback"><header class=echo-feedback-header><h3 class=echo-feedback-title id=feedback-form-title></h3><div class=echo-feedback-header-actions role=toolbar aria-label="Form controls"></div></header><fieldset class=echo-input-options><legend class=visually-hidden>Feedback Message');
 const Ar = () => {
-  const e = E(), n = async (a) => {
+  const e = $(), n = async (a) => {
     a.preventDefault();
     const o = await tn(), i = {
       message: e.feedback.state.message,
@@ -2387,7 +2392,7 @@ const Ar = () => {
     });
   }), (() => {
     var a = Mr(), o = a.firstChild, i = o.firstChild, l = i.firstChild, s = l.nextSibling, c = i.nextSibling;
-    return c.firstChild, a.$$click = () => e.feedback.state.isMinimized && r(), o.addEventListener("submit", n), v(l, () => e.widget.state.text.feedbackForm.title), v(s, g(W, {
+    return c.firstChild, a.$$click = () => e.feedback.state.isMinimized && r(), o.addEventListener("submit", n), v(l, () => e.widget.state.text.feedbackForm.title), v(s, f(W, {
       type: "button",
       title: "Hide form",
       variant: "secondary",
@@ -2395,11 +2400,11 @@ const Ar = () => {
       onClick: t,
       "aria-label": "Minimize feedback form",
       get children() {
-        return g(yn, {
+        return f(yn, {
           size: 20
         });
       }
-    }), null), v(s, g(W, {
+    }), null), v(s, f(W, {
       type: "button",
       title: "Close form",
       variant: "secondary",
@@ -2409,11 +2414,11 @@ const Ar = () => {
       }),
       "aria-label": "Close feedback form",
       get children() {
-        return g(pe, {
+        return f(pe, {
           size: 20
         });
       }
-    }), null), v(c, g(st, {
+    }), null), v(c, f(st, {
       get config() {
         return {
           type: "textarea",
@@ -2429,32 +2434,32 @@ const Ar = () => {
       onChange: (d) => e.feedback.setState({
         message: d
       })
-    }), null), v(o, g(D, {
+    }), null), v(o, f(D, {
       get when() {
         var d;
         return (d = e.widget.state.customInputs) == null ? void 0 : d.length;
       },
       get children() {
         var d = Or();
-        return d.firstChild, v(d, g(_, {
+        return d.firstChild, v(d, f(_, {
           get each() {
             return e.widget.state.customInputs;
           },
-          children: (h) => g($r, {
+          children: (h) => f($r, {
             config: h,
             get value() {
               return e.feedback.state.customInputValues[h.id];
             },
-            onChange: (f) => e.feedback.setState({
+            onChange: (g) => e.feedback.setState({
               customInputValues: {
                 ...e.feedback.state.customInputValues,
-                [h.id]: f
+                [h.id]: g
               }
             })
           })
         }), null), d;
       }
-    }), null), v(o, g(W, {
+    }), null), v(o, f(W, {
       type: "submit",
       variant: "primary",
       size: "lg",
@@ -2466,8 +2471,8 @@ const Ar = () => {
         return e.widget.state.text.feedbackForm.submitButton;
       }
     }), null), b((d) => {
-      var h = e.feedback.state.isMinimized, f = e.feedback.state.isMinimized ? "pointer" : "default", m = !e.feedback.state.isMinimized;
-      return h !== d.e && u(a, "data-minimized", d.e = h), f !== d.t && ((d.t = f) != null ? a.style.setProperty("cursor", f) : a.style.removeProperty("cursor")), m !== d.a && u(a, "aria-expanded", d.a = m), d;
+      var h = e.feedback.state.isMinimized, g = e.feedback.state.isMinimized ? "pointer" : "default", m = !e.feedback.state.isMinimized;
+      return h !== d.e && u(a, "data-minimized", d.e = h), g !== d.t && ((d.t = g) != null ? a.style.setProperty("cursor", g) : a.style.removeProperty("cursor")), m !== d.a && u(a, "aria-expanded", d.a = m), d;
     }, {
       e: void 0,
       t: void 0,
@@ -2477,21 +2482,21 @@ const Ar = () => {
 };
 T(["click"]);
 var Dr = /* @__PURE__ */ w("<style>"), Fr = /* @__PURE__ */ w("<div class=echo-launcher>"), Lr = /* @__PURE__ */ w("<dialog class=echo-overlay>"), jr = /* @__PURE__ */ w("<div class=echo-root>");
-const Nr = (e) => g(Ot, {
+const Nr = (e) => f(Ot, {
   useShadow: !0,
   get mount() {
     return document.body;
   },
   get children() {
-    return g(cn, ge(e, {
+    return f(cn, ge(e, {
       get children() {
-        return g(Wr, {
+        return f(Wr, {
           get children() {
-            return [g(qr, {
+            return [f(qr, {
               get primaryColor() {
                 return e.primaryColor;
               }
-            }), g(Vr, {})];
+            }), f(Vr, {})];
           }
         });
       }
@@ -2512,18 +2517,18 @@ const Nr = (e) => g(Ot, {
     return v(r, hn, null), v(r, n, null), r;
   })();
 }, Vr = () => {
-  const e = E();
+  const e = $();
   return Y(() => {
   }), [(() => {
     var n = Fr();
-    return v(n, g(Rn, {}), null), v(n, g(Qn, {}), null), v(n, g(Gn, {}), null), b(() => u(n, "data-hidden", e.widget.state.isOpen)), n;
-  })(), g(Br, {
+    return v(n, f(Rn, {}), null), v(n, f(Qn, {}), null), v(n, f(Gn, {}), null), b(() => u(n, "data-hidden", e.widget.state.isOpen)), n;
+  })(), f(Br, {
     get children() {
-      return [g(Ar, {}), g(Fn, {}), g(ar, {})];
+      return [f(Ar, {}), f(Fn, {}), f(ar, {})];
     }
   })];
 }, Br = (e) => {
-  const [n, t] = A(), r = E(), a = dn(() => n());
+  const [n, t] = A(), r = $(), a = dn(() => n());
   return Y(() => {
     n() && r.widget.setState({
       dimensions: a()
@@ -2545,7 +2550,7 @@ const Nr = (e) => g(Ot, {
     }), o;
   })();
 }, Wr = (e) => {
-  const n = E();
+  const n = $();
   return un({
     onUrlChange: (t) => n.methods.handlePageChange(t)
   }), ye(() => {
@@ -2588,9 +2593,9 @@ const Nr = (e) => g(Ot, {
     text: "Click & drag to draw"
   }
 };
-let he = null;
+let fe = null;
 function Yr(e) {
-  he && (console.warn("Echo widget is already initialized. Cleaning up previous instance..."), he());
+  fe && (console.warn("Echo widget is already initialized. Cleaning up previous instance..."), fe());
   try {
     rn(e);
     const {
@@ -2601,18 +2606,18 @@ function Yr(e) {
       customInputs: o = []
     } = e, i = Ke(_r, a), l = document.createElement("div");
     l.id = "echo-container", document.body.appendChild(l);
-    const s = kt(() => g(Nr, {
+    const s = kt(() => f(Nr, {
       position: n,
       primaryColor: t,
       textConfig: i,
       onSubmit: r,
       customInputs: o
     }), l), c = () => {
-      s(), l.remove(), he = null;
+      s(), l.remove(), fe = null;
     };
     return window.addEventListener("unload", c, {
       once: !0
-    }), he = c, c;
+    }), fe = c, c;
   } catch (n) {
     throw console.error("Echo initialization failed:", n), n;
   }