@dfosco/tiny-canvas 1.1.0 → 1.2.0

package/dist/tiny-canvas.css

@@ -1 +1 @@
-:root{--tc-border-radius: var(--borderRadius-large, 12px);--tc-shadow-rest: var(--shadow-resting-small, 0 1px 3px rgba(0, 0, 0, .12));--tc-shadow-float: var(--shadow-floating-small, 0 4px 12px rgba(0, 0, 0, .15));--tc-border-color: var(--borderColor-muted, rgba(0, 0, 0, .15));--tc-bg-muted: var(--bgColor-muted, #f6f8fa);--tc-dot-color: var(--overlay-backdrop-bgColor, rgba(0, 0, 0, .08));--tc-grid-size: var(--golden-number, 36px);--tc-grid-offset: calc(var(--tc-grid-size) / -2);--tc-font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}.tc-canvas{min-width:100vw;min-height:100vh;margin:0;font-family:var(--tc-font-stack);position:relative;background-color:var(--tc-bg-muted);width:100vw;max-width:100vw;color-scheme:light dark}.tc-canvas[data-color-mode=light]{color-scheme:light}.tc-canvas[data-color-mode=dark]{color-scheme:dark}.tc-canvas[data-dotted]{background-image:radial-gradient(var(--tc-dot-color) 2px,transparent 2px);background-size:var(--tc-grid-size) var(--tc-grid-size);background-position:var(--tc-grid-offset) var(--tc-grid-offset)}@media(prefers-color-scheme:dark){.tc-canvas:not([data-color-mode=light]){--tc-bg-muted: var(--bgColor-muted, #161b22);--tc-dot-color: var(--overlay-backdrop-bgColor, rgba(255, 255, 255, .1));--tc-border-color: var(--borderColor-muted, rgba(255, 255, 255, .15));--tc-shadow-rest: var(--shadow-resting-small, 0 1px 3px rgba(0, 0, 0, .3));--tc-shadow-float: var(--shadow-floating-small, 0 4px 12px rgba(0, 0, 0, .4))}}.tc-canvas[data-color-mode=dark]{--tc-bg-muted: var(--bgColor-muted, #161b22);--tc-dot-color: var(--overlay-backdrop-bgColor, rgba(255, 255, 255, .1));--tc-border-color: var(--borderColor-muted, rgba(255, 255, 255, .15));--tc-shadow-rest: var(--shadow-resting-small, 0 1px 3px rgba(0, 0, 0, .3));--tc-shadow-float: var(--shadow-floating-small, 0 4px 12px rgba(0, 0, 0, .4))}body .tc-draggable-inner:not(:active){touch-action:none}.tc-on-translation{transition:transform calc(var(--tc-translation-ms, .25s) * 2) cubic-bezier(.78,.1,.51,.78) var(--tc-translation-ms, .25s)}.tc-drag{position:absolute;width:fit-content}.tc-draggable-inner{position:relative;width:fit-content;height:min-content}.tc-draggable-inner:after{content:"";position:absolute;z-index:-1;width:100%;height:100%;top:0;border-radius:var(--tc-border-radius);box-shadow:var(--tc-shadow-float);opacity:0;transition:opacity .3s ease-in-out}.tc-on-translation .tc-draggable-inner:after,.tc-draggable-inner:active:after,.tc-draggable-inner:hover:after{opacity:0}.tc-on-translation .tc-draggable-inner,.tc-draggable-inner:active,.tc-draggable-inner:hover{outline:none}
+:root{--tc-border-radius: var(--borderRadius-large, 12px);--tc-shadow-rest: var(--shadow-resting-small, 0 1px 3px rgba(0, 0, 0, .12));--tc-shadow-float: var(--shadow-floating-small, 0 4px 12px rgba(0, 0, 0, .15));--tc-border-color: var(--borderColor-muted, rgba(0, 0, 0, .15));--tc-bg-muted: var(--bgColor-muted, #f6f8fa);--tc-dot-color: var(--overlay-backdrop-bgColor, rgba(0, 0, 0, .08));--tc-grid-size: var(--golden-number, 36px);--tc-grid-offset: calc(var(--tc-grid-size) / -2);--tc-font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}.tc-canvas{min-width:100vw;min-height:100vh;width:10000px;height:10000px;margin:0;font-family:var(--tc-font-stack);position:relative;background-color:var(--tc-bg-muted);color-scheme:light dark}.tc-canvas[data-color-mode=light]{color-scheme:light}.tc-canvas[data-color-mode=dark]{color-scheme:dark}.tc-canvas[data-dotted]{background-image:radial-gradient(var(--tc-dot-color) 2px,transparent 2px);background-size:var(--tc-grid-size) var(--tc-grid-size);background-position:var(--tc-grid-offset) var(--tc-grid-offset)}@media(prefers-color-scheme:dark){.tc-canvas:not([data-color-mode=light]){--tc-bg-muted: var(--bgColor-muted, #161b22);--tc-dot-color: var(--overlay-backdrop-bgColor, rgba(255, 255, 255, .1));--tc-border-color: var(--borderColor-muted, rgba(255, 255, 255, .15));--tc-shadow-rest: var(--shadow-resting-small, 0 1px 3px rgba(0, 0, 0, .3));--tc-shadow-float: var(--shadow-floating-small, 0 4px 12px rgba(0, 0, 0, .4))}}.tc-canvas[data-color-mode=dark]{--tc-bg-muted: var(--bgColor-muted, #161b22);--tc-dot-color: var(--overlay-backdrop-bgColor, rgba(255, 255, 255, .1));--tc-border-color: var(--borderColor-muted, rgba(255, 255, 255, .15));--tc-shadow-rest: var(--shadow-resting-small, 0 1px 3px rgba(0, 0, 0, .3));--tc-shadow-float: var(--shadow-floating-small, 0 4px 12px rgba(0, 0, 0, .4))}body .tc-draggable-inner:not(:active){touch-action:none}.tc-on-translation{transition:transform calc(var(--tc-translation-ms, .25s) * 2) cubic-bezier(.78,.1,.51,.78) var(--tc-translation-ms, .25s)}.tc-drag{position:absolute;width:fit-content}.tc-draggable-inner{position:relative;width:fit-content;height:min-content}.tc-draggable-inner:after{content:"";position:absolute;z-index:-1;width:100%;height:100%;top:0;border-radius:var(--tc-border-radius);box-shadow:var(--tc-shadow-float);opacity:0;transition:opacity .3s ease-in-out}.tc-on-translation .tc-draggable-inner:after,.tc-draggable-inner:active:after,.tc-draggable-inner:hover:after{opacity:0}.tc-on-translation .tc-draggable-inner,.tc-draggable-inner:active,.tc-draggable-inner:hover{outline:none}

package/dist/tiny-canvas.js

@@ -1,289 +1,320 @@
-import { jsx as Q } from "react/jsx-runtime";
-import me, { useRef as le, useState as Y, useEffect as P, Children as Ee, useCallback as Ce } from "react";
-var ae = { dragStart: !0 }, se = { delay: 0, distance: 3 };
-function Ae(e, r = {}) {
-  let n, o, { bounds: a, axis: c = "both", gpuAcceleration: l = !0, legacyTranslate: d = !1, transform: m, applyUserSelectHack: w = !0, disabled: N = !1, ignoreMultitouch: v = !1, recomputeBounds: D = ae, grid: f, threshold: y = se, position: b, cancel: q, handle: M, defaultClass: u = "neodrag", defaultClassDragging: x = "neodrag-dragging", defaultClassDragged: I = "neodrag-dragged", defaultPosition: be = { x: 0, y: 0 }, onDragStart: Se, onDrag: we, onDragEnd: De } = r, H = !1, L = !1, de = 0, O = !1, J = !1, R = 0, T = 0, k = 0, B = 0, _ = 0, G = 0, { x: j, y: z } = b ? { x: (b == null ? void 0 : b.x) ?? 0, y: (b == null ? void 0 : b.y) ?? 0 } : be;
-  te(j, z);
-  let E, $, X, K, Z, fe = "", xe = !!b;
-  D = { ...ae, ...D }, y = { ...se, ...y ?? {} };
-  let U = /* @__PURE__ */ new Set();
-  function ge(t) {
-    H && !L && J && O && Z && (L = !0, (function(s) {
-      re("neodrag:start", Se, s);
-    })(t), A.add(x), w && (fe = ee.userSelect, ee.userSelect = "none"));
+import { jsx as Z } from "react/jsx-runtime";
+import vt, { useRef as W, useState as B, useEffect as ft, Children as Mt, useCallback as Rt } from "react";
+var it = { dragStart: !0 }, ct = { delay: 0, distance: 3 };
+function It(t, e = {}) {
+  let n, o, { bounds: a, axis: s = "both", gpuAcceleration: f = !0, legacyTranslate: d = !1, transform: v, applyUserSelectHack: w = !0, disabled: D = !1, ignoreMultitouch: N = !1, recomputeBounds: x = it, grid: I, threshold: y = ct, position: S, cancel: u, handle: m, defaultClass: i = "neodrag", defaultClassDragging: b = "neodrag-dragging", defaultClassDragged: A = "neodrag-dragged", defaultPosition: Et = { x: 0, y: 0 }, onDragStart: xt, onDrag: Nt, onDragEnd: At } = e, L = !1, $ = !1, gt = 0, Y = !1, _ = !1, T = 0, O = 0, q = 0, X = 0, G = 0, K = 0, { x: U, y: J } = S ? { x: (S == null ? void 0 : S.x) ?? 0, y: (S == null ? void 0 : S.y) ?? 0 } : Et;
+  nt(U, J);
+  let C, P, k, tt, et, pt = "", Ct = !!S;
+  x = { ...it, ...x }, y = { ...ct, ...y ?? {} };
+  let j = /* @__PURE__ */ new Set();
+  function ht(r) {
+    L && !$ && _ && Y && et && ($ = !0, (function(c) {
+      ot("neodrag:start", xt, c);
+    })(r), R.add(b), w && (pt = rt.userSelect, rt.userSelect = "none"));
   }
-  const ee = document.body.style, A = e.classList;
-  function te(t = R, s = T) {
-    if (!m) {
+  const rt = document.body.style, R = t.classList;
+  function nt(r = T, c = O) {
+    if (!v) {
       if (d) {
-        let p = `${+t}px, ${+s}px`;
-        return W(e, "transform", l ? `translate3d(${p}, 0)` : `translate(${p})`);
+        let p = `${+r}px, ${+c}px`;
+        return Q(t, "transform", f ? `translate3d(${p}, 0)` : `translate(${p})`);
       }
-      return W(e, "translate", `${+t}px ${+s}px`);
+      return Q(t, "translate", `${+r}px ${+c}px`);
     }
-    const g = m({ offsetX: t, offsetY: s, rootNode: e });
-    ie(g) && W(e, "transform", g);
+    const g = v({ offsetX: r, offsetY: c, rootNode: t });
+    lt(g) && Q(t, "transform", g);
   }
-  function re(t, s, g) {
+  function ot(r, c, g) {
     const p = /* @__PURE__ */ (function(h) {
-      return { offsetX: R, offsetY: T, rootNode: e, currentNode: Z, event: h };
+      return { offsetX: T, offsetY: O, rootNode: t, currentNode: et, event: h };
     })(g);
-    e.dispatchEvent(new CustomEvent(t, { detail: p })), s == null || s(p);
+    t.dispatchEvent(new CustomEvent(r, { detail: p })), c == null || c(p);
   }
-  const V = addEventListener, ne = new AbortController(), oe = { signal: ne.signal, capture: !1 };
-  function pe() {
-    let t = e.offsetWidth / $.width;
-    return isNaN(t) && (t = 1), t;
+  const F = addEventListener, at = new AbortController(), st = { signal: at.signal, capture: !1 };
+  function yt() {
+    let r = t.offsetWidth / P.width;
+    return isNaN(r) && (r = 1), r;
   }
-  return W(e, "touch-action", "none"), V("pointerdown", ((t) => {
-    if (N || t.button === 2) return;
-    if (U.add(t.pointerId), v && U.size > 1) return t.preventDefault();
-    if (D.dragStart && (E = ce(a, e)), ie(M) && ie(q) && M === q) throw new Error("`handle` selector can't be same as `cancel` selector");
-    if (A.add(u), X = (function(i, S) {
-      if (!i) return [S];
-      if (ue(i)) return [i];
-      if (Array.isArray(i)) return i;
-      const C = S.querySelectorAll(i);
-      if (C === null) throw new Error("Selector passed for `handle` option should be child of the element on which the action is applied");
-      return Array.from(C.values());
-    })(M, e), K = (function(i, S) {
-      if (!i) return [];
-      if (ue(i)) return [i];
-      if (Array.isArray(i)) return i;
-      const C = S.querySelectorAll(i);
-      if (C === null) throw new Error("Selector passed for `cancel` option should be child of the element on which the action is applied");
-      return Array.from(C.values());
-    })(q, e), n = /(both|x)/.test(c), o = /(both|y)/.test(c), ye(K, X)) throw new Error("Element being dragged can't be a child of the element on which `cancel` is applied");
-    const s = t.composedPath()[0];
-    if (!X.some(((i) => {
-      var S;
-      return i.contains(s) || ((S = i.shadowRoot) == null ? void 0 : S.contains(s));
-    })) || ye(K, [s])) return;
-    Z = X.length === 1 ? e : X.find(((i) => i.contains(s))), H = !0, de = Date.now(), y.delay || (O = !0), $ = e.getBoundingClientRect();
-    const { clientX: g, clientY: p } = t, h = pe();
-    n && (k = g - j / h), o && (B = p - z / h), E && (_ = g - $.left, G = p - $.top);
-  }), oe), V("pointermove", ((t) => {
-    if (!H || v && U.size > 1) return;
-    if (!L) {
-      if (O || Date.now() - de >= y.delay && (O = !0, ge(t)), !J) {
-        const h = t.clientX - k, i = t.clientY - B;
-        Math.sqrt(h ** 2 + i ** 2) >= y.distance && (J = !0, ge(t));
+  return Q(t, "touch-action", "none"), F("pointerdown", ((r) => {
+    if (D || r.button === 2) return;
+    if (j.add(r.pointerId), N && j.size > 1) return r.preventDefault();
+    if (x.dragStart && (C = ut(a, t)), lt(m) && lt(u) && m === u) throw new Error("`handle` selector can't be same as `cancel` selector");
+    if (R.add(i), k = (function(l, E) {
+      if (!l) return [E];
+      if (dt(l)) return [l];
+      if (Array.isArray(l)) return l;
+      const M = E.querySelectorAll(l);
+      if (M === null) throw new Error("Selector passed for `handle` option should be child of the element on which the action is applied");
+      return Array.from(M.values());
+    })(m, t), tt = (function(l, E) {
+      if (!l) return [];
+      if (dt(l)) return [l];
+      if (Array.isArray(l)) return l;
+      const M = E.querySelectorAll(l);
+      if (M === null) throw new Error("Selector passed for `cancel` option should be child of the element on which the action is applied");
+      return Array.from(M.values());
+    })(u, t), n = /(both|x)/.test(s), o = /(both|y)/.test(s), St(tt, k)) throw new Error("Element being dragged can't be a child of the element on which `cancel` is applied");
+    const c = r.composedPath()[0];
+    if (!k.some(((l) => {
+      var E;
+      return l.contains(c) || ((E = l.shadowRoot) == null ? void 0 : E.contains(c));
+    })) || St(tt, [c])) return;
+    et = k.length === 1 ? t : k.find(((l) => l.contains(c))), L = !0, gt = Date.now(), y.delay || (Y = !0), P = t.getBoundingClientRect();
+    const { clientX: g, clientY: p } = r, h = yt();
+    n && (q = g - U / h), o && (X = p - J / h), C && (G = g - P.left, K = p - P.top);
+  }), st), F("pointermove", ((r) => {
+    if (!L || N && j.size > 1) return;
+    if (!$) {
+      if (Y || Date.now() - gt >= y.delay && (Y = !0, ht(r)), !_) {
+        const h = r.clientX - q, l = r.clientY - X;
+        Math.sqrt(h ** 2 + l ** 2) >= y.distance && (_ = !0, ht(r));
       }
-      if (!L) return;
+      if (!$) return;
     }
-    D.drag && (E = ce(a, e)), t.preventDefault(), $ = e.getBoundingClientRect();
-    let s = t.clientX, g = t.clientY;
-    const p = pe();
-    if (E) {
-      const h = { left: E.left + _, top: E.top + G, right: E.right + _ - $.width, bottom: E.bottom + G - $.height };
-      s = he(s, h.left, h.right), g = he(g, h.top, h.bottom);
+    x.drag && (C = ut(a, t)), r.preventDefault(), P = t.getBoundingClientRect();
+    let c = r.clientX, g = r.clientY;
+    const p = yt();
+    if (C) {
+      const h = { left: C.left + G, top: C.top + K, right: C.right + G - P.width, bottom: C.bottom + K - P.height };
+      c = mt(c, h.left, h.right), g = mt(g, h.top, h.bottom);
     }
-    if (Array.isArray(f)) {
-      let [h, i] = f;
+    if (Array.isArray(I)) {
+      let [h, l] = I;
       if (isNaN(+h) || h < 0) throw new Error("1st argument of `grid` must be a valid positive number");
-      if (isNaN(+i) || i < 0) throw new Error("2nd argument of `grid` must be a valid positive number");
-      let S = s - k, C = g - B;
-      [S, C] = Ne([h / p, i / p], S, C), s = k + S, g = B + C;
+      if (isNaN(+l) || l < 0) throw new Error("2nd argument of `grid` must be a valid positive number");
+      let E = c - q, M = g - X;
+      [E, M] = Tt([h / p, l / p], E, M), c = q + E, g = X + M;
     }
-    n && (R = Math.round((s - k) * p)), o && (T = Math.round((g - B) * p)), j = R, z = T, re("neodrag", we, t), te();
-  }), oe), V("pointerup", ((t) => {
-    U.delete(t.pointerId), H && (L && (V("click", ((s) => s.stopPropagation()), { once: !0, signal: ne.signal, capture: !0 }), D.dragEnd && (E = ce(a, e)), A.remove(x), A.add(I), w && (ee.userSelect = fe), re("neodrag:end", De, t), n && (k = R), o && (B = T)), H = !1, L = !1, O = !1, J = !1);
-  }), oe), { destroy: () => ne.abort(), update: (t) => {
+    n && (T = Math.round((c - q) * p)), o && (O = Math.round((g - X) * p)), U = T, J = O, ot("neodrag", Nt, r), nt();
+  }), st), F("pointerup", ((r) => {
+    j.delete(r.pointerId), L && ($ && (F("click", ((c) => c.stopPropagation()), { once: !0, signal: at.signal, capture: !0 }), x.dragEnd && (C = ut(a, t)), R.remove(b), R.add(A), w && (rt.userSelect = pt), ot("neodrag:end", At, r), n && (q = T), o && (X = O)), L = !1, $ = !1, Y = !1, _ = !1);
+  }), st), { destroy: () => at.abort(), update: (r) => {
     var g, p;
-    c = t.axis || "both", N = t.disabled ?? !1, v = t.ignoreMultitouch ?? !1, M = t.handle, a = t.bounds, D = t.recomputeBounds ?? ae, q = t.cancel, w = t.applyUserSelectHack ?? !0, f = t.grid, l = t.gpuAcceleration ?? !0, d = t.legacyTranslate ?? !1, m = t.transform, y = { ...se, ...t.threshold ?? {} };
-    const s = A.contains(I);
-    A.remove(u, I), u = t.defaultClass ?? "neodrag", x = t.defaultClassDragging ?? "neodrag-dragging", I = t.defaultClassDragged ?? "neodrag-dragged", A.add(u), s && A.add(I), xe && (j = R = ((g = t.position) == null ? void 0 : g.x) ?? R, z = T = ((p = t.position) == null ? void 0 : p.y) ?? T, te());
+    s = r.axis || "both", D = r.disabled ?? !1, N = r.ignoreMultitouch ?? !1, m = r.handle, a = r.bounds, x = r.recomputeBounds ?? it, u = r.cancel, w = r.applyUserSelectHack ?? !0, I = r.grid, f = r.gpuAcceleration ?? !0, d = r.legacyTranslate ?? !1, v = r.transform, y = { ...ct, ...r.threshold ?? {} };
+    const c = R.contains(A);
+    R.remove(i, A), i = r.defaultClass ?? "neodrag", b = r.defaultClassDragging ?? "neodrag-dragging", A = r.defaultClassDragged ?? "neodrag-dragged", R.add(i), c && R.add(A), Ct && (U = T = ((g = r.position) == null ? void 0 : g.x) ?? T, J = O = ((p = r.position) == null ? void 0 : p.y) ?? O, nt());
   } };
 }
-var he = (e, r, n) => Math.min(Math.max(e, r), n), ie = (e) => typeof e == "string", Ne = ([e, r], n, o) => {
-  const a = (c, l) => l === 0 ? 0 : Math.ceil(c / l) * l;
-  return [a(n, e), a(o, r)];
-}, ye = (e, r) => e.some(((n) => r.some(((o) => n.contains(o)))));
-function ce(e, r) {
-  if (e === void 0) return;
-  if (ue(e)) return e.getBoundingClientRect();
-  if (typeof e == "object") {
-    const { top: o = 0, left: a = 0, right: c = 0, bottom: l = 0 } = e;
-    return { top: o, right: window.innerWidth - c, bottom: window.innerHeight - l, left: a };
+var mt = (t, e, n) => Math.min(Math.max(t, e), n), lt = (t) => typeof t == "string", Tt = ([t, e], n, o) => {
+  const a = (s, f) => f === 0 ? 0 : Math.ceil(s / f) * f;
+  return [a(n, t), a(o, e)];
+}, St = (t, e) => t.some(((n) => e.some(((o) => n.contains(o)))));
+function ut(t, e) {
+  if (t === void 0) return;
+  if (dt(t)) return t.getBoundingClientRect();
+  if (typeof t == "object") {
+    const { top: o = 0, left: a = 0, right: s = 0, bottom: f = 0 } = t;
+    return { top: o, right: window.innerWidth - s, bottom: window.innerHeight - f, left: a };
   }
-  if (e === "parent") return r.parentNode.getBoundingClientRect();
-  const n = document.querySelector(e);
+  if (t === "parent") return e.parentNode.getBoundingClientRect();
+  const n = document.querySelector(t);
   if (n === null) throw new Error("The selector provided for bound doesn't exists in the document.");
   return n.getBoundingClientRect();
 }
-var W = (e, r, n) => e.style.setProperty(r, n), ue = (e) => e instanceof HTMLElement;
-function F(e) {
-  return e == null || typeof e == "string" || e instanceof HTMLElement ? e : "current" in e ? e.current : Array.isArray(e) ? e.map(((r) => r instanceof HTMLElement ? r : r.current)) : void 0;
+var Q = (t, e, n) => t.style.setProperty(e, n), dt = (t) => t instanceof HTMLElement;
+function z(t) {
+  return t == null || typeof t == "string" || t instanceof HTMLElement ? t : "current" in t ? t.current : Array.isArray(t) ? t.map(((e) => e instanceof HTMLElement ? e : e.current)) : void 0;
 }
-function qe(e, r = {}) {
-  const n = le(), [o, a] = Y(!1), [c, l] = Y();
-  let { onDragStart: d, onDrag: m, onDragEnd: w, handle: N, cancel: v } = r, D = F(N), f = F(v);
-  function y(u, x) {
-    l(u), x == null || x(u);
+function Ot(t, e = {}) {
+  const n = W(), [o, a] = B(!1), [s, f] = B();
+  let { onDragStart: d, onDrag: v, onDragEnd: w, handle: D, cancel: N } = e, x = z(D), I = z(N);
+  function y(i, b) {
+    f(i), b == null || b(i);
   }
-  function b(u) {
-    a(!0), y(u, d);
+  function S(i) {
+    a(!0), y(i, d);
   }
-  function q(u) {
-    y(u, m);
+  function u(i) {
+    y(i, v);
   }
-  function M(u) {
-    a(!1), y(u, w);
+  function m(i) {
+    a(!1), y(i, w);
   }
-  return P((() => {
+  return ft((() => {
     if (typeof window > "u") return;
-    const u = e.current;
-    if (!u) return;
-    ({ onDragStart: d, onDrag: m, onDragEnd: w } = r);
-    const { update: x, destroy: I } = Ae(u, { ...r, handle: D, cancel: f, onDragStart: b, onDrag: q, onDragEnd: M });
-    return n.current = x, I;
-  }), []), P((() => {
-    var u;
-    (u = n.current) == null || u.call(n, { ...r, handle: F(N), cancel: F(v), onDragStart: b, onDrag: q, onDragEnd: M });
-  }), [r]), { isDragging: o, dragState: c };
+    const i = t.current;
+    if (!i) return;
+    ({ onDragStart: d, onDrag: v, onDragEnd: w } = e);
+    const { update: b, destroy: A } = It(i, { ...e, handle: x, cancel: I, onDragStart: S, onDrag: u, onDragEnd: m });
+    return n.current = b, A;
+  }), []), ft((() => {
+    var i;
+    (i = n.current) == null || i.call(n, { ...e, handle: z(D), cancel: z(N), onDragStart: S, onDrag: u, onDragEnd: m });
+  }), [e]), { isDragging: o, dragState: s };
 }
-const Me = (e) => {
-  if (!e) return null;
-  let r = null;
+const H = "tiny-canvas-queue";
+function wt() {
+  const t = localStorage.getItem(H);
+  if (!t) return [];
+  try {
+    const e = JSON.parse(t);
+    return Array.isArray(e) ? e : [];
+  } catch {
+    return localStorage.setItem(H, JSON.stringify([])), [];
+  }
+}
+const Pt = (t) => {
+  if (!t) return null;
+  let e = null;
   const n = (o) => {
     if (o.props && o.props.id) {
-      r = o.props.id;
+      e = o.props.id;
       return;
     }
-    o.props && o.props.children && me.Children.forEach(o.props.children, n);
+    o.props && o.props.children && vt.Children.forEach(o.props.children, n);
   };
-  return n(e), r;
+  return n(t), e;
 };
-function Ie(e) {
-  let r = 5381;
-  for (let n = 0; n < e.length; n++)
-    r = (r << 5) + r + e.charCodeAt(n) >>> 0;
-  return r.toString(16).padStart(8, "0");
+function $t(t) {
+  let e = 5381;
+  for (let n = 0; n < t.length; n++)
+    e = (e << 5) + e + t.charCodeAt(n) >>> 0;
+  return e.toString(16).padStart(8, "0");
 }
-function ve(e) {
-  var c;
-  if (e == null || typeof e == "boolean") return "";
-  if (typeof e == "string" || typeof e == "number") return "#text";
-  const r = e.type, n = typeof r == "function" ? r.displayName || r.name || "Anonymous" : typeof r == "string" ? r : "Fragment", o = (c = e.props) == null ? void 0 : c.children;
+function Dt(t) {
+  var s;
+  if (t == null || typeof t == "boolean") return "";
+  if (typeof t == "string" || typeof t == "number") return "#text";
+  const e = t.type, n = typeof e == "function" ? e.displayName || e.name || "Anonymous" : typeof e == "string" ? e : "Fragment", o = (s = t.props) == null ? void 0 : s.children;
   if (o == null) return n;
   const a = [];
-  return me.Children.forEach(o, (l) => {
-    const d = ve(l);
+  return vt.Children.forEach(o, (f) => {
+    const d = Dt(f);
     d && a.push(d);
   }), a.length ? `${n}(${a.join(",")})` : n;
 }
-const Re = (e, r) => {
-  const n = ve(e);
-  return `tc-${Ie(n)}-${r}`;
-}, Te = (e) => {
+const qt = (t, e) => {
+  const n = Dt(t);
+  return `tc-${$t(n)}-${e}`;
+}, Ut = (t) => {
   try {
-    return (JSON.parse(localStorage.getItem("tiny-canvas-queue")) || []).reduce((o, a) => (o[a.id] = { id: a.id, x: a.x, y: a.y }, o), {})[e] || { x: 0, y: 0 };
-  } catch (r) {
-    return console.error("Error getting saved coordinates:", r), { x: 0, y: 0 };
+    return wt().reduce((o, a) => (o[a.id] = { id: a.id, x: a.x, y: a.y }, o), {})[t] || { x: 0, y: 0 };
+  } catch (e) {
+    return console.error("Error getting saved coordinates:", e), { x: 0, y: 0 };
   }
-}, $e = () => {
+}, Jt = () => {
   try {
-    localStorage.getItem("tiny-canvas-queue") || localStorage.setItem("tiny-canvas-queue", JSON.stringify([]));
-  } catch (e) {
-    console.error("LocalStorage is not available:", e);
+    localStorage.getItem(H) || localStorage.setItem(H, JSON.stringify([]));
+  } catch (t) {
+    console.error("LocalStorage is not available:", t);
   }
-}, Le = (e, r, n) => {
+}, Xt = (t, e, n) => {
   try {
-    const o = JSON.parse(localStorage.getItem("tiny-canvas-queue")) || [], a = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-"), c = { id: e, x: r, y: n, time: a }, l = o.findIndex((d) => d.id === e);
-    l >= 0 ? o[l] = c : o.push(c), localStorage.setItem("tiny-canvas-queue", JSON.stringify(o));
+    const o = wt(), a = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-"), s = { id: t, x: e, y: n, time: a }, f = o.findIndex((d) => d.id === t);
+    f >= 0 ? o[f] = s : o.push(s), localStorage.setItem(H, JSON.stringify(o));
   } catch (o) {
     console.error("Error saving drag position:", o);
   }
-}, ke = 250;
-function Be({ children: e, gridSize: r, dragId: n }) {
-  const o = le(null), a = le(Te(n)).current, [c, l] = Y(!1), [d, m] = Y({ x: 0, y: 0 }), [w, N] = Y(
-    Math.random() < 0.5 ? -0.5 : 0.5
+}, Lt = 250, bt = 4, Yt = 10, V = 1.5;
+function kt({ children: t, dragId: e, initialPosition: n, onDragEnd: o }) {
+  const a = W(null), s = n || { x: 0, y: 0 }, f = W(s), d = W(!1), [v, w] = B(!1), [D, N] = B(s), [x, I] = B(
+    () => Math.random() < 0.5 ? -V : V
   );
-  P(() => {
-    const f = o.current;
-    if (f && n && a && (a.x !== 0 || a.y !== 0)) {
-      f.classList.add("tc-on-translation"), l(!0);
-      const y = setTimeout(() => {
-        f.classList.remove("tc-on-translation"), l(!1);
-      }, ke * 4);
-      return () => clearTimeout(y);
+  ft(() => {
+    const u = a.current;
+    if (u && e && (s.x !== 0 || s.y !== 0)) {
+      u.classList.add("tc-on-translation");
+      const m = setTimeout(() => {
+        u.classList.remove("tc-on-translation");
+      }, Lt * 4);
+      return () => {
+        clearTimeout(m);
+      };
     }
-  }, []), P(() => {
-    $e(), o.current && a && m({ x: a.x, y: a.y });
-  }, [a]);
-  const { isDragging: v } = qe(o, {
+  }, [e, s.x, s.y]);
+  const { isDragging: y } = Ot(a, {
     axis: "both",
-    bounds: "body",
     threshold: { delay: 50, distance: 30 },
     defaultClass: "tc-drag",
     defaultClassDragging: "tc-on",
     defaultClassDragged: "tc-off",
     applyUserSelectHack: !0,
-    position: { x: d.x, y: d.y },
-    onDrag: ({ offsetX: f, offsetY: y }) => m({ x: f, y }),
-    onDragEnd: (f) => {
-      m({ x: f.offsetX, y: f.offsetY }), n !== null && Le(n, f.offsetX, f.offsetY);
+    position: { x: D.x, y: D.y },
+    onDragStart: () => {
+      f.current = D, d.current = !1, w(!1);
+    },
+    onDrag: ({ offsetX: u, offsetY: m }) => {
+      const i = u - f.current.x, b = m - f.current.y, A = Math.hypot(i, b);
+      !d.current && Math.hypot(i, b) >= bt && (d.current = !0), !v && A >= Yt && w(!0), N({ x: u, y: m });
+    },
+    onDragEnd: (u) => {
+      N({ x: u.offsetX, y: u.offsetY }), I(Math.random() < 0.5 ? -V : V), w(!1);
+      const m = u.offsetX - f.current.x, i = u.offsetY - f.current.y;
+      (d.current || Math.hypot(m, i) >= bt) && (e && Xt(e, u.offsetX, u.offsetY), o == null || o(e, { x: u.offsetX, y: u.offsetY }));
     }
-  }), D = v || c ? `${w}deg` : "0deg";
-  return P(() => {
-    N(Math.random() < 0.5 ? -0.5 : 0.5);
-  }, [v]), /* @__PURE__ */ Q(
+  }), S = y && v ? `${x}deg` : "0deg";
+  return /* @__PURE__ */ Z(
     "article",
     {
-      ref: o,
-      style: { cursor: v ? "grabbing" : "grab" },
-      children: /* @__PURE__ */ Q(
+      ref: a,
+      style: { cursor: y ? "grabbing" : "grab" },
+      children: /* @__PURE__ */ Z(
         "div",
         {
           className: "tc-draggable-inner",
           style: {
-            transform: v || c ? `rotate(${D})` : void 0,
+            transform: y ? `rotate(${S})` : void 0,
             transition: "transform ease-in-out 150ms"
           },
-          children: e
+          children: t
         }
       )
     }
   );
 }
-function Xe({
-  children: e,
-  centered: r = !0,
-  dotted: n = !1,
-  grid: o = !1,
-  gridSize: a,
-  colorMode: c = "auto"
+function Bt(t) {
+  var o, a;
+  const e = Number((o = t == null ? void 0 : t.props) == null ? void 0 : o["data-tc-x"]), n = Number((a = t == null ? void 0 : t.props) == null ? void 0 : a["data-tc-y"]);
+  return Number.isFinite(e) && Number.isFinite(n) ? { x: e, y: n } : null;
+}
+function jt({
+  children: t,
+  dotted: e = !1,
+  grid: n = !1,
+  gridSize: o,
+  colorMode: a = "auto",
+  onDragEnd: s
 }) {
-  return /* @__PURE__ */ Q(
+  return /* @__PURE__ */ Z(
     "main",
     {
       className: "tc-canvas",
-      "data-dotted": n || o || void 0,
-      "data-color-mode": c !== "auto" ? c : void 0,
-      children: Ee.map(e, (d, m) => {
-        const w = Me(d) ?? Re(d, m);
-        return /* @__PURE__ */ Q(Be, { gridSize: a, dragId: w, children: d }, m);
+      "data-dotted": e || n || void 0,
+      "data-color-mode": a !== "auto" ? a : void 0,
+      children: Mt.map(t, (d, v) => {
+        const w = Pt(d) ?? qt(d, v), D = Bt(d);
+        return /* @__PURE__ */ Z(
+          kt,
+          {
+            gridSize: o,
+            dragId: w,
+            initialPosition: D,
+            onDragEnd: s,
+            children: d
+          },
+          v
+        );
       })
     }
   );
 }
-function Ye({ reload: e = !1 } = {}) {
-  return Ce(() => {
+function Ft({ reload: t = !1 } = {}) {
+  return Rt(() => {
     try {
       localStorage.removeItem("tiny-canvas-queue");
-    } catch (r) {
-      console.error("Error clearing canvas state:", r);
+    } catch (e) {
+      console.error("Error clearing canvas state:", e);
     }
-    e && window.location.reload();
-  }, [e]);
+    t && window.location.reload();
+  }, [t]);
 }
 export {
-  Xe as Canvas,
-  Be as Draggable,
-  Me as findDragId,
-  Re as generateDragId,
-  Te as getQueue,
-  $e as refreshStorage,
-  Le as saveDrag,
-  Ye as useResetCanvas
+  jt as Canvas,
+  kt as Draggable,
+  Pt as findDragId,
+  qt as generateDragId,
+  Ut as getQueue,
+  Jt as refreshStorage,
+  Xt as saveDrag,
+  Ft as useResetCanvas
 };

package/package.json

@@ -1,36 +1,26 @@
 {
   "name": "@dfosco/tiny-canvas",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "license": "MIT",
   "description": "A lightweight React canvas with draggable elements and persistent positions",
-  "main": "./src/index.js",
-  "module": "./src/index.js",
+  "main": "./dist/tiny-canvas.js",
+  "module": "./dist/tiny-canvas.js",
   "types": "./src/index.d.ts",
   "exports": {
     ".": {
-      "import": "./src/index.js",
+      "import": "./dist/tiny-canvas.js",
       "types": "./src/index.d.ts"
     },
-    "./style.css": "./src/style.css"
-  },
-  "publishConfig": {
-    "main": "./dist/tiny-canvas.js",
-    "module": "./dist/tiny-canvas.js",
-    "exports": {
-      ".": {
-        "import": "./dist/tiny-canvas.js",
-        "types": "./src/index.d.ts"
-      },
-      "./style.css": "./dist/tiny-canvas.css"
-    }
+    "./style.css": "./dist/tiny-canvas.css"
   },
   "files": [
     "dist",
     "src/index.d.ts"
   ],
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",