@ohhwells/bridge 0.1.38-next.56 → 0.1.38-next.58

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(index_exports, {
   CustomToolbarButton: () => CustomToolbarButton,
   CustomToolbarDivider: () => CustomToolbarDivider,
   DragHandle: () => DragHandle,
+  DropIndicator: () => DropIndicator,
   ItemActionToolbar: () => ItemActionToolbar,
   ItemInteractionLayer: () => ItemInteractionLayer,
   LinkEditorPanel: () => LinkEditorPanel,
@@ -49,6 +50,7 @@ __export(index_exports, {
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
   buildTarget: () => buildTarget,
+  dropIndicatorVariants: () => dropIndicatorVariants,
   filterAvailablePages: () => filterAvailablePages,
   getEditModeInitialState: () => getEditModeInitialState,
   isEditSessionActive: () => isEditSessionActive,
@@ -5181,9 +5183,9 @@ var DialogContent = React7.forwardRef(
           "data-slot": "dialog-content",
           className: cn(
             positionMode,
-            "left-1/2 top-1/2 z-[2147483647] flex w-full max-w-[483px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-visible",
+            "left-1/2 top-1/2 z-[2147483647] flex w-full max-w-[448px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-visible",
             "rounded-xl border border-border bg-background font-sans shadow-lg outline-none",
-            container ? "max-h-[calc(100%-32px)] max-w-[calc(100%-16px)]" : "max-h-[calc(100vh-32px)] max-w-[calc(100vw-16px)]",
+            container ? "max-h-[calc(100%-32px)]" : "max-h-[calc(100vh-32px)]",
             className
           ),
           onMouseDown: (e) => e.stopPropagation(),
@@ -5448,7 +5450,7 @@ function UrlOrPageInput({
     requestAnimationFrame(() => inputRef.current?.focus());
   };
   const fieldClassName = cn(
-    "data-ohw-link-field flex h-10 w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
+    "data-ohw-link-field flex h-[36px] w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
     urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
   );
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
@@ -5634,6 +5636,26 @@ function rectsEqual(a, b) {
   }
   return true;
 }
+function readSectionRects(sectionIds) {
+  const next = /* @__PURE__ */ new Map();
+  for (const id of sectionIds) {
+    const el = document.querySelector(
+      `[data-ohw-section="${CSS.escape(id)}"]`
+    );
+    if (el) next.set(id, el.getBoundingClientRect());
+  }
+  return next;
+}
+function hitTestSectionId(x, y, sectionIds, rects) {
+  for (const id of sectionIds) {
+    const rect = rects.get(id);
+    if (!rect || rect.width <= 0 || rect.height <= 0) continue;
+    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+      return id;
+    }
+  }
+  return null;
+}
 function useSectionRects(sectionIdsKey, enabled) {
   const [rects, setRects] = (0, import_react5.useState)(/* @__PURE__ */ new Map());
   const sectionIds = (0, import_react5.useMemo)(
@@ -5646,13 +5668,7 @@ function useSectionRects(sectionIdsKey, enabled) {
       return;
     }
     const update = () => {
-      const next = /* @__PURE__ */ new Map();
-      for (const id of sectionIds) {
-        const el = document.querySelector(
-          `[data-ohw-section="${CSS.escape(id)}"]`
-        );
-        if (el) next.set(id, el.getBoundingClientRect());
-      }
+      const next = readSectionRects(sectionIds);
       setRects((prev) => rectsEqual(prev, next) ? prev : next);
     };
     update();
@@ -5689,6 +5705,10 @@ function SectionPickerOverlay({
   const pathname = (0, import_navigation.usePathname)();
   const [selectedId, setSelectedId] = (0, import_react5.useState)(null);
   const [hoveredId, setHoveredId] = (0, import_react5.useState)(null);
+  const pointerRef = (0, import_react5.useRef)(null);
+  const pointerScreenRef = (0, import_react5.useRef)(null);
+  const iframeOffsetTopRef = (0, import_react5.useRef)(null);
+  const sectionIdsRef = (0, import_react5.useRef)([]);
   const [chromeClip, setChromeClip] = (0, import_react5.useState)(
     () => ({
       top: 0,
@@ -5711,6 +5731,29 @@ function SectionPickerOverlay({
       document.documentElement.removeAttribute("data-ohw-section-picking");
     };
   }, []);
+  const liveSections = (0, import_react5.useMemo)(() => {
+    if (!isOnTargetPage) return sections;
+    const live = collectSectionsFromDom();
+    if (live.length === 0) return sections;
+    const labels = new Map(sections.map((s) => [s.id, s.label]));
+    return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
+  }, [isOnTargetPage, sections, pathname]);
+  const sectionIdsKey = (0, import_react5.useMemo)(
+    () => liveSections.map((s) => s.id).join("\0"),
+    [liveSections]
+  );
+  const sectionIds = (0, import_react5.useMemo)(
+    () => liveSections.map((s) => s.id),
+    [liveSections]
+  );
+  sectionIdsRef.current = sectionIds;
+  const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
+  const applyHoverAt = (0, import_react5.useCallback)((x, y, liveRects) => {
+    const ids = sectionIdsRef.current;
+    const map = liveRects ?? readSectionRects(ids);
+    const next = hitTestSectionId(x, y, ids, map);
+    setHoveredId((prev) => prev === next ? prev : next);
+  }, []);
   (0, import_react5.useEffect)(() => {
     const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
       const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
@@ -5726,6 +5769,19 @@ function SectionPickerOverlay({
       if (e.data?.type !== "ow:parent-scroll") return;
       const { iframeOffsetTop, headerH, canvasH } = e.data;
       applyClip(iframeOffsetTop, headerH, canvasH);
+      iframeOffsetTopRef.current = iframeOffsetTop;
+      if (!pointerScreenRef.current && pointerRef.current) {
+        pointerScreenRef.current = {
+          x: pointerRef.current.x,
+          y: pointerRef.current.y + iframeOffsetTop
+        };
+      }
+      const screen = pointerScreenRef.current;
+      if (screen) {
+        const next = { x: screen.x, y: screen.y - iframeOffsetTop };
+        pointerRef.current = next;
+        applyHoverAt(next.x, next.y);
+      }
     };
     const onResize = () => {
       setChromeClip((prev) => {
@@ -5739,19 +5795,36 @@ function SectionPickerOverlay({
       window.removeEventListener("message", onParentScroll);
       window.removeEventListener("resize", onResize);
     };
-  }, []);
-  const liveSections = (0, import_react5.useMemo)(() => {
-    if (!isOnTargetPage) return sections;
-    const live = collectSectionsFromDom();
-    if (live.length === 0) return sections;
-    const labels = new Map(sections.map((s) => [s.id, s.label]));
-    return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
-  }, [isOnTargetPage, sections, pathname]);
-  const sectionIdsKey = (0, import_react5.useMemo)(
-    () => liveSections.map((s) => s.id).join("\0"),
-    [liveSections]
-  );
-  const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
+  }, [applyHoverAt]);
+  (0, import_react5.useEffect)(() => {
+    const ptr = pointerRef.current;
+    if (!ptr) return;
+    applyHoverAt(ptr.x, ptr.y, rects);
+  }, [rects, applyHoverAt]);
+  (0, import_react5.useEffect)(() => {
+    const rememberPointer = (clientX, clientY) => {
+      pointerRef.current = { x: clientX, y: clientY };
+      const top = iframeOffsetTopRef.current;
+      if (top != null) {
+        pointerScreenRef.current = { x: clientX, y: clientY + top };
+      }
+      applyHoverAt(clientX, clientY, rects);
+    };
+    const onPointerMove = (e) => {
+      rememberPointer(e.clientX, e.clientY);
+    };
+    const onPointerSync = (e) => {
+      if (e.data?.type !== "ow:pointer-sync") return;
+      const { clientX, clientY } = e.data;
+      rememberPointer(clientX, clientY);
+    };
+    window.addEventListener("pointermove", onPointerMove, { passive: true });
+    window.addEventListener("message", onPointerSync);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("message", onPointerSync);
+    };
+  }, [rects, applyHoverAt]);
   const handleSelect = (0, import_react5.useCallback)(
     (section) => {
       if (selectedId) return;
@@ -5845,8 +5918,6 @@ function SectionPickerOverlay({
                   backgroundColor: isLit ? "transparent" : DIM_OVERLAY
                 },
                 "aria-label": `Select section ${section.label}`,
-                onMouseEnter: () => setHoveredId(section.id),
-                onMouseLeave: () => setHoveredId((prev) => prev === section.id ? null : prev),
                 onClick: () => handleSelect(section),
                 children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "span",
@@ -6090,7 +6161,8 @@ function LinkPopover({
       if (overflowY !== "auto" && overflowY !== "scroll") return false;
       if (el.scrollHeight <= el.clientHeight + 1) return false;
       if (deltaY < 0) return el.scrollTop > 0;
-      if (deltaY > 0) return el.scrollTop + el.clientHeight < el.scrollHeight - 1;
+      if (deltaY > 0)
+        return el.scrollTop + el.clientHeight < el.scrollHeight - 1;
       return true;
     };
     const allowsInternalScroll = (e) => {
@@ -6116,8 +6188,16 @@ function LinkPopover({
       body.style.overflow = prevBodyOverflow;
       html.style.overscrollBehavior = prevHtmlOverscroll;
       body.style.overscrollBehavior = prevBodyOverscroll;
-      document.removeEventListener("wheel", preventBackgroundScroll, scrollOpts);
-      document.removeEventListener("touchmove", preventBackgroundScroll, scrollOpts);
+      document.removeEventListener(
+        "wheel",
+        preventBackgroundScroll,
+        scrollOpts
+      );
+      document.removeEventListener(
+        "touchmove",
+        preventBackgroundScroll,
+        scrollOpts
+      );
     };
   }, [open, sectionPickerActive]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
@@ -6137,7 +6217,7 @@ function LinkPopover({
             "data-ohw-link-modal-root": "",
             "data-ohw-bridge": "",
             showCloseButton: false,
-            className: "gap-0 p-0 w-full md:w-md pointer-events-auto z-[2147483646] overflow-visible",
+            className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LinkEditorPanel, { state, onClose })
           }
         )
@@ -9413,14 +9493,20 @@ function OhhwellsBridge() {
       const session = linkPopoverSessionRef.current;
       if (!session) return;
       if (session.intent === "add-nav") {
-        const { pageRoute, sectionId } = parseTarget(target);
-        const page = resolvePage(pageRoute, sitePages);
-        const pageSections = getSectionsForPath(sectionsByPath, pageRoute);
-        const section = sectionId ? pageSections.find((s) => s.id === sectionId) : void 0;
-        const label = section?.label ?? page.title;
+        const trimmed = target.trim();
+        let href = trimmed;
+        let label = "Untitled";
+        if (trimmed) {
+          const { pageRoute, sectionId } = parseTarget(trimmed);
+          const page = resolvePage(pageRoute, sitePages);
+          const pageSections = getSectionsForPath(sectionsByPath, pageRoute);
+          const section = sectionId ? pageSections.find((s) => s.id === sectionId) : void 0;
+          label = section?.label ?? page.title;
+          href = trimmed;
+        }
         const afterAnchor = addNavAfterAnchorRef.current;
-        const { anchor, hrefKey, labelKey, index, order } = insertNavbarItem(target, label, afterAnchor);
-        applyLinkByKey(hrefKey, target);
+        const { anchor, hrefKey, labelKey, index, order } = insertNavbarItem(href, label, afterAnchor);
+        applyLinkByKey(hrefKey, href);
         document.querySelectorAll(`[data-ohw-key="${labelKey}"]`).forEach((el) => {
           el.textContent = label;
         });
@@ -9428,7 +9514,7 @@ function OhhwellsBridge() {
         const orderJson = JSON.stringify(order);
         editContentRef.current = {
           ...editContentRef.current,
-          [hrefKey]: target,
+          [hrefKey]: href,
           [labelKey]: label,
           [NAV_COUNT_KEY]: navCount,
           [NAV_ORDER_KEY]: orderJson
@@ -9436,12 +9522,13 @@ function OhhwellsBridge() {
         postToParent2({
           type: "ow:change",
           nodes: [
-            { key: hrefKey, text: target },
+            { key: hrefKey, text: href },
             { key: labelKey, text: label },
             { key: NAV_COUNT_KEY, text: navCount },
             { key: NAV_ORDER_KEY, text: orderJson }
           ]
         });
+        postToParent2({ type: "ow:toast", title: "Link added", toastType: "success" });
         addNavAfterAnchorRef.current = null;
         setLinkPopover(null);
         enforceLinkHrefs();
@@ -9680,12 +9767,55 @@ function OhhwellsBridge() {
     bridgeRoot
   ) : null;
 }
+
+// src/ui/drop-indicator.tsx
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var dropIndicatorVariants = cva(
+  "ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
+  {
+    variants: {
+      direction: {
+        vertical: "h-6 w-[3px]",
+        horizontal: "h-[3px] w-[200px]"
+      },
+      state: {
+        default: "opacity-0",
+        hover: "opacity-100",
+        dragIdle: "opacity-40",
+        dragActive: "opacity-100"
+      }
+    },
+    defaultVariants: {
+      direction: "vertical",
+      state: "default"
+    }
+  }
+);
+var DropIndicator = React10.forwardRef(
+  ({ className, direction, state, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      {
+        ref,
+        "data-slot": "drop-indicator",
+        "data-direction": direction ?? "vertical",
+        "data-state": state ?? "default",
+        "aria-hidden": "true",
+        className: cn(dropIndicatorVariants({ direction, state }), className),
+        ...props
+      }
+    );
+  }
+);
+DropIndicator.displayName = "DropIndicator";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CustomToolbar,
   CustomToolbarButton,
   CustomToolbarDivider,
   DragHandle,
+  DropIndicator,
   ItemActionToolbar,
   ItemInteractionLayer,
   LinkEditorPanel,
@@ -9700,6 +9830,7 @@ function OhhwellsBridge() {
   TooltipProvider,
   TooltipTrigger,
   buildTarget,
+  dropIndicatorVariants,
   filterAvailablePages,
   getEditModeInitialState,
   isEditSessionActive,