@flamingo-stack/openframe-frontend-core 0.0.175 → 0.0.176-snapshot.20260514140351

package/dist/{chunk-KCKMK4UF.js → chunk-6LDN3CIY.js}

@@ -5315,7 +5315,7 @@ MemoizedChatMessageEnhanced.displayName = "MemoizedChatMessageEnhanced";
 
 // src/components/chat/chat-message-list.tsx
 init_cn();
-import { useRef as useRef6, useState as useState14, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useImperativeHandle as useImperativeHandle3, forwardRef as forwardRef22 } from "react";
+import { useRef as useRef6, useState as useState14, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useCallback as useCallback3, useImperativeHandle as useImperativeHandle3, forwardRef as forwardRef22 } from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
 
 // src/components/chat/chat-message-loader.tsx
@@ -5432,10 +5432,13 @@ var ChatMessageList = forwardRef22(
         return;
       }
       if (newCount > prevCount) {
-        const newSlice = messages.slice(prevCount);
-        const hasNewUser = newSlice.some((m) => m.role === "user");
-        if (hasNewUser) {
-          void scrollToBottom({ animation: "instant", ignoreEscapes: true });
+        const isPrepend = prependRef.current.firstMessageId !== void 0 && messages[0]?.id !== prependRef.current.firstMessageId;
+        if (!isPrepend) {
+          const newSlice = messages.slice(prevCount);
+          const hasNewUser = newSlice.some((m) => m.role === "user");
+          if (hasNewUser) {
+            void scrollToBottom({ animation: "instant", ignoreEscapes: true });
+          }
         }
       }
     }, [autoScroll, messages, dialogId, scrollToBottom, scrollEl]);
@@ -5499,6 +5502,13 @@ var ChatMessageList = forwardRef22(
     }, [hasNextPage, scrollEl, sentinelEl, messages.length]);
     useImperativeHandle3(ref, () => scrollRef.current, [scrollRef]);
     const showLoader = useDelayedFlag(isLoading, { delay: 200, minDuration: 400 });
+    const setScrollRef = useCallback3((el) => {
+      scrollRef(el);
+      setScrollEl(el);
+    }, [scrollRef]);
+    const setContentRef = useCallback3((el) => {
+      contentRef(el);
+    }, [contentRef]);
     if (showLoader) {
       return /* @__PURE__ */ jsx33(
         ChatMessageListLoader,
@@ -5509,13 +5519,6 @@ var ChatMessageList = forwardRef22(
         }
       );
     }
-    const setScrollRef = (el) => {
-      scrollRef(el);
-      setScrollEl(el);
-    };
-    const setContentRef = (el) => {
-      contentRef(el);
-    };
     return /* @__PURE__ */ jsxs28("div", { className: "relative flex-1 min-h-0 flex flex-col", children: [
       /* @__PURE__ */ jsx33(
         "div",
@@ -6220,7 +6223,7 @@ var NETWORK_CONFIG = {
 };
 
 // src/components/chat/hooks/use-chunk-catchup.ts
-import { useCallback as useCallback5, useRef as useRef9 } from "react";
+import { useCallback as useCallback6, useRef as useRef9 } from "react";
 function makeSeqKey(messageType, chunkType, sequenceId) {
   return `${messageType}:${chunkType}:${sequenceId}`;
 }
@@ -6257,7 +6260,7 @@ function useChunkCatchup({
   fetchChunksRef.current = fetchChunks;
   const onChunkReceivedRef = useRef9(onChunkReceived);
   onChunkReceivedRef.current = onChunkReceived;
-  const processChunk = useCallback5((chunk, messageType, forceProcess = false) => {
+  const processChunk = useCallback6((chunk, messageType, forceProcess = false) => {
     if (bufferUntilInitialCatchupComplete.current && !forceProcess) {
       chunkBuffer.current.push({ chunk, messageType });
       return true;
@@ -6270,7 +6273,7 @@ function useChunkCatchup({
     onChunkReceivedRef.current(chunk, messageType);
     return true;
   }, []);
-  const flushBufferedRealtimeChunks = useCallback5(() => {
+  const flushBufferedRealtimeChunks = useCallback6(() => {
     if (chunkBuffer.current.length === 0) return;
     const buffered = [...chunkBuffer.current];
     chunkBuffer.current = [];
@@ -6283,7 +6286,7 @@ function useChunkCatchup({
       processChunk(chunk, messageType, true);
     });
   }, [processChunk]);
-  const catchUpChunks = useCallback5(async (fromSequenceId) => {
+  const catchUpChunks = useCallback6(async (fromSequenceId) => {
     const dialogId2 = dialogIdRef.current;
     const chatTypes2 = chatTypesRef.current;
     const fetchChunks2 = fetchChunksRef.current;
@@ -6396,7 +6399,7 @@ function useChunkCatchup({
       }
     }
   }, [flushBufferedRealtimeChunks]);
-  const resetChunkTracking = useCallback5(() => {
+  const resetChunkTracking = useCallback6(() => {
     processedSequenceKeys.current.clear();
     lastSequenceId.current = null;
     fetchingInProgress.current = false;
@@ -6405,13 +6408,13 @@ function useChunkCatchup({
     bufferUntilInitialCatchupComplete.current = false;
     hasCompletedInitialCatchup.current = false;
   }, []);
-  const startInitialBuffering = useCallback5(() => {
+  const startInitialBuffering = useCallback6(() => {
     chunkBuffer.current = [];
     bufferUntilInitialCatchupComplete.current = true;
     hasCompletedInitialCatchup.current = false;
   }, []);
-  const isBufferingActive = useCallback5(() => bufferUntilInitialCatchupComplete.current, []);
-  const resetAndCatchUp = useCallback5(async () => {
+  const isBufferingActive = useCallback6(() => bufferUntilInitialCatchupComplete.current, []);
+  const resetAndCatchUp = useCallback6(async () => {
     if (!dialogIdRef.current) return;
     const fromSeq = lastSequenceId.current;
     hasCompletedInitialCatchup.current = false;
@@ -6432,7 +6435,7 @@ function useChunkCatchup({
 }
 
 // src/components/chat/hooks/use-nats-dialog-subscription.ts
-import { useCallback as useCallback6, useEffect as useEffect8, useRef as useRef10, useState as useState16 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef10, useState as useState16 } from "react";
 var shared = null;
 function useNatsDialogSubscription({
   enabled,
@@ -6481,7 +6484,7 @@ function useNatsDialogSubscription({
   useEffect8(() => {
     reconnectionBackoffRef.current = reconnectionBackoff;
   }, [reconnectionBackoff]);
-  const acquireClient = useCallback6((url) => {
+  const acquireClient = useCallback7((url) => {
     if (shared?.wsUrl !== url) {
       if (shared) {
         shared.closeTimer && clearTimeout(shared.closeTimer);
@@ -6508,7 +6511,7 @@ function useNatsDialogSubscription({
     shared.closeTimer = null;
     return shared;
   }, [clientConfig]);
-  const releaseClient = useCallback6((url) => {
+  const releaseClient = useCallback7((url) => {
     if (!shared || shared.wsUrl !== url) return;
     shared.refCount = Math.max(0, shared.refCount - 1);
     if (shared.refCount > 0) return;
@@ -6805,7 +6808,7 @@ function buildNatsWsUrl(apiBaseUrl, options) {
 }
 
 // src/components/chat/hooks/use-realtime-chunk-processor.ts
-import { useCallback as useCallback7, useRef as useRef11, useEffect as useEffect9 } from "react";
+import { useCallback as useCallback8, useRef as useRef11, useEffect as useEffect9 } from "react";
 
 // src/components/chat/utils/chunk-parser.ts
 function normalizeToolCalls(raw) {
@@ -7429,7 +7432,7 @@ function useRealtimeChunkProcessor(options) {
   }, [initialState, callbacks]);
   const isInStreamRef = useRef11(false);
   const pendingEscalatedRef = useRef11(/* @__PURE__ */ new Map());
-  const processChunk = useCallback7(
+  const processChunk = useCallback8(
     (chunk) => {
       if (!enableThinking && chunk && typeof chunk === "object" && chunk.type === MESSAGE_TYPE.THINKING) {
         return;
@@ -7628,21 +7631,21 @@ function useRealtimeChunkProcessor(options) {
     },
     [callbacks, displayApprovalTypes, approvalStatuses, initialState, enableThinking]
   );
-  const getSegments = useCallback7(() => {
+  const getSegments = useCallback8(() => {
     return accumulatorRef.current.getSegments();
   }, []);
-  const reset = useCallback7(() => {
+  const reset = useCallback8(() => {
     accumulatorRef.current.reset();
     pendingEscalatedRef.current.clear();
     hasInitializedWithData.current = false;
   }, []);
-  const updateApprovalStatus = useCallback7(
+  const updateApprovalStatus = useCallback8(
     (requestId, status) => {
       return accumulatorRef.current.updateApprovalStatus(requestId, status);
     },
     []
   );
-  const getPendingApprovals = useCallback7(() => {
+  const getPendingApprovals = useCallback8(() => {
     return new Map(pendingEscalatedRef.current);
   }, []);
   return {
@@ -8774,7 +8777,7 @@ function SlidingSidebar({ config }) {
 }
 
 // src/components/navigation/sticky-section-nav.tsx
-import { useEffect as useEffect14, useState as useState20, useCallback as useCallback8, useRef as useRef14 } from "react";
+import { useEffect as useEffect14, useState as useState20, useCallback as useCallback9, useRef as useRef14 } from "react";
 import { jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
 function StickySectionNav({
   sections,
@@ -8838,7 +8841,7 @@ function useSectionNavigation(sections, options) {
   const [activeSection, setActiveSection] = useState20(sections[0]?.id || "");
   const isScrollingFromClick = useRef14(false);
   const { offset: offset2 = 100 } = options || {};
-  const handleSectionClick = useCallback8((sectionId) => {
+  const handleSectionClick = useCallback9((sectionId) => {
     const targetElement = document.getElementById(sectionId);
     if (!targetElement) return;
     isScrollingFromClick.current = true;
@@ -8889,7 +8892,7 @@ function useSectionNavigation(sections, options) {
 }
 
 // src/components/navigation/navigation-sidebar.tsx
-import { useCallback as useCallback9, useLayoutEffect as useLayoutEffect4, useMemo as useMemo7, useState as useState21 } from "react";
+import { useCallback as useCallback10, useLayoutEffect as useLayoutEffect4, useMemo as useMemo7, useState as useState21 } from "react";
 
 // src/components/navigation/navigation-sidebar-header.tsx
 import { jsx as jsx47, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -9042,11 +9045,11 @@ function NavigationSidebar({ config, disabled = false }) {
   const [transitionsEnabled, setTransitionsEnabled] = useState21(false);
   const isMinimized = !isLgUp || minimized;
   const showLabel = isLgUp && !minimized;
-  const handleToggle = useCallback9(() => {
+  const handleToggle = useCallback10(() => {
     setMinimized((prev) => !prev);
     config.onToggleMinimized?.();
   }, [setMinimized, config]);
-  const handleItemClick = useCallback9((item, event) => {
+  const handleItemClick = useCallback10((item, event) => {
     event?.stopPropagation();
     if (item.onClick) {
       item.onClick();
@@ -9569,7 +9572,7 @@ function NotificationsHeaderButton({
 }
 
 // src/components/navigation/app-layout.tsx
-import { Suspense, useCallback as useCallback12, useState as useState24 } from "react";
+import { Suspense, useCallback as useCallback13, useState as useState24 } from "react";
 
 // src/components/features/notifications/notification-drawer.tsx
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
@@ -9949,7 +9952,7 @@ function NotificationsHistoryButton({ onClick }) {
 }
 
 // src/components/navigation/mobile-burger-menu.tsx
-import React29, { useCallback as useCallback11, useEffect as useEffect17 } from "react";
+import React29, { useCallback as useCallback12, useEffect as useEffect17 } from "react";
 import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs50 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 48;
 var MobileBurgerMenu = React29.memo(function MobileBurgerMenu2({
@@ -9983,7 +9986,7 @@ var MobileBurgerMenu = React29.memo(function MobileBurgerMenu2({
       return () => document.removeEventListener("keydown", handleKeyDown);
     }
   }, [isOpen, onClose]);
-  const handleItemClick = useCallback11((item) => {
+  const handleItemClick = useCallback12((item) => {
     if (item.onClick) {
       item.onClick();
     } else if (item.path) {
@@ -10159,10 +10162,10 @@ function AppLayout({
   disabled = false
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState24(false);
-  const handleToggleMobileMenu = useCallback12(() => {
+  const handleToggleMobileMenu = useCallback13(() => {
     setMobileMenuOpen((prev) => !prev);
   }, []);
-  const handleCloseMobileMenu = useCallback12(() => {
+  const handleCloseMobileMenu = useCallback13(() => {
     setMobileMenuOpen(false);
   }, []);
   return /* @__PURE__ */ jsxs51("div", { className: cn("flex h-screen bg-ods-bg", className), children: [
@@ -11878,7 +11881,7 @@ function EmptyState2({
 }
 
 // src/components/faq-accordion.tsx
-import { useRef as useRef15, useState as useState26, useEffect as useEffect19, useCallback as useCallback13 } from "react";
+import { useRef as useRef15, useState as useState26, useEffect as useEffect19, useCallback as useCallback14 } from "react";
 
 // src/components/ui/chevron-button.tsx
 init_cn();
@@ -11920,7 +11923,7 @@ import { jsx as jsx85, jsxs as jsxs70 } from "react/jsx-runtime";
 var useMeasuredHeight = (isOpen) => {
   const ref = useRef15(null);
   const [maxHeight, setMaxHeight] = useState26("0px");
-  const measure = useCallback13(() => {
+  const measure = useCallback14(() => {
     if (ref.current) {
       const height = ref.current.scrollHeight;
       setMaxHeight(`${height}px`);
@@ -12506,13 +12509,13 @@ init_unified_pagination();
 
 // src/components/footer-waitlist-button.tsx
 import { usePathname as usePathname2, useRouter as useRouter4 } from "next/navigation";
-import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback15 } from "react";
 init_button2();
 import { jsx as jsx91 } from "react/jsx-runtime";
 function FooterWaitlistButton({ className }) {
   const router = useRouter4();
   const pathname = usePathname2();
-  const handleClick = useCallback14(() => {
+  const handleClick = useCallback15(() => {
     if (pathname?.startsWith("/waitlist")) {
       const anchor = document.getElementById("waitlist-form");
       if (anchor) {
@@ -12816,7 +12819,7 @@ function ResponsiveIconsBlock({ loading = false }) {
 
 // src/components/image-cropper.tsx
 init_button2();
-import { useCallback as useCallback15, useState as useState29 } from "react";
+import { useCallback as useCallback16, useState as useState29 } from "react";
 import Cropper from "react-easy-crop";
 
 // src/components/ui/slider.tsx
@@ -12878,11 +12881,11 @@ var ImageCropper = ({
   const [zoom, setZoom] = useState29(1);
   const [rotation, setRotation] = useState29(0);
   const [croppedAreaPixels, setCroppedAreaPixels] = useState29(null);
-  const onCropComplete = useCallback15((_, area) => {
+  const onCropComplete = useCallback16((_, area) => {
     setCroppedAreaPixels(area);
   }, []);
   const checkerBg = "bg-[length:16px_16px] bg-[linear-gradient(45deg,transparent_25%,#2a2a2a_25%,#2a2a2a_75%,transparent_75%,transparent),linear-gradient(45deg,#2a2a2a_25%,transparent_25%,transparent_75%,#2a2a2a_75%,#2a2a2a)]";
-  const exportCrop = useCallback15(async () => {
+  const exportCrop = useCallback16(async () => {
     if (!croppedAreaPixels) return void 0;
     const img = await loadImage(src);
     const canvas = document.createElement("canvas");
@@ -13045,7 +13048,7 @@ var ImageCropper = ({
 
 // src/components/media-carousel.tsx
 init_cn();
-import { useState as useState30, useRef as useRef19, useEffect as useEffect22, memo as memo3, useCallback as useCallback16 } from "react";
+import { useState as useState30, useRef as useRef19, useEffect as useEffect22, memo as memo3, useCallback as useCallback17 } from "react";
 import { Fragment as Fragment13, jsx as jsx96, jsxs as jsxs77 } from "react/jsx-runtime";
 var ChevronLeftIcon = () => /* @__PURE__ */ jsx96("svg", { width: "24", height: "24", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx96("polyline", { points: "15,18 9,12 15,6" }) });
 var ChevronRightIcon = () => /* @__PURE__ */ jsx96("svg", { width: "24", height: "24", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx96("polyline", { points: "9,18 15,12 9,6" }) });
@@ -13121,7 +13124,7 @@ var MediaCarousel = memo3(function MediaCarousel2({
   if (!currentItem) {
     return null;
   }
-  const handleVideoClick = useCallback16((index) => {
+  const handleVideoClick = useCallback17((index) => {
     const item = media[index];
     if (item.type !== "video") return;
     const videoElements = document.querySelectorAll(`video[data-video-index="${index}"]`);
@@ -13163,7 +13166,7 @@ var MediaCarousel = memo3(function MediaCarousel2({
       }
     }
   }, [media]);
-  const nextSlide = useCallback16(() => {
+  const nextSlide = useCallback17(() => {
     const currentVideo = document.querySelector(`[data-video-index="${currentIndex}"]`);
     if (currentVideo && !currentVideo.paused) {
       currentVideo.pause();
@@ -13171,7 +13174,7 @@ var MediaCarousel = memo3(function MediaCarousel2({
     setPlayingVideos(/* @__PURE__ */ new Set());
     setCurrentIndex((prev) => (prev + 1) % media.length);
   }, [currentIndex, media.length]);
-  const prevSlide = useCallback16(() => {
+  const prevSlide = useCallback17(() => {
     const currentVideo = document.querySelector(`[data-video-index="${currentIndex}"]`);
     if (currentVideo && !currentVideo.paused) {
       currentVideo.pause();
@@ -13179,7 +13182,7 @@ var MediaCarousel = memo3(function MediaCarousel2({
     setPlayingVideos(/* @__PURE__ */ new Set());
     setCurrentIndex((prev) => (prev - 1 + media.length) % media.length);
   }, [currentIndex, media.length]);
-  const selectSlide = useCallback16((index) => {
+  const selectSlide = useCallback17((index) => {
     if (index === currentIndex) return;
     const currentVideo = document.querySelector(`[data-video-index="${currentIndex}"]`);
     if (currentVideo && !currentVideo.paused) {
@@ -13188,7 +13191,7 @@ var MediaCarousel = memo3(function MediaCarousel2({
     setPlayingVideos(/* @__PURE__ */ new Set());
     setCurrentIndex(index);
   }, [currentIndex]);
-  const handleKeyDown = useCallback16((e) => {
+  const handleKeyDown = useCallback17((e) => {
     if (media.length <= 1) return;
     if (e.key === "ArrowLeft") {
       e.preventDefault();
@@ -15860,7 +15863,7 @@ function DateTimePicker({
 
 // src/components/shared/onboarding/onboarding-walkthrough.tsx
 init_button2();
-import React41, { useRef as useRef20, useCallback as useCallback17 } from "react";
+import React41, { useRef as useRef20, useCallback as useCallback18 } from "react";
 
 // src/components/shared/onboarding/onboarding-step-card.tsx
 import React40 from "react";
@@ -16155,7 +16158,7 @@ function OnboardingWalkthrough({
       lastCompletionStatusRef.current = statusKey;
     }
   }, [completionStatus, isLoadingCompletion, state.completedSteps, markMultipleComplete]);
-  const handleStepAction = useCallback17(async (step) => {
+  const handleStepAction = useCallback18(async (step) => {
     if (actionInProgressRef.current.has(step.id)) {
       console.log(`\u23F3 Action already in progress for "${step.id}", skipping`);
       return;
@@ -16803,7 +16806,7 @@ var YouTubeLinkParser = ({ href, children }) => {
 };
 
 // src/components/features/video-player.tsx
-import { useState as useState35, useEffect as useEffect26, useRef as useRef21, useMemo as useMemo11, useCallback as useCallback18 } from "react";
+import { useState as useState35, useEffect as useEffect26, useRef as useRef21, useMemo as useMemo11, useCallback as useCallback19 } from "react";
 import ReactPlayer2 from "react-player";
 init_button2();
 import { jsx as jsx139, jsxs as jsxs112 } from "react/jsx-runtime";
@@ -16918,7 +16921,7 @@ function parseSrtTimestamp(ts) {
 function useSubtitleOverlay(srtContent) {
   const cues = useMemo11(() => srtContent ? parseSrt(srtContent) : [], [srtContent]);
   const [activeText, setActiveText] = useState35(null);
-  const updateTime = useCallback18((playedSeconds) => {
+  const updateTime = useCallback19((playedSeconds) => {
     const timeMs = playedSeconds * 1e3;
     const active = cues.find((c) => timeMs >= c.from && timeMs <= c.to);
     setActiveText(active?.text ?? null);
@@ -16983,14 +16986,14 @@ var VideoPlayer = ({
       document.removeEventListener("webkitfullscreenchange", onChange);
     };
   }, []);
-  const activateCaptionTracks = useCallback18((video) => {
+  const activateCaptionTracks = useCallback19((video) => {
     for (let i = 0; i < video.textTracks.length; i++) {
       if (video.textTracks[i].kind === "captions" || video.textTracks[i].kind === "subtitles") {
         video.textTracks[i].mode = "showing";
       }
     }
   }, []);
-  const enterNativeVideoFullscreen = useCallback18(() => {
+  const enterNativeVideoFullscreen = useCallback19(() => {
     const video = playerRef.current?.getInternalPlayer();
     if (!video || !video.webkitEnterFullscreen) return;
     ensureWebkitCaptionCSS();
@@ -17029,7 +17032,7 @@ var VideoPlayer = ({
       doFullscreen();
     }, 500);
   }, [captionsUrl, subtitleLabel, activateCaptionTracks]);
-  const toggleFullscreen = useCallback18(() => {
+  const toggleFullscreen = useCallback19(() => {
     const container = containerRef.current;
     if (!container) return;
     if (isFullscreen) {
@@ -17048,7 +17051,7 @@ var VideoPlayer = ({
       enterNativeVideoFullscreen();
     }
   }, [isFullscreen, enterNativeVideoFullscreen]);
-  const toggleMute = useCallback18(() => {
+  const toggleMute = useCallback19(() => {
     if (isMuted) {
       setIsMuted(false);
       setVolume(prevVolume || 0.5);
@@ -17058,23 +17061,23 @@ var VideoPlayer = ({
       setVolume(0);
     }
   }, [isMuted, volume, prevVolume]);
-  const handleVolumeChange = useCallback18((e) => {
+  const handleVolumeChange = useCallback19((e) => {
     const val = parseFloat(e.target.value);
     setVolume(val);
     setIsMuted(val === 0);
     if (val > 0) setPrevVolume(val);
   }, []);
-  const startHideTimer = useCallback18(() => {
+  const startHideTimer = useCallback19(() => {
     clearTimeout(hideTimeoutRef.current);
     if (isPlaying) {
       hideTimeoutRef.current = setTimeout(() => setShowControls(false), 3e3);
     }
   }, [isPlaying]);
-  const handleMouseMove = useCallback18(() => {
+  const handleMouseMove = useCallback19(() => {
     setShowControls(true);
     startHideTimer();
   }, [startHideTimer]);
-  const handleTouchToggle = useCallback18(() => {
+  const handleTouchToggle = useCallback19(() => {
     if (!hasStarted) return;
     setShowControls((prev) => {
       const next = !prev;
@@ -17143,7 +17146,7 @@ var VideoPlayer = ({
   }, [hasStarted, duration, toggleMute, toggleFullscreen]);
   const [seekPreview, setSeekPreview] = useState35(null);
   const [playbackRate, setPlaybackRate] = useState35(1);
-  const cycleSpeed = useCallback18(() => {
+  const cycleSpeed = useCallback19(() => {
     setPlaybackRate((prev) => {
       const idx = SPEED_OPTIONS.indexOf(prev);
       return SPEED_OPTIONS[(idx + 1) % SPEED_OPTIONS.length];
@@ -17152,14 +17155,14 @@ var VideoPlayer = ({
   const progressBarRef = useRef21(null);
   const isDraggingRef = useRef21(false);
   const dragListenersRef = useRef21(null);
-  const seekToClientX = useCallback18((clientX) => {
+  const seekToClientX = useCallback19((clientX) => {
     const rect = progressBarRef.current?.getBoundingClientRect();
     if (!rect) return;
     const fraction = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
     setPlayed(fraction);
     playerRef.current?.seekTo(fraction, "fraction");
   }, []);
-  const handleProgressMouseDown = useCallback18((e) => {
+  const handleProgressMouseDown = useCallback19((e) => {
     e.stopPropagation();
     e.preventDefault();
     isDraggingRef.current = true;
@@ -17182,17 +17185,17 @@ var VideoPlayer = ({
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
   }, [seekToClientX]);
-  const handleProgressTouchStart = useCallback18((e) => {
+  const handleProgressTouchStart = useCallback19((e) => {
     e.stopPropagation();
     const touch = e.touches[0];
     if (touch) seekToClientX(touch.clientX);
   }, [seekToClientX]);
-  const handleProgressTouchMove = useCallback18((e) => {
+  const handleProgressTouchMove = useCallback19((e) => {
     e.stopPropagation();
     const touch = e.touches[0];
     if (touch) seekToClientX(touch.clientX);
   }, [seekToClientX]);
-  const handleProgressKeyDown = useCallback18((e) => {
+  const handleProgressKeyDown = useCallback19((e) => {
     if (e.key === "ArrowRight") {
       e.preventDefault();
       e.stopPropagation();
@@ -17214,7 +17217,7 @@ var VideoPlayer = ({
       playerRef.current?.seekTo(duration, "seconds");
     }
   }, [duration]);
-  const handleProgressHover = useCallback18((e) => {
+  const handleProgressHover = useCallback19((e) => {
     if (isDraggingRef.current) return;
     const rect = e.currentTarget.getBoundingClientRect();
     const fraction = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
@@ -17222,7 +17225,7 @@ var VideoPlayer = ({
     setSeekPreview({ fraction, x });
   }, []);
   const isTouchRef = useRef21(false);
-  const handleContainerClick = useCallback18((e) => {
+  const handleContainerClick = useCallback19((e) => {
     if (isTouchRef.current) {
       isTouchRef.current = false;
       return;
@@ -17240,7 +17243,7 @@ var VideoPlayer = ({
       }, 250);
     }
   }, [hasStarted, toggleFullscreen]);
-  const handleContainerTouchEnd = useCallback18((e) => {
+  const handleContainerTouchEnd = useCallback19((e) => {
     if (e.target.closest(".video-controls-bar")) return;
     isTouchRef.current = true;
     if (!hasStarted) return;
@@ -17272,14 +17275,14 @@ var VideoPlayer = ({
     video.addEventListener("webkitbeginfullscreen", onBeginFS);
     return () => video.removeEventListener("webkitbeginfullscreen", onBeginFS);
   }, [hasStarted, activateCaptionTracks]);
-  const handleError = useCallback18(() => setHasError(true), []);
-  const handlePlay = useCallback18(() => {
+  const handleError = useCallback19(() => setHasError(true), []);
+  const handlePlay = useCallback19(() => {
     setIsPlaying(true);
     setHasStarted(true);
   }, []);
-  const handlePause = useCallback18(() => setIsPlaying(false), []);
-  const handleEnded = useCallback18(() => setIsPlaying(false), []);
-  const handlePlayClick = useCallback18(() => {
+  const handlePause = useCallback19(() => setIsPlaying(false), []);
+  const handleEnded = useCallback19(() => setIsPlaying(false), []);
+  const handlePlayClick = useCallback19(() => {
     if (lazyMount) {
       const native = playerRef.current?.getInternalPlayer();
       if (native instanceof HTMLVideoElement) {
@@ -17296,13 +17299,13 @@ var VideoPlayer = ({
     setHasStarted(true);
     setIsPlaying(true);
   }, [lazyMount]);
-  const handleProgress = useCallback18(({ played: p, loaded: l, playedSeconds }) => {
+  const handleProgress = useCallback19(({ played: p, loaded: l, playedSeconds }) => {
     setPlayed(p);
     setLoaded(l);
     updateTime(playedSeconds);
   }, [updateTime]);
-  const handleBuffer = useCallback18(() => setIsBuffering(true), []);
-  const handleBufferEnd = useCallback18(() => setIsBuffering(false), []);
+  const handleBuffer = useCallback19(() => setIsBuffering(true), []);
+  const handleBufferEnd = useCallback19(() => setIsBuffering(false), []);
   if (!mounted) {
     return /* @__PURE__ */ jsx139("div", { className: `video-player-container ${className}`, children: /* @__PURE__ */ jsx139(
       "div",
@@ -17585,7 +17588,7 @@ import React46 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check as Check2 } from "lucide-react";
 import Link3 from "next/link";
-import React45, { useCallback as useCallback19, useState as useState36 } from "react";
+import React45, { useCallback as useCallback20, useState as useState36 } from "react";
 init_cn();
 init_button2();
 import { Fragment as Fragment19, jsx as jsx140, jsxs as jsxs113 } from "react/jsx-runtime";
@@ -17593,7 +17596,7 @@ var ROW_CLASSES = "flex flex-1 min-w-0 items-center gap-2 px-3 py-3 cursor-point
 var WRAPPER_CLASSES = "relative flex items-stretch border-b border-ods-border last:border-b-0";
 var SECONDARY_ACTION_CLASSES = "flex w-10 shrink-0 items-center justify-center self-stretch border-l border-ods-border transition-colors hover:bg-ods-bg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus";
 var SecondaryAction = ({ action }) => {
-  const handleClick = useCallback19(
+  const handleClick = useCallback20(
     (e) => {
       e.stopPropagation();
       if (action.disabled) {
@@ -17638,7 +17641,7 @@ var SecondaryAction = ({ action }) => {
   );
 };
 var MenuItem = ({ item, onItemClick }) => {
-  const activate = useCallback19(() => {
+  const activate = useCallback20(() => {
     if (item.disabled) return;
     if (item.type === "checkbox") {
       item.onClick?.();
@@ -17649,7 +17652,7 @@ var MenuItem = ({ item, onItemClick }) => {
     item.onClick?.();
     onItemClick?.(item);
   }, [item, onItemClick]);
-  const handleClick = useCallback19(
+  const handleClick = useCallback20(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -17657,7 +17660,7 @@ var MenuItem = ({ item, onItemClick }) => {
     },
     [activate]
   );
-  const handleKeyDown = useCallback19(
+  const handleKeyDown = useCallback20(
     (e) => {
       if (e.key !== "Enter" && e.key !== " ") return;
       e.preventDefault();
@@ -17666,7 +17669,7 @@ var MenuItem = ({ item, onItemClick }) => {
     },
     [activate]
   );
-  const handleLinkClick = useCallback19(
+  const handleLinkClick = useCallback20(
     (e) => {
       if (item.disabled) {
         e.preventDefault();
@@ -17827,7 +17830,7 @@ var ActionsMenuDropdown = ({
   sideOffset = 6
 }) => {
   const [open, setOpen] = useState36(false);
-  const handleItemClick = useCallback19(
+  const handleItemClick = useCallback20(
     (item) => {
       onItemClick?.(item);
       if (item.type !== "checkbox" && item.type !== "submenu") {
@@ -18712,7 +18715,7 @@ function InfoCard({ data, className = "" }) {
 }
 function InfoCardValueRow({ label, value, showLabel, copyable, copyAriaLabel }) {
   const { copy, copied } = useCopyToClipboard();
-  return /* @__PURE__ */ jsxs119("div", { className: "flex h-6 items-center gap-0.5 self-stretch w-full", children: [
+  return /* @__PURE__ */ jsxs119("div", { className: "flex h-6 items-center gap-[var(--spacing-system-xs)] self-stretch w-full", children: [
     /* @__PURE__ */ jsx147("span", { className: "text-h4 text-ods-text-primary whitespace-nowrap", children: showLabel ? label : "" }),
     /* @__PURE__ */ jsx147("div", { className: "flex-1 h-px bg-ods-divider" }),
     /* @__PURE__ */ jsxs119("div", { className: "flex items-center gap-[var(--spacing-system-xsf)] max-w-[60%]", children: [
@@ -20518,7 +20521,7 @@ function TabContent({
 
 // src/components/ui/tab-navigation.tsx
 init_cn();
-import { useState as useState42, useEffect as useEffect32, useMemo as useMemo12, useRef as useRef24, useCallback as useCallback21 } from "react";
+import { useState as useState42, useEffect as useEffect32, useMemo as useMemo12, useRef as useRef24, useCallback as useCallback22 } from "react";
 import { useSearchParams as useSearchParams3, useRouter as useRouter5, usePathname as usePathname3 } from "next/navigation";
 import { Fragment as Fragment22, jsx as jsx168, jsxs as jsxs137 } from "react/jsx-runtime";
 function TabNavigation({
@@ -20574,7 +20577,7 @@ function TabNavigation({
   const scrollRef = useRef24(null);
   const [canScrollLeft, setCanScrollLeft] = useState42(false);
   const [canScrollRight, setCanScrollRight] = useState42(false);
-  const updateScrollShadows = useCallback21(() => {
+  const updateScrollShadows = useCallback22(() => {
     const el = scrollRef.current;
     if (!el) return;
     setCanScrollLeft(el.scrollLeft > 0);
@@ -24265,7 +24268,7 @@ import { useMemo as useMemo16 } from "react";
 
 // src/components/ui/query-report-table/query-report-table-header.tsx
 init_cn();
-import { useRef as useRef28, useState as useState47, useCallback as useCallback22 } from "react";
+import { useRef as useRef28, useState as useState47, useCallback as useCallback23 } from "react";
 import { jsx as jsx217, jsxs as jsxs176 } from "react/jsx-runtime";
 function QueryReportTableHeader({
   columns,
@@ -24296,7 +24299,7 @@ function QueryReportTableHeader({
 function TruncatedHeaderCell({ value, width }) {
   const textRef = useRef28(null);
   const [isTruncated, setIsTruncated] = useState47(false);
-  const checkTruncation = useCallback22(() => {
+  const checkTruncation = useCallback23(() => {
     const el = textRef.current;
     if (el) {
       setIsTruncated(el.scrollWidth > el.clientWidth);
@@ -24324,7 +24327,7 @@ function TruncatedHeaderCell({ value, width }) {
 
 // src/components/ui/query-report-table/query-report-table-row.tsx
 init_cn();
-import { useRef as useRef29, useState as useState48, useCallback as useCallback23 } from "react";
+import { useRef as useRef29, useState as useState48, useCallback as useCallback24 } from "react";
 import { jsx as jsx218, jsxs as jsxs177 } from "react/jsx-runtime";
 function QueryReportTableRow({
   row,
@@ -24372,7 +24375,7 @@ function QueryReportTableRow({
 function TruncatedCell({ value, className }) {
   const textRef = useRef29(null);
   const [isTruncated, setIsTruncated] = useState48(false);
-  const checkTruncation = useCallback23(() => {
+  const checkTruncation = useCallback24(() => {
     const el = textRef.current;
     if (el) {
       setIsTruncated(el.scrollWidth > el.clientWidth);
@@ -24635,7 +24638,7 @@ init_cn();
 
 // src/components/ui/data-table/data-table-column-filter.tsx
 init_cn();
-import { useCallback as useCallback24, useMemo as useMemo17 } from "react";
+import { useCallback as useCallback25, useMemo as useMemo17 } from "react";
 
 // src/components/ui/data-table/utils.ts
 function getHideClasses2(hideAt) {
@@ -24695,14 +24698,14 @@ function DataTableColumnFilter({
     () => ({ [column.id]: currentValue ?? EMPTY_ARRAY }),
     [column.id, currentValue]
   );
-  const handleApply = useCallback24(
+  const handleApply = useCallback25(
     (applied) => {
       const next = applied[column.id] ?? [];
       column.setFilterValue(next.length > 0 ? next : void 0);
     },
     [column]
   );
-  const handleReset = useCallback24(() => {
+  const handleReset = useCallback25(() => {
     column.setFilterValue(void 0);
   }, [column]);
   return /* @__PURE__ */ jsx222(
@@ -24889,7 +24892,7 @@ function DataTableEmpty({
 // src/components/ui/data-table/data-table-row.tsx
 init_cn();
 import Link10 from "next/link";
-import { memo as memo4, useCallback as useCallback25 } from "react";
+import { memo as memo4, useCallback as useCallback26 } from "react";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 
 // src/components/ui/data-table/data-table-skeleton.tsx
@@ -24970,7 +24973,7 @@ function DataTableRowImpl({
   className
 }) {
   const isLinkMode = Boolean(href) && !onClick;
-  const handleClick = useCallback25(
+  const handleClick = useCallback26(
     (e) => {
       const target = e.target;
       if (target.closest("[data-no-row-click]")) return;
@@ -25244,7 +25247,7 @@ var DataTable = Object.assign(DataTableRoot, {
 });
 
 // src/components/ui/phone-input.tsx
-import { useCallback as useCallback26, useEffect as useEffect37, useMemo as useMemo18, useRef as useRef31, useState as useState49 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect37, useMemo as useMemo18, useRef as useRef31, useState as useState49 } from "react";
 import { jsx as jsx230, jsxs as jsxs188 } from "react/jsx-runtime";
 function PhoneInput({
   value,
@@ -25263,8 +25266,8 @@ function PhoneInput({
   );
   const [isInvalid, setIsInvalid] = useState49(false);
   const debounceRef = useRef31(null);
-  const digitCount = useCallback26((val) => val.replace(/[^0-9]/g, "").length, []);
-  const runValidation = useCallback26((phone) => {
+  const digitCount = useCallback27((val) => val.replace(/[^0-9]/g, "").length, []);
+  const runValidation = useCallback27((phone) => {
     if (!phone || digitCount(phone) === 0) {
       setIsInvalid(false);
       onValidationChange?.(false);
@@ -25274,7 +25277,7 @@ function PhoneInput({
     setIsInvalid(invalid);
     onValidationChange?.(invalid);
   }, [countryCode, digitCount, onValidationChange]);
-  const debouncedValidation = useCallback26((phone) => {
+  const debouncedValidation = useCallback27((phone) => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => runValidation(phone), 300);
   }, [runValidation]);
@@ -26036,7 +26039,7 @@ function TagSearchInput({
 
 // src/components/ui/markdown-editor.tsx
 init_cn();
-import { useRef as useRef34, useCallback as useCallback27, useState as useState52, useEffect as useEffect40 } from "react";
+import { useRef as useRef34, useCallback as useCallback28, useState as useState52, useEffect as useEffect40 } from "react";
 import dynamic from "next/dynamic";
 import { Loader2 as Loader23, Upload as Upload2 } from "lucide-react";
 import { jsx as jsx234, jsxs as jsxs192 } from "react/jsx-runtime";
@@ -26105,7 +26108,7 @@ function MarkdownEditor({
   const handleChange = (val) => {
     onChange(val || "");
   };
-  const insertTextAtCursor = useCallback27(
+  const insertTextAtCursor = useCallback28(
     (text) => {
       const textarea = document.querySelector(
         ".w-md-editor-text-textarea"
@@ -26121,7 +26124,7 @@ function MarkdownEditor({
     },
     [value, onChange]
   );
-  const handleFileUpload = useCallback27(
+  const handleFileUpload = useCallback28(
     async (file) => {
       if (!onUploadFile) return;
       setIsUploading(true);
@@ -26142,7 +26145,7 @@ function MarkdownEditor({
     },
     [onUploadFile, insertTextAtCursor, onFileUploaded]
   );
-  const handleFileInputChange = useCallback27(
+  const handleFileInputChange = useCallback28(
     (e) => {
       const file = e.target.files?.[0];
       if (file) {
@@ -26152,7 +26155,7 @@ function MarkdownEditor({
     },
     [handleFileUpload]
   );
-  const handlePaste = useCallback27(
+  const handlePaste = useCallback28(
     (e) => {
       if (!onUploadFile) return;
       const items = e.clipboardData?.items;
@@ -26191,7 +26194,7 @@ function MarkdownEditor({
   const scrollParentRef = useRef34(window);
   const EDGE_ZONE = 60;
   const MAX_SCROLL_SPEED = 15;
-  const findScrollParent = useCallback27((el) => {
+  const findScrollParent = useCallback28((el) => {
     let node = el?.parentElement;
     while (node && node !== document.documentElement) {
       const { overflowY } = window.getComputedStyle(node);
@@ -26202,7 +26205,7 @@ function MarkdownEditor({
     }
     return window;
   }, []);
-  const scrollLoop = useCallback27(() => {
+  const scrollLoop = useCallback28(() => {
     if (!isDraggingRef.current) return;
     const parent = scrollParentRef.current;
     const isWindow = parent === window;
@@ -28043,7 +28046,7 @@ var ErrorBoundary = class extends Component {
 
 // src/components/features/figma-prototype-viewer.tsx
 init_cn();
-import { useState as useState61, useRef as useRef37, useEffect as useEffect45, useCallback as useCallback29, useMemo as useMemo22 } from "react";
+import { useState as useState61, useRef as useRef37, useEffect as useEffect45, useCallback as useCallback30, useMemo as useMemo22 } from "react";
 
 // src/components/features/section-selector.tsx
 init_cn();
@@ -28551,7 +28554,7 @@ var FigmaPrototypeViewer = ({
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [config.sections, activeSection, isNavigating, externalActiveSection, config.onSectionChange, viewMode]);
-  const navigateToSection = useCallback29((sectionId) => {
+  const navigateToSection = useCallback30((sectionId) => {
     const section = config.sections.find((s) => s.id === sectionId);
     if (!section || !iframeRef.current?.contentWindow || !isInitialized) {
       return;
@@ -28575,7 +28578,7 @@ var FigmaPrototypeViewer = ({
     if (navTimerRef.current) clearTimeout(navTimerRef.current);
     navTimerRef.current = setTimeout(() => setIsNavigating(false), 500);
   }, [config, isInitialized, viewMode, externalActiveSection]);
-  const handleSectionClick = useCallback29((sectionId) => {
+  const handleSectionClick = useCallback30((sectionId) => {
     const sectionsDisabled = iframeState !== "READY" || isNavigating;
     if (sectionId === activeSection || sectionsDisabled) {
       return;
@@ -28586,7 +28589,7 @@ var FigmaPrototypeViewer = ({
       navigateToSection(sectionId);
     }
   }, [activeSection, iframeState, isNavigating, externalOnSectionClick, navigateToSection]);
-  const handleTouchStart = useCallback29((e) => {
+  const handleTouchStart = useCallback30((e) => {
     const overlayElement = e.currentTarget;
     console.log("[Touch] Touch detected, allowing iframe interaction");
     overlayElement.style.pointerEvents = "none";
@@ -29150,7 +29153,7 @@ function useLoading() {
 }
 
 // src/components/features/media-gallery-manager.tsx
-import { useState as useState64, useRef as useRef39, useCallback as useCallback30 } from "react";
+import { useState as useState64, useRef as useRef39, useCallback as useCallback31 } from "react";
 import {
   Upload as Upload3,
   Image as ImageIcon2,
@@ -29174,7 +29177,7 @@ function MediaGalleryManager({
   const fileInputRef = useRef39(null);
   const [deletingIndex, setDeletingIndex] = useState64(null);
   const [draggedIndex, setDraggedIndex] = useState64(null);
-  const handleFileSelect = useCallback30(async (event) => {
+  const handleFileSelect = useCallback31(async (event) => {
     const file = event.target.files?.[0];
     if (!file) return;
     let mediaType;
@@ -29200,18 +29203,18 @@ function MediaGalleryManager({
       console.error("Upload failed:", error);
     }
   }, [media, onChange, onUpload]);
-  const handleDeleteMedia = useCallback30((index) => {
+  const handleDeleteMedia = useCallback31((index) => {
     setDeletingIndex(index);
     onChange(media.filter((_, i) => i !== index));
     setDeletingIndex(null);
   }, [media, onChange]);
-  const handleDragStart = useCallback30((index) => {
+  const handleDragStart = useCallback31((index) => {
     setDraggedIndex(index);
   }, []);
-  const handleDragOver = useCallback30((e) => {
+  const handleDragOver = useCallback31((e) => {
     e.preventDefault();
   }, []);
-  const handleDrop = useCallback30((e, targetIndex) => {
+  const handleDrop = useCallback31((e, targetIndex) => {
     e.preventDefault();
     if (draggedIndex === null || draggedIndex === targetIndex) {
       setDraggedIndex(null);
@@ -29223,7 +29226,7 @@ function MediaGalleryManager({
     onChange(newMedia.map((item, i) => ({ ...item, display_order: i })));
     setDraggedIndex(null);
   }, [media, draggedIndex, onChange]);
-  const renderMediaItem = useCallback30((mediaItem, index) => {
+  const renderMediaItem = useCallback31((mediaItem, index) => {
     const isDeleting = deletingIndex === index;
     return /* @__PURE__ */ jsxs211(
       Card,
@@ -30986,7 +30989,7 @@ function TagsSelector({
 
 // src/components/features/video-source-selector.tsx
 init_button2();
-import { useState as useState69, useCallback as useCallback31 } from "react";
+import { useState as useState69, useCallback as useCallback32 } from "react";
 import { Upload as Upload6, Sparkles as Sparkles3, X as X13, Video as Video5 } from "lucide-react";
 import { jsx as jsx272, jsxs as jsxs224 } from "react/jsx-runtime";
 function VideoSourceSelector({
@@ -31015,7 +31018,7 @@ function VideoSourceSelector({
   const [uploadProgress, setUploadProgress] = useState69(0);
   const [uploadMessage, setUploadMessage] = useState69("");
   const [uploadError, setUploadError] = useState69(null);
-  const handleUploadClick = useCallback31(() => {
+  const handleUploadClick = useCallback32(() => {
     const input = document.createElement("input");
     input.type = "file";
     input.accept = "video/*";
@@ -31046,7 +31049,7 @@ function VideoSourceSelector({
     };
     input.click();
   }, [onUploadVideo, onUploadedVideoUrlChange]);
-  const handleDeleteVideo = useCallback31(() => {
+  const handleDeleteVideo = useCallback32(() => {
     onUploadedVideoUrlChange("");
   }, [onUploadedVideoUrlChange]);
   return /* @__PURE__ */ jsxs224("div", { className: `space-y-4 p-6 bg-ods-card border border-ods-border rounded-lg ${className}`, children: [
@@ -33454,7 +33457,7 @@ function EmptyState3() {
 }
 
 // src/components/features/board/use-board-collapse.ts
-import { useCallback as useCallback33, useState as useState73 } from "react";
+import { useCallback as useCallback34, useState as useState73 } from "react";
 function useBoardCollapse(storageKey) {
   const [persisted, setPersisted] = useLocalStorage(
     storageKey ?? "__board_collapse_unused__",
@@ -33463,13 +33466,13 @@ function useBoardCollapse(storageKey) {
   const [memory, setMemory] = useState73({});
   const collapsed = storageKey ? persisted : memory;
   const setMap = storageKey ? setPersisted : setMemory;
-  const toggle = useCallback33(
+  const toggle = useCallback34(
     (columnId) => {
       setMap((prev) => ({ ...prev, [columnId]: !prev[columnId] }));
     },
     [setMap]
   );
-  const setCollapsed = useCallback33(
+  const setCollapsed = useCallback34(
     (columnId, value) => {
       setMap((prev) => ({ ...prev, [columnId]: value }));
     },
@@ -34342,4 +34345,4 @@ export {
   TMCG_SOCIAL_PLATFORMS,
   assets
 };
-//# sourceMappingURL=chunk-KCKMK4UF.js.map
+//# sourceMappingURL=chunk-6LDN3CIY.js.map