@ohhwells/bridge 0.1.158 → 0.1.160

package/dist/index.cjs

@@ -220,6 +220,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) {
@@ -6011,6 +6061,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",
@@ -6079,6 +6130,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;
@@ -6116,6 +6176,7 @@ function applyStylesToDom(store) {
   ensureStyleSheet();
   clearSectionAttrs(document);
   clearNodeProps(document);
+  clearHeadlineSizes(document);
   loadStyleFonts(
     store ? [
       ...Object.values(store.nodes).flatMap((n) => n.fontFamily ? [n.fontFamily] : []),
@@ -6189,9 +6250,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");
@@ -6248,6 +6313,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
@@ -6287,17 +6364,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) {
@@ -7302,6 +7383,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();
@@ -17241,7 +17339,7 @@ function apiBase() {
 function bridgeVersion() {
   try {
     if (true) {
-      return "0.1.158";
+      return "0.1.160";
     }
   } catch {
   }
@@ -17255,7 +17353,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;
@@ -18164,6 +18262,89 @@ function CarouselOverlay({
 // src/ui/ai-section/AiSectionOverlay.tsx
 var import_react9 = require("react");
 var import_lucide_react7 = require("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
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var findSectionElement = findByInstanceId;
 function readRect(instanceId) {
@@ -18415,6 +18596,7 @@ function AiSectionOverlay({
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, [postToParent2]);
+  (0, import_react9.useEffect)(() => installAiChangeHighlight(), []);
   const [hoveredId, setHoveredId] = (0, import_react9.useState)(null);
   (0, import_react9.useEffect)(() => {
     const onMove = (e) => {
@@ -31328,13 +31510,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 ? {
@@ -31343,7 +31527,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",
@@ -32074,7 +32262,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.158",
+        bridgeVersion: "0.1.160",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections