@ohhwells/bridge 0.1.94 → 0.1.96

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";
@@ -559,6 +589,254 @@ function applyStylesToDom(store) {
 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";
@@ -601,6 +879,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 +914,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);
@@ -716,12 +1019,10 @@ 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 } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand) }
       },
       children: /* @__PURE__ */ jsx("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
     }
@@ -1761,15 +2062,12 @@ 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,
+                      // Shape/padding/typography follow the host template's own buttons.
+                      ...buttonShellStyle(ctx),
                       // 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)
+                      color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
                     },
                     children: /* @__PURE__ */ jsx("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
                   },
@@ -1804,7 +2102,7 @@ function renderNode(node, ctx, path) {
 function AiTreeRenderer({
   tree,
   brand,
-  buttonRadius,
+  buttonStyle,
   resolveMedia,
   editKeyPrefix
 }) {
@@ -1820,7 +2118,7 @@ function AiTreeRenderer({
     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 ?? {};
@@ -1926,7 +2224,7 @@ 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 readRootVar(name) {
@@ -1950,13 +2248,13 @@ function deriveBrandOverride() {
   };
 }
 function deriveTemplateBrand() {
-  const dark = readRootVar("--color-dark");
-  const primary = readRootVar("--color-primary");
-  const light = readRootVar("--color-light");
+  const primary = readRootVar("--brand-primary") || readRootVar("--color-primary");
+  const dark = readRootVar("--brand-text") || readRootVar("--color-dark");
+  const light = readRootVar("--brand-background") || readRootVar("--color-light");
   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("--brand-accent") || readRootVar("--color-accent");
+  const heading = readRootVar("--brand-font-heading") || readRootVar("--font-heading") || readRootVar("--font-display");
+  const body = readRootVar("--brand-font-body") || readRootVar("--font-body");
   return {
     palette: { dark, primary, accent: accent || dark, light },
     fonts: {
@@ -1965,12 +2263,32 @@ function deriveTemplateBrand() {
     }
   };
 }
-function deriveTemplateButtonRadius() {
+function deriveTemplateButtonStyle() {
   if (typeof document === "undefined") return null;
-  const btn = document.querySelector('[data-ohw-role="button"]');
+  const btn = Array.from(document.querySelectorAll('[data-ohw-role="button"]')).find(
+    (el) => !el.closest(`[${CONTAINER_ATTR}]`)
+  );
   if (!btn) return null;
-  const radius = getComputedStyle(btn).borderTopLeftRadius;
-  return radius || null;
+  const cs = getComputedStyle(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 padY = Math.max(px(cs.paddingTop), px(cs.paddingBottom));
+  const padX = Math.max(px(cs.paddingLeft), px(cs.paddingRight));
+  return {
+    radius: radius || "10px",
+    padding: `${padY}px ${padX}px`,
+    fontFamily: cs.fontFamily || "",
+    fontSize: cs.fontSize || "",
+    fontWeight: cs.fontWeight || "",
+    letterSpacing: cs.letterSpacing || "",
+    textTransform: cs.textTransform || ""
+  };
 }
 var mounted = /* @__PURE__ */ new Map();
 function findTemplateSection(id) {
@@ -2021,18 +2339,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, "");
     }
   }
 }
@@ -2049,7 +2367,7 @@ function syncTemplateHidden(state, pageHasSections) {
     if (el.hasAttribute(CONTAINER_ATTR)) continue;
     if (CHROME_SECTION_IDS.has(el.getAttribute("data-ohw-section") ?? "")) continue;
     if (el.parentElement?.closest("[data-ohw-section]")) continue;
-    if (el.hasAttribute(REPLACED_ATTR) || el.hasAttribute(REMOVED_ATTR)) continue;
+    if (el.hasAttribute(REPLACED_ATTR) || el.hasAttribute(REMOVED_ATTR2)) continue;
     el.style.display = "none";
     el.setAttribute(TEMPLATE_HIDDEN_ATTR, "");
   }
@@ -2073,18 +2391,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 +2443,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 +2499,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 +2522,7 @@ function applyAiSectionsToDom(state, options) {
   syncReplacedOriginals(state);
   syncRemovedSections(state);
   syncTemplateHidden(state, pageSections.length > 0);
+  syncSoftRemovedGenerated();
 }
 function unmountAllAiSections() {
   for (const [, section] of mounted) {
@@ -2199,9 +2535,9 @@ function unmountAllAiSections() {
     el.style.removeProperty("display");
     el.removeAttribute(REPLACED_ATTR);
   }
-  for (const el of document.querySelectorAll(`[${REMOVED_ATTR}]`)) {
+  for (const el of document.querySelectorAll(`[${REMOVED_ATTR2}]`)) {
     el.style.removeProperty("display");
-    el.removeAttribute(REMOVED_ATTR);
+    el.removeAttribute(REMOVED_ATTR2);
   }
 }
 
@@ -8162,240 +8498,6 @@ function CarouselOverlay({
 // 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 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_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 = 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 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-section/AiSectionOverlay.tsx
 import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var findSectionElement = findByInstanceId;
 function readRect(instanceId) {
@@ -14184,15 +14286,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"));
@@ -20217,6 +20321,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;
@@ -20285,6 +20427,11 @@ function OhhwellsBridge() {
       reconcileFooterOrderFromContent(editContentRef.current);
       syncNavigationDragCursorAttrs();
       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 });
       postToParentRef.current({ type: "ow:hydrate-done" });
@@ -20469,8 +20616,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"));
@@ -20516,8 +20666,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"));
@@ -20526,6 +20679,7 @@ function OhhwellsBridge() {
       const actionId = newInstanceId();
       pendingDeleteUndoRef.current = {
         actionId,
+        sectionInstanceId: instanceId,
         restore: () => {
           const restoredEntries = getPageSectionOrderEntries(
             editContentRef.current[SECTION_ORDER_KEY],
@@ -20533,8 +20687,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;
@@ -20560,7 +20717,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];
@@ -20570,6 +20729,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"));
@@ -20833,6 +20993,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 });
@@ -20852,6 +21016,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) => {
@@ -21473,7 +21642,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.93",
+        bridgeVersion: "0.1.95",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections