@syntrologie/adapt-overlays 0.0.0-semantically-released

package/dist/tooltip.js

@@ -0,0 +1,220 @@
+/**
+ * Tooltip Overlay
+ *
+ * Creates a positioned tooltip near an element using Floating UI.
+ */
+import { computePosition, autoUpdate, offset, flip, shift, hide, arrow as arrowMiddleware, } from '@floating-ui/dom';
+import { sanitizeHtml } from './sanitizer';
+/**
+ * For large elements (larger than viewport), create a virtual anchor
+ * at the center of the visible portion.
+ */
+function getAnchorReference(anchorEl) {
+    const rect = anchorEl.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const isLargeElement = rect.width > viewportWidth * 0.8 || rect.height > viewportHeight * 0.8;
+    if (!isLargeElement) {
+        return anchorEl;
+    }
+    const visibleLeft = Math.max(rect.left, 0);
+    const visibleTop = Math.max(rect.top, 0);
+    const visibleRight = Math.min(rect.right, viewportWidth);
+    const visibleBottom = Math.min(rect.bottom, viewportHeight);
+    const centerX = (visibleLeft + visibleRight) / 2;
+    const centerY = (visibleTop + visibleBottom) / 2;
+    return {
+        getBoundingClientRect() {
+            return {
+                width: 0,
+                height: 0,
+                x: centerX,
+                y: centerY,
+                top: centerY,
+                left: centerX,
+                right: centerX,
+                bottom: centerY,
+            };
+        },
+    };
+}
+export function showTooltip(anchorEl, overlayRoot, opts) {
+    // Scroll anchor into view for non-large elements
+    const rect = anchorEl.getBoundingClientRect();
+    const isLargeElement = rect.width > window.innerWidth * 0.8 || rect.height > window.innerHeight * 0.8;
+    if (!isLargeElement) {
+        anchorEl.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+    }
+    const div = document.createElement('div');
+    div.className = 'syntro-tooltip';
+    div.setAttribute('role', 'tooltip');
+    div.innerHTML = sanitizeHtml(opts.html);
+    // Handle action button clicks
+    const actionBtns = div.querySelectorAll('[data-syntro-action]');
+    const actionHandler = (e) => {
+        const btn = e.currentTarget;
+        const actionId = btn.getAttribute('data-syntro-action');
+        if (actionId && opts.onAction) {
+            opts.onAction(actionId);
+        }
+    };
+    actionBtns.forEach((btn) => btn.addEventListener('click', actionHandler));
+    // Create arrow element
+    const arrowEl = document.createElement('div');
+    arrowEl.className = 'syntro-tooltip-arrow';
+    div.appendChild(arrowEl);
+    overlayRoot.appendChild(div);
+    const middleware = [
+        offset(opts.offsetPx ?? 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 currentAnchorRef = getAnchorReference(anchorEl);
+        const result = await computePosition(currentAnchorRef, 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',
+            };
+            Object.assign(arrowEl.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide[side]]: '-4px',
+            });
+            const rotation = {
+                top: '0deg',
+                right: '90deg',
+                bottom: '180deg',
+                left: '270deg',
+            };
+            arrowEl.style.transform = `rotate(${rotation[side] || '0deg'})`;
+        }
+    });
+    const onKey = (e) => {
+        if (e.key === 'Escape')
+            handle.destroy();
+    };
+    window.addEventListener('keydown', onKey);
+    // Handle blocking mode
+    const originalInert = [];
+    if (opts.blocking) {
+        Array.from(document.body.children).forEach((el) => {
+            if (el !== overlayRoot && el.getAttribute('inert') === null) {
+                el.setAttribute('inert', '');
+                originalInert.push(el.id || el.tagName);
+            }
+        });
+        const 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';
+            };
+            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);
+            actionBtns.forEach((btn) => btn.removeEventListener('click', actionHandler));
+            if (opts.blocking) {
+                Array.from(document.body.children).forEach((el) => {
+                    if (el !== overlayRoot) {
+                        el.removeAttribute('inert');
+                    }
+                });
+            }
+            div.style.opacity = '0';
+            setTimeout(() => div.remove(), 200);
+        },
+    };
+    return handle;
+}

package/dist/types.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Types from @syntrologie/runtime-sdk
+ *
+ * Minimal type definitions for building this app independently.
+ * These match the types exported from @syntrologie/runtime-sdk/types.
+ */
+import type { Placement } from '@floating-ui/dom';
+export interface EditorPanelProps {
+    config: Record<string, unknown>;
+    onChange: (config: Record<string, unknown>) => void;
+    editor: {
+        setDirty: (dirty: boolean) => void;
+        navigateHome: () => Promise<boolean>;
+        save: () => Promise<void>;
+        publish: (captureScreenshot?: boolean) => Promise<void>;
+    };
+    platformClient?: unknown;
+}
+export interface HighlightStyle {
+    color?: string;
+    scrimOpacity?: number;
+    paddingPx?: number;
+    radiusPx?: number;
+}
+export type BadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** CTA button configuration for tooltips/modals */
+export interface CtaButton {
+    label: string;
+    actionId: string;
+    primary?: boolean;
+}
+/** Modal content configuration */
+export interface ModalContent {
+    title?: string;
+    body: string;
+}
+export interface TooltipContent {
+    title?: string;
+    body: string;
+    cta?: {
+        label: string;
+        action: unknown;
+    };
+    ctaButtons?: CtaButton[];
+}
+export type TooltipTrigger = 'immediate' | 'hover' | 'click';
+interface BaseAction {
+    label?: string;
+}
+export interface HighlightAction extends BaseAction {
+    kind: 'overlays:highlight';
+    anchorId: string;
+    style?: HighlightStyle;
+    /** Duration in ms before auto-cleanup (for use in sequences) */
+    duration?: number;
+}
+export interface PulseAction extends BaseAction {
+    kind: 'overlays:pulse';
+    anchorId: string;
+    duration?: number;
+}
+export interface BadgeAction extends BaseAction {
+    kind: 'overlays:badge';
+    anchorId: string;
+    content: string;
+    position?: BadgePosition;
+}
+/** Tooltip lifecycle - when the action completes (for sequences) */
+export type TooltipWaitFor = 'dismissed' | 'cta-click' | `timeout:${number}`;
+export interface TooltipAction extends BaseAction {
+    kind: 'overlays:tooltip';
+    anchorId: string;
+    content: TooltipContent;
+    trigger?: TooltipTrigger;
+    placement?: Placement;
+    /** When the action completes (for sequences). Publishes event to EventBus. */
+    waitFor?: TooltipWaitFor;
+}
+/** Modal lifecycle - when the action completes (for sequences) */
+export type ModalWaitFor = 'dismissed' | 'cta-click' | `timeout:${number}`;
+export interface ModalAction extends BaseAction {
+    kind: 'overlays:modal';
+    content: ModalContent;
+    size?: 'sm' | 'md' | 'lg';
+    blocking?: boolean;
+    scrim?: {
+        opacity?: number;
+    };
+    dismiss?: {
+        onEsc?: boolean;
+        closeButton?: boolean;
+        timeoutMs?: number;
+    };
+    ctaButtons?: CtaButton[];
+    /** When the action completes (for sequences). Publishes event to EventBus. */
+    waitFor?: ModalWaitFor;
+}
+export type ExecutorCleanup = () => void | Promise<void>;
+export type ExecutorUpdate = (changes: Record<string, unknown>) => void | Promise<void>;
+export interface ExecutorResult {
+    cleanup: ExecutorCleanup;
+    updateFn?: ExecutorUpdate;
+}
+export interface ExecutorContext {
+    overlayRoot: HTMLElement;
+    resolveAnchor: (anchorId: string) => HTMLElement | null;
+    generateId: () => string;
+    publishEvent: (name: string, props?: Record<string, unknown>) => void;
+    adaptiveId?: string;
+}
+export type ActionExecutor<T> = (action: T, context: ExecutorContext) => Promise<ExecutorResult>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

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

package/dist/types.js

@@ -0,0 +1,7 @@
+/**
+ * Types from @syntrologie/runtime-sdk
+ *
+ * Minimal type definitions for building this app independently.
+ * These match the types exported from @syntrologie/runtime-sdk/types.
+ */
+export {};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@syntrologie/adapt-overlays",
+  "version": "0.0.0-semantically-released",
+  "description": "Adaptive Overlays app - Visual overlays for tooltips, highlights, badges, and pulses",
+  "license": "Proprietary",
+  "private": false,
+  "author": "Syntrologie <eng@syntrologie.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SyntropyForge/amazing-demos.git",
+    "directory": "tech-core/sdks/adaptives/adaptive-overlays"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    "./runtime": {
+      "types": "./dist/runtime.d.ts",
+      "import": "./dist/runtime.js"
+    },
+    "./schema": {
+      "types": "./dist/schema.d.ts",
+      "import": "./dist/schema.js"
+    },
+    "./editor": {
+      "types": "./dist/editor.d.ts",
+      "import": "./dist/editor.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.0"
+  },
+  "peerDependencies": {
+    "@syntrologie/runtime-sdk": "^2.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "zod": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "typescript": "^5.0.0",
+    "zod": "^3.25.0"
+  }
+}