@ohhwells/bridge 0.1.59-next.170 → 0.1.60-next.171

package/dist/index.cjs

@@ -170,6 +170,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 } : {},
@@ -315,6 +316,149 @@ function applyBrandToDom(kit) {
   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 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";
+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]"))) {
+    ;
+    el.style.removeProperty("background");
+    el.removeAttribute("data-ohw-style-bgcolor");
+  }
+}
+function clearNodeProps(root) {
+  for (const el of Array.from(root.querySelectorAll(`[${NODE_WROTE_ATTR}]`))) {
+    const h = el;
+    h.style.removeProperty("color");
+    h.style.removeProperty("font-size");
+    h.style.removeProperty("background");
+    h.removeAttribute(NODE_WROTE_ATTR);
+  }
+}
+function buttonSurfaceOf(el) {
+  return el.closest("a, button") ?? el;
+}
+function applyStylesToDom(store) {
+  ensureStyleSheet();
+  clearSectionAttrs(document);
+  clearNodeProps(document);
+  if (!store) return;
+  for (const [sectionId, override] of Object.entries(store.sections)) {
+    const sections = document.querySelectorAll(
+      `[data-ohw-section="${CSS.escape(sectionId)}"]`
+    );
+    for (const section of Array.from(sections)) {
+      for (const [prop, attr] of Object.entries(SECTION_ATTRS)) {
+        const value = override[prop];
+        if (value === void 0) continue;
+        if (prop === "sectionBackground" && override.sectionBackgroundColor !== void 0) continue;
+        section.setAttribute(attr, String(value).replace(":", "-"));
+      }
+      if (override.sectionBackgroundColor !== void 0) {
+        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) {
+        el.style.setProperty("color", override.color, "important");
+        el.setAttribute(NODE_WROTE_ATTR, "");
+      }
+      if (override.fontSize !== void 0) {
+        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) {
+          surface.style.setProperty("background", override.buttonBackground, "important");
+        }
+        if (override.buttonText !== void 0) {
+          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");
@@ -329,7 +473,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
 });
@@ -356,6 +501,8 @@ var AI_RESPONSIVE_CSS = [
   "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
   "  [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
   "  [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
+  "  [data-ai-responsive] { overflow-x: hidden; }",
+  "  [data-ai-responsive] img { max-width: 100%; }",
   "}"
 ].join("\n");
 var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
@@ -1363,6 +1510,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",
     {
@@ -1372,10 +1533,11 @@ 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" ? resolvedBrand.palette.light : void 0
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_RESPONSIVE_CSS }),
@@ -1399,10 +1561,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
             ))
@@ -1540,7 +1716,9 @@ function applyAiSectionsToDom(state, options) {
   const brandOverride = deriveBrandOverride();
   const templateBrand = deriveTemplateBrand();
   const brandKey = brandOverride ? JSON.stringify(brandOverride) : "";
-  const activeIds = new Set(state.sections.map((entry) => entry.id));
+  const pagePath = window.location.pathname;
+  const pageSections = state.sections.filter((entry) => !entry.path || entry.path === pagePath);
+  const activeIds = new Set(pageSections.map((entry) => entry.id));
   for (const [id, section] of mounted) {
     if (!activeIds.has(id)) {
       section.root.unmount();
@@ -1548,7 +1726,7 @@ function applyAiSectionsToDom(state, options) {
       mounted.delete(id);
     }
   }
-  for (const entry of state.sections) {
+  for (const entry of pageSections) {
     const serialized = JSON.stringify(entry) + brandKey;
     const existing = mounted.get(entry.id);
     if (existing && existing.serialized === serialized && existing.container.isConnected) {
@@ -14351,6 +14529,7 @@ function OhhwellsBridge() {
   const editContentRef = (0, import_react16.useRef)({});
   const aiSectionsRef = (0, import_react16.useRef)("");
   const brandKitRef = (0, import_react16.useRef)("");
+  const stylesRef = (0, import_react16.useRef)("");
   const pendingDeleteUndoRef = (0, import_react16.useRef)(null);
   const [floatingPanel, setFloatingPanel] = (0, import_react16.useState)(null);
   const floatingPanelOpenRef = (0, import_react16.useRef)(false);
@@ -15614,6 +15793,10 @@ function OhhwellsBridge() {
         brandKitRef.current = content[BRAND_KIT_KEY];
         applyBrandToDom(parseBrandKit(content[BRAND_KIT_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;
@@ -15621,6 +15804,7 @@ function OhhwellsBridge() {
         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;
@@ -15708,11 +15892,16 @@ function OhhwellsBridge() {
         if (typeof content[BRAND_KIT_KEY] === "string") {
           applyBrandToDom(parseBrandKit(content[BRAND_KIT_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 === 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;
@@ -17289,6 +17478,10 @@ function OhhwellsBridge() {
         brandKitRef.current = content[BRAND_KIT_KEY];
         applyBrandToDom(parseBrandKit(content[BRAND_KIT_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)) {
@@ -17300,6 +17493,7 @@ function OhhwellsBridge() {
         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;
@@ -17402,7 +17596,10 @@ function OhhwellsBridge() {
       const payload = e.data.payload;
       if (!payload || typeof payload.id !== "string" || !isRenderableTree(payload.tree)) return;
       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);
@@ -17439,6 +17636,7 @@ function OhhwellsBridge() {
       const value = typeof e.data.value === "string" ? e.data.value : "";
       aiSectionsRef.current = value;
       applyAiSectionsToDom(parseAiSectionsState(value));
+      applyStylesToDom(parseStyleStore(stylesRef.current));
       const restoredHeight = document.documentElement.scrollHeight;
       if (restoredHeight > 50) postToParentRef.current({ type: "ow:height", height: restoredHeight });
       postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: value }] });
@@ -17452,10 +17650,28 @@ function OhhwellsBridge() {
       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 handleDeactivate = (e) => {
       if (e.data?.type !== "ow:deactivate") return;
       if (Date.now() < linkPopoverGraceUntilRef.current) return;
@@ -17704,6 +17920,9 @@ 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 });
       }
@@ -18110,6 +18329,8 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleAiDeleteSection);
       window.removeEventListener("message", handleAiSetSections);
       window.removeEventListener("message", handleAiSetBrand);
+      window.removeEventListener("message", handleAiSetStyles);
+      window.removeEventListener("message", handleGetBrand);
       window.removeEventListener("message", handleDeactivate);
       window.removeEventListener("message", handleToastAction);
       window.removeEventListener("message", handleUiEscape);
@@ -18313,7 +18534,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.59",
+        bridgeVersion: "0.1.60",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections