@syntrologie/adapt-content 2.8.0-canary.7 → 2.8.0-canary.71

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;AAkLhD,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"}