@syntrologie/adapt-content 2.8.0-canary.62 → 2.8.0-canary.621

package/dist/content-editor-ui.js

@@ -1,291 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Adaptive Content - Editor UI Component
- *
- * Main editor component with tab switching, item selection, form inputs,
- * save/publish, and highlight on page.
- */
-import { DetectionBadge, DismissedSection, EditorBody, EditorCard, EditorFooter, EditorHeader, EditorInput, EditorLayout, EditorSelect, EditorTextarea, EmptyState, GroupHeader, } from '@syntrologie/shared-editor-ui';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { AnchorPicker } from './components/AnchorPicker';
-import { filterConfig, flattenItems, parseItemKey, resolveAnchorRoute, resolveAnchorSelector, SECTION_ICON_MAP, savePendingHighlight, useAnchorDetection, } from './content-editor-state';
-// ============================================================================
-// Section Icon Component
-// ============================================================================
-/** Renders the appropriate Lucide icon for a section type */
-function SectionIcon({ section, className }) {
-    const IconComponent = SECTION_ICON_MAP[section];
-    return _jsx(IconComponent, { size: 16, className: className });
-}
-// ============================================================================
-// ContentEditor Component
-// ============================================================================
-export function ContentEditor({ config, onChange, editor }) {
-    const typedConfig = config;
-    const [dismissedKeys, setDismissedKeys] = useState(() => editor.getDismissedKeys?.() ?? new Set());
-    const [editingKey, setEditingKey] = useState(null);
-    const [, setPreviewMode] = useState('after');
-    // Sync dismissed keys back to navigation context on every change
-    useEffect(() => {
-        editor.setDismissedKeys?.(dismissedKeys);
-    }, [dismissedKeys, editor]);
-    // Create mode state
-    const [createMode, setCreateMode] = useState(null);
-    const [createAnchorId, setCreateAnchorId] = useState('');
-    const [createText, setCreateText] = useState('');
-    const [createDescription, setCreateDescription] = useState('');
-    // React to global before/after toggle from the panel
-    // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally omitted — adding config/typedConfig/previewConfig would cause infinite re-renders since previewConfig triggers state updates
-    useEffect(() => {
-        const mode = editor.previewMode;
-        if (!mode)
-            return;
-        if (mode === 'before') {
-            // Remove all content changes — push a config with every item filtered out
-            const allKeys = new Set(flattenItems(typedConfig).map((item) => item.key));
-            const empty = filterConfig(typedConfig, allKeys);
-            editor.previewConfig(empty);
-        }
-        else {
-            // Restore the full config
-            editor.previewConfig(config);
-        }
-    }, [editor.previewMode]);
-    // Consume initialEditKey from accordion navigation on mount
-    const initialConsumed = useRef(false);
-    useEffect(() => {
-        if (editor.initialEditKey != null && !initialConsumed.current) {
-            initialConsumed.current = true;
-            const allFlat = flattenItems(typedConfig);
-            const targetIdx = Number(editor.initialEditKey);
-            if (targetIdx >= 0 && targetIdx < allFlat.length) {
-                const target = allFlat[targetIdx];
-                setEditingKey(target.key);
-                if (target.anchorId) {
-                    editor.highlightElement(target.anchorId);
-                }
-            }
-            editor.clearInitialState?.();
-        }
-        else if (editor.initialCreate && !initialConsumed.current) {
-            initialConsumed.current = true;
-            setCreateMode('form');
-            editor.clearInitialState?.();
-        }
-    }, [editor, typedConfig]);
-    const allItems = flattenItems(typedConfig);
-    const activeItems = allItems.filter((item) => !dismissedKeys.has(item.key));
-    const dismissedItems = allItems.filter((item) => dismissedKeys.has(item.key));
-    const totalChanges = activeItems.length;
-    const [, setHoveredKey] = useState(null);
-    const detectionMap = useAnchorDetection(allItems);
-    const foundCount = activeItems.filter((item) => detectionMap.get(item.key)?.found).length;
-    const handleDismiss = useCallback((key) => {
-        setDismissedKeys((prev) => {
-            const next = new Set(prev);
-            next.add(key);
-            return next;
-        });
-        if (editingKey === key)
-            setEditingKey(null);
-    }, [editingKey]);
-    const handleRestore = useCallback((key) => {
-        setDismissedKeys((prev) => {
-            const next = new Set(prev);
-            next.delete(key);
-            return next;
-        });
-    }, []);
-    const handleCardClick = useCallback((item) => {
-        if (item.anchorId) {
-            editor.highlightElement(item.anchorId);
-        }
-        setEditingKey(item.key);
-    }, [editor]);
-    const handleBackToList = useCallback(() => {
-        setEditingKey(null);
-        setPreviewMode('after');
-        editor.previewConfig(config);
-        editor.clearHighlight();
-    }, [editor, config]);
-    // Register back handler in panel header when editing
-    useEffect(() => {
-        editor.setBackHandler?.(editingKey !== null ? handleBackToList : null);
-        return () => editor.setBackHandler?.(null);
-    }, [editingKey, handleBackToList, editor]);
-    const handleFieldChange = useCallback((section, index, field, value) => {
-        const arr = (typedConfig[section] || []).slice();
-        const item = { ...arr[index] };
-        item[field] = value;
-        arr[index] = item;
-        const updated = { ...typedConfig, [section]: arr };
-        onChange(updated);
-        editor.setDirty(true);
-    }, [typedConfig, onChange, editor]);
-    const handlePublish = useCallback(() => {
-        // Filter dismissed items before publishing
-        if (dismissedKeys.size > 0) {
-            const filtered = filterConfig(typedConfig, dismissedKeys);
-            onChange(filtered);
-        }
-        editor.publish();
-    }, [dismissedKeys, typedConfig, onChange, editor]);
-    const handleBadgeClick = useCallback(async (item) => {
-        const detection = detectionMap.get(item.key);
-        if (detection?.found && item.anchorId) {
-            editor.highlightElement(item.anchorId);
-        }
-        else {
-            const route = resolveAnchorRoute(item.rawAnchorId);
-            if (route) {
-                if (item.anchorId)
-                    savePendingHighlight(item.anchorId);
-                await editor.navigateTo(route);
-                if (item.anchorId)
-                    editor.highlightElement(item.anchorId);
-            }
-            else if (item.anchorId) {
-                editor.highlightElement(item.anchorId);
-            }
-        }
-    }, [editor, detectionMap]);
-    const handleCardHover = useCallback((item) => {
-        setHoveredKey(item.key);
-        if (item.anchorId) {
-            editor.highlightElement(item.anchorId);
-        }
-    }, [editor]);
-    const handleCardLeave = useCallback(() => {
-        setHoveredKey(null);
-        editor.clearHighlight();
-    }, [editor]);
-    // ---- Create flow handlers ----
-    const handleStartCreate = useCallback(() => {
-        setEditingKey(null);
-        editor.clearHighlight();
-        setCreateAnchorId('');
-        setCreateText('');
-        setCreateDescription('');
-        setCreateMode('form');
-    }, [editor]);
-    const handleElementPicked = useCallback((picked) => {
-        setCreateAnchorId(picked.selector);
-        setCreateDescription(picked.description);
-        // Pre-fill with the element's current text content
-        const text = picked.element.textContent?.trim() || '';
-        setCreateText(text);
-        setCreateMode('form');
-        editor.highlightElement(picked.selector);
-    }, [editor]);
-    const handleCancelCreate = useCallback(() => {
-        setCreateMode(null);
-        setCreateAnchorId('');
-        setCreateText('');
-        setCreateDescription('');
-        editor.clearHighlight();
-    }, [editor]);
-    const handleSaveCreate = useCallback(() => {
-        if (!createAnchorId)
-            return;
-        // Add a new textReplacement to the config
-        const existing = typedConfig.textReplacements || [];
-        const newItem = {
-            anchorId: { selector: createAnchorId, route: '**' },
-            text: createText,
-            summary: `Set text on ${createAnchorId}`,
-        };
-        const updated = {
-            ...typedConfig,
-            textReplacements: [...existing, newItem],
-        };
-        onChange(updated);
-        editor.setDirty(true);
-        // Return to list
-        setCreateMode(null);
-        setCreateAnchorId('');
-        setCreateText('');
-        setCreateDescription('');
-        editor.clearHighlight();
-    }, [createAnchorId, createText, typedConfig, onChange, editor]);
-    // ---- Edit form renderers per section type ----
-    const renderEditFields = (section, index) => {
-        const arr = typedConfig[section] || [];
-        const item = arr[index];
-        if (!item)
-            return null;
-        const anchorId = resolveAnchorSelector(item.anchorId);
-        switch (section) {
-            case 'textReplacements':
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx("div", { className: "se-text-sm se-font-mono se-text-text-secondary se-py-1 se-px-2 se-bg-slate-grey-3 se-rounded-lg se-mb-3", children: anchorId }), _jsx(EditorTextarea, { label: "Text", value: item.text || '', onChange: (e) => handleFieldChange(section, index, 'text', e.target.value) })] }));
-            case 'attributeChanges':
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx("div", { className: "se-text-sm se-font-mono se-text-text-secondary se-py-1 se-px-2 se-bg-slate-grey-3 se-rounded-lg se-mb-3", children: anchorId }), _jsx(EditorInput, { label: "Attribute", value: item.attr || '', onChange: (e) => handleFieldChange(section, index, 'attr', e.target.value) }), _jsx(EditorInput, { label: "Value", value: item.value || '', onChange: (e) => handleFieldChange(section, index, 'value', e.target.value) })] }));
-            case 'styleChanges': {
-                const styleObj = item.styles || {};
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx("div", { className: "se-text-sm se-font-mono se-text-text-secondary se-py-1 se-px-2 se-bg-slate-grey-3 se-rounded-lg se-mb-3", children: anchorId }), _jsx("label", { className: "se-text-[11px] se-font-semibold se-text-slate-grey-7 se-mb-1 se-block", children: "Styles" }), Object.entries(styleObj).map(([prop, val]) => (_jsxs("div", { className: "se-flex se-gap-1 se-mb-1", children: [_jsx("input", { className: "se-flex-1 se-py-1.5 se-px-2 se-rounded-lg se-border se-border-input-field-border se-bg-slate-grey-3 se-text-text-primary se-text-sm se-font-[inherit] se-box-border", value: prop, readOnly: true }), _jsx("input", { className: "se-flex-1 se-py-1.5 se-px-2 se-rounded-lg se-border se-border-input-field-border se-bg-slate-grey-3 se-text-text-primary se-text-sm se-font-[inherit] se-box-border", value: val, onChange: (e) => {
-                                        const newStyles = { ...styleObj, [prop]: e.target.value };
-                                        handleFieldChange(section, index, 'styles', newStyles);
-                                    } })] }, prop)))] }));
-            }
-            case 'htmlInsertions':
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx("div", { className: "se-text-sm se-font-mono se-text-text-secondary se-py-1 se-px-2 se-bg-slate-grey-3 se-rounded-lg se-mb-3", children: anchorId }), _jsxs(EditorSelect, { label: "Position", value: item.position || 'after', onChange: (e) => handleFieldChange(section, index, 'position', e.target.value), children: [_jsx("option", { value: "before", children: "Before" }), _jsx("option", { value: "after", children: "After" }), _jsx("option", { value: "prepend", children: "Prepend" }), _jsx("option", { value: "append", children: "Append" }), _jsx("option", { value: "replace", children: "Replace" })] }), _jsx(EditorTextarea, { label: "HTML", value: item.html || '', onChange: (e) => handleFieldChange(section, index, 'html', e.target.value), className: "se-font-mono" })] }));
-            case 'classAdditions':
-            case 'classRemovals':
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx("div", { className: "se-text-sm se-font-mono se-text-text-secondary se-py-1 se-px-2 se-bg-slate-grey-3 se-rounded-lg se-mb-3", children: anchorId }), _jsx(EditorInput, { label: "Class Name", value: item.className || '', onChange: (e) => handleFieldChange(section, index, 'className', e.target.value) })] }));
-            default:
-                return null;
-        }
-    };
-    const headerTitle = createMode === 'form' || createMode === 'picking' ? 'Add Text Change' : 'Content';
-    const headerSubtitle = createMode === 'picking'
-        ? 'Click an element on the page to select it. Press ESC to go back.'
-        : createMode === 'form'
-            ? 'Pick an element and set its new text'
-            : `${totalChanges} change${totalChanges !== 1 ? 's' : ''}${totalChanges > 0 ? ` (${foundCount} found on this page)` : ''}`;
-    const handleHeaderBack = () => {
-        if (createMode === 'picking') {
-            setCreateMode('form');
-        }
-        else if (createMode === 'form') {
-            handleCancelCreate();
-        }
-        else if (editingKey !== null) {
-            handleBackToList();
-        }
-        else {
-            editor.navigateHome();
-        }
-    };
-    return (_jsxs(EditorLayout, { children: [_jsx(EditorHeader, { title: headerTitle, subtitle: headerSubtitle, onBack: handleHeaderBack }), _jsx(EditorBody, { children: createMode === 'form' || createMode === 'picking' ? (
-                /* ---- Create form mode ---- */
-                _jsxs("div", { className: "se-flex se-flex-col se-gap-4", children: [_jsxs("div", { className: "se-flex se-flex-col se-gap-1.5", children: [_jsx("span", { className: "se-text-sm se-font-semibold se-text-text-primary se-uppercase se-tracking-wide", children: "Target Element" }), createAnchorId ? (_jsxs("div", { className: "se-flex se-gap-2 se-items-center", children: [_jsx("code", { className: "se-flex-1 se-py-1.5 se-px-2 se-rounded-lg se-border se-border-input-field-border se-bg-slate-grey-3 se-text-text-primary se-text-sm se-overflow-hidden se-text-ellipsis se-whitespace-nowrap", children: createAnchorId }), _jsx("button", { type: "button", onClick: () => setCreateMode('picking'), className: "se-py-1.5 se-px-3 se-rounded-lg se-border se-border-btn-neutral-border se-bg-btn-neutral se-text-btn-neutral-text se-text-sm se-cursor-pointer se-shrink-0 hover:se-text-btn-neutral-text-hover", children: "Re-pick" })] })) : (_jsx("button", { type: "button", onClick: () => setCreateMode('picking'), className: "se-w-full se-h-12 se-px-4 se-py-2 se-rounded-lg se-border-2 se-border-dashed se-border-btn-primary/30 se-bg-btn-primary/5 se-text-btn-primary se-text-sm se-font-medium se-cursor-pointer se-inline-flex se-items-center se-justify-center se-gap-2 hover:se-bg-btn-primary/10 hover:se-border-btn-primary/50", children: "+ Pick Target Element" })), createDescription && (_jsx("span", { className: "se-text-sm se-text-text-secondary", children: createDescription }))] }), _jsxs("div", { className: "se-flex se-flex-col se-gap-1.5", children: [_jsx("span", { className: "se-text-sm se-font-semibold se-text-text-primary se-uppercase se-tracking-wide", children: "Text Content" }), _jsx(EditorTextarea, { value: createText, onChange: (e) => setCreateText(e.target.value) })] }), _jsxs("div", { className: "se-flex se-gap-2 se-mt-2", children: [_jsx("button", { type: "button", onClick: handleCancelCreate, className: "se-flex-1 se-h-10 se-px-4 se-py-2 se-rounded-md se-border se-border-btn-neutral-border se-bg-btn-neutral se-text-btn-neutral-text se-text-sm se-font-medium se-cursor-pointer se-inline-flex se-items-center se-justify-center hover:se-text-btn-neutral-text-hover", children: "Cancel" }), _jsx("button", { type: "button", onClick: handleSaveCreate, disabled: !createAnchorId, className: "se-flex-1 se-h-10 se-px-4 se-py-2 se-rounded-md se-border-none se-bg-btn-primary se-text-btn-primary-text se-text-sm se-font-medium se-cursor-pointer se-inline-flex se-items-center se-justify-center hover:se-bg-btn-primary-hover disabled:se-opacity-50 disabled:se-pointer-events-none", children: "Add Change" })] })] })) : editingKey !== null ? (
-                /* ---- Edit mode ---- */
-                (() => {
-                    const ref = parseItemKey(editingKey);
-                    const editItem = allItems.find((it) => it.key === editingKey);
-                    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "se-flex se-items-center se-gap-2 se-mb-3 se-text-lg se-font-semibold se-text-text-primary", children: [_jsx("span", { children: editItem && _jsx(SectionIcon, { section: editItem.section }) }), _jsx("span", { children: editItem?.summary })] }), renderEditFields(ref.section, ref.index)] }));
-                })()) : (
-                /* ---- List mode ---- */
-                _jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleStartCreate, className: "se-w-full se-h-10 se-px-4 se-py-2 se-rounded-md se-border se-border-dashed se-border-btn-primary/30 se-bg-btn-primary/5 se-text-btn-primary se-text-sm se-font-medium se-cursor-pointer se-flex se-items-center se-justify-center se-gap-2 se-mb-3", children: "+ Add Text Change" }), allItems.length === 0 && (_jsx(EmptyState, { message: "No content changes configured. Click above to add one." })), activeItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(GroupHeader, { label: "CONTENT", count: activeItems.length }), activeItems.map((item) => {
-                                    const detection = detectionMap.get(item.key);
-                                    return (_jsxs(EditorCard, { itemKey: item.key, onClick: () => handleCardClick(item), className: "se-flex se-items-center se-gap-2", onMouseEnter: () => handleCardHover(item), onMouseLeave: handleCardLeave, children: [_jsx(DetectionBadge, { found: detection?.found ?? false, onClick: () => handleBadgeClick(item) }), _jsx("span", { className: "se-shrink-0 se-flex se-items-center -se-ml-1", children: _jsx(SectionIcon, { section: item.section }) }), _jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap", children: item.summary }), _jsx("button", { type: "button", className: "se-py-0.5 se-px-1.5 se-rounded se-border-none se-bg-transparent se-text-slate-grey-7 se-text-sm se-cursor-pointer se-shrink-0 se-leading-none", onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    handleDismiss(item.key);
-                                                }, title: "Dismiss this change", children: "\u00D7" })] }, item.key));
-                                })] })), dismissedItems.length > 0 && (_jsx(DismissedSection, { count: dismissedItems.length, children: dismissedItems.map((item) => (_jsxs("div", { className: "se-flex se-items-center se-gap-2 se-py-1.5 se-px-2.5 se-rounded-lg se-border se-border-white/[0.03] se-bg-transparent se-mb-0.5 se-cursor-pointer se-text-sm se-text-text-tertiary se-opacity-60", children: [_jsx("span", { className: "se-shrink-0 se-flex se-items-center -se-ml-1", children: _jsx(SectionIcon, { section: item.section }) }), _jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap se-line-through", children: item.summary }), _jsx("button", { type: "button", className: "se-py-0.5 se-px-1.5 se-rounded se-border-none se-bg-transparent se-text-blue-5 se-text-[11px] se-cursor-pointer se-shrink-0 se-leading-none", onClick: (e) => {
-                                            e.stopPropagation();
-                                            handleRestore(item.key);
-                                        }, children: "Restore" })] }, item.key))) }))] })) }), _jsx(EditorFooter, { onSave: () => editor.save(), onPublish: handlePublish }), _jsx(AnchorPicker, { isActive: createMode === 'picking', onPick: handleElementPicked, onCancel: () => setCreateMode('form') })] }));
-}
-/**
- * Editor module configuration.
- */
-export const editor = {
-    panel: {
-        title: 'Content',
-        icon: '\u{1f4dd}',
-        description: 'Text and attribute modifications',
-    },
-    component: ContentEditor,
-};
-export const editorPanel = editor.panel;
-export default ContentEditor;

package/dist/editor.d.ts

@@ -1,9 +0,0 @@
-/**
- * Adaptive Content - Editor Module (barrel)
- *
- * Re-exports from the split state and UI modules for backward compatibility.
- */
-import { ContentEditor } from './content-editor-ui';
-export { ContentEditor, editor, editorPanel } from './content-editor-ui';
-export default ContentEditor;
-//# sourceMappingURL=editor.d.ts.map

package/dist/editor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACzE,eAAe,aAAa,CAAC"}

package/dist/editor.js

@@ -1,8 +0,0 @@
-/**
- * Adaptive Content - Editor Module (barrel)
- *
- * Re-exports from the split state and UI modules for backward compatibility.
- */
-import { ContentEditor } from './content-editor-ui';
-export { ContentEditor, editor, editorPanel } from './content-editor-ui';
-export default ContentEditor;

package/dist/reconciliation-guard.js

@@ -1,80 +0,0 @@
-/**
- * Reconciliation Guard - MutationObserver defense against React DOM removal.
- *
- * When the Syntrologie SDK inserts DOM nodes into a React-managed subtree
- * (via content:insertHtml), React's reconciliation will silently remove them
- * on the next render because they don't exist in React's virtual DOM.
- *
- * This guard watches for the removal of our inserted container and re-inserts
- * it using a debounced retry mechanism with a maximum retry count to prevent
- * infinite loops (e.g., in React StrictMode which double-invokes effects).
- */
-/**
- * Watch for a container element being removed from the DOM by an external
- * framework (React, Vue, etc.) and call `reinsertFn` to re-insert it.
- *
- * @param container  The element we inserted (has data-syntro-action-id)
- * @param anchor     The anchor element our container is positioned relative to
- * @param reinsertFn Called when the container is removed — should re-insert it
- * @param opts       Configuration for retry limits and debounce timing
- * @returns          Cleanup function that disconnects the observer
- */
-export function guardAgainstReconciliation(container, anchor, reinsertFn, opts) {
-    const maxRetries = opts?.maxRetries ?? 3;
-    const debounceMs = opts?.debounceMs ?? 50;
-    // Find the nearest parent to observe. Prefer container's parent, then anchor's.
-    const observeTarget = container.parentElement ?? anchor.parentElement;
-    if (!observeTarget)
-        return () => { };
-    let retries = 0;
-    let debounceTimer = null;
-    let disconnected = false;
-    const observer = new MutationObserver((mutations) => {
-        if (disconnected)
-            return;
-        for (const mutation of mutations) {
-            for (const removed of mutation.removedNodes) {
-                // Check if the removed node is our container
-                if (removed !== container)
-                    continue;
-                if (retries >= maxRetries) {
-                    observer.disconnect();
-                    disconnected = true;
-                    return;
-                }
-                // Debounce to coalesce rapid React re-renders
-                if (debounceTimer)
-                    clearTimeout(debounceTimer);
-                debounceTimer = setTimeout(() => {
-                    if (disconnected)
-                        return;
-                    // If the anchor has been removed from the DOM (SPA navigation),
-                    // the page has been torn down — stop fighting React's reconciler.
-                    // Re-inserting into a dying subtree triggers removeChild crashes.
-                    if (!anchor.isConnected) {
-                        observer.disconnect();
-                        disconnected = true;
-                        return;
-                    }
-                    retries++;
-                    try {
-                        reinsertFn();
-                    }
-                    catch {
-                        // Re-insertion failed — stop trying
-                        observer.disconnect();
-                        disconnected = true;
-                    }
-                }, debounceMs);
-                return; // Found our container, no need to check further
-            }
-        }
-    });
-    observer.observe(observeTarget, { childList: true, subtree: true });
-    return () => {
-        disconnected = true;
-        observer.disconnect();
-        if (debounceTimer)
-            clearTimeout(debounceTimer);
-    };
-}

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