@ohhwells/bridge 0.1.92 → 0.1.93-next.281

package/dist/index.js

@@ -70,6 +70,9 @@ function isRenderableTree(value) {
 // src/lib/ai-sections-store.ts
 var AI_SECTIONS_KEY = "__ohw_ai_sections";
 var AI_SLOT_KEY_PREFIX = "ai.";
+function aiSlotKeyPrefixFor(sectionId) {
+  return `${AI_SLOT_KEY_PREFIX}${sectionId}.`;
+}
 var EMPTY_AI_SECTIONS = { v: 1, sections: [] };
 function parseAiSectionsState(raw) {
   if (!raw) return EMPTY_AI_SECTIONS;
@@ -181,6 +184,33 @@ function deleteSectionFromState(state, sectionId) {
   if (removed.includes(sectionId)) return state;
   return { ...state, v: 1, sections: state.sections, removed: [...removed, sectionId] };
 }
+function reapRemovedAiSections(state, store, removedIds, excludeIds = /* @__PURE__ */ new Set()) {
+  const generated = new Set(state.sections.map((entry) => entry.id));
+  const reapedIds = [...new Set(removedIds)].filter((id) => generated.has(id) && !excludeIds.has(id));
+  if (reapedIds.length === 0) {
+    return { state, store, reapedIds: [], slotPrefixes: [], changed: false };
+  }
+  const reaped = new Set(reapedIds);
+  const slotPrefixes = reapedIds.map(aiSlotKeyPrefixFor);
+  const nextState = {
+    ...state,
+    v: 1,
+    sections: state.sections.filter((entry) => !reaped.has(entry.id))
+  };
+  let nextStore = store;
+  if (store) {
+    const sections = {};
+    for (const [key, override] of Object.entries(store.sections)) {
+      if (!reaped.has(key)) sections[key] = override;
+    }
+    const nodes = {};
+    for (const [key, override] of Object.entries(store.nodes)) {
+      if (!slotPrefixes.some((prefix) => key.startsWith(prefix))) nodes[key] = override;
+    }
+    nextStore = { v: 1, sections, nodes };
+  }
+  return { state: nextState, store: nextStore, reapedIds, slotPrefixes, changed: true };
+}
 
 // src/lib/brand-chrome.ts
 var BRAND_NAME_KEY = "__ohw_brand_name";
@@ -249,16 +279,17 @@ var LEGACY_BRAND_VAR_NAMES = [
   "text-muted",
   "surface",
   "border",
-  "on-primary",
-  "navbar-background"
+  "on-primary"
 ].map((role) => `--brand-${role}`);
 var FONT_VARS = {
   heading: ["--font-heading", "--font-display", "--brand-font-heading"],
   body: ["--font-body", "--brand-font-body"]
 };
 var BRAND_FONT_LINK_ID = "ohw-brand-fonts";
-function brandColorVars(kit) {
-  const { dark, primary, accent, light } = kit.palette;
+var CUSTOM_FONT_STYLE_ID = "ohw-brand-custom-fonts";
+var CUSTOM_FONT_FORMATS = /* @__PURE__ */ new Set(["woff2", "woff", "truetype", "opentype"]);
+function brandColorVars(palette) {
+  const { dark, primary, accent, light } = palette;
   const mix = (a, aPct, b) => `color-mix(in srgb, ${a} ${aPct}%, ${b})`;
   const surface = mix(light, 95, dark);
   const border = mix(light, 85, dark);
@@ -281,22 +312,42 @@ function brandColorVars(kit) {
     "--brand-border": border,
     // Buttons/bands painted in the primary colour assume it's dark/saturated enough to need
     // light text on top — the same assumption LOGO_IMAGE's light-on-dark navbar mark makes.
-    "--brand-on-primary": light,
-    "--brand-navbar-background": dark
+    "--brand-on-primary": light
   };
 }
+function parseCustomFontWeight(raw) {
+  if (typeof raw !== "object" || raw === null) return null;
+  const w = raw;
+  if (typeof w.weight !== "number" || !Number.isFinite(w.weight)) return null;
+  if (typeof w.url !== "string" || !w.url) return null;
+  if (typeof w.format !== "string" || !CUSTOM_FONT_FORMATS.has(w.format)) return null;
+  const weightEnd = typeof w.weightEnd === "number" && Number.isFinite(w.weightEnd) && w.weightEnd > w.weight ? w.weightEnd : void 0;
+  return { weight: w.weight, ...weightEnd !== void 0 ? { weightEnd } : {}, url: w.url, format: w.format };
+}
+function parseCustomFont(raw) {
+  if (typeof raw !== "object" || raw === null) return null;
+  const f = raw;
+  if (typeof f.family !== "string" || !f.family) return null;
+  if (typeof f.label !== "string" || !f.label) return null;
+  if (!Array.isArray(f.weights)) return null;
+  const weights = f.weights.map(parseCustomFontWeight).filter((w) => w !== null);
+  if (weights.length === 0) return null;
+  return { family: f.family, label: f.label, weights };
+}
 function parseBrandKit(raw) {
   if (!raw) return null;
   try {
     const parsed = JSON.parse(raw);
     const p = parsed?.palette;
     const f = parsed?.fonts;
-    if (!p || !f || typeof p.dark !== "string" || typeof p.primary !== "string" || typeof p.accent !== "string" || typeof p.light !== "string" || typeof f.heading !== "string" || typeof f.body !== "string") {
-      return null;
-    }
+    const palette = p && typeof p.dark === "string" && typeof p.primary === "string" && typeof p.accent === "string" && typeof p.light === "string" ? { dark: p.dark, primary: p.primary, accent: p.accent, light: p.light } : void 0;
+    const fonts = f && typeof f.heading === "string" && typeof f.body === "string" ? { heading: f.heading, body: f.body } : void 0;
+    const customFonts = Array.isArray(parsed?.customFonts) ? parsed.customFonts.map(parseCustomFont).filter((c) => c !== null) : void 0;
+    if (!palette && !fonts && !customFonts) return null;
     return {
-      palette: { dark: p.dark, primary: p.primary, accent: p.accent, light: p.light },
-      fonts: { heading: f.heading, body: f.body }
+      ...palette ? { palette } : {},
+      ...fonts ? { fonts } : {},
+      ...customFonts ? { customFonts } : {}
     };
   } catch {
     return null;
@@ -306,11 +357,16 @@ function familyOf(stack) {
   const first = stack.split(",")[0]?.trim() ?? "";
   return first.replace(/^['"]|['"]$/g, "");
 }
+function quoteFamily(family) {
+  return `'${family.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
+}
+var WEIGHT_SCALE = [100, 200, 300, 400, 500, 600, 700, 800, 900];
 function loadBrandFonts(families) {
   const unique = [...new Set(families.map((f) => f.trim()).filter(Boolean))];
   if (unique.length === 0) return;
-  const spec = unique.map((f) => `${f.replace(/ /g, "+")}:400,500,600,700`).join("|");
-  const href = `https://fonts.googleapis.com/css?family=${spec}&display=swap`;
+  const weights = WEIGHT_SCALE.join(";");
+  const spec = unique.map((f) => `family=${f.replace(/ /g, "+")}:wght@${weights}`).join("&");
+  const href = `https://fonts.googleapis.com/css2?${spec}&display=swap`;
   let link = document.getElementById(BRAND_FONT_LINK_ID);
   if (!link) {
     link = document.createElement("link");
@@ -320,18 +376,54 @@ function loadBrandFonts(families) {
   }
   if (link.href !== href) link.href = href;
 }
+function escapeCssString(value) {
+  return value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+}
+function loadCustomFonts(fonts) {
+  const list = fonts ?? [];
+  let style = document.getElementById(CUSTOM_FONT_STYLE_ID);
+  if (list.length === 0) {
+    style?.remove();
+    return;
+  }
+  if (!style) {
+    style = document.createElement("style");
+    style.id = CUSTOM_FONT_STYLE_ID;
+    document.head.appendChild(style);
+  }
+  style.textContent = list.flatMap(
+    (font) => font.weights.map((w) => {
+      const weightDescriptor = w.weightEnd ? `${w.weight} ${w.weightEnd}` : `${w.weight}`;
+      return `@font-face { font-family: '${escapeCssString(font.family)}'; src: url('${escapeCssString(w.url)}') format('${w.format}'); font-weight: ${weightDescriptor}; font-display: swap; }`;
+    })
+  ).join("\n");
+}
 function applyBrandToDom(kit) {
   const root = document.documentElement;
   if (!kit) {
     for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES]) root.style.removeProperty(name);
     for (const name of [...FONT_VARS.heading, ...FONT_VARS.body]) root.style.removeProperty(name);
     document.getElementById(BRAND_FONT_LINK_ID)?.remove();
+    document.getElementById(CUSTOM_FONT_STYLE_ID)?.remove();
     return;
   }
-  for (const [name, value] of Object.entries(brandColorVars(kit))) root.style.setProperty(name, value);
-  for (const name of FONT_VARS.heading) root.style.setProperty(name, kit.fonts.heading);
-  for (const name of FONT_VARS.body) root.style.setProperty(name, kit.fonts.body);
-  loadBrandFonts([familyOf(kit.fonts.heading), familyOf(kit.fonts.body)]);
+  if (kit.palette) {
+    for (const [name, value] of Object.entries(brandColorVars(kit.palette))) root.style.setProperty(name, value);
+  }
+  if (kit.customFonts) {
+    loadCustomFonts(kit.customFonts);
+  }
+  if (kit.fonts) {
+    const heading = quoteFamily(kit.fonts.heading);
+    const body = quoteFamily(kit.fonts.body);
+    for (const name of FONT_VARS.heading) root.style.setProperty(name, heading);
+    for (const name of FONT_VARS.body) root.style.setProperty(name, body);
+    const customFamilies = new Set((kit.customFonts ?? []).map((f) => f.family));
+    const googleFamilies = [familyOf(kit.fonts.heading), familyOf(kit.fonts.body)].filter(
+      (f) => !customFamilies.has(f)
+    );
+    loadBrandFonts(googleFamilies);
+  }
 }
 
 // src/lib/section-styles.ts
@@ -388,6 +480,12 @@ function styleSheetCss() {
       `[data-ohw-style-spacing="${spacing}"] { padding-top: ${px}px !important; padding-bottom: ${px}px !important; }`
     );
   }
+  rules.push(
+    `[data-ohw-style-corners="sharp"] :is(.card, [data-ohw-card], img, picture, figure, [data-ohw-editable="bg-image"]) { border-radius: 0 !important; }`,
+    `[data-ohw-style-corners="sharp"] :has(> img) { border-radius: 0 !important; }`,
+    `[data-ohw-style-corners="rounded"] :is(.card, [data-ohw-card], img, picture, figure, [data-ohw-editable="bg-image"]) { border-radius: max(0.75rem, var(--radius, 0px)) !important; }`,
+    `[data-ohw-style-corners="rounded"] :has(> img) { border-radius: max(0.75rem, var(--radius, 0px)) !important; }`
+  );
   for (const align of ["left", "center", "right"]) {
     rules.push(`[data-ohw-style-align="${align}"] { text-align: ${align} !important; }`);
   }
@@ -418,6 +516,7 @@ var SECTION_ATTRS = {
   headlineScale: "data-ohw-style-headline",
   imageAspect: "data-ohw-style-aspect",
   spacing: "data-ohw-style-spacing",
+  cornerStyle: "data-ohw-style-corners",
   align: "data-ohw-style-align"
 };
 var NODE_WROTE_ATTR = "data-ohw-style-node";
@@ -480,14 +579,39 @@ function buttonSurfaceOf(el) {
 }
 function alignSubjectOf(el) {
   const button = el.closest('[data-ohw-role="button"]');
-  return button?.parentElement ?? el;
+  if (button?.parentElement) return button.parentElement;
+  let subject = el;
+  while (subject.parentElement && !subject.parentElement.hasAttribute("data-ohw-section") && /^inline/.test(getComputedStyle(subject).display)) {
+    subject = subject.parentElement;
+  }
+  const TEXT_ROW = /^(P|LI|H[1-6]|BLOCKQUOTE|FIGCAPTION|DT|DD)$/;
+  const parent = subject.parentElement;
+  if (parent && TEXT_ROW.test(parent.tagName) && /^(inline-)?flex$/.test(getComputedStyle(parent).display)) {
+    return parent;
+  }
+  if (parent && !parent.hasAttribute("data-ohw-section")) {
+    const pcs = getComputedStyle(parent);
+    const children = Array.from(parent.children);
+    const textRowChild = (c) => c.hasAttribute("data-ohw-editable") || (c.textContent ?? "").trim().length === 0 || c.getAttribute("aria-hidden") === "true";
+    if (/^(inline-)?flex$/.test(pcs.display) && pcs.flexDirection.startsWith("row") && children.length > 0 && children.some((c) => c.hasAttribute("data-ohw-editable")) && children.every(textRowChild)) {
+      return parent;
+    }
+  }
+  const row = subject.closest("li");
+  if (row && row !== subject && /^(inline-)?flex$/.test(getComputedStyle(row).display)) {
+    return row;
+  }
+  return subject;
 }
 function applyStylesToDom(store) {
   ensureStyleSheet();
   clearSectionAttrs(document);
   clearNodeProps(document);
   loadStyleFonts(
-    store ? Object.values(store.nodes).flatMap((n) => n.fontFamily ? [n.fontFamily] : []) : []
+    store ? [
+      ...Object.values(store.nodes).flatMap((n) => n.fontFamily ? [n.fontFamily] : []),
+      ...Object.values(store.sections).flatMap((s) => s.fontFamily ? [s.fontFamily] : [])
+    ] : []
   );
   if (!store) return;
   for (const [sectionId, override] of Object.entries(store.sections)) {
@@ -507,6 +631,23 @@ function applyStylesToDom(store) {
         section.style.setProperty("background", override.sectionBackgroundColor, "important");
         section.setAttribute("data-ohw-style-bgcolor", "");
       }
+      if (override.textColor !== void 0 || override.fontFamily !== void 0) {
+        const textEls = marker.querySelectorAll(
+          '[data-ohw-editable="text"], [data-ohw-editable="plain"], [data-ohw-field-label]'
+        );
+        for (const el of Array.from(textEls)) {
+          if (override.textColor !== void 0) {
+            saveInline(el, "color");
+            el.style.setProperty("color", override.textColor, "important");
+            el.setAttribute(NODE_WROTE_ATTR, "");
+          }
+          if (override.fontFamily !== void 0) {
+            saveInline(el, "font-family");
+            el.style.setProperty("font-family", `'${override.fontFamily}'`, "important");
+            el.setAttribute(NODE_WROTE_ATTR, "");
+          }
+        }
+      }
     }
   }
   for (const [key, override] of Object.entries(store.nodes)) {
@@ -553,15 +694,557 @@ function applyStylesToDom(store) {
       }
     }
   }
+  for (const [sectionId, override] of Object.entries(store.sections)) {
+    if (override.headingColor === void 0) continue;
+    const escaped = CSS.escape(sectionId);
+    const byInstance = document.querySelectorAll(`[data-ohw-instance="${escaped}"]`);
+    const sections = byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`);
+    for (const marker of Array.from(sections)) {
+      const headings = marker.querySelectorAll(
+        ":is(h1, h2, h3, h4, h5, h6)[data-ohw-editable], :is(h1, h2, h3, h4, h5, h6) > [data-ohw-editable]"
+      );
+      for (const el of Array.from(headings)) {
+        saveInline(el, "color");
+        el.style.setProperty("color", override.headingColor, "important");
+        el.setAttribute(NODE_WROTE_ATTR, "");
+      }
+    }
+  }
 }
 
 // src/ui/ai-tree/aiSectionsManager.tsx
 import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
 
+// src/lib/sections.ts
+var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
+function isChromeSection(el) {
+  return el.matches("header, nav, footer, aside");
+}
+function titleCaseSectionId(id) {
+  return id.split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function parseSectionsFromRoot(root) {
+  const seen = /* @__PURE__ */ new Set();
+  const sections = [];
+  for (const el of root.querySelectorAll("[data-ohw-section]")) {
+    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 });
+  }
+  return sections;
+}
+function collectSectionsFromDom() {
+  if (typeof document === "undefined") return [];
+  return parseSectionsFromRoot(document);
+}
+function parseSectionsFromHtml(html) {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return parseSectionsFromRoot(doc);
+}
+
+// src/lib/section-instances.ts
+var SECTION_ORDER_KEY = "__ohw_section_order";
+var REMOVED_ATTR = "data-ohw-section-removed";
+function isRemovedSection(el) {
+  return el.hasAttribute(REMOVED_ATTR);
+}
+function movableUnit(el) {
+  return el.closest("[data-ohw-section-container]") ?? el;
+}
+function sectionTypeOf(el) {
+  return el.getAttribute("data-ohw-section") ?? el.querySelector("[data-ohw-section]")?.getAttribute("data-ohw-section") ?? "";
+}
+function sectionElementOf(el) {
+  return el.hasAttribute("data-ohw-section") ? el : el.querySelector("[data-ohw-section]") ?? el;
+}
+function collectTopLevelUnits(predicate) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  document.querySelectorAll("[data-ohw-section]").forEach((el) => {
+    if (!predicate(el)) return;
+    const unit = movableUnit(el);
+    if (unit.parentElement?.closest("[data-ohw-section],[data-ohw-section-container]")) return;
+    if (seen.has(unit)) return;
+    seen.add(unit);
+    result.push(unit);
+  });
+  return result;
+}
+function topLevelSections() {
+  return collectTopLevelUnits((el) => !isChromeSection(el) && !isRemovedSection(movableUnit(el)));
+}
+function instanceIdOf(el) {
+  return el.dataset.ohwInstance ?? el.dataset.ohwSection ?? "";
+}
+function findByInstanceId(instanceId) {
+  const escapedId = CSS.escape(instanceId);
+  const direct = document.querySelector(`[data-ohw-instance="${escapedId}"]`);
+  if (direct) return movableUnit(direct);
+  const bare = document.querySelector(`[data-ohw-section="${escapedId}"]:not([data-ohw-instance])`);
+  return bare ? movableUnit(bare) : null;
+}
+function planSectionMove(instanceId, targetIndex, currentPath) {
+  const sections = topLevelSections();
+  const index = sections.findIndex((el) => instanceIdOf(el) === instanceId);
+  if (index === -1) return null;
+  const dragged = sections[index];
+  const others = sections.filter((_, i) => i !== index);
+  const clamped = Math.max(0, Math.min(targetIndex, others.length));
+  const reordered = [...others.slice(0, clamped), dragged, ...others.slice(clamped)];
+  return reordered.map((el, order) => ({
+    instanceId: instanceIdOf(el),
+    type: sectionTypeOf(el),
+    order,
+    pagePath: currentPath
+  }));
+}
+function moveSectionInstance(instanceId, direction, currentPath) {
+  const sections = topLevelSections();
+  const index = sections.findIndex((el) => instanceIdOf(el) === instanceId);
+  if (index === -1) return null;
+  const siblingIndex = direction === "up" ? index - 1 : index + 1;
+  if (siblingIndex < 0 || siblingIndex >= sections.length) return null;
+  const entries = planSectionMove(instanceId, siblingIndex, currentPath);
+  if (!entries) return null;
+  applyPersistedOrder(entries);
+  return entries;
+}
+function syncRemovedFlags(entries) {
+  const removedIds = new Set(entries.filter((e) => e.removed).map((e) => e.instanceId));
+  document.querySelectorAll(`[${REMOVED_ATTR}]`).forEach((el) => {
+    if (!removedIds.has(instanceIdOf(el))) {
+      el.style.removeProperty("display");
+      el.removeAttribute(REMOVED_ATTR);
+    }
+  });
+  for (const id of removedIds) {
+    const el = findByInstanceId(id);
+    if (el) {
+      el.style.display = "none";
+      el.setAttribute(REMOVED_ATTR, "");
+    }
+  }
+}
+function applyPersistedOrder(entries) {
+  syncRemovedFlags(entries);
+  if (entries.length === 0) return;
+  const sections = topLevelSections();
+  if (sections.length === 0) return;
+  const orderIndex = new Map(entries.map((e) => [e.instanceId, e.order]));
+  const ordered = [...sections].sort((a, b) => {
+    const aOrder = orderIndex.get(instanceIdOf(a));
+    const bOrder = orderIndex.get(instanceIdOf(b));
+    if (aOrder === void 0 && bOrder === void 0) return 0;
+    if (aOrder === void 0) return 1;
+    if (bOrder === void 0) return -1;
+    return aOrder - bOrder;
+  });
+  let prev = null;
+  for (const el of ordered) {
+    if (prev) prev.after(el);
+    prev = el;
+  }
+}
+function setSectionRemoved(instanceId, currentPath, existingEntries, removed) {
+  if (!findByInstanceId(instanceId)) return null;
+  const byId = new Map(existingEntries.map((e) => [e.instanceId, e]));
+  const allSections = collectTopLevelUnits((el) => !isChromeSection(el));
+  allSections.forEach((el, order) => {
+    const id = instanceIdOf(el);
+    if (!byId.has(id)) {
+      byId.set(id, { instanceId: id, type: sectionTypeOf(el), order, pagePath: currentPath });
+    }
+  });
+  const target = byId.get(instanceId);
+  if (!target) return null;
+  byId.set(instanceId, { ...target, removed });
+  const entries = Array.from(byId.values());
+  applyPersistedOrder(entries);
+  return entries;
+}
+function deleteSectionInstance(instanceId, currentPath, existingEntries) {
+  return setSectionRemoved(instanceId, currentPath, existingEntries, true);
+}
+function restoreSectionInstance(instanceId, currentPath, existingEntries) {
+  return setSectionRemoved(instanceId, currentPath, existingEntries, false);
+}
+function duplicateSectionInstance(instanceId, newId, currentPath, existingEntries) {
+  const original = findByInstanceId(instanceId);
+  if (!original) return null;
+  const clone = original.cloneNode(true);
+  clone.setAttribute("data-ohw-instance", newId);
+  const keyRekeys = rekeySectionSubtree(clone, newId);
+  original.insertAdjacentElement("afterend", clone);
+  const byId = new Map(existingEntries.map((e) => [e.instanceId, e]));
+  const entries = topLevelSections().map((el, order) => {
+    const id = instanceIdOf(el);
+    return {
+      instanceId: id,
+      type: sectionTypeOf(el),
+      order,
+      pagePath: currentPath,
+      ...byId.get(id)?.removed ? { removed: true } : {}
+    };
+  });
+  applyPersistedOrder(entries);
+  return { entries, keyRekeys };
+}
+function newInstanceId() {
+  return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `instance-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function getPageSectionOrderEntries(raw, currentPath) {
+  if (!raw) return [];
+  try {
+    const entries = JSON.parse(raw);
+    return entries.filter((e) => !e.pagePath || e.pagePath === currentPath);
+  } catch {
+    return [];
+  }
+}
+function mergePageSectionOrder(raw, currentPath, pageEntries) {
+  let all = [];
+  if (raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) all = parsed;
+    } catch {
+    }
+  }
+  const otherPages = all.filter((e) => e && e.pagePath && e.pagePath !== currentPath);
+  const pageIds = new Set(pageEntries.map((e) => e.instanceId));
+  const removedHere = all.filter(
+    (e) => e && (!e.pagePath || e.pagePath === currentPath) && e.removed && !pageIds.has(e.instanceId)
+  );
+  return [...otherPages, ...removedHere, ...pageEntries];
+}
+function rekeySectionSubtree(root, instanceId) {
+  const suffix = `::${instanceId}`;
+  const pairs = [];
+  const rekey = (el, attr) => {
+    const current = el.getAttribute(attr);
+    if (!current) return;
+    const base = current.includes("::") ? current.slice(0, current.indexOf("::")) : current;
+    const next = `${base}${suffix}`;
+    el.setAttribute(attr, next);
+    pairs.push({ from: current, to: next });
+  };
+  if (root.hasAttribute("data-ohw-key")) rekey(root, "data-ohw-key");
+  if (root.hasAttribute("data-ohw-href-key")) rekey(root, "data-ohw-href-key");
+  root.querySelectorAll("[data-ohw-key]").forEach((el) => rekey(el, "data-ohw-key"));
+  root.querySelectorAll("[data-ohw-href-key]").forEach((el) => rekey(el, "data-ohw-href-key"));
+  return pairs;
+}
+function initSectionInstancesFromContent(content, currentPath) {
+  document.querySelectorAll("[data-ohw-section]:not([data-ohw-instance])").forEach((el) => {
+    el.setAttribute("data-ohw-instance", el.getAttribute("data-ohw-section") ?? "");
+  });
+  document.querySelectorAll("[data-ohw-section-container]:not([data-ohw-instance])").forEach((el) => {
+    const type = sectionTypeOf(el);
+    if (type) el.setAttribute("data-ohw-instance", type);
+  });
+  const entries = getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath);
+  for (const entry of entries) {
+    if (entry.instanceId === entry.type) continue;
+    if (document.querySelector(`[data-ohw-instance="${CSS.escape(entry.instanceId)}"]`)) continue;
+    const original = document.querySelector(
+      `[data-ohw-section="${CSS.escape(entry.type)}"][data-ohw-instance="${CSS.escape(entry.type)}"]`
+    );
+    if (!original) continue;
+    const clone = original.cloneNode(true);
+    clone.setAttribute("data-ohw-instance", entry.instanceId);
+    rekeySectionSubtree(clone, entry.instanceId);
+    original.insertAdjacentElement("afterend", clone);
+  }
+  applyPersistedOrder(entries);
+}
+
 // src/ui/ai-tree/AiTreeRenderer.tsx
 import React from "react";
 import { ArrowLeft, ArrowRight, ChevronDown, icons as lucideIcons } from "lucide-react";
+
+// src/lib/placeholder-imagery.ts
+var U = (id) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=1600&q=80`;
+var GENERIC = [
+  U("1441986300917-64674bd600d8"),
+  U("1486406146926-c627a92ad1ab"),
+  U("1497032628192-86f99bcd76bc"),
+  U("1521737604893-d14cc237f11d"),
+  U("1522071820081-009f0129c71c"),
+  U("1519389950473-47ba0277781c"),
+  U("1460925895917-afdab827c52f"),
+  U("1504384308090-c894fdcc538d")
+];
+var PEOPLE = [
+  U("1500648767791-00dcc994a43e"),
+  U("1494790108377-be9c29b29330"),
+  U("1507003211169-0a1dd7228f2d"),
+  U("1438761681033-6461ffad8d80"),
+  U("1544005313-94ddf0286df2"),
+  U("1472099645785-5658abf4ff4e"),
+  U("1519085360753-af0119f7cbe7"),
+  U("1534528741775-53994a69daeb")
+];
+var THEMED = [
+  {
+    keywords: ["portrait", "headshot", "person", "people", "team", "staff", "avatar", "founder", "face"],
+    pool: PEOPLE
+  },
+  {
+    keywords: ["pet", "dog", "cat", "puppy", "kitten", "vet", "animal"],
+    pool: [
+      U("1548199973-03cce0bbc87b"),
+      U("1450778869180-41d0601e046e"),
+      U("1583511655857-d19b40a7a54e"),
+      U("1587300003388-59208cc962cb"),
+      U("1517849845537-4d257902454a"),
+      U("1601758228041-f3b2795255f1")
+    ]
+  },
+  {
+    keywords: [
+      "baker",
+      "bakery",
+      "cafe",
+      "coffee",
+      "latte",
+      "restaurant",
+      "pastr",
+      "bread",
+      "cake",
+      "cater",
+      "chef",
+      "kitchen",
+      "food",
+      "pizza",
+      "dessert",
+      "brunch",
+      "bistro",
+      "deli",
+      "dish",
+      "menu"
+    ],
+    pool: [
+      U("1509440159596-0249088772ff"),
+      U("1555507036-ab1f4038808a"),
+      U("1517433670267-08bbd4be890f"),
+      U("1486427944299-d1955d23e34d"),
+      U("1504754524776-8f4f37790ca0"),
+      U("1495474472287-4d71bcdd2085"),
+      U("1521017432531-fbd92d768814"),
+      U("1556909114-f6e7ad7d3136")
+    ]
+  },
+  {
+    keywords: [
+      "shop",
+      "store",
+      "boutique",
+      "retail",
+      "clothing",
+      "fashion",
+      "jewel",
+      "gift",
+      "florist",
+      "market",
+      "grocer",
+      "product",
+      "storefront"
+    ],
+    pool: [
+      U("1441984904996-e0b6ba687e04"),
+      U("1472851294608-062f824d29cc"),
+      U("1523381210434-271e8be1f52b"),
+      U("1534452203293-494d7ddbf7e0"),
+      U("1445205170230-053b83016050"),
+      U("1560243563-062bfc001d68")
+    ]
+  },
+  {
+    keywords: [
+      "yoga",
+      "pilates",
+      "fitness",
+      "gym",
+      "workout",
+      "trainer",
+      "wellness",
+      "meditat",
+      "massage",
+      "therap",
+      "physio",
+      "chiro",
+      "nutrition",
+      "spa",
+      "studio"
+    ],
+    pool: [
+      U("1544367567-0f2fcb009e0b"),
+      U("1506126613408-eca07ce68773"),
+      U("1545205597-3d9d02c29597"),
+      U("1552196563-55cd4e45efb3"),
+      U("1518611012118-696072aa579a"),
+      U("1571019613454-1cb2f99b2d8b"),
+      U("1540555700478-4be289fbecef"),
+      U("1519824145371-296894a0daa9")
+    ]
+  },
+  {
+    keywords: [
+      "salon",
+      "hairdress",
+      "haircut",
+      "barber",
+      "manicure",
+      "pedicure",
+      "nails",
+      "beauty",
+      "makeup",
+      "cosmetic",
+      "eyelash",
+      "eyebrow",
+      "skincare",
+      "esthetic",
+      "waxing",
+      "hair"
+    ],
+    pool: [
+      U("1560066984-138dadb4c035"),
+      U("1522337660859-02fbefca4702"),
+      U("1562322140-8baeececf3df"),
+      U("1521590832167-7bcbfaa6381f"),
+      U("1487412947147-5cebf100ffc2"),
+      U("1526045478516-99145907023c")
+    ]
+  },
+  {
+    keywords: [
+      "cleaning",
+      "plumb",
+      "electric",
+      "landscap",
+      "contractor",
+      "handyman",
+      "renov",
+      "hvac",
+      "roofing",
+      "painting",
+      "carpentry",
+      "flooring",
+      "movers",
+      "construction",
+      "tools"
+    ],
+    pool: [
+      U("1581578731548-c64695cc6952"),
+      U("1504307651254-35680f356dfd"),
+      U("1581092160562-40aa08e78837"),
+      U("1621905251189-08b45d6a269e"),
+      U("1558618666-fcd25c85cd64"),
+      U("1585128792020-803d29415281")
+    ]
+  },
+  {
+    keywords: [
+      "legal",
+      "attorney",
+      "lawyer",
+      "account",
+      "bookkeep",
+      "consult",
+      "coaching",
+      "financ",
+      "insurance",
+      "realtor",
+      "estate",
+      "marketing",
+      "agency",
+      "office",
+      "business",
+      "desk"
+    ],
+    pool: [
+      U("1497366216548-37526070297c"),
+      U("1497366811353-6870744d04b2"),
+      U("1454165804606-c3d57bc86b40"),
+      U("1521791136064-7986c2920216"),
+      U("1556761175-b413da4baf72"),
+      U("1542744173-8e7e53415bb0")
+    ]
+  },
+  {
+    keywords: [
+      "wedding",
+      "event",
+      "party",
+      "celebrat",
+      "venue",
+      "community",
+      "nonprofit",
+      "charity",
+      "workshop",
+      "photograph",
+      "concert"
+    ],
+    pool: [
+      U("1511578314322-379afb476865"),
+      U("1501281668745-f7f57925c3b4"),
+      U("1523580494863-6f3031224c94"),
+      U("1540575467063-178a50c2df87"),
+      U("1505236858219-8359eb29e329"),
+      U("1528605248644-14dd04022da1")
+    ]
+  }
+];
+function poolForSubject(subject) {
+  for (const theme of THEMED) {
+    if (theme.keywords.some((k) => subject.includes(k))) {
+      return theme.pool;
+    }
+  }
+  return GENERIC;
+}
+function mixedHash(text) {
+  let hash = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    hash ^= text.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 16 & 65535;
+}
+function resolvePlaceholderRef(ref) {
+  const match = /^placeholder:([a-z0-9-]+)$/.exec(ref);
+  if (!match) return null;
+  const subject = match[1];
+  const pool = poolForSubject(subject.replace(/-\d+$/, ""));
+  return pool[mixedHash(ref) % pool.length];
+}
+function collectPlaceholderRefs(tree) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const match of JSON.stringify(tree ?? null).matchAll(/"(placeholder:[a-z0-9-]+)"/gu)) {
+    seen.add(match[1]);
+  }
+  return [...seen];
+}
+function buildPlaceholderMap(tree) {
+  const map = {};
+  const cursor = /* @__PURE__ */ new Map();
+  for (const ref of collectPlaceholderRefs(tree)) {
+    const subject = ref.slice("placeholder:".length).replace(/-\d+$/, "");
+    const pool = poolForSubject(subject);
+    const start = cursor.get(pool) ?? mixedHash(ref) % pool.length;
+    map[ref] = pool[start % pool.length];
+    cursor.set(pool, start + 1);
+  }
+  return map;
+}
+
+// src/ui/ai-tree/AiTreeRenderer.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function lucideByName(name) {
   const pascal = name.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
@@ -575,6 +1258,7 @@ var typeStyle = (spec, font) => ({
   fontWeight: spec.weight
 });
 var str = (value) => typeof value === "string" ? value : "";
+var cardRadius = (slots) => slots.cornerStyle === "sharp" ? 0 : AI_TREE_TOKENS.radiusCard;
 var featureLines = (value) => value.split(/\n|<br\s*\/?>/i).map((line) => line.trim()).filter(Boolean);
 var CHECK_MASK = `data:image/svg+xml,${encodeURIComponent(
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'
@@ -601,6 +1285,25 @@ 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 buttonShellStyle(ctx, fullWidth) {
+  const bs = ctx.buttonStyle;
+  if (bs) {
+    return {
+      borderRadius: bs.radius,
+      ...bs.padding ? { padding: bs.padding } : {},
+      ...bs.fontFamily ? { fontFamily: bs.fontFamily } : { fontFamily: ctx.brand.fonts.body },
+      ...bs.fontSize ? { fontSize: bs.fontSize } : {},
+      ...bs.fontWeight ? { fontWeight: bs.fontWeight } : {},
+      ...bs.letterSpacing && bs.letterSpacing !== "normal" ? { letterSpacing: bs.letterSpacing } : {},
+      ...bs.textTransform && bs.textTransform !== "none" ? { textTransform: bs.textTransform } : {}
+    };
+  }
+  return {
+    borderRadius: AI_TREE_TOKENS.radiusButton,
+    padding: fullWidth ? `${AI_TREE_TOKENS.spacing2}px ${AI_TREE_TOKENS.spacing4}px` : `${AI_TREE_TOKENS.spacing3}px ${AI_TREE_TOKENS.spacing6}px`,
+    ...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body)
+  };
+}
 function hexLuminance(color) {
   const m = /^#([0-9a-f]{6})$/i.exec(color.trim());
   if (!m) return null;
@@ -617,6 +1320,12 @@ function hexContrast(a, b) {
   const [hi, lo] = la > lb ? [la, lb] : [lb, la];
   return (hi + 0.05) / (lo + 0.05);
 }
+function primaryButtonLabel(brand) {
+  const darkC = hexContrast(brand.palette.primary, brand.palette.dark);
+  const lightC = hexContrast(brand.palette.primary, AI_TREE_TOKENS.textPrimaryForeground);
+  if (darkC === null || lightC === null) return AI_TREE_TOKENS.textPrimaryForeground;
+  return darkC > lightC ? brand.palette.dark : AI_TREE_TOKENS.textPrimaryForeground;
+}
 function accentBandContext(brand) {
   const p = brand.palette;
   const lightWins = (hexContrast(p.light, p.primary) ?? 99) >= (hexContrast(p.dark, p.primary) ?? 0);
@@ -634,6 +1343,22 @@ function accentBandContext(brand) {
 function textAttrs(ctx, path) {
   return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
 }
+var AI_RESPONSIVE_CSS = [
+  "@media (max-width: 960px) {",
+  "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: repeat(2, 1fr) !important; }",
+  '  [data-ai-responsive] [data-ai-grid="1"] { grid-template-columns: 1fr !important; }',
+  "}",
+  "@media (max-width: 640px) {",
+  "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
+  "  [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
+  // Group containers flatten to a column on phones; span placements come along for free.
+  "  [data-ai-responsive] [data-ai-group] { display: flex !important; flex-direction: column !important; }",
+  "  [data-ai-responsive] [data-ai-group] > * { grid-column: auto !important; }",
+  "  [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
+  "  [data-ai-responsive] { overflow-x: hidden; }",
+  "  [data-ai-responsive] img { max-width: 100%; }",
+  "}"
+].join("\n");
 var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 function MediaBox({
   refValue,
@@ -646,13 +1371,17 @@ function MediaBox({
   const url = refValue ? ctx.resolveMedia(refValue) : null;
   const isIcon = /^(lucide|simple):/.test(refValue);
   const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
-  const editAttrs = ctx.keyFor && editPath && !isIcon ? { "data-ohw-key": ctx.keyFor(editPath), "data-ohw-editable": "image" } : {};
+  const editAttrs = ctx.keyFor && editPath ? {
+    "data-ohw-key": ctx.keyFor(editPath),
+    "data-ohw-editable": isIcon ? "icon" : "image"
+  } : {};
   if (isIcon) {
     const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
     return /* @__PURE__ */ jsx(
       "span",
       {
         "data-ai-icon": refValue,
+        ...editAttrs,
         style: {
           display: "inline-flex",
           width: 48,
@@ -716,12 +1445,15 @@ function ButtonEl({
         width: fullWidth ? "100%" : void 0,
         alignItems: "center",
         justifyContent: "center",
-        padding: fullWidth ? `${AI_TREE_TOKENS.spacing2}px ${AI_TREE_TOKENS.spacing4}px` : `${AI_TREE_TOKENS.spacing3}px ${AI_TREE_TOKENS.spacing6}px`,
-        borderRadius: AI_TREE_TOKENS.radiusButton,
         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: ctx.buttonLabel ?? AI_TREE_TOKENS.textPrimaryForeground }
+        ...buttonShellStyle(ctx, fullWidth),
+        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : (
+          // Off-band, prefer the template button's measured fill/label pair — a template may
+          // fill its CTAs with any token (hvac: accent bg, primary text). On an accent band
+          // the flipped palette keeps contrast, so the brand-driven colours stay.
+          !ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand) }
+        )
       },
       children: /* @__PURE__ */ jsx("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
     }
@@ -897,10 +1629,11 @@ function PricingCard({ node, ctx, path }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-ohw-card": "",
       style: {
         background: hasBg ? ctx.brand.palette.light : "transparent",
         border: `1px solid ${dark}`,
-        borderRadius: AI_TREE_TOKENS.radiusCard,
+        borderRadius: cardRadius(slots),
         padding: AI_TREE_TOKENS.paddingBlock,
         display: "flex",
         flexDirection: "column",
@@ -1005,10 +1738,11 @@ function TestimonialCard({ node, ctx, path }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      "data-ohw-card": "",
       "data-ai-avatar-pos": avatarPos ?? void 0,
       style: {
         background: hasBg ? ctx.cardSurface : "transparent",
-        borderRadius: hasBg ? AI_TREE_TOKENS.radiusCard : 0,
+        borderRadius: hasBg ? cardRadius(slots) : 0,
         overflow: "hidden",
         outline: slots.featured === true ? `2px solid ${ctx.brand.palette.primary}` : void 0,
         minWidth: 0
@@ -1043,10 +1777,11 @@ function TeamCard({ node, ctx, path }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-ohw-card": "",
       "data-ai-avatar-pos": avatarPos ?? void 0,
       style: {
         background: hasBg ? ctx.cardSurface : "transparent",
-        borderRadius: hasBg ? AI_TREE_TOKENS.radiusCard : 0,
+        borderRadius: hasBg ? cardRadius(slots) : 0,
         overflow: "hidden",
         outline: slots.featured === true ? `2px solid ${ctx.brand.palette.primary}` : void 0,
         minWidth: 0,
@@ -1217,9 +1952,10 @@ function CardBlock({ node, ctx, path }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-ohw-card": "",
       style: {
         background: hasBg ? ctx.cardSurface : "transparent",
-        borderRadius: hasBg ? AI_TREE_TOKENS.radiusCard : 0,
+        borderRadius: hasBg ? cardRadius(slots) : 0,
         overflow: "hidden",
         outline: slots.featured === true ? `2px solid ${ctx.brand.palette.primary}` : void 0,
         display: horizontal ? "flex" : "block",
@@ -1247,7 +1983,7 @@ function CardBlock({ node, ctx, path }) {
         ) : /* @__PURE__ */ jsx(
           "div",
           {
-            style: /^(lucide|simple):/.test(mediaRef) ? { padding: `${AI_TREE_TOKENS.paddingBlock}px ${AI_TREE_TOKENS.paddingBlock}px 0` } : hasBg ? void 0 : { borderRadius: AI_TREE_TOKENS.radiusCard, overflow: "hidden" },
+            style: /^(lucide|simple):/.test(mediaRef) ? { padding: `${AI_TREE_TOKENS.paddingBlock}px ${AI_TREE_TOKENS.paddingBlock}px 0` } : hasBg ? void 0 : { borderRadius: cardRadius(slots), overflow: "hidden" },
             children: media
           }
         )),
@@ -1538,7 +2274,7 @@ function CollectionBlock({ node, ctx, path }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-ai-grid": "",
+      "data-ai-grid": String(itemsPerRow),
       style: {
         display: "grid",
         gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)`,
@@ -1658,6 +2394,32 @@ function renderNode(node, ctx, path) {
       if (child) {
         return renderNode(child, ctx, `${path}.c0`);
       }
+      if (str(slots.provider) === "map" && str(slots.query)) {
+        const query = str(slots.query);
+        const mapAttrs = ctx.keyFor ? {
+          "data-ohw-key": ctx.keyFor(`${path}.query`),
+          "data-ohw-editable": "map",
+          "data-ohw-map-query": query
+        } : {};
+        return /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            ...mapAttrs,
+            "data-ai-embed": "map",
+            title: str(slots.title) || "Map",
+            src: `https://www.google.com/maps?q=${encodeURIComponent(query)}&output=embed`,
+            loading: "lazy",
+            referrerPolicy: "no-referrer-when-downgrade",
+            style: {
+              width: "100%",
+              minHeight: 320,
+              border: 0,
+              borderRadius: AI_TREE_TOKENS.radiusCard,
+              display: "block"
+            }
+          }
+        );
+      }
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -1761,15 +2523,14 @@ function renderNode(node, ctx, path) {
                       alignSelf: submitAlign,
                       border: "none",
                       cursor: "pointer",
-                      padding: "12px 24px",
-                      // Corner radius follows the host template's own buttons (measured from a template
-                      // CTA); 8px only when the page has no template button to match.
-                      borderRadius: ctx.buttonRadius ?? 8,
-                      // Brand-styled: primary fill, brand-derived label colour (not a fixed token) so it
-                      // reads correctly on custom palettes.
-                      background: ctx.brand.palette.primary,
-                      color: ctx.buttonLabel ?? ctx.brand.palette.light,
-                      ...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body)
+                      // Shape/padding/typography follow the host template's own buttons.
+                      ...buttonShellStyle(ctx),
+                      // Brand-styled: the template button's measured fill/label pair off-band, else
+                      // primary fill with a brand-derived label so it reads on custom palettes.
+                      ...!ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : {
+                        background: ctx.brand.palette.primary,
+                        color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
+                      }
                     },
                     children: /* @__PURE__ */ jsx("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
                   },
@@ -1804,7 +2565,7 @@ function renderNode(node, ctx, path) {
 function AiTreeRenderer({
   tree,
   brand,
-  buttonRadius,
+  buttonStyle,
   resolveMedia,
   editKeyPrefix
 }) {
@@ -1814,13 +2575,18 @@ function AiTreeRenderer({
   const resolvedBrand = brand ?? AI_DEFAULT_BRAND;
   const band = (tree.settings ?? {}).sectionBackground === "accent" ? accentBandContext(resolvedBrand) : null;
   const blockBrand = band?.brand ?? resolvedBrand;
+  const placeholderMap = buildPlaceholderMap(tree);
   const ctx = {
     brand: blockBrand,
-    resolveMedia: resolveMedia ?? (() => null),
+    // An owner/library ref resolves through the host resolver; a `placeholder:<subject>` ref the
+    // host cannot resolve falls back to real stock photography (the per-section map first, then a
+    // standalone resolve), so generated galleries, image rows, and overlay backgrounds arrive with
+    // photos instead of grey boxes.
+    resolveMedia: (ref) => resolveMedia?.(ref) ?? placeholderMap[ref] ?? resolvePlaceholderRef(ref),
     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,
     sectionAlignment: (tree.settings ?? {}).alignment === "center" ? "center" : "left",
-    buttonRadius,
+    buttonStyle,
     ...band ? { buttonLabel: band.buttonLabel } : {}
   };
   const settings = tree.settings ?? {};
@@ -1861,6 +2627,7 @@ function AiTreeRenderer({
     {
       "data-ai-section": tree.tag ?? "",
       ...bgAttrs,
+      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${pad}px 0`,
@@ -1871,12 +2638,13 @@ function AiTreeRenderer({
         color: settings.sectionBackground === "accent" ? blockBrand.palette.dark : void 0
       },
       children: [
-        isOverlay && backgroundUrl && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
+        /* @__PURE__ */ jsx("style", { children: AI_RESPONSIVE_CSS }),
         /* @__PURE__ */ jsx("style", { children: AI_MOBILE_CSS }),
+        isOverlay && backgroundUrl && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
         /* @__PURE__ */ jsx(
           "div",
           {
-            "data-ai-container": "",
+            "data-ai-section-inner": "",
             style: {
               position: "relative",
               maxWidth: AI_TREE_TOKENS.sectionMaxWidth,
@@ -1887,7 +2655,7 @@ function AiTreeRenderer({
             children: tree.rows.map((row, r2) => /* @__PURE__ */ jsx(
               "div",
               {
-                "data-ai-row": "",
+                "data-ai-columns": "",
                 style: {
                   display: "grid",
                   gridTemplateColumns: "repeat(12, 1fr)",
@@ -1926,21 +2694,63 @@ function AiTreeRenderer({
 import { jsx as jsx2 } from "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 REMOVED_ATTR2 = "data-ohw-ai-removed";
 var TEMPLATE_HIDDEN_ATTR = "data-ohw-ai-template-hidden";
 var CHROME_SECTION_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
+function isChromeSection2(el) {
+  if (CHROME_SECTION_IDS.has(el.getAttribute("data-ohw-section") ?? "")) return true;
+  return el.tagName === "HEADER" || el.tagName === "FOOTER";
+}
 function readRootVar(name) {
   if (typeof document === "undefined") return "";
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
 }
+function normalizeColorToHex(value) {
+  if (!value || typeof document === "undefined") return value;
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return value;
+  ctx.fillStyle = value;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r2, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(r2)}${toHex(g)}${toHex(b)}`;
+}
+var GENERIC_FONT_KEYWORDS = /* @__PURE__ */ new Set([
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "math",
+  "emoji",
+  "fangsong"
+]);
+function primaryFontFamily(stack) {
+  const first = stack.split(",").map((part) => part.trim().replace(/^["']|["']$/g, "")).find((part) => part && !GENERIC_FONT_KEYWORDS.has(part.toLowerCase()));
+  return first ?? "";
+}
+function humanizeFontFamily(name) {
+  return name.replace(/^__/, "").replace(/_[0-9a-f]{6}$/i, "").replace(/_/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim().replace(/\s+/g, " ").replace(/(^|\s)([a-z])/g, (_, sep, c) => sep + c.toUpperCase());
+}
+function readFontVar(name) {
+  return humanizeFontFamily(primaryFontFamily(readRootVar(name)));
+}
 function deriveBrandOverride() {
   const dark = readRootVar("--ohw-brand-dark");
   const primary = readRootVar("--ohw-brand-primary");
   const light = readRootVar("--ohw-brand-light");
   if (!dark || !primary || !light) return null;
   const accent = readRootVar("--ohw-brand-accent");
-  const heading = readRootVar("--font-heading") || readRootVar("--font-display");
-  const body = readRootVar("--font-body");
+  const heading = readFontVar("--font-heading") || readFontVar("--font-display");
+  const body = readFontVar("--font-body");
   return {
     palette: { dark, primary, accent: accent || dark, light },
     fonts: {
@@ -1949,28 +2759,98 @@ function deriveBrandOverride() {
     }
   };
 }
-function deriveTemplateBrand() {
-  const dark = readRootVar("--color-dark");
-  const primary = readRootVar("--color-primary");
-  const light = readRootVar("--color-light");
+function deriveTemplateBrandLive() {
+  const dark = readRootVar("--color-dark") || readRootVar("--brand-text");
+  const primary = readRootVar("--color-primary") || readRootVar("--brand-primary");
+  const light = readRootVar("--color-light") || readRootVar("--brand-background");
   if (!dark || !primary || !light) return null;
-  const accent = readRootVar("--color-accent");
-  const heading = readRootVar("--font-heading") || readRootVar("--font-display");
-  const body = readRootVar("--font-body");
+  const accent = readRootVar("--color-accent") || readRootVar("--brand-accent");
+  const heading = readFontVar("--brand-font-heading") || readFontVar("--font-heading") || readFontVar("--font-display");
+  const body = readFontVar("--brand-font-body") || readFontVar("--font-body");
   return {
-    palette: { dark, primary, accent: accent || dark, light },
+    palette: {
+      dark: normalizeColorToHex(dark),
+      primary: normalizeColorToHex(primary),
+      accent: normalizeColorToHex(accent || dark),
+      light: normalizeColorToHex(light)
+    },
     fonts: {
       heading: heading || AI_DEFAULT_BRAND.fonts.heading,
       body: body || AI_DEFAULT_BRAND.fonts.body
     }
   };
 }
-function deriveTemplateButtonRadius() {
+function deriveTemplateFontsLive() {
+  const heading = readFontVar("--brand-font-heading") || readFontVar("--font-heading") || readFontVar("--font-display");
+  const body = readFontVar("--brand-font-body") || readFontVar("--font-body");
+  if (!heading && !body) return null;
+  return {
+    heading: heading || AI_DEFAULT_BRAND.fonts.heading,
+    body: body || AI_DEFAULT_BRAND.fonts.body
+  };
+}
+var OVERRIDE_VAR_NAMES = [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES, ...FONT_VARS.heading, ...FONT_VARS.body];
+function withOverrideStripped(read) {
+  const root = document.documentElement;
+  const restore = OVERRIDE_VAR_NAMES.map((name) => [name, root.style.getPropertyValue(name)]);
+  for (const name of OVERRIDE_VAR_NAMES) root.style.removeProperty(name);
+  try {
+    return read();
+  } finally {
+    for (const [name, value] of restore) if (value) root.style.setProperty(name, value);
+  }
+}
+var TEMPLATE_BRAND_SNAPSHOT = typeof document === "undefined" ? null : withOverrideStripped(deriveTemplateBrandLive);
+var TEMPLATE_FONTS_SNAPSHOT = typeof document === "undefined" ? null : withOverrideStripped(deriveTemplateFontsLive);
+function deriveTemplateBrand() {
+  return TEMPLATE_BRAND_SNAPSHOT;
+}
+function deriveTemplateFonts() {
+  return TEMPLATE_FONTS_SNAPSHOT;
+}
+function deriveTemplateButtonStyle() {
   if (typeof document === "undefined") return null;
-  const btn = document.querySelector('[data-ohw-role="button"]');
+  const candidates = Array.from(
+    document.querySelectorAll('[data-ohw-role="button"]')
+  ).filter(
+    (el) => !el.closest(`[${CONTAINER_ATTR}]`) && // Whole-card links legitimately carry the button role (serene's clickable treatment
+    // cards) but must never donate the "button look" — a real button holds at most its
+    // one editable label, a card holds a headline, copy and prices.
+    el.querySelectorAll("[data-ohw-editable]").length <= 1
+  );
+  const isFilled = (el) => {
+    const bg = getComputedStyle(el).backgroundColor;
+    if (!bg || bg === "transparent") return false;
+    const alpha = bg.match(/rgba?\([^)]*,\s*([\d.]+)\)$/);
+    return !alpha || parseFloat(alpha[1]) > 0;
+  };
+  const btn = candidates.find(isFilled) ?? candidates[0];
   if (!btn) return null;
-  const radius = getComputedStyle(btn).borderTopLeftRadius;
-  return radius || null;
+  const cs = getComputedStyle(btn);
+  const filled = isFilled(btn);
+  const corners = [
+    cs.borderTopLeftRadius,
+    cs.borderTopRightRadius,
+    cs.borderBottomRightRadius,
+    cs.borderBottomLeftRadius
+  ].map((v) => v || "0px");
+  const radius = corners.every((v) => v === corners[0]) ? corners[0] : corners.join(" ");
+  const px = (v) => parseFloat(v) || 0;
+  const lineHeight = px(cs.lineHeight) || px(cs.fontSize) * 1.2;
+  const contentH = btn.getBoundingClientRect().height - px(cs.borderTopWidth) - px(cs.borderBottomWidth);
+  const impliedY = Math.round(Math.max(0, (contentH - lineHeight) / 2));
+  const padY = Math.max(px(cs.paddingTop), px(cs.paddingBottom), impliedY);
+  const padX = Math.max(px(cs.paddingLeft), px(cs.paddingRight));
+  return {
+    radius: radius || "10px",
+    padding: `${padY}px ${padX}px`,
+    ...filled ? { background: cs.backgroundColor, color: cs.color } : {},
+    fontFamily: cs.fontFamily || "",
+    fontSize: cs.fontSize || "",
+    fontWeight: cs.fontWeight || "",
+    letterSpacing: cs.letterSpacing || "",
+    textTransform: cs.textTransform || ""
+  };
 }
 var mounted = /* @__PURE__ */ new Map();
 function findTemplateSection(id) {
@@ -1986,6 +2866,19 @@ function findPlacementAnchor(id, exclude) {
   for (const el of document.querySelectorAll(`[data-ohw-section="${CSS.escape(id)}"]`)) {
     if (el === exclude) continue;
     if (el.parentElement?.closest("[data-ohw-section]")) continue;
+    if (isChromeSection2(el)) return null;
+    return el;
+  }
+  return null;
+}
+function findFooterSection() {
+  const byId = findTemplateSection("footer");
+  if (byId) return byId;
+  for (const el of Array.from(
+    document.querySelectorAll("footer[data-ohw-section]")
+  ).reverse()) {
+    if (el.hasAttribute(CONTAINER_ATTR)) continue;
+    if (el.parentElement?.closest("[data-ohw-section]")) continue;
     return el;
   }
   return null;
@@ -2012,7 +2905,7 @@ function placeContainer(container, entry) {
       return;
     }
   }
-  const footer = findTemplateSection("footer");
+  const footer = findFooterSection();
   if (footer) {
     footer.insertAdjacentElement("beforebegin", container);
   } else {
@@ -2021,18 +2914,18 @@ function placeContainer(container, entry) {
 }
 function syncRemovedSections(state) {
   const removed = new Set(state.removed ?? []);
-  for (const el of document.querySelectorAll(`[${REMOVED_ATTR}]`)) {
+  for (const el of document.querySelectorAll(`[${REMOVED_ATTR2}]`)) {
     const id = el.getAttribute("data-ohw-section") ?? "";
     if (!removed.has(id)) {
       el.style.removeProperty("display");
-      el.removeAttribute(REMOVED_ATTR);
+      el.removeAttribute(REMOVED_ATTR2);
     }
   }
   for (const id of removed) {
     const section = findTemplateSection(id);
     if (section && !section.hasAttribute(REPLACED_ATTR)) {
       section.style.display = "none";
-      section.setAttribute(REMOVED_ATTR, "");
+      section.setAttribute(REMOVED_ATTR2, "");
     }
   }
 }
@@ -2047,9 +2940,9 @@ function syncTemplateHidden(state, pageHasSections) {
   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 (isChromeSection2(el)) continue;
     if (el.parentElement?.closest("[data-ohw-section]")) continue;
-    if (el.hasAttribute(REPLACED_ATTR) || el.hasAttribute(REMOVED_ATTR)) continue;
+    if (el.hasAttribute(REPLACED_ATTR) || el.hasAttribute(REMOVED_ATTR2)) continue;
     el.style.display = "none";
     el.setAttribute(TEMPLATE_HIDDEN_ATTR, "");
   }
@@ -2073,18 +2966,23 @@ function syncReplacedOriginals(state) {
   }
 }
 var sectionOrderIndex = /* @__PURE__ */ new Map();
+var removedSectionIds = /* @__PURE__ */ new Set();
 function setAiSectionOrder(raw, currentPath) {
   const next = /* @__PURE__ */ new Map();
+  const removed = /* @__PURE__ */ new Set();
   if (raw) {
     try {
       const entries = JSON.parse(raw);
       for (const entry of entries) {
-        if (!entry.pagePath || entry.pagePath === currentPath) next.set(entry.instanceId, entry.order);
+        if (entry.pagePath && entry.pagePath !== currentPath) continue;
+        next.set(entry.instanceId, entry.order);
+        if (entry.removed) removed.add(entry.instanceId);
       }
     } catch {
     }
   }
   sectionOrderIndex = next;
+  removedSectionIds = removed;
 }
 function applyExplicitOrder(entries) {
   if (sectionOrderIndex.size === 0) return entries;
@@ -2120,11 +3018,23 @@ function orderByChain(sections) {
   for (const root of roots) visit(root);
   return out.length === sections.length ? out : sections;
 }
+function syncSoftRemovedGenerated() {
+  for (const [id, section] of mounted) {
+    const el = section.container;
+    if (removedSectionIds.has(id)) {
+      el.style.display = "none";
+      el.setAttribute(REMOVED_ATTR, "");
+    } else if (el.hasAttribute(REMOVED_ATTR)) {
+      el.style.removeProperty("display");
+      el.removeAttribute(REMOVED_ATTR);
+    }
+  }
+}
 function applyAiSectionsToDom(state, options) {
   if (typeof document === "undefined") return;
   const brandOverride = deriveBrandOverride();
   const templateBrand = deriveTemplateBrand();
-  const templateButtonRadius = deriveTemplateButtonRadius();
+  const templateButtonStyle = deriveTemplateButtonStyle();
   const brandKey = brandOverride ? JSON.stringify(brandOverride) : "";
   const pagePath = window.location.pathname;
   const pageSections = state.sections.filter((entry) => (entry.path ?? "/") === pagePath);
@@ -2164,7 +3074,7 @@ function applyAiSectionsToDom(state, options) {
           {
             tree: entry.tree,
             brand: brandOverride ?? entry.brand ?? options?.brand ?? templateBrand ?? void 0,
-            buttonRadius: templateButtonRadius,
+            buttonStyle: templateButtonStyle,
             resolveMedia,
             editKeyPrefix: `ai.${entry.id}`
           }
@@ -2187,6 +3097,7 @@ function applyAiSectionsToDom(state, options) {
   syncReplacedOriginals(state);
   syncRemovedSections(state);
   syncTemplateHidden(state, pageSections.length > 0);
+  syncSoftRemovedGenerated();
 }
 
 // src/useLinkHrefGuardian.ts
@@ -6378,12 +7289,12 @@ var cva = (base, config) => (props) => {
 import { Toggle as TogglePrimitive } from "radix-ui";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-bridge-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent border-0",
-        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+        outline: "border border-input bg-transparent shadow-xs hover:bg-bridge-accent hover:text-accent-foreground"
       },
       size: {
         default: "px-2 py-1",
@@ -6476,10 +7387,10 @@ var DragHandle = React4.forwardRef(
         type,
         "data-slot": "drag-handle",
         className: cn(
-          "inline-flex h-7 w-4 shrink-0 items-center justify-center rounded-md transition-all duration-200 max-h-[30px]",
+          "inline-flex h-7 w-4 shrink-0 items-center justify-center rounded-md transition-all duration-200 max-h-7.5",
           "bg-white border border-transparent text-stone-500 shadow-md cursor-grab",
           "enabled:hover:border enabled:hover:border-stone-200 enabled:hover:text-stone-950",
-          "enabled:active:border enabled:active:border-primary enabled:active:bg-primary-50 enabled:active:text-stone-950 enabled:active:shadow enabled:active:cursor-grabbing",
+          "enabled:active:border enabled:active:border-bridge-primary enabled:active:bg-primary-50 enabled:active:text-stone-950 enabled:active:shadow enabled:active:cursor-grabbing",
           "disabled:cursor-not-allowed disabled:opacity-40 disabled:text-stone-950 disabled:pointer-events-none",
           className
         ),
@@ -6501,7 +7412,7 @@ var CustomToolbar = React5.forwardRef(({ className, onMouseDown, ...props }, ref
     "data-ohw-toolbar": "",
     className: cn(
       // Figma: bg background, radius 8, gap-1, p-0.5, shadow-md — no border
-      "inline-flex h-8 items-center gap-1 rounded-[var(--radius,0.5rem)] bg-background p-0.5 font-sans whitespace-nowrap shadow-md",
+      "inline-flex h-8 items-center gap-1 rounded-(--radius,0.5rem) bg-background p-0.5 font-sans whitespace-nowrap shadow-md",
       className
     ),
     onMouseDown: (e) => {
@@ -6530,7 +7441,7 @@ var CustomToolbarButton = React5.forwardRef(
       type,
       className: cn(
         "inline-flex size-7 shrink-0 items-center justify-center rounded-[calc(var(--radius,0.5rem)-2px)] text-foreground transition-colors",
-        active ? "bg-primary text-primary-foreground" : "bg-transparent hover:bg-muted disabled:cursor-not-allowed disabled:text-muted-foreground disabled:opacity-60",
+        active ? "bg-bridge-primary text-primary-foreground" : "bg-transparent hover:bg-muted disabled:cursor-not-allowed disabled:text-muted-foreground disabled:opacity-60",
         className
       ),
       ...props
@@ -6735,9 +7646,7 @@ function ItemActionToolbar({
         ToggleGroup,
         {
           value: dropdownOpen ? "open" : "closed",
-          onValueChange: (value) => {
-            if (value !== "open" && value !== "closed") return;
-            onDropdownOpenChange?.(value === "open");
+          onValueChange: () => {
           },
           className: "h-7 gap-0.5 rounded-[calc(var(--radius,0.5rem)-2px)] bg-muted p-0.5",
           onMouseDown: (e) => {
@@ -6752,6 +7661,11 @@ function ItemActionToolbar({
                 size: "sm",
                 "aria-label": "Closed",
                 className: "h-6 min-w-0 px-2 text-xs font-medium",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (dropdownOpen !== false) onDropdownOpenChange?.(false);
+                },
                 children: "Closed"
               }
             ),
@@ -6762,6 +7676,11 @@ function ItemActionToolbar({
                 size: "sm",
                 "aria-label": "Open",
                 className: "h-6 min-w-0 px-2 text-xs font-medium",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (dropdownOpen !== true) onDropdownOpenChange?.(true);
+                },
                 children: "Open"
               }
             )
@@ -7724,13 +8643,13 @@ function FormFieldToolbar({
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx13(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-[190px] p-1", children: FIELD_TYPES.map((entry) => {
+          /* @__PURE__ */ jsx13(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-47.5 p-1", children: FIELD_TYPES.map((entry) => {
             const Icon = TYPE_ICONS[entry.type];
             return /* @__PURE__ */ jsxs6(
               DropdownMenuItem,
               {
                 onSelect: () => onTypeChange(entry.type),
-                className: "rounded-md py-2 text-[13px] " + (entry.type === type ? "bg-primary/10" : ""),
+                className: "rounded-md py-2 text-[13px] " + (entry.type === type ? "bg-bridge-primary/10" : ""),
                 children: [
                   /* @__PURE__ */ jsx13(Icon, { size: 14, strokeWidth: 1.75, className: "shrink-0", "aria-hidden": true }),
                   entry.label
@@ -7747,7 +8666,7 @@ function FormFieldToolbar({
             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"),
+            className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-medium transition-colors " + (required ? "bg-bridge-primary/10 text-bridge-primary" : "text-foreground hover:bg-muted/70"),
             "data-ohw-field-required-toggle": "",
             children: [
               /* @__PURE__ */ jsx13(Asterisk, { size: 14, strokeWidth: 2, "aria-hidden": true }),
@@ -7767,7 +8686,7 @@ function FormFieldToolbar({
               children: /* @__PURE__ */ jsx13(MoreHorizontal2, { size: 15, "aria-hidden": true })
             }
           ) }),
-          /* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-[170px] p-1", children: [
+          /* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-42.5 p-1", children: [
             /* @__PURE__ */ jsxs6(DropdownMenuItem, { onSelect: onDuplicate, className: "rounded-md py-2 text-[13px]", children: [
               /* @__PURE__ */ jsx13(Copy2, { size: 14, strokeWidth: 1.75, className: "shrink-0", "aria-hidden": true }),
               "Duplicate"
@@ -7787,7 +8706,7 @@ function FieldTypePicker({ onPick }) {
     "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",
+      className: "pointer-events-auto grid w-105 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__ */ jsxs6(
@@ -7795,7 +8714,7 @@ function FieldTypePicker({ onPick }) {
           {
             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",
+            className: "flex h-26 flex-col items-center justify-center gap-3 rounded-xl border border-border text-[15px] font-medium text-foreground transition-colors hover:border-bridge-primary hover:bg-bridge-primary/5",
             children: [
               /* @__PURE__ */ jsx13(Icon, { size: 26, strokeWidth: 1.5, "aria-hidden": true }),
               entry.label
@@ -7821,7 +8740,7 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:opacity-90",
+        default: "bg-bridge-primary text-primary-foreground hover:opacity-90",
         outline: "border border-border bg-background text-foreground shadow-sm hover:bg-muted/80",
         ghost: "min-w-0 px-3 py-2 text-foreground hover:bg-muted/50"
       },
@@ -7916,6 +8835,7 @@ function MediaOverlay({
       (prev) => prev && prev.fullWidth === width && prev.height === height ? prev : { fullWidth: width, height }
     );
   }, [isVideo]);
+  const replaceLabel = isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image";
   const replaceMode = buttonSize ? replaceButtonMode({ width: rect.width, height: rect.height }, buttonSize) : "none";
   const box = {
     position: "fixed",
@@ -8021,8 +8941,8 @@ function MediaOverlay({
           pointerEvents: hover.hasTextOverlap ? "none" : "auto",
           // Selected: a firm component ring with no wash, so the image reads as chosen rather
           // than hovered. Hover keeps the existing tinted preview.
-          boxShadow: selected ? "inset 0 0 0 2px var(--color-primary)" : "inset 0 0 0 1.5px var(--color-primary)",
-          background: selected ? "transparent" : "color-mix(in srgb, var(--color-primary) 20%, transparent)"
+          boxShadow: selected ? "inset 0 0 0 2px var(--color-bridge-primary)" : "inset 0 0 0 1.5px var(--color-bridge-primary)",
+          background: selected ? "transparent" : "color-mix(in srgb, var(--color-bridge-primary) 20%, transparent)"
         },
         onClick: () => onSelect && !selected ? onSelect(hover.key) : onReplace(hover.key),
         children: [
@@ -8045,17 +8965,17 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ jsx15(Film, { size: 14 }) : /* @__PURE__ */ jsx15(ImageIcon, { size: 14 }),
-                isVideo ? "Replace video" : "Replace image"
+                replaceLabel
               ]
             }
           ),
-          replaceMode === "none" ? null : /* @__PURE__ */ jsxs7(
+          showChrome && replaceMode !== "none" && /* @__PURE__ */ jsxs7(
             Button,
             {
               "data-ohw-media-overlay": "",
               variant: "outline",
               size: "sm",
-              "aria-label": isVideo ? "Replace video" : "Replace image",
+              "aria-label": replaceLabel,
               className: "gap-1.5 cursor-pointer hover:bg-background",
               style: {
                 ...OVERLAY_BUTTON_STYLE,
@@ -8078,7 +8998,7 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ jsx15(Film, { size: 14 }) : /* @__PURE__ */ jsx15(ImageIcon, { size: 14 }),
-                replaceMode === "full" ? isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image" : null
+                replaceMode === "full" ? replaceLabel : null
               ]
             }
           )
@@ -8116,8 +9036,8 @@ function CarouselOverlay({
         height: rect.height,
         zIndex: 2147483646,
         pointerEvents: "auto",
-        boxShadow: "inset 0 0 0 1.5px var(--color-primary)",
-        background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
+        boxShadow: "inset 0 0 0 1.5px var(--color-bridge-primary)",
+        background: "color-mix(in srgb, var(--color-bridge-primary) 20%, transparent)"
       },
       onClick: () => onEdit(hover.key),
       children: /* @__PURE__ */ jsxs8(
@@ -8137,229 +9057,17 @@ function CarouselOverlay({
             /* @__PURE__ */ jsx16(GalleryHorizontal, { size: 14 }),
             "Edit gallery"
           ]
-        }
-      )
-    }
-  );
-}
-
-// src/ui/ai-section/AiSectionOverlay.tsx
-import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
-import { Check, X } from "lucide-react";
-
-// src/lib/sections.ts
-var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
-function isChromeSection(el) {
-  return el.matches("header, nav, footer, aside");
-}
-function titleCaseSectionId(id) {
-  return id.split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
-}
-function parseSectionsFromRoot(root) {
-  const seen = /* @__PURE__ */ new Set();
-  const sections = [];
-  for (const el of root.querySelectorAll("[data-ohw-section]")) {
-    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 });
-  }
-  return sections;
-}
-function collectSectionsFromDom() {
-  if (typeof document === "undefined") return [];
-  return parseSectionsFromRoot(document);
-}
-function parseSectionsFromHtml(html) {
-  const doc = new DOMParser().parseFromString(html, "text/html");
-  return parseSectionsFromRoot(doc);
-}
-
-// src/lib/section-instances.ts
-var SECTION_ORDER_KEY = "__ohw_section_order";
-var REMOVED_ATTR2 = "data-ohw-section-removed";
-function isRemovedSection(el) {
-  return el.hasAttribute(REMOVED_ATTR2);
-}
-function topLevelSections() {
-  return Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el) && !isRemovedSection(el)
-  );
-}
-function instanceIdOf(el) {
-  return el.dataset.ohwInstance ?? el.dataset.ohwSection ?? "";
-}
-function findByInstanceId(instanceId) {
-  const escapedId = CSS.escape(instanceId);
-  return document.querySelector(`[data-ohw-instance="${escapedId}"]`) ?? document.querySelector(`[data-ohw-section="${escapedId}"]:not([data-ohw-instance])`);
-}
-function planSectionMove(instanceId, targetIndex, currentPath) {
-  const sections = topLevelSections();
-  const index = sections.findIndex((el) => instanceIdOf(el) === instanceId);
-  if (index === -1) return null;
-  const dragged = sections[index];
-  const others = sections.filter((_, i) => i !== index);
-  const clamped = Math.max(0, Math.min(targetIndex, others.length));
-  const reordered = [...others.slice(0, clamped), dragged, ...others.slice(clamped)];
-  return reordered.map((el, order) => ({
-    instanceId: instanceIdOf(el),
-    type: el.getAttribute("data-ohw-section") ?? "",
-    order,
-    pagePath: currentPath
-  }));
-}
-function moveSectionInstance(instanceId, direction, currentPath) {
-  const sections = topLevelSections();
-  const index = sections.findIndex((el) => instanceIdOf(el) === instanceId);
-  if (index === -1) return null;
-  const siblingIndex = direction === "up" ? index - 1 : index + 1;
-  if (siblingIndex < 0 || siblingIndex >= sections.length) return null;
-  const entries = planSectionMove(instanceId, siblingIndex, currentPath);
-  if (!entries) return null;
-  applyPersistedOrder(entries);
-  return entries;
-}
-function syncRemovedFlags(entries) {
-  const removedIds = new Set(entries.filter((e) => e.removed).map((e) => e.instanceId));
-  document.querySelectorAll(`[${REMOVED_ATTR2}]`).forEach((el) => {
-    if (!removedIds.has(instanceIdOf(el))) {
-      el.style.removeProperty("display");
-      el.removeAttribute(REMOVED_ATTR2);
-    }
-  });
-  for (const id of removedIds) {
-    const el = findByInstanceId(id);
-    if (el) {
-      el.style.display = "none";
-      el.setAttribute(REMOVED_ATTR2, "");
-    }
-  }
-}
-function applyPersistedOrder(entries) {
-  syncRemovedFlags(entries);
-  if (entries.length === 0) return;
-  const sections = topLevelSections();
-  if (sections.length === 0) return;
-  const orderIndex = new Map(entries.map((e) => [e.instanceId, e.order]));
-  const ordered = [...sections].sort((a, b) => {
-    const aOrder = orderIndex.get(instanceIdOf(a));
-    const bOrder = orderIndex.get(instanceIdOf(b));
-    if (aOrder === void 0 && bOrder === void 0) return 0;
-    if (aOrder === void 0) return 1;
-    if (bOrder === void 0) return -1;
-    return aOrder - bOrder;
-  });
-  let prev = null;
-  for (const el of ordered) {
-    if (prev) prev.after(el);
-    prev = el;
-  }
-}
-function setSectionRemoved(instanceId, currentPath, existingEntries, removed) {
-  if (!findByInstanceId(instanceId)) return null;
-  const byId = new Map(existingEntries.map((e) => [e.instanceId, e]));
-  const allSections = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
-  );
-  allSections.forEach((el, order) => {
-    const id = instanceIdOf(el);
-    if (!byId.has(id)) {
-      byId.set(id, { instanceId: id, type: el.getAttribute("data-ohw-section") ?? "", order, pagePath: currentPath });
-    }
-  });
-  const target = byId.get(instanceId);
-  if (!target) return null;
-  byId.set(instanceId, { ...target, removed });
-  const entries = Array.from(byId.values());
-  applyPersistedOrder(entries);
-  return entries;
-}
-function deleteSectionInstance(instanceId, currentPath, existingEntries) {
-  return setSectionRemoved(instanceId, currentPath, existingEntries, true);
-}
-function restoreSectionInstance(instanceId, currentPath, existingEntries) {
-  return setSectionRemoved(instanceId, currentPath, existingEntries, false);
-}
-function duplicateSectionInstance(instanceId, newId, currentPath, existingEntries) {
-  const original = findByInstanceId(instanceId);
-  if (!original) return null;
-  const clone = original.cloneNode(true);
-  clone.setAttribute("data-ohw-instance", newId);
-  const keyRekeys = rekeySectionSubtree(clone, newId);
-  original.insertAdjacentElement("afterend", clone);
-  const byId = new Map(existingEntries.map((e) => [e.instanceId, e]));
-  const entries = topLevelSections().map((el, order) => {
-    const id = instanceIdOf(el);
-    return {
-      instanceId: id,
-      type: el.getAttribute("data-ohw-section") ?? "",
-      order,
-      pagePath: currentPath,
-      ...byId.get(id)?.removed ? { removed: true } : {}
-    };
-  });
-  applyPersistedOrder(entries);
-  return { entries, keyRekeys };
-}
-function newInstanceId() {
-  return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `instance-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-}
-function getPageSectionOrderEntries(raw, currentPath) {
-  if (!raw) return [];
-  try {
-    const entries = JSON.parse(raw);
-    return entries.filter((e) => !e.pagePath || e.pagePath === currentPath);
-  } catch {
-    return [];
-  }
-}
-function rekeySectionSubtree(root, instanceId) {
-  const suffix = `::${instanceId}`;
-  const pairs = [];
-  const rekey = (el, attr) => {
-    const current = el.getAttribute(attr);
-    if (!current) return;
-    const base = current.includes("::") ? current.slice(0, current.indexOf("::")) : current;
-    const next = `${base}${suffix}`;
-    el.setAttribute(attr, next);
-    pairs.push({ from: current, to: next });
-  };
-  if (root.hasAttribute("data-ohw-key")) rekey(root, "data-ohw-key");
-  if (root.hasAttribute("data-ohw-href-key")) rekey(root, "data-ohw-href-key");
-  root.querySelectorAll("[data-ohw-key]").forEach((el) => rekey(el, "data-ohw-key"));
-  root.querySelectorAll("[data-ohw-href-key]").forEach((el) => rekey(el, "data-ohw-href-key"));
-  return pairs;
-}
-function initSectionInstancesFromContent(content, currentPath) {
-  document.querySelectorAll("[data-ohw-section]:not([data-ohw-instance])").forEach((el) => {
-    el.setAttribute("data-ohw-instance", el.getAttribute("data-ohw-section") ?? "");
-  });
-  const entries = getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath);
-  for (const entry of entries) {
-    if (entry.instanceId === entry.type) continue;
-    if (document.querySelector(`[data-ohw-instance="${CSS.escape(entry.instanceId)}"]`)) continue;
-    const original = document.querySelector(
-      `[data-ohw-section="${CSS.escape(entry.type)}"][data-ohw-instance="${CSS.escape(entry.type)}"]`
-    );
-    if (!original) continue;
-    const clone = original.cloneNode(true);
-    clone.setAttribute("data-ohw-instance", entry.instanceId);
-    rekeySectionSubtree(clone, entry.instanceId);
-    original.insertAdjacentElement("afterend", clone);
-  }
-  applyPersistedOrder(entries);
+        }
+      )
+    }
+  );
 }
 
 // src/ui/ai-section/AiSectionOverlay.tsx
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import { Check, X } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs9 } from "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])`);
-}
+var findSectionElement = findByInstanceId;
 function readRect(instanceId) {
   const el = findSectionElement(instanceId);
   if (!el) return null;
@@ -8399,7 +9107,7 @@ function useLiveSectionRect(sectionId) {
 }
 function computeSectionBoundaryFlags(instanceId) {
   const topLevel = topLevelSections();
-  const index = topLevel.findIndex((el) => (el.dataset.ohwInstance ?? el.dataset.ohwSection) === instanceId);
+  const index = topLevel.findIndex((el) => instanceIdOf(el) === instanceId);
   if (index === -1) return { isFirst: true, isLast: true };
   return { isFirst: index === 0, isLast: index === topLevel.length - 1 };
 }
@@ -8483,18 +9191,20 @@ function AiSectionOverlay({
   selectedIdRef.current = selectedId;
   const report = useCallback2(
     (el) => {
+      const labelSrc = el ? sectionElementOf(el) : null;
       postToParent2({
         type: "ow:section-selected",
-        sectionId: el ? el.dataset.ohwInstance ?? el.dataset.ohwSection ?? null : null,
-        sectionLabel: el ? el.dataset.ohwSectionLabel ?? titleCaseSectionId(el.dataset.ohwSection ?? "") : null
+        sectionId: el ? instanceIdOf(el) || null : null,
+        sectionLabel: labelSrc ? labelSrc.dataset.ohwSectionLabel ?? titleCaseSectionId(labelSrc.dataset.ohwSection ?? "") : null
       });
     },
     [postToParent2]
   );
   const selectFromElement = useCallback2(
     (el, options) => {
-      const sectionEl = el?.closest("[data-ohw-section]") ?? null;
-      const id = sectionEl ? sectionEl.dataset.ohwInstance ?? sectionEl.dataset.ohwSection ?? null : null;
+      const inner = el?.closest("[data-ohw-section]") ?? null;
+      const sectionEl = inner ? movableUnit(inner) : null;
+      const id = sectionEl ? instanceIdOf(sectionEl) || null : null;
       if (id === selectedIdRef.current) return;
       setSelectedId(id);
       if (options?.report !== false) report(sectionEl);
@@ -8560,7 +9270,8 @@ function AiSectionOverlay({
         return;
       }
       const sec = t.closest("[data-ohw-section]");
-      setHoveredId(sec ? sec.dataset.ohwInstance ?? sec.dataset.ohwSection ?? null : null);
+      const unit = sec ? movableUnit(sec) : null;
+      setHoveredId(unit ? instanceIdOf(unit) || null : null);
     };
     const onLeave = () => setHoveredId(null);
     document.addEventListener("mousemove", onMove, { passive: true });
@@ -9164,7 +9875,7 @@ function SectionTreeItem({
     /* @__PURE__ */ jsx20(
       "div",
       {
-        className: "mr-[-1px] h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
+        className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
         "aria-hidden": true
       }
     ),
@@ -9183,7 +9894,7 @@ function SectionTreeItem({
         className: cn(
           "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-md border border-border bg-background p-3",
           interactive && "cursor-pointer hover:bg-muted/30",
-          interactive && selected && "border-primary"
+          interactive && selected && "border-bridge-primary"
         ),
         children: [
           /* @__PURE__ */ jsx20(
@@ -9313,7 +10024,7 @@ function UrlOrPageInput({
   };
   const fieldClassName = cn(
     "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"
+    urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-bridge-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
   );
   return /* @__PURE__ */ jsxs13("div", { className: "flex w-full flex-col gap-2 p-0", children: [
     /* @__PURE__ */ jsx23(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
@@ -10357,6 +11068,32 @@ function getNavbarDesktopContainer() {
 function getNavbarDrawerContainer() {
   return document.querySelector("[data-ohw-nav-drawer]");
 }
+function isNavbarListContainerVisible(el) {
+  if (el.hasAttribute("hidden")) return false;
+  if (el.getClientRects().length === 0) return false;
+  const style = window.getComputedStyle(el);
+  return style.display !== "none" && style.visibility !== "hidden";
+}
+function getActiveNavbarListContainer(draggedEl) {
+  const desktop = getNavbarDesktopContainer();
+  const drawer = getNavbarDrawerContainer();
+  if (draggedEl) {
+    if (drawer?.contains(draggedEl)) return drawer;
+    if (desktop?.contains(draggedEl)) return desktop;
+  }
+  if (desktop && isNavbarListContainerVisible(desktop)) return desktop;
+  if (drawer && isNavbarListContainerVisible(drawer)) return drawer;
+  return desktop ?? drawer;
+}
+function listActiveNavbarItems(draggedEl) {
+  const container = getActiveNavbarListContainer(draggedEl);
+  if (container) {
+    return Array.from(container.querySelectorAll("[data-ohw-href-key]")).filter(
+      isNavbarLinkItem
+    );
+  }
+  return listNavbarItems();
+}
 function listNavbarItems() {
   const desktop = getNavbarDesktopContainer();
   if (desktop) {
@@ -11469,20 +12206,23 @@ function isEmptyLabelValue(value) {
 function applyStoredValues(item, content) {
   const hrefKey = socialHrefKey(item);
   const iconKey = socialIconKey(item);
+  const baseKey = hrefKey?.replace(/-href$/, "");
   if (hrefKey && content[hrefKey] !== void 0) item.setAttribute("href", content[hrefKey]);
-  if (iconKey) {
+  const glyphKey = iconKey ?? baseKey ?? null;
+  const glyphStored = glyphKey ? content[glyphKey]?.trim() : void 0;
+  if (glyphStored) {
+    ensureIconSlot(item);
     const glyph = item.querySelector(ICON_SELECTOR);
-    if (glyph && content[iconKey]) {
-      applyIconMarkup(glyph, content[iconKey]);
+    if (glyph) {
+      applyIconMarkup(glyph, glyphStored);
       glyph.removeAttribute(SOCIALS_ICON_PLACEHOLDER_ATTR);
     }
-    const label = item.querySelector(`[${SOCIALS_LABEL_ATTR}]`);
-    label?.setAttribute("data-ohw-key", socialLabelKey(iconKey));
-    const stored = content[socialLabelKey(iconKey)];
-    if (label && stored !== void 0) {
-      const words = isEmptyLabelValue(stored) ? "" : stored;
-      if (label.innerHTML !== words) label.innerHTML = words;
-    }
+  }
+  const label = socialLabelElement(item);
+  const labelKey = label?.getAttribute("data-ohw-key");
+  if (label && labelKey && content[labelKey] !== void 0) {
+    const words = isEmptyLabelValue(content[labelKey]) ? "" : content[labelKey];
+    if (label.innerHTML !== words) label.innerHTML = words;
   }
 }
 function socialPlatformKey(iconKey) {
@@ -11571,6 +12311,9 @@ function insertSocialItem(row, after, content = {}, { placeholder = true, keys }
   if (placeholder) {
     const label = socialLabelElement(item);
     if (label) label.textContent = PLACEHOLDER_SOCIAL_LABEL;
+  } else if (keys) {
+    const label = socialLabelElement(item);
+    if (label) label.textContent = "";
   }
   applySocialsDisplayToRow(row, display);
   return { item, hrefKey, iconKey, order: getSocialsOrderFromDom(row.ownerDocument) };
@@ -13071,6 +13814,7 @@ function readLogoSizeState(content, placement) {
 function getLogoElement(el) {
   const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
   if (marked) return marked;
+  if (el.closest('[data-ohw-editable="icon"]')) return null;
   const root = el.closest("nav, [data-ohw-nav-root], footer");
   if (!root) return null;
   const anchor = el.closest("a");
@@ -13364,7 +14108,7 @@ function DisplaySwitch({
         onClick: () => onChange(!checked),
         className: cn(
           "relative h-5 w-9 shrink-0 rounded-full transition-colors",
-          checked ? "bg-primary" : "bg-primary-50",
+          checked ? "bg-bridge-primary" : "bg-primary-50",
           disabled ? "cursor-default opacity-50" : "cursor-pointer"
         ),
         children: /* @__PURE__ */ jsx28(
@@ -13372,7 +14116,7 @@ function DisplaySwitch({
           {
             className: cn(
               "absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all",
-              checked ? "left-[1.125rem]" : "left-0.5"
+              checked ? "left-4.5" : "left-0.5"
             )
           }
         )
@@ -13433,8 +14177,8 @@ var lockFooterDuringDrag = lockItemDuringDrag;
 var unlockFooterDragInteraction = unlockItemDragInteraction;
 
 // src/lib/nav-dnd.ts
-function listReorderableNavItems() {
-  return listNavbarItems().filter((el) => {
+function listReorderableNavItems(draggedEl) {
+  return listActiveNavbarItems(draggedEl).filter((el) => {
     const key = el.getAttribute("data-ohw-href-key");
     return isNavbarHrefKey(key) && !isNestedNavChild(el);
   });
@@ -13449,8 +14193,8 @@ function resolveParentNavHrefKey(child) {
   const key = trigger?.getAttribute("data-ohw-href-key");
   return key && isNavbarHrefKey(key) ? key : null;
 }
-function listNavChildren(parentHrefKey) {
-  const items = listNavbarItems();
+function listNavChildren(parentHrefKey, draggedEl) {
+  const items = listActiveNavbarItems(draggedEl);
   const parent = items.find((el) => el.getAttribute("data-ohw-href-key") === parentHrefKey);
   if (!parent) return [];
   const group = parent.closest("[data-ohw-nav-group]");
@@ -13460,20 +14204,83 @@ function listNavChildren(parentHrefKey) {
     (el) => isNavbarHrefKey(el.getAttribute("data-ohw-href-key"))
   );
 }
-function activeNavListContainer() {
-  const desktop = getNavbarDesktopContainer();
-  if (desktop && desktop.getClientRects().length > 0) {
-    const style = window.getComputedStyle(desktop);
-    if (style.display !== "none" && style.visibility !== "hidden") return desktop;
+function isVerticalNavLayout(items, draggedEl) {
+  const visible = items.filter((el) => el.getClientRects().length > 0);
+  if (visible.length >= 2) {
+    const a = visible[0].getBoundingClientRect();
+    const b = visible[1].getBoundingClientRect();
+    const verticalGap = b.top - a.bottom;
+    const horizontalGap = b.left - a.right;
+    return verticalGap > horizontalGap;
+  }
+  const container = getActiveNavbarListContainer(draggedEl);
+  if (!container) return false;
+  const style = window.getComputedStyle(container);
+  return style.flexDirection === "column" || style.flexDirection === "column-reverse";
+}
+function buildVerticalRootNavDropSlots(items, draggedEl) {
+  const slots = [];
+  const barThickness = 3;
+  if (items.length === 0) {
+    const container = getActiveNavbarListContainer(draggedEl);
+    if (!container) return slots;
+    const rect = container.getBoundingClientRect();
+    slots.push({
+      insertIndex: 0,
+      parentId: null,
+      left: rect.left,
+      top: rect.top + rect.height / 2 - barThickness / 2,
+      width: Math.max(rect.width, 40),
+      height: barThickness,
+      direction: "horizontal"
+    });
+    return slots;
+  }
+  const edgeGap = (() => {
+    if (items.length < 2) return 16;
+    const a = items[0].getBoundingClientRect();
+    const b = items[1].getBoundingClientRect();
+    return Math.max(0, b.top - a.bottom);
+  })();
+  for (let i = 0; i <= items.length; i++) {
+    let top;
+    let width;
+    let left;
+    if (i === 0) {
+      const first = items[0].getBoundingClientRect();
+      top = first.top - edgeGap / 2 - barThickness / 2;
+      left = first.left;
+      width = first.width;
+    } else if (i === items.length) {
+      const last = items[items.length - 1].getBoundingClientRect();
+      const lastGap = items.length >= 2 ? Math.max(0, last.top - items[items.length - 2].getBoundingClientRect().bottom) : edgeGap;
+      top = last.bottom + lastGap / 2 - barThickness / 2;
+      left = last.left;
+      width = last.width;
+    } else {
+      const prev = items[i - 1].getBoundingClientRect();
+      const next = items[i].getBoundingClientRect();
+      top = (prev.bottom + next.top) / 2 - barThickness / 2;
+      left = Math.min(prev.left, next.left);
+      width = Math.max(prev.right, next.right) - left;
+    }
+    slots.push({
+      insertIndex: i,
+      parentId: null,
+      left,
+      top,
+      width: Math.max(width, 40),
+      height: barThickness,
+      direction: "horizontal"
+    });
   }
-  return getNavbarDrawerContainer();
+  return slots;
 }
-function buildRootNavDropSlots() {
-  const items = listReorderableNavItems();
+function buildHorizontalRootNavDropSlots(items, draggedEl) {
   const slots = [];
   const barThickness = 3;
   if (items.length === 0) {
-    const container = activeNavListContainer();
+    const container = getActiveNavbarListContainer(draggedEl);
     if (!container) return slots;
     const rect = container.getBoundingClientRect();
     slots.push({
@@ -13504,10 +14311,7 @@ function buildRootNavDropSlots() {
       height = first.height;
     } else if (i === items.length) {
       const last = items[items.length - 1].getBoundingClientRect();
-      const lastGap = items.length >= 2 ? Math.max(
-        0,
-        last.left - items[items.length - 2].getBoundingClientRect().right
-      ) : edgeGap;
+      const lastGap = items.length >= 2 ? Math.max(0, last.left - items[items.length - 2].getBoundingClientRect().right) : edgeGap;
       left = last.right + lastGap / 2 - barThickness / 2;
       top = last.top;
       height = last.height;
@@ -13530,8 +14334,15 @@ function buildRootNavDropSlots() {
   }
   return slots;
 }
-function buildChildNavDropSlots(parentHrefKey) {
-  const children = listNavChildren(parentHrefKey);
+function buildRootNavDropSlots(draggedEl) {
+  const items = listReorderableNavItems(draggedEl);
+  if (isVerticalNavLayout(items, draggedEl)) {
+    return buildVerticalRootNavDropSlots(items, draggedEl);
+  }
+  return buildHorizontalRootNavDropSlots(items, draggedEl);
+}
+function buildChildNavDropSlots(parentHrefKey, draggedEl) {
+  const children = listNavChildren(parentHrefKey, draggedEl);
   const slots = [];
   const barThickness = 3;
   if (children.length === 0) return slots;
@@ -13552,10 +14363,7 @@ function buildChildNavDropSlots(parentHrefKey) {
       width = first.width;
     } else if (i === children.length) {
       const last = children[children.length - 1].getBoundingClientRect();
-      const lastGap = children.length >= 2 ? Math.max(
-        0,
-        last.top - children[children.length - 2].getBoundingClientRect().bottom
-      ) : edgeGap;
+      const lastGap = children.length >= 2 ? Math.max(0, last.top - children[children.length - 2].getBoundingClientRect().bottom) : edgeGap;
       top = last.bottom + lastGap / 2 - barThickness / 2;
       left = last.left;
       width = last.width;
@@ -13578,18 +14386,19 @@ function buildChildNavDropSlots(parentHrefKey) {
   }
   return slots;
 }
-function buildAllNavDropSlots(draggedHrefKey) {
-  const dragged = listNavbarItems().find((el) => el.getAttribute("data-ohw-href-key") === draggedHrefKey);
-  if (!dragged) return buildRootNavDropSlots();
+function buildAllNavDropSlots(draggedHrefKey, draggedEl) {
+  const activeItems = listActiveNavbarItems(draggedEl);
+  const dragged = (draggedEl && activeItems.includes(draggedEl) ? draggedEl : null) ?? activeItems.find((el) => el.getAttribute("data-ohw-href-key") === draggedHrefKey) ?? listNavbarItems().find((el) => el.getAttribute("data-ohw-href-key") === draggedHrefKey);
+  if (!dragged) return buildRootNavDropSlots(draggedEl);
   if (isNestedNavChild(dragged)) {
     const parentKey = resolveParentNavHrefKey(dragged);
     if (!parentKey) return [];
-    return buildChildNavDropSlots(parentKey);
+    return buildChildNavDropSlots(parentKey, draggedEl);
   }
-  return buildRootNavDropSlots();
+  return buildRootNavDropSlots(draggedEl);
 }
-function hitTestNavDropSlot(clientX, clientY, draggedHrefKey) {
-  const slots = buildAllNavDropSlots(draggedHrefKey);
+function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
+  const slots = buildAllNavDropSlots(draggedHrefKey, draggedEl);
   let best = null;
   for (const slot of slots) {
     const cx2 = slot.left + slot.width / 2;
@@ -13640,6 +14449,12 @@ function useNavItemDrag({
     setIsItemDragging(false);
     if (keepOpenEl?.isConnected) {
       setNavGroupForceOpen(keepOpenEl, true);
+      requestAnimationFrame(() => {
+        if (keepOpenEl.isConnected) setNavGroupForceOpen(keepOpenEl, true);
+        requestAnimationFrame(() => {
+          if (keepOpenEl.isConnected) setNavGroupForceOpen(keepOpenEl, true);
+        });
+      });
     } else {
       setNavGroupForceOpen(null, false);
     }
@@ -13655,7 +14470,7 @@ function useNavItemDrag({
       }
       session.activeSlot = activeSlot;
       setSiblingHintRects([]);
-      const slots = buildAllNavDropSlots(session.hrefKey);
+      const slots = buildAllNavDropSlots(session.hrefKey, session.draggedEl);
       setNavDropSlots(slots);
       const activeIdx = activeSlot ? slots.findIndex(
         (s) => s.parentId === activeSlot.parentId && s.insertIndex === activeSlot.insertIndex
@@ -13691,7 +14506,12 @@ function useNavItemDrag({
       if (session.wasSelected && selectedElRef.current === session.draggedEl) {
         setToolbarRect(rect);
       }
-      const initialSlot = hitTestNavDropSlot(session.lastClientX, session.lastClientY, session.hrefKey);
+      const initialSlot = hitTestNavDropSlot(
+        session.lastClientX,
+        session.lastClientY,
+        session.hrefKey,
+        session.draggedEl
+      );
       refreshNavDragVisuals(session, initialSlot, session.lastClientX, session.lastClientY);
     },
     [
@@ -13713,10 +14533,11 @@ function useNavItemDrag({
       }
       const x = typeof clientX === "number" && (clientX !== 0 || clientY !== 0) ? clientX : session.lastClientX;
       const y = typeof clientY === "number" && (clientX !== 0 || clientY !== 0) ? clientY : session.lastClientY;
-      const slot = session.activeSlot ?? hitTestNavDropSlot(x, y, session.hrefKey);
+      const slot = session.activeSlot ?? hitTestNavDropSlot(x, y, session.hrefKey, session.draggedEl);
       const planned = slot != null ? planNavItemMove(session.hrefKey, slot.parentId, slot.insertIndex) : null;
       const wasSelected = session.wasSelected;
       const hrefKey = session.hrefKey;
+      const keepDropdownOpen = Boolean(session.draggedEl.closest("[data-ohw-nav-children]"));
       const applySelectionAfterDrop = () => {
         if (!wasSelected) {
           deselectRef.current();
@@ -13750,6 +14571,14 @@ function useNavItemDrag({
         });
         applySelectionAfterDrop();
         clearNavDragVisuals();
+        if (keepDropdownOpen) {
+          requestAnimationFrame(() => {
+            const desktop = document.querySelector("[data-ohw-nav-container]");
+            const drawer = document.querySelector("[data-ohw-nav-drawer]");
+            const link = desktop?.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`) ?? drawer?.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`) ?? document.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`);
+            if (link) setNavGroupForceOpen(link, true);
+          });
+        }
         requestAnimationFrame(() => {
           if (editContentRef.current[NAV_ORDER_KEY] === planned.orderJson) {
             applyNavForest(planned.forest);
@@ -13789,7 +14618,7 @@ function useNavItemDrag({
       if (!session) return false;
       e.preventDefault();
       if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-      const slot = hitTestNavDropSlot(e.clientX, e.clientY, session.hrefKey);
+      const slot = hitTestNavDropSlot(e.clientX, e.clientY, session.hrefKey, session.draggedEl);
       refreshNavDragVisualsRef.current(session, slot, e.clientX, e.clientY);
       return true;
     },
@@ -13835,7 +14664,7 @@ function useNavItemDrag({
         clearTextSelection();
         const session = navDragRef.current;
         if (!session) return;
-        const slot = hitTestNavDropSlot(e.clientX, e.clientY, session.hrefKey);
+        const slot = hitTestNavDropSlot(e.clientX, e.clientY, session.hrefKey, session.draggedEl);
         refreshNavDragVisualsRef.current(session, slot, e.clientX, e.clientY);
         return;
       }
@@ -13851,7 +14680,8 @@ function useNavItemDrag({
       } catch {
       }
       if (linkPopoverOpenRef.current) setLinkPopover(null);
-      if (activeElRef.current) deactivateRef.current();
+      const isNestedDrag = Boolean(pending.el.closest("[data-ohw-nav-children]"));
+      if (activeElRef.current && !isNestedDrag) deactivateRef.current();
       const key = pending.el.getAttribute("data-ohw-href-key");
       if (!key) return;
       beginNavDragRef.current({
@@ -13862,6 +14692,9 @@ function useNavItemDrag({
         lastClientY: e.clientY,
         activeSlot: null
       });
+      if (activeElRef.current && isNestedDrag) {
+        deactivateRef.current();
+      }
     };
     const endPointerDrag = (e) => {
       const pending = navPointerDragRef.current;
@@ -13939,6 +14772,7 @@ function useNavItemDrag({
   );
   return {
     navDragRef,
+    navPointerDragRef,
     navDropSlots,
     activeNavDropIndex,
     startNavLinkDrag,
@@ -14143,15 +14977,17 @@ function useSectionDrag({
       clearSectionDragVisuals();
       return;
     }
-    const orderJson = JSON.stringify(entries);
+    const orderJson = JSON.stringify(
+      mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname, entries)
+    );
     editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: orderJson };
     setAiSectionOrder(orderJson, window.location.pathname);
     postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: orderJson }] });
-    applyPersistedOrder(entries);
+    applyPersistedOrder(getPageSectionOrderEntries(orderJson, window.location.pathname));
     clearSectionDragVisuals();
     requestAnimationFrame(() => {
       if (editContentRef.current[SECTION_ORDER_KEY] === orderJson) {
-        applyPersistedOrder(entries);
+        applyPersistedOrder(getPageSectionOrderEntries(orderJson, window.location.pathname));
       }
       requestAnimationFrame(() => {
         window.dispatchEvent(new Event("resize"));
@@ -14184,8 +15020,9 @@ function useSectionDrag({
       const target = e.target;
       if (!(target instanceof HTMLElement)) return;
       if (target.closest(SECTION_DRAG_EXCLUDED_SELECTOR)) return;
-      const sectionEl = target.closest("[data-ohw-section]");
-      if (!sectionEl || isChromeSection(sectionEl) || sectionEl.dataset.ohwSection === "footer") return;
+      const inner = target.closest("[data-ohw-section]");
+      if (!inner || isChromeSection(inner) || inner.dataset.ohwSection === "footer") return;
+      const sectionEl = movableUnit(inner);
       if (!topLevelSections().includes(sectionEl)) return;
       startSectionPressDrag(sectionEl, e.clientX, e.clientY, e.pointerId);
     };
@@ -14452,10 +15289,15 @@ function collectEditableNodes(extraContent, root = document) {
     if (el.dataset.ohwEditable === "link") {
       return { key: el.dataset.ohwKey ?? "", type: "link", text: getLinkHref3(el) };
     }
+    if (el.dataset.ohwEditable === "map") {
+      return { key: el.dataset.ohwKey ?? "", type: "map", text: el.dataset.ohwMapQuery ?? "" };
+    }
     return {
       key: el.dataset.ohwKey ?? "",
       type: el.dataset.ohwEditable ?? "text",
-      text: el.dataset.ohwEditable === "plain" ? el.innerText ?? "" : el.innerHTML
+      // innerText does not exist on SVG elements (a circular-badge <textPath> is a legitimate
+      // plain editable) — textContent is the value there.
+      text: el.dataset.ohwEditable === "plain" ? el.innerText ?? el.textContent ?? "" : el.innerHTML
     };
   });
   const hrefEls = Array.from(root.querySelectorAll("[data-ohw-href-key]"));
@@ -14892,7 +15734,7 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground",
+        default: "border-transparent bg-bridge-primary text-primary-foreground",
         secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground"
@@ -15014,21 +15856,10 @@ function parseSchedulingInsertAfter(insertAfter) {
     insertBefore: insertAfter.slice(idx + INSERT_BEFORE_MARKER.length)
   };
 }
-function resolveSchedulingInsert(insertAfter, explicitInsertBefore) {
-  const parsed = parseSchedulingInsertAfter(insertAfter);
-  const insertBefore = explicitInsertBefore ?? parsed.insertBefore;
-  const effectiveInsertAfter = insertBefore && parsed.insertBefore === null ? `${insertAfter}${INSERT_BEFORE_MARKER}${insertBefore}` : insertAfter;
-  return { effectiveInsertAfter, insertBefore };
-}
-function getSchedulingMountPoint(insertAfter) {
-  const { anchor } = parseSchedulingInsertAfter(insertAfter);
-  let anchorEl = document.querySelector(`[data-ohw-section="${anchor}"]`);
-  if (!anchorEl && anchor === "scheduling") {
-    const widgets = Array.from(document.querySelectorAll('[data-ohw-section^="scheduling-"]'));
-    anchorEl = widgets.at(-1) ?? null;
-  }
-  if (!anchorEl) return null;
-  return anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
+function resolveEntryAnchor(entry) {
+  if (entry.anchorId !== void 0) return { anchorId: entry.anchorId, beforeId: entry.beforeId ?? null };
+  const parsed = parseSchedulingInsertAfter(entry.insertAfter);
+  return { anchorId: parsed.anchor, beforeId: parsed.insertBefore };
 }
 function schedulingMountDepth(insertAfter) {
   if (!insertAfter.includes(INSERT_BEFORE_MARKER)) return 0;
@@ -15045,8 +15876,7 @@ function getPageSchedulingEntries(raw) {
   }
 }
 function isSchedulingWidgetMissing(entry) {
-  const { effectiveInsertAfter } = resolveSchedulingInsert(entry.insertAfter);
-  return !document.querySelector(`[data-ohw-section="${schedulingSectionId(effectiveInsertAfter)}"]`);
+  return !document.querySelector(`[data-ohw-section="${schedulingSectionId(entry.insertAfter)}"]`);
 }
 function hasMissingSchedulingWidgets(entries) {
   return entries.some(isSchedulingWidgetMissing);
@@ -15084,18 +15914,18 @@ function initSectionsFromContent(content, removeExisting = false, currentPath =
   } catch {
   }
 }
-function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId, explicitInsertBefore) {
-  const { effectiveInsertAfter, insertBefore } = resolveSchedulingInsert(insertAfter, explicitInsertBefore);
-  const sectionId = schedulingSectionId(effectiveInsertAfter);
+function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, beforeId, existingWidgetId) {
+  const widgetId = existingWidgetId ?? (beforeId ? `${anchorId}${INSERT_BEFORE_MARKER}${beforeId}` : anchorId);
+  const sectionId = schedulingSectionId(widgetId);
   if (document.querySelector(`[data-ohw-section="${sectionId}"]`)) return false;
-  const mountPoint = getSchedulingMountPoint(effectiveInsertAfter);
-  if (!mountPoint) return false;
+  const anchorEl = document.querySelector(`[data-ohw-section="${anchorId}"]`);
+  if (!anchorEl) return false;
+  const mountPoint = anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
   const container = document.createElement("div");
   container.dataset.ohwSectionContainer = "scheduling";
-  container.dataset.ohwSection = sectionId;
   container.dataset.ohwInstance = sectionId;
-  if (insertBefore) {
-    const beforeAnchor = document.querySelector(`[data-ohw-section="${insertBefore}"]`);
+  if (beforeId) {
+    const beforeAnchor = document.querySelector(`[data-ohw-section="${beforeId}"]`);
     const beforePoint = beforeAnchor?.closest('[data-ohw-section-container="scheduling"]') ?? beforeAnchor;
     if (!beforePoint) return false;
     beforePoint.insertAdjacentElement("beforebegin", container);
@@ -15106,20 +15936,26 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
     }
     tail.insertAdjacentElement("afterend", container);
   }
-  const root = createRoot2(container);
-  schedulingRoots.set(container, root);
-  flushSync2(() => {
-    root.render(
-      /* @__PURE__ */ jsx33(
-        SchedulingWidget,
-        {
-          notifyOnConnect,
-          initialScheduleId: scheduleId,
-          insertAfter: effectiveInsertAfter
-        }
-      )
-    );
-  });
+  try {
+    const root = createRoot2(container);
+    schedulingRoots.set(container, root);
+    flushSync2(() => {
+      root.render(
+        /* @__PURE__ */ jsx33(
+          SchedulingWidget,
+          {
+            notifyOnConnect,
+            initialScheduleId: scheduleId,
+            insertAfter: widgetId
+          }
+        )
+      );
+    });
+  } catch (err) {
+    console.error("[ow:scheduling] render threw", err);
+    container.remove();
+    return false;
+  }
   const tracker = getSectionsTracker();
   let sections = [];
   try {
@@ -15127,10 +15963,12 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
   } catch {
   }
   const inEditor = typeof window !== "undefined" && window.self !== window.top;
-  if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === effectiveInsertAfter)) {
+  if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === widgetId)) {
     sections.push({
       type: "scheduling",
-      insertAfter: effectiveInsertAfter,
+      insertAfter: widgetId,
+      anchorId,
+      beforeId: beforeId ?? null,
       pagePath: window.location.pathname,
       ...scheduleId ? { scheduleId } : {}
     });
@@ -15144,7 +15982,8 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
     for (let i = pending.length - 1; i >= 0; i--) {
       const entry = pending[i];
       const shouldNotify = typeof notifyOnConnect === "function" ? notifyOnConnect(entry) : notifyOnConnect;
-      if (mountSchedulingWidget(entry.insertAfter, shouldNotify, entry.scheduleId ?? null)) {
+      const { anchorId, beforeId } = resolveEntryAnchor(entry);
+      if (mountSchedulingWidget(anchorId, shouldNotify, entry.scheduleId ?? null, beforeId, entry.insertAfter)) {
         pending.splice(i, 1);
       }
     }
@@ -15236,7 +16075,7 @@ var EDITOR_CHROME_SELECTOR = '[data-ohw-toolbar], [data-ohw-form-toolbar], [data
 function isOverEditorChrome(x, y) {
   return document.elementsFromPoint(x, y).some((el) => el instanceof HTMLElement && el.matches(EDITOR_CHROME_SELECTOR));
 }
-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"])';
+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"]):not([data-ohw-editable="map"])';
 function getVideoEl2(el) {
   return el instanceof HTMLVideoElement ? el : el.querySelector("video");
 }
@@ -15292,6 +16131,12 @@ function applyVideoSettingNode(key, val) {
   });
   return true;
 }
+function applyMapQuery(el, val) {
+  if (!(el instanceof HTMLIFrameElement)) return;
+  const nextSrc = `https://www.google.com/maps?q=${encodeURIComponent(val)}&output=embed`;
+  if (el.src !== nextSrc) el.src = nextSrc;
+  el.setAttribute("data-ohw-map-query", val);
+}
 function applyLinkByKey(key, val) {
   document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
     if (el.dataset.ohwEditable === "link") applyLinkHref(el, val);
@@ -15302,6 +16147,11 @@ function applyLinkByKey(key, val) {
     hrefAnchors.forEach((el) => applyLinkHref(el, val));
   }
 }
+function isInsideLinkEditor(target) {
+  return Boolean(
+    target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest("[data-ohw-footer-container-chrome]") || target.closest("[data-ohw-footer-add-button]") || target.closest("[data-ohw-more-menu]") || target.closest('[data-slot="dropdown-menu-content"]') || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
+  );
+}
 function isInsideFloatingPanel(target) {
   return Boolean(target.closest("[data-ohw-floating-panel]"));
 }
@@ -15309,11 +16159,6 @@ function isPointOverFloatingPanel(clientX, clientY) {
   const el = document.elementFromPoint(clientX, clientY);
   return Boolean(el instanceof Element && el.closest("[data-ohw-floating-panel]"));
 }
-function isInsideLinkEditor(target) {
-  return Boolean(
-    target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest("[data-ohw-footer-container-chrome]") || target.closest("[data-ohw-footer-add-button]") || target.closest("[data-ohw-more-menu]") || target.closest('[data-slot="dropdown-menu-content"]') || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
-  );
-}
 function getHrefKeyFromElement(el) {
   if (!el) return null;
   const anchor = el.closest("[data-ohw-href-key]");
@@ -15326,6 +16171,7 @@ function isNavDropdownPanelOpen(childrenRoot) {
   if (childrenRoot.closest("[data-ohw-nav-drawer]")) return true;
   const group = childrenRoot.closest("[data-ohw-nav-group]");
   if (group?.hasAttribute("data-ohw-nav-force-open")) return true;
+  if (navDropdownsOpenOnClick()) return false;
   if (childrenRoot.clientHeight < 2 || childrenRoot.clientWidth < 2) return false;
   const style = window.getComputedStyle(childrenRoot);
   if (style.display === "none" || style.visibility === "hidden") return false;
@@ -15369,6 +16215,11 @@ function getNavigationItemAnchor(el) {
 function isNavigationItem2(el) {
   return getNavigationItemAnchor(el) !== null;
 }
+function isNavFooterScopedNavigationItem(el) {
+  return Boolean(
+    el.closest("nav, footer, [data-ohw-nav-container], [data-ohw-nav-drawer]")
+  );
+}
 function socialWordsClicked(target, item) {
   const text = target.closest('[data-ohw-editable="text"], [data-ohw-editable="plain"]');
   return Boolean(text && item.contains(text));
@@ -15572,13 +16423,14 @@ function getNavigationSelectionParent(el) {
   if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
     return getFooterLinksContainer();
   }
-  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
+  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isFooterLinksContainer(el) || isInferredFooterGroup2(el)) {
     return getNavigationRoot(el);
   }
   return null;
 }
 function collectNavigationItemSiblingHintRects(selected) {
   if (!isNavigationItem2(selected)) return [];
+  if (!isNavFooterScopedNavigationItem(selected)) return [];
   const socialsRow = findSocialsRow(selected);
   if (socialsRow) {
     return listSocialItems(socialsRow).filter((item) => item !== selected).map((item) => item.getBoundingClientRect());
@@ -15787,7 +16639,6 @@ var ICONS = {
   insertUnorderedList: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
   insertOrderedList: '<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>'
 };
-var HEIGHT_SETTLE_DELAYS = [150, 400, 800];
 var SELECTION_CHROME_GAP2 = 4;
 var TOOLBAR_STROKE_GAP2 = 4;
 var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
@@ -16167,6 +17018,7 @@ function StateToggle({
   );
 }
 var contentCache = /* @__PURE__ */ new Map();
+var fetchedContentPaths = /* @__PURE__ */ new Set();
 var brandingCache = /* @__PURE__ */ new Map();
 var OHW_LOADER_STYLE = {
   position: "fixed",
@@ -16696,13 +17548,6 @@ function OhhwellsBridge() {
   const [isItemDragging, setIsItemDragging] = useState13(false);
   const [isFooterFrameSelection, setIsFooterFrameSelection] = useState13(false);
   isFooterFrameSelectionRef.current = isFooterFrameSelection;
-  const [floatingPanel, setFloatingPanel] = useState13(null);
-  const floatingPanelOpenRef = useRef10(false);
-  floatingPanelOpenRef.current = floatingPanel !== null;
-  const [floatingPanelPos, setFloatingPanelPos] = useState13(null);
-  const [logoSizeDraft, setLogoSizeDraft] = useState13(null);
-  const [editorViewport, setEditorViewport] = useState13("desktop");
-  const [parentScrollSnap, setParentScrollSnap] = useState13(null);
   const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState13(null);
   const [footerHeadingVisible, setFooterHeadingVisible] = useState13(null);
   const footerDragRef = useRef10(null);
@@ -16720,6 +17565,13 @@ function OhhwellsBridge() {
   const brandKitRef = useRef10("");
   const stylesRef = useRef10("");
   const pendingDeleteUndoRef = useRef10(null);
+  const [floatingPanel, setFloatingPanel] = useState13(null);
+  const floatingPanelOpenRef = useRef10(false);
+  const setFloatingPanelRef = useRef10(setFloatingPanel);
+  const [floatingPanelPos, setFloatingPanelPos] = useState13(null);
+  const [logoSizeDraft, setLogoSizeDraft] = useState13(null);
+  const [editorViewport, setEditorViewport] = useState13("desktop");
+  const [parentScrollSnap, setParentScrollSnap] = useState13(null);
   const [sitePages, setSitePages] = useState13([]);
   const [sectionsByPath, setSectionsByPath] = useState13({});
   const sectionsPrefetchGenRef = useRef10(0);
@@ -16728,9 +17580,21 @@ function OhhwellsBridge() {
   const linkPopoverOpenRef = useRef10(false);
   const linkPopoverGraceUntilRef = useRef10(0);
   setLinkPopoverRef.current = setLinkPopover;
+  setFloatingPanelRef.current = setFloatingPanel;
   linkPopoverSessionRef.current = linkPopover;
+  floatingPanelOpenRef.current = Boolean(floatingPanel);
+  useEffect13(() => {
+    const syncViewport = () => {
+      const next = window.innerWidth <= 480 ? "mobile" : "desktop";
+      setEditorViewport((prev) => prev === next ? prev : next);
+    };
+    syncViewport();
+    window.addEventListener("resize", syncViewport);
+    return () => window.removeEventListener("resize", syncViewport);
+  }, []);
   const {
     navDragRef,
+    navPointerDragRef,
     navDropSlots,
     activeNavDropIndex,
     startNavLinkDrag,
@@ -16933,7 +17797,12 @@ function OhhwellsBridge() {
       if (owner) persistFieldsRef.current(owner);
     }
     activeElRef.current = null;
-    setNavGroupForceOpen(null, false);
+    const preserveNavDropdown = Boolean(navPointerDragRef.current?.el?.closest("[data-ohw-nav-children]")) || Boolean(navDragRef.current?.draggedEl?.closest("[data-ohw-nav-children]")) || Boolean(
+      selectedElRef.current?.closest("[data-ohw-nav-children]") && selectedElRef.current?.closest("[data-ohw-nav-group]")?.hasAttribute("data-ohw-nav-force-open")
+    );
+    if (!preserveNavDropdown) {
+      setNavGroupForceOpen(null, false);
+    }
     setReorderHrefKey(null);
     setReorderDragDisabled(false);
     if (!selectedElRef.current) {
@@ -17055,7 +17924,10 @@ function OhhwellsBridge() {
     setSelectedIsSocialsRow(false);
     const isDropdownTrigger = !isNestedNavChild(navAnchor) && (navItemHasDropdownChildren(navAnchor) || navItemOwnsDropdownPanel(navAnchor));
     if (isNestedNavChild(navAnchor)) {
-      setNavGroupForceOpen(navAnchor, true);
+      const group = navAnchor.closest("[data-ohw-nav-group]");
+      if (group?.hasAttribute("data-ohw-nav-force-open")) {
+        setNavGroupForceOpen(navAnchor, true);
+      }
       setNavDropdownPreviewOpen(null);
     } else if (isDropdownTrigger) {
       const group = navAnchor.closest("[data-ohw-nav-group]");
@@ -17137,6 +18009,10 @@ function OhhwellsBridge() {
   const handleNavDropdownOpenChange = useCallback8((open) => {
     const selected = selectedElRef.current;
     if (!selected || !isNavigationItem2(selected)) return;
+    if (isNestedNavChild(selected)) return;
+    const group = selected.closest("[data-ohw-nav-group]");
+    const domOpen = Boolean(group?.hasAttribute("data-ohw-nav-force-open"));
+    if (open === domOpen) return;
     setNavGroupForceOpen(selected, open);
     setNavDropdownPreviewOpen(open);
     requestAnimationFrame(() => {
@@ -17666,7 +18542,10 @@ function OhhwellsBridge() {
     clearHrefKeyHover(anchor);
     const isDropdownTrigger = !isNestedNavChild(anchor) && (navItemHasDropdownChildren(anchor) || navItemOwnsDropdownPanel(anchor));
     if (isNestedNavChild(anchor)) {
-      setNavGroupForceOpen(anchor, true);
+      const group = anchor.closest("[data-ohw-nav-group]");
+      if (group?.hasAttribute("data-ohw-nav-force-open")) {
+        setNavGroupForceOpen(anchor, true);
+      }
       setNavDropdownPreviewOpen(null);
     } else if (isDropdownTrigger) {
       setNavGroupForceOpen(null, false);
@@ -18053,6 +18932,7 @@ function OhhwellsBridge() {
       }
       if (typeof content[STYLE_STORE_KEY] === "string") {
         stylesRef.current = content[STYLE_STORE_KEY];
+        document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
       }
       applyBrandChrome(content);
@@ -18060,11 +18940,11 @@ function OhhwellsBridge() {
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") continue;
         if (key === AI_SECTIONS_KEY) continue;
+        if (key === LOGO_PLACEHOLDER_KEY) continue;
+        if (LOGO_IMAGE_KEYS.includes(key)) continue;
         if (key === BRAND_KIT_KEY) continue;
         if (key === STYLE_STORE_KEY) continue;
         if (BRAND_CHROME_KEYS.has(key)) continue;
-        if (key === LOGO_PLACEHOLDER_KEY) continue;
-        if (LOGO_IMAGE_KEYS.includes(key)) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -18092,6 +18972,8 @@ function OhhwellsBridge() {
             }
           } else if (el.dataset.ohwEditable === "link") {
             applyLinkHref(el, val);
+          } else if (el.dataset.ohwEditable === "map") {
+            applyMapQuery(el, val);
           } else if (el.dataset.ohwEditable === "icon") {
             applyIconMarkup(el, val);
           } else if (el.dataset.ohwEditable === "form") {
@@ -18110,6 +18992,9 @@ function OhhwellsBridge() {
       applySocialsDisplayFromContent(content);
       applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
       if (isEditModeRef.current) requestMissingSocialIconsRef.current();
+      if (typeof content[STYLE_STORE_KEY] === "string") {
+        applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
+      }
       enforceLinkHrefs();
       initSectionsFromContent(content, true);
       sectionsLoadedRef.current = true;
@@ -18130,7 +19015,9 @@ function OhhwellsBridge() {
     let cancelled = false;
     setFetchState("loading");
     const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
-    fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
+    const initialPath = pathname;
+    fetchedContentPaths.add(`${subdomain}::${initialPath}`);
+    fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(initialPath)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
       if (cancelled) return;
       const content = data?.content ?? {};
       const branding = Boolean(data?.showBranding);
@@ -18239,7 +19126,9 @@ function OhhwellsBridge() {
   }, [isEditMode]);
   useEffect13(() => {
     if (isEditMode || fetchState !== "done") return;
+    console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
     const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+    console.log({ apiUrl, subdomain });
     bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
   }, [isEditMode, fetchState, subdomain]);
   useEffect13(() => {
@@ -18249,10 +19138,10 @@ function OhhwellsBridge() {
     const applyFromCache = () => {
       const content = contentCache.get(subdomain);
       if (!content) return;
-      retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
-      initSectionInstancesFromContent(content, window.location.pathname);
       observer?.disconnect();
       try {
+        retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
+        initSectionInstancesFromContent(content, window.location.pathname);
         applyBrandChrome(content);
         if (typeof content[BRAND_KIT_KEY] === "string") {
           applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
@@ -18264,16 +19153,17 @@ function OhhwellsBridge() {
           applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
         }
         if (typeof content[STYLE_STORE_KEY] === "string") {
+          document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
           applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
         }
         for (const [key, val] of Object.entries(content)) {
           if (key === "__ohw_sections") continue;
           if (key === AI_SECTIONS_KEY) continue;
+          if (key === LOGO_PLACEHOLDER_KEY) continue;
+          if (LOGO_IMAGE_KEYS.includes(key)) continue;
           if (key === BRAND_KIT_KEY) continue;
           if (key === STYLE_STORE_KEY) continue;
           if (BRAND_CHROME_KEYS.has(key)) continue;
-          if (key === LOGO_PLACEHOLDER_KEY) continue;
-          if (LOGO_IMAGE_KEYS.includes(key)) continue;
           if (applyVideoSettingNode(key, val)) continue;
           if (applyCarouselNode(key, val)) continue;
           document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -18288,6 +19178,8 @@ function OhhwellsBridge() {
               if (video && video.src !== val) applyVideoSrc(video, val);
             } else if (el.dataset.ohwEditable === "link") {
               applyLinkHref(el, val);
+            } else if (el.dataset.ohwEditable === "map") {
+              applyMapQuery(el, val);
             } else if (el.dataset.ohwEditable === "form") {
             } else if (isIconMarkupValue(val)) {
             } else if (el.innerHTML !== val) {
@@ -18303,6 +19195,9 @@ function OhhwellsBridge() {
         applySocialsDisplayFromContent(content);
         applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
         if (isEditModeRef.current) requestMissingSocialIconsRef.current();
+        if (typeof content[STYLE_STORE_KEY] === "string") {
+          applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
+        }
         document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
           if (!form.querySelector("[data-ohw-form-success]")) {
             reconcileFieldsFromContent(form, content);
@@ -18319,6 +19214,17 @@ function OhhwellsBridge() {
       debounceTimer = setTimeout(applyFromCache, 150);
     };
     applyFromCache();
+    const pathCacheKey = `${subdomain}::${pathname}`;
+    if (!fetchedContentPaths.has(pathCacheKey)) {
+      fetchedContentPaths.add(pathCacheKey);
+      const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+      fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(pathname)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
+        if (!data?.content) return;
+        contentCache.set(subdomain, data.content);
+        applyFromCache();
+      }).catch(() => {
+      });
+    }
     observer = new MutationObserver(scheduleApply);
     observer.observe(document.body, { childList: true, subtree: true });
     return () => {
@@ -18343,6 +19249,10 @@ function OhhwellsBridge() {
     deselectRef.current();
     deactivateRef.current();
   }, [pathname, isEditMode]);
+  useEffect13(() => {
+    if (!isEditMode) return;
+    initSectionInstancesFromContent(editContentRef.current, pathname);
+  }, [pathname, isEditMode]);
   useEffect13(() => {
     const contentForNav = () => {
       if (isEditMode) return editContentRef.current;
@@ -18434,26 +19344,11 @@ function OhhwellsBridge() {
     const t2 = setTimeout(measure, 500);
     const ro = new ResizeObserver(schedule);
     ro.observe(document.body);
-    let lastWidth = window.innerWidth;
-    let resizeTimers = [];
-    const clearResizeTimers = () => {
-      resizeTimers.forEach(clearTimeout);
-      resizeTimers = [];
-    };
-    const handleResize = () => {
-      if (window.innerWidth === lastWidth) return;
-      lastWidth = window.innerWidth;
-      clearResizeTimers();
-      resizeTimers = HEIGHT_SETTLE_DELAYS.map((delay) => setTimeout(measure, delay));
-    };
-    window.addEventListener("resize", handleResize);
     return () => {
       clearTimeout(t1);
       clearTimeout(t2);
       if (raf != null) cancelAnimationFrame(raf);
       ro.disconnect();
-      clearResizeTimers();
-      window.removeEventListener("resize", handleResize);
     };
   }, [pathname, isEditMode, postToParent2]);
   useEffect13(() => {
@@ -18484,28 +19379,19 @@ function OhhwellsBridge() {
       return;
     }
     const existing = editStylesRef.current;
-    let initialVh = window.innerHeight;
-    if (existing?.base.textContent) {
-      const match = existing.base.textContent.match(/\.min-h-screen[^{]*\{[^}]*min-height:\s*(\d+)px/);
-      if (match) initialVh = parseInt(match[1], 10);
-    }
+    const canvasHeight = "var(--ohw-canvas-h, 852px)";
     const baseCss = `
       html { height: auto !important; }
       body { height: auto !important; min-height: 0 !important; overflow: hidden !important; }
-      .min-h-screen, .min-h-svh, .min-h-dvh { min-height: ${initialVh}px !important; }
-      .h-screen, .h-svh, .h-dvh { height: ${initialVh}px !important; }
-      [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; }
-      /* A section written as min-height: var(--ohw-canvas-h, 100svh) \u2014 the documented way to
-         build a full-viewport section that still grows for its own content \u2014 matches the three
-         rules above on substring alone, since the fallback text contains "100svh" too. Forcing
-         a literal height on top of that turns "at least one screen" into "exactly one screen",
-         so content taller than one screen (a long mobile hero, say) overflows a centered flex
-         column upward, under whatever sits above it. Only the min-height half belongs to it. */
-      [style*="min-height"][style*="100vh"],
-      [style*="min-height"][style*="100svh"],
-      [style*="min-height"][style*="100dvh"] { height: auto !important; }
+      .min-h-screen, .min-h-svh, .min-h-dvh { min-height: ${canvasHeight} !important; }
+      .h-screen, .h-svh, .h-dvh { height: ${canvasHeight} !important; }
+      /* Literal inline viewport units only \u2014 skip R11 sections that already reference --ohw-canvas-h
+         (their style attribute contains "100svh" only as a var() fallback string). */
+      [style*="100vh"]:not([style*="--ohw-canvas-h"]) { min-height: ${canvasHeight} !important; height: ${canvasHeight} !important; }
+      [style*="100svh"]:not([style*="--ohw-canvas-h"]) { min-height: ${canvasHeight} !important; height: ${canvasHeight} !important; }
+      [style*="100dvh"]:not([style*="--ohw-canvas-h"]) { min-height: ${canvasHeight} !important; height: ${canvasHeight} !important; }
+      /* R11: min-height via --ohw-canvas-h; height must grow with content taller than one screen. */
+      [style*="min-height"][style*="--ohw-canvas-h"] { height: auto !important; }
       /* Emptied text keeps somewhere to click. A label typed down to nothing collapses to a
          couple of pixels, and getting back into it meant hunting for the caret with the mouse.
          Edit mode only \u2014 the published page shows nothing where there is nothing (OHH-736). */
@@ -18652,6 +19538,10 @@ function OhhwellsBridge() {
         outline-offset: 0 !important;
         box-shadow: none !important;
       }
+      /* Open nav dropdown panels paint above AI section selection chrome (2147483000). */
+      [data-ohw-nav-group][data-ohw-nav-force-open] > [data-ohw-nav-children] {
+        z-index: 2147483100 !important;
+      }
       /* Text edit wins over grab/default (must beat [data-ohw-can-drag] *). */
       [data-ohw-editing],
       [data-ohw-editing] *,
@@ -18670,6 +19560,10 @@ function OhhwellsBridge() {
       [data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
       [data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
       [data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
+      /* SVG hit-tests painted glyphs only, so an editable curved-text badge answered clicks
+         on its letter strokes alone (and a spinning one barely at all). In edit mode the
+         whole box takes the click; the handler resolves it to the editable inside. */
+      svg:has([data-ohw-editable]) { pointer-events: bounding-box !important; }
     `;
     if (!existing) {
       const base = document.createElement("style");
@@ -18708,9 +19602,6 @@ function OhhwellsBridge() {
       if (target.closest("[data-ohw-state-toggle]")) return;
       if (target.closest("[data-ohw-max-badge]")) return;
       if (isInsideLinkEditor(target)) return;
-      if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
-        clearMediaSelectionRef.current();
-      }
       if (isInsideFloatingPanel(target)) return;
       if (target.closest("[data-ohw-form-toolbar]")) return;
       if (target.closest(
@@ -18718,6 +19609,9 @@ function OhhwellsBridge() {
       )) {
         return;
       }
+      if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
+        clearMediaSelectionRef.current();
+      }
       {
         const formEl = getFormElement(target);
         const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
@@ -18840,7 +19734,19 @@ function OhhwellsBridge() {
         openLogoSizePanelRef.current(logoEl);
         return;
       }
-      const editable = target.closest("[data-ohw-editable]");
+      let editable = target.closest("[data-ohw-editable]");
+      if (!editable && target instanceof SVGElement) {
+        const inner = target.closest("svg")?.querySelectorAll("[data-ohw-editable]");
+        if (inner && inner.length === 1) editable = inner[0];
+      }
+      if (editable && !(editable instanceof HTMLElement)) {
+        e.preventDefault();
+        e.stopPropagation();
+        deselectRef.current();
+        deactivateRef.current();
+        aiSectionApiRef.current?.selectFromElement(editable);
+        return;
+      }
       if (editable) {
         if (editable.dataset.ohwEditable === "link") {
           e.preventDefault();
@@ -18869,14 +19775,6 @@ function OhhwellsBridge() {
         }
         const clickedButton = findClosestButtonLike(target);
         const buttonOnMedia = Boolean(clickedButton && isMediaEditable(editable) && editable.contains(clickedButton));
-        console.log("[click-debug]", {
-          editableType: editable.dataset.ohwEditable,
-          editableTag: editable.tagName,
-          targetTag: target.tagName,
-          clickedButtonTag: clickedButton?.tagName ?? null,
-          buttonOnMedia,
-          isMediaEditableEditable: isMediaEditable(editable)
-        });
         if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
@@ -18903,11 +19801,6 @@ function OhhwellsBridge() {
         const hrefLookupTarget = buttonOnMedia ? clickedButton : editable;
         const hrefCtx = getHrefKeyFromElement(hrefLookupTarget);
         const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
-        console.log("[click-debug 2]", {
-          hrefLookupTargetTag: hrefLookupTarget.tagName,
-          hrefCtx: hrefCtx ? { key: hrefCtx.key } : null,
-          navAnchorTag: navAnchor?.tagName ?? null
-        });
         if (navAnchor) {
           e.preventDefault();
           e.stopPropagation();
@@ -19077,6 +19970,9 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
         return;
       }
       {
@@ -19195,7 +20091,6 @@ function OhhwellsBridge() {
             hoveredNavContainerRef.current = null;
             setHoveredNavContainerRect(null);
             hoveredItemElRef.current = editable;
-            setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
           }
         }
       }
@@ -19492,7 +20387,7 @@ function OhhwellsBridge() {
       }
     };
     const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
-      if (linkPopoverOpenRef.current) {
+      if (linkPopoverOpenRef.current || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
         if (hoveredImageRef.current) {
           hoveredImageRef.current = null;
           hoveredImageHasTextOverlapRef.current = false;
@@ -19581,6 +20476,15 @@ function OhhwellsBridge() {
           }
           return;
         }
+        const cardHit = !isDragOver && Array.from(document.querySelectorAll(".card, [data-ohw-card]")).some((card) => {
+          if (card.contains(imgEl)) return false;
+          const r2 = card.getBoundingClientRect();
+          return x2 >= r2.left && x2 <= r2.right && y2 >= r2.top && y2 <= r2.bottom;
+        });
+        if (cardHit) {
+          dismissImageHover();
+          return;
+        }
         const topEl = document.elementFromPoint(x2, y2);
         if (topEl?.closest('[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-more-menu], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]')) {
           if (hoveredImageRef.current) {
@@ -19857,8 +20761,7 @@ function OhhwellsBridge() {
     };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
-      if (isOverEditorChrome(clientX, clientY)) {
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY) || isOverEditorChrome(clientX, clientY)) {
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         formHoverElRef.current = null;
         setFormHoverRect(null);
@@ -19866,6 +20769,12 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
+        dismissImageHover();
+        clearImageHover();
+        setSectionGap(null);
         return;
       }
       if (probeSocialsRowAt(clientX, clientY)) return;
@@ -19877,7 +20786,11 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:pointer-sync") return;
       const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
+        dismissImageHover();
+        clearImageHover();
+        return;
+      }
       if (probeSocialsRowAt(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
       probeImageAt(clientX, clientY);
@@ -19991,7 +20904,11 @@ function OhhwellsBridge() {
         const slotFromItem = hrefKey ? findSocialByHrefKey(hrefKey)?.querySelector('[data-ohw-editable="icon"]') : null;
         const requestedIsIconSlot = Boolean(requestedIconKey) && Boolean(document.querySelector(`[data-ohw-key="${requestedIconKey}"][data-ohw-editable="icon"]`));
         const requestedIsFree = Boolean(requestedIconKey) && !document.querySelector(`[data-ohw-key="${requestedIconKey}"]`);
-        const iconKey = requestedIsIconSlot ? requestedIconKey : slotFromItem?.dataset.ohwKey ?? (requestedIsFree ? requestedIconKey : void 0);
+        let iconKey = requestedIsIconSlot ? requestedIconKey : slotFromItem?.dataset.ohwKey ?? (requestedIsFree ? requestedIconKey : void 0);
+        const item = hrefKey ? findSocialByHrefKey(hrefKey) : null;
+        if (item && typeof iconMarkup === "string" && iconMarkup) {
+          iconKey = ensureIconSlot(item) ?? iconKey;
+        }
         if (iconKey && typeof iconMarkup === "string" && iconMarkup) {
           document.querySelectorAll(`[data-ohw-key="${iconKey}"][data-ohw-editable="icon"]`).forEach((el) => {
             applyIconMarkup(el, iconMarkup);
@@ -20001,7 +20918,7 @@ function OhhwellsBridge() {
         }
         if (iconKey && platformId) nodes.push({ key: socialPlatformKey(iconKey), text: platformId });
         if (iconKey && label) {
-          const labelKey = socialLabelKey(iconKey);
+          const labelKey = (item ? socialLabelElement(item)?.getAttribute("data-ohw-key") : null) ?? socialLabelKey(iconKey);
           document.querySelectorAll(`[data-ohw-key="${labelKey}"]`).forEach((el) => {
             if (keepLabel && el.textContent?.trim()) return;
             el.textContent = label;
@@ -20156,6 +21073,44 @@ function OhhwellsBridge() {
         if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
       }, 400));
     };
+    const reapCommittedAiSections = (excludeIds) => {
+      const aiState = parseAiSectionsState(aiSectionsRef.current);
+      if (aiState.sections.length === 0) return [];
+      let orderEntries = [];
+      try {
+        const parsed = JSON.parse(editContentRef.current[SECTION_ORDER_KEY] ?? "[]");
+        if (Array.isArray(parsed)) orderEntries = parsed;
+      } catch {
+        return [];
+      }
+      const removedIds = orderEntries.filter((entry) => entry && typeof entry.instanceId === "string" && entry.removed).map((entry) => entry.instanceId);
+      if (removedIds.length === 0) return [];
+      const result = reapRemovedAiSections(aiState, parseStyleStore(stylesRef.current), removedIds, excludeIds);
+      if (!result.changed) return [];
+      const nodes = [];
+      aiSectionsRef.current = serializeAiSectionsState(result.state);
+      nodes.push({ key: AI_SECTIONS_KEY, text: aiSectionsRef.current });
+      const reaped = new Set(result.reapedIds);
+      const nextOrderJson = JSON.stringify(orderEntries.filter((entry) => !reaped.has(entry.instanceId)));
+      editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: nextOrderJson };
+      setAiSectionOrder(nextOrderJson, window.location.pathname);
+      nodes.push({ key: SECTION_ORDER_KEY, text: nextOrderJson });
+      if (result.store) {
+        stylesRef.current = JSON.stringify(result.store);
+        nodes.push({ key: STYLE_STORE_KEY, text: stylesRef.current });
+      }
+      const nextContent = { ...editContentRef.current };
+      for (const key of Object.keys(nextContent)) {
+        if (key.startsWith(AI_SLOT_KEY_PREFIX) && result.slotPrefixes.some((prefix) => key.startsWith(prefix)) && nextContent[key] !== "") {
+          nextContent[key] = "";
+          nodes.push({ key, text: "" });
+        }
+      }
+      editContentRef.current = nextContent;
+      applyAiSectionsToDom(result.state);
+      applyStylesToDom(parseStyleStore(stylesRef.current));
+      return nodes;
+    };
     const handleHydrate = (e) => {
       if (e.data?.type !== "ow:hydrate") return;
       const content = e.data.content;
@@ -20174,6 +21129,7 @@ function OhhwellsBridge() {
       }
       if (typeof content[STYLE_STORE_KEY] === "string") {
         stylesRef.current = content[STYLE_STORE_KEY];
+        document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
       }
       applyBrandChrome(content);
@@ -20185,11 +21141,11 @@ function OhhwellsBridge() {
           continue;
         }
         if (key === AI_SECTIONS_KEY) continue;
+        if (key === LOGO_PLACEHOLDER_KEY) continue;
+        if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (key === BRAND_KIT_KEY) continue;
         if (key === STYLE_STORE_KEY) continue;
         if (BRAND_CHROME_KEYS.has(key)) continue;
-        if (key === LOGO_PLACEHOLDER_KEY) continue;
-        if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -20203,6 +21159,8 @@ function OhhwellsBridge() {
             if (video && video.src !== val) applyVideoSrc(video, val);
           } else if (el.dataset.ohwEditable === "link") {
             applyLinkHref(el, val);
+          } else if (el.dataset.ohwEditable === "map") {
+            applyMapQuery(el, val);
           } else if (el.dataset.ohwEditable === "icon") {
             applyIconMarkup(el, val);
           } else if (isIconMarkupValue(val)) {
@@ -20223,9 +21181,20 @@ function OhhwellsBridge() {
       reconcileNavbarItemsFromContent(editContentRef.current);
       reconcileFooterOrderFromContent(editContentRef.current);
       syncNavigationDragCursorAttrs();
+      if (typeof content[STYLE_STORE_KEY] === "string") {
+        applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
+      }
       enforceLinkHrefs();
+      const hydrateReapExclude = /* @__PURE__ */ new Set();
+      const hydratePendingUndo = pendingDeleteUndoRef.current;
+      if (hydratePendingUndo?.sectionInstanceId) hydrateReapExclude.add(hydratePendingUndo.sectionInstanceId);
+      const reapNodes = reapCommittedAiSections(hydrateReapExclude);
+      if (reapNodes.length > 0) postToParentRef.current({ type: "ow:change", nodes: reapNodes });
       const hydratedHeight = document.body.scrollHeight;
       if (hydratedHeight > 50) postToParentRef.current({ type: "ow:height", height: hydratedHeight });
+      if (parseAiSectionsState(aiSectionsRef.current).sections.length > 0) {
+        postAiSectionsChanged();
+      }
       postToParentRef.current({ type: "ow:hydrate-done" });
     };
     const handleUpdateLogoIdentity = (e) => {
@@ -20397,10 +21366,26 @@ function OhhwellsBridge() {
     const handleGetBrand = (e) => {
       if (e.data?.type !== "ow:get-brand") return;
       const template = deriveTemplateBrand();
-      const value = brandKitRef.current || (template ? JSON.stringify(template) : "");
+      const fallback = template ?? (() => {
+        const fonts = deriveTemplateFonts();
+        return fonts ? { palette: AI_DEFAULT_BRAND.palette, fonts } : null;
+      })();
+      const value = brandKitRef.current || (fallback ? JSON.stringify(fallback) : "");
       postToParentRef.current({ type: "ow:brand-value", value });
     };
     window.addEventListener("message", handleGetBrand);
+    const handleGetTemplateFonts = (e) => {
+      if (e.data?.type !== "ow:get-template-fonts") return;
+      const fonts = deriveTemplateFonts();
+      postToParentRef.current({ type: "ow:template-fonts-value", value: fonts ? JSON.stringify(fonts) : "" });
+    };
+    window.addEventListener("message", handleGetTemplateFonts);
+    const handleGetTemplateBrand = (e) => {
+      if (e.data?.type !== "ow:get-template-brand") return;
+      const brand = deriveTemplateBrand();
+      postToParentRef.current({ type: "ow:template-brand-value", value: brand ? JSON.stringify(brand) : "" });
+    };
+    window.addEventListener("message", handleGetTemplateBrand);
     const handleMoveSection = (e) => {
       if (e.data?.type !== "ow:move-section") return;
       const instanceId = typeof e.data.instanceId === "string" ? e.data.instanceId : "";
@@ -20408,8 +21393,11 @@ function OhhwellsBridge() {
       if (!instanceId || !direction) return;
       const entries = moveSectionInstance(instanceId, direction, window.location.pathname);
       if (!entries) return;
-      const orderJson = JSON.stringify(entries);
+      const orderJson = JSON.stringify(
+        mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname, entries)
+      );
       editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: orderJson };
+      applyPersistedOrder(getPageSectionOrderEntries(orderJson, window.location.pathname));
       setAiSectionOrder(orderJson, window.location.pathname);
       postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: orderJson }] });
       window.dispatchEvent(new Event("resize"));
@@ -20455,8 +21443,11 @@ function OhhwellsBridge() {
       const currentEntries = getPageSectionOrderEntries(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname);
       const entries = deleteSectionInstance(instanceId, window.location.pathname, currentEntries);
       if (!entries) return;
-      const orderJson = JSON.stringify(entries);
+      const orderJson = JSON.stringify(
+        mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname, entries)
+      );
       editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: orderJson };
+      setAiSectionOrder(orderJson, window.location.pathname);
       postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: orderJson }] });
       aiSectionApiRef.current?.clear();
       window.dispatchEvent(new Event("resize"));
@@ -20465,6 +21456,7 @@ function OhhwellsBridge() {
       const actionId = newInstanceId();
       pendingDeleteUndoRef.current = {
         actionId,
+        sectionInstanceId: instanceId,
         restore: () => {
           const restoredEntries = getPageSectionOrderEntries(
             editContentRef.current[SECTION_ORDER_KEY],
@@ -20472,8 +21464,11 @@ function OhhwellsBridge() {
           );
           const restored = restoreSectionInstance(instanceId, window.location.pathname, restoredEntries);
           if (!restored) return;
-          const restoredJson = JSON.stringify(restored);
+          const restoredJson = JSON.stringify(
+            mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname, restored)
+          );
           editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: restoredJson };
+          setAiSectionOrder(restoredJson, window.location.pathname);
           postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: restoredJson }] });
           window.dispatchEvent(new Event("resize"));
           const restoreHeight = document.body.scrollHeight;
@@ -20499,7 +21494,9 @@ function OhhwellsBridge() {
       const result = duplicateSectionInstance(instanceId, newId, window.location.pathname, currentEntries);
       if (!result) return;
       const { entries, keyRekeys } = result;
-      const orderJson = JSON.stringify(entries);
+      const orderJson = JSON.stringify(
+        mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname, entries)
+      );
       const nodes = [{ key: SECTION_ORDER_KEY, text: orderJson }];
       for (const { from, to } of keyRekeys) {
         const inherited = editContentRef.current[from];
@@ -20509,6 +21506,7 @@ function OhhwellsBridge() {
         ...editContentRef.current,
         ...Object.fromEntries(nodes.map(({ key, text }) => [key, text]))
       };
+      applyPersistedOrder(getPageSectionOrderEntries(orderJson, window.location.pathname));
       setAiSectionOrder(orderJson, window.location.pathname);
       postToParentRef.current({ type: "ow:change", nodes });
       window.dispatchEvent(new Event("resize"));
@@ -20527,6 +21525,12 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
+      if (floatingPanelOpenRef.current) {
+        setFloatingPanelRef.current(null);
+        deselectRef.current();
+        deactivateRef.current();
+        return;
+      }
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
@@ -20759,7 +21763,12 @@ function OhhwellsBridge() {
       }
       if (navDragRef.current) {
         const session = navDragRef.current;
-        const slot = hitTestNavDropSlot(session.lastClientX, session.lastClientY, session.hrefKey);
+        const slot = hitTestNavDropSlot(
+          session.lastClientX,
+          session.lastClientY,
+          session.hrefKey,
+          session.draggedEl
+        );
         refreshNavDragVisualsRef.current(session, slot, session.lastClientX, session.lastClientY);
       }
       if (hoveredImageRef.current) {
@@ -20772,6 +21781,10 @@ function OhhwellsBridge() {
     };
     const handleSave = (e) => {
       if (e.data?.type !== "ow:save") return;
+      const pendingUndo = pendingDeleteUndoRef.current;
+      const reapExclude = /* @__PURE__ */ new Set();
+      if (pendingUndo?.sectionInstanceId) reapExclude.add(pendingUndo.sectionInstanceId);
+      const reapNodes = reapCommittedAiSections(reapExclude);
       const nodes = collectEditableNodes(editContentRef.current);
       const tracker = document.querySelector("[data-ohw-sections-tracker]");
       if (tracker?.textContent) nodes.push({ key: "__ohw_sections", type: "sections", text: tracker.textContent });
@@ -20791,6 +21804,11 @@ function OhhwellsBridge() {
         const text = specs.length ? JSON.stringify(specs) : editContentRef.current[fieldsKey(formKey)];
         if (text) nodes.push({ key: fieldsKey(formKey), type: "text", text });
       });
+      for (const reapNode of reapNodes) {
+        if (reapNode.key.startsWith(AI_SLOT_KEY_PREFIX) && !nodes.some((n) => n.key === reapNode.key)) {
+          nodes.push({ key: reapNode.key, type: "text", text: reapNode.text });
+        }
+      }
       postToParentRef.current({ type: "ow:save-result", nodes });
     };
     const handleInsertSection = (e) => {
@@ -20801,8 +21819,12 @@ function OhhwellsBridge() {
       if (inserted) {
         const tracker = getSectionsTracker();
         postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent ?? "[]" }] });
-        const h = document.body.scrollHeight;
-        if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
+        const reportHeight = () => {
+          const h = document.body.scrollHeight;
+          if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
+        };
+        reportHeight();
+        setTimeout(reportHeight, 500);
       }
     };
     const handleSwitchSchedule = (e) => {
@@ -20952,18 +21974,21 @@ function OhhwellsBridge() {
       }
       return null;
     };
+    const isPointInRect = (el, clientX, clientY) => {
+      const r2 = el.getBoundingClientRect();
+      return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
+    };
     const isPointOverEditable = (scope, clientX, clientY) => {
       const editables = scope.querySelectorAll("[data-ohw-editable], [data-ohw-href-key]");
       for (const el of editables) {
-        const r2 = el.getBoundingClientRect();
-        if (clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom) return true;
+        if (isPointInRect(el, clientX, clientY)) return true;
       }
       return false;
     };
     const handleCarouselHover = (e) => {
       const container = findCarouselAtPoint(e.clientX, e.clientY);
       const scope = container?.closest("[data-ohw-section]") ?? container?.parentElement ?? null;
-      if (!container || !scope || isPointOverEditable(scope, e.clientX, e.clientY)) {
+      if (!container || !scope || isPointOverEditable(scope, e.clientX, e.clientY) || isPointOverNavigation(e.clientX, e.clientY) || isPointOverBridgeChrome(e.clientX, e.clientY)) {
         setCarouselHover((prev) => prev ? null : prev);
         return;
       }
@@ -21201,15 +22226,17 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleAiSetBrand);
       window.removeEventListener("message", handleAiSetStyles);
       window.removeEventListener("message", handleGetBrand);
+      window.removeEventListener("message", handleGetTemplateFonts);
+      window.removeEventListener("message", handleGetTemplateBrand);
       window.removeEventListener("message", handleMoveSection);
       window.removeEventListener("message", handlePanelDragging);
       window.removeEventListener("message", handleDeleteSection);
       window.removeEventListener("message", handleDuplicateSection);
       window.removeEventListener("message", handleDeactivate);
-      document.documentElement.removeAttribute("data-ohw-panel-dragging");
       window.removeEventListener("message", handleToastAction);
       window.removeEventListener("message", handleFormCount);
       window.removeEventListener("message", handleUiEscape);
+      document.documentElement.removeAttribute("data-ohw-panel-dragging");
       autoSaveTimers.current.forEach(clearTimeout);
       autoSaveTimers.current.clear();
       if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);
@@ -21412,7 +22439,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.91",
+        bridgeVersion: "0.1.93",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -22028,7 +23055,7 @@ function OhhwellsBridge() {
                             "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",
+                              className: "ml-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-bridge-primary px-1.5 text-[11px] font-semibold text-primary-foreground",
                               children: formPickCount
                             }
                           )
@@ -22265,11 +23292,11 @@ function OhhwellsBridge() {
             className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
             style: { top: sectionGap.y, transform: "translateY(-50%)" },
             children: [
-              /* @__PURE__ */ jsx33("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+              /* @__PURE__ */ jsx33("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
               /* @__PURE__ */ jsx33(
                 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",
+                  className: "px-8 py-1 bg-bridge-primary hover:bg-bridge-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
                   onClick: () => {
                     window.parent.postMessage(
                       {
@@ -22283,7 +23310,7 @@ function OhhwellsBridge() {
                   children: "Add Section"
                 }
               ),
-              /* @__PURE__ */ jsx33("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+              /* @__PURE__ */ jsx33("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
             ]
           }
         ),
@@ -22331,6 +23358,59 @@ function OhhwellsBridge() {
     ) : null
   ] });
 }
+
+// src/ui/EmptySection.tsx
+import Link3 from "next/link";
+import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
+  return /* @__PURE__ */ jsxs21(Fragment9, { children: [
+    /* @__PURE__ */ jsx34(
+      "p",
+      {
+        style: {
+          fontFamily: "var(--brand-font-body)",
+          fontSize: "0.75rem",
+          fontWeight: 500,
+          letterSpacing: "0.15em",
+          textTransform: "uppercase",
+          color: "var(--brand-accent)",
+          marginBottom: "1.5rem"
+        },
+        children: /* @__PURE__ */ jsx34(Link3, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ jsx34("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx34(
+      "h1",
+      {
+        style: {
+          fontFamily: "var(--brand-font-heading)",
+          fontSize: "clamp(2rem, 3.5vw, 2.75rem)",
+          lineHeight: 1.1,
+          letterSpacing: "-0.025em",
+          color: "var(--brand-text)",
+          marginBottom: "1rem"
+        },
+        ...titleKey ? { "data-ohw-editable": "text", "data-ohw-key": titleKey, "data-ohw-max-length": 80 } : {},
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx34(
+      "p",
+      {
+        style: {
+          fontFamily: "var(--brand-font-body)",
+          fontSize: "1rem",
+          lineHeight: 1.7,
+          fontWeight: 300,
+          color: "var(--brand-text-muted)",
+          maxWidth: "340px"
+        },
+        ...subtitleKey ? { "data-ohw-editable": "text", "data-ohw-key": subtitleKey, "data-ohw-max-length": 160 } : {},
+        children: "This page doesn't have any content yet."
+      }
+    )
+  ] });
+}
 export {
   AI_DEFAULT_BRAND,
   AI_TREE_SCHEMA_VERSIONS,
@@ -22347,6 +23427,7 @@ export {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  EmptySection,
   ItemActionToolbar,
   ItemInteractionLayer,
   LinkEditorPanel,