@griddle/vue 0.1.7 → 0.1.9

package/dist/index.js

@@ -1,8 +1,8 @@
-import { defineComponent as $e, ref as E, computed as p, watch as Me, onMounted as Ne, onBeforeUnmount as Ae, nextTick as _e, openBlock as H, createElementBlock as M, normalizeStyle as $, normalizeClass as Ie, createElementVNode as Oe, createCommentVNode as ne, Fragment as we, renderList as Se, renderSlot as Re, createBlock as Ke, withCtx as Ue, normalizeProps as Ve, guardReactiveProps as Je, toDisplayString as qe, shallowRef as We, onScopeDispose as je } from "vue";
-import { resolveLoop as Qe, loopPeriod as Ze, PanController as et, loopInstances as tt, DragController as Be, visibleRange as it, visibleTiles as nt, gridContentSize as ot, GroupDragController as lt, computeTileLayout as De, resolveStickyStacking as at, isOutOfFlow as rt, pixelsToPin as st, Grid as dt } from "@griddle/core";
-import { animateReposition as Fe, liftTransition as ut } from "./animation.js";
-import { measureInteractionScale as Le, toLocalInteractionDelta as Ce } from "./interaction.js";
-const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost", "aria-hidden", "onPointerdown"], vt = ["data-griddle-handle", "onPointerdown"], pt = ["data-griddle-tile"], Ge = "a, button, input, textarea, select, [contenteditable]", gt = 4, wt = /* @__PURE__ */ $e({
+import { defineComponent as Te, ref as H, computed as p, watch as ze, onMounted as We, onBeforeUnmount as De, nextTick as Me, openBlock as k, createElementBlock as X, normalizeStyle as G, normalizeClass as xe, createElementVNode as Le, createCommentVNode as ie, Fragment as ve, renderList as me, renderSlot as ye, createBlock as Ae, withCtx as _e, normalizeProps as Oe, guardReactiveProps as Be, toDisplayString as Fe, shallowRef as Xe, onScopeDispose as Ke } from "vue";
+import { resolveLoop as Ue, loopPeriod as Ve, PanController as Je, loopInstances as qe, DragController as Ge, visibleRange as je, visibleTiles as Qe, gridContentSize as Ze, GroupDragController as et, computeTileLayout as Ee, resolveStickyStacking as tt, isOutOfFlow as it, pixelsToPin as nt, Grid as ot } from "@griddle/core";
+import { animateReposition as $e, liftTransition as lt } from "./animation.js";
+import { resolveResizePreview as Ne, measureInteractionScale as Re, clampInteractionCell as fe, toLocalInteractionDelta as he } from "./interaction.js";
+const at = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost", "aria-hidden", "onPointerdown"], rt = ["data-griddle-handle", "onPointerdown"], st = ["data-griddle-tile"], Ye = "a, button, input, textarea, select, [contenteditable]", dt = 4, ut = /* @__PURE__ */ Te({
   __name: "LoopGrid",
   props: {
     api: {},
@@ -12,80 +12,80 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
     selection: {}
   },
   emits: ["selectionChange", "dragStart", "dragEnd", "resizeStart", "resizeEnd", "cameraChange"],
