@sutrata/editor 0.1.0

package/dist/navigator/SceneNavigator.js

@@ -0,0 +1,612 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState, useCallback } from 'react';
+import { TextSelection } from 'prosemirror-state';
+import { useDocument } from '../context/DocumentContext';
+import { useTranslation } from '../i18n/useTranslation';
+import { buildSceneList } from './scene-list';
+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 { SCENE_METADATA_PROMPT, SCENE_METADATA_SCHEMA } from '../ai/prompts';
+import { prosemirrorToSutra } from '../editor/prosemirror-to-sutra';
+/** Update the scene synopsis in the raw Sutra text. */
+function updateSynopsisInText(text, sceneOffset, newSynopsis) {
+    const lines = text.split('\n');
+    let currentOffset = 0;
+    let targetLineIdx = -1;
+    for (let i = 0; i < lines.length; i++) {
+        if (currentOffset === sceneOffset) {
+            targetLineIdx = i;
+            break;
+        }
+        currentOffset += (lines[i]?.length ?? 0) + 1;
+    }
+    if (targetLineIdx === -1)
+        return text;
+    let synopsisLineIdx = -1;
+    let insertIdx = targetLineIdx + 1;
+    for (let j = targetLineIdx + 1; j < lines.length; j++) {
+        const line = (lines[j] ?? '').trim();
+        if (line.startsWith('##') || line.startsWith('#'))
+            break;
+        if (line.startsWith('& synopsis:')) {
+            synopsisLineIdx = j;
+            break;
+        }
+        if (line.startsWith('&')) {
+            insertIdx = j + 1;
+        }
+        else if (line !== '') {
+            break;
+        }
+    }
+    const newLines = [...lines];
+    if (synopsisLineIdx !== -1) {
+        if (newSynopsis.trim() === '') {
+            newLines.splice(synopsisLineIdx, 1);
+        }
+        else {
+            newLines[synopsisLineIdx] = `& synopsis: ${newSynopsis}`;
+        }
+    }
+    else if (newSynopsis.trim() !== '') {
+        newLines.splice(insertIdx, 0, `& synopsis: ${newSynopsis}`);
+    }
+    return newLines.join('\n');
+}
+/** Update a scene metadata key/value in the raw Sutra text. */
+function updateSceneMetadataInText(text, sceneOffset, key, val) {
+    const lines = text.split('\n');
+    let currentOffset = 0;
+    let targetLineIdx = -1;
+    for (let i = 0; i < lines.length; i++) {
+        if (currentOffset === sceneOffset) {
+            targetLineIdx = i;
+            break;
+        }
+        currentOffset += (lines[i]?.length ?? 0) + 1;
+    }
+    if (targetLineIdx === -1)
+        return text;
+    let metadataLineIdx = -1;
+    let insertIdx = targetLineIdx + 1;
+    for (let j = targetLineIdx + 1; j < lines.length; j++) {
+        const line = (lines[j] ?? '').trim();
+        if (line.startsWith('##') || line.startsWith('#'))
+            break;
+        if (line.startsWith(`& ${key}:`)) {
+            metadataLineIdx = j;
+            break;
+        }
+        if (line.startsWith('&')) {
+            insertIdx = j + 1;
+        }
+        else if (line !== '') {
+            break;
+        }
+    }
+    const newLines = [...lines];
+    if (metadataLineIdx !== -1) {
+        if (val.trim() === '') {
+            newLines.splice(metadataLineIdx, 1);
+        }
+        else {
+            newLines[metadataLineIdx] = `& ${key}: ${val}`;
+        }
+    }
+    else if (val.trim() !== '') {
+        newLines.splice(insertIdx, 0, `& ${key}: ${val}`);
+    }
+    return newLines.join('\n');
+}
+/** Update a scene metadata key/value in the ProseMirror editor document. */
+function updateSceneMetadataInProseMirror(sceneIndex, key, val) {
+    const view = getEditorView();
+    if (!view)
+        return;
+    let headingPmPos = null;
+    let headingCount = 0;
+    view.state.doc.forEach((node, offset) => {
+        if (headingPmPos !== null)
+            return;
+        if (node.type.name === 'scene_heading') {
+            headingCount++;
+            if (headingCount === sceneIndex)
+                headingPmPos = offset;
+        }
+    });
+    if (headingPmPos !== null) {
+        let tr = view.state.tr;
+        let existingPos = null;
+        let index = view.state.doc.resolve(headingPmPos).index(0) + 1;
+        let pos = headingPmPos + view.state.doc.nodeAt(headingPmPos).nodeSize;
+        while (index < view.state.doc.childCount) {
+            const sibling = view.state.doc.child(index);
+            if (sibling.type.name === 'scene_metadata') {
+                if (sibling.attrs['metaKey'] === key) {
+                    existingPos = pos;
+                    break;
+                }
+            }
+            else {
+                break;
+            }
+            pos += sibling.nodeSize;
+            index++;
+        }
+        if (existingPos !== null) {
+            const node = view.state.doc.nodeAt(existingPos);
+            if (val === '') {
+                tr = tr.delete(existingPos, existingPos + node.nodeSize);
+            }
+            else {
+                tr = tr.replaceWith(existingPos + 1, existingPos + node.nodeSize - 1, schema.text(val));
+            }
+        }
+        else if (val !== '') {
+            let insertPos = headingPmPos + view.state.doc.nodeAt(headingPmPos).nodeSize;
+            let siblingIdx = view.state.doc.resolve(headingPmPos).index(0) + 1;
+            while (siblingIdx < view.state.doc.childCount) {
+                const sibling = view.state.doc.child(siblingIdx);
+                if (sibling.type.name === 'scene_metadata') {
+                    insertPos += sibling.nodeSize;
+                    siblingIdx++;
+                }
+                else {
+                    break;
+                }
+            }
+            const metaNode = schema.nodes['scene_metadata'].create({ metaKey: key }, schema.text(val));
+            tr = tr.insert(insertPos, metaNode);
+        }
+        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}`);
+            }
+        }
+    }
+    return result.join('\n');
+}
+export function SceneNavigator() {
+    const { text, setText, setAIOnboardingVisible, showToast, setNavVisible } = useDocument();
+    const { t } = useTranslation();
+    const [scenes, setScenes] = useState([]);
+    const [dragIndex, setDragIndex] = useState(null);
+    const [dropIndex, setDropIndex] = useState(null);
+    // New States
+    const [showNavSynopsis, setShowNavSynopsis] = useState(true);
+    const [statsOpen, setStatsOpen] = useState(false);
+    const [editingSceneIdx, setEditingSceneIdx] = useState(null);
+    const [editVal, setEditVal] = useState('');
+    // AI Generation States
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [progressText, setProgressText] = useState('');
+    const textRef = React.useRef(text);
+    textRef.current = text;
+    // Rebuild scene list whenever text changes
+    useEffect(() => {
+        setScenes(buildSceneList(text));
+    }, [text]);
+    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);
+                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 view = getEditorView();
+            if (view) {
+                updateSceneMetadataInProseMirror(scene.index, 'synopsis', synopsis.trim());
+                updateSceneMetadataInProseMirror(scene.index, 'est-duration', duration.trim());
+            }
+            else {
+                let nextText = updateSceneMetadataInText(text, scene.textOffset, 'synopsis', synopsis.trim());
+                nextText = updateSceneMetadataInText(nextText, scene.textOffset, 'est-duration', duration.trim());
+                setText(nextText);
+            }
+            showToast(`Generated synopsis & duration for scene ${scene.id || scene.index}.`, 'success');
+        }
+        catch (e) {
+            showToast(`Scene metadata generation failed: ${e.message || String(e)}`, 'error');
+        }
+        finally {
+            setIsProcessing(false);
+            setProgressText('');
+        }
+    }, [scenes, text, setText, setAIOnboardingVisible, 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);
+                return;
+            }
+            const pmView = getEditorView();
+            const cmView = getSourceView();
+            let currentText = pmView ? prosemirrorToSutra(pmView.state.doc) : (cmView ? cmView.state.doc.toString() : textRef.current);
+            let currentScenes = buildSceneList(currentText);
+            const missing = currentScenes.filter(s => !s.synopsis || !s.estDuration);
+            if (missing.length === 0) {
+                showToast('All scenes already have synopsis and duration.', 'info');
+                return;
+            }
+            let current = 0;
+            for (const scene of missing) {
+                current++;
+                setProgressText(`Generating synopsis & duration (${current}/${missing.length})...`);
+                currentText = pmView ? prosemirrorToSutra(pmView.state.doc) : (cmView ? cmView.state.doc.toString() : textRef.current);
+                currentScenes = buildSceneList(currentText);
+                const latestScene = currentScenes.find(s => s.index === scene.index);
+                if (!latestScene)
+                    continue;
+                const start = latestScene.textOffset;
+                const idx = currentScenes.findIndex(s => s.index === scene.index);
+                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);
+                    if (pmView) {
+                        if (!latestScene.synopsis)
+                            updateSceneMetadataInProseMirror(scene.index, 'synopsis', synopsis.trim());
+                        if (!latestScene.estDuration)
+                            updateSceneMetadataInProseMirror(scene.index, 'est-duration', duration.trim());
+                    }
+                    else {
+                        let nextText = currentText;
+                        if (!latestScene.synopsis)
+                            nextText = updateSceneMetadataInText(nextText, latestScene.textOffset, 'synopsis', synopsis.trim());
+                        if (!latestScene.estDuration)
+                            nextText = updateSceneMetadataInText(nextText, latestScene.textOffset, 'est-duration', duration.trim());
+                        if (cmView) {
+                            cmView.dispatch({
+                                changes: { from: 0, to: cmView.state.doc.length, insert: nextText }
+                            });
+                        }
+                        else {
+                            setText(nextText);
+                        }
+                    }
+                }
+                catch (err) {
+                    console.warn(`Failed scene metadata for scene ${scene.index}:`, err);
+                }
+            }
+            showToast(`Generated synopsis & duration for ${missing.length} scenes.`, 'success');
+        }
+        catch (e) {
+            showToast(`Batch generation failed: ${e.message || String(e)}`, 'error');
+        }
+        finally {
+            setIsProcessing(false);
+            setProgressText('');
+        }
+    }, [setText, setAIOnboardingVisible, showToast]);
+    const handleFrontmatter = useCallback(() => {
+        const view = getEditorView();
+        if (!view) {
+            const cmView = getSourceView();
+            if (cmView) {
+                cmView.dispatch({
+                    selection: { anchor: 0 },
+                    effects: CmView.scrollIntoView(0, { y: 'start' }),
+                });
+                cmView.focus();
+            }
+            return;
+        }
+        let tr = view.state.tr;
+        const first = view.state.doc.firstChild;
+        if (!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]));
+        }
+        tr = tr.setSelection(TextSelection.near(tr.doc.resolve(2)));
+        view.dispatch(tr);
+        view.focus();
+        view.dom.closest('.cs-main')?.scrollTo({ top: 0, behavior: 'smooth' });
+        if (typeof window !== 'undefined' && window.innerWidth <= 640) {
+            setNavVisible(false);
+        }
+    }, [setNavVisible]);
+    const handleJump = useCallback((scene) => {
+        const view = getEditorView();
+        if (!view) {
+            const cmView = getSourceView();
+            if (cmView) {
+                cmView.dispatch({
+                    selection: { anchor: scene.textOffset },
+                    effects: CmView.scrollIntoView(scene.textOffset, { y: 'start' }),
+                });
+                cmView.focus();
+                if (typeof window !== 'undefined' && window.innerWidth <= 640) {
+                    setNavVisible(false);
+                }
+            }
+            return;
+        }
+        try {
+            let headingPmPos = null;
+            let headingCount = 0;
+            view.state.doc.forEach((node, offset) => {
+                if (headingPmPos !== null)
+                    return;
+                if (node.type.name === 'scene_heading') {
+                    headingCount++;
+                    if (headingCount === scene.index)
+                        headingPmPos = offset;
+                }
+            });
+            if (headingPmPos === null)
+                return;
+            const resolved = view.state.doc.resolve(headingPmPos + 1);
+            const sel = TextSelection.near(resolved);
+            view.dispatch(view.state.tr.setSelection(sel));
+            view.focus();
+            const domNode = view.nodeDOM(headingPmPos);
+            const el = domNode instanceof Element ? domNode : domNode?.parentElement;
+            el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            if (typeof window !== 'undefined' && window.innerWidth <= 640) {
+                setNavVisible(false);
+            }
+        }
+        catch {
+            /* at doc boundary — ignore */
+        }
+    }, [setNavVisible]);
+    const handleDragStart = useCallback((idx) => {
+        setDragIndex(idx);
+    }, []);
+    const handleDragOver = useCallback((e, idx) => {
+        e.preventDefault();
+        setDropIndex(idx);
+    }, []);
+    const handleDrop = useCallback((e, targetIdx) => {
+        e.preventDefault();
+        if (dragIndex === null || dragIndex === targetIdx) {
+            setDragIndex(null);
+            setDropIndex(null);
+            return;
+        }
+        const newText = reorderScenes(text, scenes, dragIndex, targetIdx);
+        setText(newText);
+        setDragIndex(null);
+        setDropIndex(null);
+    }, [dragIndex, text, scenes, setText]);
+    const commitSynopsis = useCallback((idx, scene) => {
+        setEditingSceneIdx(null);
+        const newSynopsis = editVal.trim();
+        if (newSynopsis === scene.synopsis)
+            return;
+        const view = getEditorView();
+        if (view) {
+            let headingPmPos = null;
+            let headingCount = 0;
+            view.state.doc.forEach((node, offset) => {
+                if (headingPmPos !== null)
+                    return;
+                if (node.type.name === 'scene_heading') {
+                    headingCount++;
+                    if (headingCount === scene.index)
+                        headingPmPos = offset;
+                }
+            });
+            if (headingPmPos !== null) {
+                let tr = view.state.tr;
+                let existingPos = null;
+                let index = view.state.doc.resolve(headingPmPos).index(0) + 1;
+                let pos = headingPmPos + view.state.doc.nodeAt(headingPmPos).nodeSize;
+                while (index < view.state.doc.childCount) {
+                    const sibling = view.state.doc.child(index);
+                    if (sibling.type.name === 'scene_metadata') {
+                        if (sibling.attrs['metaKey'] === 'synopsis') {
+                            existingPos = pos;
+                            break;
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                    pos += sibling.nodeSize;
+                    index++;
+                }
+                if (existingPos !== null) {
+                    const node = view.state.doc.nodeAt(existingPos);
+                    if (newSynopsis === '') {
+                        tr = tr.delete(existingPos, existingPos + node.nodeSize);
+                    }
+                    else {
+                        tr = tr.replaceWith(existingPos + 1, existingPos + node.nodeSize - 1, schema.text(newSynopsis));
+                    }
+                }
+                else if (newSynopsis !== '') {
+                    const insertPos = headingPmPos + view.state.doc.nodeAt(headingPmPos).nodeSize;
+                    const metaNode = schema.nodes['scene_metadata'].create({ metaKey: 'synopsis' }, schema.text(newSynopsis));
+                    tr = tr.insert(insertPos, metaNode);
+                }
+                view.dispatch(tr);
+            }
+        }
+        else {
+            const nextText = updateSynopsisInText(text, scene.textOffset, newSynopsis);
+            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);
+        }
+    }, [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: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '8px',
+                            padding: '6px 12px',
+                            fontSize: '11px',
+                            color: 'var(--cs-ui-accent, #c4760a)',
+                            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 === ' ') {
+                                                            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) })] }));
+}
+/**
+ * Reorder scene blocks in the source text.
+ * Moves the entire block (heading through next heading) without mutating IDs.
+ */
+function reorderScenes(text, scenes, fromIdx, toIdx) {
+    const lines = text.split('\n');
+    const sceneLineRanges = scenes.map((scene, i) => {
+        const nextScene = scenes[i + 1];
+        const startLine = findLineAt(lines, scene.textOffset);
+        const endLine = nextScene
+            ? findLineAt(lines, nextScene.textOffset) - 1
+            : lines.length - 1;
+        return { startLine, endLine };
+    });
+    // Extract prefix before first scene
+    const firstSceneStart = sceneLineRanges[0]?.startLine ?? 0;
+    const prefixLines = lines.slice(0, firstSceneStart);
+    // Extract line blocks for each scene
+    const blocks = sceneLineRanges.map(r => lines.slice(r.startLine, r.endLine + 1));
+    const blockToMove = blocks[fromIdx];
+    if (!blockToMove)
+        return text;
+    // Remove the block from the list
+    const remainingBlocks = blocks.filter((_, i) => i !== fromIdx);
+    // Insert the block at the target index
+    remainingBlocks.splice(toIdx, 0, blockToMove);
+    // Rebuild the text
+    const finalLines = [...prefixLines];
+    for (const b of remainingBlocks) {
+        finalLines.push(...b);
+    }
+    return finalLines.join('\n');
+}
+function findLineAt(lines, offset) {
+    let pos = 0;
+    for (let i = 0; i < lines.length; i++) {
+        if (pos >= offset)
+            return i;
+        pos += (lines[i]?.length ?? 0) + 1;
+    }
+    return lines.length - 1;
+}

package/dist/navigator/StatisticsDialog.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    onClose: () => void;
+}
+export declare function StatisticsDialog({ onClose }: Props): React.JSX.Element;
+export {};