@syntrologie/adapt-overlays 2.4.1 → 2.5.1

package/dist/runtime.js

@@ -1,14 +1,17 @@
 /**
  * Adaptive Overlays - Runtime Module
  *
- * Visual overlay actions: highlight, pulse, badge, tooltip.
+ * Visual overlay actions: highlight, pulse, badge, tooltip, celebrations.
  */
+import { executeCelebrate } from './celebrations';
+import { executeTour } from './executors/tour';
 import { showHighlight } from './highlight';
 import { executeModal } from './modal';
 import { sanitizeHtml } from './sanitizer';
 import { showTooltip } from './tooltip';
-// Re-export executeModal for use by other packages
-export { executeModal };
+import { WorkflowMountableWidget } from './WorkflowWidget';
+// Re-export executeModal and executeTour for use by other packages
+export { executeModal, executeTour };
 // ============================================================================
 // Executors
 // ============================================================================
@@ -16,15 +19,41 @@ export { executeModal };
  * Execute a highlight action
  */
 export const executeHighlight = async (action, context) => {
-    const anchorEl = context.resolveAnchor(action.anchorId);
+    let anchorEl = context.resolveAnchor(action.anchorId);
+    if (!anchorEl && context.waitForAnchor) {
+        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+    }
     if (!anchorEl) {
-        throw new Error(`Anchor not found: ${action.anchorId}`);
+        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+        return { cleanup: () => { } };
+    }
+    // Self-guard: destroy any existing highlight on this anchor to prevent duplicates
+    // (batch re-apply on navigation can call this executor multiple times for the same anchor)
+    const existing = anchorEl.getAttribute('data-syntro-highlight');
+    if (existing) {
+        const prev = context.overlayRoot.querySelectorAll('.syntro-spotlight-scrim, .syntro-spotlight-ring');
+        prev.forEach((el) => el.remove());
+    }
+    anchorEl.setAttribute('data-syntro-highlight', 'true');
+    // Resolve ring color: action override → theme primary → host page var → fallback
+    let ringColor = action.style?.color;
+    if (!ringColor) {
+        try {
+            const primary = getComputedStyle(context.overlayRoot)
+                .getPropertyValue('--sc-color-primary')
+                ?.trim();
+            if (primary)
+                ringColor = primary;
+        }
+        catch {
+            /* fallback to showHighlight default */
+        }
     }
     const handle = showHighlight(anchorEl, context.overlayRoot, {
         paddingPx: action.style?.paddingPx ?? 12,
         radiusPx: action.style?.radiusPx ?? 12,
         scrimOpacity: action.style?.scrimOpacity ?? 0.55,
-        ringColor: action.style?.color,
+        ringColor,
         blocking: action.blocking ?? false,
         onClickOutside: action.onClickOutside ?? true,
         onEsc: action.onEsc ?? true,
@@ -37,6 +66,7 @@ export const executeHighlight = async (action, context) => {
     return {
         cleanup: () => {
             handle.destroy();
+            anchorEl.removeAttribute('data-syntro-highlight');
         },
     };
 };
@@ -44,30 +74,83 @@ export const executeHighlight = async (action, context) => {
  * Execute a pulse action
  */
 export const executePulse = async (action, context) => {
-    const anchorEl = context.resolveAnchor(action.anchorId);
+    let anchorEl = context.resolveAnchor(action.anchorId);
+    if (!anchorEl && context.waitForAnchor) {
+        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+    }
     if (!anchorEl) {
-        throw new Error(`Anchor not found: ${action.anchorId}`);
+        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+        return { cleanup: () => { } };
+    }
+    const duration = action.duration ?? 4000;
+    // Wait one frame so ThemeProvider's useEffect has injected CSS vars
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    // Read primary + secondary colors from theme (shadow DOM overlay root has --sc-* vars)
+    const parseHex = (hex) => ({
+        r: parseInt(hex.slice(1, 3), 16),
+        g: parseInt(hex.slice(3, 5), 16),
+        b: parseInt(hex.slice(5, 7), 16),
+    });
+    const fallback = { r: 79, g: 70, b: 229 }; // indigo-600
+    let primary = fallback;
+    let secondary = null;
+    try {
+        const styles = getComputedStyle(context.overlayRoot);
+        const pHex = styles.getPropertyValue('--sc-color-primary')?.trim();
+        const sHex = styles.getPropertyValue('--sc-color-primary-hover')?.trim();
+        if (pHex?.startsWith('#') && pHex.length >= 7) {
+            primary = parseHex(pHex);
+        }
+        if (sHex?.startsWith('#') && sHex.length >= 7) {
+            secondary = parseHex(sHex);
+        }
+    }
+    catch {
+        /* fallback to default */
+    }
+    // Inject/update pulse animation with theme colors
+    // Two-tone pulse when both primary and secondary are available
+    const existing = document.querySelector('[data-syntro-pulse-styles]');
+    if (existing)
+        existing.remove();
+    const style = document.createElement('style');
+    style.setAttribute('data-syntro-pulse-styles', '');
+    const { r: pr, g: pg, b: pb } = primary;
+    if (secondary) {
+        const { r: sr, g: sg, b: sb } = secondary;
+        style.textContent = `
+      @keyframes syntro-pulse-anim {
+        0%, 100% {
+          box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
+        }
+        25% {
+          box-shadow: 0 0 0 12px rgba(${pr}, ${pg}, ${pb}, 0);
+        }
+        50% {
+          box-shadow: 0 0 0 0 rgba(${sr}, ${sg}, ${sb}, 0.35);
+        }
+        75% {
+          box-shadow: 0 0 0 12px rgba(${sr}, ${sg}, ${sb}, 0);
+        }
+      }
+    `;
     }
-    const duration = action.duration ?? 2000;
-    // Inject scoped pulse animation (no global styles)
-    if (!document.querySelector('[data-syntro-pulse-styles]')) {
-        const style = document.createElement('style');
-        style.setAttribute('data-syntro-pulse-styles', '');
+    else {
         style.textContent = `
       @keyframes syntro-pulse-anim {
         0%, 100% {
-          box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
+          box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
         }
         50% {
-          box-shadow: 0 0 0 8px rgba(79, 70, 229, 0);
+          box-shadow: 0 0 0 12px rgba(${pr}, ${pg}, ${pb}, 0);
         }
       }
     `;
-        document.head.appendChild(style);
     }
+    document.head.appendChild(style);
     // Apply pulse animation via inline style (scoped to this element)
     const originalAnimation = anchorEl.style.animation;
-    anchorEl.style.animation = 'syntro-pulse-anim 1s cubic-bezier(0.4, 0, 0.6, 1) infinite';
+    anchorEl.style.animation = 'syntro-pulse-anim 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite';
     anchorEl.setAttribute('data-syntro-pulse', 'true');
     // Set up auto-remove timeout
     const timeoutId = setTimeout(() => {
@@ -92,14 +175,31 @@ export const executePulse = async (action, context) => {
  * Execute a badge action
  */
 export const executeBadge = async (action, context) => {
-    const anchorEl = context.resolveAnchor(action.anchorId);
+    let anchorEl = context.resolveAnchor(action.anchorId);
+    if (!anchorEl && context.waitForAnchor) {
+        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+    }
     if (!anchorEl) {
-        throw new Error(`Anchor not found: ${action.anchorId}`);
+        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+        return { cleanup: () => { } };
+    }
+    // Read primary color from theme (overlay root has --sc-* vars from shadow DOM)
+    let badgeColor = '#4f46e5';
+    try {
+        const primary = getComputedStyle(context.overlayRoot)
+            .getPropertyValue('--sc-color-primary')
+            ?.trim();
+        if (primary?.startsWith('#') && primary.length >= 7) {
+            badgeColor = primary;
+        }
+    }
+    catch {
+        /* fallback to default */
     }
     // Create badge element with inline styles (no global style injection)
     const badge = document.createElement('div');
     badge.textContent = action.content;
-    badge.setAttribute('data-syntro-badge', action.anchorId);
+    badge.setAttribute('data-syntro-badge', action.anchorId.selector);
     // Apply styles directly to element
     Object.assign(badge.style, {
         position: 'absolute',
@@ -108,7 +208,7 @@ export const executeBadge = async (action, context) => {
         fontWeight: '600',
         lineHeight: '1',
         color: 'white',
-        background: 'var(--syntro-accent, #4f46e5)',
+        background: badgeColor,
         borderRadius: '9999px',
         pointerEvents: 'none',
         zIndex: '2147483646',
@@ -163,9 +263,13 @@ export const executeBadge = async (action, context) => {
  * Execute a tooltip action
  */
 export const executeTooltip = async (action, context) => {
-    const anchorEl = context.resolveAnchor(action.anchorId);
+    let anchorEl = context.resolveAnchor(action.anchorId);
+    if (!anchorEl && context.waitForAnchor) {
+        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+    }
     if (!anchorEl) {
-        throw new Error(`Anchor not found: ${action.anchorId}`);
+        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+        return { cleanup: () => { } };
     }
     // Build tooltip HTML
     const { content } = action;
@@ -252,6 +356,8 @@ export const executors = [
     { kind: 'overlays:badge', executor: executeBadge },
     { kind: 'overlays:tooltip', executor: executeTooltip },
     { kind: 'overlays:modal', executor: executeModal },
+    { kind: 'core:tour', executor: executeTour },
+    { kind: 'overlays:celebrate', executor: executeCelebrate },
 ];
 /**
  * App runtime manifest.
@@ -260,6 +366,17 @@ export const runtime = {
     id: 'adaptive-overlays',
     version: '1.0.0',
     name: 'Overlays',
-    description: 'Tooltips, highlights, badges, modals, and visual overlays',
+    description: 'Tooltips, highlights, badges, modals, celebrations, visual overlays, and workflow tracking',
     executors,
+    widgets: [
+        {
+            id: 'adaptive-overlays:workflow-tracker',
+            component: WorkflowMountableWidget,
+            metadata: {
+                name: 'Workflow Tracker',
+                icon: '📋',
+                description: 'Tracks multi-step workflow progress across tours',
+            },
+        },
+    ],
 };