@contember/echo 0.0.27 → 0.0.29

package/dist/echo.es.js

@@ -1,6 +1,6 @@
-import { sharedConfig as P, createRoot as Te, createRenderEffect as w, getOwner as pe, createEffect as oe, runWithOwner as Xe, createMemo as p, createSignal as M, onCleanup as K, untrack as Ie, onMount as fe, $PROXY as A, $TRACK as xe, getListener as ce, batch as Ge, createContext as Je, createComponent as g, useContext as qe, For as re, mergeProps as Z, Show as j } from "solid-js";
-import Qe from "html2canvas";
-const Ze = [
+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 = [
   "allowfullscreen",
   "async",
   "autofocus",
@@ -26,7 +26,7 @@ const Ze = [
   "reversed",
   "seamless",
   "selected"
-], et = /* @__PURE__ */ new Set([
+], mt = /* @__PURE__ */ new Set([
   "className",
   "value",
   "readOnly",
@@ -34,16 +34,16 @@ const Ze = [
   "isMap",
   "noModule",
   "playsInline",
-  ...Ze
-]), tt = /* @__PURE__ */ new Set([
+  ...ft
+]), vt = /* @__PURE__ */ new Set([
   "innerHTML",
   "textContent",
   "innerText",
   "children"
-]), nt = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+]), bt = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
   className: "class",
   htmlFor: "for"
-}), ot = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+}), wt = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
   class: "className",
   formnovalidate: {
     $: "formNoValidate",
@@ -68,11 +68,11 @@ const Ze = [
     TEXTAREA: 1
   }
 });
