@syntrologie/adapt-overlays 2.16.0 → 2.17.0

package/dist/overlay-editor-ui.js

@@ -1,306 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Adaptive Overlays - Editor UI Component
- *
- * Main editor component, tabs, forms, tour drill-in, item editing, save/publish.
- * All React/JSX lives here; pure logic is imported from overlay-editor-state.
- */
-import { DetectionBadge, DismissedSection, EditorBody, EditorCard, EditorHeader, EditorInput, EditorLayout, EditorTextarea, EmptyState, GroupHeader, } from '@syntrologie/shared-editor-ui';
-import { MessageSquare, Route, Sparkles, Square, Tag, Zap } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { filterConfig, flattenItems, getStepIcon, getStepLabel, parseOverlayItemKey, resolveAnchorRoute, resolveAnchorSelector, savePendingHighlight, } from './overlay-editor-state';
-// ============================================================================
-// Section Icons
-// ============================================================================
-const SECTION_ICON_MAP = {
-    tooltips: MessageSquare,
-    highlights: Sparkles,
-    badges: Tag,
-    pulses: Zap,
-    modals: Square,
-    tours: Route,
-};
-/** Renders the appropriate Lucide icon for a section type */
-function SectionIcon({ section, className }) {
-    const IconComponent = SECTION_ICON_MAP[section];
-    return _jsx(IconComponent, { size: 16, className: className });
-}
-// ============================================================================
-// Anchor Detection Hook
-// ============================================================================
-function useAnchorDetection(items, config) {
-    const [detectionMap, setDetectionMap] = useState(new Map());
-    const itemsRef = useRef(items);
-    const configRef = useRef(config);
-    itemsRef.current = items;
-    configRef.current = config;
-    useEffect(() => {
-        const runDetection = () => {
-            const map = new Map();
-            for (const item of itemsRef.current) {
-                let selectorToCheck = item.anchorId;
-                // For tours, detect the first step's anchor
-                if (item.isTour && !selectorToCheck) {
-                    const tours = configRef.current.tours || [];
-                    const tour = tours[item.index];
-                    if (tour && tour.steps.length > 0) {
-                        const firstStep = tour.steps[0];
-                        const action = firstStep.action;
-                        selectorToCheck = resolveAnchorSelector(action?.anchorId);
-                    }
-                }
-                if (!selectorToCheck) {
-                    map.set(item.key, { found: false, element: null });
-                    continue;
-                }
-                try {
-                    const el = document.querySelector(selectorToCheck);
-                    map.set(item.key, { found: el !== null, element: el });
-                }
-                catch {
-                    map.set(item.key, { found: false, element: null });
-                }
-            }
-            setDetectionMap(map);
-        };
-        runDetection();
-        const interval = setInterval(runDetection, 2000);
-        return () => clearInterval(interval);
-    }, []);
-    return detectionMap;
-}
-// ============================================================================
-// OverlaysEditor Component
-// ============================================================================
-export function OverlaysEditor({ config, onChange, editor }) {
-    const typedConfig = config;
-    const [dismissedKeys, setDismissedKeys] = useState(() => editor.getDismissedKeys?.() ?? new Set());
-    const [expandedTour, setExpandedTour] = useState(null);
-    const [editingKey, setEditingKey] = useState(null);
-    const [_previewMode, setPreviewMode] = useState('after');
-    // Sync dismissed keys back to navigation context on every change
-    useEffect(() => {
-        editor.setDismissedKeys?.(dismissedKeys);
-    }, [dismissedKeys, editor]);
-    // React to global before/after toggle from the panel
-    // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally omitted — adding config/typedConfig/previewConfig would cause infinite re-renders since previewConfig triggers state updates
-    useEffect(() => {
-        const mode = editor.previewMode;
-        if (!mode)
-            return;
-        if (mode === 'before') {
-            // Remove all overlay changes — push a config with every item filtered out
-            const allKeys = new Set(flattenItems(typedConfig).map((item) => item.key));
-            const empty = filterConfig(typedConfig, allKeys);
-            editor.previewConfig(empty);
-        }
-        else {
-            // Restore the full config
-            editor.previewConfig(config);
-        }
-    }, [editor.previewMode]);
-    // Consume initialEditKey from accordion navigation on mount
-    const initialConsumed = useRef(false);
-    useEffect(() => {
-        if (editor.initialEditKey != null && !initialConsumed.current) {
-            initialConsumed.current = true;
-            const allFlat = flattenItems(typedConfig);
-            const targetIdx = Number(editor.initialEditKey);
-            if (targetIdx >= 0 && targetIdx < allFlat.length) {
-                const target = allFlat[targetIdx];
-                if (target.isTour) {
-                    setExpandedTour(target.key);
-                }
-                else {
-                    setEditingKey(target.key);
-                    if (target.anchorId) {
-                        editor.highlightElement(target.anchorId);
-                    }
-                }
-            }
-            editor.clearInitialState?.();
-        }
-        else if (editor.initialCreate && !initialConsumed.current) {
-            initialConsumed.current = true;
-            editor.clearInitialState?.();
-        }
-    }, [editor, typedConfig]);
-    const allItems = flattenItems(typedConfig);
-    const activeItems = allItems.filter((item) => !dismissedKeys.has(item.key));
-    const dismissedItems = allItems.filter((item) => dismissedKeys.has(item.key));
-    const overlayItems = activeItems.filter((item) => !item.isTour);
-    const tourItems = activeItems.filter((item) => item.isTour);
-    const totalItems = activeItems.length;
-    const [_hoveredKey, setHoveredKey] = useState(null);
-    const detectionMap = useAnchorDetection(allItems, typedConfig);
-    const foundCount = activeItems.filter((item) => detectionMap.get(item.key)?.found).length;
-    const handleDismiss = useCallback((key) => {
-        setDismissedKeys((prev) => {
-            const next = new Set(prev);
-            next.add(key);
-            return next;
-        });
-        if (expandedTour === key)
-            setExpandedTour(null);
-        if (editingKey === key)
-            setEditingKey(null);
-    }, [expandedTour, editingKey]);
-    const handleRestore = useCallback((key) => {
-        setDismissedKeys((prev) => {
-            const next = new Set(prev);
-            next.delete(key);
-            return next;
-        });
-    }, []);
-    const handleCardClick = useCallback((item) => {
-        if (item.isTour) {
-            setExpandedTour((prev) => (prev === item.key ? null : item.key));
-        }
-        else {
-            if (item.anchorId) {
-                editor.highlightElement(item.anchorId);
-            }
-            setEditingKey(item.key);
-        }
-    }, [editor]);
-    const handleBackToList = useCallback(() => {
-        setEditingKey(null);
-        setPreviewMode('after');
-        editor.previewConfig(config);
-        editor.clearHighlight();
-    }, [editor, config]);
-    // Register back handler in panel header when editing
-    useEffect(() => {
-        editor.setBackHandler?.(editingKey !== null ? handleBackToList : null);
-        return () => editor.setBackHandler?.(null);
-    }, [editingKey, handleBackToList, editor]);
-    const _handleBeforeAfter = useCallback((mode) => {
-        setPreviewMode(mode);
-        if (mode === 'before') {
-            const filtered = filterConfig(typedConfig, new Set([editingKey]));
-            editor.previewConfig(filtered);
-        }
-        else {
-            editor.previewConfig(config);
-        }
-    }, [typedConfig, editingKey, editor, config]);
-    const handleFieldChange = useCallback((section, index, updater) => {
-        const arr = (typedConfig[section] || []).slice();
-        const item = { ...arr[index] };
-        arr[index] = updater(item);
-        const updated = { ...typedConfig, [section]: arr };
-        onChange(updated);
-        editor.setDirty(true);
-    }, [typedConfig, onChange, editor]);
-    const _handlePublish = useCallback(() => {
-        if (dismissedKeys.size > 0) {
-            const filtered = filterConfig(typedConfig, dismissedKeys);
-            onChange(filtered);
-        }
-        editor.publish();
-    }, [dismissedKeys, typedConfig, onChange, editor]);
-    const handleBadgeClick = useCallback(async (item) => {
-        const detection = detectionMap.get(item.key);
-        if (detection?.found && item.anchorId) {
-            editor.highlightElement(item.anchorId);
-        }
-        else {
-            const route = resolveAnchorRoute(item.rawAnchorId);
-            if (route) {
-                if (item.anchorId)
-                    savePendingHighlight(item.anchorId);
-                await editor.navigateTo(route);
-                if (item.anchorId)
-                    editor.highlightElement(item.anchorId);
-            }
-            else if (item.anchorId) {
-                editor.highlightElement(item.anchorId);
-            }
-        }
-    }, [editor, detectionMap]);
-    const handleCardHover = useCallback((item) => {
-        setHoveredKey(item.key);
-        if (item.anchorId) {
-            editor.highlightElement(item.anchorId);
-        }
-    }, [editor]);
-    const handleCardLeave = useCallback(() => {
-        setHoveredKey(null);
-        editor.clearHighlight();
-    }, [editor]);
-    // ---- Edit form renderers per overlay type ----
-    const renderEditFields = (section, index) => {
-        const arr = typedConfig[section] || [];
-        const item = arr[index];
-        if (!item)
-            return null;
-        const anchorId = resolveAnchorSelector(item.anchorId);
-        switch (section) {
-            case 'tooltips': {
-                const content = item.content || {};
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx("div", { className: "se-text-[11px] se-font-mono se-text-slate-grey-8 se-py-1 se-px-2 se-bg-white/[0.04] se-rounded se-mb-3", children: anchorId }), _jsx(EditorInput, { label: "Title", value: content.title || '', onChange: (e) => handleFieldChange(section, index, (it) => ({
-                                ...it,
-                                content: { ...it.content, title: e.target.value },
-                            })) }), _jsx(EditorTextarea, { label: "Body", value: content.body || '', onChange: (e) => handleFieldChange(section, index, (it) => ({
-                                ...it,
-                                content: { ...it.content, body: e.target.value },
-                            })) })] }));
-            }
-            case 'highlights':
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx("div", { className: "se-text-[11px] se-font-mono se-text-slate-grey-8 se-py-1 se-px-2 se-bg-white/[0.04] se-rounded se-mb-3", children: anchorId }), _jsx(EditorInput, { label: "Color", value: item.style?.color || '', onChange: (e) => handleFieldChange(section, index, (it) => ({
-                                ...it,
-                                style: {
-                                    ...(it.style || {}),
-                                    color: e.target.value,
-                                },
-                            })) })] }));
-            case 'badges':
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx("div", { className: "se-text-[11px] se-font-mono se-text-slate-grey-8 se-py-1 se-px-2 se-bg-white/[0.04] se-rounded se-mb-3", children: anchorId }), _jsx(EditorInput, { label: "Content", value: item.content || '', onChange: (e) => handleFieldChange(section, index, (it) => ({
-                                ...it,
-                                content: e.target.value,
-                            })) })] }));
-            case 'pulses':
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx("div", { className: "se-text-[11px] se-font-mono se-text-slate-grey-8 se-py-1 se-px-2 se-bg-white/[0.04] se-rounded se-mb-3", children: anchorId }), _jsx(EditorInput, { label: "Duration (ms)", type: "number", value: item.duration || '', onChange: (e) => handleFieldChange(section, index, (it) => ({
-                                ...it,
-                                duration: Number(e.target.value) || undefined,
-                            })) })] }));
-            case 'modals': {
-                const content = item.content || {};
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx(EditorInput, { label: "Title", value: content.title || '', onChange: (e) => handleFieldChange(section, index, (it) => ({
-                                ...it,
-                                content: { ...it.content, title: e.target.value },
-                            })) }), _jsx(EditorTextarea, { label: "Body", value: content.body || '', onChange: (e) => handleFieldChange(section, index, (it) => ({
-                                ...it,
-                                content: { ...it.content, body: e.target.value },
-                            })) })] }));
-            }
-            default:
-                return null;
-        }
-    };
-    const renderTourDrillIn = (tourIdx) => {
-        const tours = typedConfig.tours || [];
-        const tour = tours[tourIdx];
-        if (!tour)
-            return null;
-        return (_jsxs("div", { className: "se-p-3 se-rounded-lg se-border se-border-white/[0.08] se-bg-white/[0.02] se-mt-1 se-mb-2", children: [_jsxs("div", { className: "se-text-[13px] se-font-semibold se-text-slate-grey-10 se-mb-2", children: ['\u{1f3af}', " Tour: ", tour.tourId] }), _jsxs("label", { className: "se-flex se-items-center se-gap-2 se-text-xs se-text-[#d1d5db] se-mb-2", children: [_jsx("input", { type: "checkbox", checked: tour.autoStart || false, readOnly: true }), "Auto-start tour"] }), tour.steps.map((step, stepIdx) => (_jsxs("div", { className: "se-flex se-items-center se-gap-2 se-py-1.5 se-px-2 se-rounded se-border se-border-white/[0.04] se-mb-1 se-text-xs se-text-[#d1d5db]", children: [_jsxs("span", { className: "se-text-[11px] se-font-bold se-text-slate-grey-7 se-min-w-[18px]", children: [stepIdx + 1, "."] }), _jsx("span", { children: getStepIcon(step) }), _jsxs("div", { className: "se-flex-1 se-overflow-hidden", children: [_jsx("div", { children: getStepLabel(step) }), step.route && (_jsx("div", { className: "se-text-[10px] se-text-slate-grey-7 se-font-mono", children: step.route }))] })] }, step.id || stepIdx))), tour.steps.length === 0 && (_jsx("div", { className: "se-text-xs se-text-slate-grey-7 se-py-2", children: "No steps in this tour." })), _jsx("button", { type: "button", className: "se-py-1 se-px-2.5 se-rounded se-border se-border-white/10 se-bg-transparent se-text-slate-grey-8 se-text-[11px] se-cursor-pointer se-mt-2", onClick: () => setExpandedTour(null), children: "\u2190 Back to list" })] }));
-    };
-    const renderCard = (item) => {
-        const detection = detectionMap.get(item.key);
-        return (_jsxs("div", { children: [_jsxs(EditorCard, { itemKey: item.key, onClick: () => handleCardClick(item), className: "se-flex se-items-center se-gap-2", onMouseEnter: () => handleCardHover(item), onMouseLeave: handleCardLeave, children: [_jsx(DetectionBadge, { found: detection?.found ?? false, onClick: () => handleBadgeClick(item) }), _jsx("span", { className: "se-shrink-0 se-flex se-items-center -se-ml-1", onClick: (e) => {
-                                e.stopPropagation();
-                                handleCardClick(item);
-                            }, children: _jsx(SectionIcon, { section: item.section }) }), _jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap", onClick: () => handleCardClick(item), children: item.summary }), _jsx("button", { type: "button", className: "se-py-0.5 se-px-1.5 se-rounded se-border-none se-bg-transparent se-text-slate-grey-7 se-text-sm se-cursor-pointer se-shrink-0 se-leading-none", onClick: (e) => {
-                                e.stopPropagation();
-                                handleDismiss(item.key);
-                            }, title: "Dismiss", children: "\u00D7" })] }), item.isTour && expandedTour === item.key && renderTourDrillIn(item.index)] }, item.key));
-    };
-    return (_jsxs(EditorLayout, { children: [_jsx(EditorHeader, { title: "Review Changes", subtitle: `${totalItems} item${totalItems !== 1 ? 's' : ''}${totalItems > 0 ? ` (${foundCount} found on this page)` : ''}`, onBack: () => editor.navigateHome() }), _jsx(EditorBody, { children: editingKey !== null ? ((() => {
-                    const ref = parseOverlayItemKey(editingKey);
-                    const editItem = allItems.find((it) => it.key === editingKey);
-                    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "se-flex se-items-center se-gap-2 se-mb-3 se-text-[13px] se-font-semibold se-text-slate-grey-10", children: [_jsx("span", { children: editItem && _jsx(SectionIcon, { section: editItem.section }) }), _jsx("span", { children: editItem?.summary })] }), renderEditFields(ref.section, ref.index)] }));
-                })()) : (_jsxs(_Fragment, { children: [allItems.length === 0 && _jsx(EmptyState, { message: "No overlays configured." }), overlayItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(GroupHeader, { label: "OVERLAYS", count: overlayItems.length }), overlayItems.map(renderCard)] })), tourItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(GroupHeader, { label: "TOURS", count: tourItems.length, className: overlayItems.length > 0 ? 'se-mt-4' : '' }), tourItems.map(renderCard)] })), dismissedItems.length > 0 && (_jsx(DismissedSection, { count: dismissedItems.length, children: dismissedItems.map((item) => (_jsxs("div", { className: "se-flex se-items-center se-gap-2 se-py-1.5 se-px-2.5 se-rounded-md se-border se-border-white/[0.03] se-bg-transparent se-mb-0.5 se-cursor-pointer se-text-xs se-text-slate-grey-6 se-opacity-60", children: [_jsx("span", { className: "se-shrink-0 se-flex se-items-center -se-ml-1", children: _jsx(SectionIcon, { section: item.section }) }), _jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap se-line-through", children: item.summary }), _jsx("button", { type: "button", className: "se-py-0.5 se-px-1.5 se-rounded se-border-none se-bg-transparent se-text-blue-5 se-text-[11px] se-cursor-pointer se-shrink-0 se-leading-none", onClick: (e) => {
-                                            e.stopPropagation();
-                                            handleRestore(item.key);
-                                        }, children: "Restore" })] }, item.key))) }))] })) })] }));
-}

