@ohhwells/bridge 0.1.117-next.312 → 0.1.117-next.313

package/dist/index.cjs

@@ -11223,12 +11223,21 @@ var import_lucide_react14 = require("lucide-react");
 var import_navigation2 = require("next/navigation");
 
 // src/lib/parent-scroll.ts
+function visibleBand(parentScroll) {
+  const { iframeOffsetTop, headerH: visibleCanvasTop, canvasH } = parentScroll;
+  const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
+  const bottom = Math.min(window.innerHeight, visibleCanvasTop + canvasH - iframeOffsetTop);
+  return { top, bottom: Math.max(top, bottom) };
+}
 function getIframeVisibleClip(parentScroll) {
   if (!parentScroll) return null;
-  const { iframeOffsetTop, headerH: visibleCanvasTop, canvasH, promptBarH = 0 } = parentScroll;
-  const clipTop = Math.max(0, visibleCanvasTop - iframeOffsetTop);
-  const clipBottom = Math.min(window.innerHeight, visibleCanvasTop + canvasH - iframeOffsetTop) - promptBarH;
-  return { top: clipTop, bottom: Math.max(clipTop, clipBottom) };
+  return visibleBand(parentScroll);
+}
+function getIframeChromeClip(parentScroll) {
+  if (!parentScroll) return null;
+  const band = visibleBand(parentScroll);
+  const promptBarH = Math.max(0, parentScroll.promptBarH ?? 0);
+  return { top: band.top, bottom: Math.max(band.top, band.bottom - promptBarH) };
 }
 
 // src/ui/link-modal/SectionPickerOverlay.tsx
@@ -15049,34 +15058,38 @@ var import_lucide_react15 = require("lucide-react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var PANEL_WIDTH = 256;
 var EDGE_MARGIN = 16;
+var HEADER_MIN = 56;
 function getVisibleClip(parentScroll) {
   const left = 0;
   const right = window.innerWidth;
-  const band = getIframeVisibleClip(parentScroll);
+  const band = getIframeChromeClip(parentScroll);
   if (!band) {
     return { top: 0, bottom: window.innerHeight, left, right };
   }
   return { ...band, left, right };
 }
-function defaultFloatingPanelPosition(parentScroll, panelHeight = 280) {
+function defaultFloatingPanelPosition(parentScroll, _panelHeight = 280) {
   const clip = getVisibleClip(parentScroll);
   return {
     x: Math.max(EDGE_MARGIN, clip.right - PANEL_WIDTH - EDGE_MARGIN),
-    y: Math.min(
-      Math.max(clip.top + EDGE_MARGIN, EDGE_MARGIN),
-      Math.max(clip.top + EDGE_MARGIN, clip.bottom - panelHeight - EDGE_MARGIN)
-    )
+    y: clip.top + EDGE_MARGIN
   };
 }
-function clampPosition(pos, parentScroll, panelW, panelH) {
+function clampPosition(pos, parentScroll, panelW, _panelH = 280) {
   const clip = getVisibleClip(parentScroll);
   const maxX = Math.max(clip.left + EDGE_MARGIN, clip.right - panelW - EDGE_MARGIN);
-  const maxY = Math.max(clip.top + EDGE_MARGIN, clip.bottom - panelH - EDGE_MARGIN);
+  const minY = clip.top + EDGE_MARGIN;
+  const maxY = Math.max(minY, clip.bottom - EDGE_MARGIN - HEADER_MIN);
   return {
     x: Math.min(Math.max(pos.x, clip.left + EDGE_MARGIN), maxX),
-    y: Math.min(Math.max(pos.y, clip.top + EDGE_MARGIN), maxY)
+    y: Math.min(Math.max(pos.y, minY), maxY)
   };
 }
+function availablePanelHeight(parentScroll, top) {
+  const clip = getVisibleClip(parentScroll);
+  const available = Math.floor(clip.bottom - top - EDGE_MARGIN);
+  return available > HEADER_MIN ? available : void 0;
+}
 function FloatingPanel({
   open,
   title,
@@ -15093,8 +15106,9 @@ function FloatingPanel({
   const panelRef = (0, import_react14.useRef)(null);
   const [measured, setMeasured] = (0, import_react14.useState)({ w: PANEL_WIDTH, h: 280 });
   const dragRef = (0, import_react14.useRef)(null);
-  const resolved = position ?? defaultFloatingPanelPosition(parentScroll, measured.h);
-  const clamped = clampPosition(resolved, parentScroll, measured.w, measured.h);
+  const resolved = position ?? defaultFloatingPanelPosition(parentScroll);
+  const clamped = clampPosition(resolved, parentScroll, measured.w);
+  const maxHeight = availablePanelHeight(parentScroll, clamped.y);
   (0, import_react14.useLayoutEffect)(() => {
     if (!open || !panelRef.current) return;
     const el = panelRef.current;
@@ -15180,7 +15194,7 @@ function FloatingPanel({
         "fixed z-[2147483647] flex w-64 flex-col overflow-hidden rounded-xl border border-border bg-background font-sans shadow-lg outline-none",
         className
       ),
-      style: { left: clamped.x, top: clamped.y },
+      style: { left: clamped.x, top: clamped.y, maxHeight },
       onMouseDown: (e) => e.stopPropagation(),
       onPointerDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation(),
@@ -15189,7 +15203,7 @@ function FloatingPanel({
           "div",
           {
             "data-ohw-floating-panel-header": "",
-            className: "relative flex cursor-grab items-start gap-2 border-b border-border py-5 pl-5 pr-11 active:cursor-grabbing",
+            className: "relative flex shrink-0 cursor-grab items-start gap-2 border-b border-border py-5 pl-5 pr-11 active:cursor-grabbing",
             onPointerDown: onHeaderPointerDown,
             onPointerMove: onHeaderPointerMove,
             onPointerUp: endDrag,
@@ -15224,7 +15238,10 @@ function FloatingPanel({
           "div",
           {
             "data-ohw-floating-panel-body": "",
-            className: cn("flex w-full flex-col gap-4 p-5", bodyClassName),
+            className: cn(
+              "flex min-h-0 w-full flex-1 flex-col gap-4 overflow-y-auto overscroll-contain p-5",
+              bodyClassName
+            ),
             children
           }
         )
@@ -17345,7 +17362,7 @@ function useSectionDrag({
   }, [postToParentRef, stopAutoScroll]);
   const updateAutoScroll = (0, import_react16.useCallback)(
     (clientY) => {
-      const clip = getIframeVisibleClip(parentScrollRef.current);
+      const clip = getIframeChromeClip(parentScrollRef.current);
       let delta = 0;
       if (clip) {
         const distTop = clientY - clip.top;
@@ -19259,7 +19276,7 @@ function isRectOutsideClip(rect, clip) {
   return rect.bottom < clip.top || rect.top > clip.bottom;
 }
 function applyVisibleViewport(el, parentScroll) {
-  const clip = getIframeVisibleClip(parentScroll);
+  const clip = getIframeChromeClip(parentScroll);
   const top = clip?.top ?? 0;
   const height = clip ? clip.bottom - clip.top : window.innerHeight;
   el.style.top = `${top}px`;
@@ -19299,7 +19316,7 @@ function clampToolbarLeft(centerX, toolbarWidth) {
 function calcToolbarPos(rect, parentScroll, toolbarW = 306) {
   const GAP = TOOLBAR_OFFSET_FROM_ELEMENT;
   const APPROX_H = 32;
-  const clip = getIframeVisibleClip(parentScroll);
+  const clip = getIframeChromeClip(parentScroll);
   const clipTop = clip?.top ?? 0;
   const canvasTopInIframe = parentScroll != null ? parentScroll.headerH - parentScroll.iframeOffsetTop : 0;
   const visibleTop = rect.top - canvasTopInIframe;