@ohhwells/bridge 0.1.15 → 0.1.16-next.8

package/dist/index.js

@@ -3433,8 +3433,30 @@ function isEditSessionActive() {
   return new URLSearchParams(q).get("mode") === "edit";
 }
 
+// src/ui/badge.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx3("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
 // src/OhhwellsBridge.tsx
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
 var PRIMARY = "#0885FE";
 var IMAGE_FADE_MS = 300;
 function runOpacityFade(el, onDone) {
@@ -3642,7 +3664,7 @@ var TOOLBAR_GROUPS = [
 ];
 function GlowFrame({ rect, elRef }) {
   const GAP = 6;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       ref: elRef,
@@ -3693,7 +3715,7 @@ function FloatingToolbar({
   activeCommands
 }) {
   const { top, left, transform } = calcToolbarPos(rect, parentScroll);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       ref: elRef,
@@ -3717,10 +3739,10 @@ function FloatingToolbar({
         whiteSpace: "nowrap"
       },
       children: TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
-        gi > 0 && /* @__PURE__ */ jsx3("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
+        gi > 0 && /* @__PURE__ */ jsx4("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
         btns.map((btn) => {
           const isActive = activeCommands.has(btn.cmd);
-          return /* @__PURE__ */ jsx3(
+          return /* @__PURE__ */ jsx4(
             "button",
             {
               title: btn.title,
@@ -3746,7 +3768,7 @@ function FloatingToolbar({
                 flexShrink: 0,
                 padding: 6
               },
-              children: /* @__PURE__ */ jsx3(
+              children: /* @__PURE__ */ jsx4(
                 "svg",
                 {
                   width: "16",
@@ -3779,7 +3801,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -3793,7 +3815,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ jsx3(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ jsx4(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -3847,6 +3869,7 @@ function OhhwellsBridge() {
   const glowElRef = useRef(null);
   const hoveredImageRef = useRef(null);
   const hoveredImageHasTextOverlapRef = useRef(false);
+  const hoveredGapRef = useRef(null);
   const imageUnhoverTimerRef = useRef(null);
   const imageShowTimerRef = useRef(null);
   const editStylesRef = useRef(null);
@@ -3862,6 +3885,7 @@ function OhhwellsBridge() {
   const [toggleState, setToggleState] = useState(null);
   const [maxBadge, setMaxBadge] = useState(null);
   const [activeCommands, setActiveCommands] = useState(/* @__PURE__ */ new Set());
+  const [sectionGap, setSectionGap] = useState(null);
   useEffect(() => {
     const update = () => {
       const el = activeElRef.current;
@@ -3870,6 +3894,12 @@ function OhhwellsBridge() {
         if (!prev || !activeStateElRef.current) return prev;
         return { ...prev, rect: activeStateElRef.current.getBoundingClientRect() };
       });
+      setSectionGap((prev) => {
+        if (!prev) return prev;
+        const anchor = document.querySelector(`[data-ohw-section="${prev.insertAfter}"]`);
+        if (!anchor) return prev;
+        return { ...prev, y: anchor.getBoundingClientRect().bottom };
+      });
     };
     const vvp = window.visualViewport;
     if (!vvp) return;
@@ -3962,7 +3992,7 @@ function OhhwellsBridge() {
     }
     let cancelled = false;
     setFetchState("loading");
-    const apiUrl = globalThis.process?.env?.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+    const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
     fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
       if (cancelled) return;
       const content = data?.content ?? {};
@@ -4374,10 +4404,32 @@ function OhhwellsBridge() {
         }
       }
     };
+    const probeSectionGapAt = (clientX, clientY, fromParentViewport = false) => {
+      const { y } = toProbeCoords(clientX, clientY, fromParentViewport);
+      const sections = Array.from(document.querySelectorAll("[data-ohw-section]")).sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
+      const ZONE = 20;
+      for (let i = 0; i < sections.length; i++) {
+        const a = sections[i];
+        const b = sections[i + 1] ?? null;
+        const boundaryY = a.getBoundingClientRect().bottom;
+        if (Math.abs(y - boundaryY) <= ZONE) {
+          const insertAfter = a.dataset.ohwSection ?? "";
+          const insertBefore = b?.dataset.ohwSection ?? null;
+          hoveredGapRef.current = { insertAfter, insertBefore };
+          setSectionGap({ insertAfter, insertBefore, y: boundaryY });
+          return;
+        }
+      }
+      if (hoveredGapRef.current) {
+        hoveredGapRef.current = null;
+        setSectionGap(null);
+      }
+    };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
       probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
+      probeSectionGapAt(clientX, clientY);
     };
     const handlePointerSync = (e) => {
       if (e.data?.type !== "ow:pointer-sync") return;
@@ -4385,6 +4437,7 @@ function OhhwellsBridge() {
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
       probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
+      probeSectionGapAt(clientX, clientY);
     };
     const handleDragOver = (e) => {
       e.preventDefault();
@@ -4792,8 +4845,8 @@ function OhhwellsBridge() {
   return bridgeRoot ? createPortal(
     /* @__PURE__ */ jsxs(Fragment, { children: [
       toolbarRect && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx3(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
-        /* @__PURE__ */ jsx3(FloatingToolbar, { rect: toolbarRect, parentScroll: parentScrollRef.current, elRef: toolbarElRef, onCommand: handleCommand, activeCommands })
+        /* @__PURE__ */ jsx4(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
+        /* @__PURE__ */ jsx4(FloatingToolbar, { rect: toolbarRect, parentScroll: parentScrollRef.current, elRef: toolbarElRef, onCommand: handleCommand, activeCommands })
       ] }),
       maxBadge && /* @__PURE__ */ jsxs(
         "div",
@@ -4821,7 +4874,7 @@ function OhhwellsBridge() {
           ]
         }
       ),
-      toggleState && /* @__PURE__ */ jsx3(
+      toggleState && /* @__PURE__ */ jsx4(
         StateToggle,
         {
           rect: toggleState.rect,
@@ -4829,6 +4882,31 @@ function OhhwellsBridge() {
           states: toggleState.states,
           onStateChange: handleStateChange
         }
+      ),
+      sectionGap && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-ohw-section-insert-line": "",
+          className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
+          style: { top: sectionGap.y, transform: "translateY(-50%)" },
+          children: [
+            /* @__PURE__ */ jsx4("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ jsx4(
+              Badge,
+              {
+                className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
+                onClick: () => {
+                  window.parent.postMessage(
+                    { type: "ow:add-section", insertAfter: sectionGap.insertAfter, insertBefore: sectionGap.insertBefore },
+                    "*"
+                  );
+                },
+                children: "Add Section"
+              }
+            ),
+            /* @__PURE__ */ jsx4("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+          ]
+        }
       )
     ] }),
     bridgeRoot