-function rt(e, t) {
-  const n = ot[e];
-  return typeof n == "object" ? n[t] ? n.$ : void 0 : n;
+function yt(e, n) {
+  const t = wt[e];
+  return typeof t == "object" ? t[n] ? t.$ : void 0 : t;
 }
-const it = /* @__PURE__ */ new Set([
+const pt = /* @__PURE__ */ new Set([
   "beforeinput",
   "click",
   "dblclick",
@@ -96,532 +96,545 @@ const it = /* @__PURE__ */ new Set([
   "touchmove",
   "touchstart"
 ]);
-function at(e, t, n) {
-  let o = n.length, i = t.length, r = o, a = 0, l = 0, s = t[i - 1].nextSibling, c = null;
-  for (; a < i || l < r; ) {
-    if (t[a] === n[l]) {
-      a++, l++;
+function xt(e, n, t) {
+  let r = t.length, a = n.length, o = r, i = 0, l = 0, s = n[a - 1].nextSibling, c = null;
+  for (; i < a || l < o; ) {
+    if (n[i] === t[l]) {
+      i++, l++;
       continue;
     }
-    for (; t[i - 1] === n[r - 1]; )
-      i--, r--;
-    if (i === a) {
-      const d = r < o ? l ? n[l - 1].nextSibling : n[r - l] : s;
-      for (; l < r; ) e.insertBefore(n[l++], d);
-    } else if (r === l)
-      for (; a < i; )
-        (!c || !c.has(t[a])) && t[a].remove(), a++;
-    else if (t[a] === n[r - 1] && n[l] === t[i - 1]) {
-      const d = t[--i].nextSibling;
-      e.insertBefore(n[l++], t[a++].nextSibling), e.insertBefore(n[--r], d), t[i] = n[r];
+    for (; n[a - 1] === t[o - 1]; )
+      a--, o--;
+    if (a === i) {
+      const d = o < r ? l ? t[l - 1].nextSibling : t[o - l] : s;
+      for (; l < o; ) e.insertBefore(t[l++], d);
+    } else if (o === l)
+      for (; i < a; )
+        (!c || !c.has(n[i])) && n[i].remove(), i++;
+    else if (n[i] === t[o - 1] && t[l] === n[a - 1]) {
+      const d = n[--a].nextSibling;
+      e.insertBefore(t[l++], n[i++].nextSibling), e.insertBefore(t[--o], d), n[a] = t[o];
     } else {
       if (!c) {
         c = /* @__PURE__ */ new Map();
-        let u = l;
-        for (; u < r; ) c.set(n[u], u++);
+        let h = l;
+        for (; h < o; ) c.set(t[h], h++);
       }
-      const d = c.get(t[a]);
+      const d = c.get(n[i]);
       if (d != null)
-        if (l < d && d < r) {
-          let u = a, f = 1, v;
-          for (; ++u < i && u < r && !((v = c.get(t[u])) == null || v !== d + f); )
+        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) {
-            const y = t[a];
-            for (; l < d; ) e.insertBefore(n[l++], y);
-          } else e.replaceChild(n[l++], t[a++]);
-        } else a++;
-      else t[a++].remove();
+            const y = n[i];
+            for (; l < d; ) e.insertBefore(t[l++], y);
+          } else e.replaceChild(t[l++], n[i++]);
+        } else i++;
+      else n[i++].remove();
     }
   }
 }
-const ke = "_$DX_DELEGATE";
-function st(e, t, n, o = {}) {
-  let i;
-  return Te((r) => {
-    i = r, t === document ? e() : m(t, e(), t.firstChild ? null : void 0, n);
-  }, o.owner), () => {
-    i(), t.textContent = "";
+const Le = "_$DX_DELEGATE";
+function kt(e, n, t, r = {}) {
+  let a;
+  return Ue((o) => {
+    a = o, n === document ? e() : v(n, e(), n.firstChild ? null : void 0, t);
+  }, r.owner), () => {
+    a(), n.textContent = "";
   };
 }
-function b(e, t, n) {
-  let o;
-  const i = () => {
-    const a = document.createElement("template");
-    return a.innerHTML = e, n ? a.content.firstChild.firstChild : a.content.firstChild;
-  }, r = t ? () => Ie(() => document.importNode(o || (o = i()), !0)) : () => (o || (o = i())).cloneNode(!0);
-  return r.cloneNode = r, r;
+function w(e, n, t) {
+  let r;
+  const a = () => {
+    const i = document.createElement("template");
+    return i.innerHTML = e, t ? i.content.firstChild.firstChild : i.content.firstChild;
+  }, o = n ? () => Ye(() => document.importNode(r || (r = a()), !0)) : () => (r || (r = a())).cloneNode(!0);
+  return o.cloneNode = o, o;
 }
-function T(e, t = window.document) {
-  const n = t[ke] || (t[ke] = /* @__PURE__ */ new Set());
-  for (let o = 0, i = e.length; o < i; o++) {
-    const r = e[o];
-    n.has(r) || (n.add(r), t.addEventListener(r, ft));
+function T(e, n = window.document) {
+  const t = n[Le] || (n[Le] = /* @__PURE__ */ new Set());
+  for (let r = 0, a = e.length; r < a; r++) {
+    const o = e[r];
+    t.has(o) || (t.add(o), n.addEventListener(o, zt));
   }
 }
-function h(e, t, n) {
-  J(e) || (n == null ? e.removeAttribute(t) : e.setAttribute(t, n));
+function u(e, n, t) {
+  le(e) || (t == null ? e.removeAttribute(n) : e.setAttribute(n, t));
 }
-function lt(e, t, n) {
-  J(e) || (n ? e.setAttribute(t, "") : e.removeAttribute(t));
+function St(e, n, t) {
+  le(e) || (t ? e.setAttribute(n, "") : e.removeAttribute(n));
 }
-function De(e, t) {
-  J(e) || (t == null ? e.removeAttribute("class") : e.className = t);
+function Re(e, n) {
+  le(e) || (n == null ? e.removeAttribute("class") : e.className = n);
 }
-function _(e, t, n, o) {
-  if (o)
-    Array.isArray(n) ? (e[`$$${t}`] = n[0], e[`$$${t}Data`] = n[1]) : e[`$$${t}`] = n;
-  else if (Array.isArray(n)) {
-    const i = n[0];
-    e.addEventListener(t, n[0] = (r) => i.call(e, n[1], r));
-  } else e.addEventListener(t, n, typeof n != "function" && n);
+function U(e, n, t, r) {
+  if (r)
+    Array.isArray(t) ? (e[`$$${n}`] = t[0], e[`$$${n}Data`] = t[1]) : e[`$$${n}`] = t;
+  else if (Array.isArray(t)) {
+    const a = t[0];
+    e.addEventListener(n, t[0] = (o) => a.call(e, t[1], o));
+  } else e.addEventListener(n, t, typeof t != "function" && t);
 }
-function ct(e, t, n = {}) {
-  const o = Object.keys(t || {}), i = Object.keys(n);
-  let r, a;
-  for (r = 0, a = i.length; r < a; r++) {
-    const l = i[r];
-    !l || l === "undefined" || t[l] || (Se(e, l, !1), delete n[l]);
+function Ct(e, n, t = {}) {
+  const r = Object.keys(n || {}), a = Object.keys(t);
+  let o, i;
+  for (o = 0, i = a.length; o < i; o++) {
+    const l = a[o];
+    !l || l === "undefined" || n[l] || (je(e, l, !1), delete t[l]);
   }
-  for (r = 0, a = o.length; r < a; r++) {
-    const l = o[r], s = !!t[l];
-    !l || l === "undefined" || n[l] === s || !s || (Se(e, l, !0), n[l] = s);
+  for (o = 0, i = r.length; o < i; o++) {
+    const l = r[o], s = !!n[l];
+    !l || l === "undefined" || t[l] === s || !s || (je(e, l, !0), t[l] = s);
   }
-  return n;
+  return t;
 }
-function C(e, t, n) {
-  if (!t) return n ? h(e, "style") : t;
-  const o = e.style;
-  if (typeof t == "string") return o.cssText = t;
-  typeof n == "string" && (o.cssText = n = void 0), n || (n = {}), t || (t = {});
-  let i, r;
-  for (r in n)
-    t[r] == null && o.removeProperty(r), delete n[r];
-  for (r in t)
-    i = t[r], i !== n[r] && (o.setProperty(r, i), n[r] = i);
-  return n;
+function F(e, n, t) {
+  if (!n) return t ? u(e, "style") : n;
+  const r = e.style;
+  if (typeof n == "string") return r.cssText = n;
+  typeof t == "string" && (r.cssText = t = void 0), t || (t = {}), n || (n = {});
+  let a, o;
+  for (o in t)
+    n[o] == null && r.removeProperty(o), delete t[o];
+  for (o in n)
+    a = n[o], a !== t[o] && (r.setProperty(o, a), t[o] = a);
+  return t;
 }
-function dt(e, t = {}, n, o) {
-  const i = {};
-  return w(
-    () => i.children = V(e, t.children, i.children)
-  ), w(() => typeof t.ref == "function" && G(t.ref, e)), w(() => ht(e, t, n, !0, i, !0)), i;
+function $t(e, n = {}, t, r) {
+  const a = {};
+  return b(
+    () => a.children = oe(e, n.children, a.children)
+  ), b(() => typeof n.ref == "function" && V(n.ref, e)), b(() => Et(e, n, t, !0, a, !0)), a;
 }
-function G(e, t, n) {
-  return Ie(() => e(t, n));
+function V(e, n, t) {
+  return Ye(() => e(n, t));
 }
-function m(e, t, n, o) {
-  if (n !== void 0 && !o && (o = []), typeof t != "function") return V(e, t, o, n);
-  w((i) => V(e, t(), i, n), o);
+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);
 }
-function ht(e, t, n, o, i = {}, r = !1) {
-  t || (t = {});
-  for (const a in i)
-    if (!(a in t)) {
-      if (a === "children") continue;
-      i[a] = Ce(e, a, null, i[a], n, r, t);
+function Et(e, n, t, r, a = {}, o = !1) {
+  n || (n = {});
+  for (const i in a)
+    if (!(i in n)) {
+      if (i === "children") continue;
+      a[i] = Ne(e, i, null, a[i], t, o, n);
     }
-  for (const a in t) {
-    if (a === "children")
+  for (const i in n) {
+    if (i === "children")
       continue;
-    const l = t[a];
-    i[a] = Ce(e, a, l, i[a], n, r, t);
+    const l = n[i];
+    a[i] = Ne(e, i, l, a[i], t, o, n);
   }
 }
-function J(e) {
-  return !!P.context && !P.done && (!e || e.isConnected);
+function le(e) {
+  return !!L.context && !L.done && (!e || e.isConnected);
 }
-function ut(e) {
-  return e.toLowerCase().replace(/-([a-z])/g, (t, n) => n.toUpperCase());
+function Pt(e) {
+  return e.toLowerCase().replace(/-([a-z])/g, (n, t) => t.toUpperCase());
 }
-function Se(e, t, n) {
-  const o = t.trim().split(/\s+/);
-  for (let i = 0, r = o.length; i < r; i++)
-    e.classList.toggle(o[i], n);
+function je(e, n, t) {
+  const r = n.trim().split(/\s+/);
+  for (let a = 0, o = r.length; a < o; a++)
+    e.classList.toggle(r[a], t);
 }
-function Ce(e, t, n, o, i, r, a) {
-  let l, s, c, d, u;
-  if (t === "style") return C(e, n, o);
-  if (t === "classList") return ct(e, n, o);
-  if (n === o) return o;
-  if (t === "ref")
-    r || n(e);
-  else if (t.slice(0, 3) === "on:") {
-    const f = t.slice(3);
-    o && e.removeEventListener(f, o, typeof o != "function" && o), n && e.addEventListener(f, n, typeof n != "function" && n);
-  } else if (t.slice(0, 10) === "oncapture:") {
-    const f = t.slice(10);
-    o && e.removeEventListener(f, o, !0), n && e.addEventListener(f, n, !0);
-  } else if (t.slice(0, 2) === "on") {
-    const f = t.slice(2).toLowerCase(), v = it.has(f);
-    if (!v && o) {
-      const y = Array.isArray(o) ? o[0] : o;
+function Ne(e, n, t, r, a, o, i) {
+  let l, s, c, d, h;
+  if (n === "style") return F(e, t, r);
+  if (n === "classList") return Ct(e, t, r);
+  if (t === r) return r;
+  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);
+  } else if (n.slice(0, 10) === "oncapture:") {
+    const f = n.slice(10);
+    r && e.removeEventListener(f, r, !0), t && e.addEventListener(f, t, !0);
+  } else if (n.slice(0, 2) === "on") {
+    const f = n.slice(2).toLowerCase(), m = pt.has(f);
+    if (!m && r) {
+      const y = Array.isArray(r) ? r[0] : r;
       e.removeEventListener(f, y);
     }
-    (v || n) && (_(e, f, n, v), v && T([f]));
-  } else if (t.slice(0, 5) === "attr:")
-    h(e, t.slice(5), n);
-  else if (t.slice(0, 5) === "bool:")
-    lt(e, t.slice(5), n);
-  else if ((u = t.slice(0, 5) === "prop:") || (c = tt.has(t)) || (d = rt(t, e.tagName)) || (s = et.has(t)) || (l = e.nodeName.includes("-") || "is" in a)) {
-    if (u)
-      t = t.slice(5), s = !0;
-    else if (J(e)) return n;
-    t === "class" || t === "className" ? De(e, n) : l && !s && !c ? e[ut(t)] = n : e[d || t] = n;
+    (m || t) && (U(e, f, t, m), m && T([f]));
+  } else if (n.slice(0, 5) === "attr:")
+    u(e, n.slice(5), t);
+  else if (n.slice(0, 5) === "bool:")
+    St(e, n.slice(5), t);
+  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;
+    n === "class" || n === "className" ? Re(e, t) : l && !s && !c ? e[Pt(n)] = t : e[d || n] = t;
   } else
-    h(e, nt[t] || t, n);
-  return n;
+    u(e, bt[n] || n, t);
+  return t;
 }
-function ft(e) {
-  if (P.registry && P.events && P.events.find(([s, c]) => c === e))
+function zt(e) {
+  if (L.registry && L.events && L.events.find(([s, c]) => c === e))
     return;
-  let t = e.target;
-  const n = `$$${e.type}`, o = e.target, i = e.currentTarget, r = (s) => Object.defineProperty(e, "target", {
+  let n = e.target;
+  const t = `$$${e.type}`, r = e.target, a = e.currentTarget, o = (s) => Object.defineProperty(e, "target", {
     configurable: !0,
     value: s
-  }), a = () => {
-    const s = t[n];
-    if (s && !t.disabled) {
-      const c = t[`${n}Data`];
-      if (c !== void 0 ? s.call(t, c, e) : s.call(t, e), e.cancelBubble) return;
+  }), i = () => {
+    const s = n[t];
+    if (s && !n.disabled) {
+      const c = n[`${t}Data`];
+      if (c !== void 0 ? s.call(n, c, e) : s.call(n, e), e.cancelBubble) return;
     }
-    return t.host && typeof t.host != "string" && !t.host._$host && t.contains(e.target) && r(t.host), !0;
+    return n.host && typeof n.host != "string" && !n.host._$host && n.contains(e.target) && o(n.host), !0;
   }, l = () => {
-    for (; a() && (t = t._$host || t.parentNode || t.host); ) ;
+    for (; i() && (n = n._$host || n.parentNode || n.host); ) ;
   };
   if (Object.defineProperty(e, "currentTarget", {
     configurable: !0,
     get() {
-      return t || document;
+      return n || document;
     }
-  }), P.registry && !P.done && (P.done = _$HY.done = !0), e.composedPath) {
+  }), L.registry && !L.done && (L.done = _$HY.done = !0), e.composedPath) {
     const s = e.composedPath();
-    r(s[0]);
-    for (let c = 0; c < s.length - 2 && (t = s[c], !!a()); c++) {
-      if (t._$host) {
-        t = t._$host, l();
+    o(s[0]);
+    for (let c = 0; c < s.length - 2 && (n = s[c], !!i()); c++) {
+      if (n._$host) {
+        n = n._$host, l();
         break;
       }
-      if (t.parentNode === i)
+      if (n.parentNode === a)
         break;
     }
   } else l();
-  r(o);
+  o(r);
 }
-function V(e, t, n, o, i) {
-  const r = J(e);
-  if (r) {
-    !n && (n = [...e.childNodes]);
+function oe(e, n, t, r, a) {
+  const o = le(e);
+  if (o) {
+    !t && (t = [...e.childNodes]);
     let s = [];
-    for (let c = 0; c < n.length; c++) {
-      const d = n[c];
+    for (let c = 0; c < t.length; c++) {
+      const d = t[c];
       d.nodeType === 8 && d.data.slice(0, 2) === "!$" ? d.remove() : s.push(d);
     }
-    n = s;
+    t = s;
   }
-  for (; typeof n == "function"; ) n = n();
-  if (t === n) return n;
-  const a = typeof t, l = o !== void 0;
-  if (e = l && n[0] && n[0].parentNode || e, a === "string" || a === "number") {
-    if (r || a === "number" && (t = t.toString(), t === n))
-      return n;
+  for (; typeof t == "function"; ) t = t();
+  if (n === t) return t;
+  const i = typeof n, l = r !== void 0;
+  if (e = l && t[0] && t[0].parentNode || e, i === "string" || i === "number") {
+    if (o || i === "number" && (n = n.toString(), n === t))
+      return t;
     if (l) {
-      let s = n[0];
-      s && s.nodeType === 3 ? s.data !== t && (s.data = t) : s = document.createTextNode(t), n = N(e, n, o, s);
+      let s = t[0];
+      s && s.nodeType === 3 ? s.data !== n && (s.data = n) : s = document.createTextNode(n), t = X(e, t, r, s);
     } else
-      n !== "" && typeof n == "string" ? n = e.firstChild.data = t : n = e.textContent = t;
-  } else if (t == null || a === "boolean") {
-    if (r) return n;
-    n = N(e, n, o);
+      t !== "" && typeof t == "string" ? t = e.firstChild.data = n : t = e.textContent = n;
+  } else if (n == null || i === "boolean") {
+    if (o) return t;
+    t = X(e, t, r);
   } else {
-    if (a === "function")
-      return w(() => {
-        let s = t();
+    if (i === "function")
+      return b(() => {
+        let s = n();
         for (; typeof s == "function"; ) s = s();
-        n = V(e, s, n, o);
-      }), () => n;
-    if (Array.isArray(t)) {
-      const s = [], c = n && Array.isArray(n);
-      if (de(s, t, n, i))
-        return w(() => n = V(e, s, n, o, !0)), () => n;
-      if (r) {
-        if (!s.length) return n;
-        if (o === void 0) return n = [...e.childNodes];
+        t = oe(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;
+      if (o) {
+        if (!s.length) return t;
+        if (r === void 0) return t = [...e.childNodes];
         let d = s[0];
-        if (d.parentNode !== e) return n;
-        const u = [d];
-        for (; (d = d.nextSibling) !== o; ) u.push(d);
-        return n = u;
+        if (d.parentNode !== e) return t;
+        const h = [d];
+        for (; (d = d.nextSibling) !== r; ) h.push(d);
+        return t = h;
       }
       if (s.length === 0) {
-        if (n = N(e, n, o), l) return n;
-      } else c ? n.length === 0 ? Pe(e, s, o) : at(e, n, s) : (n && N(e), Pe(e, s));
-      n = s;
-    } else if (t.nodeType) {
-      if (r && t.parentNode) return n = l ? [t] : t;
-      if (Array.isArray(n)) {
-        if (l) return n = N(e, n, o, t);
-        N(e, n, null, t);
-      } else n == null || n === "" || !e.firstChild ? e.appendChild(t) : e.replaceChild(t, e.firstChild);
-      n = t;
+        if (t = X(e, t, r), l) return t;
+      } else c ? t.length === 0 ? qe(e, s, r) : xt(e, t, s) : (t && X(e), qe(e, s));
+      t = s;
+    } else if (n.nodeType) {
+      if (o && n.parentNode) return t = l ? [n] : n;
+      if (Array.isArray(t)) {
+        if (l) return t = X(e, t, r, n);
+        X(e, t, null, n);
+      } else t == null || t === "" || !e.firstChild ? e.appendChild(n) : e.replaceChild(n, e.firstChild);
+      t = n;
     }
   }
-  return n;
+  return t;
 }
-function de(e, t, n, o) {
-  let i = !1;
-  for (let r = 0, a = t.length; r < a; r++) {
-    let l = t[r], s = n && n[e.length], c;
+function $e(e, n, t, r) {
+  let a = !1;
+  for (let o = 0, i = n.length; o < i; o++) {
+    let l = n[o], s = t && t[e.length], c;
     if (!(l == null || l === !0 || l === !1)) if ((c = typeof l) == "object" && l.nodeType)
       e.push(l);
     else if (Array.isArray(l))
-      i = de(e, l, s) || i;
+      a = $e(e, l, s) || a;
     else if (c === "function")
-      if (o) {
+      if (r) {
         for (; typeof l == "function"; ) l = l();
-        i = de(
+        a = $e(
           e,
           Array.isArray(l) ? l : [l],
           Array.isArray(s) ? s : [s]
-        ) || i;
+        ) || a;
       } else
-        e.push(l), i = !0;
+        e.push(l), a = !0;
     else {
       const d = String(l);
       s && s.nodeType === 3 && s.data === d ? e.push(s) : e.push(document.createTextNode(d));
     }
   }
-  return i;
+  return a;
 }
-function Pe(e, t, n = null) {
-  for (let o = 0, i = t.length; o < i; o++) e.insertBefore(t[o], n);
+function qe(e, n, t = null) {
+  for (let r = 0, a = n.length; r < a; r++) e.insertBefore(n[r], t);
 }
-function N(e, t, n, o) {
-  if (n === void 0) return e.textContent = "";
-  const i = o || document.createTextNode("");
-  if (t.length) {
-    let r = !1;
-    for (let a = t.length - 1; a >= 0; a--) {
-      const l = t[a];
-      if (i !== l) {
+function X(e, n, t, r) {
+  if (t === void 0) return e.textContent = "";
+  const a = r || document.createTextNode("");
+  if (n.length) {
+    let o = !1;
+    for (let i = n.length - 1; i >= 0; i--) {
+      const l = n[i];
+      if (a !== l) {
         const s = l.parentNode === e;
-        !r && !a ? s ? e.replaceChild(i, l) : e.insertBefore(i, n) : s && l.remove();
-      } else r = !0;
+        !o && !i ? s ? e.replaceChild(a, l) : e.insertBefore(a, t) : s && l.remove();
+      } else o = !0;
     }
-  } else e.insertBefore(i, n);
-  return [i];
+  } else e.insertBefore(a, t);
+  return [a];
 }
-const gt = "http://www.w3.org/2000/svg";
-function mt(e, t = !1) {
-  return t ? document.createElementNS(gt, e) : document.createElement(e);
+const Tt = "http://www.w3.org/2000/svg";
+function It(e, n = !1) {
+  return n ? document.createElementNS(Tt, e) : document.createElement(e);
 }
-function vt(e) {
-  const { useShadow: t } = e, n = document.createTextNode(""), o = () => e.mount || document.body, i = pe();
-  let r, a = !!P.context;
-  return oe(
+function Ot(e) {
+  const { useShadow: n } = e, t = document.createTextNode(""), r = () => e.mount || document.body, a = De();
+  let o, i = !!L.context;
+  return Y(
     () => {
-      a && (pe().user = a = !1), r || (r = Xe(i, () => p(() => e.children)));
-      const l = o();
+      i && (De().user = i = !1), o || (o = lt(a, () => S(() => e.children)));
+      const l = r();
       if (l instanceof HTMLHeadElement) {
-        const [s, c] = M(!1), d = () => c(!0);
-        Te((u) => m(l, () => s() ? u() : r(), null)), K(d);
+        const [s, c] = A(!1), d = () => c(!0);
+        Ue((h) => v(l, () => s() ? h() : o(), null)), ee(d);
       } else {
-        const s = mt(e.isSVG ? "g" : "div", e.isSVG), c = t && s.attachShadow ? s.attachShadow({
+        const s = It(e.isSVG ? "g" : "div", e.isSVG), c = n && s.attachShadow ? s.attachShadow({
           mode: "open"
         }) : s;
         Object.defineProperty(s, "_$host", {
           get() {
-            return n.parentNode;
+            return t.parentNode;
           },
           configurable: !0
-        }), m(c, r), l.appendChild(s), e.ref && e.ref(s), K(() => l.removeChild(s));
+        }), v(c, o), l.appendChild(s), e.ref && e.ref(s), ee(() => l.removeChild(s));
       }
     },
     void 0,
     {
-      render: !a
+      render: !i
     }
-  ), n;
+  ), t;
 }
-const wt = (e, t) => {
-  let n;
-  return (...o) => {
-    clearTimeout(n), n = window.setTimeout(() => e(...o), t);
+const Mt = 5e3, At = (e) => {
+  let n = null;
+  const t = () => {
+    n !== null && (window.clearTimeout(n), n = null);
   };
-}, bt = (e, t) => {
-  W({
-    event: "keydown",
-    callback: (n) => {
-      n.key === e && t(n);
+  return {
+    show: (r) => {
+      t(), e.setState({
+        notification: {
+          ...r,
+          show: !0
+        }
+      }), n = window.setTimeout(() => {
+        e.setState({
+          notification: {
+            ...r,
+            show: !1
+          }
+        }), n = null;
+      }, Mt);
+    },
+    clear: () => {
+      t(), e.setState({
+        notification: {
+          show: !1,
+          type: null,
+          message: null
+        }
+      });
     }
-  });
-}, W = (e) => {
-  const { event: t, callback: n, onMount: o, onCleanup: i } = e, r = (a) => {
-    n(a);
   };
-  fe(() => {
-    o == null || o(), window.addEventListener(t, r);
-  }), K(() => {
-    i == null || i(), window.removeEventListener(t, r);
-  });
-}, ge = (e) => {
-  const { target: t, options: n, callback: o, onMount: i, onCleanup: r } = e, a = new MutationObserver(o);
-  fe(() => {
-    i == null || i(), a.observe(t, n);
-  }), K(() => {
-    r == null || r(), a.disconnect();
-  });
-}, yt = "echo_", F = "echo_page_state", Me = () => {
-  window.dispatchEvent(new CustomEvent("echo-storage-change"));
-}, Ae = (e) => `${yt}${e}`, je = (e, t) => {
+}, Ke = (e, n) => {
+  if (!n) return e;
+  const t = { ...e };
+  for (const r in n)
+    n[r] && typeof n[r] == "object" && !Array.isArray(n[r]) ? t[r] = Ke(e[r], n[r]) : t[r] = n[r];
+  return t;
+}, Dt = (e, n) => {
+  let t;
+  return (...r) => {
+    clearTimeout(t), t = window.setTimeout(() => e(...r), n);
+  };
+}, Ft = "echo_", K = "echo-pages", Ge = (e) => {
+  if (!e || e === "/") return "/";
+  const n = e.split("/");
+  return n.length <= 4 ? e : `/${n[1]}/.../${n[n.length - 1]}`;
+}, Xe = () => {
+  window.dispatchEvent(new Event("echo-storage-change"));
+}, Je = (e) => `${Ft}${e}`, G = (e, n) => {
   try {
-    const n = localStorage.getItem(Ae(e));
-    return n ? JSON.parse(n) : t;
+    const t = localStorage.getItem(Je(e));
+    return t ? JSON.parse(t) : n;
   } catch {
-    return t;
+    return n;
   }
-}, he = (e, t) => {
+}, ae = (e, n) => {
   try {
-    localStorage.setItem(Ae(e), JSON.stringify(t));
-  } catch (n) {
-    console.warn("Failed to save to localStorage:", n);
+    localStorage.setItem(Je(e), JSON.stringify(n));
+  } catch (t) {
+    console.warn("Failed to save to localStorage:", t);
   }
-}, ae = () => window.location.pathname, pt = (e, t) => {
+}, Ee = () => {
+  const e = window.location.pathname || "/", n = window.location.search;
+  return `${e}${n}`;
+}, Lt = (e, n) => {
   try {
-    const n = localStorage.getItem(F), o = n ? JSON.parse(n) : {};
-    if (!t.feedback.comment && (!t.drawing.shapes || t.drawing.shapes.length === 0))
-      delete o[e];
-    else {
-      const i = window.location.search || void 0, r = {
-        feedback: {
-          comment: t.feedback.comment
-        },
-        drawing: {
-          shapes: t.drawing.shapes
-        },
-        latestQuery: i
-      };
-      o[e] = r;
-    }
-    localStorage.setItem(F, JSON.stringify(o)), Me();
-  } catch (n) {
-    console.error("Failed to save page state:", n);
+    if (!n.feedback.hasUserInteracted && n.drawing.shapes.length < 1) return;
+    const t = {
+      message: n.feedback.message,
+      customInputValues: n.feedback.customInputValues
+    }, r = G(K, {}), a = Ge(e);
+    (t || n.drawing.shapes.length > 0) && (r[a] = {
+      ...r[a] || {},
+      ...t ? { feedback: t } : {},
+      drawing: {
+        shapes: n.drawing.shapes
+      }
+    }), ae(K, r), Xe();
+  } catch (t) {
+    console.warn("Failed to save page state:", t);
   }
-}, me = (e) => {
+}, ze = (e) => {
   try {
-    const t = localStorage.getItem(F);
-    return t && JSON.parse(t)[e] || null;
-  } catch (t) {
-    return console.error("Failed to load page state:", t), null;
+    return G(K, {})[e];
+  } catch (n) {
+    console.error("Failed to load page state:", n);
+    return;
   }
-}, Fe = (e) => {
+}, Ze = (e) => {
   try {
-    const t = localStorage.getItem(F);
-    if (!t) return;
-    const n = JSON.parse(t);
-    delete n[e], localStorage.setItem(F, JSON.stringify(n)), Me();
-  } catch (t) {
-    console.error("Failed to clear page state:", t);
+    const n = G(K, {});
+    delete n[e], ae(K, n), Xe();
+  } catch (n) {
+    console.error("Failed to clear page state:", n);
   }
-}, Le = () => {
+}, Qe = () => {
   try {
-    const e = localStorage.getItem(F);
-    if (!e) return 0;
-    const t = JSON.parse(e);
-    return Object.keys(t).length;
+    const e = G(K, {});
+    return Object.keys(e).length;
   } catch (e) {
     return console.error("Failed to get stored pages count:", e), 0;
   }
-}, se = () => {
+}, xe = () => {
   try {
-    const e = localStorage.getItem(F);
-    if (!e) return [];
-    const t = JSON.parse(e);
-    return Object.entries(t).map(([n, o]) => ({
-      path: n,
-      state: o
+    const e = G(K, {});
+    return Object.entries(e).map(([n, t]) => ({
+      path: Ge(n),
+      state: t
     }));
   } catch (e) {
     return console.error("Failed to get stored pages:", e), [];
   }
-}, ue = Symbol("store-raw"), B = Symbol("store-node"), $ = Symbol("store-has"), Ne = Symbol("store-self");
-function Be(e) {
-  let t = e[A];
-  if (!t && (Object.defineProperty(e, A, {
-    value: t = new Proxy(e, St)
+}, jt = (e) => Dt((n, t, r = !1) => {
+  (!r || t.feedback.message.trim().length > 0 || t.drawing.shapes.length > 0) && (Lt(n, t), e.setState({ pagesCount: Qe() }));
+}, 1e3), Pe = Symbol("store-raw"), J = Symbol("store-node"), j = Symbol("store-has"), et = Symbol("store-self");
+function tt(e) {
+  let n = e[R];
+  if (!n && (Object.defineProperty(e, R, {
+    value: n = new Proxy(e, Vt)
   }), !Array.isArray(e))) {
-    const n = Object.keys(e), o = Object.getOwnPropertyDescriptors(e);
-    for (let i = 0, r = n.length; i < r; i++) {
-      const a = n[i];
-      o[a].get && Object.defineProperty(e, a, {
-        enumerable: o[a].enumerable,
-        get: o[a].get.bind(t)
+    const t = Object.keys(e), r = Object.getOwnPropertyDescriptors(e);
+    for (let a = 0, o = t.length; a < o; a++) {
+      const i = t[a];
+      r[i].get && Object.defineProperty(e, i, {
+        enumerable: r[i].enumerable,
+        get: r[i].get.bind(n)
       });
     }
   }
-  return t;
+  return n;
 }
-function ee(e) {
-  let t;
-  return e != null && typeof e == "object" && (e[A] || !(t = Object.getPrototypeOf(e)) || t === Object.prototype || Array.isArray(e));
+function fe(e) {
+  let n;
+  return e != null && typeof e == "object" && (e[R] || !(n = Object.getPrototypeOf(e)) || n === Object.prototype || Array.isArray(e));
 }
-function R(e, t = /* @__PURE__ */ new Set()) {
-  let n, o, i, r;
-  if (n = e != null && e[ue]) return n;
-  if (!ee(e) || t.has(e)) return e;
+function ie(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 (Array.isArray(e)) {
-    Object.isFrozen(e) ? e = e.slice(0) : t.add(e);
-    for (let a = 0, l = e.length; a < l; a++)
-      i = e[a], (o = R(i, t)) !== i && (e[a] = o);
+    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);
   } else {
-    Object.isFrozen(e) ? e = Object.assign({}, e) : t.add(e);
-    const a = Object.keys(e), l = Object.getOwnPropertyDescriptors(e);
-    for (let s = 0, c = a.length; s < c; s++)
-      r = a[s], !l[r].get && (i = e[r], (o = R(i, t)) !== i && (e[r] = o));
+    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));
   }
   return e;
 }
-function te(e, t) {
-  let n = e[t];
-  return n || Object.defineProperty(e, t, {
-    value: n = /* @__PURE__ */ Object.create(null)
-  }), n;
+function me(e, n) {
+  let t = e[n];
+  return t || Object.defineProperty(e, n, {
+    value: t = /* @__PURE__ */ Object.create(null)
+  }), t;
 }
-function X(e, t, n) {
-  if (e[t]) return e[t];
-  const [o, i] = M(n, {
+function se(e, n, t) {
+  if (e[n]) return e[n];
+  const [r, a] = A(t, {
     equals: !1,
     internal: !0
   });
-  return o.$ = i, e[t] = o;
+  return r.$ = a, e[n] = r;
 }
-function xt(e, t) {
-  const n = Reflect.getOwnPropertyDescriptor(e, t);
-  return !n || n.get || !n.configurable || t === A || t === B || (delete n.value, delete n.writable, n.get = () => e[A][t]), n;
+function Nt(e, n) {
+  const t = Reflect.getOwnPropertyDescriptor(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 Ye(e) {
-  ce() && X(te(e, B), Ne)();
+function nt(e) {
+  Ce() && se(me(e, J), et)();
 }
-function kt(e) {
-  return Ye(e), Reflect.ownKeys(e);
+function qt(e) {
+  return nt(e), Reflect.ownKeys(e);
 }
-const St = {
-  get(e, t, n) {
-    if (t === ue) return e;
-    if (t === A) return n;
-    if (t === xe)
-      return Ye(e), n;
-    const o = te(e, B), i = o[t];
-    let r = i ? i() : e[t];
-    if (t === B || t === $ || t === "__proto__") return r;
-    if (!i) {
-      const a = Object.getOwnPropertyDescriptor(e, t);
-      ce() && (typeof r != "function" || e.hasOwnProperty(t)) && !(a && a.get) && (r = X(o, t, r)());
+const Vt = {
+  get(e, n, t) {
+    if (n === Pe) return e;
+    if (n === R) return t;
+    if (n === Fe)
+      return nt(e), t;
+    const r = me(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)());
     }
-    return ee(r) ? Be(r) : r;
+    return fe(o) ? tt(o) : o;
   },
-  has(e, t) {
-    return t === ue || t === A || t === xe || t === B || t === $ || t === "__proto__" ? !0 : (ce() && X(te(e, $), t)(), t in e);
+  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);
   },
   set() {
     return !0;
@@ -629,75 +642,75 @@ const St = {
   deleteProperty() {
     return !0;
   },
-  ownKeys: kt,
-  getOwnPropertyDescriptor: xt
+  ownKeys: qt,
+  getOwnPropertyDescriptor: Nt
 };
-function ne(e, t, n, o = !1) {
-  if (!o && e[t] === n) return;
-  const i = e[t], r = e.length;
-  n === void 0 ? (delete e[t], e[$] && e[$][t] && i !== void 0 && e[$][t].$()) : (e[t] = n, e[$] && e[$][t] && i === void 0 && e[$][t].$());
-  let a = te(e, B), l;
-  if ((l = X(a, t, i)) && l.$(() => n), Array.isArray(e) && e.length !== r) {
-    for (let s = e.length; s < r; s++) (l = a[s]) && l.$();
-    (l = X(a, "length", r)) && l.$(e.length);
+function ve(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) {
+    for (let s = e.length; s < o; s++) (l = i[s]) && l.$();
+    (l = se(i, "length", o)) && l.$(e.length);
   }
-  (l = a[Ne]) && l.$();
+  (l = i[et]) && l.$();
 }
-function He(e, t) {
-  const n = Object.keys(t);
-  for (let o = 0; o < n.length; o += 1) {
-    const i = n[o];
-    ne(e, i, t[i]);
+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]);
   }
 }
-function Ct(e, t) {
-  if (typeof t == "function" && (t = t(e)), t = R(t), Array.isArray(t)) {
-    if (e === t) return;
-    let n = 0, o = t.length;
-    for (; n < o; n++) {
-      const i = t[n];
-      e[n] !== i && ne(e, n, i);
+function Bt(e, n) {
+  if (typeof n == "function" && (n = n(e)), n = ie(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);
     }
-    ne(e, "length", o);
-  } else He(e, t);
+    ve(e, "length", r);
+  } else rt(e, n);
 }
-function U(e, t, n = []) {
-  let o, i = e;
-  if (t.length > 1) {
-    o = t.shift();
-    const a = typeof o, l = Array.isArray(e);
-    if (Array.isArray(o)) {
-      for (let s = 0; s < o.length; s++)
-        U(e, [o[s]].concat(t), n);
+function re(e, n, t = []) {
+  let r, a = e;
+  if (n.length > 1) {
+    r = n.shift();
+    const i = typeof r, l = Array.isArray(e);
+    if (Array.isArray(r)) {
+      for (let s = 0; s < r.length; s++)
+        re(e, [r[s]].concat(n), t);
       return;
-    } else if (l && a === "function") {
+    } else if (l && i === "function") {
       for (let s = 0; s < e.length; s++)
-        o(e[s], s) && U(e, [s].concat(t), n);
+        r(e[s], s) && re(e, [s].concat(n), t);
       return;
-    } else if (l && a === "object") {
-      const { from: s = 0, to: c = e.length - 1, by: d = 1 } = o;
-      for (let u = s; u <= c; u += d)
-        U(e, [u].concat(t), n);
+    } else if (l && i === "object") {
+      const { from: s = 0, to: c = e.length - 1, by: d = 1 } = r;
+      for (let h = s; h <= c; h += d)
+        re(e, [h].concat(n), t);
       return;
-    } else if (t.length > 1) {
-      U(e[o], t, [o].concat(n));
+    } else if (n.length > 1) {
+      re(e[r], n, [r].concat(t));
       return;
     }
-    i = e[o], n = [o].concat(n);
+    a = e[r], t = [r].concat(t);
   }
-  let r = t[0];
-  typeof r == "function" && (r = r(i, n), r === i) || o === void 0 && r == null || (r = R(r), o === void 0 || ee(i) && ee(r) && !Array.isArray(r) ? He(i, r) : ne(e, o, r));
+  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));
 }
-function ve(...[e, t]) {
-  const n = R(e || {}), o = Array.isArray(n), i = Be(n);
-  function r(...a) {
-    Ge(() => {
-      o && a.length === 1 ? Ct(n, a[0]) : U(n, a);
+function Te(...[e, n]) {
+  const t = ie(e || {}), r = Array.isArray(t), a = tt(t);
+  function o(...i) {
+    ct(() => {
+      r && i.length === 1 ? Bt(t, i[0]) : re(t, i);
     });
   }
-  return [i, r];
+  return [a, o];
 }
-const z = {
+const B = {
   rectangle: {
     id: "rectangle",
     label: "Highlight",
@@ -718,120 +731,159 @@ const z = {
       default: 1
     }
   }
-}, Pt = (e) => {
-  const t = e.replace("#", ""), n = Number.parseInt(t.slice(0, 2), 16) / 255, o = Number.parseInt(t.slice(2, 2), 16) / 255, i = Number.parseInt(t.slice(4, 2), 16) / 255;
-  return 0.2126 * n + 0.7152 * o + 0.0722 * i;
-}, $t = (e) => Pt(e) < 0.5 ? "#FFFFFF" : "#000000", We = (e, t) => {
-  if (!t) return e;
-  const n = { ...e };
-  for (const o in t)
-    t[o] && typeof t[o] == "object" && !Array.isArray(t[o]) ? n[o] = We(e[o], t[o]) : n[o] = t[o];
-  return n;
-};
-let E = [], S = null, Y = null, H = null;
-const le = (e, t) => (...n) => {
-  const o = n.map((i) => typeof i == "string" ? i : i instanceof Error ? i.stack || i.message : JSON.stringify(i)).join(" ");
-  E.push({
+}, Wt = (e) => {
+  const n = e.replace("#", ""), t = Number.parseInt(n.slice(0, 2), 16) / 255, r = Number.parseInt(n.slice(2, 2), 16) / 255, a = Number.parseInt(n.slice(4, 2), 16) / 255;
+  return 0.2126 * t + 0.7152 * r + 0.0722 * a;
+}, _t = (e) => Wt(e) < 0.5 ? "#FFFFFF" : "#000000";
+let N = [], O = null, Z = null, Q = null;
+const ke = (e, n) => (...t) => {
+  const r = (o) => {
+    if (typeof o == "string") return o;
+    if (o instanceof Error) return o.stack || o.message;
+    try {
+      const i = /* @__PURE__ */ new WeakSet();
+      return JSON.stringify(o, (s, c) => {
+        if (typeof c == "object" && c !== null) {
+          if (c instanceof Node) return `[${c.nodeName} Element]`;
+          if (i.has(c)) return "[Circular Reference]";
+          i.add(c);
+        }
+        return c;
+      });
+    } catch {
+      return "[Unable to stringify value]";
+    }
+  }, a = t.map(r).join(" ");
+  N.push({
     type: e,
-    message: o,
+    message: a,
     timestamp: (/* @__PURE__ */ new Date()).toISOString()
-  }), E.length > 1e3 && (E = E.slice(-1e3)), t.apply(console, n);
-}, Et = () => {
-  S || (S = {
+  }), N.length > 1e3 && (N = N.slice(-1e3)), n.apply(console, t);
+}, Ht = () => {
+  O || (O = {
     log: console.log,
     warn: console.warn,
     error: console.error
-  }, Y = window.onerror, H = window.onunhandledrejection, window.onerror = (e, t, n, o, i) => {
-    const r = (i == null ? void 0 : i.stack) || (i == null ? void 0 : i.message) || e;
-    return E.push({
+  }, Z = window.onerror, Q = window.onunhandledrejection, window.onerror = (e, n, t, r, a) => {
+    const o = (a == null ? void 0 : a.stack) || (a == null ? void 0 : a.message) || e;
+    return N.push({
       type: "error",
-      message: `Uncaught Error: ${r}
-Location: ${t}:${n}:${o}`,
+      message: `Uncaught Error: ${o}
+Location: ${n}:${t}:${r}`,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    }), Y ? Y(e, t, n, o, i) : !1;
+    }), Z ? Z(e, n, t, r, a) : !1;
   }, window.onunhandledrejection = (e) => {
-    const t = e.reason;
-    E.push({
+    const n = e.reason;
+    N.push({
       type: "error",
-      message: `Unhandled Promise Rejection: ${(t == null ? void 0 : t.stack) || (t == null ? void 0 : t.message) || t}`,
+      message: `Unhandled Promise Rejection: ${(n == null ? void 0 : n.stack) || (n == null ? void 0 : n.message) || n}`,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    }), H && H(e);
-  }, console.log = le("log", S.log), console.warn = le("warn", S.warn), console.error = le("error", S.error), window.addEventListener("error", (e) => {
-    const { message: t, filename: n, lineno: o, colno: i, error: r } = e, a = (r == null ? void 0 : r.stack) || (r == null ? void 0 : r.message) || t;
-    E.push({
+    }), Q && Q(e);
+  }, console.log = ke("log", O.log), console.warn = ke("warn", O.warn), console.error = ke("error", O.error), window.addEventListener("error", (e) => {
+    const { message: n, filename: t, lineno: r, colno: a, error: o } = e, i = (o == null ? void 0 : o.stack) || (o == null ? void 0 : o.message) || n;
+    N.push({
       type: "error",
-      message: `Uncaught Error: ${a}
-Location: ${n}:${o}:${i}`,
+      message: `Uncaught Error: ${i}
+Location: ${t}:${r}:${a}`,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     });
   }));
-}, zt = () => {
-  S && (console.log = S.log, console.warn = S.warn, console.error = S.error, S = null), Y && (window.onerror = Y, Y = null), H && (window.onunhandledrejection = H, H = null), window.removeEventListener("error", () => {
-  }), E = [];
-}, _e = () => [...E], Ot = () => {
+}, Ut = () => {
+  O && (console.log = O.log, console.warn = O.warn, console.error = O.error, O = null), Z && (window.onerror = Z, Z = null), Q && (window.onunhandledrejection = Q, Q = null), window.removeEventListener("error", () => {
+  }), N = [];
+}, 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);
-}, q = (e, { useClientCoords: t = !1 } = {}) => {
-  const o = typeof TouchEvent < "u" && e instanceof TouchEvent ? e.touches[0] : null;
+}, ue = (e, { useClientCoords: n = !1 } = {}) => {
+  const r = typeof TouchEvent < "u" && e instanceof TouchEvent ? e.touches[0] : null;
   return {
-    x: o ? t ? o.clientX : o.pageX : t ? e.clientX : e.pageX,
-    y: o ? t ? o.clientY : o.pageY : t ? e.clientY : e.pageY
+    x: r ? n ? r.clientX : r.pageX : n ? e.clientX : e.pageX,
+    y: r ? n ? r.clientY : r.pageY : n ? e.clientY : e.pageY
   };
-}, $e = (e, t) => {
-  const n = t.x - e.x, o = t.y - e.y;
-  return Math.sqrt(n * n + o * o);
-}, Ue = (e) => {
+}, Ve = (e, n) => {
+  const t = n.x - e.x, r = n.y - e.y;
+  return Math.sqrt(t * t + r * r);
+}, ot = (e) => {
   if (e.length !== 2) return null;
-  const [t, n] = e;
+  const [n, t] = e;
   return {
-    x: Math.min(t.x, n.x),
-    y: Math.min(t.y, n.y),
-    width: Math.abs(n.x - t.x),
-    height: Math.abs(n.y - t.y)
+    x: Math.min(n.x, t.x),
+    y: Math.min(n.y, t.y),
+    width: Math.abs(t.x - n.x),
+    height: Math.abs(t.y - n.y)
   };
-}, Tt = (e) => e.length < 2 ? null : `M ${e[0].x} ${e[0].y} ${e.slice(1).map((t) => `L ${t.x} ${t.y}`).join(" ")}`, It = (e, t) => {
-  const n = document.createElement("canvas");
-  return n.width = e, n.height = t, n;
-}, Dt = (e) => e.hasAttribute("data-hide-when-drawing"), Mt = async () => {
+}, 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;
+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);
+}, 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);
+  }, 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);
+  });
+}, Zt = () => {
+  we && (window.EventTarget.prototype.addEventListener = Ie, window.EventTarget.prototype.removeEventListener = be, we = !1);
+}, M = (e) => {
+  const { event: n, callback: t, onMount: r, onCleanup: a, useOriginal: o = !0 } = e;
+  ye(() => {
+    r == null || r(), o ? Gt(window, n, t) : window.addEventListener(n, t);
+  }), ee(() => {
+    a == null || a(), o ? Xt(window, n, t) : window.removeEventListener(n, t);
+  });
+}, Oe = (e) => {
+  const { target: n, options: t, callback: r, onMount: a, onCleanup: o } = e, i = new MutationObserver(r);
+  ye(() => {
+    a == null || a(), i.observe(n, t);
+  }), ee(() => {
+    o == null || o(), i.disconnect();
+  });
+}, Qt = (e, n) => function(t) {
+  n(t), typeof e == "function" ? e.call(this, t) : e.handleEvent(t);
+}, en = (e) => e.hasAttribute("data-hide-when-drawing"), tn = async () => {
+  var e;
   try {
-    const e = await Qe(document.body, {
-      backgroundColor: null,
+    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, {
       logging: !1,
       useCORS: !0,
-      scale: 1,
+      scale: window.devicePixelRatio,
       allowTaint: !0,
-      foreignObjectRendering: !0,
-      ignoreElements: Dt
-    }), t = It(e.width, e.height), n = t.getContext("2d");
-    if (!n)
-      throw new Error("Failed to get canvas context");
-    return n.drawImage(e, 0, 0), t.toDataURL();
-  } catch (e) {
-    console.error("Failed to capture screenshot:", e);
+      ignoreElements: (r) => en(r)
+    });
+    return n.remove(), t.toDataURL("image/png");
+  } catch (n) {
+    console.error("Failed to capture screenshot:", n);
     return;
   }
-}, At = (e, t, n) => {
-  let o = `M0 0 H${e.width} V${e.height} H0 Z`;
-  if (t.length === 2) {
-    const [i, r] = t;
-    o += ` M${i.x} ${i.y} h${r.x - i.x} v${r.y - i.y} h${i.x - r.x} v${i.y - r.y}`;
+}, nn = (e, n, t) => {
+  let r = `M0 0 H${e.width} V${e.height} H0 Z`;
+  if (n.length === 2) {
+    const [a, o] = n;
+    r += ` M${a.x} ${a.y} h${o.x - a.x} v${o.y - a.y} h${a.x - o.x} v${a.y - o.y}`;
   }
-  for (const i of n)
-    if (i.type === "rectangle") {
-      const [r, a] = i.points;
-      o += ` M${r.x} ${r.y} h${a.x - r.x} v${a.y - r.y} h${r.x - a.x} v${r.y - a.y}`;
+  for (const a of t)
+    if (a.type === "rectangle") {
+      const [o, i] = a.points;
+      r += ` M${o.x} ${o.y} h${i.x - o.x} v${i.y - o.y} h${o.x - i.x} v${o.y - i.y}`;
     }
-  return o;
-}, jt = (e) => {
+  return r;
+}, rn = (e) => {
   if (typeof e != "object" || e === null)
     throw new Error("Echo initialization failed: options must be an object");
   if (typeof e.onSubmit != "function")
     throw new Error("Echo initialization failed: onSubmit must be a function");
   if (e.primaryColor && !/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(e.primaryColor))
     throw new Error("Echo initialization failed: primaryColor must be a valid hex color");
-}, Ee = 5, ze = (e, t) => z[e].getCursor(t), Ft = (e, t, n) => {
+}, Be = 5, We = (e, n) => B[e].getCursor(n), on = (e, n, t) => {
   var l, s;
-  const [o, i] = ve({
+  const [r, a] = Te({
     isDrawing: !1,
     currentPoints: [],
     selectedShapeId: null,
@@ -839,124 +891,124 @@ Location: ${n}:${o}:${i}`,
     showTooltip: !0,
     mousePosition: { x: 0, y: 0 },
     selectedColor: e.primaryColor,
-    shapes: ((s = (l = me(t)) == null ? void 0 : l.drawing) == null ? void 0 : s.shapes) || [],
+    shapes: ((s = (l = ze(n)) == null ? void 0 : l.drawing) == null ? void 0 : s.shapes) || [],
     hasDrawn: !1,
     isDragging: !1,
     dragStartPos: null,
     initialClickPos: null,
     dragOffset: null,
-    cursor: ze("rectangle", e.primaryColor)
-  }), r = (c, d = !1) => {
+    cursor: We("rectangle", e.primaryColor)
+  }), o = (c, d = !1) => {
     if (c.selectedTool || c.selectedColor) {
-      const u = c.selectedTool || o.selectedTool, f = c.selectedColor || o.selectedColor;
-      c.cursor = ze(u, f);
+      const h = c.selectedTool || r.selectedTool, f = c.selectedColor || r.selectedColor;
+      c.cursor = We(h, f);
     }
-    i(c), n == null || n(c, d);
-  }, a = {
+    a(c), t == null || t(c, d);
+  }, i = {
     startDrawing: (c) => {
-      r({
+      o({
         isDrawing: !0,
         currentPoints: [c],
         selectedShapeId: null
       });
     },
     updateDrawing: (c) => {
-      o.selectedTool === "rectangle" ? r({ currentPoints: [o.currentPoints[0], c] }) : o.selectedTool === "path" && r({
-        currentPoints: [...o.currentPoints, c]
+      r.selectedTool === "rectangle" ? o({ currentPoints: [r.currentPoints[0], c] }) : r.selectedTool === "path" && o({
+        currentPoints: [...r.currentPoints, c]
       });
     },
     finishDrawing: () => {
-      if (o.currentPoints.length >= 2) {
+      if (r.currentPoints.length >= 2) {
         const c = {
           id: Math.random().toString(36).substring(2),
-          type: o.selectedTool,
-          color: o.selectedColor,
-          points: o.currentPoints
+          type: r.selectedTool,
+          color: r.selectedColor,
+          points: r.currentPoints
         };
-        r({ shapes: [...o.shapes, c] });
+        o({ shapes: [...r.shapes, c] });
       }
-      r({ isDrawing: !1, currentPoints: [] });
+      o({ isDrawing: !1, currentPoints: [] });
     },
     handleShapeClick: (c) => {
     },
     handleStart: (c) => {
       if (c instanceof MouseEvent) {
-        const u = c.target;
-        if (!u.classList.contains("echo-drawing-layer-mask") && !u.classList.contains("echo-shape"))
+        const h = c.target;
+        if (!h.classList.contains("echo-drawing-layer-mask") && !h.classList.contains("echo-shape"))
           return;
       }
-      const d = q(c);
+      const d = ue(c);
       if (c.target instanceof SVGElement && c.target.classList.contains("echo-shape")) {
-        const u = c.target.dataset.shapeId;
-        if (u && o.selectedShapeId === u) {
-          const f = o.shapes.find((v) => v.id === u);
+        const h = c.target.dataset.shapeId;
+        if (h && r.selectedShapeId === h) {
+          const f = r.shapes.find((m) => m.id === h);
           if (f) {
-            a.startDrag(d), a.updateDragOffset(f, d);
+            i.startDrag(d), i.updateDragOffset(f, d);
             return;
           }
         }
       }
-      a.setInitialClick(d);
+      i.setInitialClick(d);
     },
     handleMove: (c) => {
-      const d = q(c, { useClientCoords: !0 }), u = q(c);
-      if (r({ mousePosition: d }), o.isDragging && o.selectedShapeId && o.dragStartPos && o.shapes.find((v) => v.id === o.selectedShapeId)) {
-        const v = u.x - o.dragStartPos.x, y = u.y - o.dragStartPos.y, k = o.shapes.map((I) => I.id === o.selectedShapeId ? {
-          ...I,
-          points: I.points.map((L) => ({
-            x: L.x + v,
-            y: L.y + y
+      const d = ue(c, { useClientCoords: !0 }), h = ue(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
           }))
-        } : I);
-        r({ shapes: k }), a.startDrag(u);
+        } : C);
+        o({ shapes: x }), i.startDrag(h);
         return;
       }
-      if (o.initialClickPos && !o.isDrawing) {
-        $e(o.initialClickPos, u) >= Ee && a.startDrawing(o.initialClickPos);
+      if (r.initialClickPos && !r.isDrawing) {
+        Ve(r.initialClickPos, h) >= Be && i.startDrawing(r.initialClickPos);
         return;
       }
-      o.isDrawing && a.updateDrawing(u);
+      r.isDrawing && i.updateDrawing(h);
     },
     handleEnd: (c) => {
-      if (o.isDragging) {
-        a.stopDrag();
+      if (r.isDragging) {
+        i.stopDrag();
         return;
       }
-      if (o.initialClickPos && !o.isDrawing) {
-        const d = q(c);
-        if ($e(o.initialClickPos, d) < Ee && c.target instanceof SVGElement && c.target.classList.contains("echo-shape")) {
+      if (r.initialClickPos && !r.isDrawing) {
+        const d = ue(c);
+        if (Ve(r.initialClickPos, d) < Be && c.target instanceof SVGElement && c.target.classList.contains("echo-shape")) {
           const f = c.target.dataset.shapeId;
-          f && r({ selectedShapeId: f });
+          f && o({ selectedShapeId: f });
         }
       }
-      a.setInitialClick(null), a.finishDrawing();
+      i.setInitialClick(null), i.finishDrawing();
     },
     handleEnter: (c) => {
-      c.target === c.currentTarget && !o.hasDrawn && r({ showTooltip: !0 });
+      c.target === c.currentTarget && !r.hasDrawn && o({ showTooltip: !0 });
     },
     handleLeave: (c) => {
-      c.target === c.currentTarget && r({ showTooltip: !1 });
+      c.target === c.currentTarget && o({ showTooltip: !1 });
     },
     startDrag: (c) => {
-      r({
+      o({
         isDragging: !0,
         dragStartPos: c
       });
     },
     stopDrag: () => {
-      r({
+      o({
         isDragging: !1,
         dragStartPos: null,
         dragOffset: null
       });
     },
     setInitialClick: (c) => {
-      r({
+      o({
         initialClickPos: c
       });
     },
     updateDragOffset: (c, d) => {
-      r({
+      o({
         dragOffset: {
           x: d.x - c.points[0].x,
           y: d.y - c.points[0].y
@@ -965,26 +1017,35 @@ Location: ${n}:${o}:${i}`,
     }
   };
   return {
-    state: o,
-    setState: r,
-    methods: a
+    state: r,
+    setState: o,
+    methods: i
   };
-}, Lt = (e, t, n) => {
-  var a, l;
-  const [o, i] = ve({
-    comment: ((l = (a = me(t)) == null ? void 0 : a.feedback) == null ? void 0 : l.comment) || "",
+}, 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),
+    {}
+  )) || {}, o = ze(n), i = (o == null ? void 0 : o.feedback.customInputValues) || {}, l = {
+    ...a,
+    ...i
+  }, [s, c] = Te({
+    message: ((h = o == null ? void 0 : o.feedback) == null ? void 0 : h.message) || "",
     screenshot: void 0,
     isCapturing: !1,
-    isMinimized: !1
+    isMinimized: !1,
+    customInputValues: l,
+    hasUserInteracted: !1
   });
   return {
-    state: o,
-    setState: (s, c = !1) => {
-      i(s), n == null || n(s, c);
+    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));
     }
   };
-}, Nt = (e, t) => {
-  const [n, o] = ve({
+}, sn = (e, n) => {
+  const [t, r] = Te({
     text: e.textConfig,
     isOpen: !1,
     primaryColor: e.primaryColor,
@@ -998,125 +1059,235 @@ Location: ${n}:${o}:${i}`,
       height: document.documentElement.scrollHeight
     },
     isStoredFeedbackOpen: !1,
-    pagesCount: Le(),
-    welcomeMessageIsClosing: !1
+    pagesCount: Qe(),
+    welcomeMessageIsClosing: !1,
+    position: e.position,
+    customInputs: e.customInputs
   });
   return {
-    state: n,
-    setState: o
+    state: t,
+    setState: r
   };
-}, Bt = (e) => {
-  let t = ae();
-  const n = wt((c, d = !1) => {
-    (d || o.state.comment.trim().length > 0 || i.state.shapes.length > 0) && (pt(c, {
-      feedback: o.state,
-      drawing: i.state
-    }), r.setState({ pagesCount: Le() }));
-  }, 1e3), o = Lt(e, t, (c, d) => {
-    n(t, d);
-  }), i = Ft(e, t, (c, d) => {
-    n(t, d);
-  }), r = Nt(e), a = () => {
-    const c = ae();
-    if (c !== t) {
-      t = c;
-      const d = me(t);
-      o.setState({
-        comment: (d == null ? void 0 : d.feedback.comment) || ""
-      }), i.setState({
-        shapes: (d == null ? void 0 : d.drawing.shapes) || []
-      });
-    }
-  };
-  W({
-    event: "popstate",
-    callback: a
-  }), ge({
-    target: document.documentElement,
-    options: {
-      childList: !0,
-      subtree: !0
+}, _e = (e) => {
+  var n;
+  return ((n = e.customInputs) == null ? void 0 : n.reduce(
+    (t, r) => (t[r.id] = r.defaultValue ?? (r.type === "checkbox" ? [] : ""), t),
+    {}
+  )) || {};
+}, ln = (e) => {
+  let n = Ee();
+  const t = sn(e), r = jt(t), a = At(t), o = an(
+    e,
+    n,
+    (c, d) => {
+      r(
+        n,
+        {
+          feedback: { ...o.state, ...c },
+          drawing: i.state
+        },
+        d
+      );
     },
-    callback: () => {
-      ae() !== t && a();
-    }
-  });
-  const l = () => {
-    Fe(t), o.setState(
+    e.customInputs
+  ), i = on(e, n, (c, d) => {
+    r(
+      n,
       {
-        comment: "",
+        feedback: o.state,
+        drawing: { ...i.state, ...c }
+      },
+      d
+    );
+  }), l = (c) => {
+    n = c;
+    const d = ze(n), h = {
+      ..._e(e),
+      ...d == null ? void 0 : d.feedback.customInputValues
+    };
+    o.setState({
+      message: (d == null ? void 0 : d.feedback.message) || "",
+      customInputValues: h,
+      hasUserInteracted: !1
+    }), i.setState({
+      shapes: (d == null ? void 0 : d.drawing.shapes) || []
+    });
+  }, s = () => {
+    Ze(n);
+    const c = {
+      feedback: {
+        message: "",
         screenshot: void 0,
         isCapturing: !1,
-        isMinimized: !1
+        isMinimized: !1,
+        hasUserInteracted: !1,
+        customInputValues: _e(e)
       },
-      !0
-    ), i.setState(
-      {
+      drawing: {
         isDrawing: !1,
         currentPoints: [],
         shapes: [],
         selectedShapeId: null,
         selectedTool: "rectangle",
+        selectedColor: e.primaryColor,
         showTooltip: !0,
         mousePosition: { x: 0, y: 0 },
         hasDrawn: !1,
-        selectedColor: e.primaryColor,
         isDragging: !1,
         dragStartPos: null,
         initialClickPos: null,
-        dragOffset: null
+        dragOffset: null,
+        cursor: i.state.cursor
       },
-      !0
-    ), r.setState({
-      isOpen: !1
-    });
-  }, s = (c) => {
-    r.setState({ notification: { show: !0, type: c.type, message: c.message } }), setTimeout(() => {
-      r.setState({ notification: { show: !1, type: c.type, message: c.message } });
-    }, 5e3);
+      widget: {
+        isOpen: !1
+      }
+    };
+    o.setState(c.feedback, !0), i.setState(c.drawing, !0), t.setState(c.widget);
   };
   return {
     feedback: o,
     drawing: i,
-    widget: r,
+    widget: t,
     methods: {
-      reset: l,
+      reset: s,
+      handlePageChange: l,
       submit: async (c) => {
-        r.setState({ isOpen: !1 });
+        t.setState({ isOpen: !1 });
         try {
           const d = await e.onSubmit(c);
-          return d instanceof Response && !d.ok ? (s({ show: !0, type: "error", message: "Submission failed" }), d) : (l(), s({ show: !0, type: "success", message: "Feedback submitted" }), d);
+          return d instanceof Response && !d.ok ? (a.show({ type: "error", message: "Submission failed" }), d) : (s(), a.show({ type: "success", message: "Feedback submitted" }), d);
         } catch {
-          s({ show: !0, type: "error", message: "Submission failed" });
+          a.show({ type: "error", message: "Submission failed" });
         }
       }
     }
   };
-}, Ke = Je(), Yt = (e) => {
-  const t = Bt({
+}, at = dt(), cn = (e) => {
+  const n = ln({
     primaryColor: e.primaryColor,
     onSubmit: e.onSubmit,
     textConfig: e.textConfig,
-    position: e.position
+    position: e.position,
+    customInputs: e.customInputs
   });
-  return g(Ke.Provider, {
-    value: t,
+  return g(at.Provider, {
+    value: n,
     get children() {
       return e.children;
     }
   });
-}, x = () => {
-  const e = qe(Ke);
+}, E = () => {
+  const e = ut(at);
   if (!e)
     throw new Error("useEchoStore must be used within EchoProvider");
   return e;
-}, Ht = '*,*: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;z-index:var(--z-overlay);top:0;left:0;right:0;bottom:0;border:3px solid var(--primary-color)}[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%;min-height:120px;border-radius:var(--radius-md);border:1px solid var(--border-color);padding:var(--spacing-md);font-size:var(--font-base);resize:vertical;background:#fffc;font-family:inherit}.echo-feedback-form-textarea:focus{outline:none;border-color:var(--primary-color);background:#fff;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}}';
-var Wt = /* @__PURE__ */ b('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="m9 18 6-6-6-6">');
-const _t = (e) => (() => {
-  var t = Wt();
-  return w((n) => {
-    var o = e.size ?? 24, i = e.size ?? 24, r = e.fill ?? "none", a = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
-    return o !== n.e && h(t, "width", n.e = o), i !== n.t && h(t, "height", n.t = i), r !== n.a && h(t, "fill", n.a = r), a !== n.o && h(t, "stroke", n.o = a), l !== n.i && h(t, "stroke-width", n.i = l), s !== n.n && h(t, "class", n.n = s), n.s = C(t, c, n.s), n;
+}, dn = (e) => {
+  const [n, t] = A({
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.scrollHeight
+  }), r = () => {
+    requestAnimationFrame(() => {
+      const a = e();
+      a && (a.style.height = "0px", a.style.height = `${document.documentElement.scrollHeight}px`, t({
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.scrollHeight
+      }));
+    });
+  };
+  return M({
+    event: "resize",
+    callback: r,
+    onMount: r
+  }), Oe({
+    target: document.documentElement,
+    options: {
+      childList: !0,
+      subtree: !0,
+      attributes: !0
+    },
+    callback: r
+  }), n;
+}, un = ({ onUrlChange: e }) => {
+  let n = Ee();
+  const t = () => {
+    const r = Ee();
+    r !== n && (n = r, e(r));
+  };
+  M({ event: "popstate", callback: t }), M({ event: "pushstate", callback: t }), M({ event: "replacestate", callback: t }), Oe({
+    target: document.documentElement,
+    options: {
+      childList: !0,
+      subtree: !0
+    },
+    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>");
+const mn = [
+  "#ff6b6b",
+  // Soft Red
+  "#69db7c",
+  // Soft Green
+  "#74c0fc",
+  // Soft Blue
+  "#ffd43b",
+  // Soft Yellow
+  "#da77f2",
+  // Soft Purple
+  "#66d9e8",
+  // Soft Cyan
+  "#ffa94d",
+  // Soft Orange
+  "#e599f7"
+  // Soft Pink
+], vn = {
+  "#ff6b6b": "Soft Red",
+  "#69db7c": "Soft Green",
+  "#74c0fc": "Soft Blue",
+  "#ffd43b": "Soft Yellow",
+  "#da77f2": "Soft Purple",
+  "#66d9e8": "Soft Cyan",
+  "#ffa94d": "Soft Orange",
+  "#e599f7": "Soft Pink"
+}, Se = (e) => vn[e] || "Primary", bn = () => {
+  const e = E();
+  return (() => {
+    var n = gn(), t = n.firstChild, r = t.nextSibling, a = r.firstChild;
+    return u(t, "aria-expanded", !1), v(a, g(_, {
+      get each() {
+        return [e.widget.state.primaryColor, ...mn];
+      },
+      children: (o) => (() => {
+        var i = fn();
+        return i.$$click = () => e.drawing.setState({
+          selectedColor: o
+        }), o != null ? i.style.setProperty("background-color", o) : i.style.removeProperty("background-color"), b((l) => {
+          var s = `Select ${Se(o)} color`, c = e.drawing.state.selectedColor === o, d = `${Se(o)} color`, h = e.drawing.state.selectedColor === o;
+          return s !== l.e && u(i, "title", l.e = s), c !== l.t && u(i, "data-selected", l.t = c), d !== l.a && u(i, "aria-label", l.a = d), h !== l.o && u(i, "aria-selected", l.o = h), l;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0
+        }), i;
+      })()
+    })), b((o) => {
+      var i = `Current color: ${Se(e.drawing.state.selectedColor)}`, l = e.drawing.state.selectedColor;
+      return i !== o.e && u(t, "aria-label", o.e = i), l !== o.t && ((o.t = l) != null ? t.style.setProperty("background-color", l) : t.style.removeProperty("background-color")), o;
+    }, {
+      e: void 0,
+      t: void 0
+    }), n;
+  })();
+};
+T(["click"]);
+var wn = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="m9 18 6-6-6-6">');
+const yn = (e) => (() => {
+  var n = wn();
+  return b((t) => {
+    var r = e.size ?? 24, a = e.size ?? 24, o = e.fill ?? "none", i = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
+    return r !== t.e && u(n, "width", t.e = r), a !== t.t && u(n, "height", t.t = a), o !== t.a && u(n, "fill", t.a = o), i !== t.o && u(n, "stroke", t.o = i), l !== t.i && u(n, "stroke-width", t.i = l), s !== t.n && u(n, "class", t.n = s), t.s = F(n, c, t.s), t;
   }, {
     e: void 0,
     t: void 0,
@@ -1125,28 +1296,28 @@ const _t = (e) => (() => {
     i: void 0,
     n: void 0,
     s: void 0
-  }), t;
+  }), n;
 })();
-var Ut = /* @__PURE__ */ b('<svg viewBox="0 0 64 66"fill=none><path d="M59.716 36.936L54.9 33l-6.17 5.108a77.278 77.278 0 00-12.744 13.469l-3.637 4.914-3.778-5.017a83.719 83.719 0 00-13.956-14.538L9.799 33l2.86-2.332A104.39 104.39 0 0030.1 12.5l2.24-2.98 1.736 2.298a111.905 111.905 0 0018.608 19.384l2.206 1.81 2.861-2.333a104.13 104.13 0 005.297-4.641C59.978 11.294 47.409.26 32.349.26 14.997.26.92 14.923.92 33c0 18.076 14.077 32.74 31.43 32.74 15.102 0 27.715-11.103 30.73-25.892a75.808 75.808 0 00-3.375-2.912h.011z">');
-const Kt = (e) => (() => {
-  var t = Ut(), n = t.firstChild;
-  return w((o) => {
-    var i = e.size ?? 24, r = e.size ?? 24, a = e.class, l = e.style, s = e.fill ?? "currentColor";
-    return i !== o.e && h(t, "width", o.e = i), r !== o.t && h(t, "height", o.t = r), a !== o.a && h(t, "class", o.a = a), o.o = C(t, l, o.o), s !== o.i && h(n, "fill", o.i = s), o;
+var pn = /* @__PURE__ */ w('<svg viewBox="0 0 64 66"fill=none><path d="M59.716 36.936L54.9 33l-6.17 5.108a77.278 77.278 0 00-12.744 13.469l-3.637 4.914-3.778-5.017a83.719 83.719 0 00-13.956-14.538L9.799 33l2.86-2.332A104.39 104.39 0 0030.1 12.5l2.24-2.98 1.736 2.298a111.905 111.905 0 0018.608 19.384l2.206 1.81 2.861-2.333a104.13 104.13 0 005.297-4.641C59.978 11.294 47.409.26 32.349.26 14.997.26.92 14.923.92 33c0 18.076 14.077 32.74 31.43 32.74 15.102 0 27.715-11.103 30.73-25.892a75.808 75.808 0 00-3.375-2.912h.011z">');
+const xn = (e) => (() => {
+  var n = pn(), t = n.firstChild;
+  return b((r) => {
+    var a = e.size ?? 24, o = e.size ?? 24, i = e.class, l = e.style, s = e.fill ?? "currentColor";
+    return a !== r.e && u(n, "width", r.e = a), o !== r.t && u(n, "height", r.t = o), i !== r.a && u(n, "class", r.a = i), r.o = F(n, l, r.o), s !== r.i && u(t, "fill", r.i = s), r;
   }, {
     e: void 0,
     t: void 0,
     a: void 0,
     o: void 0,
     i: void 0
-  }), t;
+  }), n;
 })();
-var Vt = /* @__PURE__ */ b('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="M3 7V5a2 2 0 0 1 2-2h2"></path><path d="M17 3h2a2 2 0 0 1 2 2v2"></path><path d="M21 17v2a2 2 0 0 1-2 2h-2"></path><path d="M7 21H5a2 2 0 0 1-2-2v-2">');
-const Rt = (e) => (() => {
-  var t = Vt();
-  return w((n) => {
-    var o = e.size ?? 24, i = e.size ?? 24, r = e.fill ?? "none", a = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
-    return o !== n.e && h(t, "width", n.e = o), i !== n.t && h(t, "height", n.t = i), r !== n.a && h(t, "fill", n.a = r), a !== n.o && h(t, "stroke", n.o = a), l !== n.i && h(t, "stroke-width", n.i = l), s !== n.n && h(t, "class", n.n = s), n.s = C(t, c, n.s), n;
+var kn = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="M3 7V5a2 2 0 0 1 2-2h2"></path><path d="M17 3h2a2 2 0 0 1 2 2v2"></path><path d="M21 17v2a2 2 0 0 1-2 2h-2"></path><path d="M7 21H5a2 2 0 0 1-2-2v-2">');
+const Sn = (e) => (() => {
+  var n = kn();
+  return b((t) => {
+    var r = e.size ?? 24, a = e.size ?? 24, o = e.fill ?? "none", i = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
+    return r !== t.e && u(n, "width", t.e = r), a !== t.t && u(n, "height", t.t = a), o !== t.a && u(n, "fill", t.a = o), i !== t.o && u(n, "stroke", t.o = i), l !== t.i && u(n, "stroke-width", t.i = l), s !== t.n && u(n, "class", t.n = s), t.s = F(n, c, t.s), t;
   }, {
     e: void 0,
     t: void 0,
@@ -1155,14 +1326,14 @@ const Rt = (e) => (() => {
     i: void 0,
     n: void 0,
     s: void 0
-  }), t;
+  }), n;
 })();
-var Xt = /* @__PURE__ */ b('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z">');
-const Gt = (e) => (() => {
-  var t = Xt();
-  return w((n) => {
-    var o = e.size ?? 24, i = e.size ?? 24, r = e.fill ?? "none", a = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
-    return o !== n.e && h(t, "width", n.e = o), i !== n.t && h(t, "height", n.t = i), r !== n.a && h(t, "fill", n.a = r), a !== n.o && h(t, "stroke", n.o = a), l !== n.i && h(t, "stroke-width", n.i = l), s !== n.n && h(t, "class", n.n = s), n.s = C(t, c, n.s), n;
+var Cn = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z">');
+const $n = (e) => (() => {
+  var n = Cn();
+  return b((t) => {
+    var r = e.size ?? 24, a = e.size ?? 24, o = e.fill ?? "none", i = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
+    return r !== t.e && u(n, "width", t.e = r), a !== t.t && u(n, "height", t.t = a), o !== t.a && u(n, "fill", t.a = o), i !== t.o && u(n, "stroke", t.o = i), l !== t.i && u(n, "stroke-width", t.i = l), s !== t.n && u(n, "class", t.n = s), t.s = F(n, c, t.s), t;
   }, {
     e: void 0,
     t: void 0,
@@ -1171,14 +1342,14 @@ const Gt = (e) => (() => {
     i: void 0,
     n: void 0,
     s: void 0
-  }), t;
+  }), n;
 })();
-var Jt = /* @__PURE__ */ b('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1=10 x2=10 y1=11 y2=17></line><line x1=14 x2=14 y1=11 y2=17>');
-const Ve = (e) => (() => {
-  var t = Jt();
-  return w((n) => {
-    var o = e.size ?? 24, i = e.size ?? 24, r = e.fill ?? "none", a = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
-    return o !== n.e && h(t, "width", n.e = o), i !== n.t && h(t, "height", n.t = i), r !== n.a && h(t, "fill", n.a = r), a !== n.o && h(t, "stroke", n.o = a), l !== n.i && h(t, "stroke-width", n.i = l), s !== n.n && h(t, "class", n.n = s), n.s = C(t, c, n.s), n;
+var En = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1=10 x2=10 y1=11 y2=17></line><line x1=14 x2=14 y1=11 y2=17>');
+const it = (e) => (() => {
+  var n = En();
+  return b((t) => {
+    var r = e.size ?? 24, a = e.size ?? 24, o = e.fill ?? "none", i = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
+    return r !== t.e && u(n, "width", t.e = r), a !== t.t && u(n, "height", t.t = a), o !== t.a && u(n, "fill", t.a = o), i !== t.o && u(n, "stroke", t.o = i), l !== t.i && u(n, "stroke-width", t.i = l), s !== t.n && u(n, "class", t.n = s), t.s = F(n, c, t.s), t;
   }, {
     e: void 0,
     t: void 0,
@@ -1187,14 +1358,14 @@ const Ve = (e) => (() => {
     i: void 0,
     n: void 0,
     s: void 0
-  }), t;
+  }), n;
 })();
-var qt = /* @__PURE__ */ b('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><circle cx=12 cy=12 r=10></circle><path d="m9 12 2 2 4-4">');
-const Qt = (e) => (() => {
-  var t = qt();
-  return w((n) => {
-    var o = e.size ?? 24, i = e.size ?? 24, r = e.fill ?? "none", a = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
-    return o !== n.e && h(t, "width", n.e = o), i !== n.t && h(t, "height", n.t = i), r !== n.a && h(t, "fill", n.a = r), a !== n.o && h(t, "stroke", n.o = a), l !== n.i && h(t, "stroke-width", n.i = l), s !== n.n && h(t, "class", n.n = s), n.s = C(t, c, n.s), n;
+var Pn = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><circle cx=12 cy=12 r=10></circle><path d="m9 12 2 2 4-4">');
+const zn = (e) => (() => {
+  var n = Pn();
+  return b((t) => {
+    var r = e.size ?? 24, a = e.size ?? 24, o = e.fill ?? "none", i = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
+    return r !== t.e && u(n, "width", t.e = r), a !== t.t && u(n, "height", t.t = a), o !== t.a && u(n, "fill", t.a = o), i !== t.o && u(n, "stroke", t.o = i), l !== t.i && u(n, "stroke-width", t.i = l), s !== t.n && u(n, "class", t.n = s), t.s = F(n, c, t.s), t;
   }, {
     e: void 0,
     t: void 0,
@@ -1203,14 +1374,14 @@ const Qt = (e) => (() => {
     i: void 0,
     n: void 0,
     s: void 0
-  }), t;
+  }), n;
 })();
-var Zt = /* @__PURE__ */ b('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><circle cx=12 cy=12 r=10></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6">');
-const en = (e) => (() => {
-  var t = Zt();
-  return w((n) => {
-    var o = e.size ?? 24, i = e.size ?? 24, r = e.fill ?? "none", a = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
-    return o !== n.e && h(t, "width", n.e = o), i !== n.t && h(t, "height", n.t = i), r !== n.a && h(t, "fill", n.a = r), a !== n.o && h(t, "stroke", n.o = a), l !== n.i && h(t, "stroke-width", n.i = l), s !== n.n && h(t, "class", n.n = s), n.s = C(t, c, n.s), n;
+var Tn = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><circle cx=12 cy=12 r=10></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6">');
+const In = (e) => (() => {
+  var n = Tn();
+  return b((t) => {
+    var r = e.size ?? 24, a = e.size ?? 24, o = e.fill ?? "none", i = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
+    return r !== t.e && u(n, "width", t.e = r), a !== t.t && u(n, "height", t.t = a), o !== t.a && u(n, "fill", t.a = o), i !== t.o && u(n, "stroke", t.o = i), l !== t.i && u(n, "stroke-width", t.i = l), s !== t.n && u(n, "class", t.n = s), t.s = F(n, c, t.s), t;
   }, {
     e: void 0,
     t: void 0,
@@ -1219,14 +1390,14 @@ const en = (e) => (() => {
     i: void 0,
     n: void 0,
     s: void 0
-  }), t;
+  }), n;
 })();
-var tn = /* @__PURE__ */ b('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="M18 6 6 18"></path><path d="m6 6 12 12">');
-const ie = (e) => (() => {
-  var t = tn();
-  return w((n) => {
-    var o = e.size ?? 24, i = e.size ?? 24, r = e.fill ?? "none", a = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
-    return o !== n.e && h(t, "width", n.e = o), i !== n.t && h(t, "height", n.t = i), r !== n.a && h(t, "fill", n.a = r), a !== n.o && h(t, "stroke", n.o = a), l !== n.i && h(t, "stroke-width", n.i = l), s !== n.n && h(t, "class", n.n = s), n.s = C(t, c, n.s), n;
+var On = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="M18 6 6 18"></path><path d="m6 6 12 12">');
+const pe = (e) => (() => {
+  var n = On();
+  return b((t) => {
+    var r = e.size ?? 24, a = e.size ?? 24, o = e.fill ?? "none", i = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
+    return r !== t.e && u(n, "width", t.e = r), a !== t.t && u(n, "height", t.t = a), o !== t.a && u(n, "fill", t.a = o), i !== t.o && u(n, "stroke", t.o = i), l !== t.i && u(n, "stroke-width", t.i = l), s !== t.n && u(n, "class", t.n = s), t.s = F(n, c, t.s), t;
   }, {
     e: void 0,
     t: void 0,
@@ -1235,97 +1406,84 @@ const ie = (e) => (() => {
     i: void 0,
     n: void 0,
     s: void 0
-  }), t;
+  }), n;
 })();
-var nn = /* @__PURE__ */ b("<div class=echo-color-selector><button class=echo-drawing-toolbar-button title=Color></button><div class=echo-color-swatch-wrapper><div class=echo-color-swatch>"), on = /* @__PURE__ */ b("<button class=echo-color-swatch-button>");
-const rn = [
-  "#ff6b6b",
-  // Soft Red
-  "#69db7c",
-  // Soft Green
-  "#74c0fc",
-  // Soft Blue
-  "#ffd43b",
-  // Soft Yellow
-  "#da77f2",
-  // Soft Purple
-  "#66d9e8",
-  // Soft Cyan
-  "#ffa94d",
-  // Soft Orange
-  "#e599f7"
-  // Soft Pink
-], an = () => {
-  const e = x();
+var Mn = /* @__PURE__ */ w('<div class=echo-drawing-toolbar data-hide-when-drawing=true role=toolbar aria-label="Drawing Tools"><button class=echo-drawing-toolbar-button title="Clear drawings"aria-label="Clear all drawings"role=button>'), An = /* @__PURE__ */ w("<button class=echo-drawing-toolbar-button role=button>");
+const Dn = {
+  rectangle: Sn,
+  path: $n
+}, Fn = () => {
+  const e = E(), n = Object.values(B);
   return (() => {
-    var t = nn(), n = t.firstChild, o = n.nextSibling, i = o.firstChild;
-    return m(i, g(re, {
-      get each() {
-        return [e.widget.state.primaryColor, ...rn];
-      },
-      children: (r) => (() => {
-        var a = on();
-        return a.$$click = () => e.drawing.setState({
-          selectedColor: r
-        }), h(a, "title", `Select ${r} color`), r != null ? a.style.setProperty("background-color", r) : a.style.removeProperty("background-color"), w(() => h(a, "data-selected", e.drawing.state.selectedColor === r)), a;
-      })()
-    })), w((r) => (r = e.drawing.state.selectedColor) != null ? n.style.setProperty("background-color", r) : n.style.removeProperty("background-color")), t;
-  })();
-};
-T(["click"]);
-var sn = /* @__PURE__ */ b('<div class=echo-drawing-toolbar data-hide-when-drawing=true><button class=echo-drawing-toolbar-button title="Clear drawings">'), ln = /* @__PURE__ */ b("<button class=echo-drawing-toolbar-button>");
-const cn = {
-  rectangle: Rt,
-  path: Gt
-}, dn = () => {
-  const e = x(), t = Object.values(z);
-  return (() => {
-    var n = sn(), o = n.firstChild;
-    return m(n, g(re, {
-      each: t,
-      children: (i) => {
-        const r = cn[i.id];
+    var t = Mn(), r = t.firstChild;
+    return v(t, g(_, {
+      each: n,
+      children: (a) => {
+        const o = Dn[a.id];
         return (() => {
-          var a = ln();
-          return a.$$click = () => e.drawing.setState({
-            selectedTool: i.id
-          }), m(a, g(r, {
-            class: "echo-drawing-toolbar-icon"
-          })), w((l) => {
-            var s = i.label, c = e.drawing.state.selectedTool === i.id;
-            return s !== l.e && h(a, "title", l.e = s), c !== l.t && h(a, "data-selected", l.t = c), l;
+          var i = An();
+          return i.$$click = () => e.drawing.setState({
+            selectedTool: a.id
+          }), v(i, g(o, {
+            class: "echo-drawing-toolbar-icon",
+            "aria-hidden": "true"
+          })), b((l) => {
+            var s = a.label, c = e.drawing.state.selectedTool === a.id, d = a.label, h = e.drawing.state.selectedTool === a.id;
+            return s !== l.e && u(i, "title", l.e = s), c !== l.t && u(i, "data-selected", l.t = c), d !== l.a && u(i, "aria-label", l.a = d), h !== l.o && u(i, "aria-pressed", l.o = h), l;
           }, {
             e: void 0,
-            t: void 0
-          }), a;
+            t: void 0,
+            a: void 0,
+            o: void 0
+          }), i;
         })();
       }
-    }), o), m(n, g(an, {}), o), o.$$click = () => e.drawing.setState({
+    }), r), v(t, g(bn, {}), r), r.$$click = () => e.drawing.setState({
       shapes: []
-    }, !0), m(o, g(Ve, {
-      class: "echo-drawing-toolbar-icon"
-    })), n;
+    }, !0), v(r, g(it, {
+      class: "echo-drawing-toolbar-icon",
+      "aria-hidden": "true"
+    })), t;
   })();
 };
 T(["click"]);
-var hn = /* @__PURE__ */ b("<button>");
-const O = (e) => {
-  const t = () => e.variant || "primary", n = () => e.size || "md";
+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, {
+    get when() {
+      return n();
+    },
+    get children() {
+      var t = Ln();
+      return v(t, () => e.widget.state.text.drawingTooltip.text), b((r) => {
+        var a = `${e.drawing.state.mousePosition.y + 20}px`, o = `${e.drawing.state.mousePosition.x + 10}px`;
+        return a !== r.e && ((r.e = a) != null ? t.style.setProperty("top", a) : t.style.removeProperty("top")), o !== r.t && ((r.t = o) != null ? t.style.setProperty("left", o) : t.style.removeProperty("left")), r;
+      }, {
+        e: void 0,
+        t: void 0
+      }), t;
+    }
+  });
+};
+var Nn = /* @__PURE__ */ w("<button>");
+const W = (e) => {
+  const n = () => e.variant || "primary", t = () => e.size || "md";
   return (() => {
-    var o = hn();
-    return dt(o, Z(e, {
+    var r = Nn();
+    return $t(r, ge(e, {
       get class() {
-        return `echo-button echo-button-${t()} echo-button-${n()} ${e.class}`;
+        return `echo-button echo-button-${n()} echo-button-${t()} ${e.class}`;
       }
-    }), !1), o;
+    }), !1), r;
   })();
 };
-var un = /* @__PURE__ */ b('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1=10 y1=14 x2=21 y2=3>');
-const fn = (e) => (() => {
-  var t = un();
-  return w((n) => {
-    var o = e.size ?? 24, i = e.size ?? 24, r = e.fill ?? "none", a = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
-    return o !== n.e && h(t, "width", n.e = o), i !== n.t && h(t, "height", n.t = i), r !== n.a && h(t, "fill", n.a = r), a !== n.o && h(t, "stroke", n.o = a), l !== n.i && h(t, "stroke-width", n.i = l), s !== n.n && h(t, "class", n.n = s), n.s = C(t, c, n.s), n;
+var qn = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"stroke-linecap=round stroke-linejoin=round><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1=10 y1=14 x2=21 y2=3>');
+const Vn = (e) => (() => {
+  var n = qn();
+  return b((t) => {
+    var r = e.size ?? 24, a = e.size ?? 24, o = e.fill ?? "none", i = e.stroke ?? "currentColor", l = e.strokeWidth ?? 2, s = e.class, c = e.style;
+    return r !== t.e && u(n, "width", t.e = r), a !== t.t && u(n, "height", t.t = a), o !== t.a && u(n, "fill", t.a = o), i !== t.o && u(n, "stroke", t.o = i), l !== t.i && u(n, "stroke-width", t.i = l), s !== t.n && u(n, "class", t.n = s), t.s = F(n, c, t.s), t;
   }, {
     e: void 0,
     t: void 0,
@@ -1334,173 +1492,192 @@ const fn = (e) => (() => {
     i: void 0,
     n: void 0,
     s: void 0
-  }), t;
+  }), n;
 })();
-var gn = /* @__PURE__ */ b("<div class=echo-stored-feedback-empty>No unsubmitted feedback"), mn = /* @__PURE__ */ b("<div class=echo-stored-feedback><div class=echo-stored-feedback-header><h3>Unsubmitted Feedback</h3></div><div class=echo-stored-feedback-list>"), vn = /* @__PURE__ */ b("<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 wn = () => {
-  const e = x(), [t, n] = M(se()), [o, i] = M(window.location.pathname), r = () => {
-    const d = se();
-    n(d), e.widget.setState({
-      pagesCount: d.length
+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();
+  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({
+      isStoredFeedbackOpen: !1
+    });
+  }, l = (m) => {
+    if (!e.widget.state.isStoredFeedbackOpen || !n) return;
+    m.composedPath().includes(n) || e.widget.setState({
+      isStoredFeedbackOpen: !1
     });
-  }, a = () => {
-    i(window.location.pathname);
+  }, s = () => {
+    const m = xe();
+    r(m), e.widget.setState({
+      pagesCount: m.length
+    });
+  }, c = () => {
+    o(window.location.pathname);
   };
-  W({
+  M({
     event: "echo-storage-change",
-    callback: r
-  }), W({
+    callback: s
+  }), M({
     event: "popstate",
-    callback: a
-  }), ge({
+    callback: c
+  }), Oe({
     target: document.documentElement,
     options: {
       childList: !0,
       subtree: !0
     },
     callback: () => {
-      i(window.location.pathname);
+      o(window.location.pathname);
     }
+  }), M({
+    event: "keydown",
+    callback: i
+  }), M({
+    event: "click",
+    callback: l
   });
-  const l = (d, u) => {
-    const f = u ? `${d}${u}` : d;
-    window.location.href = f, e.widget.setState({
+  const d = (m, y) => {
+    const x = y ? `${m}${y}` : m;
+    window.location.href = x, e.widget.setState({
       isStoredFeedbackOpen: !1
     });
-  }, s = (d) => {
-    o() === d && e.methods.reset(), Fe(d);
-    const u = se();
-    n(u), e.widget.setState({
-      pagesCount: u.length
+  }, h = (m) => {
+    a() === m && e.methods.reset(), Ze(m);
+    const y = xe();
+    r(y), e.widget.setState({
+      pagesCount: y.length
     });
-  }, c = (d) => {
-    if (d === "/") return "/";
-    const u = d.split("/");
-    return u.length <= 4 ? d : `/${u[1]}/.../${u[u.length - 1]}`;
+  }, f = (m) => {
+    if (m === "/") return "/";
+    const y = m.split("/");
+    return y.length <= 4 ? m : `/${y[1]}/.../${y[y.length - 1]}`;
   };
-  return g(j, {
+  return g(D, {
     get when() {
       return e.widget.state.isStoredFeedbackOpen;
     },
     get children() {
-      var d = mn(), u = d.firstChild;
-      u.firstChild;
-      var f = u.nextSibling;
-      return m(u, g(O, {
+      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, {
         variant: "secondary",
         size: "sm",
         onClick: () => e.widget.setState({
           isStoredFeedbackOpen: !1
         }),
         get children() {
-          return g(ie, {
+          return g(pe, {
             size: 20
           });
         }
-      }), null), m(f, g(re, {
+      }), null), v(x, g(_, {
         get each() {
           return t();
         },
-        children: (v) => {
-          const y = p(() => v.path === o());
+        children: ($) => {
+          const p = S(() => $.path === a());
           return (() => {
-            var k = vn(), I = k.firstChild, L = I.firstChild, Re = L.nextSibling, we = I.nextSibling;
-            return m(L, () => c(v.path)), m(Re, () => v.state.feedback.comment), m(we, (() => {
-              var D = p(() => !y());
-              return () => D() && g(O, {
+            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, {
                 class: "echo-stored-feedback-link",
                 variant: "secondary",
                 size: "sm",
-                onClick: () => l(v.path, v.state.latestQuery),
+                onClick: () => d($.path, $.state.latestQuery),
                 get children() {
-                  return g(fn, {});
+                  return g(Vn, {});
                 }
               });
-            })(), null), m(we, g(O, {
+            })(), null), v(q, g(W, {
               class: "echo-stored-feedback-delete",
               variant: "secondary",
               size: "sm",
-              onClick: () => s(v.path),
+              onClick: () => h($.path),
               children: "Delete"
-            }), null), w((D) => {
-              var be = `echo-stored-feedback-item ${y() ? "echo-stored-feedback-item-current" : ""}`, ye = v.path;
-              return be !== D.e && De(k, D.e = be), ye !== D.t && h(L, "title", D.t = ye), D;
+            }), 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;
             }, {
               e: void 0,
               t: void 0
-            }), k;
+            }), P;
           })();
         }
-      }), null), m(f, g(j, {
+      }), null), v(x, g(D, {
         get when() {
           return t().length === 0;
         },
         get children() {
-          return gn();
+          return Bn();
         }
-      }), null), d;
+      }), null), m;
     }
   });
 };
-var bn = /* @__PURE__ */ b("<button class=echo-launcher-button>"), yn = /* @__PURE__ */ b("<span class=echo-launcher-button-count>");
-const pn = () => {
-  const e = x(), [t, n] = M(!1);
-  let o;
-  const i = () => {
-    o && window.clearTimeout(o), o = window.setTimeout(() => {
-      const c = je("welcome_message_shown", !1);
-      !e.widget.state.isOpen && !e.widget.state.isStoredFeedbackOpen && c && n(!0);
+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);
+  let r;
+  const a = () => {
+    r && window.clearTimeout(r), r = window.setTimeout(() => {
+      const c = G("welcome_message_shown", !1);
+      !e.widget.state.isOpen && !e.widget.state.isStoredFeedbackOpen && c && t(!0);
     }, 4e3);
-  }, r = () => {
-    n(!1);
-  }, a = () => {
-    i();
+  }, o = () => {
+    t(!1);
+  }, i = () => {
+    a();
   }, l = () => {
     e.widget.setState({
       isOpen: !e.widget.state.isOpen
     }), e.widget.setState({
       welcomeMessageIsClosing: !0
-    }), he("welcome_message_shown", !0);
+    }), ae("welcome_message_shown", !0);
   };
-  oe(() => {
-    e.widget.state.isOpen || (n(!1), i()), e.widget.state.isStoredFeedbackOpen && n(!1);
+  Y(() => {
+    e.widget.state.isOpen || (t(!1), a()), e.widget.state.isStoredFeedbackOpen && t(!1);
   });
   const s = (c) => {
     c.stopPropagation(), e.widget.setState({
       isStoredFeedbackOpen: !e.widget.state.isStoredFeedbackOpen
-    }), n(!1);
+    }), t(!1);
   };
   return [(() => {
-    var c = bn();
-    return c.addEventListener("pointerleave", a), c.addEventListener("pointerenter", r), c.$$click = l, m(c, g(Kt, {
+    var c = Un();
+    return c.addEventListener("pointerleave", i), c.addEventListener("pointerenter", o), c.$$click = l, v(c, g(xn, {
       stroke: "white",
-      fill: "#ffffff"
-    }), null), m(c, (() => {
-      var d = p(() => e.widget.state.pagesCount > 0);
+      fill: "#ffffff",
+      "aria-hidden": "true"
+    }), null), v(c, (() => {
+      var d = S(() => e.widget.state.pagesCount > 0);
       return () => d() && (() => {
-        var u = yn();
-        return u.$$click = s, m(u, () => e.widget.state.pagesCount), u;
+        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), w((d) => {
-      var u = e.widget.state.isOpen, f = t() ? "45px" : "0";
-      return u !== d.e && h(c, "data-hidden", d.e = u), f !== d.t && ((d.t = f) != null ? c.style.setProperty("left", f) : c.style.removeProperty("left")), d;
+    })(), 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;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     }), c;
-  })(), g(wn, {})];
+  })(), g(Hn, {})];
 };
 T(["click"]);
-var xn = /* @__PURE__ */ b("<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 kn = () => {
-  const e = x(), t = () => {
+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 = () => {
     e.widget.setState({
       notification: {
         ...e.widget.state.notification,
         show: !1
       }
     });
-  }, n = () => {
+  }, t = () => {
     switch (e.widget.state.notification.type) {
       case "success":
         return e.widget.state.text.notification.successTitle;
@@ -1511,111 +1688,183 @@ const kn = () => {
     }
   };
   return (() => {
-    var o = xn(), i = o.firstChild, r = i.nextSibling, a = r.firstChild, l = a.nextSibling;
-    return m(o, g(O, {
+    var r = Kn(), a = r.firstChild, o = a.nextSibling, i = o.firstChild, l = i.nextSibling;
+    return v(r, g(W, {
       class: "echo-notification-hide",
       variant: "secondary",
       size: "sm",
-      onClick: t,
+      onClick: n,
       get title() {
         return e.widget.state.text.notification.hideTitle;
       },
       get children() {
-        return g(ie, {
+        return g(pe, {
           size: 20
         });
       }
-    }), i), m(i, (() => {
-      var s = p(() => e.widget.state.notification.type === "success");
-      return () => s() ? g(Qt, {
+    }), a), v(a, (() => {
+      var s = S(() => e.widget.state.notification.type === "success");
+      return () => s() ? g(zn, {
         size: 32
       }) : (() => {
-        var c = p(() => e.widget.state.notification.type === "error");
-        return () => c() ? g(en, {
+        var c = S(() => e.widget.state.notification.type === "error");
+        return () => c() ? g(In, {
           size: 32
         }) : null;
       })();
-    })()), m(a, n), m(l, () => {
+    })()), v(i, t), v(l, () => {
       var s;
       return (s = e.widget.state.notification) == null ? void 0 : s.message;
-    }), w((s) => {
-      var c = e.widget.state.notification.type, d = !e.widget.state.notification.type, u = !e.widget.state.notification.show;
-      return c !== s.e && h(o, "data-type", s.e = c), d !== s.t && h(o, "data-empty", s.t = d), u !== s.a && h(o, "data-hidden", s.a = u), s;
+    }), b((s) => {
+      var c = e.widget.state.notification.type, d = !e.widget.state.notification.type, h = !e.widget.state.notification.show;
+      return c !== s.e && u(r, "data-type", s.e = c), d !== s.t && u(r, "data-empty", s.t = d), h !== s.a && u(r, "data-hidden", s.a = h), s;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), o;
+    }), r;
+  })();
+};
+var Xn = /* @__PURE__ */ w("<div class=echo-shape-actions data-hide-when-drawing=true>");
+const Jn = () => {
+  const e = E();
+  let n;
+  const [t, r] = A({
+    x: window.scrollX,
+    y: window.scrollY
+  });
+  M({
+    event: "scroll",
+    callback: () => {
+      r({
+        x: window.scrollX,
+        y: window.scrollY
+      });
+    }
+  });
+  const o = () => {
+    e.drawing.state.selectedShapeId && e.drawing.setState({
+      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(() => {
+    const s = i(), c = n == null ? void 0 : n.getBoundingClientRect();
+    if (!s || !c) return null;
+    let d = null;
+    if (s.type === "rectangle") {
+      const m = ot(s.points);
+      if (!m) return null;
+      d = {
+        x: m.x + m.width / 2,
+        y: m.y
+      };
+    } else if (s.type === "path" && s.points.length > 0)
+      d = {
+        x: s.points[0].x,
+        y: s.points[0].y
+      };
+    else
+      return null;
+    const h = 8, f = 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))
+    };
+  });
+  return (() => {
+    var s = Xn(), c = n;
+    return typeof c == "function" ? V(c, s) : n = s, v(s, g(W, {
+      onClick: o,
+      size: "sm",
+      variant: "secondary",
+      title: "Delete shape",
+      get children() {
+        return g(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;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), s;
   })();
 };
-var Sn = /* @__PURE__ */ b("<button class=echo-welcome-message><span class=echo-welcome-message-pulsar></span><div class=echo-welcome-message-close role=button tabindex=0>");
-const Cn = () => {
-  const e = x(), t = je("welcome_message_shown", !1), n = (i) => {
-    i.stopPropagation(), e.widget.setState({
+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) => {
+    a.stopPropagation(), e.widget.setState({
       welcomeMessageIsClosing: !0
-    }), he("welcome_message_shown", !0);
-  }, o = () => {
+    }), ae("welcome_message_shown", !0);
+  }, r = () => {
     e.widget.setState({
       isOpen: !0
     }), e.widget.setState({
       welcomeMessageIsClosing: !0
-    }), he("welcome_message_shown", !0);
+    }), ae("welcome_message_shown", !0);
   };
-  return t ? null : (() => {
-    var i = Sn(), r = i.firstChild, a = r.nextSibling;
-    return i.$$click = o, i.style.setProperty("bottom", "80px"), i.style.setProperty("right", "20px"), m(i, () => e.widget.state.text.welcomeMessage.text, a), a.$$keydown = (l) => l.key === "Enter" && n(l), a.$$click = n, m(a, g(ie, {
+  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, {
       size: 16,
       strokeWidth: 3
-    })), w((l) => {
+    })), b((l) => {
       var s = e.widget.state.welcomeMessageIsClosing, c = e.widget.state.text.welcomeMessage.closeAriaLabel;
-      return s !== l.e && h(i, "data-hidden", l.e = s), c !== l.t && h(a, "aria-label", l.t = c), l;
+      return s !== l.e && u(a, "data-hidden", l.e = s), c !== l.t && u(i, "aria-label", l.t = c), l;
     }, {
       e: void 0,
       t: void 0
-    }), i;
+    }), a;
   })();
 };
 T(["click", "keydown"]);
-var Pn = /* @__PURE__ */ b("<svg><rect class=echo-shape fill=transparent vector-effect=non-scaling-stroke></svg>", !1, !0), $n = /* @__PURE__ */ b("<svg><path class=echo-shape fill=none vector-effect=non-scaling-stroke stroke-linecap=round></svg>", !1, !0);
-const Oe = (e) => {
-  const t = p(() => e.id === e.selectedShapeId);
-  return [g(j, {
+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, {
     get when() {
       return e.type === "rectangle";
     },
     get children() {
-      return g(En, Z(e, {
+      return g(nr, ge(e, {
         get isSelected() {
-          return t();
+          return n();
         }
       }));
     }
-  }), g(j, {
+  }), g(D, {
     get when() {
       return e.type === "path";
     },
     get children() {
-      return g(zn, Z(e, {
+      return g(rr, ge(e, {
         get isSelected() {
-          return t();
+          return n();
         }
       }));
     }
   })];
-}, En = (e) => {
-  const t = p(() => Ue(e.points));
-  return g(j, {
+}, nr = (e) => {
+  const n = S(() => ot(e.points));
+  return g(D, {
     get when() {
-      return t();
+      return n();
     },
     get children() {
-      var n = Pn();
-      return n.$$click = () => {
-        var o;
-        return (o = e.onShapeClick) == null ? void 0 : o.call(e, e.id);
-      }, w((o) => {
-        var i = e.id, r = e.isSelected, a = t().x, l = t().y, s = t().width, c = t().height, d = e.color, u = z.rectangle.strokeWidth, f = e.isSelected ? z.rectangle.opacity.selected : z.rectangle.opacity.default, v = e.isSelected ? "5,5" : "none", y = e.isSelected ? "move" : "pointer";
-        return i !== o.e && h(n, "data-shape-id", o.e = i), r !== o.t && h(n, "data-selected", o.t = r), a !== o.a && h(n, "x", o.a = a), l !== o.o && h(n, "y", o.o = l), s !== o.i && h(n, "width", o.i = s), c !== o.n && h(n, "height", o.n = c), d !== o.s && h(n, "stroke", o.s = d), u !== o.h && h(n, "stroke-width", o.h = u), f !== o.r && h(n, "opacity", o.r = f), v !== o.d && h(n, "stroke-dasharray", o.d = v), y !== o.l && h(n, "cursor", o.l = y), o;
+      var t = er();
+      return t.$$keydown = (r) => {
+        var a;
+        return r.key === "Enter" && ((a = e.onShapeClick) == null ? void 0 : a.call(e, e.id));
+      }, t.$$click = () => {
+        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;
       }, {
         e: void 0,
         t: void 0,
@@ -1627,24 +1876,29 @@ const Oe = (e) => {
         h: void 0,
         r: void 0,
         d: void 0,
-        l: void 0
-      }), n;
+        l: void 0,
+        u: void 0,
+        c: void 0
+      }), t;
     }
   });
-}, zn = (e) => {
-  const t = p(() => Tt(e.points));
-  return g(j, {
+}, rr = (e) => {
+  const n = S(() => Kt(e.points));
+  return g(D, {
     get when() {
-      return t();
+      return n();
     },
     get children() {
-      var n = $n();
-      return n.$$click = () => {
-        var o;
-        return (o = e.onShapeClick) == null ? void 0 : o.call(e, e.id);
-      }, w((o) => {
-        var i = e.id, r = e.isSelected, a = t(), l = e.color, s = z.path.strokeWidth, c = e.isSelected ? z.path.opacity.selected : z.path.opacity.default, d = e.isSelected ? "move" : "pointer";
-        return i !== o.e && h(n, "data-shape-id", o.e = i), r !== o.t && h(n, "data-selected", o.t = r), a !== o.a && h(n, "d", o.a = a), l !== o.o && h(n, "stroke", o.o = l), s !== o.i && h(n, "stroke-width", o.i = s), c !== o.n && h(n, "opacity", o.n = c), d !== o.s && h(n, "cursor", o.s = d), o;
+      var t = tr();
+      return t.$$keydown = (r) => {
+        var a;
+        return r.key === "Enter" && ((a = e.onShapeClick) == null ? void 0 : a.call(e, e.id));
+      }, t.$$click = () => {
+        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;
       }, {
         e: void 0,
         t: void 0,
@@ -1652,140 +1906,54 @@ const Oe = (e) => {
         o: void 0,
         i: void 0,
         n: void 0,
-        s: void 0
-      }), n;
-    }
-  });
-};
-T(["click"]);
-var On = /* @__PURE__ */ b("<div class=echo-drawing-tooltip data-hide-when-drawing=true>");
-const Tn = () => {
-  const e = x(), t = p(() => e.drawing.state.showTooltip && e.drawing.state.mousePosition.y && e.drawing.state.mousePosition.x && e.widget.state.isOpen && !Ot());
-  return g(j, {
-    get when() {
-      return t();
-    },
-    get children() {
-      var n = On();
-      return m(n, () => e.widget.state.text.drawingTooltip.text), w((o) => {
-        var i = `${e.drawing.state.mousePosition.y + 20}px`, r = `${e.drawing.state.mousePosition.x + 10}px`;
-        return i !== o.e && ((o.e = i) != null ? n.style.setProperty("top", i) : n.style.removeProperty("top")), r !== o.t && ((o.t = r) != null ? n.style.setProperty("left", r) : n.style.removeProperty("left")), o;
-      }, {
-        e: void 0,
-        t: void 0
-      }), n;
+        s: void 0,
+        h: void 0,
+        r: void 0
+      }), t;
     }
   });
 };
-var In = /* @__PURE__ */ b("<div class=echo-shape-actions data-hide-when-drawing=true>");
-const Dn = () => {
-  const e = x();
-  let t;
-  const [n, o] = M({
-    x: window.scrollX,
-    y: window.scrollY
-  });
-  W({
-    event: "scroll",
-    callback: () => {
-      o({
-        x: window.scrollX,
-        y: window.scrollY
-      });
-    }
-  });
-  const r = () => {
-    e.drawing.state.selectedShapeId && e.drawing.setState({
-      shapes: e.drawing.state.shapes.filter((s) => s.id !== e.drawing.state.selectedShapeId),
-      selectedShapeId: null
-    });
-  }, a = p(() => e.drawing.state.selectedShapeId ? e.drawing.state.shapes.find((s) => s.id === e.drawing.state.selectedShapeId) : null), l = p(() => {
-    const s = a(), c = t == null ? void 0 : t.getBoundingClientRect();
-    if (!s || !c) return null;
-    let d = null;
-    if (s.type === "rectangle") {
-      const v = Ue(s.points);
-      if (!v) return null;
-      d = {
-        x: v.x + v.width / 2,
-        y: v.y
-      };
-    } else if (s.type === "path" && s.points.length > 0)
-      d = {
-        x: s.points[0].x,
-        y: s.points[0].y
-      };
-    else
-      return null;
-    const u = 8, f = n();
-    return {
-      x: Math.max(c.width / 2 + u, Math.min(window.innerWidth - c.width / 2 - u, d.x - f.x)),
-      y: Math.max(c.height + u, Math.min(window.innerHeight - u, d.y - f.y))
-    };
-  });
-  return (() => {
-    var s = In(), c = t;
-    return typeof c == "function" ? G(c, s) : t = s, m(s, g(O, {
-      onClick: r,
-      size: "sm",
-      variant: "secondary",
-      title: "Delete shape",
-      get children() {
-        return g(Ve, {
-          size: 20
-        });
-      }
-    })), w((d) => {
-      var y, k;
-      var u = !l(), f = l() ? `${(y = l()) == null ? void 0 : y.x}px` : "0", v = l() ? `${(k = l()) == null ? void 0 : k.y}px` : "0";
-      return u !== d.e && (s.hidden = d.e = u), f !== d.t && ((d.t = f) != null ? s.style.setProperty("left", f) : s.style.removeProperty("left")), v !== d.a && ((d.a = v) != null ? s.style.setProperty("top", v) : s.style.removeProperty("top")), d;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    }), s;
-  })();
-};
-var Mn = /* @__PURE__ */ b('<div class=echo-drawing-layer-container><svg width=100% height=100% class=echo-drawing-layer preserveAspectRatio=none><path class=echo-drawing-layer-mask fill="rgba(33, 43, 55, 1)"fill-opacity=0.2 fill-rule=evenodd>');
-const An = () => {
-  const e = x();
-  let t;
-  return fe(() => {
-    t == null || t.addEventListener("mousemove", e.drawing.methods.handleMove), t == null || t.addEventListener("mouseup", e.drawing.methods.handleEnd), t == null || t.addEventListener("touchmove", e.drawing.methods.handleMove, {
+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();
+  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, {
       passive: !1
-    }), t == null || t.addEventListener("touchend", e.drawing.methods.handleEnd);
-  }), K(() => {
-    t == null || t.removeEventListener("mousemove", e.drawing.methods.handleMove), t == null || t.removeEventListener("mouseup", e.drawing.methods.handleEnd), t == null || t.removeEventListener("touchmove", e.drawing.methods.handleMove), t == null || t.removeEventListener("touchend", e.drawing.methods.handleEnd);
+    }), n == null || n.addEventListener("touchend", e.drawing.methods.handleEnd);
+  }), ee(() => {
+    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 n = Mn(), o = n.firstChild, i = o.firstChild, r = t;
-    return typeof r == "function" ? G(r, n) : t = n, m(n, g(Tn, {}), o), m(n, g(Dn, {}), o), _(o, "touchend", e.drawing.methods.handleLeave, !0), _(o, "mouseleave", e.drawing.methods.handleLeave), _(o, "mouseenter", e.drawing.methods.handleEnter), o.$$touchmove = (a) => {
-      a.preventDefault(), e.drawing.methods.handleMove(a);
-    }, _(o, "mousemove", e.drawing.methods.handleMove, !0), o.$$touchstart = (a) => {
-      a.preventDefault(), e.drawing.methods.handleStart(a), e.drawing.methods.handleEnter(a), e.drawing.setState({
+    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) => {
+      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({
         showTooltip: !1,
         hasDrawn: !0
       });
-    }, o.$$mousedown = (a) => {
-      e.drawing.methods.handleStart(a), e.drawing.setState({
+    }, r.$$mousedown = (i) => {
+      e.drawing.methods.handleStart(i), e.drawing.setState({
         showTooltip: !1,
         hasDrawn: !0
       });
-    }, m(o, g(re, {
+    }, v(r, g(_, {
       get each() {
         return e.drawing.state.shapes;
       },
-      children: (a) => g(Oe, {
+      children: (i) => g(He, {
         get id() {
-          return a.id;
+          return i.id;
         },
         get type() {
-          return a.type;
+          return i.type;
         },
         get color() {
-          return a.color;
+          return i.color;
         },
         get points() {
-          return a.points;
+          return i.points;
         },
         get selectedShapeId() {
           return e.drawing.state.selectedShapeId;
@@ -1794,7 +1962,7 @@ const An = () => {
           return e.drawing.methods.handleShapeClick;
         }
       })
-    }), null), m(o, g(Oe, {
+    }), null), v(r, g(He, {
       id: "temp",
       get type() {
         return e.drawing.state.selectedTool;
@@ -1808,191 +1976,594 @@ const An = () => {
       get selectedShapeId() {
         return e.drawing.state.selectedShapeId;
       }
-    }), null), w((a) => {
-      var l = e.drawing.state.cursor, s = At({
+    }), null), b((i) => {
+      var l = e.drawing.state.cursor, s = nn({
         width: e.widget.state.dimensions.width,
         height: e.widget.state.dimensions.height
       }, e.drawing.state.currentPoints, e.drawing.state.shapes);
-      return l !== a.e && ((a.e = l) != null ? n.style.setProperty("cursor", l) : n.style.removeProperty("cursor")), s !== a.t && h(i, "d", a.t = s), a;
+      return l !== i.e && ((i.e = l) != null ? t.style.setProperty("cursor", l) : t.style.removeProperty("cursor")), s !== i.t && u(a, "d", i.t = s), i;
     }, {
       e: void 0,
       t: void 0
-    }), n;
+    }), t;
   })();
 };
 T(["mousedown", "touchstart", "mousemove", "touchmove", "touchend"]);
-var jn = /* @__PURE__ */ b("<div class=echo-feedback data-hide-when-drawing=true><form class=echo-feedback-content><div class=echo-feedback-header><h3 class=echo-feedback-title></h3><div class=echo-feedback-header-actions></div></div><textarea class=echo-feedback-form-textarea required>");
-const Fn = () => {
-  let e;
-  const t = x(), n = async (r) => {
-    r.preventDefault();
-    const a = await Mt(), l = {
-      comment: t.feedback.state.comment,
-      screenshot: a,
-      metadata: {
-        url: window.location.href,
-        userAgent: navigator.userAgent,
-        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-        browserInfo: {
-          width: window.innerWidth,
-          height: window.innerHeight,
-          screenWidth: window.screen.width,
-          screenHeight: window.screen.height
+const ce = (e) => ({
+  handleTextChange: (o) => {
+    const i = o.target;
+    e(i.value);
+  },
+  handleSelectChange: (o) => {
+    e(o);
+  },
+  handleCheckboxChange: (o, i, l) => {
+    const s = l ? [...o, i] : o.filter((c) => c !== i);
+    e(s);
+  },
+  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) => (() => {
+  var n = ir();
+  return v(n, (() => {
+    var t = S(() => !!e.label);
+    return () => t() && (() => {
+      var r = sr(), a = r.firstChild;
+      return v(a, () => e.label), v(r, (() => {
+        var o = S(() => !!e.required);
+        return () => o() && lr();
+      })(), null), r;
+    })();
+  })(), null), v(n, () => e.children, null), n;
+})();
+var cr = /* @__PURE__ */ w("<textarea class=echo-input-field rows=5>"), dr = /* @__PURE__ */ w("<div class=visually-hidden>");
+const st = (e) => {
+  const {
+    handleTextChange: n
+  } = ce(e.onChange);
+  return g(de, {
+    get label() {
+      return e.config.label;
+    },
+    get required() {
+      return e.config.required;
+    },
+    get children() {
+      return [(() => {
+        var t = cr();
+        return U(t, "input", n, !0), b((r) => {
+          var a = e.config.id, o = e.config.placeholder, i = e.config.required, l = e.config.label || e.config.placeholder, s = e.config.required, c = e.value === "", d = `${e.config.id}-description`;
+          return a !== r.e && u(t, "id", r.e = a), o !== r.t && u(t, "placeholder", r.t = o), i !== r.a && (t.required = r.a = i), l !== r.o && u(t, "aria-label", r.o = l), s !== r.i && u(t, "aria-required", r.i = s), c !== r.n && u(t, "aria-invalid", r.n = c), d !== r.s && u(t, "aria-describedby", r.s = d), r;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0,
+          n: void 0,
+          s: void 0
+        }), b(() => t.value = e.value === void 0 ? "" : e.value), t;
+      })(), (() => {
+        var t = dr();
+        return v(t, () => e.config.placeholder), b(() => u(t, "id", `${e.config.id}-description`)), t;
+      })()];
+    }
+  });
+};
+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 {
+    handleCheckboxChange: n,
+    getCheckboxValue: t
+  } = ce(e.onChange), r = () => t(e.value), a = () => r().length > 0;
+  return g(de, {
+    get label() {
+      return e.config.label;
+    },
+    get required() {
+      return e.config.required;
+    },
+    get children() {
+      var o = ur();
+      return v(o, g(_, {
+        get each() {
+          return e.config.options;
+        },
+        children: (i, l) => (() => {
+          var s = hr(), c = s.firstChild, d = c.nextSibling;
+          return c.addEventListener("change", (h) => n(r(), i.value, h.currentTarget.checked)), v(d, () => i.label), b(() => c.required = e.config.required && !a() && l() === 0), b(() => c.value = i.value), b(() => c.checked = r().includes(i.value)), s;
+        })()
+      })), b(() => u(o, "aria-required", e.config.required)), o;
+    }
+  });
+};
+var fr = /* @__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, {
+    get label() {
+      return e.config.label;
+    },
+    get required() {
+      return e.config.required;
+    },
+    get children() {
+      var t = fr();
+      return v(t, g(_, {
+        get each() {
+          return e.config.options;
+        },
+        children: (r) => (() => {
+          var a = mr(), o = a.firstChild, i = o.nextSibling;
+          return o.addEventListener("change", () => n(r.value)), v(i, () => r.label), b((l) => {
+            var s = e.config.id, c = e.config.required;
+            return s !== l.e && u(o, "name", l.e = s), c !== l.t && (o.required = l.t = c), l;
+          }, {
+            e: void 0,
+            t: void 0
+          }), b(() => o.value = r.value), b(() => o.checked = e.value === r.value), a;
+        })()
+      })), b(() => u(t, "aria-required", e.config.required)), t;
+    }
+  });
+};
+var br = /* @__PURE__ */ w("<div class=echo-select-dropdown role=listbox>"), wr = /* @__PURE__ */ w('<div class=echo-select><button type=button class=echo-select-trigger aria-haspopup=listbox><span></span><svg class=echo-select-arrow width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m6 9 6 6 6-6"></path></svg></button><input type=text class=visually-hidden aria-hidden=true>'), yr = /* @__PURE__ */ w("<button type=button class=echo-select-option role=option>");
+const pr = (e) => {
+  const {
+    handleSelectChange: n
+  } = ce(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);
+  }, c = () => {
+    r(!t());
+  };
+  return M({
+    event: "mousedown",
+    callback: (h) => {
+      if (!t() || !a) return;
+      h.composedPath().includes(a) || r(!1);
+    }
+  }), g(de, {
+    get label() {
+      return e.config.label;
+    },
+    get required() {
+      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) => {
+        p.stopPropagation(), c();
+      };
+      var C = o;
+      typeof C == "function" ? V(C, f) : o = f, v(m, () => {
+        var p;
+        return ((p = l()) == null ? void 0 : p.label) || e.config.placeholder;
+      }), v(h, g(D, {
+        get when() {
+          return t();
+        },
+        get children() {
+          var p = br();
+          return v(p, g(_, {
+            get each() {
+              return e.config.options;
+            },
+            children: (P) => (() => {
+              var z = yr();
+              return z.$$click = (k) => s(P, k), v(z, () => P.label), b((k) => {
+                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;
+              }, {
+                e: void 0,
+                t: void 0
+              }), z;
+            })()
+          })), 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;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0
+      }), b(() => y.value = e.value === void 0 ? "" : e.value), h;
+    }
+  });
+};
+T(["click"]);
+var xr = /* @__PURE__ */ w("<input type=text class=echo-input-field>");
+const kr = (e) => {
+  const {
+    handleTextChange: n
+  } = ce(e.onChange);
+  return g(de, {
+    get label() {
+      return e.config.label;
+    },
+    get required() {
+      return e.config.required;
+    },
+    get children() {
+      var t = xr();
+      return U(t, "input", n, !0), b((r) => {
+        var a = e.config.placeholder, o = e.config.required;
+        return a !== r.e && u(t, "placeholder", r.e = a), o !== r.t && (t.required = r.t = o), r;
+      }, {
+        e: void 0,
+        t: void 0
+      }), b(() => t.value = e.value === void 0 ? "" : e.value), t;
+    }
+  });
+};
+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, {
+  get when() {
+    return e.config.type;
+  },
+  keyed: !0,
+  get fallback() {
+    return Sr();
+  },
+  get children() {
+    return g(ht, {
+      get fallback() {
+        return (() => {
+          var n = Cr();
+          return n.firstChild, v(n, () => e.config.type, null), n;
+        })();
       },
-      console: _e()
-    };
-    t.methods.submit(l);
+      get children() {
+        return [g(te, {
+          get when() {
+            return e.config.type === "text";
+          },
+          get children() {
+            return g(kr, {
+              get config() {
+                return e.config;
+              },
+              get value() {
+                return e.value;
+              },
+              get onChange() {
+                return e.onChange;
+              }
+            });
+          }
+        }), g(te, {
+          get when() {
+            return e.config.type === "textarea";
+          },
+          get children() {
+            return g(st, {
+              get config() {
+                return e.config;
+              },
+              get value() {
+                return e.value;
+              },
+              get onChange() {
+                return e.onChange;
+              }
+            });
+          }
+        }), g(te, {
+          get when() {
+            return e.config.type === "radio";
+          },
+          get children() {
+            return g(vr, {
+              get config() {
+                return e.config;
+              },
+              get value() {
+                return e.value;
+              },
+              get onChange() {
+                return e.onChange;
+              }
+            });
+          }
+        }), g(te, {
+          get when() {
+            return e.config.type === "checkbox";
+          },
+          get children() {
+            return g(gr, {
+              get config() {
+                return e.config;
+              },
+              get value() {
+                return e.value;
+              },
+              get onChange() {
+                return e.onChange;
+              }
+            });
+          }
+        }), g(te, {
+          get when() {
+            return e.config.type === "select";
+          },
+          get children() {
+            return g(pr, {
+              get config() {
+                return e.config;
+              },
+              get value() {
+                return e.value;
+              },
+              get onChange() {
+                return e.onChange;
+              }
+            });
+          }
+        })];
+      }
+    });
+  }
+}), Er = () => {
+  const e = navigator.connection;
+  return {
+    effectiveType: e == null ? void 0 : e.effectiveType,
+    downlink: e == null ? void 0 : e.downlink,
+    rtt: e == null ? void 0 : e.rtt,
+    saveData: e == null ? void 0 : e.saveData
   };
-  oe(() => {
-    e && t.widget.state.isOpen && e.focus();
-  });
-  const o = (r) => {
-    r.stopPropagation(), t.feedback.setState({
+}, Pr = () => ({
+  width: window.innerWidth,
+  height: window.innerHeight,
+  screenWidth: window.screen.width,
+  screenHeight: window.screen.height,
+  language: navigator.language,
+  languages: navigator.languages,
+  doNotTrack: navigator.doNotTrack,
+  cookiesEnabled: navigator.cookieEnabled,
+  hardwareConcurrency: navigator.hardwareConcurrency,
+  maxTouchPoints: navigator.maxTouchPoints,
+  colorDepth: window.screen.colorDepth,
+  pixelRatio: window.devicePixelRatio,
+  availableWidth: window.screen.availWidth,
+  availableHeight: window.screen.availHeight
+}), zr = () => {
+  const e = new URL(window.location.href), n = {};
+  return e.searchParams.forEach((t, r) => {
+    n[r] = t;
+  }), {
+    url: e.href,
+    origin: e.origin,
+    pathname: e.pathname,
+    searchParams: n,
+    referrer: document.referrer
+  };
+}, Tr = () => ({
+  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  localDateTime: (/* @__PURE__ */ new Date()).toISOString()
+}), Ir = () => ({
+  userAgent: navigator.userAgent,
+  browserInfo: Pr(),
+  networkInfo: Er(),
+  locationInfo: zr(),
+  timeInfo: Tr(),
+  console: Yt()
+});
+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) => {
+    a.preventDefault();
+    const o = await tn(), i = {
+      message: e.feedback.state.message,
+      screenshot: o,
+      metadata: Ir(),
+      customInputs: e.feedback.state.customInputValues
+    };
+    e.methods.submit(i);
+  }, t = (a) => {
+    a.stopPropagation(), e.feedback.setState({
       isMinimized: !0
     });
-  }, i = () => {
-    t.feedback.setState({
+  }, r = () => {
+    e.feedback.setState({
       isMinimized: !1
     });
   };
-  return (() => {
-    var r = jn(), a = r.firstChild, l = a.firstChild, s = l.firstChild, c = s.nextSibling, d = l.nextSibling;
-    r.$$click = () => t.feedback.state.isMinimized && i(), a.addEventListener("submit", n), m(s, () => t.widget.state.text.feedbackForm.title), m(c, g(O, {
+  return Y(() => {
+    e.widget.state.isOpen && requestAnimationFrame(() => {
+      var a;
+      (a = document.querySelector(".echo-input-field")) == null || a.focus();
+    });
+  }), (() => {
+    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, {
       type: "button",
       title: "Hide form",
       variant: "secondary",
       size: "sm",
-      onClick: o,
+      onClick: t,
+      "aria-label": "Minimize feedback form",
       get children() {
-        return g(_t, {
+        return g(yn, {
           size: 20
         });
       }
-    }), null), m(c, g(O, {
+    }), null), v(s, g(W, {
       type: "button",
       title: "Close form",
       variant: "secondary",
       size: "sm",
-      onClick: () => t.widget.setState({
+      onClick: () => e.widget.setState({
         isOpen: !1
       }),
+      "aria-label": "Close feedback form",
       get children() {
-        return g(ie, {
+        return g(pe, {
           size: 20
         });
       }
-    }), null), d.$$input = (f) => t.feedback.setState({
-      comment: f.currentTarget.value
-    });
-    var u = e;
-    return typeof u == "function" ? G(u, d) : e = d, m(a, g(O, {
+    }), null), v(c, g(st, {
+      get config() {
+        return {
+          type: "textarea",
+          id: "message",
+          placeholder: e.widget.state.text.feedbackForm.placeholder,
+          label: "Feedback Message",
+          required: !0
+        };
+      },
+      get value() {
+        return e.feedback.state.message;
+      },
+      onChange: (d) => e.feedback.setState({
+        message: d
+      })
+    }), null), v(o, g(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(_, {
+          get each() {
+            return e.widget.state.customInputs;
+          },
+          children: (h) => g($r, {
+            config: h,
+            get value() {
+              return e.feedback.state.customInputValues[h.id];
+            },
+            onChange: (f) => e.feedback.setState({
+              customInputValues: {
+                ...e.feedback.state.customInputValues,
+                [h.id]: f
+              }
+            })
+          })
+        }), null), d;
+      }
+    }), null), v(o, g(W, {
       type: "submit",
       variant: "primary",
       size: "lg",
       style: {
         width: "100%"
       },
+      "aria-label": "Submit feedback",
       get children() {
-        return t.widget.state.text.feedbackForm.submitButton;
+        return e.widget.state.text.feedbackForm.submitButton;
       }
-    }), null), w((f) => {
-      var v = t.feedback.state.isMinimized, y = t.feedback.state.isMinimized ? "pointer" : "default", k = t.widget.state.text.feedbackForm.placeholder;
-      return v !== f.e && h(r, "data-minimized", f.e = v), y !== f.t && ((f.t = y) != null ? r.style.setProperty("cursor", y) : r.style.removeProperty("cursor")), k !== f.a && h(d, "placeholder", f.a = k), f;
+    }), 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;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), w(() => d.value = t.feedback.state.comment), r;
+    }), a;
   })();
 };
-T(["click", "input"]);
-var Ln = /* @__PURE__ */ b("<style>"), Nn = /* @__PURE__ */ b("<div class=echo-launcher>"), Bn = /* @__PURE__ */ b("<div class=echo-overlay>"), Yn = /* @__PURE__ */ b("<div class=echo-root>");
-const Hn = (e) => g(vt, {
+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, {
   useShadow: !0,
   get mount() {
     return document.body;
   },
   get children() {
-    return g(Yt, Z(e, {
+    return g(cn, ge(e, {
       get children() {
-        return g(Un, {
+        return g(Wr, {
           get children() {
-            return [g(Wn, {
+            return [g(qr, {
               get primaryColor() {
                 return e.primaryColor;
               }
-            }), g(_n, {})];
+            }), g(Vr, {})];
           }
         });
       }
     }));
   }
-}), Wn = (e) => {
-  const [t, n] = M("");
-  return oe(() => {
-    const o = `
-				.echo-root {
-					--primary-color: ${e.primaryColor};
-					--primary-text-color: ${$t(e.primaryColor)};
-				}
-			`;
-    n(o);
+}), qr = (e) => {
+  const [n, t] = A("");
+  return Y(() => {
+    const r = `
+						.echo-root {
+							--primary-color: ${e.primaryColor};
+							--primary-text-color: ${_t(e.primaryColor)};
+						}
+					`;
+    t(r);
   }), (() => {
-    var o = Ln();
-    return m(o, Ht, null), m(o, t, null), o;
+    var r = Dr();
+    return v(r, hn, null), v(r, n, null), r;
   })();
-}, _n = () => {
-  const e = x();
-  return [(() => {
-    var t = Nn();
-    return m(t, g(pn, {}), null), m(t, g(Cn, {}), null), m(t, g(kn, {}), null), w(() => h(t, "data-hidden", e.widget.state.isOpen)), t;
-  })(), (() => {
-    var t = Bn();
-    return m(t, g(Fn, {}), null), m(t, g(dn, {}), null), m(t, g(An, {}), null), w(() => h(t, "data-hidden", !e.widget.state.isOpen)), t;
-  })()];
-}, Un = (e) => {
-  let t;
-  const n = x(), o = () => {
-    requestAnimationFrame(() => {
-      t && (t.style.height = "0px", t.style.height = `${document.documentElement.scrollHeight}px`, n.widget.setState({
-        dimensions: {
-          width: document.documentElement.clientWidth,
-          height: document.documentElement.scrollHeight
-        }
-      }));
-    });
-  };
-  return W({
-    event: "resize",
-    callback: o,
-    onMount: o
-  }), bt("Escape", () => {
-    n.widget.setState({
-      isOpen: !1
-    });
-  }), ge({
-    target: document.documentElement,
-    options: {
-      childList: !0,
-      subtree: !0,
-      attributes: !0
-    },
-    callback: () => {
-      o();
+}, Vr = () => {
+  const e = 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, {
+    get children() {
+      return [g(Ar, {}), g(Fn, {}), g(ar, {})];
     }
+  })];
+}, Br = (e) => {
+  const [n, t] = A(), r = E(), a = dn(() => n());
+  return Y(() => {
+    n() && r.widget.setState({
+      dimensions: a()
+    });
+  }), Y(() => {
+    var o, i;
+    r.widget.state.isOpen ? (o = n()) == null || o.showModal() : (i = n()) == null || i.close();
   }), (() => {
-    var i = Yn(), r = t;
-    return typeof r == "function" ? G(r, i) : t = i, m(i, () => e.children), w((a) => {
-      var l = n.drawing.state.isDrawing, s = `${n.widget.state.dimensions.height}px`, c = `${n.widget.state.dimensions.width}px`;
-      return l !== a.e && h(i, "data-drawing", a.e = l), s !== a.t && ((a.t = s) != null ? i.style.setProperty("height", s) : i.style.removeProperty("height")), c !== a.a && ((a.a = c) != null ? i.style.setProperty("width", c) : i.style.removeProperty("width")), a;
+    var o = Lr();
+    return o.addEventListener("close", () => r.widget.setState({
+      isOpen: !1
+    })), V(t, o), v(o, () => e.children), b((i) => {
+      var l = `${a().height}px`, s = `${a().width}px`, c = !r.widget.state.isOpen;
+      return l !== i.e && ((i.e = l) != null ? o.style.setProperty("height", l) : o.style.removeProperty("height")), s !== i.t && ((i.t = s) != null ? o.style.setProperty("width", s) : o.style.removeProperty("width")), c !== i.a && u(o, "data-hidden", i.a = c), i;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), i;
+    }), o;
   })();
-}, Kn = {
+}, Wr = (e) => {
+  const n = E();
+  return un({
+    onUrlChange: (t) => n.methods.handlePageChange(t)
+  }), ye(() => {
+    Ht(), Jt((t) => {
+      if (n.widget.state.isOpen && t.type === "keydown")
+        switch (t.key) {
+          case "Escape":
+            t.stopImmediatePropagation();
+            break;
+        }
+    });
+  }), ee(() => {
+    Ut(), Zt();
+  }), (() => {
+    var t = jr();
+    return v(t, () => e.children), b(() => u(t, "data-drawing", n.drawing.state.isDrawing)), t;
+  })();
+}, _r = {
   welcomeMessage: {
     text: "Click here to leave feedback",
     closeAriaLabel: "Close welcome message"
@@ -2017,37 +2588,35 @@ const Hn = (e) => g(vt, {
     text: "Click & drag to draw"
   }
 };
-let Q = null;
-function Xn(e) {
-  Q && (console.warn("Echo widget is already initialized. Cleaning up previous instance..."), Q());
+let he = null;
+function Yr(e) {
+  he && (console.warn("Echo widget is already initialized. Cleaning up previous instance..."), he());
   try {
-    jt(e), Et();
+    rn(e);
     const {
-      position: t = "bottom-right",
-      primaryColor: n = "#6227dc",
-      onSubmit: o,
-      textConfig: i = {}
-    } = e, r = We(Kn, i), a = document.createElement("div");
-    a.id = "echo-container", document.body.appendChild(a);
-    const l = st(() => g(Hn, {
-      position: t,
-      primaryColor: n,
-      textConfig: r,
-      onSubmit: async (c) => await o({
-        ...c,
-        console: _e()
-      })
-    }), a), s = () => {
-      l(), a.remove(), zt(), Q = null;
+      position: n = "bottom-right",
+      primaryColor: t = "#6227dc",
+      onSubmit: r,
+      textConfig: a = {},
+      customInputs: o = []
+    } = e, i = Ke(_r, a), l = document.createElement("div");
+    l.id = "echo-container", document.body.appendChild(l);
+    const s = kt(() => g(Nr, {
+      position: n,
+      primaryColor: t,
+      textConfig: i,
+      onSubmit: r,
+      customInputs: o
+    }), l), c = () => {
+      s(), l.remove(), he = null;
     };
-    return window.addEventListener("unload", s, {
+    return window.addEventListener("unload", c, {
       once: !0
-    }), Q = s, s;
-  } catch (t) {
-    throw console.error("Echo initialization failed:", t), t;
+    }), he = c, c;
+  } catch (n) {
+    throw console.error("Echo initialization failed:", n), n;
   }
 }
 export {
-  Xn as initEcho
+  Yr as initEcho
 };
-//# sourceMappingURL=echo.es.js.map