@ohhwells/bridge 0.1.139-next.376 → 0.1.140

package/dist/index.js

@@ -5204,21 +5204,19 @@ function findIndexSegment(keys) {
   if (len < 2 || tokenLists.some((t) => t.length !== len)) return null;
   let position = -1;
   for (let p = 0; p < len; p++) {
-    const values2 = tokenLists.map((t) => t[p]);
-    const allSame = values2.every((v) => v === values2[0]);
+    const values = tokenLists.map((t) => t[p]);
+    const allSame = values.every((v) => v === values[0]);
     if (allSame) continue;
-    if (position !== -1) return null;
+    const allNumeric = values.every((v) => /^\d+$/.test(v));
+    if (!allNumeric || position !== -1) return null;
     position = p;
   }
   if (position === -1) return null;
-  const values = tokenLists.map((t) => t[position]);
-  const numericCount = values.filter((v) => /^\d+$/.test(v)).length;
-  if (numericCount !== 0 && numericCount !== values.length) return null;
-  if (numericCount === 0 && position === len - 1) return null;
   const group = tokenLists[0].slice(0, position).join("-");
   if (!group) return null;
-  if (new Set(values).size !== values.length) return null;
-  return numericCount === values.length ? { position, group } : { position, group, slug: true };
+  const indices = tokenLists.map((t) => parseInt(t[position], 10));
+  if (new Set(indices).size !== indices.length) return null;
+  return { position, group };
 }
 function singleIndexSegment(key) {
   const tokens = baseKey(key).split("-");
@@ -5264,19 +5262,7 @@ function detectItemGroups(sectionEl) {
         list.push(m);
         byShape.set(shape, list);
       }
-      const shaped = Array.from(byShape.values());
-      clusters.push(...shaped.filter((c) => c.length >= 2));
-      const singles = shaped.filter((c) => c.length === 1).map((c) => c[0]);
-      const bySlugShape = /* @__PURE__ */ new Map();
-      for (const m of singles) {
-        const primary = primaryKey(keyedDescendants(m));
-        const tokens = baseKey(primary ?? "").split("-");
-        const slugShape = `${tokens.length}|${tokens[0]}|${tokens[tokens.length - 1]}`;
-        const list = bySlugShape.get(slugShape) ?? [];
-        list.push(m);
-        bySlugShape.set(slugShape, list);
-      }
-      clusters.push(...Array.from(bySlugShape.values()));
+      clusters.push(...Array.from(byShape.values()));
     }
     for (const members of clusters) {
       const keyedPerMember = members.map((m) => keyedDescendants(m));
@@ -5287,28 +5273,11 @@ function detectItemGroups(sectionEl) {
       const dedupeKey = `${segment.group}`;
       if (seenParents.has(dedupeKey)) continue;
       seenParents.add(dedupeKey);
-      let items;
-      if (segment.slug) {
-        const tokens = members.map((_, i) => baseKey(primaries[i]).split("-")[segment.position]);
-        let nextOriginal = 1;
-        const indices = tokens.map((t) => {
-          const cloneMatch = t.match(/^x(\d+)$/);
-          return cloneMatch ? parseInt(cloneMatch[1], 10) : nextOriginal++;
-        });
-        if (new Set(indices).size !== indices.length) continue;
-        items = members.map((el, i) => ({
-          el,
-          index: indices[i],
-          keyed: keyedPerMember[i],
-          slugToken: tokens[i]
-        }));
-      } else {
-        items = members.map((el, i) => ({
-          el,
-          index: indexFromKey(primaries[i], segment.position),
-          keyed: keyedPerMember[i]
-        }));
-      }
+      const items = members.map((el, i) => ({
+        el,
+        index: indexFromKey(primaries[i], segment.position),
+        keyed: keyedPerMember[i]
+      }));
       groups.push({ group: segment.group, parent, nested: false, items });
     }
   }
