@ohhwells/bridge 0.1.78 → 0.1.79-next.241

package/dist/index.cjs

@@ -46,6 +46,7 @@ __export(index_exports, {
   DropdownMenuItem: () => DropdownMenuItem,
   DropdownMenuSeparator: () => DropdownMenuSeparator,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  EmptySection: () => EmptySection,
   ItemActionToolbar: () => ItemActionToolbar,
   ItemInteractionLayer: () => ItemInteractionLayer,
   LinkEditorPanel: () => LinkEditorPanel,
@@ -156,7 +157,12 @@ function parseAiSectionsState(raw) {
       media: entry.media && typeof entry.media === "object" ? entry.media : {}
     }));
     const removed = Array.isArray(parsed.removed) ? parsed.removed.filter((id) => typeof id === "string" && id.length > 0) : [];
-    return { v: 1, sections, ...removed.length ? { removed } : {} };
+    return {
+      v: 1,
+      sections,
+      ...removed.length ? { removed } : {},
+      ...parsed.hideTemplate === true ? { hideTemplate: true } : {}
+    };
   } catch {
     return EMPTY_AI_SECTIONS;
   }
@@ -169,6 +175,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 +198,320 @@ 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)) 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");
+  }
+}
+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 marker of Array.from(sections)) {
+      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(":", "-"));
+      }
+      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 +526,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,12 +536,58 @@ 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}",
+  "[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" } : {};
 }
@@ -231,7 +599,12 @@ var AI_RESPONSIVE_CSS = [
   "@media (max-width: 640px) {",
   "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
   "  [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
+  // Group containers flatten to a column on phones; span placements come along for free.
+  "  [data-ai-responsive] [data-ai-group] { display: flex !important; flex-direction: column !important; }",
+  "  [data-ai-responsive] [data-ai-group] > * { grid-column: auto !important; }",
   "  [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
+  "  [data-ai-responsive] { overflow-x: hidden; }",
+  "  [data-ai-responsive] img { max-width: 100%; }",
   "}"
 ].join("\n");
 var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
@@ -309,7 +682,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 +698,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 +1204,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 +1312,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 +1374,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 }) {
@@ -1095,6 +1530,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 +1653,111 @@ 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",
-              {
-                style: {
-                  border: `1px solid ${ctx.brand.palette.accent}`,
-                  borderRadius: AI_TREE_TOKENS.radiusButton,
-                  height: cs.kind === "textarea" ? 96 : 42
-                }
-              }
-            )
-          ] }, 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 "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 color-mix(in srgb, ${ctx.brand.palette.dark} 45%, #ffffff)`,
+        borderRadius: 0,
+        padding: 12,
+        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,
+        textAlign: "left",
+        width: "100%"
+      };
+      const centered = ctx.sectionAlignment === "center";
+      const submitAlign = centered ? "center" : "flex-start";
+      const children = node.children ?? [];
+      return (
+        // 32px between the field group and the submit. In a stacked (centered) section the form is
+        // capped at 780px and centered — the section's 12-col grid would otherwise leave it hugging
+        // the left edge; a split section lets it fill its own column.
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "form",
+          {
+            ...formAttrs,
+            "data-ai-form": "",
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 32,
+              width: "100%",
+              ...centered ? { maxWidth: 780, marginLeft: "auto", marginRight: "auto" } : {}
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 24, width: "100%", alignItems: "flex-start" }, children: children.map((child, i) => {
+                if (child.type !== "input") return null;
+                const cs = child.slots ?? {};
+                const kind = str(cs.kind);
+                const label = str(cs.label);
+                const placeholder = str(cs.placeholder);
+                const required = cs.required === true;
+                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, width: "100%" }, 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,
+                      required,
+                      style: { ...fieldStyle, height: 180, resize: "vertical" }
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "input",
+                    {
+                      name,
+                      type: kind === "email" ? "email" : "text",
+                      placeholder,
+                      required,
+                      style: { ...fieldStyle, height: 48 }
+                    }
+                  )
+                ] }, i);
+              }) }),
+              children.map((child, i) => {
+                if (child.type === "input") return null;
+                const cs = child.slots ?? {};
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "submit",
+                    style: {
+                      alignSelf: submitAlign,
+                      border: "none",
+                      cursor: "pointer",
+                      padding: "12px 24px",
+                      // Corner radius follows the host template's own buttons (measured from a template
+                      // CTA); 8px only when the page has no template button to match.
+                      borderRadius: ctx.buttonRadius ?? 8,
+                      // Brand-styled: primary fill, brand-derived label colour (not a fixed token) so it
+                      // reads correctly on custom palettes.
+                      background: ctx.brand.palette.primary,
+                      color: ctx.buttonLabel ?? ctx.brand.palette.light,
+                      ...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body)
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
+                  },
+                  i
+                );
+              })
+            ]
+          }
+        )
+      );
+    }
     case "schedule-widget":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
@@ -1222,16 +1778,27 @@ function renderNode(node, ctx, path) {
       return null;
   }
 }
-function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
+function AiTreeRenderer({
+  tree,
+  brand,
+  buttonRadius,
+  resolveMedia,
+  editKeyPrefix
+}) {
   if (!isRenderableTree(tree)) {
     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,
+    sectionAlignment: (tree.settings ?? {}).alignment === "center" ? "center" : "left",
+    buttonRadius,
+    ...band ? { buttonLabel: band.buttonLabel } : {}
   };
   const settings = tree.settings ?? {};
   const pad = AI_TREE_TOKENS.sectionPadding[settings.spacing ?? "balanced"];
@@ -1239,6 +1806,20 @@ 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",
     {
@@ -1248,13 +1829,15 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
       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 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_MOBILE_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)(
           "div",
@@ -1275,10 +1858,24 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
                   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 +1891,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: {
@@ -1313,6 +1929,13 @@ function deriveTemplateBrand() {
     }
   };
 }
+function deriveTemplateButtonRadius() {
+  if (typeof document === "undefined") return null;
+  const btn = document.querySelector('[data-ohw-role="button"]');
+  if (!btn) return null;
+  const radius = getComputedStyle(btn).borderTopLeftRadius;
+  return radius || null;
+}
 var mounted = /* @__PURE__ */ new Map();
 function findTemplateSection(id) {
   for (const el of document.querySelectorAll(`[data-ohw-section="${CSS.escape(id)}"]`)) {
@@ -1376,6 +1999,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 +2035,64 @@ 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 templateButtonRadius = deriveTemplateButtonRadius();
+  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 +2100,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 +2126,8 @@ 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,
+            buttonRadius: templateButtonRadius,
             resolveMedia,
             editKeyPrefix: `ai.${entry.id}`
           }
@@ -1440,8 +2136,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
@@ -1568,6 +2276,7 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_radix_ui.Dialog.Overlay,
       {
+        "data-ohw-scheduling-modal": "",
         className: "fixed inset-0 z-50",
         style: { background: "rgba(0,0,0,0.45)" }
       }
@@ -1575,6 +2284,7 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_radix_ui.Dialog.Content,
       {
+        "data-ohw-scheduling-modal": "",
         className: "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-xl outline-none font-body box-border overflow-hidden",
         style: { maxWidth: 400 },
         children: [
@@ -2048,7 +2758,7 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
   const autoId = (0, import_react5.useId)();
   const insertAfter = insertAfterProp ?? autoId;
   const [schedule, setSchedule] = (0, import_react5.useState)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(true);
+  const [loading, setLoading] = (0, import_react5.useState)(initialScheduleId !== null);
   const [inEditor, setInEditor] = (0, import_react5.useState)(false);
   const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
   const [modalState, setModalState] = (0, import_react5.useState)(null);
@@ -2222,8 +2932,10 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
       "*"
     );
   };
-  if (!inEditor && !loading && !schedule) return null;
   const sectionId = `scheduling-${insertAfter}`;
+  if (!inEditor && !loading && !schedule) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("section", { "data-ohw-section": sectionId, "data-ohw-scheduling-anchor": insertAfter, style: { display: "none" } });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "section",
     {
@@ -7140,13 +7852,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);
@@ -7160,6 +7876,7 @@ function MediaOverlay({
       (prev) => prev && prev.fullWidth === width && prev.height === height ? prev : { fullWidth: width, height }
     );
   }, [isVideo]);
+  const replaceLabel = isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image";
   const replaceMode = buttonSize ? replaceButtonMode({ width: rect.width, height: rect.height }, buttonSize) : "none";
   const box = {
     position: "fixed",
@@ -7193,7 +7910,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 +7980,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,
@@ -7287,17 +8006,17 @@ 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 }),
-                isVideo ? "Replace video" : "Replace image"
+                replaceLabel
               ]
             }
           ),
-          replaceMode === "none" ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          showChrome && replaceMode !== "none" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             Button,
             {
               "data-ohw-media-overlay": "",
               variant: "outline",
               size: "sm",
-              "aria-label": isVideo ? "Replace video" : "Replace image",
+              "aria-label": replaceLabel,
               className: "gap-1.5 cursor-pointer hover:bg-background",
               style: {
                 ...OVERLAY_BUTTON_STYLE,
@@ -7320,7 +8039,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" ? replaceLabel : null
               ]
             }
           )
