@syntrologie/adapt-overlays 2.11.0 → 2.12.0

package/dist/WorkflowWidget.js

@@ -79,13 +79,13 @@ function showWorkflowToast(notification) {
 }
 /**
  * Extract workflow-enabled tours from active actions (runtime.actions.getActive()).
- * Only actions with kind 'core:tour', a tourId, and a workflow field are included.
+ * 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 === 'core:tour' && action.workflow && action.tourId) {
+        if (action.kind === 'overlays:tour' && action.workflow && action.tourId) {
             const meta = action.workflow;
             const rawSteps = action.steps || [];
             const steps = rawSteps.map((s) => ({
@@ -101,10 +101,10 @@ 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);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [runtime, actionVersion]);
     // Keep a ref so event handlers always see the latest tourWorkflows
     const tourWorkflowsRef = useRef(tourWorkflows);

package/dist/cdn.d.ts

@@ -15,7 +15,7 @@ export declare const manifest: {
     description: string;
     runtime: {
         actions: {
-            kind: "core:tour" | "overlays:celebrate" | "overlays:highlight" | "overlays:pulse" | "overlays:badge" | "overlays:tooltip" | "overlays:modal";
+            kind: "overlays:tour" | "overlays:celebrate" | "overlays:highlight" | "overlays:pulse" | "overlays:badge" | "overlays:tooltip" | "overlays:modal";
             executor: import("packages/sdk-contracts/dist").ActionExecutor<import("./types").CelebrateAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./tour-types").TourAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./types").ModalAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./types").HighlightAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./types").PulseAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./types").BadgeAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./types").TooltipAction>;
         }[];
     };
@@ -25,7 +25,7 @@ export declare const manifest: {
             icon: string;
             description: string;
         };
-        component: typeof import("./editor").OverlaysEditor;
+        component: typeof import("./overlay-editor-ui").OverlaysEditor;
     };
     metadata: {
         isBuiltIn: boolean;

package/dist/celebrations/__tests__/reduced-motion.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=reduced-motion.test.d.ts.map

package/dist/celebrations/__tests__/reduced-motion.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduced-motion.test.d.ts","sourceRoot":"","sources":["../../../src/celebrations/__tests__/reduced-motion.test.ts"],"names":[],"mappings":""}

package/dist/celebrations/__tests__/reduced-motion.test.js

@@ -0,0 +1,97 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+/** Stub CanvasRenderingContext2D for jsdom (which lacks canvas support) */
+function stubCanvasContext() {
+    const ctx = {
+        scale: vi.fn(),
+        clearRect: vi.fn(),
+        save: vi.fn(),
+        restore: vi.fn(),
+        translate: vi.fn(),
+        rotate: vi.fn(),
+        fillRect: vi.fn(),
+        beginPath: vi.fn(),
+        arc: vi.fn(),
+        fill: vi.fn(),
+        fillText: vi.fn(),
+        globalAlpha: 1,
+        fillStyle: '',
+        font: '',
+        shadowBlur: 0,
+        shadowColor: '',
+    };
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(ctx);
+    return ctx;
+}
+function mockEffect() {
+    return {
+        init: vi.fn(() => [
+            {
+                x: 100,
+                y: 0,
+                vx: 0,
+                vy: 1,
+                rotation: 0,
+                rotationSpeed: 0,
+                size: 5,
+                color: '#ff0000',
+                opacity: 1,
+            },
+        ]),
+        update: vi.fn(() => true),
+        render: vi.fn(),
+    };
+}
+const defaultConfig = {
+    duration: 3000,
+    intensity: 'medium',
+    colors: ['#ff0000', '#00ff00'],
+};
+describe('CelebrationEngine prefers-reduced-motion', () => {
+    let container;
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        stubCanvasContext();
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+        container.remove();
+    });
+    it('should skip animation when prefers-reduced-motion is "reduce"', async () => {
+        window.matchMedia = vi.fn().mockReturnValue({ matches: true });
+        const { CelebrationEngine } = await import('../engine');
+        const engine = new CelebrationEngine();
+        const effect = mockEffect();
+        engine.start(container, effect, defaultConfig);
+        // Effect should never be initialized or rendered
+        expect(effect.init).not.toHaveBeenCalled();
+        expect(effect.render).not.toHaveBeenCalled();
+        // matchMedia should have been queried with the right media query
+        expect(window.matchMedia).toHaveBeenCalledWith('(prefers-reduced-motion: reduce)');
+    });
+    it('should run animation when prefers-reduced-motion is not set', async () => {
+        window.matchMedia = vi.fn().mockReturnValue({ matches: false });
+        const { CelebrationEngine } = await import('../engine');
+        const engine = new CelebrationEngine();
+        const effect = mockEffect();
+        engine.start(container, effect, defaultConfig);
+        // Effect should be initialized normally
+        expect(effect.init).toHaveBeenCalled();
+        // Canvas should be created
+        const canvas = container.querySelector('canvas[data-syntro-celebrate]');
+        expect(canvas).not.toBeNull();
+        engine.stop();
+    });
+    it('should not create canvas element when motion is reduced', async () => {
+        window.matchMedia = vi.fn().mockReturnValue({ matches: true });
+        const { CelebrationEngine } = await import('../engine');
+        const engine = new CelebrationEngine();
+        const effect = mockEffect();
+        engine.start(container, effect, defaultConfig);
+        // No canvas should exist in the container
+        const canvas = container.querySelector('canvas[data-syntro-celebrate]');
+        expect(canvas).toBeNull();
+    });
+});

package/dist/celebrations/engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../../src/celebrations/engine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAE9E,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,GAAG,CAAyC;IACpD,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,SAAS,CAA4B;IAE7C,KAAK,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IA2CzF,IAAI,IAAI,IAAI;IAeZ,OAAO,CAAC,IAAI;CA+Bb"}
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../../src/celebrations/engine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAE9E,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,GAAG,CAAyC;IACpD,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,SAAS,CAA4B;IAE7C,KAAK,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAgDzF,IAAI,IAAI,IAAI;IAeZ,OAAO,CAAC,IAAI;CA+Bb"}

package/dist/celebrations/engine.js

@@ -11,6 +11,10 @@ export class CelebrationEngine {
         this.container = null;
     }
     start(container, effect, config) {
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (prefersReducedMotion) {
+            return;
+        }
         this.container = container;
         this.effect = effect;
         this.duration = config.duration;

package/dist/editor.d.ts

@@ -1,12 +1,12 @@
 /**
- * Adaptive Overlays - Editor Component
+ * Adaptive Overlays - Editor Module (barrel)
  *
- * Review & tweak editor for AI-generated overlay configurations.
- * Displays a scannable list of one-liner summaries grouped by type.
- * Tours show a drill-in step list. Clicking an item highlights it on page.
+ * Re-exports from the split modules for backward compatibility.
+ * - State/helpers: overlay-editor-state.ts
+ * - UI component:  overlay-editor-ui.tsx
  */
-import type { EditorPanelProps } from './types';
-export declare function OverlaysEditor({ config, onChange, editor }: EditorPanelProps): import("react/jsx-runtime").JSX.Element;
+import { OverlaysEditor } from './overlay-editor-ui';
+export { OverlaysEditor };
 /**
  * Editor module configuration.
  */

package/dist/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAqBH,OAAO,KAAK,EAAE,gBAAgB,EAAY,MAAM,SAAS,CAAC;AA0N1D,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAif5E;AAED;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;CAAe,CAAC;AAExC,eAAe,cAAc,CAAC"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;CAAe,CAAC;AAExC,eAAe,cAAc,CAAC"}

package/dist/editor.js

@@ -1,418 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * Adaptive Overlays - Editor Component
+ * Adaptive Overlays - Editor Module (barrel)
  *
- * Review & tweak editor for AI-generated overlay configurations.
- * Displays a scannable list of one-liner summaries grouped by type.
- * Tours show a drill-in step list. Clicking an item highlights it on page.
+ * Re-exports from the split modules for backward compatibility.
+ * - State/helpers: overlay-editor-state.ts
+ * - UI component:  overlay-editor-ui.tsx
  */
-import { DetectionBadge, DismissedSection, EditorBody, EditorCard, EditorFooter, 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 { summarizeOverlayItem } from './summarize';
-/** 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 '';
-}
-/** Extract the target route from an AnchorId object, ignoring wildcard '**'. */
-function resolveAnchorRoute(anchorId) {
-    if (!anchorId || typeof anchorId !== 'object')
-        return null;
-    const route = anchorId.route;
-    if (typeof route === 'string' && route !== '**')
-        return route;
-    if (Array.isArray(route)) {
-        const first = route.find((r) => typeof r === 'string' && r !== '**');
-        return first ?? null;
-    }
-    return null;
-}
-/** Save a pending highlight selector to sessionStorage (inlined to avoid cross-package import). */
-function savePendingHighlight(selector) {
-    try {
-        sessionStorage.setItem('syntro:editor:pending-highlight', selector);
-    }
-    catch {
-        // Silently ignore
-    }
-}
-function itemKey(section, index) {
-    return `${section}:${index}`;
-}
-// ============================================================================
-// Section Config
-// ============================================================================
-const OVERLAY_SECTIONS = ['tooltips', 'highlights', 'badges', 'pulses', 'modals'];
-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 });
-}
-function flattenItems(config) {
-    const items = [];
-    for (const section of OVERLAY_SECTIONS) {
-        const arr = config[section] || [];
-        arr.forEach((item, i) => {
-            const rec = item;
-            items.push({
-                key: itemKey(section, i),
-                section,
-                index: i,
-                summary: summarizeOverlayItem(section, rec),
-                anchorId: resolveAnchorSelector(rec.anchorId),
-                rawAnchorId: rec.anchorId,
-                isTour: false,
-            });
-        });
-    }
-    // Tours
-    const tours = config.tours || [];
-    tours.forEach((tour, i) => {
-        items.push({
-            key: itemKey('tours', i),
-            section: 'tours',
-            index: i,
-            summary: summarizeOverlayItem('tours', tour),
-            anchorId: '',
-            rawAnchorId: undefined,
-            isTour: true,
-        });
-    });
-    return items;
-}
-function filterConfig(config, dismissedKeys) {
-    const result = { ...config };
-    const allSections = [...OVERLAY_SECTIONS, 'tours'];
-    for (const section of allSections) {
-        const arr = config[section] || [];
-        const filtered = arr.filter((_, i) => !dismissedKeys.has(itemKey(section, i)));
-        if (filtered.length > 0 || config[section] !== undefined) {
-            result[section] = filtered;
-        }
-    }
-    return result;
-}
-function getStepIcon(step) {
-    const action = step.action;
-    const kind = action.kind || '';
-    if (kind.includes('tooltip'))
-        return '\u{1f4ac}';
-    if (kind.includes('highlight'))
-        return '\u{2728}';
-    if (kind.includes('modal'))
-        return '\u{1f4e6}';
-    if (kind.includes('badge'))
-        return '\u{1f3f7}\u{fe0f}';
-    if (kind.includes('pulse'))
-        return '\u{1f4ab}';
-    return '\u{25cf}';
-}
-function getStepLabel(step) {
-    const action = step.action;
-    const anchor = resolveAnchorSelector(action.anchorId);
-    if (anchor)
-        return anchor;
-    const content = action.content;
-    if (content?.title)
-        return content.title;
-    if (content?.body)
-        return content.body.slice(0, 30);
-    return step.id;
-}
-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
-// ============================================================================
-function parseOverlayItemKey(key) {
-    const [section, indexStr] = key.split(':');
-    return { section: section, index: Number(indexStr) };
-}
-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))) }))] })) }), _jsx(EditorFooter, { onSave: () => editor.save(), onPublish: handlePublish })] }));
-}
+import { OverlaysEditor } from './overlay-editor-ui';
+export { OverlaysEditor };
 /**
  * Editor module configuration.
  */