@ohhwells/bridge 0.1.55-next.158 → 0.1.55-next.161

package/dist/index.cjs

@@ -347,6 +347,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,
@@ -1089,6 +1100,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",
@@ -1192,6 +1204,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)`,
@@ -1355,6 +1368,7 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
     {
       "data-ai-section": tree.tag ?? "",
       ...bgAttrs,
+      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${pad}px 0`,
@@ -1364,10 +1378,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,
@@ -1378,6 +1394,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)",
@@ -6304,6 +6321,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) {
@@ -6459,10 +6477,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;
@@ -6478,10 +6497,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: [
@@ -7141,7 +7160,10 @@ function AiSectionOverlay({
           border: `2px solid ${PRIMARY2}`,
           borderRadius: edgeAwareRadius(reviewRect),
           zIndex: 2147483200,
-          // The veil itself: swallows clicks so the section stays locked until decided.
+          // The veil itself: swallows clicks so the section stays locked until decided. This
+          // stopPropagation only guards the bubble phase; the bridge's capture-phase click
+          // handlers additionally bail on `[data-ohw-ai-review]`, without which a click on
+          // Accept/Discard resolves to the media beneath and opens the file picker.
           background: "rgba(8, 133, 254, 0.04)",
           pointerEvents: "auto",
           cursor: "default"
@@ -10139,6 +10161,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;
@@ -10356,6 +10379,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");
@@ -11408,6 +11438,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,
@@ -11440,11 +11471,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",
@@ -13351,6 +13388,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);
@@ -13664,6 +13706,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" },
@@ -14171,6 +14216,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)([]);
@@ -14663,10 +14730,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) => {
@@ -15645,7 +15718,7 @@ function OhhwellsBridge() {
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
         document.querySelectorAll("footer [data-ohw-href-key]").forEach((el) => {
-          if (isFooterHrefKey(el.getAttribute("data-ohw-href-key"))) {
+          if (isFooterHrefKey(el.getAttribute("data-ohw-href-key")) || getSocialItem(el)) {
             disableNativeHrefDrag(el);
           }
         });
@@ -15773,9 +15846,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],
@@ -15828,8 +15904,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);
@@ -15847,6 +15926,7 @@ function OhhwellsBridge() {
         return;
       }
       const target = e.target;
+      if (target.closest("[data-ohw-ai-review]")) return;
       if (target.closest("[data-ohw-toolbar]")) return;
       if (target.closest("[data-ohw-state-toggle]")) return;
       if (target.closest("[data-ohw-max-badge]")) return;
@@ -16078,6 +16158,7 @@ function OhhwellsBridge() {
     };
     const handleDblClick = (e) => {
       const target = e.target;
+      if (target.closest("[data-ohw-ai-review]")) return;
       if (target.closest("[data-ohw-toolbar]")) return;
       if (target.closest("[data-ohw-state-toggle]")) return;
       if (target.closest("[data-ohw-max-badge]")) return;
@@ -16110,7 +16191,7 @@ function OhhwellsBridge() {
         setHoveredNavContainerRect(null);
         return;
       }
-      if (isInsideFloatingPanel(target) || isPointOverFloatingPanel(e.clientX, e.clientY)) {
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || isInsideFloatingPanel(target) || isPointOverFloatingPanel(e.clientX, e.clientY)) {
         hoveredItemElRef.current = null;
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
@@ -16206,7 +16287,6 @@ function OhhwellsBridge() {
             hoveredNavContainerRef.current = null;
             setHoveredNavContainerRect(null);
             hoveredItemElRef.current = editable;
-            setHoveredItemRect(editable.getBoundingClientRect());
           }
         }
       }
@@ -16825,7 +16905,7 @@ function OhhwellsBridge() {
     };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
-      if (floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
         hoveredItemElRef.current = null;
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
@@ -16846,7 +16926,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 (floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
         dismissImageHover();
         clearImageHover();
         return;
@@ -17949,7 +18029,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;
@@ -18593,6 +18673,7 @@ function OhhwellsBridge() {
       )),
       hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
       hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
+      hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
       toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
       toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         FooterContainerChrome,
@@ -18633,7 +18714,7 @@ function OhhwellsBridge() {
               onSelectParent: handleSelectParent,
               onDuplicate: handleDuplicateSelected,
               onDelete: handleDeleteSelected,
-              addItemDisabled: false,
+              addItemDisabled: isFooterFrameSelection && isFooterAddItemDisabled(selectedElRef.current),
               editLinkDisabled: false,
               moreDisabled: false,
               duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow,