@nivaro/react 0.3.36 → 0.3.38

package/dist/shared/components/layout-editor/AddPanel.js

@@ -1,23 +1,26 @@
-import { jsxs as d, jsx as o, Fragment as K } from "react/jsx-runtime";
-import { useQuery as te } from "@tanstack/react-query";
-import { Search as re, LayoutPanelTop as oe, Sigma as ae, Plus as Q, CopyPlus as ie, Check as ne } from "lucide-react";
-import { useState as W, useMemo as Y } from "react";
-import { useNivaroClient as se } from "../../context.js";
-import { get as le } from "../../lib/commands.js";
-import { HEADER_GROUP_KEY as R, isCanvasSlot as de } from "../../lib/layout-ops.js";
-import { listLayoutSlots as ce } from "../../lib/layout-slots.js";
-import { nextDisplayFormulaField as me } from "../../lib/placement-behaviour.js";
-import { titleCase as $, cn as X } from "../../lib/utils.js";
-import { sectionOp as ue, fieldSpot as j, slotSpot as pe, placeOp as z } from "./add-target.js";
-import { MeaningSuggestions as _e } from "./ai-forms/MeaningSuggestions.js";
-import { useAddDragSource as fe } from "./dnd/node.js";
-import { useFormFields as ge } from "./inspect/inspect-api.js";
-import { textMatcher as he } from "./nav/find.js";
-import { useOverviewFields as xe } from "./overview/overview-api.js";
-import { LibraryRows as ye } from "./reuse/LibraryRows.js";
+import { jsxs as i, jsx as r, Fragment as G } from "react/jsx-runtime";
+import { useQuery as se } from "@tanstack/react-query";
+import { Search as ie, Undo2 as de, LayoutPanelTop as ce, ListPlus as me, Sigma as ue, Plus as Z, CopyPlus as pe, Check as fe } from "lucide-react";
+import { useState as P, useMemo as q } from "react";
+import { toast as ge } from "sonner";
+import { useNivaroClient as he } from "../../context.js";
+import { get as _e } from "../../lib/commands.js";
+import { HEADER_GROUP_KEY as R, isCanvasSlot as xe } from "../../lib/layout-ops.js";
+import { listLayoutSlots as ke } from "../../lib/layout-slots.js";
+import { nextDisplayFormulaField as ye } from "../../lib/placement-behaviour.js";
+import { titleCase as T, cn as ae } from "../../lib/utils.js";
+import { sectionOp as be, fieldSpot as I, slotSpot as Ne, placeOp as ee } from "./add-target.js";
+import { MeaningSuggestions as we } from "./ai-forms/MeaningSuggestions.js";
+import { useAddDragSource as ve } from "./dnd/node.js";
+import { parseFieldList as oe, placeListPlan as Ce } from "./field-list.js";
+import { useFormFields as Pe } from "./inspect/inspect-api.js";
+import { textMatcher as Fe } from "./nav/find.js";
+import { useOverviewFields as De } from "./overview/overview-api.js";
+import { putBackPlan as $e } from "./removed-log.js";
+import { LibraryRows as Le } from "./reuse/LibraryRows.js";
 import { slotName as O } from "./slot-names.js";
