@ohhwells/bridge 0.1.140 → 0.1.141

package/dist/index.js

@@ -5204,19 +5204,21 @@ function findIndexSegment(keys) {
   if (len < 2 || tokenLists.some((t) => t.length !== len)) return null;
   let position = -1;
   for (let p = 0; p < len; p++) {
-    const values = tokenLists.map((t) => t[p]);
-    const allSame = values.every((v) => v === values[0]);
+    const values2 = tokenLists.map((t) => t[p]);
+    const allSame = values2.every((v) => v === values2[0]);
     if (allSame) continue;
-    const allNumeric = values.every((v) => /^\d+$/.test(v));
-    if (!allNumeric || position !== -1) return null;
+    if (position !== -1) return null;
     position = p;
   }
   if (position === -1) return null;
+  const values = tokenLists.map((t) => t[position]);
+  const numericCount = values.filter((v) => /^\d+$/.test(v)).length;
+  if (numericCount !== 0 && numericCount !== values.length) return null;
+  if (numericCount === 0 && position === len - 1) return null;
   const group = tokenLists[0].slice(0, position).join("-");
   if (!group) return null;
-  const indices = tokenLists.map((t) => parseInt(t[position], 10));
-  if (new Set(indices).size !== indices.length) return null;
-  return { position, group };
+  if (new Set(values).size !== values.length) return null;
+  return numericCount === values.length ? { position, group } : { position, group, slug: true };
 }
 function singleIndexSegment(key) {
   const tokens = baseKey(key).split("-");
@@ -5262,7 +5264,19 @@ function detectItemGroups(sectionEl) {
         list.push(m);
         byShape.set(shape, list);
       }
-      clusters.push(...Array.from(byShape.values()));
+      const shaped = Array.from(byShape.values());
+      clusters.push(...shaped.filter((c) => c.length >= 2));
+      const singles = shaped.filter((c) => c.length === 1).map((c) => c[0]);
+      const bySlugShape = /* @__PURE__ */ new Map();
+      for (const m of singles) {
+        const primary = primaryKey(keyedDescendants(m));
+        const tokens = baseKey(primary ?? "").split("-");
+        const slugShape = `${tokens.length}|${tokens[0]}|${tokens[tokens.length - 1]}`;
+        const list = bySlugShape.get(slugShape) ?? [];
+        list.push(m);
+        bySlugShape.set(slugShape, list);
+      }
+      clusters.push(...Array.from(bySlugShape.values()));
     }
     for (const members of clusters) {
       const keyedPerMember = members.map((m) => keyedDescendants(m));
@@ -5273,11 +5287,28 @@ function detectItemGroups(sectionEl) {
       const dedupeKey = `${segment.group}`;
       if (seenParents.has(dedupeKey)) continue;
       seenParents.add(dedupeKey);
-      const items = members.map((el, i) => ({
-        el,
-        index: indexFromKey(primaries[i], segment.position),
-        keyed: keyedPerMember[i]
-      }));
+      let items;
+      if (segment.slug) {
+        const tokens = members.map((_, i) => baseKey(primaries[i]).split("-")[segment.position]);
+        let nextOriginal = 1;
+        const indices = tokens.map((t) => {
+          const cloneMatch = t.match(/^x(\d+)$/);
+          return cloneMatch ? parseInt(cloneMatch[1], 10) : nextOriginal++;
+        });
+        if (new Set(indices).size !== indices.length) continue;
+        items = members.map((el, i) => ({
+          el,
+          index: indices[i],
+          keyed: keyedPerMember[i],
+          slugToken: tokens[i]
+        }));
+      } else {
+        items = members.map((el, i) => ({
+          el,
+          index: indexFromKey(primaries[i], segment.position),
+          keyed: keyedPerMember[i]
+        }));
+      }
       groups.push({ group: segment.group, parent, nested: false, items });
     }
   }
@@ -5401,6 +5432,18 @@ function rekeyItemClone(clone, source, sibling, group, newIndex) {
   const delta = newIndex - source.index;
   const cloneKeyed = keyedDescendants(clone);
   const pairs = [];
+  if (source.slugToken) {
+    source.keyed.forEach((src, i) => {
+      const target = cloneKeyed[i];
+      if (!target || target.attr !== src.attr) return;
+      const tokens = baseKey(src.key).split("-");
+      if (!tokens.includes(source.slugToken)) return;
+      const next = tokens.map((t) => t === source.slugToken ? `x${newIndex}` : t).join("-") + keySuffix(src.key);
+      target.el.setAttribute(src.attr, next);
+      pairs.push({ from: src.key, to: next });
+    });
+    return pairs;
+  }
   source.keyed.forEach((src, i) => {
     const target = cloneKeyed[i];
     if (!target || target.attr !== src.attr) return;
@@ -5444,7 +5487,12 @@ function syncGroup(detected, state) {
     clone.setAttribute(ITEM_ATTR, `${detected.group}:${entry.index}`);
     rekeyItemClone(clone, source, sibling, detected.group, entry.index);
     source.el.insertAdjacentElement("afterend", clone);
-    byIndex.set(entry.index, { el: clone, index: entry.index, keyed: keyedDescendants(clone) });
+    byIndex.set(entry.index, {
+      el: clone,
+      index: entry.index,
+      keyed: keyedDescendants(clone),
+      ...source.slugToken ? { slugToken: `x${entry.index}` } : {}
+    });
   }
   const listed = state.items.map((e) => byIndex.get(e.index)?.el).filter((el) => !!el);
   let prev = null;
@@ -5546,9 +5594,16 @@ function applyItemOps(store, ops, currentContent) {
   const nodes = [];
   const added = [];
   let elements = syncGroup(detected, state);
+  const sluggy = detected.items.some((item) => item.slugToken);
+  const slugTokenOf = (index) => detected.items.find((item) => item.index === index)?.slugToken ?? (sluggy ? `x${index}` : void 0);
   for (const add of ops.add ?? []) {
     const sourceEl = elements.get(add.cloneOf);
-    const source = sourceEl ? { el: sourceEl, index: add.cloneOf, keyed: keyedDescendants(sourceEl) } : void 0;
+    const source = sourceEl ? {
+      el: sourceEl,
+      index: add.cloneOf,
+      keyed: keyedDescendants(sourceEl),
+      ...slugTokenOf(add.cloneOf) ? { slugToken: slugTokenOf(add.cloneOf) } : {}
+    } : void 0;
     if (!source) continue;
     const newIndex = Math.max(...state.items.map((e) => e.index), ...detected.items.map((i) => i.index)) + 1;
     const sibling = detected.items.find((item) => item.index !== add.cloneOf && !item.el.hasAttribute(ITEM_CLONE_ATTR)) ?? null;
@@ -5575,7 +5630,12 @@ function applyItemOps(store, ops, currentContent) {
     if (anchor) anchor.insertAdjacentElement("afterend", clone);
     else source.el.insertAdjacentElement("afterend", clone);
     elements.set(newIndex, clone);
-    detected.items.push({ el: clone, index: newIndex, keyed: cloneKeyed });
+    detected.items.push({
+      el: clone,
+      index: newIndex,
+      keyed: cloneKeyed,
+      ...sluggy ? { slugToken: `x${newIndex}` } : {}
+    });
     added.push(newIndex);
     elements = syncGroup(detected, state);
   }
@@ -6018,16 +6078,25 @@ function foldAlignIntoTrees(state, store) {
     nextTrees.set(id, fresh);
     return fresh;
   };
+  const stripChildAligns = (node) => node.children ? {
+    ...node,
+    children: node.children.map((child) => {
+      const { align: _dropped, ...rest } = child;
+      return stripChildAligns(rest);
+    })
+  } : node;
   const nodes = {};
   for (const [key, override] of Object.entries(store.nodes)) {
     const match = override.align !== void 0 && key.startsWith(AI_SLOT_KEY_PREFIX) ? key.match(/^ai\.(.+?)\.r(\d+)\.b(\d+)(?:\.|$)/) : null;
     const tree = match ? treeFor(match[1]) : void 0;
-    const block = match && tree ? tree.rows[Number(match[2])]?.blocks[Number(match[3])] : void 0;
-    if (!block) {
+    const row = match && tree ? tree.rows[Number(match[2])] : void 0;
+    const blockIdx = match ? Number(match[3]) : -1;
+    const block = row?.blocks[blockIdx];
+    if (!row || !block) {
       nodes[key] = override;
       continue;
     }
-    block.align = override.align;
+    row.blocks[blockIdx] = { ...stripChildAligns(block), align: override.align };
     const rest = { ...override };
     delete rest.align;
     if (Object.keys(rest).length > 0) nodes[key] = rest;
@@ -6040,7 +6109,7 @@ function foldAlignIntoTrees(state, store) {
       continue;
     }
     for (const row of tree.rows) {
-      for (const block of row.blocks) block.align = override.align;
+      row.blocks = row.blocks.map((block) => ({ ...stripChildAligns(block), align: override.align }));
     }
     const rest = { ...override };
     delete rest.align;
@@ -7201,6 +7270,7 @@ var blockAlignStyle = (blockAlign) => blockAlign ? {
   alignItems: blockAlign === "left" ? "flex-start" : blockAlign === "right" ? "flex-end" : "center",
   textAlign: blockAlign
 } : {};
+var fullBleedBlock = (block) => block.type === "carousel" || block.type === "group" && str(block.slots?.layout) === "overlap";
 var featureLines = (value) => value.split(/\n|<br\s*\/?>/i).map((line) => line.trim()).filter(Boolean);
 var AI_MOBILE_CSS = [
   // Unscoped (applies at every viewport, not just mobile): re-enables pointer-events for the
@@ -9266,8 +9336,8 @@ function renderNode(node, ctx, path, ambientAlign) {
                     // layer (this group's i===0 sibling) can span edge-to-edge — reintroduced here,
                     // scoped to just the overlay text, so a heading/copy/CTA stack doesn't stretch
                     // the full section width instead of reading at the usual content width.
-                    /* @__PURE__ */ jsx("div", { style: { maxWidth: AI_TREE_TOKENS.sectionMaxWidth, margin: "0 auto", padding: "0 40px", width: "100%", boxSizing: "border-box" }, children: renderNode(child, ctx, `${path}.c${i}`, child.align ?? "center") })
-                  ) : renderNode(child, ctx, `${path}.c${i}`, i > 0 ? child.align ?? "center" : void 0),
+                    /* @__PURE__ */ jsx("div", { style: { maxWidth: AI_TREE_TOKENS.sectionMaxWidth, margin: "0 auto", padding: "0 40px", width: "100%", boxSizing: "border-box" }, children: renderNode(child, ctx, `${path}.c${i}`, child.align ?? node.align ?? "center") })
+                  ) : renderNode(child, ctx, `${path}.c${i}`, i > 0 ? child.align ?? node.align ?? "center" : void 0),
                   i === 0 && needsBaseScrim && /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -9300,7 +9370,7 @@ function renderNode(node, ctx, path, ambientAlign) {
             // child otherwise stretches full-width (unchanged pre-existing behaviour).
             ...blockAlignStyle(child.align ?? ambientAlign)
           },
-          children: renderNode(child, ctx, `${path}.c${i}`, ambientAlign)
+          children: renderNode(child, ctx, `${path}.c${i}`, node.align ?? ambientAlign)
         },
         i
       ));
@@ -9330,8 +9400,20 @@ function renderNode(node, ctx, path, ambientAlign) {
     }
     case "button":
       return /* @__PURE__ */ jsx(ButtonEl, { slots, ctx, path });
-    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 "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 "media":
       return /* @__PURE__ */ jsx(
         MediaBox,
@@ -9710,7 +9792,7 @@ function AiTreeRenderer({
                       // its own horizontal `align`, which takes priority for that block.
                       ...fillHeight ? { display: "grid" } : {},
                       // Horizontal placement of the block's content within its column.
-                      ...cellAlignStyle(block.align),
+                      ...fullBleedBlock(block) ? {} : cellAlignStyle(block.align),
                       // space-between: each column becomes a flex column whose content spreads over
                       // the full row height instead of clumping at the top.
                       ...distributed === "space-between" ? { display: "flex", flexDirection: "column", justifyContent: "space-between" } : {}
@@ -18344,10 +18426,23 @@ function setPricingCardStyle(tree, index, style) {
   });
 }
 function setPricingCardFeaturedTag(tree, index, on) {
-  return withPricingCard(tree, index, (target) => {
+  return withPricingCollection(tree, (collection) => {
+    const children = collection.children;
+    if (index < 0 || index >= children.length) return false;
+    if (on) {
+      children.forEach((card, i) => {
+        if (i === index) return;
+        const prev2 = featuredOf(card);
+        if (prev2.enabled !== true || badgeOf(prev2).length === 0) return;
+        card.slots = card.slots ?? {};
+        card.slots.featured = composeFeatured(pricingCardStyleOf(prev2), false, badgeOf(prev2));
+      });
+    }
+    const target = children[index];
+    target.slots = target.slots ?? {};
     const prev = featuredOf(target);
-    const style = pricingCardStyleOf(prev);
-    target.slots.featured = composeFeatured(style, on, badgeOf(prev));
+    target.slots.featured = composeFeatured(pricingCardStyleOf(prev), on, badgeOf(prev));
+    return true;
   });
 }
 function pricingCardStyleOf(featured) {
@@ -18597,25 +18692,40 @@ function ToolbarSeparator() {
 }
 function CardStyleMenu({
   value,
-  onChange
+  onChange,
+  disabled = false
 }) {
   const current = PRICING_CARD_STYLES.find((s) => s.value === value) ?? PRICING_CARD_STYLES[0];
+  const trigger = /* @__PURE__ */ 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: /* @__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(DropdownMenuTrigger, { asChild: true, children: trigger }),
       /* @__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(
@@ -18679,23 +18789,35 @@ 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 ? "Remove featured tag" : "Add featured tag",
+                    "aria-label": featuredTag ? "Unmark as featured" : "Mark as featured",
                     "aria-pressed": featuredTag,
-                    active: featuredTag,
                     onClick: () => onSetFeaturedTag(!featuredTag),
-                    className: "size-8",
-                    children: /* @__PURE__ */ jsx20(Star2, { size: 16, fill: featuredTag ? "currentColor" : "none", style: { pointerEvents: "none" } })
+                    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" }
+                      }
+                    )
                   }
                 ) }),
-                /* @__PURE__ */ jsx20(TooltipContent, { side: "bottom", sideOffset: 8, children: featuredTag ? "Remove featured tag" : "Add featured tag" })
+                /* @__PURE__ */ jsx20(TooltipContent, { side: "bottom", sideOffset: 8, children: featuredTag ? "Unmark featured" : "Mark as featured" })
               ] }),
               /* @__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, {}),
@@ -18838,7 +18960,12 @@ function AiPricingCardOverlay({
           index: active.index,
           pending,
           error,
-          onAddTier: () => runMutation(active.sectionId, addPricingTier),
+          onAddTier: () => {
+            const newIndex = pricingCardCount(activeEntry.tree);
+            void runMutation(active.sectionId, addPricingTier).then((applied) => {
+              if (applied) setActive({ sectionId: active.sectionId, index: newIndex });
+            });
+          },
           onRemoveTier: () => {
             void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
               (applied) => {
@@ -30251,9 +30378,10 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:collect-section") return;
       const sectionId = e.data.sectionId;
       if (typeof sectionId !== "string" || !sectionId) return;
-      const sectionEl = document.querySelector(
+      const foundEl = document.querySelector(
         `[data-ohw-section="${CSS.escape(sectionId)}"]`
       );
+      const sectionEl = foundEl && !foundEl.hasAttribute("data-ohw-ai-template-hidden") && !foundEl.hasAttribute("data-ohw-ai-removed") && !foundEl.hasAttribute("data-ohw-ai-replaced-by") ? foundEl : null;
       const nodes = sectionEl ? collectEditableNodes(void 0, sectionEl).filter(
         (n) => n.key && !n.key.startsWith("__ohw_") && !["meta", "sections", "video-setting"].includes(n.type)
       ).map((n) => ({ ...n, text: n.text ?? "", type: normalizeAiNodeType(n.type) })) : [];
@@ -30992,7 +31120,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.139",
+        bridgeVersion: "0.1.140",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -32207,6 +32335,7 @@ export {
   dropIndicatorVariants,
   ensureFooterTree,
   filterAvailablePages,
+  foldAlignIntoTrees,
   getEditModeInitialState,
   insertFooterHours,
   isEditSessionActive,
@@ -32215,6 +32344,7 @@ export {
   isValidUrl,
   nextViableSlide,
   parseAiFooterState,
+  parseAiSectionsState,
   parseTarget,
   removeFooterBlock,
   resolveFooterCopyright,