@ohhwells/bridge 0.1.158 → 0.1.160

package/dist/index.d.cts

@@ -348,6 +348,51 @@ interface AiFooterRendererProps {
  */
 declare function AiFooterRenderer({ tree, brand, resolveMedia, editKeyPrefix, logoUrl, resolvePageHref, legal, surface, }: AiFooterRendererProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Relative headline sizing: "make the section heading bigger" as a MULTIPLIER on whatever the
+ * template already renders, not an absolute px token.
+ *
+ * Why this exists. The original `headlineScale` prop is an absolute 4-token px scale (md 24 / lg 32
+ * / xl 40 / display 56) painted by a stylesheet rule. Measuring two real templates at 1440px found
+ * 12 of 13 section headings rendering ABOVE the top of that scale (rebound: 148, 64, 72, 84;
+ * haven-realty: 86, 58, 48, 64, 58 x5), so every token the model could pick, `display` included,
+ * made the heading SMALLER. That is the bug users hit: "make it bigger" visibly shrank the heading.
+ *
+ * Why a multiplier rather than more tokens. The same headings render 30-56px at 390px wide, i.e.
+ * the templates have a working responsive type scale. Any absolute px override freezes one width's
+ * value at every width: a `96px` token chosen to beat a 1440px heading would still be 96px on a
+ * phone where the template wanted 36px. A multiplier rides the template's own scale instead, so it
+ * is correct at every breakpoint by construction.
+ *
+ * Why this is runtime JS and not CSS. CSS cannot multiply an element's OWN font-size: `em` and `%`
+ * both resolve against the PARENT's size, so `font-size: calc(1em * 1.2)` on an <h1> throws away
+ * the template's h1 sizing rather than scaling it. The only way to scale what the element actually
+ * renders is to read it and write it back, which is what this module does, re-measuring on resize
+ * so a breakpoint change re-reads the template's new base.
+ */
+/** Multiplier per token. `base` is the template's own size, which is also the reset target. */
+declare const HEADLINE_SIZE_MULTIPLIERS: Record<string, number>;
+
+/**
+ * Per-section and per-node style overrides. The backend's update_style verb (and, later, toolbar
+ * UI) produces a delta {target, changed}; the editor merges it onto one reserved node,
+ * `__ohw_styles`, and hands the whole store to the bridge. The bridge applies it to the DOM:
+ *
+ * - Section props are written as `data-ohw-style-*` attributes on the `[data-ohw-section]` element
+ *   plus one injected stylesheet of attribute-scoped rules. The rules are best-effort by design —
+ *   they nudge presentation (background band, vertical distribution, headline scale, image fit,
+ *   spacing) and a template whose structure doesn't tolerate one simply keeps its current look.
+ * - Node props (text colour/size, button colours) are written inline on every element carrying the
+ *   node's `data-ohw-key`, which covers native template nodes and generated-section slots alike.
+ *
+ * Application is idempotent: each pass clears what it wrote before (tracked via the attributes and
+ * a wrote-marker) and re-applies from the store, so removing an override restores the original look
+ * and re-rendered generated sections just need a re-apply.
+ *
+ * The store shape, the node key, and the enums are a contract with the backend
+ * (`app/helpers/style-update.ts`) and the editor (which persists/undoes the node).
+ */
+
 declare const SECTION_BACKGROUNDS: readonly ["default", "surface", "accent", "accent-soft"];
 declare const TEXT_DISTRIBUTIONS: readonly ["top", "center", "space-between"];
 declare const HEADLINE_SCALES: readonly ["md", "lg", "xl", "display"];
@@ -369,8 +414,20 @@ interface SectionStyleOverride {
     fontFamily?: string;
     /** Section-wide heading colour — painted onto the section's h1-h6 editables, over textColor. */
     headingColor?: string;
+    /** Section-wide ICON colour (OHH-875) — the glyphs in the section's icon slots, which are
+     *  neither headings nor body text, so neither textColor nor headingColor could ever reach them.
+     *  Painted as `color` on each `[data-ohw-editable="icon"]`, which a glyph drawn with
+     *  stroke/fill="currentColor" (lucide and every set like it) follows. Best-effort, like every
+     *  other section prop: a glyph with a hardcoded colour of its own keeps it. */
+    iconColor?: string;
     textDistribution?: (typeof TEXT_DISTRIBUTIONS)[number];
+    /** @deprecated Absolute px headline tokens. Still rendered for stores saved before the switch,
+     *  but nothing writes it any more: it could only ever name a size BELOW what most templates
+     *  render, so "bigger" shrank the heading. New edits use `headlineSize`. */
     headlineScale?: (typeof HEADLINE_SCALES)[number];
+    /** Headline size as a multiplier on the template's own size (`base` = untouched). Relative on
+     *  purpose, and applied by measuring rather than by a CSS rule — see lib/headline-size.ts. */
+    headlineSize?: keyof typeof HEADLINE_SIZE_MULTIPLIERS;
     imageAspect?: string;
     /** @deprecated OHH-789 folds this into verticalPadding — a store saved before the fold may
      *  still carry it; legacyVerticalPaddingAlias resolves it at apply time. */
@@ -666,7 +723,7 @@ declare function filterAvailablePages(pages: LinkPage[], existingTargets: string
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "lg" | "sm" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -348,6 +348,51 @@ interface AiFooterRendererProps {
  */
 declare function AiFooterRenderer({ tree, brand, resolveMedia, editKeyPrefix, logoUrl, resolvePageHref, legal, surface, }: AiFooterRendererProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Relative headline sizing: "make the section heading bigger" as a MULTIPLIER on whatever the
+ * template already renders, not an absolute px token.
+ *
+ * Why this exists. The original `headlineScale` prop is an absolute 4-token px scale (md 24 / lg 32
+ * / xl 40 / display 56) painted by a stylesheet rule. Measuring two real templates at 1440px found
+ * 12 of 13 section headings rendering ABOVE the top of that scale (rebound: 148, 64, 72, 84;
+ * haven-realty: 86, 58, 48, 64, 58 x5), so every token the model could pick, `display` included,
+ * made the heading SMALLER. That is the bug users hit: "make it bigger" visibly shrank the heading.
+ *
+ * Why a multiplier rather than more tokens. The same headings render 30-56px at 390px wide, i.e.
+ * the templates have a working responsive type scale. Any absolute px override freezes one width's
+ * value at every width: a `96px` token chosen to beat a 1440px heading would still be 96px on a
+ * phone where the template wanted 36px. A multiplier rides the template's own scale instead, so it
+ * is correct at every breakpoint by construction.
+ *
+ * Why this is runtime JS and not CSS. CSS cannot multiply an element's OWN font-size: `em` and `%`
+ * both resolve against the PARENT's size, so `font-size: calc(1em * 1.2)` on an <h1> throws away
+ * the template's h1 sizing rather than scaling it. The only way to scale what the element actually
+ * renders is to read it and write it back, which is what this module does, re-measuring on resize
+ * so a breakpoint change re-reads the template's new base.
+ */
+/** Multiplier per token. `base` is the template's own size, which is also the reset target. */
+declare const HEADLINE_SIZE_MULTIPLIERS: Record<string, number>;
+
+/**
+ * Per-section and per-node style overrides. The backend's update_style verb (and, later, toolbar
+ * UI) produces a delta {target, changed}; the editor merges it onto one reserved node,
+ * `__ohw_styles`, and hands the whole store to the bridge. The bridge applies it to the DOM:
+ *
+ * - Section props are written as `data-ohw-style-*` attributes on the `[data-ohw-section]` element
+ *   plus one injected stylesheet of attribute-scoped rules. The rules are best-effort by design —
+ *   they nudge presentation (background band, vertical distribution, headline scale, image fit,
+ *   spacing) and a template whose structure doesn't tolerate one simply keeps its current look.
+ * - Node props (text colour/size, button colours) are written inline on every element carrying the
+ *   node's `data-ohw-key`, which covers native template nodes and generated-section slots alike.
+ *
+ * Application is idempotent: each pass clears what it wrote before (tracked via the attributes and
+ * a wrote-marker) and re-applies from the store, so removing an override restores the original look
+ * and re-rendered generated sections just need a re-apply.
+ *
+ * The store shape, the node key, and the enums are a contract with the backend
+ * (`app/helpers/style-update.ts`) and the editor (which persists/undoes the node).
+ */
+
 declare const SECTION_BACKGROUNDS: readonly ["default", "surface", "accent", "accent-soft"];
 declare const TEXT_DISTRIBUTIONS: readonly ["top", "center", "space-between"];
 declare const HEADLINE_SCALES: readonly ["md", "lg", "xl", "display"];
@@ -369,8 +414,20 @@ interface SectionStyleOverride {
     fontFamily?: string;
     /** Section-wide heading colour — painted onto the section's h1-h6 editables, over textColor. */
     headingColor?: string;
+    /** Section-wide ICON colour (OHH-875) — the glyphs in the section's icon slots, which are
+     *  neither headings nor body text, so neither textColor nor headingColor could ever reach them.
+     *  Painted as `color` on each `[data-ohw-editable="icon"]`, which a glyph drawn with
+     *  stroke/fill="currentColor" (lucide and every set like it) follows. Best-effort, like every
+     *  other section prop: a glyph with a hardcoded colour of its own keeps it. */
+    iconColor?: string;
     textDistribution?: (typeof TEXT_DISTRIBUTIONS)[number];
+    /** @deprecated Absolute px headline tokens. Still rendered for stores saved before the switch,
+     *  but nothing writes it any more: it could only ever name a size BELOW what most templates
+     *  render, so "bigger" shrank the heading. New edits use `headlineSize`. */
     headlineScale?: (typeof HEADLINE_SCALES)[number];
+    /** Headline size as a multiplier on the template's own size (`base` = untouched). Relative on
+     *  purpose, and applied by measuring rather than by a CSS rule — see lib/headline-size.ts. */
+    headlineSize?: keyof typeof HEADLINE_SIZE_MULTIPLIERS;
     imageAspect?: string;
     /** @deprecated OHH-789 folds this into verticalPadding — a store saved before the fold may
      *  still carry it; legacyVerticalPaddingAlias resolves it at apply time. */
@@ -666,7 +723,7 @@ declare function filterAvailablePages(pages: LinkPage[], existingTargets: string
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "lg" | "sm" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -106,6 +106,56 @@ function isRenderableTree(value) {
   return AI_TREE_SCHEMA_VERSIONS.includes(tree.schemaVersion) && tree.type === "section" && Array.isArray(tree.rows);
 }
 
+// src/lib/headline-size.ts
+var HEADLINE_SIZE_MULTIPLIERS = {
+  xs: 0.7,
+  sm: 0.85,
+  base: 1,
+  lg: 1.2,
+  xl: 1.45,
+  "2xl": 1.75
+};
+var HEADLINE_SIZE_ATTR = "data-ohw-style-headlinesize";
+var PREV_ATTR = "data-ohw-style-prev-fsmul";
+var NODE_FONT_SIZE_ATTR = "data-ohw-style-prev-font-size";
+function headingsIn(section) {
+  return Array.from(section.querySelectorAll("h1, h2, h3"));
+}
+function clearHeadlineSizes(root = document) {
+  for (const el of Array.from(root.querySelectorAll(`[${PREV_ATTR}]`))) {
+    const prev = el.getAttribute(PREV_ATTR) ?? "";
+    if (prev) el.style.setProperty("font-size", prev);
+    else el.style.removeProperty("font-size");
+    el.removeAttribute(PREV_ATTR);
+  }
+}
+function applyHeadlineSizes(root = document) {
+  clearHeadlineSizes(root);
+  for (const section of Array.from(
+    root.querySelectorAll(`[${HEADLINE_SIZE_ATTR}]`)
+  )) {
+    const multiplier = HEADLINE_SIZE_MULTIPLIERS[section.getAttribute(HEADLINE_SIZE_ATTR) ?? ""];
+    if (!multiplier || multiplier === 1) continue;
+    for (const heading of headingsIn(section)) {
+      if (heading.hasAttribute(NODE_FONT_SIZE_ATTR)) continue;
+      const base = Number.parseFloat(window.getComputedStyle(heading).fontSize);
+      if (!Number.isFinite(base) || base <= 0) continue;
+      heading.setAttribute(PREV_ATTR, heading.style.getPropertyValue("font-size"));
+      heading.style.setProperty("font-size", `${Math.round(base * multiplier * 100) / 100}px`, "important");
+    }
+  }
+}
+var resizeInstalled = false;
+function installHeadlineSizeResize() {
+  if (resizeInstalled || typeof window === "undefined") return;
+  resizeInstalled = true;
+  let timer;
+  window.addEventListener("resize", () => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => applyHeadlineSizes(), 120);
+  });
+}
+
 // src/lib/sections.ts
 var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
 function isChromeSection(el) {
@@ -5897,6 +5947,7 @@ var SECTION_ATTRS = {
   sectionBackground: "data-ohw-style-bg",
   textDistribution: "data-ohw-style-distribution",
   headlineScale: "data-ohw-style-headline",
+  headlineSize: HEADLINE_SIZE_ATTR,
   imageAspect: "data-ohw-style-aspect",
   spacing: "data-ohw-style-spacing",
   verticalPadding: "data-ohw-style-vpadding",
@@ -5965,6 +6016,15 @@ function clearSectionAttrs(root) {
   }
 }
 var ITEM_WROTE_ATTR = "data-ohw-style-item";
+function paintIcon(slot, color) {
+  for (const el of [slot, ...Array.from(slot.querySelectorAll("svg, svg *"))]) {
+    const styled = el;
+    if (!styled.style) continue;
+    saveInline(styled, "color");
+    styled.style.setProperty("color", color, "important");
+    styled.setAttribute(NODE_WROTE_ATTR, "");
+  }
+}
 function clearNodeProps(root) {
   for (const el of Array.from(root.querySelectorAll(`[${NODE_WROTE_ATTR}]`))) {
     const h = el;
@@ -6002,6 +6062,7 @@ function applyStylesToDom(store) {
   ensureStyleSheet();
   clearSectionAttrs(document);
   clearNodeProps(document);
+  clearHeadlineSizes(document);
   loadStyleFonts(
     store ? [
       ...Object.values(store.nodes).flatMap((n) => n.fontFamily ? [n.fontFamily] : []),
@@ -6075,9 +6136,13 @@ function applyStylesToDom(store) {
     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 (el.dataset.ohwEditable === "icon") {
+          paintIcon(el, override.color);
+        } else {
+          saveInline(el, "color");
+          el.style.setProperty("color", override.color, "important");
+          el.setAttribute(NODE_WROTE_ATTR, "");
+        }
       }
       if (override.fontFamily !== void 0) {
         saveInline(el, "font-family");
@@ -6134,6 +6199,18 @@ function applyStylesToDom(store) {
       }
     }
   }
+  for (const [sectionId, override] of Object.entries(store.sections)) {
+    if (override.iconColor === void 0) continue;
+    const escaped = CSS.escape(sectionId);
+    const byInstance = document.querySelectorAll(`[data-ohw-instance="${escaped}"]`);
+    const sections = byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`);
+    for (const marker of Array.from(sections)) {
+      const icons = marker.querySelectorAll('[data-ohw-editable="icon"]');
+      for (const el of Array.from(icons)) paintIcon(el, override.iconColor);
+    }
+  }
+  applyHeadlineSizes(document);
+  installHeadlineSizeResize();
 }
 
 // src/lib/ai-sections-store.ts
@@ -6173,17 +6250,21 @@ function resolveSectionTree(sectionId, aiSectionsRaw) {
   return parseAiSectionsState(aiSectionsRaw).sections.find((entry) => entry.id === sectionId)?.tree;
 }
 function resolveSectionSettingsContext(sectionId, aiSectionsRaw, stylesRaw) {
+  const styleOverride = parseStyleStore(stylesRaw)?.sections[sectionId];
+  const headlineSize = styleOverride?.headlineSize;
   const genSettings = parseAiSectionsState(aiSectionsRaw).sections.find(
     (entry) => entry.id === sectionId
   )?.tree.settings;
-  if (genSettings) return genSettings;
-  const styleOverride = parseStyleStore(stylesRaw)?.sections[sectionId];
-  if (!styleOverride?.verticalPadding && !styleOverride?.minHeight && !styleOverride?.spacing) {
+  if (genSettings) {
+    return { ...genSettings, ...headlineSize ? { headlineSize } : {} };
+  }
+  if (!styleOverride?.verticalPadding && !styleOverride?.minHeight && !styleOverride?.spacing && !headlineSize) {
     return void 0;
   }
   return {
-    verticalPadding: styleOverride.verticalPadding ?? legacyVerticalPaddingAlias(styleOverride.spacing),
-    minHeight: styleOverride.minHeight
+    verticalPadding: styleOverride?.verticalPadding ?? legacyVerticalPaddingAlias(styleOverride?.spacing),
+    minHeight: styleOverride?.minHeight,
+    ...headlineSize ? { headlineSize } : {}
   };
 }
 function applyTreeToState(state, payload) {
@@ -7188,6 +7269,23 @@ function applyCustomCodeToHead(content) {
   if (beforeNodes.length > 0) document.head.append(...beforeNodes);
 }
 
+// src/lib/node-font-size.ts
+var TEXT_NODE_TYPES = /* @__PURE__ */ new Set(["text", "text/rich", "plain", "link"]);
+function escapeKey(key) {
+  return typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(key) : key.replace(/["\\]/g, "\\$&");
+}
+function measureNodeFontSize(key, type, root) {
+  if (!TEXT_NODE_TYPES.has(type)) return void 0;
+  const el = root.querySelector(`[data-ohw-editable][data-ohw-key="${escapeKey(key)}"]`);
+  if (!el) return void 0;
+  const size = Number.parseFloat(window.getComputedStyle(el).fontSize);
+  return Number.isFinite(size) && size > 0 ? Math.round(size) : void 0;
+}
+function withNodeFontSize(node, root) {
+  const fontSize = measureNodeFontSize(node.key, node.type, root);
+  return fontSize === void 0 ? node : { ...node, fontSize };
+}
+
 // src/lib/selectNavContainer.ts
 function isOnScreen(el) {
   const rect = el.getBoundingClientRect();
@@ -17127,7 +17225,7 @@ function apiBase() {
 function bridgeVersion() {
   try {
     if (true) {
-      return "0.1.158";
+      return "0.1.160";
     }
   } catch {
   }
@@ -17141,7 +17239,7 @@ function stampBridgeVersionOnDocument() {
     return;
   }
   try {
-    const v = true ? "0.1.158" : "";
+    const v = true ? "0.1.160" : "";
     if (v) {
       document.documentElement.setAttribute("data-ohw-bridge-version", v);
       window.__OHW_BRIDGE_VERSION__ = v;
@@ -18050,6 +18148,89 @@ function CarouselOverlay({
 // src/ui/ai-section/AiSectionOverlay.tsx
 import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef4, useState as useState7 } from "react";
 import { Check, X } from "lucide-react";
+
+// src/lib/ai-change-highlight.ts
+var STYLE_ID = "ohw-ai-changed-style";
+var MARK_ATTR = "data-ohw-ai-changed";
+var HIGHLIGHT_MS = 2200;
+var HIGHLIGHT_CSS = `
+@keyframes ohw-ai-changed-pulse {
+  0% { outline-color: rgba(0, 120, 229, 0.95); box-shadow: 0 0 0 5px rgba(0, 120, 229, 0.20); }
+  72% { outline-color: rgba(0, 120, 229, 0.95); box-shadow: 0 0 0 5px rgba(0, 120, 229, 0.12); }
+  100% { outline-color: rgba(0, 120, 229, 0); box-shadow: 0 0 0 5px rgba(0, 120, 229, 0); }
+}
+[${MARK_ATTR}] {
+  outline: 2px solid rgba(0, 120, 229, 0.95) !important;
+  outline-offset: 3px !important;
+  animation: ohw-ai-changed-pulse ${HIGHLIGHT_MS}ms ease-out forwards !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  [${MARK_ATTR}] { animation: none !important; }
+}
+`;
+function ensureStyleSheet2() {
+  if (document.getElementById(STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = STYLE_ID;
+  el.textContent = HIGHLIGHT_CSS;
+  document.head.appendChild(el);
+}
+function targetsFor(keys, item) {
+  const out = /* @__PURE__ */ new Set();
+  for (const key of keys) {
+    if (!key) continue;
+    for (const el of Array.from(
+      document.querySelectorAll(`[data-ohw-key="${CSS.escape(key)}"]`)
+    )) {
+      out.add(el);
+    }
+  }
+  if (item) {
+    const section = document.querySelector(`[data-ohw-instance="${CSS.escape(item.sectionId)}"]`) ?? document.querySelector(`[data-ohw-section="${CSS.escape(item.sectionId)}"]`);
+    const stamp = `${item.group}:${item.index}`;
+    const el = section?.querySelector(`[data-ohw-item="${CSS.escape(stamp)}"]`);
+    if (el) out.add(el);
+  }
+  return [...out];
+}
+var clearTimer = null;
+function clearChangeHighlight() {
+  if (clearTimer !== null) {
+    clearTimeout(clearTimer);
+    clearTimer = null;
+  }
+  for (const el of Array.from(document.querySelectorAll(`[${MARK_ATTR}]`))) {
+    el.removeAttribute(MARK_ATTR);
+  }
+}
+function highlightChangedElements(keys, item) {
+  clearChangeHighlight();
+  const targets = targetsFor(keys, item);
+  if (targets.length === 0) return 0;
+  ensureStyleSheet2();
+  for (const el of targets) el.setAttribute(MARK_ATTR, "");
+  const rect = targets[0].getBoundingClientRect();
+  if (rect.bottom < 0 || rect.top > window.innerHeight) {
+    targets[0].scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+  clearTimer = setTimeout(clearChangeHighlight, HIGHLIGHT_MS);
+  return targets.length;
+}
+function installAiChangeHighlight() {
+  const onMessage = (e) => {
+    const data = e.data;
+    if (data?.type !== "ow:ai-highlight") return;
+    const keys = Array.isArray(data.keys) ? data.keys.filter((k) => typeof k === "string") : [];
+    const raw = data.item;
+    const item = raw && typeof raw.sectionId === "string" && typeof raw.group === "string" && typeof raw.index === "number" ? { sectionId: raw.sectionId, group: raw.group, index: raw.index } : void 0;
+    const found = highlightChangedElements(keys, item);
+    window.parent?.postMessage({ type: "ow:ai-highlight-done", found }, "*");
+  };
+  window.addEventListener("message", onMessage);
+  return () => window.removeEventListener("message", onMessage);
+}
+
+// src/ui/ai-section/AiSectionOverlay.tsx
 import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var findSectionElement = findByInstanceId;
 function readRect(instanceId) {
@@ -18301,6 +18482,7 @@ function AiSectionOverlay({
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, [postToParent2]);
+  useEffect5(() => installAiChangeHighlight(), []);
   const [hoveredId, setHoveredId] = useState7(null);
   useEffect5(() => {
     const onMove = (e) => {
@@ -31220,13 +31402,15 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:collect-section") return;
       const sectionId = e.data.sectionId;
       if (typeof sectionId !== "string" || !sectionId) return;
-      const foundEl = document.querySelector(
-        `[data-ohw-section="${CSS.escape(sectionId)}"]`
+      const escapedSectionId = CSS.escape(sectionId);
+      const instanceEl = document.querySelector(
+        `[data-ohw-instance="${escapedSectionId}"]`
       );
+      const foundEl = instanceEl ? sectionElementOf(instanceEl) : document.querySelector(`[data-ohw-section="${escapedSectionId}"]`);
       const sectionEl = foundEl && !foundEl.hasAttribute("data-ohw-ai-template-hidden") && !foundEl.hasAttribute("data-ohw-ai-removed") && !foundEl.hasAttribute("data-ohw-ai-replaced-by") ? foundEl : null;
       const nodes = sectionEl ? collectEditableNodes(void 0, sectionEl).filter(
         (n) => n.key && !n.key.startsWith("__ohw_") && !["meta", "sections", "video-setting"].includes(n.type)
-      ).map((n) => ({ ...n, text: n.text ?? "", type: normalizeAiNodeType(n.type) })) : [];
+      ).map((n) => ({ ...n, text: n.text ?? "", type: normalizeAiNodeType(n.type) })).map((n) => withNodeFontSize(n, sectionEl)) : [];
       const items = sectionEl ? collectItemGroups(sectionEl) : [];
       const box = sectionEl?.getBoundingClientRect();
       const rect = box ? {
@@ -31235,7 +31419,11 @@ function OhhwellsBridge() {
         width: box.width,
         height: box.height
       } : null;
-      const settings = resolveSectionSettingsContext(sectionId, aiSectionsRef.current, stylesRef.current);
+      const settings = resolveSectionSettingsContext(
+        sectionId,
+        aiSectionsRef.current,
+        stylesRef.current
+      );
       const tree = resolveSectionTree(sectionId, aiSectionsRef.current);
       postToParentRef.current({
         type: "ow:section-nodes",
@@ -31966,7 +32154,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.158",
+        bridgeVersion: "0.1.160",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections