@ohhwells/bridge 0.1.114-next.309 → 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);
@@ -15823,7 +15834,10 @@ 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) {
+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 originSlot = classifyHeight(origin.size.height);
@@ -15831,6 +15845,7 @@ function applyButtonStyle(el, assignment, tokens) {
   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";
@@ -15857,6 +15872,26 @@ function applyButtonStyle(el, assignment, tokens) {
   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)) {
@@ -16046,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]");
 }
@@ -16100,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";
@@ -16153,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;
@@ -16171,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);
@@ -17157,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,
@@ -17199,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;
@@ -19108,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;
@@ -24866,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);
@@ -26162,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;