@nivaro/react 0.3.36 → 0.3.37

package/dist/shared/components/layout-editor/dnd/TrashZone.js

@@ -1,68 +1,96 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { useDroppable as c } from "@dnd-kit/core";
-import { Trash2 as m } from "lucide-react";
-import { useSyncExternalStore as h, useCallback as x } from "react";
-import { cn as o } from "../../../lib/utils.js";
-import { TRASH_DROP_ID as n } from "./trash-drop.js";
-const b = `
+import { jsxs as s, jsx as r, Fragment as m } from "react/jsx-runtime";
+import { useDroppable as h } from "@dnd-kit/core";
+import { Trash2 as b, Link2 as x } from "lucide-react";
+import { useSyncExternalStore as p, useCallback as u } from "react";
+import { cn as d } from "../../../lib/utils.js";
+import { TRASH_DROP_ID as i } from "./trash-drop.js";
+const f = `
 @keyframes nvr-trash-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
 [data-layout-trash]{animation:nvr-trash-in 160ms cubic-bezier(0.25,1,0.5,1) both}
 @media (prefers-reduced-motion: reduce){[data-layout-trash]{animation:none}}
-`, p = (e, r) => `${e} ${r}${e === 1 ? "" : "s"}`;
-function w({
+`, k = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, y = 3;
+function j({
   store: e,
-  plan: r,
-  name: d
+  plan: t,
+  name: n,
+  warning: o = null
 }) {
-  const { setNodeRef: i } = c({
-    id: n,
+  const { setNodeRef: l } = h({
+    id: i,
     data: { layoutTrash: !0 }
-  }), t = h(
+  }), a = p(
     e.subscribe,
-    x(() => e.state.overKey === n, [e]),
+    u(() => e.state.overKey === i, [e]),
     () => !1
-  ), l = r.kind === "section" ? r.holds > 0 ? `With its ${p(r.holds, "field")} · their data is kept` : "It holds no fields" : "Its data is kept";
+  ), c = t.kind === "section" ? t.holds > 0 ? `With its ${k(t.holds, "field")} · their data is kept` : "It holds no fields" : (t.count ?? 1) > 1 ? "Their data is kept" : "Its data is kept";
   return /* @__PURE__ */ s(
     "div",
     {
-      ref: i,
+      ref: l,
       "data-layout-trash": "",
-      "data-over": t ? "" : void 0,
+      "data-over": a ? "" : void 0,
       style: { left: "50%", transform: "translateX(-50%)" },
-      className: o(
+      className: d(
         "pointer-events-auto fixed bottom-6 z-[1001] flex min-w-[240px] max-w-[min(420px,calc(100vw-32px))] items-center gap-3 rounded-xl border-2 px-4 py-3 shadow-lg transition-colors duration-150 motion-reduce:transition-none",
-        t ? "border-solid border-red-400 bg-red-50 text-red-800 dark:border-red-500/70 dark:bg-[#3b1219] dark:text-red-100" : "border-dashed border-slate-300 bg-white text-slate-600 dark:border-slate-600 dark:bg-card dark:text-slate-300"
+        a ? "border-solid border-red-400 bg-red-50 text-red-800 dark:border-red-500/70 dark:bg-[#3b1219] dark:text-red-100" : "border-dashed border-slate-300 bg-white text-slate-600 dark:border-slate-600 dark:bg-card dark:text-slate-300"
       ),
       children: [
-        /* @__PURE__ */ a("style", { children: b }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ r("style", { children: f }),
+        /* @__PURE__ */ r(
           "span",
           {
             "aria-hidden": !0,
-            className: o(
+            className: d(
               "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors duration-150 motion-reduce:transition-none",
-              t ? "bg-red-600 text-white" : "bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300"
+              a ? "bg-red-600 text-white" : "bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300"
             ),
-            children: /* @__PURE__ */ a(m, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ r(b, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ s("span", { className: "min-w-0", children: [
-          /* @__PURE__ */ a("span", { className: "block truncate text-[13px] font-semibold", children: t ? `Release to remove ${d}` : "Drop here to remove" }),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ r("span", { className: "block truncate text-[13px] font-semibold", children: a ? `Release to remove ${n}` : "Drop here to remove" }),
+          /* @__PURE__ */ r(
             "span",
             {
-              className: o(
+              className: d(
                 "block truncate text-[11.5px]",
-                t ? "text-red-700 dark:text-red-200/90" : "text-slate-500 dark:text-slate-400"
+                a ? "text-red-700 dark:text-red-200/90" : "text-slate-500 dark:text-slate-400"
               ),
-              children: t ? l : "From this form only · Undo brings it back"
+              children: a ? c : "From this form only · Undo brings it back"
             }
-          )
+          ),
+          o && /* @__PURE__ */ r(N, { warning: o, over: a })
+        ] })
+      ]
+    }
+  );
+}
+function N({ warning: e, over: t }) {
+  const n = e.effects.slice(0, y), o = e.effects.length - n.length;
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      "data-trash-links": e.count,
+      className: d(
+        "mt-1.5 block border-t pt-1.5 text-[11.5px]",
+        t ? "border-red-200 text-red-800 dark:border-red-500/30 dark:text-red-100" : "border-slate-200 text-amber-800 dark:border-slate-700 dark:text-amber-200"
+      ),
+      children: [
+        /* @__PURE__ */ s("span", { className: "flex items-center gap-1 font-medium", children: [
+          /* @__PURE__ */ r(x, { "aria-hidden": !0, className: "h-3 w-3 shrink-0" }),
+          /* @__PURE__ */ r("span", { className: "truncate", children: e.headline })
+        ] }),
+        t && /* @__PURE__ */ s(m, { children: [
+          /* @__PURE__ */ s("span", { className: "mt-0.5 block truncate", children: [
+            n.join(" · "),
+            o > 0 ? ` · +${o} more` : ""
+          ] }),
+          /* @__PURE__ */ r("span", { className: "block truncate text-red-700/90 dark:text-red-200/80", children: "Off the form, nobody can change it here" })
         ] })
       ]
     }
   );
 }
 export {
-  w as TrashZone
+  j as TrashZone
 };

package/dist/shared/components/layout-editor/dnd/UndoChip.js

@@ -0,0 +1,76 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { Undo2 as w } from "lucide-react";
+import { useState as y, useRef as v, useEffect as u } from "react";
+const g = 6e3, k = `
+@keyframes nvr-undo-chip-in{from{opacity:0;transform:translate(-50%,calc(-100% + 6px))}to{opacity:1;transform:translate(-50%,-100%)}}
+[data-trash-undo-chip]{animation:nvr-undo-chip-in 140ms cubic-bezier(0.25,1,0.5,1) both}
+@media (prefers-reduced-motion: reduce){[data-trash-undo-chip]{animation:none}}
+`;
+function b(n, r, e = 120) {
+  const i = Math.min(Math.max(n.x, 16 + e), Math.max(16 + e, r.width - 16 - e)), d = Math.min(Math.max(n.y - 16, 56), r.height - 16);
+  return { left: i, top: d };
+}
+function P({
+  label: n,
+  point: r,
+  origin: e,
+  stillUndoable: i,
+  onUndo: d,
+  onClose: h
+}) {
+  const [l, a] = y(!1), t = v(h);
+  t.current = h, u(() => {
+    i || t.current();
+  }, [i]), u(() => {
+    if (l) return;
+    const o = setTimeout(() => t.current(), g);
+    return () => clearTimeout(o);
+  }, [l]), u(() => {
+    const o = (x) => {
+      x.key === "Escape" && t.current();
+    };
+    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+  }, []);
+  const m = typeof window > "u" ? { width: 1024, height: 768 } : { width: window.innerWidth, height: window.innerHeight }, { left: p, top: f } = b(r, m);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      role: "status",
+      "data-trash-undo-chip": "",
+      onPointerEnter: () => a(!0),
+      onPointerLeave: () => a(!1),
+      onFocus: () => a(!0),
+      onBlur: () => a(!1),
+      style: { left: p - e.x, top: f - e.y, transform: "translate(-50%, -100%)" },
+      className: "pointer-events-auto fixed z-[1001] flex max-w-[240px] items-center gap-1 rounded-lg bg-white py-1 pl-2.5 pr-1 text-[12.5px] text-slate-700 shadow-lg ring-1 ring-slate-900/10 dark:bg-card dark:text-slate-200 dark:ring-white/10",
+      children: [
+        /* @__PURE__ */ s("style", { children: k }),
+        /* @__PURE__ */ c("span", { className: "min-w-0 truncate", children: [
+          "Removed ",
+          /* @__PURE__ */ s("span", { className: "font-medium text-slate-900 dark:text-foreground", children: n })
+        ] }),
+        /* @__PURE__ */ s("span", { "aria-hidden": !0, className: "text-slate-300 dark:text-slate-600", children: "·" }),
+        /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            "data-trash-undo": "",
+            onClick: () => {
+              d(), t.current();
+            },
+            className: "inline-flex h-7 shrink-0 items-center gap-1 rounded-md px-2 font-medium text-nvr-cyan hover:bg-nvr-cyan/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-nvr-cyan [@media(pointer:coarse)]:h-9 [@media(pointer:coarse)]:px-3",
+            children: [
+              /* @__PURE__ */ s(w, { "aria-hidden": !0, className: "h-3.5 w-3.5" }),
+              "Undo"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  g as UNDO_CHIP_MS,
+  P as UndoChip,
+  b as chipPosition
+};

package/dist/shared/components/layout-editor/dnd/merge-drop.js

@@ -0,0 +1,33 @@
+import { nodeData as s } from "./collision.js";
+const h = 12;
+function b(t, i, o, n) {
+  return i <= 0 || n.y < t.top || n.y > t.top + i || n.x < t.left || n.x > t.left + t.width ? !1 : o === "x" ? n.x >= t.left + t.width / 4 && n.x <= t.left + t.width * 3 / 4 : n.y >= t.top + Math.min(h, i / 3);
+}
+function x(t, i) {
+  return (o) => {
+    var f, l;
+    const n = t(o), a = n[0], u = o.pointerCoordinates, c = s(o.active.data.current);
+    if (!a || !u || !c || c.add || c.role.kind !== "group") return n;
+    const e = a.data, r = s((f = e == null ? void 0 : e.droppableContainer) == null ? void 0 : f.data.current);
+    if ((r == null ? void 0 : r.role.kind) !== "group" || !e.hint) return n;
+    const d = o.droppableRects.get(a.id), g = ((l = r.headerHeight) == null ? void 0 : l.call(r)) ?? 0;
+    return !d || !b(d, g, e.hint.axis, u) || !i(c, r) ? n : [{ ...a, data: { ...e, hint: { ...e.hint, merge: !0 } } }, ...n.slice(1)];
+  };
+}
+function m(t) {
+  return {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: t > 0 ? t : "100%",
+    borderRadius: 8,
+    backgroundColor: "rgb(var(--nvr-cyan-rgb, 0 206 255) / 0.1)",
+    boxShadow: "inset 0 0 0 2px rgb(var(--nvr-cyan-rgb, 0 206 255))"
+  };
+}
+export {
+  h as MERGE_EDGE,
+  b as inMergeZone,
+  x as mergeAwareCollision,
+  m as mergeIndicatorStyle
+};

package/dist/shared/components/layout-editor/dnd/multi-drop.js

@@ -0,0 +1,87 @@
+import { applyLayoutOps as g, UNGROUPED_KEY as P, isCanvasSlot as c } from "../../../lib/layout-ops.js";
+import { isMultiSelectable as m, targetKey as k } from "../design-context.js";
+import { plural as O, inPageOrder as w, selectedPlacements as z, normalizedBundle as a } from "../field-zones.js";
+import { placementPatchOf as D } from "../inspector/model.js";
+import { pinLocked as A, unpinnedPatch as C } from "../pin.js";
+import { duplicatePlan as K } from "../structure-ops.js";
+import { dndRole as L, bodyZone as M } from "./collision.js";
+import { landsOnCanvas as b, orderAfterDrop as h, placeAfterDrop as E } from "./order.js";
+function T(t, o, r) {
+  if (!t || o.length < 2 || !m(r)) return [r];
+  const u = k(r);
+  if (!o.some((n) => k(n) === u)) return [r];
+  if (!o.every(m)) return [r];
+  const d = w(t, z(t, o)), p = [];
+  for (const n of d) {
+    const e = o.find(
+      (f) => f.kind !== "group" && f.kind !== "header" && f.field === n.field && f.group_key === n.group_key
+    );
+    e && !A(t, e) && p.push(e);
+  }
+  return p.length > 1 && p.some((n) => k(n) === u) ? p : [r];
+}
+function _(t, o) {
+  const r = L(t, o);
+  if (r) {
+    if (r.kind === "item") return r.zone;
+    if (r.kind === "group" && r.body) return M(r.key);
+  }
+}
+function R(t, o, r, u) {
+  const d = a(t);
+  if (o.kind === "header") return [];
+  if (o.kind === "group") {
+    if (o.key === P) return [];
+    const e = K(d, o);
+    if (!e.ok) return [];
+    const f = e.ops[0];
+    if ((f == null ? void 0 : f.op) !== "group_create") return [];
+    let l;
+    try {
+      l = g(d, e.ops);
+    } catch {
+      return [];
+    }
+    const i = r.kind === "group" && r.key === o.key ? { kind: "group", key: o.key } : r, s = h(l, { kind: "group", key: f.key }, i, u);
+    return [...e.ops, ...s];
+  }
+  if (c(o)) return [];
+  const p = d.placements.find((e) => e.field === o.field && e.group_key === o.group_key);
+  if (!p) return [];
+  const n = _(d, r);
+  return n === void 0 || c({ field: o.field, group_key: n }) ? [] : E(d, o.field, r, u, C(D(p)));
+}
+function Y(t, o, r, u, d) {
+  const p = k(r);
+  if (o.some((i) => k(i) === p)) return [];
+  let n = a(t);
+  const e = _(n, r);
+  if (e === void 0) return [];
+  const f = [];
+  let l = { over: r, side: u };
+  for (const i of o) {
+    if (i.kind !== "field" && i.kind !== "slot" || b(n, i, l.over)) continue;
+    const s = d === "copy" ? R(n, i, l.over, l.side) : h(n, i, l.over, l.side);
+    let y = null;
+    if (s.length) {
+      try {
+        n = g(n, s);
+      } catch {
+        continue;
+      }
+      f.push(...s), y = { kind: i.kind, field: i.field, group_key: e };
+    } else d === "move" && i.group_key === e && (y = i);
+    y && (l = { over: y, side: "after" });
+  }
+  return f;
+}
+function j(t, o) {
+  const r = t.every((u) => u.kind === "field") ? "field" : "item";
+  return `${o === "copy" ? "Copy" : "Move"} ${O(t.length, r)}`;
+}
+export {
+  T as carriedTargets,
+  R as copyAfterDrop,
+  Y as dropMany,
+  j as manyLabel
+};

package/dist/shared/components/layout-editor/dnd/node.js

@@ -1,37 +1,45 @@
-var J = Object.defineProperty;
-var M = (e, t, i) => t in e ? J(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
-var g = (e, t, i) => M(e, typeof t != "symbol" ? t + "" : t, i);
-import { useDraggable as _, useDroppable as w } from "@dnd-kit/core";
-import { createContext as P, useContext as S, useId as $, useRef as y, useCallback as R, useEffect as H, useSyncExternalStore as z } from "react";
+var I = Object.defineProperty;
+var J = (n, e, i) => e in n ? I(n, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[e] = i;
+var g = (n, e, i) => J(n, typeof e != "symbol" ? e + "" : e, i);
+import { useDraggable as K, useDroppable as _ } from "@dnd-kit/core";
+import { createContext as M, useContext as S, useId as $, useRef as y, useCallback as m, useEffect as H, useSyncExternalStore as w } from "react";
 import { isCanvasSlot as L } from "../../../lib/layout-ops.js";
-import { targetKey as E } from "../design-context.js";
-import { dndRole as O } from "./collision.js";
-const q = { activeKey: null, overKey: null, side: null, indicator: null };
-class Y {
+import { targetKey as z } from "../design-context.js";
+import { dndRole as E } from "./collision.js";
+const P = {
+  activeKey: null,
+  overKey: null,
+  side: null,
+  indicator: null,
+  carried: null,
+  copy: !1,
+  merge: null
+};
+class X {
   constructor() {
     g(this, "bundle", null);
-    g(this, "state", q);
-    /** Registered element → its pointer activator (dnd-kit's onPointerDown). */
+    g(this, "state", P);
+    /** Registered element → its activators (dnd-kit's onPointerDown, onTouchStart). */
     g(this, "activators", /* @__PURE__ */ new WeakMap());
     /** Droppable id → registered element (the overlay copies it, the drop line measures it). */
     g(this, "nodes", /* @__PURE__ */ new Map());
     /** A width is being dragged on the canvas (#2701): the column guides show. */
     g(this, "resizing", !1);
     g(this, "subs", /* @__PURE__ */ new Set());
-    g(this, "subscribe", (t) => (this.subs.add(t), () => {
-      this.subs.delete(t);
+    g(this, "subscribe", (e) => (this.subs.add(e), () => {
+      this.subs.delete(e);
     }));
   }
-  set(t) {
-    const i = { ...this.state, ...t }, n = this.state;
-    if (!(i.activeKey === n.activeKey && i.overKey === n.overKey && i.side === n.side && JSON.stringify(i.indicator) === JSON.stringify(n.indicator))) {
+  set(e) {
+    const i = { ...this.state, ...e }, t = this.state;
+    if (!(i.activeKey === t.activeKey && i.overKey === t.overKey && i.side === t.side && i.copy === t.copy && i.merge === t.merge && i.carried === t.carried && JSON.stringify(i.indicator) === JSON.stringify(t.indicator))) {
       this.state = i;
       for (const r of this.subs) r();
     }
   }
-  setResizing(t) {
-    if (this.resizing !== t) {
-      this.resizing = t;
+  setResizing(e) {
+    if (this.resizing !== e) {
+      this.resizing = e;
       for (const i of this.subs) i();
     }
   }
@@ -40,137 +48,139 @@ class Y {
     return this.state.activeKey !== null || this.resizing;
   }
   /** What one node renders from: a node re-renders only when its slice changes. */
-  slice(t) {
-    const i = this.state, n = i.overKey === t ? `${i.side}${JSON.stringify(i.indicator)}` : "";
-    return `${i.activeKey === t ? 1 : 0}|${n}`;
+  slice(e) {
+    const i = this.state, t = i.overKey === e ? `${i.side}${i.merge ?? ""}${JSON.stringify(i.indicator)}` : "";
+    return `${this.isCarried(e) ? 1 : 0}|${t}`;
+  }
+  /** Is the node `key` part of the current drag (the dragged one, or carried with it)? */
+  isCarried(e) {
+    var t;
+    const i = this.state;
+    return i.activeKey === e || (((t = i.carried) == null ? void 0 : t.includes(e)) ?? !1);
   }
   /** Remember `el` under `id` (and forget the element it replaces). */
-  track(t, i, n) {
-    i && this.nodes.get(t) === i && this.nodes.delete(t), n && this.nodes.set(t, n);
+  track(e, i, t) {
+    i && this.nodes.get(e) === i && this.nodes.delete(e), t && this.nodes.set(e, t);
   }
 }
-const m = P(null), F = {
+const C = M(null), q = {
   draggableProps: () => ({}),
   isDragging: () => !1,
   dropSlot: () => null
-}, x = () => () => {
+}, O = () => () => {
 };
-function G(e) {
-  if (!e) return 0;
-  if (e.hasAttribute("data-design-tab")) return e.getBoundingClientRect().height;
-  const t = Array.from(e.querySelectorAll("[data-design-group-header]")).find(
-    (i) => i.closest("[data-design-target]") === e
+function F(n) {
+  if (!n) return 0;
+  if (n.hasAttribute("data-design-tab")) return n.getBoundingClientRect().height;
+  const e = Array.from(n.querySelectorAll("[data-design-group-header]")).find(
+    (i) => i.closest("[data-design-target]") === n
   );
-  return t ? t.getBoundingClientRect().bottom - e.getBoundingClientRect().top : 0;
+  return e ? e.getBoundingClientRect().bottom - n.getBoundingClientRect().top : 0;
 }
-function tt(e, t, i = {}) {
+function Y(n, e, i = {}) {
   var N, A;
-  const n = S(m), r = E(t), c = $(), l = y(null), s = n != null && n.bundle ? O(n.bundle, t) : null, a = !!n && !!s && !i.disabled && e !== F, u = a ? r : `${r}#${c}`, d = s ? {
-    target: t,
+  const t = S(C), r = z(e), c = $(), l = y(null), s = t != null && t.bundle ? E(t.bundle, e) : null, a = !!t && !!s && !i.disabled && n !== q, u = a ? r : `${r}#${c}`, d = s ? {
+    target: e,
     role: s,
-    headerHeight: s.kind === "group" ? () => G(l.current) : void 0
-  } : void 0, o = _({ id: u, data: d, disabled: !a }), h = w({ id: u, data: d, disabled: !a || !!i.noDrop });
-  z(
-    (n == null ? void 0 : n.subscribe) ?? x,
-    () => (n == null ? void 0 : n.slice(r)) ?? "",
+    headerHeight: s.kind === "group" ? () => F(l.current) : void 0
+  } : void 0, o = K({ id: u, data: d, disabled: !a }), D = _({ id: u, data: d, disabled: !a || !!i.noDrop });
+  w(
+    (t == null ? void 0 : t.subscribe) ?? O,
+    () => (t == null ? void 0 : t.slice(r)) ?? "",
     () => ""
   );
-  const D = y(o.listeners);
-  D.current = o.listeners;
-  const { setNodeRef: p, setActivatorNodeRef: v } = o, f = h.setNodeRef, I = R(
-    (b) => {
-      n == null || n.track(r, l.current, b), l.current = b, p(b), f(b), v(b), b && n && n.activators.set(
-        b,
-        () => {
-          var C;
-          return (C = D.current) == null ? void 0 : C.onPointerDown;
-        }
-      );
+  const h = y(o.listeners);
+  h.current = o.listeners;
+  const { setNodeRef: b, setActivatorNodeRef: v } = o, f = D.setNodeRef, B = m(
+    (p) => {
+      t == null || t.track(r, l.current, p), l.current = p, b(p), f(p), v(p), p && t && t.activators.set(p, () => h.current);
     },
-    [r, v, p, f, n]
+    [r, v, b, f, t]
   );
-  if (!n)
+  if (!t)
     return {
-      props: e.draggableProps(t, i.disabled ? { disabled: !0 } : void 0),
-      dragging: e.isDragging(t),
-      slot: e.dropSlot(t),
-      indicator: ((N = e.dropIndicator) == null ? void 0 : N.call(e, t)) ?? null
+      props: n.draggableProps(e, i.disabled ? { disabled: !0 } : void 0),
+      dragging: n.isDragging(e),
+      slot: n.dropSlot(e),
+      indicator: ((N = n.dropIndicator) == null ? void 0 : N.call(n, e)) ?? null,
+      merge: null
     };
-  const k = n.state, K = k.overKey === r;
+  const k = t.state, R = k.overKey === r;
   return {
-    // The pointer activator is not spread here: LayoutDndProvider relays
-    // pointerdown to it. The keyboard one stays on the node.
-    props: a ? { ref: I, ...o.attributes, onKeyDown: (A = o.listeners) == null ? void 0 : A.onKeyDown } : {},
-    dragging: k.activeKey === r,
-    slot: K ? k.side : null,
-    indicator: K ? k.indicator : null
+    // The pointer and touch activators are not spread here: LayoutDndProvider
+    // relays pointerdown and touchstart to them. The keyboard one stays on the node.
+    props: a ? { ref: B, ...o.attributes, onKeyDown: (A = o.listeners) == null ? void 0 : A.onKeyDown } : {},
+    dragging: t.isCarried(r),
+    slot: R ? k.side : null,
+    indicator: R ? k.indicator : null,
+    merge: R ? k.merge : null
   };
 }
-function et(e) {
-  const t = S(m), i = `body:${e}`, n = t != null && t.bundle ? O(t.bundle, { kind: "group", key: e }) : null, r = (n == null ? void 0 : n.kind) === "group" && n.body, c = w({
+function ee(n) {
+  const e = S(C), i = `body:${n}`, t = e != null && e.bundle ? E(e.bundle, { kind: "group", key: n }) : null, r = (t == null ? void 0 : t.kind) === "group" && t.body, c = _({
     id: i,
-    data: { target: { kind: "group", key: e }, role: { kind: "body", key: e } },
+    data: { target: { kind: "group", key: n }, role: { kind: "body", key: n } },
     disabled: !r
   });
-  z(
-    (t == null ? void 0 : t.subscribe) ?? x,
-    () => (t == null ? void 0 : t.slice(i)) ?? "",
+  w(
+    (e == null ? void 0 : e.subscribe) ?? O,
+    () => (e == null ? void 0 : e.slice(i)) ?? "",
     () => ""
   );
-  const l = y(null), s = c.setNodeRef, a = R(
+  const l = y(null), s = c.setNodeRef, a = m(
     (d) => {
       const o = (d == null ? void 0 : d.parentElement) ?? null;
-      t == null || t.track(i, l.current, o), l.current = o, s(o), o && getComputedStyle(o).position === "static" && (o.style.position = "relative");
+      e == null || e.track(i, l.current, o), l.current = o, s(o), o && getComputedStyle(o).position === "static" && (o.style.position = "relative");
     },
-    [i, s, t]
-  ), u = (t == null ? void 0 : t.state.overKey) === i;
+    [i, s, e]
+  ), u = (e == null ? void 0 : e.state.overKey) === i;
   return {
     ref: a,
-    slot: u ? (t == null ? void 0 : t.state.side) ?? null : null,
-    indicator: u ? (t == null ? void 0 : t.state.indicator) ?? null : null
+    slot: u ? (e == null ? void 0 : e.state.side) ?? null : null,
+    indicator: u ? (e == null ? void 0 : e.state.indicator) ?? null : null
   };
 }
-const B = "__add__";
-function T(e, t) {
-  return t === "header" ? { kind: "header" } : L({ field: e, group_key: null }) ? { kind: "group", key: e, parent: null, body: !1 } : { kind: "item", zone: B };
+const x = "__add__";
+function G(n, e) {
+  return e === "header" ? { kind: "header" } : L({ field: n, group_key: null }) ? { kind: "group", key: n, parent: null, body: !1 } : { kind: "item", zone: x };
 }
-const W = 400;
-function nt(e) {
-  const t = S(m), i = $(), n = !!t && !!e, r = { kind: "field", field: (e == null ? void 0 : e.field) ?? i, group_key: B }, c = E(r), l = e ? {
+const T = 400;
+function te(n) {
+  const e = S(C), i = $(), t = !!e && !!n, r = { kind: "field", field: (n == null ? void 0 : n.field) ?? i, group_key: x }, c = z(r), l = n ? {
     target: r,
-    role: T(e.field, e.to),
+    role: G(n.field, n.to),
     add: {
-      field: e.field,
-      label: e.label,
-      patch: e.patch,
-      onAdded: e.onAdded
+      field: n.field,
+      label: n.label,
+      patch: n.patch,
+      onAdded: n.onAdded
     }
-  } : void 0, s = _({ id: n ? c : `${c}#${i}`, data: l, disabled: !n }), a = y(null), { setNodeRef: u, setActivatorNodeRef: d } = s, o = R(
+  } : void 0, s = K({ id: t ? c : `${c}#${i}`, data: l, disabled: !t }), a = y(null), { setNodeRef: u, setActivatorNodeRef: d } = s, o = m(
     (f) => {
-      t == null || t.track(c, a.current, f), a.current = f, u(f), d(f);
+      e == null || e.track(c, a.current, f), a.current = f, u(f), d(f);
     },
-    [c, d, u, t]
-  ), h = y(0), D = y(!1);
+    [c, d, u, e]
+  ), D = y(0), h = y(!1);
   H(() => {
-    D.current && !s.isDragging && (h.current = Date.now()), D.current = s.isDragging;
+    h.current && !s.isDragging && (D.current = Date.now()), h.current = s.isDragging;
   }, [s.isDragging]);
-  const p = s.isDragging, v = R(
-    () => p || Date.now() - h.current < W,
-    [p]
+  const b = s.isDragging, v = m(
+    () => b || Date.now() - D.current < T,
+    [b]
   );
   return {
-    props: n ? { ref: o, ...s.attributes, ...s.listeners } : {},
-    dragging: p,
+    props: t ? { ref: o, ...s.attributes, ...s.listeners } : {},
+    dragging: b,
     clickBlocked: v
   };
 }
 export {
-  Y as DndStore,
-  m as DndStoreContext,
-  q as IDLE,
-  F as NO_DND,
-  T as addRole,
-  nt as useAddDragSource,
-  tt as useDesignDndNode,
-  et as useDesignDropBody
+  X as DndStore,
+  C as DndStoreContext,
+  P as IDLE,
+  q as NO_DND,
+  G as addRole,
+  te as useAddDragSource,
+  Y as useDesignDndNode,
+  ee as useDesignDropBody
 };

package/dist/shared/components/layout-editor/dnd/sensors.js

@@ -0,0 +1,23 @@
+var s = Object.defineProperty;
+var c = (t, e, n) => e in t ? s(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var r = (t, e, n) => c(t, typeof e != "symbol" ? e + "" : e, n);
+import { PointerSensor as a } from "@dnd-kit/core";
+import { TouchSensor as h } from "@dnd-kit/core";
+const d = { distance: 4 }, p = { delay: 250, tolerance: 8 };
+class i extends a {
+}
+r(i, "activators", [
+  {
+    eventName: "onPointerDown",
+    handler: (e, n) => {
+      var o;
+      return ((o = e.nativeEvent) == null ? void 0 : o.pointerType) === "touch" ? !1 : a.activators[0].handler(e, n);
+    }
+  }
+]);
+export {
+  d as MOUSE_ACTIVATION,
+  i as MousePointerSensor,
+  p as TOUCH_ACTIVATION,
+  h as TouchSensor
+};