@syntrologie/runtime-sdk 0.2.0

package/dist/overlays/runtime/overlay/root.js

@@ -0,0 +1,165 @@
+let overlayRootEl = null;
+export function ensureOverlayRoot() {
+    if (overlayRootEl && document.body.contains(overlayRootEl))
+        return overlayRootEl;
+    let el = document.getElementById('syntro-overlays');
+    if (!el) {
+        el = document.createElement('div');
+        el.id = 'syntro-overlays';
+        Object.assign(el.style, {
+            position: 'fixed',
+            inset: '0',
+            zIndex: '2147483647',
+            pointerEvents: 'none'
+        });
+        document.body.appendChild(el);
+    }
+    overlayRootEl = el;
+    injectBaseStyles();
+    return overlayRootEl;
+}
+let stylesInjected = false;
+export function injectBaseStyles() {
+    if (stylesInjected)
+        return;
+    const css = `
+:root {
+  --syntro-surface: #111;
+  --syntro-fg: #fff;
+  --syntro-accent: #4f46e5;
+  --syntro-radius: 8px;
+  --syntro-shadow: 0 8px 24px rgba(0,0,0,.25);
+  --syntro-ring: #5b8cff;
+  --syntro-tooltip-bg: var(--syntro-surface, #0f172a);
+  --syntro-tooltip-fg: var(--syntro-fg, #fff);
+  --syntro-tooltip-radius: var(--syntro-radius, 12px);
+  --syntro-tooltip-padding: 12px 16px;
+  --syntro-tooltip-shadow: var(--syntro-shadow, 0 12px 32px rgba(15,23,42,.45));
+  --syntro-spotlight-backdrop: rgba(2,6,23,.55);
+}
+
+/* Tooltip container */
+.syntro-tooltip {
+  position: fixed;
+  background: var(--syntro-tooltip-bg);
+  color: var(--syntro-tooltip-fg);
+  border-radius: var(--syntro-tooltip-radius);
+  padding: var(--syntro-tooltip-padding);
+  box-shadow: var(--syntro-tooltip-shadow);
+  pointer-events: auto;
+  max-width: min(320px, 90vw);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  z-index: 2147483647;
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), 
+              transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Tooltip arrow */
+.syntro-tooltip-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  transform: rotate(45deg);
+  z-index: -1;
+}
+
+/* Tooltip content */
+.syntro-tt-title {
+  font-weight: 600;
+  font-size: 15px;
+  margin-bottom: 6px;
+}
+
+.syntro-tt-body {
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.syntro-tt-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 150ms;
+  padding: 4px;
+}
+
+.syntro-tt-close:hover {
+  opacity: 1;
+}
+
+/* Buttons inside tooltips inherit font */
+.syntro-tooltip button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+/* Spotlight scrim with fade animation */
+.syntro-spotlight-scrim {
+  position: fixed;
+  inset: 0;
+  background: var(--syntro-spotlight-backdrop, rgba(2,6,23,.55));
+  backdrop-filter: blur(2px);
+  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Spotlight ring with pulse animation */
+.syntro-spotlight-ring {
+  position: fixed;
+  border: 2px solid var(--syntro-ring, #5b8cff);
+  box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.25),
+              0 4px 12px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+  animation: syntro-ring-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes syntro-ring-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.25),
+                0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(91, 140, 255, 0.15),
+                0 4px 16px rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* Fade in animation for tooltip */
+@keyframes syntro-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+`;
+    const style = document.createElement('style');
+    style.setAttribute('data-syntro', 'base-overlay');
+    style.textContent = css;
+    document.head.appendChild(style);
+    stylesInjected = true;
+}
+// Inert helpers (polyfill loaded by caller if needed)
+export function setDocumentInertExcept(keepEl) {
+    const siblings = Array.from(document.body.children).filter((n) => n !== keepEl);
+    siblings.forEach((el) => el.setAttribute('inert', ''));
+}
+export function clearDocumentInert() {
+    Array.from(document.body.children).forEach((el) => el.removeAttribute('inert'));
+}
+//# sourceMappingURL=root.js.map

package/dist/overlays/runtime/overlay/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","sourceRoot":"","sources":["../../../../src/overlays/runtime/overlay/root.ts"],"names":[],"mappings":"AAAA,IAAI,aAAa,GAAuB,IAAI,CAAC;AAE7C,MAAM,UAAU,iBAAiB;IAC/B,IAAI,aAAa,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC;QAAE,OAAO,aAAa,CAAC;IACjF,IAAI,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAuB,CAAC;IAC1E,IAAI,CAAC,EAAE,EAAE,CAAC;QACR,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACnC,EAAE,CAAC,EAAE,GAAG,iBAAiB,CAAC;QAC1B,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;YACtB,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,YAAY;YACpB,aAAa,EAAE,MAAM;SACtB,CAAC,CAAC;QACH,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAChC,CAAC;IACD,aAAa,GAAG,EAAE,CAAC;IACnB,gBAAgB,EAAE,CAAC;IACnB,OAAO,aAAa,CAAC;AACvB,CAAC;AAED,IAAI,cAAc,GAAG,KAAK,CAAC;AAC3B,MAAM,UAAU,gBAAgB;IAC9B,IAAI,cAAc;QAAE,OAAO;IAC3B,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Hb,CAAC;IACA,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;IAClD,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,cAAc,GAAG,IAAI,CAAC;AACxB,CAAC;AAED,sDAAsD;AACtD,MAAM,UAAU,sBAAsB,CAAC,MAAmB;IACxD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;IAChF,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;AACzD,CAAC;AACD,MAAM,UAAU,kBAAkB;IAChC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;AAClF,CAAC"}

package/dist/overlays/runtime/overlay/runner.d.ts

@@ -0,0 +1,2 @@
+import type { CanvasRecipe, OverlayContext } from '../../types';
+export declare function runOverlays(recipe: CanvasRecipe, ctx: OverlayContext): Promise<() => void>;

package/dist/overlays/runtime/overlay/runner.js

@@ -0,0 +1,101 @@
+import { showTooltip } from './tooltip';
+import { showHighlight } from './highlight';
+export async function runOverlays(recipe, ctx) {
+    var _a;
+    if (recipe.routes && !routeMatches(recipe.routes, location.pathname))
+        return () => { };
+    const cleanups = [];
+    for (const step of recipe.steps) {
+        const el = await ctx.resolve(step.anchor);
+        if (!el) {
+            (_a = ctx.onEvent) === null || _a === void 0 ? void 0 : _a.call(ctx, 'syntro_anchor_missing', { stepId: step.id, anchor: step.anchor });
+            continue;
+        }
+        if (step.kind === 'tooltip') {
+            cleanups.push(runTooltip(step, el, ctx));
+        }
+        else if (step.kind === 'highlight') {
+            cleanups.push(runHighlight(step, el, ctx));
+        }
+    }
+    return () => {
+        cleanups.forEach((fn) => {
+            try {
+                fn();
+            }
+            catch { }
+        });
+    };
+}
+function routeMatches(routes, path) {
+    // simple contains/prefix; replace with real matcher as needed
+    return routes.some(r => r === path || path.startsWith(r));
+}
+function runTooltip(step, anchorEl, ctx) {
+    var _a, _b, _c, _d;
+    const html = tooltipHtml(step);
+    const handle = showTooltip(anchorEl, ctx.overlayRoot, {
+        html,
+        placement: (_a = step.placement) !== null && _a !== void 0 ? _a : 'top',
+        offsetPx: (_b = step.offsetPx) !== null && _b !== void 0 ? _b : 8,
+        blocking: !!step.blocking,
+        trigger: step.trigger,
+    });
+    (_c = ctx.onEvent) === null || _c === void 0 ? void 0 : _c.call(ctx, 'syntro_overlay_exposed', { kind: 'tooltip', stepId: step.id, recipeId: ctx.recipeId });
+    const timers = [];
+    if ((_d = step.dismiss) === null || _d === void 0 ? void 0 : _d.timeoutMs) {
+        const id = window.setTimeout(() => {
+            var _a;
+            handle.destroy();
+            (_a = ctx.onEvent) === null || _a === void 0 ? void 0 : _a.call(ctx, 'syntro_overlay_dismissed', { stepId: step.id, reason: 'timeout' });
+        }, step.dismiss.timeoutMs);
+        timers.push(id);
+    }
+    const closeBtn = handle.el.querySelector('[data-syntro-role="close"]');
+    const onClose = () => {
+        var _a;
+        handle.destroy();
+        (_a = ctx.onEvent) === null || _a === void 0 ? void 0 : _a.call(ctx, 'syntro_overlay_dismissed', { stepId: step.id, reason: 'close' });
+    };
+    closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.addEventListener('click', onClose);
+    return () => {
+        timers.forEach((id) => clearTimeout(id));
+        closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.removeEventListener('click', onClose);
+        handle.destroy();
+    };
+}
+function runHighlight(step, anchorEl, ctx) {
+    var _a, _b, _c, _d, _e;
+    const handle = showHighlight(anchorEl, ctx.overlayRoot, {
+        paddingPx: (_a = step.ring) === null || _a === void 0 ? void 0 : _a.paddingPx,
+        radiusPx: (_b = step.ring) === null || _b === void 0 ? void 0 : _b.radiusPx,
+        scrimOpacity: (_c = step.scrim) === null || _c === void 0 ? void 0 : _c.opacity,
+        ringColor: step.ringColor,
+        blocking: step.blocking,
+    });
+    (_d = ctx.onEvent) === null || _d === void 0 ? void 0 : _d.call(ctx, 'syntro_overlay_exposed', { kind: 'highlight', stepId: step.id, recipeId: ctx.recipeId });
+    const timers = [];
+    if ((_e = step.dismiss) === null || _e === void 0 ? void 0 : _e.timeoutMs) {
+        const id = window.setTimeout(() => {
+            var _a;
+            handle.destroy();
+            (_a = ctx.onEvent) === null || _a === void 0 ? void 0 : _a.call(ctx, 'syntro_overlay_dismissed', { stepId: step.id, reason: 'timeout' });
+        }, step.dismiss.timeoutMs);
+        timers.push(id);
+    }
+    return () => {
+        timers.forEach((id) => clearTimeout(id));
+        handle.destroy();
+    };
+}
+function tooltipHtml(step) {
+    var _a, _b;
+    const title = step.content.title ? `<div class="syntro-tt-title">${escapeHtml(step.content.title)}</div>` : '';
+    const body = `<div class="syntro-tt-body">${escapeHtml(step.content.body)}</div>`;
+    const close = ((_b = (_a = step.dismiss) === null || _a === void 0 ? void 0 : _a.closeButton) !== null && _b !== void 0 ? _b : true) ? `<button data-syntro-role="close" class="syntro-tt-close" aria-label="Close">×</button>` : '';
+    return `<div class="syntro-tt">${title}${body}${close}</div>`;
+}
+function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+}
+//# sourceMappingURL=runner.js.map

package/dist/overlays/runtime/overlay/runner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runner.js","sourceRoot":"","sources":["../../../../src/overlays/runtime/overlay/runner.ts"],"names":[],"mappings":"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"}

package/dist/overlays/runtime/overlay/tooltip.d.ts

@@ -0,0 +1,14 @@
+import { Placement } from '@floating-ui/dom';
+export type TooltipHandle = {
+    destroy(): void;
+    el: HTMLElement;
+};
+type PlacementOption = Placement | "auto";
+export declare function showTooltip(anchorEl: HTMLElement, overlayRoot: HTMLElement, opts: {
+    html: string;
+    placement?: PlacementOption;
+    offsetPx?: number;
+    blocking?: boolean;
+    trigger?: 'immediate' | 'hover' | 'click';
+}): TooltipHandle;
+export {};

package/dist/overlays/runtime/overlay/tooltip.js

@@ -0,0 +1,174 @@
+import { computePosition, autoUpdate, offset, flip, shift, hide, arrow as arrowMiddleware } from '@floating-ui/dom';
+import { sanitizeWithFallback } from '../../../hostPatcher/core/sanitizer';
+export function showTooltip(anchorEl, overlayRoot, opts) {
+    var _a;
+    const div = document.createElement('div');
+    div.className = 'syntro-tooltip';
+    div.setAttribute('role', 'tooltip');
+    // Sanitize HTML to prevent XSS
+    div.innerHTML = sanitizeWithFallback(opts.html);
+    // Create arrow element
+    const arrowEl = document.createElement('div');
+    arrowEl.className = 'syntro-tooltip-arrow';
+    div.appendChild(arrowEl);
+    overlayRoot.appendChild(div);
+    const middleware = [
+        offset((_a = opts.offsetPx) !== null && _a !== void 0 ? _a : 8),
+        flip(),
+        shift({ padding: 8 }),
+        hide(),
+        arrowMiddleware({ element: arrowEl })
+    ];
+    const placement = opts.placement && opts.placement !== 'auto' ? opts.placement : 'top';
+    const cleanup = autoUpdate(anchorEl, div, async () => {
+        const result = await computePosition(anchorEl, div, {
+            placement,
+            middleware
+        });
+        const { x, y, strategy, middlewareData, placement: finalPlacement } = result;
+        Object.assign(div.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+            position: strategy
+        });
+        // Position arrow
+        if (middlewareData.arrow) {
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+            const side = finalPlacement.split('-')[0];
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[side];
+            Object.assign(arrowEl.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: '-4px',
+            });
+            // Set arrow rotation based on placement
+            const rotation = {
+                top: '0deg',
+                right: '90deg',
+                bottom: '180deg',
+                left: '270deg',
+            }[side] || '0deg';
+            arrowEl.style.transform = `rotate(${rotation})`;
+        }
+    });
+    const onKey = (e) => {
+        if (e.key === 'Escape')
+            handle.destroy();
+    };
+    window.addEventListener('keydown', onKey);
+    // Handle blocking mode (focus trap + inert)
+    let originalInert = [];
+    let focusableEls = [];
+    if (opts.blocking) {
+        // Make all siblings inert
+        Array.from(document.body.children).forEach((el) => {
+            if (el !== overlayRoot && el.getAttribute('inert') === null) {
+                el.setAttribute('inert', '');
+                originalInert.push(el.id || el.tagName);
+            }
+        });
+        // Setup focus trap
+        focusableEls = Array.from(div.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+        if (focusableEls.length > 0) {
+            const firstFocusable = focusableEls[0];
+            const lastFocusable = focusableEls[focusableEls.length - 1];
+            const trapFocus = (e) => {
+                if (e.key !== 'Tab')
+                    return;
+                if (e.shiftKey) {
+                    if (document.activeElement === firstFocusable) {
+                        lastFocusable.focus();
+                        e.preventDefault();
+                    }
+                }
+                else {
+                    if (document.activeElement === lastFocusable) {
+                        firstFocusable.focus();
+                        e.preventDefault();
+                    }
+                }
+            };
+            div.addEventListener('keydown', trapFocus);
+            requestAnimationFrame(() => firstFocusable.focus());
+        }
+    }
+    const attachTrigger = () => {
+        if (opts.trigger === 'hover') {
+            const enter = () => {
+                div.style.visibility = 'visible';
+                div.style.opacity = '1';
+            };
+            const leave = () => {
+                div.style.visibility = 'hidden';
+                div.style.opacity = '0';
+            };
+            // Start hidden for hover
+            div.style.visibility = 'hidden';
+            div.style.opacity = '0';
+            div.style.transition = 'opacity 200ms ease, visibility 200ms';
+            anchorEl.addEventListener('mouseenter', enter);
+            anchorEl.addEventListener('mouseleave', leave);
+            anchorEl.addEventListener('focus', enter);
+            anchorEl.addEventListener('blur', leave);
+            return () => {
+                anchorEl.removeEventListener('mouseenter', enter);
+                anchorEl.removeEventListener('mouseleave', leave);
+                anchorEl.removeEventListener('focus', enter);
+                anchorEl.removeEventListener('blur', leave);
+            };
+        }
+        if (opts.trigger === 'click') {
+            const toggle = () => {
+                const isVisible = div.style.visibility === 'visible';
+                if (isVisible) {
+                    handle.destroy();
+                }
+                else {
+                    div.style.visibility = 'visible';
+                    div.style.opacity = '1';
+                }
+            };
+            div.style.visibility = 'hidden';
+            div.style.opacity = '0';
+            div.style.transition = 'opacity 200ms ease, visibility 200ms';
+            anchorEl.addEventListener('click', toggle);
+            return () => anchorEl.removeEventListener('click', toggle);
+        }
+        // Immediate - fade in on mount
+        div.style.opacity = '0';
+        div.style.transition = 'opacity 200ms ease';
+        requestAnimationFrame(() => {
+            div.style.opacity = '1';
+        });
+        return () => { };
+    };
+    const removeTrigger = attachTrigger();
+    const handle = {
+        el: div,
+        destroy() {
+            cleanup();
+            removeTrigger();
+            window.removeEventListener('keydown', onKey);
+            // Restore inert state
+            if (opts.blocking) {
+                Array.from(document.body.children).forEach((el) => {
+                    if (el !== overlayRoot) {
+                        el.removeAttribute('inert');
+                    }
+                });
+            }
+            // Fade out then remove
+            div.style.opacity = '0';
+            setTimeout(() => div.remove(), 200);
+        }
+    };
+    return handle;
+}
+//# sourceMappingURL=tooltip.js.map

package/dist/overlays/runtime/overlay/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/overlays/runtime/overlay/tooltip.ts"],"names":[],"mappings":"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"}

package/dist/overlays/runtime/utils/dom.d.ts

@@ -0,0 +1,2 @@
+export declare function isVisible(el: HTMLElement): boolean;
+export declare function scrollIntoViewIfNeeded(el: HTMLElement): void;

package/dist/overlays/runtime/utils/dom.js

@@ -0,0 +1,9 @@
+export function isVisible(el) {
+    const rect = el.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0 && rect.bottom >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight);
+}
+export function scrollIntoViewIfNeeded(el) {
+    if (!isVisible(el))
+        el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+}
+//# sourceMappingURL=dom.js.map

package/dist/overlays/runtime/utils/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../../../src/overlays/runtime/utils/dom.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,SAAS,CAAC,EAAe;IACvC,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;IACxC,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;AAC5I,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,EAAe;IACpD,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;QAAE,EAAE,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;AACnG,CAAC"}