@@ -7404,6 +8123,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 +8410,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 +8472,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 +8600,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 +11176,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) {
@@ -12252,6 +12983,7 @@ function readLogoSizeState(content, placement) {
 function getLogoElement(el) {
   const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
   if (marked) return marked;
+  if (el.closest('[data-ohw-editable="icon"]')) return null;
   const root = el.closest("nav, [data-ohw-nav-root], footer");
   if (!root) return null;
   const anchor = el.closest("a");
@@ -13320,6 +14052,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();
@@ -14179,21 +14912,10 @@ function parseSchedulingInsertAfter(insertAfter) {
     insertBefore: insertAfter.slice(idx + INSERT_BEFORE_MARKER.length)
   };
 }
-function resolveSchedulingInsert(insertAfter, explicitInsertBefore) {
-  const parsed = parseSchedulingInsertAfter(insertAfter);
-  const insertBefore = explicitInsertBefore ?? parsed.insertBefore;
-  const effectiveInsertAfter = insertBefore && parsed.insertBefore === null ? `${insertAfter}${INSERT_BEFORE_MARKER}${insertBefore}` : insertAfter;
-  return { effectiveInsertAfter, insertBefore };
-}
-function getSchedulingMountPoint(insertAfter) {
-  const { anchor } = parseSchedulingInsertAfter(insertAfter);
-  let anchorEl = document.querySelector(`[data-ohw-section="${anchor}"]`);
-  if (!anchorEl && anchor === "scheduling") {
-    const widgets = Array.from(document.querySelectorAll('[data-ohw-section^="scheduling-"]'));
-    anchorEl = widgets.at(-1) ?? null;
-  }
-  if (!anchorEl) return null;
-  return anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
+function resolveEntryAnchor(entry) {
+  if (entry.anchorId !== void 0) return { anchorId: entry.anchorId, beforeId: entry.beforeId ?? null };
+  const parsed = parseSchedulingInsertAfter(entry.insertAfter);
+  return { anchorId: parsed.anchor, beforeId: parsed.insertBefore };
 }
 function schedulingMountDepth(insertAfter) {
   if (!insertAfter.includes(INSERT_BEFORE_MARKER)) return 0;
@@ -14210,8 +14932,7 @@ function getPageSchedulingEntries(raw) {
   }
 }
 function isSchedulingWidgetMissing(entry) {
-  const { effectiveInsertAfter } = resolveSchedulingInsert(entry.insertAfter);
-  return !document.querySelector(`[data-ohw-section="${schedulingSectionId(effectiveInsertAfter)}"]`);
+  return !document.querySelector(`[data-ohw-section="${schedulingSectionId(entry.insertAfter)}"]`);
 }
 function hasMissingSchedulingWidgets(entries) {
   return entries.some(isSchedulingWidgetMissing);
@@ -14241,16 +14962,17 @@ function initSectionsFromContent(content, removeExisting = false) {
   } catch {
   }
 }
-function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId, explicitInsertBefore) {
-  const { effectiveInsertAfter, insertBefore } = resolveSchedulingInsert(insertAfter, explicitInsertBefore);
-  const sectionId = schedulingSectionId(effectiveInsertAfter);
+function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, beforeId, existingWidgetId) {
+  const widgetId = existingWidgetId ?? (beforeId ? `${anchorId}${INSERT_BEFORE_MARKER}${beforeId}` : anchorId);
+  const sectionId = schedulingSectionId(widgetId);
   if (document.querySelector(`[data-ohw-section="${sectionId}"]`)) return false;
-  const mountPoint = getSchedulingMountPoint(effectiveInsertAfter);
-  if (!mountPoint) return false;
+  const anchorEl = document.querySelector(`[data-ohw-section="${anchorId}"]`);
+  if (!anchorEl) return false;
+  const mountPoint = anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
   const container = document.createElement("div");
   container.dataset.ohwSectionContainer = "scheduling";
-  if (insertBefore) {
-    const beforeAnchor = document.querySelector(`[data-ohw-section="${insertBefore}"]`);
+  if (beforeId) {
+    const beforeAnchor = document.querySelector(`[data-ohw-section="${beforeId}"]`);
     const beforePoint = beforeAnchor?.closest('[data-ohw-section-container="scheduling"]') ?? beforeAnchor;
     if (!beforePoint) return false;
     beforePoint.insertAdjacentElement("beforebegin", container);
@@ -14261,19 +14983,25 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
     }
     tail.insertAdjacentElement("afterend", container);
   }
-  const root = (0, import_client2.createRoot)(container);
-  (0, import_react_dom3.flushSync)(() => {
-    root.render(
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        SchedulingWidget,
-        {
-          notifyOnConnect,
-          initialScheduleId: scheduleId,
-          insertAfter: effectiveInsertAfter
-        }
-      )
-    );
-  });
+  try {
+    const root = (0, import_client2.createRoot)(container);
+    (0, import_react_dom3.flushSync)(() => {
+      root.render(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          SchedulingWidget,
+          {
+            notifyOnConnect,
+            initialScheduleId: scheduleId,
+            insertAfter: widgetId
+          }
+        )
+      );
+    });
+  } catch (err) {
+    console.error("[ow:scheduling] render threw", err);
+    container.remove();
+    return false;
+  }
   const tracker = getSectionsTracker();
   let sections = [];
   try {
@@ -14281,10 +15009,12 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
   } catch {
   }
   const inEditor = typeof window !== "undefined" && window.self !== window.top;
-  if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === effectiveInsertAfter)) {
+  if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === widgetId)) {
     sections.push({
       type: "scheduling",
-      insertAfter: effectiveInsertAfter,
+      insertAfter: widgetId,
+      anchorId,
+      beforeId: beforeId ?? null,
       pagePath: window.location.pathname,
       ...scheduleId ? { scheduleId } : {}
     });
@@ -14298,7 +15028,8 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
     for (let i = pending.length - 1; i >= 0; i--) {
       const entry = pending[i];
       const shouldNotify = typeof notifyOnConnect === "function" ? notifyOnConnect(entry) : notifyOnConnect;
-      if (mountSchedulingWidget(entry.insertAfter, shouldNotify, entry.scheduleId)) {
+      const { anchorId, beforeId } = resolveEntryAnchor(entry);
+      if (mountSchedulingWidget(anchorId, shouldNotify, entry.scheduleId ?? null, beforeId, entry.insertAfter)) {
         pending.splice(i, 1);
       }
     }
@@ -14456,6 +15187,11 @@ function applyLinkByKey(key, val) {
     hrefAnchors.forEach((el) => applyLinkHref(el, val));
   }
 }
+function isInsideLinkEditor(target) {
+  return Boolean(
+    target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest("[data-ohw-footer-container-chrome]") || target.closest("[data-ohw-footer-add-button]") || target.closest("[data-ohw-more-menu]") || target.closest('[data-slot="dropdown-menu-content"]') || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
+  );
+}
 function isInsideFloatingPanel(target) {
   return Boolean(target.closest("[data-ohw-floating-panel]"));
 }
@@ -14463,11 +15199,6 @@ function isPointOverFloatingPanel(clientX, clientY) {
   const el = document.elementFromPoint(clientX, clientY);
   return Boolean(el instanceof Element && el.closest("[data-ohw-floating-panel]"));
 }
-function isInsideLinkEditor(target) {
-  return Boolean(
-    target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest("[data-ohw-footer-container-chrome]") || target.closest("[data-ohw-footer-add-button]") || target.closest("[data-ohw-more-menu]") || target.closest('[data-slot="dropdown-menu-content"]') || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
-  );
-}
 function getHrefKeyFromElement(el) {
   if (!el) return null;
   const anchor = el.closest("[data-ohw-href-key]");
@@ -14726,7 +15457,7 @@ function getNavigationSelectionParent(el) {
   if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
     return getFooterLinksContainer();
   }
-  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
+  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isFooterLinksContainer(el) || isInferredFooterGroup2(el)) {
     return getNavigationRoot(el);
   }
   return null;
@@ -14941,7 +15672,6 @@ var ICONS = {
   insertUnorderedList: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
   insertOrderedList: '<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>'
 };
-var HEIGHT_SETTLE_DELAYS = [150, 400, 800];
 var SELECTION_CHROME_GAP2 = 4;
 var TOOLBAR_STROKE_GAP2 = 4;
 var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
@@ -15321,6 +16051,8 @@ function StateToggle({
   );
 }
 var contentCache = /* @__PURE__ */ new Map();
+var fetchedContentPaths = /* @__PURE__ */ new Set();
+var brandingCache = /* @__PURE__ */ new Map();
 var OHW_LOADER_STYLE = {
   position: "fixed",
   inset: 0,
@@ -15358,6 +16090,89 @@ function OhwLoaderSpinner() {
     )
   ] });
 }
+function OhwBrandMark() {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 48 48",
+      fill: "none",
+      "aria-hidden": true,
+      style: { display: "block", flexShrink: 0 },
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "mask",
+          {
+            id: "ohw-badge-mark",
+            style: { maskType: "luminance" },
+            maskUnits: "userSpaceOnUse",
+            x: "0",
+            y: "0",
+            width: "48",
+            height: "48",
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M23.8741 48C37.0594 48 47.7481 37.2548 47.7481 24C47.7481 10.7452 37.0594 0 23.8741 0C10.6888 0 0 10.7452 0 24C0 37.2548 10.6888 48 23.8741 48Z", fill: "white" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M23.8731 48.0497C37.0584 48.0497 47.7472 37.3046 47.7472 24.0497C47.7472 10.7949 37.0584 0.0497208 23.8731 0.0497208C10.6878 0.0497208 -0.000976562 10.7949 -0.000976562 24.0497C-0.000976562 37.3046 10.6878 48.0497 23.8731 48.0497Z", fill: "#0078E5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M17.1307 14.7172C13.1687 14.7172 9.38102 18.1154 8.65114 22.34C8.38885 23.8488 8.5598 25.2581 9.06929 26.4451C6.20005 29.1677 1.77216 27.8721 -1.40212 26.1536C-2.73618 25.4317 -3.92695 27.4745 -2.59037 28.1981C1.33389 30.3226 6.86037 31.6621 10.4402 28.4188C11.4718 29.3859 12.867 29.9621 14.4894 29.9621C18.4161 29.9621 22.2038 26.5318 22.9337 22.34C23.6636 18.1162 21.0566 14.7172 17.1298 14.7172H17.1307ZM19.9798 22.34C19.5281 25.0399 17.2689 27.231 14.9754 27.231C12.6466 27.231 11.1877 25.0399 11.6394 22.34C12.1262 19.6401 14.3151 17.4482 16.6438 17.4482C18.9374 17.4482 20.4667 19.6401 19.9798 22.34Z", fill: "white" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M40.0017 27.0262C39.1797 27.081 38.2721 26.995 37.4668 26.7415C37.3344 26.6993 37.28 26.5401 37.3529 26.4205C37.5959 26.0212 37.8255 25.6152 38.009 25.1889C38.1071 24.9918 38.2018 24.793 38.2897 24.5908C38.3274 24.5041 38.4163 24.451 38.5101 24.4619C38.63 24.4754 38.7054 24.4821 38.8881 24.4821L39.1529 24.4796L39.8283 24.4543C45.9229 24.0492 50.4765 20.4319 54.8466 16.9014C56.0172 15.9554 57.6932 17.6208 56.5116 18.5752C51.7687 22.4065 47.1966 26.5081 40.9319 26.9689", fill: "white" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M37.9687 24.27C38.4472 23.1319 38.7656 21.9045 38.9609 20.6991C39.5927 16.76 38.5058 14.2193 36.1553 14.2193C34.1835 14.2193 33.1469 17.2427 32.9199 18.8694C32.743 19.9872 32.5914 22.1219 33.6028 23.9524C33.7553 24.259 34.15 24.7712 34.471 25.1259C34.5447 25.2067 34.6746 25.2 34.7349 25.1082C34.9528 24.7788 35.1615 24.4039 35.3584 24.0257C35.5444 23.6677 35.5888 23.6138 35.8587 23.0207C35.8838 22.966 35.8813 22.9002 35.8478 22.8505C35.5888 22.4597 35.2168 21.9787 35.1204 21.4614C34.9184 20.4455 34.9436 19.2257 35.2218 18.1078C35.4413 17.3118 35.7195 16.7844 35.9039 16.5106C35.9466 16.4466 36.0279 16.4129 36.0975 16.4449C36.369 16.5671 36.5827 16.8838 36.7385 17.396C37.0167 18.2089 37.0167 19.3782 36.814 20.6999C36.6991 21.5271 36.4771 22.3729 36.1746 23.1673C36.1293 23.308 36.0757 23.4461 36.0187 23.5826C36.0187 23.5868 36.0187 23.591 36.0187 23.5961C35.9911 23.6946 35.9207 23.8067 35.8846 23.901C35.5536 24.5497 35.2344 25.1697 34.8439 25.7838C34.8388 25.7863 34.8346 25.7914 34.8296 25.7931C34.6528 26.0525 34.4718 26.2901 34.2866 26.4965C34.2774 26.5099 34.2682 26.5234 34.2589 26.5369C34.2405 26.5638 34.2179 26.5815 34.1944 26.595C33.5064 27.3212 32.7665 27.6893 32.0123 27.6893C31.8606 27.6893 31.6838 27.664 31.507 27.4349C31.3042 27.1299 30.85 26.0879 31.2539 22.9112C31.4785 21.3949 31.8011 20.0268 31.931 19.5408C31.9579 19.4413 31.8908 19.3419 31.7886 19.3293L30.0062 19.1162C29.9241 19.1061 29.8478 19.1566 29.8252 19.2366C29.2704 21.1615 27.0305 27.6885 24.9599 27.6885C24.328 27.6885 24.1512 26.6211 24.1001 26.2909C23.775 23.6264 25.528 18.5492 29.5302 16.2267C29.6048 16.1838 29.635 16.0928 29.5998 16.0136L28.9042 14.467C28.8632 14.3752 28.7501 14.3389 28.6638 14.3886C25.8079 16.0414 24.1847 18.5231 23.2915 20.3436C22.2046 22.5793 21.6993 25.0189 21.9515 26.8738C22.1795 28.7794 23.1398 29.872 24.6054 29.872C26.0543 29.872 27.4369 28.9066 28.7098 27.0187C28.7953 26.8915 28.9889 26.9311 29.0149 27.0819C29.2646 28.5283 29.9811 29.872 31.6579 29.872C33.5282 29.872 35.3232 28.7288 36.7134 26.6447C36.7712 26.5874 36.7972 26.5411 36.8181 26.4906C36.8232 26.4931 36.8282 26.4948 36.8332 26.4973C37.01 26.2025 37.181 25.9051 37.3444 25.6027C37.4508 25.4005 37.5572 25.1992 37.6586 24.9945C37.7181 24.874 37.7743 24.7527 37.8262 24.6289C37.838 24.6002 37.8547 24.5665 37.8706 24.5337", fill: "white" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M30.5839 31.6397C25.7546 34.8577 19.4773 34.7853 14.6907 31.5243C13.5368 30.7384 12.5044 32.6498 13.6474 33.4281C19.034 37.0985 26.3077 37.096 31.7218 33.488C32.8791 32.7172 31.7478 30.8639 30.5839 31.6397Z", fill: "white" })
+        ] })
+      ]
+    }
+  );
+}
+var OHW_BADGE_STYLE = {
+  position: "fixed",
+  left: 20,
+  bottom: 20,
+  zIndex: 2147483e3,
+  boxSizing: "border-box",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 0,
+  padding: "6px 8px",
+  margin: 0,
+  background: "#ffffff",
+  border: "1px solid #e7e5e4",
+  borderRadius: 9999,
+  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
+  color: "#0c0a09",
+  textDecoration: "none",
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
+};
+var OHW_BADGE_LABEL_STYLE = {
+  padding: "0 4px",
+  fontSize: 14,
+  lineHeight: "24px",
+  fontWeight: 500,
+  fontStyle: "normal",
+  letterSpacing: "normal",
+  textTransform: "none",
+  color: "#0c0a09",
+  whiteSpace: "nowrap"
+};
+function MadeWithOhhWells() {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "a",
+    {
+      href: "https://ohhwells.com",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": "Made with OhhWells",
+      "data-ohw-badge": "",
+      style: OHW_BADGE_STYLE,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OhwBrandMark, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
+      ]
+    }
+  );
+}
 var OHW_LOADER_PREHYDRATE_SCRIPT = `(function(){try{var p=location.hostname.split(".");var fromHost=p.length>=3&&p[0]!=="www"?p[0]:"";var fromQuery=new URLSearchParams(location.search).get("subdomain")||"";if(!fromHost&&!fromQuery)return;var e=document.getElementById("ohw-loader");if(e)e.style.display="flex"}catch(e){}})();`;
 function resolveSubdomain(subdomainFromQuery) {
   if (subdomainFromQuery) return subdomainFromQuery;
@@ -15417,6 +16232,7 @@ function OhhwellsBridge() {
     }
   }, []);
   const [fetchState, setFetchState] = (0, import_react17.useState)("idle");
