@ohhwells/bridge 0.1.64-next.177 → 0.1.65-next.181

package/dist/index.cjs

@@ -157,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;
   }
@@ -534,6 +539,36 @@ var FEATURE_LINE_CSS = [
   `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" } : {};
 }
@@ -641,7 +676,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) })
     }
@@ -1543,11 +1578,14 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
     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,
+    ...band ? { buttonLabel: band.buttonLabel } : {}
   };
   const settings = tree.settings ?? {};
   const pad = AI_TREE_TOKENS.sectionPadding[settings.spacing ?? "balanced"];
@@ -1582,7 +1620,7 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
         backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : void 0,
         backgroundSize: "cover",
         backgroundPosition: "center",
-        color: settings.sectionBackground === "accent" ? resolvedBrand.palette.light : void 0
+        color: settings.sectionBackground === "accent" ? blockBrand.palette.dark : void 0
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_RESPONSIVE_CSS }),
@@ -1639,6 +1677,8 @@ 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();
@@ -1738,6 +1778,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) ?? "";
@@ -1808,6 +1866,7 @@ function applyAiSectionsToDom(state, options) {
   }
   syncReplacedOriginals(state);
   syncRemovedSections(state);
+  syncTemplateHidden(state, pageSections.length > 0);
 }
 
 // src/useLinkHrefGuardian.ts
@@ -7652,6 +7711,9 @@ var import_lucide_react7 = require("lucide-react");
 
 // src/lib/sections.ts
 var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
+function isChromeSection(el) {
+  return el.matches("header, nav, footer, aside");
+}
 function titleCaseSectionId(id) {
   return id.split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
@@ -7662,6 +7724,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 });
@@ -7722,7 +7786,7 @@ function useLiveSectionRect(sectionId) {
 }
 function computeSectionBoundaryFlags(instanceId) {
   const topLevel = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]")
+    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
   );
   const index = topLevel.findIndex((el) => (el.dataset.ohwInstance ?? el.dataset.ohwSection) === instanceId);
   if (index === -1) return { isFirst: true, isLast: true };
@@ -7919,7 +7983,8 @@ function AiSectionOverlay({
   const reviewRect = useLiveSectionRect(reviewId);
   const hoverRect = useLiveSectionRect(reviewId || hoveredId === selectedId ? null : hoveredId);
   (0, import_react8.useEffect)(() => {
-    if (!activeSelectionId || !selectionRect) {
+    const selectedEl = activeSelectionId ? findSectionElement(activeSelectionId) : null;
+    if (!activeSelectionId || !selectionRect || selectedEl && isChromeSection(selectedEl)) {
       postToParent2({ type: "ow:section-rect", instanceId: null, rect: null });
       return;
     }
@@ -16558,14 +16623,14 @@ function OhhwellsBridge() {
     }
     const applyContent = (content) => {
       const imageLoads = [];
-      if (typeof content[AI_SECTIONS_KEY] === "string") {
-        aiSectionsRef.current = content[AI_SECTIONS_KEY];
-        applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
-      }
       if (typeof content[BRAND_KIT_KEY] === "string") {
         brandKitRef.current = content[BRAND_KIT_KEY];
         applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
       }
+      if (typeof content[AI_SECTIONS_KEY] === "string") {
+        aiSectionsRef.current = content[AI_SECTIONS_KEY];
+        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]));
@@ -18436,14 +18501,14 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:hydrate") return;
       const content = e.data.content;
       if (!content) return;
-      if (typeof content[AI_SECTIONS_KEY] === "string") {
-        aiSectionsRef.current = content[AI_SECTIONS_KEY];
-        applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
-      }
       if (typeof content[BRAND_KIT_KEY] === "string") {
         brandKitRef.current = content[BRAND_KIT_KEY];
         applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
       }
+      if (typeof content[AI_SECTIONS_KEY] === "string") {
+        aiSectionsRef.current = content[AI_SECTIONS_KEY];
+        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]));
@@ -19515,7 +19580,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.64",
+        bridgeVersion: "0.1.65",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections