@syntrologie/adapt-overlays 2.10.0 → 2.12.0

package/dist/overlay-editor-state.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Adaptive Overlays - Editor State & Helpers
+ *
+ * Pure logic: anchor resolution, types, section configuration,
+ * flatten/filter helpers, tour step utilities, and dismissal logic.
+ * No React or JSX — consumed by the UI module.
+ */
+import type { OverlaysConfig } from './schema';
+import type { TourStep } from './types';
+/** Extract the CSS selector string from an anchorId object. */
+export declare function resolveAnchorSelector(anchorId: unknown): string;
+/** Extract the target route from an AnchorId object, ignoring wildcard '**'. */
+export declare function resolveAnchorRoute(anchorId: unknown): string | null;
+/** Save a pending highlight selector to sessionStorage (inlined to avoid cross-package import). */
+export declare function savePendingHighlight(selector: string): void;
+export type OverlaySection = 'tooltips' | 'highlights' | 'badges' | 'pulses' | 'modals';
+export type SectionKey = OverlaySection | 'tours';
+export declare function itemKey(section: SectionKey, index: number): string;
+export declare const OVERLAY_SECTIONS: OverlaySection[];
+export interface FlatItem {
+    key: string;
+    section: SectionKey;
+    index: number;
+    summary: string;
+    anchorId: string;
+    rawAnchorId: unknown;
+    isTour: boolean;
+}
+export declare function flattenItems(config: OverlaysConfig): FlatItem[];
+export declare function filterConfig(config: OverlaysConfig, dismissedKeys: Set<string>): OverlaysConfig;
+export declare function getStepIcon(step: TourStep): string;
+export declare function getStepLabel(step: TourStep): string;
+export interface DetectionEntry {
+    found: boolean;
+    element: HTMLElement | null;
+}
+export declare function parseOverlayItemKey(key: string): {
+    section: OverlaySection;
+    index: number;
+};
+//# sourceMappingURL=overlay-editor-state.d.ts.map

package/dist/overlay-editor-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-editor-state.d.ts","sourceRoot":"","sources":["../src/overlay-editor-state.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMxC,+DAA+D;AAC/D,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAK/D;AAED,gFAAgF;AAChF,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CASnE;AAED,mGAAmG;AACnG,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,QAMpD;AAMD,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACxF,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,OAAO,CAAC;AAElD,wBAAgB,OAAO,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAElE;AAMD,eAAO,MAAM,gBAAgB,EAAE,cAAc,EAM5C,CAAC;AAMF,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,cAAc,GAAG,QAAQ,EAAE,CAkC/D;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,cAAc,CAW/F;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CASlD;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAQnD;AAMD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,OAAO,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAG3F"}

package/dist/overlay-editor-state.js

@@ -0,0 +1,131 @@
+/**
+ * Adaptive Overlays - Editor State & Helpers
+ *
+ * Pure logic: anchor resolution, types, section configuration,
+ * flatten/filter helpers, tour step utilities, and dismissal logic.
+ * No React or JSX — consumed by the UI module.
+ */
+import { summarizeOverlayItem } from './summarize';
+// ============================================================================
+// Anchor Helpers
+// ============================================================================
+/** Extract the CSS selector string from an anchorId object. */
+export 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 '**'. */
+export 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). */
+export function savePendingHighlight(selector) {
+    try {
+        sessionStorage.setItem('syntro:editor:pending-highlight', selector);
+    }
+    catch {
+        // Silently ignore
+    }
+}
+export function itemKey(section, index) {
+    return `${section}:${index}`;
+}
+// ============================================================================
+// Section Config
+// ============================================================================
+export const OVERLAY_SECTIONS = [
+    'tooltips',
+    'highlights',
+    'badges',
+    'pulses',
+    'modals',
+];
+export 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;
+}
+export 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;
+}
+export 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}';
+}
+export 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;
+}
+export function parseOverlayItemKey(key) {
+    const [section, indexStr] = key.split(':');
+    return { section: section, index: Number(indexStr) };
+}

package/dist/overlay-editor-ui.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 type { EditorPanelProps } from './types';
+export declare function OverlaysEditor({ config, onChange, editor }: EditorPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=overlay-editor-ui.d.ts.map

package/dist/overlay-editor-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-editor-ui.d.ts","sourceRoot":"","sources":["../src/overlay-editor-ui.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAiCH,OAAO,KAAK,EAAE,gBAAgB,EAAY,MAAM,SAAS,CAAC;AAkF1D,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAif5E"}

package/dist/overlay-editor-ui.js

@@ -0,0 +1,306 @@
+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, 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 { 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))) }))] })) }), _jsx(EditorFooter, { onSave: () => editor.save(), onPublish: handlePublish })] }));
+}

package/dist/runtime.d.ts

@@ -44,7 +44,7 @@ export declare const executors: readonly [{
     readonly kind: "overlays:modal";
     readonly executor: ActionExecutor<import("./types").ModalAction>;
 }, {
-    readonly kind: "core:tour";
+    readonly kind: "overlays:tour";
     readonly executor: ActionExecutor<import("./tour-types").TourAction>;
 }, {
     readonly kind: "overlays:celebrate";
@@ -74,7 +74,7 @@ export declare const runtime: {
         readonly kind: "overlays:modal";
         readonly executor: ActionExecutor<import("./types").ModalAction>;
     }, {
-        readonly kind: "core:tour";
+        readonly kind: "overlays:tour";
         readonly executor: ActionExecutor<import("./tour-types").TourAction>;
     }, {
         readonly kind: "overlays:celebrate";

package/dist/runtime.js

@@ -375,7 +375,7 @@ 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:tour', executor: executeTour },
     { kind: 'overlays:celebrate', executor: executeCelebrate },
 ];
 /**

package/dist/tour-types.d.ts

@@ -13,7 +13,7 @@ export interface TourStep {
 }
 /** Orchestrate sequential steps with cross-page state */
 export interface TourAction {
-    kind: 'core:tour';
+    kind: 'overlays:tour';
     label?: string;
     tourId: string;
     steps: TourStep[];

package/dist/tour-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tour-types.d.ts","sourceRoot":"","sources":["../src/tour-types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,4CAA4C;AAC5C,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAMD,2EAA2E;AAC3E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH"}
+{"version":3,"file":"tour-types.d.ts","sourceRoot":"","sources":["../src/tour-types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,4CAA4C;AAC5C,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAMD,2EAA2E;AAC3E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH"}

package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-preset.d.ts","sourceRoot":"","sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI1C,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,MAAM,CAgdxC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tailwind-preset.d.ts","sourceRoot":"","sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAW1C,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,MAAM,CAkdxC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/node_modules/@syntro/design-system/dist/tailwind-preset.js

@@ -14,7 +14,7 @@
  * ```
  */
 import { colors } from './tokens/colors';
-import { backdropBlur, focusRings, overlay, shadows } from './tokens/effects';
+import { backdropBlur, elevationShadows, focusRings, glowShadows, overlay, shadows, } from './tokens/effects';
 export const syntroPreset = {
     darkMode: ['class'],
     theme: {
@@ -390,9 +390,11 @@ export const syntroPreset = {
                 '3xl': '1.5rem',
                 full: '9999px',
             },
-            // Box shadow — Figma shadow scale
+            // Box shadow — Figma shadow scale + product glows + elevation
             boxShadow: {
                 ...shadows,
+                ...glowShadows,
+                ...elevationShadows,
                 DEFAULT: shadows.sm,
                 // Focus rings (4px spread + xs shadow)
                 'focus-primary': focusRings.primary,

package/node_modules/@syntro/design-system/dist/tokens/colors.css

@@ -316,7 +316,7 @@
   /* ========================================================================== */
   --syntro-tag-content: #cbd0d7;
   --syntro-tag-border: #2b333f;
-  --syntro-tag-bg: #1c2124;
+  --syntro-tag-bg: #1c222a;
 
   /* ========================================================================== */
   /* COMPONENT TOKENS - MENU */

package/node_modules/@syntro/design-system/dist/tokens/colors.d.ts

@@ -310,7 +310,7 @@ export declare const alert: {
 export declare const tag: {
     readonly content: "#cbd0d7";
     readonly border: "#2b333f";
-    readonly background: "#1c2124";
+    readonly background: "#1c222a";
 };
 export declare const menu: {
     readonly backgroundDefault: "#0e1114";
@@ -742,7 +742,7 @@ export declare const colors: {
     readonly tag: {
         readonly content: "#cbd0d7";
         readonly border: "#2b333f";
-        readonly background: "#1c2124";
+        readonly background: "#1c222a";
     };
     readonly menu: {
         readonly backgroundDefault: "#0e1114";

package/node_modules/@syntro/design-system/dist/tokens/colors.js

@@ -349,7 +349,7 @@ export const alert = {
 export const tag = {
     content: slateGrey[10],
     border: slateGrey[4],
-    background: '#1c2124',
+    background: slateGrey[3],
 };
 // ============================================================================
 // MENU TOKENS