@ohhwells/bridge 0.1.64-next.176 → 0.1.65-next.179

package/dist/index.cjs

@@ -157,7 +157,12 @@ function parseAiSectionsState(raw) {
       media: entry.media && typeof entry.media === "object" ? entry.media : {}
     }));
     const removed = Array.isArray(parsed.removed) ? parsed.removed.filter((id) => typeof id === "string" && id.length > 0) : [];
-    return { v: 1, sections, ...removed.length ? { removed } : {} };
+    return {
+      v: 1,
+      sections,
+      ...removed.length ? { removed } : {},
+      ...parsed.hideTemplate === true ? { hideTemplate: true } : {}
+    };
   } catch {
     return EMPTY_AI_SECTIONS;
   }
@@ -534,6 +539,36 @@ var FEATURE_LINE_CSS = [
   `background-color:currentColor;-webkit-mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px;`,
   `mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px}`
 ].join("");
+function hexLuminance(color) {
+  const m = /^#([0-9a-f]{6})$/i.exec(color.trim());
+  if (!m) return null;
+  const [r2, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(m[1].slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r2 + 0.7152 * g + 0.0722 * b;
+}
+function hexContrast(a, b) {
+  const la = hexLuminance(a);
+  const lb = hexLuminance(b);
+  if (la === null || lb === null) return null;
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function accentBandContext(brand) {
+  const p = brand.palette;
+  const lightWins = (hexContrast(p.light, p.primary) ?? 99) >= (hexContrast(p.dark, p.primary) ?? 0);
+  if (lightWins) {
+    return {
+      brand: { ...brand, palette: { dark: p.light, primary: p.light, accent: p.light, light: p.primary } },
+      buttonLabel: p.primary
+    };
+  }
+  return {
+    brand: { ...brand, palette: { dark: p.dark, primary: p.dark, accent: p.dark, light: p.light } },
+    buttonLabel: p.light
+  };
+}
 function textAttrs(ctx, path) {
   return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
 }
@@ -641,7 +676,7 @@ function ButtonEl({
         textDecoration: "none",
         cursor: "pointer",
         ...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body),
-        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color: AI_TREE_TOKENS.textPrimaryForeground }
+        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? AI_TREE_TOKENS.textPrimaryForeground }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
     }
@@ -1543,11 +1578,14 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
     return null;
   }
   const resolvedBrand = brand ?? AI_DEFAULT_BRAND;
+  const band = (tree.settings ?? {}).sectionBackground === "accent" ? accentBandContext(resolvedBrand) : null;
+  const blockBrand = band?.brand ?? resolvedBrand;
   const ctx = {
-    brand: resolvedBrand,
+    brand: blockBrand,
     resolveMedia: resolveMedia ?? (() => null),
-    cardSurface: resolvedBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${resolvedBrand.palette.light} 90%, ${resolvedBrand.palette.dark})`,
-    keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null
+    cardSurface: blockBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${blockBrand.palette.light} 90%, ${blockBrand.palette.dark})`,
+    keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null,
+    ...band ? { buttonLabel: band.buttonLabel } : {}
   };
   const settings = tree.settings ?? {};
   const pad = AI_TREE_TOKENS.sectionPadding[settings.spacing ?? "balanced"];
@@ -1582,7 +1620,7 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
         backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : void 0,
         backgroundSize: "cover",
         backgroundPosition: "center",
-        color: settings.sectionBackground === "accent" ? resolvedBrand.palette.light : void 0
+        color: settings.sectionBackground === "accent" ? blockBrand.palette.dark : void 0
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_RESPONSIVE_CSS }),
@@ -1639,6 +1677,8 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var CONTAINER_ATTR = "data-ohw-ai-generated";
 var REPLACED_ATTR = "data-ohw-ai-replaced-by";
 var REMOVED_ATTR = "data-ohw-ai-removed";
+var TEMPLATE_HIDDEN_ATTR = "data-ohw-ai-template-hidden";
+var CHROME_SECTION_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
 function readRootVar(name) {
   if (typeof document === "undefined") return "";
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
@@ -1738,6 +1778,24 @@ function syncRemovedSections(state) {
     }
   }
 }
+function syncTemplateHidden(state, pageHasSections) {
+  const hide = state.hideTemplate === true && pageHasSections;
+  for (const el of Array.from(document.querySelectorAll(`[${TEMPLATE_HIDDEN_ATTR}]`))) {
+    if (!hide) {
+      el.style.removeProperty("display");
+      el.removeAttribute(TEMPLATE_HIDDEN_ATTR);
+    }
+  }
+  if (!hide) return;
+  for (const el of Array.from(document.querySelectorAll("[data-ohw-section]"))) {
+    if (el.hasAttribute(CONTAINER_ATTR)) continue;
+    if (CHROME_SECTION_IDS.has(el.getAttribute("data-ohw-section") ?? "")) continue;
+    if (el.parentElement?.closest("[data-ohw-section]")) continue;
+    if (el.hasAttribute(REPLACED_ATTR) || el.hasAttribute(REMOVED_ATTR)) continue;
+    el.style.display = "none";
+    el.setAttribute(TEMPLATE_HIDDEN_ATTR, "");
+  }
+}
 function syncReplacedOriginals(state) {
   for (const el of document.querySelectorAll(`[${REPLACED_ATTR}]`)) {
     const byId = el.getAttribute(REPLACED_ATTR) ?? "";
@@ -1808,6 +1866,7 @@ function applyAiSectionsToDom(state, options) {
   }
   syncReplacedOriginals(state);
   syncRemovedSections(state);
+  syncTemplateHidden(state, pageSections.length > 0);
 }
 
 // src/useLinkHrefGuardian.ts
@@ -6589,6 +6648,7 @@ function getChromeStyle(state) {
 }
 function ClampedToolbarSlot({
   placement,
+  align = "center",
   children
 }) {
   const slotRef = (0, import_react7.useRef)(null);
@@ -6610,7 +6670,7 @@ function ClampedToolbarSlot({
         Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN - half)
       );
       const offsetX = clampedCenter - centerX;
-      slot.style.transform = `translateX(calc(-50% + ${offsetX}px))`;
+      slot.style.transform = align === "left" ? "none" : `translateX(calc(-50% + ${offsetX}px))`;
     };
     clamp();
     const ro = new ResizeObserver(clamp);
@@ -6621,19 +6681,20 @@ function ClampedToolbarSlot({
       ro.disconnect();
       window.removeEventListener("resize", clamp);
     };
-  }, [placement, children]);
+  }, [placement, children, align]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       ref: slotRef,
       className: cn(
-        "pointer-events-auto absolute left-1/2",
+        "pointer-events-auto absolute",
+        align === "left" ? "left-0" : "left-1/2",
         placement === "top" ? "bottom-full" : "top-full"
       ),
       style: {
         marginBottom: placement === "top" ? TOOLBAR_STROKE_GAP : void 0,
         marginTop: placement === "bottom" ? TOOLBAR_STROKE_GAP : void 0,
-        transform: "translateX(-50%)"
+        transform: align === "left" ? "none" : "translateX(-50%)"
       },
       "data-ohw-item-toolbar-anchor": placement,
       children
@@ -6702,6 +6763,7 @@ function ItemInteractionLayer({
   onItemClick,
   itemDragSurface = true,
   chromeGap,
+  toolbarAlign = "center",
   className
 }) {
   if (state === "default") return null;
@@ -6789,8 +6851,8 @@ function ItemInteractionLayer({
             )
           }
         ),
