@ohhwells/bridge 0.1.142 → 0.1.144

package/dist/index.js

@@ -1428,6 +1428,52 @@ function assignmentFor(el, content, tokens) {
 function labelElement(el) {
   return el.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ?? (el.matches('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ? el : null);
 }
+var BRAND_TRACK_PRECEDENCE = {
+  background: ["primary", "accent", "background", "surface", "on-primary", "text", "border", "text-muted"],
+  color: ["on-primary", "text", "primary", "accent", "text-muted", "background", "surface", "border"],
+  borderColor: ["border", "primary", "accent", "text", "on-primary", "background", "surface", "text-muted"]
+};
+var FONT_TRACK_VARS = ["--font-body", "--font-heading", "--font-display", "--brand-font-body", "--brand-font-heading"];
+function readRootVar(doc, name) {
+  const root = doc.documentElement;
+  return root.style.getPropertyValue(name).trim() || getComputedStyle(root).getPropertyValue(name).trim();
+}
+function sameColor(a, b) {
+  return Math.round(a.r) === Math.round(b.r) && Math.round(a.g) === Math.round(b.g) && Math.round(a.b) === Math.round(b.b) && Math.abs(a.a - b.a) < 0.02;
+}
+function brandTrackedColor(doc, color, roles) {
+  if (!color || color.includes("var(")) return color;
+  const parsed = parseColor(color);
+  if (!parsed || isTransparent(parsed)) return color;
+  for (const role of roles) {
+    const name = `--brand-${role}`;
+    const token = parseColor(readRootVar(doc, name));
+    if (token && !isTransparent(token) && sameColor(parsed, token)) return `var(${name}, ${color})`;
+  }
+  return color;
+}
+function brandTrackedChrome(doc, chrome) {
+  return {
+    ...chrome,
+    background: brandTrackedColor(doc, chrome.background, BRAND_TRACK_PRECEDENCE.background),
+    color: brandTrackedColor(doc, chrome.color, BRAND_TRACK_PRECEDENCE.color),
+    borderColor: brandTrackedColor(doc, chrome.borderColor, BRAND_TRACK_PRECEDENCE.borderColor)
+  };
+}
+function firstFamily(stack) {
+  const first = stack.split(",")[0]?.trim() ?? "";
+  return first.replace(/^['"]|['"]$/g, "").toLowerCase();
+}
+function brandTrackedFontFamily(doc, stack) {
+  if (!stack || stack.includes("var(")) return stack;
+  const family = firstFamily(stack);
+  if (!family) return stack;
+  for (const name of FONT_TRACK_VARS) {
+    const raw = readRootVar(doc, name);
+    if (raw && firstFamily(raw) === family) return `var(${name}, ${stack})`;
+  }
+  return stack;
+}
 var paintLockByEl = /* @__PURE__ */ new WeakMap();
 var paintObserverByEl = /* @__PURE__ */ new WeakMap();
 var paintingButton = false;
@@ -1454,7 +1500,7 @@ function paintButtonChrome(el, assignment, tokens) {
   el.style.borderRadius = px(origin.size.borderRadius);
   el.style.gap = geometry.gap;
   el.style.height = px(geometry.height);
-  el.style.fontFamily = typography.fontFamily;
+  el.style.fontFamily = brandTrackedFontFamily(el.ownerDocument, typography.fontFamily);
   el.style.fontWeight = typography.fontWeight;
   el.style.letterSpacing = typography.letterSpacing;
   el.style.textTransform = typography.textTransform;
@@ -1483,9 +1529,18 @@ function paintedTokensOf(el) {
   return paintLockByEl.get(el)?.tokens ?? null;
 }
 function applyButtonStyle(el, assignment, tokens) {
-  paintLockByEl.set(el, { assignment, tokens });
+  const doc = el.ownerDocument;
+  const tracked = {
+    ...tokens,
+    variants: {
+      primary: brandTrackedChrome(doc, tokens.variants.primary),
+      secondary: brandTrackedChrome(doc, tokens.variants.secondary),
+      ghost: brandTrackedChrome(doc, tokens.variants.ghost)
+    }
+  };
+  paintLockByEl.set(el, { assignment, tokens: tracked });
   paintingButton = true;
-  paintButtonChrome(el, assignment, tokens);
+  paintButtonChrome(el, assignment, tracked);
   paintingButton = false;
   guardTemplateHover(el);
 }
@@ -4939,10 +4994,9 @@ function getLinkHref3(el) {
 }
 function collectEditableNodes(extraContent, root = document) {
   const isScoped = root !== document;
-  const editableEls = Array.from(
-    root.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="form"])')
-  );
-  if (isScoped && root instanceof HTMLElement && root.matches('[data-ohw-editable]:not([data-ohw-editable="form"])')) {
+  const EDITABLE_SELECTOR = '[data-ohw-editable]:not([data-ohw-editable="form"]):not([data-ai-icon])';
+  const editableEls = Array.from(root.querySelectorAll(EDITABLE_SELECTOR));
+  if (isScoped && root instanceof HTMLElement && root.matches(EDITABLE_SELECTOR)) {
     editableEls.unshift(root);
   }
   const nodes = editableEls.map((el) => {
@@ -6209,6 +6263,281 @@ function reapRemovedAiSections(state, store, removedIds, excludeIds = /* @__PURE
   return { state: nextState, store: nextStore, reapedIds, slotPrefixes, changed: true };
 }
 
+// src/lib/ai-pricing-tree.ts
+var PRICING_MIN_CARDS = 1;
+var PRICING_MAX_CARDS = 4;
+function isPricingCard(node) {
+  return typeof node === "object" && node !== null && node.type === "card" && node.slots?.preset === "pricing";
+}
+function isPricingCollection(node) {
+  return node.type === "collection" && Array.isArray(node.children) && node.children.length > 0 && isPricingCard(node.children[0]);
+}
+function findCollection(node) {
+  if (isPricingCollection(node)) return node;
+  for (const child of node.children ?? []) {
+    const found = findCollection(child);
+    if (found) return found;
+  }
+  return null;
+}
+function findPricingCollection(tree) {
+  for (const row of tree.rows ?? []) {
+    for (const block of row.blocks ?? []) {
+      const found = findCollection(block);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function pricingCardCount(tree) {
+  return findPricingCollection(tree)?.children?.length ?? 0;
+}
+function withPricingCollection(tree, mutate) {
+  const next = JSON.parse(JSON.stringify(tree));
+  const collection = findPricingCollection(next);
+  if (!collection || !collection.children) return null;
+  for (const card of collection.children) {
+    if (isPricingCard(card)) upgradeLegacyPricingSlots(card);
+  }
+  return mutate(collection) ? next : null;
+}
+function upgradeLegacyPricingSlots(card) {
+  const slots = card.slots = card.slots ?? {};
+  if (typeof slots.features === "string") {
+    const rows = pricingFeatureList(card);
+    if (rows.length > 0) slots.features = rows.slice(0, PRICING_FEATURES_MAX);
+  }
+  if (slots.featured === true) slots.featured = { enabled: true };
+  else if (slots.featured === false) delete slots.featured;
+}
+function addPricingTier(tree) {
+  return withPricingCollection(tree, (collection) => {
+    const children = collection.children;
+    if (children.length >= PRICING_MAX_CARDS) return false;
+    const clone = JSON.parse(JSON.stringify(children[children.length - 1]));
+    clone.slots = clone.slots ?? {};
+    delete clone.slots.featured;
+    clone.slots.heading = "New tier";
+    children.push(clone);
+    collection.slots = { ...collection.slots, itemsPerRow: children.length };
+    return true;
+  });
+}
+function removePricingTier(tree, index) {
+  return withPricingCollection(tree, (collection) => {
+    const children = collection.children;
+    if (children.length <= PRICING_MIN_CARDS) return false;
+    if (index < 0 || index >= children.length) return false;
+    children.splice(index, 1);
+    collection.slots = { ...collection.slots, itemsPerRow: children.length };
+    return true;
+  });
+}
+var PRICING_CARD_STYLES = [
+  { value: "outline", label: "Outline", treatment: null },
+  { value: "lift", label: "Lift", treatment: "lifted" },
+  { value: "invert", label: "Invert", treatment: "inverted" },
+  { value: "header", label: "Header", treatment: "accent-header" }
+];
+var DEFAULT_FEATURED_BADGE = "Most popular";
+function featuredOf(target) {
+  const raw = target?.slots?.featured;
+  if (raw === true) return { enabled: true, treatment: "outlined" };
+  return typeof raw === "object" && raw !== null ? raw : {};
+}
+function badgeOf(featured) {
+  return typeof featured.badge === "string" ? featured.badge.trim() : "";
+}
+function pricingCardStyle(tree, index) {
+  const featured = featuredOf(findPricingCollection(tree)?.children?.[index]);
+  if (featured.enabled !== true) return "outline";
+  return PRICING_CARD_STYLES.find((s) => s.treatment === featured.treatment)?.value ?? "outline";
+}
+function pricingCardFeaturedTag(tree, index) {
+  const featured = featuredOf(findPricingCollection(tree)?.children?.[index]);
+  return featured.enabled === true && badgeOf(featured).length > 0;
+}
+function composeFeatured(style, tagOn, badgeText) {
+  const treatment = PRICING_CARD_STYLES.find((s) => s.value === style)?.treatment ?? null;
+  if (tagOn) return { enabled: true, badge: badgeText || DEFAULT_FEATURED_BADGE, treatment: treatment ?? "outlined" };
+  if (treatment) return { enabled: true, treatment };
+  return badgeText.length > 0 ? { enabled: false, badge: badgeText } : { enabled: false };
+}
+function withPricingCard(tree, index, mutate) {
+  return withPricingCollection(tree, (collection) => {
+    const children = collection.children;
+    if (index < 0 || index >= children.length) return false;
+    const target = children[index];
+    target.slots = target.slots ?? {};
+    mutate(target);
+    return true;
+  });
+}
+function setPricingCardStyle(tree, index, style) {
+  if (!PRICING_CARD_STYLES.some((s) => s.value === style)) return null;
+  return withPricingCard(tree, index, (target) => {
+    const prev = featuredOf(target);
+    const tagOn = prev.enabled === true && badgeOf(prev).length > 0;
+    target.slots.featured = composeFeatured(style, tagOn, badgeOf(prev));
+  });
+}
+function setPricingCardFeaturedTag(tree, index, on) {
+  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);
+    target.slots.featured = composeFeatured(pricingCardStyleOf(prev), on, badgeOf(prev));
+    return true;
+  });
+}
+function pricingCardStyleOf(featured) {
+  if (featured.enabled !== true) return "outline";
+  return PRICING_CARD_STYLES.find((s) => s.treatment === featured.treatment)?.value ?? "outline";
+}
+function addPricingCardButton(tree, index, label) {
+  return withPricingCollection(tree, (collection) => {
+    const children = collection.children;
+    if (index < 0 || index >= children.length) return false;
+    const target = children[index];
+    const buttons = (target.children ?? []).filter((c) => c.type === "button");
+    if (buttons.length >= 2) return false;
+    const hasPrimary = buttons.some((b) => b.slots?.variant === "primary");
+    target.children = [
+      ...target.children ?? [],
+      { type: "button", span: 12, slots: { label, href: "#", variant: hasPrimary ? "secondary" : "primary" } }
+    ];
+    return true;
+  });
+}
+function removePricingCardButton(tree, index) {
+  return withPricingCollection(tree, (collection) => {
+    const children = collection.children;
+    if (index < 0 || index >= children.length) return false;
+    const target = children[index];
+    const buttons = (target.children ?? []).filter((c) => c.type === "button");
+    if (buttons.length === 0) return false;
+    const lastButton = buttons[buttons.length - 1];
+    target.children = (target.children ?? []).filter((c) => c !== lastButton);
+    return true;
+  });
+}
+var PRICING_FEATURES_MIN = 1;
+var PRICING_FEATURES_MAX = 10;
+var PRICING_FEATURE_ICONS = [
+  "check",
+  "check-circle",
+  "x",
+  "star",
+  "zap",
+  "shield",
+  "clock",
+  "users",
+  "infinity"
+];
+function pricingFeatureList(target) {
+  const raw = target.slots?.features;
+  if (Array.isArray(raw)) {
+    return raw.filter((item) => !!item && typeof item === "object" && typeof item.text === "string").map((item) => ({
+      text: item.text,
+      ...typeof item.icon === "string" ? { icon: item.icon } : {},
+      ...typeof item.iconColor === "string" ? { iconColor: item.iconColor } : {}
+    }));
+  }
+  if (typeof raw === "string") {
+    return raw.split(/\n|<br\s*\/?>/i).map((line) => line.replace(/<[^>]+>/g, "").replace(/^[-*•]\s*/, "").trim().slice(0, 120)).filter(Boolean).map((text) => ({ text }));
+  }
+  return [];
+}
+function pricingCardFeatureCount(tree, index) {
+  const target = findPricingCollection(tree)?.children?.[index];
+  return target ? pricingFeatureList(target).length : 0;
+}
+function addPricingCardFeature(tree, index, text) {
+  return withPricingCollection(tree, (collection) => {
+    const children = collection.children;
+    if (index < 0 || index >= children.length) return false;
+    const target = children[index];
+    const features = pricingFeatureList(target);
+    if (features.length >= PRICING_FEATURES_MAX) return false;
+    target.slots = target.slots ?? {};
+    target.slots.features = [...features, { text }];
+    return true;
+  });
+}
+function setPricingCardFeatureIcon(tree, index, featureIndex, icon) {
+  if (!PRICING_FEATURE_ICONS.includes(icon)) return null;
+  return withPricingCollection(tree, (collection) => {
+    const children = collection.children;
+    if (index < 0 || index >= children.length) return false;
+    const target = children[index];
+    const features = pricingFeatureList(target);
+    if (featureIndex < 0 || featureIndex >= features.length) return false;
+    target.slots = target.slots ?? {};
+    target.slots.features = features.map((row, i) => i === featureIndex ? { ...row, icon } : row);
+    return true;
+  });
+}
+function removePricingCardFeature(tree, index) {
+  return withPricingCollection(tree, (collection) => {
+    const children = collection.children;
+    if (index < 0 || index >= children.length) return false;
+    const target = children[index];
+    const features = pricingFeatureList(target);
+    if (features.length <= PRICING_FEATURES_MIN) return false;
+    target.slots = target.slots ?? {};
+    target.slots.features = features.slice(0, -1);
+    return true;
+  });
+}
+
+// src/lib/ai-icon-edit.ts
+var FEATURE_ICON_PATH = /\.c(\d+)\.features\.(\d+)\.icon$/;
+var NODE_SEGMENT = /^[rbc]\d+$/;
+function nodeAtPath(tree, segments) {
+  if (segments.length < 2 || segments.some((s) => !NODE_SEGMENT.test(s))) return null;
+  if (!segments[0].startsWith("r") || !segments[1].startsWith("b")) return null;
+  let node = tree.rows?.[Number(segments[0].slice(1))]?.blocks?.[Number(segments[1].slice(1))];
+  for (const segment of segments.slice(2)) {
+    if (!segment.startsWith("c")) return null;
+    node = node?.children?.[Number(segment.slice(1))];
+  }
+  return node ?? null;
+}
+function applyIconNameToTree(tree, path, icon) {
+  const feature = path.match(FEATURE_ICON_PATH);
+  if (feature) {
+    return setPricingCardFeatureIcon(tree, Number(feature[1]), Number(feature[2]), icon);
+  }
+  return rewriteIconSlot(tree, path, `lucide:${icon}`);
+}
+function applyIconUploadToTree(tree, path, mediaRef) {
+  if (FEATURE_ICON_PATH.test(path)) return null;
+  return rewriteIconSlot(tree, path, `icon:${mediaRef}`);
+}
+function rewriteIconSlot(tree, path, ref) {
+  const segments = path.split(".");
+  const slot = segments.pop();
+  if (!slot || NODE_SEGMENT.test(slot)) return null;
+  const next = JSON.parse(JSON.stringify(tree));
+  const node = nodeAtPath(next, segments);
+  if (!node) return null;
+  const current = node.slots?.[slot];
+  if (typeof current !== "string" || !/^(lucide|simple|icon):/.test(current)) return null;
+  node.slots = { ...node.slots, [slot]: ref };
+  return next;
+}
+
 // src/lib/ai-footer-tree.ts
 var FOOTER_COLUMN_SPANS = [12, 6, 4, 3];
 var FOOTER_COLUMN_BLOCKS = [
@@ -6692,8 +7021,8 @@ function applyBrandToDom(kit) {
   if (kit.fonts) {
     appliedFonts = applyFonts ? kit.fonts : null;
   }
+  for (const name of BUTTON_VAR_NAMES) root.style.removeProperty(name);
   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);
   }
   syncButtonRules(kit.buttons ? kit : null);
@@ -7565,7 +7894,7 @@ function MediaBox({
   onError
 }) {
   const url = refValue ? ctx.resolveMedia(refValue) : null;
-  const isIcon = /^(lucide|simple):/.test(refValue);
+  const isIcon = /^(lucide|simple|icon):/.test(refValue);
   const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
   const editAttrs = ctx.keyFor && editPath && !isIcon ? {
     "data-ohw-key": ctx.keyFor(editPath),
@@ -7573,10 +7902,13 @@ function MediaBox({
   } : {};
   if (isIcon) {
     const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
+    const uploadedIconUrl = refValue.startsWith("icon:") ? ctx.resolveMedia(refValue.slice(5)) : null;
+    const iconEditAttrs = ctx.keyFor && editPath && genericImageEdit ? { "data-ohw-key": ctx.keyFor(editPath), "data-ohw-editable": "icon" } : {};
     return /* @__PURE__ */ jsx(
       "span",
       {
         "data-ai-icon": refValue,
+        ...iconEditAttrs,
         style: {
           display: "inline-flex",
           width: 48,
@@ -7585,7 +7917,7 @@ function MediaBox({
           justifyContent: "center",
           color: ctx.brand.palette.dark
         },
-        children: Icon ? /* @__PURE__ */ jsx(Icon, { size: 48, color: ctx.brand.palette.dark, strokeWidth: 1.5 }) : /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u25C6" })
+        children: uploadedIconUrl ? /* @__PURE__ */ jsx("img", { src: uploadedIconUrl, alt: "", style: { width: 48, height: 48, objectFit: "contain" } }) : Icon ? /* @__PURE__ */ jsx(Icon, { size: 48, color: ctx.brand.palette.dark, strokeWidth: 1.5 }) : /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u25C6" })
       }
     );
   }
@@ -8073,8 +8405,20 @@ function PricingCard({ node, ctx, path }) {
             /* @__PURE__ */ jsx("div", { "data-ai-features": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing4, padding: `${AI_TREE_TOKENS.spacing2}px 0` }, children: features.map((item, i) => {
               const Icon = lucideByName(item.icon || "check");
               const iconColor = pricingIconColor(item.iconColor, ctx.brand, fg);
+              const iconAttrs = ctx.keyFor && !item.html ? {
+                "data-ohw-key": ctx.keyFor(`${path}.features.${i}.icon`),
+                "data-ohw-editable": "icon"
+              } : {};
               return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: AI_TREE_TOKENS.spacing3 }, children: [
-                Icon && /* @__PURE__ */ jsx(Icon, { size: 20, color: iconColor }),
+                Icon && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-ai-icon": `lucide:${item.icon || "check"}`,
+                    ...iconAttrs,
+                    style: { display: "inline-flex", flexShrink: 0 },
+                    children: /* @__PURE__ */ jsx(Icon, { size: 20, color: iconColor })
+                  }
+                ),
                 item.html ? /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -10079,7 +10423,7 @@ function isChromeSection2(el) {
   if (CHROME_SECTION_IDS.has(el.getAttribute("data-ohw-section") ?? "")) return true;
   return el.tagName === "HEADER" || el.tagName === "FOOTER";
 }
-function readRootVar(name) {
+function readRootVar2(name) {
   if (typeof document === "undefined") return "";
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
 }
@@ -10119,14 +10463,14 @@ function humanizeFontFamily(name) {
   return name.replace(/^__/, "").replace(/_[0-9a-f]{6}$/i, "").replace(/_/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim().replace(/\s+/g, " ").replace(/(^|\s)([a-z])/g, (_, sep, c) => sep + c.toUpperCase());
 }
 function readFontVar(name) {
-  return humanizeFontFamily(primaryFontFamily(readRootVar(name)));
+  return humanizeFontFamily(primaryFontFamily(readRootVar2(name)));
 }
 function deriveBrandOverride() {
-  const dark = readRootVar("--ohw-brand-dark");
-  const primary = readRootVar("--ohw-brand-primary");
-  const light = readRootVar("--ohw-brand-light");
+  const dark = readRootVar2("--ohw-brand-dark");
+  const primary = readRootVar2("--ohw-brand-primary");
+  const light = readRootVar2("--ohw-brand-light");
   if (!dark || !primary || !light) return null;
-  const accent = readRootVar("--ohw-brand-accent");
+  const accent = readRootVar2("--ohw-brand-accent");
   const heading = readFontVar("--font-heading") || readFontVar("--font-display");
   const body = readFontVar("--font-body");
   return {
@@ -10138,11 +10482,11 @@ function deriveBrandOverride() {
   };
 }
 function deriveTemplateBrandLive() {
-  const primary = readRootVar("--brand-primary") || readRootVar("--color-primary");
-  const dark = readRootVar("--brand-text") || readRootVar("--color-dark");
-  const light = readRootVar("--brand-background") || readRootVar("--color-light");
+  const primary = readRootVar2("--brand-primary") || readRootVar2("--color-primary");
+  const dark = readRootVar2("--brand-text") || readRootVar2("--color-dark");
+  const light = readRootVar2("--brand-background") || readRootVar2("--color-light");
   if (!dark || !primary || !light) return null;
-  const accent = readRootVar("--brand-accent") || readRootVar("--color-accent");
+  const accent = readRootVar2("--brand-accent") || readRootVar2("--color-accent");
   const heading = readFontVar("--brand-font-heading") || readFontVar("--font-heading") || readFontVar("--font-display");
   const body = readFontVar("--brand-font-body") || readFontVar("--font-body");
   return {
@@ -18317,222 +18661,6 @@ function AiMediaStripOverlay({
 // src/ui/ai-section/AiPricingCardOverlay.tsx
 import { useCallback as useCallback4, useEffect as useEffect7, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState9 } from "react";
 import { Check as Check2, ChevronDown as ChevronDown3, Minus, Plus as Plus2, Star as Star2 } from "lucide-react";
-
-// src/lib/ai-pricing-tree.ts
-var PRICING_MIN_CARDS = 1;
-var PRICING_MAX_CARDS = 4;
-function isPricingCard(node) {
-  return typeof node === "object" && node !== null && node.type === "card" && node.slots?.preset === "pricing";
-}
-function isPricingCollection(node) {
-  return node.type === "collection" && Array.isArray(node.children) && node.children.length > 0 && isPricingCard(node.children[0]);
-}
-function findCollection(node) {
-  if (isPricingCollection(node)) return node;
-  for (const child of node.children ?? []) {
-    const found = findCollection(child);
-    if (found) return found;
-  }
-  return null;
-}
-function findPricingCollection(tree) {
-  for (const row of tree.rows ?? []) {
-    for (const block of row.blocks ?? []) {
-      const found = findCollection(block);
-      if (found) return found;
-    }
-  }
-  return null;
-}
-function pricingCardCount(tree) {
-  return findPricingCollection(tree)?.children?.length ?? 0;
-}
-function withPricingCollection(tree, mutate) {
-  const next = JSON.parse(JSON.stringify(tree));
-  const collection = findPricingCollection(next);
-  if (!collection || !collection.children) return null;
-  for (const card of collection.children) {
-    if (isPricingCard(card)) upgradeLegacyPricingSlots(card);
-  }
-  return mutate(collection) ? next : null;
-}
-function upgradeLegacyPricingSlots(card) {
-  const slots = card.slots = card.slots ?? {};
-  if (typeof slots.features === "string") {
-    const rows = pricingFeatureList(card);
-    if (rows.length > 0) slots.features = rows.slice(0, PRICING_FEATURES_MAX);
-  }
-  if (slots.featured === true) slots.featured = { enabled: true };
-  else if (slots.featured === false) delete slots.featured;
-}
-function addPricingTier(tree) {
-  return withPricingCollection(tree, (collection) => {
-    const children = collection.children;
-    if (children.length >= PRICING_MAX_CARDS) return false;
-    const clone = JSON.parse(JSON.stringify(children[children.length - 1]));
-    clone.slots = clone.slots ?? {};
-    delete clone.slots.featured;
-    clone.slots.heading = "New tier";
-    children.push(clone);
-    collection.slots = { ...collection.slots, itemsPerRow: children.length };
-    return true;
-  });
-}
-function removePricingTier(tree, index) {
-  return withPricingCollection(tree, (collection) => {
-    const children = collection.children;
-    if (children.length <= PRICING_MIN_CARDS) return false;
-    if (index < 0 || index >= children.length) return false;
-    children.splice(index, 1);
-    collection.slots = { ...collection.slots, itemsPerRow: children.length };
-    return true;
-  });
-}
-var PRICING_CARD_STYLES = [
-  { value: "outline", label: "Outline", treatment: null },
-  { value: "lift", label: "Lift", treatment: "lifted" },
-  { value: "invert", label: "Invert", treatment: "inverted" },
-  { value: "header", label: "Header", treatment: "accent-header" }
-];
-var DEFAULT_FEATURED_BADGE = "Most popular";
-function featuredOf(target) {
-  const raw = target?.slots?.featured;
-  if (raw === true) return { enabled: true, treatment: "outlined" };
-  return typeof raw === "object" && raw !== null ? raw : {};
-}
-function badgeOf(featured) {
-  return typeof featured.badge === "string" ? featured.badge.trim() : "";
-}
-function pricingCardStyle(tree, index) {
-  const featured = featuredOf(findPricingCollection(tree)?.children?.[index]);
-  if (featured.enabled !== true) return "outline";
-  return PRICING_CARD_STYLES.find((s) => s.treatment === featured.treatment)?.value ?? "outline";
-}
-function pricingCardFeaturedTag(tree, index) {
-  const featured = featuredOf(findPricingCollection(tree)?.children?.[index]);
-  return featured.enabled === true && badgeOf(featured).length > 0;
-}
-function composeFeatured(style, tagOn, badgeText) {
-  const treatment = PRICING_CARD_STYLES.find((s) => s.value === style)?.treatment ?? null;
-  if (tagOn) return { enabled: true, badge: badgeText || DEFAULT_FEATURED_BADGE, treatment: treatment ?? "outlined" };
-  if (treatment) return { enabled: true, treatment };
-  return badgeText.length > 0 ? { enabled: false, badge: badgeText } : { enabled: false };
-}
-function withPricingCard(tree, index, mutate) {
-  return withPricingCollection(tree, (collection) => {
-    const children = collection.children;
-    if (index < 0 || index >= children.length) return false;
-    const target = children[index];
-    target.slots = target.slots ?? {};
-    mutate(target);
-    return true;
-  });
-}
-function setPricingCardStyle(tree, index, style) {
-  if (!PRICING_CARD_STYLES.some((s) => s.value === style)) return null;
-  return withPricingCard(tree, index, (target) => {
-    const prev = featuredOf(target);
-    const tagOn = prev.enabled === true && badgeOf(prev).length > 0;
-    target.slots.featured = composeFeatured(style, tagOn, badgeOf(prev));
-  });
-}
-function setPricingCardFeaturedTag(tree, index, on) {
-  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);
-    target.slots.featured = composeFeatured(pricingCardStyleOf(prev), on, badgeOf(prev));
-    return true;
-  });
-}
-function pricingCardStyleOf(featured) {
-  if (featured.enabled !== true) return "outline";
-  return PRICING_CARD_STYLES.find((s) => s.treatment === featured.treatment)?.value ?? "outline";
-}
-function addPricingCardButton(tree, index, label) {
-  return withPricingCollection(tree, (collection) => {
-    const children = collection.children;
-    if (index < 0 || index >= children.length) return false;
-    const target = children[index];
-    const buttons = (target.children ?? []).filter((c) => c.type === "button");
-    if (buttons.length >= 2) return false;
-    const hasPrimary = buttons.some((b) => b.slots?.variant === "primary");
-    target.children = [
-      ...target.children ?? [],
-      { type: "button", span: 12, slots: { label, href: "#", variant: hasPrimary ? "secondary" : "primary" } }
-    ];
-    return true;
-  });
-}
-function removePricingCardButton(tree, index) {
-  return withPricingCollection(tree, (collection) => {
-    const children = collection.children;
-    if (index < 0 || index >= children.length) return false;
-    const target = children[index];
-    const buttons = (target.children ?? []).filter((c) => c.type === "button");
-    if (buttons.length === 0) return false;
-    const lastButton = buttons[buttons.length - 1];
-    target.children = (target.children ?? []).filter((c) => c !== lastButton);
-    return true;
-  });
-}
-var PRICING_FEATURES_MIN = 1;
-var PRICING_FEATURES_MAX = 10;
-function pricingFeatureList(target) {
-  const raw = target.slots?.features;
-  if (Array.isArray(raw)) {
-    return raw.filter((item) => !!item && typeof item === "object" && typeof item.text === "string").map((item) => ({
-      text: item.text,
-      ...typeof item.icon === "string" ? { icon: item.icon } : {},
-      ...typeof item.iconColor === "string" ? { iconColor: item.iconColor } : {}
-    }));
-  }
-  if (typeof raw === "string") {
-    return raw.split(/\n|<br\s*\/?>/i).map((line) => line.replace(/<[^>]+>/g, "").replace(/^[-*•]\s*/, "").trim().slice(0, 120)).filter(Boolean).map((text) => ({ text }));
-  }
-  return [];
-}
-function pricingCardFeatureCount(tree, index) {
-  const target = findPricingCollection(tree)?.children?.[index];
-  return target ? pricingFeatureList(target).length : 0;
-}
-function addPricingCardFeature(tree, index, text) {
-  return withPricingCollection(tree, (collection) => {
-    const children = collection.children;
-    if (index < 0 || index >= children.length) return false;
-    const target = children[index];
-    const features = pricingFeatureList(target);
-    if (features.length >= PRICING_FEATURES_MAX) return false;
-    target.slots = target.slots ?? {};
-    target.slots.features = [...features, { text }];
-    return true;
-  });
-}
-function removePricingCardFeature(tree, index) {
-  return withPricingCollection(tree, (collection) => {
-    const children = collection.children;
-    if (index < 0 || index >= children.length) return false;
-    const target = children[index];
-    const features = pricingFeatureList(target);
-    if (features.length <= PRICING_FEATURES_MIN) return false;
-    target.slots = target.slots ?? {};
-    target.slots.features = features.slice(0, -1);
-    return true;
-  });
-}
-
-// src/ui/ai-section/AiPricingCardOverlay.tsx
 import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var PRIMARY4 = "var(--ohw-primary, #0885FE)";
 var CHROME_SELECTOR = "[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review], [data-ohw-more-menu]";
@@ -23664,6 +23792,23 @@ function currentIconRef(el) {
   );
   return named ? `lucide:${named.slice("lucide-".length)}` : "";
 }
+function requestValidateTree5(postToParent2, tree) {
+  return new Promise((resolve) => {
+    const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    const timeout = window.setTimeout(() => {
+      window.removeEventListener("message", onMessage);
+      resolve({ ok: false, reasons: ["Validation request timed out."] });
+    }, 8e3);
+    function onMessage(e) {
+      if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
+      window.clearTimeout(timeout);
+      window.removeEventListener("message", onMessage);
+      resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
+    }
+    window.addEventListener("message", onMessage);
+    postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
+  });
+}
 function getEditMeasureEl(editable) {
   return editable.closest("[data-ohw-href-key]") ?? editable;
 }
@@ -28015,10 +28160,14 @@ function OhhwellsBridge() {
           e.preventDefault();
           e.stopPropagation();
           aiSectionApiRef.current?.selectFromElement(editable);
+          const aiIcon = editable.hasAttribute("data-ai-icon");
+          const featureIcon = aiIcon && /\.features\.\d+\.icon$/.test(editable.dataset.ohwKey ?? "");
           postToParentRef.current({
             type: "ow:icon-pick",
             key: editable.dataset.ohwKey ?? "",
-            current: currentIconRef(editable)
+            current: currentIconRef(editable),
+            ...aiIcon ? { iconMode: "name" } : {},
+            ...featureIcon ? { options: [...PRICING_FEATURE_ICONS] } : {}
           });
           return;
         }
@@ -29265,15 +29414,43 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:icon-markup") return;
       const { key, markup } = e.data;
       if (!key || typeof markup !== "string") return;
-      const targets = document.querySelectorAll(
-        `[data-ohw-key="${key}"][data-ohw-editable="icon"]`
-      );
+      const targets = Array.from(
+        document.querySelectorAll(`[data-ohw-key="${key}"][data-ohw-editable="icon"]`)
+      ).filter((el) => !el.hasAttribute("data-ai-icon"));
       if (!targets.length) return;
       targets.forEach((el) => {
         applyIconMarkup(el, markup);
       });
       postToParentRef.current({ type: "ow:change", nodes: [{ key, text: markup }], flush: true });
     };
+    const handleIconName = (e) => {
+      if (e.data?.type !== "ow:icon-name") return;
+      const { key, icon, url } = e.data;
+      const isName = typeof icon === "string" && /^[a-z0-9-]+$/.test(icon);
+      const isUpload = !isName && typeof url === "string" && /^https?:\/\/\S+$/i.test(url);
+      if (!key || !isName && !isUpload) return;
+      const state = parseAiSectionsState(aiSectionsRef.current);
+      const entry = state.sections.find((s) => key.startsWith(aiSlotKeyPrefixFor(s.id)));
+      if (!entry) return;
+      const path = key.slice(aiSlotKeyPrefixFor(entry.id).length);
+      const uploadRef = isUpload ? `icon-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}` : null;
+      const nextTree = uploadRef ? applyIconUploadToTree(entry.tree, path, uploadRef) : applyIconNameToTree(entry.tree, path, icon);
+      if (!nextTree) return;
+      void requestValidateTree5(postToParentRef.current, nextTree).then(({ ok }) => {
+        if (!ok) return;
+        applyTreeLocalRef.current?.({
+          id: entry.id,
+          mode: "replace",
+          targetSectionId: entry.id,
+          tree: nextTree,
+          label: entry.label,
+          media: uploadRef ? { ...entry.media, [uploadRef]: url } : entry.media,
+          ...entry.brand ? { brand: entry.brand } : {},
+          // The user is looking at the icon they just changed — no need to recenter on it.
+          skipScrollIntoView: true
+        });
+      });
+    };
     const handleImageUrl = (e) => {
       if (e.data?.type !== "ow:image-url") return;
       const { key, url } = e.data;
@@ -30722,6 +30899,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", handleSocialCancel);
     window.addEventListener("message", handleSocialUpdate);
     window.addEventListener("message", handleIconMarkup);
+    window.addEventListener("message", handleIconName);
     window.addEventListener("message", handleImageUrl);
     window.addEventListener("message", handleImageUploading);
     window.addEventListener("message", handleCarouselChange);
@@ -30806,6 +30984,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleSocialCancel);
       window.removeEventListener("message", handleSocialUpdate);
       window.removeEventListener("message", handleIconMarkup);
+      window.removeEventListener("message", handleIconName);
       window.removeEventListener("message", handleImageUrl);
       window.removeEventListener("message", handleImageUploading);
       window.removeEventListener("message", handleCarouselChange);
@@ -31131,7 +31310,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.141",
+        bridgeVersion: "0.1.143",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections