playhtml 2.1.6 → 2.1.8

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
 
-## 2.1.3 - 2024-04-17
+## 2.1.6 - 2024-04-17
 
 - fix bug with native image dragging conflicting with playhtml draggable elements.
 

package/README.md

@@ -225,7 +225,7 @@ Creates a rotatable element using a `rotate` `transform` on the element. Draggin
 
 ## Help & Community
 
-Join our [Discord community](https://discord.gg/h7sABTv8) to get help and show off what you've built!
+Join our [Discord community](https://discord.gg/SKbsSf4ptU) to get help and show off what you've built!
 
 ## Data Policy
 

package/dist/main.d.ts

@@ -94,9 +94,13 @@ export declare interface InitOptions<T = any> {
          */
         includeSearch?: boolean;
     };
+    /**
+     * Runs if playhtml fails to connect. Useful to show error messages and debugging.
+     */
+    onError?: () => void;
 }
 
-declare function initPlayHTML({ host, extraCapabilities, events, defaultRoomOptions, room: inputRoom, }?: InitOptions): Promise<YPartyKitProvider | undefined>;
+declare function initPlayHTML({ host, extraCapabilities, events, defaultRoomOptions, room: inputRoom, onError, }?: InitOptions): Promise<YPartyKitProvider | undefined>;
 
 export declare const playhtml: PlayHTMLComponents;
 

package/dist/playhtml.es.js

@@ -127,7 +127,7 @@ let fi = class {
     this.cpos = 0, this.cbuf = new Uint8Array(100), this.bufs = [];
   }
 };
-const $ = () => new fi(), pn = (e) => {
+const N = () => new fi(), pn = (e) => {
   let t = e.cpos;
   for (let n = 0; n < e.bufs.length; n++)
     t += e.bufs[n].length;
@@ -726,7 +726,7 @@ const Zt = () => new qt(), Ao = (e) => {
   for (let n = 0; n < e.bufs.length; n++)
     t += e.bufs[n].length;
   return t;
-}, N = (e) => {
+}, B = (e) => {
   const t = new Uint8Array(Ao(e));
   let n = 0;
   for (let s = 0; s < e.bufs.length; s++) {
@@ -843,7 +843,7 @@ class ge {
     this.s === t ? this.count++ : (ts(this), this.count = 1, this.s = t);
   }
   toUint8Array() {
-    return ts(this), N(this.encoder);
+    return ts(this), B(this.encoder);
   }
 }
 const es = (e) => {
@@ -863,7 +863,7 @@ class je {
     this.diff === t - this.s ? (this.s = t, this.count++) : (es(this), this.count = 1, this.diff = t - this.s, this.s = t);
   }
   toUint8Array() {
-    return es(this), N(this.encoder);
+    return es(this), B(this.encoder);
   }
 }
 class Ro {
@@ -878,7 +878,7 @@ class Ro {
   }
   toUint8Array() {
     const t = new qt();
-    return this.sarr.push(this.s), this.s = "", lt(t, this.sarr.join("")), Me(t, this.lensE.toUint8Array()), N(t);
+    return this.sarr.push(this.s), this.s = "", lt(t, this.sarr.join("")), Me(t, this.lensE.toUint8Array()), B(t);
   }
 }
 const $o = crypto.getRandomValues.bind(crypto), Ns = () => $o(new Uint32Array(1))[0], No = [1e7] + -1e3 + -4e3 + -8e3 + -1e11, Bo = () => No.replace(
@@ -1527,7 +1527,7 @@ class Ws {
     this.restEncoder = Zt();
   }
   toUint8Array() {
-    return N(this.restEncoder);
+    return B(this.restEncoder);
   }
   resetDsCurVal() {
   }
@@ -1626,7 +1626,7 @@ class Ps {
     this.restEncoder = Zt(), this.dsCurrVal = 0;
   }
   toUint8Array() {
-    return N(this.restEncoder);
+    return B(this.restEncoder);
   }
   resetDsCurVal() {
     this.dsCurrVal = 0;
@@ -1651,7 +1651,7 @@ class ht extends Ps {
   }
   toUint8Array() {
     const t = Zt();
-    return m(t, 0), L(t, this.keyClockEncoder.toUint8Array()), L(t, this.clientEncoder.toUint8Array()), L(t, this.leftClockEncoder.toUint8Array()), L(t, this.rightClockEncoder.toUint8Array()), L(t, N(this.infoEncoder)), L(t, this.stringEncoder.toUint8Array()), L(t, N(this.parentInfoEncoder)), L(t, this.typeRefEncoder.toUint8Array()), L(t, this.lenEncoder.toUint8Array()), Me(t, N(this.restEncoder)), N(t);
+    return m(t, 0), L(t, this.keyClockEncoder.toUint8Array()), L(t, this.clientEncoder.toUint8Array()), L(t, this.leftClockEncoder.toUint8Array()), L(t, this.rightClockEncoder.toUint8Array()), L(t, B(this.infoEncoder)), L(t, this.stringEncoder.toUint8Array()), L(t, B(this.parentInfoEncoder)), L(t, this.typeRefEncoder.toUint8Array()), L(t, this.lenEncoder.toUint8Array()), Me(t, B(this.restEncoder)), B(t);
   }
   /**
    * @param {ID} id
@@ -2342,7 +2342,7 @@ const Dc = (e) => Se(e, Js, te), Ec = (e, t) => {
   const a = Cn(c);
   return Ot(i, a), i.toUint8Array();
 }, ir = (e) => {
-  e.written > 0 && (e.clientStructs.push({ written: e.written, restEncoder: N(e.encoder.restEncoder) }), e.encoder.restEncoder = Zt(), e.written = 0);
+  e.written > 0 && (e.clientStructs.push({ written: e.written, restEncoder: B(e.encoder.restEncoder) }), e.encoder.restEncoder = Zt(), e.written = 0);
 }, et = (e, t, n) => {
   e.written > 0 && e.currClient !== t.id.client && ir(e), e.written === 0 && (e.currClient = t.id.client, e.encoder.writeClient(t.id.client), m(e.encoder.restEncoder, t.id.clock + n)), t.write(e.encoder, n), e.written++;
 }, Mn = (e) => {
@@ -5904,7 +5904,7 @@ const Rn = (e, t, n) => {
     );
     m(r, o), m(r, l), lt(r, JSON.stringify(c));
   }
-  return N(r);
+  return B(r);
 }, yl = (e, t, n) => {
   const s = wt(t), r = ye(), i = [], o = [], c = [], l = [], a = w(s);
   for (let h = 0; h < a; h++) {
@@ -6001,7 +6001,7 @@ function Al(e, t) {
 ${t}`);
 }
 function Mr(e, t, n) {
-  const s = _i(t), r = $(), i = Ls(s), o = e.messageHandlers[i];
+  const s = _i(t), r = N(), i = Ls(s), o = e.messageHandlers[i];
   return /** @type {any} */ o ? o(r, s, e, n, i) : console.error("Unable to compute message"), r;
 }
 function xr(e) {
@@ -6044,9 +6044,9 @@ function xr(e) {
           status: "connected"
         }
       ]);
-      const n = $();
+      const n = N();
       if (v(n, it), hn(n, e.doc), Nt(U(n), t), e.awareness.getLocalState() !== null) {
-        const s = $();
+        const s = N();
         v(s, At), Dt(
           s,
           Ft(e.awareness, [
@@ -6110,7 +6110,7 @@ var Ll = typeof WebSocket > "u" ? null : WebSocket, Il = class extends Ni {
     this.maxBackoffTime = a, this.bcChannel = t + "/" + n, this.url = t + "/" + n + (d.length === 0 ? "" : "?" + d), this.roomname = n, this.doc = s, this._WS = c, this.awareness = i, this.wsconnected = !1, this.wsconnecting = !1, this.bcconnected = !1, this.disableBc = h, this.wsUnsuccessfulReconnects = 0, this.messageHandlers = se.slice(), this._synced = !1, this.ws = null, this.wsLastMessageReceived = 0, this.shouldConnect = r, this._resyncInterval = 0, l > 0 && (this._resyncInterval = /** @type {any} */
     setInterval(() => {
       if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-        const u = $();
+        const u = N();
         v(u, it), hn(u, s), Nt(U(u), this.ws);
       }
     }, l)), this._bcSubscriber = (u, f) => {
@@ -6120,11 +6120,11 @@ var Ll = typeof WebSocket > "u" ? null : WebSocket, Il = class extends Ni {
       }
     }, this._updateHandler = (u, f) => {
       if (f !== this) {
-        const g = $();
+        const g = N();
         v(g, it), Sl(g, u), We(this, U(g));
       }
     }, this.doc.on("update", this._updateHandler), this._awarenessUpdateHandler = ({ added: u, updated: f, removed: g }, p) => {
-      const _ = u.concat(f).concat(g), Y = $();
+      const _ = u.concat(f).concat(g), Y = N();
       v(Y, At), Dt(
         Y,
         Ft(i, _)
@@ -6156,17 +6156,17 @@ var Ll = typeof WebSocket > "u" ? null : WebSocket, Il = class extends Ni {
     if (this.disableBc)
       return;
     this.bcconnected || (Ri(this.bcChannel, this._bcSubscriber), this.bcconnected = !0);
-    const t = $();
+    const t = N();
     v(t, it), hn(t, this.doc), St(this.bcChannel, U(t), this);
-    const n = $();
+    const n = N();
     v(n, it), Lr(n, this.doc), St(this.bcChannel, U(n), this);
-    const s = $();
+    const s = N();
     v(s, vr), St(
       this.bcChannel,
       U(s),
       this
     );
-    const r = $();
+    const r = N();
     v(r, At), Dt(
       r,
       Ft(this.awareness, [
@@ -6179,7 +6179,7 @@ var Ll = typeof WebSocket > "u" ? null : WebSocket, Il = class extends Ni {
     );
   }
   disconnectBc() {
-    const t = $();
+    const t = N();
     v(t, At), Dt(
       t,
       Ft(
@@ -6366,19 +6366,14 @@ class Yl extends vs {
     });
   }
 }
-const Xl = {
-  ctrlKey: "Control",
-  altKey: "Alt",
-  shiftKey: "Shift",
-  metaKey: "Meta"
-}, Jl = "can-duplicate-to";
+const Xl = "can-duplicate-to";
 var Re = /* @__PURE__ */ ((e) => (e.CanPlay = "can-play", e.CanMove = "can-move", e.CanSpin = "can-spin", e.CanGrow = "can-grow", e.CanToggle = "can-toggle", e.CanDuplicate = "can-duplicate", e.CanHover = "can-hover", e.CanResize = "can-resize", e.CanMirror = "can-mirror", e))(Re || {});
-function Wl(e) {
+function Jl(e) {
   return e.id;
 }
 const Nr = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='44' height='53' viewport='0 0 100 100' style='fill:black;font-size:26px;'><text y='40%'>🚿</text></svg>")
       16 0,
-    auto`, Pl = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✂️</text></svg>") 16 0,auto`;
+    auto`, Wl = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✂️</text></svg>") 16 0,auto`;
 function ps(e, { getData: t, getElement: n, getLocalData: s, setLocalData: r }) {
   const i = t(), o = s(), c = n();
   if (o.isHovering = !0, e.altKey) {
@@ -6386,7 +6381,7 @@ function ps(e, { getData: t, getElement: n, getLocalData: s, setLocalData: r })
       c.style.cursor = "not-allowed";
       return;
     }
-    c.style.cursor = Pl;
+    c.style.cursor = Wl;
   } else {
     if (i.scale >= i.maxScale) {
       c.style.cursor = "not-allowed";
@@ -6403,7 +6398,7 @@ function he(e) {
   }
   return { clientX: e.clientX, clientY: e.clientY };
 }
-const Gl = {
+const Pl = {
   [
     "can-move"
     /* CanMove */
@@ -6521,7 +6516,7 @@ const Gl = {
         );
         return;
       }
-      const l = s.getAttribute(Jl);
+      const l = s.getAttribute(Xl);
       function a(d) {
         if (l) {
           const u = document.getElementById(l) || document.querySelector(l);
@@ -6568,8 +6563,8 @@ const Gl = {
     defaultData: (e) => Gt(e),
     onMount: ({ getElement: e, setData: t, getData: n }) => {
       const s = e();
-      ql(s, (r) => {
-        const i = n(), o = Ql(i, r);
+      Gl(s, (r) => {
+        const i = n(), o = Zl(i, r);
         t(o);
       });
     },
@@ -6592,7 +6587,7 @@ function Le(e, t) {
       return !1;
   return !0;
 }
-function ql(e, t, n) {
+function Gl(e, t, n) {
   const s = { childList: !0, attributes: !0, subtree: !0, characterData: !0, ...n }, r = (o) => {
     const c = o.filter((l) => {
       if (s.childList && l.type === "childList")
@@ -6609,32 +6604,32 @@ function ql(e, t, n) {
   }, i = new MutationObserver(r);
   return i.observe(e, s), i;
 }
-function Zl(e) {
+function ql(e) {
   return JSON.parse(JSON.stringify(e));
 }
-function Ql(e, t) {
-  let n = Zl(e);
+function Zl(e, t) {
+  let n = ql(e);
   return t.forEach((s) => {
     switch (s.type) {
       case "attributes":
-        ta(n, s);
+        Ql(n, s);
         break;
       case "childList":
-        ea(n, s);
+        ta(n, s);
         break;
       case "characterData":
-        na(n, s);
+        ea(n, s);
         break;
     }
   }), n;
 }
-function ta(e, t) {
+function Ql(e, t) {
   if (t.target instanceof HTMLElement) {
     const n = t.attributeName, s = t.target.getAttribute(n);
     s !== null ? e.attributes[n] = s : delete e.attributes[n];
   }
 }
-function ea(e, t) {
+function ta(e, t) {
   t.addedNodes.length && t.addedNodes.forEach((n) => {
     if (!(n instanceof HTMLElement))
       return;
@@ -6649,7 +6644,7 @@ function ea(e, t) {
     r !== -1 && e.children.splice(r, 1);
   });
 }
-function na(e, t) {
+function ea(e, t) {
   t.target === e && (e.textContent = t.target.textContent);
 }
 function Gt(e) {
@@ -6666,9 +6661,9 @@ function Gt(e) {
   }), t;
 }
 function Br(e, t) {
-  sa(e, t), t.children.length === 0 && e.textContent !== t.textContent ? e.textContent = t.textContent : t.children.length > 0 && ra(e, t);
+  na(e, t), t.children.length === 0 && e.textContent !== t.textContent ? e.textContent = t.textContent : t.children.length > 0 && sa(e, t);
 }
-function sa(e, t) {
+function na(e, t) {
   if (t) {
     for (const [n, s] of Object.entries(t.attributes))
       e.getAttribute(n) !== s && e.setAttribute(n, s);
@@ -6677,7 +6672,7 @@ function sa(e, t) {
     });
   }
 }
-function ra(e, t) {
+function sa(e, t) {
   const n = /* @__PURE__ */ new Set();
   t.children.forEach((s) => {
     let r = Array.from(e.children).find(
@@ -6694,7 +6689,7 @@ const ws = (e, t = 300) => {
     clearTimeout(n), n = setTimeout(() => e.apply(this, s), t);
   };
 };
-class ia {
+class ra {
   constructor(t) {
     y(this, "defaultData");
     y(this, "localData");
@@ -6754,25 +6749,25 @@ class ia {
       (f = this.onClick) == null || f.call(this, u, this.getEventHandlerData());
     }), this.onClick = o, c && !this.onDrag && (t.addEventListener("touchstart", (u) => {
       var p;
-      u.preventDefault(), (p = this.onDragStart) == null || p.call(this, u, this.getEventHandlerData());
+      u.preventDefault(), t.classList.add("cursordown"), (p = this.onDragStart) == null || p.call(this, u, this.getEventHandlerData());
       const f = (_) => {
         var Y;
         _.preventDefault(), (Y = this.onDrag) == null || Y.call(this, _, this.getEventHandlerData());
       }, g = (_) => {
-        document.removeEventListener("touchmove", f), document.removeEventListener("touchend", g);
+        t.classList.remove("cursordown"), document.removeEventListener("touchmove", f), document.removeEventListener("touchend", g);
       };
       document.addEventListener("touchmove", f), document.addEventListener("touchend", g);
     }), t.addEventListener("mousedown", (u) => {
       var p;
-      u.preventDefault(), (p = this.onDragStart) == null || p.call(this, u, this.getEventHandlerData());
+      u.preventDefault(), (p = this.onDragStart) == null || p.call(this, u, this.getEventHandlerData()), t.classList.add("cursordown");
       const f = (_) => {
         var Y;
         _.preventDefault(), (Y = this.onDrag) == null || Y.call(this, _, this.getEventHandlerData());
       }, g = (_) => {
-        document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", g);
+        t.classList.remove("cursordown"), document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", g);
       };
       document.addEventListener("mousemove", f), document.addEventListener("mouseup", g);
-    })), this.onDrag = c, this.onDragStart = l, a && !this.resetShortcut && (t.title || (t.title = `Hold down the ${Xl[a]} key while clicking to reset.`), t.reset = this.reset, t.addEventListener("click", (u) => {
+    })), this.onDrag = c, this.onDragStart = l, a && !this.resetShortcut && (t.reset = this.reset, t.addEventListener("click", (u) => {
       switch (this.resetShortcut) {
         case "ctrlKey":
           if (!u.ctrlKey)
@@ -6864,25 +6859,25 @@ class ia {
     this.setData(this.defaultData);
   }
 }
-async function oa(e, t) {
+async function ia(e, t) {
   const n = new TextEncoder().encode(`${e}-${t.outerHTML}}`), s = await crypto.subtle.digest("SHA-1", n);
   return Array.from(new Uint8Array(s)).map((o) => o.toString(16).padStart(2, "0")).join("");
 }
-const ca = "playhtml.spencerc99.partykit.dev", dn = new mt();
-function la(e) {
+const oa = "playhtml.spencerc99.partykit.dev", dn = new mt();
+function ca(e) {
   const t = window.location.pathname.replace(/\.[^/.]+$/, "");
   return e ? t + window.location.search : t;
 }
-let B, W = dn.getMap("playhtml-global"), R = /* @__PURE__ */ new Map(), gt = /* @__PURE__ */ new Map();
+let R, W = dn.getMap("playhtml-global"), $ = /* @__PURE__ */ new Map(), gt = /* @__PURE__ */ new Map();
 const ms = /* @__PURE__ */ new Map();
-let aa = 0, re = Gl;
+let la = 0, re = Pl;
 function Vr() {
   return [Re.CanPlay, ...Object.keys(re)];
 }
-function ha(e) {
-  B.ws && B.ws.send(JSON.stringify(e));
+function aa(e) {
+  R.ws && R.ws.send(JSON.stringify(e));
 }
-function ua(e) {
+function ha(e) {
   if (e.data instanceof Blob)
     return;
   let t;
@@ -6897,19 +6892,20 @@ function ua(e) {
       i.onEvent(s);
 }
 let Lt = !1, fn = !0;
-async function da({
+async function ua({
   // TODO: if it is a localhost url, need to make some deterministic way to connect to the same room.
-  host: e = ca,
+  host: e = oa,
   extraCapabilities: t,
   events: n,
   defaultRoomOptions: s = {},
-  room: r = la(s.includeSearch)
+  room: r = ca(s.includeSearch),
+  onError: i
 } = {}) {
   if (!fn) {
     console.error("playhtml already set up!");
     return;
   }
-  const i = encodeURIComponent(window.location.hostname + "-" + r), o = e;
+  const o = encodeURIComponent(window.location.hostname + "-" + r), c = e;
   if (console.log(
     `࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂
 ࿂࿂࿂࿂  ࿂    ࿂    ࿂    ࿂    ࿂  ࿂࿂࿂࿂
@@ -6917,21 +6913,23 @@ async function da({
 ࿂࿂࿂࿂  https://playhtml.fun  ࿂࿂࿂࿂
 ࿂࿂࿂࿂   ࿂     ࿂     ࿂     ࿂   ࿂࿂࿂࿂
 ࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂`
-  ), B = new Ml(o, i, dn), new Yl(i, dn), t)
-    for (const [l, a] of Object.entries(t))
-      re[l] = a;
+  ), R = new Ml(c, o, dn), R.on("error", () => {
+    i == null || i();
+  }), new Yl(o, dn), t)
+    for (const [a, h] of Object.entries(t))
+      re[a] = h;
   if (n)
-    for (const [l, a] of Object.entries(n))
-      zr(l, a);
-  const c = document.createElement("link");
-  return c.rel = "stylesheet", c.href = "https://unpkg.com/playhtml@latest/dist/style.css", document.head.appendChild(c), await new Promise((l) => {
-    Lt && l(!0), B.on("sync", (a) => {
-      a ? a && B.ws.addEventListener("message", ua) : console.error("Issue connecting to yjs..."), !Lt && (Lt = !0, console.log("[PLAYHTML]: Setting up elements... Time to have some fun 🛝"), jr(), l(!0));
+    for (const [a, h] of Object.entries(n))
+      zr(a, h);
+  const l = document.createElement("link");
+  return l.rel = "stylesheet", l.href = "https://unpkg.com/playhtml@latest/dist/style.css", document.head.appendChild(l), await new Promise((a) => {
+    Lt && a(!0), R.on("sync", (h) => {
+      h ? h && R.ws.addEventListener("message", ha) : console.error("Issue connecting to yjs..."), !Lt && (Lt = !0, console.log("[PLAYHTML]: Setting up elements... Time to have some fun 🛝"), jr(), a(!0));
     });
-  }), B;
+  }), R;
 }
-function fa(e, t) {
-  const n = B.awareness.getLocalState();
+function da(e, t) {
+  const n = R.awareness.getLocalState();
   return ((n == null ? void 0 : n[e]) ?? {})[t];
 }
 function Nn(e) {
@@ -6951,31 +6949,31 @@ function Fr(e, t) {
   }
   return !1;
 }
-function ga(e, t, n, s) {
+function fa(e, t, n, s) {
   const r = W.get(t);
   return {
     ...n,
     // TODO: when adding save-state if no save state, then just use defaultData
     data: r.get(s) ?? (n.defaultData instanceof Function ? n.defaultData(e) : n.defaultData),
-    awareness: fa(t, s) ?? n.myDefaultAwareness !== void 0 ? [n.myDefaultAwareness] : void 0,
+    awareness: da(t, s) ?? n.myDefaultAwareness !== void 0 ? [n.myDefaultAwareness] : void 0,
     element: e,
     onChange: (o) => {
       Fr(r.get(s), o) || r.set(s, o);
     },
     onAwarenessChange: (o) => {
       var l;
-      const c = ((l = B.awareness.getLocalState()) == null ? void 0 : l[t]) || {};
-      c[s] !== o && (c[s] = o, B.awareness.setLocalStateField(t, c));
+      const c = ((l = R.awareness.getLocalState()) == null ? void 0 : l[t]) || {};
+      c[s] !== o && (c[s] = o, R.awareness.setLocalStateField(t, c));
     },
     triggerAwarenessUpdate: () => {
       Hr();
     }
   };
 }
-function pa(e) {
+function ga(e) {
   return e.defaultData !== void 0 && (typeof e.defaultData == "object" || typeof e.defaultData == "function") && e.updateElement !== void 0;
 }
-function wa(e, t) {
+function pa(e, t) {
   if (e === Re.CanPlay) {
     const n = t;
     return {
@@ -7002,10 +7000,10 @@ function Hr() {
     const o = e.get(n);
     o.has(s) || o.set(s, /* @__PURE__ */ new Map()), o.get(s).set(r, i);
   }
-  B.awareness.getStates().forEach((n, s) => {
+  R.awareness.getStates().forEach((n, s) => {
     var r;
     for (const [i, o] of Object.entries(n)) {
-      const c = R.get(i);
+      const c = $.get(i);
       if (c)
         for (const [l, a] of c) {
           if (!(l in o))
@@ -7020,7 +7018,7 @@ function Hr() {
         }
     }
     for (const [i, o] of e) {
-      const c = R.get(i);
+      const c = $.get(i);
       if (c)
         for (const [l, a] of c) {
           const h = (r = o.get(l)) == null ? void 0 : r.values();
@@ -7046,31 +7044,31 @@ function jr() {
       e.changes.keys.forEach((t, n) => {
         t.action === "add" && W.set(n, W.get(n));
       });
-    }), B.awareness.on("change", () => Hr()), fn = !1);
+    }), R.awareness.on("change", () => Hr()), fn = !1);
   }
 }
-const ma = {
-  init: da,
+const wa = {
+  init: ua,
   setupPlayElements: jr,
-  setupPlayElement: Sa,
-  removePlayElement: _a,
+  setupPlayElement: ba,
+  removePlayElement: Sa,
   setupPlayElementForTag: $e,
   globalData: W,
-  elementHandlers: R,
+  elementHandlers: $,
   eventHandlers: gt,
-  dispatchPlayEvent: ka,
+  dispatchPlayEvent: _a,
   registerPlayEventListener: zr,
-  removePlayEventListener: Da
+  removePlayEventListener: ka
 };
-window.playhtml = ma;
-function ya(e) {
-  if (R.has(e) || !Lt)
+window.playhtml = wa;
+function ma(e) {
+  if ($.has(e) || !Lt)
     return;
-  R.has(e) || R.set(e, /* @__PURE__ */ new Map()), e !== Re.CanPlay && re[e], W.get(e) || W.set(e, new ut());
+  $.has(e) || $.set(e, /* @__PURE__ */ new Map()), e !== Re.CanPlay && re[e], W.get(e) || W.set(e, new ut());
   const t = W.get(e);
   t.observe((n) => {
     n.changes.keys.forEach((s, r) => {
-      const i = R.get(e);
+      const i = $.get(e);
       if (s.action === "add") {
         const o = document.getElementById(r);
         if (!Nn(o)) {
@@ -7086,13 +7084,13 @@ function ya(e) {
     });
   });
 }
-function ba(e, t) {
+function ya(e, t) {
   var n, s;
   return ((s = (n = re[t]) == null ? void 0 : n.isValidElementForTag) == null ? void 0 : s.call(n, e)) ?? !0;
 }
 async function $e(e, t) {
   var c;
-  if (!ba(e, t) || !Lt)
+  if (!ya(e, t) || !Lt)
     return;
   if (!e.id) {
     const l = e.getAttribute("selector-id");
@@ -7100,27 +7098,27 @@ async function $e(e, t) {
       const a = ms.get(l) ?? 0;
       e.id = btoa(`${t}-${l}-${a}`), ms.set(l, a + 1);
     } else
-      e.id = await oa(t, e);
+      e.id = await ia(t, e);
   }
-  const n = Wl(e);
+  const n = Jl(e);
   if (!n) {
     console.error(
       `Element ${e} does not have an acceptable ID. Please add an ID to the element to register it as a playhtml element.`
     );
     return;
   }
-  ya(t);
-  const s = R.get(t), r = wa(
+  ma(t);
+  const s = $.get(t), r = pa(
     t,
     e
   );
-  if (!pa(r)) {
+  if (!ga(r)) {
     console.error(
       `Element ${n} does not have proper info to initial a playhtml element. Please refer to https://github.com/spencerc99/playhtml#can-play for troubleshooting help.`
     );
     return;
   }
-  const i = W.get(t), o = ga(
+  const i = W.get(t), o = fa(
     e,
     t,
     r,
@@ -7130,17 +7128,17 @@ async function $e(e, t) {
     s.get(n).reinitializeElementData(o);
     return;
   } else
-    s.set(n, new ia(o));
+    s.set(n, new ra(o));
   i.get(n) === void 0 && r.defaultData !== void 0 && i.set(
     n,
     r.defaultData instanceof Function ? r.defaultData(e) : r.defaultData
   ), (c = o.triggerAwarenessUpdate) == null || c.call(o), e.classList.add("__playhtml-element"), e.classList.add(`__playhtml-${t}`), e.style.setProperty("--jiggle-delay", `${Math.random() * 1}s;}`);
 }
-function Sa(e, { ignoreIfAlreadySetup: t } = {}) {
-  if (!(t && Object.keys(R || {}).some(
+function ba(e, { ignoreIfAlreadySetup: t } = {}) {
+  if (!(t && Object.keys($ || {}).some(
     (n) => {
       var s;
-      return (s = R.get(n)) == null ? void 0 : s.has(e.id);
+      return (s = $.get(n)) == null ? void 0 : s.has(e.id);
     }
   ))) {
     if (!Nn(e)) {
@@ -7152,29 +7150,29 @@ function Sa(e, { ignoreIfAlreadySetup: t } = {}) {
     );
   }
 }
-function _a(e) {
+function Sa(e) {
   if (!(!e || !e.id))
-    for (const t of Object.keys(R)) {
-      const n = R.get(t);
+    for (const t of Object.keys($)) {
+      const n = $.get(t);
       n.has(e.id) && n.delete(e.id);
     }
 }
-function ka(e) {
+function _a(e) {
   const { type: t } = e;
   if (!gt.has(t)) {
     console.error(`[playhtml] event "${t}" not registered.`);
     return;
   }
-  ha(e);
+  aa(e);
 }
 function zr(e, t) {
-  const n = String(aa++);
+  const n = String(la++);
   return gt.set(e, [
     ...gt.get(e) ?? [],
     { type: e, ...t, id: n }
   ]), n;
 }
-function Da(e, t) {
+function ka(e, t) {
   const n = gt.get(e);
   if (!n)
     return;
@@ -7182,5 +7180,5 @@ function Da(e, t) {
   s !== -1 && (n.splice(s, 1), n.length === 0 && gt.delete(e));
 }
 export {
-  ma as playhtml
+  wa as playhtml
 };

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.__playhtml-can-move{cursor:pointer;transition:transform .15s;will-change:transform}.__playhtml-can-spin,.__playhtml-can-grow{cursor:pointer;transition:transform .25s;will-change:transform}.__playhtml-can-toggle,.__playhtml-can-draw{cursor:pointer}.__playhtml-can-draw .__playhtml-draw-container{position:relative;width:100%;height:100%;cursor:none}.__playhtml-can-draw .__playhtml-draw-container canvas{position:absolute;top:0;left:0;cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='32' height='32' viewport='0 0 100 100' style='overflow: visible; fill:black;font-size:20px;'><text y='-30%' x='-50%' style='transform:rotate(180deg)'>🖍️</text></svg>") 16 0,auto}body .__playhtml-element.editing:nth-child(2n){animation-name:jiggle1;animation-iteration-count:infinite;transform-origin:50% 10%;animation-duration:.25s;animation-delay:var(--jiggle-delay)}body .__playhtml-element.editing:nth-child(2n-1){animation-name:jiggle2;animation-iteration-count:infinite;animation-direction:alternate;transform-origin:30% 5%;animation-duration:.45s;animation-delay:var(--jiggle-delay)}@keyframes jiggle1{0%{transform:rotate(-1deg);animation-timing-function:ease-in}50%{transform:rotate(1.5deg);animation-timing-function:ease-out}}@keyframes jiggle2{0%{transform:rotate(1deg);animation-timing-function:ease-in}50%{transform:rotate(-1.5deg);animation-timing-function:ease-out}}
+@charset "UTF-8";.__playhtml-can-move{cursor:grab;transition:transform .15s;will-change:transform}.__playhtml-can-move.cursordown{cursor:grabbing}.__playhtml-can-spin{cursor:grab;transition:transform .25s;will-change:transform}.__playhtml-can-spin.cursordown{cursor:grabbing}.__playhtml-can-grow{cursor:pointer;transition:transform .25s;will-change:transform}.__playhtml-can-toggle,.__playhtml-can-draw{cursor:pointer}.__playhtml-can-draw .__playhtml-draw-container{position:relative;width:100%;height:100%;cursor:none}.__playhtml-can-draw .__playhtml-draw-container canvas{position:absolute;top:0;left:0;cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='32' height='32' viewport='0 0 100 100' style='overflow: visible; fill:black;font-size:20px;'><text y='-30%' x='-50%' style='transform:rotate(180deg)'>🖍️</text></svg>") 16 0,auto}body .__playhtml-element.editing:nth-child(2n){animation-name:jiggle1;animation-iteration-count:infinite;transform-origin:50% 10%;animation-duration:.25s;animation-delay:var(--jiggle-delay)}body .__playhtml-element.editing:nth-child(2n-1){animation-name:jiggle2;animation-iteration-count:infinite;animation-direction:alternate;transform-origin:30% 5%;animation-duration:.45s;animation-delay:var(--jiggle-delay)}@keyframes jiggle1{0%{transform:rotate(-1deg);animation-timing-function:ease-in}50%{transform:rotate(1.5deg);animation-timing-function:ease-out}}@keyframes jiggle2{0%{transform:rotate(1deg);animation-timing-function:ease-in}50%{transform:rotate(-1.5deg);animation-timing-function:ease-out}}

package/package.json

@@ -2,7 +2,7 @@
   "name": "playhtml",
   "title": "playhtml",
   "description": "Create interactive, collaborative html elements with a single attribute",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "license": "MIT",
   "type": "module",
   "keywords": [