@flamingo-stack/openframe-frontend-core 0.0.455 → 0.0.456

package/dist/{chunk-N4CHA7T7.js → chunk-UEKCD6WV.js}

@@ -29,9 +29,10 @@ import {
   useNotificationPermission,
   useOgPlaceholderUrl,
   useOnboardingState,
+  useResetOnPageHidden,
   useSuppressCloneFocus,
   useToast
-} from "./chunk-BD3JBEUC.js";
+} from "./chunk-MK2YWJAA.js";
 import {
   AlertCircleIcon,
   AnthropicLogoGreyIcon,
@@ -5995,6 +5996,8 @@ var ChatMessageList = forwardRef12(
     isLoading = false,
     isTyping = false,
     autoScroll = true,
+    overscrollContain = true,
+    pinBottom = false,
     showAvatars = true,
     fullWidth = false,
     contentClassName,
@@ -6065,6 +6068,18 @@ var ChatMessageList = forwardRef12(
         }
       }
     }, [autoScroll, messages, dialogId, scrollToBottom, contentRef]);
+    const pinPrevHeightRef = useRef7(0);
+    useLayoutEffect4(() => {
+      if (!pinBottom) {
+        pinPrevHeightRef.current = 0;
+        return;
+      }
+      const el = scrollRef.current;
+      if (!el) return;
+      if (el.scrollHeight === pinPrevHeightRef.current) return;
+      pinPrevHeightRef.current = el.scrollHeight;
+      el.scrollTop = el.scrollHeight;
+    }, [pinBottom, messages, isTyping, pendingApprovals, scrollRef]);
     useLayoutEffect4(() => {
       const el = scrollRef.current;
       const anchor = loadOlderAnchorRef.current;
@@ -6195,11 +6210,16 @@ var ChatMessageList = forwardRef12(
         {
           ref: setScrollRef,
           className: cn(
-            // `overscroll-contain`: reaching the top/bottom of the thread must
-            // NOT chain the wheel/touch scroll to the page behind the chat —
-            // e.g. the company-hub deck (native body scroll + sticky slide
-            // panels) would otherwise advance slides while you scroll the chat.
-            "flex h-full w-full flex-col overflow-y-auto overflow-x-hidden overscroll-contain flex-1",
+            "flex h-full w-full flex-col overflow-y-auto overflow-x-hidden flex-1",
+            // `overscroll-contain` (default ON, opt-out via `overscrollContain={false}`):
+            // reaching the top/bottom of the thread must NOT chain the wheel/
+            // touch scroll to the page behind the chat — e.g. the company-hub
+            // deck (native body scroll + sticky slide panels) would otherwise
+            // advance slides while you scroll the chat (fixed in #1501; kept as
+            // the prop default here). Passive in-page DEMO chats disable it so
+            // the surrounding page keeps scrolling normally when the pointer is
+            // over the (non-interactive) thread.
+            overscrollContain && "overscroll-contain",
             "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
             className
           ),
@@ -6672,6 +6692,7 @@ function MarqueeWall({
   speed = 40,
   animate = true,
   pauseOnHover = true,
+  dragScroll = false,
   fade,
   fadeColor = "var(--color-bg)",
   fadeSize,
@@ -6727,6 +6748,9 @@ function MarqueeWall({
     return () => io.disconnect();
   }, []);
   const pointerInsideRef = React11.useRef(false);
+  const clearPointerInside = React11.useCallback(() => {
+    pointerInsideRef.current = false;
+  }, []);
   const onPointerEnter = React11.useCallback((e) => {
     if (e.pointerType === "touch") return;
     pointerInsideRef.current = true;
@@ -6735,6 +6759,9 @@ function MarqueeWall({
     if (e.pointerType === "touch") return;
     pointerInsideRef.current = false;
   }, []);
+  useResetOnPageHidden(clearPointerInside);
+  const draggingRef = React11.useRef(false);
+  const dragSuppressUntilRef = React11.useRef(0);
   const applyTransform = React11.useCallback(
     (pos) => {
       const track = trackRef.current;
@@ -6751,6 +6778,17 @@ function MarqueeWall({
     },
     [axis, reverse, trackId]
   );
+  const applyPos = React11.useCallback(
+    (pos) => {
+      if (sync) {
+        sync.position = pos;
+        sync.members.forEach((m) => m.apply(pos));
+      } else {
+        applyTransform(pos);
+      }
+    },
+    [sync, applyTransform]
+  );
   React11.useEffect(() => {
     if (marqueeMounted) return;
     const track = trackRef.current;
@@ -6776,15 +6814,12 @@ function MarqueeWall({
       }
     };
   }, [sync, applyTransform]);
-  const { posRef } = useMarqueeEngine({
+  const { posRef, wrap } = useMarqueeEngine({
     active: marqueeActive && nearViewport && isDriver,
     speed,
-    isPaused: () => pauseOnHover && pointerInsideRef.current || document.visibilityState === "hidden",
+    isPaused: (now) => pauseOnHover && pointerInsideRef.current || draggingRef.current || now < dragSuppressUntilRef.current || document.visibilityState === "hidden",
     getWrapSize: () => wrapSizeRef.current,
-    apply: sync ? (pos) => {
-      sync.position = pos;
-      sync.members.forEach((m) => m.apply(pos));
-    } : applyTransform,
+    apply: applyPos,
     // Synced pairs: a re-elected driver resumes from the pair's live position
     // (engine seeds from readBack on activation) instead of restarting at 0.
     readBack: sync ? () => sync.position : void 0
@@ -6798,15 +6833,81 @@ function MarqueeWall({
       posRef.current = Math.max(0, wrapSizeRef.current - 0.01);
     }
   }, [marqueeMounted, reverse, posRef]);
+  const DRAG_RESUME_MS = 1200;
+  const dragStartRef = React11.useRef({ coord: 0, pos: 0 });
+  const dragMovedRef = React11.useRef(false);
+  const suppressClickRef = React11.useRef(false);
+  const onDragPointerDown = React11.useCallback((e) => {
+    if (!marqueeMounted) return;
+    draggingRef.current = true;
+    dragMovedRef.current = false;
+    suppressClickRef.current = false;
+    dragStartRef.current = { coord: axis === "y" ? e.clientY : e.clientX, pos: posRef.current };
+    try {
+      containerRef.current?.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  }, [marqueeMounted, axis, posRef]);
+  const onDragPointerMove = React11.useCallback((e) => {
+    if (!draggingRef.current) return;
+    const delta = (axis === "y" ? e.clientY : e.clientX) - dragStartRef.current.coord;
+    if (Math.abs(delta) > 3) dragMovedRef.current = true;
+    posRef.current = wrap(dragStartRef.current.pos + (reverse ? delta : -delta));
+    applyPos(posRef.current);
+    dragSuppressUntilRef.current = performance.now() + DRAG_RESUME_MS;
+  }, [axis, reverse, wrap, posRef, applyPos]);
+  const onDragPointerUp = React11.useCallback((e) => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    if (dragMovedRef.current) suppressClickRef.current = true;
+    dragSuppressUntilRef.current = performance.now() + DRAG_RESUME_MS;
+    try {
+      containerRef.current?.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  }, []);
+  const onDragClickCapture = React11.useCallback((e) => {
+    if (suppressClickRef.current) {
+      suppressClickRef.current = false;
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, []);
+  React11.useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !dragScroll || !marqueeMounted) return;
+    const onWheel = (e) => {
+      const primary = axis === "y" ? Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : 0 : Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : 0;
+      if (primary === 0) return;
+      e.preventDefault();
+      posRef.current = wrap(posRef.current + (reverse ? -primary : primary));
+      applyPos(posRef.current);
+      dragSuppressUntilRef.current = performance.now() + DRAG_RESUME_MS;
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [dragScroll, marqueeMounted, axis, reverse, wrap, posRef, applyPos]);
   const renderContent = (isClone) => typeof children === "function" ? children({ isClone }) : children;
+  const staticScrollable = dragScroll && overflows && !marqueeMounted;
   return /* @__PURE__ */ jsxs28(
     "div",
     {
       ref: containerRef,
-      className: cn("relative overflow-hidden", className),
+      className: cn(
+        "relative",
+        staticScrollable ? axis === "y" ? "overflow-y-auto" : "overflow-x-auto" : "overflow-hidden",
+        dragScroll && marqueeMounted && "cursor-grab active:cursor-grabbing select-none",
+        className
+      ),
+      style: dragScroll && marqueeMounted ? { touchAction: axis === "y" ? "pan-x" : "pan-y" } : void 0,
       "data-marquee-track": trackId,
       onPointerEnter,
       onPointerLeave,
+      onPointerDown: dragScroll ? onDragPointerDown : void 0,
+      onPointerMove: dragScroll ? onDragPointerMove : void 0,
+      onPointerUp: dragScroll ? onDragPointerUp : void 0,
+      onPointerCancel: dragScroll ? onDragPointerUp : void 0,
+      onClickCapture: dragScroll ? onDragClickCapture : void 0,
       children: [
         /* @__PURE__ */ jsxs28(
           "div",
@@ -6863,6 +6964,7 @@ function QuickActionWall({
   speed,
   animate = true,
   pauseOnHover,
+  dragScroll = false,
   fade,
   fadeColor,
   fadeSize,
@@ -6918,6 +7020,7 @@ function QuickActionWall({
           speed,
           animate: animate && !loading,
           pauseOnHover,
+          dragScroll,
           copyGap: gap,
           contentClassName: cn("flex items-center", contentClassName),
           contentStyle: { gap },
@@ -6937,6 +7040,7 @@ function QuickActionWall({
       speed,
       animate: animate && !loading,
       pauseOnHover,
+      dragScroll,
       fade,
       fadeColor,
       fadeSize,
@@ -7699,6 +7803,7 @@ function MingoWelcome({
                 })),
                 rows: 4,
                 pauseOnHover: true,
+                dragScroll: true,
                 fade: ["left", "right"],
                 fadeSize: { left: 32 },
                 fadeColor: "var(--color-bg)",
@@ -7800,6 +7905,7 @@ function GuideWelcome({
             chips: chipItems,
             rows: 4,
             pauseOnHover: true,
+            dragScroll: true,
             fade: ["left", "right"],
             fadeSize: { left: 32 },
             fadeColor: "var(--color-bg)",
@@ -11354,6 +11460,12 @@ function CardsStrip(props) {
     const current = activeKeyRef.current;
     if (current !== null) deactivate(current);
   }, [deactivate]);
+  const clearHover = useCallback14(() => {
+    hoverPointerRef.current.inside = false;
+    const current = activeKeyRef.current;
+    if (current !== null) deactivate(current);
+  }, [deactivate]);
+  useResetOnPageHidden(clearHover);
   const syncHoverIfScrolled = useCallback14(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
@@ -11514,6 +11626,7 @@ function CardsStrip(props) {
               onPointerEnter: onHoverPointerEnter,
               onPointerMove: onHoverPointerMove,
               onPointerLeave: onHoverPointerLeave,
+              onPointerCancel: clearHover,
               onScroll: onSeamWarp,
               children: /* @__PURE__ */ jsx78("div", { ref: trackRef, "data-copies": copies, className: "flex w-max items-stretch gap-4", children: Array.from(
                 { length: copies },
@@ -53655,7 +53768,9 @@ function EmbeddableChatInner({
                               {
                                 messages,
                                 isTyping: chatLoading,
-                                autoScroll: true,
+                                autoScroll: !previewMode,
+                                pinBottom: previewMode,
+                                overscrollContain: !previewMode,
                                 assistantType: "mingo",
                                 assistantIcon: mingoAssistantIcon,
                                 renderEntityCard,
@@ -53663,7 +53778,7 @@ function EmbeddableChatInner({
                                 renderContextItem,
                                 renderMention,
                                 NavLinkAnchor: NavLinkAnchorViaRuntime,
-                                className: "flex-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                                className: previewMode ? "flex-1 pointer-events-auto" : "flex-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
                                 contentClassName: "max-w-none pb-0",
                                 fullWidth: true,
                                 hasNextPage: hasMoreMessages,
@@ -54878,4 +54993,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-N4CHA7T7.js.map
+//# sourceMappingURL=chunk-UEKCD6WV.js.map