@ohhwells/bridge 0.1.78 → 0.1.79

package/dist/index.cjs

@@ -156,7 +156,12 @@ function parseAiSectionsState(raw) {
       media: entry.media && typeof entry.media === "object" ? entry.media : {}
     }));
     const removed = Array.isArray(parsed.removed) ? parsed.removed.filter((id) => typeof id === "string" && id.length > 0) : [];
-    return { v: 1, sections, ...removed.length ? { removed } : {} };
+    return {
+      v: 1,
+      sections,
+      ...removed.length ? { removed } : {},
+      ...parsed.hideTemplate === true ? { hideTemplate: true } : {}
+    };
   } catch {
     return EMPTY_AI_SECTIONS;
   }
@@ -169,6 +174,7 @@ function applyTreeToState(state, payload) {
   const entry = {
     id: payload.id,
     label: payload.label ?? "Generated section",
+    ...typeof payload.path === "string" && payload.path ? { path: payload.path } : {},
     afterSection: payload.mode === "insert" && !insertBefore ? payload.targetSectionId ?? null : null,
     ...insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
     ...payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
@@ -191,6 +197,317 @@ function deleteSectionFromState(state, sectionId) {
   return { ...state, v: 1, sections: state.sections, removed: [...removed, sectionId] };
 }
 
+// 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 BRAND_CHROME_KEYS = /* @__PURE__ */ new Set([
+  BRAND_NAME_KEY,
+  BRAND_TITLE_KEY,
+  BRAND_FAVICON_LETTER_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 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 applyBrandChrome(content) {
+  const name = content[BRAND_NAME_KEY];
+  if (typeof name === "string" && name.length > 0) {
+    document.querySelectorAll("[data-ohw-wordmark]").forEach((el) => {
+      if (el.textContent !== name) el.textContent = name;
+      if (el.getAttribute("title") !== name) el.setAttribute("title", name);
+    });
+  }
+  const title = content[BRAND_TITLE_KEY];
+  if (typeof title === "string" && title.length > 0) {
+    if (document.title !== title) document.title = title;
+    upsertMeta('meta[property="og:title"]', "property", "og:title", title);
+    upsertMeta('meta[name="twitter:title"]', "name", "twitter:title", title);
+  }
+  const letter = content[BRAND_FAVICON_LETTER_KEY];
+  if (typeof letter === "string" && letter.length > 0) {
+    applyLetterFavicon(letter);
+  }
+}
+
+// src/lib/brand-kit.ts
+var BRAND_KIT_KEY = "__ohw_brand";
+var BRAND_VAR_PREFIX = "--ohw-brand-";
+var BRAND_VAR_NAMES = ["primary", "accent", "light", "dark", "surface", "border", "muted"].map(
+  (role) => `${BRAND_VAR_PREFIX}${role}`
+);
+var FONT_VARS = {
+  heading: ["--font-heading", "--font-display", "--brand-font-heading"],
+  body: ["--font-body", "--brand-font-body"]
+};
+var BRAND_FONT_LINK_ID = "ohw-brand-fonts";
+function brandColorVars(kit) {
+  const { dark, primary, accent, light } = kit.palette;
+  const mix = (a, aPct, b) => `color-mix(in srgb, ${a} ${aPct}%, ${b})`;
+  return {
+    [`${BRAND_VAR_PREFIX}primary`]: primary,
+    [`${BRAND_VAR_PREFIX}accent`]: accent,
+    [`${BRAND_VAR_PREFIX}light`]: light,
+    [`${BRAND_VAR_PREFIX}dark`]: dark,
+    [`${BRAND_VAR_PREFIX}surface`]: mix(light, 95, dark),
+    [`${BRAND_VAR_PREFIX}border`]: mix(light, 85, dark),
+    [`${BRAND_VAR_PREFIX}muted`]: mix(dark, 62, light)
+  };
+}
+function parseBrandKit(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    const p = parsed?.palette;
+    const f = parsed?.fonts;
+    if (!p || !f || typeof p.dark !== "string" || typeof p.primary !== "string" || typeof p.accent !== "string" || typeof p.light !== "string" || typeof f.heading !== "string" || typeof f.body !== "string") {
+      return null;
+    }
+    return {
+      palette: { dark: p.dark, primary: p.primary, accent: p.accent, light: p.light },
+      fonts: { heading: f.heading, body: f.body }
+    };
+  } catch {
+    return null;
+  }
+}
+function familyOf(stack) {
+  const first = stack.split(",")[0]?.trim() ?? "";
+  return first.replace(/^['"]|['"]$/g, "");
+}
+function loadBrandFonts(families) {
+  const unique = [...new Set(families.map((f) => f.trim()).filter(Boolean))];
+  if (unique.length === 0) return;
+  const spec = unique.map((f) => `${f.replace(/ /g, "+")}:400,500,600,700`).join("|");
+  const href = `https://fonts.googleapis.com/css?family=${spec}&display=swap`;
+  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;
+}
+function applyBrandToDom(kit) {
+  const root = document.documentElement;
+  if (!kit) {
+    for (const name of BRAND_VAR_NAMES) root.style.removeProperty(name);
+    for (const name of [...FONT_VARS.heading, ...FONT_VARS.body]) root.style.removeProperty(name);
+    document.getElementById(BRAND_FONT_LINK_ID)?.remove();
+    return;
+  }
+  for (const [name, value] of Object.entries(brandColorVars(kit))) root.style.setProperty(name, value);
+  for (const name of FONT_VARS.heading) root.style.setProperty(name, kit.fonts.heading);
+  for (const name of FONT_VARS.body) root.style.setProperty(name, kit.fonts.body);
+  loadBrandFonts([familyOf(kit.fonts.heading), familyOf(kit.fonts.body)]);
+}
+
+// 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) return null;
+    return {
+      v: 1,
+      sections: typeof parsed.sections === "object" && parsed.sections ? parsed.sections : {},
+      nodes: typeof parsed.nodes === "object" && parsed.nodes ? parsed.nodes : {}
+    };
+  } 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 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, px] of Object.entries(pad)) {
+    rules.push(
+      `[data-ohw-style-spacing="${spacing}"] { padding-top: ${px}px !important; padding-bottom: ${px}px !important; }`
+    );
+  }
+  return rules.join("\n");
+}
+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.id = STYLE_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"
+};
+var NODE_WROTE_ATTR = "data-ohw-style-node";
+var NODE_PROPS = ["color", "font-family", "font-size", "background"];
+function saveInline(el, prop) {
+  const attr = `data-ohw-style-prev-${prop}`;
+  if (!el.hasAttribute(attr)) el.setAttribute(attr, el.style.getPropertyValue(prop));
+}
+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");
+  }
+}
+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 buttonSurfaceOf(el) {
+  return el.closest("a, button") ?? el;
+}
+function applyStylesToDom(store) {
+  ensureStyleSheet();
+  clearSectionAttrs(document);
+  clearNodeProps(document);
+  loadStyleFonts(
+    store ? Object.values(store.nodes).flatMap((n) => n.fontFamily ? [n.fontFamily] : []) : []
+  );
+  if (!store) return;
+  for (const [sectionId, override] of Object.entries(store.sections)) {
+    const sections = document.querySelectorAll(
+      `[data-ohw-section="${CSS.escape(sectionId)}"]`
+    );
+    for (const section of Array.from(sections)) {
+      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(":", "-"));
+      }
+      if (override.sectionBackgroundColor !== void 0) {
+        saveInline(section, "background");
+        section.style.setProperty("background", override.sectionBackgroundColor, "important");
+        section.setAttribute("data-ohw-style-bgcolor", "");
+      }
+    }
+  }
+  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.buttonBackground !== void 0 || override.buttonText !== void 0) {
+        const surface = buttonSurfaceOf(el);
+        if (override.buttonBackground !== void 0) {
+          saveInline(surface, "background");
+          surface.style.setProperty("background", override.buttonBackground, "important");
+        }
+        if (override.buttonText !== void 0) {
+          saveInline(surface, "color");
+          surface.style.setProperty("color", override.buttonText, "important");
+        }
+        surface.setAttribute(NODE_WROTE_ATTR, "");
+      }
+    }
+  }
+}
+
 // src/ui/ai-tree/aiSectionsManager.tsx
 var import_react_dom = require("react-dom");
 var import_client = require("react-dom/client");
@@ -205,7 +522,8 @@ function lucideByName(name) {
 }
 var typeStyle = (spec, font) => ({
   fontFamily: font,
-  fontSize: spec.size,
+  // Headings shrink with the viewport (reaching full size around ~900px wide); body copy stays put.
+  fontSize: spec.size >= 24 ? `clamp(${Math.max(18, Math.round(spec.size * 0.6))}px, ${(spec.size / 9).toFixed(2)}vw, ${spec.size}px)` : spec.size,
   lineHeight: spec.line,
   fontWeight: spec.weight
 });
@@ -214,26 +532,63 @@ var featureLines = (value) => value.split(/\n|<br\s*\/?>/i).map((line) => line.t
 var CHECK_MASK = `data:image/svg+xml,${encodeURIComponent(
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'
 )}`;
+var AI_MOBILE_CSS = [
+  "@media (max-width: 768px){",
+  "[data-ai-section]{overflow-x:hidden}",
+  "[data-ai-container]{padding:0 20px !important}",
+  "[data-ai-row]{display:flex !important;flex-direction:column !important;align-items:stretch !important}",
+  "[data-ai-cell]{width:100%;min-width:0}",
+  "[data-ai-grid]{grid-template-columns:1fr !important}",
+  // Group containers flatten to a column on phones; span placements come along for free.
+  "[data-ai-group]{display:flex !important;flex-direction:column !important}",
+  "[data-ai-group] > *{grid-column:auto !important}",
+  // The 50:50 form collapses to a single stacked column on phones.
+  "[data-ai-form]{grid-template-columns:1fr !important}",
+  "[data-ai-section] img{max-width:100%}",
+  "}",
+  "@media (min-width: 769px) and (max-width: 1024px){",
+  "[data-ai-grid]{grid-template-columns:repeat(2, 1fr) !important}",
+  "}"
+].join("");
 var FEATURE_LINE_CSS = [
   "[data-ai-features]>div{position:relative;padding-left:40px;min-height:24px}",
   '[data-ai-features]>div::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;',
   `background-color:currentColor;-webkit-mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px;`,
   `mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px}`
 ].join("");
+function hexLuminance(color) {
+  const m = /^#([0-9a-f]{6})$/i.exec(color.trim());
+  if (!m) return null;
+  const [r2, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(m[1].slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r2 + 0.7152 * g + 0.0722 * b;
+}
+function hexContrast(a, b) {
+  const la = hexLuminance(a);
+  const lb = hexLuminance(b);
+  if (la === null || lb === null) return null;
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function accentBandContext(brand) {
+  const p = brand.palette;
+  const lightWins = (hexContrast(p.light, p.primary) ?? 99) >= (hexContrast(p.dark, p.primary) ?? 0);
+  if (lightWins) {
+    return {
+      brand: { ...brand, palette: { dark: p.light, primary: p.light, accent: p.light, light: p.primary } },
+      buttonLabel: p.primary
+    };
+  }
+  return {
+    brand: { ...brand, palette: { dark: p.dark, primary: p.dark, accent: p.dark, light: p.light } },
+    buttonLabel: p.light
+  };
+}
 function textAttrs(ctx, path) {
   return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
 }
-var AI_RESPONSIVE_CSS = [
-  "@media (max-width: 960px) {",
-  "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: repeat(2, 1fr) !important; }",
-  '  [data-ai-responsive] [data-ai-grid="1"] { grid-template-columns: 1fr !important; }',
-  "}",
-  "@media (max-width: 640px) {",
-  "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
-  "  [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
-  "  [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
-  "}"
-].join("\n");
 var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 function MediaBox({
   refValue,
@@ -246,17 +601,13 @@ function MediaBox({
   const url = refValue ? ctx.resolveMedia(refValue) : null;
   const isIcon = /^(lucide|simple):/.test(refValue);
   const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
-  const editAttrs = ctx.keyFor && editPath ? {
-    "data-ohw-key": ctx.keyFor(editPath),
-    "data-ohw-editable": isIcon ? "icon" : "image"
-  } : {};
+  const editAttrs = ctx.keyFor && editPath && !isIcon ? { "data-ohw-key": ctx.keyFor(editPath), "data-ohw-editable": "image" } : {};
   if (isIcon) {
     const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "span",
       {
         "data-ai-icon": refValue,
-        ...editAttrs,
         style: {
           display: "inline-flex",
           width: 48,
@@ -309,7 +660,7 @@ function ButtonEl({
 }) {
   const secondary = slots.variant === "secondary";
   const href = str(slots.href);
-  const linkAttrs = ctx.keyFor && path ? { "data-ohw-href-key": ctx.keyFor(`${path}.href`) } : {};
+  const linkAttrs = ctx.keyFor && path ? { "data-ohw-href-key": ctx.keyFor(`${path}.href`), "data-ohw-role": "button" } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "a",
     {
@@ -325,7 +676,7 @@ function ButtonEl({
         textDecoration: "none",
         cursor: "pointer",
         ...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body),
-        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color: AI_TREE_TOKENS.textPrimaryForeground }
+        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? AI_TREE_TOKENS.textPrimaryForeground }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
     }
@@ -831,7 +1182,24 @@ function CardBlock({ node, ctx, path }) {
         minWidth: 0
       },
       children: [
-        media && (horizontal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", padding: mediaInset }, children: media }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        media && (horizontal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: (
+              // An icon hugs its glyph — flex:1 gave a 48px icon half the card and pushed the
+              // text to the far side. Photos keep the half-and-half split. The inset has no
+              // inner padding (the photo split absorbed that), so the icon carries its own gap.
+              /^(lucide|simple):/.test(mediaRef) ? {
+                flexShrink: 0,
+                display: "flex",
+                alignItems: "center",
+                padding: mediaInset,
+                [mediaPosition === "right" ? "marginLeft" : "marginRight"]: 20
+              } : { flex: 1, minWidth: 0, display: "flex", alignItems: "center", padding: mediaInset }
+            ),
+            children: media
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
             style: /^(lucide|simple):/.test(mediaRef) ? { padding: `${AI_TREE_TOKENS.paddingBlock}px ${AI_TREE_TOKENS.paddingBlock}px 0` } : hasBg ? void 0 : { borderRadius: AI_TREE_TOKENS.radiusCard, overflow: "hidden" },
@@ -922,13 +1290,44 @@ function AccordionBlock({ node, ctx, path }) {
     ) })
   ] }, i)) });
 }
+function useIsMobile() {
+  const [mobile, setMobile] = import_react.default.useState(
+    () => typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
+  );
+  import_react.default.useEffect(() => {
+    const mq = window.matchMedia("(max-width: 768px)");
+    const update = () => setMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  return mobile;
+}
 function Carousel({ items, itemsPerRow, ctx }) {
+  const isMobile = useIsMobile();
+  const perPage = isMobile ? 1 : itemsPerRow;
+  const pages = Math.max(1, Math.ceil(items.length / perPage));
   const [page, setPage] = import_react.default.useState(0);
-  const pages = Math.max(1, Math.ceil(items.length / itemsPerRow));
   const current = Math.min(page, pages - 1);
+  if (pages <= 1) {
+    const cols = Math.max(1, Math.min(items.length, itemsPerRow));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        "data-ai-grid": String(cols),
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          gap: AI_TREE_TOKENS.spacing8,
+          alignItems: "start"
+        },
+        children: items
+      }
+    );
+  }
   const pageGroups = Array.from(
     { length: pages },
-    (_, p) => items.slice(p * itemsPerRow, (p + 1) * itemsPerRow)
+    (_, p) => items.slice(p * perPage, (p + 1) * perPage)
   );
   const chrome = (enabled) => ({
     border: `1px solid ${ctx.brand.palette.dark}`,
@@ -953,55 +1352,69 @@ function Carousel({ items, itemsPerRow, ctx }) {
     cursor: "pointer",
     padding: 0
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ai-carousel": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing8, alignItems: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: AI_TREE_TOKENS.spacing6, width: "100%" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Previous",
-          onClick: () => setPage((p) => Math.max(0, p - 1)),
-          style: chrome(current > 0),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowLeft, { size: 24, strokeWidth: 1.5, "aria-hidden": true })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const viewport = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: isMobile ? "0 0 auto" : 1, minWidth: 0, width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        transform: `translateX(-${current * 100}%)`,
+        transition: "transform 0.4s ease"
+      },
+      children: pageGroups.map((group, p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
+          "data-ai-grid": String(perPage),
           style: {
-            display: "flex",
-            transform: `translateX(-${current * 100}%)`,
-            transition: "transform 0.4s ease"
+            flex: "0 0 100%",
+            display: "grid",
+            gridTemplateColumns: `repeat(${perPage}, 1fr)`,
+            gap: AI_TREE_TOKENS.spacing8,
+            alignItems: "start"
           },
-          children: pageGroups.map((group, p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              "data-ai-grid": String(itemsPerRow),
-              style: {
-                flex: "0 0 100%",
-                display: "grid",
-                gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)`,
-                gap: AI_TREE_TOKENS.spacing8,
-                alignItems: "start"
-              },
-              children: group
-            },
-            p
-          ))
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Next",
-          onClick: () => setPage((p) => Math.min(pages - 1, p + 1)),
-          style: chrome(current < pages - 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { size: 24, strokeWidth: 1.5, "aria-hidden": true })
-        }
-      )
+          children: group
+        },
+        p
+      ))
+    }
+  ) });
+  const prevBtn = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Previous",
+      onClick: () => setPage((p) => Math.max(0, p - 1)),
+      style: chrome(current > 0),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowLeft, { size: 24, strokeWidth: 1.5, "aria-hidden": true })
+    }
+  );
+  const nextBtn = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Next",
+      onClick: () => setPage((p) => Math.min(pages - 1, p + 1)),
+      style: chrome(current < pages - 1),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { size: 24, strokeWidth: 1.5, "aria-hidden": true })
+    }
+  );
+  const dots = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 9, justifyContent: "center" }, children: pageGroups.map((_, p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", "aria-label": `Page ${p + 1}`, onClick: () => setPage(p), style: dot(p === current) }, p)) });
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ai-carousel": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing6, alignItems: "center" }, children: [
+      viewport,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: AI_TREE_TOKENS.spacing6, justifyContent: "center" }, children: [
+        prevBtn,
+        nextBtn
+      ] }),
+      dots
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ai-carousel": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing8, alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: AI_TREE_TOKENS.spacing6, width: "100%" }, children: [
+      prevBtn,
+      viewport,
+      nextBtn
     ] }),
-    pages > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 9, justifyContent: "center" }, children: pageGroups.map((_, p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", "aria-label": `Page ${p + 1}`, onClick: () => setPage(p), style: dot(p === current) }, p)) })
+    dots
   ] });
 }
 function CollectionBlock({ node, ctx, path }) {
@@ -1080,7 +1493,7 @@ function CollectionBlock({ node, ctx, path }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      "data-ai-grid": String(itemsPerRow),
+      "data-ai-grid": "",
       style: {
         display: "grid",
         gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)`,
@@ -1095,6 +1508,49 @@ function renderNode(node, ctx, path) {
   switch (node.type) {
     case "text":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextBlock, { slots, ctx, path });
+    // Layout container: arranges child blocks, contributes no content of its own. `grid` is a
+    // nested 12-column grid the children span (a collage is 3–5 media on it, bottom-aligned so
+    // mixed aspects read as a composition); `split` is exactly two children at a ratio; `stack`
+    // is a column. Children render through this same dispatcher, so edit markers, media
+    // resolution, and copy paths all work unchanged inside a group.
+    case "group": {
+      const layout = str(slots.layout);
+      const gap = slots.spacing === "tight" ? AI_TREE_TOKENS.spacing3 : slots.spacing === "airy" ? AI_TREE_TOKENS.spacing8 : AI_TREE_TOKENS.spacing6;
+      const kids = (node.children ?? []).map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: layout === "grid" ? {
+            gridColumn: `span ${typeof child.span === "number" ? Math.min(12, Math.max(1, child.span)) : 12}`,
+            minWidth: 0
+          } : { minWidth: 0 },
+          children: renderNode(child, ctx, `${path}.c${i}`)
+        },
+        i
+      ));
+      if (layout === "grid") {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-ai-group": "grid",
+            style: { display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap, alignItems: "end" },
+            children: kids
+          }
+        );
+      }
+      if (layout === "split") {
+        const ratio = str(slots.ratio);
+        const cols = ratio === "3:5" ? "3fr 5fr" : ratio === "5:3" ? "5fr 3fr" : "1fr 1fr";
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-ai-group": "split",
+            style: { display: "grid", gridTemplateColumns: cols, gap, alignItems: "center" },
+            children: kids
+          }
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ai-group": "stack", style: { display: "flex", flexDirection: "column", gap }, children: kids });
+    }
     case "button":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonEl, { slots, ctx, path });
     case "button-row":
@@ -1175,33 +1631,102 @@ function renderNode(node, ctx, path) {
         }
       );
     }
-    case "form":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing4 }, children: (node.children ?? []).map((child, i) => {
-        if (child.type === "input") {
-          const cs = child.slots ?? {};
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                ...textAttrs(ctx, `${path}.c${i}.label`),
-                style: { ...typeStyle(AI_TREE_TOKENS.type.bodyMBold, ctx.brand.fonts.body), color: ctx.brand.palette.dark, marginBottom: 6 },
-                children: str(cs.label)
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
+    case "form": {
+      const formAttrs = ctx.keyFor ? {
+        "data-ohw-editable": "form",
+        "data-ohw-key": ctx.keyFor(`${path}.form`),
+        "data-ohw-success-text": "Thanks \u2014 we'll be in touch shortly."
+      } : {};
+      const fieldStyle = {
+        width: "100%",
+        boxSizing: "border-box",
+        border: `1px solid ${ctx.brand.palette.accent}`,
+        borderRadius: AI_TREE_TOKENS.radiusButton,
+        padding: "12px 14px",
+        background: "#fff",
+        color: ctx.brand.palette.dark,
+        outline: "none",
+        ...typeStyle(AI_TREE_TOKENS.type.bodyM, ctx.brand.fonts.body)
+      };
+      const labelStyle = {
+        ...typeStyle(AI_TREE_TOKENS.type.bodyMBold, ctx.brand.fonts.body),
+        color: ctx.brand.palette.dark
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "form",
+        {
+          ...formAttrs,
+          "data-ai-form": "",
+          style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+            columnGap: 64,
+            rowGap: AI_TREE_TOKENS.spacing4
+          },
+          children: (node.children ?? []).map((child, i) => {
+            if (child.type === "input") {
+              const cs2 = child.slots ?? {};
+              const kind = str(cs2.kind);
+              const label = str(cs2.label);
+              const placeholder = str(cs2.placeholder);
+              const name = label.toLowerCase().replace(/[^a-z0-9]+/gu, "-").replace(/^-+|-+$/gu, "") || `field-${i}`;
+              const isTextarea = kind === "textarea";
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 8,
+                    ...isTextarea ? { gridColumn: "1 / -1", maxWidth: 780 } : {}
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...textAttrs(ctx, `${path}.c${i}.label`), style: labelStyle, children: label }),
+                    isTextarea ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "textarea",
+                      {
+                        name,
+                        placeholder,
+                        style: { ...fieldStyle, height: 140, resize: "vertical" }
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "input",
+                      {
+                        name,
+                        type: kind === "email" ? "email" : "text",
+                        placeholder,
+                        style: { ...fieldStyle, height: 48 }
+                      }
+                    )
+                  ]
+                },
+                i
+              );
+            }
+            const cs = child.slots ?? {};
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
               {
+                type: "submit",
                 style: {
-                  border: `1px solid ${ctx.brand.palette.accent}`,
+                  gridColumn: "1 / -1",
+                  justifySelf: "start",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: `${AI_TREE_TOKENS.spacing3}px ${AI_TREE_TOKENS.spacing6}px`,
                   borderRadius: AI_TREE_TOKENS.radiusButton,
-                  height: cs.kind === "textarea" ? 96 : 42
-                }
-              }
-            )
-          ] }, i);
+                  background: ctx.brand.palette.primary,
+                  color: AI_TREE_TOKENS.textPrimaryForeground,
+                  ...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body)
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
+              },
+              i
+            );
+          })
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonEl, { slots: child.slots ?? {}, ctx, path: `${path}.c${i}` }) }, i);
-      }) });
+      );
+    }
     case "schedule-widget":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