-  setup(O, { emit: I }) {
-    const s = O, w = I, B = E(null), Y = E(null), c = p(() => s.api.config.value), d = p(() => Qe(c.value)), g = p(() => {
+  setup(_, { emit: C }) {
+    const s = _, f = C, O = H(null), Y = H(null), v = p(() => s.api.config.value), r = p(() => Ue(v.value)), w = p(() => {
       var e;
-      return ((e = d.value) == null ? void 0 : e.interaction) === "edit";
-    }), x = p(() => c.value.gap ?? 0), b = p(() => x.value / 2), h = p(() => c.value.unitWidth + x.value), T = p(() => c.value.unitHeight + x.value), se = p(() => Ze(c.value, s.api.tiles.value)), N = new et();
-    Me(d, (e) => {
-      e && N.setPhysics({ friction: e.friction, ease: e.ease, maxVelocity: e.maxVelocity });
+      return ((e = r.value) == null ? void 0 : e.interaction) === "edit";
+    }), y = p(() => v.value.gap ?? 0), b = p(() => y.value / 2), h = p(() => v.value.unitWidth + y.value), T = p(() => v.value.unitHeight + y.value), re = p(() => Ve(v.value, s.api.tiles.value)), $ = new Je();
+    ze(r, (e) => {
+      e && $.setPhysics({ friction: e.friction, ease: e.ease, maxVelocity: e.maxVelocity });
     }, { immediate: !0 });
-    const A = E({ cxCell: 0, cyCell: 0, vw: 1e3, vh: 800 });
-    let U = null, oe = 0, W = null;
-    function q(e) {
+    const N = H({ cxCell: 0, cyCell: 0, vw: 1e3, vh: 800 });
+    let K = null, ne = 0, W = null;
+    function J(e) {
       e.preventDefault();
       const t = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 100 : 1;
-      N.scrollBy(e.deltaX * t, e.deltaY * t);
+      $.scrollBy(e.deltaX * t, e.deltaY * t);
     }
-    function j(e) {
-      oe = requestAnimationFrame(j);
-      const t = N.tick(e), n = Y.value;
+    function q(e) {
+      ne = requestAnimationFrame(q);
+      const t = $.tick(e), n = Y.value;
       n && (n.style.transform = `translate3d(${-t.x}px, ${-t.y}px, 0)`);
-      const l = B.value;
+      const l = O.value;
       l && s.showGrid !== !1 && (l.style.backgroundPosition = `${-t.x % h.value}px ${-t.y % T.value}px`);
-      const a = Math.floor(t.x / h.value), u = Math.floor(t.y / T.value), r = A.value;
-      (a !== r.cxCell || u !== r.cyCell) && (A.value = { ...r, cxCell: a, cyCell: u }), (!U || U.x !== t.x || U.y !== t.y || U.isMoving !== t.isMoving || U.isDragging !== t.isDragging) && (U = t, w("cameraChange", t));
+      const a = Math.floor(t.x / h.value), u = Math.floor(t.y / T.value), d = N.value;
+      (a !== d.cxCell || u !== d.cyCell) && (N.value = { ...d, cxCell: a, cyCell: u }), (!K || K.x !== t.x || K.y !== t.y || K.isMoving !== t.isMoving || K.isDragging !== t.isDragging) && (K = t, f("cameraChange", t));
     }
-    const le = p(() => {
+    const oe = p(() => {
       s.api.version.value;
       const e = 2 * h.value, t = 2 * T.value;
-      return tt(c.value, s.api.tiles.value, {
-        x: A.value.cxCell * h.value - e,
-        y: A.value.cyCell * T.value - t,
-        width: A.value.vw + h.value + 2 * e,
-        height: A.value.vh + T.value + 2 * t
+      return qe(v.value, s.api.tiles.value, {
+        x: N.value.cxCell * h.value - e,
+        y: N.value.cyCell * T.value - t,
+        width: N.value.vw + h.value + 2 * e,
+        height: N.value.vh + T.value + 2 * t
       });
     });
-    let S = null, z = !1;
-    function de(e) {
+    let I = null, S = !1;
+    function se(e) {
       var l;
       const t = !!e.target.closest("[data-griddle-tile]");
-      if (g.value && !t && D(/* @__PURE__ */ new Set()), !((l = d.value) != null && l.dragPan) || e.button !== 0) return;
-      const n = c.value.dragIgnoreFrom ?? Ge;
-      n && e.target.closest(n) || (S = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, moved: !1 });
+      if (w.value && !t && D(/* @__PURE__ */ new Set()), !((l = r.value) != null && l.dragPan) || e.button !== 0) return;
+      const n = v.value.dragIgnoreFrom ?? Ye;
+      n && e.target.closest(n) || (I = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, moved: !1 });
     }
-    function ue(e) {
-      z && (z = !1, e.preventDefault(), e.stopPropagation());
+    function de(e) {
+      S && (S = !1, e.preventDefault(), e.stopPropagation());
     }
-    const F = E(/* @__PURE__ */ new Set()), P = p(() => s.selection ?? F.value);
+    const E = H(/* @__PURE__ */ new Set()), R = p(() => s.selection ?? E.value);
     function D(e) {
-      s.selection || (F.value = e), w("selectionChange", e);
+      s.selection || (E.value = e), f("selectionChange", e);
     }
-    const k = new Be(s.api.grid), m = E(null);
-    let L = 0, he = 0;
-    const K = E(null);
-    function fe() {
+    const z = new Ge(s.api.grid), m = H(null);
+    let M = 0, pe = 0;
+    const B = H(null);
+    function ge() {
       s.api.tiles.value = s.api.grid.tiles, s.api.version.value++;
     }
-    function _(e) {
+    function A(e) {
       return e.kx === 0 && e.ky === 0;
     }
-    function ce(e) {
-      return g.value && !_(e);
+    function ue(e) {
+      return w.value && !A(e);
     }
-    function ae(e, t) {
-      if (!g.value || !_(t)) return;
+    function le(e, t) {
+      if (!w.value || !A(t)) return;
       const n = t.tile;
       if (n.draggable === !1 || e.target.dataset.griddleHandle) return;
-      const l = c.value.dragIgnoreFrom ?? Ge;
+      const l = v.value.dragIgnoreFrom ?? Ye;
       if (!(l && e.target.closest(l))) {
         if (e.metaKey || e.ctrlKey) {
           e.preventDefault();
-          const a = new Set(P.value);
+          const a = new Set(R.value);
           a.has(n.id) ? a.delete(n.id) : a.add(n.id), D(a), e.stopPropagation();
           return;
         }
-        D(/* @__PURE__ */ new Set([n.id])), k.start(n.id) && (L = e.clientX, he = e.clientY, m.value = {
+        D(/* @__PURE__ */ new Set([n.id])), z.start(n.id) && (M = e.clientX, pe = e.clientY, m.value = {
           tileId: n.id,
           instanceLeft: t.left,
           instanceTop: t.top,
@@ -95,16 +95,16 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
           deltaY: 0,
           indicatorCol: n.col,
           indicatorRow: n.row
-        }, w("dragStart", n.id), e.stopPropagation());
+        }, f("dragStart", n.id), e.stopPropagation());
       }
     }
-    function re(e, t, n) {
-      if (!g.value) return;
+    function ae(e, t, n) {
+      if (!w.value) return;
       const l = t.tile;
       if (l.resizable === !1) return;
       e.currentTarget.setPointerCapture(e.pointerId);
       const a = l.col * h.value + b.value, u = l.row * T.value + b.value;
-      K.value = {
+      B.value = {
         tileId: l.id,
         instanceKey: t.key,
         instanceDx: t.left - a,
@@ -120,48 +120,60 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
         previewH: l.h,
         previewCol: l.col,
         previewRow: l.row
-      }, w("resizeStart", l.id), e.stopPropagation();
+      }, f("resizeStart", l.id), e.stopPropagation();
     }
-    function Q(e) {
-      if (S && e.pointerId === S.pointerId) {
+    function j(e) {
+      if (I && e.pointerId === I.pointerId) {
         const l = performance.now();
-        S.moved ? N.dragMove(e.clientX, e.clientY, l) : Math.hypot(e.clientX - S.startX, e.clientY - S.startY) >= gt && (S.moved = !0, N.dragStart(S.startX, S.startY, l), N.dragMove(e.clientX, e.clientY, l));
+        I.moved ? $.dragMove(e.clientX, e.clientY, l) : Math.hypot(e.clientX - I.startX, e.clientY - I.startY) >= dt && (I.moved = !0, $.dragStart(I.startX, I.startY, l), $.dragMove(e.clientX, e.clientY, l));
         return;
       }
       const t = m.value;
       if (t) {
-        const l = e.clientX - L, a = e.clientY - he, u = {
+        const l = e.clientX - M, a = e.clientY - pe, u = {
           col: t.pickupCol + Math.round(l / h.value),
           row: t.pickupRow + Math.round(a / T.value)
-        }, r = k.update(u);
+        }, d = z.update(u);
         m.value = {
           ...t,
           deltaX: l,
           deltaY: a,
-          indicatorCol: r.indicatorCell ? r.indicatorCell.col : null,
-          indicatorRow: r.indicatorCell ? r.indicatorCell.row : null
-        }, r.changed && fe();
+          indicatorCol: d.indicatorCell ? d.indicatorCell.col : null,
+          indicatorRow: d.indicatorCell ? d.indicatorCell.row : null
+        }, d.changed && ge();
       }
-      const n = K.value;
+      const n = B.value;
       if (n) {
-        const l = e.clientX - n.startPointerX, a = e.clientY - n.startPointerY;
-        let u = 0, r = 0, v = 0, f = 0;
-        const C = Math.round(l / h.value), y = Math.round(a / T.value);
-        (n.corner === "se" || n.corner === "ne") && (u = C), (n.corner === "se" || n.corner === "sw") && (r = y), (n.corner === "sw" || n.corner === "nw") && (u = -C, v = C), (n.corner === "ne" || n.corner === "nw") && (r = -y, f = y);
-        const R = s.api.grid.getTile(n.tileId), ve = (R == null ? void 0 : R.minW) ?? 1, pe = (R == null ? void 0 : R.minH) ?? 1, X = Math.min((R == null ? void 0 : R.maxW) ?? 1 / 0, c.value.cols), Ee = Math.min((R == null ? void 0 : R.maxH) ?? 1 / 0, c.value.rows), xe = Math.min(X, Math.max(ve, n.startW + u)), ye = Math.min(Ee, Math.max(pe, n.startH + r)), be = n.startCol + v, ge = n.startRow + f;
-        (xe !== n.previewW || ye !== n.previewH || be !== n.previewCol || ge !== n.previewRow) && (K.value = { ...n, previewW: xe, previewH: ye, previewCol: be, previewRow: ge });
+        const l = e.clientX - n.startPointerX, a = e.clientY - n.startPointerY, u = Math.round(l / h.value), d = Math.round(a / T.value), c = s.api.grid.getTile(n.tileId), x = Ne({
+          corner: n.corner,
+          startCol: n.startCol,
+          startRow: n.startRow,
+          startW: n.startW,
+          startH: n.startH,
+          stepsX: u,
+          stepsY: d,
+          minW: (c == null ? void 0 : c.minW) ?? 1,
+          minH: (c == null ? void 0 : c.minH) ?? 1,
+          maxW: (c == null ? void 0 : c.maxW) ?? 1 / 0,
+          maxH: (c == null ? void 0 : c.maxH) ?? 1 / 0,
+          cols: v.value.cols,
+          rows: v.value.rows,
+          infiniteX: v.value.infiniteX ?? v.value.cols === 1 / 0,
+          infiniteY: v.value.infiniteY ?? v.value.rows === 1 / 0
+        }), P = x.w, g = x.h, F = x.col, ce = x.row;
+        (P !== n.previewW || g !== n.previewH || F !== n.previewCol || ce !== n.previewRow) && (B.value = { ...n, previewW: P, previewH: g, previewCol: F, previewRow: ce });
       }
     }
-    function Z(e) {
-      if (S && e.pointerId === S.pointerId) {
-        S.moved && (N.dragEnd(performance.now()), z = !0), S = null;
+    function Q(e) {
+      if (I && e.pointerId === I.pointerId) {
+        I.moved && ($.dragEnd(performance.now()), S = !0), I = null;
         return;
       }
       if (m.value) {
-        const n = m.value.tileId, { committed: l } = k.end();
-        m.value = null, fe(), w("dragEnd", n, l);
+        const n = m.value.tileId, { committed: l } = z.end();
+        m.value = null, ge(), f("dragEnd", n, l);
       }
-      const t = K.value;
+      const t = B.value;
       if (t) {
         const n = s.api.grid.getTile(t.tileId);
         let l = !1;
@@ -169,52 +181,52 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
           const a = { col: t.previewCol, row: t.previewRow };
           (a.col !== n.col || a.row !== n.row) && s.api.moveTile(t.tileId, a), t.previewW !== n.w || t.previewH !== n.h ? l = s.api.resizeTile(t.tileId, { w: t.previewW, h: t.previewH }) : l = t.previewCol !== t.startCol || t.previewRow !== t.startRow || t.previewW !== t.startW || t.previewH !== t.startH;
         }
-        K.value = null, w("resizeEnd", t.tileId, l);
+        B.value = null, f("resizeEnd", t.tileId, l);
       }
     }
-    function V(e) {
-      e.key === "Escape" && g.value && D(/* @__PURE__ */ new Set());
+    function U(e) {
+      e.key === "Escape" && w.value && D(/* @__PURE__ */ new Set());
     }
-    Ne(() => {
-      const e = B.value;
+    We(() => {
+      const e = O.value;
       if (e) {
-        e.addEventListener("wheel", q, { passive: !1 });
+        e.addEventListener("wheel", J, { passive: !1 });
         const t = () => {
-          const n = A.value;
-          (e.clientWidth !== n.vw || e.clientHeight !== n.vh) && (A.value = { ...n, vw: e.clientWidth, vh: e.clientHeight });
+          const n = N.value;
+          (e.clientWidth !== n.vw || e.clientHeight !== n.vh) && (N.value = { ...n, vw: e.clientWidth, vh: e.clientHeight });
         };
         t(), W = new ResizeObserver(t), W.observe(e);
       }
-      oe = requestAnimationFrame(j), window.addEventListener("pointermove", Q), window.addEventListener("pointerup", Z), window.addEventListener("pointercancel", Z), window.addEventListener("keydown", V);
-    }), Ae(() => {
+      ne = requestAnimationFrame(q), window.addEventListener("pointermove", j), window.addEventListener("pointerup", Q), window.addEventListener("pointercancel", Q), window.addEventListener("keydown", U);
+    }), De(() => {
       var e;
-      cancelAnimationFrame(oe), (e = B.value) == null || e.removeEventListener("wheel", q), W == null || W.disconnect(), window.removeEventListener("pointermove", Q), window.removeEventListener("pointerup", Z), window.removeEventListener("pointercancel", Z), window.removeEventListener("keydown", V);
+      cancelAnimationFrame(ne), (e = O.value) == null || e.removeEventListener("wheel", J), W == null || W.disconnect(), window.removeEventListener("pointermove", j), window.removeEventListener("pointerup", Q), window.removeEventListener("pointercancel", Q), window.removeEventListener("keydown", U);
     });
-    const ee = /* @__PURE__ */ new Map(), J = /* @__PURE__ */ new Map();
-    function ze(e, t) {
-      t ? ee.set(e, t) : ee.delete(e);
+    const Z = /* @__PURE__ */ new Map(), V = /* @__PURE__ */ new Map();
+    function be(e, t) {
+      t ? Z.set(e, t) : Z.delete(e);
     }
-    Me(() => s.api.version.value, async () => {
+    ze(() => s.api.version.value, async () => {
       var n;
-      await _e();
+      await Me();
       const e = ((n = m.value) == null ? void 0 : n.tileId) ?? null, t = /* @__PURE__ */ new Set();
-      for (const l of le.value) {
+      for (const l of oe.value) {
         const a = l.key;
         t.add(a);
-        const u = l.left, r = l.top;
-        if (g.value && l.tile.id !== e) {
-          const v = J.get(a), f = ee.get(a);
-          if (v && f) {
-            const C = v.x - u, y = v.y - r;
-            (C !== 0 || y !== 0) && Math.abs(C) < se.value.width / 2 && Math.abs(y) < se.value.height / 2 && Fe(f, C, y, c.value.animation);
+        const u = l.left, d = l.top;
+        if (w.value && l.tile.id !== e) {
+          const c = V.get(a), x = Z.get(a);
+          if (c && x) {
+            const P = c.x - u, g = c.y - d;
+            (P !== 0 || g !== 0) && Math.abs(P) < re.value.width / 2 && Math.abs(g) < re.value.height / 2 && $e(x, P, g, v.value.animation);
           }
         }
-        J.set(a, { x: u, y: r });
+        V.set(a, { x: u, y: d });
       }
-      for (const l of J.keys())
-        t.has(l) || J.delete(l);
+      for (const l of V.keys())
+        t.has(l) || V.delete(l);
     });
-    const Pe = p(() => {
+    const Ce = p(() => {
       var n;
       const t = s.showGrid !== !1 ? {
         backgroundImage: "linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)",
@@ -228,11 +240,11 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
         touchAction: "none",
         userSelect: "none",
         willChange: "translate",
-        cursor: !g.value && ((n = d.value) != null && n.dragPan) ? "grab" : void 0,
-        "--griddle-tile-radius": (c.value.tileRadius ?? 4) + "px",
+        cursor: !w.value && ((n = r.value) != null && n.dragPan) ? "grab" : void 0,
+        "--griddle-tile-radius": (v.value.tileRadius ?? 4) + "px",
         ...t
       };
-    }), ke = p(() => ({
+    }), Ie = p(() => ({
       position: "absolute",
       top: "0",
       left: "0",
@@ -240,39 +252,39 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
       height: "0",
       willChange: "transform"
     }));
-    function te(e) {
-      const t = K.value, n = (t == null ? void 0 : t.instanceKey) === e.key;
-      let l = e.left, a = e.top, u = e.width, r = e.height;
-      n && t && (l = t.previewCol * h.value + b.value + t.instanceDx, a = t.previewRow * T.value + b.value + t.instanceDy, u = t.previewW * c.value.unitWidth + (t.previewW - 1) * x.value, r = t.previewH * c.value.unitHeight + (t.previewH - 1) * x.value);
-      const v = ce(e), f = g.value && _(e) && P.value.has(e.tile.id);
+    function ee(e) {
+      const t = B.value, n = (t == null ? void 0 : t.instanceKey) === e.key;
+      let l = e.left, a = e.top, u = e.width, d = e.height;
+      n && t && (l = t.previewCol * h.value + b.value + t.instanceDx, a = t.previewRow * T.value + b.value + t.instanceDy, u = t.previewW * v.value.unitWidth + (t.previewW - 1) * y.value, d = t.previewH * v.value.unitHeight + (t.previewH - 1) * y.value);
+      const c = ue(e), x = w.value && A(e) && R.value.has(e.tile.id);
       return {
         position: "absolute",
         left: l + "px",
         top: a + "px",
         width: u + "px",
-        height: r + "px",
+        height: d + "px",
         boxSizing: "border-box",
-        cursor: g.value && _(e) ? "grab" : void 0,
+        cursor: w.value && A(e) ? "grab" : void 0,
         userSelect: "none",
         // Ghosts are display-only: pointer-transparent (so the gesture falls
         // through to drag-pan) and dimmed to mark the editable copy.
-        pointerEvents: v ? "none" : void 0,
+        pointerEvents: c ? "none" : void 0,
         zIndex: n ? 10 : 1,
-        opacity: n ? 0.85 : v ? 0.55 : 1,
-        boxShadow: f ? "0 0 0 3px rgba(59, 91, 219, 0.85), inset 0 0 0 1px rgba(59, 91, 219, 0.3)" : "",
-        borderRadius: (c.value.tileRadius ?? 4) + "px"
+        opacity: n ? 0.85 : c ? 0.55 : 1,
+        boxShadow: x ? "0 0 0 3px rgba(59, 91, 219, 0.85), inset 0 0 0 1px rgba(59, 91, 219, 0.3)" : "",
+        borderRadius: (v.value.tileRadius ?? 4) + "px"
       };
     }
-    const G = p(
+    const L = p(
       () => m.value ? s.api.grid.getTile(m.value.tileId) ?? null : null
-    ), He = p(() => {
-      const e = m.value, t = G.value;
+    ), Se = p(() => {
+      const e = m.value, t = L.value;
       return !e || !t ? {} : {
         position: "absolute",
         left: e.instanceLeft + "px",
         top: e.instanceTop + "px",
-        width: t.w * c.value.unitWidth + (t.w - 1) * x.value + "px",
-        height: t.h * c.value.unitHeight + (t.h - 1) * x.value + "px",
+        width: t.w * v.value.unitWidth + (t.w - 1) * y.value + "px",
+        height: t.h * v.value.unitHeight + (t.h - 1) * y.value + "px",
         boxSizing: "border-box",
         cursor: "grabbing",
         userSelect: "none",
@@ -280,22 +292,22 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
         opacity: 0.85,
         transform: `translate(${e.deltaX}px, ${e.deltaY}px)`,
         filter: "drop-shadow(0 8px 16px rgba(0,0,0,0.18))",
-        borderRadius: (c.value.tileRadius ?? 4) + "px",
+        borderRadius: (v.value.tileRadius ?? 4) + "px",
         pointerEvents: "none"
       };
-    }), ie = p(() => {
+    }), te = p(() => {
       const e = m.value;
       if (!e || e.indicatorCol === null || e.indicatorRow === null) return null;
       const t = s.api.grid.getTile(e.tileId);
       return t ? {
         left: e.indicatorCol * h.value + b.value,
         top: e.indicatorRow * T.value + b.value,
-        width: t.w * c.value.unitWidth + (t.w - 1) * x.value,
-        height: t.h * c.value.unitHeight + (t.h - 1) * x.value
+        width: t.w * v.value.unitWidth + (t.w - 1) * y.value,
+        height: t.h * v.value.unitHeight + (t.h - 1) * y.value
       } : null;
     });
-    function me(e) {
-      return e.resizeHandles ?? c.value.resizeHandles ?? ["se"];
+    function we(e) {
+      return e.resizeHandles ?? v.value.resizeHandles ?? ["se"];
     }
     function i(e) {
       const n = {
@@ -311,84 +323,84 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
       return e === "nw" ? { ...n, top: -12 / 2 + "px", left: -12 / 2 + "px" } : e === "ne" ? { ...n, top: -12 / 2 + "px", right: -12 / 2 + "px" } : e === "sw" ? { ...n, bottom: -12 / 2 + "px", left: -12 / 2 + "px" } : { ...n, bottom: -12 / 2 + "px", right: -12 / 2 + "px" };
     }
     const o = p(() => s.className ?? "");
-    return (e, t) => (H(), M("div", {
+    return (e, t) => (k(), X("div", {
       ref_key: "viewportEl",
-      ref: B,
-      class: Ie(o.value),
-      style: $(Pe.value),
-      onPointerdown: de,
-      onClickCapture: ue
+      ref: O,
+      class: xe(o.value),
+      style: G(Ce.value),
+      onPointerdown: se,
+      onClickCapture: de
     }, [
-      Oe("div", {
+      Le("div", {
         ref_key: "planeEl",
         ref: Y,
-        style: $(ke.value)
+        style: G(Ie.value)
       }, [
-        ie.value ? (H(), M("div", {
+        te.value ? (k(), X("div", {
           key: 0,
           class: "griddle-drop-indicator",
-          style: $({
+          style: G({
             position: "absolute",
-            left: ie.value.left + "px",
-            top: ie.value.top + "px",
-            width: ie.value.width + "px",
-            height: ie.value.height + "px",
+            left: te.value.left + "px",
+            top: te.value.top + "px",
+            width: te.value.width + "px",
+            height: te.value.height + "px",
             boxSizing: "border-box",
             border: "2px dashed rgba(59, 91, 219, 0.55)",
             background: "rgba(59, 91, 219, 0.08)",
-            borderRadius: (c.value.tileRadius ?? 4) + "px",
+            borderRadius: (v.value.tileRadius ?? 4) + "px",
             pointerEvents: "none",
             zIndex: 5
           })
-        }, null, 4)) : ne("", !0),
-        (H(!0), M(we, null, Se(le.value, (n) => {
+        }, null, 4)) : ie("", !0),
+        (k(!0), X(ve, null, me(oe.value, (n) => {
           var l;
-          return H(), M(we, {
+          return k(), X(ve, {
             key: n.key
           }, [
-            m.value && n.tile.id === m.value.tileId ? ne("", !0) : (H(), M("div", {
+            m.value && n.tile.id === m.value.tileId ? ie("", !0) : (k(), X("div", {
               key: 0,
               "data-griddle-tile": n.tile.id,
               "data-griddle-instance": n.key,
-              "data-griddle-ghost": ce(n) ? "" : void 0,
-              "aria-hidden": _(n) ? void 0 : !0,
-              class: Ie(["griddle-tile", {
-                "griddle-resizing": ((l = K.value) == null ? void 0 : l.instanceKey) === n.key,
-                "griddle-selected": g.value && _(n) && P.value.has(n.tile.id)
+              "data-griddle-ghost": ue(n) ? "" : void 0,
+              "aria-hidden": A(n) ? void 0 : !0,
+              class: xe(["griddle-tile", {
+                "griddle-resizing": ((l = B.value) == null ? void 0 : l.instanceKey) === n.key,
+                "griddle-selected": w.value && A(n) && R.value.has(n.tile.id)
               }]),
-              style: $(te(n)),
+              style: G(ee(n)),
               ref_for: !0,
-              ref: (a) => ze(n.key, a),
-              onPointerdown: (a) => ae(a, n)
+              ref: (a) => be(n.key, a),
+              onPointerdown: (a) => le(a, n)
             }, [
-              Re(e.$slots, "tile", {
+              ye(e.$slots, "tile", {
                 tile: n.tile,
-                selected: g.value && _(n) && P.value.has(n.tile.id)
+                selected: w.value && A(n) && R.value.has(n.tile.id)
               }),
-              g.value && _(n) && n.tile.resizable !== !1 ? (H(!0), M(we, { key: 0 }, Se(me(n.tile), (a) => (H(), M("div", {
+              w.value && A(n) && n.tile.resizable !== !1 ? (k(!0), X(ve, { key: 0 }, me(we(n.tile), (a) => (k(), X("div", {
                 key: a,
                 "data-griddle-handle": a,
-                style: $(i(a)),
-                onPointerdown: (u) => re(u, n, a)
-              }, null, 44, vt))), 128)) : ne("", !0)
-            ], 46, ct))
+                style: G(i(a)),
+                onPointerdown: (u) => ae(u, n, a)
+              }, null, 44, rt))), 128)) : ie("", !0)
+            ], 46, at))
           ], 64);
         }), 128)),
-        m.value && G.value ? (H(), M("div", {
+        m.value && L.value ? (k(), X("div", {
           key: 1,
-          "data-griddle-tile": G.value.id,
+          "data-griddle-tile": L.value.id,
           class: "griddle-tile griddle-dragging",
-          style: $(He.value)
+          style: G(Se.value)
         }, [
-          Re(e.$slots, "tile", {
-            tile: G.value,
-            selected: P.value.has(G.value.id)
+          ye(e.$slots, "tile", {
+            tile: L.value,
+            selected: R.value.has(L.value.id)
           })
-        ], 12, pt)) : ne("", !0)
+        ], 12, st)) : ie("", !0)
       ], 4)
     ], 38));
   }
-}), ht = ["data-griddle-tile", "onPointerdown"], ft = ["data-griddle-handle", "onPointerdown"], mt = "a, button, input, textarea, select, [contenteditable]", xt = 12, St = /* @__PURE__ */ $e({
+}), ct = ["data-griddle-tile", "onPointerdown"], vt = ["data-griddle-handle", "onPointerdown"], pt = "a, button, input, textarea, select, [contenteditable]", gt = 12, mt = /* @__PURE__ */ Te({
   __name: "GriddleGrid",
   props: {
     api: {},
@@ -398,44 +410,44 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
     selection: {}
   },
   emits: ["selectionChange", "drawCreate", "dragStart", "dragEnd", "resizeStart", "resizeEnd", "cameraChange"],
-  setup(O, { emit: I }) {
-    const s = O, w = I, B = p(() => {
+  setup(_, { emit: C }) {
+    const s = _, f = C, O = p(() => {
       var i;
       return ((i = s.api.config.value.loop) == null ? void 0 : i.enabled) === !0;
-    }), Y = E(null), c = E({ scrollX: 0, scrollY: 0, width: 1e3, height: 800 }), d = p(() => s.api.config.value), g = p(() => d.value.gap ?? 0), x = p(() => g.value / 2), b = p(() => d.value.unitWidth + g.value), h = p(() => d.value.unitHeight + g.value), T = p(() => it(d.value, c.value, 4)), se = p(() => nt(s.api.tiles.value, T.value)), N = p(() => ot(d.value, s.api.tiles.value)), A = p(() => {
-      const i = d.value.scroll !== "none", o = {
+    }), Y = H(null), v = H({ scrollX: 0, scrollY: 0, width: 1e3, height: 800 }), r = p(() => s.api.config.value), w = p(() => r.value.gap ?? 0), y = p(() => w.value / 2), b = p(() => r.value.unitWidth + w.value), h = p(() => r.value.unitHeight + w.value), T = p(() => je(r.value, v.value, 4)), re = p(() => Qe(s.api.tiles.value, T.value)), $ = p(() => Ze(r.value, s.api.tiles.value)), N = p(() => {
+      const i = r.value.scroll !== "none", o = {
         position: "relative",
         overflow: i ? "auto" : "visible",
         height: i ? s.height ?? "100%" : s.height ?? "auto"
       };
       return i && (o.touchAction = "none"), o;
-    }), U = p(() => {
+    }), K = p(() => {
       const o = s.showGrid !== !1 ? {
         backgroundImage: "linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)",
         backgroundSize: `${b.value}px ${h.value}px`
       } : {};
       return {
         position: "relative",
-        width: N.value.width || "100%",
-        height: N.value.height || "100%",
+        width: $.value.width || "100%",
+        height: $.value.height || "100%",
         minWidth: "100%",
         minHeight: "100%",
         // Expose tile radius as a CSS variable so user tile content can pick it up.
-        "--griddle-tile-radius": (d.value.tileRadius ?? 4) + "px",
+        "--griddle-tile-radius": (r.value.tileRadius ?? 4) + "px",
         ...o
       };
-    }), oe = E(/* @__PURE__ */ new Set()), W = p(() => s.selection ?? oe.value), q = p(() => {
+    }), ne = H(/* @__PURE__ */ new Set()), W = p(() => s.selection ?? ne.value), J = p(() => {
       var i;
-      return new Set(((i = P.value) == null ? void 0 : i.tileIds) ?? []);
+      return new Set(((i = R.value) == null ? void 0 : i.tileIds) ?? []);
     });
-    function j(i) {
-      s.selection || (oe.value = i), w("selectionChange", i);
+    function q(i) {
+      s.selection || (ne.value = i), f("selectionChange", i);
     }
-    const le = new Be(s.api.grid), S = new lt(s.api.grid), z = E(null);
-    let de = 0, ue = 0, F = { x: 1, y: 1 };
-    const P = E(null), D = E(null), k = E(null), m = E(null);
-    let L = null;
-    function he(i) {
+    const oe = new Ge(s.api.grid), I = new et(s.api.grid), S = H(null);
+    let se = 0, de = 0, E = { x: 1, y: 1 };
+    const R = H(null), D = H(null), z = H(null), m = H(null);
+    let M = null;
+    function pe(i) {
       const o = s.api.grid.getTile(i.tileId);
       if (!o) return !1;
       try {
@@ -443,29 +455,29 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
       } catch {
         return !1;
       }
-      if (de = i.startPointerX, ue = i.startPointerY, F = Le(Y.value), i.mode === "pin") {
-        const e = De({
+      if (se = i.startPointerX, de = i.startPointerY, E = Re(Y.value), i.mode === "pin") {
+        const e = Ee({
           tile: o,
-          config: d.value,
-          scrollX: c.value.scrollX,
-          scrollY: c.value.scrollY,
-          viewportWidth: c.value.width,
-          viewportHeight: c.value.height
-        }), t = o.position === "fixed" ? { x: e.left - c.value.scrollX, y: e.top - c.value.scrollY } : { x: e.left, y: e.top };
+          config: r.value,
+          scrollX: v.value.scrollX,
+          scrollY: v.value.scrollY,
+          viewportWidth: v.value.width,
+          viewportHeight: v.value.height
+        }), t = o.position === "fixed" ? { x: e.left - v.value.scrollX, y: e.top - v.value.scrollY } : { x: e.left, y: e.top };
         return D.value = {
           tileId: o.id,
           startPinPx: t,
           startPointerX: i.startPointerX,
           startPointerY: i.startPointerY
-        }, w("dragStart", o.id), !0;
+        }, f("dragStart", o.id), !0;
       }
-      return i.mode === "group" ? S.start(i.groupTileIds) ? (P.value = {
+      return i.mode === "group" ? I.start(i.groupTileIds) ? (R.value = {
         tileIds: i.groupTileIds,
         deltaX: 0,
         deltaY: 0,
         committedDcol: 0,
         committedDrow: 0
-      }, w("dragStart", o.id), !0) : !1 : le.start(o.id) ? (z.value = {
+      }, f("dragStart", o.id), !0) : !1 : oe.start(o.id) ? (S.value = {
         tileId: o.id,
         pickupCol: o.col,
         pickupRow: o.row,
@@ -473,15 +485,15 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
         deltaY: 0,
         indicatorCol: o.col,
         indicatorRow: o.row
-      }, w("dragStart", o.id), !0) : !1;
+      }, f("dragStart", o.id), !0) : !1;
     }
-    function K(i, o) {
+    function B(i, o) {
       if (i.button !== 0 || o.draggable === !1 || i.target.dataset.griddleHandle) return;
-      const e = d.value.dragIgnoreFrom ?? mt;
+      const e = r.value.dragIgnoreFrom ?? pt;
       if (e && i.target.closest(e)) return;
       const t = i.metaKey || i.ctrlKey;
-      if (d.value.enablePositioning && rt(o)) {
-        L = {
+      if (r.value.enablePositioning && it(o)) {
+        M = {
           pointerId: i.pointerId,
           tileId: o.id,
           tileElement: i.currentTarget,
@@ -495,13 +507,13 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
       if (t) {
         i.preventDefault();
         const u = new Set(W.value);
-        u.has(o.id) ? u.delete(o.id) : u.add(o.id), j(u), i.stopPropagation();
+        u.has(o.id) ? u.delete(o.id) : u.add(o.id), q(u), i.stopPropagation();
         return;
       }
       const n = W.value.has(o.id);
-      n || j(/* @__PURE__ */ new Set([o.id]));
+      n || q(/* @__PURE__ */ new Set([o.id]));
       const l = n ? W.value : /* @__PURE__ */ new Set([o.id]), a = Array.from(l);
-      L = {
+      M = {
         pointerId: i.pointerId,
         tileId: o.id,
         tileElement: i.currentTarget,
@@ -511,17 +523,26 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
         groupTileIds: a
       }, i.stopPropagation();
     }
-    function fe(i) {
+    function ge(i) {
       var u;
-      if (i.target.closest("[data-griddle-tile]") || ((u = d.value.interactive) == null ? void 0 : u.drawToCreate) === !1) return;
-      j(/* @__PURE__ */ new Set());
+      if (i.target.closest("[data-griddle-tile]") || ((u = r.value.interactive) == null ? void 0 : u.drawToCreate) === !1) return;
+      q(/* @__PURE__ */ new Set());
       const o = Y.value;
       if (!o) return;
-      const e = o.getBoundingClientRect(), t = i.clientX - e.left + o.scrollLeft, n = i.clientY - e.top + o.scrollTop, l = Math.floor(t / b.value), a = Math.floor(n / h.value);
+      E = Re(o);
+      const e = o.getBoundingClientRect(), t = (i.clientX - e.left) / E.x + o.scrollLeft, n = (i.clientY - e.top) / E.y + o.scrollTop, l = fe(
+        Math.floor(t / b.value),
+        r.value.cols,
+        r.value.infiniteX ?? r.value.cols === 1 / 0
+      ), a = fe(
+        Math.floor(n / h.value),
+        r.value.rows,
+        r.value.infiniteY ?? r.value.rows === 1 / 0
+      );
       m.value = { anchorCol: l, anchorRow: a, currentCol: l, currentRow: a }, o.setPointerCapture(i.pointerId);
     }
-    function _(i, o, e) {
-      o.resizable !== !1 && (i.currentTarget.setPointerCapture(i.pointerId), F = Le(Y.value), k.value = {
+    function A(i, o, e) {
+      o.resizable !== !1 && (i.currentTarget.setPointerCapture(i.pointerId), E = Re(Y.value), z.value = {
         tileId: o.id,
         corner: e,
         startPointerX: i.clientX,
@@ -534,207 +555,227 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
         previewH: o.h,
         previewCol: o.col,
         previewRow: o.row
-      }, w("resizeStart", o.id), i.stopPropagation());
+      }, f("resizeStart", o.id), i.stopPropagation());
     }
-    function ce(i) {
+    function ue(i) {
       var a, u;
       if (m.value) {
-        const r = Y.value;
-        if (r) {
-          const v = r.getBoundingClientRect(), f = i.clientX - v.left + r.scrollLeft, C = i.clientY - v.top + r.scrollTop, y = Math.max(0, Math.floor(f / b.value)), R = Math.max(0, Math.floor(C / h.value));
-          m.value = { ...m.value, currentCol: y, currentRow: R };
+        const d = Y.value;
+        if (d) {
+          const c = d.getBoundingClientRect(), x = (i.clientX - c.left) / E.x + d.scrollLeft, P = (i.clientY - c.top) / E.y + d.scrollTop, g = fe(
+            Math.floor(x / b.value),
+            r.value.cols,
+            r.value.infiniteX ?? r.value.cols === 1 / 0
+          ), F = fe(
+            Math.floor(P / h.value),
+            r.value.rows,
+            r.value.infiniteY ?? r.value.rows === 1 / 0
+          );
+          m.value = { ...m.value, currentCol: g, currentRow: F };
         }
         return;
       }
-      const o = L;
+      const o = M;
       if (o && i.pointerId === o.pointerId) {
         if (Math.hypot(
           i.clientX - o.startPointerX,
           i.clientY - o.startPointerY
-        ) <= xt || (L = null, !he(o))) return;
+        ) <= gt || (M = null, !pe(o))) return;
         i.preventDefault();
       }
-      const e = D.value, t = P.value, n = z.value, l = k.value;
+      const e = D.value, t = R.value, n = S.value, l = z.value;
       if (e) {
-        const { dx: r, dy: v } = Ce(
+        const { dx: d, dy: c } = he(
           i.clientX - e.startPointerX,
           i.clientY - e.startPointerY,
-          F
-        ), f = { x: e.startPinPx.x + r, y: e.startPinPx.y + v }, C = st(f, d.value);
-        s.api.grid.setTilePinned(e.tileId, C);
+          E
+        ), x = { x: e.startPinPx.x + d, y: e.startPinPx.y + c }, P = nt(x, r.value);
+        s.api.grid.setTilePinned(e.tileId, P);
       }
       if (t) {
-        const { dx: r, dy: v } = Ce(
-          i.clientX - de,
-          i.clientY - ue,
-          F
-        ), f = Math.round(r / b.value), C = Math.round(v / h.value), y = S.update({ dcol: f, drow: C });
-        P.value = {
+        const { dx: d, dy: c } = he(
+          i.clientX - se,
+          i.clientY - de,
+          E
+        ), x = Math.round(d / b.value), P = Math.round(c / h.value), g = I.update({ dcol: x, drow: P });
+        R.value = {
           ...t,
-          deltaX: r,
-          deltaY: v,
-          committedDcol: ((a = y.indicatorDelta) == null ? void 0 : a.dcol) ?? t.committedDcol,
-          committedDrow: ((u = y.indicatorDelta) == null ? void 0 : u.drow) ?? t.committedDrow
-        }, y.changed && ae();
+          deltaX: d,
+          deltaY: c,
+          committedDcol: ((a = g.indicatorDelta) == null ? void 0 : a.dcol) ?? t.committedDcol,
+          committedDrow: ((u = g.indicatorDelta) == null ? void 0 : u.drow) ?? t.committedDrow
+        }, g.changed && le();
       }
       if (n) {
-        const { dx: r, dy: v } = Ce(
-          i.clientX - de,
-          i.clientY - ue,
-          F
-        ), f = n.pickupCol + Math.round(r / b.value), C = n.pickupRow + Math.round(v / h.value), y = le.update({ col: f, row: C });
-        z.value = {
+        const { dx: d, dy: c } = he(
+          i.clientX - se,
+          i.clientY - de,
+          E
+        ), x = n.pickupCol + Math.round(d / b.value), P = n.pickupRow + Math.round(c / h.value), g = oe.update({ col: x, row: P });
+        S.value = {
           ...n,
-          deltaX: r,
-          deltaY: v,
-          indicatorCol: y.indicatorCell ? y.indicatorCell.col : null,
-          indicatorRow: y.indicatorCell ? y.indicatorCell.row : null
-        }, y.changed && ae();
+          deltaX: d,
+          deltaY: c,
+          indicatorCol: g.indicatorCell ? g.indicatorCell.col : null,
+          indicatorRow: g.indicatorCell ? g.indicatorCell.row : null
+        }, g.changed && le();
       }
       if (l) {
-        const { dx: r, dy: v } = Ce(
+        const { dx: d, dy: c } = he(
           i.clientX - l.startPointerX,
           i.clientY - l.startPointerY,
-          F
-        );
-        let f = 0, C = 0, y = 0, R = 0;
-        const ve = Math.round(r / b.value), pe = Math.round(v / h.value);
-        (l.corner === "se" || l.corner === "ne") && (f = ve), (l.corner === "se" || l.corner === "sw") && (C = pe), (l.corner === "sw" || l.corner === "nw") && (f = -ve, y = ve), (l.corner === "ne" || l.corner === "nw") && (C = -pe, R = pe);
-        const X = s.api.grid.getTile(l.tileId), Ee = (X == null ? void 0 : X.minW) ?? 1, xe = (X == null ? void 0 : X.minH) ?? 1, ye = (X == null ? void 0 : X.maxW) ?? 1 / 0, be = (X == null ? void 0 : X.maxH) ?? 1 / 0, ge = Math.min(ye, Math.max(Ee, l.startW + f)), Xe = Math.min(be, Math.max(xe, l.startH + C)), Ye = l.startCol + y, Te = l.startRow + R;
-        (ge !== l.previewW || Xe !== l.previewH || Ye !== l.previewCol || Te !== l.previewRow) && (k.value = { ...l, previewW: ge, previewH: Xe, previewCol: Ye, previewRow: Te });
+          E
+        ), x = Math.round(d / b.value), P = Math.round(c / h.value), g = s.api.grid.getTile(l.tileId), F = Ne({
+          corner: l.corner,
+          startCol: l.startCol,
+          startRow: l.startRow,
+          startW: l.startW,
+          startH: l.startH,
+          stepsX: x,
+          stepsY: P,
+          minW: (g == null ? void 0 : g.minW) ?? 1,
+          minH: (g == null ? void 0 : g.minH) ?? 1,
+          maxW: (g == null ? void 0 : g.maxW) ?? 1 / 0,
+          maxH: (g == null ? void 0 : g.maxH) ?? 1 / 0,
+          cols: r.value.cols,
+          rows: r.value.rows,
+          infiniteX: r.value.infiniteX ?? r.value.cols === 1 / 0,
+          infiniteY: r.value.infiniteY ?? r.value.rows === 1 / 0
+        }), ce = F.w, Pe = F.h, ke = F.col, He = F.row;
+        (ce !== l.previewW || Pe !== l.previewH || ke !== l.previewCol || He !== l.previewRow) && (z.value = { ...l, previewW: ce, previewH: Pe, previewCol: ke, previewRow: He });
       }
     }
-    function ae() {
+    function le() {
       s.api.tiles.value = s.api.grid.tiles, s.api.version.value++;
     }
-    function re(i) {
-      if ((L == null ? void 0 : L.pointerId) === i.pointerId) {
-        L = null;
+    function ae(i) {
+      if ((M == null ? void 0 : M.pointerId) === i.pointerId) {
+        M = null;
         return;
       }
       if (m.value) {
         const e = m.value, t = Math.min(e.anchorCol, e.currentCol), n = Math.min(e.anchorRow, e.currentRow), l = Math.max(1, Math.abs(e.currentCol - e.anchorCol) + 1), a = Math.max(1, Math.abs(e.currentRow - e.anchorRow) + 1);
-        m.value = null, w("drawCreate", { col: t, row: n, w: l, h: a });
+        m.value = null, f("drawCreate", { col: t, row: n, w: l, h: a });
         return;
       }
       if (D.value) {
         const e = D.value.tileId;
-        D.value = null, w("dragEnd", e, !0);
+        D.value = null, f("dragEnd", e, !0);
       }
-      if (P.value) {
-        const e = P.value.tileIds, { committed: t } = S.end();
-        P.value = null, ae();
+      if (R.value) {
+        const e = R.value.tileIds, { committed: t } = I.end();
+        R.value = null, le();
         const n = e[0];
-        n !== void 0 && w("dragEnd", n, t);
+        n !== void 0 && f("dragEnd", n, t);
       }
-      if (z.value) {
-        const e = z.value.tileId, { committed: t } = le.end();
-        z.value = null, ae(), w("dragEnd", e, t);
+      if (S.value) {
+        const e = S.value.tileId, { committed: t } = oe.end();
+        S.value = null, le(), f("dragEnd", e, t);
       }
-      const o = k.value;
+      const o = z.value;
       if (o) {
         const e = s.api.grid.getTile(o.tileId);
         let t = !1;
-        e && ((o.previewCol !== e.col || o.previewRow !== e.row) && s.api.moveTile(o.tileId, { col: o.previewCol, row: o.previewRow }), o.previewW !== e.w || o.previewH !== e.h ? t = s.api.resizeTile(o.tileId, { w: o.previewW, h: o.previewH }) : t = o.previewCol !== o.startCol || o.previewRow !== o.startRow || o.previewW !== o.startW || o.previewH !== o.startH), k.value = null, w("resizeEnd", o.tileId, t);
+        e && ((o.previewCol !== e.col || o.previewRow !== e.row) && s.api.moveTile(o.tileId, { col: o.previewCol, row: o.previewRow }), o.previewW !== e.w || o.previewH !== e.h ? t = s.api.resizeTile(o.tileId, { w: o.previewW, h: o.previewH }) : t = o.previewCol !== o.startCol || o.previewRow !== o.startRow || o.previewW !== o.startW || o.previewH !== o.startH), z.value = null, f("resizeEnd", o.tileId, t);
       }
     }
-    function Q() {
+    function j() {
       const i = Y.value;
-      i && (c.value = {
+      i && (v.value = {
         scrollX: i.scrollLeft,
         scrollY: i.scrollTop,
         width: i.clientWidth,
         height: i.clientHeight
       });
     }
-    function Z(i) {
-      i.key === "Escape" && j(/* @__PURE__ */ new Set());
+    function Q(i) {
+      i.key === "Escape" && q(/* @__PURE__ */ new Set());
     }
-    let V = null;
-    Ne(() => {
-      Q();
+    let U = null;
+    We(() => {
+      j();
       const i = Y.value;
-      i && (i.addEventListener("scroll", Q, { passive: !0 }), V = new ResizeObserver(Q), V.observe(i)), window.addEventListener("pointermove", ce), window.addEventListener("pointerup", re), window.addEventListener("pointercancel", re), window.addEventListener("keydown", Z);
-    }), Ae(() => {
-      L = null;
+      i && (i.addEventListener("scroll", j, { passive: !0 }), U = new ResizeObserver(j), U.observe(i)), window.addEventListener("pointermove", ue), window.addEventListener("pointerup", ae), window.addEventListener("pointercancel", ae), window.addEventListener("keydown", Q);
+    }), De(() => {
+      M = null;
       const i = Y.value;
-      i && i.removeEventListener("scroll", Q), V == null || V.disconnect(), window.removeEventListener("pointermove", ce), window.removeEventListener("pointerup", re), window.removeEventListener("pointercancel", re), window.removeEventListener("keydown", Z);
+      i && i.removeEventListener("scroll", j), U == null || U.disconnect(), window.removeEventListener("pointermove", ue), window.removeEventListener("pointerup", ae), window.removeEventListener("pointercancel", ae), window.removeEventListener("keydown", Q);
     });
-    const ee = /* @__PURE__ */ new Map(), J = /* @__PURE__ */ new Map();
-    function ze(i, o) {
-      o ? ee.set(i, o) : ee.delete(i);
+    const Z = /* @__PURE__ */ new Map(), V = /* @__PURE__ */ new Map();
+    function be(i, o) {
+      o ? Z.set(i, o) : Z.delete(i);
     }
-    Me(() => s.api.version.value, async () => {
+    ze(() => s.api.version.value, async () => {
       var e;
-      await _e();
-      const i = ((e = z.value) == null ? void 0 : e.tileId) ?? null, o = q.value;
+      await Me();
+      const i = ((e = S.value) == null ? void 0 : e.tileId) ?? null, o = J.value;
       for (const t of s.api.tiles.value) {
-        const n = t.col * b.value + x.value, l = t.row * h.value + x.value;
+        const n = t.col * b.value + y.value, l = t.row * h.value + y.value;
         if (t.id === i || o.has(t.id)) {
-          J.set(t.id, { x: n, y: l });
+          V.set(t.id, { x: n, y: l });
           continue;
         }
-        const a = J.get(t.id), u = ee.get(t.id);
+        const a = V.get(t.id), u = Z.get(t.id);
         if (a && u) {
-          const r = a.x - n, v = a.y - l;
-          (r !== 0 || v !== 0) && Fe(u, r, v, d.value.animation);
+          const d = a.x - n, c = a.y - l;
+          (d !== 0 || c !== 0) && $e(u, d, c, r.value.animation);
         }
-        J.set(t.id, { x: n, y: l });
+        V.set(t.id, { x: n, y: l });
       }
     });
-    const Pe = p(() => {
+    const Ce = p(() => {
       var n, l;
-      const i = /* @__PURE__ */ new Map(), o = [], e = P.value, t = q.value;
-      for (const a of se.value) {
+      const i = /* @__PURE__ */ new Map(), o = [], e = R.value, t = J.value;
+      for (const a of re.value) {
         let u;
-        if (((n = k.value) == null ? void 0 : n.tileId) === a.id) {
-          const r = k.value.previewW, v = k.value.previewH;
+        if (((n = z.value) == null ? void 0 : n.tileId) === a.id) {
+          const d = z.value.previewW, c = z.value.previewH;
           u = {
-            left: k.value.previewCol * b.value + x.value,
-            top: k.value.previewRow * h.value + x.value,
-            width: r * d.value.unitWidth + (r - 1) * g.value,
-            height: v * d.value.unitHeight + (v - 1) * g.value,
+            left: z.value.previewCol * b.value + y.value,
+            top: z.value.previewRow * h.value + y.value,
+            width: d * r.value.unitWidth + (d - 1) * w.value,
+            height: c * r.value.unitHeight + (c - 1) * w.value,
             zIndex: 10,
             effective: "static"
           };
-        } else if (((l = z.value) == null ? void 0 : l.tileId) === a.id) {
-          const r = z.value;
+        } else if (((l = S.value) == null ? void 0 : l.tileId) === a.id) {
+          const d = S.value;
           u = {
-            left: r.pickupCol * b.value + x.value,
-            top: r.pickupRow * h.value + x.value,
-            width: a.w * d.value.unitWidth + (a.w - 1) * g.value,
-            height: a.h * d.value.unitHeight + (a.h - 1) * g.value,
-            transform: `translate(${r.deltaX}px, ${r.deltaY}px)`,
+            left: d.pickupCol * b.value + y.value,
+            top: d.pickupRow * h.value + y.value,
+            width: a.w * r.value.unitWidth + (a.w - 1) * w.value,
+            height: a.h * r.value.unitHeight + (a.h - 1) * w.value,
+            transform: `translate(${d.deltaX}px, ${d.deltaY}px)`,
             zIndex: 20,
             effective: "static"
           };
         } else if (e && t.has(a.id)) {
-          const r = S.pickupCell(a.id), v = (r ? r.col * b.value : a.col * b.value) + x.value, f = (r ? r.row * h.value : a.row * h.value) + x.value;
+          const d = I.pickupCell(a.id), c = (d ? d.col * b.value : a.col * b.value) + y.value, x = (d ? d.row * h.value : a.row * h.value) + y.value;
           u = {
-            left: v,
-            top: f,
-            width: a.w * d.value.unitWidth + (a.w - 1) * g.value,
-            height: a.h * d.value.unitHeight + (a.h - 1) * g.value,
+            left: c,
+            top: x,
+            width: a.w * r.value.unitWidth + (a.w - 1) * w.value,
+            height: a.h * r.value.unitHeight + (a.h - 1) * w.value,
             transform: `translate(${e.deltaX}px, ${e.deltaY}px)`,
             zIndex: 20,
             effective: "static"
           };
         } else
-          u = De({
+          u = Ee({
             tile: a,
-            config: d.value,
-            scrollX: c.value.scrollX,
-            scrollY: c.value.scrollY,
-            viewportWidth: c.value.width,
-            viewportHeight: c.value.height
+            config: r.value,
+            scrollX: v.value.scrollX,
+            scrollY: v.value.scrollY,
+            viewportWidth: v.value.width,
+            viewportHeight: v.value.height
           }), u.effective === "sticky" && o.push({ tile: a, layout: u });
         i.set(a.id, u);
       }
-      return o.length > 1 && at(o), i;
+      return o.length > 1 && tt(o), i;
     });
-    function ke(i) {
-      var r, v, f;
-      const o = ((r = z.value) == null ? void 0 : r.tileId) === i.id, e = q.value.has(i.id) && P.value !== null, t = ((v = D.value) == null ? void 0 : v.tileId) === i.id, n = ((f = k.value) == null ? void 0 : f.tileId) === i.id, l = W.value.has(i.id), a = Pe.value.get(i.id) ?? {
+    function Ie(i) {
+      var d, c, x;
+      const o = ((d = S.value) == null ? void 0 : d.tileId) === i.id, e = J.value.has(i.id) && R.value !== null, t = ((c = D.value) == null ? void 0 : c.tileId) === i.id, n = ((x = z.value) == null ? void 0 : x.tileId) === i.id, l = W.value.has(i.id), a = Ce.value.get(i.id) ?? {
         left: 0,
         top: 0,
         width: 0,
@@ -755,37 +796,37 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
         willChange: "transform, translate",
         transform: a.transform ?? "",
         filter: u ? "drop-shadow(0 8px 16px rgba(0,0,0,0.18))" : "",
-        transition: u ? ut(d.value.animation) : "",
+        transition: u ? lt(r.value.animation) : "",
         boxShadow: l ? "0 0 0 3px rgba(59, 91, 219, 0.85), inset 0 0 0 1px rgba(59, 91, 219, 0.3)" : "",
-        borderRadius: (d.value.tileRadius ?? 4) + "px"
+        borderRadius: (r.value.tileRadius ?? 4) + "px"
       };
     }
-    const te = p(() => {
-      const i = z.value;
+    const ee = p(() => {
+      const i = S.value;
       if (!i || i.indicatorCol === null || i.indicatorRow === null) return null;
       const o = s.api.grid.getTile(i.tileId);
       return o ? {
-        left: i.indicatorCol * b.value + x.value,
-        top: i.indicatorRow * h.value + x.value,
-        width: o.w * d.value.unitWidth + (o.w - 1) * g.value,
-        height: o.h * d.value.unitHeight + (o.h - 1) * g.value
+        left: i.indicatorCol * b.value + y.value,
+        top: i.indicatorRow * h.value + y.value,
+        width: o.w * r.value.unitWidth + (o.w - 1) * w.value,
+        height: o.h * r.value.unitHeight + (o.h - 1) * w.value
       } : null;
-    }), G = p(() => {
+    }), L = p(() => {
       const i = m.value;
       if (!i) return null;
       const o = Math.min(i.anchorCol, i.currentCol), e = Math.min(i.anchorRow, i.currentRow), t = Math.max(1, Math.abs(i.currentCol - i.anchorCol) + 1), n = Math.max(1, Math.abs(i.currentRow - i.anchorRow) + 1);
       return {
-        left: o * b.value + x.value,
-        top: e * h.value + x.value,
-        width: t * d.value.unitWidth + (t - 1) * g.value,
-        height: n * d.value.unitHeight + (n - 1) * g.value,
+        left: o * b.value + y.value,
+        top: e * h.value + y.value,
+        width: t * r.value.unitWidth + (t - 1) * w.value,
+        height: n * r.value.unitHeight + (n - 1) * w.value,
         label: `${t}×${n}`
       };
     });
-    function He(i) {
-      return i.resizeHandles ?? d.value.resizeHandles ?? ["se"];
+    function Se(i) {
+      return i.resizeHandles ?? r.value.resizeHandles ?? ["se"];
     }
-    function ie(i) {
+    function te(i) {
       const e = {
         position: "absolute",
         width: "12px",
@@ -798,66 +839,66 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
       };
       return i === "nw" ? { ...e, top: -12 / 2 + "px", left: -12 / 2 + "px" } : i === "ne" ? { ...e, top: -12 / 2 + "px", right: -12 / 2 + "px" } : i === "sw" ? { ...e, bottom: -12 / 2 + "px", left: -12 / 2 + "px" } : { ...e, bottom: -12 / 2 + "px", right: -12 / 2 + "px" };
     }
-    const me = p(() => s.className ?? "");
-    return (i, o) => B.value ? (H(), Ke(wt, {
+    const we = p(() => s.className ?? "");
+    return (i, o) => O.value ? (k(), Ae(ut, {
       key: 0,
-      api: O.api,
-      "class-name": me.value,
-      height: O.height,
-      "show-grid": O.showGrid,
+      api: _.api,
+      "class-name": we.value,
+      height: _.height,
+      "show-grid": _.showGrid,
       selection: s.selection,
-      onSelectionChange: o[0] || (o[0] = (e) => w("selectionChange", e)),
-      onDragStart: o[1] || (o[1] = (e) => w("dragStart", e)),
-      onDragEnd: o[2] || (o[2] = (e, t) => w("dragEnd", e, t)),
-      onResizeStart: o[3] || (o[3] = (e) => w("resizeStart", e)),
-      onResizeEnd: o[4] || (o[4] = (e, t) => w("resizeEnd", e, t)),
-      onCameraChange: o[5] || (o[5] = (e) => w("cameraChange", e))
+      onSelectionChange: o[0] || (o[0] = (e) => f("selectionChange", e)),
+      onDragStart: o[1] || (o[1] = (e) => f("dragStart", e)),
+      onDragEnd: o[2] || (o[2] = (e, t) => f("dragEnd", e, t)),
+      onResizeStart: o[3] || (o[3] = (e) => f("resizeStart", e)),
+      onResizeEnd: o[4] || (o[4] = (e, t) => f("resizeEnd", e, t)),
+      onCameraChange: o[5] || (o[5] = (e) => f("cameraChange", e))
     }, {
-      tile: Ue((e) => [
-        Re(i.$slots, "tile", Ve(Je(e)))
+      tile: _e((e) => [
+        ye(i.$slots, "tile", Oe(Be(e)))
       ]),
       _: 3
-    }, 8, ["api", "class-name", "height", "show-grid", "selection"])) : (H(), M("div", {
+    }, 8, ["api", "class-name", "height", "show-grid", "selection"])) : (k(), X("div", {
       key: 1,
       ref_key: "scrollEl",
       ref: Y,
-      class: Ie(me.value),
-      style: $(A.value),
-      onPointerdown: fe
+      class: xe(we.value),
+      style: G(N.value),
+      onPointerdown: ge
     }, [
-      Oe("div", {
-        style: $(U.value)
+      Le("div", {
+        style: G(K.value)
       }, [
-        te.value ? (H(), M("div", {
+        ee.value ? (k(), X("div", {
           key: 0,
           class: "griddle-drop-indicator",
-          style: $({
+          style: G({
             position: "absolute",
-            left: te.value.left + "px",
-            top: te.value.top + "px",
-            width: te.value.width + "px",
-            height: te.value.height + "px",
+            left: ee.value.left + "px",
+            top: ee.value.top + "px",
+            width: ee.value.width + "px",
+            height: ee.value.height + "px",
             boxSizing: "border-box",
             border: "2px dashed rgba(59, 91, 219, 0.55)",
             background: "rgba(59, 91, 219, 0.08)",
-            borderRadius: (d.value.tileRadius ?? 4) + "px",
+            borderRadius: (r.value.tileRadius ?? 4) + "px",
             pointerEvents: "none",
             zIndex: 5
           })
-        }, null, 4)) : ne("", !0),
-        G.value ? (H(), M("div", {
+        }, null, 4)) : ie("", !0),
+        L.value ? (k(), X("div", {
           key: 1,
           class: "griddle-draw-ghost",
-          style: $({
+          style: G({
             position: "absolute",
-            left: G.value.left + "px",
-            top: G.value.top + "px",
-            width: G.value.width + "px",
-            height: G.value.height + "px",
+            left: L.value.left + "px",
+            top: L.value.top + "px",
+            width: L.value.width + "px",
+            height: L.value.height + "px",
             boxSizing: "border-box",
             border: "2px dashed rgba(59, 91, 219, 0.55)",
             background: "rgba(59, 91, 219, 0.08)",
-            borderRadius: (d.value.tileRadius ?? 4) + "px",
+            borderRadius: (r.value.tileRadius ?? 4) + "px",
             pointerEvents: "none",
             zIndex: 5,
             display: "flex",
@@ -868,60 +909,60 @@ const ct = ["data-griddle-tile", "data-griddle-instance", "data-griddle-ghost",
             color: "rgba(59, 91, 219, 0.8)",
             userSelect: "none"
           })
-        }, qe(G.value.label), 5)) : ne("", !0),
-        (H(!0), M(we, null, Se(se.value, (e) => {
+        }, Fe(L.value.label), 5)) : ie("", !0),
+        (k(!0), X(ve, null, me(re.value, (e) => {
           var t, n, l;
-          return H(), M("div", {
+          return k(), X("div", {
             key: e.id,
             "data-griddle-tile": e.id,
-            class: Ie(["griddle-tile", {
-              "griddle-dragging": ((t = z.value) == null ? void 0 : t.tileId) === e.id || ((n = D.value) == null ? void 0 : n.tileId) === e.id || P.value !== null && q.value.has(e.id),
-              "griddle-resizing": ((l = k.value) == null ? void 0 : l.tileId) === e.id,
+            class: xe(["griddle-tile", {
+              "griddle-dragging": ((t = S.value) == null ? void 0 : t.tileId) === e.id || ((n = D.value) == null ? void 0 : n.tileId) === e.id || R.value !== null && J.value.has(e.id),
+              "griddle-resizing": ((l = z.value) == null ? void 0 : l.tileId) === e.id,
               "griddle-selected": W.value.has(e.id)
             }]),
-            style: $(ke(e)),
-            onPointerdown: (a) => K(a, e),
+            style: G(Ie(e)),
+            onPointerdown: (a) => B(a, e),
             ref_for: !0,
-            ref: (a) => ze(e.id, a)
+            ref: (a) => be(e.id, a)
           }, [
-            Re(i.$slots, "tile", {
+            ye(i.$slots, "tile", {
               tile: e,
               selected: W.value.has(e.id)
             }),
-            e.resizable !== !1 ? (H(!0), M(we, { key: 0 }, Se(He(e), (a) => (H(), M("div", {
+            e.resizable !== !1 ? (k(!0), X(ve, { key: 0 }, me(Se(e), (a) => (k(), X("div", {
               key: a,
               "data-griddle-handle": a,
-              style: $(ie(a)),
-              onPointerdown: (u) => _(u, e, a)
-            }, null, 44, ft))), 128)) : ne("", !0)
-          ], 46, ht);
+              style: G(te(a)),
+              onPointerdown: (u) => A(u, e, a)
+            }, null, 44, vt))), 128)) : ie("", !0)
+          ], 46, ct);
         }), 128))
       ], 4)
     ], 38));
   }
 });
-function Rt(O) {
-  const I = new dt(O.config, O.tiles ?? []), s = We(I.tiles), w = We(I.config), B = E(0), Y = I.changes.on(() => {
-    s.value = I.tiles, w.value = I.config, B.value++;
+function yt(_) {
+  const C = new ot(_.config, _.tiles ?? []), s = Xe(C.tiles), f = Xe(C.config), O = H(0), Y = C.changes.on(() => {
+    s.value = C.tiles, f.value = C.config, O.value++;
   });
-  return je(Y), {
-    grid: I,
+  return Ke(Y), {
+    grid: C,
     tiles: s,
-    config: w,
-    version: B,
-    moveTile: (d, g) => I.moveTile(d, g),
-    resizeTile: (d, g) => I.resizeTile(d, g),
-    addTile: (d) => I.addTile(d),
-    removeTile: (d) => I.removeTile(d),
-    reflow: (d) => I.reflow(d),
-    updateConfig: (d) => I.updateConfig(d),
-    toJSON: () => I.toJSON(),
-    loadJSON: (d) => I.loadJSON(d)
+    config: f,
+    version: O,
+    moveTile: (r, w) => C.moveTile(r, w),
+    resizeTile: (r, w) => C.resizeTile(r, w),
+    addTile: (r) => C.addTile(r),
+    removeTile: (r) => C.removeTile(r),
+    reflow: (r) => C.reflow(r),
+    updateConfig: (r) => C.updateConfig(r),
+    toJSON: () => C.toJSON(),
+    loadJSON: (r) => C.loadJSON(r)
   };
 }
 export {
-  St as GriddleGrid,
-  wt as GriddleLoopGrid,
-  Rt as useGriddle
+  mt as GriddleGrid,
+  ut as GriddleLoopGrid,
+  yt as useGriddle
 };
 //# sourceMappingURL=index.js.map