@syntrologie/adapt-content 2.16.0 → 2.17.0

package/dist/sanitizer.js

@@ -1,95 +0,0 @@
-/**
- * HTML Sanitizer
- *
- * Sanitizes HTML to prevent XSS attacks.
- * Uses native Sanitizer API when available, falls back to whitelist approach.
- */
-const ALLOWED_TAGS = new Set([
-    'b',
-    'strong',
-    'i',
-    'em',
-    'u',
-    'span',
-    'div',
-    'p',
-    'br',
-    'ul',
-    'ol',
-    'li',
-    'code',
-    'pre',
-    'small',
-    'sup',
-    'sub',
-    'a',
-    'button',
-    // SVG elements (for inline Lucide icons in config HTML)
-    'svg',
-    'path',
-    'circle',
-    'line',
-    'polyline',
-    'polygon',
-    'rect',
-    'g',
-]);
-export function sanitizeHtml(html) {
-    // Try native Sanitizer API first
-    const hasNative = typeof window.Sanitizer === 'function';
-    if (hasNative) {
-        try {
-            const s = new window.Sanitizer({});
-            const frag = s.sanitizeToFragment(html);
-            const div = document.createElement('div');
-            div.append(frag);
-            return div.innerHTML;
-        }
-        catch {
-            // Fall through to manual sanitizer
-        }
-    }
-    // Conservative fallback sanitizer
-    const tpl = document.createElement('template');
-    tpl.innerHTML = html;
-    const root = tpl.content;
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
-    const toRemove = [];
-    while (walker.nextNode()) {
-        const el = walker.currentNode;
-        const tag = el.tagName.toLowerCase();
-        if (!ALLOWED_TAGS.has(tag)) {
-            toRemove.push(el);
-            continue;
-        }
-        // Remove dangerous attributes
-        for (const attr of Array.from(el.attributes)) {
-            const name = attr.name.toLowerCase();
-            const value = attr.value.trim().toLowerCase();
-            const isEvent = name.startsWith('on');
-            const isUrlAttr = name === 'href' || name === 'src' || name === 'formaction';
-            const isDangerousUrl = isUrlAttr &&
-                (value.startsWith('javascript:') ||
-                    value.startsWith('vbscript:') ||
-                    value.startsWith('data:text/html'));
-            if (isEvent || isDangerousUrl) {
-                el.removeAttribute(attr.name);
-            }
-        }
-    }
-    // Strip SVG elements that contained script children (XSS vector)
-    const svgs = Array.from(root.querySelectorAll('svg'));
-    for (const svg of svgs) {
-        if (toRemove.some((el) => svg.contains(el) && el.tagName.toLowerCase() === 'script')) {
-            toRemove.push(svg);
-        }
-    }
-    // Remove disallowed elements but keep their children
-    for (const el of toRemove) {
-        while (el.firstChild) {
-            el.parentNode?.insertBefore(el.firstChild, el);
-        }
-        el.remove();
-    }
-    return tpl.innerHTML;
-}

package/dist/summarize.js

@@ -1,88 +0,0 @@
-/**
- * Human-readable summary generation for content config changes.
- *
- * Pure functions — no DOM access, just string formatting from config data.
- */
-const MAX_TEXT_LEN = 40;
-/** Extract the CSS selector string from an anchorId object. */
-function resolveAnchorSelector(anchorId) {
-    if (!anchorId)
-        return '';
-    if (typeof anchorId === 'string')
-        return anchorId;
-    if (typeof anchorId === 'object')
-        return anchorId.selector ?? '';
-    return '';
-}
-/**
- * Convert a CSS selector into a human-friendly element description.
- */
-export function describeSelector(selector) {
-    if (!selector)
-        return '(no target)';
-    // ID selector: strip # and common prefixes
-    if (selector.startsWith('#')) {
-        let name = selector.slice(1);
-        const prefixes = ['hero-', 'main-', 'page-', 'app-', 'section-'];
-        for (const prefix of prefixes) {
-            if (name.startsWith(prefix)) {
-                name = name.slice(prefix.length);
-                break;
-            }
-        }
-        return truncate(name, 50);
-    }
-    // data-testid selector
-    const testIdMatch = selector.match(/\[data-testid="([^"]+)"\]/);
-    if (testIdMatch) {
-        return `${testIdMatch[1]} element`;
-    }
-    // Class selector or complex selector: keep as-is
-    return truncate(selector, 50);
-}
-function truncate(text, max) {
-    if (text.length <= max)
-        return text;
-    return `${text.slice(0, max)}...`;
-}
-function truncateQuoted(text, max) {
-    if (text.length <= max)
-        return `"${text}"`;
-    return `"${text.slice(0, max)}..."`;
-}
-/**
- * Generate a human-readable one-liner for a content config change.
- */
-export function summarizeContentChange(type, item) {
-    const desc = describeSelector(resolveAnchorSelector(item.anchorId));
-    switch (type) {
-        case 'textReplacements': {
-            const text = item.text || '';
-            return `Change ${desc} to ${truncateQuoted(text, MAX_TEXT_LEN)}`;
-        }
-        case 'attributeChanges': {
-            const attr = item.attr || '';
-            const value = item.value || '';
-            return `Set ${desc} ${attr} to ${truncateQuoted(value, MAX_TEXT_LEN)}`;
-        }
-        case 'styleChanges': {
-            const styles = item.styles || {};
-            const count = Object.keys(styles).length;
-            return `Restyle ${desc} (${count} ${count === 1 ? 'property' : 'properties'})`;
-        }
-        case 'htmlInsertions': {
-            const position = item.position || 'append';
-            return `Insert HTML ${position} ${desc}`;
-        }
-        case 'classAdditions': {
-            const className = item.className || '';
-            return `Add class "${className}" to ${desc}`;
-        }
-        case 'classRemovals': {
-            const className = item.className || '';
-            return `Remove class "${className}" from ${desc}`;
-        }
-        default:
-            return `Unknown change on ${desc}`;
-    }
-}

package/dist/types.js

@@ -1,7 +0,0 @@
-/**
- * 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/dist/utils/selectorGenerator.d.ts

@@ -1,6 +0,0 @@
-/**
- * Re-export selector utilities from shared-editor-ui.
- */
-export type { SelectorOptions } from '@syntrologie/shared-editor-ui';
-export { generateSelector, getElementDescription, validateSelector, } from '@syntrologie/shared-editor-ui';
-//# sourceMappingURL=selectorGenerator.d.ts.map

package/dist/utils/selectorGenerator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"selectorGenerator.d.ts","sourceRoot":"","sources":["../../src/utils/selectorGenerator.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,YAAY,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,+BAA+B,CAAC"}

package/dist/utils/selectorGenerator.js

@@ -1,4 +0,0 @@
-/**
- * Re-export selector utilities from shared-editor-ui.
- */
-export { generateSelector, getElementDescription, validateSelector, } from '@syntrologie/shared-editor-ui';

package/node_modules/@syntrologie/shared-editor-ui/dist/cn.d.ts

@@ -1,2 +0,0 @@
-export declare function cn(...classes: (string | false | null | undefined)[]): string;
-//# sourceMappingURL=cn.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/cn.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../src/cn.ts"],"names":[],"mappings":"AAAA,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAE5E"}

package/node_modules/@syntrologie/shared-editor-ui/dist/cn.js

@@ -1,3 +0,0 @@
-export function cn(...classes) {
-    return classes.filter(Boolean).join(' ');
-}

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts

@@ -1,34 +0,0 @@
-/**
- * AnchorPicker — Shared Element Picker Overlay
- *
- * Full-page overlay that lets the user hover and click to select a DOM element.
- * Returns the element, its CSS selector, and a human-readable description.
- *
- * Renders via createPortal to document.body. Uses inline styles (not Tailwind)
- * because it lives outside the editor's style scope.
- *
- * EXCEPTION: This component MUST stay on document.body (not in shadow root).
- * It uses document.elementFromPoint() to detect host page elements under the
- * cursor. If placed inside a shadow root, the overlay would block detection
- * of underlying host elements.
- *
- * Instructions / cancel UI should be rendered by the consumer in their own
- * panel — this component only provides the page overlay.
- */
-export interface PickedElement {
-    element: Element;
-    selector: string;
-    description: string;
-}
-export interface AnchorPickerProps {
-    isActive: boolean;
-    onPick: (picked: PickedElement) => void;
-    onCancel: () => void;
-    /** When true, clicks pass through to the page (no preventDefault/stopPropagation).
-     *  The consumer is responsible for capturing the pick via EventBus or other means.
-     *  Hover highlighting still works for visual feedback. */
-    passthroughClicks?: boolean;
-    excludeSelector?: string;
-}
-export declare function AnchorPicker({ isActive, onPick, onCancel, passthroughClicks, excludeSelector, }: AnchorPickerProps): import("react").ReactPortal | null;
-//# sourceMappingURL=AnchorPicker.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AnchorPicker.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAWH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;8DAE0D;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAKD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,iBAAyB,EACzB,eAAuJ,GACxJ,EAAE,iBAAiB,sCA2MnB"}

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.js

@@ -1,161 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * AnchorPicker — Shared Element Picker Overlay
- *
- * Full-page overlay that lets the user hover and click to select a DOM element.
- * Returns the element, its CSS selector, and a human-readable description.
- *
- * Renders via createPortal to document.body. Uses inline styles (not Tailwind)
- * because it lives outside the editor's style scope.
- *
- * EXCEPTION: This component MUST stay on document.body (not in shadow root).
- * It uses document.elementFromPoint() to detect host page elements under the
- * cursor. If placed inside a shadow root, the overlay would block detection
- * of underlying host elements.
- *
- * Instructions / cancel UI should be rendered by the consumer in their own
- * panel — this component only provides the page overlay.
- */
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { generateSelector, getElementDescription, validateSelector, } from '../utils/selectorGenerator';
-const HIGHLIGHT_COLOR = '#3b82f6';
-const HIGHLIGHT_BG = 'rgba(59, 130, 246, 0.1)';
-export function AnchorPicker({ isActive, onPick, onCancel, passthroughClicks = false, excludeSelector = '[data-syntro-editor-panel], [data-shadow-canvas-id], .syntro-tooltip, .syntro-modal, .syntro-highlight, [data-syntro-anchor-picker]', }) {
-    const [hoveredElement, setHoveredElement] = useState(null);
-    const [hoveredSelector, setHoveredSelector] = useState('');
-    const overlayRef = useRef(null);
-    const handleMouseMove = useCallback((e) => {
-        const overlay = overlayRef.current;
-        // In passthrough mode the overlay is already pointerEvents:'none',
-        // so elementFromPoint can see through it — no toggle needed.
-        // In non-passthrough mode, temporarily disable to detect elements underneath.
-        if (overlay && !passthroughClicks) {
-            overlay.style.pointerEvents = 'none';
-        }
-        const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
-        if (overlay && !passthroughClicks) {
-            overlay.style.pointerEvents = 'auto';
-        }
-        if (!elementAtPoint) {
-            setHoveredElement(null);
-            setHoveredSelector('');
-            return;
-        }
-        if (excludeSelector && elementAtPoint.closest(excludeSelector)) {
-            setHoveredElement(null);
-            setHoveredSelector('');
-            return;
-        }
-        if (['HTML', 'BODY', 'HEAD'].includes(elementAtPoint.tagName)) {
-            setHoveredElement(null);
-            setHoveredSelector('');
-            return;
-        }
-        setHoveredElement(elementAtPoint);
-        const selector = generateSelector(elementAtPoint);
-        setHoveredSelector(selector);
-    }, [excludeSelector, passthroughClicks]);
-    const handleClick = useCallback((e) => {
-        if (passthroughClicks)
-            return; // Let click propagate to PostHog
-        e.preventDefault();
-        e.stopPropagation();
-        if (hoveredElement && hoveredSelector) {
-            if (validateSelector(hoveredSelector, hoveredElement)) {
-                onPick({
-                    element: hoveredElement,
-                    selector: hoveredSelector,
-                    description: getElementDescription(hoveredElement),
-                });
-            }
-            else {
-                const newSelector = generateSelector(hoveredElement);
-                onPick({
-                    element: hoveredElement,
-                    selector: newSelector,
-                    description: getElementDescription(hoveredElement),
-                });
-            }
-        }
-    }, [passthroughClicks, hoveredElement, hoveredSelector, onPick]);
-    const handleKeyDown = useCallback((e) => {
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            onCancel();
-        }
-    }, [onCancel]);
-    useEffect(() => {
-        if (!isActive)
-            return;
-        document.addEventListener('mousemove', handleMouseMove, true);
-        // In passthrough mode, don't register click handler — let clicks reach PostHog
-        if (!passthroughClicks) {
-            document.addEventListener('click', handleClick, true);
-        }
-        document.addEventListener('keydown', handleKeyDown, true);
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove, true);
-            if (!passthroughClicks) {
-                document.removeEventListener('click', handleClick, true);
-            }
-            document.removeEventListener('keydown', handleKeyDown, true);
-        };
-    }, [isActive, passthroughClicks, handleMouseMove, handleClick, handleKeyDown]);
-    if (!isActive)
-        return null;
-    const rect = hoveredElement?.getBoundingClientRect();
-    return createPortal(_jsxs("div", { ref: overlayRef, "data-syntro-anchor-picker": true, style: {
-            position: 'fixed',
-            inset: 0,
-            cursor: 'crosshair',
-            zIndex: 2147483644,
-            pointerEvents: passthroughClicks ? 'none' : undefined,
-        }, children: [_jsx("div", { style: {
-                    position: 'absolute',
-                    inset: 0,
-                    background: 'rgba(0, 0, 0, 0.08)',
-                    pointerEvents: 'none',
-                } }), hoveredElement && rect && (_jsx("div", { style: {
-                    position: 'fixed',
-                    left: rect.left - 2,
-                    top: rect.top - 2,
-                    width: rect.width + 4,
-                    height: rect.height + 4,
-                    border: `2px solid ${HIGHLIGHT_COLOR}`,
-                    backgroundColor: HIGHLIGHT_BG,
-                    borderRadius: '4px',
-                    boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.2)',
-                    pointerEvents: 'none',
-                    transition: 'all 0.1s ease-out',
-                } })), hoveredElement && rect && (_jsxs("div", { className: "se-text-xs", style: {
-                    position: 'fixed',
-                    left: Math.max(8, Math.min(rect.left, window.innerWidth - 320)),
-                    top: Math.max(8, rect.top - 68),
-                    backgroundColor: '#1e293b',
-                    color: '#e2e8f0',
-                    padding: '8px 12px',
-                    borderRadius: '6px',
-                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
-                    zIndex: 1,
-                    fontFamily: 'monospace',
-                    maxWidth: '300px',
-                    pointerEvents: 'none',
-                }, children: [_jsx("div", { className: "se-text-xs", style: {
-                            textTransform: 'uppercase',
-                            letterSpacing: '0.05em',
-                            marginBottom: '4px',
-                            color: '#94a3b8',
-                        }, children: "Click to select" }), _jsx("div", { style: {
-                            color: '#38bdf8',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }, children: hoveredSelector }), _jsx("div", { style: {
-                            marginTop: '4px',
-                            color: '#cbd5e1',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }, children: getElementDescription(hoveredElement) })] }))] }), document.body);
-}

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts

@@ -1,84 +0,0 @@
-/**
- * AnchorPickerLit — Shared Element Picker Overlay (Lit web component).
- *
- * Full-page overlay that lets the user hover and click to select a DOM element.
- * Returns the element, its CSS selector, and a human-readable description
- * via custom events.
- *
- * The overlay is rendered into a portal div appended to document.body, NOT
- * into the component's own render root. This is necessary because the editor
- * panel applies `backdrop-filter: blur(...)` which, in Chrome, creates a new
- * containing block for `position: fixed` descendants. Without the portal, the
- * highlight box coordinates (from getBoundingClientRect, which are viewport-
- * relative) would be interpreted relative to the panel, causing the highlight
- * to appear far off from the actual hovered element.
- *
- * Lit port of AnchorPicker.tsx — preserves all behavior including:
- * - Mouse tracking with elementFromPoint detection
- * - Passthrough click mode for PostHog integration
- * - Element highlight with info tooltip
- * - Escape key cancellation
- * - Exclude selector filtering
- */
-import { LitElement } from 'lit';
-export interface PickedElement {
-    element: Element;
-    selector: string;
-    description: string;
-}
-export declare class AnchorPickerLit extends LitElement {
-    static properties: {
-        isActive: {
-            type: BooleanConstructor;
-            attribute: string;
-        };
-        passthroughClicks: {
-            type: BooleanConstructor;
-            attribute: string;
-        };
-        excludeSelector: {
-            type: StringConstructor;
-            attribute: string;
-        };
-        _hoveredElement: {
-            state: boolean;
-        };
-        _hoveredSelector: {
-            state: boolean;
-        };
-    };
-    isActive: boolean;
-    passthroughClicks: boolean;
-    excludeSelector: string;
-    private _hoveredElement;
-    private _hoveredSelector;
-    private _overlayEl;
-    private _portalDiv;
-    createRenderRoot(): this;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changed: Map<string, unknown>): void;
-    /**
-     * Create or update the body-level portal div.
-     * Rendering into document.body ensures position:fixed coordinates are
-     * relative to the viewport, not an ancestor with backdrop-filter.
-     */
-    private _syncPortal;
-    private _destroyPortal;
-    private _attachDocumentListeners;
-    private _detachDocumentListeners;
-    /**
-     * Resolve the shadow host this picker lives inside, if any. When the picker
-     * is mounted inside a shadow root (e.g. the editor SDK mounts inside
-     * `<smart-canvas>`'s shadow), `document.elementFromPoint` returns the shadow
-     * *host*, not the host page element beneath. Temporarily disabling pointer
-     * events on the host lets hit-testing fall through to the host page.
-     */
-    private _getShadowHost;
-    private _handleMouseMove;
-    private _handleClick;
-    private _handleKeyDown;
-    render(): symbol;
-    private _overlayTemplate;
-}
-//# sourceMappingURL=AnchorPickerLit.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AnchorPickerLit.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPickerLit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAQ,UAAU,EAAgC,MAAM,KAAK,CAAC;AAarE,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAiBD,qBAAa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,UAAU;;;;;;;;;;;;;;;;;;;MAOxB;IAEF,QAAQ,UAAS;IACjB,iBAAiB,UAAS;IAC1B,eAAe,EAAE,MAAM,CAA4B;IAGnD,OAAO,CAAC,eAAe,CAAwB;IAC/C,OAAO,CAAC,gBAAgB,CAAM;IAG9B,OAAO,CAAC,UAAU,CAA+B;IAGjD,OAAO,CAAC,UAAU,CAA+B;IAIxC,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAiBrD;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,wBAAwB;IAQhC;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,gBAAgB,CA+CtB;IAEF,OAAO,CAAC,YAAY,CAwBlB;IAEF,OAAO,CAAC,cAAc,CAUpB;IAMO,MAAM;IAIf,OAAO,CAAC,gBAAgB;CA0GzB"}