@sutrata/editor 0.1.2 → 0.3.0

package/dist/navigator/SceneNavigator.js

@@ -8,9 +8,12 @@ import { getEditorView, getSourceView } from '../editor/editor-bus';
 import { schema } from '../editor/schema';
 import { EditorView as CmView } from '@codemirror/view';
 import { StatisticsDialog } from './StatisticsDialog';
-import { EyeIcon, EyeOffIcon, LockIcon, StatsIcon, SparklesIcon, CloseIcon } from '../shell/icons';
-import { getAIConfig, callAIStructured, hasConfiguredApiKey } from '../ai/ai-client';
+import { EyeIcon, EyeOffIcon, RenumberIcon, OmitIcon, RestoreIcon, StatsIcon, SparklesIcon, CloseIcon } from '../shell/icons';
+import { sceneNumberIssues, renumberScenes } from './scene-numbering';
+import { setSceneIdsInText, omitSceneInText, restoreSceneInText, applyTextEdit } from './scene-edits';
 import { SCENE_METADATA_PROMPT, SCENE_METADATA_SCHEMA } from '../ai/prompts';
+import { useAI } from '../extensions/ai-provider';
+import { useCanEdit } from '../extensions/session';
 import { prosemirrorToSutra } from '../editor/prosemirror-to-sutra';
 /** Update the scene synopsis in the raw Sutra text. */
 function updateSynopsisInText(text, sceneOffset, newSynopsis) {
@@ -165,39 +168,35 @@ function updateSceneMetadataInProseMirror(sceneIndex, key, val) {
         view.dispatch(tr);
     }
 }