package/dist/runtime-lit.d.ts

@@ -1,94 +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 { executeTour } from './executors/tour';
-import { executeModal } from './modal';
-import type { ActionExecutor, BadgeAction, HighlightAction, PulseAction, TooltipAction } from './types';
-export { executeModal, executeTour };
-export type { TourAction, TourStep, WorkflowMeta } from './tour-types';
-/**
- * Execute a highlight action
- */
-export declare const executeHighlight: ActionExecutor<HighlightAction>;
-/**
- * Execute a pulse action
- */
-export declare const executePulse: ActionExecutor<PulseAction>;
-/**
- * Execute a badge action
- */
-export declare const executeBadge: ActionExecutor<BadgeAction>;
-/**
- * Execute a tooltip action
- */
-export declare const executeTooltip: ActionExecutor<TooltipAction>;
-/**
- * All executors provided by this app.
- * These are registered with the runtime's ExecutorRegistry.
- */
-export declare const executors: readonly [{
-    readonly kind: "overlays:highlight";
-    readonly executor: ActionExecutor<HighlightAction>;
-}, {
-    readonly kind: "overlays:pulse";
-    readonly executor: ActionExecutor<PulseAction>;
-}, {
-    readonly kind: "overlays:badge";
-    readonly executor: ActionExecutor<BadgeAction>;
-}, {
-    readonly kind: "overlays:tooltip";
-    readonly executor: ActionExecutor<TooltipAction>;
-}, {
-    readonly kind: "overlays:modal";
-    readonly executor: ActionExecutor<import("./types").ModalAction>;
-}, {
-    readonly kind: "overlays:tour";
-    readonly executor: ActionExecutor<import("./tour-types").TourAction>;
-}, {
-    readonly kind: "overlays:celebrate";
-    readonly executor: ActionExecutor<import("./types").CelebrateAction>;
-}];
-/**
- * App runtime manifest (Lit variant).
- */
-export declare const runtime: {
-    id: string;
-    version: string;
-    name: string;
-    description: string;
-    executors: readonly [{
-        readonly kind: "overlays:highlight";
-        readonly executor: ActionExecutor<HighlightAction>;
-    }, {
-        readonly kind: "overlays:pulse";
-        readonly executor: ActionExecutor<PulseAction>;
-    }, {
-        readonly kind: "overlays:badge";
-        readonly executor: ActionExecutor<BadgeAction>;
-    }, {
-        readonly kind: "overlays:tooltip";
-        readonly executor: ActionExecutor<TooltipAction>;
-    }, {
-        readonly kind: "overlays:modal";
-        readonly executor: ActionExecutor<import("./types").ModalAction>;
-    }, {
-        readonly kind: "overlays:tour";
-        readonly executor: ActionExecutor<import("./tour-types").TourAction>;
-    }, {
-        readonly kind: "overlays:celebrate";
-        readonly executor: ActionExecutor<import("./types").CelebrateAction>;
-    }];
-    widgets: {
-        id: string;
-        component: import("./WorkflowWidgetLit").MountableWidget;
-        metadata: {
-            name: string;
-            icon: string;
-            description: string;
-        };
-    }[];
-};
-//# sourceMappingURL=runtime-lit.d.ts.map

package/dist/runtime-lit.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"runtime-lit.d.ts","sourceRoot":"","sources":["../src/runtime-lit.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EAEX,eAAe,EACf,WAAW,EACX,aAAa,EACd,MAAM,SAAS,CAAC;AAIjB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;AAGrC,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAMvE;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,eAAe,CAsE5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CA0GpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CAoGpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CAwFxD,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;EAQZ,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBnB,CAAC"}