@ohhwells/bridge 0.1.158-next.423 → 0.1.158-next.424

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");
@@ -6255,13 +6320,11 @@ function applyStylesToDom(store) {
     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)) {
-        saveInline(el, "color");
-        el.style.setProperty("color", override.iconColor, "important");
-        el.setAttribute(NODE_WROTE_ATTR, "");
-      }
+      for (const el of Array.from(icons)) paintIcon(el, override.iconColor);
     }
   }
+  applyHeadlineSizes(document);
+  installHeadlineSizeResize();
 }
 
 // src/lib/ai-sections-store.ts
@@ -6301,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) {
@@ -17300,7 +17367,7 @@ function apiBase() {
 function bridgeVersion() {
   try {
     if (true) {
-      return "0.1.158-next.423";
+      return "0.1.158-next.424";
     }
   } catch {
   }
@@ -17314,7 +17381,7 @@ function stampBridgeVersionOnDocument() {
     return;
   }
   try {
-    const v = true ? "0.1.158-next.423" : "";
+    const v = true ? "0.1.158-next.424" : "";
     if (v) {
       document.documentElement.setAttribute("data-ohw-bridge-version", v);
       window.__OHW_BRIDGE_VERSION__ = v;
@@ -31650,9 +31717,11 @@ 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)
@@ -31665,7 +31734,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",
@@ -32396,7 +32469,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.158-next.423",
+        bridgeVersion: "0.1.158-next.424",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections