@nivaro/react 0.3.36 → 0.3.38

package/dist/shared/components/layout-editor/outputs/LayoutFile.js

@@ -0,0 +1,89 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { ArrowLeft as x, AlertTriangle as y } from "lucide-react";
+import { useMemo as h } from "react";
+import { formatRelative as b, cn as c } from "../../../lib/utils.js";
+import { canvasDiff as w, diffSummary as k } from "../canvas-diff.js";
+import { effectText as d } from "../panel-style.js";
+import { planFileOps as N } from "./layout-file-plan.js";
+import { LayoutFileProblems as v, parseLayoutFile as $ } from "./output-api.js";
+async function S(t, s, o) {
+  const i = await o.text(), l = await $(t, Number(s.layout.id), i);
+  return { name: o.name, result: l };
+}
+function T(t) {
+  return t instanceof v ? t.problems : [];
+}
+function U({
+  bundle: t,
+  state: s,
+  onBack: o,
+  apply: i,
+  onDone: l
+}) {
+  const { result: r, name: f } = s, e = h(() => N(t, r.target), [t, r.target]), m = h(() => w(t, e.after), [t, e.after]), g = k(m), p = [
+    r.source.name ? `from “${r.source.name}”` : null,
+    r.source.at ? `exported ${b(r.source.at)}` : null
+  ].filter(Boolean).join(", ");
+  return /* @__PURE__ */ n("div", { "data-layout-file-preview": "", children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        onClick: o,
+        className: "mb-1 inline-flex items-center gap-1 text-[12px] font-medium text-sky-700 hover:underline dark:text-nvr-cyan",
+        children: [
+          /* @__PURE__ */ a(x, { className: "h-3 w-3" }),
+          " Back"
+        ]
+      }
+    ),
+    /* @__PURE__ */ a("p", { className: "break-words text-[13px] font-semibold text-slate-900 dark:text-foreground", children: e.ops.length === 0 ? "Nothing differs from the form" : `${f}: ${g ?? "changes"}` }),
+    /* @__PURE__ */ n("p", { className: c(d, "mt-0.5"), children: [
+      p ? `${p.charAt(0).toUpperCase()}${p.slice(1)}. ` : "",
+      e.ops.length > 0 && "Applying changes the draft as one step (Undo puts it back); Save writes it."
+    ] }),
+    m.settings.length > 0 && /* @__PURE__ */ n("p", { className: c(d, "mt-1.5"), "data-layout-file-settings": "", children: [
+      "Form settings: ",
+      m.settings.join(", ")
+    ] }),
+    (r.warnings.length > 0 || e.remaining.length > 0) && /* @__PURE__ */ a(
+      "ul",
+      {
+        "data-layout-file-warnings": "",
+        className: "mt-2 max-h-[200px] space-y-1 overflow-y-auto border-t border-slate-100 pt-2 dark:border-border",
+        children: [...r.warnings, ...e.remaining].map((u) => /* @__PURE__ */ n(
+          "li",
+          {
+            className: "flex items-start gap-1.5 text-[12px] leading-snug text-slate-700 dark:text-foreground",
+            children: [
+              /* @__PURE__ */ a(y, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400" }),
+              /* @__PURE__ */ a("span", { className: "min-w-0 break-words", children: u })
+            ]
+          },
+          u
+        ))
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: "mt-2 flex items-center justify-end gap-2 border-t border-slate-100 pt-2.5 dark:border-border", children: [
+      /* @__PURE__ */ a("span", { className: c(d, "mr-auto"), children: e.ops.length > 0 && `${e.ops.length} ${e.ops.length === 1 ? "step" : "steps"}, one undo` }),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          "data-layout-file-apply": "",
+          disabled: e.ops.length === 0,
+          onClick: () => {
+            i(e.ops, { label: `Import ${f}` }), l();
+          },
+          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: "Apply to the draft"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  U as LayoutFilePreview,
+  T as problemsOf,
+  S as readLayoutFile
+};

package/dist/shared/components/layout-editor/outputs/OutputsButton.js

@@ -1,254 +1,331 @@
-import { jsxs as o, jsx as e, Fragment as R } from "react/jsx-runtime";
-import { FileOutput as T, ArrowLeft as H, FileSpreadsheet as M, Download as U, Printer as _, Upload as q, Loader2 as I } from "lucide-react";
-import { useState as u, useRef as W, useMemo as j } from "react";
-import { useApiFetchConfig as Y } from "../../../context.js";
-import { cn as x } from "../../../lib/utils.js";
-import { Checkbox as z } from "../../ui/checkbox.js";
-import { Popover as G, PopoverContent as J } from "../../ui/popover.js";
-import { useCollectionMeta as K } from "../inspector/field-context.js";
+import { jsxs as n, jsx as e, Fragment as U } from "react/jsx-runtime";
+import { FileOutput as z, ArrowLeft as G, FileSpreadsheet as J, Download as H, Printer as K, Upload as M, FileCode2 as Q, Loader2 as V } from "lucide-react";
+import { useState as c, useRef as Y, useMemo as I } from "react";
+import { useApiFetchConfig as X } from "../../../context.js";
+import { cn as y } from "../../../lib/utils.js";
+import { Checkbox as Z } from "../../ui/checkbox.js";
+import { Popover as ee, PopoverContent as te } from "../../ui/popover.js";
+import { useCollectionMeta as ae } from "../inspector/field-context.js";
 import { effectText as g } from "../panel-style.js";
-import { ToolButton as Q } from "../toolbar-kit.js";
-import { helpSheetPlan as V, propWord as X, diffHelpSheet as Z, helpSheetRows as ee } from "./help-sheet.js";
-import { parseHelpSheetFile as te, saveFile as k, downloadTemplate as ae, downloadRecords as ne, downloadBlankForm as oe, downloadHelpSheet as se } from "./output-api.js";
-const re = "mt-0.5 h-4 w-4 shrink-0 rounded border-slate-300 data-[state=checked]:border-nvr-cyan data-[state=checked]:bg-nvr-cyan data-[state=checked]:text-white dark:border-slate-600 [&_svg]:h-3 [&_svg]:w-3", le = "group flex w-full items-start gap-2.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none disabled:pointer-events-none disabled:opacity-60";
-function f({
-  icon: s,
-  title: d,
-  effect: i,
-  busy: n,
-  onClick: c,
-  data: w
+import { ToolButton as oe } from "../toolbar-kit.js";
+import { helpSheetPlan as ne, propWord as le, diffHelpSheet as se, helpSheetRows as re } from "./help-sheet.js";
+import { LayoutFilePreview as ie, problemsOf as de, readLayoutFile as ce } from "./LayoutFile.js";
+import { parseHelpSheetFile as pe, saveFile as x, downloadTemplate as me, downloadRecords as he, downloadBlankForm as ue, downloadHelpSheet as fe, downloadLayoutFile as xe } from "./output-api.js";
+const ye = "mt-0.5 h-4 w-4 shrink-0 rounded border-slate-300 data-[state=checked]:border-nvr-cyan data-[state=checked]:bg-nvr-cyan data-[state=checked]:text-white dark:border-slate-600 [&_svg]:h-3 [&_svg]:w-3", ge = "group flex w-full items-start gap-2.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none disabled:pointer-events-none disabled:opacity-60";
+function p({
+  icon: l,
+  title: m,
+  effect: u,
+  busy: a,
+  onClick: h,
+  data: b
 }) {
-  return /* @__PURE__ */ o("button", { type: "button", className: le, disabled: n, onClick: c, "data-output": w, children: [
-    /* @__PURE__ */ e("span", { className: "mt-0.5 text-slate-500 dark:text-muted-foreground", children: n ? /* @__PURE__ */ e(I, { className: "h-4 w-4 animate-spin" }) : s }),
-    /* @__PURE__ */ o("span", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ e("span", { className: "block text-[13px] font-medium text-slate-900 dark:text-foreground", children: d }),
-      /* @__PURE__ */ e("span", { className: x(g, "block"), children: i })
+  return /* @__PURE__ */ n("button", { type: "button", className: ge, disabled: a, onClick: h, "data-output": b, children: [
+    /* @__PURE__ */ e("span", { className: "mt-0.5 text-slate-500 dark:text-muted-foreground", children: a ? /* @__PURE__ */ e(V, { className: "h-4 w-4 animate-spin" }) : l }),
+    /* @__PURE__ */ n("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ e("span", { className: "block text-[13px] font-medium text-slate-900 dark:text-foreground", children: m }),
+      /* @__PURE__ */ e("span", { className: y(g, "block"), children: u })
     ] })
   ] });
 }
-function de({
-  diff: s,
-  skip: d,
-  toggle: i
+function we({
+  diff: l,
+  skip: m,
+  toggle: u
 }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-help-changes": "",
       className: "mt-2 max-h-[320px] overflow-y-auto border-t border-slate-100 pt-1 dark:border-border",
-      children: s.changes.map((n) => (
+      children: l.changes.map((a) => (
         // biome-ignore lint/a11y/noLabelWithoutControl: the Radix checkbox is the control
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ n(
           "label",
           {
-            "data-help-change": n.prop,
+            "data-help-change": a.prop,
             className: "flex cursor-pointer items-start gap-2 rounded px-1 py-1.5 hover:bg-muted",
             children: [
               /* @__PURE__ */ e(
-                z,
+                Z,
                 {
-                  checked: !d.has(n.id),
-                  onCheckedChange: () => i(n.id),
-                  className: re
+                  checked: !m.has(a.id),
+                  onCheckedChange: () => u(a.id),
+                  className: ye
                 }
               ),
-              /* @__PURE__ */ o("span", { className: "min-w-0 flex-1 text-[12.5px] leading-snug", children: [
-                /* @__PURE__ */ o("span", { className: "block truncate text-[11.5px] text-slate-500 dark:text-muted-foreground", children: [
-                  X(n.prop),
+              /* @__PURE__ */ n("span", { className: "min-w-0 flex-1 text-[12.5px] leading-snug", children: [
+                /* @__PURE__ */ n("span", { className: "block truncate text-[11.5px] text-slate-500 dark:text-muted-foreground", children: [
+                  le(a.prop),
                   " · ",
-                  n.where
+                  a.where
                 ] }),
-                /* @__PURE__ */ e("span", { className: "block whitespace-pre-wrap break-words text-slate-500 line-through decoration-slate-300 dark:text-muted-foreground", children: n.before || "Empty" }),
-                /* @__PURE__ */ e("span", { className: "block whitespace-pre-wrap break-words text-slate-900 dark:text-foreground", children: n.after || "Removed (the field’s own text shows)" })
+                /* @__PURE__ */ e("span", { className: "block whitespace-pre-wrap break-words text-slate-500 line-through decoration-slate-300 dark:text-muted-foreground", children: a.before || "Empty" }),
+                /* @__PURE__ */ e("span", { className: "block whitespace-pre-wrap break-words text-slate-900 dark:text-foreground", children: a.after || "Removed (the field’s own text shows)" })
               ] })
             ]
           },
-          n.id
+          a.id
         )
       ))
     }
   );
 }
-function ye({
-  bundle: s,
-  apply: d,
-  collection: i
+function $e({
+  bundle: l,
+  apply: m,
+  collection: u
 }) {
-  const n = Y(), c = Number(s.layout.id), w = String(s.layout.name ?? "form"), [S, F] = u(!1), [p, B] = u(null), [E, y] = u(null), [a, N] = u(null), [v, O] = u(/* @__PURE__ */ new Set()), $ = W(null), { data: C } = K(S ? i : null), A = C == null ? void 0 : C.fields, h = j(() => ((a == null ? void 0 : a.changes) ?? []).filter((t) => !v.has(t.id)), [a, v]), b = j(() => V(s, h), [s, h]), m = async (t, r) => {
-    B(t), y(null);
+  const a = X(), h = Number(l.layout.id), b = String(l.layout.name ?? "form"), [B, O] = c(!1), [i, A] = c(null), [E, k] = c(null), [o, N] = c(null), [v, P] = c(/* @__PURE__ */ new Set()), $ = Y(null), [D, C] = c(null), [R, F] = c([]), j = Y(null), { data: S } = ae(B ? u : null), T = S == null ? void 0 : S.fields, f = I(() => ((o == null ? void 0 : o.changes) ?? []).filter((t) => !v.has(t.id)), [o, v]), w = I(() => ne(l, f), [l, f]), d = async (t, s) => {
+    A(t), k(null), F([]);
     try {
-      await r();
-    } catch (l) {
-      y(l.message || "Something went wrong");
+      await s();
+    } catch (r) {
+      k(r.message || "Something went wrong"), F(de(r));
     } finally {
-      B(null);
+      A(null);
     }
-  }, D = (t) => {
-    t && m("upload", async () => {
-      const r = await te(n, t), l = Z(s, A ?? [], r);
-      O(/* @__PURE__ */ new Set()), N(l);
+  }, _ = (t) => {
+    t && d("upload", async () => {
+      const s = await pe(a, t), r = se(l, T ?? [], s);
+      P(/* @__PURE__ */ new Set()), N(r);
     });
-  }, L = (t) => O((r) => {
-    const l = new Set(r);
-    return l.has(t) ? l.delete(t) : l.add(t), l;
-  }), P = (t) => {
-    F(t), t || (N(null), y(null));
+  }, q = (t) => P((s) => {
+    const r = new Set(s);
+    return r.has(t) ? r.delete(t) : r.add(t), r;
+  }), L = (t) => {
+    O(t), t || (N(null), C(null), k(null), F([]));
+  }, W = (t) => {
+    t && d("layout-import", async () => C(await ce(a, l, t)));
   };
-  return /* @__PURE__ */ o(G, { open: S, onOpenChange: P, children: [
+  return /* @__PURE__ */ n(ee, { open: B, onOpenChange: L, children: [
     /* @__PURE__ */ e(
-      Q,
+      oe,
       {
         popover: !0,
-        onOpen: () => F(!0),
+        onOpen: () => O(!0),
         label: "Outputs",
-        icon: /* @__PURE__ */ e(T, { className: "h-3.5 w-3.5 shrink-0" }),
+        icon: /* @__PURE__ */ e(z, { className: "h-3.5 w-3.5 shrink-0" }),
         tip: "Excel template and export, blank printable form, help text sheet",
         hint: "Spreadsheet, print and help text",
         data: { "data-outputs-open": "" }
       }
     ),
-    /* @__PURE__ */ e(J, { align: "end", className: "w-[420px] p-3", "data-outputs": "", children: a ? /* @__PURE__ */ o(R, { children: [
-      /* @__PURE__ */ o(
-        "button",
-        {
-          type: "button",
-          onClick: () => N(null),
-          className: "mb-1 inline-flex items-center gap-1 text-[12px] font-medium text-sky-700 hover:underline dark:text-nvr-cyan",
-          children: [
-            /* @__PURE__ */ e(H, { className: "h-3 w-3" }),
-            " Back"
-          ]
-        }
-      ),
-      /* @__PURE__ */ e("p", { className: "text-[13px] font-semibold text-slate-900 dark:text-foreground", children: a.changes.length === 0 ? "Nothing differs from the form" : `${a.changes.length} ${a.changes.length === 1 ? "change" : "changes"} in the sheet` }),
-      /* @__PURE__ */ e("p", { className: x(g, "mt-0.5"), children: "Untick any you do not want. Applying is one step; Undo puts every one back." }),
-      /* @__PURE__ */ e(de, { diff: a, skip: v, toggle: L }),
-      (a.unknown > 0 || a.skipped.length > 0) && /* @__PURE__ */ o("p", { className: x(g, "mt-2"), children: [
-        a.unknown > 0 && `${a.unknown} ${a.unknown === 1 ? "row" : "rows"} match nothing on this form and ${a.unknown === 1 ? "is" : "are"} left out. `,
-        a.skipped.join(". ")
-      ] }),
-      /* @__PURE__ */ o("div", { className: "mt-2 flex items-center justify-end gap-2 border-t border-slate-100 pt-2.5 dark:border-border", children: [
-        /* @__PURE__ */ e("span", { className: x(g, "mr-auto"), children: a.changes.length > 0 && `${h.length} of ${a.changes.length} ticked` }),
-        /* @__PURE__ */ o(
-          "button",
-          {
-            type: "button",
-            "data-help-apply": "",
-            disabled: !b.ok,
-            onClick: () => {
-              b.ok && (d(b.ops, { label: b.label }), P(!1));
-            },
-            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: [
-              "Apply ",
-              h.length > 0 ? h.length : ""
-            ]
-          }
-        )
-      ] })
-    ] }) : /* @__PURE__ */ o(R, { children: [
-      /* @__PURE__ */ e("p", { className: "px-2 text-[13px] font-semibold text-slate-900 dark:text-foreground", children: "Outputs" }),
-      /* @__PURE__ */ e("p", { className: x(g, "mt-0.5 px-2"), children: "The form as a file. Spreadsheets and print follow the saved form." }),
-      /* @__PURE__ */ o("div", { className: "mt-2 space-y-0.5", children: [
-        /* @__PURE__ */ e(
-          f,
-          {
-            data: "template",
-            icon: /* @__PURE__ */ e(M, { className: "h-4 w-4" }),
-            title: "Excel import template",
-            effect: "Columns in this form’s order; choices are dropdowns and required columns are amber.",
-            busy: p === "template",
-            onClick: () => m("template", async () => k(await ae(n, c)))
-          }
-        ),
-        /* @__PURE__ */ e(
-          f,
-          {
-            data: "records",
-            icon: /* @__PURE__ */ e(U, { className: "h-4 w-4" }),
-            title: "Export records to Excel",
-            effect: "Up to 5,000 records in the same columns, limited to what you may read.",
-            busy: p === "records",
-            onClick: () => m("records", async () => k(await ne(n, c)))
-          }
-        ),
-        /* @__PURE__ */ e(
-          f,
+    /* @__PURE__ */ e(
+      te,
+      {
+        align: "end",
+        className: "w-[420px] max-w-[calc(100vw-16px)] p-3",
+        "data-outputs": "",
+        children: D ? /* @__PURE__ */ e(
+          ie,
           {
-            data: "blank",
-            icon: /* @__PURE__ */ e(_, { className: "h-4 w-4" }),
-            title: "Blank printable form",
-            effect: "A PDF with lines and checkboxes for filling in on paper.",
-            busy: p === "blank",
-            onClick: () => m("blank", async () => k(await oe(n, c)))
+            bundle: l,
+            state: D,
+            onBack: () => C(null),
+            apply: m,
+            onDone: () => L(!1)
           }
-        )
-      ] }),
-      /* @__PURE__ */ o("div", { className: "mt-2 border-t border-slate-100 pt-2 dark:border-border", children: [
-        /* @__PURE__ */ e("p", { className: "px-2 text-[12.5px] font-semibold text-slate-900 dark:text-foreground", children: "Labels and help text" }),
-        /* @__PURE__ */ o("div", { className: "mt-1 space-y-0.5", children: [
-          /* @__PURE__ */ e(
-            f,
+        ) : o ? /* @__PURE__ */ n(U, { children: [
+          /* @__PURE__ */ n(
+            "button",
             {
-              data: "help-download",
-              icon: /* @__PURE__ */ e(U, { className: "h-4 w-4" }),
-              title: "Download as a sheet",
-              effect: "Every label, help text and placeholder on this form, including unsaved edits.",
-              busy: p === "help",
-              onClick: () => m(
-                "help",
-                async () => k(
-                  await se(
-                    n,
-                    ee(s, A ?? []),
-                    w
-                  )
-                )
-              )
+              type: "button",
+              onClick: () => N(null),
+              className: "mb-1 inline-flex items-center gap-1 text-[12px] font-medium text-sky-700 hover:underline dark:text-nvr-cyan",
+              children: [
+                /* @__PURE__ */ e(G, { className: "h-3 w-3" }),
+                " Back"
+              ]
             }
           ),
-          /* @__PURE__ */ e(
-            f,
-            {
-              data: "help-upload",
-              icon: /* @__PURE__ */ e(q, { className: "h-4 w-4" }),
-              title: "Upload the edited sheet",
-              effect: "You see every difference before anything changes.",
-              busy: p === "upload",
-              onClick: () => {
-                var t;
-                return (t = $.current) == null ? void 0 : t.click();
+          /* @__PURE__ */ e("p", { className: "text-[13px] font-semibold text-slate-900 dark:text-foreground", children: o.changes.length === 0 ? "Nothing differs from the form" : `${o.changes.length} ${o.changes.length === 1 ? "change" : "changes"} in the sheet` }),
+          /* @__PURE__ */ e("p", { className: y(g, "mt-0.5"), children: "Untick any you do not want. Applying is one step; Undo puts every one back." }),
+          /* @__PURE__ */ e(we, { diff: o, skip: v, toggle: q }),
+          (o.unknown > 0 || o.skipped.length > 0) && /* @__PURE__ */ n("p", { className: y(g, "mt-2"), children: [
+            o.unknown > 0 && `${o.unknown} ${o.unknown === 1 ? "row" : "rows"} match nothing on this form and ${o.unknown === 1 ? "is" : "are"} left out. `,
+            o.skipped.join(". ")
+          ] }),
+          /* @__PURE__ */ n("div", { className: "mt-2 flex items-center justify-end gap-2 border-t border-slate-100 pt-2.5 dark:border-border", children: [
+            /* @__PURE__ */ e("span", { className: y(g, "mr-auto"), children: o.changes.length > 0 && `${f.length} of ${o.changes.length} ticked` }),
+            /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                "data-help-apply": "",
+                disabled: !w.ok,
+                onClick: () => {
+                  w.ok && (m(w.ops, { label: w.label }), L(!1));
+                },
+                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: [
+                  "Apply ",
+                  f.length > 0 ? f.length : ""
+                ]
               }
-            }
-          ),
-          /* @__PURE__ */ e(
-            "input",
-            {
-              ref: $,
-              type: "file",
-              accept: ".xlsx",
-              className: "hidden",
-              "data-help-file": "",
-              onChange: (t) => {
-                var r;
-                D((r = t.target.files) == null ? void 0 : r[0]), t.target.value = "";
+            )
+          ] })
+        ] }) : /* @__PURE__ */ n(U, { children: [
+          /* @__PURE__ */ e("p", { className: "px-2 text-[13px] font-semibold text-slate-900 dark:text-foreground", children: "Outputs" }),
+          /* @__PURE__ */ e("p", { className: y(g, "mt-0.5 px-2"), children: "The form as a file. Spreadsheets and print follow the saved form." }),
+          /* @__PURE__ */ n("div", { className: "mt-2 space-y-0.5", children: [
+            /* @__PURE__ */ e(
+              p,
+              {
+                data: "template",
+                icon: /* @__PURE__ */ e(J, { className: "h-4 w-4" }),
+                title: "Excel import template",
+                effect: "Columns in this form’s order; choices are dropdowns and required columns are amber.",
+                busy: i === "template",
+                onClick: () => d("template", async () => x(await me(a, h)))
               }
+            ),
+            /* @__PURE__ */ e(
+              p,
+              {
+                data: "records",
+                icon: /* @__PURE__ */ e(H, { className: "h-4 w-4" }),
+                title: "Export records to Excel",
+                effect: "Up to 5,000 records in the same columns, limited to what you may read.",
+                busy: i === "records",
+                onClick: () => d("records", async () => x(await he(a, h)))
+              }
+            ),
+            /* @__PURE__ */ e(
+              p,
+              {
+                data: "blank",
+                icon: /* @__PURE__ */ e(K, { className: "h-4 w-4" }),
+                title: "Blank printable form",
+                effect: "A PDF with lines and checkboxes for filling in on paper.",
+                busy: i === "blank",
+                onClick: () => d("blank", async () => x(await ue(a, h)))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("div", { className: "mt-2 border-t border-slate-100 pt-2 dark:border-border", children: [
+            /* @__PURE__ */ e("p", { className: "px-2 text-[12.5px] font-semibold text-slate-900 dark:text-foreground", children: "Labels and help text" }),
+            /* @__PURE__ */ n("div", { className: "mt-1 space-y-0.5", children: [
+              /* @__PURE__ */ e(
+                p,
+                {
+                  data: "help-download",
+                  icon: /* @__PURE__ */ e(H, { className: "h-4 w-4" }),
+                  title: "Download as a sheet",
+                  effect: "Every label, help text and placeholder on this form, including unsaved edits.",
+                  busy: i === "help",
+                  onClick: () => d(
+                    "help",
+                    async () => x(
+                      await fe(
+                        a,
+                        re(l, T ?? []),
+                        b
+                      )
+                    )
+                  )
+                }
+              ),
+              /* @__PURE__ */ e(
+                p,
+                {
+                  data: "help-upload",
+                  icon: /* @__PURE__ */ e(M, { className: "h-4 w-4" }),
+                  title: "Upload the edited sheet",
+                  effect: "You see every difference before anything changes.",
+                  busy: i === "upload",
+                  onClick: () => {
+                    var t;
+                    return (t = $.current) == null ? void 0 : t.click();
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  ref: $,
+                  type: "file",
+                  accept: ".xlsx",
+                  className: "hidden",
+                  "data-help-file": "",
+                  onChange: (t) => {
+                    var s;
+                    _((s = t.target.files) == null ? void 0 : s[0]), t.target.value = "";
+                  }
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ n("div", { className: "mt-2 border-t border-slate-100 pt-2 dark:border-border", children: [
+            /* @__PURE__ */ e("p", { className: "px-2 text-[12.5px] font-semibold text-slate-900 dark:text-foreground", children: "Layout file" }),
+            /* @__PURE__ */ n("div", { className: "mt-1 space-y-0.5", children: [
+              /* @__PURE__ */ e(
+                p,
+                {
+                  data: "layout-download",
+                  icon: /* @__PURE__ */ e(Q, { className: "h-4 w-4" }),
+                  title: "Download as YAML",
+                  effect: "The saved form, its settings, sections and every field, to keep and review as code.",
+                  busy: i === "layout-download",
+                  onClick: () => d(
+                    "layout-download",
+                    async () => x(await xe(a, h))
+                  )
+                }
+              ),
+              /* @__PURE__ */ e(
+                p,
+                {
+                  data: "layout-import",
+                  icon: /* @__PURE__ */ e(M, { className: "h-4 w-4" }),
+                  title: "Import a layout file",
+                  effect: "You see what would change first; applying is one undo step.",
+                  busy: i === "layout-import",
+                  onClick: () => {
+                    var t;
+                    return (t = j.current) == null ? void 0 : t.click();
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  ref: j,
+                  type: "file",
+                  accept: ".yaml,.yml,.json,application/yaml,text/yaml",
+                  className: "hidden",
+                  "data-layout-file": "",
+                  onChange: (t) => {
+                    var s;
+                    W((s = t.target.files) == null ? void 0 : s[0]), t.target.value = "";
+                  }
+                }
+              )
+            ] })
+          ] }),
+          E && /* @__PURE__ */ n(
+            "div",
+            {
+              role: "alert",
+              className: "mt-2 text-[12px] leading-snug text-red-600 dark:text-red-400",
+              children: [
+                /* @__PURE__ */ e("p", { children: E }),
+                R.length > 1 && /* @__PURE__ */ e(
+                  "ul",
+                  {
+                    "data-layout-file-problems": "",
+                    className: "mt-1 max-h-[160px] list-disc space-y-0.5 overflow-y-auto pl-4",
+                    children: R.map((t) => /* @__PURE__ */ e("li", { children: t }, t))
+                  }
+                )
+              ]
             }
           )
         ] })
-      ] }),
-      E && /* @__PURE__ */ e(
-        "p",
-        {
-          role: "alert",
-          className: "mt-2 text-[12px] leading-snug text-red-600 dark:text-red-400",
-          children: E
-        }
-      )
-    ] }) })
+      }
+    )
   ] });
 }
 export {
-  ye as OutputsButton
+  $e as OutputsButton
 };