@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/dnd/dragKit.js

@@ -0,0 +1,485 @@
+/*! @synopackageland/ui: MIT, Copyright (c) 2023-2025 Teable, Inc. and Copyright (c) 2019-present Baserow B.V. in parts; see LICENSES/source-notices.md */
+import { APP_ROOT_SELECTOR as me } from "../lib/appRoot.js";
+import { motionMs as W } from "../lib/motion.js";
+import { trackPointerGesture as Z, DRAG_THRESHOLD_PX as ge, dropIndexAt as pe } from "../interaction/gesture.js";
+import { isComposingKey as he } from "../interaction/ime.js";
+import { registerOutsideLayer as ye, swallowNextClick as xe } from "../interaction/outside.js";
+import { createAutoScroll as J } from "./autoScroll.js";
+import { listGeometry as be, gridGeometry as Te, measuredGeometry as we } from "./layout.js";
+const ke = 250, Ae = 6, Se = 100, Q = "data-dnd-lane", X = "data-dnd-key", _ = "data-dnd-index", G = "data-dnd-state", ve = "data-dnd-ghost", O = { x: 0, y: 0, width: 0, height: 0 };
+function w(f) {
+  const p = f.getBoundingClientRect();
+  return { x: p.left, y: p.top, width: p.width, height: p.height };
+}
+function De(f, p, c) {
+  return p >= f.x && p < f.x + f.width && c >= f.y && c < f.y + f.height;
+}
+function ee(f) {
+  return f.performance?.now() ?? Date.now();
+}
+function Ee(f) {
+  const p = String(f);
+  return typeof CSS < "u" && CSS.escape ? CSS.escape(p) : p.replace(/["\\]/g, "\\$&");
+}
+function Ce(f) {
+  const p = /* @__PURE__ */ new Map(), c = {
+    phase: "idle",
+    mode: null,
+    key: null,
+    from: null,
+    to: null,
+    version: 0
+  };
+  let d = null, T = null, D = null, S = null, E = null;
+  const v = () => {
+    c.version++, f.onChange?.(c);
+  }, te = (e) => {
+    if (E?.view === e) return;
+    E?.remove();
+    const t = (n) => {
+      d?.pointerType === "touch" && d.mode === "pointer" && n.cancelable && n.preventDefault();
+    }, o = (n) => {
+      (T || d?.pointerType === "touch") && n.preventDefault();
+    };
+    e.addEventListener("touchmove", t, { passive: !1 }), e.addEventListener("contextmenu", o, !0), E = {
+      view: e,
+      remove: () => {
+        e.removeEventListener("touchmove", t), e.removeEventListener("contextmenu", o, !0);
+      }
+    };
+  }, oe = (e, t, o, n, s) => {
+    const i = e.axis ?? "y", r = Math.max(0, e.count()), a = e.layout?.() ?? { kind: "measured" };
+    if (a.kind === "list") return be(i, r, a.size, a.gap, a.start);
+    if (a.kind === "grid") return Te(r, a);
+    const l = [];
+    for (const h of t.querySelectorAll(`[${_}]`)) {
+      if (h.closest(`[${Q}]`) !== t) continue;
+      const x = Number(h.getAttribute(_));
+      if (!Number.isInteger(x) || x < 0 || x >= r) continue;
+      const m = w(h);
+      l[x] = { x: m.x - o.x + n, y: m.y - o.y + s, width: m.width, height: m.height };
+    }
+    const y = t.ownerDocument.defaultView?.getComputedStyle(t), g = Number.parseFloat((i === "y" ? y?.paddingTop : y?.paddingLeft) ?? "") || 0;
+    return we(i, Array.from({ length: r }, (h, x) => l[x] ?? O), g);
+  }, ne = (e) => {
+    const t = e.element();
+    if (!t) return null;
+    const o = e.scroller?.() ?? t, n = w(t), s = o === t ? n : w(o), i = o.scrollLeft, r = o.scrollTop, a = oe(e, t, n, 0, 0), l = e.autoScroll === !1 ? null : J(() => o, { axis: e.axis ?? "y", ...typeof e.autoScroll == "object" ? e.autoScroll : {} });
+    return {
+      options: e,
+      element: t,
+      scroller: o,
+      box: n,
+      hit: s,
+      scrollX0: i,
+      scrollY0: r,
+      scrollX: i,
+      scrollY: r,
+      geometry: a,
+      arrangement: a.arrange(-1, -1, O),
+      scroll: l
+    };
+  }, H = (e) => ({ x: 0, y: 0, width: e.sourceBox.width, height: e.sourceBox.height }), C = (e, t) => {
+    const o = t.options.id;
+    t.arrangement = t.geometry.arrange(
+      o === e.from.lane ? e.from.index : -1,
+      o === e.to.lane ? e.to.index : -1,
+      H(e)
+    );
+  }, se = (e, t, o) => {
+    let n = t === e.from.lane && o > e.from.index ? o - 1 : o;
+    return t === e.to.lane && n >= e.to.index && (n += 1), n;
+  }, ie = (e, t, o) => {
+    const n = e.hit, s = Math.min(n.x + n.width - 1, Math.max(n.x, t)), i = Math.min(n.y + n.height - 1, Math.max(n.y, o));
+    return {
+      x: s - e.box.x + e.scrollX - e.scrollX0,
+      y: i - e.box.y + e.scrollY - e.scrollY0
+    };
+  }, re = (e, t, o, n) => {
+    const s = t.options.id, i = s === e.to.lane, r = i ? t.arrangement : t.geometry.arrange(s === e.from.lane ? e.from.index : -1, -1, H(e)), a = ie(t, o, n), l = r.slotAt(a.x, a.y);
+    if (l < 0) return 0;
+    if (i && l === e.to.index) return e.to.index;
+    const y = i && l > e.to.index ? l - 1 : l, g = r.rect(l), h = t.geometry.axis;
+    return pe(h === "y" ? a.y : a.x, y, h === "y" ? g.y : g.x, h === "y" ? g.height : g.width);
+  }, U = (e, t, o) => {
+    if (e.to.lane === t && e.to.index === o) return !1;
+    e.to = { lane: t, index: o };
+    for (const n of e.lanes.values()) C(e, n);
+    return c.to = e.to, v(), !0;
+  }, Y = (e, t) => {
+    if (e.mode !== "pointer" || c.phase !== "dragging" || ee(t) < e.lockedUntil) return;
+    const { pointerX: o, pointerY: n } = e;
+    let s;
+    for (const r of e.lanes.values())
+      if (De(r.hit, o, n) && !(r.options.accepts && !r.options.accepts(e.key, e.from))) {
+        s = r;
+        break;
+      }
+    if (s ??= e.lanes.get(e.to.lane), !s) return;
+    const i = re(e, s, o, n);
+    if (U(e, s.options.id, i)) {
+      const r = f.swapLockMs ?? Se;
+      e.lockedUntil = ee(t) + r, e.lockTimer && t.clearTimeout(e.lockTimer), e.lockTimer = t.setTimeout(() => {
+        e.lockTimer = 0, d === e && Y(e, t);
+      }, r + 1);
+    }
+  }, q = (e, t) => ({
+    x: e.box.x + t.x - (e.scrollX - e.scrollX0),
+    y: e.box.y + t.y - (e.scrollY - e.scrollY0),
+    width: t.width,
+    height: t.height
+  }), F = (e) => {
+    const t = e.lanes.get(e.to.lane);
+    return t ? q(t, t.arrangement.rect(e.to.index)) : null;
+  }, R = (e) => {
+    const t = e.ghost;
+    if (!t) return;
+    if (e.mode === "pointer") {
+      const n = e.pointerX - e.grabX - e.sourceBox.x, s = e.pointerY - e.grabY - e.sourceBox.y;
+      t.style.transform = `translate3d(${n}px, ${s}px, 0)`;
+      return;
+    }
+    const o = F(e);
+    o && (t.style.transform = `translate3d(${o.x - e.sourceBox.x}px, ${o.y - e.sourceBox.y}px, 0)`);
+  }, le = (e) => {
+    const t = e.source;
+    if (!t) return null;
+    const o = f.ghost?.(t) ?? t.cloneNode(!0);
+    o.setAttribute(ve, ""), o.setAttribute("aria-hidden", "true"), o.removeAttribute("id"), o.removeAttribute(X), o.removeAttribute(_), o.removeAttribute(G);
+    for (const i of o.querySelectorAll("[id]")) i.removeAttribute("id");
+    const n = e.sourceBox;
+    return Object.assign(o.style, {
+      position: "fixed",
+      left: `${n.x}px`,
+      top: `${n.y}px`,
+      width: `${n.width}px`,
+      height: `${n.height}px`,
+      margin: "0",
+      boxSizing: "border-box",
+      zIndex: "5000",
+      pointerEvents: "none",
+      opacity: "1",
+      visibility: "visible",
+      boxShadow: "var(--ui-shadow-menu)",
+      transform: "translate3d(0, 0, 0)",
+      transition: e.mode === "keyboard" ? "transform var(--ui-motion-drag, var(--ui-motion-normal)) var(--ui-motion-drag-ease, var(--ui-motion-ease))" : "none",
+      willChange: "transform",
+      cursor: "grabbing"
+    }), (f.ghostParent?.(t) ?? t.closest(me) ?? t.ownerDocument.body).appendChild(o), o;
+  }, ae = (e) => [...e.lanes.values()].map((t) => t.element), L = (e) => {
+    const t = `[${X}="${Ee(e)}"]`;
+    for (const o of p.values()) {
+      const n = o.element()?.querySelector(t);
+      if (n) return n;
+    }
+    return null;
+  }, B = (e, t, o) => {
+    const n = e.ghost, s = e.view, i = W("--ui-motion-drag-settle", e.source ?? void 0);
+    if (!n || !t || i <= 0) {
+      n?.remove(), o();
+      return;
+    }
+    const r = `translate3d(${t.x - e.sourceBox.x}px, ${t.y - e.sourceBox.y}px, 0)`;
+    n.style.transition = `transform ${i}ms var(--ui-motion-drag-settle-ease, cubic-bezier(.2, 1, .1, 1))`, n.style.transform = r;
+    let a = !1;
+    const l = () => {
+      a || (a = !0, s.clearTimeout(g), n.removeEventListener("transitionend", y), n.remove(), S === l && (S = null), o());
+    }, y = (h) => {
+      h.target === n && l();
+    };
+    n.addEventListener("transitionend", y);
+    const g = s.setTimeout(l, i + 50);
+    S = l;
+  }, N = (e, t = !1) => {
+    t || (e.gesture?.dispose(), e.gesture = null), e.layer?.dispose(), e.layer = null;
+    for (const o of e.lanes.values()) o.scroll?.stop();
+    for (const o of e.outer) o.stop();
+    e.lockTimer && e.view.clearTimeout(e.lockTimer), e.lockTimer = 0;
+    for (const o of e.cleanup.splice(0)) o();
+  }, M = () => {
+    d = null, D = null, Object.assign(c, { phase: "idle", mode: null, key: null, from: null, to: null }), v();
+  }, ce = (e, t, o) => {
+    if (!t) return;
+    const n = W("--ui-motion-drag-settle", L(e));
+    n <= 0 || o.requestAnimationFrame(() => {
+      const s = L(e);
+      if (!s || typeof s.animate != "function") return;
+      const i = w(s), r = t.x - i.x, a = t.y - i.y;
+      !r && !a || s.animate(
+        [{ transform: `translate(${r}px, ${a}px)` }, { transform: "none" }],
+        { duration: n, easing: "cubic-bezier(.2, 1, .1, 1)" }
+      );
+    });
+  }, I = (e) => {
+    const t = e.view;
+    N(e);
+    const o = { key: e.key, from: e.from, to: e.to }, n = o.from.lane === o.to.lane && o.from.index === o.to.index, s = F(e);
+    if (n) {
+      c.phase = "returning", v(), B(e, s, () => {
+        d === e && M();
+      });
+      return;
+    }
+    D = e.key, c.phase = "settling", v();
+    let i;
+    try {
+      i = f.onDrop(o);
+    } catch (r) {
+      i = Promise.reject(r);
+    }
+    B(e, s, () => {
+      d === e && M(), e.mode === "keyboard" && t.requestAnimationFrame(() => L(o.key)?.focus({ preventScroll: !0 }));
+    }), i && typeof i.then == "function" && i.then(void 0, (r) => {
+      d === e && S?.();
+      const a = L(o.key), l = a ? w(a) : null;
+      f.onRestore?.(o, r), ce(o.key, l, t);
+    });
+  }, $ = (e) => {
+    if (c.phase !== "dragging") return;
+    const t = !!e.gesture?.active;
+    N(e, t), e.to = e.from;
+    for (const n of e.lanes.values()) C(e, n);
+    c.to = e.from, c.phase = "returning", v(), f.onCancel?.(c);
+    const o = e.source?.isConnected ? e.source : L(e.key);
+    B(e, o ? w(o) : null, () => {
+      d === e && M();
+    });
+  }, K = (e, t) => {
+    for (const s of p.values()) {
+      const i = ne(s);
+      i && e.lanes.set(s.id, i);
+    }
+    if (!e.lanes.has(e.from.lane)) return !1;
+    for (const s of e.lanes.values()) {
+      C(e, s);
+      const i = s.scroller, r = () => {
+        s.scrollX = i.scrollLeft, s.scrollY = i.scrollTop, e.mode === "keyboard" ? R(e) : Y(e, t);
+      };
+      i.addEventListener("scroll", r, { passive: !0 }), e.cleanup.push(() => i.removeEventListener("scroll", r));
+    }
+    let o = 0;
+    const n = (s) => {
+      [...e.lanes.values()].some((i) => i.scroller === s.target) || o || (o = t.requestAnimationFrame(() => {
+        o = 0;
+        for (const i of e.lanes.values()) {
+          const r = w(i.element), a = i.scroller !== i.element;
+          i.box = a ? { ...r, x: r.x + i.scrollX - i.scrollX0, y: r.y + i.scrollY - i.scrollY0 } : r, i.hit = a ? w(i.scroller) : r;
+        }
+        Y(e, t);
+      }));
+    };
+    if (t.addEventListener("scroll", n, { capture: !0, passive: !0 }), e.cleanup.push(() => {
+      t.removeEventListener("scroll", n, { capture: !0 }), o && t.cancelAnimationFrame(o);
+    }), e.outer = (f.scrollers ?? []).map((s) => J(s.element, s)), e.ghost = le(e), e.mode === "pointer") {
+      const s = t.document.documentElement, i = { select: s.style.userSelect, cursor: s.style.cursor };
+      s.style.userSelect = "none", s.style.cursor = "grabbing", t.getSelection?.()?.removeAllRanges(), e.cleanup.push(() => {
+        s.style.userSelect = i.select, s.style.cursor = i.cursor;
+      });
+    }
+    return e.layer = ye(t, {
+      elements: () => [...ae(e), e.ghost],
+      onEscape: () => ($(e), !0)
+    }), d = e, Object.assign(c, { phase: "dragging", mode: e.mode, key: e.key, from: e.from, to: e.to }), v(), f.onStart?.(c), !0;
+  }, P = (e, t, o) => {
+    if (e.pointerX = t, e.pointerY = o, !(c.phase !== "dragging" || d !== e)) {
+      R(e), Y(e, e.view), e.lanes.get(e.to.lane)?.scroll?.update(t, o);
+      for (const n of e.outer) n.update(t, o);
+    }
+  }, V = (e, t, o, n, s, i, r) => {
+    const a = o ? w(o) : O;
+    return {
+      key: e,
+      from: t,
+      to: t,
+      mode: n,
+      pointerType: s,
+      source: o,
+      sourceBox: a,
+      grabX: i - a.x,
+      grabY: r - a.y,
+      pointerX: i,
+      pointerY: r,
+      lanes: /* @__PURE__ */ new Map(),
+      ghost: null,
+      lockedUntil: 0,
+      lockTimer: 0,
+      view: o?.ownerDocument.defaultView ?? window,
+      gesture: null,
+      layer: null,
+      outer: [],
+      cleanup: []
+    };
+  }, j = () => c.phase !== "idle" || !!T, fe = (e, t, o) => {
+    const n = d;
+    if (D !== null && o === D && c.phase === "settling") return { visibility: "hidden" };
+    if (!n || c.phase !== "dragging" && c.phase !== "returning") return {};
+    if (e === n.from.lane && t === n.from.index)
+      return { opacity: "0", pointerEvents: "none" };
+    const s = n.lanes.get(e), i = "transform var(--ui-motion-drag, var(--ui-motion-normal)) var(--ui-motion-drag-ease, var(--ui-motion-ease))";
+    if (!s) return { transition: i };
+    const r = se(n, e, t), a = s.arrangement.rect(r), l = s.geometry.origin(t), y = a.x - l.x, g = a.y - l.y;
+    return { transform: y || g ? `translate3d(${y}px, ${g}px, 0)` : "none", transition: i };
+  }, z = {
+    get state() {
+      return c;
+    },
+    lane(e) {
+      return p.set(e.id, e), () => {
+        p.get(e.id) === e && p.delete(e.id);
+      };
+    },
+    pointerDown(e, t, o, n) {
+      if (e.button !== 0 || e.defaultPrevented || ((c.phase === "settling" || c.phase === "returning") && S?.(), j())) return;
+      const s = { lane: t, index: o };
+      if (f.canDrag && !f.canDrag(n, s)) return;
+      const i = e.currentTarget instanceof HTMLElement ? e.currentTarget.closest(`[${X}]`) ?? e.currentTarget : null, r = i?.ownerDocument.defaultView ?? window, a = e.pointerType === "touch", l = V(n, s, i, "pointer", e.pointerType, e.clientX, e.clientY), y = () => (l.sourceBox = i ? w(i) : O, l.grabX = e.clientX - l.sourceBox.x, l.grabY = e.clientY - l.sourceBox.y, K(l, r));
+      if (!a) {
+        const u = Z(e, {
+          threshold: f.threshold ?? ge,
+          onStart: () => {
+            l.gesture = u, y() || u.dispose();
+          },
+          onMove: (A) => {
+            d === l && P(l, A.x, A.y);
+          },
+          onEnd: () => {
+            d === l && c.phase === "dragging" && I(l);
+          },
+          onCancel: (A, ue) => {
+            d === l && ue !== "dispose" && $(l);
+          }
+        });
+        return;
+      }
+      te(r);
+      const g = f.holdTolerance ?? Ae;
+      let h = !1;
+      const x = (u) => {
+        u.pointerId === e.pointerId && (l.pointerX = u.clientX, l.pointerY = u.clientY, h ? d === l && P(l, u.clientX, u.clientY) : Math.max(Math.abs(u.clientX - e.clientX), Math.abs(u.clientY - e.clientY)) > g && b.dispose());
+      }, m = () => {
+        r.removeEventListener("pointermove", x, !0), T?.gesture === b && (r.clearTimeout(T.timer), T = null);
+      }, b = Z(e, {
+        threshold: Number.POSITIVE_INFINITY,
+        // Capturing a touch before it lifts would keep native scrolling from taking it.
+        capture: !1,
+        onEnd: () => {
+          m(), h && (xe(r), d === l && c.phase === "dragging" && I(l));
+        },
+        onCancel: (u, A) => {
+          m(), d === l && A !== "dispose" && $(l);
+        }
+      });
+      r.addEventListener("pointermove", x, !0);
+      const k = r.setTimeout(() => {
+        if (b.active) {
+          if (T = null, h = !0, l.gesture = b, !y()) return b.dispose();
+          if (i) {
+            const u = i.style.touchAction;
+            i.style.touchAction = "none", l.cleanup.push(() => {
+              i.style.touchAction = u;
+            });
+            try {
+              i.setPointerCapture?.(e.pointerId);
+            } catch {
+            }
+          }
+          l.cleanup.push(m), P(l, l.pointerX, l.pointerY);
+        }
+      }, f.holdMs ?? ke);
+      T = { gesture: b, timer: k, view: r };
+    },
+    keyDown(e, t, o, n) {
+      if (he(e)) return !1;
+      const s = d;
+      if (!s || s.mode !== "keyboard") {
+        if (e.key !== " " || e.repeat || j()) return !1;
+        const m = { lane: t, index: o };
+        if (f.canDrag && !f.canDrag(n, m)) return !1;
+        const b = e.currentTarget instanceof HTMLElement ? e.currentTarget.closest(`[${X}]`) ?? e.currentTarget : null, k = b?.ownerDocument.defaultView ?? window, u = V(n, m, b, "keyboard", "keyboard", 0, 0);
+        return K(u, k) ? (e.preventDefault(), !0) : !1;
+      }
+      if (c.phase !== "dragging") return !1;
+      if (e.key === " " || e.key === "Enter")
+        return e.preventDefault(), I(s), !0;
+      const i = s.lanes.get(s.to.lane);
+      if (!i) return !1;
+      const r = i.geometry.axis, a = i.options.layout?.(), l = a?.kind === "grid" ? Math.max(1, Math.floor(a.columns)) : 1, y = r === "y" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"], g = r === "y" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"], h = i.arrangement.count - 1;
+      let x = null;
+      if (y.includes(e.key)) {
+        const m = e.key === y[0] ? -1 : 1;
+        x = { lane: s.to.lane, index: Math.min(h, Math.max(0, s.to.index + m)) };
+      } else if (g.includes(e.key) && l > 1) {
+        const m = e.key === g[0] ? -l : l;
+        x = { lane: s.to.lane, index: Math.min(h, Math.max(0, s.to.index + m)) };
+      } else if (g.includes(e.key)) {
+        const m = [...s.lanes.keys()], b = e.key === g[0] ? -1 : 1;
+        for (let k = m.indexOf(s.to.lane) + b; k >= 0 && k < m.length; k += b) {
+          const u = s.lanes.get(m[k]);
+          if (u.options.accepts && !u.options.accepts(s.key, s.from)) continue;
+          const A = u.geometry.count - (u.options.id === s.from.lane ? 1 : 0);
+          x = { lane: u.options.id, index: Math.min(A, s.to.index) };
+          break;
+        }
+      } else
+        return !1;
+      return e.preventDefault(), x && U(s, x.lane, x.index) && (de(s), R(s)), !0;
+    },
+    item(e, t, o) {
+      const n = {
+        [X]: String(o),
+        [_]: t,
+        style: fe(e, t, o)
+      };
+      return c.phase === "settling" && D === o ? n[G] = "settling" : d && c.phase !== "idle" && d.key === o && (n[G] = "source"), n;
+    },
+    laneAttrs(e) {
+      return { [Q]: e };
+    },
+    placeholder(e) {
+      const t = d;
+      if (!t || c.phase !== "dragging" || t.to.lane !== e) return null;
+      const o = t.lanes.get(e);
+      if (!o) return null;
+      const n = o.arrangement.rect(t.to.index);
+      return {
+        index: t.to.index,
+        rect: n,
+        style: {
+          position: "absolute",
+          left: `${n.x}px`,
+          top: `${n.y}px`,
+          width: `${n.width || t.sourceBox.width}px`,
+          height: `${n.height || t.sourceBox.height}px`,
+          pointerEvents: "none",
+          transition: "transform var(--ui-motion-drag, var(--ui-motion-normal)) var(--ui-motion-drag-ease, var(--ui-motion-ease))"
+        }
+      };
+    },
+    isDragging(e) {
+      return c.phase !== "idle" && c.key === e;
+    },
+    cancel() {
+      T && (T.gesture.dispose(), T = null), d && c.phase === "dragging" && $(d);
+    },
+    dispose() {
+      z.cancel(), S?.(), d && (N(d), d.ghost?.remove(), M()), E?.remove(), E = null, p.clear();
+    }
+  }, de = (e) => {
+    const t = e.lanes.get(e.to.lane);
+    if (!t) return;
+    const o = q(t, t.arrangement.rect(e.to.index)), n = t.hit, s = t.scroller;
+    o.y < n.y ? s.scrollTop -= n.y - o.y : o.y + o.height > n.y + n.height && (s.scrollTop += o.y + o.height - n.y - n.height), o.x < n.x ? s.scrollLeft -= n.x - o.x : o.x + o.width > n.x + n.width && (s.scrollLeft += o.x + o.width - n.x - n.width), t.scrollX = s.scrollLeft, t.scrollY = s.scrollTop;
+  };
+  return z;
+}
+export {
+  ve as DND_GHOST_ATTR,
+  _ as DND_INDEX_ATTR,
+  X as DND_KEY_ATTR,
+  Q as DND_LANE_ATTR,
+  G as DND_STATE_ATTR,
+  Se as SWAP_LOCK_MS,
+  ke as TOUCH_HOLD_MS,
+  Ae as TOUCH_HOLD_TOLERANCE_PX,
+  Ce as createDragKit
+};

package/dist/modules/dnd/layout.js

@@ -0,0 +1,81 @@
+const p = (n, t, h) => Math.min(h, Math.max(t, n)), X = (n, t, h) => n - (t >= 0 ? 1 : 0) + (h >= 0 ? 1 : 0);
+function A(n, t, h, a = 0, m = 0, o = 0) {
+  const u = h + a, f = (r, e) => {
+    const c = m + r * u, s = n === "y" ? e?.width ?? 0 : e?.height ?? 0;
+    return n === "y" ? { x: o, y: c, width: s, height: h } : { x: c, y: o, width: h, height: s };
+  };
+  return {
+    axis: n,
+    count: t,
+    origin: (r) => f(r),
+    arrange(r, e, c) {
+      const s = X(t, r, e);
+      return {
+        count: s,
+        rect: (l) => f(l, c),
+        slotAt(l, g) {
+          return s === 0 ? -1 : p(Math.floor(((n === "y" ? g : l) - m) / (u || 1)), 0, s - 1);
+        }
+      };
+    }
+  };
+}
+function G(n, t) {
+  const h = Math.max(1, Math.floor(t.columns)), { width: a, height: m } = t, o = a + (t.gapX ?? 0), u = m + (t.gapY ?? 0), f = t.startX ?? 0, r = t.startY ?? 0, e = (c) => ({
+    x: f + c % h * o,
+    y: r + Math.floor(c / h) * u,
+    width: a,
+    height: m
+  });
+  return {
+    axis: "x",
+    count: n,
+    origin: e,
+    arrange(c, s) {
+      const l = X(n, c, s);
+      return {
+        count: l,
+        rect: e,
+        slotAt(g, w) {
+          if (l === 0) return -1;
+          const i = p(Math.floor((g - f) / (o || 1)), 0, h - 1), y = Math.max(0, Math.floor((w - r) / (u || 1)));
+          return p(y * h + i, 0, l - 1);
+        }
+      };
+    }
+  };
+}
+function S(n, t, h = 0) {
+  const a = (e) => n === "y" ? e.y : e.x, m = (e) => n === "y" ? e.height : e.width, o = t[0], u = o ? a(o) : h, f = t.length > 1 ? Math.max(0, a(t[1]) - a(o) - m(o)) : 0, r = o ? n === "y" ? o.x : o.y : 0;
+  return {
+    axis: n,
+    count: t.length,
+    origin: (e) => t[e] ?? { x: 0, y: u, width: 0, height: 0 },
+    arrange(e, c, s) {
+      const l = t.filter((i, y) => y !== e), g = [];
+      c >= 0 && l.splice(p(c, 0, l.length), 0, s);
+      let w = u;
+      for (const i of l)
+        g.push(n === "y" ? { x: r, y: w, width: i.width, height: i.height } : { x: w, y: r, width: i.width, height: i.height }), w += m(i) + f;
+      return {
+        count: g.length,
+        rect: (i) => g[i] ?? { x: r, y: u, width: s.width, height: s.height },
+        slotAt(i, y) {
+          if (!g.length) return -1;
+          const Y = n === "y" ? y : i;
+          let d = 0, M = g.length - 1;
+          for (; d < M; ) {
+            const x = d + M + 1 >> 1;
+            a(g[x]) <= Y ? d = x : M = x - 1;
+          }
+          return d;
+        }
+      };
+    }
+  };
+}
+export {
+  G as gridGeometry,
+  A as listGeometry,
+  S as measuredGeometry
+};

package/dist/modules/dnd/vue.js

@@ -0,0 +1,30 @@
+import { shallowRef as u, getCurrentScope as t, onScopeDispose as a } from "vue";
+import { createDragKit as g } from "./dragKit.js";
+function p(i) {
+  const o = u(0), r = g({
+    ...i,
+    onChange: (e) => {
+      o.value = e.version, i.onChange?.(e);
+    }
+  });
+  return t() && a(() => r.dispose()), {
+    kit: r,
+    version: o,
+    item(e, n, s) {
+      return o.value, r.item(e, n, s);
+    },
+    placeholder(e) {
+      return o.value, r.placeholder(e);
+    },
+    isDragging(e) {
+      return o.value, r.isDragging(e);
+    },
+    useLane(e) {
+      const n = r.lane(e);
+      return t() && a(n), n;
+    }
+  };
+}
+export {
+  p as useDragKit
+};

package/dist/modules/feedback/StatusSlot.vue.js

@@ -0,0 +1,58 @@
+import { defineComponent as y, computed as n, openBlock as a, createElementBlock as o, normalizeStyle as g, unref as t, Fragment as h, createBlock as d, resolveDynamicComponent as k, normalizeClass as v, createCommentVNode as r, toDisplayString as u, withCtx as C, createTextVNode as w } from "vue";
+import { CircleAlert as L, CircleCheck as S, LoaderCircle as _ } from "@lucide/vue";
+import b from "../components/primitives/button/Button.vue.js";
+import { useLocalizedDefaults as x } from "../i18n/text.js";
+import { useShowAfter as D } from "./showAfter.js";
+import { PENDING_DELAY_MS as z } from "./timing.js";
+const N = ["data-state"], A = ["title"], R = /* @__PURE__ */ y({
+  __name: "StatusSlot",
+  props: {
+    state: { default: "idle" },
+    message: { default: "" },
+    width: { default: "100%" },
+    height: { default: "var(--ui-control-md)" },
+    delay: { default: z },
+    retryLabel: {}
+  },
+  emits: ["retry"],
+  setup(s, { emit: m }) {
+    const e = x(s, { retryLabel: "Retry" }), c = m, p = D(() => e.state === "pending", { delay: e.delay }), f = n(() => e.state === "pending" ? p.value : e.state !== "idle"), i = n(() => ({ pending: _, saved: S, error: L, idle: null })[e.state]);
+    return (E, l) => (a(), o("span", {
+      class: "ui-status-slot",
+      role: "status",
+      "aria-live": "polite",
+      "data-state": s.state,
+      style: g({ width: t(e).width, height: t(e).height }),
+      "data-ui-status-slot": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      f.value ? (a(), o(h, { key: 0 }, [
+        i.value ? (a(), d(k(i.value), {
+          key: 0,
+          class: v(["ui-status-slot-icon", { "animate-spin": s.state === "pending" }]),
+          "aria-hidden": "true"
+        }, null, 8, ["class"])) : r("", !0),
+        t(e).message ? (a(), o("span", {
+          key: 1,
+          class: "ui-status-slot-text",
+          title: t(e).message
+        }, u(t(e).message), 9, A)) : r("", !0),
+        s.state === "error" && t(e).retryLabel ? (a(), d(b, {
+          key: 2,
+          kind: "tool",
+          size: "sm",
+          variant: "ghost",
+          onClick: l[0] || (l[0] = (P) => c("retry"))
+        }, {
+          default: C(() => [
+            w(u(t(e).retryLabel), 1)
+          ]),
+          _: 1
+        })) : r("", !0)
+      ], 64)) : r("", !0)
+    ], 12, N));
+  }
+});
+export {
+  R as default
+};

package/dist/modules/feedback/StatusSlot2.vue.js

@@ -0,0 +1,4 @@
+import f from "./StatusSlot.vue.js";
+export {
+  f as default
+};

package/dist/modules/feedback/showAfter.js

@@ -0,0 +1,19 @@
+import { ref as f, watch as c, onBeforeUnmount as w } from "vue";
+import { PENDING_DELAY_MS as h } from "./timing.js";
+function D(i, n = {}) {
+  const s = Math.max(0, n.delay ?? h), u = Math.max(0, n.minVisible ?? 0), t = f(s === 0 && i());
+  let e, a = t.value ? Date.now() : 0;
+  const r = () => {
+    e !== void 0 && clearTimeout(e), e = void 0;
+  };
+  return c(i, (o) => {
+    if (r(), o === t.value) return;
+    const m = () => {
+      e = void 0, t.value = o, o && (a = Date.now());
+    }, l = o ? s : a + u - Date.now();
+    l <= 0 ? m() : e = setTimeout(m, l);
+  }, { immediate: !0, flush: "sync" }), w(r), t;
+}
+export {
+  D as useShowAfter
+};