@syntrologie/adapt-overlays 0.0.0-semantically-released

package/dist/editor.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Adaptive Overlays - Editor Module
+ *
+ * Editor panel for configuring visual overlays.
+ */
+import type { EditorPanelProps } from './types';
+/**
+ * Overlays editor panel component.
+ */
+export declare function OverlaysEditor({ config: _config, onChange: _onChange, editor: _editor, }: EditorPanelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Editor module configuration.
+ */
+export declare const editor: {
+    panel: {
+        title: string;
+        icon: string;
+        description: string;
+    };
+    component: typeof OverlaysEditor;
+};
+//# sourceMappingURL=editor.d.ts.map

package/dist/editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,SAAS,EACnB,MAAM,EAAE,OAAO,GAChB,EAAE,gBAAgB,2CAOlB;AAED;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC"}

package/dist/editor.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Overlays editor panel component.
+ */
+export function OverlaysEditor({ config: _config, onChange: _onChange, editor: _editor, }) {
+    return (_jsxs("div", { className: "syntro-overlays-editor", children: [_jsx("p", { children: "Overlays editor coming soon..." }), _jsx("p", { children: "Configure tooltips, highlights, badges, and pulse effects." })] }));
+}
+/**
+ * Editor module configuration.
+ */
+export const editor = {
+    panel: {
+        title: 'Overlays',
+        icon: '💬',
+        description: 'Tooltips and visual highlights',
+    },
+    component: OverlaysEditor,
+};

package/dist/highlight.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Highlight Overlay
+ *
+ * Creates a spotlight effect around an element with a scrim backdrop.
+ */
+export type HighlightHandle = {
+    destroy(): void;
+};
+export interface HighlightOptions {
+    paddingPx?: number;
+    radiusPx?: number;
+    scrimOpacity?: number;
+    ringColor?: string;
+    blocking?: boolean;
+    onClickOutside?: boolean;
+    onEsc?: boolean;
+}
+export declare function showHighlight(anchorEl: HTMLElement, overlayRoot: HTMLElement, opts?: HighlightOptions): HighlightHandle;
+//# sourceMappingURL=highlight.d.ts.map

package/dist/highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../src/highlight.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,MAAM,MAAM,eAAe,GAAG;IAAE,OAAO,IAAI,IAAI,CAAA;CAAE,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,WAAW,EACxB,IAAI,CAAC,EAAE,gBAAgB,GACtB,eAAe,CAkKjB"}

package/dist/highlight.js

@@ -0,0 +1,156 @@
+/**
+ * Highlight Overlay
+ *
+ * Creates a spotlight effect around an element with a scrim backdrop.
+ */
+const supportsPathClip = typeof CSS !== 'undefined' && CSS.supports?.('clip-path', "path('M0 0 H1 V1 Z')");
+export function showHighlight(anchorEl, overlayRoot, opts) {
+    const padding = opts?.paddingPx ?? 12;
+    const radius = opts?.radiusPx ?? 12;
+    const opacity = Math.min(Math.max(opts?.scrimOpacity ?? 0.55, 0), 1);
+    const ringColor = opts?.ringColor ?? 'var(--syntro-ring, #5b8cff)';
+    const blocking = opts?.blocking ?? false;
+    const onClickOutside = opts?.onClickOutside ?? true;
+    const onEsc = opts?.onEsc ?? true;
+    const rootStyles = getComputedStyle(document.documentElement);
+    const tokenScrim = rootStyles.getPropertyValue('--syntro-spotlight-backdrop').trim();
+    const tokenRing = rootStyles.getPropertyValue('--syntro-ring').trim();
+    const scrim = document.createElement('div');
+    scrim.className = 'syntro-spotlight-scrim';
+    const needsPointerEvents = blocking || onClickOutside;
+    Object.assign(scrim.style, {
+        position: 'fixed',
+        inset: '0',
+        zIndex: '2147483646',
+        pointerEvents: needsPointerEvents ? 'auto' : 'none',
+        background: tokenScrim || `rgba(2, 6, 23, ${opacity})`,
+        transition: 'opacity 220ms ease',
+        opacity: '0',
+    });
+    overlayRoot.appendChild(scrim);
+    requestAnimationFrame(() => (scrim.style.opacity = '1'));
+    const ring = document.createElement('div');
+    ring.className = 'syntro-spotlight-ring';
+    Object.assign(ring.style, {
+        position: 'fixed',
+        pointerEvents: 'none',
+        borderRadius: `${radius}px`,
+        border: `2px solid ${ringColor || tokenRing || '#5b8cff'}`,
+        boxShadow: `0 0 0 4px rgba(255,255,255,0.35)`,
+        zIndex: '2147483647',
+        transition: 'all 220ms cubic-bezier(0.16,1,0.3,1)',
+    });
+    overlayRoot.appendChild(ring);
+    const fallbackSlices = [];
+    if (!supportsPathClip) {
+        for (let i = 0; i < 4; i++) {
+            const slice = document.createElement('div');
+            slice.style.position = 'fixed';
+            slice.style.background = 'inherit';
+            fallbackSlices.push(slice);
+            scrim.appendChild(slice);
+        }
+    }
+    const setClipPath = (path) => {
+        scrim.style.clipPath = path;
+        scrim.style.webkitClipPath = path;
+    };
+    const update = () => {
+        const rect = anchorEl.getBoundingClientRect();
+        const x = Math.max(0, rect.left - padding);
+        const y = Math.max(0, rect.top - padding);
+        const w = Math.min(window.innerWidth, rect.width + padding * 2);
+        const h = Math.min(window.innerHeight, rect.height + padding * 2);
+        Object.assign(ring.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+            width: `${w}px`,
+            height: `${h}px`,
+        });
+        if (supportsPathClip) {
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            const r = Math.min(radius, w / 2, h / 2);
+            const outer = `M 0 0 L ${vw} 0 L ${vw} ${vh} L 0 ${vh} Z`;
+            const inner = `M ${x + r} ${y} ` +
+                `A ${r} ${r} 0 0 0 ${x} ${y + r} ` +
+                `L ${x} ${y + h - r} ` +
+                `A ${r} ${r} 0 0 0 ${x + r} ${y + h} ` +
+                `L ${x + w - r} ${y + h} ` +
+                `A ${r} ${r} 0 0 0 ${x + w} ${y + h - r} ` +
+                `L ${x + w} ${y + r} ` +
+                `A ${r} ${r} 0 0 0 ${x + w - r} ${y} ` +
+                `L ${x + r} ${y} ` +
+                `Z`;
+            setClipPath(`path('${outer} ${inner}')`);
+        }
+        else {
+            const [top, right, bottom, left] = fallbackSlices;
+            Object.assign(top.style, {
+                left: '0px',
+                top: '0px',
+                width: '100vw',
+                height: `${y}px`,
+            });
+            Object.assign(bottom.style, {
+                left: '0px',
+                top: `${y + h}px`,
+                width: '100vw',
+                height: `${Math.max(0, window.innerHeight - (y + h))}px`,
+            });
+            Object.assign(left.style, {
+                left: '0px',
+                top: `${y}px`,
+                width: `${x}px`,
+                height: `${h}px`,
+            });
+            Object.assign(right.style, {
+                left: `${x + w}px`,
+                top: `${y}px`,
+                width: `${Math.max(0, window.innerWidth - (x + w))}px`,
+                height: `${h}px`,
+            });
+        }
+    };
+    const ro = new ResizeObserver(() => requestAnimationFrame(update));
+    ro.observe(anchorEl);
+    const onScroll = () => requestAnimationFrame(update);
+    const onResize = () => requestAnimationFrame(update);
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onResize);
+    const onKey = (e) => {
+        if (e.key === 'Escape' && onEsc)
+            handle.destroy();
+    };
+    if (onEsc) {
+        window.addEventListener('keydown', onKey);
+    }
+    const onClick = (event) => {
+        if (blocking) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else if (onClickOutside) {
+            handle.destroy();
+        }
+    };
+    scrim.addEventListener('click', onClick);
+    const handle = {
+        destroy() {
+            ro.disconnect();
+            window.removeEventListener('scroll', onScroll, true);
+            window.removeEventListener('resize', onResize);
+            if (onEsc) {
+                window.removeEventListener('keydown', onKey);
+            }
+            scrim.removeEventListener('click', onClick);
+            scrim.style.opacity = '0';
+            setTimeout(() => {
+                scrim.remove();
+                ring.remove();
+            }, 220);
+        },
+    };
+    update();
+    return handle;
+}

package/dist/modal.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Modal Executor
+ *
+ * Displays a centered modal dialog with optional CTA buttons.
+ */
+import type { ModalAction, ActionExecutor } from './types';
+/**
+ * Execute a modal action
+ */
+export declare const executeModal: ActionExecutor<ModalAction>;
+//# sourceMappingURL=modal.d.ts.map

package/dist/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAkB,cAAc,EAAE,MAAM,SAAS,CAAC;AAG3E;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CAoNpD,CAAC"}

package/dist/modal.js

@@ -0,0 +1,194 @@
+/**
+ * Modal Executor
+ *
+ * Displays a centered modal dialog with optional CTA buttons.
+ */
+import { sanitizeHtml } from './sanitizer';
+/**
+ * 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: white;
+    border-radius: 12px;
+    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: #111827;">${sanitizeHtml(content.title)}</h2>`;
+    }
+    html += `<div class="syntro-modal-body" style="color: #4b5563; 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: #6b7280;
+      " 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: #4f46e5; color: white; border: none;'
+                : 'background: white; color: #374151; border: 1px solid #d1d5db;'}
+          "
+        >
+          ${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,
+            });
+            if (actionId === 'dismiss') {
+                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
+    const originalInert = [];
+    if (blocking) {
+        Array.from(document.body.children).forEach((el) => {
+            if (el !== context.overlayRoot && el.getAttribute('inert') === null) {
+                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.opacity = '0';
+            modal.style.transform = 'translate(-50%, -50%) scale(0.95)';
+            scrimEl.style.opacity = '0';
+            setTimeout(() => {
+                modal.remove();
+                scrimEl.remove();
+            }, 200);
+            context.publishEvent('action.modal_dismissed', {
+                actionClicked,
+            });
+        },
+    };
+    return {
+        cleanup: () => {
+            handle.destroy();
+        },
+    };
+};

package/dist/runtime.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Adaptive Overlays - Runtime Module
+ *
+ * Visual overlay actions: highlight, pulse, badge, tooltip.
+ */
+import type { HighlightAction, PulseAction, BadgeAction, TooltipAction, ActionExecutor } from './types';
+import { executeModal } from './modal';
+export { executeModal };
+/**
+ * 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>;
+}];
+/**
+ * App runtime manifest.
+ */
+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>;
+    }];
+};
+//# sourceMappingURL=runtime.d.ts.map

package/dist/runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,WAAW,EACX,aAAa,EAEb,cAAc,EACf,MAAM,SAAS,CAAC;AAIjB,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,OAAO,EAAE,YAAY,EAAE,CAAC;AAMxB;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,eAAe,CA8B5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CAqDpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CAsFpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CA4ExD,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;EAMZ,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;CAMnB,CAAC"}