-        showToolbar && state === "active-top" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ClampedToolbarSlot, { placement: "top", children: toolbar }),
-        showToolbar && state === "active-bottom" && !useDetachedBelowToolbar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ClampedToolbarSlot, { placement: "bottom", children: toolbar }),
+        showToolbar && state === "active-top" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ClampedToolbarSlot, { align: toolbarAlign, placement: "top", children: toolbar }),
+        showToolbar && state === "active-bottom" && !useDetachedBelowToolbar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ClampedToolbarSlot, { align: toolbarAlign, placement: "bottom", children: toolbar }),
         useDetachedBelowToolbar && toolbarBelowRect ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           DetachedBelowToolbarSlot,
           {
@@ -6804,14 +6866,580 @@ function ItemInteractionLayer({
   );
 }
 
+// src/lib/forms.ts
+var FORM_SELECTOR = '[data-ohw-editable="form"]';
+function getFormElement(el) {
+  if (!el) return null;
+  return el.closest(FORM_SELECTOR);
+}
+function formKeyOf(form) {
+  return form.getAttribute("data-ohw-key");
+}
+function formHasLongText(form) {
+  return form.querySelector("textarea") !== null;
+}
+function collectFormFields(form) {
+  const fields = {};
+  form.querySelectorAll(
+    "input, textarea, select"
+  ).forEach((input) => {
+    const type = input.type;
+    if (type === "submit" || type === "button" || type === "reset") return;
+    const key = input.getAttribute("name") ?? input.getAttribute("data-ohw-key");
+    if (!key) return;
+    if (type === "checkbox") {
+      fields[key] = input.checked ? "yes" : "no";
+      return;
+    }
+    fields[key] = input.value;
+  });
+  return fields;
+}
+function formStateContainer(form) {
+  return form.closest("[data-ohw-editable-state]") ?? form.parentElement ?? form;
+}
+function showSuccess(form, message) {
+  const container = formStateContainer(form);
+  const views = container.querySelectorAll("[data-ohw-state-view]");
+  if (views.length > 0) {
+    views.forEach((view) => {
+      view.style.display = view.getAttribute("data-ohw-state-view") === "success" ? "block" : "none";
+    });
+    return;
+  }
+  const text = message ?? form.getAttribute("data-ohw-success-text") ?? DEFAULT_SUCCESS_TEXT;
+  const note = document.createElement("p");
+  note.setAttribute("data-ohw-form-success", "");
+  note.setAttribute("role", "status");
+  note.innerHTML = text;
+  form.replaceChildren(note);
+}
+function showSubmitError(form) {
+  let note = form.querySelector("[data-ohw-form-error]");
+  if (!note) {
+    note = document.createElement("p");
+    note.setAttribute("data-ohw-form-error", "");
+    note.setAttribute("role", "alert");
+    note.style.marginTop = "8px";
+    form.appendChild(note);
+  }
+  note.textContent = "Something went wrong. Please try again.";
+  note.style.display = "";
+}
+function clearSubmitError(form) {
+  const note = form.querySelector("[data-ohw-form-error]");
+  if (note) note.style.display = "none";
+}
+var SUCCESS_TEXT_ATTR = "data-ohw-form-success-text";
+var HIDDEN_ATTR = "data-ohw-form-hidden";
+var DEFAULT_SUCCESS_TEXT = "Thanks! We'll be in touch.";
+function formSuccessKey(formKey) {
+  return `${formKey}-success`;
+}
+function ensureSuccessTextEl(form, formKey, initialText) {
+  let el = form.querySelector(`[${SUCCESS_TEXT_ATTR}]`);
+  if (el) return el;
+  el = document.createElement("p");
+  el.setAttribute(SUCCESS_TEXT_ATTR, "");
+  el.setAttribute("data-ohw-editable", "text");
+  el.setAttribute("data-ohw-key", formSuccessKey(formKey));
+  el.innerHTML = initialText;
+  el.style.display = "none";
+  el.style.margin = "56px 4px 16px";
+  form.appendChild(el);
+  return el;
+}
+function setFormViewState(form, formKey, state, initialText) {
+  const success = ensureSuccessTextEl(form, formKey, initialText);
+  Array.from(form.children).forEach((child) => {
+    if (!(child instanceof HTMLElement) || child === success) return;
+    if (state === "success") {
+      if (!child.hasAttribute(HIDDEN_ATTR)) {
+        child.setAttribute(HIDDEN_ATTR, child.style.display);
+        child.style.display = "none";
+      }
+    } else if (child.hasAttribute(HIDDEN_ATTR)) {
+      child.style.display = child.getAttribute(HIDDEN_ATTR) ?? "";
+      child.removeAttribute(HIDDEN_ATTR);
+    }
+  });
+  success.style.display = state === "success" ? "" : "none";
+}
+var BOUND_ATTR = "data-ohw-form-bound";
+function bindPublishedForms(apiUrl, subdomain, content = {}) {
+  document.querySelectorAll(FORM_SELECTOR).forEach((form) => {
+    if (form.hasAttribute(BOUND_ATTR)) return;
+    if (!(form instanceof HTMLFormElement)) return;
+    const formKey = formKeyOf(form);
+    if (!formKey) return;
+    form.setAttribute(BOUND_ATTR, "");
+    form.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      clearSubmitError(form);
+      const submitButton = form.querySelector(
+        'button[type="submit"], input[type="submit"], button:not([type])'
+      );
+      if (submitButton) submitButton.disabled = true;
+      try {
+        const response = await fetch(`${apiUrl}/api/public/sites/${subdomain}/forms/submissions`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            formKey,
+            fields: collectFormFields(form),
+            hasLongText: formHasLongText(form)
+          })
+        });
+        if (!response.ok) throw new Error(`submit failed: ${response.status}`);
+        showSuccess(form, content[formSuccessKey(formKey)]);
+      } catch {
+        showSubmitError(form);
+        if (submitButton) submitButton.disabled = false;
+      }
+    });
+  });
+}
+
+// src/lib/form-fields.ts
+var FIELD_DEFAULTS = {
+  "short-text": { label: "Short text", placeholder: "Type placeholder text..." },
+  "long-text": { label: "Long text", placeholder: "How can we help?" },
+  email: { label: "Email", placeholder: "hello@example.com" },
+  phone: { label: "Phone number", placeholder: "(555) 000-0000" }
+};
+var FIELD_TYPES = [
+  { type: "short-text", label: "Short text" },
+  { type: "long-text", label: "Long text" },
+  { type: "email", label: "Email" },
+  { type: "phone", label: "Phone" }
+];
+var FIELD_ATTR = "data-ohw-form-field";
+var FIELD_TYPE_ATTR = "data-ohw-field-type";
+function fieldsKey(formKey) {
+  return `${formKey}-fields`;
+}
+function inputTagFor(type) {
+  if (type === "long-text") return { tag: "textarea" };
+  if (type === "email") return { tag: "input", inputType: "email" };
+  if (type === "phone") return { tag: "input", inputType: "tel" };
+  return { tag: "input", inputType: "text" };
+}
+function inferType(input) {
+  if (input.tagName === "TEXTAREA") return "long-text";
+  const type = input.type;
+  if (type === "email") return "email";
+  if (type === "tel") return "phone";
+  return "short-text";
+}
+function ensureFieldLabel(wrapper, key) {
+  const existing = fieldLabelOf(wrapper);
+  if (existing) {
+    if (!existing.hasAttribute("data-ohw-editable")) {
+      existing.setAttribute("data-ohw-editable", "text");
+      existing.setAttribute("data-ohw-key", `${key}-label`);
+    }
+    return existing;
+  }
+  const input = fieldInputOf(wrapper);
+  const label = document.createElement("label");
+  label.setAttribute("data-ohw-editable", "text");
+  label.setAttribute("data-ohw-key", `${key}-label`);
+  label.setAttribute("data-ohw-field-label", "");
+  label.style.display = "block";
+  label.style.marginBottom = "6px";
+  label.style.fontSize = "13px";
+  label.style.fontWeight = "500";
+  label.style.lineHeight = "1.3";
+  const fromPlaceholder = input?.getAttribute("placeholder")?.trim();
+  const text = fromPlaceholder && fromPlaceholder.length < 40 ? fromPlaceholder : key.replace(/[-_]/g, " ");
+  label.textContent = input?.hasAttribute("required") ? `${text} *` : text;
+  if (input && input.parentElement === wrapper) wrapper.insertBefore(label, input);
+  else wrapper.insertBefore(label, wrapper.firstChild);
+  return label;
+}
+function listFieldWrappers(form) {
+  return Array.from(form.querySelectorAll(`[${FIELD_ATTR}]`));
+}
+function getFieldWrapper(el) {
+  return el?.closest(`[${FIELD_ATTR}]`) ?? null;
+}
+function fieldInputOf(wrapper) {
+  return wrapper.querySelector("input, textarea");
+}
+function fieldLabelOf(wrapper) {
+  return wrapper.querySelector("label");
+}
+function fieldKeyOf(wrapper) {
+  return wrapper.getAttribute(FIELD_ATTR) ?? "";
+}
+function fieldTypeOf(wrapper) {
+  return wrapper.getAttribute(FIELD_TYPE_ATTR) ?? "short-text";
+}
+function isFieldRequired(wrapper) {
+  return fieldInputOf(wrapper)?.hasAttribute("required") ?? false;
+}
+function markFormFields(form) {
+  form.querySelectorAll("input, textarea").forEach((input) => {
+    const type = input.type;
+    if (type === "submit" || type === "button" || type === "reset" || type === "hidden") return;
+    if (getFieldWrapper(input)) return;
+    let wrapper = input;
+    while (wrapper.parentElement && wrapper.parentElement !== form && wrapper.parentElement.querySelectorAll("input, textarea").length === 1) {
+      wrapper = wrapper.parentElement;
+    }
+    if (wrapper === input) {
+      const box = document.createElement("div");
+      box.setAttribute("data-ohw-field-box", "");
+      input.replaceWith(box);
+      box.appendChild(input);
+      wrapper = box;
+    }
+    const key = input.getAttribute("name") ?? input.getAttribute("data-ohw-key") ?? `field-${Date.now()}`;
+    wrapper.setAttribute(FIELD_ATTR, key);
+    wrapper.setAttribute(FIELD_TYPE_ATTR, inferType(input));
+    ensureFieldLabel(wrapper, key);
+    syncRequiredMark(wrapper);
+  });
+  return listFieldWrappers(form);
+}
+function readFieldsFromDom(form) {
+  return listFieldWrappers(form).map((wrapper) => {
+    const input = fieldInputOf(wrapper);
+    return {
+      key: fieldKeyOf(wrapper),
+      type: fieldTypeOf(wrapper),
+      label: fieldLabelOf(wrapper)?.textContent?.trim() ?? "",
+      placeholder: input?.getAttribute("placeholder") ?? "",
+      required: Boolean(input?.hasAttribute("required"))
+    };
+  });
+}
+function parseFieldSpecs(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function isDefaultText(value, pick) {
+  const trimmed = value.trim().replace(/\s*\*$/, "");
+  if (!trimmed) return true;
+  return Object.values(FIELD_DEFAULTS).some((defaults) => pick(defaults) === trimmed);
+}
+function applyFieldType(wrapper, type) {
+  const input = fieldInputOf(wrapper);
+  if (!input) return;
+  const defaults = FIELD_DEFAULTS[type];
+  const placeholder = input.getAttribute("placeholder") ?? "";
+  const label = fieldLabelOf(wrapper);
+  const followsDefaults = {
+    // A label the owner wrote stays; one that still reads as a type name (or as the old
+    // placeholder the template shipped) follows the new type.
+    label: isDefaultText(label?.textContent ?? "", (d) => d.label) || (label?.textContent ?? "").trim().replace(/\s*\*$/, "") === placeholder.trim()
+  };
+  const { tag, inputType } = inputTagFor(type);
+  wrapper.setAttribute(FIELD_TYPE_ATTR, type);
+  const shedSize = (el) => {
+    if (type === "long-text") return;
+    el.style.removeProperty("height");
+    el.style.removeProperty("min-height");
+    el.style.removeProperty("resize");
+    el.removeAttribute("rows");
+  };
+  const applyDefaults = (el) => {
+    el.setAttribute("placeholder", defaults.placeholder);
+    if (label && followsDefaults.label) {
+      const required = (label.textContent ?? "").trim().endsWith("*");
+      label.textContent = required ? `${defaults.label} *` : defaults.label;
+    }
+  };
+  if (input.tagName.toLowerCase() === tag) {
+    if (inputType) input.type = inputType;
+    shedSize(input);
+    applyDefaults(input);
+    return;
+  }
+  const next = document.createElement(tag);
+  Array.from(input.attributes).forEach((attr) => {
+    if (attr.name === "type") return;
+    next.setAttribute(attr.name, attr.value);
+  });
+  if (inputType) next.setAttribute("type", inputType);
+  shedSize(next);
+  if (type === "long-text") next.setAttribute("rows", "4");
+  input.replaceWith(next);
+  applyDefaults(next);
+}
+function syncRequiredMark(wrapper) {
+  const label = fieldLabelOf(wrapper);
+  if (!label) return;
+  const required = isFieldRequired(wrapper);
+  const base = (label.textContent ?? "").replace(/\s*\*\s*$/, "").trimEnd();
+  const next = required ? `${base} *` : base;
+  if (label.textContent !== next) label.textContent = next;
+}
+function setFieldRequired(wrapper, required) {
+  const input = fieldInputOf(wrapper);
+  const label = fieldLabelOf(wrapper);
+  if (!input) return;
+  if (required) input.setAttribute("required", "");
+  else input.removeAttribute("required");
+  if (label) syncRequiredMark(wrapper);
+}
+var PLACEHOLDER_EDIT_ATTR = "data-ohw-placeholder-edit";
+function beginPlaceholderEdit(wrapper) {
+  const input = fieldInputOf(wrapper);
+  if (!input || input.hasAttribute(PLACEHOLDER_EDIT_ATTR)) return;
+  input.setAttribute(PLACEHOLDER_EDIT_ATTR, "");
+  input.value = input.getAttribute("placeholder") ?? "";
+  input.setAttribute("placeholder", "");
+}
+function commitPlaceholderEdit(wrapper) {
+  if (!wrapper) return false;
+  const input = fieldInputOf(wrapper);
+  if (!input || !input.hasAttribute(PLACEHOLDER_EDIT_ATTR)) return false;
+  const typed = input.value;
+  input.removeAttribute(PLACEHOLDER_EDIT_ATTR);
+  input.value = "";
+  const previous = input.getAttribute("placeholder") ?? "";
+  input.setAttribute("placeholder", typed);
+  return previous !== typed;
+}
+function setFieldPlaceholder(wrapper, placeholder) {
+  fieldInputOf(wrapper)?.setAttribute("placeholder", placeholder);
+}
+function uniqueKey(form, base) {
+  const taken = new Set(listFieldWrappers(form).map(fieldKeyOf));
+  if (!taken.has(base)) return base;
+  let n = 2;
+  while (taken.has(`${base}-${n}`)) n += 1;
+  return `${base}-${n}`;
+}
+function insertField(form, type) {
+  const existing = listFieldWrappers(form);
+  const source = existing[existing.length - 1] ?? null;
+  const key = uniqueKey(form, type);
+  let wrapper;
+  if (source) {
+    wrapper = source.cloneNode(true);
+    source.after(wrapper);
+  } else {
+    wrapper = document.createElement("div");
+    const label2 = document.createElement("label");
+    const input2 = document.createElement("input");
+    wrapper.append(label2, input2);
+    const submit = form.querySelector('button, input[type="submit"]');
+    if (submit) submit.before(wrapper);
+    else form.appendChild(wrapper);
+  }
+  wrapper.setAttribute(FIELD_ATTR, key);
+  wrapper.setAttribute(FIELD_TYPE_ATTR, type);
+  applyFieldType(wrapper, type);
+  const defaults = FIELD_DEFAULTS[type];
+  const input = fieldInputOf(wrapper);
+  if (input) {
+    input.setAttribute("name", key);
+    input.setAttribute("data-ohw-key", key);
+    input.removeAttribute("required");
+    input.setAttribute("placeholder", defaults.placeholder);
+    input.value = "";
+  }
+  const label = ensureFieldLabel(wrapper, key);
+  label.textContent = defaults.label;
+  label.setAttribute("data-ohw-key", `${key}-label`);
+  return wrapper;
+}
+function duplicateField(form, wrapper) {
+  const copy = wrapper.cloneNode(true);
+  const key = uniqueKey(form, `${fieldKeyOf(wrapper)}-copy`);
+  copy.setAttribute(FIELD_ATTR, key);
+  const input = fieldInputOf(copy);
+  if (input) {
+    input.setAttribute("name", key);
+    input.setAttribute("data-ohw-key", key);
+    input.value = "";
+  }
+  wrapper.after(copy);
+  return copy;
+}
+function removeField(wrapper) {
+  wrapper.remove();
+}
+function moveField(form, key, toIndex) {
+  const wrappers = listFieldWrappers(form);
+  const moving = wrappers.find((wrapper) => fieldKeyOf(wrapper) === key);
+  if (!moving) return;
+  const rest = wrappers.filter((wrapper) => wrapper !== moving);
+  const target = rest[Math.max(0, Math.min(rest.length, toIndex))];
+  if (target) target.before(moving);
+  else rest[rest.length - 1]?.after(moving);
+}
+function reconcileFieldsFromContent(form, content) {
+  const formKey = form.getAttribute("data-ohw-key");
+  if (!formKey) return;
+  markFormFields(form);
+  const stored = parseFieldSpecs(content[fieldsKey(formKey)]);
+  if (!stored) return;
+  const byKey = new Map(listFieldWrappers(form).map((wrapper) => [fieldKeyOf(wrapper), wrapper]));
+  stored.forEach((spec) => {
+    let wrapper = byKey.get(spec.key) ?? null;
+    if (!wrapper) {
+      wrapper = insertField(form, spec.type);
+      if (!wrapper) return;
+      wrapper.setAttribute(FIELD_ATTR, spec.key);
+      const input = fieldInputOf(wrapper);
+      if (input) {
+        input.setAttribute("name", spec.key);
+        input.setAttribute("data-ohw-key", spec.key);
+      }
+      byKey.set(spec.key, wrapper);
+    }
+    applyFieldType(wrapper, spec.type);
+    setFieldRequired(wrapper, spec.required);
+    setFieldPlaceholder(wrapper, spec.placeholder);
+    const label = fieldLabelOf(wrapper);
+    if (label && spec.label) label.textContent = spec.label;
+  });
+  const wanted = new Set(stored.map((spec) => spec.key));
+  listFieldWrappers(form).forEach((wrapper) => {
+    if (!wanted.has(fieldKeyOf(wrapper))) wrapper.remove();
+  });
+  stored.forEach((spec, index) => moveField(form, spec.key, index));
+}
+
+// src/ui/form-field-toolbar.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var TYPE_ICONS = {
+  "short-text": import_lucide_react4.Type,
+  "long-text": import_lucide_react4.TextQuote,
+  email: import_lucide_react4.AtSign,
+  phone: import_lucide_react4.Phone
+};
+function FormFieldToolbar({
+  type,
+  required,
+  onTypeChange,
+  onRequiredToggle,
+  onDuplicate,
+  onDelete
+}) {
+  const TypeIcon = TYPE_ICONS[type];
+  const typeLabel = FIELD_TYPES.find((entry) => entry.type === type)?.label ?? "Short text";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      "data-ohw-field-toolbar": "",
+      className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenu, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-medium text-foreground transition-colors hover:bg-muted/70",
+              "data-ohw-field-type-trigger": "",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TypeIcon, { size: 14, strokeWidth: 1.75, "aria-hidden": true }),
+                typeLabel,
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.ChevronDown, { size: 13, className: "text-muted-foreground", "aria-hidden": true })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-[190px] p-1", children: FIELD_TYPES.map((entry) => {
+            const Icon = TYPE_ICONS[entry.type];
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+              DropdownMenuItem,
+              {
+                onSelect: () => onTypeChange(entry.type),
+                className: "rounded-md py-2 text-[13px] " + (entry.type === type ? "bg-primary/10" : ""),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: 14, strokeWidth: 1.75, className: "shrink-0", "aria-hidden": true }),
+                  entry.label
+                ]
+              },
+              entry.type
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": required,
+            onClick: onRequiredToggle,
+            className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-medium transition-colors " + (required ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted/70"),
+            "data-ohw-field-required": "",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.Asterisk, { size: 14, strokeWidth: 2, "aria-hidden": true }),
+              "Required"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenu, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              type: "button",
+              title: "More",
+              "aria-label": "More",
+              className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/70",
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.MoreHorizontal, { size: 15, "aria-hidden": true })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-[170px] p-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenuItem, { onSelect: onDuplicate, className: "rounded-md py-2 text-[13px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.Copy, { size: 14, strokeWidth: 1.75, className: "shrink-0", "aria-hidden": true }),
+              "Duplicate"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenuItem, { variant: "destructive", onSelect: onDelete, className: "rounded-md py-2 text-[13px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.Trash2, { size: 14, strokeWidth: 1.75, className: "shrink-0", "aria-hidden": true }),
+              "Delete"
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function FieldTypePicker({ onPick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      "data-ohw-field-type-picker": "",
+      className: "pointer-events-auto grid w-[420px] grid-cols-3 gap-3 rounded-xl border border-border bg-background p-4 shadow-lg",
+      children: FIELD_TYPES.map((entry) => {
+        const Icon = TYPE_ICONS[entry.type];
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onPick(entry.type),
+            className: "flex h-[104px] flex-col items-center justify-center gap-3 rounded-xl border border-border text-[15px] font-medium text-foreground transition-colors hover:border-primary hover:bg-primary/5",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: 26, strokeWidth: 1.5, "aria-hidden": true }),
+              entry.label
+            ]
+          },
+          entry.type
+        );
+      })
+    }
+  );
+}
+
 // src/ui/MediaOverlay.tsx
 var React7 = __toESM(require("react"), 1);
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react5 = require("lucide-react");
 
 // src/ui/button.tsx
 var React6 = __toESM(require("react"), 1);
 var import_radix_ui5 = require("radix-ui");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 min-w-[80px] px-3 py-2",
   {
@@ -6835,7 +7463,7 @@ var buttonVariants = cva(
 var Button = React6.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? import_radix_ui5.Slot.Root : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       Comp,
       {
         ref,
@@ -6849,7 +7477,7 @@ var Button = React6.forwardRef(
 Button.displayName = "Button";
 
 // src/ui/MediaOverlay.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var MEDIA_UPLOAD_FADE_MS = 300;
 var VIDEO_SETTINGS_BAR_INSET = 8;
 var OVERLAY_BUTTON_STYLE = {
@@ -6907,7 +7535,7 @@ function MediaOverlay({
     return () => anim.cancel();
   }, [isUploading, fadingOut, onFadeOutComplete, hover.key]);
   if (isUploading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         ref: skeletonRef,
@@ -6916,11 +7544,11 @@ function MediaOverlay({
         "data-ohw-media-skeleton": "",
         "aria-hidden": true,
         style: { ...box, pointerEvents: "none" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("style", { children: SKELETON_CSS })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("style", { children: SKELETON_CSS })
       }
     );
   }
-  const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       "data-ohw-bridge": "",
@@ -6936,7 +7564,7 @@ function MediaOverlay({
       },
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           Button,
           {
             "data-ohw-media-overlay": "",
@@ -6951,10 +7579,10 @@ function MediaOverlay({
               e.stopPropagation();
               onVideoSettingsChange?.(hover.key, { autoplay: !autoplay });
             },
-            children: autoplay ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Pause, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Play, { size: 14 })
+            children: autoplay ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Pause, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Play, { size: 14 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           Button,
           {
             "data-ohw-media-overlay": "",
@@ -6969,15 +7597,15 @@ function MediaOverlay({
               e.stopPropagation();
               onVideoSettingsChange?.(hover.key, { muted: !muted });
             },
-            children: muted ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.VolumeX, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Volume2, { size: 14 })
+            children: muted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.VolumeX, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Volume2, { size: 14 })
           }
         )
       ]
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
     settingsBar,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         "data-ohw-bridge": "",
@@ -6994,7 +7622,7 @@ function MediaOverlay({
           background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
         },
         onClick: () => onReplace(hover.key),
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           Button,
           {
             "data-ohw-media-overlay": "",
@@ -7012,7 +7640,7 @@ function MediaOverlay({
               onReplace(hover.key);
             },
             children: [
-              isVideo ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.ImageIcon, { size: 14 }),
+              isVideo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
               isVideo ? "Replace video" : "Replace image"
             ]
           }
@@ -7023,8 +7651,8 @@ function MediaOverlay({
 }
 
 // src/ui/CarouselOverlay.tsx
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var OVERLAY_BUTTON_STYLE2 = {
   pointerEvents: "auto",
   fontFamily: "Inter, sans-serif",
@@ -7036,7 +7664,7 @@ function CarouselOverlay({
   onEdit
 }) {
   const { rect } = hover;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       "data-ohw-bridge": "",
@@ -7054,7 +7682,7 @@ function CarouselOverlay({
         background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
       },
       onClick: () => onEdit(hover.key),
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         Button,
         {
           "data-ohw-carousel-overlay": "",
@@ -7068,7 +7696,7 @@ function CarouselOverlay({
             onEdit(hover.key);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.GalleryHorizontal, { size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.GalleryHorizontal, { size: 14 }),
             "Edit gallery"
           ]
         }
@@ -7079,7 +7707,7 @@ function CarouselOverlay({
 
 // src/ui/ai-section/AiSectionOverlay.tsx
 var import_react8 = require("react");
-var import_lucide_react6 = require("lucide-react");
+var import_lucide_react7 = require("lucide-react");
 
 // src/lib/sections.ts
 var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
@@ -7093,6 +7721,8 @@ function parseSectionsFromRoot(root) {
     const id = el.getAttribute("data-ohw-section") ?? "";
     if (!id || seen.has(id) || LINK_PICKER_EXCLUDED_IDS.has(id)) continue;
     if (el.parentElement?.closest("[data-ohw-section]")) continue;
+    if (el.hasAttribute("data-ohw-ai-template-hidden") || el.hasAttribute("data-ohw-ai-removed") || el.hasAttribute("data-ohw-ai-replaced-by"))
+      continue;
     seen.add(id);
     const label = el.getAttribute("data-ohw-section-label") ?? titleCaseSectionId(id);
     sections.push({ id, label });
@@ -7109,7 +7739,7 @@ function parseSectionsFromHtml(html) {
 }
 
 // src/ui/ai-section/AiSectionOverlay.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function findSectionElement(instanceId) {
   const escaped = CSS.escape(instanceId);
   return document.querySelector(`[data-ohw-instance="${escaped}"]`) ?? document.querySelector(`[data-ohw-section="${escaped}"]:not([data-ohw-instance])`);
@@ -7177,8 +7807,8 @@ function ReviewButton({
   color
 }) {
   const [hover, setHover] = (0, import_react8.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -7202,7 +7832,7 @@ function ReviewButton({
         children
       }
     ),
-    hover && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    hover && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
         style: {
@@ -7368,8 +7998,8 @@ function AiSectionOverlay({
       isLast
     });
   }, [activeSelectionId, selectionRect, postToParent2]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    hoverRect && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    hoverRect && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
         "data-ohw-ai-section-hover": "",
@@ -7387,7 +8017,7 @@ function AiSectionOverlay({
         }
       }
     ),
-    selectionRect && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    selectionRect && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
         "data-ohw-ai-section-selected": "",
@@ -7405,7 +8035,7 @@ function AiSectionOverlay({
         }
       }
     ),
-    reviewRect && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    reviewRect && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
         "data-ohw-ai-review": "",
@@ -7427,7 +8057,7 @@ function AiSectionOverlay({
           cursor: "default"
         },
         onClick: (e) => e.stopPropagation(),
-        children: !reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        children: !reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "div",
           {
             style: {
@@ -7440,8 +8070,8 @@ function AiSectionOverlay({
               paddingTop: 12
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
             ]
           }
         )
@@ -7800,23 +8430,23 @@ var import_react12 = require("react");
 // src/ui/dialog.tsx
 var React8 = __toESM(require("react"), 1);
 var import_radix_ui6 = require("radix-ui");
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Dialog2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_radix_ui6.Dialog.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -7829,9 +8459,9 @@ function DialogOverlay({
 var DialogContent = React8.forwardRef(
   ({ className, children, showCloseButton = true, container, ...props }, ref) => {
     const positionMode = container ? "absolute" : "fixed";
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DialogPortal, { container: container ?? void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DialogPortal, { container: container ?? void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         import_radix_ui6.Dialog.Content,
         {
           ref,
@@ -7847,13 +8477,13 @@ var DialogContent = React8.forwardRef(
           ...props,
           children: [
             children,
-            showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               import_radix_ui6.Dialog.Close,
               {
                 type: "button",
                 className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
                 "aria-label": "Close",
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 16, "aria-hidden": true })
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.X, { size: 16, "aria-hidden": true })
               }
             ) : null
           ]
@@ -7867,13 +8497,13 @@ function DialogHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
 }
 function DialogFooter({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       className: cn("flex items-center justify-end gap-2", className),
@@ -7881,7 +8511,7 @@ function DialogFooter({
     }
   );
 }
-var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_radix_ui6.Dialog.Title,
   {
     ref,
@@ -7893,7 +8523,7 @@ var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
-var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_radix_ui6.Dialog.Description,
   {
     ref,
@@ -7905,63 +8535,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
 var DialogClose = import_radix_ui6.Dialog.Close;
 
 // src/ui/link-modal/LinkEditorPanel.tsx
-var import_lucide_react11 = require("lucide-react");
+var import_lucide_react12 = require("lucide-react");
 
 // src/ui/link-modal/DestinationBreadcrumb.tsx
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function DestinationBreadcrumb({
   pageTitle,
   sectionLabel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        import_lucide_react8.ArrowRight,
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_lucide_react9.ArrowRight,
         {
           size: 16,
           className: "shrink-0 text-muted-foreground",
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_lucide_react8.GalleryVertical,
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          import_lucide_react9.GalleryVertical,
           {
             size: 16,
             className: "shrink-0 text-foreground",
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
       ] })
     ] })
   ] });
 }
 
 // src/ui/link-modal/SectionTreeItem.tsx
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function SectionTreeItem({
   section,
   onSelect,
   selected
 }) {
   const interactive = Boolean(onSelect);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         className: "mr-[-1px] h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         role: interactive ? "button" : void 0,
@@ -7979,15 +8609,15 @@ function SectionTreeItem({
           interactive && selected && "border-primary"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_lucide_react9.GalleryVertical,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_lucide_react10.GalleryVertical,
             {
               size: 16,
               className: "shrink-0 text-foreground",
               "aria-hidden": true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
         ]
       }
     )
@@ -7999,10 +8629,10 @@ var import_react9 = require("react");
 
 // src/ui/input.tsx
 var React9 = __toESM(require("react"), 1);
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Input = React9.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "input",
       {
         type,
@@ -8021,9 +8651,9 @@ Input.displayName = "Input";
 
 // src/ui/label.tsx
 var import_radix_ui7 = require("radix-ui");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_radix_ui7.Label.Root,
     {
       "data-slot": "label",
@@ -8034,12 +8664,12 @@ function Label({ className, ...props }) {
 }
 
 // src/ui/link-modal/UrlOrPageInput.tsx
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function FieldChevron({
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "button",
     {
       type: "button",
@@ -8047,7 +8677,7 @@ function FieldChevron({
       onClick,
       "aria-label": "Open page list",
       tabIndex: -1,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.ChevronDown, { size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.ChevronDown, { size: 16 })
     }
   );
 }
@@ -8108,19 +8738,19 @@ function UrlOrPageInput({
     "data-ohw-link-field flex h-[36px] w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
     urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
-        selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_lucide_react10.File,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
+        selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_lucide_react11.File,
           {
             size: 16,
             className: "shrink-0 text-foreground",
             "aria-hidden": true
           }
         ) }) : null,
-        readOnly ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        readOnly ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Input,
           {
             ref: inputRef,
@@ -8146,7 +8776,7 @@ function UrlOrPageInput({
             )
           }
         ),
-        selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             type: "button",
@@ -8154,26 +8784,26 @@ function UrlOrPageInput({
             onMouseDown: clearSelection,
             "aria-label": "Clear selected page",
             tabIndex: -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.X, { size: 16, "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.X, { size: 16, "aria-hidden": true })
           }
         ) : null,
-        !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
+        !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
       ] }),
-      dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "div",
         {
           "data-ohw-link-page-dropdown": "",
           className: "absolute left-0 right-0 top-[calc(100%+4px)] z-50 max-h-48 overflow-auto rounded-lg border border-border bg-popover py-1 shadow-lg",
           onMouseDown: (e) => e.preventDefault(),
-          children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "button",
             {
               type: "button",
               className: "flex h-9 w-full items-center gap-2 border-0 bg-transparent px-3 text-left text-sm leading-5 text-foreground outline-none hover:bg-muted",
               onClick: () => onPageSelect(page),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate", children: page.title })
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate", children: page.title })
               ]
             },
             page.path
@@ -8181,34 +8811,34 @@ function UrlOrPageInput({
         }
       ) : null
     ] }),
-    urlError ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
+    urlError ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
   ] });
 }
 
 // src/ui/link-modal/LinkEditorPanel.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function LinkEditorPanel({ state, onClose }) {
   const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "button",
       {
         type: "button",
         className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
         "aria-label": "Close",
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.X, { size: 16, "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.X, { size: 16, "aria-hidden": true })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
-      state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
+      state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         DestinationBreadcrumb,
         {
           pageTitle: state.selectedPage.title,
           sectionLabel: state.selectedSection.label
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         UrlOrPageInput,
         {
           value: state.searchValue,
@@ -8221,8 +8851,8 @@ function LinkEditorPanel({ state, onClose }) {
           urlError: state.urlError
         }
       ),
-      state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Button,
           {
             type: "button",
@@ -8233,15 +8863,15 @@ function LinkEditorPanel({ state, onClose }) {
             children: "Choose a section"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Pick a section this link should scroll to." })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "Pick a section this link should scroll to." })
         ] })
       ] }) : null,
-      state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
+      state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Button,
         {
           type: "button",
@@ -8256,7 +8886,7 @@ function LinkEditorPanel({ state, onClose }) {
           children: state.secondaryLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Button,
         {
           type: "button",
@@ -8277,9 +8907,9 @@ function LinkEditorPanel({ state, onClose }) {
 // src/ui/link-modal/SectionPickerOverlay.tsx
 var import_react10 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_lucide_react12 = require("lucide-react");
+var import_lucide_react13 = require("lucide-react");
 var import_navigation2 = require("next/navigation");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
 function rectsEqual(a, b) {
   if (a.size !== b.size) return false;
@@ -8508,7 +9138,7 @@ function SectionPickerOverlay({
   const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
   if (!portalRoot) return null;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
         "data-ohw-section-picker": "",
@@ -8518,12 +9148,12 @@ function SectionPickerOverlay({
         role: "dialog",
         "aria-label": "Choose a section",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "div",
             {
               className: "pointer-events-auto fixed left-5 z-[2]",
               style: { top: chromeClip.top + 20 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                 Button,
                 {
                   type: "button",
@@ -8532,14 +9162,14 @@ function SectionPickerOverlay({
                   className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
                   onClick: onBack,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
                     "Back"
                   ]
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "div",
             {
               className: "pointer-events-none fixed left-1/2 z-[2] rounded-lg px-4 py-3 text-xs leading-4 tracking-[0.18px] text-white shadow-md",
@@ -8552,7 +9182,7 @@ function SectionPickerOverlay({
               children: "Click on section to select"
             }
           ),
-          !isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          !isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "div",
             {
               className: "pointer-events-none fixed left-1/2 z-[1] -translate-x-1/2 rounded-md px-3 py-2 text-sm text-muted-foreground shadow-sm",
@@ -8560,14 +9190,14 @@ function SectionPickerOverlay({
               children: "Loading page preview\u2026"
             }
           ) : null,
-          isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
+          isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
           isOnTargetPage ? liveSections.map((section) => {
             const rect = rects.get(section.id);
             if (!rect || rect.width <= 0 || rect.height <= 0) return null;
             const isSelected = selectedId === section.id;
             const isHovered = hoveredId === section.id;
             const isLit = isSelected || isHovered;
-            return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
               "button",
               {
                 type: "button",
@@ -8582,7 +9212,7 @@ function SectionPickerOverlay({
                 "aria-label": `Select section ${section.label}`,
                 onClick: () => handleSelect(section),
                 children: [
-                  isLit ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  isLit ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     "span",
                     {
                       className: "pointer-events-none absolute",
@@ -8595,13 +9225,13 @@ function SectionPickerOverlay({
                       "aria-hidden": true
                     }
                   ) : null,
-                  isSelected ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  isSelected ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     "span",
                     {
                       className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
                       style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
                       "aria-hidden": true,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Check, { className: "size-5" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.Check, { className: "size-5" })
                     }
                   ) : null
                 ]
@@ -8781,7 +9411,7 @@ function useLinkModalState({
 }
 
 // src/ui/link-modal/LinkPopover.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function postToParent(data) {
   window.parent?.postMessage(data, "*");
 }
@@ -8877,15 +9507,15 @@ function LinkPopover({
       );
     };
   }, [open, sectionPickerActive]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       Dialog2,
       {
         open: open && !sectionPickerActive,
         onOpenChange: (next) => {
           if (!next) onClose?.();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           DialogContent,
           {
             ref: panelRef,
@@ -8895,12 +9525,12 @@ function LinkPopover({
             "data-ohw-bridge": "",
             showCloseButton: false,
             className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LinkEditorPanel, { state, onClose })
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LinkEditorPanel, { state, onClose })
           }
         )
       }
     ),
-    sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       SectionPickerOverlay,
       {
         pagePath: state.selectedPage.path,
@@ -10126,13 +10756,14 @@ function listSocialItems(row) {
     return isSocialItem(anchor) ? anchor : null;
   }).filter((item) => item !== null);
 }
-function socialRowUnit(item) {
-  const row = findSocialsRow(item);
+function socialRowUnit(item, knownRow) {
+  const row = knownRow ?? findSocialsRow(item);
+  if (!row || !row.contains(item)) return null;
   let node = item;
   while (node.parentElement && node.parentElement !== row) {
     node = node.parentElement;
   }
-  return node;
+  return node.parentElement === row ? node : null;
 }
 function listSocialsRows(root = document) {
   const rows = /* @__PURE__ */ new Set();
@@ -10151,7 +10782,8 @@ function markSocialsRows(root = document) {
   listSocialsRows(root).forEach((row) => {
     row.setAttribute(SOCIALS_ROW_ATTR, "");
     const items = listSocialItems(row);
-    if (items[0]) rowTemplates.set(rowKeyOf(row), socialRowUnit(items[0]).outerHTML);
+    const firstUnit = items[0] ? socialRowUnit(items[0], row) : null;
+    if (firstUnit) rowTemplates.set(rowKeyOf(row), firstUnit.outerHTML);
     items.forEach((item, index) => {
       item.setAttribute(SOCIALS_ITEM_ATTR, String(index));
       const iconKey = socialIconKey(item);
@@ -10295,7 +10927,8 @@ function removeSocialItem(item, content) {
   const previousContent = Object.fromEntries(
     removedKeys.filter((key) => key in content).map((key) => [key, content[key]])
   );
-  const unit = socialRowUnit(item);
+  const unit = socialRowUnit(item, row);
+  if (!unit) return null;
   const nextSibling = unit.nextElementSibling;
   unit.remove();
   markSocialsRows(row.ownerDocument);
@@ -10318,7 +10951,9 @@ function applySocialsOrder(order, root = document) {
     const byKey = new Map(listSocialItems(row).map((item) => [socialHrefKey(item), item]));
     wanted.forEach((key) => {
       const item = byKey.get(key);
-      if (item) row.appendChild(socialRowUnit(item));
+      if (!item) return;
+      const unit = socialRowUnit(item, row);
+      if (unit) row.appendChild(unit);
     });
   });
   markSocialsRows(root);
@@ -10348,7 +10983,7 @@ function reconcileSocialsFromContent(content, root = document) {
     });
     if (surviving.length) {
       present.forEach((item) => {
-        if (!surviving.includes(item)) socialRowUnit(item).remove();
+        if (!surviving.includes(item)) socialRowUnit(item)?.remove();
       });
     }
   });
@@ -11684,8 +12319,8 @@ function addFooterColumnWithPersist({
 
 // src/ui/FloatingPanel.tsx
 var import_react13 = require("react");
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var PANEL_WIDTH = 256;
 var EDGE_MARGIN = 16;
 function getVisibleClip(parentScroll) {
@@ -11800,7 +12435,7 @@ function FloatingPanel({
   }, [open]);
   (0, import_react13.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       ref: panelRef,
@@ -11817,7 +12452,7 @@ function FloatingPanel({
       onPointerDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "div",
           {
             "data-ohw-floating-panel-header": "",
@@ -11827,14 +12462,14 @@ function FloatingPanel({
             onPointerUp: endDrag,
             onPointerCancel: endDrag,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  icon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  icon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
                 ] }),
-                context ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
+                context ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "button",
                 {
                   type: "button",
@@ -11846,13 +12481,13 @@ function FloatingPanel({
                     onClose();
                   },
                   onPointerDown: (e) => e.stopPropagation(),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.X, { size: 16, "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.X, { size: 16, "aria-hidden": true })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "div",
           {
             "data-ohw-floating-panel-body": "",
@@ -11866,30 +12501,30 @@ function FloatingPanel({
 }
 
 // src/ui/logo-size-panel.tsx
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function SizeSlider({
   value,
   onChange
 }) {
   const pct = (value - LOGO_SIZE_MIN) / (LOGO_SIZE_MAX - LOGO_SIZE_MIN) * 100;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full items-center gap-2 text-sm font-medium leading-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "min-w-0 flex-1 text-foreground", children: "Size" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "shrink-0 whitespace-nowrap text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center gap-2 text-sm font-medium leading-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "min-w-0 flex-1 text-foreground", children: "Size" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "shrink-0 whitespace-nowrap text-muted-foreground", children: [
         value,
         " px"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "relative h-2 w-full rounded-full bg-primary-50", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative h-2 w-full rounded-full bg-primary-50", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
           className: "absolute inset-y-0 left-0 rounded-full bg-primary",
           style: { width: `${pct}%` }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "input",
         {
           type: "range",
@@ -11926,14 +12561,14 @@ function LogoSizePanel({
   const showFollowing = viewport === "mobile" && mobileFollowing;
   const showMobileSlider = viewport === "mobile" && !mobileFollowing;
   const showDesktopSlider = viewport === "desktop";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("flex w-full flex-col gap-4", className), children: [
-    showFollowing ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-start gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Link, { size: 16, className: "mt-0.5 shrink-0 text-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm font-semibold leading-5 text-foreground", children: "Following desktop size" })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("flex w-full flex-col gap-4", className), children: [
+    showFollowing ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-start gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.Link, { size: 16, className: "mt-0.5 shrink-0 text-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm font-semibold leading-5 text-foreground", children: "Following desktop size" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm leading-5 text-muted-foreground", children: "Mobile uses the desktop size until you customize it. Change the desktop size and it follows automatically." }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm leading-5 text-muted-foreground", children: "Mobile uses the desktop size until you customize it. Change the desktop size and it follows automatically." }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Button,
         {
           type: "button",
@@ -11945,8 +12580,8 @@ function LogoSizePanel({
         }
       )
     ] }) : null,
-    showDesktopSlider || showMobileSlider ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SizeSlider, { value: sizePx, onChange: onSizeChange }) : null,
-    showMobileSlider ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    showDesktopSlider || showMobileSlider ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SizeSlider, { value: sizePx, onChange: onSizeChange }) : null,
+    showMobileSlider ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Button,
       {
         type: "button",
@@ -11957,8 +12592,8 @@ function LogoSizePanel({
         children: "Reset to desktop size"
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-px w-full bg-border", role: "separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-px w-full bg-border", role: "separator" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       Button,
       {
         type: "button",
@@ -11968,24 +12603,24 @@ function LogoSizePanel({
         onClick: onUpdateEverywhere,
         children: [
           "Update logo everywhere",
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.ArrowUpRight, { size: 16, "aria-hidden": true })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.ArrowUpRight, { size: 16, "aria-hidden": true })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm leading-5 text-muted-foreground", children: "Matches the right version to your background." })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm leading-5 text-muted-foreground", children: "Matches the right version to your background." })
   ] });
 }
 
 // src/ui/socials-display-panel.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function DisplaySwitch({
   label,
   checked,
   disabled,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "span",
       {
         className: cn(
@@ -11995,7 +12630,7 @@ function DisplaySwitch({
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "button",
       {
         type: "button",
@@ -12009,7 +12644,7 @@ function DisplaySwitch({
           checked ? "bg-primary" : "bg-primary-50",
           disabled ? "cursor-default opacity-50" : "cursor-pointer"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "span",
           {
             className: cn(
@@ -12023,8 +12658,8 @@ function DisplaySwitch({
   ] });
 }
 function SocialsDisplayPanel({ display, onChange, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       DisplaySwitch,
       {
         label: "Text",
@@ -12033,7 +12668,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
         onChange: (text) => onChange({ ...display, text })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       DisplaySwitch,
       {
         label: "Icon",
@@ -12593,8 +13228,8 @@ function useNavItemDrag({
 }
 
 // src/ui/footer-container-chrome.tsx
-var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function FooterContainerChrome({
   rect,
   onAdd,
@@ -12602,7 +13237,7 @@ function FooterContainerChrome({
 }) {
   const chromeGap = 6;
   const buttonMargin = 7;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-ohw-footer-container-chrome": "",
@@ -12614,8 +13249,8 @@ function FooterContainerChrome({
         width: rect.width + chromeGap * 2,
         height: rect.height + chromeGap * 2
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "button",
           {
             type: "button",
@@ -12634,10 +13269,10 @@ function FooterContainerChrome({
               if (addDisabled) return;
               onAdd();
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
       ] })
     }
   ) });
@@ -13097,14 +13732,14 @@ function deleteSelectedNavFooterItem(deps) {
 }
 
 // src/ui/navbar-container-chrome.tsx
-var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function NavbarContainerChrome({
   rect,
   onAdd
 }) {
   const chromeGap = 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       "data-ohw-navbar-container-chrome": "",
@@ -13116,7 +13751,7 @@ function NavbarContainerChrome({
         width: rect.width + chromeGap * 2,
         height: rect.height + chromeGap * 2
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "button",
         {
           type: "button",
@@ -13133,7 +13768,7 @@ function NavbarContainerChrome({
             e.stopPropagation();
             onAdd();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
         }
       )
     }
@@ -13142,7 +13777,7 @@ function NavbarContainerChrome({
 
 // src/ui/drop-indicator.tsx
 var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var dropIndicatorVariants = cva(
   "ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
   {
@@ -13166,7 +13801,7 @@ var dropIndicatorVariants = cva(
 );
 var DropIndicator = React10.forwardRef(
   ({ className, direction, state, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         ref,
@@ -13183,7 +13818,7 @@ var DropIndicator = React10.forwardRef(
 DropIndicator.displayName = "DropIndicator";
 
 // src/ui/badge.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -13201,12 +13836,12 @@ var badgeVariants = cva(
   }
 );
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/OhhwellsBridge.tsx
-var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var PRIMARY3 = "#0885FE";
 var IMAGE_FADE_MS = 300;
 function runOpacityFade(el, onDone) {
@@ -13375,7 +14010,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
     const root = (0, import_client2.createRoot)(container);
     (0, import_react_dom3.flushSync)(() => {
       root.render(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           SchedulingWidget,
           {
             notifyOnConnect,
@@ -13490,7 +14125,7 @@ function isIconEditable(el) {
   return el.dataset.ohwEditable === "icon";
 }
 var MEDIA_SELECTOR = '[data-ohw-editable="image"], [data-ohw-editable="bg-image"], [data-ohw-editable="video"]';
-var NON_MEDIA_SELECTOR = '[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="icon"])';
+var NON_MEDIA_SELECTOR = '[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="icon"]):not([data-ohw-editable="form"])';
 function getVideoEl2(el) {
   return el instanceof HTMLVideoElement ? el : el.querySelector("video");
 }
@@ -14051,7 +14686,7 @@ function EditGlowChrome({
   hideHandle = false
 }) {
   const GAP = SELECTION_CHROME_GAP2;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       ref: elRef,
@@ -14066,7 +14701,7 @@ function EditGlowChrome({
         zIndex: 2147483646
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             style: {
@@ -14079,7 +14714,7 @@ function EditGlowChrome({
             }
           }
         ),
-        reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             "data-ohw-drag-handle-container": "",
@@ -14091,7 +14726,7 @@ function EditGlowChrome({
               transform: "translate(calc(-100% - 7px), -50%)",
               pointerEvents: dragDisabled ? "none" : "auto"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               DragHandle,
               {
                 "aria-label": `Reorder ${reorderHrefKey}`,
@@ -14301,7 +14936,7 @@ function FloatingToolbar({
     return () => ro.disconnect();
   }, [showEditLink, activeCommands]);
   const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
       ref: setRefs,
@@ -14313,12 +14948,12 @@ function FloatingToolbar({
         zIndex: 2147483647,
         pointerEvents: "auto"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(CustomToolbar, { children: [
-        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react16.default.Fragment, { children: [
-          gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomToolbarDivider, {}),
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(CustomToolbar, { children: [
+        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react16.default.Fragment, { children: [
+          gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomToolbarDivider, {}),
           btns.map((btn) => {
             const isActive = activeCommands.has(btn.cmd);
-            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               CustomToolbarButton,
               {
                 title: btn.title,
@@ -14327,7 +14962,7 @@ function FloatingToolbar({
                   e.preventDefault();
                   onCommand(btn.cmd);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   "svg",
                   {
                     width: "16",
@@ -14348,7 +14983,7 @@ function FloatingToolbar({
             );
           })
         ] }, gi)),
-        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           CustomToolbarButton,
           {
             type: "button",
@@ -14362,7 +14997,7 @@ function FloatingToolbar({
               e.preventDefault();
               e.stopPropagation();
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Link, { className: "size-4 shrink-0", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Link, { className: "size-4 shrink-0", "aria-hidden": true })
           }
         ) : null
       ] })
@@ -14379,7 +15014,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -14393,7 +15028,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -14516,6 +15151,157 @@ function OhhwellsBridge() {
   const sectionsLoadedRef = (0, import_react16.useRef)(false);
   const pendingScheduleConfigRequests = (0, import_react16.useRef)([]);
   const [toolbarRect, setToolbarRect] = (0, import_react16.useState)(null);
+  const [formPickRect, setFormPickRect] = (0, import_react16.useState)(null);
+  const formPickElRef = (0, import_react16.useRef)(null);
+  const [formViewState, setFormViewStateUi] = (0, import_react16.useState)("default");
+  const [formPickCount, setFormPickCount] = (0, import_react16.useState)(null);
+  const [formHoverRect, setFormHoverRect] = (0, import_react16.useState)(null);
+  const formHoverElRef = (0, import_react16.useRef)(null);
+  const [fieldPickRect, setFieldPickRect] = (0, import_react16.useState)(null);
+  const fieldPickElRef = (0, import_react16.useRef)(null);
+  const [fieldPickState, setFieldPickState] = (0, import_react16.useState)(null);
+  const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react16.useState)(false);
+  const clearFormPick = (0, import_react16.useCallback)(() => {
+    const form = formPickElRef.current;
+    if (form) {
+      const key = formKeyOf(form);
+      if (key) setFormViewState(form, key, "default", DEFAULT_SUCCESS_TEXT);
+    }
+    setFormViewStateUi("default");
+    setFormPickCount(null);
+    setFieldTypePickerOpen(false);
+    fieldPickElRef.current = null;
+    setFieldPickRect(null);
+    setFieldPickState(null);
+    formPickElRef.current = null;
+    setFormPickRect(null);
+  }, []);
+  const clearFieldPick = (0, import_react16.useCallback)(() => {
+    const wrapper = fieldPickElRef.current;
+    if (commitPlaceholderEdit(wrapper) && wrapper) {
+      const form = wrapper.closest('[data-ohw-editable="form"]');
+      if (form) persistFieldsRef.current(form);
+    }
+    fieldPickElRef.current = null;
+    setFieldPickRect(null);
+    setFieldPickState(null);
+  }, []);
+  const persistFieldsRef = (0, import_react16.useRef)(() => {
+  });
+  const persistFields = (0, import_react16.useCallback)(
+    (form) => {
+      const key = formKeyOf(form);
+      if (!key) return;
+      const json = JSON.stringify(readFieldsFromDom(form));
+      editContentRef.current = { ...editContentRef.current, [fieldsKey(key)]: json };
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: fieldsKey(key), text: json }] });
+    },
+    []
+  );
+  persistFieldsRef.current = persistFields;
+  const selectField = (0, import_react16.useCallback)((wrapper) => {
+    if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
+      commitPlaceholderEdit(fieldPickElRef.current);
+    }
+    syncRequiredMark(wrapper);
+    beginPlaceholderEdit(wrapper);
+    formHoverElRef.current = null;
+    setFormHoverRect(null);
+    fieldPickElRef.current = wrapper;
+    setFieldPickRect(wrapper.getBoundingClientRect());
+    setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
+    setFieldTypePickerOpen(false);
+  }, []);
+  const withSelectedField = (0, import_react16.useCallback)(
+    (run) => {
+      const wrapper = fieldPickElRef.current;
+      const form = formPickElRef.current;
+      if (!wrapper || !form) return;
+      commitPlaceholderEdit(wrapper);
+      run(form, wrapper);
+      beginPlaceholderEdit(wrapper);
+      persistFields(form);
+      setFormPickRect(form.getBoundingClientRect());
+    },
+    [persistFields]
+  );
+  const handleFieldTypeChange = (0, import_react16.useCallback)(
+    (type) => withSelectedField((_form, wrapper) => {
+      applyFieldType(wrapper, type);
+      selectField(wrapper);
+    }),
+    [selectField, withSelectedField]
+  );
+  const handleFieldRequiredToggle = (0, import_react16.useCallback)(
+    () => withSelectedField((_form, wrapper) => {
+      setFieldRequired(wrapper, !isFieldRequired(wrapper));
+      selectField(wrapper);
+    }),
+    [selectField, withSelectedField]
+  );
+  const handleFieldDuplicate = (0, import_react16.useCallback)(
+    () => withSelectedField((form, wrapper) => {
+      const copy = duplicateField(form, wrapper);
+      selectField(copy);
+    }),
+    [selectField, withSelectedField]
+  );
+  const handleFieldDelete = (0, import_react16.useCallback)(
+    () => withSelectedField((_form, wrapper) => {
+      removeField(wrapper);
+      clearFieldPick();
+      postToParentRef.current({ type: "ow:toast", title: "Form field deleted" });
+    }),
+    [clearFieldPick, withSelectedField]
+  );
+  const handleAddField = (0, import_react16.useCallback)(
+    (type) => {
+      const form = formPickElRef.current;
+      if (!form) return;
+      const wrapper = insertField(form, type);
+      setFieldTypePickerOpen(false);
+      if (!wrapper) return;
+      persistFields(form);
+      setFormPickRect(null);
+      requestAnimationFrame(() => {
+        selectField(wrapper);
+        wrapper.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      });
+    },
+    [persistFields, selectField]
+  );
+  const fieldDragRef = (0, import_react16.useRef)(null);
+  const handleFieldDragStart = (0, import_react16.useCallback)(() => {
+    const wrapper = fieldPickElRef.current;
+    const form = formPickElRef.current;
+    if (!wrapper || !form) return;
+    fieldDragRef.current = { key: fieldKeyOf(wrapper), form };
+  }, []);
+  const handleFieldDragEnd = (0, import_react16.useCallback)(() => {
+    fieldDragRef.current = null;
+    setFieldDropIndex(null);
+  }, []);
+  const [fieldDropIndex, setFieldDropIndex] = (0, import_react16.useState)(null);
+  const clearFormPickRef = (0, import_react16.useRef)(clearFormPick);
+  clearFormPickRef.current = clearFormPick;
+  (0, import_react16.useEffect)(() => {
+    const el = fieldPickElRef.current;
+    if (!el || fieldPickRect === null) return;
+    const observer = new ResizeObserver(() => {
+      if (fieldPickElRef.current === el) setFieldPickRect(el.getBoundingClientRect());
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [fieldPickRect !== null, fieldPickState]);
+  (0, import_react16.useEffect)(() => {
+    const el = formPickElRef.current;
+    if (!el || formPickRect === null) return;
+    const observer = new ResizeObserver(() => {
+      if (formPickElRef.current === el) setFormPickRect(el.getBoundingClientRect());
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [formPickRect !== null, formViewState]);
   const [toolbarVariant, setToolbarVariant] = (0, import_react16.useState)("none");
   const toolbarVariantRef = (0, import_react16.useRef)("none");
   toolbarVariantRef.current = toolbarVariant;
@@ -14537,7 +15323,7 @@ function OhhwellsBridge() {
   (0, import_react16.useEffect)(() => {
     const sync = () => {
       const el = document.querySelector(
-        "[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key])"
+        '[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
       );
       const target = el && !el.closest("[data-ohw-href-key]") ? el : null;
       if (!target) {
@@ -15669,6 +16455,7 @@ function OhhwellsBridge() {
     setFloatingPanel(null);
     setLogoSizeDraft(null);
   }, []);
+  closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
   const closeFloatingPanelAndDeselect = (0, import_react16.useCallback)(() => {
     setFloatingPanel(null);
     setLogoSizeDraft(null);
@@ -15832,14 +16619,14 @@ function OhhwellsBridge() {
     }
     const applyContent = (content) => {
       const imageLoads = [];
-      if (typeof content[AI_SECTIONS_KEY] === "string") {
-        aiSectionsRef.current = content[AI_SECTIONS_KEY];
-        applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
-      }
       if (typeof content[BRAND_KIT_KEY] === "string") {
         brandKitRef.current = content[BRAND_KIT_KEY];
         applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
       }
+      if (typeof content[AI_SECTIONS_KEY] === "string") {
+        aiSectionsRef.current = content[AI_SECTIONS_KEY];
+        applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
+      }
       if (typeof content[STYLE_STORE_KEY] === "string") {
         stylesRef.current = content[STYLE_STORE_KEY];
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
@@ -15924,6 +16711,98 @@ function OhhwellsBridge() {
       cancelled = true;
     };
   }, [subdomain, isEditMode]);
+  (0, import_react16.useEffect)(() => {
+    if (!isEditMode) return;
+    const resolveIndex = (form, clientY) => {
+      const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
+      for (let i = 0; i < wrappers.length; i += 1) {
+        const rect = wrappers[i].getBoundingClientRect();
+        if (clientY < rect.top + rect.height / 2) return i;
+      }
+      return wrappers.length;
+    };
+    const onDragOver = (e) => {
+      const session = fieldDragRef.current;
+      if (!session) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+      setFieldDropIndex(resolveIndex(session.form, e.clientY));
+    };
+    const onDrop = (e) => {
+      const session = fieldDragRef.current;
+      if (!session) return;
+      e.preventDefault();
+      e.stopPropagation();
+      moveField(session.form, session.key, resolveIndex(session.form, e.clientY));
+      persistFields(session.form);
+      const moved = listFieldWrappers(session.form).find((el) => fieldKeyOf(el) === session.key);
+      if (moved) selectField(moved);
+      setFormPickRect(session.form.getBoundingClientRect());
+      fieldDragRef.current = null;
+      setFieldDropIndex(null);
+    };
+    window.addEventListener("dragover", onDragOver, true);
+    window.addEventListener("drop", onDrop, true);
+    return () => {
+      window.removeEventListener("dragover", onDragOver, true);
+      window.removeEventListener("drop", onDrop, true);
+    };
+  }, [isEditMode, persistFields, selectField]);
+  (0, import_react16.useEffect)(() => {
+    if (!isEditMode) return;
+    const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
+      markFormFields(form);
+    });
+    mark();
+    const observer = new MutationObserver(() => mark());
+    document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
+      observer.observe(form, { childList: true, subtree: true, characterData: true });
+    });
+    return () => observer.disconnect();
+  }, [isEditMode, fetchState, pathname]);
+  (0, import_react16.useEffect)(() => {
+    if (!isEditMode) return;
+    let saveTimer = null;
+    const onInput = (e) => {
+      const input = e.target;
+      if (!input || !("value" in input)) return;
+      const wrapper = getFieldWrapper(input);
+      if (!wrapper || wrapper !== fieldPickElRef.current) return;
+      if (saveTimer) clearTimeout(saveTimer);
+      saveTimer = setTimeout(() => {
+        const form = formPickElRef.current;
+        if (!form) return;
+        const previous = input.getAttribute("placeholder");
+        input.setAttribute("placeholder", input.value);
+        persistFields(form);
+        input.setAttribute("placeholder", previous ?? "");
+      }, 400);
+    };
+    document.addEventListener("input", onInput, true);
+    return () => document.removeEventListener("input", onInput, true);
+  }, [isEditMode, persistFields]);
+  (0, import_react16.useEffect)(() => {
+    if (isEditMode || fetchState !== "done") return;
+    const content = contentCache.get(subdomain) ?? {};
+    document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
+      reconcileFieldsFromContent(form, content);
+    });
+  }, [isEditMode, fetchState, subdomain]);
+  (0, import_react16.useEffect)(() => {
+    if (!isEditMode) return;
+    const swallow = (e) => {
+      const target = e.target;
+      if (target && getFormElement(target)) e.preventDefault();
+    };
+    document.addEventListener("submit", swallow, true);
+    return () => document.removeEventListener("submit", swallow, true);
+  }, [isEditMode]);
+  (0, import_react16.useEffect)(() => {
+    if (isEditMode || fetchState !== "done") return;
+    const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+    bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
+  }, [isEditMode, fetchState, subdomain]);
   (0, import_react16.useEffect)(() => {
     if (!subdomain || isEditMode) return;
     let debounceTimer = null;
@@ -16157,7 +17036,9 @@ function OhhwellsBridge() {
       [style*="100vh"] { min-height: ${initialVh}px !important; height: ${initialVh}px !important; }
       [style*="100svh"] { min-height: ${initialVh}px !important; height: ${initialVh}px !important; }
       [style*="100dvh"] { min-height: ${initialVh}px !important; height: ${initialVh}px !important; }
-      [data-ohw-editable] {
+      /* Not the form: it is a layout container (flex/grid with gaps), and forcing block
+         crushed its fields together (OHH-490). */
+      [data-ohw-editable]:not([data-ohw-editable="form"]) {
         display: block;
       }
       /* Body text (no item-action toolbar) \u2014 first click enters text edit \u2192 I-beam.
@@ -16183,6 +17064,35 @@ function OhhwellsBridge() {
       [data-ohw-editable="video"], [data-ohw-editable="video"] *,
       [data-ohw-editable="bg-image"], [data-ohw-editable="bg-image"] * { cursor: pointer !important; }
       [data-ohw-editable="link"], [data-ohw-editable="link"] * { cursor: pointer !important; }
+      /* A form field is a design surface in the editor: its input takes the pointer so the
+         field can be picked and hovered from anywhere inside it (OHH-642). */
+      [data-ohw-editable="form"] [data-ohw-form-field] input,
+      [data-ohw-editable="form"] [data-ohw-form-field] textarea,
+      [data-ohw-editable="form"] [data-ohw-form-field] label {
+        pointer-events: auto !important;
+        cursor: pointer !important;
+      }
+      /* While a field is selected its placeholder is being written in the value, so the
+         text reads as a placeholder rather than as an answer (OHH-642). */
+      /* A field is a design surface here: dragging its corner resized it past the form and
+         left the chrome behind. Height stays adjustable, width does not (OHH-642). */
+      [data-ohw-editable="form"] [data-ohw-form-field] textarea {
+        resize: vertical !important;
+        max-width: 100% !important;
+      }
+      [data-ohw-editable="form"] [data-ohw-form-field] input,
+      [data-ohw-editable="form"] [data-ohw-form-field] textarea {
+        box-sizing: border-box !important;
+        width: 100% !important;
+      }
+      /* Somewhere to click the block itself, on every side (OHH-642) \u2014 editor only. */
+      [data-ohw-editable="form"] {
+        padding: 18px !important;
+      }
+      [data-ohw-placeholder-edit] {
+        color: color-mix(in srgb, currentColor 55%, transparent) !important;
+        cursor: text !important;
+      }
       /* Text hover chrome is drawn by the overlay (see hoveredTextRect) \u2014 the CSS outline
          that used to draw it dashes denser than the overlay border, so identical specs
          still read as two different frames (OHH-695). The attribute stays: hover paths
@@ -16269,6 +17179,49 @@ function OhhwellsBridge() {
       if (target.closest("[data-ohw-max-badge]")) return;
       if (isInsideLinkEditor(target)) return;
       if (isInsideFloatingPanel(target)) return;
+      if (target.closest("[data-ohw-form-toolbar]")) return;
+      if (target.closest(
+        '[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
+      )) {
+        return;
+      }
+      {
+        const formEl = getFormElement(target);
+        const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
+        if (formEl && formKeyOf(formEl) && !onSuccessText) {
+          const fieldEl = getFieldWrapper(target);
+          if (fieldEl) {
+            const label = target.closest("label");
+            if (label && fieldPickElRef.current === fieldEl) return;
+            e.preventDefault();
+            e.stopPropagation();
+            deactivateRef.current();
+            deselectRef.current();
+            formPickElRef.current = formEl;
+            setFormPickRect(null);
+            selectField(fieldEl);
+            if (!label) fieldEl.querySelector("input, textarea")?.focus();
+            return;
+          }
+          clearFieldPick();
+          e.preventDefault();
+          e.stopPropagation();
+          deactivateRef.current();
+          deselectRef.current();
+          markFormFields(formEl);
+          formHoverElRef.current = null;
+          setFormHoverRect(null);
+          formPickElRef.current = formEl;
+          setFormPickRect(formEl.getBoundingClientRect());
+          postToParentRef.current({
+            type: "ow:form-selected",
+            formKey: formKeyOf(formEl),
+            hasLongText: formHasLongText(formEl)
+          });
+          return;
+        }
+        if (!formEl && formPickElRef.current) clearFormPick();
+      }
       if (target.closest('[data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"]')) {
         const beneath = document.elementsFromPoint(e.clientX, e.clientY).find(
           (el) => el instanceof HTMLElement && !el.closest("[data-ohw-bridge-root]") && el.closest("[data-ohw-section]") != null
@@ -16608,6 +17561,26 @@ function OhhwellsBridge() {
         return;
       }
       const editable = target.closest("[data-ohw-editable]");
+      const hoverForm = getFormElement(target);
+      if (hoverForm) {
+        const hoverField = getFieldWrapper(target);
+        const hoverTarget = hoverField ?? hoverForm;
+        const selectedHere = hoverTarget === fieldPickElRef.current || hoverTarget === formPickElRef.current;
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+        if (selectedHere) {
+          formHoverElRef.current = null;
+          setFormHoverRect(null);
+        } else {
+          formHoverElRef.current = hoverTarget;
+          setFormHoverRect(hoverTarget.getBoundingClientRect());
+        }
+        return;
+      }
+      if (formHoverElRef.current) {
+        formHoverElRef.current = null;
+        setFormHoverRect(null);
+      }
       if (!editable) return;
       const selected = selectedElRef.current;
       if (selected && (selected === editable || selected.contains(editable))) return;
@@ -17244,6 +18217,13 @@ function OhhwellsBridge() {
         setSectionGap(null);
       }
     };
+    const pointOwnedByFloatingPanel = (clientX, clientY) => {
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging")) return true;
+      const panel = document.querySelector("[data-ohw-floating-panel]");
+      if (!panel) return false;
+      const rect = panel.getBoundingClientRect();
+      return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+    };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
       if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
@@ -17517,14 +18497,14 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:hydrate") return;
       const content = e.data.content;
       if (!content) return;
-      if (typeof content[AI_SECTIONS_KEY] === "string") {
-        aiSectionsRef.current = content[AI_SECTIONS_KEY];
-        applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
-      }
       if (typeof content[BRAND_KIT_KEY] === "string") {
         brandKitRef.current = content[BRAND_KIT_KEY];
         applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
       }
+      if (typeof content[AI_SECTIONS_KEY] === "string") {
+        aiSectionsRef.current = content[AI_SECTIONS_KEY];
+        applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
+      }
       if (typeof content[STYLE_STORE_KEY] === "string") {
         stylesRef.current = content[STYLE_STORE_KEY];
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
@@ -17809,6 +18789,13 @@ function OhhwellsBridge() {
         }
       }
     };
+    const handleFormCount = (e) => {
+      if (e.data?.type !== "ow:form-count") return;
+      const form = formPickElRef.current;
+      if (!form || formKeyOf(form) !== e.data.formKey) return;
+      setFormPickCount(typeof e.data.count === "number" ? e.data.count : null);
+    };
+    window.addEventListener("message", handleFormCount);
     window.addEventListener("message", handleUiEscape);
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && document.querySelector("[data-ohw-section-picker]")) return;
@@ -17828,6 +18815,11 @@ function OhhwellsBridge() {
         closeFloatingPanelOnlyRef.current();
         return;
       }
+      if (e.key === "Escape" && formPickElRef.current) {
+        e.preventDefault();
+        clearFormPickRef.current();
+        return;
+      }
       if (e.key === "Escape" && selectedElRef.current && !activeElRef.current) {
         if (toolbarVariantRef.current === "logo") {
           deselectRef.current();
@@ -18380,6 +19372,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleGetBrand);
       window.removeEventListener("message", handleDeactivate);
       window.removeEventListener("message", handleToastAction);
+      window.removeEventListener("message", handleFormCount);
       window.removeEventListener("message", handleUiEscape);
       autoSaveTimers.current.forEach(clearTimeout);
       autoSaveTimers.current.clear();
@@ -18403,7 +19396,9 @@ function OhhwellsBridge() {
       if (footerDragRef.current) return;
       const target = e.target;
       if (!target) return;
-      if (target.closest('[data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-toolbar], [data-ohw-item-toolbar-anchor], [data-ohw-link-popover-root], [data-ohw-floating-panel]')) {
+      if (target.closest(
+        '[data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-toolbar], [data-ohw-item-toolbar-anchor], [data-ohw-link-popover-root], [data-ohw-floating-panel], [data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"]'
+      )) {
         return;
       }
       if (target.closest("[data-ohw-item-drag-surface]")) return;
@@ -18581,7 +19576,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.64",
+        bridgeVersion: "0.1.65",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -18976,10 +19971,10 @@ function OhhwellsBridge() {
     [postToParent2]
   );
   return bridgeRoot ? (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-      isEditMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
-      Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
+      isEditMode && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
+      Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         MediaOverlay,
         {
           hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
@@ -18990,7 +19985,7 @@ function OhhwellsBridge() {
         },
         `uploading-${key}`
       )),
-      mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         MediaOverlay,
         {
           hover: mediaHover,
@@ -18999,11 +19994,11 @@ function OhhwellsBridge() {
           onVideoSettingsChange: handleVideoSettingsChange
         }
       ),
-      carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
-      siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
-      siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
-      isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
-      isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
+      siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
+      siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
+      isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
+      isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
           className: "pointer-events-none fixed z-2147483646",
@@ -19013,7 +20008,7 @@ function OhhwellsBridge() {
             width: slot.width,
             height: slot.height
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             DropIndicator,
             {
               direction: slot.direction,
@@ -19024,7 +20019,7 @@ function OhhwellsBridge() {
         },
         `footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
       )),
-      isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
           className: "pointer-events-none fixed z-2147483646",
@@ -19034,7 +20029,7 @@ function OhhwellsBridge() {
             width: slot.width,
             height: slot.height
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             DropIndicator,
             {
               direction: slot.direction,
@@ -19045,11 +20040,179 @@ function OhhwellsBridge() {
         },
         `nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
       )),
-      hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
-      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
-      hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
-      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
-      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
+      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
+      hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
+      formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        ItemInteractionLayer,
+        {
+          rect: formPickRect,
+          state: "active-top",
+          itemDragSurface: false,
+          toolbarAlign: "left",
+          chromeGap: 24,
+          toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            "div",
+            {
+              "data-ohw-form-toolbar": "",
+              className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Add field",
+                    className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
+                    onClick: () => setFieldTypePickerOpen((open) => !open),
+                    "data-ohw-add-field": "",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Plus, { size: 15, "aria-hidden": true })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-semibold text-foreground transition-colors hover:bg-muted/80",
+                    onClick: () => {
+                      const form = formPickElRef.current;
+                      if (!form) return;
+                      postToParent2({
+                        type: "ow:form-pick",
+                        formKey: formKeyOf(form),
+                        hasLongText: formHasLongText(form)
+                      });
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Settings, { size: 14, "aria-hidden": true }),
+                      "Form settings",
+                      formPickCount ? (
+                        // Counter pill, per the design — not a text suffix.
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                          "span",
+                          {
+                            "data-ohw-form-count": "",
+                            className: "ml-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground",
+                            children: formPickCount
+                          }
+                        )
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-semibold text-foreground transition-colors hover:bg-muted/80",
+                    onClick: () => {
+                      const form = formPickElRef.current;
+                      if (!form) return;
+                      postToParent2({
+                        type: "ow:form-submissions",
+                        formKey: formKeyOf(form),
+                        hasLongText: formHasLongText(form)
+                      });
+                    },
+                    "data-ohw-view-submissions": "",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Table, { size: 14, "aria-hidden": true }),
+                      "View submissions"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": formViewState === state,
+                    className: "rounded-md px-2.5 py-1 text-[13px] font-semibold capitalize transition-colors " + (formViewState === state ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+                    onClick: () => {
+                      const form = formPickElRef.current;
+                      const key = form ? formKeyOf(form) : null;
+                      if (!form || !key) return;
+                      const initial = editContentRef.current[formSuccessKey(key)] ?? DEFAULT_SUCCESS_TEXT;
+                      setFormViewState(form, key, state, initial);
+                      setFormViewStateUi(state);
+                      setFormPickRect(form.getBoundingClientRect());
+                      if (state === "success") {
+                        const successEl = form.querySelector(`[${SUCCESS_TEXT_ATTR}]`);
+                        if (successEl) requestAnimationFrame(() => activateRef.current(successEl));
+                      } else {
+                        deactivateRef.current();
+                      }
+                    },
+                    children: state
+                  },
+                  state
+                )) })
+              ]
+            }
+          )
+        }
+      ),
+      formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        ItemInteractionLayer,
+        {
+          rect: formHoverRect,
+          state: "hover",
+          chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
+        }
+      ),
+      fieldPickRect && fieldPickState && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        ItemInteractionLayer,
+        {
+          rect: fieldPickRect,
+          state: "active-top",
+          itemDragSurface: false,
+          toolbarAlign: "left",
+          chromeGap: 10,
+          showHandle: true,
+          dragHandleLabel: "Reorder field",
+          onDragHandleDragStart: handleFieldDragStart,
+          onDragHandleDragEnd: handleFieldDragEnd,
+          toolbar: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            FormFieldToolbar,
+            {
+              type: fieldPickState.type,
+              required: fieldPickState.required,
+              onTypeChange: handleFieldTypeChange,
+              onRequiredToggle: handleFieldRequiredToggle,
+              onDuplicate: handleFieldDuplicate,
+              onDelete: handleFieldDelete
+            }
+          )
+        }
+      ),
+      fieldDropIndex !== null && formPickElRef.current ? (() => {
+        const wrappers = listFieldWrappers(formPickElRef.current).filter(
+          (el) => fieldKeyOf(el) !== fieldDragRef.current?.key
+        );
+        const anchor = wrappers[Math.min(fieldDropIndex, wrappers.length - 1)];
+        if (!anchor) return null;
+        const rect = anchor.getBoundingClientRect();
+        const atEnd = fieldDropIndex >= wrappers.length;
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "div",
+          {
+            className: "pointer-events-none fixed z-[2147483644]",
+            style: { top: atEnd ? rect.bottom : rect.top, left: rect.left, width: rect.width },
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropIndicator, { direction: "horizontal", state: "dragActive" })
+          }
+        );
+      })() : null,
+      fieldTypePickerOpen && formPickRect && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        "div",
+        {
+          className: "pointer-events-none fixed z-[2147483645]",
+          style: { top: formPickRect.top + 16, left: formPickRect.left + 24 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FieldTypePicker, { onPick: handleAddField })
+        }
+      ),
+      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
+      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         FooterContainerChrome,
         {
           rect: toolbarRect,
@@ -19057,7 +20220,7 @@ function OhhwellsBridge() {
           addDisabled: !canAddFooterColumn()
         }
       ),
-      toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         ItemInteractionLayer,
         {
           rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
@@ -19072,7 +20235,7 @@ function OhhwellsBridge() {
           onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
           onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
           itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection,
-          toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             ItemActionToolbar,
             {
               onEditLink: openLinkPopoverForSelected,
@@ -19108,8 +20271,8 @@ function OhhwellsBridge() {
           ) : void 0
         }
       ),
-      toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           EditGlowChrome,
           {
             rect: toolbarRect,
@@ -19119,7 +20282,7 @@ function OhhwellsBridge() {
             hideHandle: isItemDragging
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           FloatingToolbar,
           {
             rect: toolbarRect,
@@ -19132,7 +20295,7 @@ function OhhwellsBridge() {
           }
         )
       ] }),
-      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
           "data-ohw-max-badge": "",
@@ -19158,7 +20321,7 @@ function OhhwellsBridge() {
           ]
         }
       ),
-      toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         StateToggle,
         {
           rect: toggleState.rect,
@@ -19167,15 +20330,15 @@ function OhhwellsBridge() {
           onStateChange: handleStateChange
         }
       ),
-      sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
           "data-ohw-section-insert-line": "",
           className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
           style: { top: sectionGap.y, transform: "translateY(-50%)" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               Badge,
               {
                 className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
@@ -19192,11 +20355,11 @@ function OhhwellsBridge() {
                 children: "Add Section"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
           ]
         }
       ),
-      linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         LinkPopover,
         {
           panelRef: linkPopoverPanelRef,
@@ -19213,7 +20376,7 @@ function OhhwellsBridge() {
         },
         linkPopover.key
       ) : null,
-      floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         FloatingPanel,
         {
           open: true,
@@ -19223,7 +20386,7 @@ function OhhwellsBridge() {
           onPositionChange: setFloatingPanelPos,
           parentScroll: parentScrollSnap ?? parentScrollRef.current,
           onClose: closeFloatingPanelOnly,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             SocialsDisplayPanel,
             {
               display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
@@ -19235,7 +20398,7 @@ function OhhwellsBridge() {
           )
         }
       ) : null,
-      floatingPanel && floatingPanel.kind === "logo-size" && logoSizeDraft ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      floatingPanel && floatingPanel.kind === "logo-size" && logoSizeDraft ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         FloatingPanel,
         {
           open: true,
@@ -19245,7 +20408,7 @@ function OhhwellsBridge() {
           onPositionChange: setFloatingPanelPos,
           parentScroll: parentScrollSnap ?? parentScrollRef.current,
           onClose: closeFloatingPanelAndDeselect,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             LogoSizePanel,
             {
               viewport: editorViewport,
@@ -19293,10 +20456,10 @@ function OhhwellsBridge() {
 
 // src/ui/EmptySection.tsx
 var import_link = __toESM(require("next/link"), 1);
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "p",
       {
         style: {
@@ -19308,10 +20471,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
           color: "var(--brand-accent)",
           marginBottom: "1.5rem"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "h1",
       {
         style: {
@@ -19326,7 +20489,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
         children: title
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "p",
       {
         style: {