@@ -5432,18 +5401,6 @@ function rekeyItemClone(clone, source, sibling, group, newIndex) {
   const delta = newIndex - source.index;
   const cloneKeyed = keyedDescendants(clone);
   const pairs = [];
-  if (source.slugToken) {
-    source.keyed.forEach((src, i) => {
-      const target = cloneKeyed[i];
-      if (!target || target.attr !== src.attr) return;
-      const tokens = baseKey(src.key).split("-");
-      if (!tokens.includes(source.slugToken)) return;
-      const next = tokens.map((t) => t === source.slugToken ? `x${newIndex}` : t).join("-") + keySuffix(src.key);
-      target.el.setAttribute(src.attr, next);
-      pairs.push({ from: src.key, to: next });
-    });
-    return pairs;
-  }
   source.keyed.forEach((src, i) => {
     const target = cloneKeyed[i];
     if (!target || target.attr !== src.attr) return;
@@ -5487,12 +5444,7 @@ function syncGroup(detected, state) {
     clone.setAttribute(ITEM_ATTR, `${detected.group}:${entry.index}`);
     rekeyItemClone(clone, source, sibling, detected.group, entry.index);
     source.el.insertAdjacentElement("afterend", clone);
-    byIndex.set(entry.index, {
-      el: clone,
-      index: entry.index,
-      keyed: keyedDescendants(clone),
-      ...source.slugToken ? { slugToken: `x${entry.index}` } : {}
-    });
+    byIndex.set(entry.index, { el: clone, index: entry.index, keyed: keyedDescendants(clone) });
   }
   const listed = state.items.map((e) => byIndex.get(e.index)?.el).filter((el) => !!el);
   let prev = null;
@@ -5594,16 +5546,9 @@ function applyItemOps(store, ops, currentContent) {
   const nodes = [];
   const added = [];
   let elements = syncGroup(detected, state);
-  const sluggy = detected.items.some((item) => item.slugToken);
-  const slugTokenOf = (index) => detected.items.find((item) => item.index === index)?.slugToken ?? (sluggy ? `x${index}` : void 0);
   for (const add of ops.add ?? []) {
     const sourceEl = elements.get(add.cloneOf);
-    const source = sourceEl ? {
-      el: sourceEl,
-      index: add.cloneOf,
-      keyed: keyedDescendants(sourceEl),
-      ...slugTokenOf(add.cloneOf) ? { slugToken: slugTokenOf(add.cloneOf) } : {}
-    } : void 0;
+    const source = sourceEl ? { el: sourceEl, index: add.cloneOf, keyed: keyedDescendants(sourceEl) } : void 0;
     if (!source) continue;
     const newIndex = Math.max(...state.items.map((e) => e.index), ...detected.items.map((i) => i.index)) + 1;
     const sibling = detected.items.find((item) => item.index !== add.cloneOf && !item.el.hasAttribute(ITEM_CLONE_ATTR)) ?? null;
@@ -5630,12 +5575,7 @@ function applyItemOps(store, ops, currentContent) {
     if (anchor) anchor.insertAdjacentElement("afterend", clone);
     else source.el.insertAdjacentElement("afterend", clone);
     elements.set(newIndex, clone);
-    detected.items.push({
-      el: clone,
-      index: newIndex,
-      keyed: cloneKeyed,
-      ...sluggy ? { slugToken: `x${newIndex}` } : {}
-    });
+    detected.items.push({ el: clone, index: newIndex, keyed: cloneKeyed });
     added.push(newIndex);
     elements = syncGroup(detected, state);
   }
@@ -6078,25 +6018,16 @@ function foldAlignIntoTrees(state, store) {
     nextTrees.set(id, fresh);
     return fresh;
   };
-  const stripChildAligns = (node) => node.children ? {
-    ...node,
-    children: node.children.map((child) => {
-      const { align: _dropped, ...rest } = child;
-      return stripChildAligns(rest);
-    })
-  } : node;
   const nodes = {};
   for (const [key, override] of Object.entries(store.nodes)) {
     const match = override.align !== void 0 && key.startsWith(AI_SLOT_KEY_PREFIX) ? key.match(/^ai\.(.+?)\.r(\d+)\.b(\d+)(?:\.|$)/) : null;
     const tree = match ? treeFor(match[1]) : void 0;
-    const row = match && tree ? tree.rows[Number(match[2])] : void 0;
-    const blockIdx = match ? Number(match[3]) : -1;
-    const block = row?.blocks[blockIdx];
-    if (!row || !block) {
+    const block = match && tree ? tree.rows[Number(match[2])]?.blocks[Number(match[3])] : void 0;
+    if (!block) {
       nodes[key] = override;
       continue;
     }
-    row.blocks[blockIdx] = { ...stripChildAligns(block), align: override.align };
+    block.align = override.align;
     const rest = { ...override };
     delete rest.align;
     if (Object.keys(rest).length > 0) nodes[key] = rest;
@@ -6109,7 +6040,7 @@ function foldAlignIntoTrees(state, store) {
       continue;
     }
     for (const row of tree.rows) {
-      row.blocks = row.blocks.map((block) => ({ ...stripChildAligns(block), align: override.align }));
+      for (const block of row.blocks) block.align = override.align;
     }
     const rest = { ...override };
     delete rest.align;
@@ -7270,7 +7201,6 @@ var blockAlignStyle = (blockAlign) => blockAlign ? {
   alignItems: blockAlign === "left" ? "flex-start" : blockAlign === "right" ? "flex-end" : "center",
   textAlign: blockAlign
 } : {};
-var fullBleedBlock = (block) => block.type === "carousel" || block.type === "group" && str(block.slots?.layout) === "overlap";
 var featureLines = (value) => value.split(/\n|<br\s*\/?>/i).map((line) => line.trim()).filter(Boolean);
 var AI_MOBILE_CSS = [
   // Unscoped (applies at every viewport, not just mobile): re-enables pointer-events for the
@@ -7315,7 +7245,7 @@ var AI_MOBILE_CSS = [
   // page's first section. Top only (bottom needs no nav clearance); ~96px approximates the
   // template nav's own height (measured ~94px) — there's no shared `--ohw-header-h` var to read
   // an exact figure from (no live measurement exists), so this is a safe approximation, not a
-  // pixel-exact fit. Horizontal spacing already comes from `data-ai-section-inner`.
+  // pixel-exact fit. Horizontal spacing already comes from `data-ai-container`.
   '[data-ai-overlay-clearance] [data-ai-overlap-layer="overlay"]{padding-top:96px}',
   // A full-bleed carousel's height is pure arithmetic: it spans the whole window, so 16/9 turns
   // window width straight into height. Measured at 16/9 it came out ~90% of the viewport at EVERY
@@ -7331,10 +7261,8 @@ var AI_MOBILE_CSS = [
   "[data-ai-section]{overflow-x:hidden}",
   // `:not([data-ai-full-bleed])`: this `!important` gutter beat the inline `padding: 0` that a
   // full-bleed section's container sets, so a carousel/media hero that is edge-to-edge on desktop
-  // still got a 20px band of section background down both sides on a phone. The footer's own
-  // container keeps the unguarded rule below — `data-ai-full-bleed` can never appear on it.
-  "[data-ai-section-inner]:not([data-ai-full-bleed]){padding:0 20px !important}",
-  "[data-ai-container]{padding:0 20px !important}",
+  // still got a 20px band of section background down both sides on a phone.
+  "[data-ai-container]:not([data-ai-full-bleed]){padding:0 20px !important}",
   "[data-ai-row]{display:flex !important;flex-direction:column !important;align-items:stretch !important}",
   "[data-ai-cell]{width:100%;min-width:0}",
   // The rule above turns every row into a COLUMN flex container on phones, which silently breaks
@@ -7539,31 +7467,6 @@ function pricingCardEmphasis(featured, ctx, hasBg) {
 function textAttrs(ctx, path) {
   return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
 }
-var AI_RESPONSIVE_CSS = [
-  "@media (max-width: 960px) {",
-  "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: repeat(2, 1fr) !important; }",
-  '  [data-ai-responsive] [data-ai-grid="1"] { grid-template-columns: 1fr !important; }',
-  "}",
-  "@media (max-width: 640px) {",
-  "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
-  "  [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
-  // Group containers flatten to a column on phones; span placements come along for free.
-  // `:not([data-ai-group="overlap"])` for the same reason as the twin pair in AI_MOBILE_CSS — see
-  // the comment there. This sheet's copy is the narrower selector, so without the exemption it
-  // flattens an `overlap` hero below 640px even though the other rule stands down: measured a 390px
-  // viewport with the heading/CTA in flow *under* the image, 219px of section background where the
-  // layered text used to be.
-  '  [data-ai-responsive] [data-ai-group]:not([data-ai-group="overlap"]) { display: flex !important; flex-direction: column !important; }',
-  '  [data-ai-responsive] [data-ai-group]:not([data-ai-group="overlap"]) > * { grid-column: auto !important; }',
-  // `:not([data-ai-full-bleed])` for the same reason as the twin rule in AI_MOBILE_CSS: this one
-  // is narrower (0,2,0 vs 0,1,0) and also `!important`, so without the guard it wins outright and
-  // a full-bleed hero gets its 20px side band back below 640px only — the one width where the
-  // other rule had already been taught to stand down.
-  "  [data-ai-responsive] [data-ai-section-inner]:not([data-ai-full-bleed]) { padding-left: 20px !important; padding-right: 20px !important; }",
-  "  [data-ai-responsive] { overflow-x: hidden; }",
-  "  [data-ai-responsive] img { max-width: 100%; }",
-  "}"
-].join("\n");
 var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 function MediaBox({
   refValue,
@@ -7584,9 +7487,9 @@ function MediaBox({
   const url = refValue ? ctx.resolveMedia(refValue) : null;
   const isIcon = /^(lucide|simple):/.test(refValue);
   const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
-  const editAttrs = ctx.keyFor && editPath ? {
+  const editAttrs = ctx.keyFor && editPath && !isIcon ? {
     "data-ohw-key": ctx.keyFor(editPath),
-    ...isIcon ? { "data-ohw-editable": "icon" } : genericImageEdit ? { "data-ohw-editable": "image" } : {}
+    ...genericImageEdit ? { "data-ohw-editable": "image" } : {}
   } : {};
   if (isIcon) {
     const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
@@ -7594,7 +7497,6 @@ function MediaBox({
       "span",
       {
         "data-ai-icon": refValue,
-        ...editAttrs,
         style: {
           display: "inline-flex",
           width: 48,
@@ -9100,7 +9002,7 @@ function CollectionBlock({ node, ctx, path }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-ai-grid": String(itemsPerRow),
+      "data-ai-grid": "",
       "data-ohw-pricing-collection": isPricing ? "" : void 0,
       style: {
         display: "grid",
@@ -9360,12 +9262,12 @@ function renderNode(node, ctx, path, ambientAlign) {
                 },
                 children: [
                   i > 0 && ctx.heroOverlapFullBleed ? (
-                    // The section's `data-ai-section-inner` gave up its max-width/gutter so the base
+                    // The section's `data-ai-container` gave up its max-width/gutter so the base
                     // layer (this group's i===0 sibling) can span edge-to-edge — reintroduced here,
                     // scoped to just the overlay text, so a heading/copy/CTA stack doesn't stretch
                     // the full section width instead of reading at the usual content width.
-                    /* @__PURE__ */ jsx("div", { style: { maxWidth: AI_TREE_TOKENS.sectionMaxWidth, margin: "0 auto", padding: "0 40px", width: "100%", boxSizing: "border-box" }, children: renderNode(child, ctx, `${path}.c${i}`, child.align ?? node.align ?? "center") })
-                  ) : renderNode(child, ctx, `${path}.c${i}`, i > 0 ? child.align ?? node.align ?? "center" : void 0),
+                    /* @__PURE__ */ jsx("div", { style: { maxWidth: AI_TREE_TOKENS.sectionMaxWidth, margin: "0 auto", padding: "0 40px", width: "100%", boxSizing: "border-box" }, children: renderNode(child, ctx, `${path}.c${i}`, child.align ?? "center") })
+                  ) : renderNode(child, ctx, `${path}.c${i}`, i > 0 ? child.align ?? "center" : void 0),
                   i === 0 && needsBaseScrim && /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -9398,7 +9300,7 @@ function renderNode(node, ctx, path, ambientAlign) {
             // child otherwise stretches full-width (unchanged pre-existing behaviour).
             ...blockAlignStyle(child.align ?? ambientAlign)
           },
-          children: renderNode(child, ctx, `${path}.c${i}`, node.align ?? ambientAlign)
+          children: renderNode(child, ctx, `${path}.c${i}`, ambientAlign)
         },
         i
       ));
@@ -9428,20 +9330,8 @@ function renderNode(node, ctx, path, ambientAlign) {
     }
     case "button":
       return /* @__PURE__ */ jsx(ButtonEl, { slots, ctx, path });
-    case "button-row": {
-      const rowAlign = node.align ?? ambientAlign;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            display: "flex",
-            gap: AI_TREE_TOKENS.spacing6,
-            justifyContent: rowAlign === "left" ? "flex-start" : rowAlign === "right" ? "flex-end" : "center"
-          },
-          children: (node.children ?? []).map((child, i) => /* @__PURE__ */ jsx(ButtonEl, { slots: child.slots ?? {}, ctx, path: `${path}.c${i}` }, i))
-        }
-      );
-    }
+    case "button-row":
+      return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: AI_TREE_TOKENS.spacing6, justifyContent: "center" }, children: (node.children ?? []).map((child, i) => /* @__PURE__ */ jsx(ButtonEl, { slots: child.slots ?? {}, ctx, path: `${path}.c${i}` }, i)) });
     case "media":
       return /* @__PURE__ */ jsx(
         MediaBox,
@@ -9765,7 +9655,6 @@ function AiTreeRenderer({
       ...fillHeight ? { "data-ai-fill-height": "" } : {},
       ...needsOverlayClearance ? { "data-ai-overlay-clearance": "" } : {},
       ...bgAttrs,
-      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${padCss} 0`,
@@ -9779,13 +9668,12 @@ function AiTreeRenderer({
         ...fillHeight ? { display: "grid" } : {}
       },
       children: [
-        /* @__PURE__ */ jsx("style", { children: AI_RESPONSIVE_CSS }),
-        /* @__PURE__ */ jsx("style", { children: AI_MOBILE_CSS }),
         isOverlay && backgroundUrl && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
+        /* @__PURE__ */ jsx("style", { children: AI_MOBILE_CSS }),
         /* @__PURE__ */ jsx(
           "div",
           {
-            "data-ai-section-inner": "",
+            "data-ai-container": "",
             ...fullBleedMedia ? { "data-ai-full-bleed": "" } : {},
             style: {
               position: "relative",
@@ -9802,7 +9690,7 @@ function AiTreeRenderer({
             children: tree.rows.map((row, r2) => /* @__PURE__ */ jsx(
               "div",
               {
-                "data-ai-columns": "",
+                "data-ai-row": "",
                 style: {
                   display: "grid",
                   gridTemplateColumns: "repeat(12, 1fr)",
@@ -9822,7 +9710,7 @@ function AiTreeRenderer({
                       // its own horizontal `align`, which takes priority for that block.
                       ...fillHeight ? { display: "grid" } : {},
                       // Horizontal placement of the block's content within its column.
-                      ...fullBleedBlock(block) ? {} : cellAlignStyle(block.align),
+                      ...cellAlignStyle(block.align),
                       // space-between: each column becomes a flex column whose content spreads over
                       // the full row height instead of clumping at the top.
                       ...distributed === "space-between" ? { display: "flex", flexDirection: "column", justifyContent: "space-between" } : {}
@@ -10458,10 +10346,9 @@ function applyAiSectionsToDom(state, options) {
     if (existing && existing.serialized === serialized && existing.container.isConnected) {
       continue;
     }
+    const isNewMount = !existing || !existing.container.isConnected;
     let container = existing?.container;
-    let isNewMount = false;
     if (!container || !container.isConnected) {
-      isNewMount = true;
       existing?.root.unmount();
       container?.remove();
       container = document.createElement("div");
@@ -16903,7 +16790,6 @@ function MediaOverlay({
       (prev) => prev && prev.fullWidth === width && prev.height === height ? prev : { fullWidth: width, height }
     );
   }, [isVideo]);
-  const replaceLabel = isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image";
   const replaceMode = buttonSize ? replaceButtonMode({ width: rect.width, height: rect.height }, buttonSize) : "none";
   const box = {
     position: "fixed",
@@ -17002,10 +16888,11 @@ function MediaOverlay({
         className: "flex items-center justify-center cursor-pointer",
         style: {
           ...box,
-          // Visual only. `pointer-events: auto` on this full-bleed rect covered the navbar
-          // (hero bg includes the absolute TopNav) and swallowed CTA press-drag. Text overlay
-          // and cueOnly also need clicks to fall through — Replace / video controls opt back in.
-          pointerEvents: "none",
+          // When text overlays this media, let clicks fall THROUGH to the text underneath. In the
+          // parent this needed a whole `ow:click-at` round-trip to re-hit-test inside the iframe;
+          // in-document, pointer-events does it natively. The button below opts back in, so
+          // Replace still works.
+          pointerEvents: hover.hasTextOverlap || cueOnly ? "none" : "auto",
           // Selected: a firm component ring with no wash, so the image reads as chosen rather
           // than hovered. Hover keeps the existing tinted preview.
           boxShadow: selected ? "inset 0 0 0 2px var(--color-bridge-primary)" : "inset 0 0 0 1.5px var(--color-bridge-primary)",
@@ -17032,17 +16919,17 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ jsx16(Film, { size: 14 }) : /* @__PURE__ */ jsx16(ImageIcon, { size: 14 }),
-                replaceLabel
+                isVideo ? "Replace video" : "Replace image"
               ]
             }
           ),
-          showChrome && replaceMode !== "none" && /* @__PURE__ */ jsxs7(
+          replaceMode === "none" || cueOnly ? null : /* @__PURE__ */ jsxs7(
             Button,
             {
               "data-ohw-media-overlay": "",
               variant: "outline",
               size: "sm",
-              "aria-label": replaceLabel,
+              "aria-label": isVideo ? "Replace video" : "Replace image",
               className: "gap-1.5 cursor-pointer hover:bg-background",
               style: {
                 ...OVERLAY_BUTTON_STYLE,
@@ -17065,7 +16952,7 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ jsx16(Film, { size: 14 }) : /* @__PURE__ */ jsx16(ImageIcon, { size: 14 }),
-                replaceMode === "full" ? replaceLabel : null
+                replaceMode === "full" ? isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image" : null
               ]
             }
           )
@@ -18457,23 +18344,10 @@ function setPricingCardStyle(tree, index, style) {
   });
 }
 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 ?? {};
+  return withPricingCard(tree, index, (target) => {
     const prev = featuredOf(target);
-    target.slots.featured = composeFeatured(pricingCardStyleOf(prev), on, badgeOf(prev));
-    return true;
+    const style = pricingCardStyleOf(prev);
+    target.slots.featured = composeFeatured(style, on, badgeOf(prev));
   });
 }
 function pricingCardStyleOf(featured) {
@@ -18723,40 +18597,25 @@ function ToolbarSeparator() {
 }
 function CardStyleMenu({
   value,
-  onChange,
-  disabled = false
+  onChange
 }) {
   const current = PRICING_CARD_STYLES.find((s) => s.value === value) ?? PRICING_CARD_STYLES[0];
-  const trigger = /* @__PURE__ */ jsxs11(
-    "button",
-    {
-      type: "button",
-      "aria-label": "Card style",
-      disabled,
-      className: cn(
-        "inline-flex h-8 min-w-[110px] items-center gap-[7px] rounded-[6px] bg-transparent px-2 text-[13px] font-medium text-foreground transition-colors hover:bg-muted data-[state=open]:bg-muted",
-        disabled && "cursor-not-allowed opacity-40 hover:bg-transparent"
-      ),
-      children: [
-        /* @__PURE__ */ jsx20(StyleSwatch, { style: current.value }),
-        /* @__PURE__ */ jsx20("span", { className: "flex-1 text-left", children: current.label }),
-        /* @__PURE__ */ jsx20(ChevronDown3, { size: 16, style: { pointerEvents: "none" } })
-      ]
-    }
-  );
-  if (disabled) {
-    return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5 pl-1.5", children: [
-      /* @__PURE__ */ jsx20("span", { className: "text-xs text-muted-foreground opacity-50", children: "Card style" }),
-      /* @__PURE__ */ jsxs11(Tooltip, { children: [
-        /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx20("span", { className: "inline-flex", children: trigger }) }),
-        /* @__PURE__ */ jsx20(TooltipContent, { side: "bottom", sideOffset: 8, children: "Mark as featured to edit card style" })
-      ] })
-    ] });
-  }
   return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5 pl-1.5", children: [
     /* @__PURE__ */ jsx20("span", { className: "text-xs text-muted-foreground", children: "Card style" }),
     /* @__PURE__ */ jsxs11(DropdownMenu, { modal: false, children: [
-      /* @__PURE__ */ jsx20(DropdownMenuTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx20(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(
+        "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__ */ jsx20(StyleSwatch, { style: current.value }),
+            /* @__PURE__ */ jsx20("span", { className: "flex-1 text-left", children: current.label }),
+            /* @__PURE__ */ jsx20(ChevronDown3, { size: 16, style: { pointerEvents: "none" } })
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsx20(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__ */ jsxs11(
@@ -18820,35 +18679,23 @@ function PricingCardToolbar({
               mobile ? "flex-wrap justify-center" : "flex-nowrap"
             ),
             children: [
+              /* @__PURE__ */ jsx20(CardStyleMenu, { value: style, onChange: onSetStyle }),
               /* @__PURE__ */ jsxs11(Tooltip, { children: [
                 /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(
                   CustomToolbarButton,
                   {
                     type: "button",
-                    "aria-label": featuredTag ? "Unmark as featured" : "Mark as featured",
+                    "aria-label": featuredTag ? "Remove featured tag" : "Add featured tag",
                     "aria-pressed": featuredTag,
+                    active: featuredTag,
                     onClick: () => onSetFeaturedTag(!featuredTag),
-                    className: "group size-8",
-                    children: /* @__PURE__ */ jsx20(
-                      Star2,
-                      {
-                        size: 16,
-                        fill: "currentColor",
-                        strokeWidth: 0,
-                        className: cn(
-                          "transition-colors",
-                          featuredTag ? "text-[#f59e0b] group-hover:text-[#d97706]" : "text-[#d6d3d1] group-hover:text-[#fbbf24]"
-                        ),
-                        style: { pointerEvents: "none" }
-                      }
-                    )
+                    className: "size-8",
+                    children: /* @__PURE__ */ jsx20(Star2, { size: 16, fill: featuredTag ? "currentColor" : "none", style: { pointerEvents: "none" } })
                   }
                 ) }),
-                /* @__PURE__ */ jsx20(TooltipContent, { side: "bottom", sideOffset: 8, children: featuredTag ? "Unmark featured" : "Mark as featured" })
+                /* @__PURE__ */ jsx20(TooltipContent, { side: "bottom", sideOffset: 8, children: featuredTag ? "Remove featured tag" : "Add featured tag" })
               ] }),
               /* @__PURE__ */ jsx20(ToolbarSeparator, {}),
-              /* @__PURE__ */ jsx20(CardStyleMenu, { value: style, onChange: onSetStyle, disabled: !featuredTag }),
-              /* @__PURE__ */ jsx20(ToolbarSeparator, {}),
               /* @__PURE__ */ jsx20(ToolbarAction, { label: "Add button", onClick: onAddButton, disabled: buttonCount >= 2, children: /* @__PURE__ */ jsx20(ButtonGlyph, {}) }),
               /* @__PURE__ */ jsx20(ToolbarAction, { label: "Remove button", onClick: onRemoveButton, disabled: buttonCount === 0, children: /* @__PURE__ */ jsxs11("span", { className: "relative inline-flex", children: [
                 /* @__PURE__ */ jsx20(ButtonGlyph, {}),
@@ -18991,12 +18838,7 @@ function AiPricingCardOverlay({
           index: active.index,
           pending,
           error,
-          onAddTier: () => {
-            const newIndex = pricingCardCount(activeEntry.tree);
-            void runMutation(active.sectionId, addPricingTier).then((applied) => {
-              if (applied) setActive({ sectionId: active.sectionId, index: newIndex });
-            });
-          },
+          onAddTier: () => runMutation(active.sectionId, addPricingTier),
           onRemoveTier: () => {
             void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
               (applied) => {
@@ -21545,7 +21387,6 @@ function shouldUseDevFixtures() {
 function getLogoElement(el) {
   const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
   if (marked) return marked;
-  if (el.closest('[data-ohw-editable="icon"]')) return null;
   const root = el.closest("nav, [data-ohw-nav-root], footer");
   if (!root) return null;
   const anchor = el.closest("a");
@@ -24115,7 +23956,7 @@ function getNavigationSelectionParent(el) {
   if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
     return resolveFooterLinksContainerFrom(el);
   }
-  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isFooterLinksContainer(el) || isInferredFooterGroup2(el)) {
+  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
     return getNavigationRoot(el);
   }
   return null;
@@ -24337,6 +24178,7 @@ var ICONS = {
   insertUnorderedList: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
   insertOrderedList: '<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>'
 };
+var HEIGHT_SETTLE_DELAYS = [150, 400, 800];
 var SELECTION_CHROME_GAP2 = 4;
 var TOOLBAR_STROKE_GAP2 = 4;
 var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
@@ -25316,6 +25158,21 @@ function OhhwellsBridge() {
   const [isItemDragging, setIsItemDragging] = useState18(false);
   const [isFooterFrameSelection, setIsFooterFrameSelection] = useState18(false);
   isFooterFrameSelectionRef.current = isFooterFrameSelection;
+  const [floatingPanel, setFloatingPanel] = useState18(null);
+  const floatingPanelOpenRef = useRef14(false);
+  floatingPanelOpenRef.current = floatingPanel !== null;
+  const floatingPanelRef = useRef14(null);
+  floatingPanelRef.current = floatingPanel;
+  const [floatingPanelPos, setFloatingPanelPos] = useState18(null);
+  const buttonCollectionDragRef = useRef14(null);
+  const buttonDropInsertIndexRef = useRef14(null);
+  const [buttonDropSlots, setButtonDropSlots] = useState18([]);
+  const [activeButtonDropIndex, setActiveButtonDropIndex] = useState18(null);
+  const buttonPointerDragRef = useRef14(null);
+  const [buttonStyleTick, setButtonStyleTick] = useState18(0);
+  const [logoSizeDraft, setLogoSizeDraft] = useState18(null);
+  const [editorViewport, setEditorViewport] = useState18("desktop");
+  const [parentScrollSnap, setParentScrollSnap] = useState18(null);
   const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState18(null);
   const [footerHeadingVisible, setFooterHeadingVisible] = useState18(null);
   const footerDragRef = useRef14(null);
@@ -25341,21 +25198,6 @@ function OhhwellsBridge() {
   const stylesRef = useRef14("");
   const appliedDrawerRef = useRef14(null);
   const pendingDeleteUndoRef = useRef14(null);
-  const [floatingPanel, setFloatingPanel] = useState18(null);
-  const floatingPanelOpenRef = useRef14(false);
-  const floatingPanelRef = useRef14(null);
-  floatingPanelRef.current = floatingPanel;
-  const setFloatingPanelRef = useRef14(setFloatingPanel);
-  const [floatingPanelPos, setFloatingPanelPos] = useState18(null);
-  const buttonCollectionDragRef = useRef14(null);
-  const buttonDropInsertIndexRef = useRef14(null);
-  const [buttonDropSlots, setButtonDropSlots] = useState18([]);
-  const [activeButtonDropIndex, setActiveButtonDropIndex] = useState18(null);
-  const buttonPointerDragRef = useRef14(null);
-  const [buttonStyleTick, setButtonStyleTick] = useState18(0);
-  const [logoSizeDraft, setLogoSizeDraft] = useState18(null);
-  const [editorViewport, setEditorViewport] = useState18("desktop");
-  const [parentScrollSnap, setParentScrollSnap] = useState18(null);
   const [sitePages, setSitePages] = useState18([]);
   const [sectionsByPath, setSectionsByPath] = useState18({});
   const sectionsPrefetchGenRef = useRef14(0);
@@ -25364,18 +25206,7 @@ function OhhwellsBridge() {
   const linkPopoverOpenRef = useRef14(false);
   const linkPopoverGraceUntilRef = useRef14(0);
   setLinkPopoverRef.current = setLinkPopover;
-  setFloatingPanelRef.current = setFloatingPanel;
   linkPopoverSessionRef.current = linkPopover;
-  floatingPanelOpenRef.current = Boolean(floatingPanel);
-  useEffect17(() => {
-    const syncViewport = () => {
-      const next = window.innerWidth <= 480 ? "mobile" : "desktop";
-      setEditorViewport((prev) => prev === next ? prev : next);
-    };
-    syncViewport();
-    window.addEventListener("resize", syncViewport);
-    return () => window.removeEventListener("resize", syncViewport);
-  }, []);
   useEffect17(() => {
     setSectionOrderPersistHandler((entries) => {
       const currentPath = window.location.pathname;
@@ -27054,7 +26885,6 @@ function OhhwellsBridge() {
       applyAiFooterFromContent(content);
       if (typeof content[STYLE_STORE_KEY] === "string") {
         stylesRef.current = content[STYLE_STORE_KEY];
-        document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
       }
       applyBrandChrome(content);
@@ -27065,12 +26895,12 @@ function OhhwellsBridge() {
         if (key === "__ohw_sections") continue;
         if (key === AI_SECTIONS_KEY) continue;
         if (key === AI_FOOTER_KEY) continue;
-        if (key === LOGO_PLACEHOLDER_KEY) continue;
-        if (LOGO_IMAGE_KEYS.includes(key)) continue;
         if (key === BRAND_KIT_KEY) continue;
         if (key === STYLE_STORE_KEY) continue;
         if (BRAND_CHROME_KEYS.has(key)) continue;
+        if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
+        if (LOGO_IMAGE_KEYS.includes(key)) continue;
         if (typeof content[AI_FOOTER_KEY] === "string" && content[AI_FOOTER_KEY] && isAiFooterOwnedContentKey(key)) {
           continue;
         }
@@ -27285,18 +27115,17 @@ function OhhwellsBridge() {
         }
         applyAiFooterFromContent(content);
         if (typeof content[STYLE_STORE_KEY] === "string") {
-          document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
           applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
         }
         for (const [key, val] of Object.entries(content)) {
           if (key === "__ohw_sections") continue;
           if (key === AI_SECTIONS_KEY) continue;
           if (key === AI_FOOTER_KEY) continue;
-          if (key === LOGO_PLACEHOLDER_KEY) continue;
-          if (LOGO_IMAGE_KEYS.includes(key)) continue;
           if (key === BRAND_KIT_KEY) continue;
           if (key === STYLE_STORE_KEY) continue;
           if (BRAND_CHROME_KEYS.has(key)) continue;
+          if (key === LOGO_PLACEHOLDER_KEY) continue;
+          if (LOGO_IMAGE_KEYS.includes(key)) continue;
           if (typeof content[AI_FOOTER_KEY] === "string" && content[AI_FOOTER_KEY] && isAiFooterOwnedContentKey(key)) {
             continue;
           }
@@ -27553,11 +27382,26 @@ function OhhwellsBridge() {
     const t2 = setTimeout(measure, 500);
     const ro = new ResizeObserver(schedule);
     ro.observe(document.body);
+    let lastWidth = window.innerWidth;
+    let resizeTimers = [];
+    const clearResizeTimers = () => {
+      resizeTimers.forEach(clearTimeout);
+      resizeTimers = [];
+    };
+    const handleResize = () => {
+      if (window.innerWidth === lastWidth) return;
+      lastWidth = window.innerWidth;
+      clearResizeTimers();
+      resizeTimers = HEIGHT_SETTLE_DELAYS.map((delay) => setTimeout(measure, delay));
+    };
+    window.addEventListener("resize", handleResize);
     return () => {
       clearTimeout(t1);
       clearTimeout(t2);
       if (raf != null) cancelAnimationFrame(raf);
       ro.disconnect();
+      clearResizeTimers();
+      window.removeEventListener("resize", handleResize);
     };
   }, [pathname, isEditMode, postToParent2]);
   useEffect17(() => {
@@ -27852,13 +27696,6 @@ function OhhwellsBridge() {
       if (target.closest("[data-ohw-state-toggle]")) return;
       if (target.closest("[data-ohw-max-badge]")) return;
       if (isInsideLinkEditor(target)) return;
-      if (isInsideFloatingPanel(target)) return;
-      if (target.closest("[data-ohw-form-toolbar]")) return;
-      if (target.closest(
-        '[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
-      )) {
-        return;
-      }
       if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
         clearMediaSelectionRef.current();
       }
@@ -27879,6 +27716,13 @@ function OhhwellsBridge() {
           return;
         }
       }
+      if (isInsideFloatingPanel(target)) return;
+      if (target.closest("[data-ohw-form-toolbar]")) return;
+      if (target.closest(
+        '[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
+      )) {
+        return;
+      }
       {
         const formEl = getFormElement(target);
         const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
@@ -28258,9 +28102,6 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
-        siblingHintElRef.current = null;
-        setSiblingHintRect(null);
-        setSiblingHintRects([]);
         return;
       }
       {
@@ -28381,6 +28222,7 @@ function OhhwellsBridge() {
             hoveredNavContainerRef.current = null;
             setHoveredNavContainerRect(null);
             hoveredItemElRef.current = editable;
+            setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
           }
         }
       }
@@ -29090,11 +28932,7 @@ function OhhwellsBridge() {
     };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) {
-        dismissImageHover();
-        clearImageHover();
-        return;
-      }
+      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
       if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) {
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         formHoverElRef.current = null;
@@ -29123,12 +28961,7 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
-        siblingHintElRef.current = null;
-        setSiblingHintRect(null);
-        setSiblingHintRects([]);
         dismissImageHover();
-        clearImageHover();
-        setSectionGap(null);
         return;
       }
       if (probeSocialsRowAt(clientX, clientY)) return;
@@ -29140,11 +28973,7 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:pointer-sync") return;
       const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) {
-        dismissImageHover();
-        clearImageHover();
-        return;
-      }
+      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
       if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) return;
       if (probeSocialsRowAt(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
@@ -29496,7 +29325,6 @@ function OhhwellsBridge() {
       applyAiFooterFromContent(content);
       if (typeof content[STYLE_STORE_KEY] === "string") {
         stylesRef.current = content[STYLE_STORE_KEY];
-        document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
       }
       applyBrandChrome(content);
@@ -29511,12 +29339,12 @@ function OhhwellsBridge() {
         }
         if (key === AI_SECTIONS_KEY) continue;
         if (key === AI_FOOTER_KEY) continue;
-        if (key === LOGO_PLACEHOLDER_KEY) continue;
-        if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (key === BRAND_KIT_KEY) continue;
         if (key === STYLE_STORE_KEY) continue;
         if (BRAND_CHROME_KEYS.has(key)) continue;
+        if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
+        if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (typeof content[AI_FOOTER_KEY] === "string" && content[AI_FOOTER_KEY] && isAiFooterOwnedContentKey(key)) {
           continue;
         }
@@ -30054,12 +29882,6 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
-      if (floatingPanelOpenRef.current) {
-        setFloatingPanelRef.current(null);
-        deselectRef.current();
-        deactivateRef.current();
-        return;
-      }
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
@@ -30429,10 +30251,9 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:collect-section") return;
       const sectionId = e.data.sectionId;
       if (typeof sectionId !== "string" || !sectionId) return;
-      const foundEl = document.querySelector(
+      const sectionEl = document.querySelector(
         `[data-ohw-section="${CSS.escape(sectionId)}"]`
       );
-      const sectionEl = foundEl && !foundEl.hasAttribute("data-ohw-ai-template-hidden") && !foundEl.hasAttribute("data-ohw-ai-removed") && !foundEl.hasAttribute("data-ohw-ai-replaced-by") ? foundEl : null;
       const nodes = sectionEl ? collectEditableNodes(void 0, sectionEl).filter(
         (n) => n.key && !n.key.startsWith("__ohw_") && !["meta", "sections", "video-setting"].includes(n.type)
       ).map((n) => ({ ...n, text: n.text ?? "", type: normalizeAiNodeType(n.type) })) : [];
@@ -30874,10 +30695,10 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleDeleteSection);
       window.removeEventListener("message", handleDuplicateSection);
       window.removeEventListener("message", handleDeactivate);
+      document.documentElement.removeAttribute("data-ohw-panel-dragging");
       window.removeEventListener("message", handleToastAction);
       window.removeEventListener("message", handleFormCount);
       window.removeEventListener("message", handleUiEscape);
-      document.documentElement.removeAttribute("data-ohw-panel-dragging");
       autoSaveTimers.current.forEach(clearTimeout);
       autoSaveTimers.current.clear();
       if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);
@@ -32386,7 +32207,6 @@ export {
   dropIndicatorVariants,
   ensureFooterTree,
   filterAvailablePages,
-  foldAlignIntoTrees,
   getEditModeInitialState,
   insertFooterHours,
   isEditSessionActive,
@@ -32395,7 +32215,6 @@ export {
   isValidUrl,
   nextViableSlide,
   parseAiFooterState,
-  parseAiSectionsState,
   parseTarget,
   removeFooterBlock,
   resolveFooterCopyright,