@ikonai/sdk-react-ui 1.0.74 → 1.0.76

package/index.js

@@ -56,7 +56,7 @@ function jn() {
       switch (d) {
         case p:
           return "Fragment";
-        case y:
+        case b:
           return "Profiler";
         case S:
           return "StrictMode";
@@ -71,7 +71,7 @@ function jn() {
         switch (typeof d.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), d.$$typeof) {
-          case g:
+          case y:
             return "Portal";
           case v:
             return d.displayName || "Context";
@@ -193,13 +193,13 @@ function jn() {
         if (N)
           if ($(L)) {
             for (N = 0; N < L.length; N++)
-              b(L[N]);
+              g(L[N]);
             Object.freeze && Object.freeze(L);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else b(L);
+        else g(L);
       if (B.call(A, "key")) {
         L = t(d);
         var Q = Object.keys(A).filter(function(Me) {
@@ -235,13 +235,13 @@ React keys must be passed directly to JSX without using spread:
         me
       );
     }
-    function b(d) {
+    function g(d) {
       m(d) ? d._store && (d._store.validated = 1) : typeof d == "object" && d !== null && d.$$typeof === z && (d._payload.status === "fulfilled" ? m(d._payload.value) && d._payload.value._store && (d._payload.value._store.validated = 1) : d._store && (d._store.validated = 1));
     }
     function m(d) {
       return typeof d == "object" && d !== null && d.$$typeof === u;
     }
-    var c = En, u = Symbol.for("react.transitional.element"), g = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), S = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), R = Symbol.for("react.consumer"), v = Symbol.for("react.context"), T = Symbol.for("react.forward_ref"), U = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), z = Symbol.for("react.lazy"), I = Symbol.for("react.activity"), P = Symbol.for("react.client.reference"), M = c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, B = Object.prototype.hasOwnProperty, $ = Array.isArray, W = console.createTask ? console.createTask : function() {
+    var c = En, u = Symbol.for("react.transitional.element"), y = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), S = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), R = Symbol.for("react.consumer"), v = Symbol.for("react.context"), T = Symbol.for("react.forward_ref"), U = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), z = Symbol.for("react.lazy"), I = Symbol.for("react.activity"), P = Symbol.for("react.client.reference"), M = c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, B = Object.prototype.hasOwnProperty, $ = Array.isArray, W = console.createTask ? console.createTask : function() {
       return null;
     };
     c = {
@@ -342,7 +342,7 @@ function Gn(t) {
 }
 const Ze = G(function t({ nodeId: e, context: n }) {
   const r = Z(n.store, e), o = r ? Kn(r) : [], s = Gn(o), i = V(
-    () => o.length === 0 ? null : o.map((b) => /* @__PURE__ */ w.jsx(t, { nodeId: b.id, context: n }, b.id)),
+    () => o.length === 0 ? null : o.map((g) => /* @__PURE__ */ w.jsx(t, { nodeId: g.id, context: n }, g.id)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [s, n]
   );
@@ -365,37 +365,37 @@ function Xn(t, e) {
 const Hn = G(function({ store: e, library: n, viewId: r, emptyFallback: o = null, onAction: s, client: i, video: a }) {
   const { rootViewId: l, rootNodeId: h } = Bn(e, r), f = E(s);
   f.current = s;
-  const b = E(i);
-  b.current = i;
+  const g = E(i);
+  g.current = i;
   const m = E(a);
   m.current = a;
-  const c = j((g, p) => {
-    if (!g)
+  const c = j((y, p) => {
+    if (!y)
       return;
     const S = Wn(p);
-    f.current?.(g, S);
+    f.current?.(y, S);
   }, []), u = V(() => {
-    const g = {
+    const y = {
       store: e,
       library: n,
       handlerCache: e.handlerCache,
       // Access payloads from store at call time, not captured snapshot
       getPayload: (p) => e.getSnapshot().payloads.get(p),
-      renderChildren: (p) => zn(p, g),
+      renderChildren: (p) => zn(p, y),
       renderView: (p) => {
         const S = e.getSnapshot().views.get(p);
-        return S ? /* @__PURE__ */ w.jsx(Ze, { nodeId: S.id, context: g }) : null;
+        return S ? /* @__PURE__ */ w.jsx(Ze, { nodeId: S.id, context: y }) : null;
       },
       dispatchAction: c,
       // Access client/video via refs to avoid context recreation
       get client() {
-        return b.current;
+        return g.current;
       },
       get video() {
         return m.current;
       }
     };
-    return g;
+    return y;
   }, [e, n, c]);
   return !l || !h ? o : /* @__PURE__ */ w.jsx("div", { "data-ikon-view-id": l, style: { display: "contents" }, children: /* @__PURE__ */ w.jsx(Ze, { nodeId: h, context: u }) });
 }, Xn);
@@ -439,13 +439,13 @@ function Jn() {
       n && !r.includes(n) && (n.style.outline = "", n.style.outlineOffset = ""), n = null, o.style.display = "none";
     }
     function i(c) {
-      for (const g of r)
-        g !== n && (g.style.outline = "", g.style.outlineOffset = "");
+      for (const y of r)
+        y !== n && (y.style.outline = "", y.style.outlineOffset = "");
       r = [];
       const u = new Set(c);
-      for (const g of Array.from(document.querySelectorAll("[data-ikon-source]"))) {
-        const p = g.getAttribute("data-ikon-source") ?? "";
-        u.has(p) && (g.style.outline = "2px solid #a6e3a1", g.style.outlineOffset = "1px", r.push(g));
+      for (const y of Array.from(document.querySelectorAll("[data-ikon-source]"))) {
+        const p = y.getAttribute("data-ikon-source") ?? "";
+        u.has(p) && (y.style.outline = "2px solid #a6e3a1", y.style.outlineOffset = "1px", r.push(y));
       }
     }
     function a(c) {
@@ -455,8 +455,8 @@ function Jn() {
       if (!u || u === n)
         return;
       s(), n = u, n.style.outline = "2px solid #89b4fa", n.style.outlineOffset = "1px";
-      const g = u.getAttribute("data-ikon-source") ?? "";
-      o.textContent = g, o.style.display = "block";
+      const y = u.getAttribute("data-ikon-source") ?? "";
+      o.textContent = y, o.style.display = "block";
       const p = u.getBoundingClientRect();
       o.style.left = `${p.left}px`, o.style.top = `${Math.max(0, p.top - 24)}px`;
     }
@@ -472,24 +472,24 @@ function Jn() {
       if (!u)
         return;
       c.preventDefault(), c.stopPropagation();
-      const g = {
+      const y = {
         sourceMarker: u.getAttribute("data-ikon-source") ?? "",
         tagName: u.tagName.toLowerCase(),
         textContent: (u.textContent ?? "").trim().substring(0, 200)
       };
-      window.dispatchEvent(new CustomEvent("ikon-inspect-select", { detail: g })), window.parent.postMessage({ type: "ikon-element-selected", payload: g }, "*");
+      window.dispatchEvent(new CustomEvent("ikon-inspect-select", { detail: y })), window.parent.postMessage({ type: "ikon-element-selected", payload: y }, "*");
     }
     function f(c, u) {
       return document.elementFromPoint(c, u)?.closest?.("[data-ikon-source]");
     }
-    function b(c) {
+    function g(c) {
       if (c === n || (s(), !c))
         return;
       n = c, n.style.outline = `2px solid ${r.includes(c) ? "#a6e3a1" : "#89b4fa"}`, n.style.outlineOffset = "1px";
       const u = c.getAttribute("data-ikon-source") ?? "";
       o.textContent = u, o.style.display = "block";
-      const g = c.getBoundingClientRect();
-      o.style.left = `${g.left}px`, o.style.top = `${Math.max(0, g.top - 24)}px`;
+      const y = c.getBoundingClientRect();
+      o.style.left = `${y.left}px`, o.style.top = `${Math.max(0, y.top - 24)}px`;
     }
     function m(c) {
       if (c.data?.type === "ikon-inspect-mode") {
@@ -499,43 +499,43 @@ function Jn() {
       }
       if (c.data?.type === "ikon-inspect-at") {
         const u = f(c.data.x, c.data.y);
-        b(u);
-        const g = u?.getAttribute("data-ikon-source") ?? "";
+        g(u);
+        const y = u?.getAttribute("data-ikon-source") ?? "";
         window.parent.postMessage({
           type: "ikon-inspect-hover-result",
-          payload: { sourceMarker: g }
+          payload: { sourceMarker: y }
         }, "*");
       }
       if (c.data?.type === "ikon-inspect-click") {
         const u = f(c.data.x, c.data.y);
         if (u) {
-          const g = {
+          const y = {
             sourceMarker: u.getAttribute("data-ikon-source") ?? "",
             tagName: u.tagName.toLowerCase(),
             textContent: (u.textContent ?? "").trim().substring(0, 200)
           };
-          window.dispatchEvent(new CustomEvent("ikon-inspect-select", { detail: g })), window.parent.postMessage({ type: "ikon-element-selected", payload: g }, "*");
+          window.dispatchEvent(new CustomEvent("ikon-inspect-select", { detail: y })), window.parent.postMessage({ type: "ikon-element-selected", payload: y }, "*");
         }
       }
       if (c.data?.type === "ikon-inspect-click-add") {
         const u = f(c.data.x, c.data.y);
         if (u) {
-          const g = {
+          const y = {
             sourceMarker: u.getAttribute("data-ikon-source") ?? "",
             tagName: u.tagName.toLowerCase(),
             textContent: (u.textContent ?? "").trim().substring(0, 200)
           };
           window.parent.postMessage({
             type: "ikon-inspect-rect-result",
-            payload: { elements: [g], append: !0 }
+            payload: { elements: [y], append: !0 }
           }, "*");
         }
       }
       if (c.data?.type === "ikon-inspect-rect") {
-        const { x1: u, y1: g, x2: p, y2: S, append: y } = c.data, R = document.querySelectorAll("[data-ikon-source]"), v = [];
+        const { x1: u, y1: y, x2: p, y2: S, append: b } = c.data, R = document.querySelectorAll("[data-ikon-source]"), v = [];
         for (const T of Array.from(R)) {
           const U = T.getBoundingClientRect();
-          U.right > u && U.left < p && U.bottom > g && U.top < S && v.push({
+          U.right > u && U.left < p && U.bottom > y && U.top < S && v.push({
             sourceMarker: T.getAttribute("data-ikon-source") ?? "",
             tagName: T.tagName.toLowerCase(),
             textContent: (T.textContent ?? "").trim().substring(0, 200)
@@ -543,7 +543,7 @@ function Jn() {
         }
         v.length > 0 && window.parent.postMessage({
           type: "ikon-inspect-rect-result",
-          payload: { elements: v, append: y ?? !1 }
+          payload: { elements: v, append: b ?? !1 }
         }, "*");
       }
       c.data?.type === "ikon-inspect-highlight" && i(c.data.markers ?? []), c.data?.type === "ikon-inspect-clear" && s();
@@ -566,17 +566,17 @@ const Bt = G(function({ stores: e, registry: n, category: r = Qe, onAction: o, c
     () => {
       const m = [];
       for (const [c, u] of e) {
-        const g = u.store.getSnapshot();
-        Qn(u.category, r) && (!g.rootViewId || !g.views.has(g.rootViewId) || m.push({ key: c, store: u.store }));
+        const y = u.store.getSnapshot();
+        Qn(u.category, r) && (!y.rootViewId || !y.views.has(y.rootViewId) || m.push({ key: c, store: u.store }));
       }
       return m;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [e, r, i]
-  ), f = E(!1), b = h.length > 0;
+  ), f = E(!1), g = h.length > 0;
   return C(() => {
-    b && !f.current && (f.current = !0, Zn.debug("First UI render"));
-  }, [b]), b ? /* @__PURE__ */ w.jsxs(w.Fragment, { children: [
+    g && !f.current && (f.current = !0, Zn.debug("First UI render"));
+  }, [g]), g ? /* @__PURE__ */ w.jsxs(w.Fragment, { children: [
     /* @__PURE__ */ w.jsx(Jn, {}),
     h.map(({ key: m, store: c }) => /* @__PURE__ */ w.jsx(Hn, { store: c, library: n, onAction: a.current, client: l.current, video: l.current?.media?.video }, m))
   ] }) : null;
@@ -821,7 +821,7 @@ function ur(t, e) {
 }
 function dr() {
   const t = G(function({ nodeId: n, context: r }) {
-    const o = Z(r.store, n), s = E(null), i = de(o?.props?.targetViewId), a = o?.props?.focusOnly, l = typeof a == "boolean" ? a : void 0, h = de(o?.props?.priority), f = de(o?.props?.key), b = o?.props?.preciseGeneratedAt;
+    const o = Z(r.store, n), s = E(null), i = de(o?.props?.targetViewId), a = o?.props?.focusOnly, l = typeof a == "boolean" ? a : void 0, h = de(o?.props?.priority), f = de(o?.props?.key), g = o?.props?.preciseGeneratedAt;
     return C(() => {
       if (typeof document > "u")
         return;
@@ -830,13 +830,13 @@ function dr() {
         return;
       let u;
       if (l !== !0) {
-        const y = sr(c);
-        if (y)
-          if (cr(y), h === "Polite" && !ar(y))
-            u = ur(y, c);
+        const b = sr(c);
+        if (b)
+          if (cr(b), h === "Polite" && !ar(b))
+            u = ur(b, c);
           else {
-            const U = (y.parentElement ?? y).querySelector(`[${et}]`);
-            U && (U.style.display = "none"), Wt(y, c);
+            const U = (b.parentElement ?? b).querySelector(`[${et}]`);
+            U && (U.style.display = "none"), Wt(b, c);
           }
         else typeof c.scrollIntoView == "function" && requestAnimationFrame(() => {
           const R = c.getBoundingClientRect().top, v = typeof window < "u" ? window.innerHeight : 0, T = Math.abs(R) > v * Ft ? "auto" : "smooth";
@@ -855,7 +855,7 @@ function dr() {
           c.focus();
         }
       return u;
-    }, [l, h, i, f, b]), o ? /* @__PURE__ */ w.jsx(
+    }, [l, h, i, f, g]), o ? /* @__PURE__ */ w.jsx(
       "span",
       {
         ref: s,
@@ -890,6 +890,11 @@ function fr() {
         "data-ikon-source": s.sourceMarker,
         className: h,
         onClick: i ? a : void 0,
+        role: i && !l.role ? "button" : l.role,
+        tabIndex: i && l.tabIndex === void 0 ? 0 : l.tabIndex,
+        onKeyDown: i ? (g) => {
+          (g.key === "Enter" || g.key === " ") && (g.preventDefault(), a());
+        } : void 0,
         style: or(l.style, i ? "pointer" : void 0),
         children: f
       }
@@ -982,14 +987,14 @@ function Er() {
       });
     }, [a, l]), !s)
       return null;
-    const h = wr(Sr(s.props?.className), o), f = wt(s.props?.preload), b = _e(s.props?.controls), m = _e(s.props?.loop), c = _e(s.props?.muted);
+    const h = wr(Sr(s.props?.className), o), f = wt(s.props?.preload), g = _e(s.props?.controls), m = _e(s.props?.loop), c = _e(s.props?.muted);
     return /* @__PURE__ */ w.jsx(
       "audio",
       {
         ref: i,
         src: l,
         ...f !== void 0 ? { preload: f } : {},
-        ...b !== void 0 ? { controls: b } : {},
+        ...g !== void 0 ? { controls: g } : {},
         ...a !== void 0 ? { autoPlay: a } : {},
         ...m !== void 0 ? { loop: m } : {},
         ...c !== void 0 ? { muted: c } : {},
@@ -1038,30 +1043,30 @@ function tt(t) {
 const Rr = "std.video-canvas", Ar = "std.video-url-player";
 function Tr() {
   const t = G(function({ nodeId: n, context: r, className: o }) {
-    const s = Z(r.store, n), i = E(null), a = E(null), l = r.video, h = r.client, f = s ? tt(s.props?.streamId) : void 0, b = s ? Ne(s.props?.width) : void 0, m = s ? Ne(s.props?.height) : void 0, c = s ? Yt(Kt(s.props?.className), o) : o, [, u] = x(0);
+    const s = Z(r.store, n), i = E(null), a = E(null), l = r.video, h = r.client, f = s ? tt(s.props?.streamId) : void 0, g = s ? Ne(s.props?.width) : void 0, m = s ? Ne(s.props?.height) : void 0, c = s ? Yt(Kt(s.props?.className), o) : o, [, u] = x(0);
     C(() => {
       if (!h?.isWebRtcEnabled) return;
       const p = h.onWebRtcTrackMapChanged;
       return h.onWebRtcTrackMapChanged = (S) => {
-        p?.(S), S.kind === "video" && u((y) => y + 1);
+        p?.(S), S.kind === "video" && u((b) => b + 1);
       }, () => {
         h.onWebRtcTrackMapChanged = p;
       };
     }, [h]);
-    const g = h?.isWebRtcEnabled && f ? h.getWebRtcVideoStreamByStreamId(f) : null;
+    const y = h?.isWebRtcEnabled && f ? h.getWebRtcVideoStreamByStreamId(f) : null;
     return C(() => {
       const p = i.current;
-      if (!(!l || !p || !f || g))
+      if (!(!l || !p || !f || y))
         return l.attachCanvas(f, p), () => {
           l.detachCanvas(f);
         };
-    }, [l, f, g]), C(() => {
+    }, [l, f, y]), C(() => {
       const p = a.current;
-      if (!(!p || !g))
-        return p.srcObject = g, () => {
+      if (!(!p || !y))
+        return p.srcObject = y, () => {
           p.srcObject = null;
         };
-    }, [g]), s ? g ? /* @__PURE__ */ w.jsx(
+    }, [y]), s ? y ? /* @__PURE__ */ w.jsx(
       "video",
       {
         ref: a,
@@ -1072,7 +1077,7 @@ function Tr() {
         "data-ikon-source": s.sourceMarker,
         "data-ikon-video-stream-id": f,
         className: c,
-        ...b ? { width: b } : {},
+        ...g ? { width: g } : {},
         ...m ? { height: m } : {}
       },
       f
@@ -1084,7 +1089,7 @@ function Tr() {
         "data-ikon-source": s.sourceMarker,
         "data-ikon-video-stream-id": f,
         className: c,
-        ...b ? { width: b } : {},
+        ...g ? { width: g } : {},
         ...m ? { height: m } : {}
       },
       f
@@ -1119,19 +1124,19 @@ function Cr() {
       });
     }, [a, l]), !s)
       return null;
-    const h = Yt(Kt(s.props?.className), o), f = tt(s.props?.poster), b = be(s.props?.controls), m = be(s.props?.loop), c = be(s.props?.muted), u = be(s.props?.playsInline), g = Ne(s.props?.width), p = Ne(s.props?.height), S = s.children?.length ? r.renderChildren(s.children) : void 0;
+    const h = Yt(Kt(s.props?.className), o), f = tt(s.props?.poster), g = be(s.props?.controls), m = be(s.props?.loop), c = be(s.props?.muted), u = be(s.props?.playsInline), y = Ne(s.props?.width), p = Ne(s.props?.height), S = s.children?.length ? r.renderChildren(s.children) : void 0;
     return /* @__PURE__ */ w.jsx(
       "video",
       {
         ref: i,
         src: l,
         poster: f,
-        ...b !== void 0 ? { controls: b } : {},
+        ...g !== void 0 ? { controls: g } : {},
         ...a !== void 0 ? { autoPlay: a } : {},
         ...m !== void 0 ? { loop: m } : {},
         ...c !== void 0 ? { muted: c } : {},
         ...u !== void 0 ? { playsInline: u } : {},
-        ...g ? { width: g } : {},
+        ...y ? { width: y } : {},
         ...p ? { height: p } : {},
         "data-ikon-node-id": s.id,
         "data-ikon-source": s.sourceMarker,
@@ -1343,8 +1348,8 @@ class Pr {
     h && e.uniform3f(h, o, s, 1);
     const f = this.uniformLocations.get("iTime");
     f && e.uniform1f(f, a);
-    const b = this.uniformLocations.get("iTimeDelta");
-    b && e.uniform1f(b, l);
+    const g = this.uniformLocations.get("iTimeDelta");
+    g && e.uniform1f(g, l);
     const m = this.uniformLocations.get("iFrame");
     m && e.uniform1i(m, this.frameCount);
     const c = this.uniformLocations.get("iMouse");
@@ -1356,40 +1361,40 @@ class Pr {
     }
     for (let S = 0; S < le; S++) {
       e.activeTexture(e.TEXTURE0 + S), e.bindTexture(e.TEXTURE_2D, this.channels[S].texture);
-      const y = this.uniformLocations.get(`iChannel${S}`);
-      y && e.uniform1i(y, S);
+      const b = this.uniformLocations.get(`iChannel${S}`);
+      b && e.uniform1i(b, S);
     }
-    const g = this.uniformLocations.get("iChannelResolution");
-    g && e.uniform3fv(g, this.channelResolution);
+    const y = this.uniformLocations.get("iChannelResolution");
+    y && e.uniform3fv(y, this.channelResolution);
     const p = this.uniformLocations.get("iChannelTime");
     p && e.uniform1fv(p, this.channelTime);
-    for (const [S, y] of Object.entries(this.customUniforms)) {
+    for (const [S, b] of Object.entries(this.customUniforms)) {
       const R = this.uniformLocations.get(S);
       if (R)
-        switch (y.type) {
+        switch (b.type) {
           case "float":
-            e.uniform1f(R, y.value);
+            e.uniform1f(R, b.value);
             break;
           case "vec2": {
-            const v = y.value;
+            const v = b.value;
             e.uniform2f(R, v[0], v[1]);
             break;
           }
           case "vec3": {
-            const v = y.value;
+            const v = b.value;
             e.uniform3f(R, v[0], v[1], v[2]);
             break;
           }
           case "vec4": {
-            const v = y.value;
+            const v = b.value;
             e.uniform4f(R, v[0], v[1], v[2], v[3]);
             break;
           }
           case "int":
-            e.uniform1i(R, y.value);
+            e.uniform1i(R, b.value);
             break;
           case "bool":
-            e.uniform1i(R, y.value ? 1 : 0);
+            e.uniform1i(R, b.value ? 1 : 0);
             break;
         }
     }
@@ -1485,13 +1490,13 @@ function Fr(t, e) {
 const Wr = "std.shadertoy-canvas";
 function Vr() {
   const t = G(function({ nodeId: n, context: r, className: o }) {
-    const s = Z(r.store, n), i = E(null), a = E(null), l = E(null), h = E(0), f = E(""), b = E({}), m = E({
+    const s = Z(r.store, n), i = E(null), a = E(null), l = E(null), h = E(0), f = E(""), g = E({}), m = E({
       x: 0,
       y: 0,
       clickX: 0,
       clickY: 0,
       isDown: !1
-    }), c = s ? Dr(s.props?.shaderSource) : "", u = s ? Ke(s.props?.fps) ?? 60 : 60, g = s?.props?.uniforms, p = V(() => $r(g), [g]), S = s?.props?.channels, y = V(() => Br(S), [S]), R = s ? jr(s.props?.enableMouse) ?? !0 : !0, v = s ? Ke(s.props?.width) : void 0, T = s ? Ke(s.props?.height) : void 0, U = s ? Mr(Ur(s.props?.className), o) : o;
+    }), c = s ? Dr(s.props?.shaderSource) : "", u = s ? Ke(s.props?.fps) ?? 60 : 60, y = s?.props?.uniforms, p = V(() => $r(y), [y]), S = s?.props?.channels, b = V(() => Br(S), [S]), R = s ? jr(s.props?.enableMouse) ?? !0 : !0, v = s ? Ke(s.props?.width) : void 0, T = s ? Ke(s.props?.height) : void 0, U = s ? Mr(Ur(s.props?.className), o) : o;
     C(() => {
       const I = i.current;
       if (I) {
@@ -1509,18 +1514,18 @@ function Vr() {
       const I = a.current;
       if (!(!I || !c) && f.current !== c)
         if (I.compile(c, p))
-          f.current = c, b.current = p;
+          f.current = c, g.current = p;
         else {
           const M = I.getError();
           console.error("[ShadertoyRenderer] Shader compilation failed:", M);
         }
     }, [c, p]), C(() => {
       const I = a.current;
-      !I || !f.current || Fr(b.current, p) || (I.setCustomUniforms(p), b.current = p);
+      !I || !f.current || Fr(g.current, p) || (I.setCustomUniforms(p), g.current = p);
     }, [p]), C(() => {
       const I = a.current;
-      I && I.setChannels(y);
-    }, [y]), C(() => {
+      I && I.setChannels(b);
+    }, [b]), C(() => {
       const I = a.current;
       if (!I || !f.current) return;
       const P = 1e3 / u, M = (B) => {
@@ -1703,41 +1708,41 @@ function At(t) {
 }
 function Tt(t, e, n, r) {
   const f = new Float32Array(11);
-  function b(p, S, y) {
-    return ((3 * S - 3 * y + 1) * p + (3 * y - 6 * S)) * p * p + 3 * S * p;
+  function g(p, S, b) {
+    return ((3 * S - 3 * b + 1) * p + (3 * b - 6 * S)) * p * p + 3 * S * p;
   }
-  function m(p, S, y) {
-    return 3 * (3 * S - 3 * y + 1) * p * p + 2 * (3 * y - 6 * S) * p + 3 * S;
+  function m(p, S, b) {
+    return 3 * (3 * S - 3 * b + 1) * p * p + 2 * (3 * b - 6 * S) * p + 3 * S;
   }
   function c(p, S) {
-    for (let y = 0; y < 4; y += 1) {
+    for (let b = 0; b < 4; b += 1) {
       const R = m(S, t, n);
       if (R === 0)
         return S;
-      const v = b(S, t, n) - p;
+      const v = g(S, t, n) - p;
       S -= v / R;
     }
     return S;
   }
-  function u(p, S, y) {
+  function u(p, S, b) {
     let R = 0, v = 0, T = 0;
     do
-      v = S + (y - S) / 2, R = b(v, t, n) - p, R > 0 ? y = v : S = v;
+      v = S + (b - S) / 2, R = g(v, t, n) - p, R > 0 ? b = v : S = v;
     while (Math.abs(R) > 1e-7 && ++T < 10);
     return v;
   }
-  function g(p) {
-    let S = 0, y = 1;
+  function y(p) {
+    let S = 0, b = 1;
     const R = 10;
-    for (; y !== R && f[y] <= p; y += 1)
+    for (; b !== R && f[b] <= p; b += 1)
       S += 0.1;
-    y -= 1;
-    const v = (p - f[y]) / (f[y + 1] - f[y]), T = S + v * 0.1, U = m(T, t, n);
+    b -= 1;
+    const v = (p - f[b]) / (f[b + 1] - f[b]), T = S + v * 0.1, U = m(T, t, n);
     return U >= 1e-3 ? c(p, T) : U === 0 ? T : u(p, S, S + 0.1);
   }
   for (let p = 0; p < 11; p += 1)
-    f[p] = b(p * 0.1, t, n);
-  return (p) => p <= 0 ? 0 : p >= 1 ? 1 : b(g(p), e, r);
+    f[p] = g(p * 0.1, t, n);
+  return (p) => p <= 0 ? 0 : p >= 1 ? 1 : g(y(p), e, r);
 }
 function Zr(t) {
   const e = /steps\(\s*([0-9]+)\s*(?:,\s*([a-z-]+)\s*)?\)/i.exec(t);
@@ -2166,8 +2171,8 @@ function xs(t, e) {
     return r ? Ot(s) : t;
   const a = Ao(i), l = { letter: 0, word: 0, line: 0, paragraph: 0, br: 0, emoji: 0 }, h = [];
   for (const f of a) {
-    const b = co(f, n, l);
-    h.push(...b);
+    const g = co(f, n, l);
+    h.push(...g);
   }
   return h;
 }
@@ -2546,14 +2551,14 @@ async function Qt(t, e) {
   try {
     i = await fetch(s, r);
   } catch (h) {
-    const f = h instanceof Error ? `${h.name}: ${h.message}` : String(h), b = Cn(), m = b ? `${b}/anonymous` : null;
+    const f = h instanceof Error ? `${h.name}: ${h.message}` : String(h), g = Cn(), m = g ? `${g}/anonymous` : null;
     if (m && m !== s) {
       we.warn(`Anonymous auth could not reach ${s} (${f}); falling back to same-origin ${m}`);
       try {
         i = await fetch(m, r);
       } catch (c) {
-        const u = c instanceof Error ? `${c.name}: ${c.message}` : String(c), g = await xt(e);
-        throw we.error(`Anonymous auth failed on both direct (${s}: ${f}) and same-origin (${m}: ${u}). ${g}`), new Error(`Anonymous auth unreachable: direct ${s} (${f}) and same-origin ${m} (${u})`);
+        const u = c instanceof Error ? `${c.name}: ${c.message}` : String(c), y = await xt(e);
+        throw we.error(`Anonymous auth failed on both direct (${s}: ${f}) and same-origin (${m}: ${u}). ${y}`), new Error(`Anonymous auth unreachable: direct ${s} (${f}) and same-origin ${m} (${u})`);
       }
     } else {
       const c = await xt(e);
@@ -2868,10 +2873,10 @@ async function Yo(t) {
   const { id: i, rawId: a, response: l, type: h } = s;
   let f;
   typeof l.getTransports == "function" && (f = l.getTransports());
-  let b;
+  let g;
   if (typeof l.getPublicKeyAlgorithm == "function")
     try {
-      b = l.getPublicKeyAlgorithm();
+      g = l.getPublicKeyAlgorithm();
     } catch (u) {
       He("getPublicKeyAlgorithm()", u);
     }
@@ -2897,7 +2902,7 @@ async function Yo(t) {
       attestationObject: X(l.attestationObject),
       clientDataJSON: X(l.clientDataJSON),
       transports: f,
-      publicKeyAlgorithm: b,
+      publicKeyAlgorithm: g,
       publicKey: m,
       authenticatorData: c
     },
@@ -2988,7 +2993,7 @@ async function Xo(t) {
   }
   if (!a)
     throw new Error("Authentication was not completed");
-  const { id: l, rawId: h, response: f, type: b } = a;
+  const { id: l, rawId: h, response: f, type: g } = a;
   let m;
   return f.userHandle && (m = X(f.userHandle)), {
     id: l,
@@ -2999,7 +3004,7 @@ async function Xo(t) {
       signature: X(f.signature),
       userHandle: m
     },
-    type: b,
+    type: g,
     clientExtensionResults: a.getClientExtensionResults(),
     authenticatorAttachment: rn(a.authenticatorAttachment)
   };
@@ -3016,27 +3021,27 @@ function Ns({ children: t, config: e }) {
     (() => {
       const m = e.devLoginRunId, c = !!m && xo() === m;
       m && Oo(m);
-      const u = !!e.devLoginToken && !!m && !c && !qt(e.devLoginToken), g = Uo();
-      if (g) {
+      const u = !!e.devLoginToken && !!m && !c && !qt(e.devLoginToken), y = Uo();
+      if (y) {
         Nt(), r({
           isAuthenticated: !1,
           isLoading: !1,
           user: null,
-          error: g
+          error: y
         });
         return;
       }
       const p = Po();
       if (p) {
-        const y = {
+        const b = {
           token: p.token,
           provider: p.provider,
           authenticatedAt: Date.now()
         };
-        he(y), Nt(), r({
+        he(b), Nt(), r({
           isAuthenticated: !0,
           isLoading: !1,
-          user: ne(y),
+          user: ne(b),
           error: null
         });
         return;
@@ -3052,15 +3057,15 @@ function Ns({ children: t, config: e }) {
         return;
       }
       if (u && e.devLoginToken) {
-        const y = {
+        const b = {
           token: e.devLoginToken,
           provider: "dev",
           authenticatedAt: Date.now()
         };
-        he(y), r({
+        he(b), r({
           isAuthenticated: !0,
           isLoading: !1,
-          user: ne(y),
+          user: ne(b),
           error: null
         });
         return;
@@ -3074,7 +3079,7 @@ function Ns({ children: t, config: e }) {
     })();
   }, [e.devLoginToken, e.devLoginRunId]);
   const o = j(
-    async (b) => {
+    async (g) => {
       if (!e.spaceId) {
         r((c) => ({
           ...c,
@@ -3083,7 +3088,7 @@ function Ns({ children: t, config: e }) {
         return;
       }
       const m = await ve(e.authUrl);
-      if (b === "guest") {
+      if (g === "guest") {
         r((c) => ({ ...c, isLoading: !0 }));
         try {
           const c = await Qt(e.spaceId, m);
@@ -3102,14 +3107,14 @@ function Ns({ children: t, config: e }) {
         }
         return;
       }
-      if (b === "passkey") {
+      if (g === "passkey") {
         r((c) => ({ ...c, isLoading: !0, error: null }));
         try {
-          const c = await $o(m), u = await Xo({ optionsJSON: c }), g = await Bo(m, u);
+          const c = await $o(m), u = await Xo({ optionsJSON: c }), y = await Bo(m, u);
           r({
             isAuthenticated: !0,
             isLoading: !1,
-            user: ne(g),
+            user: ne(y),
             error: null
           });
         } catch (c) {
@@ -3121,24 +3126,24 @@ function Ns({ children: t, config: e }) {
         }
         return;
       }
-      if (b === "email")
+      if (g === "email")
         throw new Error("login('email') is not supported. Use requestEmailCode()/submitEmailCode() from useAuth() instead.");
-      window.location.href = Mo(b, e.spaceId, m);
+      window.location.href = Mo(g, e.spaceId, m);
     },
     [e.authUrl, e.spaceId]
   ), s = j(
-    async (b) => {
+    async (g) => {
       if (!e.spaceId)
         throw r((c) => ({ ...c, error: "Space ID is not configured" })), new Error("Space ID is not configured");
       const m = await ve(e.authUrl);
-      await No({ email: b, spaceId: e.spaceId, authUrl: m });
+      await No({ email: g, spaceId: e.spaceId, authUrl: m });
     },
     [e.authUrl, e.spaceId]
   ), i = j(
-    async (b, m) => {
+    async (g, m) => {
       r((c) => ({ ...c, isLoading: !0, error: null }));
       try {
-        const c = await ve(e.authUrl), u = await Lo({ email: b, code: m, authUrl: c });
+        const c = await ve(e.authUrl), u = await Lo({ email: g, code: m, authUrl: c });
         r({
           isAuthenticated: !0,
           isLoading: !1,
@@ -3147,7 +3152,7 @@ function Ns({ children: t, config: e }) {
         });
       } catch (c) {
         const u = c instanceof Error ? c.message : "Code verification failed";
-        throw r((g) => ({ ...g, isLoading: !1, error: u })), c;
+        throw r((y) => ({ ...y, isLoading: !1, error: u })), c;
       }
     },
     [e.authUrl]
@@ -3159,15 +3164,15 @@ function Ns({ children: t, config: e }) {
       error: null
     });
   }, []), l = j(
-    async (b) => {
+    async (g) => {
       const m = await ve(e.authUrl);
       r((c) => ({ ...c, isLoading: !0, error: null }));
       try {
-        const c = await Do(m), u = await Yo({ optionsJSON: c }), g = await jo(m, u, b);
+        const c = await Do(m), u = await Yo({ optionsJSON: c }), y = await jo(m, u, g);
         r({
           isAuthenticated: !0,
           isLoading: !1,
-          user: ne(g),
+          user: ne(y),
           error: null
         });
       } catch (c) {
@@ -3352,11 +3357,11 @@ function Ps({
   renderIdle: l,
   renderConnecting: h,
   renderConnectingSlow: f,
-  renderConnected: b,
+  renderConnected: g,
   renderOffline: m,
   renderError: c
 }) {
-  const u = E(!1), g = (() => {
+  const u = E(!1), y = (() => {
     switch (t) {
       case "waitingForExternalConnectUrl":
       case "connecting":
@@ -3366,7 +3371,7 @@ function Ps({
         if (!n || !o || !s) return null;
         t === "reconnecting" && (u.current = !0);
         const p = o.size > 0;
-        return p && (u.current = !1), b({
+        return p && (u.current = !1), g({
           stores: o,
           registry: s,
           client: i,
@@ -3386,7 +3391,7 @@ function Ps({
     }
   })();
   return /* @__PURE__ */ w.jsxs(w.Fragment, { children: [
-    g,
+    y,
     /* @__PURE__ */ w.jsx(cn, { state: t })
   ] });
 }
@@ -3400,8 +3405,8 @@ function ns() {
     return window.__IKON_LOCAL_IKON_SERVER_CONFIG__;
 }
 function Us(t) {
-  const { authConfig: e, modules: n, timeouts: r, backgroundAudio: o, webRtc: s, audio: i, video: a, websocket: l, webtransport: h, proxy: f, liveSnapshot: b, bootSnapshot: m } = t, c = e === void 0 ? ts() ?? null : e, u = ns(), g = qo(), p = E(null), S = E(null), y = E(null), R = E(!1), v = E(!1), T = E(o), U = E(r), ee = E(s), te = E(i), z = E(a), I = E(l), P = E(h), M = E(f), B = E(b), $ = E(m), W = E("local"), K = E(void 0);
-  T.current = o, U.current = r, ee.current = s, te.current = i, z.current = a, I.current = l, P.current = h, M.current = f, B.current = b, $.current = m;
+  const { authConfig: e, modules: n, timeouts: r, backgroundAudio: o, webRtc: s, audio: i, video: a, websocket: l, webtransport: h, proxy: f, liveSnapshot: g, bootSnapshot: m } = t, c = e === void 0 ? ts() ?? null : e, u = ns(), y = qo(), p = E(null), S = E(null), b = E(null), R = E(!1), v = E(!1), T = E(o), U = E(r), ee = E(s), te = E(i), z = E(a), I = E(l), P = E(h), M = E(f), B = E(g), $ = E(m), W = E("local"), K = E(void 0);
+  T.current = o, U.current = r, ee.current = s, te.current = i, z.current = a, I.current = l, P.current = h, M.current = f, B.current = g, $.current = m;
   const [H, Ee] = x("connecting"), [Re, pe] = x(!1), [d, A] = x(!1), [O, N] = x(null), [se, me] = x(null), [L, Q] = x(!1), [ie, Me] = x(null), [ae, un] = x(null), [De, dt] = x(!1), je = E(!1), [dn, fn] = x(0), Y = V(() => {
     try {
       const _ = In();
@@ -3468,10 +3473,10 @@ function Us(t) {
   const hn = oo(ie);
   C(() => {
     if (!R.current) {
-      if (R.current = !0, y.current = Xr(), n)
+      if (R.current = !0, b.current = Xr(), n)
         for (const _ of n)
-          _(y.current);
-      y.current.loadRegisteredModules().catch((_) => {
+          _(b.current);
+      b.current.loadRegisteredModules().catch((_) => {
         Oe.error("Failed to load UI modules", _);
       });
     }
@@ -3512,7 +3517,7 @@ function Us(t) {
         Q(!0);
         return;
       }
-      J instanceof Un && !v.current && (v.current = !0, Oe.warn("Auth session appears stale, clearing and retrying"), Ut.clearAll(), g ? g.logout() : (Le(), fn((bn) => bn + 1)));
+      J instanceof Un && !v.current && (v.current = !0, Oe.warn("Auth session appears stale, clearing and retrying"), Ut.clearAll(), y ? y.logout() : (Le(), fn((bn) => bn + 1)));
     }), () => {
       yn(), _.disconnect(), p.current = null, ke.dispose(), S.current = null;
     };
@@ -3539,10 +3544,10 @@ function Us(t) {
     isServerFull: L,
     stores: hn,
     client: p.current,
-    registry: y.current,
+    registry: b.current,
     clientRef: p,
     uiRef: S,
-    registryRef: y,
+    registryRef: b,
     onAction: pn,
     isReady: mn,
     isLive: Ve,
@@ -3572,13 +3577,13 @@ function os(t = 5, e = 5e3) {
       (l) => {
         if (!$t())
           return;
-        const h = `toast-${++rs}`, f = l.level === Je.ERROR ? "error" : "warn", b = {
+        const h = `toast-${++rs}`, f = l.level === Je.ERROR ? "error" : "warn", g = {
           id: h,
           level: f,
           message: l.message,
           component: l.component
         };
-        r((c) => [...c, b].slice(-t));
+        r((c) => [...c, g].slice(-t));
         const m = setTimeout(() => {
           s(h);
         }, e);
@@ -3635,37 +3640,37 @@ const ue = oe("IkonDebug"), is = {
   Digit0: "clear"
 }, as = "Digit5", cs = "Digit6", ls = "Synthetic debug error (Ctrl+Shift+5)", us = "Synthetic debug access-denied (Ctrl+Shift+6)", ds = 5e3;
 function fs(t) {
-  const e = $t(), [n, r] = x(null), [o, s] = x(!1), [i, a] = x(null), [l, h] = x(null), [f, b] = x(!1), [m, c] = x(!1), [u, g] = x(!1);
+  const e = $t(), [n, r] = x(null), [o, s] = x(!1), [i, a] = x(null), [l, h] = x(null), [f, g] = x(!1), [m, c] = x(!1), [u, y] = x(!1);
   return C(() => {
     if (!e)
       return;
-    const S = (y) => {
-      if (!y.ctrlKey || !y.shiftKey)
+    const S = (b) => {
+      if (!b.ctrlKey || !b.shiftKey)
         return;
-      if (y.code === "KeyE") {
-        y.preventDefault(), b((T) => (ue.warn(`Empty-stores override: ${T ? "off" : "on"}`), !T));
+      if (b.code === "KeyE") {
+        b.preventDefault(), g((T) => (ue.warn(`Empty-stores override: ${T ? "off" : "on"}`), !T));
         return;
       }
-      if (y.code === "Digit7") {
-        y.preventDefault(), c((T) => (ue.warn(`Branding-banner override: ${T ? "off" : "on"}`), !T));
+      if (b.code === "Digit7") {
+        b.preventDefault(), c((T) => (ue.warn(`Branding-banner override: ${T ? "off" : "on"}`), !T));
         return;
       }
-      if (y.code === "Digit8") {
-        y.preventDefault(), g((T) => (ue.warn(`Debug-overlay override: ${T ? "off" : "on"}`), !T));
+      if (b.code === "Digit8") {
+        b.preventDefault(), y((T) => (ue.warn(`Debug-overlay override: ${T ? "off" : "on"}`), !T));
         return;
       }
-      if (y.code === cs) {
-        y.preventDefault(), h(us), r(null), a(null), ue.warn("Forced access denied");
+      if (b.code === cs) {
+        b.preventDefault(), h(us), r(null), a(null), ue.warn("Forced access denied");
         return;
       }
-      const R = is[y.code];
+      const R = is[b.code];
       if (R === void 0)
         return;
-      if (y.preventDefault(), R === "clear") {
+      if (b.preventDefault(), R === "clear") {
         r(null), a(null), h(null), ue.warn("Cleared forced state");
         return;
       }
-      const v = y.code === as;
+      const v = b.code === as;
       r(R), a(v ? ls : null), h(null), ue.warn(`Forced state: ${R}${v ? " (with error)" : ""}`);
     };
     return window.addEventListener("keydown", S), () => window.removeEventListener("keydown", S);
@@ -3698,8 +3703,8 @@ function gs(t, e) {
   return t === void 0 ? null : typeof t == "function" ? t(e) : t;
 }
 function js(t) {
-  const { connectingOverlay: e, reconnectingOverlay: n, offlineOverlay: r, accessDeniedScreen: o, ...s } = t, i = fs(s), { app: a } = i, { connectionState: l, isConnectingSlow: h, stores: f, registry: b, client: m, onAction: c, isReady: u, error: g, accessDeniedReason: p, brandingRequired: S } = a, y = S || i.forcedBranding, R = E(null);
-  if (f && b && (u || f.size > 0) && (R.current = { stores: f, registry: b, client: m }), p)
+  const { connectingOverlay: e, reconnectingOverlay: n, offlineOverlay: r, accessDeniedScreen: o, ...s } = t, i = fs(s), { app: a } = i, { connectionState: l, isConnectingSlow: h, stores: f, registry: g, client: m, onAction: c, isReady: u, error: y, accessDeniedReason: p, brandingRequired: S } = a, b = S || i.forcedBranding, R = E(null);
+  if (f && g && (u || f.size > 0) && (R.current = { stores: f, registry: g, client: m }), p)
     return gs(o, p);
   const v = R.current;
   let T = null;
@@ -3712,7 +3717,7 @@ function js(t) {
       T = ps(n);
       break;
     case "offline":
-      T = ms(r, g);
+      T = ms(r, y);
       break;
     default:
       T = null;
@@ -3728,7 +3733,7 @@ function js(t) {
       }
     ),
     T,
-    y && /* @__PURE__ */ w.jsx(bs, {}),
+    b && /* @__PURE__ */ w.jsx(bs, {}),
     /* @__PURE__ */ w.jsx(Ss, {}),
     /* @__PURE__ */ w.jsx(cn, { state: l, forceVisible: i.forcedDebugOverlay })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikonai/sdk-react-ui",
-  "version": "1.0.74",
+  "version": "1.0.76",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",