@syntrologie/adapt-content 2.11.0 → 2.13.0

package/dist/cdn.d.ts

@@ -25,7 +25,7 @@ export declare const manifest: {
             icon: string;
             description: string;
         };
-        component: typeof import("./editor").ContentEditor;
+        component: typeof import("./content-editor-ui").ContentEditor;
     };
     metadata: {
         isBuiltIn: boolean;

package/dist/content-editor-state.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Adaptive Content - Editor State & Logic
+ *
+ * Pure helpers for the content editor: anchor resolution, types, section config,
+ * flatten/filter logic, anchor detection hook, and dismissal management.
+ */
+import type { ContentConfig } from './schema';
+/** Extract the CSS selector string from an anchorId (object or legacy string). */
+export declare function resolveAnchorSelector(anchorId: unknown): string;
+/** Extract the target route from an AnchorId object, ignoring wildcard '**'. */
+export declare function resolveAnchorRoute(anchorId: unknown): string | null;
+/** Save a pending highlight selector to sessionStorage (inlined to avoid cross-package import). */
+export declare function savePendingHighlight(selector: string): void;
+export type SectionKey = keyof ContentConfig;
+export interface ItemRef {
+    section: SectionKey;
+    index: number;
+}
+export declare function itemKey(section: SectionKey, index: number): string;
+export declare function parseItemKey(key: string): ItemRef;
+export declare const SECTION_ICON_MAP: Record<SectionKey, React.ComponentType<{
+    size?: number;
+    className?: string;
+}>>;
+export interface FlatItem {
+    key: string;
+    section: SectionKey;
+    index: number;
+    summary: string;
+    anchorId: string;
+    rawAnchorId: unknown;
+}
+/** Build a flat list of all items across all section types. */
+export declare function flattenItems(config: ContentConfig): FlatItem[];
+/** Remove items by key set from a config, returning a new config. */
+export declare function filterConfig(config: ContentConfig, dismissedKeys: Set<string>): ContentConfig;
+export interface DetectionEntry {
+    found: boolean;
+    element: HTMLElement | null;
+}
+export declare function useAnchorDetection(items: Array<{
+    key: string;
+    anchorId: string;
+}>): Map<string, DetectionEntry>;
+//# sourceMappingURL=content-editor-state.d.ts.map

package/dist/content-editor-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-editor-state.d.ts","sourceRoot":"","sources":["../src/content-editor-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAO9C,kFAAkF;AAClF,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAK/D;AAED,gFAAgF;AAChF,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CASnE;AAED,mGAAmG;AACnG,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,QAMpD;AAMD,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAElE;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAGjD;AAMD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CACnC,UAAU,EACV,KAAK,CAAC,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAQ3D,CAAC;AAMF,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,+DAA+D;AAC/D,wBAAgB,YAAY,CAAC,MAAM,EAAE,aAAa,GAAG,QAAQ,EAAE,CAkB9D;AAED,qEAAqE;AACrE,wBAAgB,YAAY,CAAC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,aAAa,CAW7F;AAMD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,GAC9C,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,CA6B7B"}

package/dist/content-editor-state.js

@@ -0,0 +1,123 @@
+/**
+ * Adaptive Content - Editor State & Logic
+ *
+ * Pure helpers for the content editor: anchor resolution, types, section config,
+ * flatten/filter logic, anchor detection hook, and dismissal management.
+ */
+import { FileCode, Minus, Palette, Plus, Tag, Type } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { summarizeContentChange } from './summarize';
+// ============================================================================
+// Anchor Helpers
+// ============================================================================
+/** Extract the CSS selector string from an anchorId (object or legacy string). */
+export function resolveAnchorSelector(anchorId) {
+    if (!anchorId)
+        return '';
+    if (typeof anchorId === 'string')
+        return anchorId;
+    if (typeof anchorId === 'object')
+        return anchorId.selector ?? '';
+    return '';
+}
+/** Extract the target route from an AnchorId object, ignoring wildcard '**'. */
+export function resolveAnchorRoute(anchorId) {
+    if (!anchorId || typeof anchorId !== 'object')
+        return null;
+    const route = anchorId.route;
+    if (typeof route === 'string' && route !== '**')
+        return route;
+    if (Array.isArray(route)) {
+        const first = route.find((r) => typeof r === 'string' && r !== '**');
+        return first ?? null;
+    }
+    return null;
+}
+/** Save a pending highlight selector to sessionStorage (inlined to avoid cross-package import). */
+export function savePendingHighlight(selector) {
+    try {
+        sessionStorage.setItem('syntro:editor:pending-highlight', selector);
+    }
+    catch {
+        // Silently ignore
+    }
+}
+export function itemKey(section, index) {
+    return `${section}:${index}`;
+}
+export function parseItemKey(key) {
+    const [section, indexStr] = key.split(':');
+    return { section: section, index: Number(indexStr) };
+}
+// ============================================================================
+// Section Config
+// ============================================================================
+export const SECTION_ICON_MAP = {
+    textReplacements: Type,
+    attributeChanges: Tag,
+    styleChanges: Palette,
+    htmlInsertions: FileCode,
+    classAdditions: Plus,
+    classRemovals: Minus,
+};
+/** Build a flat list of all items across all section types. */
+export function flattenItems(config) {
+    const items = [];
+    const sections = Object.keys(SECTION_ICON_MAP);
+    for (const section of sections) {
+        const arr = config[section] || [];
+        arr.forEach((item, i) => {
+            const rec = item;
+            items.push({
+                key: itemKey(section, i),
+                section,
+                index: i,
+                summary: summarizeContentChange(section, rec),
+                anchorId: resolveAnchorSelector(rec.anchorId),
+                rawAnchorId: rec.anchorId,
+            });
+        });
+    }
+    return items;
+}
+/** Remove items by key set from a config, returning a new config. */
+export function filterConfig(config, dismissedKeys) {
+    const result = { ...config };
+    const sections = Object.keys(SECTION_ICON_MAP);
+    for (const section of sections) {
+        const arr = config[section] || [];
+        const filtered = arr.filter((_, i) => !dismissedKeys.has(itemKey(section, i)));
+        if (filtered.length > 0 || config[section] !== undefined) {
+            result[section] = filtered;
+        }
+    }
+    return result;
+}
+export function useAnchorDetection(items) {
+    const [detectionMap, setDetectionMap] = useState(new Map());
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
+    useEffect(() => {
+        const runDetection = () => {
+            const map = new Map();
+            for (const item of itemsRef.current) {
+                if (!item.anchorId) {
+                    map.set(item.key, { found: false, element: null });
+                    continue;
+                }
+                try {
+                    const el = document.querySelector(item.anchorId);
+                    map.set(item.key, { found: el !== null, element: el });
+                }
+                catch {
+                    map.set(item.key, { found: false, element: null });
+                }
+            }
+            setDetectionMap(map);
+        };
+        runDetection();
+        const interval = setInterval(runDetection, 2000);
+        return () => clearInterval(interval);
+    }, []);
+    return detectionMap;
+}

package/dist/content-editor-ui.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Adaptive Content - Editor UI Component
+ *
+ * Main editor component with tab switching, item selection, form inputs,
+ * save/publish, and highlight on page.
+ */
+import type { EditorPanelProps } from './types';
+export declare function ContentEditor({ config, onChange, editor }: EditorPanelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Editor module configuration.
+ */
+export declare const editor: {
+    panel: {
+        title: string;
+        icon: string;
+        description: string;
+    };
+    component: typeof ContentEditor;
+};
+export declare const editorPanel: {
+    title: string;
+    icon: string;
+    description: string;
+};
+export default ContentEditor;
+//# sourceMappingURL=content-editor-ui.d.ts.map

package/dist/content-editor-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-editor-ui.d.ts","sourceRoot":"","sources":["../src/content-editor-ui.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAgCH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgBhD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAsjB3E;AAED;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;CAAe,CAAC;AAExC,eAAe,aAAa,CAAC"}

package/dist/content-editor-ui.js

@@ -0,0 +1,291 @@
+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,27 +1,9 @@
 /**
- * Adaptive Content - Editor Component
+ * Adaptive Content - Editor Module (barrel)
  *
- * Review & tweak editor for AI-generated content modifications.
- * Displays a scannable list of one-liner change summaries.
- * Clicking a card navigates to the element and shows a floating edit panel.
+ * Re-exports from the split state and UI modules for backward compatibility.
  */
-import type { EditorPanelProps } from './types';
-export declare function ContentEditor({ config, onChange, editor }: EditorPanelProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Editor module configuration.
- */
-export declare const editor: {
-    panel: {
-        title: string;
-        icon: string;
-        description: string;
-    };
-    component: typeof ContentEditor;
-};
-export declare const editorPanel: {
-    title: string;
-    icon: string;
-    description: string;
-};
+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 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAuBH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgLhD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAmkB3E;AAED;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;CAAe,CAAC;AAExC,eAAe,aAAa,CAAC"}
+{"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,417 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * Adaptive Content - Editor Component
+ * Adaptive Content - Editor Module (barrel)
  *
- * Review & tweak editor for AI-generated content modifications.
- * Displays a scannable list of one-liner change summaries.
- * Clicking a card navigates to the element and shows a floating edit panel.
+ * Re-exports from the split state and UI modules for backward compatibility.
  */
-import { DetectionBadge, DismissedSection, EditorBody, EditorCard, EditorFooter, EditorHeader, EditorInput, EditorLayout, EditorSelect, EditorTextarea, EmptyState, GroupHeader, } from '@syntrologie/shared-editor-ui';
-import { FileCode, Minus, Palette, Plus, Tag, Type } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { AnchorPicker } from './components/AnchorPicker';
-import { summarizeContentChange } from './summarize';
-// ============================================================================
-// Anchor Helpers
-// ============================================================================
-/** Extract the CSS selector string from an anchorId (object or legacy string). */
-function resolveAnchorSelector(anchorId) {
-    if (!anchorId)
-        return '';
-    if (typeof anchorId === 'string')
-        return anchorId;
-    if (typeof anchorId === 'object')
-        return anchorId.selector ?? '';
-    return '';
-}
-/** Extract the target route from an AnchorId object, ignoring wildcard '**'. */
-function resolveAnchorRoute(anchorId) {
-    if (!anchorId || typeof anchorId !== 'object')
-        return null;
-    const route = anchorId.route;
-    if (typeof route === 'string' && route !== '**')
-        return route;
-    if (Array.isArray(route)) {
-        const first = route.find((r) => typeof r === 'string' && r !== '**');
-        return first ?? null;
-    }
-    return null;
-}
-/** Save a pending highlight selector to sessionStorage (inlined to avoid cross-package import). */
-function savePendingHighlight(selector) {
-    try {
-        sessionStorage.setItem('syntro:editor:pending-highlight', selector);
-    }
-    catch {
-        // Silently ignore
-    }
-}
-function itemKey(section, index) {
-    return `${section}:${index}`;
-}
-function parseItemKey(key) {
-    const [section, indexStr] = key.split(':');
-    return { section: section, index: Number(indexStr) };
-}
-// ============================================================================
-// Section Config
-// ============================================================================
-const SECTION_ICON_MAP = {
-    textReplacements: Type,
-    attributeChanges: Tag,
-    styleChanges: Palette,
-    htmlInsertions: FileCode,
-    classAdditions: Plus,
-    classRemovals: Minus,
-};
-/** 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 });
-}
-// ============================================================================
-// Helpers
-// ============================================================================
-/** Build a flat list of all items across all section types. */
-function flattenItems(config) {
-    const items = [];
-    const sections = Object.keys(SECTION_ICON_MAP);
-    for (const section of sections) {
-        const arr = config[section] || [];
-        arr.forEach((item, i) => {
-            const rec = item;
-            items.push({
-                key: itemKey(section, i),
-                section,
-                index: i,
-                summary: summarizeContentChange(section, rec),
-                anchorId: resolveAnchorSelector(rec.anchorId),
-                rawAnchorId: rec.anchorId,
-            });
-        });
-    }
-    return items;
-}
-/** Remove items by key set from a config, returning a new config. */
-function filterConfig(config, dismissedKeys) {
-    const result = { ...config };
-    const sections = Object.keys(SECTION_ICON_MAP);
-    for (const section of sections) {
-        const arr = config[section] || [];
-        const filtered = arr.filter((_, i) => !dismissedKeys.has(itemKey(section, i)));
-        if (filtered.length > 0 || config[section] !== undefined) {
-            result[section] = filtered;
-        }
-    }
-    return result;
-}
-function useAnchorDetection(items) {
-    const [detectionMap, setDetectionMap] = useState(new Map());
-    const itemsRef = useRef(items);
-    itemsRef.current = items;
-    useEffect(() => {
-        const runDetection = () => {
-            const map = new Map();
-            for (const item of itemsRef.current) {
-                if (!item.anchorId) {
-                    map.set(item.key, { found: false, element: null });
-                    continue;
-                }
-                try {
-                    const el = document.querySelector(item.anchorId);
-                    map.set(item.key, { found: el !== null, element: el });
-                }
-                catch {
-                    map.set(item.key, { found: false, element: null });
-                }
-            }
-            setDetectionMap(map);
-        };
-        runDetection();
-        const interval = setInterval(runDetection, 2000);
-        return () => clearInterval(interval);
-    }, []);
-    return detectionMap;
-}
-// ============================================================================
-// 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 [_previewMode, 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 [_hoveredKey, 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 _handleBeforeAfter = useCallback((mode) => {
-        setPreviewMode(mode);
-        if (mode === 'before') {
-            const filtered = filterConfig(typedConfig, new Set([editingKey]));
-            editor.previewConfig(filtered);
-        }
-        else {
-            editor.previewConfig(config);
-        }
-    }, [typedConfig, editingKey, editor, config]);
-    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;
+import { ContentEditor } from './content-editor-ui';
+export { ContentEditor, editor, editorPanel } from './content-editor-ui';
 export default ContentEditor;

package/dist/sanitizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sanitizer.d.ts","sourceRoot":"","sources":["../src/sanitizer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAiCH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA0DjD"}
+{"version":3,"file":"sanitizer.d.ts","sourceRoot":"","sources":["../src/sanitizer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAiCH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAkEjD"}

package/dist/sanitizer.js

@@ -77,6 +77,13 @@ export function sanitizeHtml(html) {
             }
         }
     }
+    // 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) {

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

@@ -125,7 +125,7 @@ export function AnchorPicker({ isActive, onPick, onCancel, passthroughClicks = f
                     boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.2)',
                     pointerEvents: 'none',
                     transition: 'all 0.1s ease-out',
-                } })), hoveredElement && rect && (_jsxs("div", { style: {
+                } })), 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),
@@ -136,11 +136,9 @@ export function AnchorPicker({ isActive, onPick, onCancel, passthroughClicks = f
                     boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
                     zIndex: 1,
                     fontFamily: 'monospace',
-                    fontSize: '13px',
                     maxWidth: '300px',
                     pointerEvents: 'none',
-                }, children: [_jsx("div", { style: {
-                            fontSize: '12px',
+                }, children: [_jsx("div", { className: "se-text-xs", style: {
                             textTransform: 'uppercase',
                             letterSpacing: '0.05em',
                             marginBottom: '4px',

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

@@ -47,7 +47,7 @@ export function ElementHighlight({ element, color, bgColor = 'transparent', bord
             cursor: onClick ? 'pointer' : 'default',
             transition: 'all 0.05s ease-out',
             boxSizing: 'border-box',
-        }, children: displayLabel && (_jsxs("div", { "data-syntro-highlight-label": true, "data-syntro-editor-ui": "highlight-label", style: {
+        }, children: displayLabel && (_jsxs("div", { "data-syntro-highlight-label": true, "data-syntro-editor-ui": "highlight-label", className: "se-text-xs", style: {
                 position: 'absolute',
                 top: '-22px',
                 left: 0,
@@ -55,7 +55,6 @@ export function ElementHighlight({ element, color, bgColor = 'transparent', bord
                     ? `${color.replace(')', ',0.85)').replace('rgb(', 'rgba(')}`
                     : color,
                 color: '#fff',
-                fontSize: showDimensions ? '11px' : '12px',
                 fontWeight: 600,
                 fontFamily: showDimensions ? 'monospace' : 'inherit',
                 padding: '1px 6px',
@@ -65,7 +64,7 @@ export function ElementHighlight({ element, color, bgColor = 'transparent', bord
                 alignItems: 'center',
                 gap: '6px',
                 pointerEvents: 'auto',
-            }, children: [labelIcon, displayLabel, showRemove && onRemove && (_jsx("button", { type: "button", "data-syntro-highlight-remove": true, "data-syntro-editor-ui": "highlight-remove", onClick: (e) => {
+            }, children: [labelIcon, displayLabel, showRemove && onRemove && (_jsx("button", { type: "button", className: "se-text-xs", "data-syntro-highlight-remove": true, "data-syntro-editor-ui": "highlight-remove", onClick: (e) => {
                         e.stopPropagation();
                         e.preventDefault();
                         onRemove();
@@ -76,7 +75,6 @@ export function ElementHighlight({ element, color, bgColor = 'transparent', bord
                         borderRadius: '50%',
                         width: '16px',
                         height: '16px',
-                        fontSize: '12px',
                         cursor: 'pointer',
                         display: 'flex',
                         alignItems: 'center',

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

@@ -1 +1 @@
-{"version":3,"file":"useTriggerWhenStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/useTriggerWhenStatus.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAmB,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAG5F;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,KAAK,CAAC;YACZ,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;YAC3C,KAAK,EAAE,OAAO,CAAC;SAChB,CAAC,CAAC;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,GAAG,IAAI,CAAC;CACV;AAsED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,eAAe,EAAE,GACvB,GAAG,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC,CA0CvC"}
+{"version":3,"file":"useTriggerWhenStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/useTriggerWhenStatus.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAmB,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAG5F;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,KAAK,CAAC;YACZ,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;YAC3C,KAAK,EAAE,OAAO,CAAC;SAChB,CAAC,CAAC;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,GAAG,IAAI,CAAC;CACV;AAqED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,eAAe,EAAE,GACvB,GAAG,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC,CA0CvC"}

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

@@ -15,7 +15,6 @@ import { formatConditionLabel } from '../formatConditionLabel';
  * Build a RuntimeLike from the real SynOS.handle.runtime.
  */
 function getRuntime() {
-    // biome-ignore lint: window.SynOS is set by the runtime SDK
     const rt = window.SynOS?.handle?.runtime;
     if (!rt?.evaluateSync)
         return null;

package/node_modules/@syntrologie/shared-editor-ui/package.json

@@ -25,7 +25,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "css-selector-generator": "^3.8.0"
+    "css-selector-generator": "3.8.0"
   },
   "peerDependencies": {
     "lucide-react": ">=0.400.0",
@@ -33,13 +33,15 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.0",
-    "jsdom": "^26.1.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.18"
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "26.1.0",
+    "lucide-react": "0.576.0",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "typescript": "5.9.3",
+    "vitest": "4.0.18"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syntrologie/adapt-content",
-  "version": "2.11.0",
+  "version": "2.13.0",
   "description": "Adaptive Content app - DOM manipulation actions for text, attributes, and styles",
   "license": "Proprietary",
   "private": false,
@@ -50,21 +50,21 @@
   },
   "dependencies": {
     "@syntrologie/shared-editor-ui": "*",
-    "css-selector-generator": "^3.8.0",
-    "data-urls": "^5.0.0"
+    "css-selector-generator": "3.8.0",
+    "data-urls": "5.0.0"
   },
   "devDependencies": {
-    "@floating-ui/dom": "^1.7.5",
+    "@floating-ui/dom": "1.7.5",
     "@syntrologie/sdk-contracts": "*",
-    "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "jsdom": "^26.1.0",
-    "lucide-react": "^0.576.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.18",
-    "zod": "^3.25.76"
+    "@testing-library/react": "16.3.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "26.1.0",
+    "lucide-react": "0.576.0",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "typescript": "5.9.3",
+    "vitest": "4.0.18",
+    "zod": "3.25.76"
   }
 }