-/** Lock scene numbers in raw Sutra text. */
-function lockNumbersInText(text) {
-    const lines = text.split('\n');
-    const result = [];
-    let sceneCount = 0;
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i] ?? '';
-        const trimmed = line.trim();
-        result.push(line);
-        if (trimmed.startsWith('## ') || trimmed.startsWith('##\t')) {
-            sceneCount++;
-            let hasNumber = false;
-            let j = i + 1;
-            while (j < lines.length) {
-                const nextLine = (lines[j] ?? '').trim();
-                if (nextLine.startsWith('##') || nextLine.startsWith('#'))
-                    break;
-                if (nextLine.startsWith('& number:')) {
-                    hasNumber = true;
-                    break;
-                }
-                j++;
-            }
-            if (!hasNumber) {
-                result.push(`& number: ${sceneCount}`);
-            }
-        }
+/** Ask the AI provider for a scene's synopsis + duration (one structured call). */
+function generateSceneMetadata(ai, sceneText) {
+    return ai.completeStructured({
+        system: SCENE_METADATA_PROMPT, prompt: sceneText, schema: SCENE_METADATA_SCHEMA,
+    });
+}
+/**
+ * True when the provider can take calls; otherwise points the user at its
+ * setup (if it has one) and returns false.
+ */
+async function ensureAIReady(ai, showToast) {
+    if (await ai.isConfigured())
+        return true;
+    if (ai.openSetup) {
+        showToast('AI must be set up to generate synopsis & duration. Opening Setup...', 'info');
+        ai.openSetup();
+    }
+    else {
+        showToast(`${ai.displayName} is not available right now.`, 'warn');
     }
-    return result.join('\n');
+    return false;
 }
 export function SceneNavigator() {
-    const { text, setText, setAIOnboardingVisible, showToast, setNavVisible } = useDocument();
+    const { text, setText, showToast, setNavVisible } = useDocument();
     const { t } = useTranslation();
+    // AI actions appear only with an injected, permitted AIProvider; structural
+    // actions (reorder, synopsis edits, number locking) only in edit sessions.
+    const ai = useAI();
+    const canEdit = useCanEdit();
     const [scenes, setScenes] = useState([]);
     const [dragIndex, setDragIndex] = useState(null);
     const [dropIndex, setDropIndex] = useState(null);
@@ -215,23 +214,23 @@ export function SceneNavigator() {
     useEffect(() => {
         setScenes(buildSceneList(text));
     }, [text]);
+    // Numbers that need renumbering (missing/duplicate/out of order; §7.4).
+    // Nothing is flagged until at least one scene has a number.
+    const numberIssues = React.useMemo(() => sceneNumberIssues(scenes.map(s => s.id)), [scenes]);
+    const issueLabel = (issue) => t(`navigator.number.${issue}`);
     const handleSceneMetadata = useCallback(async (scene) => {
         setIsProcessing(true);
         setProgressText('Generating synopsis & estimating duration...');
         try {
-            const aiConfig = getAIConfig();
-            if (!(await hasConfiguredApiKey(aiConfig))) {
-                showToast('AI keys are required to generate synopsis & duration. Opening Setup...', 'info');
-                setAIOnboardingVisible(true);
+            if (!ai || !(await ensureAIReady(ai, showToast)))
                 return;
-            }
             const idx = scenes.findIndex(s => s.index === scene.index);
             if (idx === -1)
                 return;
             const start = scene.textOffset;
             const end = idx + 1 < scenes.length ? scenes[idx + 1].textOffset : text.length;
             const sceneText = text.substring(start, end);
-            const { synopsis, duration } = await callAIStructured(sceneText, SCENE_METADATA_PROMPT, aiConfig, SCENE_METADATA_SCHEMA);
+            const { synopsis, duration } = await generateSceneMetadata(ai, sceneText);
             const view = getEditorView();
             if (view) {
                 updateSceneMetadataInProseMirror(scene.index, 'synopsis', synopsis.trim());
@@ -251,17 +250,13 @@ export function SceneNavigator() {
             setIsProcessing(false);
             setProgressText('');
         }
-    }, [scenes, text, setText, setAIOnboardingVisible, showToast]);
+    }, [ai, scenes, text, setText, showToast]);
     const handleGenerateAllSceneMetadata = useCallback(async () => {
         setIsProcessing(true);
         setProgressText('Starting batch synopsis & duration generation...');
         try {
-            const aiConfig = getAIConfig();
-            if (!(await hasConfiguredApiKey(aiConfig))) {
-                showToast('AI keys are required to generate synopsis & duration. Opening Setup...', 'info');
-                setAIOnboardingVisible(true);
+            if (!ai || !(await ensureAIReady(ai, showToast)))
                 return;
-            }
             const pmView = getEditorView();
             const cmView = getSourceView();
             let currentText = pmView ? prosemirrorToSutra(pmView.state.doc) : (cmView ? cmView.state.doc.toString() : textRef.current);
@@ -285,7 +280,7 @@ export function SceneNavigator() {
                 const end = idx + 1 < currentScenes.length ? currentScenes[idx + 1].textOffset : currentText.length;
                 const sceneText = currentText.substring(start, end);
                 try {
-                    const { synopsis, duration } = await callAIStructured(sceneText, SCENE_METADATA_PROMPT, aiConfig, SCENE_METADATA_SCHEMA);
+                    const { synopsis, duration } = await generateSceneMetadata(ai, sceneText);
                     if (pmView) {
                         if (!latestScene.synopsis)
                             updateSceneMetadataInProseMirror(scene.index, 'synopsis', synopsis.trim());
@@ -321,7 +316,7 @@ export function SceneNavigator() {
             setIsProcessing(false);
             setProgressText('');
         }
-    }, [setText, setAIOnboardingVisible, showToast]);
+    }, [ai, setText, showToast]);
     const handleFrontmatter = useCallback(() => {
         const view = getEditorView();
         if (!view) {
@@ -337,7 +332,7 @@ export function SceneNavigator() {
         }
         let tr = view.state.tr;
         const first = view.state.doc.firstChild;
-        if (!first || first.type.name !== 'title_page') {
+        if (canEdit && (!first || first.type.name !== 'title_page')) {
             const field = schema.nodes['frontmatter_field'].create({ fmKey: 'title' });
             tr = tr.insert(0, schema.nodes['title_page'].create({}, [field]));
         }
@@ -348,7 +343,7 @@ export function SceneNavigator() {
         if (typeof window !== 'undefined' && window.innerWidth <= 640) {
             setNavVisible(false);
         }
-    }, [setNavVisible]);
+    }, [canEdit, setNavVisible]);
     const handleJump = useCallback((scene) => {
         const view = getEditorView();
         if (!view) {
@@ -403,7 +398,7 @@ export function SceneNavigator() {
     }, []);
     const handleDrop = useCallback((e, targetIdx) => {
         e.preventDefault();
-        if (dragIndex === null || dragIndex === targetIdx) {
+        if (!canEdit || dragIndex === null || dragIndex === targetIdx) {
             setDragIndex(null);
             setDropIndex(null);
             return;
@@ -412,7 +407,7 @@ export function SceneNavigator() {
         setText(newText);
         setDragIndex(null);
         setDropIndex(null);
-    }, [dragIndex, text, scenes, setText]);
+    }, [canEdit, dragIndex, text, scenes, setText]);
     const commitSynopsis = useCallback((idx, scene) => {
         setEditingSceneIdx(null);
         const newSynopsis = editVal.trim();
@@ -472,50 +467,38 @@ export function SceneNavigator() {
             setText(nextText);
         }
     }, [editVal, text, setText]);
-    const handleLockNumbers = useCallback(() => {
-        const view = getEditorView();
-        if (view) {
-            let tr = view.state.tr;
-            let headingCount = 0;
-            let posMap = [];
-            view.state.doc.forEach((node, offset) => {
-                if (node.type.name === 'scene_heading') {
-                    headingCount++;
-                    let hasNumber = false;
-                    let index = view.state.doc.resolve(offset).index(0) + 1;
-                    while (index < view.state.doc.childCount) {
-                        const sibling = view.state.doc.child(index);
-                        if (sibling.type.name === 'scene_metadata') {
-                            if (sibling.attrs['metaKey'] === 'number') {
-                                hasNumber = true;
-                                break;
-                            }
-                        }
-                        else {
-                            break;
-                        }
-                        index++;
-                    }
-                    if (!hasNumber) {
-                        posMap.push({ headingPos: offset, currentNum: String(headingCount) });
-                    }
-                }
-            });
-            for (let k = posMap.length - 1; k >= 0; k--) {
-                const { headingPos, currentNum } = posMap[k];
-                const headingNode = view.state.doc.nodeAt(headingPos);
-                const insertPos = headingPos + headingNode.nodeSize;
-                const metaNode = schema.nodes['scene_metadata'].create({ metaKey: 'number' }, schema.text(currentNum));
-                tr = tr.insert(insertPos, metaNode);
-            }
-            view.dispatch(tr);
-        }
-        else {
-            const nextText = lockNumbersInText(text);
-            setText(nextText);
+    /**
+     * Current editor text: the navigator's `text` can lag the editor by a
+     * render, and these actions rewrite whole scenes.
+     */
+    const liveText = useCallback(() => {
+        const pmView = getEditorView();
+        const cmView = getSourceView();
+        return pmView ? prosemirrorToSutra(pmView.state.doc) : cmView ? cmView.state.doc.toString() : textRef.current;
+    }, []);
+    // Renumber scenes (format spec §7.4): only when the writer asks.
+    const handleRenumber = useCallback(() => {
+        const current = liveText();
+        const list = buildSceneList(current);
+        const next = renumberScenes(list.map(s => s.id));
+        const ids = next.map((n, i) => (n === list[i].id ? undefined : n));
+        const changed = ids.filter(n => n !== undefined).length;
+        if (changed === 0) {
+            showToast('Scene numbers are already in order.', 'info');
+            return;
         }
-    }, [text, setText]);
-    return (_jsxs("div", { className: "cs-navigator", role: "navigation", "aria-label": "Scene Navigator", children: [_jsxs("div", { className: "cs-nav-mobile-bar", children: [_jsx("span", { className: "cs-nav-mobile-title", children: t('navigator.title') }), _jsx("button", { type: "button", className: "cs-nav-mobile-close", "aria-label": "Close navigator", onClick: () => setNavVisible(false), children: _jsx(CloseIcon, { size: 18 }) })] }), _jsxs("div", { className: "cs-nav-list", children: [_jsx("button", { type: "button", className: "cs-nav-section-header cs-nav-frontmatter-btn", onClick: handleFrontmatter, title: t('navigator.frontmatter'), children: _jsx("span", { className: "cs-nav-title", children: t('navigator.frontmatter') }) }), _jsxs("div", { className: "cs-nav-section-header cs-nav-scenes-header", style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("span", { className: "cs-nav-title", children: t('navigator.title') }), _jsx("span", { className: "cs-nav-count", children: scenes.length })] }), _jsxs("div", { style: { display: 'flex', gap: '4px', alignItems: 'center' }, onClick: e => e.stopPropagation(), children: [_jsx("button", { type: "button", className: "cs-nav-action-btn", onClick: () => setShowNavSynopsis(!showNavSynopsis), title: showNavSynopsis ? 'Hide Synopsis & Duration' : 'Show Synopsis & Duration', "aria-label": showNavSynopsis ? 'Hide Synopsis & Duration' : 'Show Synopsis & Duration', children: showNavSynopsis ? _jsx(EyeIcon, { size: 14 }) : _jsx(EyeOffIcon, { size: 14 }) }), _jsx("button", { type: "button", className: "cs-nav-action-btn", onClick: handleGenerateAllSceneMetadata, disabled: isProcessing, title: "Generate synopsis & estimate duration (all scenes)", "aria-label": "Generate synopsis & estimate duration (all scenes)", style: { opacity: isProcessing ? 0.5 : 1 }, children: _jsx(SparklesIcon, { size: 14 }) }), _jsx("button", { type: "button", className: "cs-nav-action-btn", onClick: handleLockNumbers, title: "Lock Scene Numbers", "aria-label": "Lock Scene Numbers", children: _jsx(LockIcon, { size: 14 }) })] })] }), isProcessing && progressText && (_jsxs("div", { className: "cs-nav-progress", style: {
+        applyTextEdit(setSceneIdsInText(current, ids), setText);
+        showToast(`Renumbered ${changed} scene${changed === 1 ? '' : 's'}.`, 'success');
+    }, [liveText, setText, showToast]);
+    const handleOmitToggle = useCallback((scene) => {
+        const current = liveText();
+        const idx = buildSceneList(current).findIndex(s => s.index === scene.index);
+        if (idx === -1)
+            return;
+        const omitted = scene.status.toLowerCase() === 'omitted';
+        applyTextEdit(omitted ? restoreSceneInText(current, idx) : omitSceneInText(current, idx), setText);
+    }, [liveText, setText]);
+    return (_jsxs("div", { className: "cs-navigator", role: "navigation", "aria-label": "Scene Navigator", children: [_jsxs("div", { className: "cs-nav-mobile-bar", children: [_jsx("span", { className: "cs-nav-mobile-title", children: t('navigator.title') }), _jsx("button", { type: "button", className: "cs-nav-mobile-close", "aria-label": "Close navigator", onClick: () => setNavVisible(false), children: _jsx(CloseIcon, { size: 18 }) })] }), _jsxs("div", { className: "cs-nav-list", children: [_jsx("button", { type: "button", className: "cs-nav-section-header cs-nav-frontmatter-btn", onClick: handleFrontmatter, title: t('navigator.frontmatter'), children: _jsx("span", { className: "cs-nav-title", children: t('navigator.frontmatter') }) }), _jsxs("div", { className: "cs-nav-section-header cs-nav-scenes-header", style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("span", { className: "cs-nav-title", children: t('navigator.title') }), _jsx("span", { className: "cs-nav-count", children: scenes.length })] }), _jsxs("div", { style: { display: 'flex', gap: '4px', alignItems: 'center' }, onClick: e => e.stopPropagation(), children: [_jsx("button", { type: "button", className: "cs-nav-action-btn", onClick: () => setShowNavSynopsis(!showNavSynopsis), title: showNavSynopsis ? 'Hide Synopsis & Duration' : 'Show Synopsis & Duration', "aria-label": showNavSynopsis ? 'Hide Synopsis & Duration' : 'Show Synopsis & Duration', children: showNavSynopsis ? _jsx(EyeIcon, { size: 14 }) : _jsx(EyeOffIcon, { size: 14 }) }), ai && (_jsx("button", { type: "button", className: "cs-nav-action-btn", onClick: handleGenerateAllSceneMetadata, disabled: isProcessing, title: "Generate synopsis & estimate duration (all scenes)", "aria-label": "Generate synopsis & estimate duration (all scenes)", style: { opacity: isProcessing ? 0.5 : 1 }, children: _jsx(SparklesIcon, { size: 14 }) })), canEdit && (_jsx("button", { type: "button", className: "cs-nav-action-btn", onClick: handleRenumber, title: t('navigator.renumber'), "aria-label": t('navigator.renumber'), children: _jsx(RenumberIcon, { size: 14 }) }))] })] }), isProcessing && progressText && (_jsxs("div", { className: "cs-nav-progress", style: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: '8px',
@@ -525,48 +508,59 @@ export function SceneNavigator() {
                             background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)',
                             borderBottom: '1px solid var(--cs-ui-border-light, #e2e0d6)',
                             fontWeight: 500,
-                        }, children: [_jsx("span", { className: "cs-spinner", style: { width: '10px', height: '10px', borderWidth: '1.5px' } }), _jsx("span", { children: progressText })] })), scenes.map((scene, idx) => (_jsxs("div", { role: "button", tabIndex: 0, "aria-label": `Jump to ${scene.heading}`, onKeyDown: (e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                handleJump(scene);
-                            }
-                        }, className: [
-                            'cs-nav-item',
-                            dragIndex === idx ? 'cs-nav-dragging' : '',
-                            dropIndex === idx ? 'cs-nav-drop-target' : '',
-                        ]
-                            .filter(Boolean)
-                            .join(' '), draggable: true, onClick: () => handleJump(scene), onDragStart: () => handleDragStart(idx), onDragOver: (e) => handleDragOver(e, idx), onDrop: (e) => handleDrop(e, idx), onDragEnd: () => {
-                            setDragIndex(null);
-                            setDropIndex(null);
-                        }, children: [_jsxs("div", { className: "cs-nav-scene-info", children: [_jsx("div", { className: "cs-nav-heading", children: scene.heading }), showNavSynopsis && (_jsxs("div", { className: "cs-nav-synopsis-row", style: { marginTop: '4px' }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: editingSceneIdx === idx ? (_jsx("input", { type: "text", className: "cs-nav-synopsis-input", value: editVal, onChange: e => setEditVal(e.target.value), onBlur: () => commitSynopsis(idx, scene), onKeyDown: e => {
-                                                        if (e.key === 'Enter')
-                                                            commitSynopsis(idx, scene);
-                                                        if (e.key === 'Escape')
-                                                            setEditingSceneIdx(null);
-                                                    }, autoFocus: true, onClick: e => e.stopPropagation() })) : scene.synopsis ? (_jsx("div", { className: "cs-nav-scene-synopsis", onClick: e => {
-                                                        e.stopPropagation();
-                                                        setEditingSceneIdx(idx);
-                                                        setEditVal(scene.synopsis);
-                                                    }, title: "Click to edit synopsis", children: scene.synopsis })) : (_jsx("div", { className: "cs-nav-scene-synopsis cs-nav-synopsis-placeholder", onClick: e => {
-                                                        e.stopPropagation();
-                                                        setEditingSceneIdx(idx);
-                                                        setEditVal('');
-                                                    }, role: "button", tabIndex: 0, "aria-label": "Add synopsis", onKeyDown: e => {
-                                                        if (e.key === 'Enter' || e.key === ' ') {
+                        }, children: [_jsx("span", { className: "cs-spinner", style: { width: '10px', height: '10px', borderWidth: '1.5px' } }), _jsx("span", { children: progressText })] })), scenes.map((scene, idx) => {
+                        const issue = numberIssues[idx] ?? null;
+                        const omitted = scene.status.toLowerCase() === 'omitted';
+                        // The id is the scene number, so a missing id is one note, not two.
+                        const note = issue ? issueLabel(issue) : scene.id ? null : t('navigator.missingId');
+                        const notes = note ? [note] : [];
+                        return (_jsxs("div", { role: "button", tabIndex: 0, "aria-label": `Jump to ${scene.heading}${notes.length ? ` (${notes.join('; ')})` : ''}`, onKeyDown: (e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    handleJump(scene);
+                                }
+                            }, className: [
+                                'cs-nav-item',
+                                // No {#id}: comments, scene-level diff, and page locking can't anchor to it.
+                                scene.id ? '' : 'cs-nav-scene-missing-id',
+                                issue ? 'cs-nav-scene-number-issue' : '',
+                                omitted ? 'cs-nav-scene-omitted' : '',
+                                dragIndex === idx ? 'cs-nav-dragging' : '',
+                                dropIndex === idx ? 'cs-nav-drop-target' : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' '), draggable: canEdit, onClick: () => handleJump(scene), onDragStart: () => handleDragStart(idx), onDragOver: (e) => handleDragOver(e, idx), onDrop: (e) => handleDrop(e, idx), onDragEnd: () => {
+                                setDragIndex(null);
+                                setDropIndex(null);
+                            }, children: [_jsxs("div", { className: "cs-nav-scene-info", children: [_jsx("div", { className: "cs-nav-heading", children: scene.heading }), showNavSynopsis && (_jsxs("div", { className: "cs-nav-synopsis-row", style: { marginTop: '4px' }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: !canEdit ? (scene.synopsis ? _jsx("div", { className: "cs-nav-scene-synopsis", children: scene.synopsis }) : null) : editingSceneIdx === idx ? (_jsx("input", { type: "text", className: "cs-nav-synopsis-input", value: editVal, onChange: e => setEditVal(e.target.value), onBlur: () => commitSynopsis(idx, scene), onKeyDown: e => {
+                                                            if (e.key === 'Enter')
+                                                                commitSynopsis(idx, scene);
+                                                            if (e.key === 'Escape')
+                                                                setEditingSceneIdx(null);
+                                                        }, autoFocus: true, onClick: e => e.stopPropagation() })) : scene.synopsis ? (_jsx("div", { className: "cs-nav-scene-synopsis", onClick: e => {
+                                                            e.stopPropagation();
+                                                            setEditingSceneIdx(idx);
+                                                            setEditVal(scene.synopsis);
+                                                        }, title: "Click to edit synopsis", children: scene.synopsis })) : (_jsx("div", { className: "cs-nav-scene-synopsis cs-nav-synopsis-placeholder", onClick: e => {
                                                             e.stopPropagation();
-                                                            e.preventDefault();
                                                             setEditingSceneIdx(idx);
                                                             setEditVal('');
-                                                        }
-                                                    }, children: "+ Synopsis" })) }), _jsx("button", { type: "button", onClick: (e) => { e.stopPropagation(); void handleSceneMetadata(scene); }, disabled: isProcessing, title: "Generate synopsis & estimate duration", "aria-label": "Generate synopsis & estimate duration", className: "cs-nav-action-btn cs-nav-synopsis-ai-btn", style: { color: 'var(--cs-ui-accent, #c4760a)', ...(isProcessing ? { opacity: 0.5 } : {}) }, children: _jsx(SparklesIcon, { size: 12 }) })] })), (scene.status || (showNavSynopsis && scene.estDuration)) && (_jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center', marginTop: '6px' }, children: [scene.status && (_jsx("span", { className: `cs-nav-status cs-status-${scene.status
-                                                    .toLowerCase()
-                                                    .replace(/\s+/g, '-')}`, children: scene.status })), showNavSynopsis && scene.estDuration && (_jsxs("span", { className: "cs-nav-status", title: "Estimated Onscreen Duration", style: {
-                                                    background: 'rgba(217, 119, 6, 0.1)',
-                                                    color: 'var(--cs-ui-accent, #c4760a)',
-                                                    border: '1px solid rgba(217, 119, 6, 0.25)',
-                                                    fontWeight: 600,
-                                                }, children: ["\u23F1 ", scene.estDuration] }))] }))] }), scene.id && _jsx("div", { className: "cs-nav-scene-num", children: scene.id })] }, scene.id ?? `scene-${idx}`))), scenes.length === 0 && (_jsx("div", { className: "cs-nav-empty", children: t('navigator.empty') })), _jsx("div", { style: { marginTop: '20px', padding: '0 8px 10px', borderTop: '1px solid #eee', paddingTop: '15px' }, children: _jsxs("button", { type: "button", className: "cs-nav-section-header cs-nav-frontmatter-btn", onClick: () => setStatsOpen(true), style: { width: '100%', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }, children: [_jsx(StatsIcon, { size: 14 }), " ", _jsx("span", { className: "cs-nav-title", children: "Statistics" })] }) })] }), statsOpen && _jsx(StatisticsDialog, { onClose: () => setStatsOpen(false) })] }));
+                                                        }, role: "button", tabIndex: 0, "aria-label": "Add synopsis", onKeyDown: e => {
+                                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                                e.stopPropagation();
+                                                                e.preventDefault();
+                                                                setEditingSceneIdx(idx);
+                                                                setEditVal('');
+                                                            }
+                                                        }, children: "+ Synopsis" })) }), ai && _jsx("button", { type: "button", onClick: (e) => { e.stopPropagation(); void handleSceneMetadata(scene); }, disabled: isProcessing, title: "Generate synopsis & estimate duration", "aria-label": "Generate synopsis & estimate duration", className: "cs-nav-action-btn cs-nav-synopsis-ai-btn", style: { color: 'var(--cs-ui-accent, #c4760a)', ...(isProcessing ? { opacity: 0.5 } : {}) }, children: _jsx(SparklesIcon, { size: 12 }) })] })), (scene.status || (showNavSynopsis && scene.estDuration)) && (_jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center', marginTop: '6px' }, children: [scene.status && (_jsx("span", { className: `cs-nav-status cs-status-${scene.status
+                                                        .toLowerCase()
+                                                        .replace(/\s+/g, '-')}`, children: scene.status })), showNavSynopsis && scene.estDuration && (_jsxs("span", { className: "cs-nav-status", title: "Estimated Onscreen Duration", style: {
+                                                        background: 'rgba(217, 119, 6, 0.1)',
+                                                        color: 'var(--cs-ui-accent, #c4760a)',
+                                                        border: '1px solid rgba(217, 119, 6, 0.25)',
+                                                        fontWeight: 600,
+                                                    }, children: ["\u23F1 ", scene.estDuration] }))] }))] }), _jsxs("div", { className: "cs-nav-scene-side", children: [scene.id ? (_jsx("div", { className: `cs-nav-scene-num${issue ? ' cs-nav-num-issue' : ''}`, title: issue ? issueLabel(issue) : undefined, children: scene.id })) : (_jsx("div", { className: "cs-nav-missing-id-icon", title: issue ? issueLabel(issue) : t('navigator.missingId'), "aria-hidden": "true", children: "\u26A0" })), canEdit && (_jsx("button", { type: "button", className: "cs-nav-action-btn cs-nav-omit-btn", title: omitted ? t('navigator.restoreScene') : t('navigator.omitScene'), "aria-label": `${omitted ? t('navigator.restoreScene') : t('navigator.omitScene')}: ${scene.heading}`, onClick: e => { e.stopPropagation(); handleOmitToggle(scene); }, children: omitted ? _jsx(RestoreIcon, { size: 12 }) : _jsx(OmitIcon, { size: 12 }) }))] })] }, `${idx}:${scene.id ?? ''}`));
+                    }), scenes.length === 0 && (_jsx("div", { className: "cs-nav-empty", children: t('navigator.empty') })), _jsx("div", { style: { marginTop: '20px', padding: '0 8px 10px', borderTop: '1px solid #eee', paddingTop: '15px' }, children: _jsxs("button", { type: "button", className: "cs-nav-section-header cs-nav-frontmatter-btn", onClick: () => setStatsOpen(true), style: { width: '100%', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }, children: [_jsx(StatsIcon, { size: 14 }), " ", _jsx("span", { className: "cs-nav-title", children: "Statistics" })] }) })] }), statsOpen && _jsx(StatisticsDialog, { onClose: () => setStatsOpen(false) })] }));
 }
 /**
  * Reorder scene blocks in the source text.

package/dist/navigator/StatisticsDialog.js

@@ -3,10 +3,14 @@ import { useDocument } from '../context/DocumentContext';
 import { extractWorkflowData } from '../file/workflow-reports';
 import { getEditorView } from '../editor/editor-bus';
 import { schema } from '../editor/schema';
+import { useCanEdit } from '../extensions/session';
 export function StatisticsDialog({ onClose }) {
     const { ast, text, setText } = useDocument();
+    const canEdit = useCanEdit();
     const { scenes, characters } = extractWorkflowData(ast);
     const handleUpdateActor = (charName, actorName) => {
+        if (!canEdit)
+            return;
         const cleanChar = charName.trim().toUpperCase();
         if (!cleanChar)
             return;
@@ -78,7 +82,7 @@ export function StatisticsDialog({ onClose }) {
     return (_jsx("div", { className: "cs-dialog-overlay", role: "presentation", onClick: e => {
             if (e.target === e.currentTarget)
                 onClose();
-        }, children: _jsxs("div", { className: "cs-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "cs-stats-dialog-title", style: { maxWidth: '640px', width: '92%', maxHeight: '85vh', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-stats-dialog-title", className: "cs-panel-title", children: "Script Statistics" }), _jsx("button", { className: "cs-panel-close", onClick: onClose, "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { className: "cs-panel-body", style: { overflowY: 'auto', flex: 1, padding: '20px' }, children: [_jsxs("div", { className: "cs-stats-summary-grid", children: [_jsxs("div", { className: "cs-stats-card", children: [_jsx("div", { className: "cs-stats-card-val", children: scenes.length }), _jsx("div", { className: "cs-stats-card-lbl", children: "Scenes" })] }), _jsxs("div", { className: "cs-stats-card", children: [_jsx("div", { className: "cs-stats-card-val", children: wordCount.toLocaleString() }), _jsx("div", { className: "cs-stats-card-lbl", children: "Words" })] }), _jsxs("div", { className: "cs-stats-card", children: [_jsx("div", { className: "cs-stats-card-val", children: totalDurationLabel }), _jsx("div", { className: "cs-stats-card-lbl", children: "Est. Duration" })] })] }), _jsxs("div", { className: "cs-stats-section-hdr", children: ["Cast List & Occurrences (", characters.length, ")"] }), characters.length === 0 ? (_jsx("div", { style: { color: 'var(--cs-ui-text-light-muted, #8c897f)', fontStyle: 'italic', fontSize: '12px' }, children: "No character cues detected in the screenplay yet." })) : (_jsxs("table", { className: "cs-stats-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { textAlign: 'left', width: '35%' }, children: "Character" }), _jsx("th", { style: { textAlign: 'left' }, children: "Actor" }), _jsx("th", { style: { textAlign: 'center', width: '15%' }, children: "Scenes" })] }) }), _jsx("tbody", { children: characters.map((c, i) => (_jsxs("tr", { children: [_jsx("td", { style: { fontWeight: '600' }, children: c.name }), _jsx("td", { children: _jsx("input", { type: "text", className: "cs-stats-actor-input", value: c.actor, onChange: (e) => handleUpdateActor(c.name, e.target.value), placeholder: "Assign actor...", "aria-label": `Actor for ${c.name}` }) }), _jsx("td", { style: { textAlign: 'center', fontWeight: '500' }, children: c.sceneCount })] }, i))) })] }))] }), _jsx("div", { style: {
+        }, children: _jsxs("div", { className: "cs-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "cs-stats-dialog-title", style: { maxWidth: '640px', width: '92%', maxHeight: '85vh', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-stats-dialog-title", className: "cs-panel-title", children: "Script Statistics" }), _jsx("button", { className: "cs-panel-close", onClick: onClose, "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { className: "cs-panel-body", style: { overflowY: 'auto', flex: 1, padding: '20px' }, children: [_jsxs("div", { className: "cs-stats-summary-grid", children: [_jsxs("div", { className: "cs-stats-card", children: [_jsx("div", { className: "cs-stats-card-val", children: scenes.length }), _jsx("div", { className: "cs-stats-card-lbl", children: "Scenes" })] }), _jsxs("div", { className: "cs-stats-card", children: [_jsx("div", { className: "cs-stats-card-val", children: wordCount.toLocaleString() }), _jsx("div", { className: "cs-stats-card-lbl", children: "Words" })] }), _jsxs("div", { className: "cs-stats-card", children: [_jsx("div", { className: "cs-stats-card-val", children: totalDurationLabel }), _jsx("div", { className: "cs-stats-card-lbl", children: "Est. Duration" })] })] }), _jsxs("div", { className: "cs-stats-section-hdr", children: ["Cast List & Occurrences (", characters.length, ")"] }), characters.length === 0 ? (_jsx("div", { style: { color: 'var(--cs-ui-text-light-muted, #8c897f)', fontStyle: 'italic', fontSize: '12px' }, children: "No character cues detected in the screenplay yet." })) : (_jsxs("table", { className: "cs-stats-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { textAlign: 'left', width: '35%' }, children: "Character" }), _jsx("th", { style: { textAlign: 'left' }, children: "Actor" }), _jsx("th", { style: { textAlign: 'center', width: '15%' }, children: "Scenes" })] }) }), _jsx("tbody", { children: characters.map((c, i) => (_jsxs("tr", { children: [_jsx("td", { style: { fontWeight: '600' }, children: c.name }), _jsx("td", { children: _jsx("input", { type: "text", className: "cs-stats-actor-input", value: c.actor, onChange: (e) => handleUpdateActor(c.name, e.target.value), readOnly: !canEdit, placeholder: "Assign actor...", "aria-label": `Actor for ${c.name}` }) }), _jsx("td", { style: { textAlign: 'center', fontWeight: '500' }, children: c.sceneCount })] }, i))) })] }))] }), _jsx("div", { style: {
                         borderTop: '1px solid var(--cs-ui-border-light-subtle, #eeece4)',
                         display: 'flex',
                         justifyContent: 'flex-end',

package/dist/navigator/scene-edits.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Set scene i's `{#id}` (its scene number, §7.4) to `ids[i]`, keeping the
+ * heading's other attributes; `undefined` leaves the scene as it is.
+ */
+export declare function setSceneIdsInText(text: string, ids: readonly (string | undefined)[]): string;
+/**
+ * Omit a scene (§7.4): keep its heading and number, set `& status: omitted`,
+ * and keep its body inside a comment so it can be restored.
+ */
+export declare function omitSceneInText(text: string, index: number): string;
+/** Undo omitSceneInText: drop `& status: omitted` and unwrap a body kept in a comment. */
+export declare function restoreSceneInText(text: string, index: number): string;
+/**
+ * Replace the document text with `next` as one undoable edit. In the
+ * formatted editor only the top-level blocks that changed are replaced, so
+ * the caret, scroll and history stay meaningful.
+ */
+export declare function applyTextEdit(next: string, setText: (t: string) => void): void;

package/dist/navigator/scene-edits.js

@@ -0,0 +1,143 @@
+import { parse, splitAttributeBlock, formatAttributeBlock } from '@sutrata/parser';
+import { buildSceneList } from './scene-list';
+import { getEditorView, getSourceView } from '../editor/editor-bus';
+import { sutraToProsemirror } from '../editor/sutra-to-prosemirror';
+/**
+ * Text-level scene edits used by the navigator (renumber, omit, restore),
+ * and applyTextEdit, which puts the result into whichever editor is mounted
+ * as ONE undoable change.
+ */
+const META = /^&\s+[A-Za-z0-9_-]+:/;
+const LIST_ITEM = /^\s+-(\s|$)/;
+function sceneSpans(text) {
+    const scenes = buildSceneList(text);
+    return scenes.map((s, i) => ({ start: s.textOffset, end: scenes[i + 1]?.textOffset ?? text.length }));
+}
+/**
+ * Split a scene's text into its heading block (heading + metadata, which may
+ * be separated by blank lines), its body, and anything from a following
+ * section heading on (sections end a scene's content).
+ */
+function splitScene(segment) {
+    const lines = segment.split('\n');
+    let headEnd = 1;
+    for (let i = 1; i < lines.length; i++) {
+        const l = lines[i];
+        if (META.test(l.trim()) || LIST_ITEM.test(l))
+            headEnd = i + 1;
+        else if (l.trim() !== '')
+            break;
+    }
+    let bodyEnd = lines.length;
+    for (let i = headEnd; i < lines.length; i++) {
+        if (/^#(\s|$)/.test(lines[i])) {
+            bodyEnd = i;
+            break;
+        }
+    }
+    return {
+        head: lines.slice(0, headEnd).filter(l => l.trim() !== ''),
+        body: lines.slice(headEnd, bodyEnd).join('\n').trim(),
+        rest: lines.slice(bodyEnd).join('\n').trim(),
+    };
+}
+function joinScene(head, body, rest, isLast) {
+    return [head.join('\n'), body, rest].filter(Boolean).join('\n\n') + (isLast ? '\n' : '\n\n');
+}
+/**
+ * Set (replace or add) `& key: value` in a heading block; null removes it.
+ * A new line goes right under the heading (`first`) or after the existing
+ * metadata (`last`).
+ */
+function setMeta(head, key, value, where = 'first') {
+    const re = new RegExp(`^&\\s+${key}:`);
+    const idx = head.findIndex(l => re.test(l.trim()));
+    const line = value === null ? null : `& ${key}: ${value}`;
+    if (idx >= 0)
+        return line === null ? head.filter((_, i) => i !== idx) : head.map((l, i) => (i === idx ? line : l));
+    if (line === null)
+        return head;
+    return where === 'first' ? [head[0], line, ...head.slice(1)] : [...head, line];
+}
+function editScenes(text, edit) {
+    const spans = sceneSpans(text);
+    let out = text;
+    for (let i = spans.length - 1; i >= 0; i--) {
+        const { start, end } = spans[i];
+        const parts = edit(i, splitScene(out.slice(start, end)));
+        if (!parts)
+            continue;
+        out = out.slice(0, start) + joinScene(parts.head, parts.body, parts.rest, end === text.length) + out.slice(end);
+    }
+    return out;
+}
+/**
+ * Set scene i's `{#id}` (its scene number, §7.4) to `ids[i]`, keeping the
+ * heading's other attributes; `undefined` leaves the scene as it is.
+ */
+export function setSceneIdsInText(text, ids) {
+    return editScenes(text, (i, parts) => {
+        const id = ids[i];
+        if (id === undefined)
+            return null;
+        const m = /^(\s*##\s+)(.*)$/.exec(parts.head[0]);
+        const { body, attrs } = splitAttributeBlock(m[2].trimEnd());
+        const heading = `${m[1]}${body.trimEnd()}${formatAttributeBlock(id, attrs)}`;
+        return { ...parts, head: [heading, ...parts.head.slice(1)] };
+    });
+}
+/**
+ * Omit a scene (§7.4): keep its heading and number, set `& status: omitted`,
+ * and keep its body inside a comment so it can be restored.
+ */
+export function omitSceneInText(text, index) {
+    return editScenes(text, (i, parts) => i !== index ? null : {
+        head: setMeta(parts.head, 'status', 'omitted', 'last'),
+        body: parts.body ? `<!-- ${parts.body.replace(/-->/g, '-- >')} -->` : '',
+        rest: parts.rest,
+    });
+}
+/** Undo omitSceneInText: drop `& status: omitted` and unwrap a body kept in a comment. */
+export function restoreSceneInText(text, index) {
+    return editScenes(text, (i, parts) => {
+        if (i !== index)
+            return null;
+        const m = /^<!--\s?([\s\S]*?)\s?-->$/.exec(parts.body);
+        return { head: setMeta(parts.head, 'status', null), body: m ? m[1].trim() : parts.body, rest: parts.rest };
+    });
+}
+/**
+ * Replace the document text with `next` as one undoable edit. In the
+ * formatted editor only the top-level blocks that changed are replaced, so
+ * the caret, scroll and history stay meaningful.
+ */
+export function applyTextEdit(next, setText) {
+    const view = getEditorView();
+    if (view) {
+        const target = sutraToProsemirror(parse(next));
+        const doc = view.state.doc;
+        const a = [];
+        const b = [];
+        doc.forEach(n => a.push(n));
+        target.forEach(n => b.push(n));
+        let head = 0;
+        while (head < a.length && head < b.length && a[head].eq(b[head]))
+            head++;
+        let tail = 0;
+        while (tail < a.length - head && tail < b.length - head && a[a.length - 1 - tail].eq(b[b.length - 1 - tail]))
+            tail++;
+        if (head === a.length && head === b.length)
+            return;
+        const posOf = (nodes, index) => nodes.slice(0, index).reduce((p, n) => p + n.nodeSize, 0);
+        const from = posOf(a, head);
+        const to = posOf(a, a.length - tail);
+        view.dispatch(view.state.tr.replaceWith(from, to, b.slice(head, b.length - tail)));
+        return;
+    }
+    const source = getSourceView();
+    if (source) {
+        source.dispatch({ changes: { from: 0, to: source.state.doc.length, insert: next } });
+        return;
+    }
+    setText(next);
+}

package/dist/navigator/scene-list.js

@@ -1,3 +1,4 @@
+import { splitAttributeBlock } from '@sutrata/parser';
 /**
  * Derive a flat scene list from Sutra source text.
  * Scenes are identified by scene heading lines (## prefix).
@@ -14,10 +15,9 @@ export function buildSceneList(text) {
         if (trimmed.startsWith('## ') || trimmed.startsWith('##\t')) {
             const headingRaw = trimmed.slice(3).trim();
             const sceneStart = currentOffset;
-            // Extract scene id from inline {#...} on the heading line, then strip it
-            const idMatch = /\{#([^}]+)\}/.exec(headingRaw);
-            const sceneId = idMatch?.[1] ?? null;
-            const heading = headingRaw.replace(/\s*\{#[^}]+\}/, '').trim();
+            // Split the trailing attribute block ({#id lang=…}, §10) off the heading
+            const { body, id: sceneId } = splitAttributeBlock(headingRaw);
+            const heading = body.trim();
             // Collect metadata (& key: value) until next heading
             let synopsis = '';
             let status = '';