+  const [showBranding, setShowBranding] = (0, import_react17.useState)(false);
   const autoSaveTimers = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
   const activeElRef = (0, import_react17.useRef)(null);
   const pointerHeldRef = (0, import_react17.useRef)(false);
@@ -15439,6 +16255,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);
@@ -15701,13 +16581,6 @@ function OhhwellsBridge() {
   const [isItemDragging, setIsItemDragging] = (0, import_react17.useState)(false);
   const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react17.useState)(false);
   isFooterFrameSelectionRef.current = isFooterFrameSelection;
-  const [floatingPanel, setFloatingPanel] = (0, import_react17.useState)(null);
-  const floatingPanelOpenRef = (0, import_react17.useRef)(false);
-  floatingPanelOpenRef.current = floatingPanel !== null;
-  const [floatingPanelPos, setFloatingPanelPos] = (0, import_react17.useState)(null);
-  const [logoSizeDraft, setLogoSizeDraft] = (0, import_react17.useState)(null);
-  const [editorViewport, setEditorViewport] = (0, import_react17.useState)("desktop");
-  const [parentScrollSnap, setParentScrollSnap] = (0, import_react17.useState)(null);
   const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react17.useState)(null);
   const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react17.useState)(null);
   const footerDragRef = (0, import_react17.useRef)(null);
@@ -15722,7 +16595,16 @@ 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 [floatingPanel, setFloatingPanel] = (0, import_react17.useState)(null);
+  const floatingPanelOpenRef = (0, import_react17.useRef)(false);
+  const setFloatingPanelRef = (0, import_react17.useRef)(setFloatingPanel);
+  const [floatingPanelPos, setFloatingPanelPos] = (0, import_react17.useState)(null);
+  const [logoSizeDraft, setLogoSizeDraft] = (0, import_react17.useState)(null);
+  const [editorViewport, setEditorViewport] = (0, import_react17.useState)("desktop");
+  const [parentScrollSnap, setParentScrollSnap] = (0, import_react17.useState)(null);
   const [sitePages, setSitePages] = (0, import_react17.useState)([]);
   const [sectionsByPath, setSectionsByPath] = (0, import_react17.useState)({});
   const sectionsPrefetchGenRef = (0, import_react17.useRef)(0);
@@ -15731,7 +16613,18 @@ function OhhwellsBridge() {
   const linkPopoverOpenRef = (0, import_react17.useRef)(false);
   const linkPopoverGraceUntilRef = (0, import_react17.useRef)(0);
   setLinkPopoverRef.current = setLinkPopover;
+  setFloatingPanelRef.current = setFloatingPanel;
   linkPopoverSessionRef.current = linkPopover;
+  floatingPanelOpenRef.current = Boolean(floatingPanel);
+  (0, import_react17.useEffect)(() => {
+    const syncViewport = () => {
+      const next = window.innerWidth <= 480 ? "mobile" : "desktop";
+      setEditorViewport((prev) => prev === next ? prev : next);
+    };
+    syncViewport();
+    window.addEventListener("resize", syncViewport);
+    return () => window.removeEventListener("resize", syncViewport);
+  }, []);
   const {
     navDragRef,
     navDropSlots,
@@ -17042,15 +17935,31 @@ 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 === LOGO_PLACEHOLDER_KEY) continue;
         if (LOGO_IMAGE_KEYS.includes(key)) continue;
+        if (key === BRAND_KIT_KEY) continue;
+        if (key === STYLE_STORE_KEY) continue;
+        if (BRAND_CHROME_KEYS.has(key)) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -17110,16 +18019,22 @@ function OhhwellsBridge() {
     };
     const cached = contentCache.get(subdomain);
     if (cached) {
+      setShowBranding(brandingCache.get(subdomain) ?? false);
       applyContent(cached).finally(() => setFetchState("done"));
       return;
     }
     let cancelled = false;
     setFetchState("loading");
     const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
-    fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
+    const initialPath = pathname;
+    fetchedContentPaths.add(`${subdomain}::${initialPath}`);
+    fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(initialPath)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
       if (cancelled) return;
       const content = data?.content ?? {};
+      const branding = Boolean(data?.showBranding);
       contentCache.set(subdomain, content);
+      brandingCache.set(subdomain, branding);
+      setShowBranding(branding);
       return applyContent(content);
     }).catch(() => {
     }).finally(() => {
@@ -17236,10 +18151,28 @@ 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 === LOGO_PLACEHOLDER_KEY) continue;
           if (LOGO_IMAGE_KEYS.includes(key)) continue;
+          if (key === BRAND_KIT_KEY) continue;
+          if (key === STYLE_STORE_KEY) continue;
+          if (key === STYLE_STORE_KEY) continue;
+          if (BRAND_CHROME_KEYS.has(key)) continue;
           if (applyVideoSettingNode(key, val)) continue;
           if (applyCarouselNode(key, val)) continue;
           document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -17285,6 +18218,17 @@ function OhhwellsBridge() {
       debounceTimer = setTimeout(applyFromCache, 150);
     };
     applyFromCache();
+    const pathCacheKey = `${subdomain}::${pathname}`;
+    if (!fetchedContentPaths.has(pathCacheKey)) {
+      fetchedContentPaths.add(pathCacheKey);
+      const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+      fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(pathname)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
+        if (!data?.content) return;
+        contentCache.set(subdomain, data.content);
+        applyFromCache();
+      }).catch(() => {
+      });
+    }
     observer = new MutationObserver(scheduleApply);
     observer.observe(document.body, { childList: true, subtree: true });
     return () => {
@@ -17380,30 +18324,31 @@ 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);
-    let lastWidth = window.innerWidth;
-    let resizeTimers = [];
-    const clearResizeTimers = () => {
-      resizeTimers.forEach(clearTimeout);
-      resizeTimers = [];
-    };
-    const handleResize = () => {
-      if (window.innerWidth === lastWidth) return;
-      lastWidth = window.innerWidth;
-      clearResizeTimers();
-      resizeTimers = HEIGHT_SETTLE_DELAYS.map((delay) => setTimeout(measure, delay));
-    };
-    window.addEventListener("resize", handleResize);
+    const ro = new ResizeObserver(schedule);
+    ro.observe(document.body);
     return () => {
       clearTimeout(t1);
       clearTimeout(t2);
-      clearResizeTimers();
-      window.removeEventListener("resize", handleResize);
+      if (raf != null) cancelAnimationFrame(raf);
+      ro.disconnect();
     };
   }, [pathname, isEditMode, postToParent2]);
   (0, import_react17.useEffect)(() => {
@@ -17644,6 +18589,7 @@ 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;
@@ -17655,6 +18601,9 @@ function OhhwellsBridge() {
       )) {
         return;
       }
+      if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
+        clearMediaSelectionRef.current();
+      }
       {
         const formEl = getFormElement(target);
         const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
@@ -17806,19 +18755,14 @@ function OhhwellsBridge() {
         }
         const clickedButton = findClosestButtonLike(target);
         const buttonOnMedia = Boolean(clickedButton && isMediaEditable(editable) && editable.contains(clickedButton));
-        console.log("[click-debug]", {
-          editableType: editable.dataset.ohwEditable,
-          editableTag: editable.tagName,
-          targetTag: target.tagName,
-          clickedButtonTag: clickedButton?.tagName ?? null,
-          buttonOnMedia,
-          isMediaEditableEditable: isMediaEditable(editable)
-        });
         if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
-          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);
@@ -17837,11 +18781,6 @@ function OhhwellsBridge() {
         const hrefLookupTarget = buttonOnMedia ? clickedButton : editable;
         const hrefCtx = getHrefKeyFromElement(hrefLookupTarget);
         const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
-        console.log("[click-debug 2]", {
-          hrefLookupTargetTag: hrefLookupTarget.tagName,
-          hrefCtx: hrefCtx ? { key: hrefCtx.key } : null,
-          navAnchorTag: navAnchor?.tagName ?? null
-        });
         if (navAnchor) {
           e.preventDefault();
           e.stopPropagation();
@@ -17959,6 +18898,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;
@@ -18010,6 +18950,9 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
         return;
       }
       {
@@ -18128,7 +19071,6 @@ function OhhwellsBridge() {
             hoveredNavContainerRef.current = null;
             setHoveredNavContainerRect(null);
             hoveredItemElRef.current = editable;
-            setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
           }
         }
       }
