@syntrologie/adapt-overlays 2.16.0 → 2.18.0

package/dist/runtime-lit.js

@@ -1,402 +0,0 @@
-/**
- * Adaptive Overlays - Runtime Module (Lit)
- *
- * Visual overlay actions: highlight, pulse, badge, tooltip, celebrations.
- * Uses the Lit web component mountable instead of the React one.
- */
-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';
-import { WorkflowWidgetLitMountable } from './WorkflowWidgetLit';
-// Re-export executeModal and executeTour for use by other packages
-export { executeModal, executeTour };
-// ============================================================================
-// Executors
-// ============================================================================
-/**
- * Execute a highlight action
- */
-export const executeHighlight = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
-    }
-    if (!anchorEl) {
-        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
-    }
-    // Skip re-application if the user previously dismissed this highlight.
-    // The dismissed attribute is set by onDismiss (user click-outside / Esc)
-    // and survives config-driven revert+reapply cycles.
-    if (anchorEl.getAttribute('data-syntro-highlight-dismissed')) {
-        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,
-        blocking: action.blocking ?? false,
-        onClickOutside: action.onClickOutside ?? true,
-        onEsc: action.onEsc ?? true,
-        onDismiss: () => {
-            anchorEl.setAttribute('data-syntro-highlight-dismissed', 'true');
-        },
-    });
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'overlays:highlight',
-        anchorId: action.anchorId,
-    });
-    return {
-        cleanup: () => {
-            handle.destroy();
-            anchorEl.removeAttribute('data-syntro-highlight');
-            anchorEl.removeAttribute('data-syntro-highlight-dismissed');
-        },
-    };
-};
-/**
- * Execute a pulse action
- */
-export const executePulse = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
-    }
-    if (!anchorEl) {
-        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);
-        }
-      }
-    `;
-    }
-    else {
-        style.textContent = `
-      @keyframes syntro-pulse-anim {
-        0%, 100% {
-          box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
-        }
-        50% {
-          box-shadow: 0 0 0 12px rgba(${pr}, ${pg}, ${pb}, 0);
-        }
-      }
-    `;
-    }
-    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 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(() => {
-        anchorEl.style.animation = originalAnimation;
-        anchorEl.removeAttribute('data-syntro-pulse');
-    }, duration);
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'overlays:pulse',
-        anchorId: action.anchorId,
-        duration,
-    });
-    return {
-        cleanup: () => {
-            clearTimeout(timeoutId);
-            if (!anchorEl.isConnected)
-                return;
-            anchorEl.style.animation = originalAnimation;
-            anchorEl.removeAttribute('data-syntro-pulse');
-        },
-    };
-};
-/**
- * Execute a badge action
- */
-export const executeBadge = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
-    }
-    if (!anchorEl) {
-        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.selector);
-    // Apply styles directly to element
-    Object.assign(badge.style, {
-        position: 'absolute',
-        padding: '2px 6px',
-        fontSize: '12px',
-        fontWeight: '600',
-        lineHeight: '1',
-        color: 'white',
-        background: badgeColor,
-        borderRadius: '9999px',
-        pointerEvents: 'none',
-        zIndex: '2147483646',
-        whiteSpace: 'nowrap',
-    });
-    // Position badge relative to anchor
-    const position = action.position ?? 'top-right';
-    // Ensure anchor has relative positioning for badge
-    const originalPosition = anchorEl.style.position;
-    if (getComputedStyle(anchorEl).position === 'static') {
-        anchorEl.style.position = 'relative';
-    }
-    // Append to anchor for relative positioning
-    anchorEl.appendChild(badge);
-    // Position based on config
-    switch (position) {
-        case 'top-left':
-            Object.assign(badge.style, { top: '-8px', left: '-8px' });
-            break;
-        case 'top-right':
-            Object.assign(badge.style, { top: '-8px', right: '-8px' });
-            break;
-        case 'bottom-left':
-            Object.assign(badge.style, { bottom: '-8px', left: '-8px' });
-            break;
-        case 'bottom-right':
-            Object.assign(badge.style, { bottom: '-8px', right: '-8px' });
-            break;
-    }
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'overlays:badge',
-        anchorId: action.anchorId,
-        content: action.content,
-        position,
-    });
-    return {
-        cleanup: () => {
-            try {
-                badge.remove();
-            }
-            catch {
-                /* already detached */
-            }
-            if (!anchorEl.isConnected)
-                return;
-            if (originalPosition !== undefined) {
-                anchorEl.style.position = originalPosition;
-            }
-        },
-        updateFn: (changes) => {
-            if ('content' in changes && typeof changes.content === 'string') {
-                badge.textContent = changes.content;
-            }
-        },
-    };
-};
-/**
- * Execute a tooltip action
- */
-export const executeTooltip = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
-    }
-    if (!anchorEl) {
-        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
-    }
-    // Build tooltip HTML
-    const { content } = action;
-    let html = '';
-    if (content.title) {
-        html += `<div class="syntro-tt-title">${sanitizeHtml(content.title)}</div>`;
-    }
-    html += `<div class="syntro-tt-body">${sanitizeHtml(content.body)}</div>`;
-    // Add CTA buttons if provided (new multi-button support)
-    if (content.ctaButtons && content.ctaButtons.length > 0) {
-        html += `<div class="syntro-tt-actions">`;
-        for (const btn of content.ctaButtons) {
-            const isPrimary = btn.primary ?? false;
-            html += `
-        <button
-          class="syntro-tt-btn ${isPrimary ? 'syntro-tt-btn-primary' : ''}"
-          data-syntro-action="${sanitizeHtml(btn.actionId)}"
-        >
-          ${sanitizeHtml(btn.label)}
-        </button>
-      `;
-        }
-        html += `</div>`;
-    }
-    else if (content.cta) {
-        // Legacy single CTA support
-        html += `<div class="syntro-tt-actions">
-      <button class="syntro-tt-btn syntro-tt-btn-primary" data-syntro-action="cta">
-        ${sanitizeHtml(content.cta.label)}
-      </button>
-    </div>`;
-    }
-    const handle = showTooltip(anchorEl, context.overlayRoot, {
-        html,
-        placement: action.placement ?? 'top',
-        trigger: action.trigger ?? 'immediate',
-        onAction: (actionId) => {
-            // Handle dismiss CTA — destroy the tooltip
-            if (actionId === 'dismiss') {
-                handle.destroy();
-                return;
-            }
-            if (actionId === 'cta' && content.cta) {
-                context.publishEvent('action.cta_clicked', {
-                    anchorId: action.anchorId,
-                    ctaLabel: content.cta.label,
-                });
-            }
-            else if (content.ctaButtons) {
-                const clickedBtn = content.ctaButtons.find((b) => b.actionId === actionId);
-                if (clickedBtn) {
-                    context.publishEvent('action.tooltip_cta_clicked', {
-                        anchorId: action.anchorId,
-                        actionId,
-                        label: clickedBtn.label,
-                    });
-                }
-            }
-            handle.destroy();
-        },
-    });
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'overlays:tooltip',
-        anchorId: action.anchorId,
-        trigger: action.trigger ?? 'immediate',
-    });
-    return {
-        cleanup: () => {
-            handle.destroy();
-        },
-    };
-};
-// ============================================================================
-// Executor Definitions for Registration
-// ============================================================================
-/**
- * All executors provided by this app.
- * These are registered with the runtime's ExecutorRegistry.
- */
-export const executors = [
-    { kind: 'overlays:highlight', executor: executeHighlight },
-    { kind: 'overlays:pulse', executor: executePulse },
-    { kind: 'overlays:badge', executor: executeBadge },
-    { kind: 'overlays:tooltip', executor: executeTooltip },
-    { kind: 'overlays:modal', executor: executeModal },
-    { kind: 'overlays:tour', executor: executeTour },
-    { kind: 'overlays:celebrate', executor: executeCelebrate },
-];
-/**
- * App runtime manifest (Lit variant).
- */
-export const runtime = {
-    id: 'adaptive-overlays',
-    version: '1.0.0',
-    name: 'Overlays',
-    description: 'Tooltips, highlights, badges, modals, celebrations, visual overlays, and workflow tracking',
-    executors,
-    widgets: [
-        {
-            id: 'adaptive-overlays:workflow-tracker',
-            component: WorkflowWidgetLitMountable,
-            metadata: {
-                name: 'Workflow Tracker',
-                icon: '📋',
-                description: 'Tracks multi-step workflow progress across tours',
-            },
-        },
-    ],
-};

package/dist/sanitizer.js

@@ -1,84 +0,0 @@
-/**
- * HTML Sanitizer
- *
- * Sanitizes HTML to prevent XSS attacks.
- * Uses native Sanitizer API when available, falls back to whitelist approach.
- */
-const ALLOWED_TAGS = new Set([
-    'b',
-    'strong',
-    'i',
-    'em',
-    'u',
-    'span',
-    'div',
-    'p',
-    'br',
-    'ul',
-    'ol',
-    'li',
-    'code',
-    'pre',
-    'small',
-    'sup',
-    'sub',
-    'a',
-    'button',
-    // SVG elements (for inline Lucide icons in config HTML)
-    'svg',
-    'path',
-    'circle',
-    'line',
-    'polyline',
-    'polygon',
-    'rect',
-    'g',
-]);
-export function sanitizeHtml(html) {
-    // Try native Sanitizer API first
-    const hasNative = typeof window.Sanitizer === 'function';
-    if (hasNative) {
-        try {
-            const s = new window.Sanitizer({});
-            const frag = s.sanitizeToFragment(html);
-            const div = document.createElement('div');
-            div.append(frag);
-            return div.innerHTML;
-        }
-        catch {
-            // Fall through to manual sanitizer
-        }
-    }
-    // Conservative fallback sanitizer
-    const tpl = document.createElement('template');
-    tpl.innerHTML = html;
-    const root = tpl.content;
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
-    const toRemove = [];
-    while (walker.nextNode()) {
-        const el = walker.currentNode;
-        const tag = el.tagName.toLowerCase();
-        if (!ALLOWED_TAGS.has(tag)) {
-            toRemove.push(el);
-            continue;
-        }
-        // Remove dangerous attributes
-        for (const attr of Array.from(el.attributes)) {
-            const name = attr.name.toLowerCase();
-            const value = attr.value.trim().toLowerCase();
-            const isEvent = name.startsWith('on');
-            const isJsUrl = (name === 'href' || name === 'src') && value.startsWith('javascript:');
-            if (isEvent || isJsUrl) {
-                el.removeAttribute(attr.name);
-            }
-        }
-    }
-    // Remove disallowed elements but keep their children
-    for (const el of toRemove) {
-        while (el.firstChild) {
-            el.parentNode?.insertBefore(el.firstChild, el);
-        }
-        el.remove();
-    }
-    return tpl.innerHTML;
-}

package/dist/summarize.js

@@ -1,86 +0,0 @@
-/**
- * Human-readable summary generation for overlay config items.
- *
- * Pure functions — no DOM access, just string formatting from config data.
- */
-const MAX_TEXT_LEN = 40;
-/** Extract the CSS selector string from an anchorId object. */
-function resolveAnchorSelector(anchorId) {
-    if (!anchorId)
-        return '';
-    if (typeof anchorId === 'string')
-        return anchorId;
-    if (typeof anchorId === 'object')
-        return anchorId.selector ?? '';
-    return '';
-}
-/**
- * Convert a CSS selector into a human-friendly element description.
- */
-export function describeSelector(selector) {
-    if (!selector)
-        return '(no target)';
-    // ID selector: strip #
-    if (selector.startsWith('#')) {
-        return truncate(selector.slice(1), 50);
-    }
-    // data-testid selector
-    const testIdMatch = selector.match(/\[data-testid="([^"]+)"\]/);
-    if (testIdMatch) {
-        return `${testIdMatch[1]} element`;
-    }
-    return truncate(selector, 50);
-}
-function truncate(text, max) {
-    if (text.length <= max)
-        return text;
-    return `${text.slice(0, max)}...`;
-}
-function truncateQuoted(text, max) {
-    if (text.length <= max)
-        return `"${text}"`;
-    return `"${text.slice(0, max)}..."`;
-}
-/**
- * Generate a human-readable one-liner for an overlay config item.
- */
-export function summarizeOverlayItem(type, item) {
-    switch (type) {
-        case 'tooltips': {
-            const anchorId = resolveAnchorSelector(item.anchorId);
-            const desc = describeSelector(anchorId);
-            const content = item.content;
-            const body = content?.body || '';
-            return `Tooltip on ${desc}: ${truncateQuoted(body, MAX_TEXT_LEN)}`;
-        }
-        case 'highlights': {
-            const anchorId = resolveAnchorSelector(item.anchorId);
-            const desc = describeSelector(anchorId);
-            return `Highlight ${desc}`;
-        }
-        case 'badges': {
-            const anchorId = resolveAnchorSelector(item.anchorId);
-            const desc = describeSelector(anchorId);
-            const content = item.content || '';
-            return `Badge "${content}" on ${desc}`;
-        }
-        case 'pulses': {
-            const anchorId = resolveAnchorSelector(item.anchorId);
-            const desc = describeSelector(anchorId);
-            return `Pulse on ${desc}`;
-        }
-        case 'modals': {
-            const content = item.content;
-            const label = content?.title || content?.body || '';
-            return `Modal: ${truncateQuoted(label, MAX_TEXT_LEN)}`;
-        }
-        case 'tours': {
-            const tourId = item.tourId || 'unknown';
-            const steps = item.steps || [];
-            const count = steps.length;
-            return `Tour: ${tourId} (${count} ${count === 1 ? 'step' : 'steps'})`;
-        }
-        default:
-            return `Unknown overlay`;
-    }
-}