@ohhwells/bridge 0.1.134-next.365 → 0.1.134-next.368

package/dist/index.cjs

@@ -5924,6 +5924,7 @@ function applyStylesToDom(store) {
         section.setAttribute("data-ohw-style-bgcolor", "");
       }
       if (override.cardBackgroundColor !== void 0 && !isDrawerMarker) {
+        detectItemGroups(section);
         section.style.setProperty("--ohw-card-bg", override.cardBackgroundColor);
         section.setAttribute("data-ohw-style-cardbg", "");
       }
@@ -7949,6 +7950,21 @@ function PricingCard({ node, ctx, path }) {
   const fg = emphasis.fg;
   const features = pricingFeatureItems(slots.features);
   const buttons = (node.children ?? []).map((child, i) => ({ child, i })).filter((entry) => entry.child.type === "button");
+  const badge = featured.enabled && str(featured.badge) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...ctx.keyFor ? { "data-ohw-key": ctx.keyFor(`${path}.featured.badge`), "data-ohw-editable": "plain" } : {},
+      style: {
+        alignSelf: "flex-start",
+        padding: `${AI_TREE_TOKENS.spacing2 / 2}px ${AI_TREE_TOKENS.spacing3}px`,
+        borderRadius: 999,
+        background: ctx.brand.palette.primary,
+        color: primaryButtonLabel(ctx.brand),
+        ...typeStyle(AI_TREE_TOKENS.type.eyebrow, ctx.brand.fonts.body)
+      },
+      children: str(featured.badge)
+    }
+  ) : null;
   const headingBlock = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing2 }, children: [
     str(slots.heading) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
@@ -7998,32 +8014,31 @@ function PricingCard({ node, ctx, path }) {
         position: "relative"
       },
       children: [
-        featured.enabled && str(featured.badge) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            style: {
-              alignSelf: "flex-start",
-              padding: `${AI_TREE_TOKENS.spacing2 / 2}px ${AI_TREE_TOKENS.spacing3}px`,
-              borderRadius: 999,
-              background: ctx.brand.palette.primary,
-              color: primaryButtonLabel(ctx.brand),
-              ...typeStyle(AI_TREE_TOKENS.type.eyebrow, ctx.brand.fonts.body)
-            },
-            children: str(featured.badge)
-          }
-        ),
-        emphasis.headerBg ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            style: {
-              background: emphasis.headerBg,
-              margin: `-${AI_TREE_TOKENS.paddingBlock}px -${AI_TREE_TOKENS.paddingBlock}px 0`,
-              padding: AI_TREE_TOKENS.paddingBlock,
-              borderRadius: `${cardRadius(slots)}px ${cardRadius(slots)}px 0 0`
-            },
-            children: headingBlock
-          }
-        ) : headingBlock,
+        emphasis.headerBg ? (
+          // The badge rides inside the band so the tint runs from the card's top edge down
+          // through the price block, instead of starting underneath the badge.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                background: emphasis.headerBg,
+                margin: `-${AI_TREE_TOKENS.paddingBlock}px -${AI_TREE_TOKENS.paddingBlock}px 0`,
+                padding: AI_TREE_TOKENS.paddingBlock,
+                borderRadius: `${cardRadius(slots)}px ${cardRadius(slots)}px 0 0`,
+                display: "flex",
+                flexDirection: "column",
+                gap: AI_TREE_TOKENS.spacing8
+              },
+              children: [
+                badge,
+                headingBlock
+              ]
+            }
+          )
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          badge,
+          headingBlock
+        ] }),
         features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: { border: "none", borderTop: `1px solid ${fg}`, opacity: 0.2, margin: 0, width: "100%" } }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing4 }, children: [
@@ -18331,16 +18346,65 @@ function removePricingTier(tree, index) {
     return true;
   });
 }
-function setPricingCardFeatured(tree, index, patch) {
+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 ?? {};
-    target.slots.featured = { ...patch };
+    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 withPricingCard(tree, index, (target) => {
+    const prev = featuredOf(target);
+    const style = pricingCardStyleOf(prev);
+    target.slots.featured = composeFeatured(style, on, badgeOf(prev));
+  });
+}
+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;
@@ -18415,15 +18479,8 @@ function removePricingCardFeature(tree, index) {
 
 // src/ui/ai-section/AiPricingCardOverlay.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var EMPHASIS_TREATMENTS = [
-  { value: "outlined", label: "Outline" },
-  { value: "lifted", label: "Lift" },
-  { value: "inverted", label: "Invert" },
-  { value: "accent-header", label: "Header" }
-];
-var PRIMARY4 = "#0885FE";
-var OHW_BLUE2 = `var(--ohw-primary, ${PRIMARY4})`;
-var OHW_BLUE_DARK2 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY4}) 60%, #000000)`;
+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]";
 function findPricingCardElement(sectionId, index) {
   const sectionEl = findByInstanceId(sectionId);
   if (!sectionEl) return null;
@@ -18433,14 +18490,35 @@ function findPricingCardElement(sectionId, index) {
   }
   return null;
 }
-function readRect3(ref) {
-  const el = ref && findPricingCardElement(ref.sectionId, ref.index);
+function cardRefFromTarget(target) {
+  if (!(target instanceof Element)) return null;
+  if (target.closest(CHROME_SELECTOR)) return null;
+  const cardEl = target.closest("[data-ohw-pricing-card]");
+  if (!cardEl) return null;
+  const sectionEl = cardEl.closest("[data-ohw-section]");
+  const unit = sectionEl ? movableUnit(sectionEl) : null;
+  const sectionId = unit ? instanceIdOf(unit) || null : null;
+  const index = Number(cardEl.dataset.ohwPricingIndex);
+  if (!sectionId || Number.isNaN(index)) return null;
+  return { sectionId, index };
+}
+function sameRef(a, b) {
+  return a?.sectionId === b?.sectionId && a?.index === b?.index;
+}
+function rectOf(el) {
   if (!el) return null;
   const r2 = el.getBoundingClientRect();
   if (r2.width <= 0 || r2.height <= 0) return null;
   return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
 }
-function useLiveCardRect(ref) {
+function readRect3(ref) {
+  return rectOf(ref && findPricingCardElement(ref.sectionId, ref.index));
+}
+function readGridRect(ref) {
+  const card = ref && findPricingCardElement(ref.sectionId, ref.index);
+  return rectOf(card?.closest("[data-ohw-pricing-collection]") ?? card);
+}
+function useLiveCardRect(ref, grid = false) {
   const [rect, setRect] = (0, import_react11.useState)(null);
   (0, import_react11.useEffect)(() => {
     if (!ref) {
@@ -18448,7 +18526,7 @@ function useLiveCardRect(ref) {
       return;
     }
     const update = () => {
-      const next = readRect3(ref);
+      const next = grid ? readGridRect(ref) : readRect3(ref);
       setRect(
         (prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
       );
@@ -18463,9 +18541,49 @@ function useLiveCardRect(ref) {
       window.removeEventListener("resize", update);
       clearInterval(interval);
     };
-  }, [ref?.sectionId, ref?.index]);
+  }, [ref?.sectionId, ref?.index, grid]);
   return rect;
 }
+var TOOLBAR_GRID_GAP = 52;
+var TOOLBAR_GRID_GAP_MOBILE = 42;
+var TOOLBAR_EDGE_MARGIN2 = 4;
+function GridToolbarSlot({ gridRect, children }) {
+  const slotRef = (0, import_react11.useRef)(null);
+  const [shift, setShift] = (0, import_react11.useState)(0);
+  const centerX = gridRect.left + gridRect.width / 2;
+  (0, import_react11.useLayoutEffect)(() => {
+    const slot = slotRef.current;
+    if (!slot) return;
+    const clamp = () => {
+      const w = slot.offsetWidth;
+      if (w <= 0) return;
+      const half = w / 2;
+      const clamped = Math.max(TOOLBAR_EDGE_MARGIN2 + half, Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN2 - half));
+      setShift((prev) => Math.abs(prev - (clamped - centerX)) < 0.5 ? prev : clamped - centerX);
+    };
+    clamp();
+    const ro = new ResizeObserver(clamp);
+    ro.observe(slot);
+    return () => ro.disconnect();
+  }, [centerX, children]);
+  const mobile = window.innerWidth <= 480;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      ref: slotRef,
+      "data-ohw-bridge": "",
+      "data-ohw-item-interaction": "",
+      className: "pointer-events-auto fixed",
+      style: {
+        top: gridRect.top - (mobile ? TOOLBAR_GRID_GAP_MOBILE : TOOLBAR_GRID_GAP),
+        left: centerX + shift,
+        transform: "translate(-50%, -100%)",
+        zIndex: 2147483645
+      },
+      children
+    }
+  );
+}
 function requestValidateTree2(postToParent2, tree) {
   return new Promise((resolve) => {
     const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
@@ -18483,40 +18601,93 @@ function requestValidateTree2(postToParent2, tree) {
     postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
   });
 }
-function Pill2({
-  label,
-  onClick,
-  disabled,
-  active
-}) {
+function StyleSwatch({ style }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    "button",
+    "span",
     {
-      type: "button",
-      onClick,
-      disabled,
-      style: {
-        height: 28,
-        padding: "0 10px",
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        borderRadius: 999,
-        border: "none",
-        cursor: disabled ? "default" : "pointer",
-        background: active ? OHW_BLUE_DARK2 : "#ffffff",
-        color: active ? "#ffffff" : OHW_BLUE_DARK2,
-        opacity: disabled ? 0.4 : 1,
-        fontSize: 12,
-        lineHeight: "16px",
-        fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
-        whiteSpace: "nowrap",
-        flex: "0 0 auto"
-      },
-      children: label
+      "aria-hidden": true,
+      className: cn(
+        "inline-block h-4 w-[18px] shrink-0 rounded-[3px] border border-border bg-background",
+        style === "lift" && "border-transparent shadow-[0_3px_5px_rgba(0,0,0,0.22)]",
+        style === "invert" && "border-foreground bg-foreground",
+        style === "header" && "bg-[linear-gradient(var(--ohw-foreground,#0c0a09)_48%,var(--ohw-background,#ffffff)_48%)]"
+      )
     }
   );
 }
+function ButtonGlyph() {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", "aria-hidden": true, style: { pointerEvents: "none" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "0.75", y: "0.75", width: "16.5", height: "10.5", rx: "3", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M5.5 6H12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
+}
+function FeatureGlyph({ mode }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, style: { pointerEvents: "none" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "8", cy: "8", r: "7.25", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M5 8.2L7.2 10.3L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "13.5", cy: "13.5", r: "4.25", fill: "var(--ohw-background, #ffffff)", stroke: "var(--ohw-background, #ffffff)", strokeWidth: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "13.5", cy: "13.5", r: "3.75", fill: "var(--ohw-background, #ffffff)", stroke: PRIMARY4, strokeWidth: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M11.5 13.5H15.5", stroke: PRIMARY4, strokeWidth: "1.5", strokeLinecap: "round" }),
+    mode === "add" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M13.5 11.5V15.5", stroke: PRIMARY4, strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
+}
+function ToolbarAction({
+  label,
+  onClick,
+  disabled = false,
+  children
+}) {
+  const button = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CustomToolbarButton, { type: "button", "aria-label": label, disabled, onClick, className: "size-8", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "inline-flex", children: button }) : button }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: label })
+  ] });
+}
+function ToolbarSeparator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "aria-hidden": true, className: "mx-0.5 block h-6 w-px shrink-0 bg-border" });
+}
+function CardStyleMenu({
+  value,
+  onChange
+}) {
+  const current = PRICING_CARD_STYLES.find((s) => s.value === value) ?? PRICING_CARD_STYLES[0];
+  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)(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)(
+          DropdownMenuItem,
+          {
+            role: "menuitemradio",
+            "aria-checked": selected,
+            onSelect: () => onChange(style.value),
+            className: cn("grid grid-cols-[18px_1fr_16px] gap-2 py-2 pl-2 pr-2 text-[13px]", selected && "bg-muted"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyleSwatch, { style: style.value }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: style.label }),
+              selected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.Check, { size: 16, className: "text-bridge-primary" })
+            ]
+          },
+          style.value
+        );
+      }) })
+    ] })
+  ] });
+}
 function PricingCardToolbar({
   entry,
   index,
@@ -18524,8 +18695,8 @@ function PricingCardToolbar({
   error,
   onAddTier,
   onRemoveTier,
-  onToggleFeatured,
-  onSetTreatment,
+  onSetStyle,
+  onSetFeaturedTag,
   onAddButton,
   onRemoveButton,
   onAddFeature,
@@ -18533,55 +18704,66 @@ function PricingCardToolbar({
 }) {
   const collectionCount = pricingCardCount(entry.tree);
   const card = findPricingCardNode(entry.tree, index);
-  const featured = card?.slots?.featured;
-  const isFeatured = featured?.enabled === true;
   const buttonCount = (card?.children ?? []).filter((c) => c.type === "button").length;
   const featureCount = pricingCardFeatureCount(entry.tree, index);
-  const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  const style = pricingCardStyle(entry.tree, index);
+  const featuredTag = pricingCardFeaturedTag(entry.tree, index);
+  const mobile = window.innerWidth <= 480;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       "data-ohw-bridge": "",
       "data-ohw-toolbar": "",
       onMouseDown: (e) => e.stopPropagation(),
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 6,
-        alignItems: "center",
-        background: OHW_BLUE2,
-        padding: 8,
-        borderRadius: 12,
-        boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
-        pointerEvents: pending ? "none" : "auto",
-        opacity: pending ? 0.6 : 1,
-        // Only cap width on mobile, where the pill rows wrap — on desktop the row stays on one
-        // line and should size to fit it, not get clipped/overflow against a fixed cap.
-        maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
-      },
+      className: cn(
+        "flex flex-col items-center gap-1.5 font-sans",
+        pending && "pointer-events-none opacity-60"
+      ),
+      style: { maxWidth: mobile ? "calc(100vw - 24px)" : void 0 },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill2, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill2, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill2, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill2, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill2, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill2, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill2, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
-        ] }),
-        isFeatured && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          Pill2,
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          "div",
           {
-            label: t.label,
-            active: (featured?.treatment ?? "outlined") === t.value,
-            onClick: () => onSetTreatment(t.value)
-          },
-          t.value
-        )) }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
+            className: cn(
+              "flex items-center gap-1 rounded-[10px] border border-border bg-background p-1 whitespace-nowrap",
+              "shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)]",
+              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-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" } })
+                  }
+                ) }),
+                /* @__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)(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, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.Minus, { size: 10, strokeWidth: 2.5, className: "absolute -right-1.5 -top-1.5 rounded-full bg-background text-bridge-primary" })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolbarAction, { label: "Add feature", onClick: onAddFeature, disabled: featureCount >= 10, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FeatureGlyph, { mode: "add" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolbarAction, { label: "Remove feature", onClick: onRemoveFeature, disabled: featureCount <= 1, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FeatureGlyph, { mode: "remove" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolbarSeparator, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolbarAction, { label: "Add tier", onClick: onAddTier, disabled: collectionCount >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.Plus, { size: 16, style: { pointerEvents: "none" } }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolbarAction, { label: "Remove tier", onClick: onRemoveTier, disabled: collectionCount <= 1, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.Minus, { size: 16, style: { pointerEvents: "none" } }) })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "max-w-[260px] rounded-md bg-background px-2 py-1 text-center text-[11px] text-destructive shadow-sm", children: error })
       ]
     }
-  );
+  ) });
 }
 function findPricingCardNode(tree, index) {
   const stack = tree.rows.flatMap((row) => row.blocks);
@@ -18607,25 +18789,13 @@ function AiPricingCardOverlay({
   activeRef.current = active;
   (0, import_react11.useEffect)(() => {
     const onMove = (e) => {
+      const ref = cardRefFromTarget(e.target);
       const t = e.target;
-      if (!(t instanceof HTMLElement)) return;
-      if (t.closest("[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review]")) {
-        return;
-      }
-      const cardEl = t.closest("[data-ohw-pricing-card]");
-      if (!cardEl) {
-        setHover(null);
-        return;
-      }
-      const sectionEl = cardEl.closest("[data-ohw-section]");
-      const unit = sectionEl ? movableUnit(sectionEl) : null;
-      const sectionId = unit ? instanceIdOf(unit) || null : null;
-      const index = Number(cardEl.dataset.ohwPricingIndex);
-      if (!sectionId || Number.isNaN(index)) {
-        setHover(null);
-        return;
-      }
-      setHover({ sectionId, index });
+      const overEditable = Boolean(t?.closest?.("[data-ohw-editable], [data-ohw-role], a, button"));
+      setHover((prev) => {
+        const next = ref && !overEditable ? ref : null;
+        return sameRef(prev, next) ? prev : next;
+      });
     };
     const onLeave = () => setHover(null);
     document.addEventListener("mousemove", onMove, { passive: true });
@@ -18637,15 +18807,12 @@ function AiPricingCardOverlay({
   }, []);
   (0, import_react11.useEffect)(() => {
     const onClick = (e) => {
-      const current = activeRef.current;
-      if (!current) return;
       const t = e.target;
-      if (!(t instanceof HTMLElement)) return;
-      if (t.closest("[data-ohw-item-interaction]")) return;
-      const cardEl = findPricingCardElement(current.sectionId, current.index);
-      if (cardEl && cardEl.contains(t)) return;
-      setActive(null);
-      setError(null);
+      if (!(t instanceof Element)) return;
+      if (t.closest(CHROME_SELECTOR)) return;
+      const ref = cardRefFromTarget(t);
+      setActive((prev) => sameRef(prev, ref) ? prev : ref);
+      if (!ref || !sameRef(activeRef.current, ref)) setError(null);
     };
     document.addEventListener("click", onClick, true);
     return () => document.removeEventListener("click", onClick, true);
@@ -18663,6 +18830,7 @@ function AiPricingCardOverlay({
     const onKeyDown = (e) => {
       if (e.key !== "Escape") return;
       if (!activeRef.current) return;
+      if (document.querySelector('[data-ohw-more-menu][data-state="open"]')) return;
       setActive(null);
       setError(null);
     };
@@ -18708,72 +18876,52 @@ function AiPricingCardOverlay({
   );
   const activeEntry = active ? findEntry(active.sectionId) : null;
   const activeCardRect = useLiveCardRect(active);
-  const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
+  const activeGridRect = useLiveCardRect(active, true);
+  const hoverRect = useLiveCardRect(hover && !sameRef(hover, active) ? hover : null);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      "button",
-      {
-        type: "button",
-        "data-ohw-toolbar": "",
-        onClick: () => setActive(hover),
-        "aria-label": "Configure pricing tier",
-        style: {
-          position: "fixed",
-          top: hoverHandleRect.top + 8,
-          left: hoverHandleRect.left + hoverHandleRect.width - 36,
-          width: 28,
-          height: 28,
-          borderRadius: 8,
-          border: `1.5px dashed ${PRIMARY4}`,
-          background: "#ffffff",
-          color: PRIMARY4,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          zIndex: 2147483643,
-          fontSize: 14,
-          fontWeight: 700
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.Star, { size: 14, style: { pointerEvents: "none" } })
-      }
-    ),
-    activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      ItemInteractionLayer,
-      {
-        rect: activeCardRect,
-        state: "active-top",
-        toolbar: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          PricingCardToolbar,
-          {
-            entry: activeEntry,
-            index: active.index,
-            pending,
-            error,
-            onAddTier: () => runMutation(active.sectionId, addPricingTier),
-            onRemoveTier: () => {
-              void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
-                (applied) => {
-                  if (applied) setActive(null);
-                }
-              );
-            },
-            onToggleFeatured: (enabled) => runMutation(
-              active.sectionId,
-              (tree) => setPricingCardFeatured(tree, active.index, { enabled })
-            ),
-            onSetTreatment: (treatment) => runMutation(
-              active.sectionId,
-              (tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
-            ),
-            onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
-            onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
-            onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
-            onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
-          }
-        )
-      }
-    )
+    hoverRect && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemInteractionLayer, { rect: hoverRect, state: "hover" }),
+    activeCardRect && activeGridRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemInteractionLayer, { rect: activeCardRect, state: "active-top" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GridToolbarSlot, { gridRect: activeGridRect, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        PricingCardToolbar,
+        {
+          entry: activeEntry,
+          index: active.index,
+          pending,
+          error,
+          onAddTier: () => runMutation(active.sectionId, addPricingTier),
+          onRemoveTier: () => {
+            void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
+              (applied) => {
+                if (applied) setActive(null);
+              }
+            );
+          },
+          onSetFeaturedTag: (on) => runMutation(active.sectionId, (tree) => setPricingCardFeaturedTag(tree, active.index, on)),
+          onSetStyle: (style) => runMutation(active.sectionId, (tree) => setPricingCardStyle(tree, active.index, style)),
+          onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
+          onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
+          onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
+          onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "div",
+        {
+          "data-ohw-bridge": "",
+          "data-ohw-item-interaction": "",
+          "aria-hidden": true,
+          className: "pointer-events-none fixed rounded-[4px] px-[7px] py-[3px] font-sans text-[11px] font-medium leading-none text-primary-foreground whitespace-nowrap",
+          style: {
+            top: activeCardRect.top + activeCardRect.height + 10,
+            left: activeCardRect.left - 5,
+            background: PRIMARY4,
+            zIndex: 2147483644
+          },
+          children: "Pricing card"
+        }
+      )
+    ] })
   ] });
 }
 
@@ -18852,8 +19000,8 @@ function extractYouTubeId(input) {
 // src/ui/ai-section/AiVideoOverlay.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var PRIMARY5 = "#0885FE";
-var OHW_BLUE3 = `var(--ohw-primary, ${PRIMARY5})`;
-var OHW_BLUE_DARK3 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY5}) 60%, #000000)`;
+var OHW_BLUE2 = `var(--ohw-primary, ${PRIMARY5})`;
+var OHW_BLUE_DARK2 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY5}) 60%, #000000)`;
 function findVideoBlockElement(sectionId, path) {
   const sectionEl = findByInstanceId(sectionId);
   if (!sectionEl) return null;
@@ -18913,7 +19061,7 @@ function requestValidateTree3(postToParent2, tree) {
     postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
   });
 }
-function Pill3({
+function Pill2({
   label,
   onClick,
   disabled
@@ -18934,7 +19082,7 @@ function Pill3({
         border: "none",
         cursor: disabled ? "default" : "pointer",
         background: "#ffffff",
-        color: OHW_BLUE_DARK3,
+        color: OHW_BLUE_DARK2,
         opacity: disabled ? 0.4 : 1,
         fontSize: 12,
         lineHeight: "16px",
@@ -18999,7 +19147,7 @@ function VideoUrlInput({ value, onCommit }) {
             {
               style: {
                 flex: "0 0 auto",
-                color: OHW_BLUE_DARK3,
+                color: OHW_BLUE_DARK2,
                 fontSize: 10,
                 lineHeight: "16px",
                 fontWeight: 700,
@@ -19068,7 +19216,7 @@ function VideoToolbar({
         gap: 6,
         alignItems: "center",
         width: 280,
-        background: OHW_BLUE3,
+        background: OHW_BLUE2,
         padding: 8,
         borderRadius: 12,
         boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
@@ -19077,7 +19225,7 @@ function VideoToolbar({
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VideoUrlInput, { value: videoId, onCommit: onSetVideoId }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Pill3, { label: "Remove video", onClick: onRemove, disabled: !videoId }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Pill2, { label: "Remove video", onClick: onRemove, disabled: !videoId }),
         error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
       ]
     }
@@ -19312,8 +19460,8 @@ function setCarouselAutoplay(tree, on) {
 // src/ui/ai-section/AiFadeCarouselOverlay.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var PRIMARY6 = "#0885FE";
-var OHW_BLUE4 = `var(--ohw-primary, ${PRIMARY6})`;
-var OHW_BLUE_DARK4 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY6}) 60%, #000000)`;
+var OHW_BLUE3 = `var(--ohw-primary, ${PRIMARY6})`;
+var OHW_BLUE_DARK3 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY6}) 60%, #000000)`;
 function findCarouselItemElement(sectionId, index) {
   const sectionEl = findByInstanceId(sectionId);
   if (!sectionEl) return null;
@@ -19392,7 +19540,7 @@ function requestAssetPick2(postToParent2) {
     postToParent2({ type: "ow:asset-pick", id });
   });
 }
-function Pill4({ label, onClick, disabled }) {
+function Pill3({ label, onClick, disabled }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",
     {
@@ -19409,7 +19557,7 @@ function Pill4({ label, onClick, disabled }) {
         border: "none",
         cursor: disabled ? "default" : "pointer",
         background: "#ffffff",
-        color: OHW_BLUE_DARK4,
+        color: OHW_BLUE_DARK3,
         opacity: disabled ? 0.4 : 1,
         fontSize: 12,
         lineHeight: "16px",
@@ -19446,7 +19594,7 @@ function TogglePill({
         border: "none",
         cursor: disabled ? "default" : "pointer",
         background: "#ffffff",
-        color: OHW_BLUE_DARK4,
+        color: OHW_BLUE_DARK3,
         opacity: disabled ? 0.4 : 1,
         fontSize: 12,
         lineHeight: "16px",
@@ -19469,7 +19617,7 @@ function TogglePill({
               // Off is a grey track, not a washed-out blue: the pill's own white background already
               // carries the brand colour in the text, and a pale blue track next to it read as
               // "disabled control" rather than "switch that is off".
-              background: on ? OHW_BLUE_DARK4 : "#CBD5E1",
+              background: on ? OHW_BLUE_DARK3 : "#CBD5E1",
               transition: "background 120ms ease"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -19512,7 +19660,7 @@ function CarouselSlideToolbar({
         flexDirection: "column",
         gap: 6,
         alignItems: "center",
-        background: OHW_BLUE4,
+        background: OHW_BLUE3,
         padding: 8,
         borderRadius: 12,
         boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
@@ -19525,7 +19673,7 @@ function CarouselSlideToolbar({
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Pill4, { label: "Change Image", onClick: onChangeImage }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Pill3, { label: "Change Image", onClick: onChangeImage }),
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TogglePill, { label: "Autoplay", on: autoplay, onToggle: onToggleAutoplay })
         ] }),
         error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
@@ -24173,7 +24321,7 @@ function applyVisibleViewport(el, parentScroll) {
   el.style.top = `${top}px`;
   el.style.height = `${height}px`;
 }
-var TOOLBAR_EDGE_MARGIN2 = 4;
+var TOOLBAR_EDGE_MARGIN3 = 4;
 function clampToolbarToClip(top, transform, rect, clip, approxH, gap) {
   const isAbove = transform.includes("translateY(-100%)");
   let visualTop = isAbove ? top - approxH : top;
@@ -24200,8 +24348,8 @@ function clampToolbarToClip(top, transform, rect, clip, approxH, gap) {
 function clampToolbarLeft(centerX, toolbarWidth) {
   const half = toolbarWidth / 2;
   return Math.max(
-    TOOLBAR_EDGE_MARGIN2 + half,
-    Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN2 - half)
+    TOOLBAR_EDGE_MARGIN3 + half,
+    Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN3 - half)
   );
 }
 function calcToolbarPos(rect, parentScroll, toolbarW = 306) {