diff --git a/.github/media/inline-editing.png b/.github/media/inline-editing.png
new file mode 100644
index 0000000..7cdded8
Binary files /dev/null and b/.github/media/inline-editing.png differ
diff --git a/assets/css/builder.css b/assets/css/builder.css
index 0875d03..4a4c141 100644
--- a/assets/css/builder.css
+++ b/assets/css/builder.css
@@ -2105,3 +2105,220 @@ os-checkbox-label.atfb-check {
 .atfb-row > .atfb-field {
 	margin: 0;
 }
+
+/* --- The field, drawn as it will look --------------------------------------
+ *
+ * The canvas renders each field with the real front-end classes inside
+ * `.atfb-preview`, and `builder.css` is registered with `form.css` as a
+ * dependency — so the theme's radius, borders, spacing and colours apply here
+ * because it is the same stylesheet, not a copy of it.
+ *
+ * What these rules add is only the *editing* layer: where the caret goes, what
+ * an empty value looks like, and how a hover says "you can change this". None of
+ * them may restate anything the theme decides, or the canvas stops being a
+ * preview and starts being an impression of one. */
+
+.atfb-preview {
+	/* The theme paints the form's own card; on the canvas the builder's card is
+	   already that surface, so the preview contributes only its contents. */
+	background: none;
+	border: 0;
+	box-shadow: none;
+	padding: 0;
+	margin-block-start: 4px;
+}
+
+/* Anything editable in place. Invisible until pointed at, because a canvas of
+   twelve outlined boxes reads as a form full of errors. */
+.atfb-editable {
+	display: inline-block;
+	min-inline-size: 2ch;
+	border-radius: 3px;
+	outline: 1px dashed transparent;
+	outline-offset: 2px;
+	cursor: text;
+	transition: outline-color 120ms ease, background-color 120ms ease;
+}
+
+.atfb-editable:hover {
+	outline-color: var( --atfb-border-strong );
+}
+
+.atfb-editable:focus {
+	outline: 1px solid var( --atfb-accent );
+	background: var( --atfb-accent-soft );
+}
+
+/* An empty value has to occupy space and say what belongs there, or the row
+   collapses to nothing and there is no target to click. */
+.atfb-editable:empty::before {
+	content: attr( data-placeholder );
+	opacity: 0.55;
+	font-style: italic;
+}
+
+/* The faux control. It is a `contenteditable` wearing `.atf-input`, so the
+   theme's border, radius and padding are the real ones — only the text inside
+   is ours. */
+.atfb-preview__box {
+	display: block;
+	inline-size: 100%;
+	min-block-size: 1lh;
+	cursor: text;
+}
+
+.atfb-preview__box--tall {
+	min-block-size: 3lh;
+}
+
+/* The dropdown's chevron, drawn on the wrapper so the box itself stays a plain
+   editable area. */
+.atfb-preview__select {
+	position: relative;
+}
+
+.atfb-preview__select::after {
+	content: "";
+	position: absolute;
+	inset-inline-end: 12px;
+	inset-block-start: 50%;
+	inline-size: 7px;
+	block-size: 7px;
+	border-inline-end: 2px solid currentColor;
+	border-block-end: 2px solid currentColor;
+	transform: translateY( -70% ) rotate( 45deg );
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.atfb-preview__ghost {
+	display: inline-block;
+	min-block-size: 1lh;
+	flex: 1 1 0;
+}
+
+.atfb-preview__option {
+	align-items: center;
+	gap: 8px;
+}
+
+/* Reveals on hover rather than sitting there: a column of × buttons beside every
+   option is a canvas that looks like it is asking to be dismantled. */
+.atfb-preview__remove {
+	margin-inline-start: auto;
+	padding: 0 6px;
+	border: 0;
+	border-radius: 4px;
+	background: none;
+	color: var( --atfb-muted );
+	font-size: 15px;
+	line-height: 1;
+	cursor: pointer;
+	opacity: 0;
+	transition: opacity 120ms ease, color 120ms ease;
+}
+
+.atfb-preview__option:hover .atfb-preview__remove,
+.atfb-preview__remove:focus-visible {
+	opacity: 1;
+}
+
+.atfb-preview__remove:hover,
+.atfb-preview__remove:focus-visible {
+	color: var( --atfb-danger );
+	background: var( --atfb-danger-soft );
+}
+
+.atfb-preview__add {
+	margin-block-start: 2px;
+	padding: 2px 6px;
+	border: 0;
+	border-radius: 4px;
+	background: none;
+	color: var( --atfb-accent );
+	font: inherit;
+	font-size: 11px;
+	cursor: pointer;
+}
+
+.atfb-preview__add:hover,
+.atfb-preview__add:focus-visible {
+	background: var( --atfb-accent-soft );
+}
+
+/* What an elaborate control says instead of pretending to be itself. */
+.atfb-preview__summary {
+	margin: 0;
+	padding: 8px 10px;
+	border: 1px dashed var( --atfb-border );
+	border-radius: 6px;
+	color: var( --atfb-muted );
+	font-size: 11px;
+}
+
+/* Required, as a switch rather than a badge. */
+.atfb-req {
+	padding: 1px 7px;
+	border: 1px solid var( --atfb-border );
+	border-radius: 999px;
+	background: none;
+	color: var( --atfb-muted );
+	font: inherit;
+	font-size: 10px;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	cursor: pointer;
+	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+
+.atfb-req:hover {
+	border-color: var( --atfb-accent );
+	color: var( --atfb-accent );
+}
+
+.atfb-req.is-on {
+	background: var( --atfb-accent-soft );
+	border-color: transparent;
+	color: var( --atfb-accent );
+	font-weight: 700;
+}
+
+.atfb-req:focus-visible {
+	outline: 2px solid var( --atfb-accent );
+	outline-offset: 1px;
+}
+
+/* The card's own head is now a caption — the type and its switches — because
+   the field's name moved into the preview where it belongs. */
+.atfb-card__head {
+	gap: 8px;
+	opacity: 0.85;
+}
+
+.atfb-card__head .atfb-card__type {
+	font-size: 11px;
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+	.atfb-editable,
+	.atfb-preview__remove,
+	.atfb-req {
+		transition: none;
+	}
+}
+
+/* The card is now as tall as the field it draws, so its furniture aligns to the
+   top rather than floating at the middle of a five-option list. */
+.atfb-card {
+	align-items: flex-start;
+}
+
+.atfb-card__grip,
+.atfb-card__actions {
+	margin-block-start: 2px;
+}
+
+.atfb-card__body {
+	min-inline-size: 0;
+	flex: 1 1 auto;
+}
diff --git a/assets/js/builder.js b/assets/js/builder.js
index c7f57ea..f5b8486 100644
--- a/assets/js/builder.js
+++ b/assets/js/builder.js
@@ -416,14 +416,14 @@ var allTerrainFormsBuilder = function(exports) {
       attrs: { "aria-hidden": "true" }
     });
   }
-  function row(label, control, hint) {
-    const id = control.id || `atf-c-${Math.random().toString(36).slice(2, 9)}`;
-    control.id = id;
+  function row(label, control2, hint) {
+    const id = control2.id || `atf-c-${Math.random().toString(36).slice(2, 9)}`;
+    control2.id = id;
     return el("div", {
       class: "atfb-row",
       children: [
         el("label", { class: "atfb-row__label", text: label, attrs: { for: id } }),
-        control,
+        control2,
         hint ? el("p", { class: "atfb-row__hint", text: hint }) : null
       ]
     });
@@ -944,6 +944,272 @@ var allTerrainFormsBuilder = function(exports) {
       this.svg.append(text);
     }
   }
+  const SHAPES = {
+    text: "text",
+    email: "text",
+    url: "text",
+    tel: "text",
+    number: "text",
+    password: "text",
+    date: "text",
+    time: "text",
+    datetime: "text",
+    date_range: "composite",
+    textarea: "textarea",
+    select: "select",
+    country: "select",
+    multiselect: "options",
+    radio: "options",
+    checkboxes: "options",
+    image_choice: "options",
+    quiz: "options",
+    switch: "toggle",
+    consent: "toggle",
+    file: "file",
+    range: "range",
+    rating: "summary",
+    scale: "summary",
+    likert: "summary",
+    signature: "summary",
+    repeater: "summary",
+    color: "text",
+    name: "composite",
+    address: "composite",
+    total: "text",
+    hidden: "static",
+    heading: "static",
+    html: "static",
+    divider: "static",
+    spacer: "static",
+    page_break: "static"
+  };
+  function shapeFor(type) {
+    return SHAPES[type] ?? "text";
+  }
+  function editableText(value, placeholder, className, onInput, onCommit) {
+    const node = el("span", {
+      class: `${className} atfb-editable`,
+      text: value,
+      attrs: {
+        contenteditable: "plaintext-only",
+        role: "textbox",
+        spellcheck: "false",
+        "data-placeholder": placeholder
+      }
+    });
+    node.addEventListener("pointerdown", (event) => event.stopPropagation());
+    node.addEventListener("input", () => onInput(node.textContent ?? ""));
+    node.addEventListener("keydown", (event) => {
+      if ("Enter" === event.key) {
+        event.preventDefault();
+        node.blur();
+      }
+      if ("Escape" === event.key) {
+        node.textContent = value;
+        node.blur();
+      }
+      event.stopPropagation();
+    });
+    node.addEventListener("blur", () => onCommit?.());
+    return node;
+  }
+  function optionInputFor(type) {
+    const input = el("input", {
+      class: "atf-choice__input",
+      type: "checkboxes" === type || "multiselect" === type ? "checkbox" : "radio"
+    });
+    input.disabled = true;
+    return input;
+  }
+  function renderFieldPreview(field, type, handlers) {
+    const shape = shapeFor(field.type);
+    const label = editableText(
+      field.label,
+      "Write the question…",
+      "atf-label",
+      (value) => handlers.edit((live) => {
+        live.label = value;
+      }),
+      // Committed on blur rather than per keystroke: the label appears in other
+      // cards' condition chips and in the merge-tag picker, and repainting the
+      // canvas on every character would take the caret with it.
+      () => handlers.restructure(() => {
+      })
+    );
+    const parts = [
+      "static" === shape ? null : label,
+      field.hint ? el("p", { class: "atf-hint", text: field.hint }) : null,
+      control(field, type, shape, handlers)
+    ];
+    return el("div", {
+      // `.atf-form` is what the theme's custom properties are scoped to, and
+      // `.atf-field` is what gives the control its spacing. Both are the real
+      // front-end classes: the look here is the stylesheet, not a copy of it.
+      class: "atfb-preview atf-form",
+      children: [
+        el("div", {
+          class: `atf-field atf-field--${field.type}`,
+          children: parts
+        })
+      ]
+    });
+  }
+  function control(field, type, shape, handlers) {
+    switch (shape) {
+      case "text":
+        return placeholderBox(field, "atf-input", handlers);
+      case "textarea":
+        return placeholderBox(field, "atf-input atf-textarea", handlers, true);
+      case "select":
+        return el("div", {
+          class: "atfb-preview__select",
+          children: [placeholderBox(field, "atf-input atf-select", handlers)]
+        });
+      case "options":
+        return optionList(field, handlers);
+      case "toggle":
+        return el("div", {
+          class: "atf-toggle",
+          children: [
+            (() => {
+              const box = el("input", { class: "atf-toggle__input", type: "checkbox" });
+              box.disabled = true;
+              return box;
+            })(),
+            editableText(
+              field.label || "",
+              "What are they agreeing to?…",
+              "atf-toggle__label",
+              (value) => handlers.edit((live) => {
+                live.label = value;
+              }),
+              () => handlers.restructure(() => {
+              })
+            )
+          ]
+        });
+      case "file":
+        return el("div", { class: "atf-file", children: [el("input", { class: "atf-file__input", type: "file" })] });
+      case "range":
+        return el("input", { class: "atf-range__input", type: "range" });
+      case "composite":
+        return el("div", {
+          class: "atf-composite__parts",
+          children: [
+            el("span", { class: "atf-input atfb-preview__ghost", text: "" }),
+            el("span", { class: "atf-input atfb-preview__ghost", text: "" })
+          ]
+        });
+      case "static":
+        return staticBlock(field, type, handlers);
+      default:
+        return el("p", {
+          class: "atfb-preview__summary",
+          text: `${type?.label ?? field.type} — set this up in the panel on the right.`
+        });
+    }
+  }
+  function placeholderBox(field, className, handlers, tall = false) {
+    const box = editableText(
+      field.placeholder ?? "",
+      "select" === field.type || "country" === field.type ? "Choose…" : "Placeholder…",
+      `${className} atfb-preview__box${tall ? " atfb-preview__box--tall" : ""}`,
+      (value) => handlers.edit((live) => {
+        live.placeholder = value;
+      })
+    );
+    box.setAttribute("aria-label", "Placeholder");
+    return box;
+  }
+  function optionList(field, handlers) {
+    const list = el("div", { class: "atf-choices__list" });
+    (field.choices ?? []).forEach((choice, index) => {
+      list.append(
+        el("div", {
+          class: "atf-choice atfb-preview__option",
+          children: [
+            optionInputFor(field.type),
+            editableText(
+              choice.label,
+              "Option…",
+              "atf-choice__label",
+              (value) => {
+                handlers.edit((live) => {
+                  const target = live.choices?.[index];
+                  if (!target) {
+                    return;
+                  }
+                  const mirroring = !target.value || target.value === target.label;
+                  target.label = value;
+                  if (mirroring) {
+                    target.value = value;
+                  }
+                });
+              }
+            ),
+            el("button", {
+              class: "atfb-preview__remove",
+              type: "button",
+              title: "Remove this option",
+              attrs: { "aria-label": `Remove ${choice.label || "this option"}` },
+              on: {
+                pointerdown: (event) => event.stopPropagation(),
+                click: (event) => {
+                  event.stopPropagation();
+                  handlers.restructure((live) => {
+                    live.choices.splice(index, 1);
+                  });
+                }
+              },
+              children: [el("span", { text: "×" })]
+            })
+          ]
+        })
+      );
+    });
+    list.append(
+      el("button", {
+        class: "atfb-preview__add",
+        type: "button",
+        on: {
+          pointerdown: (event) => event.stopPropagation(),
+          click: (event) => {
+            event.stopPropagation();
+            handlers.restructure((live) => {
+              const next = live.choices.length + 1;
+              live.choices.push({ label: `Option ${next}`, value: `Option ${next}` });
+            });
+          }
+        },
+        children: [el("span", { text: "+ Add option" })]
+      })
+    );
+    return el("fieldset", { class: "atf-choices", children: [list] });
+  }
+  function staticBlock(field, type, handlers) {
+    if ("heading" === field.type) {
+      return editableText(
+        field.label,
+        "Section heading…",
+        "atf-heading",
+        (value) => handlers.edit((live) => {
+          live.label = value;
+        }),
+        () => handlers.restructure(() => {
+        })
+      );
+    }
+    if ("divider" === field.type) {
+      return el("hr", { class: "atf-divider" });
+    }
+    if ("page_break" === field.type) {
+      return el("p", { class: "atfb-preview__summary", text: "Everything after this is a new page." });
+    }
+    return el("p", {
+      class: "atfb-preview__summary",
+      text: `${type?.label ?? field.type} — nothing is shown to the visitor here.`
+    });
+  }
   const cache = /* @__PURE__ */ new Map();
   function mergeTags(formId) {
     let pending2 = cache.get(formId);
@@ -1423,7 +1689,7 @@ var allTerrainFormsBuilder = function(exports) {
       const tokens = currentTokens();
       for (const dial of quickDials()) {
         const at = dial.read(tokens);
-        let control;
+        let control2;
         if (dial.kind === "colour") {
           const picker = el("input", {
             class: "atfs-color",
@@ -1434,7 +1700,7 @@ var allTerrainFormsBuilder = function(exports) {
               input: (event) => applyDial(dial, event.target.value)
             }
           });
-          control = el("div", {
+          control2 = el("div", {
             class: "atfs-color-row",
             children: [
               picker,
@@ -1442,7 +1708,7 @@ var allTerrainFormsBuilder = function(exports) {
             ]
           });
         } else {
-          control = el("div", {
+          control2 = el("div", {
             class: `atfs-segmented atfs-segmented--${dial.kind}`,
             attrs: { role: "group", "aria-label": dial.label },
             children: (dial.steps ?? []).map(
@@ -1467,7 +1733,7 @@ var allTerrainFormsBuilder = function(exports) {
                   el("span", { class: "atfs-dial__hint", text: dial.hint })
                 ]
               }),
-              control
+              control2
             ]
           })
         );
@@ -1517,7 +1783,7 @@ var allTerrainFormsBuilder = function(exports) {
         options.onOverride(token.token, next);
         repaint();
       };
-      let control;
+      let control2;
       if (token.control === "color") {
         const picker = el("input", {
           class: "atfs-color",
@@ -1536,9 +1802,9 @@ var allTerrainFormsBuilder = function(exports) {
           picker.value = normaliseHex(next);
           change(next);
         });
-        control = el("div", { class: "atfs-color-row", children: [picker, text] });
+        control2 = el("div", { class: "atfs-color-row", children: [picker, text] });
       } else if (token.control === "select") {
-        control = select(
+        control2 = select(
           value,
           (token.options ?? []).map((option) => ({ value: option, label: option })),
           change
@@ -1564,11 +1830,11 @@ var allTerrainFormsBuilder = function(exports) {
           range.value = String(parseFloat(next) || 0);
           change(next);
         });
-        control = el("div", { class: "atfs-length-row", children: [range, text] });
+        control2 = el("div", { class: "atfs-length-row", children: [range, text] });
       } else {
-        control = textInput(value, change);
+        control2 = textInput(value, change);
       }
-      const wrapper = row(token.label, control);
+      const wrapper = row(token.label, control2);
       const dial = dialOwning(token.token);
       if (dial) {
         wrapper.classList.add("is-dialled");
@@ -2027,6 +2293,10 @@ var allTerrainFormsBuilder = function(exports) {
   const FIELD_PAYLOAD_TYPE = "allterrain-forms/field";
   const MEDIA_PAYLOAD_TYPES = ["openstation/file", "desktop-mode/file", "openstation/attachment"];
   const LOGIC_MAP_SETTING = "allterrain-forms/logic-map-v2";
+  function bind(control2, key) {
+    control2.dataset.atfbBind = key;
+    return control2;
+  }
   const PREFILL_SOURCES = [
     { value: "user:email", label: "Their email address", group: "About the person filling it in", tag: "{user:email}" },
     { value: "user:display_name", label: "Their name", group: "About the person filling it in", tag: "{user:display_name}" },
@@ -2051,6 +2321,9 @@ var allTerrainFormsBuilder = function(exports) {
       this.selected = null;
       this.tab = "build";
       this.logicMap = null;
+      this.canvasTheme = el("style");
+      this.canvasThemeSignature = "";
+      this.openSections = /* @__PURE__ */ new Map();
       this.logicMapOn = "off" !== readSetting(LOGIC_MAP_SETTING);
       this.dirty = false;
       this.teardowns = [];
@@ -2099,7 +2372,7 @@ var allTerrainFormsBuilder = function(exports) {
           this.inspector.append(
             row(
               "Label",
-              textInput(field.label, (value) => update("label", value))
+              bind(textInput(field.label, (value) => update("label", value)), "label")
             )
           );
         }
@@ -2107,7 +2380,7 @@ var allTerrainFormsBuilder = function(exports) {
           this.inspector.append(
             row(
               "Placeholder",
-              textInput(field.placeholder, (value) => update("placeholder", value))
+              bind(textInput(field.placeholder, (value) => update("placeholder", value)), "placeholder")
             )
           );
         }
@@ -2324,6 +2597,106 @@ var allTerrainFormsBuilder = function(exports) {
         })
       );
     }
+    /**
+     * The field with this id in the *current* schema.
+     *
+     * Returns undefined when it has gone — deleted in another window, or dropped
+     * by the server's normalisation — which is a write that should simply not
+     * happen rather than one that should throw.
+     *
+     * @param fieldId The field's id.
+     * @return The live field, if it is still there.
+     */
+    liveField(fieldId) {
+      return this.schema?.fields.find((candidate) => candidate.id === fieldId);
+    }
+    /**
+     * Writes a field's current values into the inspector's matching controls.
+     *
+     * Only when the inspector is actually showing that field — editing a card that
+     * is not selected must not rewrite the pane describing a different one.
+     *
+     * Deliberately one-directional and value-only: the inspector's own handlers
+     * already write to the schema, and firing them from here would put the two
+     * panes in a loop, each telling the other about a change it had just made.
+     *
+     * @param field The field that was edited on the canvas.
+     */
+    /**
+     * Writes a field's current values into its card on the canvas.
+     *
+     * The mirror image of `syncInspector()`, for the same reason: the two panes
+     * edit one value and have to agree while it is being typed. The inspector's
+     * `update()` already repaints the canvas wholesale, but the choices editor
+     * mutates in place and only marks the form dirty — which was invisible until
+     * the canvas started drawing the options.
+     *
+     * Writes `textContent` rather than re-rendering, so the caret in the
+     * inspector is untouched.
+     *
+     * @param field The field that was edited in the inspector.
+     */
+    syncCanvas(field) {
+      const card = this.canvas.querySelector(
+        `[data-atfb-card="${CSS.escape(field.id)}"]`
+      );
+      if (!card) {
+        return;
+      }
+      const label = card.querySelector(".atf-label.atfb-editable");
+      if (label && label.textContent !== field.label) {
+        label.textContent = field.label;
+      }
+      const options = card.querySelectorAll(".atf-choice__label.atfb-editable");
+      (field.choices ?? []).forEach((choice, index) => {
+        const option = options[index];
+        if (option && option.textContent !== choice.label) {
+          option.textContent = choice.label;
+        }
+      });
+    }
+    syncInspector(field) {
+      if (this.selected !== field.id) {
+        return;
+      }
+      const write = (key, value) => {
+        const control2 = this.inspector.querySelector(
+          `[data-atfb-bind="${CSS.escape(key)}"]`
+        );
+        if (!control2) {
+          return;
+        }
+        if ("value" in control2) {
+          control2.value = value;
+        } else {
+          control2.setAttribute("value", value);
+        }
+      };
+      write("label", field.label ?? "");
+      write("placeholder", field.placeholder ?? "");
+      (field.choices ?? []).forEach((choice, index) => {
+        write(`choice:${index}:label`, choice.label ?? "");
+        write(`choice:${index}:value`, choice.value ?? "");
+      });
+    }
+    /**
+     * Rebuilds the canvas so its cards point at the current schema objects.
+     *
+     * Deferred while the canvas holds focus. An autosave fires 2.5 seconds after
+     * the last keystroke, which is exactly when somebody has paused mid-sentence
+     * with the caret still in a label — and rebuilding then would take the caret
+     * away for no reason they could see. Waiting for the blur costs nothing: the
+     * card on screen already shows what they typed, and the rebind only has to
+     * happen before the *next* edit.
+     */
+    rebindCanvas() {
+      const focused = document.activeElement;
+      if (focused instanceof HTMLElement && this.canvas.contains(focused)) {
+        focused.addEventListener("blur", () => this.rebindCanvas(), { once: true });
+        return;
+      }
+      this.renderCanvas();
+    }
     /**
      * Takes a history snapshot.
      *
@@ -2490,6 +2863,7 @@ var allTerrainFormsBuilder = function(exports) {
         this.form = saved;
         this.schema = saved.schema;
         this.dirty = false;
+        this.rebindCanvas();
         forgetMergeTags(saved.id);
         const summary = this.forms.find((candidate) => candidate.id === saved.id);
         if (summary) {
@@ -2777,6 +3151,7 @@ var allTerrainFormsBuilder = function(exports) {
       this.canvas.append(inner);
       this.registerCanvasTarget(list);
       this.paintLogicMap(inner);
+      void this.paintCanvasTheme();
     }
     /**
      * Where a field's opening value comes from, asked in plain language.
@@ -2972,6 +3347,36 @@ var allTerrainFormsBuilder = function(exports) {
       };
       return el("span", { class: classes[token.kind], text: token.text });
     }
+    /**
+     * A disclosure panel that remembers whether it was open.
+     *
+     * `openByDefault` decides only what happens the *first* time a key is seen —
+     * a field that already has a condition opens showing it, because arriving at
+     * a field and being told nothing about a rule that governs it is worse than a
+     * little extra height. After that the person's own choice wins.
+     *
+     * What this deliberately does not do is derive `open` from the data inside
+     * it. Conditional logic used to: `open: logic.enabled`, so unticking "Only
+     * show this field sometimes" collapsed the panel around the checkbox that had
+     * just been clicked. Whether a panel is open is a question about the
+     * *person's attention*; whether a feature is on is a question about the
+     * *form*. Binding one to the other means neither can be set independently.
+     *
+     * @param key           Stable identity for this panel.
+     * @param summary       The panel's heading.
+     * @param children      What it contains.
+     * @param openByDefault Whether to open it the first time it is rendered.
+     * @return The panel.
+     */
+    section(key, summary, children, openByDefault = false) {
+      const details = el("details", {
+        class: "atfb-section",
+        attrs: { open: this.openSections.get(key) ?? openByDefault },
+        children: [el("summary", { text: summary }), ...children]
+      });
+      details.addEventListener("toggle", () => this.openSections.set(key, details.open));
+      return details;
+    }
     /**
      * The toolbar's toggle for the logic overlay.
      *
@@ -3055,8 +3460,8 @@ var allTerrainFormsBuilder = function(exports) {
                 class: "atfb-card__head",
                 children: [
                   icon(type?.icon ?? "dashicons-forms"),
-                  el("strong", { text: field.label || i18n("untitledField", "Untitled field") }),
-                  field.required ? el("span", { class: "atfb-badge", text: "required" }) : null,
+                  el("span", { class: "atfb-card__type", text: type?.label ?? field.type }),
+                  this.requiredToggle(field),
                   controls ? el("span", {
                     class: "atfb-badge atfb-badge--controls",
                     text: 1 === controls ? "controls 1 field" : `controls ${controls} fields`,
@@ -3064,7 +3469,34 @@ var allTerrainFormsBuilder = function(exports) {
                   }) : null
                 ]
               }),
-              el("span", { class: "atfb-card__type", text: type?.label ?? field.type }),
+              // The field itself, drawn with the real front-end classes and the
+              // form's own theme, with its text editable where it sits.
+              renderFieldPreview(field, type, {
+                // The live field is looked up by id on every write. A save
+                // replaces `this.schema` with the server's normalised copy,
+                // so the object this card was rendered from stops being the
+                // one that gets serialised — see `PreviewHandlers`.
+                edit: (apply) => {
+                  const live = this.liveField(field.id);
+                  if (!live) {
+                    return;
+                  }
+                  apply(live);
+                  this.markDirty();
+                  this.syncInspector(live);
+                },
+                restructure: (apply) => {
+                  const live = this.liveField(field.id);
+                  if (!live) {
+                    return;
+                  }
+                  this.snapshot();
+                  apply(live);
+                  this.markDirty();
+                  this.renderCanvas();
+                  this.renderInspector();
+                }
+              }),
               condition.length ? this.renderCondition(condition) : null
             ]
           }),
@@ -3115,6 +3547,36 @@ var allTerrainFormsBuilder = function(exports) {
       });
       return card;
     }
+    /**
+     * The required flag, as a toggle on the card rather than a badge.
+     *
+     * It was already displayed here as a read-only badge, and the switch that set
+     * it was in the inspector — so the canvas told you a field was required and
+     * made you go somewhere else to change it. Marking a question required is a
+     * decision you make while writing it, not afterwards.
+     */
+    requiredToggle(field) {
+      const toggle = el("button", {
+        class: `atfb-req${field.required ? " is-on" : ""}`,
+        type: "button",
+        text: field.required ? "Required" : "Optional",
+        title: field.required ? "This must be answered. Click to make it optional." : "Click to make this required.",
+        attrs: { "aria-pressed": field.required ? "true" : "false" },
+        on: {
+          // The card is draggable and clicking it selects the field; neither
+          // should happen when the target was this switch.
+          pointerdown: (event) => event.stopPropagation(),
+          click: (event) => {
+            event.stopPropagation();
+            field.required = !field.required;
+            this.markDirty();
+            this.renderCanvas();
+            this.renderInspector();
+          }
+        }
+      });
+      return toggle;
+    }
     /** A small icon button on a field card. */
     cardAction(iconSlug, label, onClick) {
       return el("button", {
@@ -3289,7 +3751,12 @@ var allTerrainFormsBuilder = function(exports) {
     /** Selects a field and shows it in the inspector. */
     selectField(fieldId) {
       this.selected = fieldId;
-      this.renderCanvas();
+      for (const card of this.canvas.querySelectorAll("[data-atfb-card]")) {
+        const isSelected = card.dataset.atfbCard === fieldId;
+        card.classList.toggle("is-selected", isSelected);
+        card.setAttribute("aria-pressed", isSelected ? "true" : "false");
+      }
+      this.logicMap?.highlight(fieldId);
       this.renderInspector();
     }
     /** A field id not already in use. */
@@ -3313,20 +3780,25 @@ var allTerrainFormsBuilder = function(exports) {
             // pictures. Everywhere else it would be a column of
             // empty boxes for a setting that does nothing.
             field.type === "image_choice" ? this.choiceImageWell(choice, index, field) : null,
-            textInput(choice.label, (value) => {
+            bind(textInput(choice.label, (value) => {
+              const mirroring = !choice.value || choice.value === choice.label;
               choice.label = value;
-              if (!choice.value || choice.value === choices[index].value) {
+              if (mirroring) {
                 choice.value = value;
               }
               this.markDirty();
-            }),
-            textInput(
-              choice.value,
-              (value) => {
-                choice.value = value;
-                this.markDirty();
-              },
-              "value"
+              this.syncCanvas(field);
+            }), `choice:${index}:label`),
+            bind(
+              textInput(
+                choice.value,
+                (value) => {
+                  choice.value = value;
+                  this.markDirty();
+                },
+                "value"
+              ),
+              `choice:${index}:value`
             ),
             field.type === "quiz" || choice.points !== void 0 ? numberInput(String(choice.points ?? ""), (value) => {
               choice.points = value === "" ? void 0 : Number(value);
@@ -3491,10 +3963,7 @@ var allTerrainFormsBuilder = function(exports) {
           "Leave empty for the default wording."
         )
       );
-      return el("details", {
-        class: "atfb-section",
-        children: [el("summary", { text: "Validation" }), ...rows]
-      });
+      return this.section(`validation:${field.id}`, "Validation", rows);
     }
     /** The conditional-logic editor. */
     renderLogicSection(field, update) {
@@ -3548,11 +4017,10 @@ var allTerrainFormsBuilder = function(exports) {
           })
         );
       });
-      return el("details", {
-        class: "atfb-section",
-        attrs: { open: logic.enabled },
-        children: [
-          el("summary", { text: "Conditional logic" }),
+      return this.section(
+        `logic:${field.id}`,
+        "Conditional logic",
+        [
           checkbox("Only show this field sometimes", logic.enabled, (value) => {
             logic.enabled = value;
             update("logic", logic);
@@ -3606,8 +4074,12 @@ var allTerrainFormsBuilder = function(exports) {
               )
             ]
           }) : null
-        ]
-      });
+        ],
+        // A field that already has a condition opens showing it: being told a
+        // rule governs this field and not what it says is the problem the
+        // whole logic display exists to solve.
+        logic.enabled
+      );
     }
     /* ------------------------------------------------------------ Tab panes */
     /** The canvas contents for the non-Build tabs. */
@@ -3647,6 +4119,50 @@ var allTerrainFormsBuilder = function(exports) {
       }
       return this.renderConfirmationsPane();
     }
+    /**
+     * Puts the form's own theme tokens onto the canvas.
+     *
+     * The previews on the canvas use the real front-end classes, so they are
+     * already styled by `form.css` — but `form.css` reads everything from custom
+     * properties, and without them it falls back to the built-in defaults. The
+     * result would be a canvas that looks like Clean whatever theme the form is
+     * set to, which is the one thing a WYSIWYG canvas must not do.
+     *
+     * The values come from the server's own renderer rather than being resolved
+     * again here. A form's theme is a base theme plus per-form overrides plus
+     * whatever `atf_theme_tokens` filters did to it, and a second resolver in
+     * TypeScript would be a second answer to "what colour is this" — the same
+     * twin-engine problem the logic and calculation code goes to some length to
+     * avoid. One render is asked for, its `<style>` block is lifted, and its
+     * selector is repointed at the canvas.
+     *
+     * Failure is silent on purpose: no tokens means the previews render in the
+     * default theme, which is a worse-looking canvas and a working builder.
+     */
+    async paintCanvasTheme() {
+      if (!this.form || !this.schema) {
+        return;
+      }
+      const theme = this.schema.settings.theme;
+      const signature = JSON.stringify([theme, this.schema.settings.themeOverrides]);
+      if (signature === this.canvasThemeSignature) {
+        return;
+      }
+      this.canvasThemeSignature = signature;
+      try {
+        const html = await this.previewHtml(theme, this.schema.settings.themeOverrides ?? {});
+        const block = /<style>([\s\S]*?)<\/style>/.exec(html);
+        if (!block) {
+          return;
+        }
+        const css = block[1].replace(/#atf-[\d-]+\s+\.atf-form/g, ".atfb .atfb-preview");
+        this.canvasTheme.textContent = css;
+        if (!this.canvasTheme.isConnected) {
+          this.root.append(this.canvasTheme);
+        }
+      } catch {
+      }
+    }
     /** Renders the current schema to HTML for a preview. */
     async previewHtml(theme, overrides) {
       if (!this.form || !this.schema) {
@@ -3953,10 +4469,10 @@ var allTerrainFormsBuilder = function(exports) {
       }
       notifications.forEach((notification, index) => {
         list.append(
-          el("details", {
-            class: "atfb-section",
-            children: [
-              el("summary", { text: notification.name || `Notification ${index + 1}` }),
+          this.section(
+            `notification:${notification.id}`,
+            notification.name || `Notification ${index + 1}`,
+            [
               row(
                 "Name",
                 textInput(notification.name, (value) => {
@@ -4009,7 +4525,7 @@ var allTerrainFormsBuilder = function(exports) {
                 "danger"
               )
             ]
-          })
+          )
         );
       });
       return el("div", {
@@ -4140,10 +4656,10 @@ var allTerrainFormsBuilder = function(exports) {
         };
         paintDetail();
         list.append(
-          el("details", {
-            class: "atfb-section",
-            children: [
-              el("summary", { text: confirmation.name || `Confirmation ${index + 1}` }),
+          this.section(
+            `confirmation:${confirmation.id}`,
+            confirmation.name || `Confirmation ${index + 1}`,
+            [
               row(
                 "Name",
                 textInput(confirmation.name, (value) => {
@@ -4178,7 +4694,7 @@ var allTerrainFormsBuilder = function(exports) {
                 "danger"
               )
             ]
-          })
+          )
         );
       });
       return el("div", {
diff --git a/assets/js/builder.min.js b/assets/js/builder.min.js
index 8f5435d..e134a1f 100644
--- a/assets/js/builder.min.js
+++ b/assets/js/builder.min.js
@@ -1 +1 @@
-var allTerrainFormsBuilder=function(V){"use strict";class Ze{constructor(){this.targets=[],this.active=null,this.lastEndMs=0}start(e){if(this.active||e.origin.button!==0)return null;const{payload:t,origin:s}=e,n=s.clientX,a=s.clientY;let o=!1,c=!1,l=null,d=null,f=0,L=0;const v=()=>{document.removeEventListener("pointermove",E),document.removeEventListener("pointerup",P),document.removeEventListener("pointercancel",H),document.removeEventListener("keydown",se),window.removeEventListener("blur",H),l?.remove(),l=null,t.source.classList.remove("atf-is-dragging"),d?.onLeave?.(p),d=null,this.active=null,this.lastEndMs=Date.now()},p={payload:t,isFinished:()=>c,cancel:(_="caller")=>{c||(c=!0,v(),e.onCancel?.(_))}},y=_=>{o=!0,t.source.classList.add("atf-is-dragging");const T=t.source.getBoundingClientRect();f=t.ghost?.offsetX??n-T.left,L=t.ghost?.offsetY??a-T.top,l=t.ghost?.element??t.source.cloneNode(!0),l.classList.add("atf-drag-ghost"),l.style.width=`${T.width}px`,document.body.appendChild(l),S(_)},S=_=>{l&&(l.style.transform=`translate3d(${_.clientX-f}px, ${_.clientY-L}px, 0)`)},E=_=>{if(c)return;if(!o){if(Math.hypot(_.clientX-n,_.clientY-a)<4)return;y(_)}S(_);const T=this.hitTest(_.clientX,_.clientY);T!==d&&(d?.onLeave?.(p),d=T,d?.onEnter?.(p))},P=_=>{if(c)return;if(!o){c=!0,v(),e.onClickOnly?.();return}const T=d;if(c=!0,v(),T&&T.accept(t)){e.onCommit?.(T),T.onDrop(p,{clientX:_.clientX,clientY:_.clientY});return}e.onCancel?.(T?"rejected":"no-target")},H=()=>p.cancel("pointercancel"),se=_=>{_.key==="Escape"&&p.cancel("escape")};return document.addEventListener("pointermove",E),document.addEventListener("pointerup",P),document.addEventListener("pointercancel",H),document.addEventListener("keydown",se),window.addEventListener("blur",H),this.active=p,p}registerDropTarget(e){return this.targets=this.targets.filter(t=>t.id!==e.id),this.targets.push(e),()=>{this.targets=this.targets.filter(t=>t.id!==e.id)}}isDragging(){return this.active!==null}recentlyEndedDrag(e=500){return Date.now()-this.lastEndMs<e}hitTest(e,t){let s=null,n=-1;for(const a of this.targets){const o=a.element.getBoundingClientRect();if(e<o.left||e>o.right||t<o.top||t>o.bottom)continue;const c=et(a.element);if(c>n){s=a,n=c;continue}c===n&&s&&tt(a.element,s.element)&&(s=a)}return s}}function et(i){let e=0,t=i;for(;t;)e++,t=t.parentElement;return e}function tt(i,e){return(e.compareDocumentPosition(i)&Node.DOCUMENT_POSITION_FOLLOWING)!==0}function ae(){return window.wp?.os??null}let re=null;function U(){const i=ae();return i?.dragManager?i.dragManager:(re||(re=new Ze),re)}function st(i){const e=n=>{const a=n.detail?.payload;return a&&i.includes(a.type)?a.source:null},t=n=>e(n)?.classList.add("atf-is-dragging"),s=n=>e(n)?.classList.remove("atf-is-dragging");return document.addEventListener("os.drag.start",t),document.addEventListener("os.drag.end",s),()=>{document.removeEventListener("os.drag.start",t),document.removeEventListener("os.drag.end",s)}}function ke(i,e,t,s,n){const a=e.getBoundingClientRect();return n&&(n.style.width=`${Math.round(a.width)}px`,n.style.maxWidth=`${Math.round(a.width)}px`,n.style.boxSizing="border-box"),{type:i,source:e,data:t,ghost:{element:n,offsetX:s.clientX-a.left,offsetY:s.clientY-a.top,hint:{neutral:"",accept:"",reject:"",hidden:!0}}}}function Se(i,e,t,s){const n=Array.from(i.querySelectorAll(e)).filter(a=>a!==s&&!a.classList.contains("atf-drag-ghost"));for(let a=0;a<n.length;a++){const o=n[a].getBoundingClientRect();if(t<o.top+o.height/2)return a}return n.length}const F=window.allTerrainForms;class Q extends Error{constructor(e,t,s=""){super(e),this.name="ApiError",this.status=t,this.code=s}}async function oe(i,e={}){if(!F?.restUrl)throw new Q("AllTerrain Forms is not configured on this page.",0);const t=`${F.restUrl}${i}`,s={"Content-Type":"application/json",...e.headers??{}};F.nonce&&(s["X-WP-Nonce"]=F.nonce);const n=ae(),o=await(n?.fetch?(c,l)=>n.fetch(c,l,{source:"allterrain-forms"}):(c,l)=>fetch(c,l))(t,{credentials:"same-origin",...e,headers:s});if(!o.ok){let c=`Request failed with status ${o.status}.`,l="";try{const d=await o.json();c=d.message??c,l=d.code??""}catch{}throw new Q(c,o.status,l)}if(o.status!==204)return await o.json()}const N=i=>oe(i);async function it(i){if(!F?.wpRestUrl)throw new Q("AllTerrain Forms is not configured on this page.",0);const e=F.nonce?{"X-WP-Nonce":F.nonce}:{},t=ae(),s=`${F.wpRestUrl}${i}`,n=t?.fetch?await t.fetch(s,{credentials:"same-origin",headers:e},{source:"allterrain-forms"}):await fetch(s,{credentials:"same-origin",headers:e});if(!n.ok)throw new Q(`Request failed with status ${n.status}.`,n.status);return await n.json()}function nt(i){if(!i||!i.includes("&"))return i;const e=document.createElement("textarea");return e.innerHTML=i,e.value}const j=(i,e)=>oe(i,{method:"POST",body:JSON.stringify(e)}),le=i=>oe(i,{method:"DELETE"});function Ee(i){const e=new URLSearchParams;for(const[s,n]of Object.entries(i))n===void 0||n===""||n===!1||e.set(s,String(n));const t=e.toString();return t?`?${t}`:""}const C={config:()=>N("/config"),listForms:()=>N("/forms"),getForm:i=>N(`/forms/${i}`),createForm:i=>j("/forms",i),updateForm:(i,e)=>j(`/forms/${i}`,e),duplicateForm:i=>j(`/forms/${i}/duplicate`,{}),deleteForm:i=>le(`/forms/${i}`),preview:(i,e)=>j(`/forms/${i}/preview`,e),pages:()=>it("wp/v2/pages?per_page=100&status=publish&orderby=title&order=asc&_fields=id,title").then(i=>i.map(e=>({id:e.id,title:nt(e.title?.rendered??"")||`#${e.id}`}))),mergeTags:i=>N(`/forms/${i}/merge-tags`).then(e=>e.groups),analytics:i=>N(`/forms/${i}/analytics`),listEntries:i=>N(`/entries${Ee(i)}`),getEntry:i=>N(`/entries/${i}`),updateEntry:(i,e)=>j(`/entries/${i}`,e),deleteEntry:i=>le(`/entries/${i}`),exportEntries:i=>N(`/entries/export${Ee(i)}`),listThemes:()=>N("/themes"),saveTheme:i=>j("/themes",i),deleteTheme:i=>le(`/themes/${i}`)};function r(i,e={}){const t=document.createElement(i);e.class&&(t.className=e.class),e.text!==void 0&&(t.textContent=e.text),e.html!==void 0&&(t.innerHTML=e.html),e.title&&(t.title=e.title),e.type&&"type"in t&&(t.type=e.type),e.value!==void 0&&"value"in t&&(t.value=e.value),e.placeholder!==void 0&&"placeholder"in t&&(t.placeholder=e.placeholder),e.href&&"href"in t&&(t.href=e.href);for(const[s,n]of Object.entries(e.attrs??{}))n===void 0||n===!1||t.setAttribute(s,n===!0?"":String(n));Object.assign(t.style,e.style??{});for(const[s,n]of Object.entries(e.on??{}))t.addEventListener(s,n);for(const s of e.children??[])s==null||s===!1||t.append(s);return t}function $(i){i.replaceChildren()}function O(i){return r("span",{class:`dashicons ${i.startsWith("dashicons-")?i:`dashicons-${i}`}`,attrs:{"aria-hidden":"true"}})}function m(i,e,t){const s=e.id||`atf-c-${Math.random().toString(36).slice(2,9)}`;return e.id=s,r("div",{class:"atfb-row",children:[r("label",{class:"atfb-row__label",text:i,attrs:{for:s}}),e,t?r("p",{class:"atfb-row__hint",text:t}):null]})}function w(i,e,t=""){return r("input",{class:"atfb-input",type:"text",value:i,placeholder:t,on:{input:s=>e(s.target.value)}})}function R(i,e){if(X("os-number-field")){const t=document.createElement("os-number-field");return t.setAttribute("value",i),t.classList.add("atfb-field"),t.addEventListener("os-input-change",s=>{e(String(s.detail?.value??""))}),t}return r("input",{class:"atfb-input",type:"number",value:i,on:{input:t=>e(t.target.value)}})}function Le(i,e,t=4){const s=r("textarea",{class:"atfb-input atfb-input--area",attrs:{rows:t},on:{input:n=>e(n.target.value)}});return s.value=i,s}function D(i,e,t){if(X("os-select")&&X("os-option")){const s=document.createElement("os-select");s.setAttribute("value",i),s.classList.add("atfb-field");for(const n of e){const a=document.createElement("os-option");a.setAttribute("value",n.value),a.textContent=n.label,s.append(a)}return s.addEventListener("os-pick",n=>{t(String(n.detail?.value??""))}),s}return r("select",{class:"atfb-input atfb-select",on:{change:s=>t(s.target.value)},children:e.map(s=>r("option",{value:s.value,text:s.label,attrs:{selected:s.value===i}}))})}function M(i,e,t){if(X("os-checkbox-label")){const n=document.createElement("os-checkbox-label");return n.setAttribute("label",i),n.classList.add("atfb-check"),e&&n.setAttribute("checked",""),n.addEventListener("os-checkbox-change",a=>{t(!!a.detail?.checked)}),n}const s=r("input",{type:"checkbox",on:{change:n=>t(n.target.checked)}});return s.checked=e,r("label",{class:"atfb-check",children:[s,r("span",{text:i})]})}function k(i,e,t="secondary",s){const n=[s?O(s):null,r("span",{text:i})];if(X("os-button")){const a=document.createElement("os-button");a.setAttribute("variant",t),a.setAttribute("type","button"),a.classList.add("atfb-button",`atfb-button--${t}`),a.addEventListener("click",e);for(const o of n)o&&a.append(o);return a}return r("button",{class:`atfb-button atfb-button--${t}`,type:"button",on:{click:e},children:n})}function X(i){return typeof customElements<"u"&&!!customElements.get(i)}const at=["os-button","os-checkbox-label","os-number-field","os-select","os-option","os-segmented","os-segment","os-color-field","os-empty-state"];let Z=null;function rt(){if(Z)return Z;const i=window.wp?.os;return Z=i?.loadComponents?i.loadComponents(at).catch(()=>{}):Promise.resolve(),Z}async function ce(i,e=""){const t=window.wp?.os;return t?.confirm?t.confirm({title:e,message:i,danger:!0}):window.confirm(i)}function I(i,e="",t="info"){const s=window.wp?.os;if(s?.notify){s.notify({title:i,body:e,type:t});return}console.info(`[AllTerrain Forms] ${i}${e?`: ${e}`:""}`)}function ot(i){let e=0,t;return(...s)=>{t=s,!e&&(e=window.requestAnimationFrame(()=>{e=0,i(...t)}))}}function Ce(i,e){let t=0;return(...s)=>{window.clearTimeout(t),t=window.setTimeout(()=>i(...s),e)}}function lt(i){try{return window.localStorage.getItem(i)??""}catch{return""}}function ct(i,e){try{window.localStorage.setItem(i,e)}catch{}}function Te(){const i=[window];try{window.parent&&window.parent!==window&&i.push(window.parent)}catch{}return i}function dt(i){const e=i.wp?.os?.windowManager?.getAll?.()??[];for(const t of e){const s=t.iframe??t.element?.querySelector?.("iframe");if(s&&s.contentWindow===window)return t}return null}const ht=4e3,ut=100;function ft(i,e){const t=Date.now()+ht,s=()=>{const n=dt(i);if(n&&n.id!==e){typeof n.close=="function"?n.close():i.wp?.os?.windowManager?.remove?.(n.id);return}!n&&Date.now()<t&&window.setTimeout(s,ut)};s()}function pt(){const i=document.querySelector("[data-atf-handoff]");if(!i)return;const e=i.getAttribute("data-atf-handoff")??"";if(!e)return;const t=Number(new URLSearchParams(window.location.search).get("form"))||0,s=t>0?{form:t}:void 0;t>0&&bt(t);for(const n of Te())if(n.wp?.os?.openWindow?.(e,{source:"handoff",params:s})){window.setTimeout(()=>ft(n,e),0);return}}function mt(){document.addEventListener("click",i=>{const e=i.target?.closest?.("[data-atf-open-window]");if(!e)return;i.preventDefault();const t=e.getAttribute("data-atf-open-window")??"";for(const s of Te())if(s.wp?.os?.openWindow?.(t,{source:"handoff"}))return})}const gt="allterrain-forms/requested-form";function bt(i){try{window.sessionStorage.setItem(gt,String(i))}catch{}}const $e={is:"is",is_not:"is not",contains:"contains",not_contains:"does not contain",starts_with:"starts with",ends_with:"ends with",greater:"is more than",less:"is less than",greater_equal:"is at least",less_equal:"is at most",empty:"is empty",not_empty:"has any answer"},Ae=["empty","not_empty"];function De(i,e){const t=i.find(s=>s.id===e);return t?t.label||"an untitled question":null}function Me(i,e,t){return i.find(a=>a.id===e)?.choices?.find(a=>a.value===t)?.label||t}function vt(i,e){const t=$e[i.operator]??String(i.operator);if(Ae.includes(i.operator))return t;const s=Me(e,i.field,i.value);return`${i.operator==="is"?"":`${t} `}${s!==""?s:"(nothing)"}`}function Fe(i,e){const t=De(e,i.field),s=$e[i.operator]??String(i.operator);if(t===null)return[{kind:"field",text:"a question that no longer exists",fieldId:i.field,missing:!0}];const n=[{kind:"field",text:t,fieldId:i.field,missing:!1},{kind:"operator",text:s}];if(Ae.includes(i.operator))return n;const a=Me(e,i.field,i.value);return n.push({kind:"value",text:a!==""?a:"(nothing)"}),n}function wt(i,e){const t=i.logic;if(!t?.enabled||!t.rules.length)return[];const s=[{kind:"verb",text:t.action==="hide"?"Hidden when":"Shown when"}];return t.rules.forEach((n,a)=>{a>0&&s.push({kind:"join",text:t.match==="all"?"and":"or"}),s.push(...Fe(n,e))}),s}function Oe(i){return i.map(e=>e.text).join(" ")}function yt(i,e){return Oe(Fe(i,e))}function de(i){const e=[];for(const t of i){const s=t.logic;if(s?.enabled)for(const n of s.rules)!n.field||n.field===t.id||e.push({from:n.field,to:t.id,label:yt(n,i),short:vt(n,i),action:s.action,broken:De(i,n.field)===null})}return e}function xt(i){const e=new Map,t=new Set;for(const s of de(i)){const n=`${s.from}->${s.to}`;s.broken||t.has(n)||(t.add(n),e.set(s.from,(e.get(s.from)??0)+1))}return e}const qe=10,Ie=22,W="http://www.w3.org/2000/svg";class _t{constructor(e){this.edges=[],this.teardowns=[],this.frame=0,this.host=e,this.svg=document.createElementNS(W,"svg"),this.svg.setAttribute("class","atfb-logicmap"),this.svg.setAttribute("aria-hidden","true"),this.svg.setAttribute("focusable","false"),e.append(this.svg);const t=()=>this.schedule();window.addEventListener("resize",t),this.teardowns.push(()=>window.removeEventListener("resize",t));const s=e.closest(".atfb__canvas")??e;if(s.addEventListener("scroll",t,{passive:!0}),this.teardowns.push(()=>s.removeEventListener("scroll",t)),typeof ResizeObserver<"u"){const n=new ResizeObserver(t);n.observe(e),this.teardowns.push(()=>n.disconnect())}}setEdges(e){this.edges=e,this.schedule()}highlight(e){this.svg.classList.toggle("is-focused",!!e),this.svg.querySelectorAll("[data-from]").forEach(t=>{const s=e&&(t.dataset.from===e||t.dataset.to===e);t.classList.toggle("is-lit",!!s)})}destroy(){this.teardowns.forEach(e=>e()),this.teardowns=[],this.svg.remove(),this.frame&&cancelAnimationFrame(this.frame)}schedule(){this.frame||(this.frame=requestAnimationFrame(()=>{this.frame=0,this.draw()}))}draw(){this.svg.replaceChildren();const e=this.host.getBoundingClientRect();this.svg.setAttribute("viewBox",`0 0 ${e.width} ${e.height}`),this.svg.setAttribute("width",String(e.width)),this.svg.setAttribute("height",String(e.height));const t=new Map;for(const s of this.edges){const n=this.cardRect(s.from),a=this.cardRect(s.to);if(!n||!a)continue;const o=t.get(s.from)??0;t.set(s.from,o+1),this.drawEdge(s,n,a,e,o)}}cardRect(e){const t=this.host.querySelector(`[data-atfb-card="${CSS.escape(e)}"]`);return t?t.getBoundingClientRect():null}drawEdge(e,t,s,n,a){const o=t.right-n.left,c=t.top+t.height/2-n.top,l=s.right-n.left,d=s.top+s.height/2-n.top,f=Math.max(0,n.width-qe-Math.max(o,l)),L=22+a*11+Math.min(22,Math.abs(d-c)/8),v=Math.max(12,Math.min(L,f*.4)),p=document.createElementNS(W,"path");p.setAttribute("d",`M ${o} ${c} C ${o+v} ${c}, ${l+v} ${d}, ${l} ${d}`),p.setAttribute("class",`atfb-logicmap__path is-${e.action}${e.broken?" is-broken":""}`),p.dataset.from=e.from,p.dataset.to=e.to;const y=document.createElementNS(W,"title");y.textContent=e.label,p.append(y);const S=document.createElementNS(W,"circle");S.setAttribute("cx",String(l)),S.setAttribute("cy",String(d)),S.setAttribute("r","3.5"),S.setAttribute("class",`atfb-logicmap__dot is-${e.action}${e.broken?" is-broken":""}`),S.dataset.from=e.from,S.dataset.to=e.to,this.svg.append(p,S);const E=document.createElementNS(W,"text");E.setAttribute("x",String(n.width-qe)),E.setAttribute("y",String(d+3)),E.setAttribute("text-anchor","end"),E.setAttribute("class","atfb-logicmap__label"),E.dataset.from=e.from,E.dataset.to=e.to,E.textContent=e.short.length>Ie?`${e.short.slice(0,Ie-1)}…`:e.short;const P=document.createElementNS(W,"title");P.textContent=e.label,E.append(P),this.svg.append(E)}}const he=new Map;function ue(i){let e=he.get(i);return e||(e=C.mergeTags(i).catch(()=>[]),he.set(i,e)),e}function kt(i){he.delete(i)}function St(i){const e=new Map;for(const t of i)for(const s of t.items)e.set(s.tag,s);return e}function Et(i,e){const t=St(e);return i.replace(/\{[a-z_]+(?::[^}]*)?\}/gi,s=>{const n=t.get(s.toLowerCase());return n?n.sample:s})}function Lt(i){return/\{[a-z_]+(?::[^}]*)?\}/i.test(i)}let B=null;function z(){B?.remove(),B=null}typeof document<"u"&&(document.addEventListener("pointerdown",i=>{B&&!B.contains(i.target)&&z()}),document.addEventListener("keydown",i=>{i.key==="Escape"&&B&&(z(),i.stopPropagation())}));function Ct(i,e){const t=i.selectionStart??i.value.length,s=i.selectionEnd??i.value.length;i.value=i.value.slice(0,t)+e+i.value.slice(s);const n=t+e.length;i.setSelectionRange(n,n),i.focus(),i.dispatchEvent(new Event("input",{bubbles:!0}))}function Tt(i){let e=i.parentElement;for(;e&&e!==document.body;){const t=getComputedStyle(e).overflowY;if(t==="auto"||t==="scroll"||t==="hidden")return e.getBoundingClientRect().bottom;e=e.parentElement}return window.innerHeight}function $t(i,e){const t=r("input",{class:"atfb-input atfb-tagpick__search",type:"search",placeholder:"Search values…",attrs:{"aria-label":"Search values"}}),s=r("div",{class:"atfb-tagpick__list"}),n=a=>{s.replaceChildren();const o=a.trim().toLowerCase();let c=0;for(const l of i){const d=l.items.filter(f=>!o||f.label.toLowerCase().includes(o)||f.tag.toLowerCase().includes(o));if(!d.length){l.empty&&!o&&!l.items.length&&s.append(r("p",{class:"atfb-tagpick__group",text:l.label}),r("p",{class:"atfb-tagpick__empty",text:l.empty}));continue}s.append(r("p",{class:"atfb-tagpick__group",text:l.label}));for(const f of d)c+=1,s.append(r("button",{class:"atfb-tagpick__item",type:"button",on:{click:()=>{e(f.tag),z()}},children:[r("span",{class:"atfb-tagpick__item-main",children:[r("span",{class:"atfb-tagpick__label",text:f.label}),r("code",{class:"atfb-tagpick__tag",text:f.tag})]}),f.hint||f.sample?r("span",{class:"atfb-tagpick__meta",text:f.sample?`e.g. ${f.sample}`:f.hint}):null]}))}!c&&o&&s.append(r("p",{class:"atfb-tagpick__empty",text:`Nothing matches “${a}”.`}))};return n(""),t.addEventListener("input",()=>n(t.value)),r("div",{class:"atfb-tagpick",attrs:{role:"dialog","aria-label":"Insert a value"},children:[r("p",{class:"atfb-tagpick__intro",text:"Pick something to drop in. It is filled in when the form is submitted."}),t,s]})}function Ne(i,e){const t=r("button",{class:"atfb-button atfb-button--ghost atfb-tagpick__open",type:"button",title:"Insert a value from the submission",children:[O("shortcode"),r("span",{text:"Insert a value"})]}),s=r("div",{class:"atfb-taggable",children:[i,r("div",{class:"atfb-taggable__tools",children:[t]})]}),n=e.preview===!1?null:r("p",{class:"atfb-taggable__preview"});n&&s.append(n);const a=()=>{if(n){if(!Lt(i.value)){n.textContent="",n.hidden=!0;return}ue(e.formId).then(o=>{n.hidden=!1,n.replaceChildren(r("span",{class:"atfb-taggable__preview-label",text:"Reads as"}),r("span",{text:Et(i.value,o)}))})}};return i.addEventListener("input",a),a(),t.addEventListener("click",o=>{if(o.stopPropagation(),B&&s.contains(B)){z();return}z(),ue(e.formId).then(c=>{const l=$t(c,d=>{Ct(i,d),a()});s.append(l),B=l,(window.innerHeight-l.getBoundingClientRect().top<l.offsetHeight||l.getBoundingClientRect().bottom>Tt(s))&&l.classList.add("atfb-tagpick--above"),l.querySelector(".atfb-tagpick__search")?.focus()})}),s}function Pe(i,e){const t=parseFloat(String(i??""));return Number.isFinite(t)?t:e}function Re(i,e){let t=e[0];for(const s of e)Math.abs(s.at-i)<Math.abs(t.at-i)&&(t=s);return t.value}const fe=[{value:"square",label:"Square",at:0},{value:"soft",label:"Soft",at:4},{value:"rounded",label:"Rounded",at:10},{value:"pill",label:"Pill",at:999}],pe=[{value:"compact",label:"Compact",at:7},{value:"cosy",label:"Cosy",at:9},{value:"roomy",label:"Roomy",at:13}],At=[{value:"none",label:"None"},{value:"subtle",label:"Subtle"},{value:"lifted",label:"Lifted"},{value:"hard",label:"Hard"}],Dt=[{value:"outline",label:"Outlined"},{value:"filled",label:"Filled"},{value:"underline",label:"Underline"},{value:"none",label:"Bare"}],Mt=[{value:"top",label:"Above"},{value:"floating",label:"Floating"},{value:"left",label:"In the margin"},{value:"hidden",label:"Hidden"}];function Be(){return[{id:"accent",label:"Accent",hint:"The colour of buttons, focus rings and anything selected.",kind:"colour",owns:["accent","accent-soft","border-focus","focus-ring-color","button-bg","button-bg-hover"],read:i=>i.accent??"#2271b1",apply:i=>({accent:i,"accent-soft":`color-mix( in srgb, ${i} 12%, transparent )`,"border-focus":i,"focus-ring-color":i,"button-bg":i,"button-bg-hover":`color-mix( in srgb, ${i} 88%, #000 )`})},{id:"roundness",label:"Roundness",hint:"Corners, everywhere at once.",kind:"scale",steps:fe.map(({value:i,label:e})=>({value:i,label:e})),owns:["radius-field","radius-button","radius-card","radius-check"],read:i=>Re(Pe(i["radius-field"],4),fe),apply:i=>{const e=fe.find(t=>t.value===i)?.at??4;return{"radius-field":`${e}px`,"radius-button":`${e}px`,"radius-card":`${Math.min(e*2,28)}px`,"radius-check":`${Math.min(e,6)}px`}}},{id:"density",label:"Density",hint:"How much air the form has.",kind:"scale",steps:pe.map(({value:i,label:e})=>({value:i,label:e})),owns:["pad-field-x","pad-field-y","gap-fields","gap-label","button-pad-x","button-pad-y"],read:i=>Re(Pe(i["pad-field-y"],9),pe),apply:i=>{const e=pe.find(t=>t.value===i)?.at??9;return{"pad-field-y":`${e}px`,"pad-field-x":`${Math.round(e*1.4)}px`,"gap-fields":`${Math.round(e*2.2)}px`,"gap-label":`${Math.max(4,Math.round(e*.7))}px`,"button-pad-y":`${e+2}px`,"button-pad-x":`${Math.round(e*2.2)}px`}}},{id:"shadow",label:"Depth",hint:"How far the form sits off the page.",kind:"scale",steps:At,owns:["shadow-field","shadow-field-focus","shadow-button","shadow-button-hover","shadow-card"],read:i=>{const e=i["shadow-card"]??"none";return e==="none"||e.trim()===""?i["shadow-field"]&&i["shadow-field"]!=="none"?"hard":"none":e.includes("0 1px")||e.includes("2px")?"subtle":"lifted"},apply:i=>{switch(i){case"subtle":return{"shadow-field":"none","shadow-field-focus":"none","shadow-button":"0 1px 2px rgba( 0, 0, 0, 0.12 )","shadow-button-hover":"0 2px 4px rgba( 0, 0, 0, 0.16 )","shadow-card":"0 1px 3px rgba( 0, 0, 0, 0.1 )"};case"lifted":return{"shadow-field":"none","shadow-field-focus":"0 4px 12px rgba( 0, 0, 0, 0.12 )","shadow-button":"0 4px 10px rgba( 0, 0, 0, 0.16 )","shadow-button-hover":"0 8px 20px rgba( 0, 0, 0, 0.2 )","shadow-card":"0 10px 30px rgba( 0, 0, 0, 0.14 )"};case"hard":return{"shadow-field":"3px 3px 0 currentColor","shadow-field-focus":"5px 5px 0 currentColor","shadow-button":"4px 4px 0 currentColor","shadow-button-hover":"2px 2px 0 currentColor","shadow-card":"none"};default:return{"shadow-field":"none","shadow-field-focus":"none","shadow-button":"none","shadow-button-hover":"none","shadow-card":"none"}}}},{id:"field-style",label:"Fields",hint:"How an input is drawn.",kind:"choice",steps:Dt,owns:["field-style"],read:i=>i["field-style"]??"outline",apply:i=>({"field-style":i})},{id:"labels",label:"Labels",hint:"Where the question sits relative to the answer.",kind:"choice",steps:Mt,owns:["label-position"],read:i=>i["label-position"]??"top",apply:i=>({"label-position":i})}]}function Ft(i){return Be().find(e=>e.owns.includes(i))??null}function Ue(i){let e=i.activeSlug,t={...i.overrides},s=i.themes;const n=r("div",{class:"atfs-preview__frame"}),a=r("div",{class:"atfs-controls__body"}),o=r("div",{class:"atfs-quick"}),c=r("div",{class:"atfs-themes"}),l=Ce(async()=>{try{const h=await i.previewFor(e,t);n.innerHTML=h,document.dispatchEvent(new CustomEvent("atf-refresh"))}catch(h){$(n),n.append(r("p",{class:"atfb-error",text:h instanceof Error?h.message:"Preview failed."}))}},180),d=h=>t[h.token]!==void 0?t[h.token]:s.find(g=>g.slug===e)?.resolved?.[h.token]??h.default,f=()=>{$(c);for(const h of s){const u=r("button",{class:`atfs-theme${h.slug===e?" is-active":""}`,type:"button",attrs:{"aria-pressed":h.slug===e,title:h.description},children:[r("span",{class:"atfs-theme__chip",style:{background:h.resolved.surface??"#fff",borderColor:h.resolved.border??"#ccc",borderRadius:h.resolved["radius-field"]??"4px",boxShadow:h.resolved["shadow-card"]??"none"},children:[r("span",{class:"atfs-theme__accent",style:{background:h.resolved.accent??"#2271b1",borderRadius:h.resolved["radius-button"]??"4px"}})]}),r("span",{class:"atfs-theme__name",text:h.label}),h.custom?r("span",{class:"atfb-badge",text:"yours"}):null],on:{click:()=>{e=h.slug,t={},i.onTheme(e),f(),p(),y(),l(),T()}}});c.append(u)}},L=()=>{const u={...s.find(g=>g.slug===e)?.resolved??{}};for(const[g,b]of Object.entries(t))u[g]=b;return u},v=(h,u)=>{const g=h.apply(u,L());for(const[b,x]of Object.entries(g))t[b]=x,i.onOverride(b,x);p(),y(),l()},p=()=>{$(o);const h=L();for(const u of Be()){const g=u.read(h);let b;if(u.kind==="colour"){const x=r("input",{class:"atfs-color",type:"color",value:ge(g),attrs:{"aria-label":u.label},on:{input:q=>v(u,q.target.value)}});b=r("div",{class:"atfs-color-row",children:[x,w(g,q=>v(u,q))]})}else b=r("div",{class:`atfs-segmented atfs-segmented--${u.kind}`,attrs:{role:"group","aria-label":u.label},children:(u.steps??[]).map(x=>r("button",{class:`atfs-segment${x.value===g?" is-on":""}`,type:"button",text:x.label,attrs:{"aria-pressed":x.value===g},on:{click:()=>v(u,x.value)}}))});o.append(r("div",{class:"atfs-dial",children:[r("div",{class:"atfs-dial__head",children:[r("span",{class:"atfs-dial__label",text:u.label}),r("span",{class:"atfs-dial__hint",text:u.hint})]}),b]}))}},y=()=>{$(a);const h=new Map;for(const g of i.tokens){const b=h.get(g.group)??[];b.push(g),h.set(g.group,b)}const u={colour:"Colour",shape:"Corners and borders",shadow:"Shadows",fields:"Field style",space:"Spacing",type:"Type",labels:"Labels",button:"Buttons",focus:"Focus ring",motion:"Motion"};for(const[g,b]of h)a.append(r("details",{class:"atfs-group",attrs:{open:g==="colour"},children:[r("summary",{text:u[g]??g}),...b.map(x=>S(x))]}))},S=h=>{const u=d(h),g=A=>{A===""?delete t[h.token]:t[h.token]=A,i.onOverride(h.token,A),l()};let b;if(h.control==="color"){const A=r("input",{class:"atfs-color",type:"color",value:ge(u),attrs:{"aria-label":`${h.label} colour`},on:{input:Y=>{const K=Y.target.value;ie.value=K,g(K)}}}),ie=w(u,Y=>{A.value=ge(Y),g(Y)});b=r("div",{class:"atfs-color-row",children:[A,ie]})}else if(h.control==="select")b=D(u,(h.options??[]).map(A=>({value:A,label:A})),g);else if(h.control==="length"){const A=parseFloat(u)||0,ie=h.unit??"px",Y=h.token.includes("radius")?60:80,K=r("input",{class:"atfs-range",type:"range",value:String(A),attrs:{min:"0",max:String(Y),step:"1","aria-label":h.label},on:{input:ne=>{const Qe=`${ne.target.value}${ie}`;Ve.value=Qe,g(Qe)}}}),Ve=w(u,ne=>{K.value=String(parseFloat(ne)||0),g(ne)});b=r("div",{class:"atfs-length-row",children:[K,Ve]})}else b=w(u,g);const x=m(h.label,b),q=Ft(h.token);return q&&(x.classList.add("is-dialled"),x.append(r("span",{class:"atfs-owned",text:q.label}))),t[h.token]!==void 0&&(x.classList.add("is-overridden"),x.append(r("button",{class:"atfs-reset",type:"button",text:"Reset",attrs:{"aria-label":`Reset ${h.label} to the theme's value`},on:{click:()=>{g(""),y()}}}))),x},E=async()=>{const h=s.find(b=>b.slug===e),u=h?`${h.label} (mine)`:"My theme",g=window.prompt("Name this theme",u);if(g)try{const b={};for(const q of i.tokens){const A=d(q);A!==q.default&&(b[q.token]=A)}const x=await C.saveTheme({label:g,tokens:b});s=[...s.filter(q=>q.slug!==x.slug),x],i.onThemesChanged(s),e=x.slug,t={},i.onTheme(e),f(),y(),l(),I("Theme saved",x.label)}catch(b){I("Could not save the theme",b instanceof Error?b.message:"","error")}},P=async()=>{const h=s.find(u=>u.slug===e);if(h?.custom&&await ce(`Delete “${h.label}”? Forms using it fall back to Clean.`,"Delete theme"))try{await C.deleteTheme(h.id),s=s.filter(u=>u.slug!==h.slug),i.onThemesChanged(s),e="clean",t={},i.onTheme(e),f(),y(),l()}catch(u){I("Could not delete the theme",u instanceof Error?u.message:"","error")}},H=async()=>{const h=s.find(b=>b.slug===e),u={label:h?.label??e,tokens:{...h?.tokens??{},...t}},g=JSON.stringify(u,null,"	");try{await navigator.clipboard.writeText(g),I("Theme copied","Paste it into another site to import it.")}catch{window.prompt("Copy this theme",g)}},se=()=>{const h=window.prompt("Paste a theme");if(h)try{const u=JSON.parse(h);if(!u.tokens||typeof u.tokens!="object")throw new Error("That does not look like a theme.");for(const[g,b]of Object.entries(u.tokens))t[g]=String(b),i.onOverride(g,String(b));y(),l()}catch(u){I("Could not read that theme",u instanceof Error?u.message:"","error")}},_=k("Delete",()=>void P(),"danger"),T=()=>{const h=s.find(u=>u.slug===e);_.hidden=!h?.custom};return f(),p(),y(),l(),T(),r("div",{class:"atf-studio",children:[r("div",{class:"atf-studio__top",children:[r("div",{class:"atf-studio__picker",children:[r("h2",{class:"atf-studio__heading",text:"Theme"}),c]}),r("div",{class:"atfs__actions",children:[k("Save as a theme",()=>void E(),"primary"),k("Export",()=>void H()),k("Import",se),_]})]}),r("div",{class:"atf-studio__panes",children:[r("aside",{class:"atf-studio__controls",children:[r("p",{class:"atfb-hint",text:"Changes apply to this form only, until you save them as a theme."}),o,r("details",{class:"atfs-advanced",children:[r("summary",{text:"Every setting"}),r("p",{class:"atfb-hint",text:"The full token list. The dials above write into it."}),a]})]}),r("main",{class:"atf-studio__preview",children:[r("h2",{class:"screen-reader-text",text:"Live preview"}),n]})]})]})}async function me(){const i=document.querySelector("[data-atfs-root]");if(!i||i.dataset.atfsMounted)return;i.dataset.atfsMounted="1";const e=i.querySelector("[data-atfs-bar]"),t=i.querySelector(".atfs__body")??i;try{const[s,n,a]=await Promise.all([C.config(),C.listThemes(),C.listForms()]);if(!a.length){$(t),t.append(r("div",{class:"atfb-empty",children:[r("h2",{text:"No forms to preview"}),r("p",{text:"Make a form first — a theme needs something to dress."})]}));return}let o=a[0],c={},l=o.theme;const d=()=>{$(t),t.append(Ue({themes:n,tokens:s.tokens,activeSlug:l,overrides:c,standalone:!0,onTheme:f=>{l=f},onOverride:(f,L)=>{L===""?delete c[f]:c[f]=L},previewFor:async(f,L)=>{const v=await C.getForm(o.id);v.schema.settings.theme=f,v.schema.settings.themeOverrides=L;const{html:p}=await C.preview(o.id,{schema:v.schema,theme:f});return p},onThemesChanged:f=>{n.length=0,n.push(...f)}}))};e&&($(e),e.append(r("span",{class:"atfs__label",text:"Preview against"}),D(String(o.id),a.map(f=>({value:String(f.id),label:f.title||"(untitled)"})),f=>{o=a.find(L=>String(L.id)===f)??a[0],c={},d()}))),d()}catch(s){$(t),t.append(r("p",{class:"atfb-error",text:s instanceof Error?s.message:"Could not load themes."}))}}typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>void me()):me(),document.addEventListener("os-window-content-loaded",()=>void me()));function ge(i){const e=i.trim();return/^#[0-9a-f]{6}$/i.test(e)?e:/^#[0-9a-f]{3}$/i.test(e)?`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`:"#888888"}function be(){return window.wp?.os??null}const je="allterrain-forms/preview",ve="allterrain-forms-preview";function Ot(i){const e=be();if(!e?.registerTitleBarButton)return()=>{};const t=()=>{try{e.registerTitleBarButton({id:je,label:"Preview this form",icon:"dashicons-visibility",placement:"right",order:90,match:s=>{const n=s?.id??s?.config?.id??"";return n==="allterrain-forms"||n.startsWith("allterrain-forms#")},onClick:()=>void We(i),owner:"allterrain-forms-builder"})}catch{}};return e.ready?e.ready(t):t(),()=>{try{e.unregisterTitleBarButton?.(je)}catch{}}}async function We(i){i.isDirty()&&await i.save();const e=i.current();e&&He(e.id,e.title,e.previewUrl)}function He(i,e,t){const s=be();if(!s?.windowManager?.open){window.open(t,"_blank","noopener");return}s.windowManager.open({id:`${ve}-${i}`,baseId:ve,url:t,title:`Preview: ${e}`,icon:"dashicons-visibility"})}function qt(i,e,t){if(!be()?.windowManager?.open||!document.querySelector(`[data-window-id^="${ve}-${i}"]`))return;const a=t.includes("?")?"&":"?";He(i,e,`${t}${a}atf_r=${Date.now()}`)}const It="allterrain-forms/form";function Nt(){return window.wp?.os?.relations??null}function Pt(i){const e=i.closest("[data-window-id], .os-window");if(!e)return null;const t=e.getAttribute("data-window-id");if(t)return t;const s=e.id??"";return s?s.replace(/^wp-window-/,""):null}const Rt=6e3,Ye=120;function Xe(i,e){const t=Nt();if(we.set(i,e),!t?.set)return;const s=a=>{if(ee.get(i)!==n)return;const o=Pt(i);if(!o){Date.now()<a&&window.setTimeout(()=>s(a),Ye);return}try{t.set(o,e)}catch(l){ze||(ze=!0,console.error("[AllTerrain Forms] The shell refused a window identity.",l,e)),ee.delete(i);return}if(!e||t.get?.(o)?.id===e.id||Date.now()>=a){ee.delete(i);return}window.setTimeout(()=>s(a),Ye)},n=Symbol("atf-identity");ee.set(i,n),s(Date.now()+Rt)}let ze=!1;const ee=new WeakMap,we=new Map;function Bt(){for(const[i,e]of we){if(!i.isConnected){we.delete(i);continue}Xe(i,e)}}if(typeof document<"u")for(const i of["os-window-content-loaded","os-window-opened"])document.addEventListener(i,()=>Bt());function Ut(i,e){return{type:It,id:i.id,label:i.title||"Untitled form",related:[{id:`allterrain-forms/entries-${i.id}`,label:"Entries for this form",url:`${e}admin.php?page=allterrain-forms-entries&form=${i.id}`,group:"allterrain-forms",groupLabel:"Forms",icon:"dashicons-list-view"}]}}const G="allterrain-forms/field",jt=["openstation/file","desktop-mode/file","openstation/attachment"],Ge="allterrain-forms/logic-map-v2",ye=[{value:"user:email",label:"Their email address",group:"About the person filling it in",tag:"{user:email}"},{value:"user:display_name",label:"Their name",group:"About the person filling it in",tag:"{user:display_name}"},{value:"user:first_name",label:"Their first name",group:"About the person filling it in"},{value:"user:last_name",label:"Their last name",group:"About the person filling it in"},{value:"user:login",label:"Their username",group:"About the person filling it in"},{value:"date:today",label:"Today’s date",group:"The date and time",tag:"{date}"},{value:"date:now",label:"The time right now",group:"The date and time",tag:"{time}"},{value:"site",label:"This site’s name",group:"About this site",tag:"{site}"},{value:"site:url",label:"This site’s address",group:"About this site",tag:"{site:url}"},{value:"site:admin_email",label:"The site administrator’s email",group:"About this site",tag:"{admin_email}"}],Wt=["About the person filling it in","The date and time","About this site"],te=(i,e)=>F?.i18n?.[i]??e;class Je{constructor(e){this.config=null,this.themes=[],this.forms=[],this.form=null,this.schema=null,this.selected=null,this.tab="build",this.logicMap=null,this.logicMapOn=lt(Ge)!=="off",this.dirty=!1,this.teardowns=[],this.history=[],this.historyAt=-1,this.autosave=Ce(()=>{this.save(!0)},2500),this.renderInspector=ot(()=>{if($(this.inspector),!this.schema||(this.root.classList.toggle("atfb--build-only-panes",this.tab!=="build"),this.tab!=="build"))return;const t=this.schema.fields.find(o=>o.id===this.selected);if(!t){this.inspector.append(r("div",{class:"atfb-placeholder",children:[r("p",{text:"Select a field to change it."}),r("p",{class:"atfb-hint",text:"Drag a field from the palette, or press one to add it to the end."})]}));return}const s=this.config?.fieldTypes.find(o=>o.type===t.type),n=s?.supports??[],a=(o,c)=>{t[o]=c,this.markDirty(),this.renderCanvas()};this.inspector.append(r("h3",{class:"atfb-inspector__title",text:s?.label??t.type}),r("p",{class:"atfb-hint",text:`Reference this field as {field:${t.id}}`})),n.includes("label")&&this.inspector.append(m("Label",w(t.label,o=>a("label",o)))),n.includes("placeholder")&&this.inspector.append(m("Placeholder",w(t.placeholder,o=>a("placeholder",o)))),n.includes("hint")&&this.inspector.append(m("Hint",w(t.hint,o=>a("hint",o)),"Shown under the field, and read out with it.")),n.includes("required")&&this.inspector.append(M("Required",t.required,o=>a("required",o))),n.includes("width")&&this.inspector.append(m("Width",D(t.width,[{value:"full",label:"Full width"},{value:"two-thirds",label:"Two thirds"},{value:"half",label:"Half"},{value:"third",label:"One third"},{value:"quarter",label:"One quarter"}],o=>a("width",o)))),s?.choices&&this.inspector.append(this.renderChoicesEditor(t,a)),(t.type==="total"||n.includes("formula"))&&this.inspector.append(m("Formula",w(String(t.formula??""),o=>a("formula",o)),"Reference fields with braces: {f1} * {f2} + 10. Functions: min, max, sum, avg, round, ceil, floor, abs, sqrt, pow."),m("Currency symbol",w(String(t.currency??""),o=>a("currency",o)))),this.inspector.append(this.renderValidationSection(t,n,a)),this.inspector.append(this.renderLogicSection(t,a)),n.includes("prefill")&&this.inspector.append(this.prefillControl(t,a)),n.includes("css")&&this.inspector.append(m("CSS class",w(t.cssClass,o=>a("cssClass",o))))}),this.root=e,this.bar=e.querySelector("[data-atfb-bar]")??r("div"),this.palette=e.querySelector("[data-atfb-palette]")??r("div"),this.canvas=e.querySelector("[data-atfb-canvas]")??r("div"),this.inspector=e.querySelector("[data-atfb-inspector]")??r("div")}async start(){try{const[s,n,a]=await Promise.all([C.config(),C.listThemes(),C.listForms()]);this.config=s,this.themes=n,this.forms=a}catch(s){this.fail(s);return}this.teardowns.push(st([G])),this.teardowns.push(Ot({current:()=>this.form?{id:this.form.id,title:this.form.title,previewUrl:this.form.previewUrl}:null,isDirty:()=>this.dirty,save:()=>this.save(!0)}));const e=s=>{this.dirty&&(s.preventDefault(),s.returnValue="")};window.addEventListener("beforeunload",e),this.teardowns.push(()=>window.removeEventListener("beforeunload",e));const t=s=>{!(s.metaKey||s.ctrlKey)||s.key.toLowerCase()!=="z"||s.target?.closest("input, textarea, [contenteditable]")||(s.preventDefault(),this.travel(s.shiftKey?1:-1))};this.root.addEventListener("keydown",t),this.teardowns.push(()=>this.root.removeEventListener("keydown",t)),this.renderBar(),this.renderPalette(),this.forms.length?await this.open(this.forms[0].id):this.renderFormsList()}destroy(){this.teardowns.forEach(e=>e()),this.teardowns=[]}fail(e){$(this.bar),this.bar.append(r("p",{class:"atfb-error",text:e instanceof Error?e.message:"Something went wrong loading your forms."}))}renderBar(){$(this.bar);const e=D(String(this.form?.id??""),[...this.forms.map(n=>({value:String(n.id),label:n.title||"(untitled)"}))],n=>void this.open(Number(n)));e.setAttribute("aria-label","Choose a form");const t=r("input",{class:"atfb-title",type:"text",value:this.form?.title??"",placeholder:"Untitled form",attrs:{"aria-label":"Form title"},on:{input:n=>{this.form&&(this.form.title=n.target.value,this.markDirty())}}}),s=r("div",{class:"atfb-tabs",attrs:{role:"tablist"},children:[["build","Build"],["theme","Theme"],["settings","Settings"],["notify","Notifications"],["confirm","Confirmations"]].map(([n,a])=>r("button",{class:`atfb-tab${this.tab===n?" is-active":""}`,type:"button",text:a,attrs:{role:"tab","aria-selected":this.tab===n},on:{click:()=>{this.tab=n,this.renderBar(),this.renderInspector(),this.renderCanvas()}}}))});this.bar.append(r("div",{class:"atfb-bar__left",children:[this.forms.length>1?e:null,t]}),s,r("div",{class:"atfb-bar__right",children:[this.historyButton("undo","Undo",-1),this.historyButton("redo","Redo",1),k("New",()=>void this.showTemplates(),"secondary","plus-alt2"),k("Export",()=>void this.exportForm(),"secondary","download"),k("Import",()=>void this.importForm(),"secondary","upload"),k("Preview",()=>void this.preview(),"secondary","visibility"),k("Entries",()=>this.openEntries(),"secondary","list-view"),this.logicMapButton(),this.saveButton()]}))}snapshot(){if(!this.schema)return;const e=JSON.stringify(this.schema);this.history[this.historyAt]!==e&&(this.history=this.history.slice(0,this.historyAt+1),this.history.push(e),this.history.length>60&&this.history.shift(),this.historyAt=this.history.length-1)}travel(e){const t=this.historyAt+e;!this.schema||t<0||t>=this.history.length||(this.historyAt=t,this.schema=JSON.parse(this.history[t]),this.schema.fields.some(s=>s.id===this.selected)||(this.selected=null),this.dirty=!0,this.autosave(),this.renderBar(),this.renderCanvas(),this.renderInspector())}historyButton(e,t,s){const n=this.historyAt+s,a=k(t,()=>this.travel(s),"secondary",e);return a.disabled=n<0||n>=this.history.length,a}exportForm(){if(!this.form||!this.schema)return;const e={plugin:"allterrain-forms",version:F?.version??"",title:this.form.title,schema:this.schema},t=new Blob([JSON.stringify(e,null,"	")],{type:"application/json"}),s=URL.createObjectURL(t),n=r("a",{href:s,attrs:{download:`${this.form.title.replace(/[^a-z0-9]+/gi,"-").toLowerCase()||"form"}.json`}});document.body.append(n),n.click(),n.remove(),window.setTimeout(()=>URL.revokeObjectURL(s),1e3)}async importForm(){const e=r("input",{type:"file",attrs:{accept:"application/json,.json"}});e.addEventListener("change",async()=>{const t=e.files?.[0];if(t)try{const s=JSON.parse(await t.text());if(!s.schema)throw new Error("That file does not contain a form.");const n=await C.createForm({title:s.title??t.name.replace(/\.json$/i,""),schema:s.schema});this.forms.unshift({id:n.id,title:n.title,status:n.status,modified:n.modified,fields:n.schema.fields.length,theme:n.schema.settings.theme,entries:0,unread:0,views:0,submissions:0,shortcode:n.shortcode}),this.form=n,this.schema=n.schema,this.selected=null,this.dirty=!1,this.history=[],this.historyAt=-1,this.snapshot(),this.renderBar(),this.renderCanvas(),this.renderInspector(),I("Form imported",n.title)}catch(s){I("Could not import that file",s instanceof Error?s.message:"","error")}}),e.click()}saveButton(){const e=k("Save",()=>void this.save(),"primary");return e.disabled=!this.dirty,e.setAttribute("data-atfb-save",""),e}markDirty(){this.dirty=!0;const e=this.bar.querySelector("[data-atfb-save]");e&&(e.disabled=!1),this.autosave()}async save(e=!1){if(!(!this.form||!this.schema))try{const t=await C.updateForm(this.form.id,{title:this.form.title,schema:this.schema});this.form=t,this.schema=t.schema,this.dirty=!1,kt(t.id);const s=this.forms.find(a=>a.id===t.id);s&&(s.title=t.title);const n=this.bar.querySelector("[data-atfb-save]");n&&(n.disabled=!0),qt(t.id,t.title,t.previewUrl),e||I("Form saved",t.title)}catch(t){I(te("saveFailed","Could not save"),t instanceof Error?t.message:"","error")}}async open(e){if(!(this.dirty&&!await ce("You have unsaved changes. Discard them?"))){try{this.form=await C.getForm(e),this.schema=this.form.schema,this.selected=null,this.dirty=!1,this.history=[],this.historyAt=-1,this.snapshot()}catch(t){this.fail(t);return}this.renderBar(),this.renderCanvas(),this.renderInspector(),this.announceIdentity()}}announceIdentity(){this.form&&Xe(this.root,Ut(this.form,F?.adminUrl??""))}async showTemplates(){if(!this.config)return;const e=r("div",{class:"atfb-overlay"}),t=()=>e.remove(),s=r("div",{class:"atfb-templates",children:this.config.templates.map(n=>r("button",{class:"atfb-template",type:"button",on:{click:async()=>{t();try{const a=await C.createForm({template:n.slug});this.forms.unshift({id:a.id,title:a.title,status:a.status,modified:a.modified,fields:a.schema.fields.length,theme:a.schema.settings.theme,entries:0,unread:0,views:0,submissions:0,shortcode:a.shortcode}),this.form=a,this.schema=a.schema,this.selected=null,this.dirty=!1,this.renderBar(),this.renderCanvas(),this.renderInspector(),this.announceIdentity()}catch(a){I("Could not create the form",a instanceof Error?a.message:"","error")}}},children:[O(n.icon),r("strong",{text:n.label}),r("span",{text:n.description})]}))});e.append(r("div",{class:"atfb-modal",attrs:{role:"dialog","aria-label":"Start a new form"},children:[r("h2",{text:"Start a new form"}),s,r("div",{class:"atfb-modal__actions",children:[k("Cancel",t)]})]})),e.addEventListener("click",n=>{n.target===e&&t()}),document.addEventListener("keydown",n=>{n.key==="Escape"&&t()},{once:!0}),this.root.append(e),s.querySelector("button")?.focus()}renderFormsList(){$(this.canvas),this.canvas.append(r("div",{class:"atfb-empty",children:[r("h2",{text:"No forms yet"}),r("p",{text:"Start from a template, or build one from nothing."}),k("New form",()=>void this.showTemplates(),"primary","plus-alt2")]}))}openEntries(){const e=window.wp?.os;if(e?.openWindow){e.openWindow("allterrain-forms-entries");return}window.location.assign(`${F?.adminUrl??""}admin.php?page=allterrain-forms-entries`)}renderPalette(){if(!this.config)return;$(this.palette);const e=new Map;for(const s of this.config.fieldTypes){const n=e.get(s.group)??[];n.push(s),e.set(s.group,n)}const t=r("input",{class:"atfb-input atfb-palette__search",type:"search",placeholder:"Search fields",attrs:{"aria-label":"Search field types"},on:{input:s=>{const n=s.target.value.toLowerCase().trim();this.palette.querySelectorAll(".atfb-chip").forEach(a=>{const o=(a.textContent??"").toLowerCase();a.hidden=n!==""&&!o.includes(n)}),this.palette.querySelectorAll(".atfb-group").forEach(a=>{const o=Array.from(a.querySelectorAll(".atfb-chip")).some(c=>!c.hidden);a.hidden=!o})}}});this.palette.append(t);for(const[s,n]of Object.entries(this.config.groups)){const a=e.get(s);a?.length&&this.palette.append(r("div",{class:"atfb-group",children:[r("h3",{class:"atfb-group__title",text:n}),r("div",{class:"atfb-group__items",children:a.map(o=>this.paletteChip(o))})]}))}}paletteChip(e){const t=r("button",{class:"atfb-chip",type:"button",title:e.description,attrs:{"data-atf-type":e.type},children:[O(e.icon),r("span",{text:e.label})]});return t.addEventListener("pointerdown",s=>{const n=r("div",{class:"atfb-chip atfb-chip--ghost",children:[O(e.icon),r("span",{text:e.label})]});U().start({payload:ke(G,t,{fieldType:e.type,isNew:!0},s,n),origin:s,onClickOnly:()=>this.addField(e.type)})}),t.addEventListener("click",s=>{U().recentlyEndedDrag()&&s.preventDefault()}),t}renderCanvas(){if($(this.canvas),!this.schema||!this.form){this.renderFormsList();return}if(this.tab!=="build"){this.canvas.append(this.renderTabCanvas());return}const e=r("div",{class:"atfb-canvas__list",attrs:{"data-atfb-list":""}});this.schema.fields.length||e.append(r("div",{class:"atfb-placeholder",text:te("emptyCanvas","Drag a field from the left to begin.")})),this.schema.fields.forEach((s,n)=>{e.append(this.renderFieldCard(s,n))});const t=r("div",{class:"atfb-canvas__inner",children:[r("p",{class:"atfb-shortcode",text:this.form.shortcode,title:"Paste this anywhere to place the form"}),e]});this.canvas.append(t),this.registerCanvasTarget(e),this.paintLogicMap(t)}prefillControl(e,t){const s=e.prefill.startsWith("query:"),n=ye.some(v=>v.value===e.prefill),a=s?"query":n&&e.prefill||(e.prefill?"custom":""),o=r("div",{class:"atfb-prefill__detail"}),c=r("p",{class:"atfb-row__hint atfb-prefill__preview"}),l=v=>{if(o.replaceChildren(),c.replaceChildren(),v==="query"){const p=e.prefill.startsWith("query:")?e.prefill.slice(6):"";o.append(w(p,y=>{const S=y.trim();t("prefill",S?`query:${S}`:""),d(`query:${S}`)},"utm_source"),r("p",{class:"atfb-row__hint",text:"The name of the parameter in the link people arrive on."}))}v==="custom"&&o.append(w(e.prefill,p=>{t("prefill",p),d(p)},"myplugin:something"),r("p",{class:"atfb-row__hint",text:"For a source another plugin has added through atf_resolve_prefill."})),d(e.prefill)},d=v=>{if(c.replaceChildren(),!v)return;if(v.startsWith("query:")){const y=v.slice(6);y&&(c.textContent=`A visit to …/your-page/?${y}=abc opens the form with “abc” in it.`);return}const p=ye.find(y=>y.value===v)?.tag;p&&ue(this.form?.id??0).then(y=>{for(const S of y)for(const E of S.items)if(E.tag===p){const P=v.startsWith("user:");if(!E.sample){c.textContent="Empty unless the visitor is signed in.";return}c.textContent=P?`Opens with “${E.sample}” for you — empty for a visitor who is not signed in.`:`Opens with “${E.sample}”.`;return}})};l(a);const f=r("select",{class:"atfb-input atfb-select",on:{change:v=>{const p=v.target.value;t("prefill",p==="query"||p==="custom"?"":p),l(p)}}});f.append(r("option",{value:"",text:"Nothing — leave it empty",attrs:{selected:a===""}}));for(const v of Wt){const p=document.createElement("optgroup");p.label=v;for(const y of ye.filter(S=>S.group===v))p.append(r("option",{value:y.value,text:y.label,attrs:{selected:y.value===a}}));f.append(p)}const L=document.createElement("optgroup");return L.label="From the link they arrived on",L.append(r("option",{value:"query",text:"A parameter in the web address",attrs:{selected:a==="query"}})),f.append(L,r("option",{value:"custom",text:"Something else (advanced)",attrs:{selected:a==="custom"}})),m("Pre-fill this with",r("div",{class:"atfb-prefill",children:[f,o,c]}),"What the box already contains when the form opens. They can still change it.")}renderCondition(e){const t=e.some(s=>s.kind==="field"&&s.missing);return r("span",{class:`atfb-cond${t?" is-broken":""}`,attrs:{"aria-label":Oe(e)},children:[O("randomize"),...e.map(s=>this.renderConditionToken(s))]})}renderConditionToken(e){return e.kind==="field"&&!e.missing?r("button",{class:"atfb-cond__chip atfb-cond__chip--field",type:"button",text:e.text,title:"Go to this question",on:{click:n=>{n.stopPropagation(),this.selectField(e.fieldId),this.canvas.querySelector(`[data-atfb-card="${CSS.escape(e.fieldId)}"]`)?.scrollIntoView({block:"nearest",behavior:"smooth"})}}}):r("span",{class:{verb:"atfb-cond__verb",field:"atfb-cond__chip atfb-cond__chip--missing",operator:"atfb-cond__op",value:"atfb-cond__chip atfb-cond__chip--value",join:"atfb-cond__join"}[e.kind],text:e.text})}logicMapButton(){const e=de(this.schema?.fields??[]).length>0,t=k(this.logicMapOn?"Hide logic":"Show logic",()=>{this.logicMapOn=!this.logicMapOn,ct(Ge,this.logicMapOn?"on":"off"),this.renderBar(),this.renderCanvas()},this.logicMapOn?"primary":"secondary","randomize");return t.title="Draw a line from each question to the ones it decides.",t.hidden=!e,t}paintLogicMap(e){this.logicMap?.destroy(),this.logicMap=null;const t=this.schema?.fields??[],s=de(t);if(!s.length||!this.logicMapOn)return;e.classList.add("has-logicmap");const n=new _t(e);n.setEdges(s),n.highlight(this.selected??""),this.logicMap=n,e.addEventListener("pointerover",a=>{const o=a.target.closest("[data-atfb-card]");n.highlight(o?.dataset.atfbCard??this.selected??"")}),e.addEventListener("pointerleave",()=>n.highlight(this.selected??""))}renderFieldCard(e,t){const s=this.config?.fieldTypes.find(d=>d.type===e.type),n=this.selected===e.id,a=this.schema?.fields??[],o=wt(e,a),c=xt(a).get(e.id)??0,l=r("div",{class:`atfb-card${n?" is-selected":""}`,attrs:{"data-atfb-card":e.id,"data-index":t,tabindex:"0",role:"button","aria-pressed":n,"aria-label":`${e.label||s?.label||e.type}, ${t+1} of ${this.schema?.fields.length??0}`},children:[r("div",{class:"atfb-card__grip",attrs:{"aria-hidden":"true"},children:[O("menu")]}),r("div",{class:"atfb-card__body",children:[r("div",{class:"atfb-card__head",children:[O(s?.icon??"dashicons-forms"),r("strong",{text:e.label||te("untitledField","Untitled field")}),e.required?r("span",{class:"atfb-badge",text:"required"}):null,c?r("span",{class:"atfb-badge atfb-badge--controls",text:c===1?"controls 1 field":`controls ${c} fields`,title:"Other questions appear or disappear based on this answer."}):null]}),r("span",{class:"atfb-card__type",text:s?.label??e.type}),o.length?this.renderCondition(o):null]}),r("div",{class:"atfb-card__actions",children:[this.cardAction("admin-page","Duplicate",()=>this.duplicateField(e.id)),this.cardAction("trash","Delete",()=>void this.deleteField(e.id))]})]});return l.addEventListener("click",d=>{d.target.closest(".atfb-card__actions")||U().recentlyEndedDrag()||this.selectField(e.id)}),l.addEventListener("keydown",d=>{if(d.key==="Enter"||d.key===" "){d.preventDefault(),this.selectField(e.id);return}d.altKey&&(d.key==="ArrowUp"||d.key==="ArrowDown")&&(d.preventDefault(),this.moveField(e.id,d.key==="ArrowUp"?t-1:t+1),window.requestAnimationFrame(()=>{this.canvas.querySelector(`[data-atfb-card="${CSS.escape(e.id)}"]`)?.focus()})),(d.key==="Delete"||d.key==="Backspace")&&(d.preventDefault(),this.deleteField(e.id))}),l.addEventListener("pointerdown",d=>{d.target.closest(".atfb-card__actions")||U().start({payload:ke(G,l,{fieldId:e.id,field:e,isNew:!1},d),origin:d})}),l}cardAction(e,t,s){return r("button",{class:"atfb-card__action",type:"button",title:t,attrs:{"aria-label":t},on:{click:n=>{n.stopPropagation(),s()}},children:[O(e)]})}registerCanvasTarget(e){const t=r("div",{class:"atfb-marker",attrs:{"aria-hidden":"true"}}),s=U().registerDropTarget({id:`atfb-canvas-${this.form?.id??0}`,element:e,accept:a=>a.type===G,onEnter:()=>e.classList.add("is-dropping"),onLeave:()=>{e.classList.remove("is-dropping"),t.remove()},onDrop:(a,o)=>{e.classList.remove("is-dropping"),t.remove();const c=a.payload.data,l=c.fieldId?this.canvas.querySelector(`[data-atfb-card="${CSS.escape(c.fieldId)}"]`):null,d=Se(e,".atfb-card",o.clientY,l??void 0);if(c.isNew&&c.fieldType){this.addField(c.fieldType,d);return}if(c.fieldId&&this.schema?.fields.some(f=>f.id===c.fieldId)){this.moveField(c.fieldId,d);return}c.field&&this.insertField({...c.field,id:""},d)}});this.teardowns.push(s);const n=a=>{const o=a.detail;if(o?.payload?.type!==G||!e.classList.contains("is-dropping"))return;const c=o.clientY??0,l=Se(e,".atfb-card",c),d=e.querySelectorAll(".atfb-card");l>=d.length?e.append(t):d[l].before(t)};document.addEventListener("os.drag.move",n),this.teardowns.push(()=>document.removeEventListener("os.drag.move",n))}addField(e,t){const s=this.config?.fieldTypes.find(a=>a.type===e);if(!s||!this.schema)return;const n={id:this.nextFieldId(),type:e,label:s.input?s.label:"",placeholder:"",hint:"",required:!1,width:"full",cssClass:"",default:"",choices:s.choices?[{label:"First choice",value:"first"},{label:"Second choice",value:"second"}]:[],logic:{enabled:!1,action:"show",match:"all",rules:[]},messages:{},prefill:"",...s.settings};this.insertField(n,t)}insertField(e,t){if(!this.schema)return;e.id||(e.id=this.nextFieldId()),this.snapshot();const s=t===void 0?this.schema.fields.length:Math.max(0,Math.min(t,this.schema.fields.length));this.schema.fields.splice(s,0,e),this.selected=e.id,this.markDirty(),this.renderCanvas(),this.renderInspector(),window.requestAnimationFrame(()=>{this.canvas.querySelector(`[data-atfb-card="${CSS.escape(e.id)}"]`)?.focus()})}moveField(e,t){if(!this.schema)return;const s=this.schema.fields.findIndex(o=>o.id===e);if(s<0)return;const n=Math.max(0,Math.min(t,this.schema.fields.length-1));if(s===n)return;this.snapshot();const[a]=this.schema.fields.splice(s,1);this.schema.fields.splice(n>s?n-1:n,0,a),this.markDirty(),this.renderCanvas()}duplicateField(e){if(!this.schema)return;const t=this.schema.fields.findIndex(n=>n.id===e);if(t<0)return;const s=JSON.parse(JSON.stringify(this.schema.fields[t]));s.id=this.nextFieldId(),this.insertField(s,t+1)}async deleteField(e){if(!this.schema)return;const t=this.schema.fields.filter(n=>n.logic?.rules?.some(a=>a.field===e)),s=t.length?`Delete this field? ${t.length} other field${t.length===1?"":"s"} use it in a condition, and those conditions will stop working.`:te("confirmDelete","Delete this? It cannot be undone.");await ce(s,"Delete field")&&(this.snapshot(),this.schema.fields=this.schema.fields.filter(n=>n.id!==e),this.selected===e&&(this.selected=null),this.markDirty(),this.renderCanvas(),this.renderInspector())}selectField(e){this.selected=e,this.renderCanvas(),this.renderInspector()}nextFieldId(){const e=new Set((this.schema?.fields??[]).map(s=>s.id));let t=e.size+1;for(;e.has(`f${t}`);)t++;return`f${t}`}renderChoicesEditor(e,t){const s=e.choices??[],n=r("div",{class:"atfb-choices"});return s.forEach((a,o)=>{const c=r("div",{class:"atfb-choice-row",children:[e.type==="image_choice"?this.choiceImageWell(a,o,e):null,w(a.label,l=>{a.label=l,(!a.value||a.value===s[o].value)&&(a.value=l),this.markDirty()}),w(a.value,l=>{a.value=l,this.markDirty()},"value"),e.type==="quiz"||a.points!==void 0?R(String(a.points??""),l=>{a.points=l===""?void 0:Number(l),this.markDirty()}):R(String(a.price??""),l=>{a.price=l===""?void 0:Number(l),this.markDirty()}),r("button",{class:"atfb-card__action",type:"button",attrs:{"aria-label":`Remove ${a.label}`},on:{click:()=>{s.splice(o,1),t("choices",s),this.renderInspector()}},children:[O("trash")]})]});n.append(c)}),r("div",{class:"atfb-section",children:[r("h4",{text:"Choices"}),r("p",{class:"atfb-hint",text:e.type==="quiz"?"Label, value, points.":"Label, value, and a price for calculations."}),n,k("Add choice",()=>{s.push({label:"",value:""}),t("choices",s),this.renderInspector()},"ghost","plus-alt2"),e.type==="quiz"?m("Correct answer",D(String(e.correct??""),[{value:"",label:"—"},...s.map(a=>({value:a.value,label:a.label}))],a=>t("correct",a))):null]})}choiceImageWell(e,t,s){const n=r("div",{class:`atfb-well${e.image?" has-image":""}`,attrs:{"data-choice":t,"aria-label":`Image for ${e.label||`choice ${t+1}`}`},children:[e.image?r("span",{class:"atfb-well__id",text:`#${e.image}`}):O("format-image")]}),a=U().registerDropTarget({id:`atfb-well-${s.id}-${t}`,element:n,accept:o=>jt.includes(o.type),onEnter:()=>n.classList.add("is-dropping"),onLeave:()=>n.classList.remove("is-dropping"),onDrop:o=>{n.classList.remove("is-dropping");const c=o.payload.data,l=Number(c.attachmentId??c.id??c.file?.id??0);if(!l){I("That is not an image this field can use","","error");return}e.image=l,this.markDirty(),this.renderInspector()}});return this.teardowns.push(a),n.addEventListener("click",()=>{e.image&&(e.image=void 0,this.markDirty(),this.renderInspector())}),n}renderValidationSection(e,t,s){const n=[],a=[];t.includes("minlength")&&a.push(["minlength","Minimum characters"],["maxlength","Maximum characters"]),t.includes("min")&&a.push(["min","Minimum"],["max","Maximum"]),t.includes("mindate")&&a.push(["minDate","Earliest date"],["maxDate","Latest date"]);for(const[c,l]of a)n.push(m(l,w(String(e[c]??""),d=>s(c,d))));t.includes("pattern")&&n.push(m("Pattern",w(String(e.pattern??""),c=>s("pattern",c)),"A regular expression, without slashes.")),t.includes("unique")&&n.push(M("No two people may submit the same value",!!e.unique,c=>s("unique",c)));const o=e.messages??{};return n.push(m("Message when required",w(o.required??"",c=>{o.required=c,s("messages",o)}),"Leave empty for the default wording.")),r("details",{class:"atfb-section",children:[r("summary",{text:"Validation"}),...n]})}renderLogicSection(e,t){const s=e.logic,n=(this.schema?.fields??[]).filter(o=>o.id!==e.id&&o.type!=="page_break"),a=r("div",{class:"atfb-rules"});return s.rules.forEach((o,c)=>{a.append(r("div",{class:"atfb-rule",children:[D(o.field,n.map(l=>({value:l.id,label:l.label||l.id})),l=>{o.field=l,this.markDirty()}),D(o.operator,Object.entries(this.config?.operators??{}).map(([l,d])=>({value:l,label:d})),l=>{o.operator=l,this.markDirty()}),w(o.value,l=>{o.value=l,this.markDirty()}),r("button",{class:"atfb-card__action",type:"button",attrs:{"aria-label":"Remove this rule"},on:{click:()=>{s.rules.splice(c,1),t("logic",s),this.renderInspector()}},children:[O("trash")]})]}))}),r("details",{class:"atfb-section",attrs:{open:s.enabled},children:[r("summary",{text:"Conditional logic"}),M("Only show this field sometimes",s.enabled,o=>{s.enabled=o,t("logic",s),this.renderInspector()}),s.enabled?r("div",{children:[r("div",{class:"atfb-rule-head",children:[D(s.action,[{value:"show",label:"Show"},{value:"hide",label:"Hide"}],o=>{s.action=o,t("logic",s)}),r("span",{text:"this field when"}),D(s.match,[{value:"all",label:"all"},{value:"any",label:"any"}],o=>{s.match=o,t("logic",s)}),r("span",{text:"of these match:"})]}),a,k("Add rule",()=>{s.rules.push({field:n[0]?.id??"",operator:"is",value:""}),t("logic",s),this.renderInspector()},"ghost","plus-alt2")]}):null]})}renderTabCanvas(){return this.schema?this.tab==="theme"?Ue({themes:this.themes,tokens:this.config?.tokens??[],activeSlug:this.schema.settings.theme,overrides:this.schema.settings.themeOverrides,onTheme:e=>{this.schema.settings.theme=e,this.markDirty()},onOverride:(e,t)=>{t===""?delete this.schema.settings.themeOverrides[e]:this.schema.settings.themeOverrides[e]=t,this.markDirty()},previewFor:(e,t)=>this.previewHtml(e,t),onThemesChanged:e=>{this.themes=e}}):this.tab==="settings"?this.renderSettingsPane():this.tab==="notify"?this.renderNotificationsPane():this.renderConfirmationsPane():r("div")}async previewHtml(e,t){if(!this.form||!this.schema)return"";const s=JSON.parse(JSON.stringify(this.schema));s.settings.theme=e,s.settings.themeOverrides=t;const{html:n}=await C.preview(this.form.id,{schema:s,theme:e});return n}renderSettingsPane(){const e=this.schema.settings,t=(s,n)=>{const a=s.split(".");let o=e;for(let c=0;c<a.length-1;c++)o=o[a[c]];o[a[a.length-1]]=n,this.markDirty()};return r("div",{class:"atfb-pane",children:[r("h2",{text:"Settings"}),r("section",{children:[r("h3",{text:"Submitting"}),m("Button label",w(e.submitLabel,s=>t("submitLabel",s))),M("Submit without reloading the page",e.ajax,s=>t("ajax",s)),m("Progress indicator",D(e.progressBar,[{value:"steps",label:"Numbered steps"},{value:"bar",label:"A bar"},{value:"none",label:"None"}],s=>t("progressBar",s)),"Only shown on forms with a page break.")]}),r("section",{children:[r("h3",{text:"Who can fill this in"}),M("Only logged-in users",e.requireLogin,s=>t("requireLogin",s)),m("Message for everyone else",w(e.loginMessage,s=>t("loginMessage",s))),m("Open from",r("input",{class:"atfb-input",type:"datetime-local",value:e.schedule.start,on:{input:s=>t("schedule.start",s.target.value)}})),m("Closes",r("input",{class:"atfb-input",type:"datetime-local",value:e.schedule.end,on:{input:s=>t("schedule.end",s.target.value)}})),m("Message when closed",w(e.schedule.message,s=>t("schedule.message",s))),m("Stop after this many submissions",R(String(e.limit.total||""),s=>t("limit.total",Number(s)||0)),"0 means no limit."),m("Submissions per logged-in user",R(String(e.limit.perUser||""),s=>t("limit.perUser",Number(s)||0)))]}),r("section",{children:[r("h3",{text:"Spam"}),r("p",{class:"atfb-hint",text:"No captcha. Nothing here asks the visitor to prove anything."}),M("Honeypot field",e.spam.honeypot,s=>t("spam.honeypot",s)),m("Reject submissions faster than (seconds)",R(String(e.spam.timeTrap),s=>t("spam.timeTrap",Number(s)||0)),"A human cannot fill in a form in under a second. A script can."),m("Submissions allowed per hour, per address",R(String(e.spam.rateLimit),s=>t("spam.rateLimit",Number(s)||0))),m("Blocked words",Le(e.spam.blocklist,s=>t("spam.blocklist",s),4),"One per line."),M("Use Akismet when it is installed",e.spam.akismet,s=>t("spam.akismet",s)),M("Ask a simple sum before sending",e.spam.challenge,s=>t("spam.challenge",s)),r("p",{class:"atfb-hint",text:"Only for a form under sustained attack — it is the one check here that asks the visitor to do something. Still kinder than an image captcha: it is answerable by a screen reader, and it hands no data to anyone."})]}),r("section",{children:[r("h3",{text:"Storage and privacy"}),M("Keep entries",e.storage.entries,s=>t("storage.entries",s)),M("Record IP addresses",e.storage.ip,s=>t("storage.ip",s)),M("Anonymise recorded IP addresses",e.storage.anonymise,s=>t("storage.anonymise",s)),m("Delete entries after (days)",R(String(e.storage.retention||""),s=>t("storage.retention",Number(s)||0)),"0 keeps them forever. Anything else deletes automatically, every day.")]}),r("section",{children:[r("h3",{text:"Save and continue later"}),M("Let people save a half-finished form",e.resume.enabled,s=>t("resume.enabled",s)),m("Keep a saved form for (days)",R(String(e.resume.days),s=>t("resume.days",Math.max(1,Number(s)||30)))),r("p",{class:"atfb-hint",text:"The link this creates is the only key to those answers — anyone holding it can read them. For genuinely sensitive questions, require login instead."})]})]})}taggableInput(e,t,s=""){return Ne(w(e,t,s),{formId:this.form.id})}taggableArea(e,t,s=6){return Ne(Le(e,t,s),{formId:this.form.id})}recipientControl(e){const t=this.schema.fields.filter(l=>l.type==="email"),s=l=>{if(l.trim()==="{admin_email}")return"admin";const d=l.trim().match(/^\{field:([a-z0-9_-]+)\}$/i);return d&&t.some(f=>f.id===d[1])?`field:${d[1]}`:/\{/.test(l)?"custom":"address"},n=[{value:"admin",label:"Whoever runs this site"},...t.map(l=>({value:`field:${l.id}`,label:`The person who filled it in — ${l.label||"their email answer"}`})),{value:"address",label:"A specific email address"},{value:"custom",label:"Something else (advanced)"}],a=s(e.to),o=r("div",{class:"atfb-recipient__detail"}),c=l=>{if(o.replaceChildren(),l==="address"){o.append(w(/\{/.test(e.to)?"":e.to,d=>{e.to=d,this.markDirty()},"name@example.com"));return}l==="custom"&&o.append(this.taggableInput(e.to,d=>{e.to=d,this.markDirty()},"{admin_email}, sales@example.com"),r("p",{class:"atfb-row__hint",text:"Separate several addresses with commas."}))};return c(a),m("Send it to",r("div",{class:"atfb-recipient",children:[D(a,n,l=>{l==="admin"?e.to="{admin_email}":l.startsWith("field:")?e.to=`{${l}}`:l==="address"&&(e.to=/\{/.test(e.to)?"":e.to),this.markDirty(),c(l)}),o]}),t.length?void 0:"Add an Email question on the Build tab to reply straight back to the visitor.")}renderNotificationsPane(){const e=this.schema.notifications,t=r("div",{class:"atfb-list"});return e.length||t.append(r("p",{class:"atfb-hint",text:"With none set up, one email goes to the site administrator with every answer in it."})),e.forEach((s,n)=>{t.append(r("details",{class:"atfb-section",children:[r("summary",{text:s.name||`Notification ${n+1}`}),m("Name",w(s.name,a=>{s.name=a,this.markDirty()})),this.recipientControl(s),m("Reply to",this.taggableInput(s.replyTo,a=>{s.replyTo=a,this.markDirty()},"Leave empty to reply to you"),"Set this to the visitor’s email address and hitting Reply answers them directly."),m("Subject",this.taggableInput(s.subject,a=>{s.subject=a,this.markDirty()})),m("Message",this.taggableArea(s.message,a=>{s.message=a,this.markDirty()},8)),M("Attach uploaded files",s.attachFiles,a=>{s.attachFiles=a,this.markDirty()}),k("Delete this notification",()=>{e.splice(n,1),this.markDirty(),this.renderCanvas()},"danger")]}))}),r("div",{class:"atfb-pane",children:[r("h2",{text:"Notifications"}),t,k("Add a notification",()=>{e.push({id:`n${e.length+1}`,enabled:!0,name:"Notification",to:"{admin_email}",cc:"",bcc:"",replyTo:"",fromName:"",fromEmail:"",subject:"New submission",message:"{all_fields}",attachFiles:!1,logic:{enabled:!1,action:"show",match:"all",rules:[]}}),this.markDirty(),this.renderCanvas()},"primary","plus-alt2")]})}confirmationDetail(e){if(e.type==="message")return m("Message",this.taggableArea(e.message,a=>{e.message=a,this.markDirty()},5),"Insert an answer to greet them by name, or show back what they sent.");const t=m("Extra query parameters",this.taggableInput(e.query,a=>{e.query=a,this.markDirty()},"ref={entry:id}&name={field:f1}"),"Added to the address, so the page they land on can read them. Leave empty for none.");if(e.type==="redirect")return r("div",{children:[m("Web address",this.taggableInput(e.url,a=>{e.url=a,this.markDirty()},"https://example.com/thank-you"),"A full address, starting with https://."),t]});const s=r("div",{class:"atfb-pagepicker"}),n=a=>{s.replaceChildren(D(String(e.pageId||0),a,o=>{e.pageId=Number(o)||0,this.markDirty()}))};return n([{value:"0",label:"Loading pages…"}]),C.pages().then(a=>{n([{value:"0",label:"Choose a page…"},...a.map(o=>({value:String(o.id),label:o.title}))])}).catch(()=>{n([{value:"0",label:"Could not load the pages"}])}),m("Page",s,"They are sent to this page after submitting. Its own content is shown, not the form’s message.")}renderConfirmationsPane(){const e=this.schema.confirmations,t=r("div",{class:"atfb-list"});return e.length||t.append(r("p",{class:"atfb-hint",text:"With none set up, the form says thank you and stops."})),e.forEach((s,n)=>{const a=r("div",{class:"atfb-confirm__detail"}),o=()=>{a.replaceChildren(this.confirmationDetail(s))};o(),t.append(r("details",{class:"atfb-section",children:[r("summary",{text:s.name||`Confirmation ${n+1}`}),m("Name",w(s.name,c=>{s.name=c,this.markDirty()})),m("What happens",D(s.type,[{value:"message",label:"Show a message"},{value:"redirect",label:"Send them to a URL"},{value:"page",label:"Send them to a page"}],c=>{s.type=c,this.markDirty(),o()})),a,k("Delete this confirmation",()=>{e.splice(n,1),this.markDirty(),this.renderCanvas()},"danger")]}))}),r("div",{class:"atfb-pane",children:[r("h2",{text:"Confirmations"}),r("p",{class:"atfb-hint",text:"The first one whose conditions match is the one they see."}),t,k("Add a confirmation",()=>{e.push({id:`c${e.length+1}`,enabled:!0,name:"Confirmation",type:"message",message:"Thank you. Your submission has been received.",url:"",pageId:0,query:"",logic:{enabled:!1,action:"show",match:"all",rules:[]}}),this.markDirty(),this.renderCanvas()},"primary","plus-alt2")]})}async preview(){await We({current:()=>this.form?{id:this.form.id,title:this.form.title,previewUrl:this.form.previewUrl}:null,isDirty:()=>this.dirty,save:()=>this.save(!0)})}}let J=null,xe=null;function _e(){if(xe?.isConnected)return;J&&(J.destroy(),J=null,xe=null);const i=document.querySelector("[data-atfb-root]:not([data-atfb-mounted])");i&&(i.dataset.atfbMounted="1",xe=i,rt().then(()=>{i.isConnected&&(J=new Je(i),J.start())}))}function Ke(){_e(),pt()}return mt(),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Ke):Ke(),document.addEventListener("os-window-content-loaded",_e),V.Builder=Je,V.mountBuilder=_e,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"}),V}({});
+var allTerrainFormsBuilder=function(Q){"use strict";class st{constructor(){this.targets=[],this.active=null,this.lastEndMs=0}start(e){if(this.active||e.origin.button!==0)return null;const{payload:t,origin:s}=e,n=s.clientX,a=s.clientY;let o=!1,c=!1,l=null,d=null,u=0,C=0;const v=()=>{document.removeEventListener("pointermove",E),document.removeEventListener("pointerup",N),document.removeEventListener("pointercancel",H),document.removeEventListener("keydown",ie),window.removeEventListener("blur",H),l?.remove(),l=null,t.source.classList.remove("atf-is-dragging"),d?.onLeave?.(f),d=null,this.active=null,this.lastEndMs=Date.now()},f={payload:t,isFinished:()=>c,cancel:(x="caller")=>{c||(c=!0,v(),e.onCancel?.(x))}},y=x=>{o=!0,t.source.classList.add("atf-is-dragging");const T=t.source.getBoundingClientRect();u=t.ghost?.offsetX??n-T.left,C=t.ghost?.offsetY??a-T.top,l=t.ghost?.element??t.source.cloneNode(!0),l.classList.add("atf-drag-ghost"),l.style.width=`${T.width}px`,document.body.appendChild(l),S(x)},S=x=>{l&&(l.style.transform=`translate3d(${x.clientX-u}px, ${x.clientY-C}px, 0)`)},E=x=>{if(c)return;if(!o){if(Math.hypot(x.clientX-n,x.clientY-a)<4)return;y(x)}S(x);const T=this.hitTest(x.clientX,x.clientY);T!==d&&(d?.onLeave?.(f),d=T,d?.onEnter?.(f))},N=x=>{if(c)return;if(!o){c=!0,v(),e.onClickOnly?.();return}const T=d;if(c=!0,v(),T&&T.accept(t)){e.onCommit?.(T),T.onDrop(f,{clientX:x.clientX,clientY:x.clientY});return}e.onCancel?.(T?"rejected":"no-target")},H=()=>f.cancel("pointercancel"),ie=x=>{x.key==="Escape"&&f.cancel("escape")};return document.addEventListener("pointermove",E),document.addEventListener("pointerup",N),document.addEventListener("pointercancel",H),document.addEventListener("keydown",ie),window.addEventListener("blur",H),this.active=f,f}registerDropTarget(e){return this.targets=this.targets.filter(t=>t.id!==e.id),this.targets.push(e),()=>{this.targets=this.targets.filter(t=>t.id!==e.id)}}isDragging(){return this.active!==null}recentlyEndedDrag(e=500){return Date.now()-this.lastEndMs<e}hitTest(e,t){let s=null,n=-1;for(const a of this.targets){const o=a.element.getBoundingClientRect();if(e<o.left||e>o.right||t<o.top||t>o.bottom)continue;const c=it(a.element);if(c>n){s=a,n=c;continue}c===n&&s&&nt(a.element,s.element)&&(s=a)}return s}}function it(i){let e=0,t=i;for(;t;)e++,t=t.parentElement;return e}function nt(i,e){return(e.compareDocumentPosition(i)&Node.DOCUMENT_POSITION_FOLLOWING)!==0}function re(){return window.wp?.os??null}let oe=null;function U(){const i=re();return i?.dragManager?i.dragManager:(oe||(oe=new st),oe)}function at(i){const e=n=>{const a=n.detail?.payload;return a&&i.includes(a.type)?a.source:null},t=n=>e(n)?.classList.add("atf-is-dragging"),s=n=>e(n)?.classList.remove("atf-is-dragging");return document.addEventListener("os.drag.start",t),document.addEventListener("os.drag.end",s),()=>{document.removeEventListener("os.drag.start",t),document.removeEventListener("os.drag.end",s)}}function Ce(i,e,t,s,n){const a=e.getBoundingClientRect();return n&&(n.style.width=`${Math.round(a.width)}px`,n.style.maxWidth=`${Math.round(a.width)}px`,n.style.boxSizing="border-box"),{type:i,source:e,data:t,ghost:{element:n,offsetX:s.clientX-a.left,offsetY:s.clientY-a.top,hint:{neutral:"",accept:"",reject:"",hidden:!0}}}}function Le(i,e,t,s){const n=Array.from(i.querySelectorAll(e)).filter(a=>a!==s&&!a.classList.contains("atf-drag-ghost"));for(let a=0;a<n.length;a++){const o=n[a].getBoundingClientRect();if(t<o.top+o.height/2)return a}return n.length}const q=window.allTerrainForms;class Z extends Error{constructor(e,t,s=""){super(e),this.name="ApiError",this.status=t,this.code=s}}async function le(i,e={}){if(!q?.restUrl)throw new Z("AllTerrain Forms is not configured on this page.",0);const t=`${q.restUrl}${i}`,s={"Content-Type":"application/json",...e.headers??{}};q.nonce&&(s["X-WP-Nonce"]=q.nonce);const n=re(),o=await(n?.fetch?(c,l)=>n.fetch(c,l,{source:"allterrain-forms"}):(c,l)=>fetch(c,l))(t,{credentials:"same-origin",...e,headers:s});if(!o.ok){let c=`Request failed with status ${o.status}.`,l="";try{const d=await o.json();c=d.message??c,l=d.code??""}catch{}throw new Z(c,o.status,l)}if(o.status!==204)return await o.json()}const P=i=>le(i);async function rt(i){if(!q?.wpRestUrl)throw new Z("AllTerrain Forms is not configured on this page.",0);const e=q.nonce?{"X-WP-Nonce":q.nonce}:{},t=re(),s=`${q.wpRestUrl}${i}`,n=t?.fetch?await t.fetch(s,{credentials:"same-origin",headers:e},{source:"allterrain-forms"}):await fetch(s,{credentials:"same-origin",headers:e});if(!n.ok)throw new Z(`Request failed with status ${n.status}.`,n.status);return await n.json()}function ot(i){if(!i||!i.includes("&"))return i;const e=document.createElement("textarea");return e.innerHTML=i,e.value}const j=(i,e)=>le(i,{method:"POST",body:JSON.stringify(e)}),ce=i=>le(i,{method:"DELETE"});function Te(i){const e=new URLSearchParams;for(const[s,n]of Object.entries(i))n===void 0||n===""||n===!1||e.set(s,String(n));const t=e.toString();return t?`?${t}`:""}const L={config:()=>P("/config"),listForms:()=>P("/forms"),getForm:i=>P(`/forms/${i}`),createForm:i=>j("/forms",i),updateForm:(i,e)=>j(`/forms/${i}`,e),duplicateForm:i=>j(`/forms/${i}/duplicate`,{}),deleteForm:i=>ce(`/forms/${i}`),preview:(i,e)=>j(`/forms/${i}/preview`,e),pages:()=>rt("wp/v2/pages?per_page=100&status=publish&orderby=title&order=asc&_fields=id,title").then(i=>i.map(e=>({id:e.id,title:ot(e.title?.rendered??"")||`#${e.id}`}))),mergeTags:i=>P(`/forms/${i}/merge-tags`).then(e=>e.groups),analytics:i=>P(`/forms/${i}/analytics`),listEntries:i=>P(`/entries${Te(i)}`),getEntry:i=>P(`/entries/${i}`),updateEntry:(i,e)=>j(`/entries/${i}`,e),deleteEntry:i=>ce(`/entries/${i}`),exportEntries:i=>P(`/entries/export${Te(i)}`),listThemes:()=>P("/themes"),saveTheme:i=>j("/themes",i),deleteTheme:i=>ce(`/themes/${i}`)};function r(i,e={}){const t=document.createElement(i);e.class&&(t.className=e.class),e.text!==void 0&&(t.textContent=e.text),e.html!==void 0&&(t.innerHTML=e.html),e.title&&(t.title=e.title),e.type&&"type"in t&&(t.type=e.type),e.value!==void 0&&"value"in t&&(t.value=e.value),e.placeholder!==void 0&&"placeholder"in t&&(t.placeholder=e.placeholder),e.href&&"href"in t&&(t.href=e.href);for(const[s,n]of Object.entries(e.attrs??{}))n===void 0||n===!1||t.setAttribute(s,n===!0?"":String(n));Object.assign(t.style,e.style??{});for(const[s,n]of Object.entries(e.on??{}))t.addEventListener(s,n);for(const s of e.children??[])s==null||s===!1||t.append(s);return t}function $(i){i.replaceChildren()}function F(i){return r("span",{class:`dashicons ${i.startsWith("dashicons-")?i:`dashicons-${i}`}`,attrs:{"aria-hidden":"true"}})}function m(i,e,t){const s=e.id||`atf-c-${Math.random().toString(36).slice(2,9)}`;return e.id=s,r("div",{class:"atfb-row",children:[r("label",{class:"atfb-row__label",text:i,attrs:{for:s}}),e,t?r("p",{class:"atfb-row__hint",text:t}):null]})}function w(i,e,t=""){return r("input",{class:"atfb-input",type:"text",value:i,placeholder:t,on:{input:s=>e(s.target.value)}})}function R(i,e){if(X("os-number-field")){const t=document.createElement("os-number-field");return t.setAttribute("value",i),t.classList.add("atfb-field"),t.addEventListener("os-input-change",s=>{e(String(s.detail?.value??""))}),t}return r("input",{class:"atfb-input",type:"number",value:i,on:{input:t=>e(t.target.value)}})}function $e(i,e,t=4){const s=r("textarea",{class:"atfb-input atfb-input--area",attrs:{rows:t},on:{input:n=>e(n.target.value)}});return s.value=i,s}function D(i,e,t){if(X("os-select")&&X("os-option")){const s=document.createElement("os-select");s.setAttribute("value",i),s.classList.add("atfb-field");for(const n of e){const a=document.createElement("os-option");a.setAttribute("value",n.value),a.textContent=n.label,s.append(a)}return s.addEventListener("os-pick",n=>{t(String(n.detail?.value??""))}),s}return r("select",{class:"atfb-input atfb-select",on:{change:s=>t(s.target.value)},children:e.map(s=>r("option",{value:s.value,text:s.label,attrs:{selected:s.value===i}}))})}function M(i,e,t){if(X("os-checkbox-label")){const n=document.createElement("os-checkbox-label");return n.setAttribute("label",i),n.classList.add("atfb-check"),e&&n.setAttribute("checked",""),n.addEventListener("os-checkbox-change",a=>{t(!!a.detail?.checked)}),n}const s=r("input",{type:"checkbox",on:{change:n=>t(n.target.checked)}});return s.checked=e,r("label",{class:"atfb-check",children:[s,r("span",{text:i})]})}function k(i,e,t="secondary",s){const n=[s?F(s):null,r("span",{text:i})];if(X("os-button")){const a=document.createElement("os-button");a.setAttribute("variant",t),a.setAttribute("type","button"),a.classList.add("atfb-button",`atfb-button--${t}`),a.addEventListener("click",e);for(const o of n)o&&a.append(o);return a}return r("button",{class:`atfb-button atfb-button--${t}`,type:"button",on:{click:e},children:n})}function X(i){return typeof customElements<"u"&&!!customElements.get(i)}const lt=["os-button","os-checkbox-label","os-number-field","os-select","os-option","os-segmented","os-segment","os-color-field","os-empty-state"];let ee=null;function ct(){if(ee)return ee;const i=window.wp?.os;return ee=i?.loadComponents?i.loadComponents(lt).catch(()=>{}):Promise.resolve(),ee}async function de(i,e=""){const t=window.wp?.os;return t?.confirm?t.confirm({title:e,message:i,danger:!0}):window.confirm(i)}function I(i,e="",t="info"){const s=window.wp?.os;if(s?.notify){s.notify({title:i,body:e,type:t});return}console.info(`[AllTerrain Forms] ${i}${e?`: ${e}`:""}`)}function dt(i){let e=0,t;return(...s)=>{t=s,!e&&(e=window.requestAnimationFrame(()=>{e=0,i(...t)}))}}function Ae(i,e){let t=0;return(...s)=>{window.clearTimeout(t),t=window.setTimeout(()=>i(...s),e)}}function ht(i){try{return window.localStorage.getItem(i)??""}catch{return""}}function ut(i,e){try{window.localStorage.setItem(i,e)}catch{}}function De(){const i=[window];try{window.parent&&window.parent!==window&&i.push(window.parent)}catch{}return i}function pt(i){const e=i.wp?.os?.windowManager?.getAll?.()??[];for(const t of e){const s=t.iframe??t.element?.querySelector?.("iframe");if(s&&s.contentWindow===window)return t}return null}const ft=4e3,mt=100;function gt(i,e){const t=Date.now()+ft,s=()=>{const n=pt(i);if(n&&n.id!==e){typeof n.close=="function"?n.close():i.wp?.os?.windowManager?.remove?.(n.id);return}!n&&Date.now()<t&&window.setTimeout(s,mt)};s()}function bt(){const i=document.querySelector("[data-atf-handoff]");if(!i)return;const e=i.getAttribute("data-atf-handoff")??"";if(!e)return;const t=Number(new URLSearchParams(window.location.search).get("form"))||0,s=t>0?{form:t}:void 0;t>0&&yt(t);for(const n of De())if(n.wp?.os?.openWindow?.(e,{source:"handoff",params:s})){window.setTimeout(()=>gt(n,e),0);return}}function vt(){document.addEventListener("click",i=>{const e=i.target?.closest?.("[data-atf-open-window]");if(!e)return;i.preventDefault();const t=e.getAttribute("data-atf-open-window")??"";for(const s of De())if(s.wp?.os?.openWindow?.(t,{source:"handoff"}))return})}const wt="allterrain-forms/requested-form";function yt(i){try{window.sessionStorage.setItem(wt,String(i))}catch{}}const Me={is:"is",is_not:"is not",contains:"contains",not_contains:"does not contain",starts_with:"starts with",ends_with:"ends with",greater:"is more than",less:"is less than",greater_equal:"is at least",less_equal:"is at most",empty:"is empty",not_empty:"has any answer"},qe=["empty","not_empty"];function Fe(i,e){const t=i.find(s=>s.id===e);return t?t.label||"an untitled question":null}function Oe(i,e,t){return i.find(a=>a.id===e)?.choices?.find(a=>a.value===t)?.label||t}function _t(i,e){const t=Me[i.operator]??String(i.operator);if(qe.includes(i.operator))return t;const s=Oe(e,i.field,i.value);return`${i.operator==="is"?"":`${t} `}${s!==""?s:"(nothing)"}`}function Ie(i,e){const t=Fe(e,i.field),s=Me[i.operator]??String(i.operator);if(t===null)return[{kind:"field",text:"a question that no longer exists",fieldId:i.field,missing:!0}];const n=[{kind:"field",text:t,fieldId:i.field,missing:!1},{kind:"operator",text:s}];if(qe.includes(i.operator))return n;const a=Oe(e,i.field,i.value);return n.push({kind:"value",text:a!==""?a:"(nothing)"}),n}function xt(i,e){const t=i.logic;if(!t?.enabled||!t.rules.length)return[];const s=[{kind:"verb",text:t.action==="hide"?"Hidden when":"Shown when"}];return t.rules.forEach((n,a)=>{a>0&&s.push({kind:"join",text:t.match==="all"?"and":"or"}),s.push(...Ie(n,e))}),s}function Pe(i){return i.map(e=>e.text).join(" ")}function kt(i,e){return Pe(Ie(i,e))}function he(i){const e=[];for(const t of i){const s=t.logic;if(s?.enabled)for(const n of s.rules)!n.field||n.field===t.id||e.push({from:n.field,to:t.id,label:kt(n,i),short:_t(n,i),action:s.action,broken:Fe(i,n.field)===null})}return e}function St(i){const e=new Map,t=new Set;for(const s of he(i)){const n=`${s.from}->${s.to}`;s.broken||t.has(n)||(t.add(n),e.set(s.from,(e.get(s.from)??0)+1))}return e}const Ne=10,Re=22,W="http://www.w3.org/2000/svg";class Et{constructor(e){this.edges=[],this.teardowns=[],this.frame=0,this.host=e,this.svg=document.createElementNS(W,"svg"),this.svg.setAttribute("class","atfb-logicmap"),this.svg.setAttribute("aria-hidden","true"),this.svg.setAttribute("focusable","false"),e.append(this.svg);const t=()=>this.schedule();window.addEventListener("resize",t),this.teardowns.push(()=>window.removeEventListener("resize",t));const s=e.closest(".atfb__canvas")??e;if(s.addEventListener("scroll",t,{passive:!0}),this.teardowns.push(()=>s.removeEventListener("scroll",t)),typeof ResizeObserver<"u"){const n=new ResizeObserver(t);n.observe(e),this.teardowns.push(()=>n.disconnect())}}setEdges(e){this.edges=e,this.schedule()}highlight(e){this.svg.classList.toggle("is-focused",!!e),this.svg.querySelectorAll("[data-from]").forEach(t=>{const s=e&&(t.dataset.from===e||t.dataset.to===e);t.classList.toggle("is-lit",!!s)})}destroy(){this.teardowns.forEach(e=>e()),this.teardowns=[],this.svg.remove(),this.frame&&cancelAnimationFrame(this.frame)}schedule(){this.frame||(this.frame=requestAnimationFrame(()=>{this.frame=0,this.draw()}))}draw(){this.svg.replaceChildren();const e=this.host.getBoundingClientRect();this.svg.setAttribute("viewBox",`0 0 ${e.width} ${e.height}`),this.svg.setAttribute("width",String(e.width)),this.svg.setAttribute("height",String(e.height));const t=new Map;for(const s of this.edges){const n=this.cardRect(s.from),a=this.cardRect(s.to);if(!n||!a)continue;const o=t.get(s.from)??0;t.set(s.from,o+1),this.drawEdge(s,n,a,e,o)}}cardRect(e){const t=this.host.querySelector(`[data-atfb-card="${CSS.escape(e)}"]`);return t?t.getBoundingClientRect():null}drawEdge(e,t,s,n,a){const o=t.right-n.left,c=t.top+t.height/2-n.top,l=s.right-n.left,d=s.top+s.height/2-n.top,u=Math.max(0,n.width-Ne-Math.max(o,l)),C=22+a*11+Math.min(22,Math.abs(d-c)/8),v=Math.max(12,Math.min(C,u*.4)),f=document.createElementNS(W,"path");f.setAttribute("d",`M ${o} ${c} C ${o+v} ${c}, ${l+v} ${d}, ${l} ${d}`),f.setAttribute("class",`atfb-logicmap__path is-${e.action}${e.broken?" is-broken":""}`),f.dataset.from=e.from,f.dataset.to=e.to;const y=document.createElementNS(W,"title");y.textContent=e.label,f.append(y);const S=document.createElementNS(W,"circle");S.setAttribute("cx",String(l)),S.setAttribute("cy",String(d)),S.setAttribute("r","3.5"),S.setAttribute("class",`atfb-logicmap__dot is-${e.action}${e.broken?" is-broken":""}`),S.dataset.from=e.from,S.dataset.to=e.to,this.svg.append(f,S);const E=document.createElementNS(W,"text");E.setAttribute("x",String(n.width-Ne)),E.setAttribute("y",String(d+3)),E.setAttribute("text-anchor","end"),E.setAttribute("class","atfb-logicmap__label"),E.dataset.from=e.from,E.dataset.to=e.to,E.textContent=e.short.length>Re?`${e.short.slice(0,Re-1)}…`:e.short;const N=document.createElementNS(W,"title");N.textContent=e.label,E.append(N),this.svg.append(E)}}const Ct={text:"text",email:"text",url:"text",tel:"text",number:"text",password:"text",date:"text",time:"text",datetime:"text",date_range:"composite",textarea:"textarea",select:"select",country:"select",multiselect:"options",radio:"options",checkboxes:"options",image_choice:"options",quiz:"options",switch:"toggle",consent:"toggle",file:"file",range:"range",rating:"summary",scale:"summary",likert:"summary",signature:"summary",repeater:"summary",color:"text",name:"composite",address:"composite",total:"text",hidden:"static",heading:"static",html:"static",divider:"static",spacer:"static",page_break:"static"};function Lt(i){return Ct[i]??"text"}function z(i,e,t,s,n){const a=r("span",{class:`${t} atfb-editable`,text:i,attrs:{contenteditable:"plaintext-only",role:"textbox",spellcheck:"false","data-placeholder":e}});return a.addEventListener("pointerdown",o=>o.stopPropagation()),a.addEventListener("input",()=>s(a.textContent??"")),a.addEventListener("keydown",o=>{o.key==="Enter"&&(o.preventDefault(),a.blur()),o.key==="Escape"&&(a.textContent=i,a.blur()),o.stopPropagation()}),a.addEventListener("blur",()=>n?.()),a}function Tt(i){const e=r("input",{class:"atf-choice__input",type:i==="checkboxes"||i==="multiselect"?"checkbox":"radio"});return e.disabled=!0,e}function $t(i,e,t){const s=Lt(i.type),n=z(i.label,"Write the question…","atf-label",o=>t.edit(c=>{c.label=o}),()=>t.restructure(()=>{})),a=[s==="static"?null:n,i.hint?r("p",{class:"atf-hint",text:i.hint}):null,At(i,e,s,t)];return r("div",{class:"atfb-preview atf-form",children:[r("div",{class:`atf-field atf-field--${i.type}`,children:a})]})}function At(i,e,t,s){switch(t){case"text":return ue(i,"atf-input",s);case"textarea":return ue(i,"atf-input atf-textarea",s,!0);case"select":return r("div",{class:"atfb-preview__select",children:[ue(i,"atf-input atf-select",s)]});case"options":return Dt(i,s);case"toggle":return r("div",{class:"atf-toggle",children:[(()=>{const n=r("input",{class:"atf-toggle__input",type:"checkbox"});return n.disabled=!0,n})(),z(i.label||"","What are they agreeing to?…","atf-toggle__label",n=>s.edit(a=>{a.label=n}),()=>s.restructure(()=>{}))]});case"file":return r("div",{class:"atf-file",children:[r("input",{class:"atf-file__input",type:"file"})]});case"range":return r("input",{class:"atf-range__input",type:"range"});case"composite":return r("div",{class:"atf-composite__parts",children:[r("span",{class:"atf-input atfb-preview__ghost",text:""}),r("span",{class:"atf-input atfb-preview__ghost",text:""})]});case"static":return Mt(i,e,s);default:return r("p",{class:"atfb-preview__summary",text:`${e?.label??i.type} — set this up in the panel on the right.`})}}function ue(i,e,t,s=!1){const n=z(i.placeholder??"",i.type==="select"||i.type==="country"?"Choose…":"Placeholder…",`${e} atfb-preview__box${s?" atfb-preview__box--tall":""}`,a=>t.edit(o=>{o.placeholder=a}));return n.setAttribute("aria-label","Placeholder"),n}function Dt(i,e){const t=r("div",{class:"atf-choices__list"});return(i.choices??[]).forEach((s,n)=>{t.append(r("div",{class:"atf-choice atfb-preview__option",children:[Tt(i.type),z(s.label,"Option…","atf-choice__label",a=>{e.edit(o=>{const c=o.choices?.[n];if(!c)return;const l=!c.value||c.value===c.label;c.label=a,l&&(c.value=a)})}),r("button",{class:"atfb-preview__remove",type:"button",title:"Remove this option",attrs:{"aria-label":`Remove ${s.label||"this option"}`},on:{pointerdown:a=>a.stopPropagation(),click:a=>{a.stopPropagation(),e.restructure(o=>{o.choices.splice(n,1)})}},children:[r("span",{text:"×"})]})]}))}),t.append(r("button",{class:"atfb-preview__add",type:"button",on:{pointerdown:s=>s.stopPropagation(),click:s=>{s.stopPropagation(),e.restructure(n=>{const a=n.choices.length+1;n.choices.push({label:`Option ${a}`,value:`Option ${a}`})})}},children:[r("span",{text:"+ Add option"})]})),r("fieldset",{class:"atf-choices",children:[t]})}function Mt(i,e,t){return i.type==="heading"?z(i.label,"Section heading…","atf-heading",s=>t.edit(n=>{n.label=s}),()=>t.restructure(()=>{})):i.type==="divider"?r("hr",{class:"atf-divider"}):i.type==="page_break"?r("p",{class:"atfb-preview__summary",text:"Everything after this is a new page."}):r("p",{class:"atfb-preview__summary",text:`${e?.label??i.type} — nothing is shown to the visitor here.`})}const pe=new Map;function fe(i){let e=pe.get(i);return e||(e=L.mergeTags(i).catch(()=>[]),pe.set(i,e)),e}function qt(i){pe.delete(i)}function Ft(i){const e=new Map;for(const t of i)for(const s of t.items)e.set(s.tag,s);return e}function Ot(i,e){const t=Ft(e);return i.replace(/\{[a-z_]+(?::[^}]*)?\}/gi,s=>{const n=t.get(s.toLowerCase());return n?n.sample:s})}function It(i){return/\{[a-z_]+(?::[^}]*)?\}/i.test(i)}let B=null;function G(){B?.remove(),B=null}typeof document<"u"&&(document.addEventListener("pointerdown",i=>{B&&!B.contains(i.target)&&G()}),document.addEventListener("keydown",i=>{i.key==="Escape"&&B&&(G(),i.stopPropagation())}));function Pt(i,e){const t=i.selectionStart??i.value.length,s=i.selectionEnd??i.value.length;i.value=i.value.slice(0,t)+e+i.value.slice(s);const n=t+e.length;i.setSelectionRange(n,n),i.focus(),i.dispatchEvent(new Event("input",{bubbles:!0}))}function Nt(i){let e=i.parentElement;for(;e&&e!==document.body;){const t=getComputedStyle(e).overflowY;if(t==="auto"||t==="scroll"||t==="hidden")return e.getBoundingClientRect().bottom;e=e.parentElement}return window.innerHeight}function Rt(i,e){const t=r("input",{class:"atfb-input atfb-tagpick__search",type:"search",placeholder:"Search values…",attrs:{"aria-label":"Search values"}}),s=r("div",{class:"atfb-tagpick__list"}),n=a=>{s.replaceChildren();const o=a.trim().toLowerCase();let c=0;for(const l of i){const d=l.items.filter(u=>!o||u.label.toLowerCase().includes(o)||u.tag.toLowerCase().includes(o));if(!d.length){l.empty&&!o&&!l.items.length&&s.append(r("p",{class:"atfb-tagpick__group",text:l.label}),r("p",{class:"atfb-tagpick__empty",text:l.empty}));continue}s.append(r("p",{class:"atfb-tagpick__group",text:l.label}));for(const u of d)c+=1,s.append(r("button",{class:"atfb-tagpick__item",type:"button",on:{click:()=>{e(u.tag),G()}},children:[r("span",{class:"atfb-tagpick__item-main",children:[r("span",{class:"atfb-tagpick__label",text:u.label}),r("code",{class:"atfb-tagpick__tag",text:u.tag})]}),u.hint||u.sample?r("span",{class:"atfb-tagpick__meta",text:u.sample?`e.g. ${u.sample}`:u.hint}):null]}))}!c&&o&&s.append(r("p",{class:"atfb-tagpick__empty",text:`Nothing matches “${a}”.`}))};return n(""),t.addEventListener("input",()=>n(t.value)),r("div",{class:"atfb-tagpick",attrs:{role:"dialog","aria-label":"Insert a value"},children:[r("p",{class:"atfb-tagpick__intro",text:"Pick something to drop in. It is filled in when the form is submitted."}),t,s]})}function Be(i,e){const t=r("button",{class:"atfb-button atfb-button--ghost atfb-tagpick__open",type:"button",title:"Insert a value from the submission",children:[F("shortcode"),r("span",{text:"Insert a value"})]}),s=r("div",{class:"atfb-taggable",children:[i,r("div",{class:"atfb-taggable__tools",children:[t]})]}),n=e.preview===!1?null:r("p",{class:"atfb-taggable__preview"});n&&s.append(n);const a=()=>{if(n){if(!It(i.value)){n.textContent="",n.hidden=!0;return}fe(e.formId).then(o=>{n.hidden=!1,n.replaceChildren(r("span",{class:"atfb-taggable__preview-label",text:"Reads as"}),r("span",{text:Ot(i.value,o)}))})}};return i.addEventListener("input",a),a(),t.addEventListener("click",o=>{if(o.stopPropagation(),B&&s.contains(B)){G();return}G(),fe(e.formId).then(c=>{const l=Rt(c,d=>{Pt(i,d),a()});s.append(l),B=l,(window.innerHeight-l.getBoundingClientRect().top<l.offsetHeight||l.getBoundingClientRect().bottom>Nt(s))&&l.classList.add("atfb-tagpick--above"),l.querySelector(".atfb-tagpick__search")?.focus()})}),s}function Ue(i,e){const t=parseFloat(String(i??""));return Number.isFinite(t)?t:e}function je(i,e){let t=e[0];for(const s of e)Math.abs(s.at-i)<Math.abs(t.at-i)&&(t=s);return t.value}const me=[{value:"square",label:"Square",at:0},{value:"soft",label:"Soft",at:4},{value:"rounded",label:"Rounded",at:10},{value:"pill",label:"Pill",at:999}],ge=[{value:"compact",label:"Compact",at:7},{value:"cosy",label:"Cosy",at:9},{value:"roomy",label:"Roomy",at:13}],Bt=[{value:"none",label:"None"},{value:"subtle",label:"Subtle"},{value:"lifted",label:"Lifted"},{value:"hard",label:"Hard"}],Ut=[{value:"outline",label:"Outlined"},{value:"filled",label:"Filled"},{value:"underline",label:"Underline"},{value:"none",label:"Bare"}],jt=[{value:"top",label:"Above"},{value:"floating",label:"Floating"},{value:"left",label:"In the margin"},{value:"hidden",label:"Hidden"}];function We(){return[{id:"accent",label:"Accent",hint:"The colour of buttons, focus rings and anything selected.",kind:"colour",owns:["accent","accent-soft","border-focus","focus-ring-color","button-bg","button-bg-hover"],read:i=>i.accent??"#2271b1",apply:i=>({accent:i,"accent-soft":`color-mix( in srgb, ${i} 12%, transparent )`,"border-focus":i,"focus-ring-color":i,"button-bg":i,"button-bg-hover":`color-mix( in srgb, ${i} 88%, #000 )`})},{id:"roundness",label:"Roundness",hint:"Corners, everywhere at once.",kind:"scale",steps:me.map(({value:i,label:e})=>({value:i,label:e})),owns:["radius-field","radius-button","radius-card","radius-check"],read:i=>je(Ue(i["radius-field"],4),me),apply:i=>{const e=me.find(t=>t.value===i)?.at??4;return{"radius-field":`${e}px`,"radius-button":`${e}px`,"radius-card":`${Math.min(e*2,28)}px`,"radius-check":`${Math.min(e,6)}px`}}},{id:"density",label:"Density",hint:"How much air the form has.",kind:"scale",steps:ge.map(({value:i,label:e})=>({value:i,label:e})),owns:["pad-field-x","pad-field-y","gap-fields","gap-label","button-pad-x","button-pad-y"],read:i=>je(Ue(i["pad-field-y"],9),ge),apply:i=>{const e=ge.find(t=>t.value===i)?.at??9;return{"pad-field-y":`${e}px`,"pad-field-x":`${Math.round(e*1.4)}px`,"gap-fields":`${Math.round(e*2.2)}px`,"gap-label":`${Math.max(4,Math.round(e*.7))}px`,"button-pad-y":`${e+2}px`,"button-pad-x":`${Math.round(e*2.2)}px`}}},{id:"shadow",label:"Depth",hint:"How far the form sits off the page.",kind:"scale",steps:Bt,owns:["shadow-field","shadow-field-focus","shadow-button","shadow-button-hover","shadow-card"],read:i=>{const e=i["shadow-card"]??"none";return e==="none"||e.trim()===""?i["shadow-field"]&&i["shadow-field"]!=="none"?"hard":"none":e.includes("0 1px")||e.includes("2px")?"subtle":"lifted"},apply:i=>{switch(i){case"subtle":return{"shadow-field":"none","shadow-field-focus":"none","shadow-button":"0 1px 2px rgba( 0, 0, 0, 0.12 )","shadow-button-hover":"0 2px 4px rgba( 0, 0, 0, 0.16 )","shadow-card":"0 1px 3px rgba( 0, 0, 0, 0.1 )"};case"lifted":return{"shadow-field":"none","shadow-field-focus":"0 4px 12px rgba( 0, 0, 0, 0.12 )","shadow-button":"0 4px 10px rgba( 0, 0, 0, 0.16 )","shadow-button-hover":"0 8px 20px rgba( 0, 0, 0, 0.2 )","shadow-card":"0 10px 30px rgba( 0, 0, 0, 0.14 )"};case"hard":return{"shadow-field":"3px 3px 0 currentColor","shadow-field-focus":"5px 5px 0 currentColor","shadow-button":"4px 4px 0 currentColor","shadow-button-hover":"2px 2px 0 currentColor","shadow-card":"none"};default:return{"shadow-field":"none","shadow-field-focus":"none","shadow-button":"none","shadow-button-hover":"none","shadow-card":"none"}}}},{id:"field-style",label:"Fields",hint:"How an input is drawn.",kind:"choice",steps:Ut,owns:["field-style"],read:i=>i["field-style"]??"outline",apply:i=>({"field-style":i})},{id:"labels",label:"Labels",hint:"Where the question sits relative to the answer.",kind:"choice",steps:jt,owns:["label-position"],read:i=>i["label-position"]??"top",apply:i=>({"label-position":i})}]}function Wt(i){return We().find(e=>e.owns.includes(i))??null}function He(i){let e=i.activeSlug,t={...i.overrides},s=i.themes;const n=r("div",{class:"atfs-preview__frame"}),a=r("div",{class:"atfs-controls__body"}),o=r("div",{class:"atfs-quick"}),c=r("div",{class:"atfs-themes"}),l=Ae(async()=>{try{const h=await i.previewFor(e,t);n.innerHTML=h,document.dispatchEvent(new CustomEvent("atf-refresh"))}catch(h){$(n),n.append(r("p",{class:"atfb-error",text:h instanceof Error?h.message:"Preview failed."}))}},180),d=h=>t[h.token]!==void 0?t[h.token]:s.find(g=>g.slug===e)?.resolved?.[h.token]??h.default,u=()=>{$(c);for(const h of s){const p=r("button",{class:`atfs-theme${h.slug===e?" is-active":""}`,type:"button",attrs:{"aria-pressed":h.slug===e,title:h.description},children:[r("span",{class:"atfs-theme__chip",style:{background:h.resolved.surface??"#fff",borderColor:h.resolved.border??"#ccc",borderRadius:h.resolved["radius-field"]??"4px",boxShadow:h.resolved["shadow-card"]??"none"},children:[r("span",{class:"atfs-theme__accent",style:{background:h.resolved.accent??"#2271b1",borderRadius:h.resolved["radius-button"]??"4px"}})]}),r("span",{class:"atfs-theme__name",text:h.label}),h.custom?r("span",{class:"atfb-badge",text:"yours"}):null],on:{click:()=>{e=h.slug,t={},i.onTheme(e),u(),f(),y(),l(),T()}}});c.append(p)}},C=()=>{const p={...s.find(g=>g.slug===e)?.resolved??{}};for(const[g,b]of Object.entries(t))p[g]=b;return p},v=(h,p)=>{const g=h.apply(p,C());for(const[b,_]of Object.entries(g))t[b]=_,i.onOverride(b,_);f(),y(),l()},f=()=>{$(o);const h=C();for(const p of We()){const g=p.read(h);let b;if(p.kind==="colour"){const _=r("input",{class:"atfs-color",type:"color",value:ve(g),attrs:{"aria-label":p.label},on:{input:O=>v(p,O.target.value)}});b=r("div",{class:"atfs-color-row",children:[_,w(g,O=>v(p,O))]})}else b=r("div",{class:`atfs-segmented atfs-segmented--${p.kind}`,attrs:{role:"group","aria-label":p.label},children:(p.steps??[]).map(_=>r("button",{class:`atfs-segment${_.value===g?" is-on":""}`,type:"button",text:_.label,attrs:{"aria-pressed":_.value===g},on:{click:()=>v(p,_.value)}}))});o.append(r("div",{class:"atfs-dial",children:[r("div",{class:"atfs-dial__head",children:[r("span",{class:"atfs-dial__label",text:p.label}),r("span",{class:"atfs-dial__hint",text:p.hint})]}),b]}))}},y=()=>{$(a);const h=new Map;for(const g of i.tokens){const b=h.get(g.group)??[];b.push(g),h.set(g.group,b)}const p={colour:"Colour",shape:"Corners and borders",shadow:"Shadows",fields:"Field style",space:"Spacing",type:"Type",labels:"Labels",button:"Buttons",focus:"Focus ring",motion:"Motion"};for(const[g,b]of h)a.append(r("details",{class:"atfs-group",attrs:{open:g==="colour"},children:[r("summary",{text:p[g]??g}),...b.map(_=>S(_))]}))},S=h=>{const p=d(h),g=A=>{A===""?delete t[h.token]:t[h.token]=A,i.onOverride(h.token,A),l()};let b;if(h.control==="color"){const A=r("input",{class:"atfs-color",type:"color",value:ve(p),attrs:{"aria-label":`${h.label} colour`},on:{input:Y=>{const V=Y.target.value;ne.value=V,g(V)}}}),ne=w(p,Y=>{A.value=ve(Y),g(Y)});b=r("div",{class:"atfs-color-row",children:[A,ne]})}else if(h.control==="select")b=D(p,(h.options??[]).map(A=>({value:A,label:A})),g);else if(h.control==="length"){const A=parseFloat(p)||0,ne=h.unit??"px",Y=h.token.includes("radius")?60:80,V=r("input",{class:"atfs-range",type:"range",value:String(A),attrs:{min:"0",max:String(Y),step:"1","aria-label":h.label},on:{input:ae=>{const tt=`${ae.target.value}${ne}`;et.value=tt,g(tt)}}}),et=w(p,ae=>{V.value=String(parseFloat(ae)||0),g(ae)});b=r("div",{class:"atfs-length-row",children:[V,et]})}else b=w(p,g);const _=m(h.label,b),O=Wt(h.token);return O&&(_.classList.add("is-dialled"),_.append(r("span",{class:"atfs-owned",text:O.label}))),t[h.token]!==void 0&&(_.classList.add("is-overridden"),_.append(r("button",{class:"atfs-reset",type:"button",text:"Reset",attrs:{"aria-label":`Reset ${h.label} to the theme's value`},on:{click:()=>{g(""),y()}}}))),_},E=async()=>{const h=s.find(b=>b.slug===e),p=h?`${h.label} (mine)`:"My theme",g=window.prompt("Name this theme",p);if(g)try{const b={};for(const O of i.tokens){const A=d(O);A!==O.default&&(b[O.token]=A)}const _=await L.saveTheme({label:g,tokens:b});s=[...s.filter(O=>O.slug!==_.slug),_],i.onThemesChanged(s),e=_.slug,t={},i.onTheme(e),u(),y(),l(),I("Theme saved",_.label)}catch(b){I("Could not save the theme",b instanceof Error?b.message:"","error")}},N=async()=>{const h=s.find(p=>p.slug===e);if(h?.custom&&await de(`Delete “${h.label}”? Forms using it fall back to Clean.`,"Delete theme"))try{await L.deleteTheme(h.id),s=s.filter(p=>p.slug!==h.slug),i.onThemesChanged(s),e="clean",t={},i.onTheme(e),u(),y(),l()}catch(p){I("Could not delete the theme",p instanceof Error?p.message:"","error")}},H=async()=>{const h=s.find(b=>b.slug===e),p={label:h?.label??e,tokens:{...h?.tokens??{},...t}},g=JSON.stringify(p,null,"	");try{await navigator.clipboard.writeText(g),I("Theme copied","Paste it into another site to import it.")}catch{window.prompt("Copy this theme",g)}},ie=()=>{const h=window.prompt("Paste a theme");if(h)try{const p=JSON.parse(h);if(!p.tokens||typeof p.tokens!="object")throw new Error("That does not look like a theme.");for(const[g,b]of Object.entries(p.tokens))t[g]=String(b),i.onOverride(g,String(b));y(),l()}catch(p){I("Could not read that theme",p instanceof Error?p.message:"","error")}},x=k("Delete",()=>void N(),"danger"),T=()=>{const h=s.find(p=>p.slug===e);x.hidden=!h?.custom};return u(),f(),y(),l(),T(),r("div",{class:"atf-studio",children:[r("div",{class:"atf-studio__top",children:[r("div",{class:"atf-studio__picker",children:[r("h2",{class:"atf-studio__heading",text:"Theme"}),c]}),r("div",{class:"atfs__actions",children:[k("Save as a theme",()=>void E(),"primary"),k("Export",()=>void H()),k("Import",ie),x]})]}),r("div",{class:"atf-studio__panes",children:[r("aside",{class:"atf-studio__controls",children:[r("p",{class:"atfb-hint",text:"Changes apply to this form only, until you save them as a theme."}),o,r("details",{class:"atfs-advanced",children:[r("summary",{text:"Every setting"}),r("p",{class:"atfb-hint",text:"The full token list. The dials above write into it."}),a]})]}),r("main",{class:"atf-studio__preview",children:[r("h2",{class:"screen-reader-text",text:"Live preview"}),n]})]})]})}async function be(){const i=document.querySelector("[data-atfs-root]");if(!i||i.dataset.atfsMounted)return;i.dataset.atfsMounted="1";const e=i.querySelector("[data-atfs-bar]"),t=i.querySelector(".atfs__body")??i;try{const[s,n,a]=await Promise.all([L.config(),L.listThemes(),L.listForms()]);if(!a.length){$(t),t.append(r("div",{class:"atfb-empty",children:[r("h2",{text:"No forms to preview"}),r("p",{text:"Make a form first — a theme needs something to dress."})]}));return}let o=a[0],c={},l=o.theme;const d=()=>{$(t),t.append(He({themes:n,tokens:s.tokens,activeSlug:l,overrides:c,standalone:!0,onTheme:u=>{l=u},onOverride:(u,C)=>{C===""?delete c[u]:c[u]=C},previewFor:async(u,C)=>{const v=await L.getForm(o.id);v.schema.settings.theme=u,v.schema.settings.themeOverrides=C;const{html:f}=await L.preview(o.id,{schema:v.schema,theme:u});return f},onThemesChanged:u=>{n.length=0,n.push(...u)}}))};e&&($(e),e.append(r("span",{class:"atfs__label",text:"Preview against"}),D(String(o.id),a.map(u=>({value:String(u.id),label:u.title||"(untitled)"})),u=>{o=a.find(C=>String(C.id)===u)??a[0],c={},d()}))),d()}catch(s){$(t),t.append(r("p",{class:"atfb-error",text:s instanceof Error?s.message:"Could not load themes."}))}}typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>void be()):be(),document.addEventListener("os-window-content-loaded",()=>void be()));function ve(i){const e=i.trim();return/^#[0-9a-f]{6}$/i.test(e)?e:/^#[0-9a-f]{3}$/i.test(e)?`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`:"#888888"}function we(){return window.wp?.os??null}const Ye="allterrain-forms/preview",ye="allterrain-forms-preview";function Ht(i){const e=we();if(!e?.registerTitleBarButton)return()=>{};const t=()=>{try{e.registerTitleBarButton({id:Ye,label:"Preview this form",icon:"dashicons-visibility",placement:"right",order:90,match:s=>{const n=s?.id??s?.config?.id??"";return n==="allterrain-forms"||n.startsWith("allterrain-forms#")},onClick:()=>void Xe(i),owner:"allterrain-forms-builder"})}catch{}};return e.ready?e.ready(t):t(),()=>{try{e.unregisterTitleBarButton?.(Ye)}catch{}}}async function Xe(i){i.isDirty()&&await i.save();const e=i.current();e&&ze(e.id,e.title,e.previewUrl)}function ze(i,e,t){const s=we();if(!s?.windowManager?.open){window.open(t,"_blank","noopener");return}s.windowManager.open({id:`${ye}-${i}`,baseId:ye,url:t,title:`Preview: ${e}`,icon:"dashicons-visibility"})}function Yt(i,e,t){if(!we()?.windowManager?.open||!document.querySelector(`[data-window-id^="${ye}-${i}"]`))return;const a=t.includes("?")?"&":"?";ze(i,e,`${t}${a}atf_r=${Date.now()}`)}const Xt="allterrain-forms/form";function zt(){return window.wp?.os?.relations??null}function Gt(i){const e=i.closest("[data-window-id], .os-window");if(!e)return null;const t=e.getAttribute("data-window-id");if(t)return t;const s=e.id??"";return s?s.replace(/^wp-window-/,""):null}const Jt=6e3,Ge=120;function Je(i,e){const t=zt();if(_e.set(i,e),!t?.set)return;const s=a=>{if(te.get(i)!==n)return;const o=Gt(i);if(!o){Date.now()<a&&window.setTimeout(()=>s(a),Ge);return}try{t.set(o,e)}catch(l){Ke||(Ke=!0,console.error("[AllTerrain Forms] The shell refused a window identity.",l,e)),te.delete(i);return}if(!e||t.get?.(o)?.id===e.id||Date.now()>=a){te.delete(i);return}window.setTimeout(()=>s(a),Ge)},n=Symbol("atf-identity");te.set(i,n),s(Date.now()+Jt)}let Ke=!1;const te=new WeakMap,_e=new Map;function Kt(){for(const[i,e]of _e){if(!i.isConnected){_e.delete(i);continue}Je(i,e)}}if(typeof document<"u")for(const i of["os-window-content-loaded","os-window-opened"])document.addEventListener(i,()=>Kt());function Vt(i,e){return{type:Xt,id:i.id,label:i.title||"Untitled form",related:[{id:`allterrain-forms/entries-${i.id}`,label:"Entries for this form",url:`${e}admin.php?page=allterrain-forms-entries&form=${i.id}`,group:"allterrain-forms",groupLabel:"Forms",icon:"dashicons-list-view"}]}}const J="allterrain-forms/field",Qt=["openstation/file","desktop-mode/file","openstation/attachment"],Ve="allterrain-forms/logic-map-v2";function se(i,e){return i.dataset.atfbBind=e,i}const xe=[{value:"user:email",label:"Their email address",group:"About the person filling it in",tag:"{user:email}"},{value:"user:display_name",label:"Their name",group:"About the person filling it in",tag:"{user:display_name}"},{value:"user:first_name",label:"Their first name",group:"About the person filling it in"},{value:"user:last_name",label:"Their last name",group:"About the person filling it in"},{value:"user:login",label:"Their username",group:"About the person filling it in"},{value:"date:today",label:"Today’s date",group:"The date and time",tag:"{date}"},{value:"date:now",label:"The time right now",group:"The date and time",tag:"{time}"},{value:"site",label:"This site’s name",group:"About this site",tag:"{site}"},{value:"site:url",label:"This site’s address",group:"About this site",tag:"{site:url}"},{value:"site:admin_email",label:"The site administrator’s email",group:"About this site",tag:"{admin_email}"}],Zt=["About the person filling it in","The date and time","About this site"],ke=(i,e)=>q?.i18n?.[i]??e;class Qe{constructor(e){this.config=null,this.themes=[],this.forms=[],this.form=null,this.schema=null,this.selected=null,this.tab="build",this.logicMap=null,this.canvasTheme=r("style"),this.canvasThemeSignature="",this.openSections=new Map,this.logicMapOn=ht(Ve)!=="off",this.dirty=!1,this.teardowns=[],this.history=[],this.historyAt=-1,this.autosave=Ae(()=>{this.save(!0)},2500),this.renderInspector=dt(()=>{if($(this.inspector),!this.schema||(this.root.classList.toggle("atfb--build-only-panes",this.tab!=="build"),this.tab!=="build"))return;const t=this.schema.fields.find(o=>o.id===this.selected);if(!t){this.inspector.append(r("div",{class:"atfb-placeholder",children:[r("p",{text:"Select a field to change it."}),r("p",{class:"atfb-hint",text:"Drag a field from the palette, or press one to add it to the end."})]}));return}const s=this.config?.fieldTypes.find(o=>o.type===t.type),n=s?.supports??[],a=(o,c)=>{t[o]=c,this.markDirty(),this.renderCanvas()};this.inspector.append(r("h3",{class:"atfb-inspector__title",text:s?.label??t.type}),r("p",{class:"atfb-hint",text:`Reference this field as {field:${t.id}}`})),n.includes("label")&&this.inspector.append(m("Label",se(w(t.label,o=>a("label",o)),"label"))),n.includes("placeholder")&&this.inspector.append(m("Placeholder",se(w(t.placeholder,o=>a("placeholder",o)),"placeholder"))),n.includes("hint")&&this.inspector.append(m("Hint",w(t.hint,o=>a("hint",o)),"Shown under the field, and read out with it.")),n.includes("required")&&this.inspector.append(M("Required",t.required,o=>a("required",o))),n.includes("width")&&this.inspector.append(m("Width",D(t.width,[{value:"full",label:"Full width"},{value:"two-thirds",label:"Two thirds"},{value:"half",label:"Half"},{value:"third",label:"One third"},{value:"quarter",label:"One quarter"}],o=>a("width",o)))),s?.choices&&this.inspector.append(this.renderChoicesEditor(t,a)),(t.type==="total"||n.includes("formula"))&&this.inspector.append(m("Formula",w(String(t.formula??""),o=>a("formula",o)),"Reference fields with braces: {f1} * {f2} + 10. Functions: min, max, sum, avg, round, ceil, floor, abs, sqrt, pow."),m("Currency symbol",w(String(t.currency??""),o=>a("currency",o)))),this.inspector.append(this.renderValidationSection(t,n,a)),this.inspector.append(this.renderLogicSection(t,a)),n.includes("prefill")&&this.inspector.append(this.prefillControl(t,a)),n.includes("css")&&this.inspector.append(m("CSS class",w(t.cssClass,o=>a("cssClass",o))))}),this.root=e,this.bar=e.querySelector("[data-atfb-bar]")??r("div"),this.palette=e.querySelector("[data-atfb-palette]")??r("div"),this.canvas=e.querySelector("[data-atfb-canvas]")??r("div"),this.inspector=e.querySelector("[data-atfb-inspector]")??r("div")}async start(){try{const[s,n,a]=await Promise.all([L.config(),L.listThemes(),L.listForms()]);this.config=s,this.themes=n,this.forms=a}catch(s){this.fail(s);return}this.teardowns.push(at([J])),this.teardowns.push(Ht({current:()=>this.form?{id:this.form.id,title:this.form.title,previewUrl:this.form.previewUrl}:null,isDirty:()=>this.dirty,save:()=>this.save(!0)}));const e=s=>{this.dirty&&(s.preventDefault(),s.returnValue="")};window.addEventListener("beforeunload",e),this.teardowns.push(()=>window.removeEventListener("beforeunload",e));const t=s=>{!(s.metaKey||s.ctrlKey)||s.key.toLowerCase()!=="z"||s.target?.closest("input, textarea, [contenteditable]")||(s.preventDefault(),this.travel(s.shiftKey?1:-1))};this.root.addEventListener("keydown",t),this.teardowns.push(()=>this.root.removeEventListener("keydown",t)),this.renderBar(),this.renderPalette(),this.forms.length?await this.open(this.forms[0].id):this.renderFormsList()}destroy(){this.teardowns.forEach(e=>e()),this.teardowns=[]}fail(e){$(this.bar),this.bar.append(r("p",{class:"atfb-error",text:e instanceof Error?e.message:"Something went wrong loading your forms."}))}renderBar(){$(this.bar);const e=D(String(this.form?.id??""),[...this.forms.map(n=>({value:String(n.id),label:n.title||"(untitled)"}))],n=>void this.open(Number(n)));e.setAttribute("aria-label","Choose a form");const t=r("input",{class:"atfb-title",type:"text",value:this.form?.title??"",placeholder:"Untitled form",attrs:{"aria-label":"Form title"},on:{input:n=>{this.form&&(this.form.title=n.target.value,this.markDirty())}}}),s=r("div",{class:"atfb-tabs",attrs:{role:"tablist"},children:[["build","Build"],["theme","Theme"],["settings","Settings"],["notify","Notifications"],["confirm","Confirmations"]].map(([n,a])=>r("button",{class:`atfb-tab${this.tab===n?" is-active":""}`,type:"button",text:a,attrs:{role:"tab","aria-selected":this.tab===n},on:{click:()=>{this.tab=n,this.renderBar(),this.renderInspector(),this.renderCanvas()}}}))});this.bar.append(r("div",{class:"atfb-bar__left",children:[this.forms.length>1?e:null,t]}),s,r("div",{class:"atfb-bar__right",children:[this.historyButton("undo","Undo",-1),this.historyButton("redo","Redo",1),k("New",()=>void this.showTemplates(),"secondary","plus-alt2"),k("Export",()=>void this.exportForm(),"secondary","download"),k("Import",()=>void this.importForm(),"secondary","upload"),k("Preview",()=>void this.preview(),"secondary","visibility"),k("Entries",()=>this.openEntries(),"secondary","list-view"),this.logicMapButton(),this.saveButton()]}))}liveField(e){return this.schema?.fields.find(t=>t.id===e)}syncCanvas(e){const t=this.canvas.querySelector(`[data-atfb-card="${CSS.escape(e.id)}"]`);if(!t)return;const s=t.querySelector(".atf-label.atfb-editable");s&&s.textContent!==e.label&&(s.textContent=e.label);const n=t.querySelectorAll(".atf-choice__label.atfb-editable");(e.choices??[]).forEach((a,o)=>{const c=n[o];c&&c.textContent!==a.label&&(c.textContent=a.label)})}syncInspector(e){if(this.selected!==e.id)return;const t=(s,n)=>{const a=this.inspector.querySelector(`[data-atfb-bind="${CSS.escape(s)}"]`);a&&("value"in a?a.value=n:a.setAttribute("value",n))};t("label",e.label??""),t("placeholder",e.placeholder??""),(e.choices??[]).forEach((s,n)=>{t(`choice:${n}:label`,s.label??""),t(`choice:${n}:value`,s.value??"")})}rebindCanvas(){const e=document.activeElement;if(e instanceof HTMLElement&&this.canvas.contains(e)){e.addEventListener("blur",()=>this.rebindCanvas(),{once:!0});return}this.renderCanvas()}snapshot(){if(!this.schema)return;const e=JSON.stringify(this.schema);this.history[this.historyAt]!==e&&(this.history=this.history.slice(0,this.historyAt+1),this.history.push(e),this.history.length>60&&this.history.shift(),this.historyAt=this.history.length-1)}travel(e){const t=this.historyAt+e;!this.schema||t<0||t>=this.history.length||(this.historyAt=t,this.schema=JSON.parse(this.history[t]),this.schema.fields.some(s=>s.id===this.selected)||(this.selected=null),this.dirty=!0,this.autosave(),this.renderBar(),this.renderCanvas(),this.renderInspector())}historyButton(e,t,s){const n=this.historyAt+s,a=k(t,()=>this.travel(s),"secondary",e);return a.disabled=n<0||n>=this.history.length,a}exportForm(){if(!this.form||!this.schema)return;const e={plugin:"allterrain-forms",version:q?.version??"",title:this.form.title,schema:this.schema},t=new Blob([JSON.stringify(e,null,"	")],{type:"application/json"}),s=URL.createObjectURL(t),n=r("a",{href:s,attrs:{download:`${this.form.title.replace(/[^a-z0-9]+/gi,"-").toLowerCase()||"form"}.json`}});document.body.append(n),n.click(),n.remove(),window.setTimeout(()=>URL.revokeObjectURL(s),1e3)}async importForm(){const e=r("input",{type:"file",attrs:{accept:"application/json,.json"}});e.addEventListener("change",async()=>{const t=e.files?.[0];if(t)try{const s=JSON.parse(await t.text());if(!s.schema)throw new Error("That file does not contain a form.");const n=await L.createForm({title:s.title??t.name.replace(/\.json$/i,""),schema:s.schema});this.forms.unshift({id:n.id,title:n.title,status:n.status,modified:n.modified,fields:n.schema.fields.length,theme:n.schema.settings.theme,entries:0,unread:0,views:0,submissions:0,shortcode:n.shortcode}),this.form=n,this.schema=n.schema,this.selected=null,this.dirty=!1,this.history=[],this.historyAt=-1,this.snapshot(),this.renderBar(),this.renderCanvas(),this.renderInspector(),I("Form imported",n.title)}catch(s){I("Could not import that file",s instanceof Error?s.message:"","error")}}),e.click()}saveButton(){const e=k("Save",()=>void this.save(),"primary");return e.disabled=!this.dirty,e.setAttribute("data-atfb-save",""),e}markDirty(){this.dirty=!0;const e=this.bar.querySelector("[data-atfb-save]");e&&(e.disabled=!1),this.autosave()}async save(e=!1){if(!(!this.form||!this.schema))try{const t=await L.updateForm(this.form.id,{title:this.form.title,schema:this.schema});this.form=t,this.schema=t.schema,this.dirty=!1,this.rebindCanvas(),qt(t.id);const s=this.forms.find(a=>a.id===t.id);s&&(s.title=t.title);const n=this.bar.querySelector("[data-atfb-save]");n&&(n.disabled=!0),Yt(t.id,t.title,t.previewUrl),e||I("Form saved",t.title)}catch(t){I(ke("saveFailed","Could not save"),t instanceof Error?t.message:"","error")}}async open(e){if(!(this.dirty&&!await de("You have unsaved changes. Discard them?"))){try{this.form=await L.getForm(e),this.schema=this.form.schema,this.selected=null,this.dirty=!1,this.history=[],this.historyAt=-1,this.snapshot()}catch(t){this.fail(t);return}this.renderBar(),this.renderCanvas(),this.renderInspector(),this.announceIdentity()}}announceIdentity(){this.form&&Je(this.root,Vt(this.form,q?.adminUrl??""))}async showTemplates(){if(!this.config)return;const e=r("div",{class:"atfb-overlay"}),t=()=>e.remove(),s=r("div",{class:"atfb-templates",children:this.config.templates.map(n=>r("button",{class:"atfb-template",type:"button",on:{click:async()=>{t();try{const a=await L.createForm({template:n.slug});this.forms.unshift({id:a.id,title:a.title,status:a.status,modified:a.modified,fields:a.schema.fields.length,theme:a.schema.settings.theme,entries:0,unread:0,views:0,submissions:0,shortcode:a.shortcode}),this.form=a,this.schema=a.schema,this.selected=null,this.dirty=!1,this.renderBar(),this.renderCanvas(),this.renderInspector(),this.announceIdentity()}catch(a){I("Could not create the form",a instanceof Error?a.message:"","error")}}},children:[F(n.icon),r("strong",{text:n.label}),r("span",{text:n.description})]}))});e.append(r("div",{class:"atfb-modal",attrs:{role:"dialog","aria-label":"Start a new form"},children:[r("h2",{text:"Start a new form"}),s,r("div",{class:"atfb-modal__actions",children:[k("Cancel",t)]})]})),e.addEventListener("click",n=>{n.target===e&&t()}),document.addEventListener("keydown",n=>{n.key==="Escape"&&t()},{once:!0}),this.root.append(e),s.querySelector("button")?.focus()}renderFormsList(){$(this.canvas),this.canvas.append(r("div",{class:"atfb-empty",children:[r("h2",{text:"No forms yet"}),r("p",{text:"Start from a template, or build one from nothing."}),k("New form",()=>void this.showTemplates(),"primary","plus-alt2")]}))}openEntries(){const e=window.wp?.os;if(e?.openWindow){e.openWindow("allterrain-forms-entries");return}window.location.assign(`${q?.adminUrl??""}admin.php?page=allterrain-forms-entries`)}renderPalette(){if(!this.config)return;$(this.palette);const e=new Map;for(const s of this.config.fieldTypes){const n=e.get(s.group)??[];n.push(s),e.set(s.group,n)}const t=r("input",{class:"atfb-input atfb-palette__search",type:"search",placeholder:"Search fields",attrs:{"aria-label":"Search field types"},on:{input:s=>{const n=s.target.value.toLowerCase().trim();this.palette.querySelectorAll(".atfb-chip").forEach(a=>{const o=(a.textContent??"").toLowerCase();a.hidden=n!==""&&!o.includes(n)}),this.palette.querySelectorAll(".atfb-group").forEach(a=>{const o=Array.from(a.querySelectorAll(".atfb-chip")).some(c=>!c.hidden);a.hidden=!o})}}});this.palette.append(t);for(const[s,n]of Object.entries(this.config.groups)){const a=e.get(s);a?.length&&this.palette.append(r("div",{class:"atfb-group",children:[r("h3",{class:"atfb-group__title",text:n}),r("div",{class:"atfb-group__items",children:a.map(o=>this.paletteChip(o))})]}))}}paletteChip(e){const t=r("button",{class:"atfb-chip",type:"button",title:e.description,attrs:{"data-atf-type":e.type},children:[F(e.icon),r("span",{text:e.label})]});return t.addEventListener("pointerdown",s=>{const n=r("div",{class:"atfb-chip atfb-chip--ghost",children:[F(e.icon),r("span",{text:e.label})]});U().start({payload:Ce(J,t,{fieldType:e.type,isNew:!0},s,n),origin:s,onClickOnly:()=>this.addField(e.type)})}),t.addEventListener("click",s=>{U().recentlyEndedDrag()&&s.preventDefault()}),t}renderCanvas(){if($(this.canvas),!this.schema||!this.form){this.renderFormsList();return}if(this.tab!=="build"){this.canvas.append(this.renderTabCanvas());return}const e=r("div",{class:"atfb-canvas__list",attrs:{"data-atfb-list":""}});this.schema.fields.length||e.append(r("div",{class:"atfb-placeholder",text:ke("emptyCanvas","Drag a field from the left to begin.")})),this.schema.fields.forEach((s,n)=>{e.append(this.renderFieldCard(s,n))});const t=r("div",{class:"atfb-canvas__inner",children:[r("p",{class:"atfb-shortcode",text:this.form.shortcode,title:"Paste this anywhere to place the form"}),e]});this.canvas.append(t),this.registerCanvasTarget(e),this.paintLogicMap(t),this.paintCanvasTheme()}prefillControl(e,t){const s=e.prefill.startsWith("query:"),n=xe.some(v=>v.value===e.prefill),a=s?"query":n&&e.prefill||(e.prefill?"custom":""),o=r("div",{class:"atfb-prefill__detail"}),c=r("p",{class:"atfb-row__hint atfb-prefill__preview"}),l=v=>{if(o.replaceChildren(),c.replaceChildren(),v==="query"){const f=e.prefill.startsWith("query:")?e.prefill.slice(6):"";o.append(w(f,y=>{const S=y.trim();t("prefill",S?`query:${S}`:""),d(`query:${S}`)},"utm_source"),r("p",{class:"atfb-row__hint",text:"The name of the parameter in the link people arrive on."}))}v==="custom"&&o.append(w(e.prefill,f=>{t("prefill",f),d(f)},"myplugin:something"),r("p",{class:"atfb-row__hint",text:"For a source another plugin has added through atf_resolve_prefill."})),d(e.prefill)},d=v=>{if(c.replaceChildren(),!v)return;if(v.startsWith("query:")){const y=v.slice(6);y&&(c.textContent=`A visit to …/your-page/?${y}=abc opens the form with “abc” in it.`);return}const f=xe.find(y=>y.value===v)?.tag;f&&fe(this.form?.id??0).then(y=>{for(const S of y)for(const E of S.items)if(E.tag===f){const N=v.startsWith("user:");if(!E.sample){c.textContent="Empty unless the visitor is signed in.";return}c.textContent=N?`Opens with “${E.sample}” for you — empty for a visitor who is not signed in.`:`Opens with “${E.sample}”.`;return}})};l(a);const u=r("select",{class:"atfb-input atfb-select",on:{change:v=>{const f=v.target.value;t("prefill",f==="query"||f==="custom"?"":f),l(f)}}});u.append(r("option",{value:"",text:"Nothing — leave it empty",attrs:{selected:a===""}}));for(const v of Zt){const f=document.createElement("optgroup");f.label=v;for(const y of xe.filter(S=>S.group===v))f.append(r("option",{value:y.value,text:y.label,attrs:{selected:y.value===a}}));u.append(f)}const C=document.createElement("optgroup");return C.label="From the link they arrived on",C.append(r("option",{value:"query",text:"A parameter in the web address",attrs:{selected:a==="query"}})),u.append(C,r("option",{value:"custom",text:"Something else (advanced)",attrs:{selected:a==="custom"}})),m("Pre-fill this with",r("div",{class:"atfb-prefill",children:[u,o,c]}),"What the box already contains when the form opens. They can still change it.")}renderCondition(e){const t=e.some(s=>s.kind==="field"&&s.missing);return r("span",{class:`atfb-cond${t?" is-broken":""}`,attrs:{"aria-label":Pe(e)},children:[F("randomize"),...e.map(s=>this.renderConditionToken(s))]})}renderConditionToken(e){return e.kind==="field"&&!e.missing?r("button",{class:"atfb-cond__chip atfb-cond__chip--field",type:"button",text:e.text,title:"Go to this question",on:{click:n=>{n.stopPropagation(),this.selectField(e.fieldId),this.canvas.querySelector(`[data-atfb-card="${CSS.escape(e.fieldId)}"]`)?.scrollIntoView({block:"nearest",behavior:"smooth"})}}}):r("span",{class:{verb:"atfb-cond__verb",field:"atfb-cond__chip atfb-cond__chip--missing",operator:"atfb-cond__op",value:"atfb-cond__chip atfb-cond__chip--value",join:"atfb-cond__join"}[e.kind],text:e.text})}section(e,t,s,n=!1){const a=r("details",{class:"atfb-section",attrs:{open:this.openSections.get(e)??n},children:[r("summary",{text:t}),...s]});return a.addEventListener("toggle",()=>this.openSections.set(e,a.open)),a}logicMapButton(){const e=he(this.schema?.fields??[]).length>0,t=k(this.logicMapOn?"Hide logic":"Show logic",()=>{this.logicMapOn=!this.logicMapOn,ut(Ve,this.logicMapOn?"on":"off"),this.renderBar(),this.renderCanvas()},this.logicMapOn?"primary":"secondary","randomize");return t.title="Draw a line from each question to the ones it decides.",t.hidden=!e,t}paintLogicMap(e){this.logicMap?.destroy(),this.logicMap=null;const t=this.schema?.fields??[],s=he(t);if(!s.length||!this.logicMapOn)return;e.classList.add("has-logicmap");const n=new Et(e);n.setEdges(s),n.highlight(this.selected??""),this.logicMap=n,e.addEventListener("pointerover",a=>{const o=a.target.closest("[data-atfb-card]");n.highlight(o?.dataset.atfbCard??this.selected??"")}),e.addEventListener("pointerleave",()=>n.highlight(this.selected??""))}renderFieldCard(e,t){const s=this.config?.fieldTypes.find(d=>d.type===e.type),n=this.selected===e.id,a=this.schema?.fields??[],o=xt(e,a),c=St(a).get(e.id)??0,l=r("div",{class:`atfb-card${n?" is-selected":""}`,attrs:{"data-atfb-card":e.id,"data-index":t,tabindex:"0",role:"button","aria-pressed":n,"aria-label":`${e.label||s?.label||e.type}, ${t+1} of ${this.schema?.fields.length??0}`},children:[r("div",{class:"atfb-card__grip",attrs:{"aria-hidden":"true"},children:[F("menu")]}),r("div",{class:"atfb-card__body",children:[r("div",{class:"atfb-card__head",children:[F(s?.icon??"dashicons-forms"),r("span",{class:"atfb-card__type",text:s?.label??e.type}),this.requiredToggle(e),c?r("span",{class:"atfb-badge atfb-badge--controls",text:c===1?"controls 1 field":`controls ${c} fields`,title:"Other questions appear or disappear based on this answer."}):null]}),$t(e,s,{edit:d=>{const u=this.liveField(e.id);u&&(d(u),this.markDirty(),this.syncInspector(u))},restructure:d=>{const u=this.liveField(e.id);u&&(this.snapshot(),d(u),this.markDirty(),this.renderCanvas(),this.renderInspector())}}),o.length?this.renderCondition(o):null]}),r("div",{class:"atfb-card__actions",children:[this.cardAction("admin-page","Duplicate",()=>this.duplicateField(e.id)),this.cardAction("trash","Delete",()=>void this.deleteField(e.id))]})]});return l.addEventListener("click",d=>{d.target.closest(".atfb-card__actions")||U().recentlyEndedDrag()||this.selectField(e.id)}),l.addEventListener("keydown",d=>{if(d.key==="Enter"||d.key===" "){d.preventDefault(),this.selectField(e.id);return}d.altKey&&(d.key==="ArrowUp"||d.key==="ArrowDown")&&(d.preventDefault(),this.moveField(e.id,d.key==="ArrowUp"?t-1:t+1),window.requestAnimationFrame(()=>{this.canvas.querySelector(`[data-atfb-card="${CSS.escape(e.id)}"]`)?.focus()})),(d.key==="Delete"||d.key==="Backspace")&&(d.preventDefault(),this.deleteField(e.id))}),l.addEventListener("pointerdown",d=>{d.target.closest(".atfb-card__actions")||U().start({payload:Ce(J,l,{fieldId:e.id,field:e,isNew:!1},d),origin:d})}),l}requiredToggle(e){return r("button",{class:`atfb-req${e.required?" is-on":""}`,type:"button",text:e.required?"Required":"Optional",title:e.required?"This must be answered. Click to make it optional.":"Click to make this required.",attrs:{"aria-pressed":e.required?"true":"false"},on:{pointerdown:s=>s.stopPropagation(),click:s=>{s.stopPropagation(),e.required=!e.required,this.markDirty(),this.renderCanvas(),this.renderInspector()}}})}cardAction(e,t,s){return r("button",{class:"atfb-card__action",type:"button",title:t,attrs:{"aria-label":t},on:{click:n=>{n.stopPropagation(),s()}},children:[F(e)]})}registerCanvasTarget(e){const t=r("div",{class:"atfb-marker",attrs:{"aria-hidden":"true"}}),s=U().registerDropTarget({id:`atfb-canvas-${this.form?.id??0}`,element:e,accept:a=>a.type===J,onEnter:()=>e.classList.add("is-dropping"),onLeave:()=>{e.classList.remove("is-dropping"),t.remove()},onDrop:(a,o)=>{e.classList.remove("is-dropping"),t.remove();const c=a.payload.data,l=c.fieldId?this.canvas.querySelector(`[data-atfb-card="${CSS.escape(c.fieldId)}"]`):null,d=Le(e,".atfb-card",o.clientY,l??void 0);if(c.isNew&&c.fieldType){this.addField(c.fieldType,d);return}if(c.fieldId&&this.schema?.fields.some(u=>u.id===c.fieldId)){this.moveField(c.fieldId,d);return}c.field&&this.insertField({...c.field,id:""},d)}});this.teardowns.push(s);const n=a=>{const o=a.detail;if(o?.payload?.type!==J||!e.classList.contains("is-dropping"))return;const c=o.clientY??0,l=Le(e,".atfb-card",c),d=e.querySelectorAll(".atfb-card");l>=d.length?e.append(t):d[l].before(t)};document.addEventListener("os.drag.move",n),this.teardowns.push(()=>document.removeEventListener("os.drag.move",n))}addField(e,t){const s=this.config?.fieldTypes.find(a=>a.type===e);if(!s||!this.schema)return;const n={id:this.nextFieldId(),type:e,label:s.input?s.label:"",placeholder:"",hint:"",required:!1,width:"full",cssClass:"",default:"",choices:s.choices?[{label:"First choice",value:"first"},{label:"Second choice",value:"second"}]:[],logic:{enabled:!1,action:"show",match:"all",rules:[]},messages:{},prefill:"",...s.settings};this.insertField(n,t)}insertField(e,t){if(!this.schema)return;e.id||(e.id=this.nextFieldId()),this.snapshot();const s=t===void 0?this.schema.fields.length:Math.max(0,Math.min(t,this.schema.fields.length));this.schema.fields.splice(s,0,e),this.selected=e.id,this.markDirty(),this.renderCanvas(),this.renderInspector(),window.requestAnimationFrame(()=>{this.canvas.querySelector(`[data-atfb-card="${CSS.escape(e.id)}"]`)?.focus()})}moveField(e,t){if(!this.schema)return;const s=this.schema.fields.findIndex(o=>o.id===e);if(s<0)return;const n=Math.max(0,Math.min(t,this.schema.fields.length-1));if(s===n)return;this.snapshot();const[a]=this.schema.fields.splice(s,1);this.schema.fields.splice(n>s?n-1:n,0,a),this.markDirty(),this.renderCanvas()}duplicateField(e){if(!this.schema)return;const t=this.schema.fields.findIndex(n=>n.id===e);if(t<0)return;const s=JSON.parse(JSON.stringify(this.schema.fields[t]));s.id=this.nextFieldId(),this.insertField(s,t+1)}async deleteField(e){if(!this.schema)return;const t=this.schema.fields.filter(n=>n.logic?.rules?.some(a=>a.field===e)),s=t.length?`Delete this field? ${t.length} other field${t.length===1?"":"s"} use it in a condition, and those conditions will stop working.`:ke("confirmDelete","Delete this? It cannot be undone.");await de(s,"Delete field")&&(this.snapshot(),this.schema.fields=this.schema.fields.filter(n=>n.id!==e),this.selected===e&&(this.selected=null),this.markDirty(),this.renderCanvas(),this.renderInspector())}selectField(e){this.selected=e;for(const t of this.canvas.querySelectorAll("[data-atfb-card]")){const s=t.dataset.atfbCard===e;t.classList.toggle("is-selected",s),t.setAttribute("aria-pressed",s?"true":"false")}this.logicMap?.highlight(e),this.renderInspector()}nextFieldId(){const e=new Set((this.schema?.fields??[]).map(s=>s.id));let t=e.size+1;for(;e.has(`f${t}`);)t++;return`f${t}`}renderChoicesEditor(e,t){const s=e.choices??[],n=r("div",{class:"atfb-choices"});return s.forEach((a,o)=>{const c=r("div",{class:"atfb-choice-row",children:[e.type==="image_choice"?this.choiceImageWell(a,o,e):null,se(w(a.label,l=>{const d=!a.value||a.value===a.label;a.label=l,d&&(a.value=l),this.markDirty(),this.syncCanvas(e)}),`choice:${o}:label`),se(w(a.value,l=>{a.value=l,this.markDirty()},"value"),`choice:${o}:value`),e.type==="quiz"||a.points!==void 0?R(String(a.points??""),l=>{a.points=l===""?void 0:Number(l),this.markDirty()}):R(String(a.price??""),l=>{a.price=l===""?void 0:Number(l),this.markDirty()}),r("button",{class:"atfb-card__action",type:"button",attrs:{"aria-label":`Remove ${a.label}`},on:{click:()=>{s.splice(o,1),t("choices",s),this.renderInspector()}},children:[F("trash")]})]});n.append(c)}),r("div",{class:"atfb-section",children:[r("h4",{text:"Choices"}),r("p",{class:"atfb-hint",text:e.type==="quiz"?"Label, value, points.":"Label, value, and a price for calculations."}),n,k("Add choice",()=>{s.push({label:"",value:""}),t("choices",s),this.renderInspector()},"ghost","plus-alt2"),e.type==="quiz"?m("Correct answer",D(String(e.correct??""),[{value:"",label:"—"},...s.map(a=>({value:a.value,label:a.label}))],a=>t("correct",a))):null]})}choiceImageWell(e,t,s){const n=r("div",{class:`atfb-well${e.image?" has-image":""}`,attrs:{"data-choice":t,"aria-label":`Image for ${e.label||`choice ${t+1}`}`},children:[e.image?r("span",{class:"atfb-well__id",text:`#${e.image}`}):F("format-image")]}),a=U().registerDropTarget({id:`atfb-well-${s.id}-${t}`,element:n,accept:o=>Qt.includes(o.type),onEnter:()=>n.classList.add("is-dropping"),onLeave:()=>n.classList.remove("is-dropping"),onDrop:o=>{n.classList.remove("is-dropping");const c=o.payload.data,l=Number(c.attachmentId??c.id??c.file?.id??0);if(!l){I("That is not an image this field can use","","error");return}e.image=l,this.markDirty(),this.renderInspector()}});return this.teardowns.push(a),n.addEventListener("click",()=>{e.image&&(e.image=void 0,this.markDirty(),this.renderInspector())}),n}renderValidationSection(e,t,s){const n=[],a=[];t.includes("minlength")&&a.push(["minlength","Minimum characters"],["maxlength","Maximum characters"]),t.includes("min")&&a.push(["min","Minimum"],["max","Maximum"]),t.includes("mindate")&&a.push(["minDate","Earliest date"],["maxDate","Latest date"]);for(const[c,l]of a)n.push(m(l,w(String(e[c]??""),d=>s(c,d))));t.includes("pattern")&&n.push(m("Pattern",w(String(e.pattern??""),c=>s("pattern",c)),"A regular expression, without slashes.")),t.includes("unique")&&n.push(M("No two people may submit the same value",!!e.unique,c=>s("unique",c)));const o=e.messages??{};return n.push(m("Message when required",w(o.required??"",c=>{o.required=c,s("messages",o)}),"Leave empty for the default wording.")),this.section(`validation:${e.id}`,"Validation",n)}renderLogicSection(e,t){const s=e.logic,n=(this.schema?.fields??[]).filter(o=>o.id!==e.id&&o.type!=="page_break"),a=r("div",{class:"atfb-rules"});return s.rules.forEach((o,c)=>{a.append(r("div",{class:"atfb-rule",children:[D(o.field,n.map(l=>({value:l.id,label:l.label||l.id})),l=>{o.field=l,this.markDirty()}),D(o.operator,Object.entries(this.config?.operators??{}).map(([l,d])=>({value:l,label:d})),l=>{o.operator=l,this.markDirty()}),w(o.value,l=>{o.value=l,this.markDirty()}),r("button",{class:"atfb-card__action",type:"button",attrs:{"aria-label":"Remove this rule"},on:{click:()=>{s.rules.splice(c,1),t("logic",s),this.renderInspector()}},children:[F("trash")]})]}))}),this.section(`logic:${e.id}`,"Conditional logic",[M("Only show this field sometimes",s.enabled,o=>{s.enabled=o,t("logic",s),this.renderInspector()}),s.enabled?r("div",{children:[r("div",{class:"atfb-rule-head",children:[D(s.action,[{value:"show",label:"Show"},{value:"hide",label:"Hide"}],o=>{s.action=o,t("logic",s)}),r("span",{text:"this field when"}),D(s.match,[{value:"all",label:"all"},{value:"any",label:"any"}],o=>{s.match=o,t("logic",s)}),r("span",{text:"of these match:"})]}),a,k("Add rule",()=>{s.rules.push({field:n[0]?.id??"",operator:"is",value:""}),t("logic",s),this.renderInspector()},"ghost","plus-alt2")]}):null],s.enabled)}renderTabCanvas(){return this.schema?this.tab==="theme"?He({themes:this.themes,tokens:this.config?.tokens??[],activeSlug:this.schema.settings.theme,overrides:this.schema.settings.themeOverrides,onTheme:e=>{this.schema.settings.theme=e,this.markDirty()},onOverride:(e,t)=>{t===""?delete this.schema.settings.themeOverrides[e]:this.schema.settings.themeOverrides[e]=t,this.markDirty()},previewFor:(e,t)=>this.previewHtml(e,t),onThemesChanged:e=>{this.themes=e}}):this.tab==="settings"?this.renderSettingsPane():this.tab==="notify"?this.renderNotificationsPane():this.renderConfirmationsPane():r("div")}async paintCanvasTheme(){if(!this.form||!this.schema)return;const e=this.schema.settings.theme,t=JSON.stringify([e,this.schema.settings.themeOverrides]);if(t!==this.canvasThemeSignature){this.canvasThemeSignature=t;try{const s=await this.previewHtml(e,this.schema.settings.themeOverrides??{}),n=/<style>([\s\S]*?)<\/style>/.exec(s);if(!n)return;const a=n[1].replace(/#atf-[\d-]+\s+\.atf-form/g,".atfb .atfb-preview");this.canvasTheme.textContent=a,this.canvasTheme.isConnected||this.root.append(this.canvasTheme)}catch{}}}async previewHtml(e,t){if(!this.form||!this.schema)return"";const s=JSON.parse(JSON.stringify(this.schema));s.settings.theme=e,s.settings.themeOverrides=t;const{html:n}=await L.preview(this.form.id,{schema:s,theme:e});return n}renderSettingsPane(){const e=this.schema.settings,t=(s,n)=>{const a=s.split(".");let o=e;for(let c=0;c<a.length-1;c++)o=o[a[c]];o[a[a.length-1]]=n,this.markDirty()};return r("div",{class:"atfb-pane",children:[r("h2",{text:"Settings"}),r("section",{children:[r("h3",{text:"Submitting"}),m("Button label",w(e.submitLabel,s=>t("submitLabel",s))),M("Submit without reloading the page",e.ajax,s=>t("ajax",s)),m("Progress indicator",D(e.progressBar,[{value:"steps",label:"Numbered steps"},{value:"bar",label:"A bar"},{value:"none",label:"None"}],s=>t("progressBar",s)),"Only shown on forms with a page break.")]}),r("section",{children:[r("h3",{text:"Who can fill this in"}),M("Only logged-in users",e.requireLogin,s=>t("requireLogin",s)),m("Message for everyone else",w(e.loginMessage,s=>t("loginMessage",s))),m("Open from",r("input",{class:"atfb-input",type:"datetime-local",value:e.schedule.start,on:{input:s=>t("schedule.start",s.target.value)}})),m("Closes",r("input",{class:"atfb-input",type:"datetime-local",value:e.schedule.end,on:{input:s=>t("schedule.end",s.target.value)}})),m("Message when closed",w(e.schedule.message,s=>t("schedule.message",s))),m("Stop after this many submissions",R(String(e.limit.total||""),s=>t("limit.total",Number(s)||0)),"0 means no limit."),m("Submissions per logged-in user",R(String(e.limit.perUser||""),s=>t("limit.perUser",Number(s)||0)))]}),r("section",{children:[r("h3",{text:"Spam"}),r("p",{class:"atfb-hint",text:"No captcha. Nothing here asks the visitor to prove anything."}),M("Honeypot field",e.spam.honeypot,s=>t("spam.honeypot",s)),m("Reject submissions faster than (seconds)",R(String(e.spam.timeTrap),s=>t("spam.timeTrap",Number(s)||0)),"A human cannot fill in a form in under a second. A script can."),m("Submissions allowed per hour, per address",R(String(e.spam.rateLimit),s=>t("spam.rateLimit",Number(s)||0))),m("Blocked words",$e(e.spam.blocklist,s=>t("spam.blocklist",s),4),"One per line."),M("Use Akismet when it is installed",e.spam.akismet,s=>t("spam.akismet",s)),M("Ask a simple sum before sending",e.spam.challenge,s=>t("spam.challenge",s)),r("p",{class:"atfb-hint",text:"Only for a form under sustained attack — it is the one check here that asks the visitor to do something. Still kinder than an image captcha: it is answerable by a screen reader, and it hands no data to anyone."})]}),r("section",{children:[r("h3",{text:"Storage and privacy"}),M("Keep entries",e.storage.entries,s=>t("storage.entries",s)),M("Record IP addresses",e.storage.ip,s=>t("storage.ip",s)),M("Anonymise recorded IP addresses",e.storage.anonymise,s=>t("storage.anonymise",s)),m("Delete entries after (days)",R(String(e.storage.retention||""),s=>t("storage.retention",Number(s)||0)),"0 keeps them forever. Anything else deletes automatically, every day.")]}),r("section",{children:[r("h3",{text:"Save and continue later"}),M("Let people save a half-finished form",e.resume.enabled,s=>t("resume.enabled",s)),m("Keep a saved form for (days)",R(String(e.resume.days),s=>t("resume.days",Math.max(1,Number(s)||30)))),r("p",{class:"atfb-hint",text:"The link this creates is the only key to those answers — anyone holding it can read them. For genuinely sensitive questions, require login instead."})]})]})}taggableInput(e,t,s=""){return Be(w(e,t,s),{formId:this.form.id})}taggableArea(e,t,s=6){return Be($e(e,t,s),{formId:this.form.id})}recipientControl(e){const t=this.schema.fields.filter(l=>l.type==="email"),s=l=>{if(l.trim()==="{admin_email}")return"admin";const d=l.trim().match(/^\{field:([a-z0-9_-]+)\}$/i);return d&&t.some(u=>u.id===d[1])?`field:${d[1]}`:/\{/.test(l)?"custom":"address"},n=[{value:"admin",label:"Whoever runs this site"},...t.map(l=>({value:`field:${l.id}`,label:`The person who filled it in — ${l.label||"their email answer"}`})),{value:"address",label:"A specific email address"},{value:"custom",label:"Something else (advanced)"}],a=s(e.to),o=r("div",{class:"atfb-recipient__detail"}),c=l=>{if(o.replaceChildren(),l==="address"){o.append(w(/\{/.test(e.to)?"":e.to,d=>{e.to=d,this.markDirty()},"name@example.com"));return}l==="custom"&&o.append(this.taggableInput(e.to,d=>{e.to=d,this.markDirty()},"{admin_email}, sales@example.com"),r("p",{class:"atfb-row__hint",text:"Separate several addresses with commas."}))};return c(a),m("Send it to",r("div",{class:"atfb-recipient",children:[D(a,n,l=>{l==="admin"?e.to="{admin_email}":l.startsWith("field:")?e.to=`{${l}}`:l==="address"&&(e.to=/\{/.test(e.to)?"":e.to),this.markDirty(),c(l)}),o]}),t.length?void 0:"Add an Email question on the Build tab to reply straight back to the visitor.")}renderNotificationsPane(){const e=this.schema.notifications,t=r("div",{class:"atfb-list"});return e.length||t.append(r("p",{class:"atfb-hint",text:"With none set up, one email goes to the site administrator with every answer in it."})),e.forEach((s,n)=>{t.append(this.section(`notification:${s.id}`,s.name||`Notification ${n+1}`,[m("Name",w(s.name,a=>{s.name=a,this.markDirty()})),this.recipientControl(s),m("Reply to",this.taggableInput(s.replyTo,a=>{s.replyTo=a,this.markDirty()},"Leave empty to reply to you"),"Set this to the visitor’s email address and hitting Reply answers them directly."),m("Subject",this.taggableInput(s.subject,a=>{s.subject=a,this.markDirty()})),m("Message",this.taggableArea(s.message,a=>{s.message=a,this.markDirty()},8)),M("Attach uploaded files",s.attachFiles,a=>{s.attachFiles=a,this.markDirty()}),k("Delete this notification",()=>{e.splice(n,1),this.markDirty(),this.renderCanvas()},"danger")]))}),r("div",{class:"atfb-pane",children:[r("h2",{text:"Notifications"}),t,k("Add a notification",()=>{e.push({id:`n${e.length+1}`,enabled:!0,name:"Notification",to:"{admin_email}",cc:"",bcc:"",replyTo:"",fromName:"",fromEmail:"",subject:"New submission",message:"{all_fields}",attachFiles:!1,logic:{enabled:!1,action:"show",match:"all",rules:[]}}),this.markDirty(),this.renderCanvas()},"primary","plus-alt2")]})}confirmationDetail(e){if(e.type==="message")return m("Message",this.taggableArea(e.message,a=>{e.message=a,this.markDirty()},5),"Insert an answer to greet them by name, or show back what they sent.");const t=m("Extra query parameters",this.taggableInput(e.query,a=>{e.query=a,this.markDirty()},"ref={entry:id}&name={field:f1}"),"Added to the address, so the page they land on can read them. Leave empty for none.");if(e.type==="redirect")return r("div",{children:[m("Web address",this.taggableInput(e.url,a=>{e.url=a,this.markDirty()},"https://example.com/thank-you"),"A full address, starting with https://."),t]});const s=r("div",{class:"atfb-pagepicker"}),n=a=>{s.replaceChildren(D(String(e.pageId||0),a,o=>{e.pageId=Number(o)||0,this.markDirty()}))};return n([{value:"0",label:"Loading pages…"}]),L.pages().then(a=>{n([{value:"0",label:"Choose a page…"},...a.map(o=>({value:String(o.id),label:o.title}))])}).catch(()=>{n([{value:"0",label:"Could not load the pages"}])}),m("Page",s,"They are sent to this page after submitting. Its own content is shown, not the form’s message.")}renderConfirmationsPane(){const e=this.schema.confirmations,t=r("div",{class:"atfb-list"});return e.length||t.append(r("p",{class:"atfb-hint",text:"With none set up, the form says thank you and stops."})),e.forEach((s,n)=>{const a=r("div",{class:"atfb-confirm__detail"}),o=()=>{a.replaceChildren(this.confirmationDetail(s))};o(),t.append(this.section(`confirmation:${s.id}`,s.name||`Confirmation ${n+1}`,[m("Name",w(s.name,c=>{s.name=c,this.markDirty()})),m("What happens",D(s.type,[{value:"message",label:"Show a message"},{value:"redirect",label:"Send them to a URL"},{value:"page",label:"Send them to a page"}],c=>{s.type=c,this.markDirty(),o()})),a,k("Delete this confirmation",()=>{e.splice(n,1),this.markDirty(),this.renderCanvas()},"danger")]))}),r("div",{class:"atfb-pane",children:[r("h2",{text:"Confirmations"}),r("p",{class:"atfb-hint",text:"The first one whose conditions match is the one they see."}),t,k("Add a confirmation",()=>{e.push({id:`c${e.length+1}`,enabled:!0,name:"Confirmation",type:"message",message:"Thank you. Your submission has been received.",url:"",pageId:0,query:"",logic:{enabled:!1,action:"show",match:"all",rules:[]}}),this.markDirty(),this.renderCanvas()},"primary","plus-alt2")]})}async preview(){await Xe({current:()=>this.form?{id:this.form.id,title:this.form.title,previewUrl:this.form.previewUrl}:null,isDirty:()=>this.dirty,save:()=>this.save(!0)})}}let K=null,Se=null;function Ee(){if(Se?.isConnected)return;K&&(K.destroy(),K=null,Se=null);const i=document.querySelector("[data-atfb-root]:not([data-atfb-mounted])");i&&(i.dataset.atfbMounted="1",Se=i,ct().then(()=>{i.isConnected&&(K=new Qe(i),K.start())}))}function Ze(){Ee(),bt()}return vt(),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Ze):Ze(),document.addEventListener("os-window-content-loaded",Ee),Q.Builder=Qe,Q.mountBuilder=Ee,Object.defineProperty(Q,Symbol.toStringTag,{value:"Module"}),Q}({});
diff --git a/src/builder.ts b/src/builder.ts
index 0050077..396af15 100644
--- a/src/builder.ts
+++ b/src/builder.ts
@@ -42,6 +42,7 @@ import {
 } from './ui';
 import { handOffToWindow, watchHandoffButton } from './handoff';
 import { LogicMap, controlCounts, logicEdges, logicTokens, tokensToText } from './logic-map';
+import { renderFieldPreview } from './field-preview';
 import type { LogicToken } from './logic-map';
 import { forgetMergeTags, mergeTags, taggable } from './merge-tags';
 import { mountThemeControls } from './theme-studio';
@@ -58,6 +59,28 @@ import { formIdentity, setIdentity } from './relations';
  */
 const LOGIC_MAP_SETTING = 'allterrain-forms/logic-map-v2';
 
+/**
+ * Marks an inspector control as the twin of something on the canvas.
+ *
+ * The canvas and the inspector edit the same values, so they have to agree while
+ * you are typing — rewriting a label on the card and watching the Label box keep
+ * the old text reads as one of them being stale, with no way to tell which.
+ *
+ * The tag is what lets a canvas edit write through to its counterpart without
+ * rebuilding the whole pane on every keystroke. Rebuilding would also work, and
+ * is what a structural change does — but it recreates every shell component in
+ * the inspector, sixty times a second, to change one string.
+ *
+ * @param control The inspector control.
+ * @param key     What it edits: `label`, `placeholder`, `choice:<n>:label`, …
+ * @return The same control.
+ */
+function bind< T extends HTMLElement >( control: T, key: string ): T {
+	control.dataset.atfbBind = key;
+
+	return control;
+}
+
 /**
  * The prefill sources, in the order they are offered.
  *
@@ -117,6 +140,25 @@ export class Builder {
 	/** The conditional-logic overlay, when the canvas has one. */
 	private logicMap: LogicMap | null = null;
 
+	/** The form theme's custom properties, applied to the canvas previews. */
+	private readonly canvasTheme = el( 'style' );
+
+	/** Which theme the canvas is currently painted with, so it repaints once. */
+	private canvasThemeSignature = '';
+
+	/**
+	 * Which disclosure panels are open, by key.
+	 *
+	 * A `<details>` keeps its open state in the element, and the inspector and the
+	 * canvas rebuild their elements on every change — so without this, opening
+	 * Conditional logic and then editing anything inside it folds the panel up
+	 * around the control you are still using.
+	 *
+	 * Keyed rather than positional so it survives a field being reordered,
+	 * renamed or deleted: the key names the *thing*, not the row it was in.
+	 */
+	private openSections = new Map< string, boolean >();
+
 	/**
 	 * Whether to draw the logic connections.
 	 *
@@ -352,6 +394,127 @@ export class Builder {
 		);
 	}
 
+	/**
+	 * The field with this id in the *current* schema.
+	 *
+	 * Returns undefined when it has gone — deleted in another window, or dropped
+	 * by the server's normalisation — which is a write that should simply not
+	 * happen rather than one that should throw.
+	 *
+	 * @param fieldId The field's id.
+	 * @return The live field, if it is still there.
+	 */
+	private liveField( fieldId: string ): Field | undefined {
+		return this.schema?.fields.find( ( candidate ) => candidate.id === fieldId );
+	}
+
+	/**
+	 * Writes a field's current values into the inspector's matching controls.
+	 *
+	 * Only when the inspector is actually showing that field — editing a card that
+	 * is not selected must not rewrite the pane describing a different one.
+	 *
+	 * Deliberately one-directional and value-only: the inspector's own handlers
+	 * already write to the schema, and firing them from here would put the two
+	 * panes in a loop, each telling the other about a change it had just made.
+	 *
+	 * @param field The field that was edited on the canvas.
+	 */
+	/**
+	 * Writes a field's current values into its card on the canvas.
+	 *
+	 * The mirror image of `syncInspector()`, for the same reason: the two panes
+	 * edit one value and have to agree while it is being typed. The inspector's
+	 * `update()` already repaints the canvas wholesale, but the choices editor
+	 * mutates in place and only marks the form dirty — which was invisible until
+	 * the canvas started drawing the options.
+	 *
+	 * Writes `textContent` rather than re-rendering, so the caret in the
+	 * inspector is untouched.
+	 *
+	 * @param field The field that was edited in the inspector.
+	 */
+	private syncCanvas( field: Field ): void {
+		const card = this.canvas.querySelector< HTMLElement >(
+			`[data-atfb-card="${ CSS.escape( field.id ) }"]`
+		);
+
+		if ( ! card ) {
+			return;
+		}
+
+		const label = card.querySelector< HTMLElement >( '.atf-label.atfb-editable' );
+
+		if ( label && label.textContent !== field.label ) {
+			label.textContent = field.label;
+		}
+
+		const options = card.querySelectorAll< HTMLElement >( '.atf-choice__label.atfb-editable' );
+
+		( field.choices ?? [] ).forEach( ( choice, index ) => {
+			const option = options[ index ];
+
+			if ( option && option.textContent !== choice.label ) {
+				option.textContent = choice.label;
+			}
+		} );
+	}
+
+	private syncInspector( field: Field ): void {
+		if ( this.selected !== field.id ) {
+			return;
+		}
+
+		const write = ( key: string, value: string ) => {
+			const control = this.inspector.querySelector< HTMLElement & { value?: string } >(
+				`[data-atfb-bind="${ CSS.escape( key ) }"]`
+			);
+
+			if ( ! control ) {
+				return;
+			}
+
+			// `value` is a property on a native input and on the shell's field
+			// components alike; the attribute is the fallback for anything that
+			// only reflects it.
+			if ( 'value' in control ) {
+				control.value = value;
+			} else {
+				control.setAttribute( 'value', value );
+			}
+		};
+
+		write( 'label', field.label ?? '' );
+		write( 'placeholder', field.placeholder ?? '' );
+
+		( field.choices ?? [] ).forEach( ( choice, index ) => {
+			write( `choice:${ index }:label`, choice.label ?? '' );
+			write( `choice:${ index }:value`, choice.value ?? '' );
+		} );
+	}
+
+	/**
+	 * Rebuilds the canvas so its cards point at the current schema objects.
+	 *
+	 * Deferred while the canvas holds focus. An autosave fires 2.5 seconds after
+	 * the last keystroke, which is exactly when somebody has paused mid-sentence
+	 * with the caret still in a label — and rebuilding then would take the caret
+	 * away for no reason they could see. Waiting for the blur costs nothing: the
+	 * card on screen already shows what they typed, and the rebind only has to
+	 * happen before the *next* edit.
+	 */
+	private rebindCanvas(): void {
+		const focused = document.activeElement;
+
+		if ( focused instanceof HTMLElement && this.canvas.contains( focused ) ) {
+			focused.addEventListener( 'blur', () => this.rebindCanvas(), { once: true } );
+
+			return;
+		}
+
+		this.renderCanvas();
+	}
+
 	/**
 	 * Takes a history snapshot.
 	 *
@@ -578,10 +741,19 @@ export class Builder {
 			// The server's normalisation is authoritative — it may have issued
 			// ids, dropped an unusable field or clamped a setting — so its copy
 			// replaces the local one rather than being merged into it.
+			//
+			// Replacing it orphans every card on the canvas: each one closes over
+			// the field object it was rendered from, and those objects are now the
+			// *previous* schema's. Typing into a label after an autosave would
+			// update an object nothing serialises, and the edit would vanish at the
+			// next save with no error anywhere. So the canvas is rebuilt to rebind
+			// — but not out from under somebody who is still typing in it.
 			this.form = saved;
 			this.schema = saved.schema;
 			this.dirty = false;
 
+			this.rebindCanvas();
+
 			// The merge-tag picker lists this form's questions by label, and the
 			// server builds that list from the *saved* schema. Without this, a
 			// question added or renamed a moment ago is missing from the picker for
@@ -952,6 +1124,10 @@ export class Builder {
 
 		this.registerCanvasTarget( list );
 		this.paintLogicMap( inner );
+
+		// Repaints only when the theme or its overrides actually changed, so the
+		// canvas does not ask the server for a render on every keystroke.
+		void this.paintCanvasTheme();
 	}
 
 	/**
@@ -1207,6 +1383,44 @@ export class Builder {
 		return el( 'span', { class: classes[ token.kind ], text: token.text } );
 	}
 
+	/**
+	 * A disclosure panel that remembers whether it was open.
+	 *
+	 * `openByDefault` decides only what happens the *first* time a key is seen —
+	 * a field that already has a condition opens showing it, because arriving at
+	 * a field and being told nothing about a rule that governs it is worse than a
+	 * little extra height. After that the person's own choice wins.
+	 *
+	 * What this deliberately does not do is derive `open` from the data inside
+	 * it. Conditional logic used to: `open: logic.enabled`, so unticking "Only
+	 * show this field sometimes" collapsed the panel around the checkbox that had
+	 * just been clicked. Whether a panel is open is a question about the
+	 * *person's attention*; whether a feature is on is a question about the
+	 * *form*. Binding one to the other means neither can be set independently.
+	 *
+	 * @param key           Stable identity for this panel.
+	 * @param summary       The panel's heading.
+	 * @param children      What it contains.
+	 * @param openByDefault Whether to open it the first time it is rendered.
+	 * @return The panel.
+	 */
+	private section(
+		key: string,
+		summary: string,
+		children: Array< Node | string | null | undefined | false >,
+		openByDefault = false
+	): HTMLElement {
+		const details = el( 'details', {
+			class: 'atfb-section',
+			attrs: { open: this.openSections.get( key ) ?? openByDefault },
+			children: [ el( 'summary', { text: summary } ), ...children ],
+		} );
+
+		details.addEventListener( 'toggle', () => this.openSections.set( key, details.open ) );
+
+		return details;
+	}
+
 	/**
 	 * The toolbar's toggle for the logic overlay.
 	 *
@@ -1320,8 +1534,8 @@ export class Builder {
 							class: 'atfb-card__head',
 							children: [
 								icon( type?.icon ?? 'dashicons-forms' ),
-								el( 'strong', { text: field.label || i18n( 'untitledField', 'Untitled field' ) } ),
-								field.required ? el( 'span', { class: 'atfb-badge', text: 'required' } ) : null,
+								el( 'span', { class: 'atfb-card__type', text: type?.label ?? field.type } ),
+								this.requiredToggle( field ),
 								controls
 									? el( 'span', {
 											class: 'atfb-badge atfb-badge--controls',
@@ -1331,7 +1545,38 @@ export class Builder {
 									: null,
 							],
 						} ),
-						el( 'span', { class: 'atfb-card__type', text: type?.label ?? field.type } ),
+						// The field itself, drawn with the real front-end classes and the
+						// form's own theme, with its text editable where it sits.
+						renderFieldPreview( field, type, {
+							// The live field is looked up by id on every write. A save
+							// replaces `this.schema` with the server's normalised copy,
+							// so the object this card was rendered from stops being the
+							// one that gets serialised — see `PreviewHandlers`.
+							edit: ( apply ) => {
+								const live = this.liveField( field.id );
+
+								if ( ! live ) {
+									return;
+								}
+
+								apply( live );
+								this.markDirty();
+								this.syncInspector( live );
+							},
+							restructure: ( apply ) => {
+								const live = this.liveField( field.id );
+
+								if ( ! live ) {
+									return;
+								}
+
+								this.snapshot();
+								apply( live );
+								this.markDirty();
+								this.renderCanvas();
+								this.renderInspector();
+							},
+						} ),
 						condition.length ? this.renderCondition( condition ) : null,
 					],
 				} ),
@@ -1401,6 +1646,38 @@ export class Builder {
 		return card;
 	}
 
+	/**
+	 * The required flag, as a toggle on the card rather than a badge.
+	 *
+	 * It was already displayed here as a read-only badge, and the switch that set
+	 * it was in the inspector — so the canvas told you a field was required and
+	 * made you go somewhere else to change it. Marking a question required is a
+	 * decision you make while writing it, not afterwards.
+	 */
+	private requiredToggle( field: Field ): HTMLElement {
+		const toggle = el( 'button', {
+			class: `atfb-req${ field.required ? ' is-on' : '' }`,
+			type: 'button',
+			text: field.required ? 'Required' : 'Optional',
+			title: field.required ? 'This must be answered. Click to make it optional.' : 'Click to make this required.',
+			attrs: { 'aria-pressed': field.required ? 'true' : 'false' },
+			on: {
+				// The card is draggable and clicking it selects the field; neither
+				// should happen when the target was this switch.
+				pointerdown: ( event: Event ) => event.stopPropagation(),
+				click: ( event: Event ) => {
+					event.stopPropagation();
+					field.required = ! field.required;
+					this.markDirty();
+					this.renderCanvas();
+					this.renderInspector();
+				},
+			},
+		} );
+
+		return toggle;
+	}
+
 	/** A small icon button on a field card. */
 	private cardAction( iconSlug: string, label: string, onClick: () => void ): HTMLElement {
 		return el( 'button', {
@@ -1651,7 +1928,26 @@ export class Builder {
 	/** Selects a field and shows it in the inspector. */
 	private selectField( fieldId: string ): void {
 		this.selected = fieldId;
-		this.renderCanvas();
+
+		// Selection repaints the *selected state*, not the canvas.
+		//
+		// It used to call `renderCanvas()`, which rebuilds every card — and since
+		// the card now contains the field's own editable label and options, that
+		// destroyed the element the click had just put the caret in. Clicking into
+		// a question to rewrite it therefore focused it and immediately lost it,
+		// which read as the field being un-typeable.
+		//
+		// Nothing about the canvas's *structure* changes when the selection moves,
+		// so nothing needs rebuilding: two class toggles say the same thing, keep
+		// the caret, and are faster besides.
+		for ( const card of this.canvas.querySelectorAll< HTMLElement >( '[data-atfb-card]' ) ) {
+			const isSelected = card.dataset.atfbCard === fieldId;
+
+			card.classList.toggle( 'is-selected', isSelected );
+			card.setAttribute( 'aria-pressed', isSelected ? 'true' : 'false' );
+		}
+
+		this.logicMap?.highlight( fieldId );
 		this.renderInspector();
 	}
 
@@ -1724,7 +2020,7 @@ export class Builder {
 			this.inspector.append(
 				row(
 					'Label',
-					textInput( field.label, ( value ) => update( 'label', value ) )
+					bind( textInput( field.label, ( value ) => update( 'label', value ) ), 'label' )
 				)
 			);
 		}
@@ -1733,7 +2029,7 @@ export class Builder {
 			this.inspector.append(
 				row(
 					'Placeholder',
-					textInput( field.placeholder, ( value ) => update( 'placeholder', value ) )
+					bind( textInput( field.placeholder, ( value ) => update( 'placeholder', value ) ), 'placeholder' )
 				)
 			);
 		}
@@ -1816,26 +2112,35 @@ export class Builder {
 						// pictures. Everywhere else it would be a column of
 						// empty boxes for a setting that does nothing.
 						field.type === 'image_choice' ? this.choiceImageWell( choice, index, field ) : null,
-						textInput( choice.label, ( value ) => {
+						bind( textInput( choice.label, ( value ) => {
+							// Read *before* the assignment. This compared
+							// `choice.value` with `choices[ index ].value` — the
+							// same object — so it was always true and the value
+							// followed the label unconditionally, which is the
+							// one thing the comment says it must not do: an
+							// entry stores the value, and rewriting it orphans
+							// every submission already recorded under it.
+							const mirroring = ! choice.value || choice.value === choice.label;
+
 							choice.label = value;
 
-							// A choice whose value was only ever a mirror of its
-							// label keeps mirroring it. Once somebody sets a
-							// value by hand it stops, because an entry stores
-							// the value and rewriting it would orphan history.
-							if ( ! choice.value || choice.value === choices[ index ].value ) {
+							if ( mirroring ) {
 								choice.value = value;
 							}
 
 							this.markDirty();
-						} ),
-						textInput(
-							choice.value,
-							( value ) => {
-								choice.value = value;
-								this.markDirty();
-							},
-							'value'
+							this.syncCanvas( field );
+						} ), `choice:${ index }:label` ),
+						bind(
+							textInput(
+								choice.value,
+								( value ) => {
+									choice.value = value;
+									this.markDirty();
+								},
+								'value'
+							),
+							`choice:${ index }:value`
 						),
 						field.type === 'quiz' || choice.points !== undefined
 							? numberInput( String( choice.points ?? '' ), ( value ) => {
@@ -2037,10 +2342,7 @@ export class Builder {
 			)
 		);
 
-		return el( 'details', {
-			class: 'atfb-section',
-			children: [ el( 'summary', { text: 'Validation' } ), ...rows ],
-		} );
+		return this.section( `validation:${ field.id }`, 'Validation', rows );
 	}
 
 	/** The conditional-logic editor. */
@@ -2098,11 +2400,10 @@ export class Builder {
 			);
 		} );
 
-		return el( 'details', {
-			class: 'atfb-section',
-			attrs: { open: logic.enabled },
-			children: [
-				el( 'summary', { text: 'Conditional logic' } ),
+		return this.section(
+			`logic:${ field.id }`,
+			'Conditional logic',
+			[
 				checkbox( 'Only show this field sometimes', logic.enabled, ( value ) => {
 					logic.enabled = value;
 					update( 'logic', logic );
@@ -2159,7 +2460,11 @@ export class Builder {
 					  } )
 					: null,
 			],
-		} );
+			// A field that already has a condition opens showing it: being told a
+			// rule governs this field and not what it says is the problem the
+			// whole logic display exists to solve.
+			logic.enabled
+		);
 	}
 
 	/* ------------------------------------------------------------ Tab panes */
@@ -2207,6 +2512,63 @@ export class Builder {
 		return this.renderConfirmationsPane();
 	}
 
+	/**
+	 * Puts the form's own theme tokens onto the canvas.
+	 *
+	 * The previews on the canvas use the real front-end classes, so they are
+	 * already styled by `form.css` — but `form.css` reads everything from custom
+	 * properties, and without them it falls back to the built-in defaults. The
+	 * result would be a canvas that looks like Clean whatever theme the form is
+	 * set to, which is the one thing a WYSIWYG canvas must not do.
+	 *
+	 * The values come from the server's own renderer rather than being resolved
+	 * again here. A form's theme is a base theme plus per-form overrides plus
+	 * whatever `atf_theme_tokens` filters did to it, and a second resolver in
+	 * TypeScript would be a second answer to "what colour is this" — the same
+	 * twin-engine problem the logic and calculation code goes to some length to
+	 * avoid. One render is asked for, its `<style>` block is lifted, and its
+	 * selector is repointed at the canvas.
+	 *
+	 * Failure is silent on purpose: no tokens means the previews render in the
+	 * default theme, which is a worse-looking canvas and a working builder.
+	 */
+	private async paintCanvasTheme(): Promise< void > {
+		if ( ! this.form || ! this.schema ) {
+			return;
+		}
+
+		const theme = this.schema.settings.theme;
+		const signature = JSON.stringify( [ theme, this.schema.settings.themeOverrides ] );
+
+		if ( signature === this.canvasThemeSignature ) {
+			return;
+		}
+
+		this.canvasThemeSignature = signature;
+
+		try {
+			const html = await this.previewHtml( theme, this.schema.settings.themeOverrides ?? {} );
+			const block = /<style>([\s\S]*?)<\/style>/.exec( html );
+
+			if ( ! block ) {
+				return;
+			}
+
+			// The server scopes the block to the instance it rendered
+			// (`#atf-12-1 .atf-form`). The canvas has many previews and no
+			// instance, so the scope becomes the class they all carry.
+			const css = block[ 1 ].replace( /#atf-[\d-]+\s+\.atf-form/g, '.atfb .atfb-preview' );
+
+			this.canvasTheme.textContent = css;
+
+			if ( ! this.canvasTheme.isConnected ) {
+				this.root.append( this.canvasTheme );
+			}
+		} catch {
+			// See above: the canvas simply keeps the default look.
+		}
+	}
+
 	/** Renders the current schema to HTML for a preview. */
 	private async previewHtml( theme: string, overrides: Record< string, string > ): Promise< string > {
 		if ( ! this.form || ! this.schema ) {
@@ -2550,10 +2912,10 @@ export class Builder {
 
 		notifications.forEach( ( notification, index ) => {
 			list.append(
-				el( 'details', {
-					class: 'atfb-section',
-					children: [
-						el( 'summary', { text: notification.name || `Notification ${ index + 1 }` } ),
+				this.section(
+					`notification:${ notification.id }`,
+					notification.name || `Notification ${ index + 1 }`,
+					[
 						row(
 							'Name',
 							textInput( notification.name, ( value ) => {
@@ -2605,8 +2967,8 @@ export class Builder {
 							},
 							'danger'
 						),
-					],
-				} )
+					]
+				)
 			);
 		} );
 
@@ -2779,10 +3141,10 @@ export class Builder {
 			paintDetail();
 
 			list.append(
-				el( 'details', {
-					class: 'atfb-section',
-					children: [
-						el( 'summary', { text: confirmation.name || `Confirmation ${ index + 1 }` } ),
+				this.section(
+					`confirmation:${ confirmation.id }`,
+					confirmation.name || `Confirmation ${ index + 1 }`,
+					[
 						row(
 							'Name',
 							textInput( confirmation.name, ( value ) => {
@@ -2816,8 +3178,8 @@ export class Builder {
 							},
 							'danger'
 						),
-					],
-				} )
+					]
+				)
 			);
 		} );
 
diff --git a/src/field-preview.ts b/src/field-preview.ts
new file mode 100644
index 0000000..0ca4d33
--- /dev/null
+++ b/src/field-preview.ts
@@ -0,0 +1,470 @@
+/**
+ * The field, as it will look, edited where it sits.
+ *
+ * The builder's canvas used to be a list of *descriptions* of fields — an icon,
+ * the label as static text, the type name underneath — and everything you could
+ * actually change lived in a pane on the right. So the two things you do most,
+ * writing the question and writing what goes in the box, happened at arm's
+ * length from the thing they belong to, and the canvas never answered the one
+ * question you look at a form builder to answer: **what will this form look
+ * like?**
+ *
+ * Now the card renders the control. Click the question to rewrite it, click the
+ * box to set its placeholder, click an option to rename it. Logic, validation,
+ * prefill and the rest stay in the inspector, because those are properties of a
+ * field rather than parts of it.
+ *
+ * # Why this is not a second renderer
+ *
+ * A form builder that draws its own approximation of a control is a builder that
+ * drifts from what it ships. This avoids that in two ways, and both matter.
+ *
+ * **The stylesheet is the real one.** `builder.css` is registered with
+ * `form.css` as a dependency, so every class the front end uses — `.atf-input`,
+ * `.atf-choice__input`, `.atf-label` — is already in the document. Emitting those
+ * class names inside an `.atf-form` means the theme's own radius, borders,
+ * spacing, label position and colours apply here exactly as they do on the page.
+ * Nothing about the look is reimplemented; it is the same CSS.
+ *
+ * **The shapes are a small closed set.** Thirty-seven field types share about a
+ * dozen visual shapes — a text box, a taller text box, a dropdown, a list of
+ * options, a switch. This maps a type to a shape rather than to markup, and
+ * `field-preview.test.ts` asserts that *every registered type* has one, so a type
+ * added later cannot silently render as an empty card.
+ *
+ * What this deliberately does not attempt is pixel fidelity for the elaborate
+ * types — a Likert matrix, a signature pad. Those render as a labelled
+ * placeholder saying what they are. Claiming to be a faithful preview and then
+ * being subtly wrong is worse than being visibly a summary.
+ */
+
+import { el } from './ui';
+
+import type { Field, FieldType } from './types';
+
+/** The visual families a field can be drawn as. */
+export type PreviewShape =
+	| 'text'
+	| 'textarea'
+	| 'select'
+	| 'options'
+	| 'toggle'
+	| 'file'
+	| 'range'
+	| 'composite'
+	| 'static'
+	| 'summary';
+
+/**
+ * Which shape a field type is drawn as.
+ *
+ * Keyed by type rather than derived from `supports`, because two types can
+ * support the same settings and still look nothing alike — `select` and `radio`
+ * both have choices, and one is a dropdown.
+ */
+const SHAPES: Record< string, PreviewShape > = {
+	text: 'text',
+	email: 'text',
+	url: 'text',
+	tel: 'text',
+	number: 'text',
+	password: 'text',
+	date: 'text',
+	time: 'text',
+	datetime: 'text',
+	date_range: 'composite',
+	textarea: 'textarea',
+	select: 'select',
+	country: 'select',
+	multiselect: 'options',
+	radio: 'options',
+	checkboxes: 'options',
+	image_choice: 'options',
+	quiz: 'options',
+	switch: 'toggle',
+	consent: 'toggle',
+	file: 'file',
+	range: 'range',
+	rating: 'summary',
+	scale: 'summary',
+	likert: 'summary',
+	signature: 'summary',
+	repeater: 'summary',
+	color: 'text',
+	name: 'composite',
+	address: 'composite',
+	total: 'text',
+	hidden: 'static',
+	heading: 'static',
+	html: 'static',
+	divider: 'static',
+	spacer: 'static',
+	page_break: 'static',
+};
+
+/** The shape a type is drawn as, defaulting to a plain box. */
+export function shapeFor( type: string ): PreviewShape {
+	return SHAPES[ type ] ?? 'text';
+}
+
+/** Whether a field's control takes a placeholder worth editing inline. */
+export function hasPlaceholder( type: string ): boolean {
+	return [ 'text', 'textarea', 'select' ].includes( shapeFor( type ) );
+}
+
+/**
+ * How the preview writes a change back.
+ *
+ * Both hand the caller the **live** field rather than letting it keep the one it
+ * was rendered from, and that indirection is load-bearing. A save replaces
+ * `this.schema` wholesale with the server's normalised copy, so a card that
+ * closed over its own `field` object is writing to a detached one the moment an
+ * autosave lands — and an autosave lands 2.5 seconds after the last keystroke,
+ * which is exactly when somebody pauses mid-sentence and then carries on typing.
+ * The text went into an object nothing serialises and vanished at the next
+ * render, with no error anywhere.
+ *
+ * Resolving by id at write time makes the number of times the schema has been
+ * replaced irrelevant.
+ */
+export interface PreviewHandlers {
+	/** A value changed but nothing moved — update the model, do not re-render. */
+	edit: ( apply: ( field: Field ) => void ) => void;
+	/** The field's shape changed — snapshot, update, re-render. */
+	restructure: ( apply: ( field: Field ) => void ) => void;
+}
+
+/**
+ * An editable piece of text that looks like the text it replaces.
+ *
+ * A real `contenteditable` rather than an `<input>` styled to look like one: the
+ * label has to wrap, sit on the theme's own line-height and inherit the theme's
+ * font, and an input does none of those without being told each one — at which
+ * point it is an input pretending to be text, and the pretence shows the moment a
+ * label is long enough to wrap.
+ *
+ * `plaintext-only` keeps a paste from bringing markup with it.
+ */
+function editableText(
+	value: string,
+	placeholder: string,
+	className: string,
+	onInput: ( value: string ) => void,
+	onCommit?: () => void
+): HTMLElement {
+	const node = el( 'span', {
+		class: `${ className } atfb-editable`,
+		text: value,
+		attrs: {
+			contenteditable: 'plaintext-only',
+			role: 'textbox',
+			spellcheck: 'false',
+			'data-placeholder': placeholder,
+		},
+	} );
+
+	// Dragging the card must not start from inside the text somebody is editing,
+	// and a click has to place the caret rather than being swallowed as a
+	// selection gesture.
+	node.addEventListener( 'pointerdown', ( event ) => event.stopPropagation() );
+
+	node.addEventListener( 'input', () => onInput( node.textContent ?? '' ) );
+
+	node.addEventListener( 'keydown', ( event ) => {
+		// Enter commits rather than inserting a newline: these are single-line
+		// values, and a label containing a line break is a label that renders
+		// differently everywhere it is shown.
+		if ( 'Enter' === event.key ) {
+			event.preventDefault();
+			node.blur();
+		}
+
+		if ( 'Escape' === event.key ) {
+			node.textContent = value;
+			node.blur();
+		}
+
+		// The card handles Delete and Backspace as "remove this field", which
+		// would be an unpleasant surprise while editing its label.
+		event.stopPropagation();
+	} );
+
+	node.addEventListener( 'blur', () => onCommit?.() );
+
+	return node;
+}
+
+/** The glyph an options list uses, so a radio reads as a radio. */
+function optionInputFor( type: string ): HTMLElement {
+	const input = el( 'input', {
+		class: 'atf-choice__input',
+		type: 'checkboxes' === type || 'multiselect' === type ? 'checkbox' : 'radio',
+	} );
+
+	// A preview control is never operated: clicking it should put the caret in
+	// the option's name, which is the only editable thing on that row.
+	input.disabled = true;
+
+	return input;
+}
+
+/**
+ * Draws one field as it will appear, with its text editable in place.
+ *
+ * @param field    The field.
+ * @param type     Its registered type, when the config knows it.
+ * @param handlers How to write changes back.
+ * @return The preview element.
+ */
+export function renderFieldPreview( field: Field, type: FieldType | undefined, handlers: PreviewHandlers ): HTMLElement {
+	const shape = shapeFor( field.type );
+
+	const label = editableText(
+		field.label,
+		'Write the question…',
+		'atf-label',
+		( value ) => handlers.edit( ( live ) => { live.label = value; } ),
+		// Committed on blur rather than per keystroke: the label appears in other
+		// cards' condition chips and in the merge-tag picker, and repainting the
+		// canvas on every character would take the caret with it.
+		() => handlers.restructure( () => {} )
+	);
+
+	const parts: Array< HTMLElement | null > = [
+		'static' === shape ? null : label,
+		field.hint ? el( 'p', { class: 'atf-hint', text: field.hint } ) : null,
+		control( field, type, shape, handlers ),
+	];
+
+	return el( 'div', {
+		// `.atf-form` is what the theme's custom properties are scoped to, and
+		// `.atf-field` is what gives the control its spacing. Both are the real
+		// front-end classes: the look here is the stylesheet, not a copy of it.
+		class: 'atfb-preview atf-form',
+		children: [
+			el( 'div', {
+				class: `atf-field atf-field--${ field.type }`,
+				children: parts,
+			} ),
+		],
+	} );
+}
+
+/** The control itself, per shape. */
+function control(
+	field: Field,
+	type: FieldType | undefined,
+	shape: PreviewShape,
+	handlers: PreviewHandlers
+): HTMLElement | null {
+	switch ( shape ) {
+		case 'text':
+			return placeholderBox( field, 'atf-input', handlers );
+
+		case 'textarea':
+			return placeholderBox( field, 'atf-input atf-textarea', handlers, true );
+
+		case 'select':
+			return el( 'div', {
+				class: 'atfb-preview__select',
+				children: [ placeholderBox( field, 'atf-input atf-select', handlers ) ],
+			} );
+
+		case 'options':
+			return optionList( field, handlers );
+
+		case 'toggle':
+			return el( 'div', {
+				class: 'atf-toggle',
+				children: [
+					( () => {
+						const box = el( 'input', { class: 'atf-toggle__input', type: 'checkbox' } );
+
+						box.disabled = true;
+
+						return box;
+					} )(),
+					editableText(
+						field.label || '',
+						'What are they agreeing to?…',
+						'atf-toggle__label',
+						( value ) => handlers.edit( ( live ) => { live.label = value; } ),
+						() => handlers.restructure( () => {} )
+					),
+				],
+			} );
+
+		case 'file':
+			return el( 'div', { class: 'atf-file', children: [ el( 'input', { class: 'atf-file__input', type: 'file' } ) ] } );
+
+		case 'range':
+			return el( 'input', { class: 'atf-range__input', type: 'range' } );
+
+		case 'composite':
+			return el( 'div', {
+				class: 'atf-composite__parts',
+				children: [
+					el( 'span', { class: 'atf-input atfb-preview__ghost', text: '' } ),
+					el( 'span', { class: 'atf-input atfb-preview__ghost', text: '' } ),
+				],
+			} );
+
+		case 'static':
+			return staticBlock( field, type, handlers );
+
+		default:
+			// The elaborate controls — a Likert matrix, a signature pad — say what
+			// they are rather than pretending. A preview that is subtly wrong is
+			// worse than one that is honestly a summary.
+			return el( 'p', {
+				class: 'atfb-preview__summary',
+				text: `${ type?.label ?? field.type } — set this up in the panel on the right.`,
+			} );
+	}
+}
+
+/** A box whose placeholder is edited by typing into it. */
+function placeholderBox(
+	field: Field,
+	className: string,
+	handlers: PreviewHandlers,
+	tall = false
+): HTMLElement {
+	const box = editableText(
+		field.placeholder ?? '',
+		'select' === field.type || 'country' === field.type ? 'Choose…' : 'Placeholder…',
+		`${ className } atfb-preview__box${ tall ? ' atfb-preview__box--tall' : '' }`,
+		( value ) => handlers.edit( ( live ) => { live.placeholder = value; } )
+	);
+
+	box.setAttribute( 'aria-label', 'Placeholder' );
+
+	return box;
+}
+
+/**
+ * A list of options, each renameable, with add and remove.
+ *
+ * This is the part that makes the canvas answer "what will this form contain?".
+ * A choice field's *content* is its options, and having them behind a panel
+ * meant the canvas showed a card labelled "Radio buttons" that could have been
+ * two options or twenty.
+ */
+function optionList( field: Field, handlers: PreviewHandlers ): HTMLElement {
+	const list = el( 'div', { class: 'atf-choices__list' } );
+
+	( field.choices ?? [] ).forEach( ( choice, index ) => {
+		list.append(
+			el( 'div', {
+				class: 'atf-choice atfb-preview__option',
+				children: [
+					optionInputFor( field.type ),
+					editableText(
+						choice.label,
+						'Option…',
+						'atf-choice__label',
+						( value ) => {
+							handlers.edit( ( live ) => {
+								// By index into the *live* field, not the choice object
+								// this row was rendered from — same reason as the field
+								// itself: a save replaces them all.
+								const target = live.choices?.[ index ];
+
+								if ( ! target ) {
+									return;
+								}
+
+								// The stored value follows the label while it is still
+								// a mirror of it. Once somebody sets a value of their
+								// own — an id their CRM expects — renaming the label
+								// must not silently change what gets submitted, because
+								// entries are stored against the value.
+								//
+								// Mirrors verbatim rather than slugifying, which is the
+								// convention the inspector and `atf_normalize_choices()`
+								// already use; two spellings of "the value follows the
+								// label" would disagree the moment you used both panes.
+								const mirroring = ! target.value || target.value === target.label;
+
+								target.label = value;
+
+								if ( mirroring ) {
+									target.value = value;
+								}
+							} );
+						}
+					),
+					el( 'button', {
+						class: 'atfb-preview__remove',
+						type: 'button',
+						title: 'Remove this option',
+						attrs: { 'aria-label': `Remove ${ choice.label || 'this option' }` },
+						on: {
+							pointerdown: ( event: Event ) => event.stopPropagation(),
+							click: ( event: Event ) => {
+								event.stopPropagation();
+								handlers.restructure( ( live ) => {
+									live.choices.splice( index, 1 );
+								} );
+							},
+						},
+						children: [ el( 'span', { text: '×' } ) ],
+					} ),
+				],
+			} )
+		);
+	} );
+
+	list.append(
+		el( 'button', {
+			class: 'atfb-preview__add',
+			type: 'button',
+			on: {
+				pointerdown: ( event: Event ) => event.stopPropagation(),
+				click: ( event: Event ) => {
+					event.stopPropagation();
+					handlers.restructure( ( live ) => {
+						// Named rather than blank, and that is not cosmetic:
+						// `atf_normalize_choices()` drops a choice whose label and
+						// value are both empty, and the schema is normalised on every
+						// save. A blank new option therefore looked fine, and then
+						// disappeared a couple of seconds later when the autosave
+						// came back — with nothing to tell anybody why.
+						const next = live.choices.length + 1;
+
+						live.choices.push( { label: `Option ${ next }`, value: `Option ${ next }` } );
+					} );
+				},
+			},
+			children: [ el( 'span', { text: '+ Add option' } ) ],
+		} )
+	);
+
+	return el( 'fieldset', { class: 'atf-choices', children: [ list ] } );
+}
+
+/** The layout blocks, which are their own content. */
+function staticBlock( field: Field, type: FieldType | undefined, handlers: PreviewHandlers ): HTMLElement | null {
+	if ( 'heading' === field.type ) {
+		return editableText(
+			field.label,
+			'Section heading…',
+			'atf-heading',
+			( value ) => handlers.edit( ( live ) => { live.label = value; } ),
+			() => handlers.restructure( () => {} )
+		);
+	}
+
+	if ( 'divider' === field.type ) {
+		return el( 'hr', { class: 'atf-divider' } );
+	}
+
+	if ( 'page_break' === field.type ) {
+		return el( 'p', { class: 'atfb-preview__summary', text: 'Everything after this is a new page.' } );
+	}
+
+	return el( 'p', {
+		class: 'atfb-preview__summary',
+		text: `${ type?.label ?? field.type } — nothing is shown to the visitor here.`,
+	} );
+}
diff --git a/tests/vitest/field-preview.test.ts b/tests/vitest/field-preview.test.ts
new file mode 100644
index 0000000..eb64623
--- /dev/null
+++ b/tests/vitest/field-preview.test.ts
@@ -0,0 +1,107 @@
+/**
+ * The canvas preview's shape map.
+ *
+ * The builder draws each field as it will look, and it does that by mapping a
+ * field *type* to one of a dozen visual *shapes* rather than by writing markup
+ * per type. That is what stops it becoming a second renderer — but it moves the
+ * risk somewhere else: a type registered later has no entry, and an unmapped
+ * type falls through to a plain text box.
+ *
+ * Falling through is the right runtime behaviour, because a card that renders
+ * *something* beats a card that renders nothing. It is the wrong *silent*
+ * behaviour: a signature pad drawn as a one-line text box is a preview that
+ * lies, and nobody would notice until they compared it with the front end.
+ *
+ * So the map is asserted against the type list itself.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { hasPlaceholder, shapeFor } from '../../src/field-preview';
+
+/**
+ * Every field type the plugin registers.
+ *
+ * Mirrors `atf_register_builtin_field_types()`. Kept as a literal rather than
+ * read from a fixture because the point of this test is to fail when the two
+ * lists disagree — reading one from the other would make it agree by
+ * construction and assert nothing.
+ */
+const TYPES = [
+	'text', 'textarea', 'email', 'url', 'tel', 'number', 'password', 'hidden',
+	'select', 'multiselect', 'radio', 'checkboxes', 'image_choice', 'switch',
+	'date', 'time', 'datetime', 'date_range',
+	'file', 'signature', 'rating', 'scale', 'likert', 'range', 'color',
+	'name', 'address', 'country', 'repeater',
+	'heading', 'html', 'divider', 'spacer', 'page_break',
+	'consent', 'total', 'quiz',
+];
+
+describe( 'shapeFor', () => {
+	it( 'has an entry for every registered field type', () => {
+		// `shapeFor` falls back to 'text', so this cannot simply check for a
+		// truthy result — it has to catch a type that is *only* reaching the
+		// fallback. The map is read through the same public function the builder
+		// uses, so a type deleted from the map fails here.
+		const unmapped = TYPES.filter( ( type ) => {
+			// A type genuinely drawn as a text box is fine; one that reaches
+			// 'text' by accident is not, and the two are told apart by asking
+			// whether the map itself knows the name.
+			const drawn = shapeFor( type );
+			const known = shapeFor( `${ type }__definitely-not-a-type` );
+
+			return 'text' === drawn && 'text' === known && ! TEXT_SHAPED.includes( type );
+		} );
+
+		expect( unmapped ).toEqual( [] );
+	} );
+
+	it( 'draws the elaborate controls as a summary rather than pretending', () => {
+		// These have no honest one-line approximation. Drawing a Likert matrix as
+		// a text box would be a preview that is confidently wrong, which is worse
+		// than one that says what it is.
+		for ( const type of [ 'likert', 'signature', 'rating', 'scale', 'repeater' ] ) {
+			expect( shapeFor( type ) ).toBe( 'summary' );
+		}
+	} );
+
+	it( 'draws a dropdown as a dropdown and a radio as a list', () => {
+		// Both have choices, and treating "has choices" as the signal would make
+		// them identical on the canvas.
+		expect( shapeFor( 'select' ) ).toBe( 'select' );
+		expect( shapeFor( 'radio' ) ).toBe( 'options' );
+		expect( shapeFor( 'checkboxes' ) ).toBe( 'options' );
+	} );
+
+	it( 'draws the layout blocks as static, since they take no answer', () => {
+		for ( const type of [ 'heading', 'divider', 'spacer', 'page_break', 'html', 'hidden' ] ) {
+			expect( shapeFor( type ) ).toBe( 'static' );
+		}
+	} );
+
+	it( 'falls back to a text box for a type it has never heard of', () => {
+		// A third-party field type must still render as *something*.
+		expect( shapeFor( 'myplugin/rating-slider' ) ).toBe( 'text' );
+	} );
+} );
+
+/** The types that are legitimately drawn as a plain text box. */
+const TEXT_SHAPED = [
+	'text', 'email', 'url', 'tel', 'number', 'password',
+	'date', 'time', 'datetime', 'color', 'total',
+];
+
+describe( 'hasPlaceholder', () => {
+	it( 'is true for the shapes that show one', () => {
+		expect( hasPlaceholder( 'text' ) ).toBe( true );
+		expect( hasPlaceholder( 'textarea' ) ).toBe( true );
+		expect( hasPlaceholder( 'select' ) ).toBe( true );
+	} );
+
+	it( 'is false where a placeholder would have nowhere to go', () => {
+		// Offering to edit a placeholder on a control that never shows one is an
+		// invitation to type something that is then invisible everywhere.
+		for ( const type of [ 'radio', 'checkboxes', 'divider', 'likert', 'switch' ] ) {
+			expect( hasPlaceholder( type ) ).toBe( false );
+		}
+	} );
+} );