@syntrologie/adapt-overlays 2.15.0 → 2.17.0

package/dist/WorkflowWidget.js

@@ -1,330 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Workflow Widget - MountableWidget for the WorkflowTracker
- *
- * Bridges runtime.actions.getActive() (tour actions with workflow metadata),
- * runtime events (tour.started, tour.step_started, etc.), and the
- * WorkflowTracker presentational component.
- *
- * Responsibilities:
- * 1. Scan runtime.actions.getActive() for tours with `workflow` field
- * 2. Re-scan on tour.started events (tiles render before actions are applied)
- * 3. Load persisted state from runtime.state.user namespace
- * 4. Subscribe to tour.* events and update workflow entries
- * 5. Render WorkflowTracker with derived workflow entries
- * 6. Handle step clicks (publish workflow:jump_to_step)
- * 7. Handle dismiss (persist and re-render)
- */
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createRoot } from 'react-dom/client';
-import { WorkflowTracker } from './WorkflowTracker';
-// ============================================================================
-// Helpers
-// ============================================================================
-/**
- * Show a toast notification for a workflow tour.
- * Creates a DOM element, appends it to the container, and auto-removes after 4 seconds.
- */
-function showWorkflowToast(notification) {
-    const toast = document.createElement('div');
-    toast.setAttribute('data-testid', 'workflow-toast');
-    toast.className = 'se-fixed se-bottom-4 se-right-4 se-z-50';
-    Object.assign(toast.style, {
-        position: 'fixed',
-        bottom: '16px',
-        right: '16px',
-        zIndex: '2147483646',
-        padding: '12px 16px',
-        borderRadius: '8px',
-        backgroundColor: 'var(--se-color-bg-surface, #fff)',
-        color: 'var(--se-color-text-primary, #1a1a1a)',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-        maxWidth: '320px',
-        fontFamily: 'var(--se-font-family, system-ui, sans-serif)',
-        fontSize: '14px',
-        lineHeight: '1.4',
-        transition: 'opacity 0.3s ease',
-    });
-    const titleEl = document.createElement('div');
-    titleEl.className = 'se-font-semibold';
-    titleEl.style.fontWeight = '600';
-    titleEl.textContent = notification.title;
-    toast.appendChild(titleEl);
-    if (notification.body) {
-        const bodyEl = document.createElement('div');
-        bodyEl.className = 'se-mt-1 se-text-sm';
-        bodyEl.style.marginTop = '4px';
-        bodyEl.style.fontSize = '13px';
-        bodyEl.style.color = 'var(--se-color-text-secondary, #666)';
-        bodyEl.textContent = notification.body;
-        toast.appendChild(bodyEl);
-    }
-    // Append to document.body so the toast is visible at the viewport level
-    // (the container is inside shadow DOM, where position:fixed is scoped)
-    document.body.appendChild(toast);
-    // Auto-remove after 4 seconds
-    let removeTimer;
-    const fadeTimer = setTimeout(() => {
-        toast.style.opacity = '0';
-        removeTimer = setTimeout(() => {
-            toast.remove();
-        }, 300);
-    }, 4000);
-    // Return cleanup function for unmount safety
-    return () => {
-        clearTimeout(fadeTimer);
-        clearTimeout(removeTimer);
-        toast.remove();
-    };
-}
-/**
- * Extract workflow-enabled tours from active actions (runtime.actions.getActive()).
- * Only actions with kind 'overlays:tour', a tourId, and a workflow field are included.
- */
-function extractWorkflowsFromActive(activeActions) {
-    const workflows = new Map();
-    for (const entry of activeActions) {
-        const action = entry.action;
-        if (action.kind === 'overlays:tour' && action.workflow && action.tourId) {
-            const meta = action.workflow;
-            const rawSteps = action.steps || [];
-            const steps = rawSteps.map((s) => ({
-                id: s.id,
-                title: meta.stepTitles?.[s.id] || s.id,
-            }));
-            workflows.set(action.tourId, { meta, steps });
-        }
-    }
-    return workflows;
-}
-export function WorkflowWidgetInner({ runtime }) {
-    // Scan active actions for workflow-enabled tours.
-    // Re-scans when actionVersion bumps (triggered by tour.started events).
-    const [actionVersion, setActionVersion] = useState(0);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: actionVersion is an intentional cache-buster that triggers re-scan when tour.started events fire
-    const tourWorkflows = useMemo(() => {
-        const active = runtime?.actions?.getActive?.() || [];
-        return extractWorkflowsFromActive(active);
-    }, [runtime, actionVersion]);
-    // Keep a ref so event handlers always see the latest tourWorkflows
-    const tourWorkflowsRef = useRef(tourWorkflows);
-    tourWorkflowsRef.current = tourWorkflows;
-    // Re-scan active actions when a tour starts (handles tile-renders-before-actions timing)
-    useEffect(() => {
-        if (!runtime?.events?.subscribe)
-            return;
-        return runtime.events.subscribe({ names: ['tour.started', 'tour.resumed'] }, () => setActionVersion((v) => v + 1));
-    }, [runtime]);
-    // Load persisted state
-    const stateNs = useMemo(() => runtime?.state?.user?.ns?.('workflows'), [runtime]);
-    // Ref to track which tours have had a toast notification
-    const notifiedRef = useRef(new Set());
-    // Ref to track toast cleanup functions for unmount safety
-    const toastCleanupsRef = useRef([]);
-    // Ref to track the container element for toast rendering
-    const containerRef = useRef(null);
-    // Ref to track completed tour timestamps
-    const completedMapRef = useRef({});
-    // Build workflow entries from discovered tours + persisted state
-    const [workflowEntries, setWorkflowEntries] = useState([]);
-    // Initialize persisted state refs once
-    const persistInitialized = useRef(false);
-    if (!persistInitialized.current && stateNs) {
-        const notified = stateNs.get?.('notified') || [];
-        for (const id of notified) {
-            notifiedRef.current.add(id);
-        }
-        const completed = stateNs.get?.('completed') || {};
-        completedMapRef.current = { ...completed };
-        persistInitialized.current = true;
-    }
-    // Sync workflowEntries when tourWorkflows changes (new tours discovered via getActive)
-    useEffect(() => {
-        if (tourWorkflows.size === 0)
-            return;
-        const dismissed = stateNs?.get?.('dismissed') || [];
-        const completed = stateNs?.get?.('completed') || {};
-        setWorkflowEntries((prev) => {
-            const existingIds = new Set(prev.map((e) => e.tourId));
-            const newEntries = [];
-            for (const [tourId, { meta, steps }] of tourWorkflows) {
-                if (existingIds.has(tourId))
-                    continue; // Already tracked
-                let status = 'active';
-                if (dismissed.includes(tourId)) {
-                    status = 'dismissed';
-                }
-                else if (completed[tourId]) {
-                    status = 'completed';
-                }
-                newEntries.push({
-                    tourId,
-                    meta,
-                    steps,
-                    currentStepId: null,
-                    completedSteps: [],
-                    status,
-                    completedAt: completed[tourId] || undefined,
-                });
-            }
-            return newEntries.length > 0 ? [...prev, ...newEntries] : prev;
-        });
-        // Fire toast for newly discovered active tours.
-        // This handles the race condition where tour.started fires before the
-        // widget discovers the tour via getActive() re-scan.
-        for (const [tourId, { meta }] of tourWorkflows) {
-            if (!notifiedRef.current.has(tourId) &&
-                meta.notification &&
-                !dismissed.includes(tourId) &&
-                !completed[tourId]) {
-                notifiedRef.current.add(tourId);
-                stateNs?.set?.('notified', [...notifiedRef.current]);
-                const cleanup = showWorkflowToast(meta.notification);
-                toastCleanupsRef.current.push(cleanup);
-            }
-        }
-    }, [tourWorkflows, stateNs]);
-    // Subscribe to tour events
-    useEffect(() => {
-        if (!runtime?.events?.subscribe)
-            return;
-        const unsubscribe = runtime.events.subscribe({ patterns: ['^tour\\.'] }, (event) => {
-            const tourId = event.props?.tourId;
-            if (!tourId)
-                return;
-            // Re-scan active actions on tour.started (handles tile-renders-before-actions timing)
-            const currentWorkflows = tourWorkflowsRef.current;
-            if (!currentWorkflows.has(tourId) && event.name === 'tour.started') {
-                // Tour just became active — re-scan will pick it up on next render
-                setActionVersion((v) => v + 1);
-                return;
-            }
-            // Only process events for tours that have workflow metadata
-            if (!currentWorkflows.has(tourId))
-                return;
-            setWorkflowEntries((prev) => {
-                const updated = prev.map((entry) => {
-                    if (entry.tourId !== tourId)
-                        return entry;
-                    switch (event.name) {
-                        case 'tour.started': {
-                            const startStepId = event.props?.startStepId || entry.steps[0]?.id || null;
-                            // Fire toast notification if not already notified
-                            if (!notifiedRef.current.has(tourId)) {
-                                notifiedRef.current.add(tourId);
-                                stateNs?.set?.('notified', [...notifiedRef.current]);
-                                const workflow = currentWorkflows.get(tourId);
-                                if (workflow?.meta.notification) {
-                                    const cleanup = showWorkflowToast(workflow.meta.notification);
-                                    toastCleanupsRef.current.push(cleanup);
-                                }
-                            }
-                            // Persist active state
-                            const activeIds = prev
-                                .filter((e) => e.status === 'active' || e.tourId === tourId)
-                                .map((e) => e.tourId);
-                            if (!activeIds.includes(tourId)) {
-                                activeIds.push(tourId);
-                            }
-                            stateNs?.set?.('active', [...new Set(activeIds)]);
-                            return {
-                                ...entry,
-                                status: 'active',
-                                currentStepId: startStepId,
-                                completedSteps: entry.status === 'active' ? entry.completedSteps : [],
-                            };
-                        }
-                        case 'tour.step_started': {
-                            const stepId = event.props?.stepId;
-                            return {
-                                ...entry,
-                                currentStepId: stepId || entry.currentStepId,
-                            };
-                        }
-                        case 'tour.step_changed': {
-                            const previousStepId = event.props?.previousStepId;
-                            const nextStepId = event.props?.nextStepId;
-                            const completedSteps = previousStepId && !entry.completedSteps.includes(previousStepId)
-                                ? [...entry.completedSteps, previousStepId]
-                                : entry.completedSteps;
-                            return {
-                                ...entry,
-                                currentStepId: nextStepId || entry.currentStepId,
-                                completedSteps,
-                            };
-                        }
-                        case 'tour.completed': {
-                            const completedAt = Date.now();
-                            // Persist completed state with timestamp
-                            completedMapRef.current[tourId] = completedAt;
-                            stateNs?.set?.('completed', { ...completedMapRef.current });
-                            return {
-                                ...entry,
-                                status: 'completed',
-                                currentStepId: null,
-                                completedSteps: entry.steps.map((s) => s.id),
-                                completedAt,
-                            };
-                        }
-                        case 'tour.paused': {
-                            // Keep current state, just note it was paused
-                            return entry;
-                        }
-                        default:
-                            return entry;
-                    }
-                });
-                return updated;
-            });
-        });
-        return () => {
-            unsubscribe();
-            // Clean up any pending toast timers
-            for (const cleanup of toastCleanupsRef.current) {
-                cleanup();
-            }
-            toastCleanupsRef.current = [];
-        };
-    }, [runtime, stateNs]);
-    // Handle step click — publish jump event
-    const handleStepClick = useCallback((tourId, stepId) => {
-        runtime?.events?.publish?.('workflow:jump_to_step', { tourId, stepId });
-    }, [runtime]);
-    // Handle dismiss
-    const handleDismiss = useCallback((tourId) => {
-        setWorkflowEntries((prev) => {
-            const updated = prev.map((entry) => entry.tourId === tourId ? { ...entry, status: 'dismissed' } : entry);
-            // Persist dismissed state
-            const dismissedIds = updated.filter((e) => e.status === 'dismissed').map((e) => e.tourId);
-            stateNs?.set?.('dismissed', dismissedIds);
-            return updated;
-        });
-    }, [stateNs]);
-    // Filter to active workflows only for rendering
-    const activeWorkflows = useMemo(() => workflowEntries.filter((w) => w.status === 'active'), [workflowEntries]);
-    return (_jsx("div", { ref: containerRef, children: _jsx(WorkflowTracker, { workflows: activeWorkflows, onStepClick: handleStepClick, onDismiss: handleDismiss }) }));
-}
-// ============================================================================
-// MountableWidget Interface
-// ============================================================================
-/**
- * Mountable widget interface for the runtime's WidgetRegistry.
- *
- * Follows the MountableWidget contract:
- *   mount(container, config?) -> cleanup | void
- *
- * Config is enriched with `runtime` by WidgetRegistry.bindRuntime().
- */
-export const WorkflowMountableWidget = {
-    mount(container, config) {
-        const runtime = config?.runtime || null;
-        const root = createRoot(container);
-        root.render(React.createElement(WorkflowWidgetInner, {
-            runtime,
-        }));
-        // Return cleanup function
-        return () => {
-            root.unmount();
-        };
-    },
-};