@@ -18425,7 +19367,7 @@ function OhhwellsBridge() {
       }
     };
     const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
-      if (linkPopoverOpenRef.current) {
+      if (linkPopoverOpenRef.current || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
         if (hoveredImageRef.current) {
           hoveredImageRef.current = null;
           hoveredImageHasTextOverlapRef.current = false;
@@ -18759,7 +19701,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];
@@ -18788,8 +19732,7 @@ function OhhwellsBridge() {
     };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
-      if (isOverEditorChrome(clientX, clientY)) {
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY) || isOverEditorChrome(clientX, clientY)) {
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         formHoverElRef.current = null;
         setFormHoverRect(null);
@@ -18797,6 +19740,12 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
+        dismissImageHover();
+        clearImageHover();
+        setSectionGap(null);
         return;
       }
       if (probeSocialsRowAt(clientX, clientY)) return;
@@ -18808,7 +19757,11 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:pointer-sync") return;
       const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
+        dismissImageHover();
+        clearImageHover();
+        return;
+      }
       if (probeSocialsRowAt(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
       probeImageAt(clientX, clientY);
@@ -19091,10 +20044,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") {
@@ -19104,6 +20070,9 @@ function OhhwellsBridge() {
         if (key === AI_SECTIONS_KEY) continue;
         if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
+        if (key === BRAND_KIT_KEY) continue;
+        if (key === STYLE_STORE_KEY) continue;
+        if (BRAND_CHROME_KEYS.has(key)) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -19117,6 +20086,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 +20172,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 +20207,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,8 +20223,10 @@ 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 }] });
@@ -19259,10 +20242,40 @@ 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"));
     };
     window.addEventListener("message", handleMoveSection);
