@nivaro/react 0.3.35 → 0.3.36

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

@@ -1,242 +1,278 @@
-import { jsx as C, jsxs as W } from "react/jsx-runtime";
-import { useSensors as tt, useSensor as T, PointerSensor as et, KeyboardSensor as nt, KeyboardCode as D, DndContext as rt, MeasuringStrategy as ot, DragOverlay as st } from "@dnd-kit/core";
-import { getEventCoordinates as it } from "@dnd-kit/utilities";
-import { useState as _, useRef as K, useMemo as B, useCallback as at, createContext as lt, useLayoutEffect as dt, useContext as ct } from "react";
-import { createPortal as ut } from "react-dom";
-import { UNGROUPED_KEY as z } from "../../../lib/layout-ops.js";
-import { targetKey as m } from "../design-context.js";
-import { typedKeyboardCoordinates as ft, nodeData as k } from "./collision.js";
-import { DndStore as pt, DndStoreContext as gt, NO_DND as yt, IDLE as G } from "./node.js";
-import { railAwareCollision as ht, railDropData as q, copyableGroup as Y } from "./rail-drop.js";
-import { dropLabel as bt, landsOnCanvas as j, placeAfterDrop as mt, orderAfterDrop as Ct } from "./order.js";
-const F = lt(yt);
-function Gt() {
-  return ct(F);
+import { jsx as D, jsxs as lt } from "react/jsx-runtime";
+import { useSensors as dt, useSensor as j, PointerSensor as ct, KeyboardSensor as ut, KeyboardCode as x, DndContext as ft, MeasuringStrategy as pt, DragOverlay as gt } from "@dnd-kit/core";
+import { getEventCoordinates as mt } from "@dnd-kit/utilities";
+import { useState as R, useRef as N, useMemo as H, useCallback as J, createContext as yt, useSyncExternalStore as ht, useLayoutEffect as bt, useContext as St } from "react";
+import { createPortal as z } from "react-dom";
+import { UNGROUPED_KEY as Q } from "../../../lib/layout-ops.js";
+import { targetKey as C } from "../design-context.js";
+import { typedKeyboardCoordinates as Ct, nodeData as k } from "./collision.js";
+import { DndStore as Dt, DndStoreContext as wt, NO_DND as kt, IDLE as F } from "./node.js";
+import { railAwareCollision as xt, railDropData as V, copyableGroup as X } from "./rail-drop.js";
+import { TrashZone as Rt } from "./TrashZone.js";
+import { trashAwareCollision as Et, TRASH_DROP_ID as U, trashDropData as K, trashPlan as T } from "./trash-drop.js";
+import { dropLabel as Pt, landsOnCanvas as Z, placeAfterDrop as At, orderAfterDrop as Kt } from "./order.js";
+const W = yt(kt);
+function Qt() {
+  return St(W);
 }
-const A = 3, P = 20;
-function St(u, t, e, p) {
-  var o;
-  if (u.body) {
-    const S = e - 2 * P, b = p && S > 0 ? Math.min(p, S) : void 0, x = b ? { left: P, width: b } : { left: P, right: P };
-    return u.side === "before" ? { top: (((o = t.headerHeight) == null ? void 0 : o.call(t)) ?? 0) + 4, height: A, ...x } : { bottom: 8, height: A, ...x };
+const O = 3, $ = 20;
+function Ot(f, n, o, c) {
+  var r;
+  if (f.body) {
+    const w = o - 2 * $, h = c && w > 0 ? Math.min(c, w) : void 0, E = h ? { left: $, width: h } : { left: $, right: $ };
+    return f.side === "before" ? { top: (((r = n.headerHeight) == null ? void 0 : r.call(n)) ?? 0) + 4, height: O, ...E } : { bottom: 8, height: O, ...E };
   }
-  if (u.axis === "x")
-    return { top: 0, bottom: 0, width: A, [u.side === "before" ? "left" : "right"]: -4 };
-  const y = t.role.kind === "item" && p && e ? Math.min(p, e) : void 0;
+  if (f.axis === "x")
+    return { top: 0, bottom: 0, width: O, [f.side === "before" ? "left" : "right"]: -4 };
+  const g = n.role.kind === "item" && c && o ? Math.min(c, o) : void 0;
   return {
-    [u.side === "before" ? "top" : "bottom"]: -6,
-    height: A,
+    [f.side === "before" ? "top" : "bottom"]: -6,
+    height: O,
     left: 0,
-    ...y ? { width: y } : { right: 0 }
+    ...g ? { width: g } : { right: 0 }
   };
 }
-const wt = (u, t) => {
-  var e, p;
-  return ((p = (e = (u ?? []).find((y) => y.id === t)) == null ? void 0 : e.data) == null ? void 0 : p.hint) ?? null;
+const $t = (f, n) => {
+  var o, c;
+  return ((c = (o = (f ?? []).find((g) => g.id === n)) == null ? void 0 : o.data) == null ? void 0 : c.hint) ?? null;
 };
-function Dt(u) {
-  for (let t = u; t && t !== document.documentElement; ) {
-    const e = getComputedStyle(t);
-    if (e.transform && e.transform !== "none" || e.perspective && e.perspective !== "none" || e.filter && e.filter !== "none" || /paint|layout|strict|content/.test(e.contain ?? "") || /transform|perspective|filter/.test(e.willChange ?? "")) {
-      const y = t.getBoundingClientRect();
-      return { x: y.left + t.clientLeft - t.scrollLeft, y: y.top + t.clientTop - t.scrollTop };
+function _t(f) {
+  for (let n = f; n && n !== document.documentElement; ) {
+    const o = getComputedStyle(n);
+    if (o.transform && o.transform !== "none" || o.perspective && o.perspective !== "none" || o.filter && o.filter !== "none" || /paint|layout|strict|content/.test(o.contain ?? "") || /transform|perspective|filter/.test(o.willChange ?? "")) {
+      const g = n.getBoundingClientRect();
+      return { x: g.left + n.clientLeft - n.scrollLeft, y: g.top + n.clientTop - n.scrollTop };
     }
-    t = t.parentElement;
+    n = n.parentElement;
   }
   return { x: 0, y: 0 };
 }
-function kt(u) {
-  const t = u.cloneNode(!0);
-  for (const e of [t, ...Array.from(t.querySelectorAll("*"))])
-    for (const p of ["data-design-target", "data-selected", "data-drop-slot", "id"])
-      e.removeAttribute(p);
-  if (t.classList.remove("opacity-40"), t.style.clipPath) {
-    t.style.clipPath = "none", t.style.transform = "none", t.style.overflow = "visible", t.style.borderRadius = "0", t.style.height = "100%";
-    for (const e of Array.from(t.querySelectorAll("*")))
-      e.style.clipPath && (e.style.clipPath = "none", e.style.borderRadius = "0");
+function Nt(f) {
+  const n = f.cloneNode(!0);
+  for (const o of [n, ...Array.from(n.querySelectorAll("*"))])
+    for (const c of ["data-design-target", "data-selected", "data-drop-slot", "id"])
+      o.removeAttribute(c);
+  if (n.classList.remove("opacity-40"), n.style.clipPath) {
+    n.style.clipPath = "none", n.style.transform = "none", n.style.overflow = "visible", n.style.borderRadius = "0", n.style.height = "100%";
+    for (const o of Array.from(n.querySelectorAll("*")))
+      o.style.clipPath && (o.style.clipPath = "none", o.style.borderRadius = "0");
   }
-  for (const e of Array.from(t.querySelectorAll("[data-design-drop-indicator]"))) e.remove();
-  for (const e of ["role", "tabindex", "aria-describedby", "aria-pressed", "aria-hidden"])
-    t.removeAttribute(e);
-  return t.removeAttribute("data-header-folded"), t.setAttribute("inert", ""), Object.assign(t.style, { margin: "0", width: "100%", opacity: "1", outline: "none" }), t;
+  for (const o of Array.from(n.querySelectorAll("[data-design-drop-indicator]"))) o.remove();
+  for (const o of ["role", "tabindex", "aria-describedby", "aria-pressed", "aria-hidden"])
+    n.removeAttribute(o);
+  return n.removeAttribute("data-header-folded"), n.setAttribute("inert", ""), Object.assign(n.style, { margin: "0", width: "100%", opacity: "1", outline: "none" }), n;
 }
-const R = 320;
-function xt({ node: u }) {
-  const t = K(null);
-  return dt(() => {
-    const e = t.current;
-    if (e)
-      return e.replaceChildren(kt(u)), () => e.replaceChildren();
-  }, [u]), /* @__PURE__ */ C(
+const _ = 320;
+function It({ node: f, store: n }) {
+  const o = N(null), c = ht(
+    n.subscribe,
+    J(() => n.state.overKey === U, [n]),
+    () => !1
+  );
+  return bt(() => {
+    const g = o.current;
+    if (g)
+      return g.replaceChildren(Nt(f)), () => g.replaceChildren();
+  }, [f]), /* @__PURE__ */ D(
     "div",
     {
-      ref: t,
+      ref: o,
       "aria-hidden": !0,
       "data-design-drag-preview": "",
-      className: "pointer-events-none h-full w-full cursor-grabbing overflow-hidden rounded-lg bg-white shadow-xl ring-1 ring-slate-900/10 dark:bg-card dark:ring-white/10"
+      "data-over-trash": c ? "" : void 0,
+      style: {
+        transformOrigin: "top left",
+        transform: c ? "scale(0.4)" : void 0,
+        opacity: c ? 0.45 : void 0
+      },
+      className: "pointer-events-none h-full w-full cursor-grabbing overflow-hidden rounded-lg bg-white shadow-xl ring-1 ring-slate-900/10 transition-[transform,opacity] duration-150 ease-out motion-reduce:transition-none dark:bg-card dark:ring-white/10"
     }
   );
 }
-const L = { kind: "group", key: z }, Et = { droppable: { strategy: ot.Always } }, Ot = {
-  start: [D.Space],
-  cancel: [D.Esc],
-  end: [D.Space, D.Enter, D.Tab]
-}, At = { threshold: { x: 0.08, y: 0.15 }, acceleration: 12 }, Pt = {
+const L = { kind: "group", key: Q }, Mt = { droppable: { strategy: pt.Always } }, Tt = {
+  start: [x.Space],
+  cancel: [x.Esc],
+  end: [x.Space, x.Enter, x.Tab]
+}, Lt = {
   draggable: "Press space to pick this up. Use the arrow keys to choose where it goes, then space or enter to drop it, or escape to cancel."
 };
-function qt({
-  bundle: u,
-  apply: t,
-  onDragActive: e,
-  onDropOnLayout: p,
-  children: y
+function Wt({
+  bundle: f,
+  apply: n,
+  onDragActive: o,
+  onDropOnLayout: c,
+  children: g
 }) {
-  const [o] = _(() => new pt());
-  o.bundle = u;
-  const S = K(t);
-  S.current = t;
-  const b = K(p);
-  b.current = p;
-  const [x] = _(
-    () => ht((n) => !!b.current && Y(o.bundle, n) != null)
-  ), H = B(
+  const [r] = R(() => new Dt());
+  r.bundle = f;
+  const w = N(n);
+  w.current = n;
+  const h = N(c);
+  h.current = c;
+  const [E] = R(
+    () => Et(
+      xt(
+        (e) => !!h.current && X(r.bundle, e) != null
+      ),
+      (e) => T(r.bundle, e) != null
+    )
+  ), [v] = R(() => ({
+    threshold: { x: 0.08, y: 0.15 },
+    acceleration: 12,
+    canScroll: () => r.state.overKey !== U
+  })), [I, B] = R(null), tt = H(
     () => ({
       draggableProps: () => ({}),
-      isDragging: (n) => o.state.activeKey === m(n),
-      dropSlot: (n) => o.state.overKey === m(n) ? o.state.side : null,
-      dropIndicator: (n) => o.state.overKey === m(n) ? o.state.indicator : null
+      isDragging: (e) => r.state.activeKey === C(e),
+      dropSlot: (e) => r.state.overKey === C(e) ? r.state.side : null,
+      dropIndicator: (e) => r.state.overKey === C(e) ? r.state.indicator : null
     }),
-    [o]
-  ), V = tt(
-    T(et, { activationConstraint: { distance: 4 } }),
-    T(nt, {
-      coordinateGetter: ft,
-      keyboardCodes: Ot
+    [r]
+  ), et = dt(
+    j(ct, { activationConstraint: { distance: 4 } }),
+    j(ut, {
+      coordinateGetter: Ct,
+      keyboardCodes: Tt
     })
-  ), [w, M] = _(null), h = at(
-    (n) => {
-      var l, i, c, f;
-      const r = k(n == null ? void 0 : n.data.current);
-      if (!r) return "this";
-      if (r.add) return r.add.label;
-      const d = r.target;
+  ), [b, G] = R(null), m = J(
+    (e) => {
+      var l, s, p, u;
+      const t = k(e == null ? void 0 : e.data.current);
+      if (!t) return "this";
+      if (t.add) return t.add.label;
+      const d = t.target;
       if (d.kind === "group")
-        return d.key === "__ungrouped__" ? "Ungrouped fields" : ((i = (l = o.bundle) == null ? void 0 : l.groups.find((g) => g.key === d.key)) == null ? void 0 : i.label) ?? "section";
-      const a = o.nodes.get(m(d));
-      return ((f = (c = a == null ? void 0 : a.querySelector("label, [data-header-label]")) == null ? void 0 : c.textContent) == null ? void 0 : f.trim()) || (d.kind === "slot" ? "panel" : "field");
+        return d.key === "__ungrouped__" ? "Ungrouped fields" : ((s = (l = r.bundle) == null ? void 0 : l.groups.find((y) => y.key === d.key)) == null ? void 0 : s.label) ?? "section";
+      const i = r.nodes.get(C(d));
+      return ((u = (p = i == null ? void 0 : i.querySelector("label, [data-header-label]")) == null ? void 0 : p.textContent) == null ? void 0 : u.replace(/\s*\*\s*$/, "").trim()) || (d.kind === "slot" ? "panel" : "field");
     },
-    [o]
-  ), X = B(
+    [r]
+  ), nt = H(
     () => ({
-      onDragStart: ({ active: n }) => `Picked up ${h(n)}.`,
-      onDragOver: ({ active: n, over: r }) => r ? `${h(n)} is over ${h(r)}.` : `${h(n)} is not over a place it can go.`,
-      onDragEnd: ({ active: n, over: r }) => r ? `Dropped ${h(n)} by ${h(r)}.` : `Dropped ${h(n)}.`,
-      onDragCancel: ({ active: n }) => `Cancelled. ${h(n)} stays where it was.`
+      onDragStart: ({ active: e }) => `Picked up ${m(e)}.`,
+      onDragOver: ({ active: e, over: t }) => t && K(t.data.current) ? `${m(e)} is over Remove. Drop it to take it off this form.` : t ? `${m(e)} is over ${m(t)}.` : `${m(e)} is not over a place it can go.`,
+      onDragEnd: ({ active: e, over: t }) => t && K(t.data.current) ? `Removed ${m(e)} from this form.` : t ? `Dropped ${m(e)} by ${m(t)}.` : `Dropped ${m(e)}.`,
+      onDragCancel: ({ active: e }) => `Cancelled. ${m(e)} stays where it was.`
     }),
-    [h]
-  ), $ = () => {
-    o.set(G), M(null), e == null || e(!1);
-  }, J = ({ active: n, activatorEvent: r }) => {
-    e == null || e(!0);
-    const d = k(n.data.current);
+    [m]
+  ), P = () => {
+    r.set(F), G(null), B(null), o == null || o(!1);
+  }, rt = ({ active: e, activatorEvent: t }) => {
+    o == null || o(!0);
+    const d = k(e.data.current);
     if (!d) return;
-    const a = m(d.target);
-    o.set({ ...G, activeKey: a });
-    const s = o.nodes.get(a);
-    if (!s || typeof document > "u") return;
-    const l = s.closest("[role=dialog]") ?? document.body, i = Dt(l), c = s.getBoundingClientRect(), f = it(r), g = f ? f.y - c.top : 0, O = c.height > R && g > R - 32 ? g - R / 2 : 0, v = ({ transform: N }) => ({
-      ...N,
-      x: N.x - i.x,
-      y: N.y - i.y + O
+    const i = C(d.target);
+    r.set({ ...F, activeKey: i });
+    const a = T(r.bundle, d);
+    B(a ? { plan: a, name: m(e) } : null);
+    const l = r.nodes.get(i);
+    if (!l || typeof document > "u") return;
+    const s = l.closest("[role=dialog]") ?? document.body, p = _t(s), u = l.getBoundingClientRect(), y = mt(t), S = y ? y.y - u.top : 0, at = u.height > _ && S > _ - 32 ? S - _ / 2 : 0, it = ({ transform: M }) => ({
+      ...M,
+      x: M.x - p.x,
+      y: M.y - p.y + at
     });
-    M({ node: s, host: l, height: Math.min(c.height, R), shift: v });
-  }, E = K({
+    G({ node: l, host: s, height: Math.min(u.height, _), shift: it });
+  }, A = N({
     bundle: null,
     map: /* @__PURE__ */ new Map()
-  }), I = (n, r, d) => {
-    const a = k(n.data.current), s = k(r == null ? void 0 : r.data.current), l = wt(d, r == null ? void 0 : r.id), i = o.bundle;
-    if (!a || !s || !l || !i || !r) return null;
-    E.current.bundle !== i && (E.current = { bundle: i, map: /* @__PURE__ */ new Map() });
-    const c = `${n.id}|${r.id}|${l.side}`;
-    let f = E.current.map.get(c);
-    return f || (f = a.add ? mt(i, a.add.field, s.target, l.side, a.add.patch) : Ct(i, a.target, s.target, l.side), j(i, a.target, s.target) && !o.nodes.has(m(L)) && (f = []), E.current.map.set(c, f)), { a, o: s, hint: l, ops: f };
-  }, U = ({ active: n, over: r, collisions: d }) => {
-    var g, O;
-    if (r && q(r.data.current)) {
-      o.set({ overKey: String(r.id), side: null, indicator: null });
+  }), q = (e, t, d) => {
+    const i = k(e.data.current), a = k(t == null ? void 0 : t.data.current), l = $t(d, t == null ? void 0 : t.id), s = r.bundle;
+    if (!i || !a || !l || !s || !t) return null;
+    A.current.bundle !== s && (A.current = { bundle: s, map: /* @__PURE__ */ new Map() });
+    const p = `${e.id}|${t.id}|${l.side}`;
+    let u = A.current.map.get(p);
+    return u || (u = i.add ? At(s, i.add.field, a.target, l.side, i.add.patch) : Kt(s, i.target, a.target, l.side), Z(s, i.target, a.target) && !r.nodes.has(C(L)) && (u = []), A.current.map.set(p, u)), { a: i, o: a, hint: l, ops: u };
+  }, Y = ({ active: e, over: t, collisions: d }) => {
+    var y, S;
+    if (t && K(t.data.current)) {
+      r.set({ overKey: U, side: null, indicator: null });
+      return;
+    }
+    if (t && V(t.data.current)) {
+      r.set({ overKey: String(t.id), side: null, indicator: null });
       return;
     }
-    const a = I(n, r, d);
-    if (!a || a.ops.length === 0 || !r) {
-      o.set({ overKey: null, side: null, indicator: null });
+    const i = q(e, t, d);
+    if (!i || i.ops.length === 0 || !t) {
+      r.set({ overKey: null, side: null, indicator: null });
       return;
     }
-    let { o: s, hint: l } = a, i = String(r.id);
-    o.bundle && j(o.bundle, a.a.target, s.target) && (i = m(L), s = {
+    let { o: a, hint: l } = i, s = String(t.id);
+    r.bundle && Z(r.bundle, i.a.target, a.target) && (s = C(L), a = {
       target: L,
-      role: { kind: "group", key: z, parent: null, body: !0 }
+      role: { kind: "group", key: Q, parent: null, body: !0 }
     }, l = { side: l.side, axis: "y", body: !1 });
-    const c = ((g = o.nodes.get(i)) == null ? void 0 : g.getBoundingClientRect().width) ?? 0, f = ((O = n.rect.current.initial) == null ? void 0 : O.width) ?? null;
-    o.set({
-      overKey: i,
+    const p = ((y = r.nodes.get(s)) == null ? void 0 : y.getBoundingClientRect().width) ?? 0, u = ((S = e.rect.current.initial) == null ? void 0 : S.width) ?? null;
+    r.set({
+      overKey: s,
       side: l.side,
-      indicator: St(l, s, c, f)
+      indicator: Ot(l, a, p, u)
     });
-  }, Q = ({ active: n, over: r, collisions: d }) => {
-    var c, f;
-    const a = q(r == null ? void 0 : r.data.current);
-    if (a) {
-      const g = Y(o.bundle, k(n.data.current));
-      $(), g && ((c = b.current) == null || c.call(b, g, a.railLayoutId));
+  }, ot = ({ active: e, over: t, collisions: d }) => {
+    var p, u;
+    if (K(t == null ? void 0 : t.data.current)) {
+      const y = T(r.bundle, k(e.data.current)), S = m(e);
+      P(), y && w.current(y.ops, { label: `Remove ${S}` });
+      return;
+    }
+    const i = V(t == null ? void 0 : t.data.current);
+    if (i) {
+      const y = X(r.bundle, k(e.data.current));
+      P(), y && ((p = h.current) == null || p.call(h, y, i.railLayoutId));
       return;
     }
-    const s = I(n, r, d), l = o.bundle;
-    if ($(), !(s != null && s.ops.length) || !l) return;
-    const i = s.a.add;
-    S.current(s.ops, { label: i ? `Add ${i.label}` : bt(l, s.a.target) }), (f = i == null ? void 0 : i.onAdded) == null || f.call(i, s.ops);
-  }, Z = (n) => {
-    var d, a, s, l, i, c;
-    if ((a = (d = n.target) == null ? void 0 : d.closest) != null && a.call(d, "[data-design-resize]")) return;
-    const r = (l = (s = n.target) == null ? void 0 : s.closest) == null ? void 0 : l.call(s, "[data-design-target]");
-    r && ((c = (i = o.activators.get(r)) == null ? void 0 : i()) == null || c(n));
+    const a = q(e, t, d), l = r.bundle;
+    if (P(), !(a != null && a.ops.length) || !l) return;
+    const s = a.a.add;
+    w.current(a.ops, { label: s ? `Add ${s.label}` : Pt(l, a.a.target) }), (u = s == null ? void 0 : s.onAdded) == null || u.call(s, a.ops);
+  }, st = (e) => {
+    var d, i, a, l, s, p;
+    if ((i = (d = e.target) == null ? void 0 : d.closest) != null && i.call(d, "[data-design-resize]")) return;
+    const t = (l = (a = e.target) == null ? void 0 : a.closest) == null ? void 0 : l.call(a, "[data-design-target]");
+    t && ((p = (s = r.activators.get(t)) == null ? void 0 : s()) == null || p(e));
   };
-  return /* @__PURE__ */ C(gt.Provider, { value: o, children: /* @__PURE__ */ C(F.Provider, { value: H, children: /* @__PURE__ */ W(
-    rt,
+  return /* @__PURE__ */ D(wt.Provider, { value: r, children: /* @__PURE__ */ D(W.Provider, { value: tt, children: /* @__PURE__ */ lt(
+    ft,
     {
-      sensors: V,
-      collisionDetection: x,
-      measuring: Et,
-      autoScroll: At,
-      accessibility: { announcements: X, screenReaderInstructions: Pt },
-      onDragStart: J,
-      onDragMove: U,
-      onDragOver: U,
-      onDragEnd: Q,
-      onDragCancel: $,
+      sensors: et,
+      collisionDetection: E,
+      measuring: Mt,
+      autoScroll: v,
+      accessibility: { announcements: nt, screenReaderInstructions: Lt },
+      onDragStart: rt,
+      onDragMove: Y,
+      onDragOver: Y,
+      onDragEnd: ot,
+      onDragCancel: P,
       children: [
-        /* @__PURE__ */ C("div", { className: "contents", onPointerDownCapture: Z, children: y }),
-        w && ut(
-          /* @__PURE__ */ C(
-            st,
+        /* @__PURE__ */ D("div", { className: "contents", onPointerDownCapture: st, children: g }),
+        b && z(
+          /* @__PURE__ */ D(
+            gt,
             {
               dropAnimation: null,
               zIndex: 1e3,
-              modifiers: [w.shift],
-              style: { height: w.height },
-              children: /* @__PURE__ */ C(xt, { node: w.node })
+              modifiers: [b.shift],
+              style: { height: b.height },
+              children: /* @__PURE__ */ D(It, { node: b.node, store: r })
             }
           ),
-          w.host
+          b.host
+        ),
+        I && z(
+          /* @__PURE__ */ D(Rt, { store: r, plan: I.plan, name: I.name }),
+          (b == null ? void 0 : b.host) ?? document.body
         )
       ]
     }
   ) }) });
 }
 export {
-  qt as LayoutDndProvider,
-  yt as NO_DND,
-  kt as designClone,
-  Dt as fixedOrigin,
-  St as indicatorStyle,
-  Gt as useLayoutDnd
+  Wt as LayoutDndProvider,
+  kt as NO_DND,
+  Nt as designClone,
+  _t as fixedOrigin,
+  Ot as indicatorStyle,
+  Qt as useLayoutDnd
 };

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

@@ -0,0 +1,68 @@
+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 = `
+@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({
+  store: e,
+  plan: r,
+  name: d
+}) {
+  const { setNodeRef: i } = c({
+    id: n,
+    data: { layoutTrash: !0 }
+  }), t = h(
+    e.subscribe,
+    x(() => e.state.overKey === n, [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";
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: i,
+      "data-layout-trash": "",
+      "data-over": t ? "" : void 0,
+      style: { left: "50%", transform: "translateX(-50%)" },
+      className: o(
+        "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"
+      ),
+      children: [
+        /* @__PURE__ */ a("style", { children: b }),
+        /* @__PURE__ */ a(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: o(
+              "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"
+            ),
+            children: /* @__PURE__ */ a(m, { 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(
+            "span",
+            {
+              className: o(
+                "block truncate text-[11.5px]",
+                t ? "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"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  w as TrashZone
+};

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

@@ -1,7 +1,7 @@
 import { useDroppable as d } from "@dnd-kit/core";
 import { useContext as f, useSyncExternalStore as s, useCallback as c } from "react";
 import { UNGROUPED_KEY as u } from "../../../lib/layout-ops.js";
-import { nodeData as b, typedCollision as m, TABLE_FORM_ZONES as y } from "./collision.js";
+import { TABLE_FORM_ZONES as b, nodeData as m, typedCollision as y } from "./collision.js";
 import { DndStoreContext as C } from "./node.js";
 const D = "rail-layout:", k = (e) => `${D}${e}`;
 function E(e) {
@@ -11,19 +11,19 @@ function E(e) {
 function _(e, o) {
   if (!e || !o || o.add || o.target.kind !== "group" || o.role.kind !== "group") return null;
   const t = o.target.key;
-  return t === u || y.includes(t) ? null : e.groups.some((r) => r.key === t) ? t : null;
+  return t === u || b.includes(t) ? null : e.groups.some((r) => r.key === t) ? t : null;
 }
 const R = (e, o) => o.x >= e.left && o.x <= e.right && o.y >= e.top && o.y <= e.bottom;
 function I(e) {
   return (t) => {
     const r = t.pointerCoordinates;
-    if (r && e(b(t.active.data.current)))
+    if (r && e(m(t.active.data.current)))
       for (const n of t.droppableContainers) {
         if (n.disabled || !E(n.data.current)) continue;
         const i = t.droppableRects.get(n.id);
         if (i && R(i, r)) return [{ id: n.id, data: { droppableContainer: n } }];
       }
-    return m(t);
+    return y(t);
   };
 }
 const x = { subscribe: () => () => {

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

@@ -0,0 +1,52 @@
+import { UNGROUPED_KEY as p, HEADER_GROUP_KEY as d } from "../../../lib/layout-ops.js";
+import { nodeData as f, TABLE_FORM_ZONES as k } from "./collision.js";
+const g = "layout-trash";
+function y(o) {
+  const e = o;
+  return (e == null ? void 0 : e.layoutTrash) === !0 ? e : null;
+}
+function D(o, e) {
+  if (!o || !e || e.add) return null;
+  const t = e.target;
+  if (t.kind === "group") {
+    if (t.key === p || k.includes(t.key) || !o.groups.some((r) => r.key === t.key)) return null;
+    const n = [], l = (r) => {
+      for (const a of o.groups) a.parent_key === r && l(a.key);
+      n.push(r);
+    };
+    l(t.key);
+    const u = new Set(n), c = o.placements.filter((r) => r.group_key && u.has(r.group_key)).length;
+    return {
+      ops: n.map((r) => ({ op: "group_remove", key: r, placements: "delete" })),
+      kind: "section",
+      holds: c
+    };
+  }
+  const s = t.kind === "header" ? d : t.group_key ?? null;
+  return o.placements.some(
+    (n) => n.field === t.field && (n.group_key ?? null) === s
+  ) ? {
+    ops: [{ op: "remove", at: { field: t.field, group_key: s } }],
+    kind: "field",
+    holds: 0
+  } : null;
+}
+const _ = (o, e) => e.x >= o.left && e.x <= o.right && e.y >= o.top && e.y <= o.bottom;
+function E(o, e) {
+  return (t) => {
+    const s = t.pointerCoordinates;
+    if (s && e(f(t.active.data.current)))
+      for (const i of t.droppableContainers) {
+        if (i.disabled || !y(i.data.current)) continue;
+        const n = t.droppableRects.get(i.id);
+        if (n && _(n, s)) return [{ id: i.id, data: { droppableContainer: i } }];
+      }
+    return o(t);
+  };
+}
+export {
+  g as TRASH_DROP_ID,
+  E as trashAwareCollision,
+  y as trashDropData,
+  D as trashPlan
+};

package/dist/shared/components/layout-editor/inspector/kit.js

@@ -154,7 +154,7 @@ function ue({
 }) {
   var p;
   const u = h(C);
-  return /* @__PURE__ */ d("div", { "data-setting": e, "data-setting-row": "", className: m("space-y-1.5", s), children: [
+  return /* @__PURE__ */ d("div", { "data-setting": e, "data-setting-row": "", className: m("relative space-y-1.5", s), children: [
     /* @__PURE__ */ d("div", { className: "flex min-h-5 items-center justify-between gap-3", children: [
       /* @__PURE__ */ d("span", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5", children: [
         /* @__PURE__ */ t("span", { className: ae, children: o }),