@ohhwells/bridge 0.1.17 → 0.1.18

package/dist/index.cjs

@@ -3472,8 +3472,30 @@ function isEditSessionActive() {
   return new URLSearchParams(q).get("mode") === "edit";
 }
 
-// src/OhhwellsBridge.tsx
+// src/ui/badge.tsx
 var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/OhhwellsBridge.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var PRIMARY = "#0885FE";
 var IMAGE_FADE_MS = 300;
 function runOpacityFade(el, onDone) {
@@ -3681,7 +3703,7 @@ var TOOLBAR_GROUPS = [
 ];
 function GlowFrame({ rect, elRef }) {
   const GAP = 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       ref: elRef,
@@ -3732,7 +3754,7 @@ function FloatingToolbar({
   activeCommands
 }) {
   const { top, left, transform } = calcToolbarPos(rect, parentScroll);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       ref: elRef,
@@ -3755,11 +3777,11 @@ function FloatingToolbar({
         pointerEvents: "auto",
         whiteSpace: "nowrap"
       },
-      children: TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react.default.Fragment, { children: [
-        gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
+      children: TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react.default.Fragment, { children: [
+        gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
         btns.map((btn) => {
           const isActive = activeCommands.has(btn.cmd);
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "button",
             {
               title: btn.title,
@@ -3785,7 +3807,7 @@ function FloatingToolbar({
                 flexShrink: 0,
                 padding: 6
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "svg",
                 {
                   width: "16",
@@ -3818,7 +3840,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -3832,7 +3854,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -3886,6 +3908,7 @@ function OhhwellsBridge() {
   const glowElRef = (0, import_react.useRef)(null);
   const hoveredImageRef = (0, import_react.useRef)(null);
   const hoveredImageHasTextOverlapRef = (0, import_react.useRef)(false);
+  const hoveredGapRef = (0, import_react.useRef)(null);
   const imageUnhoverTimerRef = (0, import_react.useRef)(null);
   const imageShowTimerRef = (0, import_react.useRef)(null);
   const editStylesRef = (0, import_react.useRef)(null);
@@ -3901,6 +3924,7 @@ function OhhwellsBridge() {
   const [toggleState, setToggleState] = (0, import_react.useState)(null);
   const [maxBadge, setMaxBadge] = (0, import_react.useState)(null);
   const [activeCommands, setActiveCommands] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+  const [sectionGap, setSectionGap] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
     const update = () => {
       const el = activeElRef.current;
@@ -3909,6 +3933,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;
@@ -4413,10 +4443,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;
@@ -4424,6 +4476,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();
@@ -4829,12 +4882,12 @@ function OhhwellsBridge() {
     setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
   }, [deactivate]);
   return bridgeRoot ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      toolbarRect && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FloatingToolbar, { rect: toolbarRect, parentScroll: parentScrollRef.current, elRef: toolbarElRef, onCommand: handleCommand, activeCommands })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      toolbarRect && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloatingToolbar, { rect: toolbarRect, parentScroll: parentScrollRef.current, elRef: toolbarElRef, onCommand: handleCommand, activeCommands })
       ] }),
-      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "div",
         {
           "data-ohw-max-badge": "",
@@ -4860,7 +4913,7 @@ function OhhwellsBridge() {
           ]
         }
       ),
-      toggleState && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      toggleState && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         StateToggle,
         {
           rect: toggleState.rect,
@@ -4868,6 +4921,31 @@ function OhhwellsBridge() {
           states: toggleState.states,
           onStateChange: handleStateChange
         }
+      ),
+      sectionGap && /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+          ]
+        }
       )
     ] }),
     bridgeRoot