+    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 handlePanelDragging = (e) => {
       if (e.data?.type !== "ow:panel-dragging") return;
       if (e.data.dragging) document.documentElement.setAttribute("data-ohw-panel-dragging", "");
@@ -19320,8 +20333,15 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
+      if (floatingPanelOpenRef.current) {
+        setFloatingPanelRef.current(null);
+        deselectRef.current();
+        deactivateRef.current();
+        return;
+      }
       deselectRef.current();
       deactivateRef.current();
+      clearMediaSelectionRef.current();
     };
     window.addEventListener("message", handleDeactivate);
     const handleToastAction = (e) => {
@@ -19407,6 +20427,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 +20590,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;
@@ -19583,8 +20613,12 @@ function OhhwellsBridge() {
       if (inserted) {
         const tracker = getSectionsTracker();
         postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent ?? "[]" }] });
-        const h = document.body.scrollHeight;
-        if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
+        const reportHeight = () => {
+          const h = document.body.scrollHeight;
+          if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
+        };
+        reportHeight();
+        setTimeout(reportHeight, 500);
       }
     };
     const handleSwitchSchedule = (e) => {
@@ -19981,13 +21015,16 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleAiDeleteSection);
       window.removeEventListener("message", handleAiSetSections);
       window.removeEventListener("message", handleMoveSection);
+      window.removeEventListener("message", handleAiSetBrand);
+      window.removeEventListener("message", handleAiSetStyles);
+      window.removeEventListener("message", handleGetBrand);
       window.removeEventListener("message", handlePanelDragging);
       window.removeEventListener("message", handleDeleteSection);
       window.removeEventListener("message", handleDeactivate);
-      document.documentElement.removeAttribute("data-ohw-panel-dragging");
       window.removeEventListener("message", handleToastAction);
       window.removeEventListener("message", handleFormCount);
       window.removeEventListener("message", handleUiEscape);
+      document.documentElement.removeAttribute("data-ohw-panel-dragging");
       autoSaveTimers.current.forEach(clearTimeout);
       autoSaveTimers.current.clear();
       if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);
@@ -20190,7 +21227,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.77",
+        bridgeVersion: "0.1.79",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -20597,11 +21634,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) => {
@@ -20642,6 +21690,7 @@ function OhhwellsBridge() {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OhwLoaderSpinner, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
+    subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MadeWithOhhWells, {}),
     bridgeRoot ? (0, import_react_dom4.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
@@ -20673,12 +21722,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
           }
         ),
@@ -21084,6 +22146,59 @@ function OhhwellsBridge() {
     ) : null
   ] });
 }
+
+// src/ui/EmptySection.tsx
+var import_link = __toESM(require("next/link"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "p",
+      {
+        style: {
+          fontFamily: "var(--brand-font-body)",
+          fontSize: "0.75rem",
+          fontWeight: 500,
+          letterSpacing: "0.15em",
+          textTransform: "uppercase",
+          color: "var(--brand-accent)",
+          marginBottom: "1.5rem"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "h1",
+      {
+        style: {
+          fontFamily: "var(--brand-font-heading)",
+          fontSize: "clamp(2rem, 3.5vw, 2.75rem)",
+          lineHeight: 1.1,
+          letterSpacing: "-0.025em",
+          color: "var(--brand-text)",
+          marginBottom: "1rem"
+        },
+        ...titleKey ? { "data-ohw-editable": "text", "data-ohw-key": titleKey, "data-ohw-max-length": 80 } : {},
+        children: title
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "p",
+      {
+        style: {
+          fontFamily: "var(--brand-font-body)",
+          fontSize: "1rem",
+          lineHeight: 1.7,
+          fontWeight: 300,
+          color: "var(--brand-text-muted)",
+          maxWidth: "340px"
+        },
+        ...subtitleKey ? { "data-ohw-editable": "text", "data-ohw-key": subtitleKey, "data-ohw-max-length": 160 } : {},
+        children: "This page doesn't have any content yet."
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AI_DEFAULT_BRAND,
@@ -21101,6 +22216,7 @@ function OhhwellsBridge() {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  EmptySection,
   ItemActionToolbar,
   ItemInteractionLayer,
   LinkEditorPanel,