@ohhwells/bridge 0.1.42-next.95 → 0.1.42-next.98

package/dist/index.cjs

@@ -6000,8 +6000,8 @@ function SectionPickerOverlay({
           !isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "div",
             {
-              className: "pointer-events-none fixed left-1/2 z-[1] -translate-x-1/2 rounded-md bg-background/90 px-3 py-2 text-sm text-muted-foreground shadow-sm",
-              style: { top: chromeClip.top + 64 },
+              className: "pointer-events-none fixed left-1/2 z-[1] -translate-x-1/2 rounded-md px-3 py-2 text-sm text-muted-foreground shadow-sm",
+              style: { top: chromeClip.top + 64, backgroundColor: "var(--ohw-background, #ffffff)" },
               children: "Loading page preview\u2026"
             }
           ) : null,
@@ -6717,8 +6717,6 @@ function applyNavOrderToContainer(container, order) {
   if (current.length === expected.length && current.every((key, i) => key === expected[i])) {
     return;
   }
-  const lastCurrentLinkEl = current.length > 0 ? findCounterpartByHrefKey(current[current.length - 1], container) : null;
-  const anchor = lastCurrentLinkEl?.parentElement === container ? lastCurrentLinkEl.nextElementSibling : null;
   const seen = /* @__PURE__ */ new Set();
   for (const hrefKey of desired) {
     if (seen.has(hrefKey)) continue;
@@ -6733,9 +6731,7 @@ function applyNavOrderToContainer(container, order) {
     orderedEls.push(el);
   }
   for (const el of orderedEls) {
-    if (anchor) {
-      if (el.nextSibling !== anchor) container.insertBefore(el, anchor);
-    } else if (container.lastElementChild !== el) {
+    if (container.lastElementChild !== el) {
       container.appendChild(el);
     }
   }
@@ -7077,11 +7073,6 @@ function reconcileFooterOrderFromContent(content) {
   }
   applyFooterOrder(order);
 }
-function isRowLayoutColumn(links) {
-  if (links.length < 2) return false;
-  const firstTop = links[0].getBoundingClientRect().top;
-  return links.every((link) => Math.abs(link.getBoundingClientRect().top - firstTop) < 4);
-}
 function buildLinkDropSlots(column, columnIndex) {
   const links = listFooterLinksInColumn(column);
   const colRect = column.getBoundingClientRect();
@@ -7099,32 +7090,6 @@ function buildLinkDropSlots(column, columnIndex) {
     });
     return slots;
   }
-  if (isRowLayoutColumn(links)) {
-    for (let i = 0; i <= links.length; i++) {
-      let left;
-      if (i === 0) {
-        left = links[0].getBoundingClientRect().left - barThickness / 2;
-      } else if (i === links.length) {
-        const last = links[links.length - 1].getBoundingClientRect();
-        left = last.right - barThickness / 2;
-      } else {
-        const prev = links[i - 1].getBoundingClientRect();
-        const next = links[i].getBoundingClientRect();
-        left = (prev.right + next.left) / 2 - barThickness / 2;
-      }
-      const heightRef = i === 0 ? links[0].getBoundingClientRect() : i === links.length ? links[links.length - 1].getBoundingClientRect() : links[i].getBoundingClientRect();
-      slots.push({
-        insertIndex: i,
-        columnIndex,
-        left,
-        top: heightRef.top,
-        width: barThickness,
-        height: Math.max(heightRef.height, colRect.height * 0.8),
-        direction: "vertical"
-      });
-    }
-    return slots;
-  }
   for (let i = 0; i <= links.length; i++) {
     let top;
     if (i === 0) {
@@ -7208,7 +7173,8 @@ function hitTestLinkDropSlot(clientX, clientY, draggedHrefKey) {
       return true;
     });
     for (const slot of slots) {
-      const dist = slot.direction === "vertical" ? Math.abs(clientX - (slot.left + slot.width / 2)) : Math.abs(clientY - (slot.top + slot.height / 2));
+      const cy = slot.top + slot.height / 2;
+      const dist = Math.abs(clientY - cy) + (inColX ? 0 : 1e3);
       if (!best || dist < best.dist) best = { slot, dist };
     }
   }
@@ -7618,6 +7584,7 @@ function useNavItemDrag({
       const hrefKey = anchor?.getAttribute("data-ohw-href-key") ?? null;
       if (!anchor || !isNavbarHrefKey(hrefKey)) return;
       if (isNavbarButton3(anchor) || isDragHandleDisabled2(anchor)) return;
+      armItemPressDrag();
       navPointerDragRef.current = {
         el: anchor,
         startX: e.clientX,
@@ -7644,7 +7611,6 @@ function useNavItemDrag({
       if (dx * dx + dy * dy < THRESHOLD * THRESHOLD) return;
       e.preventDefault();
       pending.started = true;
-      armItemPressDrag();
       clearTextSelection();
       try {
         document.body.setPointerCapture(pending.pointerId);
@@ -7672,8 +7638,7 @@ function useNavItemDrag({
         }
       } catch {
       }
-      if (!pending) return;
-      if (!pending.started) {
+      if (!pending?.started) {
         unlockItemDragInteraction();
         return;
       }
@@ -7725,6 +7690,7 @@ function useNavItemDrag({
       const hrefKey = selected.getAttribute("data-ohw-href-key");
       if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
       if (isNavbarButton3(selected) || isDragHandleDisabled2(selected)) return false;
+      armItemPressDrag();
       navPointerDragRef.current = {
         el: selected,
         startX: clientX,
@@ -8951,7 +8917,6 @@ function OhhwellsBridge() {
   const [fetchState, setFetchState] = (0, import_react9.useState)("idle");
   const autoSaveTimers = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
   const activeElRef = (0, import_react9.useRef)(null);
-  const pointerHeldRef = (0, import_react9.useRef)(false);
   const selectedElRef = (0, import_react9.useRef)(null);
   const selectedHrefKeyRef = (0, import_react9.useRef)(null);
   const selectedFooterColAttrRef = (0, import_react9.useRef)(null);
@@ -9649,6 +9614,7 @@ function OhhwellsBridge() {
     if (e.button !== 0) return;
     const selected = selectedElRef.current;
     if (!selected) return;
+    armFooterPressDrag();
     const hrefKey = selected.getAttribute("data-ohw-href-key");
     if (hrefKey && isFooterHrefKey(hrefKey)) {
       footerPointerDragRef.current = {
@@ -9759,8 +9725,6 @@ function OhhwellsBridge() {
     siblingHintElRef.current = null;
     setSiblingHintRect(null);
     setIsItemDragging(false);
-    const preActivationSelection = window.getSelection();
-    const preservedRange = preActivationSelection && preActivationSelection.rangeCount > 0 && !preActivationSelection.isCollapsed && el.contains(preActivationSelection.getRangeAt(0).commonAncestorContainer) ? preActivationSelection.getRangeAt(0).cloneRange() : null;
     el.setAttribute("contenteditable", "true");
     el.setAttribute("data-ohw-editing", "");
     el.removeAttribute("data-ohw-hovered");
@@ -9768,11 +9732,7 @@ function OhhwellsBridge() {
     activeElRef.current = el;
     originalContentRef.current = el.innerHTML;
     el.focus({ preventScroll: true });
-    if (preservedRange) {
-      const selection = window.getSelection();
-      selection?.removeAllRanges();
-      selection?.addRange(preservedRange);
-    } else if (options?.caretX !== void 0 && options?.caretY !== void 0) {
+    if (options?.caretX !== void 0 && options?.caretY !== void 0) {
       const { caretX, caretY } = options;
       placeCaretAtPoint(el, caretX, caretY);
       requestAnimationFrame(() => {
@@ -10228,18 +10188,7 @@ function OhhwellsBridge() {
         if (inActive || inActiveNav) {
           e.preventDefault();
           e.stopPropagation();
-          const selection = window.getSelection();
-          const hasRangeSelection = Boolean(selection && !selection.isCollapsed);
-          console.log(
-            "[OHW DEBUG handleClick] already-active branch",
-            "detail=",
-            e.detail,
-            "hasRangeSelection=",
-            hasRangeSelection,
-            "willPlaceCaret=",
-            e.detail < 2 && !hasRangeSelection
-          );
-          if (e.detail < 2 && !hasRangeSelection) {
+          if (e.detail < 2) {
             placeCaretAtPoint(active, e.clientX, e.clientY);
             refreshActiveCommandsRef.current();
           }
@@ -10282,15 +10231,6 @@ function OhhwellsBridge() {
         }
         e.preventDefault();
         e.stopPropagation();
-        console.log(
-          "[OHW DEBUG handleClick] first-activation branch",
-          "detail=",
-          e.detail,
-          "selectionAtClick=",
-          JSON.stringify(window.getSelection()?.toString() ?? ""),
-          "collapsedAtClick=",
-          window.getSelection()?.isCollapsed
-        );
         activateRef.current(editable);
         return;
       }
@@ -11401,83 +11341,30 @@ function OhhwellsBridge() {
       const h = document.documentElement.scrollHeight;
       if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
     };
-    let selectionChangeRaf = null;
-    const runSelectionChange = () => {
-      selectionChangeRaf = null;
-      const activeRoot = activeElRef.current;
-      if (!activeRoot) return;
+    const handleSelectionChange = () => {
+      if (!activeElRef.current) return;
       const next = /* @__PURE__ */ new Set();
-      const sel = window.getSelection();
-      let startNode = null;
-      if (sel && sel.rangeCount > 0) {
-        const range = sel.getRangeAt(0);
-        startNode = range.startContainer;
-        if (startNode.nodeType === Node.ELEMENT_NODE) {
-          const el = startNode;
-          startNode = el.childNodes[range.startOffset] ?? el.childNodes[range.startOffset - 1] ?? el;
+      for (const cmd of ["bold", "italic", "underline", "strikeThrough", "insertUnorderedList", "insertOrderedList"]) {
+        try {
+          if (document.queryCommandState(cmd)) next.add(cmd);
+        } catch {
         }
       }
-      const startEl = startNode ? startNode.nodeType === Node.TEXT_NODE ? startNode.parentElement : startNode : null;
-      if (startEl) {
-        const cs = getComputedStyle(startEl);
-        const weight = parseInt(cs.fontWeight, 10);
-        let hasBold = cs.fontWeight === "bold" || !Number.isNaN(weight) && weight >= 600;
-        let hasItalic = cs.fontStyle === "italic" || cs.fontStyle === "oblique";
-        let hasUnderline = false;
-        let hasStrike = false;
-        let hasUl = false;
-        let hasOl = false;
-        for (let el = startEl; el; el = el.parentElement) {
-          if (el.tagName === "B" || el.tagName === "STRONG") hasBold = true;
-          if (el.tagName === "I" || el.tagName === "EM") hasItalic = true;
-          const decoration = getComputedStyle(el).textDecorationLine;
-          if (decoration.includes("underline") || el.tagName === "U" || el.tagName === "INS") hasUnderline = true;
-          if (decoration.includes("line-through") || el.tagName === "S" || el.tagName === "STRIKE" || el.tagName === "DEL") hasStrike = true;
-          if (el.tagName === "UL") hasUl = true;
-          if (el.tagName === "OL") hasOl = true;
-          if (el === activeRoot) break;
-        }
-        if (hasBold) next.add("bold");
-        if (hasItalic) next.add("italic");
-        if (hasUnderline) next.add("underline");
-        if (hasStrike) next.add("strikeThrough");
-        if (hasUl) next.add("insertUnorderedList");
-        if (hasOl) next.add("insertOrderedList");
-        const block = startEl.closest("div, p, h1, h2, h3, h4, h5, h6, li, td, th") ?? startEl;
-        const align = getComputedStyle(block).textAlign;
-        if (align === "center") next.add("justifyCenter");
-        else if (align === "right" || align === "end") next.add("justifyRight");
-        else next.add("justifyLeft");
-      }
-      setActiveCommands((prev) => {
-        if (prev.size === next.size) {
-          let same = true;
-          for (const cmd of prev) {
-            if (!next.has(cmd)) {
-              same = false;
-              break;
-            }
-          }
-          if (same) return prev;
+      const sel = window.getSelection();
+      const anchor = sel?.anchorNode;
+      if (anchor) {
+        const el = anchor.nodeType === Node.TEXT_NODE ? anchor.parentElement : anchor;
+        const block = el?.closest("div, p, h1, h2, h3, h4, h5, h6, li, td, th") ?? el;
+        if (block) {
+          const align = getComputedStyle(block).textAlign;
+          if (align === "center") next.add("justifyCenter");
+          else if (align === "right" || align === "end") next.add("justifyRight");
+          else next.add("justifyLeft");
         }
-        return next;
-      });
-    };
-    const handleSelectionChange = () => {
-      if (pointerHeldRef.current) return;
-      if (selectionChangeRaf !== null) return;
-      selectionChangeRaf = requestAnimationFrame(runSelectionChange);
-    };
-    const markPointerHeld = (e) => {
-      if (e.button !== 0) return;
-      pointerHeldRef.current = true;
-    };
-    const markPointerReleased = () => {
-      if (!pointerHeldRef.current) return;
-      pointerHeldRef.current = false;
-      handleSelectionChange();
+      }
+      setActiveCommands(next);
     };
-    refreshActiveCommandsRef.current = runSelectionChange;
+    refreshActiveCommandsRef.current = handleSelectionChange;
     const handleDocMouseLeave = () => {
       hoveredImageRef.current = null;
       setMediaHover(null);
@@ -11717,6 +11604,7 @@ function OhhwellsBridge() {
       const anchor = getNavigationItemAnchor(target);
       const hrefKey = anchor?.getAttribute("data-ohw-href-key") ?? null;
       if (anchor && isFooterHrefKey(hrefKey)) {
+        armFooterPressDrag();
         footerPointerDragRef.current = {
           el: anchor,
           kind: "link",
@@ -11730,6 +11618,7 @@ function OhhwellsBridge() {
       }
       const col = target.closest("[data-ohw-footer-col]");
       if (col && !getNavigationItemAnchor(target)) {
+        armFooterPressDrag();
         footerPointerDragRef.current = {
           el: col,
           kind: "column",
@@ -11758,7 +11647,6 @@ function OhhwellsBridge() {
       if (dx * dx + dy * dy < THRESHOLD * THRESHOLD) return;
       e.preventDefault();
       pending.started = true;
-      armFooterPressDrag();
       clearTextSelection();
       try {
         document.body.setPointerCapture(pending.pointerId);
@@ -11812,8 +11700,7 @@ function OhhwellsBridge() {
         }
       } catch {
       }
-      if (!pending) return;
-      if (!pending.started) {
+      if (!pending?.started) {
         unlockFooterDragInteraction();
         return;
       }
@@ -11848,22 +11735,6 @@ function OhhwellsBridge() {
       unlockFooterDragInteraction();
     };
   }, [isEditMode]);
-  (0, import_react9.useEffect)(() => {
-    if (!isEditMode) return;
-    const debugSelectionChange = () => {
-      const sel = window.getSelection();
-      console.log(
-        "[OHW DEBUG selectionchange]",
-        JSON.stringify(sel?.toString() ?? ""),
-        "collapsed=",
-        sel?.isCollapsed,
-        "anchorNode=",
-        sel?.anchorNode,
-        "activeEl=",
-        activeElRef.current
-      );
-    };
-  }, [isEditMode]);
   (0, import_react9.useEffect)(() => {
     const handler = (e) => {
       if (e.data?.type !== "ow:request-schedule-config") return;
@@ -11922,7 +11793,6 @@ function OhhwellsBridge() {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [pathname]);
   const handleCommand = (0, import_react9.useCallback)((cmd) => {
-    document.execCommand("styleWithCSS", false, true);
     document.execCommand(cmd, false);
     activeElRef.current?.focus();
     if (activeElRef.current) setToolbarRect(getEditMeasureEl(activeElRef.current).getBoundingClientRect());