@ohhwells/bridge 0.1.139-next.373 → 0.1.139-next.375

package/dist/index.cjs

@@ -72,6 +72,7 @@ __export(index_exports, {
   dropIndicatorVariants: () => dropIndicatorVariants,
   ensureFooterTree: () => ensureFooterTree,
   filterAvailablePages: () => filterAvailablePages,
+  foldAlignIntoTrees: () => foldAlignIntoTrees,
   getEditModeInitialState: () => getEditModeInitialState,
   insertFooterHours: () => insertFooterHours,
   isEditSessionActive: () => isEditSessionActive,
@@ -80,6 +81,7 @@ __export(index_exports, {
   isValidUrl: () => isValidUrl,
   nextViableSlide: () => nextViableSlide,
   parseAiFooterState: () => parseAiFooterState,
+  parseAiSectionsState: () => parseAiSectionsState,
   parseTarget: () => parseTarget,
   removeFooterBlock: () => removeFooterBlock,
   resolveFooterCopyright: () => resolveFooterCopyright,
@@ -2919,14 +2921,22 @@ function isInactiveFooterChrome(el) {
   if (footer && footer.style.display === "none") return true;
   return false;
 }
+function isIncidentalFooter(el) {
+  return Boolean(el.closest("blockquote, article, figure"));
+}
 function getFooterRoot() {
   const ai = document.querySelector("footer[data-ai-footer]");
   if (ai) return ai;
   for (const el of Array.from(
-    document.querySelectorAll('footer[data-ohw-section="footer"], footer')
+    document.querySelectorAll('footer[data-ohw-section="footer"]')
   )) {
+    if (isInactiveFooterChrome(el)) continue;
+    return el;
+  }
+  for (const el of Array.from(document.querySelectorAll("footer"))) {
     if (el.hasAttribute("data-ai-footer")) continue;
     if (isInactiveFooterChrome(el)) continue;
+    if (isIncidentalFooter(el)) continue;
     return el;
   }
   return null;
@@ -3337,8 +3347,8 @@ function buildFooterLink(colIndex, itemIndex, href, label, template) {
   return anchor;
 }
 function footerColumnExistsInDom(colIndex) {
-  const root = getFooterRoot() ?? document;
-  return root.querySelector(`[data-ohw-footer-col="${colIndex}"]`) !== null || root.querySelector(`[data-ohw-href-key^="footer-${colIndex}-"]`) !== null || root.querySelector(`[data-ohw-key="footer-${colIndex}-heading"]`) !== null;
+  const scope = getFooterLinksContainer() ?? getFooterRoot() ?? document;
+  return scope.querySelector(`[data-ohw-footer-col="${colIndex}"]`) !== null || scope.querySelector(`[data-ohw-href-key^="footer-${colIndex}-"]`) !== null || scope.querySelector(`[data-ohw-key="footer-${colIndex}-heading"]`) !== null;
 }
 function getFooterLinkTemplate() {
   for (const col of listFooterColumns()) {
@@ -5288,19 +5298,21 @@ function findIndexSegment(keys) {
   if (len < 2 || tokenLists.some((t) => t.length !== len)) return null;
   let position = -1;
   for (let p = 0; p < len; p++) {
-    const values = tokenLists.map((t) => t[p]);
-    const allSame = values.every((v) => v === values[0]);
+    const values2 = tokenLists.map((t) => t[p]);
+    const allSame = values2.every((v) => v === values2[0]);
     if (allSame) continue;
-    const allNumeric = values.every((v) => /^\d+$/.test(v));
-    if (!allNumeric || position !== -1) return null;
+    if (position !== -1) return null;
     position = p;
   }
   if (position === -1) return null;
+  const values = tokenLists.map((t) => t[position]);
+  const numericCount = values.filter((v) => /^\d+$/.test(v)).length;
+  if (numericCount !== 0 && numericCount !== values.length) return null;
+  if (numericCount === 0 && position === len - 1) return null;
   const group = tokenLists[0].slice(0, position).join("-");
   if (!group) return null;
-  const indices = tokenLists.map((t) => parseInt(t[position], 10));
-  if (new Set(indices).size !== indices.length) return null;
-  return { position, group };
+  if (new Set(values).size !== values.length) return null;
+  return numericCount === values.length ? { position, group } : { position, group, slug: true };
 }
 function singleIndexSegment(key) {
   const tokens = baseKey(key).split("-");
@@ -5346,7 +5358,19 @@ function detectItemGroups(sectionEl) {
         list.push(m);
         byShape.set(shape, list);
       }
-      clusters.push(...Array.from(byShape.values()));
+      const shaped = Array.from(byShape.values());
+      clusters.push(...shaped.filter((c) => c.length >= 2));
+      const singles = shaped.filter((c) => c.length === 1).map((c) => c[0]);
+      const bySlugShape = /* @__PURE__ */ new Map();
+      for (const m of singles) {
+        const primary = primaryKey(keyedDescendants(m));
+        const tokens = baseKey(primary ?? "").split("-");
+        const slugShape = `${tokens.length}|${tokens[0]}|${tokens[tokens.length - 1]}`;
+        const list = bySlugShape.get(slugShape) ?? [];
+        list.push(m);
+        bySlugShape.set(slugShape, list);
+      }
+      clusters.push(...Array.from(bySlugShape.values()));
     }
     for (const members of clusters) {
       const keyedPerMember = members.map((m) => keyedDescendants(m));
@@ -5357,11 +5381,28 @@ function detectItemGroups(sectionEl) {
       const dedupeKey = `${segment.group}`;
       if (seenParents.has(dedupeKey)) continue;
       seenParents.add(dedupeKey);
-      const items = members.map((el, i) => ({
-        el,
-        index: indexFromKey(primaries[i], segment.position),
-        keyed: keyedPerMember[i]
-      }));
+      let items;
+      if (segment.slug) {
+        const tokens = members.map((_, i) => baseKey(primaries[i]).split("-")[segment.position]);
+        let nextOriginal = 1;
+        const indices = tokens.map((t) => {
+          const cloneMatch = t.match(/^x(\d+)$/);
+          return cloneMatch ? parseInt(cloneMatch[1], 10) : nextOriginal++;
+        });
+        if (new Set(indices).size !== indices.length) continue;
+        items = members.map((el, i) => ({
+          el,
+          index: indices[i],
+          keyed: keyedPerMember[i],
+          slugToken: tokens[i]
+        }));
+      } else {
+        items = members.map((el, i) => ({
+          el,
+          index: indexFromKey(primaries[i], segment.position),
+          keyed: keyedPerMember[i]
+        }));
+      }
       groups.push({ group: segment.group, parent, nested: false, items });
     }
   }
@@ -5485,6 +5526,18 @@ function rekeyItemClone(clone, source, sibling, group, newIndex) {
   const delta = newIndex - source.index;
   const cloneKeyed = keyedDescendants(clone);
   const pairs = [];
+  if (source.slugToken) {
+    source.keyed.forEach((src, i) => {
+      const target = cloneKeyed[i];
+      if (!target || target.attr !== src.attr) return;
+      const tokens = baseKey(src.key).split("-");
+      if (!tokens.includes(source.slugToken)) return;
+      const next = tokens.map((t) => t === source.slugToken ? `x${newIndex}` : t).join("-") + keySuffix(src.key);
+      target.el.setAttribute(src.attr, next);
+      pairs.push({ from: src.key, to: next });
+    });
+    return pairs;
+  }
   source.keyed.forEach((src, i) => {
     const target = cloneKeyed[i];
     if (!target || target.attr !== src.attr) return;
@@ -5528,7 +5581,12 @@ function syncGroup(detected, state) {
     clone.setAttribute(ITEM_ATTR, `${detected.group}:${entry.index}`);
     rekeyItemClone(clone, source, sibling, detected.group, entry.index);
     source.el.insertAdjacentElement("afterend", clone);
-    byIndex.set(entry.index, { el: clone, index: entry.index, keyed: keyedDescendants(clone) });
+    byIndex.set(entry.index, {
+      el: clone,
+      index: entry.index,
+      keyed: keyedDescendants(clone),
+      ...source.slugToken ? { slugToken: `x${entry.index}` } : {}
+    });
   }
   const listed = state.items.map((e) => byIndex.get(e.index)?.el).filter((el) => !!el);
   let prev = null;
@@ -5630,9 +5688,16 @@ function applyItemOps(store, ops, currentContent) {
   const nodes = [];
   const added = [];
   let elements = syncGroup(detected, state);
+  const sluggy = detected.items.some((item) => item.slugToken);
+  const slugTokenOf = (index) => detected.items.find((item) => item.index === index)?.slugToken ?? (sluggy ? `x${index}` : void 0);
   for (const add of ops.add ?? []) {
     const sourceEl = elements.get(add.cloneOf);
-    const source = sourceEl ? { el: sourceEl, index: add.cloneOf, keyed: keyedDescendants(sourceEl) } : void 0;
+    const source = sourceEl ? {
+      el: sourceEl,
+      index: add.cloneOf,
+      keyed: keyedDescendants(sourceEl),
+      ...slugTokenOf(add.cloneOf) ? { slugToken: slugTokenOf(add.cloneOf) } : {}
+    } : void 0;
     if (!source) continue;
     const newIndex = Math.max(...state.items.map((e) => e.index), ...detected.items.map((i) => i.index)) + 1;
     const sibling = detected.items.find((item) => item.index !== add.cloneOf && !item.el.hasAttribute(ITEM_CLONE_ATTR)) ?? null;
@@ -5659,7 +5724,12 @@ function applyItemOps(store, ops, currentContent) {
     if (anchor) anchor.insertAdjacentElement("afterend", clone);
     else source.el.insertAdjacentElement("afterend", clone);
     elements.set(newIndex, clone);
-    detected.items.push({ el: clone, index: newIndex, keyed: cloneKeyed });
+    detected.items.push({
+      el: clone,
+      index: newIndex,
+      keyed: cloneKeyed,
+      ...sluggy ? { slugToken: `x${newIndex}` } : {}
+    });
     added.push(newIndex);
     elements = syncGroup(detected, state);
   }
@@ -6102,16 +6172,25 @@ function foldAlignIntoTrees(state, store) {
     nextTrees.set(id, fresh);
     return fresh;
   };
+  const stripChildAligns = (node) => node.children ? {
+    ...node,
+    children: node.children.map((child) => {
+      const { align: _dropped, ...rest } = child;
+      return stripChildAligns(rest);
+    })
+  } : node;
   const nodes = {};
   for (const [key, override] of Object.entries(store.nodes)) {
     const match = override.align !== void 0 && key.startsWith(AI_SLOT_KEY_PREFIX) ? key.match(/^ai\.(.+?)\.r(\d+)\.b(\d+)(?:\.|$)/) : null;
     const tree = match ? treeFor(match[1]) : void 0;
-    const block = match && tree ? tree.rows[Number(match[2])]?.blocks[Number(match[3])] : void 0;
-    if (!block) {
+    const row = match && tree ? tree.rows[Number(match[2])] : void 0;
+    const blockIdx = match ? Number(match[3]) : -1;
+    const block = row?.blocks[blockIdx];
+    if (!row || !block) {
       nodes[key] = override;
       continue;
     }
-    block.align = override.align;
+    row.blocks[blockIdx] = { ...stripChildAligns(block), align: override.align };
     const rest = { ...override };
     delete rest.align;
     if (Object.keys(rest).length > 0) nodes[key] = rest;
@@ -6124,7 +6203,7 @@ function foldAlignIntoTrees(state, store) {
       continue;
     }
     for (const row of tree.rows) {
-      for (const block of row.blocks) block.align = override.align;
+      row.blocks = row.blocks.map((block) => ({ ...stripChildAligns(block), align: override.align }));
     }
     const rest = { ...override };
     delete rest.align;
@@ -6355,6 +6434,20 @@ function applyBrandChrome(content) {
 
 // src/lib/brand-kit.ts
 var BRAND_KIT_KEY = "__ohw_brand";
+var appliedPalette = null;
+var appliedFonts = null;
+function getAppliedBrand() {
+  if (!appliedPalette) return null;
+  return appliedFonts ? { palette: appliedPalette, fonts: appliedFonts } : { palette: appliedPalette };
+}
+function brandForGenerated(fallback) {
+  const applied = getAppliedBrand();
+  if (!applied) return fallback ?? void 0;
+  return {
+    palette: applied.palette,
+    fonts: applied.fonts ?? fallback?.fonts ?? AI_DEFAULT_BRAND.fonts
+  };
+}
 var BRAND_VAR_PREFIX = "--ohw-brand-";
 var BRAND_VAR_NAMES = ["primary", "accent", "light", "dark", "surface", "border", "muted"].map(
   (role) => `${BRAND_VAR_PREFIX}${role}`
@@ -6658,6 +6751,8 @@ function loadCustomFonts(fonts) {
 function applyBrandToDom(kit) {
   const root = document.documentElement;
   if (!kit) {
+    appliedPalette = null;
+    appliedFonts = null;
     for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES, ...BUTTON_VAR_NAMES]) {
       root.style.removeProperty(name);
     }
@@ -6671,11 +6766,16 @@ function applyBrandToDom(kit) {
   const applyFonts = kit.touched ? kit.touched.fonts === true : true;
   if (kit.palette) {
     if (applyPalette) {
+      appliedPalette = kit.palette;
       for (const [name, value] of Object.entries(brandColorVars(kit.palette))) root.style.setProperty(name, value);
     } else {
+      appliedPalette = null;
       for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES]) root.style.removeProperty(name);
     }
   }
+  if (kit.fonts) {
+    appliedFonts = applyFonts ? kit.fonts : null;
+  }
   if (kit.buttons) {
     for (const name of BUTTON_VAR_NAMES) root.style.removeProperty(name);
     for (const [name, value] of Object.entries(buttonStyleVars({ ...kit, buttons: kit.buttons }))) root.style.setProperty(name, value);
@@ -7208,6 +7308,35 @@ function withThemeFonts(brand) {
     }
   };
 }
+function liveBrandColor(role, fallback) {
+  if (role === "dark") {
+    return `var(--brand-text, var(--ohw-brand-dark, var(--color-dark, ${fallback})))`;
+  }
+  if (role === "light") {
+    return `var(--brand-background, var(--ohw-brand-light, var(--color-light, ${fallback})))`;
+  }
+  return `var(--brand-${role}, var(--ohw-brand-${role}, var(--color-${role}, ${fallback})))`;
+}
+function withLivePalette(brand, source) {
+  const sourceOf = (color) => {
+    const value = color.trim().toLowerCase();
+    const entries = Object.entries(source.palette);
+    return entries.find(([, hex]) => hex.trim().toLowerCase() === value)?.[0] ?? null;
+  };
+  const map = (color) => {
+    const role = sourceOf(color);
+    return role ? liveBrandColor(role, source.palette[role]) : color;
+  };
+  return {
+    ...brand,
+    palette: {
+      dark: map(brand.palette.dark),
+      primary: map(brand.palette.primary),
+      accent: map(brand.palette.accent),
+      light: map(brand.palette.light)
+    }
+  };
+}
 function footerLogoStyle(fallbackFont, fallbackColor) {
   return {
     fontFamily: `var(--brand-font-heading, var(--font-heading, var(--font-display, ${quotedFont(fallbackFont)})))`,
@@ -7235,6 +7364,7 @@ var blockAlignStyle = (blockAlign) => blockAlign ? {
   alignItems: blockAlign === "left" ? "flex-start" : blockAlign === "right" ? "flex-end" : "center",
   textAlign: blockAlign
 } : {};
+var fullBleedBlock = (block) => block.type === "carousel" || block.type === "group" && str(block.slots?.layout) === "overlap";
 var featureLines = (value) => value.split(/\n|<br\s*\/?>/i).map((line) => line.trim()).filter(Boolean);
 var AI_MOBILE_CSS = [
   // Unscoped (applies at every viewport, not just mobile): re-enables pointer-events for the
@@ -7427,7 +7557,7 @@ function hexContrast(a, b) {
 function primaryButtonLabel(brand) {
   const darkC = hexContrast(brand.palette.primary, brand.palette.dark);
   const lightC = hexContrast(brand.palette.primary, AI_TREE_TOKENS.textPrimaryForeground);
-  if (darkC === null || lightC === null) return AI_TREE_TOKENS.textPrimaryForeground;
+  if (darkC === null || lightC === null) return `var(--brand-on-primary, ${AI_TREE_TOKENS.textPrimaryForeground})`;
   return darkC > lightC ? brand.palette.dark : AI_TREE_TOKENS.textPrimaryForeground;
 }
 function accentBandContext(brand) {
@@ -7451,7 +7581,11 @@ function readableForeground(bg, brand) {
   return darkC > lightC ? brand.palette.dark : AI_TREE_TOKENS.textPrimaryForeground;
 }
 function hexWithAlpha(hex, alpha) {
-  const m = /^#([0-9a-f]{6})$/i.exec(hex.trim());
+  const value = hex.trim();
+  if (value.startsWith("var(") || value.startsWith("color-mix(")) {
+    return `color-mix(in srgb, ${value} ${Math.round(alpha * 100)}%, transparent)`;
+  }
+  const m = /^#([0-9a-f]{6})$/i.exec(value);
   if (!m) return hex;
   const r2 = parseInt(m[1].slice(0, 2), 16);
   const g = parseInt(m[1].slice(2, 4), 16);
@@ -7750,12 +7884,10 @@ function ButtonEl({
         cursor: "pointer",
         whiteSpace: "nowrap",
         ...buttonShellStyle(ctx, variant, fullWidth),
-        ...tokenColorStyle ?? (secondary ? { border: `1px solid ${secondaryColor ?? ctx.brand.palette.dark}`, color: secondaryColor ?? ctx.brand.palette.dark } : (
-          // Off-band, prefer the template button's measured fill/label pair — a template may
-          // fill its CTAs with any token (hvac: accent bg, primary text). On an accent band
-          // the flipped palette keeps contrast, so the brand-driven colours stay.
-          !ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand) }
-        ))
+        ...tokenColorStyle ?? (secondary ? { border: `1px solid ${secondaryColor ?? ctx.brand.palette.dark}`, color: secondaryColor ?? ctx.brand.palette.dark } : {
+          background: ctx.brand.palette.primary,
+          color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
+        })
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
     }
@@ -9326,8 +9458,8 @@ function renderNode(node, ctx, path, ambientAlign) {
                     // layer (this group's i===0 sibling) can span edge-to-edge — reintroduced here,
                     // scoped to just the overlay text, so a heading/copy/CTA stack doesn't stretch
                     // the full section width instead of reading at the usual content width.
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { maxWidth: AI_TREE_TOKENS.sectionMaxWidth, margin: "0 auto", padding: "0 40px", width: "100%", boxSizing: "border-box" }, children: renderNode(child, ctx, `${path}.c${i}`, child.align ?? "center") })
-                  ) : renderNode(child, ctx, `${path}.c${i}`, i > 0 ? child.align ?? "center" : void 0),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { maxWidth: AI_TREE_TOKENS.sectionMaxWidth, margin: "0 auto", padding: "0 40px", width: "100%", boxSizing: "border-box" }, children: renderNode(child, ctx, `${path}.c${i}`, child.align ?? node.align ?? "center") })
+                  ) : renderNode(child, ctx, `${path}.c${i}`, i > 0 ? child.align ?? node.align ?? "center" : void 0),
                   i === 0 && needsBaseScrim && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "div",
                     {
@@ -9360,7 +9492,7 @@ function renderNode(node, ctx, path, ambientAlign) {
             // child otherwise stretches full-width (unchanged pre-existing behaviour).
             ...blockAlignStyle(child.align ?? ambientAlign)
           },
-          children: renderNode(child, ctx, `${path}.c${i}`, ambientAlign)
+          children: renderNode(child, ctx, `${path}.c${i}`, node.align ?? ambientAlign)
         },
         i
       ));
@@ -9390,8 +9522,20 @@ function renderNode(node, ctx, path, ambientAlign) {
     }
     case "button":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonEl, { slots, ctx, path });
-    case "button-row":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: AI_TREE_TOKENS.spacing6, justifyContent: "center" }, children: (node.children ?? []).map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonEl, { slots: child.slots ?? {}, ctx, path: `${path}.c${i}` }, i)) });
+    case "button-row": {
+      const rowAlign = node.align ?? ambientAlign;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: AI_TREE_TOKENS.spacing6,
+            justifyContent: rowAlign === "left" ? "flex-start" : rowAlign === "right" ? "flex-end" : "center"
+          },
+          children: (node.children ?? []).map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonEl, { slots: child.slots ?? {}, ctx, path: `${path}.c${i}` }, i))
+        }
+      );
+    }
     case "media":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         MediaBox,
@@ -9600,10 +9744,10 @@ function renderNode(node, ctx, path, ambientAlign) {
                       ...buttonShellStyle(ctx, "primary"),
                       // Brand-styled: the template button's measured fill/label pair off-band, else
                       // primary fill with a brand-derived label so it reads on custom palettes.
-                      ...buttonColorStyle(ctx, "primary") ?? (!ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : {
+                      ...buttonColorStyle(ctx, "primary") ?? {
                         background: ctx.brand.palette.primary,
                         color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
-                      })
+                      }
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
                   },
@@ -9647,7 +9791,7 @@ function AiTreeRenderer({
   }
   const resolvedBrand = withThemeFonts(brand ?? AI_DEFAULT_BRAND);
   const band = (tree.settings ?? {}).sectionBackground === "accent" ? accentBandContext(resolvedBrand) : null;
-  const blockBrand = band?.brand ?? resolvedBrand;
+  const blockBrand = withLivePalette(band?.brand ?? resolvedBrand, resolvedBrand);
   const placeholderMap = buildPlaceholderMap(tree);
   const hasOverlapBackground = tree.scaffold === "overlay" && tree.rows.some(
     (row) => (row.blocks ?? []).some((b) => b.type === "group" && str(b.slots?.layout) === "overlap")
@@ -9663,7 +9807,7 @@ function AiTreeRenderer({
     // standalone resolve), so generated galleries, image rows, and overlay backgrounds arrive with
     // photos instead of grey boxes.
     resolveMedia: (ref) => resolveMedia?.(ref) ?? placeholderMap[ref] ?? resolvePlaceholderRef(ref),
-    cardSurface: blockBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${blockBrand.palette.light} 90%, ${blockBrand.palette.dark})`,
+    cardSurface: resolvedBrand.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,
     sectionAlignment: (tree.settings ?? {}).alignment === "center" ? "center" : "left",
     buttonStyle,
@@ -9680,7 +9824,7 @@ function AiTreeRenderer({
   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;
+    const { dark, primary, light } = blockBrand.palette;
     switch (settings.sectionBackground) {
       case "surface":
         return `color-mix(in srgb, ${light} 94%, ${dark})`;
@@ -9772,7 +9916,7 @@ function AiTreeRenderer({
                       // its own horizontal `align`, which takes priority for that block.
                       ...fillHeight ? { display: "grid" } : {},
                       // Horizontal placement of the block's content within its column.
-                      ...cellAlignStyle(block.align),
+                      ...fullBleedBlock(block) ? {} : cellAlignStyle(block.align),
                       // 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" } : {}
@@ -9803,14 +9947,15 @@ function AiFooterRenderer({
   if (!isRenderableFooterTree(tree)) {
     return null;
   }
-  const resolvedBrand = withThemeFonts(brand ?? AI_DEFAULT_BRAND);
+  const hexBrand = withThemeFonts(brand ?? AI_DEFAULT_BRAND);
+  const resolvedBrand = withLivePalette(hexBrand, brand ?? AI_DEFAULT_BRAND);
   const bandBg = surface?.background ?? resolvedBrand.palette.dark;
   const bandText = surface?.text ?? resolvedBrand.palette.light;
   const onDark = surface ? isDarkColor(surface.background) : true;
   const ctx = {
     brand: resolvedBrand,
     resolveMedia: (ref) => resolveMedia?.(ref) ?? resolvePlaceholderRef(ref),
-    cardSurface: resolvedBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${resolvedBrand.palette.light} 90%, ${resolvedBrand.palette.dark})`,
+    cardSurface: hexBrand.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,
     logoUrl: logoUrl ?? null,
     resolvePageHref
@@ -10386,10 +10531,9 @@ function syncSoftRemovedGenerated() {
 }
 function applyAiSectionsToDom(state, options) {
   if (typeof document === "undefined") return;
-  const brandOverride = deriveBrandOverride();
   const templateBrand = deriveTemplateBrand();
   const templateButtonStyle = deriveTemplateButtonStyle();
-  const brandKey = brandOverride ? JSON.stringify(brandOverride) : "";
+  const brandKey = JSON.stringify(getAppliedBrand() ?? deriveBrandOverride() ?? null);
   const pagePath = window.location.pathname;
   const pageSections = state.sections.filter((entry) => (entry.path ?? "/") === pagePath);
   const activeIds = new Set(pageSections.map((entry) => entry.id));
@@ -10433,7 +10577,7 @@ function applyAiSectionsToDom(state, options) {
           AiTreeRenderer,
           {
             tree: entry.tree,
-            brand: brandOverride ?? entry.brand ?? options?.brand ?? templateBrand ?? void 0,
+            brand: brandForGenerated(deriveBrandOverride() ?? entry.brand ?? options?.brand ?? templateBrand),
             buttonStyle: templateButtonStyle,
             resolveMedia,
             editKeyPrefix: `ai.${entry.id}`
@@ -10599,7 +10743,7 @@ function applyAiFooterToDom(state, content) {
   const templateFooter = findTemplateFooter();
   captureTemplateFooterSurface(templateFooter);
   const surface = capturedSurface ?? null;
-  const brand = mountOptions.brand ?? deriveTemplateBrand();
+  const brand = brandForGenerated(mountOptions.brand ?? deriveTemplateBrand());
   const logoUrl = resolveLogoFromContent(content, templateFooter);
   const serialized = JSON.stringify(state) + JSON.stringify(brand ?? null) + (logoUrl ?? "") + JSON.stringify(surface) + JSON.stringify(defaultLegal());
   if (mounted2 && mounted2.serialized === serialized && mounted2.container.isConnected) {
@@ -18407,10 +18551,23 @@ function setPricingCardStyle(tree, index, style) {
   });
 }
 function setPricingCardFeaturedTag(tree, index, on) {
-  return withPricingCard(tree, index, (target) => {
+  return withPricingCollection(tree, (collection) => {
+    const children = collection.children;
+    if (index < 0 || index >= children.length) return false;
+    if (on) {
+      children.forEach((card, i) => {
+        if (i === index) return;
+        const prev2 = featuredOf(card);
+        if (prev2.enabled !== true || badgeOf(prev2).length === 0) return;
+        card.slots = card.slots ?? {};
+        card.slots.featured = composeFeatured(pricingCardStyleOf(prev2), false, badgeOf(prev2));
+      });
+    }
+    const target = children[index];
+    target.slots = target.slots ?? {};
     const prev = featuredOf(target);
-    const style = pricingCardStyleOf(prev);
-    target.slots.featured = composeFeatured(style, on, badgeOf(prev));
+    target.slots.featured = composeFeatured(pricingCardStyleOf(prev), on, badgeOf(prev));
+    return true;
   });
 }
 function pricingCardStyleOf(featured) {
@@ -18660,25 +18817,40 @@ function ToolbarSeparator() {
 }
 function CardStyleMenu({
   value,
-  onChange
+  onChange,
+  disabled = false
 }) {
   const current = PRICING_CARD_STYLES.find((s) => s.value === value) ?? PRICING_CARD_STYLES[0];
+  const trigger = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Card style",
+      disabled,
+      className: cn(
+        "inline-flex h-8 min-w-[110px] items-center gap-[7px] rounded-[6px] bg-transparent px-2 text-[13px] font-medium text-foreground transition-colors hover:bg-muted data-[state=open]:bg-muted",
+        disabled && "cursor-not-allowed opacity-40 hover:bg-transparent"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyleSwatch, { style: current.value }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex-1 text-left", children: current.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.ChevronDown, { size: 16, style: { pointerEvents: "none" } })
+      ]
+    }
+  );
+  if (disabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5 pl-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs text-muted-foreground opacity-50", children: "Card style" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "inline-flex", children: trigger }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: "Mark as featured to edit card style" })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5 pl-1.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs text-muted-foreground", children: "Card style" }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownMenu, { modal: false, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Card style",
-          className: "inline-flex h-8 min-w-[110px] items-center gap-[7px] rounded-[6px] bg-transparent px-2 text-[13px] font-medium text-foreground transition-colors hover:bg-muted data-[state=open]:bg-muted",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyleSwatch, { style: current.value }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex-1 text-left", children: current.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.ChevronDown, { size: 16, style: { pointerEvents: "none" } })
-          ]
-        }
-      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuTrigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuContent, { align: "end", sideOffset: 8, className: "w-[152px] min-w-[152px] p-1", children: PRICING_CARD_STYLES.map((style) => {
         const selected = style.value === value;
         return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -18742,23 +18914,35 @@ function PricingCardToolbar({
               mobile ? "flex-wrap justify-center" : "flex-nowrap"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardStyleMenu, { value: style, onChange: onSetStyle }),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   CustomToolbarButton,
                   {
                     type: "button",
-                    "aria-label": featuredTag ? "Remove featured tag" : "Add featured tag",
+                    "aria-label": featuredTag ? "Unmark as featured" : "Mark as featured",
                     "aria-pressed": featuredTag,
-                    active: featuredTag,
                     onClick: () => onSetFeaturedTag(!featuredTag),
-                    className: "size-8",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.Star, { size: 16, fill: featuredTag ? "currentColor" : "none", style: { pointerEvents: "none" } })
+                    className: "group size-8",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_lucide_react9.Star,
+                      {
+                        size: 16,
+                        fill: "currentColor",
+                        strokeWidth: 0,
+                        className: cn(
+                          "transition-colors",
+                          featuredTag ? "text-[#f59e0b] group-hover:text-[#d97706]" : "text-[#d6d3d1] group-hover:text-[#fbbf24]"
+                        ),
+                        style: { pointerEvents: "none" }
+                      }
+                    )
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: featuredTag ? "Remove featured tag" : "Add featured tag" })
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: featuredTag ? "Unmark featured" : "Mark as featured" })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolbarSeparator, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardStyleMenu, { value: style, onChange: onSetStyle, disabled: !featuredTag }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolbarSeparator, {}),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolbarAction, { label: "Add button", onClick: onAddButton, disabled: buttonCount >= 2, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ButtonGlyph, {}) }),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolbarAction, { label: "Remove button", onClick: onRemoveButton, disabled: buttonCount === 0, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "relative inline-flex", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ButtonGlyph, {}),
@@ -27325,7 +27509,7 @@ function OhhwellsBridge() {
       if (!subdomain) return {};
       return contentCache.get(subdomain) ?? {};
     };
-    const observeRoots = () => [document.querySelector("nav"), document.querySelector("footer")].filter(
+    const observeRoots = () => [document.querySelector("nav"), getFooterRoot()].filter(
       (el) => Boolean(el)
     );
     const roots = observeRoots();
@@ -27781,7 +27965,7 @@ function OhhwellsBridge() {
       {
         const formEl = getFormElement(target);
         const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
-        if (formEl && formKeyOf(formEl) && !onSuccessText) {
+        if (formEl && formKeyOf(formEl) && !onSuccessText && !isCtaButton(target)) {
           const fieldEl = getFieldWrapper(target);
           if (fieldEl) {
             const label = target.closest("label");
@@ -29690,6 +29874,7 @@ function OhhwellsBridge() {
       brandKitRef.current = value;
       applyBrandToDom(parseBrandKit(value));
       if (aiSectionsRef.current) applyAiSectionsToDom(parseAiSectionsState(aiSectionsRef.current));
+      applyAiFooterFromContent(editContentRef.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 });
@@ -30327,9 +30512,10 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:collect-section") return;
       const sectionId = e.data.sectionId;
       if (typeof sectionId !== "string" || !sectionId) return;
-      const sectionEl = document.querySelector(
+      const foundEl = document.querySelector(
         `[data-ohw-section="${CSS.escape(sectionId)}"]`
       );
+      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) })) : [];
@@ -32284,6 +32470,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
   dropIndicatorVariants,
   ensureFooterTree,
   filterAvailablePages,
+  foldAlignIntoTrees,
   getEditModeInitialState,
   insertFooterHours,
   isEditSessionActive,
@@ -32292,6 +32479,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
   isValidUrl,
   nextViableSlide,
   parseAiFooterState,
+  parseAiSectionsState,
   parseTarget,
   removeFooterBlock,
   resolveFooterCopyright,