@ohhwells/bridge 0.1.127 → 0.1.128

package/dist/index.js

@@ -31,6 +31,12 @@ function enforceLinkHrefs() {
 
 // src/lib/ai-tree.ts
 var AI_TREE_SCHEMA_VERSIONS = [1];
+function legacyVerticalPaddingAlias(spacing) {
+  if (spacing === "tight") return "s";
+  if (spacing === "balanced") return "m";
+  if (spacing === "airy") return "l";
+  return void 0;
+}
 var BUTTON_FILL_TOKENS = ["dark", "primary", "accent", "light"];
 var BUTTON_STYLES = ["solid", "outline", "ghost"];
 var BUTTON_RADII = ["square", "rounded", "pill"];
@@ -53,7 +59,10 @@ var AI_TREE_TOKENS = {
   radiusButton: 10,
   radiusCard: 18,
   sectionMaxWidth: 1280,
-  sectionPadding: { tight: 40, balanced: 64, airy: 96 },
+  /** 6-step vertical-padding scale (OHH-789) — replaces the deprecated tight/balanced/airy
+   *  map; `m` keeps the old `balanced` value (64) so already-generated sites render unchanged.
+   *  `none` is the true zero floor for an explicit "remove the padding" ask. */
+  sectionPaddingByScale: { none: 0, xs: 24, s: 40, m: 64, l: 96, xl: 128 },
   type: {
     display: { size: 56, line: 1.1, weight: 700 },
     h2: { size: 40, line: 1.15, weight: 700 },
@@ -71,205 +80,566 @@ function isRenderableTree(value) {
   return AI_TREE_SCHEMA_VERSIONS.includes(tree.schemaVersion) && tree.type === "section" && Array.isArray(tree.rows);
 }
 
-// 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;
+// src/lib/section-styles.ts
+var STYLE_STORE_KEY = "__ohw_styles";
+var STYLE_SHEET_ID = "ohw-section-styles";
+function parseStyleStore(raw) {
+  if (!raw) return null;
   try {
     const parsed = JSON.parse(raw);
-    if (parsed?.v !== 1 || !Array.isArray(parsed.sections)) return EMPTY_AI_SECTIONS;
-    const sections = parsed.sections.filter(
-      (entry) => typeof entry === "object" && entry !== null && typeof entry.id === "string" && entry.id.length > 0 && isRenderableTree(entry.tree)
-    ).map((entry) => ({
-      ...entry,
-      label: typeof entry.label === "string" ? entry.label : "Generated section",
-      media: entry.media && typeof entry.media === "object" ? entry.media : {}
-    }));
-    const removed = Array.isArray(parsed.removed) ? parsed.removed.filter((id) => typeof id === "string" && id.length > 0) : [];
+    if (parsed?.v !== 1) return null;
     return {
       v: 1,
-      sections,
-      ...removed.length ? { removed } : {},
-      ...parsed.hideTemplate === true ? { hideTemplate: true } : {}
+      sections: typeof parsed.sections === "object" && parsed.sections ? parsed.sections : {},
+      nodes: typeof parsed.nodes === "object" && parsed.nodes ? parsed.nodes : {}
     };
   } catch {
-    return EMPTY_AI_SECTIONS;
+    return null;
   }
 }
-function serializeAiSectionsState(state) {
-  return JSON.stringify(state);
-}
-function applyTreeToState(state, payload) {
-  const insertBefore = payload.mode === "insert" && payload.position === "before";
-  const priorEntry = state.sections.find((existing) => existing.id === payload.id);
-  const selfEdit = payload.mode === "replace" && payload.targetSectionId === payload.id;
-  const entry = {
-    id: payload.id,
-    label: payload.label ?? "Generated section",
-    ...typeof payload.path === "string" && payload.path ? { path: payload.path } : {},
-    afterSection: selfEdit ? priorEntry?.afterSection ?? null : payload.mode === "insert" && !insertBefore ? payload.targetSectionId ?? null : null,
-    ...selfEdit ? priorEntry?.beforeSection ? { beforeSection: priorEntry.beforeSection } : {} : insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
-    ...selfEdit ? priorEntry?.replaces ? { replaces: priorEntry.replaces } : {} : payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
-    tree: payload.tree,
-    media: payload.media ?? {},
-    ...payload.brand && typeof payload.brand === "object" ? { brand: payload.brand } : {}
+var BG_VALUES = {
+  surface: "color-mix(in srgb, var(--ohw-brand-light, var(--color-light, #ECECEB)) 94%, var(--ohw-brand-dark, var(--color-dark, #0C0A09)))",
+  accent: "var(--ohw-brand-primary, var(--color-primary, #0078E5))",
+  "accent-soft": "color-mix(in srgb, var(--ohw-brand-primary, var(--color-primary, #0078E5)) 12%, var(--ohw-brand-light, var(--color-light, #FFFFFF)))"
+};
+var NAVBAR_COLOR_TOKENS = ["dark", "primary", "accent", "light"];
+function navbarColorVar(token) {
+  const fallback = {
+    dark: "#0C0A09",
+    primary: "#0078E5",
+    accent: "#0078E5",
+    light: "#FFFFFF"
   };
-  const others = state.sections.filter((existing) => existing.id !== entry.id);
-  return { ...state, v: 1, sections: [...others, entry] };
+  return `var(--ohw-brand-${token}, var(--color-${token}, ${fallback[token]}))`;
 }
-function foldAlignIntoTrees(state, store) {
-  const byId = new Map(state.sections.map((entry) => [entry.id, entry]));
-  const nextTrees = /* @__PURE__ */ new Map();
-  const treeFor = (id) => {
-    const cloned = nextTrees.get(id);
-    if (cloned) return cloned;
-    const entry = byId.get(id);
-    if (!entry) return void 0;
-    const fresh = {
-      ...entry.tree,
-      rows: entry.tree.rows.map((row) => ({ ...row, blocks: row.blocks.map((block) => ({ ...block })) }))
-    };
-    nextTrees.set(id, fresh);
-    return fresh;
-  };
-  const nodes = {};
-  for (const [key, override] of Object.entries(store.nodes)) {
-    const match = override.align !== void 0 && key.startsWith(AI_SLOT_KEY_PREFIX) ? key.match(/^ai\.(.+?)\.r(\d+)\.b(\d+)(?:\.|$)/) : null;
-    const tree = match ? treeFor(match[1]) : void 0;
-    const block = match && tree ? tree.rows[Number(match[2])]?.blocks[Number(match[3])] : void 0;
-    if (!block) {
-      nodes[key] = override;
-      continue;
-    }
-    block.align = override.align;
-    const rest = { ...override };
-    delete rest.align;
-    if (Object.keys(rest).length > 0) nodes[key] = rest;
+function resolveNavbarValue(value) {
+  if (value === void 0) return void 0;
+  return NAVBAR_COLOR_TOKENS.includes(value) ? navbarColorVar(value) : value;
+}
+var HEADLINE_SIZES = { md: 24, lg: 32, xl: 40, display: 56 };
+function styleSheetCss() {
+  const rules = [];
+  for (const [tone, value] of Object.entries(BG_VALUES)) {
+    rules.push(`[data-ohw-style-bg="${tone}"] { background: ${value} !important; }`);
   }
-  const sections = {};
-  for (const [sectionId, override] of Object.entries(store.sections)) {
-    const tree = override.align !== void 0 ? treeFor(sectionId) : void 0;
-    if (!tree) {
-      sections[sectionId] = override;
-      continue;
-    }
-    for (const row of tree.rows) {
-      for (const block of row.blocks) block.align = override.align;
-    }
-    const rest = { ...override };
-    delete rest.align;
-    if (Object.keys(rest).length > 0) sections[sectionId] = rest;
+  rules.push(
+    `[data-ohw-style-bg="accent"] { color: var(--ohw-brand-light, var(--color-light, #FFFFFF)) !important; }`
+  );
+  rules.push(
+    `[data-ohw-style-distribution="space-between"] { display: flex !important; flex-direction: column; justify-content: space-between; }`,
+    `[data-ohw-style-distribution="center"] { display: flex !important; flex-direction: column; justify-content: center; }`
+  );
+  for (const [scale, size] of Object.entries(HEADLINE_SIZES)) {
+    rules.push(
+      `[data-ohw-style-headline="${scale}"] :is(h1, h2, h3) { font-size: ${size}px !important; line-height: 1.15 !important; }`
+    );
   }
-  if (nextTrees.size === 0) return { state, store, changed: false };
-  return {
-    state: {
-      ...state,
-      v: 1,
-      sections: state.sections.map((entry) => {
-        const tree = nextTrees.get(entry.id);
-        return tree ? { ...entry, tree } : entry;
-      })
-    },
-    store: { v: 1, sections, nodes },
-    changed: true
-  };
-}
-function removeFromState(state, id) {
-  return { ...state, v: 1, sections: state.sections.filter((entry) => entry.id !== id) };
-}
-function deleteSectionFromState(state, sectionId) {
-  if (state.sections.some((entry) => entry.id === sectionId)) {
-    return removeFromState(state, sectionId);
+  rules.push(
+    `[data-ohw-style-aspect="fill-height"] img { height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }`
+  );
+  for (const aspect of ["1:1", "4:5", "3:4", "3:2", "16:9", "2:1", "3:1"]) {
+    rules.push(
+      `[data-ohw-style-aspect="${aspect.replace(":", "-")}"] img { aspect-ratio: ${aspect.replace(":", " / ")} !important; height: auto !important; object-fit: cover; }`
+    );
   }
-  const removed = state.removed ?? [];
-  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 pad = { tight: 40, balanced: 64, airy: 96 };
+  for (const [spacing, px2] of Object.entries(pad)) {
+    rules.push(
+      `[data-ohw-style-spacing="${spacing}"] { padding-top: ${px2}px !important; padding-bottom: ${px2}px !important; }`
+    );
   }
-  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 };
+  for (const [step, px2] of Object.entries(AI_TREE_TOKENS.sectionPaddingByScale)) {
+    const vpCss = px2 === 0 ? "0px" : `clamp(${Math.max(16, Math.round(px2 * 0.5))}px, ${(px2 / 9).toFixed(2)}vw, ${px2}px)`;
+    rules.push(
+      `[data-ohw-style-vpadding="${step}"] { padding-top: ${vpCss} !important; padding-bottom: ${vpCss} !important; }`
+    );
   }
-  return { state: nextState, store: nextStore, reapedIds, slotPrefixes, changed: true };
-}
-
-// src/lib/brand-chrome.ts
-var BRAND_NAME_KEY = "__ohw_brand_name";
-var BRAND_TITLE_KEY = "__ohw_site_title";
-var BRAND_FAVICON_LETTER_KEY = "__ohw_favicon_letter";
-var SITE_DESCRIPTION_KEY = "__ohw_site_description";
-var SITE_OG_IMAGE_KEY = "__ohw_og_image";
-var BRAND_CHROME_KEYS = /* @__PURE__ */ new Set([
-  BRAND_NAME_KEY,
-  BRAND_TITLE_KEY,
-  BRAND_FAVICON_LETTER_KEY,
-  SITE_DESCRIPTION_KEY,
-  SITE_OG_IMAGE_KEY
-]);
-function upsertMeta(selector, attr, token, value) {
-  let el = document.head.querySelector(selector);
-  if (!el) {
-    el = document.createElement("meta");
-    el.setAttribute(attr, token);
-    document.head.appendChild(el);
+  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; }`);
   }
-  if (el.getAttribute("content") !== value) el.setAttribute("content", value);
-}
-function removeMeta(selector) {
-  document.head.querySelector(selector)?.remove();
-}
-function escapeXml(value) {
-  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  return rules.join("\n");
 }
-function applyLetterFavicon(letter) {
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="12" fill="#111827"/><text x="32" y="46" font-family="system-ui,-apple-system,Segoe UI,sans-serif" font-size="40" font-weight="700" text-anchor="middle" fill="#ffffff">${escapeXml(letter)}</text></svg>`;
-  const href = `data:image/svg+xml,${encodeURIComponent(svg)}`;
-  let link = document.head.querySelector('link[rel="icon"]');
+var STYLE_FONT_LINK_ID = "ohw-style-fonts";
+function loadStyleFonts(families) {
+  const unique = [...new Set(families.map((f) => f.trim()).filter(Boolean))];
+  const existing = document.getElementById(STYLE_FONT_LINK_ID);
+  if (unique.length === 0) {
+    existing?.remove();
+    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`;
+  let link = existing;
   if (!link) {
     link = document.createElement("link");
-    link.rel = "icon";
+    link.id = STYLE_FONT_LINK_ID;
+    link.rel = "stylesheet";
     document.head.appendChild(link);
   }
-  link.type = "image/svg+xml";
   if (link.href !== href) link.href = href;
 }
-function applyDescription(description) {
-  if (!description) return;
-  upsertMeta('meta[name="description"]', "name", "description", description);
-  upsertMeta('meta[property="og:description"]', "property", "og:description", description);
-  upsertMeta('meta[name="twitter:description"]', "name", "twitter:description", description);
-}
-function applyOgImage(url) {
-  if (url) {
-    upsertMeta('meta[property="og:image"]', "property", "og:image", url);
-    upsertMeta('meta[name="twitter:image"]', "name", "twitter:image", url);
-    upsertMeta('meta[name="twitter:card"]', "name", "twitter:card", "summary_large_image");
-    return;
+var SECTION_ATTRS = {
+  sectionBackground: "data-ohw-style-bg",
+  textDistribution: "data-ohw-style-distribution",
+  headlineScale: "data-ohw-style-headline",
+  imageAspect: "data-ohw-style-aspect",
+  spacing: "data-ohw-style-spacing",
+  verticalPadding: "data-ohw-style-vpadding",
+  cornerStyle: "data-ohw-style-corners",
+  align: "data-ohw-style-align"
+};
+var NODE_WROTE_ATTR = "data-ohw-style-node";
+var NODE_PROPS = [
+  "color",
+  "font-family",
+  "font-size",
+  "text-align",
+  "justify-content",
+  "align-items"
+];
+var ALIGN_JUSTIFY = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+function saveInline(el, prop) {
+  const attr = `data-ohw-style-prev-${prop}`;
+  if (el.hasAttribute(attr)) return;
+  const value = el.style.getPropertyValue(prop) || (prop === "background" ? el.style.getPropertyValue("background-color") : "");
+  el.setAttribute(attr, value);
+}
+function restoreInline(el, prop) {
+  const attr = `data-ohw-style-prev-${prop}`;
+  if (!el.hasAttribute(attr)) return;
+  const prev = el.getAttribute(attr) ?? "";
+  if (prev) el.style.setProperty(prop, prev);
+  else el.style.removeProperty(prop);
+  el.removeAttribute(attr);
+}
+function ensureStyleSheet() {
+  let el = document.getElementById(STYLE_SHEET_ID);
+  if (!el) {
+    el = document.createElement("style");
+    el.id = STYLE_SHEET_ID;
+    document.head.appendChild(el);
+  }
+  const css = styleSheetCss();
+  if (el.textContent !== css) el.textContent = css;
+}
+function clearSectionAttrs(root) {
+  for (const attr of Object.values(SECTION_ATTRS)) {
+    for (const el of Array.from(root.querySelectorAll(`[${attr}]`))) el.removeAttribute(attr);
+  }
+  for (const el of Array.from(root.querySelectorAll("[data-ohw-style-bgcolor]"))) {
+    restoreInline(el, "background");
+    el.removeAttribute("data-ohw-style-bgcolor");
+  }
+  for (const el of Array.from(root.querySelectorAll("[data-ohw-style-minheight]"))) {
+    restoreInline(el, "min-height");
+    el.removeAttribute("data-ohw-style-minheight");
+  }
+}
+function clearNodeProps(root) {
+  for (const el of Array.from(root.querySelectorAll(`[${NODE_WROTE_ATTR}]`))) {
+    const h = el;
+    for (const prop of NODE_PROPS) restoreInline(h, prop);
+    h.removeAttribute(NODE_WROTE_ATTR);
+  }
+}
+function alignSubjectOf(el) {
+  const button = el.closest('[data-ohw-role="button"]');
+  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] : []),
+      ...Object.values(store.sections).flatMap((s) => s.fontFamily ? [s.fontFamily] : [])
+    ] : []
+  );
+  if (!store) return;
+  for (const [sectionId, override] of Object.entries(store.sections)) {
+    const escaped = CSS.escape(sectionId);
+    const byInstance = document.querySelectorAll(`[data-ohw-instance="${escaped}"]`);
+    const sections = Array.from(
+      byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`)
+    );
+    const isNavbar = sectionId === "navbar";
+    if (isNavbar) {
+      const drawer = document.querySelector("[data-ohw-nav-drawer]");
+      if (drawer && !sections.includes(drawer)) sections.push(drawer);
+      const header = document.querySelector("[data-ohw-nav-root]");
+      if (header && !sections.includes(header)) sections.push(header);
+    }
+    for (const marker of Array.from(sections)) {
+      const isDrawerMarker = isNavbar && marker.hasAttribute("data-ohw-nav-drawer");
+      const section = marker.querySelector(":scope > [data-ai-section]") ?? marker;
+      for (const [prop, attr] of Object.entries(SECTION_ATTRS)) {
+        const value = override[prop];
+        if (value === void 0) continue;
+        if (prop === "sectionBackground" && override.sectionBackgroundColor !== void 0) continue;
+        section.setAttribute(attr, String(value).replace(":", "-"));
+      }
+      const bgOverride = isDrawerMarker ? override.navbarMobileBackground : override.sectionBackgroundColor;
+      const textOverride = isDrawerMarker ? override.navbarMobileTextColor : override.textColor;
+      const bgValue = isNavbar ? resolveNavbarValue(bgOverride) : bgOverride;
+      const textValue = isNavbar ? resolveNavbarValue(textOverride) : textOverride;
+      if (bgValue !== void 0) {
+        saveInline(section, "background");
+        section.style.setProperty("background", bgValue, "important");
+        section.setAttribute("data-ohw-style-bgcolor", "");
+      }
+      if (override.minHeight !== void 0 && !isDrawerMarker) {
+        const minHeightCss = override.minHeight === "full" ? "var(--ohw-canvas-h, calc(100vh - 80px))" : override.minHeight === "half" ? "calc(var(--ohw-canvas-h, 100vh) / 2)" : void 0;
+        saveInline(section, "min-height");
+        if (minHeightCss) section.style.setProperty("min-height", minHeightCss, "important");
+        else section.style.removeProperty("min-height");
+        section.setAttribute("data-ohw-style-minheight", "");
+      }
+      if (textValue !== 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 (textValue !== void 0) {
+            saveInline(el, "color");
+            el.style.setProperty("color", textValue, "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)) {
+    const nodes = document.querySelectorAll(`[data-ohw-key="${CSS.escape(key)}"]`);
+    for (const el of Array.from(nodes)) {
+      if (override.color !== void 0) {
+        saveInline(el, "color");
+        el.style.setProperty("color", override.color, "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, "");
+      }
+      if (override.fontSize !== void 0) {
+        saveInline(el, "font-size");
+        el.style.setProperty("font-size", `${override.fontSize}px`, "important");
+        el.setAttribute(NODE_WROTE_ATTR, "");
+      }
+      if (override.align !== void 0) {
+        const subject = alignSubjectOf(el);
+        saveInline(subject, "text-align");
+        saveInline(subject, "justify-content");
+        subject.style.setProperty("text-align", override.align, "important");
+        subject.style.setProperty(
+          "justify-content",
+          ALIGN_JUSTIFY[override.align] ?? "flex-start",
+          "important"
+        );
+        subject.setAttribute(NODE_WROTE_ATTR, "");
+      }
+    }
+  }
+  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/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;
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed?.v !== 1 || !Array.isArray(parsed.sections)) return EMPTY_AI_SECTIONS;
+    const sections = parsed.sections.filter(
+      (entry) => typeof entry === "object" && entry !== null && typeof entry.id === "string" && entry.id.length > 0 && isRenderableTree(entry.tree)
+    ).map((entry) => ({
+      ...entry,
+      label: typeof entry.label === "string" ? entry.label : "Generated section",
+      media: entry.media && typeof entry.media === "object" ? entry.media : {}
+    }));
+    const removed = Array.isArray(parsed.removed) ? parsed.removed.filter((id) => typeof id === "string" && id.length > 0) : [];
+    return {
+      v: 1,
+      sections,
+      ...removed.length ? { removed } : {},
+      ...parsed.hideTemplate === true ? { hideTemplate: true } : {}
+    };
+  } catch {
+    return EMPTY_AI_SECTIONS;
+  }
+}
+function serializeAiSectionsState(state) {
+  return JSON.stringify(state);
+}
+function resolveSectionSettingsContext(sectionId, aiSectionsRaw, stylesRaw) {
+  const genSettings = parseAiSectionsState(aiSectionsRaw).sections.find(
+    (entry) => entry.id === sectionId
+  )?.tree.settings;
+  if (genSettings) return genSettings;
+  const styleOverride = parseStyleStore(stylesRaw)?.sections[sectionId];
+  if (!styleOverride?.verticalPadding && !styleOverride?.minHeight && !styleOverride?.spacing) {
+    return void 0;
+  }
+  return {
+    verticalPadding: styleOverride.verticalPadding ?? legacyVerticalPaddingAlias(styleOverride.spacing),
+    minHeight: styleOverride.minHeight
+  };
+}
+function applyTreeToState(state, payload) {
+  const insertBefore = payload.mode === "insert" && payload.position === "before";
+  const priorEntry = state.sections.find((existing) => existing.id === payload.id);
+  const selfEdit = payload.mode === "replace" && payload.targetSectionId === payload.id;
+  const entry = {
+    id: payload.id,
+    label: payload.label ?? "Generated section",
+    ...typeof payload.path === "string" && payload.path ? { path: payload.path } : {},
+    afterSection: selfEdit ? priorEntry?.afterSection ?? null : payload.mode === "insert" && !insertBefore ? payload.targetSectionId ?? null : null,
+    ...selfEdit ? priorEntry?.beforeSection ? { beforeSection: priorEntry.beforeSection } : {} : insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
+    ...selfEdit ? priorEntry?.replaces ? { replaces: priorEntry.replaces } : {} : payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
+    tree: payload.tree,
+    media: payload.media ?? {},
+    ...payload.brand && typeof payload.brand === "object" ? { brand: payload.brand } : {}
+  };
+  const others = state.sections.filter((existing) => existing.id !== entry.id);
+  return { ...state, v: 1, sections: [...others, entry] };
+}
+function foldAlignIntoTrees(state, store) {
+  const byId = new Map(state.sections.map((entry) => [entry.id, entry]));
+  const nextTrees = /* @__PURE__ */ new Map();
+  const treeFor = (id) => {
+    const cloned = nextTrees.get(id);
+    if (cloned) return cloned;
+    const entry = byId.get(id);
+    if (!entry) return void 0;
+    const fresh = {
+      ...entry.tree,
+      rows: entry.tree.rows.map((row) => ({ ...row, blocks: row.blocks.map((block) => ({ ...block })) }))
+    };
+    nextTrees.set(id, fresh);
+    return fresh;
+  };
+  const nodes = {};
+  for (const [key, override] of Object.entries(store.nodes)) {
+    const match = override.align !== void 0 && key.startsWith(AI_SLOT_KEY_PREFIX) ? key.match(/^ai\.(.+?)\.r(\d+)\.b(\d+)(?:\.|$)/) : null;
+    const tree = match ? treeFor(match[1]) : void 0;
+    const block = match && tree ? tree.rows[Number(match[2])]?.blocks[Number(match[3])] : void 0;
+    if (!block) {
+      nodes[key] = override;
+      continue;
+    }
+    block.align = override.align;
+    const rest = { ...override };
+    delete rest.align;
+    if (Object.keys(rest).length > 0) nodes[key] = rest;
+  }
+  const sections = {};
+  for (const [sectionId, override] of Object.entries(store.sections)) {
+    const tree = override.align !== void 0 ? treeFor(sectionId) : void 0;
+    if (!tree) {
+      sections[sectionId] = override;
+      continue;
+    }
+    for (const row of tree.rows) {
+      for (const block of row.blocks) block.align = override.align;
+    }
+    const rest = { ...override };
+    delete rest.align;
+    if (Object.keys(rest).length > 0) sections[sectionId] = rest;
+  }
+  if (nextTrees.size === 0) return { state, store, changed: false };
+  return {
+    state: {
+      ...state,
+      v: 1,
+      sections: state.sections.map((entry) => {
+        const tree = nextTrees.get(entry.id);
+        return tree ? { ...entry, tree } : entry;
+      })
+    },
+    store: { v: 1, sections, nodes },
+    changed: true
+  };
+}
+function foldSectionHeightIntoTrees(state, store) {
+  const byId = new Map(state.sections.map((entry) => [entry.id, entry]));
+  const nextEntries = /* @__PURE__ */ new Map();
+  const sections = {};
+  for (const [sectionId, override] of Object.entries(store.sections)) {
+    const entry = byId.get(sectionId);
+    const touchesHeight = override.verticalPadding !== void 0 || override.minHeight !== void 0;
+    if (!entry || !touchesHeight) {
+      sections[sectionId] = override;
+      continue;
+    }
+    const nextSettings = { ...entry.tree.settings ?? {} };
+    if (override.verticalPadding !== void 0) nextSettings.verticalPadding = override.verticalPadding;
+    if (override.minHeight !== void 0) nextSettings.minHeight = override.minHeight;
+    nextEntries.set(sectionId, { ...entry, tree: { ...entry.tree, settings: nextSettings } });
+    const rest = { ...override };
+    delete rest.verticalPadding;
+    delete rest.minHeight;
+    if (Object.keys(rest).length > 0) sections[sectionId] = rest;
+  }
+  if (nextEntries.size === 0) return { state, store, changed: false };
+  return {
+    state: {
+      ...state,
+      v: 1,
+      sections: state.sections.map((entry) => nextEntries.get(entry.id) ?? entry)
+    },
+    store: { v: 1, sections, nodes: store.nodes },
+    changed: true
+  };
+}
+function removeFromState(state, id) {
+  return { ...state, v: 1, sections: state.sections.filter((entry) => entry.id !== id) };
+}
+function deleteSectionFromState(state, sectionId) {
+  if (state.sections.some((entry) => entry.id === sectionId)) {
+    return removeFromState(state, sectionId);
+  }
+  const removed = state.removed ?? [];
+  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";
+var BRAND_TITLE_KEY = "__ohw_site_title";
+var BRAND_FAVICON_LETTER_KEY = "__ohw_favicon_letter";
+var SITE_DESCRIPTION_KEY = "__ohw_site_description";
+var SITE_OG_IMAGE_KEY = "__ohw_og_image";
+var BRAND_CHROME_KEYS = /* @__PURE__ */ new Set([
+  BRAND_NAME_KEY,
+  BRAND_TITLE_KEY,
+  BRAND_FAVICON_LETTER_KEY,
+  SITE_DESCRIPTION_KEY,
+  SITE_OG_IMAGE_KEY
+]);
+function upsertMeta(selector, attr, token, value) {
+  let el = document.head.querySelector(selector);
+  if (!el) {
+    el = document.createElement("meta");
+    el.setAttribute(attr, token);
+    document.head.appendChild(el);
+  }
+  if (el.getAttribute("content") !== value) el.setAttribute("content", value);
+}
+function removeMeta(selector) {
+  document.head.querySelector(selector)?.remove();
+}
+function escapeXml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function applyLetterFavicon(letter) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="12" fill="#111827"/><text x="32" y="46" font-family="system-ui,-apple-system,Segoe UI,sans-serif" font-size="40" font-weight="700" text-anchor="middle" fill="#ffffff">${escapeXml(letter)}</text></svg>`;
+  const href = `data:image/svg+xml,${encodeURIComponent(svg)}`;
+  let link = document.head.querySelector('link[rel="icon"]');
+  if (!link) {
+    link = document.createElement("link");
+    link.rel = "icon";
+    document.head.appendChild(link);
+  }
+  link.type = "image/svg+xml";
+  if (link.href !== href) link.href = href;
+}
+function applyDescription(description) {
+  if (!description) return;
+  upsertMeta('meta[name="description"]', "name", "description", description);
+  upsertMeta('meta[property="og:description"]', "property", "og:description", description);
+  upsertMeta('meta[name="twitter:description"]', "name", "twitter:description", description);
+}
+function applyOgImage(url) {
+  if (url) {
+    upsertMeta('meta[property="og:image"]', "property", "og:image", url);
+    upsertMeta('meta[name="twitter:image"]', "name", "twitter:image", url);
+    upsertMeta('meta[name="twitter:card"]', "name", "twitter:card", "summary_large_image");
+    return;
   }
   removeMeta('meta[property="og:image"]');
   removeMeta('meta[name="twitter:image"]');
@@ -468,520 +838,222 @@ function isButtonStyle(value) {
   const v = value;
   return BUTTON_FILL_TOKENS.includes(v.fill) && BUTTON_FILL_TOKENS.includes(v.textColor) && BUTTON_STYLES.includes(v.style) && BUTTON_RADII.includes(v.radius) && BUTTON_SIZES.includes(v.size);
 }
-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 };
-}
-var BUTTON_FIELDS = Object.keys(ROLES_BY_FIELD);
-function parseTouchedButtons(raw) {
-  const out = {};
-  for (const variant of ["primary", "secondary"]) {
-    const list = raw?.[variant];
-    if (Array.isArray(list)) out[variant] = BUTTON_FIELDS.filter((f) => list.includes(f));
-  }
-  return out;
-}
-function parseBrandKit(raw) {
-  if (!raw) return null;
-  try {
-    const parsed = JSON.parse(raw);
-    const p = parsed?.palette;
-    const f = parsed?.fonts;
-    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;
-    const b = parsed?.buttons;
-    const buttons = b && isButtonStyle(b.primary) && isButtonStyle(b.secondary) ? { primary: b.primary, secondary: b.secondary } : void 0;
-    if (!palette && !fonts && !customFonts && !buttons) return null;
-    return {
-      ...palette ? { palette } : {},
-      ...fonts ? { fonts } : {},
-      ...customFonts ? { customFonts } : {},
-      ...buttons ? { buttons } : {},
-      ...parsed.touched && typeof parsed.touched === "object" ? {
-        touched: {
-          palette: parsed.touched.palette === true,
-          fonts: parsed.touched.fonts === true,
-          buttons: parseTouchedButtons(parsed.touched.buttons)
-        }
-      } : {}
-    };
-  } catch {
-    return null;
-  }
-}
-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 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");
-    link.id = BRAND_FONT_LINK_ID;
-    link.rel = "stylesheet";
-    document.head.appendChild(link);
-  }
-  if (link.href !== href) link.href = href;
-}
-var BUTTON_RULES_STYLE_ID = "ohw-brand-button-rules";
-function buttonRulesCss(kit) {
-  const rule = (variant) => {
-    const roles = touchedButtonRoles(variant, kit);
-    const v = (role) => `var(--brand-button-${variant}-${role})`;
-    const decls = [];
-    if (roles.has("bg")) decls.push(`background:${v("bg")} !important`);
-    if (roles.has("text")) decls.push(`color:${v("text")} !important`);
-    if (roles.has("border")) decls.push(`border:1.5px solid ${v("border")} !important`);
-    if (roles.has("radius")) decls.push(`border-radius:${v("radius")} !important`);
-    if (roles.has("padding-x")) decls.push(`padding:var(--brand-button-${variant}-padding, ${v("padding-y")} ${v("padding-x")}) !important`);
-    if (roles.has("font-size")) decls.push(`font-size:${v("font-size")} !important`);
-    if (decls.length === 0) return "";
-    const selectors = [`html .btn--${variant}`, `html .btn-${variant}`];
-    const labelRule = roles.has("text") ? `${selectors.map((x) => `${x} *`).join(",")}{color:inherit !important}` : "";
-    return `${selectors.join(",")}{${decls.join(";")}}` + labelRule + (roles.has("bg") ? `${selectors.map((x) => `${x}:hover`).join(",")}{opacity:0.88}` : "");
-  };
-  return rule("primary") + rule("secondary");
-}
-function syncButtonRules(kit) {
-  let el = document.getElementById(BUTTON_RULES_STYLE_ID);
-  const css = kit ? buttonRulesCss(kit) : "";
-  if (!css) {
-    el?.remove();
-    return;
-  }
-  if (!el) {
-    el = document.createElement("style");
-    el.id = BUTTON_RULES_STYLE_ID;
-    document.head.appendChild(el);
-  }
-  if (el.textContent !== css) el.textContent = css;
-}
-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, ...BUTTON_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();
-    syncButtonRules(null);
-    return;
-  }
-  const applyPalette = kit.touched ? kit.touched.palette === true : true;
-  const applyFonts = kit.touched ? kit.touched.fonts === true : true;
-  if (kit.palette) {
-    if (applyPalette) {
-      for (const [name, value] of Object.entries(brandColorVars(kit.palette))) root.style.setProperty(name, value);
-    } else {
-      for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES]) root.style.removeProperty(name);
-    }
-  }
-  if (kit.buttons) {
-    for (const name of BUTTON_VAR_NAMES) root.style.removeProperty(name);
-    for (const [name, value] of Object.entries(buttonStyleVars({ ...kit, buttons: kit.buttons }))) root.style.setProperty(name, value);
-  }
-  syncButtonRules(kit.buttons ? kit : null);
-  if (kit.customFonts) {
-    loadCustomFonts(kit.customFonts);
-  }
-  if (kit.fonts) {
-    if (applyFonts) {
-      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);
-    } else {
-      for (const name of [...FONT_VARS.heading, ...FONT_VARS.body]) root.style.removeProperty(name);
-      document.getElementById(BRAND_FONT_LINK_ID)?.remove();
-    }
-  }
+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 };
 }
-
-// src/lib/custom-code.ts
-var ALLOWED_HEAD_TAGS = /* @__PURE__ */ new Set(["style", "meta", "link", "script", "noscript", "base"]);
-var CUSTOM_CODE_AFTER_HEAD_KEY = "__ohw_custom_code_after_head";
-var CUSTOM_CODE_BEFORE_HEAD_KEY = "__ohw_custom_code_before_head";
-function clearExisting(slot) {
-  document.querySelectorAll(`[data-ohw-custom-code="${slot}"]`).forEach((el) => el.remove());
+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 buildNodes(raw, slot) {
-  if (!raw || !raw.trim()) return [];
-  const parsed = new DOMParser().parseFromString(raw, "text/html");
-  const source = [...parsed.head.childNodes, ...parsed.body.childNodes];
-  const nodes = [];
-  for (const node of source) {
-    if (node.nodeType !== Node.ELEMENT_NODE) continue;
-    const el = node;
-    const tag = el.tagName.toLowerCase();
-    if (!ALLOWED_HEAD_TAGS.has(tag)) continue;
-    const built = document.createElement(tag);
-    for (const attr of Array.from(el.attributes)) built.setAttribute(attr.name, attr.value);
-    if (tag === "script" || tag === "style" || tag === "noscript") built.textContent = el.textContent;
-    built.dataset.ohwCustomCode = slot;
-    nodes.push(built);
+var BUTTON_FIELDS = Object.keys(ROLES_BY_FIELD);
+function parseTouchedButtons(raw) {
+  const out = {};
+  for (const variant of ["primary", "secondary"]) {
+    const list = raw?.[variant];
+    if (Array.isArray(list)) out[variant] = BUTTON_FIELDS.filter((f) => list.includes(f));
   }
-  return nodes;
-}
-function applyCustomCodeToHead(content) {
-  clearExisting("after");
-  clearExisting("before");
-  const afterNodes = buildNodes(content[CUSTOM_CODE_AFTER_HEAD_KEY], "after");
-  if (afterNodes.length > 0) document.head.prepend(...afterNodes);
-  const beforeNodes = buildNodes(content[CUSTOM_CODE_BEFORE_HEAD_KEY], "before");
-  if (beforeNodes.length > 0) document.head.append(...beforeNodes);
+  return out;
 }
-
-// src/lib/section-styles.ts
-var STYLE_STORE_KEY = "__ohw_styles";
-var STYLE_SHEET_ID = "ohw-section-styles";
-function parseStyleStore(raw) {
+function parseBrandKit(raw) {
   if (!raw) return null;
   try {
     const parsed = JSON.parse(raw);
-    if (parsed?.v !== 1) return null;
+    const p = parsed?.palette;
+    const f = parsed?.fonts;
+    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;
+    const b = parsed?.buttons;
+    const buttons = b && isButtonStyle(b.primary) && isButtonStyle(b.secondary) ? { primary: b.primary, secondary: b.secondary } : void 0;
+    if (!palette && !fonts && !customFonts && !buttons) return null;
     return {
-      v: 1,
-      sections: typeof parsed.sections === "object" && parsed.sections ? parsed.sections : {},
-      nodes: typeof parsed.nodes === "object" && parsed.nodes ? parsed.nodes : {}
+      ...palette ? { palette } : {},
+      ...fonts ? { fonts } : {},
+      ...customFonts ? { customFonts } : {},
+      ...buttons ? { buttons } : {},
+      ...parsed.touched && typeof parsed.touched === "object" ? {
+        touched: {
+          palette: parsed.touched.palette === true,
+          fonts: parsed.touched.fonts === true,
+          buttons: parseTouchedButtons(parsed.touched.buttons)
+        }
+      } : {}
     };
   } catch {
     return null;
   }
 }
-var BG_VALUES = {
-  surface: "color-mix(in srgb, var(--ohw-brand-light, var(--color-light, #ECECEB)) 94%, var(--ohw-brand-dark, var(--color-dark, #0C0A09)))",
-  accent: "var(--ohw-brand-primary, var(--color-primary, #0078E5))",
-  "accent-soft": "color-mix(in srgb, var(--ohw-brand-primary, var(--color-primary, #0078E5)) 12%, var(--ohw-brand-light, var(--color-light, #FFFFFF)))"
-};
-var NAVBAR_COLOR_TOKENS = ["dark", "primary", "accent", "light"];
-function navbarColorVar(token) {
-  const fallback = {
-    dark: "#0C0A09",
-    primary: "#0078E5",
-    accent: "#0078E5",
-    light: "#FFFFFF"
-  };
-  return `var(--ohw-brand-${token}, var(--color-${token}, ${fallback[token]}))`;
-}
-function resolveNavbarValue(value) {
-  if (value === void 0) return void 0;
-  return NAVBAR_COLOR_TOKENS.includes(value) ? navbarColorVar(value) : value;
+function familyOf(stack) {
+  const first = stack.split(",")[0]?.trim() ?? "";
+  return first.replace(/^['"]|['"]$/g, "");
 }
-var HEADLINE_SIZES = { md: 24, lg: 32, xl: 40, display: 56 };
-function styleSheetCss() {
-  const rules = [];
-  for (const [tone, value] of Object.entries(BG_VALUES)) {
-    rules.push(`[data-ohw-style-bg="${tone}"] { background: ${value} !important; }`);
-  }
-  rules.push(
-    `[data-ohw-style-bg="accent"] { color: var(--ohw-brand-light, var(--color-light, #FFFFFF)) !important; }`
-  );
-  rules.push(
-    `[data-ohw-style-distribution="space-between"] { display: flex !important; flex-direction: column; justify-content: space-between; }`,
-    `[data-ohw-style-distribution="center"] { display: flex !important; flex-direction: column; justify-content: center; }`
-  );
-  for (const [scale, size] of Object.entries(HEADLINE_SIZES)) {
-    rules.push(
-      `[data-ohw-style-headline="${scale}"] :is(h1, h2, h3) { font-size: ${size}px !important; line-height: 1.15 !important; }`
-    );
-  }
-  rules.push(
-    `[data-ohw-style-aspect="fill-height"] img { height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }`
-  );
-  for (const aspect of ["1:1", "4:5", "3:4", "3:2", "16:9", "2:1", "3:1"]) {
-    rules.push(
-      `[data-ohw-style-aspect="${aspect.replace(":", "-")}"] img { aspect-ratio: ${aspect.replace(":", " / ")} !important; height: auto !important; object-fit: cover; }`
-    );
-  }
-  const pad = { tight: 40, balanced: 64, airy: 96 };
-  for (const [spacing, px2] of Object.entries(pad)) {
-    rules.push(
-      `[data-ohw-style-spacing="${spacing}"] { padding-top: ${px2}px !important; padding-bottom: ${px2}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; }`);
-  }
-  return rules.join("\n");
+function quoteFamily(family) {
+  return `'${family.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
 }
-var STYLE_FONT_LINK_ID = "ohw-style-fonts";
-function loadStyleFonts(families) {
+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))];
-  const existing = document.getElementById(STYLE_FONT_LINK_ID);
-  if (unique.length === 0) {
-    existing?.remove();
-    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`;
-  let link = existing;
+  if (unique.length === 0) return;
+  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");
-    link.id = STYLE_FONT_LINK_ID;
+    link.id = BRAND_FONT_LINK_ID;
     link.rel = "stylesheet";
     document.head.appendChild(link);
   }
   if (link.href !== href) link.href = href;
 }
-var SECTION_ATTRS = {
-  sectionBackground: "data-ohw-style-bg",
-  textDistribution: "data-ohw-style-distribution",
-  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";
-var NODE_PROPS = [
-  "color",
-  "font-family",
-  "font-size",
-  "text-align",
-  "justify-content",
-  "align-items"
-];
-var ALIGN_JUSTIFY = {
-  left: "flex-start",
-  center: "center",
-  right: "flex-end"
-};
-function saveInline(el, prop) {
-  const attr = `data-ohw-style-prev-${prop}`;
-  if (el.hasAttribute(attr)) return;
-  const value = el.style.getPropertyValue(prop) || (prop === "background" ? el.style.getPropertyValue("background-color") : "");
-  el.setAttribute(attr, value);
-}
-function restoreInline(el, prop) {
-  const attr = `data-ohw-style-prev-${prop}`;
-  if (!el.hasAttribute(attr)) return;
-  const prev = el.getAttribute(attr) ?? "";
-  if (prev) el.style.setProperty(prop, prev);
-  else el.style.removeProperty(prop);
-  el.removeAttribute(attr);
+var BUTTON_RULES_STYLE_ID = "ohw-brand-button-rules";
+function buttonRulesCss(kit) {
+  const rule = (variant) => {
+    const roles = touchedButtonRoles(variant, kit);
+    const v = (role) => `var(--brand-button-${variant}-${role})`;
+    const decls = [];
+    if (roles.has("bg")) decls.push(`background:${v("bg")} !important`);
+    if (roles.has("text")) decls.push(`color:${v("text")} !important`);
+    if (roles.has("border")) decls.push(`border:1.5px solid ${v("border")} !important`);
+    if (roles.has("radius")) decls.push(`border-radius:${v("radius")} !important`);
+    if (roles.has("padding-x")) decls.push(`padding:var(--brand-button-${variant}-padding, ${v("padding-y")} ${v("padding-x")}) !important`);
+    if (roles.has("font-size")) decls.push(`font-size:${v("font-size")} !important`);
+    if (decls.length === 0) return "";
+    const selectors = [`html .btn--${variant}`, `html .btn-${variant}`];
+    const labelRule = roles.has("text") ? `${selectors.map((x) => `${x} *`).join(",")}{color:inherit !important}` : "";
+    return `${selectors.join(",")}{${decls.join(";")}}` + labelRule + (roles.has("bg") ? `${selectors.map((x) => `${x}:hover`).join(",")}{opacity:0.88}` : "");
+  };
+  return rule("primary") + rule("secondary");
 }
-function ensureStyleSheet() {
-  let el = document.getElementById(STYLE_SHEET_ID);
+function syncButtonRules(kit) {
+  let el = document.getElementById(BUTTON_RULES_STYLE_ID);
+  const css = kit ? buttonRulesCss(kit) : "";
+  if (!css) {
+    el?.remove();
+    return;
+  }
   if (!el) {
     el = document.createElement("style");
-    el.id = STYLE_SHEET_ID;
+    el.id = BUTTON_RULES_STYLE_ID;
     document.head.appendChild(el);
   }
-  const css = styleSheetCss();
   if (el.textContent !== css) el.textContent = css;
 }
-function clearSectionAttrs(root) {
-  for (const attr of Object.values(SECTION_ATTRS)) {
-    for (const el of Array.from(root.querySelectorAll(`[${attr}]`))) el.removeAttribute(attr);
-  }
-  for (const el of Array.from(root.querySelectorAll("[data-ohw-style-bgcolor]"))) {
-    restoreInline(el, "background");
-    el.removeAttribute("data-ohw-style-bgcolor");
-  }
-}
-function clearNodeProps(root) {
-  for (const el of Array.from(root.querySelectorAll(`[${NODE_WROTE_ATTR}]`))) {
-    const h = el;
-    for (const prop of NODE_PROPS) restoreInline(h, prop);
-    h.removeAttribute(NODE_WROTE_ATTR);
-  }
+function escapeCssString(value) {
+  return value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
 }
-function alignSubjectOf(el) {
-  const button = el.closest('[data-ohw-role="button"]');
-  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;
-    }
+function loadCustomFonts(fonts) {
+  const list = fonts ?? [];
+  let style = document.getElementById(CUSTOM_FONT_STYLE_ID);
+  if (list.length === 0) {
+    style?.remove();
+    return;
   }
-  const row = subject.closest("li");
-  if (row && row !== subject && /^(inline-)?flex$/.test(getComputedStyle(row).display)) {
-    return row;
+  if (!style) {
+    style = document.createElement("style");
+    style.id = CUSTOM_FONT_STYLE_ID;
+    document.head.appendChild(style);
   }
-  return subject;
+  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 applyStylesToDom(store) {
-  ensureStyleSheet();
-  clearSectionAttrs(document);
-  clearNodeProps(document);
-  loadStyleFonts(
-    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)) {
-    const escaped = CSS.escape(sectionId);
-    const byInstance = document.querySelectorAll(`[data-ohw-instance="${escaped}"]`);
-    const sections = Array.from(
-      byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`)
-    );
-    const isNavbar = sectionId === "navbar";
-    if (isNavbar) {
-      const drawer = document.querySelector("[data-ohw-nav-drawer]");
-      if (drawer && !sections.includes(drawer)) sections.push(drawer);
-      const header = document.querySelector("[data-ohw-nav-root]");
-      if (header && !sections.includes(header)) sections.push(header);
-    }
-    for (const marker of Array.from(sections)) {
-      const isDrawerMarker = isNavbar && marker.hasAttribute("data-ohw-nav-drawer");
-      const section = marker.querySelector(":scope > [data-ai-section]") ?? marker;
-      for (const [prop, attr] of Object.entries(SECTION_ATTRS)) {
-        const value = override[prop];
-        if (value === void 0) continue;
-        if (prop === "sectionBackground" && override.sectionBackgroundColor !== void 0) continue;
-        section.setAttribute(attr, String(value).replace(":", "-"));
-      }
-      const bgOverride = isDrawerMarker ? override.navbarMobileBackground : override.sectionBackgroundColor;
-      const textOverride = isDrawerMarker ? override.navbarMobileTextColor : override.textColor;
-      const bgValue = isNavbar ? resolveNavbarValue(bgOverride) : bgOverride;
-      const textValue = isNavbar ? resolveNavbarValue(textOverride) : textOverride;
-      if (bgValue !== void 0) {
-        saveInline(section, "background");
-        section.style.setProperty("background", bgValue, "important");
-        section.setAttribute("data-ohw-style-bgcolor", "");
-      }
-      if (textValue !== 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 (textValue !== void 0) {
-            saveInline(el, "color");
-            el.style.setProperty("color", textValue, "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, "");
-          }
-        }
-      }
+function applyBrandToDom(kit) {
+  const root = document.documentElement;
+  if (!kit) {
+    for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES, ...BUTTON_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();
+    syncButtonRules(null);
+    return;
   }
-  for (const [key, override] of Object.entries(store.nodes)) {
-    const nodes = document.querySelectorAll(`[data-ohw-key="${CSS.escape(key)}"]`);
-    for (const el of Array.from(nodes)) {
-      if (override.color !== void 0) {
-        saveInline(el, "color");
-        el.style.setProperty("color", override.color, "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, "");
-      }
-      if (override.fontSize !== void 0) {
-        saveInline(el, "font-size");
-        el.style.setProperty("font-size", `${override.fontSize}px`, "important");
-        el.setAttribute(NODE_WROTE_ATTR, "");
-      }
-      if (override.align !== void 0) {
-        const subject = alignSubjectOf(el);
-        saveInline(subject, "text-align");
-        saveInline(subject, "justify-content");
-        subject.style.setProperty("text-align", override.align, "important");
-        subject.style.setProperty(
-          "justify-content",
-          ALIGN_JUSTIFY[override.align] ?? "flex-start",
-          "important"
-        );
-        subject.setAttribute(NODE_WROTE_ATTR, "");
-      }
+  const applyPalette = kit.touched ? kit.touched.palette === true : true;
+  const applyFonts = kit.touched ? kit.touched.fonts === true : true;
+  if (kit.palette) {
+    if (applyPalette) {
+      for (const [name, value] of Object.entries(brandColorVars(kit.palette))) root.style.setProperty(name, value);
+    } else {
+      for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES]) root.style.removeProperty(name);
     }
   }
-  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]"
+  if (kit.buttons) {
+    for (const name of BUTTON_VAR_NAMES) root.style.removeProperty(name);
+    for (const [name, value] of Object.entries(buttonStyleVars({ ...kit, buttons: kit.buttons }))) root.style.setProperty(name, value);
+  }
+  syncButtonRules(kit.buttons ? kit : null);
+  if (kit.customFonts) {
+    loadCustomFonts(kit.customFonts);
+  }
+  if (kit.fonts) {
+    if (applyFonts) {
+      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)
       );
-      for (const el of Array.from(headings)) {
-        saveInline(el, "color");
-        el.style.setProperty("color", override.headingColor, "important");
-        el.setAttribute(NODE_WROTE_ATTR, "");
-      }
+      loadBrandFonts(googleFamilies);
+    } else {
+      for (const name of [...FONT_VARS.heading, ...FONT_VARS.body]) root.style.removeProperty(name);
+      document.getElementById(BRAND_FONT_LINK_ID)?.remove();
     }
   }
 }
 
+// src/lib/custom-code.ts
+var ALLOWED_HEAD_TAGS = /* @__PURE__ */ new Set(["style", "meta", "link", "script", "noscript", "base"]);
+var CUSTOM_CODE_AFTER_HEAD_KEY = "__ohw_custom_code_after_head";
+var CUSTOM_CODE_BEFORE_HEAD_KEY = "__ohw_custom_code_before_head";
+function clearExisting(slot) {
+  document.querySelectorAll(`[data-ohw-custom-code="${slot}"]`).forEach((el) => el.remove());
+}
+function buildNodes(raw, slot) {
+  if (!raw || !raw.trim()) return [];
+  const parsed = new DOMParser().parseFromString(raw, "text/html");
+  const source = [...parsed.head.childNodes, ...parsed.body.childNodes];
+  const nodes = [];
+  for (const node of source) {
+    if (node.nodeType !== Node.ELEMENT_NODE) continue;
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    if (!ALLOWED_HEAD_TAGS.has(tag)) continue;
+    const built = document.createElement(tag);
+    for (const attr of Array.from(el.attributes)) built.setAttribute(attr.name, attr.value);
+    if (tag === "script" || tag === "style" || tag === "noscript") built.textContent = el.textContent;
+    built.dataset.ohwCustomCode = slot;
+    nodes.push(built);
+  }
+  return nodes;
+}
+function applyCustomCodeToHead(content) {
+  clearExisting("after");
+  clearExisting("before");
+  const afterNodes = buildNodes(content[CUSTOM_CODE_AFTER_HEAD_KEY], "after");
+  if (afterNodes.length > 0) document.head.prepend(...afterNodes);
+  const beforeNodes = buildNodes(content[CUSTOM_CODE_BEFORE_HEAD_KEY], "before");
+  if (beforeNodes.length > 0) document.head.append(...beforeNodes);
+}
+
 // src/ui/ai-tree/aiSectionsManager.tsx
 import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -3229,7 +3301,9 @@ function AiTreeRenderer({
     ...band ? { buttonLabel: band.buttonLabel } : {}
   };
   const settings = tree.settings ?? {};
-  const pad = AI_TREE_TOKENS.sectionPadding[settings.spacing ?? "balanced"];
+  const pad = AI_TREE_TOKENS.sectionPaddingByScale[settings.verticalPadding ?? legacyVerticalPaddingAlias(settings.spacing) ?? "m"];
+  const padCss = pad === 0 ? "0px" : `clamp(${Math.max(16, Math.round(pad * 0.5))}px, ${(pad / 9).toFixed(2)}vw, ${pad}px)`;
+  const minHeightCss = settings.minHeight === "full" ? "var(--ohw-canvas-h, calc(100vh - 80px))" : settings.minHeight === "half" ? "calc(var(--ohw-canvas-h, 100vh) / 2)" : void 0;
   const isOverlay = tree.scaffold === "overlay";
   const overlayAlpha = { low: 0.25, medium: 0.45, high: 0.65 }[settings.overlayIntensity ?? "medium"];
   const backgroundUrl = isOverlay && settings.backgroundMedia ? ctx.resolveMedia(settings.backgroundMedia) : null;
@@ -3268,7 +3342,9 @@ function AiTreeRenderer({
       ...bgAttrs,
       style: {
         position: "relative",
-        padding: `${pad}px 0`,
+        padding: `${padCss} 0`,
+        minHeight: minHeightCss,
+        boxSizing: "border-box",
         background: toneBackground ?? (isOverlay && !backgroundUrl ? "#DBEAFE" : void 0),
         backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : void 0,
         backgroundSize: "cover",
@@ -26175,19 +26251,20 @@ function OhhwellsBridge() {
       let previousSections;
       const store = parseStyleStore(value);
       if (store) {
-        const folded = foldAlignIntoTrees(parseAiSectionsState(aiSectionsRef.current), store);
-        if (folded.changed) {
-          const nextSections = serializeAiSectionsState(folded.state);
+        const foldedAlign = foldAlignIntoTrees(parseAiSectionsState(aiSectionsRef.current), store);
+        const foldedHeight = foldSectionHeightIntoTrees(foldedAlign.state, foldedAlign.store);
+        if (foldedAlign.changed || foldedHeight.changed) {
+          const nextSections = serializeAiSectionsState(foldedHeight.state);
           if (nextSections !== aiSectionsRef.current) {
             previousSections = aiSectionsRef.current;
             aiSectionsRef.current = nextSections;
-            applyAiSectionsToDom(folded.state);
+            applyAiSectionsToDom(foldedHeight.state);
             postToParentRef.current({
               type: "ow:change",
               nodes: [{ key: AI_SECTIONS_KEY, text: nextSections }]
             });
           }
-          value = JSON.stringify(folded.store);
+          value = JSON.stringify(foldedHeight.store);
         }
       }
       stylesRef.current = value;
@@ -26795,7 +26872,15 @@ function OhhwellsBridge() {
         width: box.width,
         height: box.height
       } : null;
-      postToParentRef.current({ type: "ow:section-nodes", sectionId, found: !!sectionEl, nodes, rect });
+      const settings = resolveSectionSettingsContext(sectionId, aiSectionsRef.current, stylesRef.current);
+      postToParentRef.current({
+        type: "ow:section-nodes",
+        sectionId,
+        found: !!sectionEl,
+        nodes,
+        rect,
+        ...settings ? { settings } : {}
+      });
     };
     let selectionChangeRaf = null;
     const runSelectionChange = () => {
@@ -27460,7 +27545,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.126",
+        bridgeVersion: "0.1.127",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections