@ohhwells/bridge 0.1.114-next.307 → 0.1.114-next.310

package/dist/index.js

@@ -11117,6 +11117,17 @@ import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMem
 import { createPortal as createPortal2 } from "react-dom";
 import { ArrowLeft as ArrowLeft2, Check as Check2 } from "lucide-react";
 import { usePathname, useRouter as useRouter2 } from "next/navigation";
+
+// src/lib/parent-scroll.ts
+function getIframeVisibleClip(parentScroll) {
+  if (!parentScroll) return null;
+  const { iframeOffsetTop, headerH: visibleCanvasTop, canvasH, promptBarH = 0 } = parentScroll;
+  const clipTop = Math.max(0, visibleCanvasTop - iframeOffsetTop);
+  const clipBottom = Math.min(window.innerHeight, visibleCanvasTop + canvasH - iframeOffsetTop) - promptBarH;
+  return { top: clipTop, bottom: Math.max(clipTop, clipBottom) };
+}
+
+// src/ui/link-modal/SectionPickerOverlay.tsx
 import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
 function rectsEqual(a, b) {
@@ -11254,20 +11265,22 @@ function SectionPickerOverlay({
     []
   );
   useEffect7(() => {
-    const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
-      const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
-      const bottom = Math.min(
-        window.innerHeight,
-        visibleCanvasTop + canvasH - iframeOffsetTop
-      );
+    const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH, promptBarH = 0) => {
+      const next = getIframeVisibleClip({
+        iframeOffsetTop,
+        headerH: visibleCanvasTop,
+        canvasH,
+        promptBarH
+      });
+      if (!next) return;
       setChromeClip(
-        (prev) => prev.top === top && prev.bottom === bottom ? prev : { top, bottom: Math.max(top, bottom) }
+        (prev) => prev.top === next.top && prev.bottom === next.bottom ? prev : next
       );
     };
     const onParentScroll = (e) => {
       if (e.data?.type !== "ow:parent-scroll") return;
-      const { iframeOffsetTop, headerH, canvasH } = e.data;
-      applyClip(iframeOffsetTop, headerH, canvasH);
+      const { iframeOffsetTop, headerH, canvasH, promptBarH = 0 } = e.data;
+      applyClip(iframeOffsetTop, headerH, canvasH, promptBarH);
       iframeOffsetTopRef.current = iframeOffsetTop;
       if (!pointerScreenRef.current && pointerRef.current) {
         pointerScreenRef.current = {
@@ -14941,13 +14954,11 @@ var EDGE_MARGIN = 16;
 function getVisibleClip(parentScroll) {
   const left = 0;
   const right = window.innerWidth;
-  if (!parentScroll) {
+  const band = getIframeVisibleClip(parentScroll);
+  if (!band) {
     return { top: 0, bottom: window.innerHeight, left, right };
   }
-  const { iframeOffsetTop, headerH: visibleCanvasTop, canvasH } = parentScroll;
-  const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
-  const bottom = Math.min(window.innerHeight, visibleCanvasTop + canvasH - iframeOffsetTop);
-  return { top, bottom: Math.max(top, bottom), left, right };
+  return { ...band, left, right };
 }
 function defaultFloatingPanelPosition(parentScroll, panelHeight = 280) {
   const clip = getVisibleClip(parentScroll);
@@ -15278,6 +15289,30 @@ function relativeLuminance(color) {
   };
   return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
 }
+function contrastRatio(a, b) {
+  const lighter = Math.max(relativeLuminance(a), relativeLuminance(b));
+  const darker = Math.min(relativeLuminance(a), relativeLuminance(b));
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function compositeOver(fg, bg) {
+  const a = fg.a + bg.a * (1 - fg.a);
+  if (a < 1e-3) return { ...bg, a: 0 };
+  return {
+    r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / a,
+    g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / a,
+    b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / a,
+    a
+  };
+}
+function previewSlotForChrome(chrome, slotBackground) {
+  const text = parseColor(chrome.color);
+  if (!text || text.a < 0.2) return slotBackground;
+  const slot = parseColor(slotBackground) ?? { r: 250, g: 250, b: 249, a: 1 };
+  const fill = parseColor(chrome.background);
+  const effective = fill && !isTransparent(fill) ? compositeOver(fill, slot) : slot;
+  if (contrastRatio(text, effective) >= 3) return slotBackground;
+  return relativeLuminance(text) > 0.55 ? "#2c2c2c" : "#f4f4f5";
+}
 function parseColor(input) {
   if (!input) return null;
   const value = input.trim().toLowerCase();
@@ -15354,10 +15389,10 @@ function declaredVariant(className) {
   return match && isButtonVariantId(match[1]) ? match[1] : null;
 }
 function fillSlot(sample) {
-  if (hasOpaqueBackground(sample.background)) return "primary";
   const width = parseFloat(sample.borderWidth);
   const border = parseColor(sample.borderColor);
   if (width > 0 && !isTransparent(border)) return "secondary";
+  if (hasOpaqueBackground(sample.background)) return "primary";
   return "ghost";
 }
 function sampleSlot(sample) {
@@ -15381,6 +15416,15 @@ function paintColor(chrome) {
   const text = parseColor(chrome.color);
   return text ? toCss({ ...text, a: 1 }) : chrome.color;
 }
+function accentColor(chrome) {
+  const bg = parseColor(chrome.background);
+  if (bg && !isTransparent(bg) && relativeLuminance(bg) < 0.55) {
+    return toCss({ ...bg, a: 1 });
+  }
+  const text = parseColor(chrome.color);
+  if (text && !isTransparent(text)) return toCss({ ...text, a: 1 });
+  return paintColor(chrome);
+}
 function chromeFrom(sample) {
   return {
     background: sample.background || TRANSPARENT,
@@ -15400,7 +15444,7 @@ function filledPrimary(seed) {
   };
 }
 function generatedSecondary(primary) {
-  const paint = paintColor(primary);
+  const paint = accentColor(primary);
   return {
     background: TRANSPARENT,
     color: paint,
@@ -15411,13 +15455,13 @@ function generatedSecondary(primary) {
 function generatedGhost(primary) {
   return {
     background: TRANSPARENT,
-    color: paintColor(primary),
+    color: accentColor(primary),
     borderColor: TRANSPARENT,
     borderWidth: "0px"
   };
 }
 function normalizeOutlineChrome(outline, primary) {
-  const paint = paintColor(primary);
+  const paint = accentColor(primary);
   const text = parseColor(outline.color);
   const paintRgb = parseColor(paint);
   const primaryLabel = parseColor(primary.color);
@@ -15653,36 +15697,49 @@ function readSizeSample(el) {
     gap: parsePx(style.columnGap || style.gap, rootFont)
   };
 }
+function readTypography(el) {
+  const style = getComputedStyle(el);
+  return {
+    fontFamily: style.fontFamily,
+    fontWeight: style.fontWeight,
+    letterSpacing: style.letterSpacing,
+    textTransform: style.textTransform,
+    textDecoration: style.textDecorationLine || style.textDecoration || "none"
+  };
+}
 var buttonOriginByEl = /* @__PURE__ */ new WeakMap();
-function hasEditorPaint(el) {
-  return el.hasAttribute("data-ohw-btn-variant") || el.hasAttribute("data-ohw-btn-size") || Boolean(el.style.background || el.style.padding || el.style.height);
+var ORIGIN_ATTR = "data-ohw-btn-origin";
+function parseOriginAttr(raw) {
+  if (!raw) return null;
+  try {
+    const value = JSON.parse(raw);
+    if (!value?.variant || !value.size || !value.typography) return null;
+    return value;
+  } catch {
+    return null;
+  }
 }
-function measureSourceOrigin(el) {
-  const parent = el.parentElement;
-  if (!parent) {
-    return { variant: readVariantSample(el), size: readSizeSample(el) };
-  }
-  const probe = el.cloneNode(true);
-  probe.removeAttribute("style");
-  probe.removeAttribute("data-ohw-btn-variant");
-  probe.removeAttribute("data-ohw-btn-size");
-  probe.removeAttribute("data-ohw-selected");
-  probe.setAttribute("data-ohw-btn-probe", "");
-  for (const node of probe.querySelectorAll("[style]")) {
-    node.removeAttribute("style");
-  }
-  probe.style.cssText = "position:absolute;left:-99999px;top:0;visibility:hidden;pointer-events:none;display:inline-flex;";
-  parent.insertBefore(probe, el);
-  void probe.offsetHeight;
-  const origin = { variant: readVariantSample(probe), size: readSizeSample(probe) };
-  probe.remove();
-  return origin;
+function measureLiveOrigin(el) {
+  return {
+    variant: readVariantSample(el),
+    size: readSizeSample(el),
+    typography: readTypography(el)
+  };
 }
 function captureButtonOrigin(el) {
   const cached = buttonOriginByEl.get(el);
   if (cached) return cached;
-  const origin = hasEditorPaint(el) ? measureSourceOrigin(el) : { variant: readVariantSample(el), size: readSizeSample(el) };
+  const fromAttr = parseOriginAttr(el.getAttribute(ORIGIN_ATTR));
+  if (fromAttr) {
+    buttonOriginByEl.set(el, fromAttr);
+    return fromAttr;
+  }
+  const origin = measureLiveOrigin(el);
   buttonOriginByEl.set(el, origin);
+  try {
+    el.setAttribute(ORIGIN_ATTR, JSON.stringify(origin));
+  } catch {
+  }
   return origin;
 }
 function listStyleButtons(doc) {
@@ -15777,12 +15834,18 @@ function assignmentFor(el, content, tokens) {
 function labelElement(el) {
   return el.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ?? (el.matches('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ? el : null);
 }
-function applyButtonStyle(el, assignment, tokens) {
-  captureButtonOrigin(el);
+var paintLockByEl = /* @__PURE__ */ new WeakMap();
+var paintObserverByEl = /* @__PURE__ */ new WeakMap();
+var paintingButton = false;
+function paintButtonChrome(el, assignment, tokens) {
+  const origin = captureButtonOrigin(el);
   const chrome = tokens.variants[assignment.variant];
-  const geometry = tokens.sizes[assignment.size];
+  const originSlot = classifyHeight(origin.size.height);
+  const geometry = assignment.size === originSlot ? geometryFromSample({ ...origin.size, borderRadius: origin.size.borderRadius, gap: origin.size.gap }) : tokens.sizes[assignment.size];
+  const { typography } = origin;
   el.setAttribute("data-ohw-btn-variant", assignment.variant);
   el.setAttribute("data-ohw-btn-size", assignment.size);
+  el.style.transition = "none";
   el.style.boxSizing = "border-box";
   el.style.display = "inline-flex";
   el.style.alignItems = "center";
@@ -15794,12 +15857,41 @@ function applyButtonStyle(el, assignment, tokens) {
   el.style.borderWidth = chrome.borderWidth;
   el.style.padding = `${geometry.paddingTop} ${geometry.paddingRight} ${geometry.paddingBottom} ${geometry.paddingLeft}`;
   el.style.fontSize = geometry.fontSize;
-  el.style.borderRadius = geometry.borderRadius;
+  el.style.borderRadius = px(origin.size.borderRadius);
   el.style.gap = geometry.gap;
   el.style.height = px(geometry.height);
+  el.style.fontFamily = typography.fontFamily;
+  el.style.fontWeight = typography.fontWeight;
+  el.style.letterSpacing = typography.letterSpacing;
+  el.style.textTransform = typography.textTransform;
+  if (typography.textDecoration && typography.textDecoration !== "none") {
+    el.style.textDecoration = typography.textDecoration;
+  } else {
+    el.style.textDecoration = "none";
+  }
   const label = labelElement(el);
   if (label && label !== el) label.style.color = chrome.color;
 }
+function guardTemplateHover(el) {
+  if (paintObserverByEl.has(el)) return;
+  const observer = new MutationObserver(() => {
+    if (paintingButton) return;
+    const lock = paintLockByEl.get(el);
+    if (!lock) return;
+    paintingButton = true;
+    paintButtonChrome(el, lock.assignment, lock.tokens);
+    paintingButton = false;
+  });
+  observer.observe(el, { attributes: true, attributeFilter: ["style", "class"] });
+  paintObserverByEl.set(el, observer);
+}
+function applyButtonStyle(el, assignment, tokens) {
+  paintLockByEl.set(el, { assignment, tokens });
+  paintingButton = true;
+  paintButtonChrome(el, assignment, tokens);
+  paintingButton = false;
+  guardTemplateHover(el);
+}
 function applyButtonStylesFromContent(doc, content) {
   const assignments = readAssignments(content);
   for (const [id, assignment] of Object.entries(assignments)) {
@@ -15834,6 +15926,7 @@ function ButtonStylePanel({
         const chrome = variants[id];
         const selected = id === variant;
         const hasBorder = parseFloat(chrome.borderWidth) > 0;
+        const cardSlot = previewSlotForChrome(chrome, slotBackground);
         return /* @__PURE__ */ jsxs20(
           "button",
           {
@@ -15854,7 +15947,7 @@ function ButtonStylePanel({
                 "div",
                 {
                   className: "flex w-full items-center justify-center py-5",
-                  style: { background: slotBackground },
+                  style: { background: cardSlot },
                   children: /* @__PURE__ */ jsx30(
                     "span",
                     {
@@ -15988,6 +16081,9 @@ function isLastNavbarButton(el) {
 function canDeleteButton(el) {
   return !isLastNavbarButton(el);
 }
+function canDuplicateButton(el) {
+  return isNavbarCta(el);
+}
 function labelElement2(el) {
   return el.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ?? el.querySelector("[data-ohw-key]");
 }
@@ -16042,12 +16138,27 @@ function nextCollectionId(content, doc) {
   while (used.has(`bc-${n}`)) n += 1;
   return `bc-${n}`;
 }
+var COLLECTION_GAP_MAX_PX = 12;
+var COLLECTION_GAP_DEFAULT = "12px";
+function usableGap(value) {
+  if (!value || value === "normal") return null;
+  const n = parseFloat(value);
+  if (!Number.isFinite(n) || n <= 0) return null;
+  if (n > COLLECTION_GAP_MAX_PX) return COLLECTION_GAP_DEFAULT;
+  return `${Math.round(n * 100) / 100}px`;
+}
 function collectionGap(el, tokens) {
-  if (tokens) return tokens.sizes.m.gap;
+  const fromCollection = usableGap(buttonCollectionOf(el)?.style.gap);
+  if (fromCollection) return fromCollection;
   const parent = el.parentElement;
-  if (!parent) return "12px";
-  const gap = getComputedStyle(parent).columnGap || getComputedStyle(parent).gap;
-  return gap && gap !== "normal" ? gap : "12px";
+  if (parent) {
+    const style = getComputedStyle(parent);
+    const fromParent = usableGap(style.columnGap) ?? usableGap(style.gap);
+    if (fromParent) return fromParent;
+  }
+  const fromTokens = usableGap(tokens?.sizes.m.gap);
+  if (fromTokens) return fromTokens;
+  return COLLECTION_GAP_DEFAULT;
 }
 function styleCollection(collection, gap) {
   collection.style.display = "inline-flex";
@@ -16095,6 +16206,7 @@ function findButton(doc, id) {
   return doc.querySelector(`[data-ohw-href-key="${CSS.escape(id)}"]`);
 }
 function duplicateButton(source, content) {
+  if (!canDuplicateButton(source)) return null;
   const sourceId = buttonId(source);
   if (!sourceId) return null;
   const doc = source.ownerDocument;
@@ -16113,7 +16225,7 @@ function duplicateButton(source, content) {
   const collections = readCollections(content);
   let collectionId = collection?.getAttribute(COLLECTION_ATTR) ?? "";
   let members = collectionId && collections[collectionId] ? [...collections[collectionId].members] : [];
-  const gap = collection?.style.gap || collectionGap(source, tokens);
+  const gap = collectionGap(source, tokens);
   if (!collection) {
     collectionId = nextCollectionId(content, doc);
     collection = createCollection(doc, collectionId, gap);
@@ -17099,12 +17211,6 @@ var SECTION_DRAG_EXCLUDED_SELECTOR = [
   "[data-ohw-media-overlay]",
   "[data-ohw-media-skeleton]"
 ].join(", ");
-function visibleClip(ps) {
-  if (!ps) return null;
-  const top = Math.max(0, ps.headerH - ps.iframeOffsetTop);
-  const bottom = Math.min(window.innerHeight, ps.headerH + ps.canvasH - ps.iframeOffsetTop);
-  return { top, bottom: Math.max(top, bottom) };
-}
 function useSectionDrag({
   isEditMode,
   editContentRef,
@@ -17141,7 +17247,7 @@ function useSectionDrag({
   }, [postToParentRef, stopAutoScroll]);
   const updateAutoScroll = useCallback8(
     (clientY) => {
-      const clip = visibleClip(parentScrollRef.current);
+      const clip = getIframeVisibleClip(parentScrollRef.current);
       let delta = 0;
       if (clip) {
         const distTop = clientY - clip.top;
@@ -17553,7 +17659,14 @@ function collectEditableNodes(extraContent, root = document) {
       // so collecting the DOM alone left them behind: the draft knew the row was showing icons and
       // had gained an item, and the published page went back to the template's own (OHH-736).
       SOCIALS_ORDER_KEY,
-      SOCIALS_DISPLAY_KEY
+      SOCIALS_DISPLAY_KEY,
+      // Button variant/size tokens and per-CTA assignments — JSON in editContent, applied on hydrate.
+      BUTTON_VARIANTS_KEY,
+      BUTTON_SIZES_KEY,
+      BUTTON_ASSIGNMENTS_KEY,
+      BUTTON_COLLECTIONS_KEY,
+      BUTTON_SNAPSHOTS_KEY,
+      BUTTON_HIDDEN_KEY
     ]) {
       const text = extraContent[key];
       if (typeof text === "string" && text.length > 0) {
@@ -19043,16 +19156,6 @@ function EditGlowChrome({
     }
   );
 }
-function getIframeVisibleClip(parentScroll) {
-  if (!parentScroll) return null;
-  const { iframeOffsetTop, headerH: visibleCanvasTop, canvasH } = parentScroll;
-  const clipTop = Math.max(0, visibleCanvasTop - iframeOffsetTop);
-  const clipBottom = Math.min(
-    window.innerHeight,
-    visibleCanvasTop + canvasH - iframeOffsetTop
-  );
-  return { top: clipTop, bottom: Math.max(clipTop, clipBottom) };
-}
 function isRectOutsideClip(rect, clip) {
   if (!clip) return false;
   return rect.bottom < clip.top || rect.top > clip.bottom;
@@ -24801,10 +24904,10 @@ function OhhwellsBridge() {
     };
     const handleParentScroll = (e) => {
       if (e.data?.type !== "ow:parent-scroll") return;
-      const { iframeOffsetTop, headerH, canvasH } = e.data;
-      parentScrollRef.current = { iframeOffsetTop, headerH, canvasH };
+      const { iframeOffsetTop, headerH, canvasH, promptBarH = 0 } = e.data;
+      parentScrollRef.current = { iframeOffsetTop, headerH, canvasH, promptBarH };
       if (floatingPanelOpenRef.current) {
-        setParentScrollSnap({ iframeOffsetTop, headerH, canvasH });
+        setParentScrollSnap({ iframeOffsetTop, headerH, canvasH, promptBarH });
       }
       if (visibleViewportRef.current) {
         applyVisibleViewport(visibleViewportRef.current, parentScrollRef.current);
@@ -26097,7 +26200,7 @@ function OhhwellsBridge() {
                   const social = getSocialItem(selectedElRef.current);
                   return social ? !canRemoveSocialItem(social) : false;
                 })(),
-                duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow || selectedElRef.current !== null && (() => {
+                duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow || selectedElRef.current !== null && isCtaButton(selectedElRef.current) && !canDuplicateButton(selectedElRef.current) || selectedElRef.current !== null && (() => {
                   const social = getSocialItem(selectedElRef.current);
                   const row = social ? findSocialsRow(social) : null;
                   return row ? !canAddSocialItem(row) : false;