@syntrologie/adapt-overlays 2.16.0 → 2.17.0

package/dist/executors/tour.js

@@ -1,335 +0,0 @@
-/**
- * Tour Executor
- *
- * Orchestrates sequential tour steps with cross-page state persistence.
- * Tours can span multiple pages and resume after navigation.
- *
- * Each step contains an inner action (modal, tooltip) that gets executed.
- * The tour listens for CTA click events to advance to the next step.
- */
-/** Storage key for active tour state */
-const ACTIVE_TOUR_KEY = 'syntro_active_tour';
-/** Track active tour executors to prevent duplicates */
-const activeTours = new Map();
-/**
- * Get active tour state from localStorage
- */
-function getTourState(tourId) {
-    try {
-        const data = localStorage.getItem(ACTIVE_TOUR_KEY);
-        if (!data)
-            return null;
-        const state = JSON.parse(data);
-        // Only return if it matches the requested tour
-        if (state.tourId !== tourId)
-            return null;
-        return state;
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Save tour state to localStorage
- */
-function saveTourState(state) {
-    try {
-        localStorage.setItem(ACTIVE_TOUR_KEY, JSON.stringify(state));
-    }
-    catch {
-        // Storage may be full or unavailable
-    }
-}
-/**
- * Clear tour state from localStorage
- */
-function clearTourState() {
-    try {
-        localStorage.removeItem(ACTIVE_TOUR_KEY);
-    }
-    catch {
-        // Ignore errors
-    }
-}
-/**
- * Get current route/path
- */
-function getCurrentRoute() {
-    return window.location.pathname;
-}
-/**
- * Check if a step matches the current route
- */
-function stepMatchesRoute(step) {
-    if (!step.route)
-        return true;
-    const currentRoute = getCurrentRoute();
-    // Simple pattern matching - step.route can be exact path or glob pattern
-    if (step.route.includes('*')) {
-        const pattern = new RegExp(`^${step.route.replace(/\*/g, '.*')}$`);
-        return pattern.test(currentRoute);
-    }
-    return currentRoute === step.route;
-}
-/**
- * Execute a tour action
- *
- * Tours orchestrate a sequence of steps, persisting state to localStorage
- * to support cross-page navigation. Each step contains an action to execute
- * and optionally defines transitions based on action events.
- */
-export const executeTour = async (action, context) => {
-    const { tourId, steps, startStep, autoStart = true } = action;
-    if (steps.length === 0) {
-        throw new Error(`Tour "${tourId}" has no steps`);
-    }
-    // Self-guard: if this tour is already running, return no-op
-    // This prevents duplicate modals when applyBatch is called multiple times
-    if (activeTours.has(tourId)) {
-        return {
-            cleanup: async () => {
-                // Delegate to the original tour's cleanup
-                const existing = activeTours.get(tourId);
-                if (existing) {
-                    await existing.cleanup();
-                }
-            },
-        };
-    }
-    // Check if we can execute inner actions
-    if (!context.applyAction) {
-        throw new Error('Tour executor requires applyAction in context');
-    }
-    // Get or initialize tour state
-    let state = getTourState(tourId);
-    const isResumingTour = !!state;
-    // If not resuming and autoStart is false, don't start the tour
-    if (!isResumingTour && !autoStart) {
-        return {
-            cleanup: () => { },
-        };
-    }
-    if (!state) {
-        state = {
-            tourId,
-            currentStepId: startStep || steps[0].id,
-            startedAt: Date.now(),
-        };
-        saveTourState(state);
-    }
-    // Find the current step
-    let currentStepIndex = steps.findIndex((s) => s.id === state.currentStepId);
-    if (currentStepIndex === -1) {
-        // Step not found, use startStep or first step
-        const initialStepId = startStep || steps[0].id;
-        currentStepIndex = steps.findIndex((s) => s.id === initialStepId);
-        if (currentStepIndex === -1)
-            currentStepIndex = 0;
-        state.currentStepId = steps[currentStepIndex].id;
-        saveTourState(state);
-    }
-    const currentStep = steps[currentStepIndex];
-    // Check if current step matches the route
-    if (!stepMatchesRoute(currentStep)) {
-        // Current page doesn't match this step's route
-        // Tour is "waiting" for navigation to the correct page
-        context.publishEvent('tour.waiting_for_route', {
-            tourId,
-            stepId: currentStep.id,
-            expectedRoute: currentStep.route,
-            currentRoute: getCurrentRoute(),
-        });
-        // Return a no-op that cleans up when tour ends
-        return {
-            cleanup: () => { },
-        };
-    }
-    // Track state
-    let isDestroyed = false;
-    let currentActionHandle = null;
-    let eventUnsubscribe = null;
-    let routeWatcher = null;
-    /**
-     * Clean up current step
-     */
-    const cleanupCurrentStep = async () => {
-        if (eventUnsubscribe) {
-            eventUnsubscribe();
-            eventUnsubscribe = null;
-        }
-        if (currentActionHandle?.isApplied()) {
-            await currentActionHandle.revert();
-            currentActionHandle = null;
-        }
-    };
-    /**
-     * Advance to the next step
-     */
-    const advanceToStep = async (nextStepId) => {
-        if (isDestroyed)
-            return;
-        // Clean up current step
-        await cleanupCurrentStep();
-        if (nextStepId === 'end') {
-            // Tour complete
-            clearTourState();
-            context.publishEvent('tour.completed', {
-                tourId,
-                totalSteps: steps.length,
-            });
-            isDestroyed = true;
-            return;
-        }
-        // Find next step
-        const nextStep = steps.find((s) => s.id === nextStepId);
-        if (!nextStep) {
-            console.error(`[Tour] Step "${nextStepId}" not found`);
-            return;
-        }
-        // Update state
-        state.currentStepId = nextStepId;
-        saveTourState(state);
-        context.publishEvent('tour.step_changed', {
-            tourId,
-            previousStepId: currentStep.id,
-            nextStepId,
-        });
-        // If the next step has a different route, let navigation happen
-        if (nextStep.route && nextStep.route !== getCurrentRoute()) {
-            context.publishEvent('tour.awaiting_navigation', {
-                tourId,
-                stepId: nextStepId,
-                targetRoute: nextStep.route,
-            });
-            // Tour will resume when page reloads and this executor runs again
-            return;
-        }
-        // Execute the next step's action
-        await executeStep(nextStep);
-    };
-    /**
-     * Execute a step's inner action and set up event listeners
-     */
-    const executeStep = async (step) => {
-        if (isDestroyed)
-            return;
-        context.publishEvent('tour.step_started', {
-            tourId,
-            stepId: step.id,
-            stepIndex: steps.findIndex((s) => s.id === step.id),
-            totalSteps: steps.length,
-        });
-        // Execute the inner action
-        try {
-            currentActionHandle = await context.applyAction(step.action);
-        }
-        catch (error) {
-            console.error(`[Tour] Failed to execute step "${step.id}":`, error);
-            context.publishEvent('tour.step_failed', {
-                tourId,
-                stepId: step.id,
-                error: String(error),
-            });
-            return;
-        }
-        // Subscribe to CTA click events if there are transitions defined
-        if (step.onAction && context.subscribeEvent) {
-            eventUnsubscribe = context.subscribeEvent('action.modal_cta_clicked', (props) => {
-                const actionId = props?.actionId;
-                if (actionId && step.onAction) {
-                    const nextStepId = step.onAction[actionId];
-                    if (nextStepId) {
-                        advanceToStep(nextStepId);
-                    }
-                }
-            });
-            // Also listen for tooltip CTA clicks
-            const tooltipUnsubscribe = context.subscribeEvent('action.tooltip_cta_clicked', (props) => {
-                const actionId = props?.actionId;
-                if (actionId && step.onAction) {
-                    const nextStepId = step.onAction[actionId];
-                    if (nextStepId) {
-                        advanceToStep(nextStepId);
-                    }
-                }
-            });
-            // Combine unsubscribes
-            const originalUnsubscribe = eventUnsubscribe;
-            eventUnsubscribe = () => {
-                originalUnsubscribe();
-                tooltipUnsubscribe();
-            };
-        }
-    };
-    // Set up route change watcher for SPAs
-    const setupRouteWatcher = () => {
-        let lastPath = getCurrentRoute();
-        const checkRoute = () => {
-            const currentPath = getCurrentRoute();
-            if (currentPath !== lastPath) {
-                lastPath = currentPath;
-                context.publishEvent('tour.route_changed', {
-                    tourId,
-                    newRoute: currentPath,
-                });
-            }
-        };
-        // Use NavigationMonitor if available (single patch point),
-        // otherwise fall back to direct History API patching (legacy)
-        if (context.subscribeNavigation) {
-            return context.subscribeNavigation(() => checkRoute());
-        }
-        // Legacy: direct History API patching
-        window.addEventListener('popstate', checkRoute);
-        const origPushState = history.pushState.bind(history);
-        const origReplaceState = history.replaceState.bind(history);
-        history.pushState = (...args) => {
-            origPushState(...args);
-            queueMicrotask(checkRoute);
-        };
-        history.replaceState = (...args) => {
-            origReplaceState(...args);
-            queueMicrotask(checkRoute);
-        };
-        return () => {
-            window.removeEventListener('popstate', checkRoute);
-            history.pushState = origPushState;
-            history.replaceState = origReplaceState;
-        };
-    };
-    routeWatcher = setupRouteWatcher();
-    // Publish tour started/resumed event
-    if (!isResumingTour) {
-        context.publishEvent('tour.started', {
-            tourId,
-            totalSteps: steps.length,
-            startStepId: state.currentStepId,
-        });
-    }
-    else {
-        context.publishEvent('tour.resumed', {
-            tourId,
-            stepId: state.currentStepId,
-        });
-    }
-    // Execute the current step
-    await executeStep(currentStep);
-    // Create cleanup function
-    const cleanup = async () => {
-        isDestroyed = true;
-        // Remove from active tours
-        activeTours.delete(tourId);
-        await cleanupCurrentStep();
-        if (routeWatcher) {
-            routeWatcher();
-        }
-        // Don't clear tour state on cleanup - allow resume
-        context.publishEvent('tour.paused', {
-            tourId,
-            stepId: state.currentStepId,
-        });
-    };
-    // Register this tour as active
-    activeTours.set(tourId, { cleanup });
-    return { cleanup };
-};

package/dist/highlight.js

@@ -1,180 +0,0 @@
-/**
- * Highlight Overlay
- *
- * Creates a spotlight effect around an element with a scrim backdrop.
- */
-import { blue } from '@syntro/design-system/tokens';
-const supportsPathClip = typeof CSS !== 'undefined' && CSS.supports?.('clip-path', "path('M0 0 H1 V1 Z')");
-export function showHighlight(anchorEl, overlayRoot, opts) {
-    const padding = opts?.paddingPx ?? 12;
-    const radius = opts?.radiusPx ?? 12;
-    const opacity = Math.min(Math.max(opts?.scrimOpacity ?? 0.55, 0), 1);
-    const ringColor = opts?.ringColor ?? `var(--syntro-ring, ${blue[5]})`;
-    const blocking = opts?.blocking ?? false;
-    const onClickOutside = opts?.onClickOutside ?? true;
-    const onEsc = opts?.onEsc ?? true;
-    const rootStyles = getComputedStyle(document.documentElement);
-    const tokenScrim = rootStyles.getPropertyValue('--syntro-spotlight-backdrop').trim();
-    const tokenRing = rootStyles.getPropertyValue('--syntro-ring').trim();
-    const scrim = document.createElement('div');
-    scrim.className = 'syntro-spotlight-scrim';
-    const needsPointerEvents = blocking || onClickOutside;
-    Object.assign(scrim.style, {
-        position: 'fixed',
-        inset: '0',
-        zIndex: '2147483646',
-        pointerEvents: needsPointerEvents ? 'auto' : 'none',
-        background: tokenScrim || `rgba(2, 6, 23, ${opacity})`,
-        transition: 'opacity 220ms ease',
-        opacity: '0',
-    });
-    overlayRoot.appendChild(scrim);
-    requestAnimationFrame(() => (scrim.style.opacity = '1'));
-    const ring = document.createElement('div');
-    ring.className = 'syntro-spotlight-ring';
-    Object.assign(ring.style, {
-        position: 'fixed',
-        pointerEvents: 'none',
-        borderRadius: `${radius}px`,
-        border: `2px solid ${ringColor || tokenRing || blue[5]}`,
-        boxShadow: `0 0 0 4px rgba(255,255,255,0.35)`,
-        zIndex: '2147483647',
-        transition: 'all 220ms cubic-bezier(0.16,1,0.3,1)',
-    });
-    overlayRoot.appendChild(ring);
-    const fallbackSlices = [];
-    if (!supportsPathClip) {
-        for (let i = 0; i < 4; i++) {
-            const slice = document.createElement('div');
-            slice.style.position = 'fixed';
-            slice.style.background = 'inherit';
-            fallbackSlices.push(slice);
-            scrim.appendChild(slice);
-        }
-    }
-    const setClipPath = (path) => {
-        scrim.style.clipPath = path;
-        scrim.style.webkitClipPath = path;
-    };
-    const update = () => {
-        // Guard: if anchor was removed from DOM (e.g. React Router navigation),
-        // destroy the overlay gracefully instead of positioning at (0,0).
-        if (!anchorEl.isConnected) {
-            handle.destroy();
-            return;
-        }
-        const rect = anchorEl.getBoundingClientRect();
-        // Use unclamped coordinates so the ring and clip-path track the anchor's
-        // true position. When the anchor is partially off-screen the browser
-        // naturally clips the fixed-position ring at the viewport edge.
-        const x = rect.left - padding;
-        const y = rect.top - padding;
-        const w = rect.width + padding * 2;
-        const h = rect.height + padding * 2;
-        Object.assign(ring.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-            width: `${w}px`,
-            height: `${h}px`,
-        });
-        if (supportsPathClip) {
-            const vw = window.innerWidth;
-            const vh = window.innerHeight;
-            const r = Math.min(radius, w / 2, h / 2);
-            const outer = `M 0 0 L ${vw} 0 L ${vw} ${vh} L 0 ${vh} Z`;
-            const inner = `M ${x + r} ${y} ` +
-                `A ${r} ${r} 0 0 0 ${x} ${y + r} ` +
-                `L ${x} ${y + h - r} ` +
-                `A ${r} ${r} 0 0 0 ${x + r} ${y + h} ` +
-                `L ${x + w - r} ${y + h} ` +
-                `A ${r} ${r} 0 0 0 ${x + w} ${y + h - r} ` +
-                `L ${x + w} ${y + r} ` +
-                `A ${r} ${r} 0 0 0 ${x + w - r} ${y} ` +
-                `L ${x + r} ${y} ` +
-                `Z`;
-            setClipPath(`path('${outer} ${inner}')`);
-        }
-        else {
-            const [top, right, bottom, left] = fallbackSlices;
-            Object.assign(top.style, {
-                left: '0px',
-                top: '0px',
-                width: '100vw',
-                height: `${y}px`,
-            });
-            Object.assign(bottom.style, {
-                left: '0px',
-                top: `${y + h}px`,
-                width: '100vw',
-                height: `${Math.max(0, window.innerHeight - (y + h))}px`,
-            });
-            Object.assign(left.style, {
-                left: '0px',
-                top: `${y}px`,
-                width: `${x}px`,
-                height: `${h}px`,
-            });
-            Object.assign(right.style, {
-                left: `${x + w}px`,
-                top: `${y}px`,
-                width: `${Math.max(0, window.innerWidth - (x + w))}px`,
-                height: `${h}px`,
-            });
-        }
-    };
-    const ro = new ResizeObserver(() => requestAnimationFrame(update));
-    ro.observe(anchorEl);
-    const onScroll = () => requestAnimationFrame(update);
-    const onResize = () => requestAnimationFrame(update);
-    window.addEventListener('scroll', onScroll, true);
-    window.addEventListener('resize', onResize);
-    const onKey = (e) => {
-        if (e.key === 'Escape' && onEsc) {
-            opts?.onDismiss?.();
-            handle.destroy();
-        }
-    };
-    if (onEsc) {
-        window.addEventListener('keydown', onKey);
-    }
-    const onClick = (event) => {
-        if (blocking) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        else if (onClickOutside) {
-            opts?.onDismiss?.();
-            handle.destroy();
-        }
-    };
-    scrim.addEventListener('click', onClick);
-    const handle = {
-        destroy() {
-            ro.disconnect();
-            window.removeEventListener('scroll', onScroll, true);
-            window.removeEventListener('resize', onResize);
-            if (onEsc) {
-                window.removeEventListener('keydown', onKey);
-            }
-            scrim.removeEventListener('click', onClick);
-            scrim.style.pointerEvents = 'none';
-            scrim.style.opacity = '0';
-            setTimeout(() => {
-                try {
-                    scrim.remove();
-                }
-                catch {
-                    /* already detached */
-                }
-                try {
-                    ring.remove();
-                }
-                catch {
-                    /* already detached */
-                }
-            }, 220);
-        },
-    };
-    update();
-    return handle;
-}