@ohhwells/bridge 0.1.114 → 0.1.115

package/dist/index.cjs

@@ -459,6 +459,20 @@ var BG_VALUES = {
   accent: "var(--ohw-brand-primary, var(--color-primary, #0078E5))",
   "accent-soft": "color-mix(in srgb, var(--ohw-brand-primary, var(--color-primary, #0078E5)) 12%, var(--ohw-brand-light, var(--color-light, #FFFFFF)))"
 };
+var NAVBAR_COLOR_TOKENS = ["dark", "primary", "accent", "light"];
+function navbarColorVar(token) {
+  const fallback = {
+    dark: "#0C0A09",
+    primary: "#0078E5",
+    accent: "#0078E5",
+    light: "#FFFFFF"
+  };
+  return `var(--ohw-brand-${token}, var(--color-${token}, ${fallback[token]}))`;
+}
+function resolveNavbarValue(value) {
+  if (value === void 0) return void 0;
+  return NAVBAR_COLOR_TOKENS.includes(value) ? navbarColorVar(value) : value;
+}
 var HEADLINE_SIZES = { md: 24, lg: 32, xl: 40, display: 56 };
 function styleSheetCss() {
   const rules = [];
@@ -628,8 +642,18 @@ function applyStylesToDom(store) {
   for (const [sectionId, override] of Object.entries(store.sections)) {
     const escaped = CSS.escape(sectionId);
     const byInstance = document.querySelectorAll(`[data-ohw-instance="${escaped}"]`);
-    const sections = byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`);
+    const sections = Array.from(
+      byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`)
+    );
+    const isNavbar = sectionId === "navbar";
+    if (isNavbar) {
+      const drawer = document.querySelector("[data-ohw-nav-drawer]");
+      if (drawer && !sections.includes(drawer)) sections.push(drawer);
+      const header = document.querySelector("[data-ohw-nav-root]");
+      if (header && !sections.includes(header)) sections.push(header);
+    }
     for (const marker of Array.from(sections)) {
+      const isDrawerMarker = isNavbar && marker.hasAttribute("data-ohw-nav-drawer");
       const section = marker.querySelector(":scope > [data-ai-section]") ?? marker;
       for (const [prop, attr] of Object.entries(SECTION_ATTRS)) {
         const value = override[prop];
@@ -637,19 +661,23 @@ function applyStylesToDom(store) {
         if (prop === "sectionBackground" && override.sectionBackgroundColor !== void 0) continue;
         section.setAttribute(attr, String(value).replace(":", "-"));
       }
-      if (override.sectionBackgroundColor !== void 0) {
+      const bgOverride = isDrawerMarker ? override.navbarMobileBackground : override.sectionBackgroundColor;
+      const textOverride = isDrawerMarker ? override.navbarMobileTextColor : override.textColor;
+      const bgValue = isNavbar ? resolveNavbarValue(bgOverride) : bgOverride;
+      const textValue = isNavbar ? resolveNavbarValue(textOverride) : textOverride;
+      if (bgValue !== void 0) {
         saveInline(section, "background");
-        section.style.setProperty("background", override.sectionBackgroundColor, "important");
+        section.style.setProperty("background", bgValue, "important");
         section.setAttribute("data-ohw-style-bgcolor", "");
       }
-      if (override.textColor !== void 0 || override.fontFamily !== void 0) {
+      if (textValue !== void 0 || override.fontFamily !== void 0) {
         const textEls = marker.querySelectorAll(
           '[data-ohw-editable="text"], [data-ohw-editable="plain"], [data-ohw-field-label]'
         );
         for (const el of Array.from(textEls)) {
-          if (override.textColor !== void 0) {
+          if (textValue !== void 0) {
             saveInline(el, "color");
-            el.style.setProperty("color", override.textColor, "important");
+            el.style.setProperty("color", textValue, "important");
             el.setAttribute(NODE_WROTE_ATTR, "");
           }
           if (override.fontFamily !== void 0) {
@@ -9101,6 +9129,57 @@ function useLiveSectionRect(sectionId) {
   }, [sectionId]);
   return rect;
 }
+var NAV_TOGGLE_LABEL_RE = /^(toggle menu|open menu|close menu)$/i;
+function readNavToggleRect() {
+  const el = Array.from(document.querySelectorAll("button[aria-label]")).find(
+    (e) => NAV_TOGGLE_LABEL_RE.test(e.getAttribute("aria-label") ?? "")
+  );
+  if (!el) return null;
+  const r2 = el.getBoundingClientRect();
+  if (r2.width <= 0 || r2.height <= 0) return null;
+  return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
+}
+function useLiveNavToggleHole(active) {
+  const [rect, setRect] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    if (!active) {
+      setRect(null);
+      return;
+    }
+    const update = () => {
+      const next = readNavToggleRect();
+      setRect(
+        (prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
+      );
+    };
+    update();
+    const opts = { capture: true, passive: true };
+    window.addEventListener("scroll", update, opts);
+    window.addEventListener("resize", update);
+    const interval = setInterval(update, 500);
+    return () => {
+      window.removeEventListener("scroll", update, opts);
+      window.removeEventListener("resize", update);
+      clearInterval(interval);
+    };
+  }, [active]);
+  return rect;
+}
+function subtractRect(outer, hole) {
+  if (!hole) return [outer];
+  const l = Math.max(outer.left, hole.left);
+  const t = Math.max(outer.top, hole.top);
+  const r2 = Math.min(outer.left + outer.width, hole.left + hole.width);
+  const b = Math.min(outer.top + outer.height, hole.top + hole.height);
+  if (l >= r2 || t >= b) return [outer];
+  const rects = [];
+  if (t > outer.top) rects.push({ left: outer.left, top: outer.top, width: outer.width, height: t - outer.top });
+  const midHeight = b - t;
+  if (l > outer.left) rects.push({ left: outer.left, top: t, width: l - outer.left, height: midHeight });
+  if (r2 < outer.left + outer.width) rects.push({ left: r2, top: t, width: outer.left + outer.width - r2, height: midHeight });
+  if (b < outer.top + outer.height) rects.push({ left: outer.left, top: b, width: outer.width, height: outer.top + outer.height - b });
+  return rects;
+}
 function computeSectionBoundaryFlags(instanceId) {
   const topLevel = topLevelSections();
   const index = topLevel.findIndex((el) => instanceIdOf(el) === instanceId);
@@ -9316,6 +9395,7 @@ function AiSectionOverlay({
   const activeSelectionId = reviewId ? null : selectedId;
   const selectionRect = useLiveSectionRect(activeSelectionId);
   const reviewRect = useLiveSectionRect(reviewId);
+  const navToggleHole = useLiveNavToggleHole(Boolean(reviewId));
   const hoverRect = useLiveSectionRect(reviewId || hoveredId === selectedId ? null : hoveredId);
   const showSelectionBorder = Boolean(selectionRect) && !navDropdownForceOpen;
   (0, import_react8.useEffect)(() => {
@@ -9375,48 +9455,65 @@ function AiSectionOverlay({
         }
       }
     ),
-    reviewRect && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "div",
-      {
-        "data-ohw-ai-review": "",
-        style: {
-          position: "fixed",
-          top: reviewRect.top,
-          left: reviewRect.left,
-          width: reviewRect.width,
-          height: reviewRect.height,
-          border: `2px solid ${PRIMARY2}`,
-          borderRadius: edgeAwareRadius(reviewRect),
-          zIndex: 2147483200,
-          // 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"
+    reviewRect && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      subtractRect(reviewRect, navToggleHole).map((r2, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          "data-ohw-ai-review": "",
+          "aria-hidden": true,
+          style: {
+            position: "fixed",
+            top: r2.top,
+            left: r2.left,
+            width: r2.width,
+            height: r2.height,
+            background: "rgba(8, 133, 254, 0.04)",
+            pointerEvents: "auto",
+            cursor: "default",
+            zIndex: 2147483200
+          },
+          onClick: (e) => e.stopPropagation()
         },
-        onClick: (e) => e.stopPropagation(),
-        children: !reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-          "div",
-          {
-            style: {
-              position: "sticky",
-              top: 12,
-              display: "flex",
-              gap: 8,
-              justifyContent: "flex-end",
-              paddingRight: 12,
-              paddingTop: 12
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
-            ]
+        i
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          "aria-hidden": true,
+          style: {
+            position: "fixed",
+            top: reviewRect.top,
+            left: reviewRect.left,
+            width: reviewRect.width,
+            height: reviewRect.height,
+            border: `2px solid ${PRIMARY2}`,
+            borderRadius: edgeAwareRadius(reviewRect),
+            pointerEvents: "none",
+            zIndex: 2147483200
           }
-        )
-      }
-    )
+        }
+      ),
+      !reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: reviewRect.top + 12,
+            left: reviewRect.left,
+            width: reviewRect.width,
+            display: "flex",
+            gap: 8,
+            justifyContent: "flex-end",
+            paddingRight: 12,
+            zIndex: 2147483201
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
+          ]
+        }
+      )
+    ] })
   ] });
 }
 
@@ -11079,6 +11176,15 @@ function getNavbarDesktopContainer() {
 function getNavbarDrawerContainer() {
   return document.querySelector("[data-ohw-nav-drawer]");
 }
+function isNavDrawerOpen() {
+  return document.querySelector('[data-ohw-nav-drawer][data-ohw-section="navbar"]') !== null;
+}
+function isPointOutsideOpenDrawer(clientX, clientY) {
+  const drawer = document.querySelector('[data-ohw-nav-drawer][data-ohw-section="navbar"]');
+  if (!drawer) return false;
+  const r2 = drawer.getBoundingClientRect();
+  return clientX < r2.left || clientX > r2.right || clientY < r2.top || clientY > r2.bottom;
+}
 function isNavbarListContainerVisible(el) {
   if (el.hasAttribute("hidden")) return false;
   if (el.closest("[hidden]")) return false;
@@ -17805,6 +17911,7 @@ function OhhwellsBridge() {
   const aiSectionsRef = (0, import_react17.useRef)("");
   const brandKitRef = (0, import_react17.useRef)("");
   const stylesRef = (0, import_react17.useRef)("");
+  const appliedDrawerRef = (0, import_react17.useRef)(null);
   const pendingDeleteUndoRef = (0, import_react17.useRef)(null);
   const [sitePages, setSitePages] = (0, import_react17.useState)([]);
   const [sectionsByPath, setSectionsByPath] = (0, import_react17.useState)({});
@@ -19470,6 +19577,17 @@ function OhhwellsBridge() {
     if (!isEditMode) return;
     initSectionInstancesFromContent(editContentRef.current, pathname);
   }, [pathname, isEditMode]);
+  (0, import_react17.useEffect)(() => {
+    if (!isEditMode) return;
+    const observer = new MutationObserver(() => {
+      const drawer = document.querySelector("[data-ohw-nav-drawer]");
+      if (!drawer || drawer === appliedDrawerRef.current) return;
+      appliedDrawerRef.current = drawer;
+      applyStylesToDom(parseStyleStore(stylesRef.current));
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [isEditMode, pathname]);
   (0, import_react17.useEffect)(() => {
     const contentForNav = () => {
       if (isEditMode) return editContentRef.current;
@@ -20231,6 +20349,19 @@ function OhhwellsBridge() {
     const handleMouseOver = (e) => {
       if (document.documentElement.hasAttribute("data-ohw-section-picking")) return;
       const target = e.target;
+      if (isNavDrawerOpen() && isPointOutsideOpenDrawer(e.clientX, e.clientY)) {
+        document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        formHoverElRef.current = null;
+        setFormHoverRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
+        return;
+      }
       if (linkPopoverOpenRef.current) {
         hoveredItemElRef.current = null;
         setHoveredItemRect(null);
@@ -21047,6 +21178,26 @@ function OhhwellsBridge() {
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
       if (pointOwnedByFloatingPanel(clientX, clientY)) return;
+      if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) {
+        document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        formHoverElRef.current = null;
+        setFormHoverRect(null);
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        dismissImageHover();
+        if (hoveredGapRef.current) {
+          hoveredGapRef.current = null;
+          setSectionGap(null);
+        }
+        if (activeStateElRef.current) {
+          activeStateElRef.current.removeAttribute("data-ohw-state-hovered");
+          activeStateElRef.current = null;
+          setToggleState(null);
+        }
+        return;
+      }
       if (isOverEditorChrome(clientX, clientY)) {
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         formHoverElRef.current = null;
@@ -21068,6 +21219,7 @@ function OhhwellsBridge() {
       const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
       if (pointOwnedByFloatingPanel(clientX, clientY)) return;
+      if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) return;
       if (probeSocialsRowAt(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
       probeImageAt(clientX, clientY);
@@ -22763,7 +22915,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.113",
+        bridgeVersion: "0.1.114",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections