@nivaro/react 0.3.35 → 0.3.37

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

@@ -1,48 +1,49 @@
-import { jsxs as r, jsx as e, Fragment as I } from "react/jsx-runtime";
-import { ChevronLeft as de, Undo2 as ie, Redo2 as ce, Wrench as me, Sparkles as he, History as pe, MoreHorizontal as ue, Save as z, GitCompare as be, ChevronDown as q, Eye as Y, X as xe } from "lucide-react";
-import { useState as W, useMemo as ve, useCallback as ge } from "react";
-import { useNivaroClient as we } from "../../context.js";
-import { useDebounced as fe } from "../../hooks/useDebounced.js";
-import { useRelationOptions as ke } from "../../hooks/useRelationOptions.js";
-import { titleCase as Ne, cn as h } from "../../lib/utils.js";
-import { usePretendDownIds as ye, LAYOUT_PRETEND_SCOPE as Ce } from "../PretendDown.js";
-import { useOverflowTip as Se } from "../TipLayer.js";
-import { Popover as K, PopoverTrigger as Q, PopoverContent as V } from "../ui/popover.js";
-import { SimpleSelect as Oe } from "../ui/SimpleSelect.js";
-import { AiChangeCheck as Re } from "./ai/ChangeCheck.js";
-import { ShareButton as Pe, WatchButton as Ae } from "./collab/FormFollowShare.js";
-import { HistoryPanel as Te } from "./HistoryPanel.js";
-import { useRuleChoiceLabels as Be, useDisplayTemplate as Le, useRoleNames as Ue } from "./overview/overview-api.js";
-import { rowPill as Ee, purposeSegments as De, TYPE_USE as G, Pill as $e, Sentence as Me } from "./overview/purpose.js";
-import { ScheduleChange as je } from "./ScheduleChange.js";
-import { barIconBtn as j, BarMenu as A, barIconOn as He, MenuSeparator as H, ToolButton as J, barBtnOn as Ie, barBtn as We } from "./toolbar-kit.js";
-import { unsavedText as Z } from "./UnsavedConfirm.js";
-const Ze = "h-8 w-full rounded-md border border-slate-200 bg-white px-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", X = "mb-1 block text-[11.5px] font-semibold text-slate-600 dark:text-muted-foreground", _e = `
+import { jsxs as n, jsx as e, Fragment as Z } from "react/jsx-runtime";
+import { ChevronLeft as ie, Undo2 as ce, Redo2 as me, Wrench as ue, Sparkles as he, History as pe, MoreHorizontal as be, Save as z, GitCompare as xe, ChevronDown as X, Eye as Y, X as ge, RotateCcw as ve } from "lucide-react";
+import { useState as E, useMemo as we, useCallback as q, useRef as fe, useEffect as ke } from "react";
+import { useNivaroClient as Ne } from "../../context.js";
+import { useDebounced as ye } from "../../hooks/useDebounced.js";
+import { useRelationOptions as Ce } from "../../hooks/useRelationOptions.js";
+import { titleCase as Se, cn as u } from "../../lib/utils.js";
+import { usePretendDownIds as Re, LAYOUT_PRETEND_SCOPE as Oe } from "../PretendDown.js";
+import { useOverflowTip as Te } from "../TipLayer.js";
+import { Popover as Q, PopoverTrigger as V, PopoverContent as ee } from "../ui/popover.js";
+import { SimpleSelect as Pe } from "../ui/SimpleSelect.js";
+import { AiChangeCheck as Ae } from "./ai/ChangeCheck.js";
+import { ShareButton as Be, WatchButton as De } from "./collab/FormFollowShare.js";
+import { HistoryPanel as Ee } from "./HistoryPanel.js";
+import { useRuleChoiceLabels as Le, useDisplayTemplate as Ue, useRoleNames as $e } from "./overview/overview-api.js";
+import { rowPill as Me, purposeSegments as je, TYPE_USE as G, Pill as He, Sentence as Ie } from "./overview/purpose.js";
+import { SampleRecordChip as We, SampleRecordOffer as Ze } from "./preview/SampleRecord.js";
+import { ScheduleChange as _e } from "./ScheduleChange.js";
+import { barIconBtn as I, BarMenu as D, barIconOn as Fe, MenuSeparator as W, ToolButton as J, barBtnOn as ze, barBtn as Ye } from "./toolbar-kit.js";
+import { unsavedText as L } from "./UnsavedConfirm.js";
+const Ge = "h-8 w-full rounded-md border border-slate-200 bg-white px-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", K = "mb-1 block text-[11.5px] font-semibold text-slate-600 dark:text-muted-foreground", Je = `
 [data-editor-topbar]{container-type:inline-size;container-name:letb}
 @container letb (max-width: 1499px){[data-editor-topbar] [data-tb-sentence]{display:none}}
 @container letb (max-width: 1399px){[data-editor-topbar] [data-tb-xwide]{display:none}}
 @container letb (max-width: 1099px){[data-editor-topbar] [data-tb-wide],[data-editor-topbar] [data-tb-menu-label]{display:none}}
 @container letb (min-width: 1100px){[data-editor-topbar] [data-tb-name]{min-width:140px}}
 `;
-function Fe({
+function Ke({
   draft: i,
   onOpen: a,
-  pendingTip: c
+  pendingTip: d
 }) {
-  const { status: n, error: s } = i, l = i.unsavedCount ?? 0, t = l > 0 && (n === "idle" || n === "saved"), m = n === "saving" ? "Saving…" : n === "error" ? s ?? "Not saved" : n === "conflict" ? l > 0 ? "Not saved — someone else saved" : "Reloaded — someone else saved" : t ? Z(l) : "Saved", u = /* @__PURE__ */ r(
+  const { status: r, error: o } = i, l = i.unsavedCount ?? 0, t = l > 0 && (r === "idle" || r === "saved"), m = r === "saving" ? "Saving…" : r === "error" ? o ?? "Not saved" : r === "conflict" ? l > 0 ? "Not saved — someone else saved" : "Reloaded — someone else saved" : t ? L(l) : "Saved", p = /* @__PURE__ */ n(
     "span",
     {
       role: "status",
-      "data-save-status": n,
+      "data-save-status": r,
       "data-unsaved": l,
-      "data-tip": (n === "error" || n === "conflict") && s ? s : t ? c ?? "Only you see these changes until you save (⌘S)" : void 0,
-      className: h(
+      "data-tip": (r === "error" || r === "conflict") && o ? o : t ? d ?? "Only you see these changes until you save (⌘S)" : void 0,
+      className: u(
         "inline-flex max-w-[180px] shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2 py-px text-[11px] font-semibold",
-        n === "saving" && "bg-slate-100 text-slate-600 dark:bg-muted dark:text-muted-foreground",
-        (n === "saved" || n === "idle") && !t && "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300",
+        r === "saving" && "bg-slate-100 text-slate-600 dark:bg-muted dark:text-muted-foreground",
+        (r === "saved" || r === "idle") && !t && "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300",
         t && "bg-nvr-cyan/10 text-slate-700 dark:text-foreground",
-        n === "error" && "bg-red-50 text-red-700 dark:bg-red-500/15 dark:text-red-300",
-        n === "conflict" && "bg-amber-50 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300"
+        r === "error" && "bg-red-50 text-red-700 dark:bg-red-500/15 dark:text-red-300",
+        r === "conflict" && "bg-amber-50 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300"
       ),
       children: [
         t && /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "h-1.5 w-1.5 shrink-0 rounded-full bg-nvr-cyan" }),
@@ -50,51 +51,51 @@ function Fe({
       ]
     }
   );
-  return !t || !a ? u : /* @__PURE__ */ e(
+  return !t || !a ? p : /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       "data-unsaved-list-open": "",
-      "aria-label": `${Z(l)} — list them`,
+      "aria-label": `${L(l)} — list them`,
       onClick: (b) => a(b.currentTarget),
       className: "inline-flex rounded-full transition-opacity hover:opacity-80",
-      children: u
+      children: p
     }
   );
 }
-function ze({
+function Xe({
   icon: i,
   label: a,
-  hint: c,
-  on: n,
-  onChange: s,
+  hint: d,
+  on: r,
+  onChange: o,
   data: l
 }) {
-  return /* @__PURE__ */ r("div", { className: "flex items-start gap-2 text-[12.5px] text-slate-700 dark:text-foreground", children: [
+  return /* @__PURE__ */ n("div", { className: "flex items-start gap-2 text-[12.5px] text-slate-700 dark:text-foreground", children: [
     /* @__PURE__ */ e("span", { className: "mt-0.5 text-slate-500 dark:text-muted-foreground", children: i }),
-    /* @__PURE__ */ r("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ n("span", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ e("span", { className: "font-medium", children: a }),
-      /* @__PURE__ */ e("span", { className: "text-[11.5px] leading-snug text-slate-500 dark:text-muted-foreground", children: c })
+      /* @__PURE__ */ e("span", { className: "text-[11.5px] leading-snug text-slate-500 dark:text-muted-foreground", children: d })
     ] }),
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         role: "switch",
-        "aria-checked": n,
+        "aria-checked": r,
         "aria-label": a,
-        onClick: () => s(!n),
+        onClick: () => o(!r),
         ...l,
-        className: h(
+        className: u(
           "relative mt-0.5 h-4 w-7 shrink-0 rounded-full transition-colors",
-          n ? "bg-nvr-cyan" : "bg-slate-300 dark:bg-white/35"
+          r ? "bg-nvr-cyan" : "bg-slate-300 dark:bg-white/35"
         ),
         children: /* @__PURE__ */ e(
           "span",
           {
-            className: h(
+            className: u(
               "absolute left-0 top-0.5 h-3 w-3 rounded-full bg-white shadow-sm transition-transform",
-              n ? "translate-x-3.5" : "translate-x-0.5"
+              r ? "translate-x-3.5" : "translate-x-0.5"
             )
           }
         )
@@ -102,50 +103,50 @@ function ze({
     )
   ] });
 }
-function Ye({
+function qe({
   collection: i,
   value: a,
-  onChange: c,
-  showHidden: n,
-  onShowHidden: s,
+  onChange: d,
+  showHidden: r,
+  onShowHidden: o,
   extra: l
 }) {
-  var S, O, R, f;
-  const t = we(), [m, u] = W(!1), [b, T] = W(""), B = fe(b, 250), { data: g } = Le(i, m), { data: x = [] } = Ue(!0), { options: N, loading: L } = ke(m ? t : null, i, {
-    search: B,
+  var O, T, P, N;
+  const t = Ne(), [m, p] = E(!1), [b, U] = E(""), v = ye(b, 250), { data: w } = Ue(i, m), { data: x = [] } = $e(!0), { options: f, loading: C } = Ce(m ? t : null, i, {
+    search: v,
     limit: 8,
-    displayTemplate: g ?? null,
-    enabled: m && g !== void 0
-  }), y = ye(Ce).length, w = ((S = x.find((o) => o.id === a.roleId)) == null ? void 0 : S.name) ?? null, C = ((O = x.find((o) => o.id === a.compareRoleId)) == null ? void 0 : O.name) ?? null, U = [
-    (R = a.record) == null ? void 0 : R.label,
-    C && w ? `${w} | ${C}` : w,
-    (f = a.state) == null ? void 0 : f.label,
+    displayTemplate: w ?? null,
+    enabled: m && w !== void 0
+  }), S = Re(Oe).length, k = ((O = x.find((s) => s.id === a.roleId)) == null ? void 0 : O.name) ?? null, R = ((T = x.find((s) => s.id === a.compareRoleId)) == null ? void 0 : T.name) ?? null, $ = [
+    a.sample ? "Sample record" : (P = a.record) == null ? void 0 : P.label,
+    R && k ? `${k} | ${R}` : k,
+    (N = a.state) == null ? void 0 : N.label,
     a.values && Object.keys(a.values).length > 0 ? "What if" : null,
-    a.device && a.device !== "desktop" ? a.device === "phone" ? "Phone" : "Tablet" : null,
+    a.device && a.device !== "desktop" ? a.device === "phone" ? "Phone" : a.device === "all" ? "All devices" : "Tablet" : null,
     a.who ? "Who sees" : null,
     // #2858 — pretending something is down is a preview mode too: never forgotten on screen.
-    y > 0 ? `${y} down` : null
+    S > 0 ? `${S} down` : null
   ].filter(Boolean).join(" · ") || "No record";
-  return /* @__PURE__ */ r(K, { open: m, onOpenChange: u, children: [
-    /* @__PURE__ */ e(Q, { asChild: !0, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ n(Q, { open: m, onOpenChange: p, children: [
+    /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ n(
       "button",
       {
         type: "button",
-        className: h(We, "min-w-[110px] max-w-[260px] shrink", m && Ie),
+        className: u(Ye, "min-w-[110px] max-w-[260px] shrink", m && ze),
         "aria-label": "Preview as",
         "data-preview-as": "",
         "data-tip": "Show the form with a real record’s values, as a role sees it",
         children: [
           /* @__PURE__ */ e(Y, { className: "h-3.5 w-3.5 shrink-0" }),
-          /* @__PURE__ */ r("span", { className: "min-w-0 truncate", children: [
+          /* @__PURE__ */ n("span", { className: "min-w-0 truncate", children: [
             "Preview",
-            /* @__PURE__ */ r("span", { "data-tb-wide": "", children: [
+            /* @__PURE__ */ n("span", { "data-tb-wide": "", children: [
               ":",
               " ",
-              /* @__PURE__ */ e("span", { "data-preview-summary": "", className: "text-slate-500 dark:text-muted-foreground", children: U })
+              /* @__PURE__ */ e("span", { "data-preview-summary": "", className: "text-slate-500 dark:text-muted-foreground", children: $ })
             ] })
           ] }),
-          n && /* @__PURE__ */ e(
+          r && /* @__PURE__ */ e(
             "span",
             {
               "data-preview-hidden-on": "",
@@ -153,77 +154,96 @@ function Ye({
               className: "h-1.5 w-1.5 shrink-0 rounded-full bg-nvr-cyan"
             }
           ),
-          /* @__PURE__ */ e(q, { className: "h-3 w-3 shrink-0 text-slate-500 dark:text-muted-foreground" })
+          /* @__PURE__ */ e(X, { className: "h-3 w-3 shrink-0 text-slate-500 dark:text-muted-foreground" })
         ]
       }
     ) }),
-    /* @__PURE__ */ r(
-      V,
+    /* @__PURE__ */ n(
+      ee,
       {
         align: "end",
         className: "max-h-[min(80vh,640px)] w-[320px] overflow-y-auto overscroll-contain p-3",
         children: [
-          /* @__PURE__ */ e("p", { className: X, children: "Record" }),
-          a.record ? /* @__PURE__ */ r("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full bg-nvr-cyan/10 px-2.5 py-1 text-[12px] font-medium text-slate-800 dark:text-foreground", children: [
+          /* @__PURE__ */ e("p", { className: K, children: "Record" }),
+          a.sample ? /* @__PURE__ */ e(
+            We,
+            {
+              collection: i,
+              onSample: (s) => d({ ...a, record: null, sample: s }),
+              onClear: () => d({ ...a, sample: null })
+            }
+          ) : a.record ? /* @__PURE__ */ n("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full bg-nvr-cyan/10 px-2.5 py-1 text-[12px] font-medium text-slate-800 dark:text-foreground", children: [
             /* @__PURE__ */ e("span", { className: "truncate", children: a.record.label }),
             /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
                 "aria-label": "Preview without a record",
-                onClick: () => c({ ...a, record: null }),
+                onClick: () => d({ ...a, record: null }),
                 className: "text-slate-500 hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground",
-                children: /* @__PURE__ */ e(xe, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ e(ge, { className: "h-3 w-3" })
               }
             )
-          ] }) : /* @__PURE__ */ r(I, { children: [
+          ] }) : /* @__PURE__ */ n(Z, { children: [
             /* @__PURE__ */ e(
               "input",
               {
                 value: b,
-                onChange: (o) => T(o.target.value),
+                onChange: (s) => U(s.target.value),
                 placeholder: "Search records…",
                 "aria-label": "Search records",
-                className: Ze
+                className: Ge
               }
             ),
-            /* @__PURE__ */ r("div", { className: "mt-1 max-h-[220px] overflow-y-auto overscroll-contain", children: [
-              N.map((o) => /* @__PURE__ */ e(
+            /* @__PURE__ */ n("div", { className: "mt-1 max-h-[220px] overflow-y-auto overscroll-contain", children: [
+              f.map((s) => /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: () => c({ ...a, record: { id: String(o.id), label: o.label } }),
+                  onClick: () => d({
+                    ...a,
+                    record: { id: String(s.id), label: s.label },
+                    sample: null
+                  }),
                   className: "block w-full truncate rounded px-2 py-1.5 text-left text-[12.5px] text-slate-700 hover:bg-muted dark:text-foreground",
-                  children: o.label
+                  children: s.label
                 },
-                String(o.id)
+                String(s.id)
               )),
-              !L && N.length === 0 && /* @__PURE__ */ e("p", { className: "px-2 py-1.5 text-[12px] text-slate-500 dark:text-muted-foreground", children: "No records match." })
-            ] })
+              !C && f.length === 0 && v.trim() !== "" && /* @__PURE__ */ e("p", { className: "px-2 py-1.5 text-[12px] text-slate-500 dark:text-muted-foreground", children: "No records match." })
+            ] }),
+            /* @__PURE__ */ e(
+              Ze,
+              {
+                collection: i,
+                empty: !C && f.length === 0 && v.trim() === "",
+                onSample: (s) => d({ ...a, record: null, sample: s })
+              }
+            )
           ] }),
-          /* @__PURE__ */ e("p", { className: h(X, "mt-3"), children: "As a role" }),
+          /* @__PURE__ */ e("p", { className: u(K, "mt-3"), children: "As a role" }),
           /* @__PURE__ */ e(
-            Oe,
+            Pe,
             {
               value: a.roleId ?? "",
-              onChange: (o) => c({ ...a, roleId: o || null }),
+              onChange: (s) => d({ ...a, roleId: s || null }),
               ariaLabel: "Preview as role",
               className: "h-8 text-[12.5px]",
               options: [
                 { value: "", label: "Any role" },
-                ...x.map((o) => ({ value: o.id, label: o.name }))
+                ...x.map((s) => ({ value: s.id, label: s.name }))
               ]
             }
           ),
           /* @__PURE__ */ e("p", { className: "mt-2 text-[11.5px] leading-snug text-slate-500 dark:text-muted-foreground", children: "The form shows this record’s values, steps and rules. Nothing you do here changes the record." }),
           /* @__PURE__ */ e("div", { className: "mt-3 border-t border-slate-100 pt-3 dark:border-border", children: /* @__PURE__ */ e(
-            ze,
+            Xe,
             {
               icon: /* @__PURE__ */ e(Y, { className: "h-3.5 w-3.5" }),
               label: "Show hidden",
               hint: "Fields and sections the preview would hide, faintly, so you can select them",
-              on: n,
-              onChange: s,
+              on: r,
+              onChange: o,
               data: { "data-show-hidden-switch": "" }
             }
           ) }),
@@ -233,102 +253,102 @@ function Ye({
     )
   ] });
 }
-function ht({
+function wt({
   collection: i,
   layoutId: a,
-  layoutName: c,
-  layoutType: n,
-  row: s,
+  layoutName: d,
+  layoutType: r,
+  row: o,
   fields: l,
   draft: t,
   preview: m,
-  onPreview: u,
+  onPreview: p,
   showHidden: b,
-  onShowHidden: T,
-  onBack: B,
-  backLabel: g = "Forms",
+  onShowHidden: U,
+  onBack: v,
+  backLabel: w = "Forms",
   view: x,
-  tools: N,
-  ai: L,
-  previewExtra: y,
-  problems: w,
-  more: C,
-  presence: U,
-  onOpenUnsaved: S,
-  pendingTip: O,
-  onSelectField: R,
-  onShowOnCanvas: f,
-  onReviewChanges: o,
-  reviewing: ee = !1,
-  testing: te,
-  beforeSave: ae
+  tools: f,
+  ai: C,
+  previewExtra: S,
+  problems: k,
+  more: R,
+  presence: $,
+  onOpenUnsaved: O,
+  pendingTip: T,
+  onSelectField: P,
+  onShowOnCanvas: N,
+  onReviewChanges: s,
+  reviewing: te = !1,
+  testing: ae,
+  beforeSave: re
 }) {
-  const [E, D] = W(
+  const [M, j] = E(
     () => typeof window < "u" && new URLSearchParams(window.location.search).get("history") === "1"
-  ), p = t.unsavedCount ?? 0, $ = s ? Ee(s) : null, ne = ve(() => s ? [s] : [], [s]), re = Be(i, l, ne), _ = s ? De(s, l, re) : G[n] ? [{ text: G[n] }] : [], P = !!t.save && !t.autosave, M = P && p > 0, oe = ge(
-    (d) => {
-      var v, F;
-      return ((F = (v = l.find((le) => le.field === d)) == null ? void 0 : v.label) == null ? void 0 : F.trim()) || Ne(d);
+  ), h = t.unsavedCount ?? 0, H = o ? Me(o) : null, ne = we(() => o ? [o] : [], [o]), oe = Le(i, l, ne), _ = o ? je(o, l, oe) : G[r] ? [{ text: G[r] }] : [], A = !!t.save && !t.autosave, B = A && h > 0, se = q(
+    (c) => {
+      var g, F;
+      return ((F = (g = l.find((le) => le.field === c)) == null ? void 0 : g.label) == null ? void 0 : F.trim()) || Se(c);
     },
     [l]
-  ), se = Se(c);
-  return /* @__PURE__ */ r(
+  ), de = Te(d);
+  return /* @__PURE__ */ n(
     "header",
     {
       "data-editor-topbar": "",
       className: "flex shrink-0 flex-nowrap items-center gap-1.5 overflow-hidden border-b border-slate-200 bg-white px-3 py-2 dark:border-border dark:bg-card",
       children: [
-        /* @__PURE__ */ e("style", { children: _e }),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ e("style", { children: Je }),
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            "aria-label": g,
+            "aria-label": w,
             "data-editor-back": "",
-            onClick: (d) => B(d.currentTarget),
+            onClick: (c) => v(c.currentTarget),
             className: "inline-flex h-8 shrink-0 items-center gap-0.5 rounded-md pl-1 pr-2 text-[12px] text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground",
             children: [
-              /* @__PURE__ */ e(de, { className: "h-4 w-4" }),
-              /* @__PURE__ */ e("span", { "data-tb-wide": "", children: g })
+              /* @__PURE__ */ e(ie, { className: "h-4 w-4" }),
+              /* @__PURE__ */ e("span", { "data-tb-wide": "", children: w })
             ]
           }
         ),
-        /* @__PURE__ */ e(k, {}),
-        /* @__PURE__ */ r("div", { "data-tb-name": "", className: "flex min-w-[64px] flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ e(y, {}),
+        /* @__PURE__ */ n("div", { "data-tb-name": "", className: "flex min-w-[64px] flex-1 items-center gap-2", children: [
           /* @__PURE__ */ e(
             "h2",
             {
-              ref: se,
+              ref: de,
               className: "min-w-0 truncate text-[14px] font-semibold text-slate-900 dark:text-foreground",
-              children: c
+              children: d
             }
           ),
-          $ && /* @__PURE__ */ e("span", { className: "shrink-0", children: /* @__PURE__ */ e($e, { tone: $.tone, children: $.text }) }),
-          _.length > 0 && /* @__PURE__ */ r(
+          H && /* @__PURE__ */ e("span", { className: "shrink-0", children: /* @__PURE__ */ e(He, { tone: H.tone, children: H.text }) }),
+          _.length > 0 && /* @__PURE__ */ n(
             "span",
             {
               "data-tb-sentence": "",
               className: "min-w-0 truncate text-[12px] text-slate-500 dark:text-muted-foreground",
               children: [
                 "· ",
-                /* @__PURE__ */ e(Me, { segs: _, muted: !0 })
+                /* @__PURE__ */ e(Ie, { segs: _, muted: !0 })
               ]
             }
           ),
-          U
+          $
         ] }),
-        /* @__PURE__ */ e(k, {}),
-        /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+        /* @__PURE__ */ e(y, {}),
+        /* @__PURE__ */ n("div", { className: "flex shrink-0 items-center gap-0.5", children: [
           /* @__PURE__ */ e(
             "button",
             {
               type: "button",
               "aria-label": "Undo",
-              className: j,
+              className: I,
               disabled: !t.canUndo,
               onClick: t.undo,
               "data-tip": t.undoLabel ? `Undo ${t.undoLabel} (⌘Z)` : "Undo (⌘Z)",
-              children: /* @__PURE__ */ e(ie, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ e(ce, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ e(
@@ -336,56 +356,56 @@ function ht({
             {
               type: "button",
               "aria-label": "Redo",
-              className: j,
+              className: I,
               disabled: !t.canRedo,
               onClick: t.redo,
               "data-tip": t.redoLabel ? `Redo ${t.redoLabel} (⇧⌘Z)` : "Redo (⇧⌘Z)",
-              children: /* @__PURE__ */ e(ce, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ e(me, { className: "h-4 w-4" })
             }
           )
         ] }),
-        x && /* @__PURE__ */ r(I, { children: [
-          /* @__PURE__ */ e(k, {}),
+        x && /* @__PURE__ */ n(Z, { children: [
+          /* @__PURE__ */ e(y, {}),
           /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: x })
         ] }),
-        /* @__PURE__ */ e(k, {}),
+        /* @__PURE__ */ e(y, {}),
         /* @__PURE__ */ e(
-          Ye,
+          qe,
           {
             collection: i,
             value: m,
-            onChange: u,
+            onChange: p,
             showHidden: b,
-            onShowHidden: T,
-            extra: y
+            onShowHidden: U,
+            extra: S
           }
         ),
         /* @__PURE__ */ e(
-          A,
+          D,
           {
             label: "Tools",
-            icon: /* @__PURE__ */ e(me, { className: "h-3.5 w-3.5" }),
+            icon: /* @__PURE__ */ e(ue, { className: "h-3.5 w-3.5" }),
             tip: "Arrange, find, outline, every form, form map and shortcuts",
-            children: N
+            children: f
           }
         ),
         /* @__PURE__ */ e(
-          A,
+          D,
           {
             label: "AI",
             icon: /* @__PURE__ */ e(he, { className: "h-3.5 w-3.5 text-nvr-cyan" }),
             tip: "Rebuild, review and ask about this form with AI; type a change",
             width: "w-[320px]",
-            children: L
+            children: C
           }
         ),
-        w,
-        /* @__PURE__ */ r(K, { open: E, onOpenChange: D, children: [
-          /* @__PURE__ */ e(Q, { asChild: !0, children: /* @__PURE__ */ e(
+        k,
+        /* @__PURE__ */ n(Q, { open: M, onOpenChange: j, children: [
+          /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              className: h(j, E && He),
+              className: u(I, M && Fe),
               "aria-label": "History",
               "data-tip": "History: saved versions, this session’s steps, restore",
               "data-editor-history": "",
@@ -393,66 +413,67 @@ function ht({
             }
           ) }),
           /* @__PURE__ */ e(
-            V,
+            ee,
             {
               align: "end",
               className: "max-h-[min(75vh,640px)] w-[460px] overflow-y-auto overscroll-contain p-3",
-              children: E && /* @__PURE__ */ e(
-                Te,
+              children: M && /* @__PURE__ */ e(
+                Ee,
                 {
                   layoutId: a,
-                  onRestored: () => D(!1),
-                  unsavedCount: p,
+                  onRestored: () => j(!1),
+                  unsavedCount: h,
                   onDiscardUnsaved: t.discard,
                   session: t.session,
                   onJump: t.jump,
                   bundle: t.bundle,
-                  onApply: (d, v) => t.apply(d, { label: v }),
-                  fieldLabel: oe,
-                  onShowOnCanvas: f ? (d, v) => {
-                    D(!1), f(d, v);
+                  onApply: (c, g) => t.apply(c, { label: g }),
+                  fieldLabel: se,
+                  onShowOnCanvas: N ? (c, g) => {
+                    j(!1), N(c, g);
                   } : void 0
                 }
               )
             }
           )
         ] }),
-        /* @__PURE__ */ r(
-          A,
+        /* @__PURE__ */ n(
+          D,
           {
             label: "More",
-            icon: /* @__PURE__ */ e(ue, { className: "h-4 w-4" }),
+            icon: /* @__PURE__ */ e(be, { className: "h-4 w-4" }),
             iconOnly: !0,
             align: "end",
             tip: "Test, share and watch this form, templates and download",
             data: { "data-editor-more": "" },
             children: [
-              te,
-              /* @__PURE__ */ e(H, {}),
-              /* @__PURE__ */ e(Pe, { layoutId: a, fields: l, onSelectField: R }),
-              /* @__PURE__ */ e(Ae, { layoutId: a }),
-              /* @__PURE__ */ e(H, {}),
-              C
+              ae,
+              /* @__PURE__ */ e(W, {}),
+              /* @__PURE__ */ e(Be, { layoutId: a, fields: l, onSelectField: P }),
+              /* @__PURE__ */ e(De, { layoutId: a }),
+              /* @__PURE__ */ e(W, {}),
+              R
             ]
           }
         ),
-        /* @__PURE__ */ e(k, {}),
-        /* @__PURE__ */ e(Fe, { draft: t, onOpen: S, pendingTip: O }),
-        /* @__PURE__ */ r("div", { "data-save-split": "", className: "flex shrink-0 items-center", children: [
-          P && /* @__PURE__ */ r(
+        /* @__PURE__ */ e(y, {}),
+        /* @__PURE__ */ e(Ke, { draft: t, onOpen: O, pendingTip: T }),
+        B && t.discard && /* @__PURE__ */ e(Qe, { count: h, onDiscard: t.discard }),
+        /* @__PURE__ */ n("div", { "data-save-split": "", className: "flex shrink-0 items-center", children: [
+          A && /* @__PURE__ */ n(
             "button",
             {
               type: "button",
               "data-editor-save": "",
-              disabled: p === 0,
+              disabled: h === 0,
               onClick: () => {
-                var d;
-                return void ((d = t.save) == null ? void 0 : d.call(t));
+                var c;
+                return void ((c = t.save) == null ? void 0 : c.call(t));
               },
-              "data-tip": p > 0 ? `Save ${Z(p)} (⌘S)` : "Nothing to save",
-              className: h(
+              "data-tip": h > 0 ? `Save ${L(h)} (⌘S)` : "Nothing to save",
+              className: u(
                 "inline-flex h-8 items-center gap-1.5 rounded-l-md px-3 text-[12.5px] font-medium transition-opacity disabled:pointer-events-none disabled:opacity-40",
-                p > 0 ? "bg-nvr-cyan text-white hover:opacity-90" : "border border-slate-200 text-slate-700 dark:border-border dark:text-foreground"
+                h > 0 ? "bg-nvr-cyan text-white hover:opacity-90" : "border border-slate-200 text-slate-700 dark:border-border dark:text-foreground"
               ),
               children: [
                 /* @__PURE__ */ e(z, { className: "h-3.5 w-3.5" }),
@@ -460,47 +481,47 @@ function ht({
               ]
             }
           ),
-          /* @__PURE__ */ r(
-            A,
+          /* @__PURE__ */ n(
+            D,
             {
               label: "Save options",
-              icon: /* @__PURE__ */ e(q, { className: "h-3.5 w-3.5" }),
+              icon: /* @__PURE__ */ e(X, { className: "h-3.5 w-3.5" }),
               iconOnly: !0,
               align: "end",
               width: "w-[300px]",
-              tip: P ? "Review, check or schedule the changes; Autosave" : "Autosave",
-              className: h(
-                P ? "rounded-l-none border border-l-0 border-slate-200 dark:border-border" : "border border-slate-200 dark:border-border"
+              tip: A ? "Review, check or schedule the changes; Autosave" : "Autosave",
+              className: u(
+                A ? "rounded-l-none border border-l-0 border-slate-200 dark:border-border" : "border border-slate-200 dark:border-border"
               ),
               data: { "data-save-menu": "" },
               children: [
-                o && M && /* @__PURE__ */ e(
+                s && B && /* @__PURE__ */ e(
                   J,
                   {
                     label: "Review changes on canvas",
-                    icon: /* @__PURE__ */ e(be, { className: "h-3.5 w-3.5" }),
+                    icon: /* @__PURE__ */ e(xe, { className: "h-3.5 w-3.5" }),
                     hint: "Mark the unsaved changes on the form",
-                    checked: ee,
-                    onClick: o,
+                    checked: te,
+                    onClick: s,
                     data: { "data-editor-review": "" }
                   }
                 ),
-                M && ae,
-                /* @__PURE__ */ e(Re, { layoutId: a, draft: t }),
-                t.unsavedOps && t.discard && M && /* @__PURE__ */ e(
-                  je,
+                B && re,
+                /* @__PURE__ */ e(Ae, { layoutId: a, draft: t }),
+                t.unsavedOps && t.discard && B && /* @__PURE__ */ e(
+                  _e,
                   {
                     collection: i,
                     layoutId: a,
                     draft: {
                       unsavedOps: t.unsavedOps,
                       discard: t.discard,
-                      unsavedCount: p
+                      unsavedCount: h
                     }
                   }
                 ),
-                t.setAutosave && /* @__PURE__ */ r(I, { children: [
-                  /* @__PURE__ */ e(H, {}),
+                t.setAutosave && /* @__PURE__ */ n(Z, { children: [
+                  /* @__PURE__ */ e(W, {}),
                   /* @__PURE__ */ e(
                     J,
                     {
@@ -509,8 +530,8 @@ function ht({
                       hint: t.autosave ? "Every change saves as you make it, until you close the editor" : "Off: changes wait for Save",
                       checked: !!t.autosave,
                       onClick: () => {
-                        var d;
-                        return (d = t.setAutosave) == null ? void 0 : d.call(t, !t.autosave);
+                        var c;
+                        return (c = t.setAutosave) == null ? void 0 : c.call(t, !t.autosave);
                       },
                       data: { "data-autosave-switch": "" }
                     }
@@ -524,9 +545,50 @@ function ht({
     }
   );
 }
-function k() {
+function Qe({ count: i, onDiscard: a }) {
+  const [d, r] = E(!1), o = fe(null), l = q(() => {
+    o.current && clearTimeout(o.current), o.current = null, r(!1);
+  }, []);
+  ke(() => l, [l]);
+  const t = `Discard ${L(i)}`;
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      "data-editor-discard": "",
+      "data-armed": d ? "" : void 0,
+      "aria-label": d ? `${t}? Click again to discard` : t,
+      "data-tip": d ? "Click again to discard. This cannot be undone." : t,
+      onClick: () => {
+        if (!d) {
+          r(!0), o.current && clearTimeout(o.current), o.current = setTimeout(() => r(!1), 4e3);
+          return;
+        }
+        l(), a();
+      },
+      onBlur: l,
+      onKeyDown: (m) => {
+        m.key === "Escape" && d && (m.stopPropagation(), l());
+      },
+      className: u(
+        "inline-flex h-8 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-[12.5px] font-medium transition-colors",
+        d ? "bg-red-50 text-red-700 ring-1 ring-red-200 hover:bg-red-100 dark:bg-red-500/15 dark:text-red-300 dark:ring-red-500/30 dark:hover:bg-red-500/25" : "text-slate-600 hover:bg-muted hover:text-slate-900 dark:text-muted-foreground dark:hover:text-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ e(ve, { "aria-hidden": !0, className: "h-3.5 w-3.5" }),
+        d ? /* @__PURE__ */ n("span", { children: [
+          "Discard ",
+          i === 1 ? "it" : "them",
+          "?"
+        ] }) : /* @__PURE__ */ e("span", { "data-tb-wide": "", children: "Discard" })
+      ]
+    }
+  );
+}
+function y() {
   return /* @__PURE__ */ e("span", { "aria-hidden": !0, "data-tb-wide": "", className: "h-5 w-px shrink-0 bg-slate-200 dark:bg-border" });
 }
 export {
-  ht as EditorTopBar
+  Qe as DiscardButton,
+  wt as EditorTopBar
 };