@ohhwells/bridge 0.1.58 → 0.1.60

package/dist/index.cjs

@@ -223,6 +223,17 @@ var FEATURE_LINE_CSS = [
 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; }",
+  "  [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
+  "}"
+].join("\n");
 var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 function MediaBox({
   refValue,
@@ -965,6 +976,7 @@ function Carousel({ items, itemsPerRow, ctx }) {
           children: pageGroups.map((group, p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {
+              "data-ai-grid": String(itemsPerRow),
               style: {
                 flex: "0 0 100%",
                 display: "grid",
@@ -1068,6 +1080,7 @@ function CollectionBlock({ node, ctx, path }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      "data-ai-grid": String(itemsPerRow),
       style: {
         display: "grid",
         gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)`,
@@ -1231,6 +1244,7 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
     {
       "data-ai-section": tree.tag ?? "",
       ...bgAttrs,
+      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${pad}px 0`,
@@ -1240,10 +1254,12 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
         backgroundPosition: "center"
       },
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_RESPONSIVE_CSS }),
         isOverlay && backgroundUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
+            "data-ai-section-inner": "",
             style: {
               position: "relative",
               maxWidth: AI_TREE_TOKENS.sectionMaxWidth,
@@ -1254,6 +1270,7 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
             children: tree.rows.map((row, r2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
+                "data-ai-columns": "",
                 style: {
                   display: "grid",
                   gridTemplateColumns: "repeat(12, 1fr)",
@@ -6159,6 +6176,7 @@ var FOCUS_RING = `0 0 0 4px color-mix(in srgb, ${PRIMARY} 12%, transparent)`;
 var DRAG_SHADOW = "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)";
 var TOOLBAR_EDGE_MARGIN = 4;
 var SELECTION_CHROME_GAP = 4;
+var HOVER_CHROME_GAP = 2;
 var TOOLBAR_STROKE_GAP = 4;
 function getChromeZIndex(state) {
   switch (state) {
@@ -6314,10 +6332,11 @@ function ItemInteractionLayer({
   onItemPointerDown,
   onItemClick,
   itemDragSurface = true,
-  chromeGap = SELECTION_CHROME_GAP,
+  chromeGap,
   className
 }) {
   if (state === "default") return null;
+  const gap = chromeGap ?? (state === "hover" ? HOVER_CHROME_GAP : SELECTION_CHROME_GAP);
   const isActive = state === "active-top" || state === "active-bottom";
   const isDragging = state === "dragging";
   const showToolbar = isActive && toolbar;
@@ -6333,10 +6352,10 @@ function ItemInteractionLayer({
       className: cn("pointer-events-none", className),
       style: {
         position: "fixed",
-        top: rect.top - chromeGap,
-        left: rect.left - chromeGap,
-        width: rect.width + chromeGap * 2,
-        height: rect.height + chromeGap * 2,
+        top: rect.top - gap,
+        left: rect.left - gap,
+        width: rect.width + gap * 2,
+        height: rect.height + gap * 2,
         zIndex: getChromeZIndex(state)
       },
       children: [
@@ -7108,7 +7127,14 @@ function findClosestButtonLike(target) {
 function findButtonAtPoint(x, y, media) {
   const hits = Array.from(
     document.querySelectorAll(BUTTON_LIKE_SELECTOR)
-  ).filter((el) => containsPoint(el, x, y) && !(media && el.contains(media)));
+  ).filter(
+    (el) => containsPoint(el, x, y) && !(media && el.contains(media)) && // Bridge-injected chrome (e.g. MediaOverlay's own "Replace image" button) is never a
+    // site button. Without this, once the media overlay renders its button lands right
+    // under the cursor, gets detected as "a button on the media", and dismisses the very
+    // overlay it belongs to — which removes the button, so the next hit-test finds nothing
+    // and the overlay reappears. Flip-flops every tick: the "Replace image" button flashes.
+    !el.closest("[data-ohw-bridge]")
+  );
   if (hits.length === 0) return null;
   return hits.reduce((best, el) => best.contains(el) ? el : best);
 }
@@ -9683,6 +9709,10 @@ function isSocialsRow(el) {
   const anchors = Array.from(el.querySelectorAll("a"));
   return anchors.length > 0 && anchors.every((anchor) => isSocialItem(anchor));
 }
+var MAX_SOCIAL_ITEMS_PER_ROW = 7;
+function canAddSocialItem(row) {
+  return listSocialItems(row).length < MAX_SOCIAL_ITEMS_PER_ROW;
+}
 function listSocialItems(row) {
   return Array.from(row.children).map((child) => {
     if (!(child instanceof HTMLElement)) return null;
@@ -10042,6 +10072,7 @@ function ensureIconSlot(item) {
 // src/lib/footer-items.ts
 var FOOTER_ORDER_KEY = "__ohw_footer_order";
 var MAX_FOOTER_COLUMNS = 18;
+var MAX_FOOTER_ITEMS_PER_COLUMN = 7;
 var FOOTER_HREF_RE = /^footer-(\d+)-(\d+)-href$/;
 function parseFooterHrefKey(key) {
   if (!key) return null;
@@ -10259,6 +10290,13 @@ function getNextFooterColumnIndex() {
 function canAddFooterColumn() {
   return listFooterColumns().length < MAX_FOOTER_COLUMNS;
 }
+function canAddFooterItem(column) {
+  return listFooterLinksInColumn(column).length < MAX_FOOTER_ITEMS_PER_COLUMN;
+}
+function resolveFooterColumnForAdd(selected) {
+  if (selected.hasAttribute("data-ohw-footer-col")) return selected;
+  return selected.closest("[data-ohw-footer-col]") ?? (listFooterColumns().includes(selected) ? selected : null);
+}
 function buildFooterHeading(colIndex, text) {
   const heading = document.createElement("p");
   heading.setAttribute("data-ohw-editable", "text");
@@ -10988,6 +11026,7 @@ function FloatingPanel({
       e.stopPropagation();
       const el = e.currentTarget;
       el.setPointerCapture(e.pointerId);
+      document.documentElement.setAttribute("data-ohw-panel-dragging", "");
       dragRef.current = {
         pointerId: e.pointerId,
         startX: e.clientX,
@@ -11020,11 +11059,17 @@ function FloatingPanel({
     const drag = dragRef.current;
     if (!drag || drag.pointerId !== e.pointerId) return;
     dragRef.current = null;
+    document.documentElement.removeAttribute("data-ohw-panel-dragging");
     try {
       e.currentTarget.releasePointerCapture(e.pointerId);
     } catch {
     }
   }, []);
+  (0, import_react13.useEffect)(() => {
+    if (open) return;
+    document.documentElement.removeAttribute("data-ohw-panel-dragging");
+  }, [open]);
+  (0, import_react13.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
   if (!open) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
@@ -12803,6 +12848,11 @@ function isNavbarLinksContainer2(el) {
 function getFooterColumn(el) {
   return el.closest("[data-ohw-footer-col], [data-ohw-footer-column]");
 }
+function isFooterAddItemDisabled(selected) {
+  if (!selected) return false;
+  const column = resolveFooterColumnForAdd(selected);
+  return column ? !canAddFooterItem(column) : false;
+}
 function resolveFooterColumnSelectionTarget(target, clientX, clientY) {
   if (getNavigationItemAnchor(target)) return null;
   const column = getFooterColumn(target);
@@ -13116,6 +13166,9 @@ var ICONS = {
 var SELECTION_CHROME_GAP2 = 4;
 var TOOLBAR_STROKE_GAP2 = 4;
 var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
+var HOVER_STROKE_WIDTH = 1.5;
+var TEXT_HOVER_SIDE_PAD = 4;
+var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY3})`;
 var TOOLBAR_GROUPS = [
   [
     { cmd: "bold", title: "Bold" },
@@ -13616,6 +13669,28 @@ function OhhwellsBridge() {
   const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react16.useState)(null);
   const hoveredItemElRef = (0, import_react16.useRef)(null);
   const [hoveredItemRect, setHoveredItemRect] = (0, import_react16.useState)(null);
+  const [hoveredTextRect, setHoveredTextRect] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
+    const sync = () => {
+      const el = document.querySelector(
+        "[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key])"
+      );
+      const target = el && !el.closest("[data-ohw-href-key]") ? el : null;
+      if (!target) {
+        setHoveredTextRect(null);
+        return;
+      }
+      const r2 = target.getBoundingClientRect();
+      setHoveredTextRect(new DOMRect(r2.x - TEXT_HOVER_SIDE_PAD, r2.y, r2.width + TEXT_HOVER_SIDE_PAD * 2, r2.height));
+    };
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-ohw-hovered"],
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, []);
   const siblingHintElRef = (0, import_react16.useRef)(null);
   const [siblingHintRect, setSiblingHintRect] = (0, import_react16.useState)(null);
   const [siblingHintRects, setSiblingHintRects] = (0, import_react16.useState)([]);
@@ -14069,6 +14144,14 @@ function OhhwellsBridge() {
     if (!selected) return;
     const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
     if (socialsRow) {
+      if (!canAddSocialItem(socialsRow)) {
+        postToParent2({
+          type: "ow:toast",
+          title: `Maximum ${MAX_SOCIAL_ITEMS_PER_ROW} social icons`,
+          toastType: "error"
+        });
+        return;
+      }
       const after = getSocialItem(selected);
       const result2 = insertSocialItem(socialsRow, after, editContentRef.current);
       if (!result2) return;
@@ -14090,10 +14173,16 @@ function OhhwellsBridge() {
       return;
     }
     if (toolbarVariantRef.current === "select-frame" && isFooterFrameSelection) {
-      if (!selected.hasAttribute("data-ohw-footer-col") && !selected.closest("[data-ohw-footer-col]")) {
-      }
-      const column = (selected.hasAttribute("data-ohw-footer-col") ? selected : null) ?? selected.closest("[data-ohw-footer-col]") ?? (listFooterColumns().includes(selected) ? selected : null);
+      const column = resolveFooterColumnForAdd(selected);
       if (!column) return;
+      if (!canAddFooterItem(column)) {
+        postToParent2({
+          type: "ow:toast",
+          title: `Maximum ${MAX_FOOTER_ITEMS_PER_COLUMN} items per column`,
+          toastType: "error"
+        });
+        return;
+      }
       const result2 = insertFooterItem(column, "/", "New link", null);
       applyLinkByKey(result2.hrefKey, result2.href);
       document.querySelectorAll(`[data-ohw-key="${result2.labelKey}"]`).forEach((el) => {
@@ -15047,9 +15136,12 @@ function OhhwellsBridge() {
       [data-ohw-editable="video"], [data-ohw-editable="video"] *,
       [data-ohw-editable="bg-image"], [data-ohw-editable="bg-image"] * { cursor: pointer !important; }
       [data-ohw-editable="link"], [data-ohw-editable="link"] * { cursor: pointer !important; }
+      /* Text hover chrome is drawn by the overlay (see hoveredTextRect) \u2014 the CSS outline
+         that used to draw it dashes denser than the overlay border, so identical specs
+         still read as two different frames (OHH-695). The attribute stays: hover paths
+         and suppression rules key off it. */
       [data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]) {
-        outline: 2px dashed ${PRIMARY3} !important;
-        outline-offset: 4px;
+        outline: none !important;
       }
       [data-ohw-href-key] [data-ohw-hovered],
       [data-ohw-href-key][data-ohw-hovered],
@@ -15102,8 +15194,11 @@ function OhhwellsBridge() {
       stateViews.textContent = `
         [data-ohw-state-view]:not([data-ohw-state-view="default"]) { display: none; }
         [data-ohw-state-view="default"] [data-ohw-editable] { pointer-events: auto !important; }
-        [data-ohw-state-hovered] { outline: 2px dashed ${PRIMARY3} !important; outline-offset: 4px; }
+        [data-ohw-state-hovered] { outline: ${HOVER_STROKE_WIDTH}px dashed ${CHROME_PRIMARY} !important; outline-offset: ${HOVER_CHROME_GAP}px; }
         [data-ohw-state-hovered]:has([data-ohw-hovered]) { outline: none !important; }
+        /* :has() only sees descendants \u2014 when the card itself is the hovered text, the overlay
+           already frames it, and the card outline doubled it (OHH-695). */
+        [data-ohw-state-hovered][data-ohw-hovered] { outline: none !important; }
       `;
       document.head.appendChild(base);
       document.head.appendChild(forceHover);
@@ -15371,6 +15466,13 @@ function OhhwellsBridge() {
         setHoveredNavContainerRect(null);
         return;
       }
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || target.closest("[data-ohw-floating-panel]")) {
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        return;
+      }
       {
         const selected2 = selectedElRef.current;
         const selectedIsFooterColumn = Boolean(selected2) && !isFooterLinksContainer(selected2) && (selected2.hasAttribute("data-ohw-footer-col") || selected2.hasAttribute("data-ohw-footer-column") || Boolean(selected2.closest("footer") && isInferredFooterGroup2(selected2)));
@@ -16020,8 +16122,16 @@ function OhhwellsBridge() {
         setSectionGap(null);
       }
     };
+    const pointOwnedByFloatingPanel = (clientX, clientY) => {
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging")) return true;
+      const panel = document.querySelector("[data-ohw-floating-panel]");
+      if (!panel) return false;
+      const rect = panel.getBoundingClientRect();
+      return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+    };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
+      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
       probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
@@ -16030,6 +16140,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)) return;
       probeSectionGapAt(clientX, clientY);
       probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
@@ -16997,7 +17108,7 @@ function OhhwellsBridge() {
       if (footerDragRef.current) return;
       const target = e.target;
       if (!target) return;
-      if (target.closest('[data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-toolbar], [data-ohw-item-toolbar-anchor], [data-ohw-link-popover-root]')) {
+      if (target.closest('[data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-toolbar], [data-ohw-item-toolbar-anchor], [data-ohw-link-popover-root], [data-ohw-floating-panel]')) {
         return;
       }
       if (target.closest("[data-ohw-item-drag-surface]")) return;
@@ -17175,7 +17286,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.57",
+        bridgeVersion: "0.1.59",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -17641,6 +17752,7 @@ function OhhwellsBridge() {
       )),
       hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
       hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
+      hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
       toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
       toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         FooterContainerChrome,
@@ -17681,7 +17793,10 @@ function OhhwellsBridge() {
               onSelectParent: handleSelectParent,
               onDuplicate: handleDuplicateSelected,
               onDelete: handleDeleteSelected,
-              addItemDisabled: false,
+              addItemDisabled: isFooterFrameSelection && isFooterAddItemDisabled(selectedElRef.current) || selectedElRef.current !== null && (() => {
+                const row = isSocialsRow(selectedElRef.current) ? selectedElRef.current : findSocialsRow(selectedElRef.current);
+                return row ? !canAddSocialItem(row) : false;
+              })(),
               editLinkDisabled: false,
               moreDisabled: false,
               duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow,