@ohhwells/bridge 0.1.141 → 0.1.143

package/dist/index.js

@@ -1256,15 +1256,25 @@ function readAssignments(content) {
 function cssLength(style, prop) {
   return style.getPropertyValue(prop) || "0px";
 }
+function withTransitionsSettled(el, read) {
+  const prior = el.style.getPropertyValue("transition");
+  const priority = el.style.getPropertyPriority("transition");
+  el.style.setProperty("transition", "none", "important");
+  try {
+    return read(getComputedStyle(el));
+  } finally {
+    if (prior) el.style.setProperty("transition", prior, priority);
+    else el.style.removeProperty("transition");
+  }
+}
 function readVariantSample(el) {
-  const style = getComputedStyle(el);
-  return {
+  return withTransitionsSettled(el, (style) => ({
     background: style.backgroundColor,
     color: style.color,
     borderColor: style.borderTopColor,
     borderWidth: style.borderTopWidth,
     className: el.className || ""
-  };
+  }));
 }
 function readSizeSample(el) {
   const style = getComputedStyle(el);
@@ -4929,10 +4939,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) => {
@@ -6199,6 +6208,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 = [
@@ -7555,7 +7839,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),
@@ -7563,10 +7847,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,
@@ -7575,7 +7862,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" })
       }
     );
   }
@@ -8063,8 +8350,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",
                   {
@@ -10187,38 +10486,39 @@ function deriveTemplateButtonStyle() {
     el.querySelectorAll("[data-ohw-editable]").length <= 1
   );
   const isFilled = (el) => {
-    const bg = getComputedStyle(el).backgroundColor;
+    const bg = withTransitionsSettled(el, (s) => s.backgroundColor);
     if (!bg || bg === "transparent") return false;
     const alpha = bg.match(/rgba?\([^)]*,\s*([\d.]+)\)$/);
     return !alpha || parseFloat(alpha[1]) > 0;
   };
   const btn = candidates.find(isFilled) ?? candidates[0];
   if (!btn) return null;
-  const cs = getComputedStyle(btn);
-  const filled = isFilled(btn);
-  const corners = [
-    cs.borderTopLeftRadius,
-    cs.borderTopRightRadius,
-    cs.borderBottomRightRadius,
-    cs.borderBottomLeftRadius
-  ].map((v) => v || "0px");
-  const radius = corners.every((v) => v === corners[0]) ? corners[0] : corners.join(" ");
-  const px2 = (v) => parseFloat(v) || 0;
-  const lineHeight = px2(cs.lineHeight) || px2(cs.fontSize) * 1.2;
-  const contentH = btn.getBoundingClientRect().height - px2(cs.borderTopWidth) - px2(cs.borderBottomWidth);
-  const impliedY = Math.round(Math.max(0, (contentH - lineHeight) / 2));
-  const padY = Math.max(px2(cs.paddingTop), px2(cs.paddingBottom), impliedY);
-  const padX = Math.max(px2(cs.paddingLeft), px2(cs.paddingRight));
-  return {
-    radius: radius || "10px",
-    padding: `${padY}px ${padX}px`,
-    ...filled ? { background: cs.backgroundColor, color: cs.color } : {},
-    fontFamily: cs.fontFamily || "",
-    fontSize: cs.fontSize || "",
-    fontWeight: cs.fontWeight || "",
-    letterSpacing: cs.letterSpacing || "",
-    textTransform: cs.textTransform || ""
-  };
+  return withTransitionsSettled(btn, (cs) => {
+    const filled = isFilled(btn);
+    const corners = [
+      cs.borderTopLeftRadius,
+      cs.borderTopRightRadius,
+      cs.borderBottomRightRadius,
+      cs.borderBottomLeftRadius
+    ].map((v) => v || "0px");
+    const radius = corners.every((v) => v === corners[0]) ? corners[0] : corners.join(" ");
+    const px2 = (v) => parseFloat(v) || 0;
+    const lineHeight = px2(cs.lineHeight) || px2(cs.fontSize) * 1.2;
+    const contentH = btn.getBoundingClientRect().height - px2(cs.borderTopWidth) - px2(cs.borderBottomWidth);
+    const impliedY = Math.round(Math.max(0, (contentH - lineHeight) / 2));
+    const padY = Math.max(px2(cs.paddingTop), px2(cs.paddingBottom), impliedY);
+    const padX = Math.max(px2(cs.paddingLeft), px2(cs.paddingRight));
+    return {
+      radius: radius || "10px",
+      padding: `${padY}px ${padX}px`,
+      ...filled ? { background: cs.backgroundColor, color: cs.color } : {},
+      fontFamily: cs.fontFamily || "",
+      fontSize: cs.fontSize || "",
+      fontWeight: cs.fontWeight || "",
+      letterSpacing: cs.letterSpacing || "",
+      textTransform: cs.textTransform || ""
+    };
+  });
 }
 var mounted = /* @__PURE__ */ new Map();
 function findTemplateSection(id) {
@@ -18306,222 +18606,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]";
@@ -23653,6 +23737,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;
 }
@@ -28004,10 +28105,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;
         }
@@ -29254,15 +29359,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;
@@ -30711,6 +30844,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);
@@ -30795,6 +30929,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);
@@ -31120,7 +31255,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.140",
+        bridgeVersion: "0.1.142",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections