@syntrologie/adapt-content 2.1.0 → 2.2.0-canary.1

package/dist/cdn.d.ts

@@ -16,7 +16,7 @@ export declare const manifest: {
     runtime: {
         actions: {
             kind: "content:insertHtml" | "content:setText" | "content:setAttr" | "content:addClass" | "content:removeClass" | "content:setStyle";
-            executor: import("./types").ActionExecutor<import("./types").InsertHtmlAction> | import("./types").ActionExecutor<import("./types").SetTextAction> | import("./types").ActionExecutor<import("./types").SetAttrAction> | import("./types").ActionExecutor<import("./types").AddClassAction> | import("./types").ActionExecutor<import("./types").RemoveClassAction> | import("./types").ActionExecutor<import("./types").SetStyleAction>;
+            executor: import("packages/sdk-contracts/dist").ActionExecutor<import("./types").InsertHtmlAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./types").SetTextAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./types").SetAttrAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./types").AddClassAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./types").RemoveClassAction> | import("packages/sdk-contracts/dist").ActionExecutor<import("./types").SetStyleAction>;
         }[];
     };
     editor: {

package/dist/components/AnchorPicker.d.ts

@@ -1,23 +1,8 @@
 /**
- * AnchorPicker — Element Picker Overlay
- *
- * Full-page overlay that lets the user hover and click to select a DOM element.
- * Returns the element, its CSS selector, and a human-readable description.
- *
- * Ported from editor-sdk for use in adaptive-content's create flow.
+ * Re-export AnchorPicker from shared-editor-ui.
+ * This file exists for backwards compatibility — all consumers should
+ * migrate to importing directly from @syntrologie/shared-editor-ui.
  */
-import React from 'react';
-export interface PickedElement {
-    element: Element;
-    selector: string;
-    description: string;
-}
-interface AnchorPickerProps {
-    isActive: boolean;
-    onPick: (picked: PickedElement) => void;
-    onCancel: () => void;
-    excludeSelector?: string;
-}
-export declare function AnchorPicker({ isActive, onPick, onCancel, excludeSelector, }: AnchorPickerProps): React.ReactPortal | null;
-export {};
+export type { AnchorPickerProps, PickedElement } from '@syntrologie/shared-editor-ui';
+export { AnchorPicker } from '@syntrologie/shared-editor-ui';
 //# sourceMappingURL=AnchorPicker.d.ts.map

package/dist/components/AnchorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorPicker.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AASxE,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,iBAAiB;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAKD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,eAAuJ,GACxJ,EAAE,iBAAiB,4BAmQnB"}
+{"version":3,"file":"AnchorPicker.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPicker.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/components/AnchorPicker.js

@@ -1,183 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * AnchorPicker — Element Picker Overlay
- *
- * Full-page overlay that lets the user hover and click to select a DOM element.
- * Returns the element, its CSS selector, and a human-readable description.
- *
- * Ported from editor-sdk for use in adaptive-content's create flow.
+ * Re-export AnchorPicker from shared-editor-ui.
+ * This file exists for backwards compatibility — all consumers should
+ * migrate to importing directly from @syntrologie/shared-editor-ui.
  */
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { generateSelector, getElementDescription, validateSelector, } from '../utils/selectorGenerator';
-const HIGHLIGHT_COLOR = '#3b82f6';
-const HIGHLIGHT_BG = 'rgba(59, 130, 246, 0.1)';
-export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[data-syntro-editor-panel], [data-shadow-canvas-id], .syntro-tooltip, .syntro-modal, .syntro-highlight, [data-syntro-anchor-picker]', }) {
-    const [hoveredElement, setHoveredElement] = useState(null);
-    const [hoveredSelector, setHoveredSelector] = useState('');
-    const overlayRef = useRef(null);
-    const handleMouseMove = useCallback((e) => {
-        const overlay = overlayRef.current;
-        if (overlay) {
-            overlay.style.pointerEvents = 'none';
-        }
-        const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
-        if (overlay) {
-            overlay.style.pointerEvents = 'auto';
-        }
-        if (!elementAtPoint) {
-            setHoveredElement(null);
-            setHoveredSelector('');
-            return;
-        }
-        if (excludeSelector && elementAtPoint.closest(excludeSelector)) {
-            setHoveredElement(null);
-            setHoveredSelector('');
-            return;
-        }
-        if (['HTML', 'BODY', 'HEAD'].includes(elementAtPoint.tagName)) {
-            setHoveredElement(null);
-            setHoveredSelector('');
-            return;
-        }
-        setHoveredElement(elementAtPoint);
-        const selector = generateSelector(elementAtPoint);
-        setHoveredSelector(selector);
-    }, [excludeSelector]);
-    const handleClick = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (hoveredElement && hoveredSelector) {
-            if (validateSelector(hoveredSelector, hoveredElement)) {
-                onPick({
-                    element: hoveredElement,
-                    selector: hoveredSelector,
-                    description: getElementDescription(hoveredElement),
-                });
-            }
-            else {
-                const newSelector = generateSelector(hoveredElement);
-                onPick({
-                    element: hoveredElement,
-                    selector: newSelector,
-                    description: getElementDescription(hoveredElement),
-                });
-            }
-        }
-    }, [hoveredElement, hoveredSelector, onPick]);
-    const handleKeyDown = useCallback((e) => {
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            onCancel();
-        }
-    }, [onCancel]);
-    useEffect(() => {
-        if (!isActive)
-            return;
-        document.addEventListener('mousemove', handleMouseMove, true);
-        document.addEventListener('click', handleClick, true);
-        document.addEventListener('keydown', handleKeyDown, true);
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove, true);
-            document.removeEventListener('click', handleClick, true);
-            document.removeEventListener('keydown', handleKeyDown, true);
-        };
-    }, [isActive, handleMouseMove, handleClick, handleKeyDown]);
-    if (!isActive)
-        return null;
-    const rect = hoveredElement?.getBoundingClientRect();
-    return createPortal(_jsxs("div", { ref: overlayRef, "data-syntro-anchor-picker": true, style: {
-            position: 'fixed',
-            inset: 0,
-            cursor: 'crosshair',
-            zIndex: 2147483647,
-        }, children: [_jsx("div", { style: {
-                    position: 'absolute',
-                    inset: 0,
-                    background: 'rgba(0, 0, 0, 0.05)',
-                    pointerEvents: 'none',
-                } }), hoveredElement && rect && (_jsx("div", { style: {
-                    position: 'fixed',
-                    left: rect.left - 2,
-                    top: rect.top - 2,
-                    width: rect.width + 4,
-                    height: rect.height + 4,
-                    border: `2px solid ${HIGHLIGHT_COLOR}`,
-                    backgroundColor: HIGHLIGHT_BG,
-                    borderRadius: '4px',
-                    boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.15)',
-                    pointerEvents: 'none',
-                    transition: 'all 0.1s ease-out',
-                } })), hoveredElement && rect && (_jsxs("div", { style: {
-                    position: 'fixed',
-                    left: Math.max(8, Math.min(rect.left, window.innerWidth - 320)),
-                    top: Math.max(8, rect.top - 68),
-                    backgroundColor: '#1e293b',
-                    color: '#e2e8f0',
-                    padding: '8px 12px',
-                    borderRadius: '6px',
-                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
-                    zIndex: 1,
-                    fontFamily: 'monospace',
-                    fontSize: '12px',
-                    maxWidth: '300px',
-                    pointerEvents: 'none',
-                }, children: [_jsx("div", { style: {
-                            fontSize: '11px',
-                            textTransform: 'uppercase',
-                            letterSpacing: '0.05em',
-                            marginBottom: '4px',
-                            color: '#94a3b8',
-                        }, children: "Click to select" }), _jsx("div", { style: {
-                            color: '#38bdf8',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }, children: hoveredSelector }), _jsx("div", { style: {
-                            marginTop: '4px',
-                            color: '#cbd5e1',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }, children: getElementDescription(hoveredElement) })] })), _jsxs("div", { style: {
-                    position: 'fixed',
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    backgroundColor: '#1e293b',
-                    color: '#e2e8f0',
-                    padding: '12px 20px',
-                    boxShadow: '0 -4px 12px rgba(0, 0, 0, 0.2)',
-                    fontSize: '14px',
-                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '16px' }, children: [_jsx("span", { style: {
-                                    padding: '4px 12px',
-                                    borderRadius: '4px',
-                                    fontWeight: 600,
-                                    color: '#fff',
-                                    backgroundColor: HIGHLIGHT_COLOR,
-                                }, children: "Element Picker" }), _jsx("span", { style: { color: '#cbd5e1' }, children: "Hover over an element and click to select it" })] }), _jsxs("button", { onClick: (e) => {
-                            e.stopPropagation();
-                            onCancel();
-                        }, style: {
-                            background: 'transparent',
-                            border: '1px solid #475569',
-                            color: '#e2e8f0',
-                            padding: '8px 16px',
-                            borderRadius: '6px',
-                            cursor: 'pointer',
-                            fontSize: '14px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '8px',
-                            fontFamily: 'inherit',
-                        }, children: [_jsx("kbd", { style: {
-                                    padding: '2px 6px',
-                                    borderRadius: '3px',
-                                    backgroundColor: '#334155',
-                                    fontSize: '12px',
-                                }, children: "ESC" }), "Cancel"] })] })] }), document.body);
-}
+export { AnchorPicker } from '@syntrologie/shared-editor-ui';

package/dist/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA4IhD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAwgB3E;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;;;;;;GAMG;AAuBH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA4IhD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CA6iB3E;AAED;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;CAAe,CAAC;AAExC,eAAe,aAAa,CAAC"}

package/dist/editor.js

@@ -6,9 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Displays a scannable list of one-liner change summaries.
  * Clicking a card navigates to the element and shows a floating edit panel.
  */
-import { EditorLayout, EditorHeader, EditorBody, EditorFooter, EditorCard, DetectionBadge, DismissedSection, GroupHeader, BeforeAfterToggle, EditorInput, EditorTextarea, EditorSelect, EditBackButton, EmptyState, } from '@syntrologie/shared-editor-ui';
-import { Type, Tag, Palette, FileCode, Plus, Minus } from 'lucide-react';
-import { useState, useCallback, useEffect, useRef } from 'react';
+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';
 function itemKey(section, index) {
@@ -104,7 +104,7 @@ 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');
+    const [_previewMode, setPreviewMode] = useState('after');
     // Sync dismissed keys back to navigation context on every change
     useEffect(() => {
         editor.setDismissedKeys?.(dismissedKeys);
@@ -114,6 +114,23 @@ export function ContentEditor({ config, onChange, editor }) {
     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(() => {
@@ -132,7 +149,7 @@ export function ContentEditor({ config, onChange, editor }) {
         }
         else if (editor.initialCreate && !initialConsumed.current) {
             initialConsumed.current = true;
-            setCreateMode('picking');
+            setCreateMode('form');
             editor.clearInitialState?.();
         }
     }, [editor, typedConfig]);
@@ -171,7 +188,12 @@ export function ContentEditor({ config, onChange, editor }) {
         editor.previewConfig(config);
         editor.clearHighlight();
     }, [editor, config]);
-    const handleBeforeAfter = useCallback((mode) => {
+    // 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]));
@@ -215,7 +237,7 @@ export function ContentEditor({ config, onChange, editor }) {
         setCreateAnchorId('');
         setCreateText('');
         setCreateDescription('');
-        setCreateMode('picking');
+        setCreateMode('form');
     }, [editor]);
     const handleElementPicked = useCallback((picked) => {
         setCreateAnchorId(picked.selector);
@@ -265,31 +287,36 @@ export function ContentEditor({ config, onChange, editor }) {
         const anchorId = item.anchorId || '';
         switch (section) {
             case 'textReplacements':
-                return (_jsxs("div", { className: "se-py-1", children: [_jsx("div", { className: "se-text-[11px] se-font-mono se-text-slate-grey-8 se-py-1 se-px-2 se-bg-white/[0.04] se-rounded se-mb-3", children: anchorId }), _jsx(EditorTextarea, { label: "Text", value: item.text || '', onChange: (e) => handleFieldChange(section, index, 'text', e.target.value) })] }));
+                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-[11px] se-font-mono se-text-slate-grey-8 se-py-1 se-px-2 se-bg-white/[0.04] se-rounded 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) })] }));
+                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-[11px] se-font-mono se-text-slate-grey-8 se-py-1 se-px-2 se-bg-white/[0.04] se-rounded 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 se-border se-border-white/10 se-bg-white/[0.04] se-text-slate-grey-10 se-text-xs 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 se-border se-border-white/10 se-bg-white/[0.04] se-text-slate-grey-10 se-text-xs se-font-[inherit] se-box-border", value: val, onChange: (e) => {
+                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-[11px] se-font-mono se-text-slate-grey-8 se-py-1 se-px-2 se-bg-white/[0.04] se-rounded 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" })] }));
+                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-[11px] se-font-mono se-text-slate-grey-8 se-py-1 se-px-2 se-bg-white/[0.04] se-rounded se-mb-3", children: anchorId }), _jsx(EditorInput, { label: "Class Name", value: item.className || '', onChange: (e) => handleFieldChange(section, index, 'className', e.target.value) })] }));
+                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' ? 'Add Text Change' : 'Content';
-    const headerSubtitle = createMode === 'form'
-        ? 'Pick an element and set its new text'
-        : `${totalChanges} change${totalChanges !== 1 ? 's' : ''}${totalChanges > 0 ? ` (${foundCount} found on this page)` : ''}`;
+    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) {
+        if (createMode === 'picking') {
+            setCreateMode('form');
+        }
+        else if (createMode === 'form') {
             handleCancelCreate();
         }
         else if (editingKey !== null) {
@@ -299,29 +326,26 @@ export function ContentEditor({ config, onChange, editor }) {
             editor.navigateHome();
         }
     };
-    return (_jsxs(EditorLayout, { children: [_jsx(EditorHeader, { title: headerTitle, subtitle: headerSubtitle, onBack: handleHeaderBack }), _jsx(EditorBody, { children: createMode === 'form' ? (
+    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("label", { className: "se-text-[11px] se-font-semibold se-text-slate-grey-7 se-uppercase se-tracking-wide", children: "Target Element" }), _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 se-border se-border-white/10 se-bg-white/[0.04] se-text-slate-grey-10 se-text-xs se-overflow-hidden se-text-ellipsis se-whitespace-nowrap", children: createAnchorId }), _jsx("button", { onClick: () => setCreateMode('picking'), className: "se-py-1.5 se-px-3 se-rounded se-border se-border-white/10 se-bg-transparent se-text-slate-grey-9 se-text-xs se-cursor-pointer se-shrink-0", children: "Re-pick" })] }), createDescription && (_jsx("span", { className: "se-text-[11px] se-text-slate-grey-6", children: createDescription }))] }), _jsxs("div", { className: "se-flex se-flex-col se-gap-1.5", children: [_jsx("label", { className: "se-text-[11px] se-font-semibold se-text-slate-grey-7 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", { onClick: handleCancelCreate, className: "se-flex-1 se-py-2 se-rounded se-border se-border-white/10 se-bg-transparent se-text-slate-grey-9 se-text-sm se-cursor-pointer", children: "Cancel" }), _jsx("button", { onClick: handleSaveCreate, disabled: !createAnchorId, className: "se-flex-1 se-py-2 se-rounded se-border-none se-bg-blue-5 se-text-white se-text-sm se-font-semibold se-cursor-pointer disabled:se-opacity-40 disabled:se-cursor-not-allowed", children: "Add Change" })] })] })) : editingKey !== null ? (
+                _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-[13px] se-font-semibold se-text-slate-grey-10", children: [_jsx("span", { children: editItem && _jsx(SectionIcon, { section: editItem.section }) }), _jsx("span", { children: editItem?.summary })] }), _jsx(BeforeAfterToggle, { mode: previewMode, onToggle: handleBeforeAfter }), renderEditFields(ref.section, ref.index), _jsx(EditBackButton, { onClick: handleBackToList })] }));
+                    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", { onClick: handleStartCreate, className: "se-w-full se-py-2.5 se-rounded-md se-border se-border-dashed se-border-blue-5/30 se-bg-blue-5/5 se-text-blue-5 se-text-xs se-font-semibold se-cursor-pointer se-flex se-items-center se-justify-center se-gap-1.5 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) => {
+                _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, className: "se-flex se-items-center se-gap-2 se-cursor-pointer", onMouseEnter: () => handleCardHover(item), onMouseLeave: handleCardLeave, children: [_jsx(DetectionBadge, { found: detection?.found ?? false }), _jsx("span", { className: "se-shrink-0 se-flex se-items-center -se-ml-1", onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    handleCardClick(item);
-                                                }, children: _jsx(SectionIcon, { section: item.section }) }), _jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap", onClick: () => handleCardClick(item), children: item.summary }), _jsx("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) => {
+                                    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 }), _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-md se-border se-border-white/[0.03] se-bg-transparent se-mb-0.5 se-cursor-pointer se-text-xs se-text-slate-grey-6 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", { 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) => {
+                                })] })), 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: handleCancelCreate })] }));
+                                        }, children: "Restore" })] }, item.key))) }))] })) }), _jsx(EditorFooter, { onSave: () => editor.save(), onPublish: handlePublish }), _jsx(AnchorPicker, { isActive: createMode === 'picking', onPick: handleElementPicked, onCancel: () => setCreateMode('form') })] }));
 }
 /**
  * Editor module configuration.

package/dist/runtime.d.ts

@@ -4,7 +4,7 @@
  * DOM manipulation actions: insertHtml, setText, setAttr, addClass, removeClass, setStyle.
  * These follow the hostPatcher snapshot pattern for safe reversibility.
  */
-import type { InsertHtmlAction, SetTextAction, SetAttrAction, AddClassAction, RemoveClassAction, SetStyleAction, ActionExecutor } from './types';
+import type { ActionExecutor, AddClassAction, InsertHtmlAction, RemoveClassAction, SetAttrAction, SetStyleAction, SetTextAction } from './types';
 /**
  * Execute an insertHtml action
  */

package/dist/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,cAAc,EAEd,cAAc,EACf,MAAM,SAAS,CAAC;AAMjB;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAmE9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CA+BxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CAwDxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA8B1D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,iBAAiB,CA8BhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA+C1D,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;EAOZ,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;CAMnB,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EAEd,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,SAAS,CAAC;AAMjB;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAmE9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CA+BxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CAwDxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA8B1D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,iBAAiB,CA8BhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA+C1D,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;EAOZ,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;CAMnB,CAAC"}

package/dist/schema.d.ts

@@ -15,13 +15,13 @@ export declare const configSchema: z.ZodObject<{
         summary: z.ZodString;
         text: z.ZodString;
     }, "strip", z.ZodTypeAny, {
+        summary: string;
         text: string;
         anchorId: string;
-        summary: string;
     }, {
+        summary: string;
         text: string;
         anchorId: string;
-        summary: string;
     }>, "many">>;
     /** Attribute modifications */
     attributeChanges: z.ZodOptional<z.ZodArray<z.ZodObject<{
@@ -30,14 +30,14 @@ export declare const configSchema: z.ZodObject<{
         attr: z.ZodString;
         value: z.ZodString;
     }, "strip", z.ZodTypeAny, {
-        value: string;
-        anchorId: string;
         summary: string;
+        anchorId: string;
+        value: string;
         attr: string;
     }, {
-        value: string;
-        anchorId: string;
         summary: string;
+        anchorId: string;
+        value: string;
         attr: string;
     }>, "many">>;
     /** Style modifications */
@@ -46,12 +46,12 @@ export declare const configSchema: z.ZodObject<{
         summary: z.ZodString;
         styles: z.ZodRecord<z.ZodString, z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        anchorId: string;
         summary: string;
+        anchorId: string;
         styles: Record<string, string>;
     }, {
-        anchorId: string;
         summary: string;
+        anchorId: string;
         styles: Record<string, string>;
     }>, "many">>;
     /** HTML insertions */
@@ -61,15 +61,15 @@ export declare const configSchema: z.ZodObject<{
         html: z.ZodString;
         position: z.ZodEnum<["before", "after", "prepend", "append", "replace"]>;
     }, "strip", z.ZodTypeAny, {
-        anchorId: string;
         html: string;
         summary: string;
         position: "replace" | "before" | "after" | "prepend" | "append";
-    }, {
         anchorId: string;
+    }, {
         html: string;
         summary: string;
         position: "replace" | "before" | "after" | "prepend" | "append";
+        anchorId: string;
     }>, "many">>;
     /** Class additions */
     classAdditions: z.ZodOptional<z.ZodArray<z.ZodObject<{
@@ -77,13 +77,13 @@ export declare const configSchema: z.ZodObject<{
         summary: z.ZodString;
         className: z.ZodString;
     }, "strip", z.ZodTypeAny, {
+        summary: string;
         className: string;
         anchorId: string;
-        summary: string;
     }, {
+        summary: string;
         className: string;
         anchorId: string;
-        summary: string;
     }>, "many">>;
     /** Class removals */
     classRemovals: z.ZodOptional<z.ZodArray<z.ZodObject<{
@@ -91,79 +91,79 @@ export declare const configSchema: z.ZodObject<{
         summary: z.ZodString;
         className: z.ZodString;
     }, "strip", z.ZodTypeAny, {
+        summary: string;
         className: string;
         anchorId: string;
-        summary: string;
     }, {
+        summary: string;
         className: string;
         anchorId: string;
-        summary: string;
     }>, "many">>;
 }, "strip", z.ZodTypeAny, {
     textReplacements?: {
+        summary: string;
         text: string;
         anchorId: string;
-        summary: string;
     }[] | undefined;
     attributeChanges?: {
-        value: string;
-        anchorId: string;
         summary: string;
+        anchorId: string;
+        value: string;
         attr: string;
     }[] | undefined;
     styleChanges?: {
-        anchorId: string;
         summary: string;
+        anchorId: string;
         styles: Record<string, string>;
     }[] | undefined;
     htmlInsertions?: {
-        anchorId: string;
         html: string;
         summary: string;
         position: "replace" | "before" | "after" | "prepend" | "append";
+        anchorId: string;
     }[] | undefined;
     classAdditions?: {
+        summary: string;
         className: string;
         anchorId: string;
-        summary: string;
     }[] | undefined;
     classRemovals?: {
+        summary: string;
         className: string;
         anchorId: string;
-        summary: string;
     }[] | undefined;
 }, {
     textReplacements?: {
+        summary: string;
         text: string;
         anchorId: string;
-        summary: string;
     }[] | undefined;
     attributeChanges?: {
-        value: string;
-        anchorId: string;
         summary: string;
+        anchorId: string;
+        value: string;
         attr: string;
     }[] | undefined;
     styleChanges?: {
-        anchorId: string;
         summary: string;
+        anchorId: string;
         styles: Record<string, string>;
     }[] | undefined;
     htmlInsertions?: {
-        anchorId: string;
         html: string;
         summary: string;
         position: "replace" | "before" | "after" | "prepend" | "append";
+        anchorId: string;
     }[] | undefined;
     classAdditions?: {
+        summary: string;
         className: string;
         anchorId: string;
-        summary: string;
     }[] | undefined;
     classRemovals?: {
+        summary: string;
         className: string;
         anchorId: string;
-        summary: string;
     }[] | undefined;
 }>;
 export type ContentConfig = z.infer<typeof configSchema>;