-import { useFieldFillRates as ke, fillText as be } from "./usage/usage-api.js";
-const we = [
+import { useFieldFillRates as Se, fillText as Ae } from "./usage/usage-api.js";
+const Oe = [
   "__pipeline__",
   "__comments__",
   "__tasks__",
@@ -27,7 +30,7 @@ const we = [
   "__owners__",
   "__pdf__",
   "__subtitle__"
-], J = {
+], te = {
   __pipeline__: "State track and actions",
   __comments__: "Notes and replies",
   __tasks__: "To-dos on this record",
@@ -37,19 +40,19 @@ const we = [
   __owners__: "Who owns it at each step",
   __pdf__: "Generate and download a PDF",
   __subtitle__: "A line of values under the title"
-}, Ne = ["review_list", "rollup"];
-function V(a) {
+}, Re = ["review_list", "rollup"];
+function re(o) {
   return {
-    widget_id: a.id,
-    input_bindings: Ne.includes(a.widget_type) ? [{ key: "record_id", binding_type: "item_field", binding_value: "id" }] : []
+    widget_id: o.id,
+    input_bindings: Re.includes(o.widget_type) ? [{ key: "record_id", binding_type: "item_field", binding_value: "id" }] : []
   };
 }
-function ve(a) {
-  const n = a.interface ?? "";
-  if (n.includes("o2m") || n === "list-o2m" || n === "inline-grid") return "Grid";
-  if (n.includes("m2m") || n.includes("m2a")) return "Several records";
-  if (n.includes("m2o")) return "Record";
-  switch (a.type) {
+function Te(o) {
+  const s = o.interface ?? "";
+  if (s.includes("o2m") || s === "list-o2m" || s === "inline-grid") return "Grid";
+  if (s.includes("m2m") || s.includes("m2a")) return "Several records";
+  if (s.includes("m2o")) return "Record";
+  switch (o.type) {
     case "string":
     case "uuid":
       return "Text";
@@ -72,132 +75,137 @@ function ve(a) {
     case "alias":
       return "Group";
     default:
-      return a.type ? $(a.type) : "";
+      return o.type ? T(o.type) : "";
   }
 }
-const Ce = "h-8 w-full rounded-md border border-slate-200 bg-white pl-7 pr-2.5 text-[12.5px] text-slate-800 outline-none placeholder:text-slate-400 focus:border-nvr-cyan dark:border-border dark:bg-background dark:text-foreground dark:placeholder:text-muted-foreground", N = "px-2 pb-1 pt-3 text-[11.5px] font-semibold text-slate-500 dark:text-muted-foreground";
-function M({ children: a }) {
-  return /* @__PURE__ */ d("span", { className: "inline-flex shrink-0 items-center gap-0.5 text-[11px] font-medium text-[#0089ad] dark:text-nvr-cyan", children: [
-    /* @__PURE__ */ o(ne, { className: "h-3 w-3" }),
-    a
+const je = "h-8 w-full rounded-md border border-slate-200 bg-white pl-7 pr-2.5 text-[12.5px] text-slate-800 outline-none placeholder:text-slate-400 focus:border-nvr-cyan dark:border-border dark:bg-background dark:text-foreground dark:placeholder:text-muted-foreground", y = "px-2 pb-1 pt-3 text-[11.5px] font-semibold text-slate-500 dark:text-muted-foreground";
+function K({ children: o }) {
+  return /* @__PURE__ */ i("span", { className: "inline-flex shrink-0 items-center gap-0.5 text-[11px] font-medium text-[#0089ad] dark:text-nvr-cyan", children: [
+    /* @__PURE__ */ r(fe, { className: "h-3 w-3" }),
+    o
   ] });
 }
-function y({
-  title: a,
-  sub: n,
-  aside: c,
+function x({
+  title: o,
+  sub: s,
+  aside: m,
   onClick: u,
-  attrs: l,
-  extra: g,
-  drag: _ = null
+  attrs: d,
+  extra: f,
+  drag: h = null
 }) {
-  const p = fe(_), t = /* @__PURE__ */ d(
+  const c = ve(h), t = /* @__PURE__ */ i(
     "button",
     {
       type: "button",
-      ...p.props,
+      ...c.props,
       onClick: () => {
-        p.clickBlocked() || u();
+        c.clickBlocked() || u();
       },
-      ...l,
-      className: X(
+      ...d,
+      className: ae(
         "group flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted",
-        p.dragging && "opacity-40"
+        c.dragging && "opacity-40"
       ),
       children: [
-        /* @__PURE__ */ d("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ o("span", { className: "truncate text-[12.5px] font-medium text-slate-900 dark:text-foreground", children: a }),
-          n && /* @__PURE__ */ o("span", { className: "truncate text-[11.5px] text-slate-500 dark:text-muted-foreground", children: n })
+        /* @__PURE__ */ i("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ r("span", { className: "truncate text-[12.5px] font-medium text-slate-900 dark:text-foreground", children: o }),
+          s && /* @__PURE__ */ r("span", { className: "truncate text-[11.5px] text-slate-500 dark:text-muted-foreground", children: s })
         ] }),
-        c
+        m
       ]
     }
   );
-  return g ? /* @__PURE__ */ d("div", { className: "flex items-center gap-0.5", children: [
+  return f ? /* @__PURE__ */ i("div", { className: "flex items-center gap-0.5", children: [
     t,
-    g
+    f
   ] }) : t;
 }
-function Ye({
-  bundle: a,
-  collection: n,
-  selected: c,
+function dt({
+  bundle: o,
+  collection: s,
+  selected: m,
   apply: u,
-  onSelect: l
+  onSelect: d,
+  removed: f = []
 }) {
-  const g = se(), [_, p] = W(""), [t, s] = W("form"), { data: h = [] } = xe(n), { data: D } = ke(n), { data: Z = [], error: T } = te({
+  const h = he(), [c, t] = P(""), [l, p] = P("form"), { data: b = [] } = De(s), { data: j } = Se(s), { data: le = [], error: E } = se({
     queryKey: ["layout-editor", "widgets"],
-    queryFn: () => g.request(le("/widgets-internal")).then((e) => e.data ?? []),
+    queryFn: () => h.request(_e("/widgets-internal")).then((e) => e.data ?? []),
     staleTime: 6e4,
     retry: !1
-  }), [v, L] = W(null), f = he(_), P = Y(() => {
+  }), [F, B] = P(null), [W, N] = P(null), [D, H] = P(null), _ = Fe(c), M = q(() => {
     const e = /* @__PURE__ */ new Map();
-    for (const r of a.placements) e.set(r.field, [...e.get(r.field) ?? [], r]);
+    for (const a of o.placements) e.set(a.field, [...e.get(a.field) ?? [], a]);
     return e;
-  }, [a.placements]), C = (e) => (P.get(e) ?? []).find((r) => r.group_key !== R), E = (e) => (P.get(e) ?? []).find((r) => r.group_key === R), S = (e) => e.group_key === R ? { kind: "header", field: e.field } : {
+  }, [o.placements]), $ = (e) => (M.get(e) ?? []).find((a) => a.group_key !== R), U = (e) => (M.get(e) ?? []).find((a) => a.group_key === R), L = (e) => e.group_key === R ? { kind: "header", field: e.field } : {
     kind: e.field.startsWith("__") ? "slot" : "field",
     field: e.field,
     group_key: e.group_key
-  }, B = (e, r, i) => {
-    const m = t === "header" ? j(a, c, "header") : de({ field: e, group_key: null }) ? pe(a, c) : e === "__subtitle__" ? { group_key: null, index: 0 } : j(a, c);
-    u([z(e, m, i)], { label: `Add ${r}` }), l(S({ field: e, group_key: m.group_key }));
-  }, F = (e, r, i, m) => i ? null : {
+  }, z = (e, a, n) => {
+    const g = l === "header" ? I(o, m, "header") : xe({ field: e, group_key: null }) ? Ne(o, m) : e === "__subtitle__" ? { group_key: null, index: 0 } : I(o, m);
+    u([ee(e, g, n)], { label: `Add ${a}` }), d(L({ field: e, group_key: g.group_key }));
+  }, S = (e, a, n, g) => n ? null : {
     field: e,
-    label: r,
-    patch: m,
-    to: t,
-    onAdded: (w) => {
-      const x = w[0];
-      (x == null ? void 0 : x.op) === "place" && l(S({ field: e, group_key: x.group_key }));
+    label: a,
+    patch: g,
+    to: l,
+    onAdded: (C) => {
+      const k = C[0];
+      (k == null ? void 0 : k.op) === "place" && d(L({ field: e, group_key: k.group_key }));
     }
-  }, A = (e, r, i) => {
-    L(null);
-    const m = t === "header" ? E(e) : C(e);
-    m ? l(S(m)) : B(e, r, i);
-  }, ee = (e, r) => {
-    var m;
-    const i = j(a, c);
-    if ((P.get(e) ?? []).some((w) => w.group_key === i.group_key)) {
-      const w = i.group_key === null ? "Ungrouped" : ((m = a.groups.find((x) => x.key === i.group_key)) == null ? void 0 : m.label) ?? i.group_key;
-      L({
+  }, A = (e, a, n) => {
+    B(null);
+    const g = l === "header" ? U(e) : $(e);
+    g ? d(L(g)) : z(e, a, n);
+  }, ne = (e, a) => {
+    var g;
+    const n = I(o, m);
+    if ((M.get(e) ?? []).some((C) => C.group_key === n.group_key)) {
+      const C = n.group_key === null ? "Ungrouped" : ((g = o.groups.find((k) => k.key === n.group_key)) == null ? void 0 : g.label) ?? n.group_key;
+      B({
         field: e,
-        text: `${r} is already in ${w}. Select another section first.`
+        text: `${a} is already in ${C}. Select another section first.`
       });
       return;
     }
-    L(null), u([z(e, i)], { label: `Add another ${r}` }), l(S({ field: e, group_key: i.group_key }));
-  }, { data: G = [] } = ge(n), I = Y(
-    () => Se(a, G, h),
-    [a, G, h]
-  ).filter((e) => f(e.title, e.field)).slice(0, 8), U = h.filter((e) => e.field && !e.field.startsWith("__")).map((e) => ({ ...e, title: e.label || $(e.field) })).filter((e) => f(e.title, e.field)).sort((e, r) => e.title.localeCompare(r.title)), q = [...we, ...ce().map((e) => `__ext_${e}__`)].filter(
-    (e) => t === "header" ? e === "__owners__" : !0
-  ).filter((e) => f(O(e), J[e])), H = Z.filter((e) => f(e.name, e.widget_type)), k = ue(a, c), b = k.op === "group_create" ? k.label.replace(/^New /, "") : "";
-  return /* @__PURE__ */ d("div", { "data-editor-add": "", className: "flex flex-col px-2 pb-4", children: [
-    /* @__PURE__ */ d("div", { className: "sticky top-0 z-10 flex flex-col gap-2 bg-white px-1 pb-1 pt-2 dark:bg-card", children: [
-      /* @__PURE__ */ d("div", { className: "relative", children: [
-        /* @__PURE__ */ o(re, { className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" }),
-        /* @__PURE__ */ o(
+    B(null), u([ee(e, n)], { label: `Add another ${a}` }), d(L({ field: e, group_key: n.group_key }));
+  }, { data: Q = [] } = Pe(s), Y = q(
+    () => Ee(o, Q, b),
+    [o, Q, b]
+  ).filter((e) => _(e.title, e.field)).slice(0, 8), J = b.filter((e) => e.field && !e.field.startsWith("__")).map((e) => ({ ...e, title: e.label || T(e.field) })).filter((e) => _(e.title, e.field)).sort((e, a) => e.title.localeCompare(a.title)), V = [...Oe, ...ke().map((e) => `__ext_${e}__`)].filter(
+    (e) => l === "header" ? e === "__owners__" : !0
+  ).filter((e) => _(O(e), te[e])), X = le.filter((e) => _(e.name, e.widget_type)), w = be(o, m), v = w.op === "group_create" ? w.label.replace(/^New /, "") : "";
+  return /* @__PURE__ */ i("div", { "data-editor-add": "", className: "flex flex-col px-2 pb-4", children: [
+    /* @__PURE__ */ i("div", { className: "sticky top-0 z-10 flex flex-col gap-2 bg-white px-1 pb-1 pt-2 dark:bg-card", children: [
+      /* @__PURE__ */ i("div", { className: "relative", children: [
+        /* @__PURE__ */ r(ie, { className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" }),
+        /* @__PURE__ */ r(
           "input",
           {
-            value: _,
-            onChange: (e) => p(e.target.value),
+            value: c,
+            onChange: (e) => t(e.target.value),
+            onPaste: (e) => {
+              const a = e.clipboardData.getData("text/plain");
+              /[\n\r,;\t]/.test(a) && oe(a).length > 1 && (e.preventDefault(), N(a));
+            },
             placeholder: "Find a field, panel or widget",
             "aria-label": "Find something to add",
-            className: Ce
+            className: je
           }
         )
       ] }),
-      /* @__PURE__ */ d("div", { className: "flex items-center gap-1 text-[12px] text-slate-500 dark:text-muted-foreground", children: [
-        /* @__PURE__ */ o("span", { className: "mr-1", children: "Add to" }),
-        ["form", "header"].map((e) => /* @__PURE__ */ o(
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-1 text-[12px] text-slate-500 dark:text-muted-foreground", children: [
+        /* @__PURE__ */ r("span", { className: "mr-1", children: "Add to" }),
+        ["form", "header"].map((e) => /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            "aria-pressed": t === e,
-            onClick: () => s(e),
-            className: X(
+            "aria-pressed": l === e,
+            onClick: () => p(e),
+            className: ae(
               "rounded-md px-2 py-0.5 font-medium transition-colors",
-              t === e ? "bg-accent text-slate-900 dark:text-foreground" : "hover:bg-muted hover:text-slate-800 dark:hover:text-foreground"
+              l === e ? "bg-accent text-slate-900 dark:text-foreground" : "hover:bg-muted hover:text-slate-800 dark:hover:text-foreground"
             ),
             children: e === "form" ? "Form" : "Header strip"
           },
@@ -205,30 +213,93 @@ function Ye({
         ))
       ] })
     ] }),
-    t === "form" && f(b, "section", "tab", "step") && /* @__PURE__ */ d(K, { children: [
-      /* @__PURE__ */ o("p", { className: N, children: "Layout" }),
-      /* @__PURE__ */ o(
-        y,
+    f.length > 0 && !c.trim() && /* @__PURE__ */ i(G, { children: [
+      /* @__PURE__ */ r("p", { className: y, children: "Recently removed" }),
+      f.slice(0, 8).map((e) => {
+        var a;
+        return /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ r(
+            x,
+            {
+              title: e.piece.kind === "field" ? ((a = b.find(
+                (n) => e.piece.kind === "field" && n.field === e.piece.field
+              )) == null ? void 0 : a.label) ?? e.label : e.label,
+              sub: `${e.where} · ${e.how}`,
+              attrs: { "data-removed-entry": e.id },
+              aside: /* @__PURE__ */ i("span", { className: "inline-flex shrink-0 items-center gap-1 text-[11.5px] font-medium text-slate-500 group-hover:text-slate-800 dark:text-muted-foreground dark:group-hover:text-foreground", children: [
+                /* @__PURE__ */ r(de, { className: "h-3.5 w-3.5" }),
+                "Put back"
+              ] }),
+              onClick: () => {
+                const n = $e(o, e, m);
+                if (!n.ok) {
+                  H({ id: e.id, text: n.reason });
+                  return;
+                }
+                H(null), u(n.ops, { label: n.label }), n.select && d(n.select), n.notes.length && ge.success(n.label, { description: n.notes.join(". ") });
+              }
+            }
+          ),
+          (D == null ? void 0 : D.id) === e.id && /* @__PURE__ */ r(
+            "p",
+            {
+              role: "status",
+              className: "px-2 pb-1 text-[11.5px] text-amber-700 dark:text-amber-300",
+              children: D.text
+            }
+          )
+        ] }, e.id);
+      })
+    ] }),
+    W !== null && /* @__PURE__ */ r(
+      Be,
+      {
+        bundle: o,
+        text: W,
+        onText: N,
+        fields: b,
+        selected: m,
+        to: l,
+        onPlace: (e, a, n) => {
+          u(e, { label: a }), n && d(n), N(null);
+        },
+        onClose: () => N(null)
+      }
+    ),
+    l === "form" && _(v, "section", "tab", "step") && /* @__PURE__ */ i(G, { children: [
+      /* @__PURE__ */ r("p", { className: y, children: "Layout" }),
+      /* @__PURE__ */ r(
+        x,
         {
-          title: b.charAt(0).toUpperCase() + b.slice(1),
-          sub: `A new ${b.toLowerCase()} after the selection`,
+          title: v.charAt(0).toUpperCase() + v.slice(1),
+          sub: `A new ${v.toLowerCase()} after the selection`,
           attrs: { "data-add-section": "" },
-          aside: /* @__PURE__ */ o(oe, { className: "h-3.5 w-3.5 text-slate-400" }),
+          aside: /* @__PURE__ */ r(ce, { className: "h-3.5 w-3.5 text-slate-400" }),
           onClick: () => {
-            u([k], { label: `Add ${b.toLowerCase()}` }), k.op === "group_create" && l({ kind: "group", key: k.key });
+            u([w], { label: `Add ${v.toLowerCase()}` }), w.op === "group_create" && d({ kind: "group", key: w.key });
           }
         }
       )
     ] }),
-    t === "form" && !["table", "file"].includes(String(a.layout.layout_type ?? "grouped")) && f("Display formula", "formula calculation remaining total") && /* @__PURE__ */ o(
-      y,
+    W === null && _("Place a list of fields", "paste names list several") && /* @__PURE__ */ r(
+      x,
+      {
+        title: "Place a list of fields",
+        sub: "Paste names or keys, one per line or with commas",
+        attrs: { "data-add-list-open": "" },
+        aside: /* @__PURE__ */ r(me, { className: "h-3.5 w-3.5 text-slate-400" }),
+        onClick: () => N("")
+      }
+    ),
+    l === "form" && !["table", "file"].includes(String(o.layout.layout_type ?? "grouped")) && _("Display formula", "formula calculation remaining total") && /* @__PURE__ */ r(
+      x,
       {
         title: "Display formula",
         sub: "A read-only figure worked out from fields on the form, never saved",
         attrs: { "data-add-formula": "" },
-        aside: /* @__PURE__ */ o(ae, { className: "h-3.5 w-3.5 text-slate-400" }),
-        onClick: () => B(
-          me(a.placements.map((e) => e.field)),
+        aside: /* @__PURE__ */ r(ue, { className: "h-3.5 w-3.5 text-slate-400" }),
+        onClick: () => z(
+          ye(o.placements.map((e) => e.field)),
           "a display formula",
           {
             overrides: { label: "Formula", display_formula: { expr: "", format: "" } }
@@ -236,75 +307,75 @@ function Ye({
         )
       }
     ),
-    t === "form" && !_.trim() && /* @__PURE__ */ o(_e, { bundle: a, collection: n, apply: u }),
-    t === "form" && I.length > 0 && /* @__PURE__ */ d(K, { children: [
-      /* @__PURE__ */ o("p", { className: N, children: "On other forms" }),
-      I.map((e) => /* @__PURE__ */ o(
-        y,
+    l === "form" && !c.trim() && /* @__PURE__ */ r(we, { bundle: o, collection: s, apply: u }),
+    l === "form" && Y.length > 0 && /* @__PURE__ */ i(G, { children: [
+      /* @__PURE__ */ r("p", { className: y, children: "On other forms" }),
+      Y.map((e) => /* @__PURE__ */ r(
+        x,
         {
           title: e.title,
           sub: `On ${e.count} of ${e.of} other forms · ${e.names.join(", ")}`,
           attrs: { "data-add-suggested": e.field },
-          aside: /* @__PURE__ */ o(Q, { className: "h-3.5 w-3.5 shrink-0 text-slate-400 opacity-0 group-hover:opacity-100" }),
+          aside: /* @__PURE__ */ r(Z, { className: "h-3.5 w-3.5 shrink-0 text-slate-400 opacity-0 group-hover:opacity-100" }),
           onClick: () => A(e.field, e.title),
-          drag: F(e.field, e.title, null)
+          drag: S(e.field, e.title, null)
         },
         e.field
       ))
     ] }),
-    t === "form" && /* @__PURE__ */ o(
-      ye,
+    l === "form" && /* @__PURE__ */ r(
+      Le,
       {
-        bundle: a,
-        collection: n,
-        selected: c,
+        bundle: o,
+        collection: s,
+        selected: m,
         apply: u,
-        onSelect: l,
-        matches: f
+        onSelect: d,
+        matches: _
       }
     ),
-    /* @__PURE__ */ o("p", { className: N, children: "Fields" }),
-    U.map((e) => {
-      const r = t === "header" ? E(e.field) : C(e.field);
-      return /* @__PURE__ */ d("div", { children: [
-        /* @__PURE__ */ o(
-          y,
+    /* @__PURE__ */ r("p", { className: y, children: "Fields" }),
+    J.map((e) => {
+      const a = l === "header" ? U(e.field) : $(e.field);
+      return /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ r(
+          x,
           {
             title: e.title,
-            sub: [e.field, ve(e), D ? be(D.pct.get(e.field), D.total) : null].filter(Boolean).join(" · "),
-            attrs: { "data-add-field": e.field, "data-on-form": r ? "true" : void 0 },
-            aside: r ? /* @__PURE__ */ o(M, { children: t === "header" ? "in header" : "on this form" }) : /* @__PURE__ */ o(Q, { className: "h-3.5 w-3.5 shrink-0 text-slate-400 opacity-0 group-hover:opacity-100" }),
+            sub: [e.field, Te(e), j ? Ae(j.pct.get(e.field), j.total) : null].filter(Boolean).join(" · "),
+            attrs: { "data-add-field": e.field, "data-on-form": a ? "true" : void 0 },
+            aside: a ? /* @__PURE__ */ r(K, { children: l === "header" ? "in header" : "on this form" }) : /* @__PURE__ */ r(Z, { className: "h-3.5 w-3.5 shrink-0 text-slate-400 opacity-0 group-hover:opacity-100" }),
             onClick: () => A(e.field, e.title),
-            drag: F(e.field, e.title, r),
-            extra: r && t === "form" ? /* @__PURE__ */ o(
+            drag: S(e.field, e.title, a),
+            extra: a && l === "form" ? /* @__PURE__ */ r(
               "button",
               {
                 type: "button",
                 "aria-label": `Add another copy of ${e.title}`,
                 "data-add-copy": e.field,
                 "data-tip": "Add another copy after the selection",
-                onClick: () => ee(e.field, e.title),
+                onClick: () => ne(e.field, e.title),
                 className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-slate-400 transition-colors hover:bg-muted hover:text-slate-700 dark:hover:text-foreground",
-                children: /* @__PURE__ */ o(ie, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ r(pe, { className: "h-3.5 w-3.5" })
               }
             ) : null
           }
         ),
-        (v == null ? void 0 : v.field) === e.field && /* @__PURE__ */ o(
+        (F == null ? void 0 : F.field) === e.field && /* @__PURE__ */ r(
           "p",
           {
             role: "status",
             "data-add-notice": "",
             className: "px-2 pb-1 text-[11.5px] text-amber-700 dark:text-amber-300",
-            children: v.text
+            children: F.text
           }
         )
       ] }, e.field);
     }),
-    !U.length && /* @__PURE__ */ o("p", { className: "px-2 py-1.5 text-[12px] text-slate-500 dark:text-muted-foreground", children: "No fields match." }),
-    q.length > 0 && /* @__PURE__ */ o("p", { className: N, children: "Panels" }),
-    q.map((e) => {
-      const r = t === "header" ? E(e) : C(e), i = e === "__subtitle__" ? {
+    !J.length && /* @__PURE__ */ r("p", { className: "px-2 py-1.5 text-[12px] text-slate-500 dark:text-muted-foreground", children: "No fields match." }),
+    V.length > 0 && /* @__PURE__ */ r("p", { className: y, children: "Panels" }),
+    V.map((e) => {
+      const a = l === "header" ? U(e) : $(e), n = e === "__subtitle__" ? {
         input_bindings: [
           {
             key: "__subtitle_config__",
@@ -313,64 +384,150 @@ function Ye({
           }
         ]
       } : void 0;
-      return /* @__PURE__ */ o(
-        y,
+      return /* @__PURE__ */ r(
+        x,
         {
           title: O(e),
-          sub: J[e] ?? "Extension panel",
-          attrs: { "data-add-slot": e, "data-on-form": r ? "true" : void 0 },
-          aside: r ? /* @__PURE__ */ o(M, { children: "on this form" }) : null,
-          onClick: () => A(e, O(e), i),
-          drag: e === "__subtitle__" ? null : F(e, O(e), r)
+          sub: te[e] ?? "Extension panel",
+          attrs: { "data-add-slot": e, "data-on-form": a ? "true" : void 0 },
+          aside: a ? /* @__PURE__ */ r(K, { children: "on this form" }) : null,
+          onClick: () => A(e, O(e), n),
+          drag: e === "__subtitle__" ? null : S(e, O(e), a)
         },
         e
       );
     }),
-    t === "form" && (H.length > 0 || T) && /* @__PURE__ */ o("p", { className: N, children: "Widgets" }),
-    t === "form" && T && /* @__PURE__ */ d("p", { role: "alert", className: "px-2 py-1.5 text-[12px] text-red-700 dark:text-red-300", children: [
+    l === "form" && (X.length > 0 || E) && /* @__PURE__ */ r("p", { className: y, children: "Widgets" }),
+    l === "form" && E && /* @__PURE__ */ i("p", { role: "alert", className: "px-2 py-1.5 text-[12px] text-red-700 dark:text-red-300", children: [
       "Widgets could not be loaded: ",
-      T.message
+      E.message
     ] }),
-    t === "form" && H.map((e) => {
-      const r = `__widget_${e.id}__`, i = C(r);
-      return /* @__PURE__ */ o(
-        y,
+    l === "form" && X.map((e) => {
+      const a = `__widget_${e.id}__`, n = $(a);
+      return /* @__PURE__ */ r(
+        x,
         {
           title: e.name,
-          sub: $(e.widget_type),
-          attrs: { "data-add-widget": String(e.id), "data-on-form": i ? "true" : void 0 },
-          aside: i ? /* @__PURE__ */ o(M, { children: "on this form" }) : null,
-          onClick: () => A(r, e.name, V(e)),
-          drag: F(r, e.name, i, V(e))
+          sub: T(e.widget_type),
+          attrs: { "data-add-widget": String(e.id), "data-on-form": n ? "true" : void 0 },
+          aside: n ? /* @__PURE__ */ r(K, { children: "on this form" }) : null,
+          onClick: () => A(a, e.name, re(e)),
+          drag: S(a, e.name, n, re(e))
         },
         e.id
       );
     })
   ] });
 }
-function Se(a, n, c) {
-  const u = String(a.layout.layout_type || "grouped"), l = n.filter(
-    (t) => Number(t.layout_id) !== Number(a.layout.id) && t.layout_type === u
+function Ee(o, s, m) {
+  const u = String(o.layout.layout_type || "grouped"), d = s.filter(
+    (t) => Number(t.layout_id) !== Number(o.layout.id) && t.layout_type === u
   );
-  if (!l.length) return [];
-  const g = new Set(
-    a.placements.filter((t) => t.group_key !== R).map((t) => t.field)
-  ), _ = new Map(c.map((t) => [t.field, t])), p = /* @__PURE__ */ new Map();
-  for (const t of l)
-    for (const s of t.fields)
-      !g.has(s) && _.has(s) && p.set(s, [...p.get(s) ?? [], t.name]);
-  return [...p.entries()].map(([t, s]) => {
-    var h;
+  if (!d.length) return [];
+  const f = new Set(
+    o.placements.filter((t) => t.group_key !== R).map((t) => t.field)
+  ), h = new Map(m.map((t) => [t.field, t])), c = /* @__PURE__ */ new Map();
+  for (const t of d)
+    for (const l of t.fields)
+      !f.has(l) && h.has(l) && c.set(l, [...c.get(l) ?? [], t.name]);
+  return [...c.entries()].map(([t, l]) => {
+    var p;
     return {
       field: t,
-      title: ((h = _.get(t)) == null ? void 0 : h.label) || $(t),
-      count: s.length,
-      of: l.length,
-      names: s.slice(0, 3).concat(s.length > 3 ? [`${s.length - 3} more`] : [])
+      title: ((p = h.get(t)) == null ? void 0 : p.label) || T(t),
+      count: l.length,
+      of: d.length,
+      names: l.slice(0, 3).concat(l.length > 3 ? [`${l.length - 3} more`] : [])
     };
-  }).sort((t, s) => s.count - t.count || t.title.localeCompare(s.title));
+  }).sort((t, l) => l.count - t.count || t.title.localeCompare(l.title));
+}
+function Be({
+  bundle: o,
+  text: s,
+  onText: m,
+  fields: u,
+  selected: d,
+  to: f,
+  onPlace: h,
+  onClose: c
+}) {
+  const t = q(
+    () => Ce(o, s, u, d, f),
+    [o, s, u, d, f]
+  ), l = oe(s).length;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-add-list": "",
+      className: "mx-1 mt-2 rounded-lg border border-slate-200 bg-slate-50/60 p-2 dark:border-border dark:bg-muted/30",
+      children: [
+        /* @__PURE__ */ i("label", { className: "block text-[11.5px] font-semibold text-slate-600 dark:text-muted-foreground", children: [
+          "Field names, keys or labels",
+          /* @__PURE__ */ r(
+            "textarea",
+            {
+              autoFocus: !0,
+              value: s,
+              onChange: (p) => m(p.target.value),
+              onKeyDown: (p) => {
+                p.key === "Escape" && (p.stopPropagation(), c()), p.key === "Enter" && (p.metaKey || p.ctrlKey) && t.ok && (p.preventDefault(), h(t.ops, t.label, t.select));
+              },
+              rows: 4,
+              placeholder: `PO number
+Vendor
+status, due_date`,
+              className: "mt-1 block w-full resize-y rounded-md border border-slate-200 bg-white px-2 py-1.5 font-normal text-[12.5px] text-slate-800 outline-none placeholder:text-slate-400 focus:border-nvr-cyan dark:border-border dark:bg-background dark:text-foreground dark:placeholder:text-muted-foreground"
+            }
+          )
+        ] }),
+        l > 0 && /* @__PURE__ */ i("div", { role: "status", className: "mt-1.5 space-y-0.5 text-[11.5px] leading-snug", children: [
+          /* @__PURE__ */ i("p", { className: "m-0 text-slate-600 dark:text-muted-foreground", children: [
+            t.placed.length,
+            " of ",
+            l,
+            " will be placed",
+            t.ok ? ` · ${t.label.replace(/^Place \d+ fields? /, "")}` : ""
+          ] }),
+          t.unmatched.length > 0 && /* @__PURE__ */ i("p", { className: "m-0 text-amber-700 dark:text-amber-300", "data-add-list-unmatched": "", children: [
+            "No field matches: ",
+            t.unmatched.join(", ")
+          ] }),
+          t.already.length > 0 && /* @__PURE__ */ i("p", { className: "m-0 text-slate-500 dark:text-muted-foreground", children: [
+            "Already there: ",
+            t.already.join(", ")
+          ] }),
+          !t.ok && t.placed.length === 0 && t.unmatched.length === 0 && /* @__PURE__ */ r("p", { className: "m-0 text-slate-500 dark:text-muted-foreground", children: t.reason })
+        ] }),
+        /* @__PURE__ */ i("div", { className: "mt-2 flex items-center justify-end gap-1.5", children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: c,
+              className: "inline-flex h-7 items-center rounded-md px-2.5 text-[12px] font-medium text-slate-600 hover:bg-muted dark:text-muted-foreground dark:hover:text-foreground",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              "data-add-list-place": "",
+              disabled: !t.ok,
+              onClick: () => t.ok && h(t.ops, t.label, t.select),
+              className: "inline-flex h-7 items-center rounded-md bg-nvr-cyan px-3 text-[12px] font-medium text-white transition-opacity hover:opacity-90 disabled:pointer-events-none disabled:opacity-40",
+              children: t.ok ? `Place ${t.placed.length}` : "Place"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 export {
-  Ye as AddPanel,
-  Se as otherFormSuggestions
+  dt as AddPanel,
+  Oe as BUILT_IN_SLOTS,
+  te as SLOT_HINTS,
+  Ee as otherFormSuggestions,
+  Te as typeWord
 };