@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/stores/website_navigation_store.js

@@ -0,0 +1,767 @@
+import { __webpack_require__ } from "../../../js/runtime.js";
+import { signals_core_module_d } from "../../../js/multimodal_v2.js";
+import { normalizeToBaseUrl } from "../../../src/url-utils.js";
+import { MULTIMODAL_HOST_ID } from "../constants.js";
+import { isMobile } from "../utils/media_queries.js";
+import { NavigationInterceptor } from "../utils/navigation_interceptor.js";
+import "../utils/navigation_strategies/index.js";
+import { unzoomRect, slideZoomPoint, zoomScaleForBox, slideZoomFocus } from "../utils/slide_zoom.js";
+import { DisplayMode as types_DisplayMode } from "../types.js";
+import "../../utils/native_globals.js";
+import { hexToRgba } from "../utils/theme_styles.js";
+import { isSameOrigin, findElementWithText } from "../utils/navigation_strategies/navigation_utils.js";
+import { wouterV3Strategy as wouter_v3 } from "../utils/navigation_strategies/wouter_v3.js";
+import { lwrStrategy as lwr } from "../utils/navigation_strategies/lwr.js";
+import { nextJsStrategy as next_js } from "../utils/navigation_strategies/next_js.js";
+import { default as dom_swap } from "../utils/navigation_strategies/dom_swap.js";
+
+/* provided dependency */ var website_navigation_store_setTimeout = __webpack_require__(68034).pS;
+/* provided dependency */ var website_navigation_store_clearTimeout = __webpack_require__(68034).Kj;
+
+
+
+
+
+
+
+
+
+// Layout constants
+const CURSOR_OFFSET_PX = 14;
+const CURSOR_ELEMENT_OFFSET_PX = 15;
+// Animation timing constants (in milliseconds)
+const HIGHLIGHT_DELAY_MS = 3000;
+// Upper bound for waiting on the smooth scroll to settle. Smooth scrolls
+// can run ~800-1500ms on long pages, and we then need several consecutive
+// stable samples on top of that, so this needs headroom over the raw scroll
+// duration. The cap keeps us from hanging if the page keeps animating
+// (carousels, sticky headers re-laying out, etc.).
+const SCROLL_STABILITY_TIMEOUT_MS = 3500;
+const RECT_STABILITY_POLL_INTERVAL_MS = 100;
+// Five consecutive identical samples (~500ms of stillness) is enough to
+// declare a smooth scroll done without being so eager that mid-scroll
+// pauses get mistaken for the final position.
+const RECT_STABILITY_REQUIRED_SAMPLES = 5;
+const CURSOR_POSITION_DELAY_MS = 500;
+const CURSOR_HIDE_DELAY_MS = 1500;
+// How long the cursor's glide to the target takes — must match the CursorContainer CSS transition
+// (transform 0.8s) so we wait for the cursor to actually arrive before zooming the video in, and so
+// each traced side is drawn in lockstep with the cursor. Kept unhurried so the trace reads calmly.
+const CURSOR_MOVE_DURATION_MS = 800;
+// Per-side duration while the cursor traces (draws) the bounding box — 40% faster than the glide so
+// the box draws snappily. Drives both the cursor's per-leg glide and the border reveal, kept in sync.
+const RECT_TRACE_LEG_MS = Math.round(CURSOR_MOVE_DURATION_MS * 0.6);
+// How long the video stays zoomed in on the target before zooming back out. Comfortably longer than
+// the full trace (5 glides x CURSOR_MOVE_DURATION_MS) so the finished box rests a beat before closing.
+const SLIDE_ZOOM_HOLD_MS = 6500;
+// Padding (viewport px) added around the model's bounding box so the drawn rectangle frames the
+// element with a little breathing room instead of hugging its exact edges.
+const RECT_PADDING_PX = 12;
+// How far off the bottom-right corner the cursor rests once the box is drawn, so it sits beside the
+// finished rectangle rather than on the corner.
+const RECT_REST_OFFSET_PX = 12;
+// Brief pause after showing the cursor at its start position so the browser paints that frame before
+// we move it — otherwise the CSS transform transition has nothing to animate from and it just pops in.
+const CURSOR_GLIDE_START_DELAY_MS = 60;
+const TRANSITION_DURATION_MS = 300;
+// Highlight styling
+const HIGHLIGHT_OPACITY = 0.2;
+const DARK_SURFACE_HIGHLIGHT_OPACITY = 0.25;
+const DARK_SURFACE_LUMINANCE_THRESHOLD = 0.4;
+const DEFAULT_PRIMARY_COLOR = "#1e79ff";
+// Text search retry config
+const FIND_TEXT_MAX_ATTEMPTS = 3;
+const FIND_TEXT_DELAY_MS = 500;
+class WebsiteNavigationStore {
+    /**
+   * Navigate to a URL and optionally highlight a text snippet.
+   * Switches to docked mode to push content left for co-browsing.
+   */ async navigateToContent(message) {
+        const wasNavigationInterceptorInitialized = this.navigationInterceptor.initialized;
+        try {
+            this.navigationInterceptor.dispose();
+            if (this.rootStore.displayMode.peek() !== types_DisplayMode.CLOSED) {
+                this.rootStore.setDisplayMode(isMobile.value ? types_DisplayMode.CLOSED : types_DisplayMode.DOCKED);
+            }
+            // Minimize video if maximized so user can see the navigated content,
+            // this will also clear the slide if it is maximized with an artifact
+            this.rootStore.clearMaximizedState();
+            const promises = [];
+            // Perform soft navigation if URL is provided
+            if (message.url) {
+                const postNavigate = await this.navigate(message.url);
+                promises.push(postNavigate());
+            }
+            // Highlight text snippet if provided
+            if (message.textSnippet) {
+                promises.push(this.highlightText(message.textSnippet));
+            }
+            await Promise.all(promises);
+        } finally{
+            if (wasNavigationInterceptorInitialized) {
+                this.navigationInterceptor.init();
+            }
+        }
+    }
+    /**
+   * Highlight a text snippet on the page with a cursor animation.
+   * Shows cursor at center, moves to element, then highlights it.
+   */ async highlightText(text) {
+        // Give the user a few seconds before highlighting the text snippet
+        await this.delay(HIGHLIGHT_DELAY_MS);
+        // Show initial cursor in center of the page content (accounting for sidebar)
+        this.setCursorPosition({
+            x: window.innerWidth / 2 - CURSOR_OFFSET_PX,
+            y: window.innerHeight / 2 - CURSOR_OFFSET_PX,
+            visible: true
+        });
+        const foundElement = await findElementWithText(text, {
+            maxAttempts: FIND_TEXT_MAX_ATTEMPTS,
+            delayMs: FIND_TEXT_DELAY_MS
+        });
+        if (!foundElement) {
+            this.setCursorPosition({
+                x: 0,
+                y: 0,
+                visible: false
+            });
+            return;
+        }
+        await this.pointCursorAtElement(foundElement);
+    }
+    /**
+   * Point Piper's cursor at a specific element on the live page (and highlight it), identified by
+   * its co-browse node-id. Driven by the point_at_page tool / PointCursor message. Resolves the
+   * node-id to the live host element via the Shipper reverse lookup (falls back to text search).
+   * Reuses the same cursor + highlight as the share_website flow.
+   */ async pointAtNode(nodeId, text) {
+        // A previous point gesture may still have a hide timer pending; cancel it so it can't
+        // yank the cursor back to the old spot mid-gesture.
+        this.cancelCursorSequenceTimers();
+        let element = this.elementForNodeId(nodeId);
+        if (!element && text) {
+            element = await findElementWithText(text, {
+                maxAttempts: FIND_TEXT_MAX_ATTEMPTS,
+                delayMs: FIND_TEXT_DELAY_MS
+            });
+        }
+        if (!element) {
+            this.setCursorPosition({
+                x: 0,
+                y: 0,
+                visible: false
+            });
+            return;
+        }
+        // Show the cursor near center first so it visibly glides to the target.
+        this.setCursorPosition({
+            x: window.innerWidth / 2 - CURSOR_OFFSET_PX,
+            y: window.innerHeight / 2 - CURSOR_OFFSET_PX,
+            visible: true
+        });
+        // Let the browser paint that start frame before moving. A resolved node-id needs no lookup, so
+        // without this pause both positions land in one task and the cursor pops onto the target instead
+        // of gliding. Routed through the cursor-sequence set so a newer gesture drops this continuation.
+        await this.cursorSequenceDelay(CURSOR_GLIDE_START_DELAY_MS);
+        // Don't scroll the visitor's page: marks are only placed on elements already in view, so the
+        // target is on-screen and yanking the page would be jarring mid-call.
+        await this.pointCursorAtElement(element, {
+            scroll: false
+        });
+    }
+    /**
+   * Point Piper's cursor at a spot on the slide image she's currently showing. A slide is an image
+   * with no DOM to anchor to, so the model gives normalized [0,1] coordinates and we map them onto
+   * the on-screen slide image's rect. Reuses the same cursor overlay as the page/share_website flow.
+   */ async pointAtSlide(normalizedX, normalizedY, box) {
+        if (box === void 0) box = null;
+        // Cancel any pending hide (and glide continuation) from a previous point gesture: its
+        // callback captured the *old* x/y, so letting it fire would jump the cursor back there
+        // and hide it while this gesture is still showing.
+        this.cancelCursorSequenceTimers();
+        const nx = Math.min(1, Math.max(0, normalizedX));
+        const ny = Math.min(1, Math.max(0, normalizedY));
+        const slide = this.currentSlideElement();
+        const measured = slide == null ? void 0 : slide.getBoundingClientRect();
+        if (!slide || !measured || measured.width < 1 || measured.height < 1) {
+            this.slideZoom.value = null;
+            this.pointerTrace.value = null;
+            this.setCursorPosition({
+                x: 0,
+                y: 0,
+                visible: false
+            });
+            return;
+        }
+        // A previous gesture's zoom may still be applied to the media — its hold hasn't elapsed, or its
+        // unzoom transition is still animating — so getBoundingClientRect reports the *zoomed* geometry.
+        // Recover the natural rect by inverting that known zoom before mapping the model's fraction onto
+        // it (measuring through the live transform would land the point in the wrong place).
+        const activeZoom = this.slideZoom.peek();
+        const rect = activeZoom ? unzoomRect(measured, activeZoom) : measured;
+        // The model's coordinates are fractions of the FRAME it perceives, which is the raw
+        // slide/video content (no letterbox). The element renders that content with object-fit:
+        // contain, so when the element box isn't the content's aspect ratio the picture is
+        // letterboxed inside it. Map onto the actual displayed content box (not the padded element
+        // rect) so the cursor lands where the model means — otherwise a non-matching aspect (common
+        // for videos) offsets the pointer.
+        const content = contentBox(slide, rect);
+        const x = content.left + nx * content.width;
+        const y = content.top + ny * content.height;
+        // Make the cursor glide to the spot rather than pop in. The CSS transform transition only
+        // animates if the cursor is already on-screen at a prior position, so if it's hidden we first
+        // show it at the viewport center, let the browser paint that frame, then move it to the target.
+        if (!this.cursorPosition.peek().visible) {
+            this.setCursorPosition({
+                x: window.innerWidth / 2 - CURSOR_OFFSET_PX,
+                y: window.innerHeight / 2 - CURSOR_OFFSET_PX,
+                visible: true
+            });
+            // Routed through the cursor-sequence set: if another point gesture starts during the
+            // glide pause, the promise is dropped and this gesture's continuation never runs.
+            await this.cursorSequenceDelay(CURSOR_GLIDE_START_DELAY_MS);
+        }
+        // Phase 1: glide the cursor to the (un-zoomed) target spot, with no zoom yet.
+        this.slideZoom.value = null;
+        this.setCursorPosition({
+            x,
+            y,
+            visible: true
+        });
+        // Size the magnification to the target box: a small box zooms in hard, a wide/tall one stays
+        // gentle so it isn't cropped by the zoom window. With no box, fall back to the default scale.
+        const scale = box ? zoomScaleForBox(box) : (/* inlined export .SLIDE_ZOOM_SCALE */1.3);
+        // Phase 2: once the cursor has reached the spot, zoom the media (slide image OR demo video) in
+        // toward it. Both apply slideZoomStyle from `slideZoom` (see components/decks + presentations).
+        // Routed through the cursor-sequence delay so a new point gesture starting mid-move drops this.
+        await this.cursorSequenceDelay(CURSOR_MOVE_DURATION_MS);
+        this.slideZoom.value = {
+            x: nx,
+            y: ny,
+            scale
+        };
+        // Phase 3: hold the zoom for SLIDE_ZOOM_HOLD_MS, then zoom back out (the cursor returns to the
+        // un-zoomed spot as the media unzooms) and hide the cursor + box. Scheduled from zoom-in time,
+        // independent of the trace below, so the zoom always lasts the full hold.
+        this.scheduleCursorSequenceTimer(()=>{
+            this.slideZoom.value = null;
+            this.pointerTrace.value = null;
+            this.setCursorPosition({
+                x,
+                y,
+                visible: false
+            });
+        }, SLIDE_ZOOM_HOLD_MS);
+        if (box) {
+            // Trace the bounding box with the cursor, drawing the border as it goes.
+            await this.traceRect(box, {
+                x: nx,
+                y: ny
+            }, content, scale);
+        } else {
+            // No box: the magnification pans the point toward center, so move the cursor to where it lands
+            // (slideZoomFocus) so it stays glued to the target as the media zooms.
+            const focus = slideZoomFocus({
+                x: nx,
+                y: ny
+            }, scale);
+            this.setCursorPosition({
+                x: content.left + focus.x * content.width,
+                y: content.top + focus.y * content.height,
+                visible: true
+            });
+        }
+    }
+    /**
+   * Trace the target's bounding box with the cursor on the zoomed video, drawing the border in the
+   * cursor's color as it goes. Each corner is mapped through the same zoom the media applies (so the
+   * box frames the zoomed content) and padded outward a little so the box sits just outside the
+   * element rather than hugging it. The cursor starts at the bottom-right corner and glides clockwise
+   * (BR -> BL -> TL -> TR -> BR) while PointerRectOverlay reveals the border for each side over the
+   * same per-side duration, so the line follows the cursor; it then rests just off the bottom-right
+   * corner. Every step is a cursor-sequence delay, so a new point gesture cancels the trace cleanly.
+   */ async traceRect(box, focal, content, scale) {
+        // Map a normalized content point through the zoom, then to viewport pixels — clamped to the
+        // content box so a box larger than the zoom window still traces along the media's edges.
+        const toScreen = (px, py)=>{
+            const z = slideZoomPoint(focal, {
+                x: px,
+                y: py
+            }, scale);
+            return {
+                x: content.left + Math.min(1, Math.max(0, z.x)) * content.width,
+                y: content.top + Math.min(1, Math.max(0, z.y)) * content.height
+            };
+        };
+        const tlPoint = toScreen(box.x1, box.y1);
+        const brPoint = toScreen(box.x2, box.y2);
+        // Pad the box outward so the drawn rectangle frames the element with a little breathing room
+        // instead of hugging its exact edges (the model's box is very tight).
+        const left = tlPoint.x - RECT_PADDING_PX;
+        const top = tlPoint.y - RECT_PADDING_PX;
+        const width = Math.max(0, brPoint.x - tlPoint.x) + 2 * RECT_PADDING_PX;
+        const height = Math.max(0, brPoint.y - tlPoint.y) + 2 * RECT_PADDING_PX;
+        // Padded corners the cursor visits.
+        const br = {
+            x: left + width,
+            y: top + height
+        };
+        const bl = {
+            x: left,
+            y: top + height
+        };
+        const tl = {
+            x: left,
+            y: top
+        };
+        const tr = {
+            x: left + width,
+            y: top
+        };
+        const perimeter = 2 * (width + height) || 1;
+        // Cumulative perimeter fraction revealed after each side is drawn, clockwise from the bottom-right:
+        // bottom (BR->BL), left (BL->TL), top (TL->TR), right (TR->BR).
+        const legs = [
+            {
+                corner: bl,
+                reveal: width / perimeter
+            },
+            {
+                corner: tl,
+                reveal: (width + height) / perimeter
+            },
+            {
+                corner: tr,
+                reveal: (2 * width + height) / perimeter
+            },
+            {
+                corner: br,
+                reveal: 1
+            }
+        ];
+        // Show the (undrawn) box and glide the cursor to the bottom-right corner to start the trace.
+        this.pointerTrace.value = {
+            left,
+            top,
+            width,
+            height,
+            reveal: 0,
+            transitionMs: 0
+        };
+        this.setCursorPosition({
+            x: br.x,
+            y: br.y,
+            visible: true
+        });
+        await this.cursorSequenceDelay(CURSOR_MOVE_DURATION_MS);
+        for (const leg of legs){
+            this.pointerTrace.value = {
+                left,
+                top,
+                width,
+                height,
+                reveal: leg.reveal,
+                transitionMs: RECT_TRACE_LEG_MS
+            };
+            // Speed the cursor's glide to match the faster border reveal so the two stay in lockstep.
+            this.setCursorPosition({
+                x: leg.corner.x,
+                y: leg.corner.y,
+                visible: true,
+                transitionMs: RECT_TRACE_LEG_MS
+            });
+            // Sequential by design: each side is drawn only after the cursor finishes the previous one.
+            // eslint-disable-next-line no-await-in-loop
+            await this.cursorSequenceDelay(RECT_TRACE_LEG_MS);
+        }
+        // Rest the cursor just off the bottom-right corner so it sits beside the finished box, not on it.
+        this.setCursorPosition({
+            x: br.x + RECT_REST_OFFSET_PX,
+            y: br.y + RECT_REST_OFFSET_PX,
+            visible: true
+        });
+    }
+    /**
+   * The on-screen element the agent is pointing at — a slide image (deck or single slide) or the
+   * demo video currently playing — looked up inside the multimodal widget's shadow root. Its
+   * viewport rect is what we map the normalized [0,1] point coordinates onto. Only one of these is
+   * ever mounted at a time (the artifact overlay shows a single thing), so first-match is correct.
+   */ currentSlideElement() {
+        const host = document.getElementById(MULTIMODAL_HOST_ID);
+        const root = host == null ? void 0 : host.shadowRoot;
+        if (!root) return null;
+        // Slides are plain styled elements, so we match their data-component-name. The demo video is a
+        // <Persisted> element, which applies attributes as JS properties (not DOM attributes) — so
+        // data-component-name isn't queryable on it. Its id ("presentation-video") IS a reflected DOM
+        // attribute, so we target the video by id instead.
+        return root.querySelector('[data-component-name="Deck.SlideImage"], [data-component-name="Slide.SlideImage"], #presentation-video');
+    }
+    /**
+   * Resolve a co-browse node-id to the live host-page element. The Shipper (running because a call
+   * with page perception is active) exposes the reverse lookup on the host window. Returns null when
+   * unavailable or when the node isn't an element.
+   */ elementForNodeId(nodeId) {
+        var _ref;
+        if (nodeId == null) return null;
+        const lookup = window.__qlfdNodeForId;
+        const node = (_ref = lookup == null ? void 0 : lookup(nodeId)) != null ? _ref : null;
+        if (!node) return null;
+        const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+        return el != null ? el : null;
+    }
+    /**
+   * Scroll an element into view, land the cursor on it, and highlight it. Shared by the
+   * share_website text flow (highlightText) and the point_at_page node-id flow (pointAtNode).
+   */ async pointCursorAtElement(element, param) {
+        let { scroll = true } = param === void 0 ? {} : param;
+        // Cancel any highlight/hide cascade still pending from a previous point gesture so its
+        // stale hide (captured at the old coordinates) can't fire during this one.
+        this.cancelCursorSequenceTimers();
+        // Detect surface darkness up front so the cursor can pick a contrasting color before it lands.
+        const onDarkSurface = this.isOnDarkSurface(element);
+        let rect;
+        if (scroll) {
+            element.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+                inline: "nearest"
+            });
+            // Wait for the smooth scroll to settle before measuring, so the cursor lands accurately.
+            rect = await this.waitForStableRect(element);
+        } else {
+            // No scroll: the element is already in view, so measure it where it is.
+            rect = element.getBoundingClientRect();
+        }
+        // Move cursor to bottom right of the element.
+        this.setCursorPosition({
+            x: rect.right - CURSOR_ELEMENT_OFFSET_PX,
+            y: rect.bottom - CURSOR_ELEMENT_OFFSET_PX,
+            visible: true,
+            onDarkSurface
+        });
+        // After cursor arrives, highlight the element, then hide the cursor shortly after.
+        this.scheduleCursorSequenceTimer(()=>{
+            this.applyHighlight(element);
+            this.scheduleCursorSequenceTimer(()=>{
+                this.setCursorPosition({
+                    x: rect.right - CURSOR_ELEMENT_OFFSET_PX,
+                    y: rect.bottom - CURSOR_ELEMENT_OFFSET_PX,
+                    visible: false,
+                    onDarkSurface
+                });
+            }, CURSOR_HIDE_DELAY_MS);
+        }, CURSOR_POSITION_DELAY_MS);
+    }
+    /**
+   * Set the cursor position for the co-browsing overlay.
+   */ setCursorPosition(position) {
+        this.cursorPosition.value = position;
+    }
+    /**
+   * Initialize navigation interception to handle user-initiated link clicks.
+   * Uses the Navigation API on Chromium browsers, falls back to click capture
+   * on Firefox/Safari until they implement the Navigation API.
+   *
+   * Should be called when entering voice/video mode.
+   */ initNavigationInterceptor() {
+        const strategy = this.navigationStrategies.find((s)=>s.isApplicable());
+        if (!strategy || strategy.needsInterceptor) {
+            this.navigationInterceptor.init();
+        }
+    }
+    /**
+   * Dispose of the navigation interceptor and remove event listeners.
+   * Should be called when leaving voice/video mode.
+   */ disposeNavigationInterceptor() {
+        this.navigationInterceptor.dispose();
+    }
+    /**
+   * Dispose of the store by clearing all active timers and removing event listeners.
+   * Should be called when the store is no longer needed.
+   */ dispose() {
+        this.clearAllTimers();
+        this.slideZoom.value = null;
+        this.pointerTrace.value = null;
+        this.navigationInterceptor.dispose();
+    }
+    /**
+   * Navigate to a URL using the best available strategy.
+   * @returns Post-navigation callback if any cleanup is needed (e.g., run scripts)
+   * @throws If no strategy can handle it (e.g., cross-origin URL)
+   */ async navigate(url) {
+        const target = new URL(url, window.location.origin);
+        const strategy = this.navigationStrategies.find((s)=>s.isApplicable());
+        if (!strategy || !isSameOrigin(target)) {
+            throw new Error("No navigation strategy can handle URL: " + url);
+        }
+        const postNavigate = await strategy.navigate(target);
+        return async ()=>{
+            await (postNavigate == null ? void 0 : postNavigate());
+            this.rootStore.dockingStore.reEvaluate();
+        };
+    }
+    /**
+   * Schedule a timer and track it for cleanup.
+   */ scheduleTimer(callback, delay) {
+        const timerId = website_navigation_store_setTimeout(callback, delay);
+        this.activeTimerIds.add(timerId);
+        return timerId;
+    }
+    /**
+   * Schedule a timer belonging to the current cursor point/highlight/hide gesture.
+   * Cancelled wholesale by `cancelCursorSequenceTimers()` when a new gesture starts,
+   * and by `clearAllTimers()` on dispose.
+   */ scheduleCursorSequenceTimer(callback, delay) {
+        const timerId = this.scheduleTimer(()=>{
+            this.activeTimerIds.delete(timerId);
+            this.cursorSequenceTimerIds.delete(timerId);
+            callback();
+        }, delay);
+        this.cursorSequenceTimerIds.add(timerId);
+    }
+    /**
+   * Like `delay()`, but the timer is part of the current cursor gesture: if a new
+   * gesture starts (or the store is disposed) before it elapses, the promise is left
+   * unresolved and the awaiting continuation is dropped along with the stale gesture.
+   */ cursorSequenceDelay(ms) {
+        return new Promise((resolve)=>{
+            this.scheduleCursorSequenceTimer(resolve, ms);
+        });
+    }
+    /**
+   * Cancel all timers belonging to the previous cursor gesture (see
+   * `cursorSequenceTimerIds`).
+   */ cancelCursorSequenceTimers() {
+        for (const timerId of this.cursorSequenceTimerIds){
+            website_navigation_store_clearTimeout(timerId);
+            this.activeTimerIds.delete(timerId);
+        }
+        this.cursorSequenceTimerIds.clear();
+    }
+    /**
+   * Clear all active timers.
+   */ clearAllTimers() {
+        for (const timerId of this.activeTimerIds){
+            website_navigation_store_clearTimeout(timerId);
+        }
+        this.activeTimerIds.clear();
+    }
+    /**
+   * Create a delay promise that can be used with async/await.
+   */ delay(ms) {
+        return new Promise((resolve)=>{
+            const timerId = this.scheduleTimer(()=>{
+                this.activeTimerIds.delete(timerId);
+                resolve();
+            }, ms);
+        });
+    }
+    applyHighlight(element) {
+        const isDark = this.isOnDarkSurface(element);
+        const baseColor = isDark ? this.getThemeVar("--q-lighter-primary-color") : this.getThemeVar("--q-primary-color");
+        const alpha = isDark ? DARK_SURFACE_HIGHLIGHT_OPACITY : HIGHLIGHT_OPACITY;
+        element.style.backgroundColor = hexToRgba(baseColor, alpha);
+        element.style.transition = "background-color " + TRANSITION_DURATION_MS + "ms ease-in-out";
+    }
+    getThemeVar(name, fallback) {
+        if (fallback === void 0) fallback = DEFAULT_PRIMARY_COLOR;
+        const host = document.getElementById(MULTIMODAL_HOST_ID);
+        return ((host == null ? void 0 : host.style.getPropertyValue(name)) || getComputedStyle(host || document.documentElement).getPropertyValue(name) || fallback).trim();
+    }
+    // Light text (high luminance) implies a dark background.
+    isOnDarkSurface(element) {
+        const textColor = this.extractTextColor(element);
+        if (textColor) return this.relativeLuminance(textColor) > 1 - DARK_SURFACE_LUMINANCE_THRESHOLD;
+        return false;
+    }
+    extractTextColor(element) {
+        const { color } = getComputedStyle(element);
+        if (!color) return null;
+        const match = color.match(/rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)/);
+        if (!match) return null;
+        return [
+            parseInt(match[1], 10),
+            parseInt(match[2], 10),
+            parseInt(match[3], 10)
+        ];
+    }
+    relativeLuminance(param) {
+        let [r, g, b] = param;
+        const toLinear = (c)=>{
+            const s = c / 255;
+            return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+        };
+        return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+    }
+    /**
+   * Perform soft navigation to a URL.
+   * Updates history, fetches the page, and swaps the DOM.
+   * This is passed to NavigationInterceptor for user-initiated navigation.
+   */ async navigateSoftly(url, options) {
+        if (options === void 0) options = {};
+        const { history = "push", scroll = "top" } = options;
+        try {
+            const postNavigate = await this.navigate(url);
+            // Update history if needed (for fallback mode where we manage history ourselves)
+            if (history === "push") {
+                window.history.pushState({
+                    __live: true
+                }, "", url);
+            } else if (history === "replace") {
+                window.history.replaceState({
+                    __live: true
+                }, "", url);
+            }
+            // Run post-navigation
+            await postNavigate();
+            // Notify the backend so the multimodal agent knows the visitor navigated.
+            // Use window.location.href (not the original url) to capture the final URL after any redirects.
+            this.notifyPageNavigation(window.location.href);
+            // Scroll to top if requested
+            if (scroll === "top") {
+                window.scrollTo(0, 0);
+            }
+        } catch (unused) {
+            // If soft navigation fails, fall back to hard navigation
+            window.location.href = url;
+        }
+    }
+    /**
+   * Notify the backend that the visitor navigated to a new page.
+   * Deduplicates by comparing against the last notified URL.
+   */ notifyPageNavigation(url) {
+        const normalizedUrl = normalizeToBaseUrl(url);
+        // Skip if this URL was already reported
+        if (normalizedUrl === this.lastNotifiedUrl) return;
+        this.lastNotifiedUrl = normalizedUrl;
+        this.rootStore.channel.perform("notify_page_navigation", {
+            url: normalizedUrl
+        });
+    }
+    /**
+   * Resolve once the element's rect has been unchanged for ~500ms,
+   * or with the latest rect after `timeoutMs` so callers never hang.
+   *
+   * The polling timers are routed through `scheduleTimer` so `dispose()` /
+   * `clearAllTimers()` can cancel them. If the store is disposed before the
+   * watcher settles, no further DOM reads happen and the promise is left
+   * unresolved (matching `delay()`'s existing semantics) — the awaiting
+   * caller's continuation is dropped along with the rest of the store.
+   */ waitForStableRect(element, timeoutMs) {
+        if (timeoutMs === void 0) timeoutMs = SCROLL_STABILITY_TIMEOUT_MS;
+        return new Promise((resolve)=>{
+            const startTime = performance.now();
+            let stableCount = 0;
+            let prevRect = element.getBoundingClientRect();
+            const scheduleTick = ()=>{
+                const timerId = this.scheduleTimer(()=>{
+                    this.activeTimerIds.delete(timerId);
+                    tick();
+                }, RECT_STABILITY_POLL_INTERVAL_MS);
+            };
+            const tick = ()=>{
+                const newRect = element.getBoundingClientRect();
+                const isStable = newRect.top === prevRect.top && newRect.left === prevRect.left && newRect.right === prevRect.right && newRect.bottom === prevRect.bottom;
+                if (isStable) {
+                    stableCount += 1;
+                    if (stableCount >= RECT_STABILITY_REQUIRED_SAMPLES) {
+                        resolve(newRect);
+                        return;
+                    }
+                } else {
+                    // A single moving sample resets the streak so we only resolve on
+                    // truly consecutive stable frames (smooth scrolls can briefly
+                    // pause mid-motion and we don't want to call those "settled").
+                    stableCount = 0;
+                }
+                if (performance.now() - startTime >= timeoutMs) {
+                    // Timed out — fall through with the latest rect rather than hang
+                    // forever on a page that never stops animating.
+                    resolve(newRect);
+                    return;
+                }
+                prevRect = newRect;
+                scheduleTick();
+            };
+            scheduleTick();
+        });
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(rootStore){
+        this.rootStore = rootStore;
+        this.cursorPosition = signals_core_module_d({
+            x: 0,
+            y: 0,
+            visible: false
+        });
+        // Focal point (normalized [0,1] within the media element) the on-screen slide/video should zoom
+        // toward while the cursor points, or null for no zoom, plus the magnification to apply (chosen from
+        // the target box so a small target zooms in hard and a wide one stays gentle — see zoomScaleForBox).
+        // The media components read this and apply slideZoomStyle so the media zooms in place.
+        this.slideZoom = signals_core_module_d(null);
+        // Bounding box (viewport pixels) the cursor is tracing on the zoomed video, or null when not
+        // tracing. `reveal` is the fraction of the perimeter drawn so far and `transitionMs` how long to
+        // animate to it; the PointerRectOverlay draws the border in sync with the cursor's glide. See
+        // pointAtSlide -> traceRect.
+        this.pointerTrace = signals_core_module_d(null);
+        // Navigation interceptor for handling user-initiated link clicks
+        this.navigationInterceptor = new NavigationInterceptor(this.navigateSoftly.bind(this));
+        // Tracks the last URL sent to the backend to avoid duplicate notifications
+        this.lastNotifiedUrl = null;
+        // Order matters - first match wins. SPA-router strategies come before
+        // dom_swap since dom_swap is a brute-force fallback that re-executes the
+        // page's bootstrap scripts and breaks on frameworks that freeze globals.
+        this.navigationStrategies = [
+            wouter_v3,
+            lwr,
+            next_js,
+            // Always last as a fallback
+            dom_swap
+        ];
+        this.activeTimerIds = new Set();
+        /**
+   * Timers driving the *current* point/highlight/hide cursor gesture (a subset of
+   * `activeTimerIds`). Each new point gesture cancels these so a stale hide timer —
+   * whose callback captured the previous gesture's coordinates — can't jump the
+   * cursor back and hide it mid-gesture.
+   */ this.cursorSequenceTimerIds = new Set();
+    }
+}
+
+/**
+ * The rect of the actual displayed content inside an element that renders intrinsic media with
+ * `object-fit: contain` — accounting for letterbox bars when the element box and the content have
+ * different aspect ratios (e.g. a 16:9 video in a taller box). Falls back to the full element rect
+ * when the intrinsic size is unknown (metadata not loaded yet) or the element isn't a video/image,
+ * so a slide image that fills its box is unaffected.
+ */ function contentBox(el, rect) {
+    let intrinsicW = 0;
+    let intrinsicH = 0;
+    if (el instanceof HTMLVideoElement) {
+        intrinsicW = el.videoWidth;
+        intrinsicH = el.videoHeight;
+    } else if (el instanceof HTMLImageElement) {
+        intrinsicW = el.naturalWidth;
+        intrinsicH = el.naturalHeight;
+    }
+    if (intrinsicW < 1 || intrinsicH < 1) {
+        return {
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height
+        };
+    }
+    const scale = Math.min(rect.width / intrinsicW, rect.height / intrinsicH);
+    const width = intrinsicW * scale;
+    const height = intrinsicH * scale;
+    return {
+        left: rect.left + (rect.width - width) / 2,
+        top: rect.top + (rect.height - height) / 2,
+        width,
+        height
+    };
+}
+
+export { CURSOR_MOVE_DURATION_MS, RECT_TRACE_LEG_MS, SLIDE_ZOOM_HOLD_MS };
+export default WebsiteNavigationStore;