@@ -1227,11 +1752,14 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
     return null;
   }
   const resolvedBrand = brand ?? AI_DEFAULT_BRAND;
+  const band = (tree.settings ?? {}).sectionBackground === "accent" ? accentBandContext(resolvedBrand) : null;
+  const blockBrand = band?.brand ?? resolvedBrand;
   const ctx = {
-    brand: resolvedBrand,
+    brand: blockBrand,
     resolveMedia: resolveMedia ?? (() => null),
-    cardSurface: resolvedBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${resolvedBrand.palette.light} 90%, ${resolvedBrand.palette.dark})`,
-    keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null
+    cardSurface: blockBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${blockBrand.palette.light} 90%, ${blockBrand.palette.dark})`,
+    keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null,
+    ...band ? { buttonLabel: band.buttonLabel } : {}
   };
   const settings = tree.settings ?? {};
   const pad = AI_TREE_TOKENS.sectionPadding[settings.spacing ?? "balanced"];
@@ -1239,27 +1767,41 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
   const overlayAlpha = { low: 0.25, medium: 0.45, high: 0.65 }[settings.overlayIntensity ?? "medium"];
   const backgroundUrl = isOverlay && settings.backgroundMedia ? ctx.resolveMedia(settings.backgroundMedia) : null;
   const bgAttrs = ctx.keyFor && isOverlay && settings.backgroundMedia ? { "data-ohw-key": ctx.keyFor("settings.backgroundMedia"), "data-ohw-editable": "bg-image" } : {};
+  const toneBackground = (() => {
+    const { dark, primary, light } = resolvedBrand.palette;
+    switch (settings.sectionBackground) {
+      case "surface":
+        return `color-mix(in srgb, ${light} 94%, ${dark})`;
+      case "accent":
+        return primary;
+      case "accent-soft":
+        return `color-mix(in srgb, ${primary} 12%, ${light})`;
+      default:
+        return void 0;
+    }
+  })();
+  const distributed = !isOverlay && settings.textDistribution;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "section",
     {
       "data-ai-section": tree.tag ?? "",
       ...bgAttrs,
-      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${pad}px 0`,
-        background: isOverlay && !backgroundUrl ? "#DBEAFE" : void 0,
+        background: toneBackground ?? (isOverlay && !backgroundUrl ? "#DBEAFE" : void 0),
         backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : void 0,
         backgroundSize: "cover",
-        backgroundPosition: "center"
+        backgroundPosition: "center",
+        color: settings.sectionBackground === "accent" ? blockBrand.palette.dark : void 0
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_RESPONSIVE_CSS }),
         isOverlay && backgroundUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_MOBILE_CSS }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            "data-ai-section-inner": "",
+            "data-ai-container": "",
             style: {
               position: "relative",
               maxWidth: AI_TREE_TOKENS.sectionMaxWidth,
@@ -1270,15 +1812,29 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
             children: tree.rows.map((row, r2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
-                "data-ai-columns": "",
+                "data-ai-row": "",
                 style: {
                   display: "grid",
                   gridTemplateColumns: "repeat(12, 1fr)",
                   gap: AI_TREE_TOKENS.spacing6,
-                  alignItems: settings.verticalPosition === "top" ? "start" : "center",
+                  alignItems: distributed === "space-between" ? "stretch" : (distributed ?? settings.verticalPosition) === "top" ? "start" : "center",
                   marginTop: r2 > 0 ? AI_TREE_TOKENS.spacing8 : 0
                 },
-                children: (row.blocks ?? []).map((block, b) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridColumn: `span ${Math.min(12, Math.max(1, block.span))}`, minWidth: 0 }, children: renderNode(block, ctx, `r${r2}.b${b}`) }, b))
+                children: (row.blocks ?? []).map((block, b) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    "data-ai-cell": "",
+                    style: {
+                      gridColumn: `span ${Math.min(12, Math.max(1, block.span))}`,
+                      minWidth: 0,
+                      // space-between: each column becomes a flex column whose content spreads over
+                      // the full row height instead of clumping at the top.
+                      ...distributed === "space-between" ? { display: "flex", flexDirection: "column", justifyContent: "space-between" } : {}
+                    },
+                    children: renderNode(block, ctx, `r${r2}.b${b}`)
+                  },
+                  b
+                ))
               },
               r2
             ))
@@ -1294,17 +1850,36 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var CONTAINER_ATTR = "data-ohw-ai-generated";
 var REPLACED_ATTR = "data-ohw-ai-replaced-by";
 var REMOVED_ATTR = "data-ohw-ai-removed";
+var TEMPLATE_HIDDEN_ATTR = "data-ohw-ai-template-hidden";
+var CHROME_SECTION_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
+function readRootVar(name) {
+  if (typeof document === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function deriveBrandOverride() {
+  const dark = readRootVar("--ohw-brand-dark");
+  const primary = readRootVar("--ohw-brand-primary");
+  const light = readRootVar("--ohw-brand-light");
+  if (!dark || !primary || !light) return null;
+  const accent = readRootVar("--ohw-brand-accent");
+  const heading = readRootVar("--font-heading") || readRootVar("--font-display");
+  const body = readRootVar("--font-body");
+  return {
+    palette: { dark, primary, accent: accent || dark, light },
+    fonts: {
+      heading: heading || AI_DEFAULT_BRAND.fonts.heading,
+      body: body || AI_DEFAULT_BRAND.fonts.body
+    }
+  };
+}
 function deriveTemplateBrand() {
-  if (typeof document === "undefined") return null;
-  const cs = getComputedStyle(document.documentElement);
-  const read = (name) => cs.getPropertyValue(name).trim();
-  const dark = read("--color-dark");
-  const primary = read("--color-primary");
-  const light = read("--color-light");
+  const dark = readRootVar("--color-dark");
+  const primary = readRootVar("--color-primary");
+  const light = readRootVar("--color-light");
   if (!dark || !primary || !light) return null;
-  const accent = read("--color-accent");
-  const heading = read("--font-heading") || read("--font-display");
-  const body = read("--font-body");
+  const accent = readRootVar("--color-accent");
+  const heading = readRootVar("--font-heading") || readRootVar("--font-display");
+  const body = readRootVar("--font-body");
   return {
     palette: { dark, primary, accent: accent || dark, light },
     fonts: {
@@ -1376,6 +1951,24 @@ function syncRemovedSections(state) {
     }
   }
 }
+function syncTemplateHidden(state, pageHasSections) {
+  const hide = state.hideTemplate === true && pageHasSections;
+  for (const el of Array.from(document.querySelectorAll(`[${TEMPLATE_HIDDEN_ATTR}]`))) {
+    if (!hide) {
+      el.style.removeProperty("display");
+      el.removeAttribute(TEMPLATE_HIDDEN_ATTR);
+    }
+  }
+  if (!hide) return;
+  for (const el of Array.from(document.querySelectorAll("[data-ohw-section]"))) {
+    if (el.hasAttribute(CONTAINER_ATTR)) continue;
+    if (CHROME_SECTION_IDS.has(el.getAttribute("data-ohw-section") ?? "")) continue;
+    if (el.parentElement?.closest("[data-ohw-section]")) continue;
+    if (el.hasAttribute(REPLACED_ATTR) || el.hasAttribute(REMOVED_ATTR)) continue;
+    el.style.display = "none";
+    el.setAttribute(TEMPLATE_HIDDEN_ATTR, "");
+  }
+}
 function syncReplacedOriginals(state) {
   for (const el of document.querySelectorAll(`[${REPLACED_ATTR}]`)) {
     const byId = el.getAttribute(REPLACED_ATTR) ?? "";
@@ -1394,10 +1987,63 @@ function syncReplacedOriginals(state) {
     }
   }
 }
+var sectionOrderIndex = /* @__PURE__ */ new Map();
+function setAiSectionOrder(raw, currentPath) {
+  const next = /* @__PURE__ */ new Map();
+  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);
+      }
+    } catch {
+    }
+  }
+  sectionOrderIndex = next;
+}
+function applyExplicitOrder(entries) {
+  if (sectionOrderIndex.size === 0) return entries;
+  return entries.map((entry, index) => ({ entry, index, order: sectionOrderIndex.get(entry.id) })).sort((a, b) => {
+    if (a.order === void 0 && b.order === void 0) return a.index - b.index;
+    if (a.order === void 0) return 1;
+    if (b.order === void 0) return -1;
+    return a.order - b.order;
+  }).map((item) => item.entry);
+}
+function orderByChain(sections) {
+  const ids = new Set(sections.map((entry) => entry.id));
+  const after = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const entry of sections) {
+    const anchor = entry.replaces ?? entry.beforeSection ?? entry.afterSection ?? null;
+    if (anchor && ids.has(anchor)) {
+      const bucket = after.get(anchor);
+      if (bucket) bucket.push(entry);
+      else after.set(anchor, [entry]);
+    } else {
+      roots.push(entry);
+    }
+  }
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (entry) => {
+    if (seen.has(entry.id)) return;
+    seen.add(entry.id);
+    out.push(entry);
+    for (const child of after.get(entry.id) ?? []) visit(child);
+  };
+  for (const root of roots) visit(root);
+  return out.length === sections.length ? out : sections;
+}
 function applyAiSectionsToDom(state, options) {
   if (typeof document === "undefined") return;
+  const brandOverride = deriveBrandOverride();
   const templateBrand = deriveTemplateBrand();
-  const activeIds = new Set(state.sections.map((entry) => entry.id));
+  const brandKey = brandOverride ? JSON.stringify(brandOverride) : "";
+  const pagePath = window.location.pathname;
+  const pageSections = state.sections.filter((entry) => (entry.path ?? "/") === pagePath);
+  const activeIds = new Set(pageSections.map((entry) => entry.id));
+  const ordered = state.hideTemplate === true ? applyExplicitOrder(orderByChain(pageSections)) : pageSections;
   for (const [id, section] of mounted) {
     if (!activeIds.has(id)) {
       section.root.unmount();
@@ -1405,8 +2051,8 @@ function applyAiSectionsToDom(state, options) {
       mounted.delete(id);
     }
   }
-  for (const entry of state.sections) {
-    const serialized = JSON.stringify(entry);
+  for (const entry of ordered) {
+    const serialized = JSON.stringify(entry) + brandKey;
     const existing = mounted.get(entry.id);
     if (existing && existing.serialized === serialized && existing.container.isConnected) {
       continue;
@@ -1431,7 +2077,7 @@ function applyAiSectionsToDom(state, options) {
           AiTreeRenderer,
           {
             tree: entry.tree,
-            brand: entry.brand ?? options?.brand ?? templateBrand ?? void 0,
+            brand: brandOverride ?? entry.brand ?? options?.brand ?? templateBrand ?? void 0,
             resolveMedia,
             editKeyPrefix: `ai.${entry.id}`
           }
@@ -1440,8 +2086,20 @@ function applyAiSectionsToDom(state, options) {
     });
     mounted.set(entry.id, { root, container, serialized });
   }
+  if (state.hideTemplate === true) {
+    let prev = null;
+    for (const entry of ordered) {
+      const el = mounted.get(entry.id)?.container;
+      if (!el) continue;
+      if (prev && !(prev.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING)) {
+        prev.insertAdjacentElement("afterend", el);
+      }
+      prev = el;
+    }
+  }
   syncReplacedOriginals(state);
   syncRemovedSections(state);
+  syncTemplateHidden(state, pageSections.length > 0);
 }
 
 // src/useLinkHrefGuardian.ts
@@ -7140,13 +7798,17 @@ function MediaOverlay({
   hover,
   isUploading,
   fadingOut = false,
+  selected = false,
+  hovered = false,
   onFadeOutComplete,
   onReplace,
+  onSelect,
   onVideoSettingsChange
 }) {
   const { rect } = hover;
   const skeletonRef = React8.useRef(null);
   const isVideo = hover.elementType === "video";
+  const showChrome = !selected || hovered;
   const autoplay = hover.videoAutoplay ?? true;
   const muted = hover.videoMuted ?? true;
   const probeRef = React8.useRef(null);
@@ -7193,7 +7855,7 @@ function MediaOverlay({
       }
     );
   }
-  const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  const settingsBar = isVideo && !hover.isDragOver && showChrome ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       "data-ohw-bridge": "",
@@ -7263,10 +7925,12 @@ function MediaOverlay({
           // in-document, pointer-events does it natively. The button below opts back in, so
           // Replace still works.
           pointerEvents: hover.hasTextOverlap ? "none" : "auto",
-          boxShadow: "inset 0 0 0 1.5px var(--color-primary)",
-          background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
+          // Selected: a firm component ring with no wash, so the image reads as chosen rather
+          // than hovered. Hover keeps the existing tinted preview.
+          boxShadow: selected ? "inset 0 0 0 2px var(--color-primary)" : "inset 0 0 0 1.5px var(--color-primary)",
+          background: selected ? "transparent" : "color-mix(in srgb, var(--color-primary) 20%, transparent)"
         },
-        onClick: () => onReplace(hover.key),
+        onClick: () => onSelect && !selected ? onSelect(hover.key) : onReplace(hover.key),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             Button,
@@ -7320,7 +7984,7 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
-                replaceMode === "full" ? isVideo ? "Replace video" : "Replace image" : null
+                replaceMode === "full" ? isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image" : null
               ]
             }
           )
@@ -7404,6 +8068,8 @@ function parseSectionsFromRoot(root) {
     const id = el.getAttribute("data-ohw-section") ?? "";
     if (!id || seen.has(id) || LINK_PICKER_EXCLUDED_IDS.has(id)) continue;
     if (el.parentElement?.closest("[data-ohw-section]")) continue;
+    if (el.hasAttribute("data-ohw-ai-template-hidden") || el.hasAttribute("data-ohw-ai-removed") || el.hasAttribute("data-ohw-ai-replaced-by"))
+      continue;
     seen.add(id);
     const label = el.getAttribute("data-ohw-section-label") ?? titleCaseSectionId(id);
     sections.push({ id, label });
@@ -7689,6 +8355,7 @@ function AiSectionOverlay({
 }) {
   const [selectedId, setSelectedId] = (0, import_react8.useState)(null);
   const [reviewId, setReviewId] = (0, import_react8.useState)(null);
+  const [reviewButtonsHidden, setReviewButtonsHidden] = (0, import_react8.useState)(false);
   const reviewIdRef = (0, import_react8.useRef)(null);
   reviewIdRef.current = reviewId;
   const selectedIdRef = (0, import_react8.useRef)(null);
@@ -7750,6 +8417,7 @@ function AiSectionOverlay({
         }
         const found = readRect(sectionId) != null;
         setReviewId(found ? sectionId : null);
+        setReviewButtonsHidden(e.data.hideButtons === true);
         postToParent2({ type: "ow:ai-review-started", sectionId, found });
         if (found) {
           document.querySelector(`[data-ohw-instance="${CSS.escape(sectionId)}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
@@ -7877,13 +8545,16 @@ function AiSectionOverlay({
           border: `2px solid ${PRIMARY2}`,
           borderRadius: edgeAwareRadius(reviewRect),
           zIndex: 2147483200,
-          // The veil itself: swallows clicks so the section stays locked until decided.
+          // The veil itself: swallows clicks so the section stays locked until decided. This
+          // stopPropagation only guards the bubble phase; the bridge's capture-phase click
+          // handlers additionally bail on `[data-ohw-ai-review]`, without which a click on
+          // Accept/Discard resolves to the media beneath and opens the file picker.
           background: "rgba(8, 133, 254, 0.04)",
           pointerEvents: "auto",
           cursor: "default"
         },
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        children: !reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "div",
           {
             style: {
@@ -10450,8 +11121,13 @@ function referenceBox(slot) {
   const neighbour = row ? Array.from(row.querySelectorAll('[data-ohw-editable="icon"]')).find(
     (el) => el !== slot && !el.hasAttribute("data-ohw-social-icon-placeholder")
   ) : null;
-  const source = (neighbour ?? slot).querySelector(GLYPH_SELECTOR);
-  const box = source?.getBoundingClientRect() ?? null;
+  if (neighbour) {
+    const box2 = neighbour.querySelector(GLYPH_SELECTOR)?.getBoundingClientRect();
+    if (box2?.width && box2.height) return box2;
+  }
+  const own = slot.getBoundingClientRect();
+  if (own.width && own.height) return own;
+  const box = slot.querySelector(GLYPH_SELECTOR)?.getBoundingClientRect() ?? null;
   return box?.width && box.height ? box : null;
 }
 function iconMarkupSizedFor(slot, markup) {
@@ -13320,6 +13996,7 @@ function useSectionDrag({
     }
     const orderJson = JSON.stringify(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);
     clearSectionDragVisuals();
@@ -15439,6 +16116,70 @@ function OhhwellsBridge() {
   const hoveredImageHasTextOverlapRef = (0, import_react17.useRef)(false);
   const dragOverElRef = (0, import_react17.useRef)(null);
   const [mediaHover, setMediaHover] = (0, import_react17.useState)(null);
+  const [selectedMedia, setSelectedMedia] = (0, import_react17.useState)(null);
+  const selectedMediaElRef = (0, import_react17.useRef)(null);
+  const clearMediaSelection = (0, import_react17.useCallback)(() => {
+    const prev = selectedMediaElRef.current;
+    selectedMediaElRef.current = null;
+    setSelectedMedia(null);
+    const sectionEl = prev?.closest("[data-ohw-section]") ?? null;
+    if (sectionEl) {
+      postToParentRef.current({
+        type: "ow:section-selected",
+        sectionId: sectionEl.dataset.ohwSection ?? null,
+        sectionLabel: sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? ""),
+        key: null
+      });
+    }
+  }, []);
+  const clearMediaSelectionRef = (0, import_react17.useRef)(clearMediaSelection);
+  clearMediaSelectionRef.current = clearMediaSelection;
+  const selectMediaElement = (0, import_react17.useCallback)((el) => {
+    const r2 = el.getBoundingClientRect();
+    const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
+    selectedMediaElRef.current = el;
+    setSelectedMedia({
+      key: el.dataset.ohwKey ?? "",
+      rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+      elementType: el.dataset.ohwEditable ?? "image",
+      hasTextOverlap: false,
+      isDragOver: false,
+      ...video ? { videoAutoplay: video.autoplay, videoMuted: video.muted } : {}
+    });
+    const sectionEl = el.closest("[data-ohw-section]");
+    aiSectionApiRef.current?.selectFromElement(el, { report: false });
+    postToParentRef.current({
+      type: "ow:section-selected",
+      sectionId: sectionEl?.dataset.ohwSection ?? null,
+      sectionLabel: sectionEl ? sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? "") : null,
+      key: el.dataset.ohwKey ?? null,
+      // Display name for the pill — the raw key prettifies into fragments ("Img"); the
+      // bridge knows what the node IS, so it names it.
+      keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
+    });
+  }, []);
+  const selectMediaElementRef = (0, import_react17.useRef)(selectMediaElement);
+  selectMediaElementRef.current = selectMediaElement;
+  (0, import_react17.useEffect)(() => {
+    if (!selectedMedia) return;
+    const update = () => {
+      const el = selectedMediaElRef.current;
+      if (!el || !el.isConnected) {
+        clearMediaSelection();
+        return;
+      }
+      const r2 = el.getBoundingClientRect();
+      setSelectedMedia(
+        (prev) => prev ? { ...prev, rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height } } : prev
+      );
+    };
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [selectedMedia !== null]);
   const [carouselHover, setCarouselHover] = (0, import_react17.useState)(null);
   const [uploadingRects, setUploadingRects] = (0, import_react17.useState)({});
   const hoveredGapRef = (0, import_react17.useRef)(null);
@@ -15722,6 +16463,8 @@ function OhhwellsBridge() {
   const addNavAfterAnchorRef = (0, import_react17.useRef)(null);
   const editContentRef = (0, import_react17.useRef)({});
   const aiSectionsRef = (0, import_react17.useRef)("");
+  const brandKitRef = (0, import_react17.useRef)("");
+  const stylesRef = (0, import_react17.useRef)("");
   const pendingDeleteUndoRef = (0, import_react17.useRef)(null);
   const [sitePages, setSitePages] = (0, import_react17.useState)([]);
   const [sectionsByPath, setSectionsByPath] = (0, import_react17.useState)({});
@@ -17042,13 +17785,29 @@ function OhhwellsBridge() {
     }
     const applyContent = (content) => {
       const imageLoads = [];
+      if (typeof content[BRAND_KIT_KEY] === "string") {
+        brandKitRef.current = content[BRAND_KIT_KEY];
+        applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
+      } else {
+        brandKitRef.current = "";
+        applyBrandToDom(null);
+      }
       if (typeof content[AI_SECTIONS_KEY] === "string") {
         aiSectionsRef.current = content[AI_SECTIONS_KEY];
+        setAiSectionOrder(content[SECTION_ORDER_KEY], window.location.pathname);
         applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
       }
+      if (typeof content[STYLE_STORE_KEY] === "string") {
+        stylesRef.current = content[STYLE_STORE_KEY];
+        applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
+      }
+      applyBrandChrome(content);
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") continue;
         if (key === AI_SECTIONS_KEY) continue;
+        if (key === BRAND_KIT_KEY) continue;
+        if (key === STYLE_STORE_KEY) continue;
+        if (BRAND_CHROME_KEYS.has(key)) continue;
         if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (LOGO_IMAGE_KEYS.includes(key)) continue;
         if (applyVideoSettingNode(key, val)) continue;
@@ -17236,8 +17995,25 @@ function OhhwellsBridge() {
       initSectionInstancesFromContent(content, window.location.pathname);
       observer?.disconnect();
       try {
+        applyBrandChrome(content);
+        if (typeof content[BRAND_KIT_KEY] === "string") {
+          applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
+        } else {
+          applyBrandToDom(null);
+        }
+        if (typeof content[AI_SECTIONS_KEY] === "string") {
+          setAiSectionOrder(content[SECTION_ORDER_KEY], window.location.pathname);
+          applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
+        }
+        if (typeof content[STYLE_STORE_KEY] === "string") {
+          applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
+        }
         for (const [key, val] of Object.entries(content)) {
           if (key === "__ohw_sections") continue;
+          if (key === AI_SECTIONS_KEY) continue;
+          if (key === BRAND_KIT_KEY) continue;
+          if (key === STYLE_STORE_KEY) continue;
+          if (BRAND_CHROME_KEYS.has(key)) continue;
           if (key === LOGO_PLACEHOLDER_KEY) continue;
           if (LOGO_IMAGE_KEYS.includes(key)) continue;
           if (applyVideoSettingNode(key, val)) continue;
@@ -17380,9 +18156,21 @@ function OhhwellsBridge() {
   }, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
   (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
+    let lastPosted = 0;
     const measure = () => {
       const h = document.body.scrollHeight;
-      if (h > 50) postToParent2({ type: "ow:height", height: h });
+      if (h > 50 && Math.abs(h - lastPosted) > 1) {
+        lastPosted = h;
+        postToParent2({ type: "ow:height", height: h });
+      }
+    };
+    let raf = null;
+    const schedule = () => {
+      if (raf != null) return;
+      raf = requestAnimationFrame(() => {
+        raf = null;
+        measure();
+      });
     };
     const t1 = setTimeout(measure, 50);
     const t2 = setTimeout(measure, 500);
@@ -17402,6 +18190,7 @@ function OhhwellsBridge() {
     return () => {
       clearTimeout(t1);
       clearTimeout(t2);
+      if (raf != null) cancelAnimationFrame(raf);
       clearResizeTimers();
       window.removeEventListener("resize", handleResize);
     };
@@ -17644,10 +18433,14 @@ function OhhwellsBridge() {
         return;
       }
       const target = e.target;
+      if (target.closest("[data-ohw-ai-review]")) return;
       if (target.closest("[data-ohw-toolbar]")) return;
       if (target.closest("[data-ohw-state-toggle]")) return;
       if (target.closest("[data-ohw-max-badge]")) return;
       if (isInsideLinkEditor(target)) return;
+      if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
+        clearMediaSelectionRef.current();
+      }
       if (isInsideFloatingPanel(target)) return;
       if (target.closest("[data-ohw-form-toolbar]")) return;
       if (target.closest(
@@ -17817,8 +18610,11 @@ function OhhwellsBridge() {
         if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
-          aiSectionApiRef.current?.selectFromElement(editable);
-          postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
+          if (selectedMediaElRef.current === editable) {
+            postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
+          } else {
+            selectMediaElementRef.current(editable);
+          }
           return;
         }
         const socialItem = getSocialItem(editable);
@@ -17959,6 +18755,7 @@ function OhhwellsBridge() {
     };
     const handleDblClick = (e) => {
       const target = e.target;
+      if (target.closest("[data-ohw-ai-review]")) return;
       if (target.closest("[data-ohw-toolbar]")) return;
       if (target.closest("[data-ohw-state-toggle]")) return;
       if (target.closest("[data-ohw-max-badge]")) return;
@@ -18759,7 +19556,9 @@ function OhhwellsBridge() {
         return;
       }
       const { y } = toProbeCoords(clientX, clientY, fromParentViewport);
-      const sections = Array.from(document.querySelectorAll("[data-ohw-section]")).sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
+      const sections = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
+        (el) => !el.hasAttribute("data-ohw-ai-template-hidden") && !el.hasAttribute("data-ohw-ai-removed") && !el.hasAttribute("data-ohw-ai-replaced-by") && el.getBoundingClientRect().height > 0
+      ).sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
       const ZONE = 20;
       for (let i = 0; i < sections.length; i++) {
         const a = sections[i];
@@ -19091,10 +19890,23 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:hydrate") return;
       const content = e.data.content;
       if (!content) return;
+      if (typeof content[BRAND_KIT_KEY] === "string") {
+        brandKitRef.current = content[BRAND_KIT_KEY];
+        applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
+      } else {
+        brandKitRef.current = "";
+        applyBrandToDom(null);
+      }
       if (typeof content[AI_SECTIONS_KEY] === "string") {
         aiSectionsRef.current = content[AI_SECTIONS_KEY];
+        setAiSectionOrder(content[SECTION_ORDER_KEY], window.location.pathname);
         applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
       }
+      if (typeof content[STYLE_STORE_KEY] === "string") {
+        stylesRef.current = content[STYLE_STORE_KEY];
+        applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
+      }
+      applyBrandChrome(content);
       let sectionsJson = null;
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") {
@@ -19102,6 +19914,9 @@ function OhhwellsBridge() {
           continue;
         }
         if (key === AI_SECTIONS_KEY) continue;
+        if (key === BRAND_KIT_KEY) continue;
+        if (key === STYLE_STORE_KEY) continue;
+        if (BRAND_CHROME_KEYS.has(key)) continue;
         if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (applyVideoSettingNode(key, val)) continue;
@@ -19117,6 +19932,8 @@ function OhhwellsBridge() {
             if (video && video.src !== val) applyVideoSrc(video, val);
           } else if (el.dataset.ohwEditable === "link") {
             applyLinkHref(el, val);
+          } else if (el.dataset.ohwEditable === "icon") {
+            applyIconMarkup(el, val);
           } else if (isIconMarkupValue(val)) {
           } else {
             el.innerHTML = val;
@@ -19201,12 +20018,21 @@ function OhhwellsBridge() {
         nodes: collectEditableNodes(editContentRef.current)
       });
     };
+    const clearInteractionChrome = () => {
+      deactivateRef.current();
+      deselectRef.current();
+      clearMediaSelectionRef.current();
+    };
     const handleAiApplyTree = (e) => {
       if (e.data?.type !== "ow:ai-apply-tree") return;
       const payload = e.data.payload;
       if (!payload || typeof payload.id !== "string" || !isRenderableTree(payload.tree)) return;
+      clearInteractionChrome();
       const previous = aiSectionsRef.current;
-      const nextState = applyTreeToState(parseAiSectionsState(previous), payload);
+      const nextState = applyTreeToState(parseAiSectionsState(previous), {
+        ...payload,
+        path: payload.path ?? window.location.pathname
+      });
       const nextValue = serializeAiSectionsState(nextState);
       aiSectionsRef.current = nextValue;
       applyAiSectionsToDom(nextState);
@@ -19227,6 +20053,7 @@ function OhhwellsBridge() {
       const exists = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
       if (!exists) return;
       if (isPageFrameSection(exists)) return;
+      clearInteractionChrome();
       const previous = aiSectionsRef.current;
       const nextState = deleteSectionFromState(parseAiSectionsState(previous), sectionId);
       const nextValue = serializeAiSectionsState(nextState);
@@ -19242,14 +20069,45 @@ function OhhwellsBridge() {
     const handleAiSetSections = (e) => {
       if (e.data?.type !== "ow:ai-set-sections") return;
       const value = typeof e.data.value === "string" ? e.data.value : "";
+      clearInteractionChrome();
       aiSectionsRef.current = value;
       applyAiSectionsToDom(parseAiSectionsState(value));
+      applyStylesToDom(parseStyleStore(stylesRef.current));
       const restoredHeight = document.body.scrollHeight;
       if (restoredHeight > 50) postToParentRef.current({ type: "ow:height", height: restoredHeight });
       postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: value }] });
       postAiSectionsChanged();
     };
     window.addEventListener("message", handleAiSetSections);
+    const handleAiSetBrand = (e) => {
+      if (e.data?.type !== "ow:ai-set-brand") return;
+      const value = typeof e.data.value === "string" ? e.data.value : "";
+      const previous = brandKitRef.current;
+      brandKitRef.current = value;
+      applyBrandToDom(parseBrandKit(value));
+      if (aiSectionsRef.current) applyAiSectionsToDom(parseAiSectionsState(aiSectionsRef.current));
+      applyStylesToDom(parseStyleStore(stylesRef.current));
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: BRAND_KIT_KEY, text: value }] });
+      postToParentRef.current({ type: "ow:ai-brand-applied", previous, value });
+    };
+    window.addEventListener("message", handleAiSetBrand);
+    const handleAiSetStyles = (e) => {
+      if (e.data?.type !== "ow:ai-set-styles") return;
+      const value = typeof e.data.value === "string" ? e.data.value : "";
+      const previous = stylesRef.current;
+      stylesRef.current = value;
+      applyStylesToDom(parseStyleStore(value));
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: STYLE_STORE_KEY, text: value }] });
+      postToParentRef.current({ type: "ow:ai-styles-applied", previous, value });
+    };
+    window.addEventListener("message", handleAiSetStyles);
+    const handleGetBrand = (e) => {
+      if (e.data?.type !== "ow:get-brand") return;
+      const template = deriveTemplateBrand();
+      const value = brandKitRef.current || (template ? JSON.stringify(template) : "");
+      postToParentRef.current({ type: "ow:brand-value", value });
+    };
+    window.addEventListener("message", handleGetBrand);
     const handleMoveSection = (e) => {
       if (e.data?.type !== "ow:move-section") return;
       const instanceId = typeof e.data.instanceId === "string" ? e.data.instanceId : "";
@@ -19259,6 +20117,7 @@ function OhhwellsBridge() {
       if (!entries) return;
       const orderJson = JSON.stringify(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 }] });
       window.dispatchEvent(new Event("resize"));
     };
@@ -19322,6 +20181,7 @@ function OhhwellsBridge() {
       }
       deselectRef.current();
       deactivateRef.current();
+      clearMediaSelectionRef.current();
     };
     window.addEventListener("message", handleDeactivate);
     const handleToastAction = (e) => {
@@ -19407,6 +20267,10 @@ function OhhwellsBridge() {
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && document.querySelector("[data-ohw-section-picker]")) return;
       if (e.key === "Escape" && document.querySelector("[data-ohw-more-menu]")) return;
+      if (e.key === "Escape" && selectedMediaElRef.current) {
+        clearMediaSelectionRef.current();
+        return;
+      }
       if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a" && activeElRef.current) {
         e.preventDefault();
         selectAllTextInEditable(activeElRef.current);
@@ -19566,6 +20430,12 @@ function OhhwellsBridge() {
       if (aiSectionsRef.current) {
         nodes.push({ key: AI_SECTIONS_KEY, type: "sections", text: aiSectionsRef.current });
       }
+      if (stylesRef.current) {
+        nodes.push({ key: STYLE_STORE_KEY, type: "styles", text: stylesRef.current });
+      }
+      if (brandKitRef.current) {
+        nodes.push({ key: BRAND_KIT_KEY, type: "brand", text: brandKitRef.current });
+      }
       document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
         const formKey = formKeyOf(form);
         if (!formKey) return;
@@ -19980,6 +20850,9 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleAiApplyTree);
       window.removeEventListener("message", handleAiDeleteSection);
       window.removeEventListener("message", handleAiSetSections);
+      window.removeEventListener("message", handleAiSetBrand);
+      window.removeEventListener("message", handleAiSetStyles);
+      window.removeEventListener("message", handleGetBrand);
       window.removeEventListener("message", handleMoveSection);
       window.removeEventListener("message", handlePanelDragging);
       window.removeEventListener("message", handleDeleteSection);
@@ -20190,7 +21063,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.77",
+        bridgeVersion: "0.1.78",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -20597,11 +21470,22 @@ function OhhwellsBridge() {
   const showEditLink = toolbarShowEditLink;
   const currentSections = sectionsByPath[pathname] ?? [];
   linkPopoverOpenRef.current = linkPopover !== null;
+  const handleMediaSelect = (0, import_react17.useCallback)((key) => {
+    const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
+      (m) => (m.dataset.ohwKey ?? "") === key
+    ) ?? null;
+    if (!el) return;
+    selectMediaElementRef.current(el);
+  }, []);
   const handleMediaReplace = (0, import_react17.useCallback)(
     (key) => {
-      postToParent2({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
+      postToParent2({
+        type: "ow:image-pick",
+        key,
+        elementType: mediaHover?.elementType ?? selectedMedia?.elementType ?? "image"
+      });
     },
-    [postToParent2, mediaHover?.elementType]
+    [postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
   );
   const handleEditCarousel = (0, import_react17.useCallback)(
     (key) => {
@@ -20673,12 +21557,25 @@ function OhhwellsBridge() {
           },
           `uploading-${key}`
         )),
-        mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           MediaOverlay,
           {
             hover: mediaHover,
             isUploading: false,
             onReplace: handleMediaReplace,
+            onSelect: handleMediaSelect,
+            onVideoSettingsChange: handleVideoSettingsChange
+          }
+        ),
+        selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          MediaOverlay,
+          {
+            hover: selectedMedia,
+            selected: true,
+            hovered: mediaHover?.key === selectedMedia.key,
+            isUploading: false,
+            onReplace: handleMediaReplace,
+            onSelect: handleMediaSelect,
             onVideoSettingsChange: handleVideoSettingsChange
           }
         ),