@syntrologie/adapt-overlays 2.16.0 → 2.18.0

package/dist/modal.js

@@ -1,218 +0,0 @@
-/**
- * Modal Executor
- *
- * Displays a centered modal dialog with optional CTA buttons.
- * Uses CSS custom properties (var()) directly in inline styles so theming
- * is live — no timing dependency on when ThemeProvider injects vars.
- */
-import { sanitizeHtml } from './sanitizer';
-// CSS var shorthands with fallbacks (mirrors tooltip/toast pattern)
-const V = {
-    bg: 'var(--sc-overlay-background, #ffffff)',
-    title: 'var(--sc-overlay-title-color, var(--sc-overlay-text-color, #111827))',
-    text: 'var(--sc-overlay-text-color, #4b5563)',
-    accent: 'var(--sc-color-primary, #4f46e5)',
-    radius: 'var(--sc-border-radius, 12px)',
-};
-/**
- * Execute a modal action
- */
-export const executeModal = async (action, context) => {
-    const { content, size = 'md', blocking = false, scrim, dismiss, ctaButtons } = action;
-    // Create scrim backdrop
-    const scrimEl = document.createElement('div');
-    scrimEl.className = 'syntro-modal-scrim';
-    scrimEl.style.cssText = `
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, ${scrim?.opacity ?? 0.6});
-    z-index: 2147483645;
-    opacity: 0;
-    transition: opacity 200ms ease-out;
-  `;
-    context.overlayRoot.appendChild(scrimEl);
-    // Create modal container
-    const modal = document.createElement('div');
-    modal.className = `syntro-modal syntro-modal-${size}`;
-    modal.setAttribute('role', 'dialog');
-    modal.setAttribute('aria-modal', 'true');
-    // Size-based max-widths
-    const sizeMap = { sm: '360px', md: '480px', lg: '640px' };
-    modal.style.cssText = `
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(0.95);
-    max-width: ${sizeMap[size]};
-    width: 90%;
-    background: ${V.bg};
-    border-radius: ${V.radius};
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    z-index: 2147483646;
-    opacity: 0;
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
-    padding: 24px;
-  `;
-    // Build modal HTML content
-    let html = '';
-    if (content.title) {
-        html += `<h2 class="syntro-modal-title" style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: ${V.title};">${sanitizeHtml(content.title)}</h2>`;
-    }
-    html += `<div class="syntro-modal-body" style="color: ${V.text}; line-height: 1.5;">${sanitizeHtml(content.body)}</div>`;
-    // Add close button if enabled
-    if (dismiss?.closeButton !== false) {
-        html += `
-      <button class="syntro-modal-close" data-syntro-action="dismiss" style="
-        position: absolute;
-        top: 16px;
-        right: 16px;
-        background: none;
-        border: none;
-        cursor: pointer;
-        padding: 4px;
-        color: ${V.text};
-        opacity: 0.6;
-      " aria-label="Close">
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
-        </svg>
-      </button>
-    `;
-    }
-    // Add CTA buttons
-    if (ctaButtons && ctaButtons.length > 0) {
-        html += `<div class="syntro-modal-actions" style="display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end;">`;
-        for (const btn of ctaButtons) {
-            const isPrimary = btn.primary ?? false;
-            html += `
-        <button
-          class="syntro-modal-btn ${isPrimary ? 'syntro-modal-btn-primary' : ''}"
-          data-syntro-action="${sanitizeHtml(btn.actionId)}"
-          style="
-            padding: 10px 20px;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background 150ms ease;
-            ${isPrimary
-                ? `background: ${V.accent}; color: white; border: none;`
-                : `background: transparent; color: ${V.accent}; border: 1px solid currentColor; opacity: 0.7;`}
-          "
-        >
-          ${sanitizeHtml(btn.label)}
-        </button>
-      `;
-        }
-        html += `</div>`;
-    }
-    modal.innerHTML = html;
-    context.overlayRoot.appendChild(modal);
-    // Track state for waitFor
-    let actionClicked = null;
-    // Handle action button clicks
-    const actionBtns = modal.querySelectorAll('[data-syntro-action]');
-    const actionHandler = (e) => {
-        const btn = e.currentTarget;
-        const actionId = btn.getAttribute('data-syntro-action');
-        if (actionId) {
-            actionClicked = actionId;
-            context.publishEvent('action.modal_cta_clicked', {
-                actionId,
-            });
-            handle.destroy();
-        }
-    };
-    actionBtns.forEach((btn) => btn.addEventListener('click', actionHandler));
-    // Handle escape key
-    const onKey = (e) => {
-        if (e.key === 'Escape' && dismiss?.onEsc !== false) {
-            handle.destroy();
-        }
-    };
-    window.addEventListener('keydown', onKey);
-    // Handle click outside (on scrim)
-    const onScrimClick = () => {
-        if (!blocking) {
-            handle.destroy();
-        }
-    };
-    scrimEl.addEventListener('click', onScrimClick);
-    // Blocking mode - make siblings inert (except editor panel)
-    const originalInert = [];
-    if (blocking) {
-        Array.from(document.body.children).forEach((el) => {
-            if (el !== context.overlayRoot &&
-                el.getAttribute('inert') === null &&
-                !el.querySelector('[data-syntro-editor-panel]') &&
-                !el.hasAttribute('data-syntro-editor-panel')) {
-                el.setAttribute('inert', '');
-                originalInert.push(el);
-            }
-        });
-    }
-    // Set up timeout if specified
-    let timeoutId;
-    if (dismiss?.timeoutMs) {
-        timeoutId = setTimeout(() => {
-            handle.destroy();
-        }, dismiss.timeoutMs);
-    }
-    // Focus first focusable element
-    const focusableEls = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    if (focusableEls.length > 0) {
-        requestAnimationFrame(() => focusableEls[0].focus());
-    }
-    // Fade in
-    requestAnimationFrame(() => {
-        scrimEl.style.opacity = '1';
-        modal.style.opacity = '1';
-        modal.style.transform = 'translate(-50%, -50%) scale(1)';
-    });
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'overlays:modal',
-        size,
-        blocking,
-    });
-    const handle = {
-        destroy() {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-            window.removeEventListener('keydown', onKey);
-            scrimEl.removeEventListener('click', onScrimClick);
-            actionBtns.forEach((btn) => btn.removeEventListener('click', actionHandler));
-            // Restore inert state
-            originalInert.forEach((el) => el.removeAttribute('inert'));
-            // Fade out then remove
-            modal.style.pointerEvents = 'none';
-            scrimEl.style.pointerEvents = 'none';
-            modal.style.opacity = '0';
-            modal.style.transform = 'translate(-50%, -50%) scale(0.95)';
-            scrimEl.style.opacity = '0';
-            setTimeout(() => {
-                try {
-                    modal.remove();
-                }
-                catch {
-                    /* already detached */
-                }
-                try {
-                    scrimEl.remove();
-                }
-                catch {
-                    /* already detached */
-                }
-            }, 200);
-            context.publishEvent('action.modal_dismissed', {
-                actionClicked,
-            });
-        },
-    };
-    return {
-        cleanup: () => {
-            handle.destroy();
-        },
-    };
-};

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

@@ -1,41 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,131 +0,0 @@
-/**
- * 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

@@ -1,9 +0,0 @@
-/**
- * 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

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