@griddle/vue 0.1.0 → 0.1.2

package/dist/index.js

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