@sutrata/editor 0.3.0 → 0.4.0

package/dist/findreplace/FindReplace.js

@@ -19,16 +19,24 @@ export function FindReplace() {
     const [currentIndex, setCurrentIndex] = useState(0);
     const queryRef = useRef(null);
     const nextIndexAfterReplace = useRef(null);
-    // Recompute matches whenever query/text/caseSensitive/mode changes.
+    // What the next highlight pass should scroll: 'none' (text edits), 'soft'
+    // (query typing: only if the match is off-screen), 'center' (navigation).
+    const pendingScroll = useRef('none');
+    const lastSearch = useRef({ query: '', caseSensitive: false, mode: mode });
+    // Recompute matches whenever query/text/caseSensitive/mode changes — but only
+    // while the panel is open, so a leftover query never affects the editor.
     // In formatted mode we search the PM doc's display text (not raw Sutra) so
     // offsets are correct; in source mode the CodeMirror doc *is* the raw Sutra
     // text, so raw-offset matches from find-engine map directly onto it.
     useEffect(() => {
+        if (!findReplaceVisible)
+            return;
         if (!query) {
             setMatches([]);
             setCurrentIndex(0);
             clearFindHighlights();
             clearSourceFindHighlights();
+            lastSearch.current = { query, caseSensitive, mode };
             return;
         }
         let found;
@@ -41,44 +49,43 @@ export function FindReplace() {
             const view = getEditorView();
             found = view ? findInPmDoc(view.state.doc, query, { caseSensitive }) : [];
         }
+        const prev = lastSearch.current;
+        const searchChanged = prev.query !== query || prev.caseSensitive !== caseSensitive || prev.mode !== mode;
+        lastSearch.current = { query, caseSensitive, mode };
         setMatches(found);
-        const highlight = mode === 'source' ? setSourceFindHighlights : setFindHighlights;
-        const scrollTo = mode === 'source' ? scrollToSourceMatch : scrollToPmMatch;
         if (nextIndexAfterReplace.current !== null) {
             const idx = Math.min(nextIndexAfterReplace.current, Math.max(0, found.length - 1));
             setCurrentIndex(idx);
             nextIndexAfterReplace.current = null;
-            highlight(found, idx);
-            if (found.length > 0)
-                scrollTo(found[idx]);
+            pendingScroll.current = 'center';
         }
         else {
             setCurrentIndex(0);
-            highlight(found, 0);
-            if (found.length > 0)
-                scrollTo(found[0]);
+            // Plain document edits must not move the viewport.
+            pendingScroll.current = searchChanged ? 'soft' : 'none';
         }
         // text in deps so we re-search after replace; view not in deps (stable ref)
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [query, text, caseSensitive, mode]);
-    // Scroll to current match and update active highlight whenever index changes.
-    const didMount = useRef(false);
+    }, [query, text, caseSensitive, mode, findReplaceVisible]);
+    // Update the active highlight (and scroll if requested) whenever matches/index change.
     useEffect(() => {
-        if (!didMount.current) {
-            didMount.current = true;
+        if (!findReplaceVisible || !query)
             return;
-        }
+        const scroll = pendingScroll.current;
+        pendingScroll.current = 'none';
+        const cur = matches[currentIndex];
         if (mode === 'source') {
             setSourceFindHighlights(matches, currentIndex);
-            if (matches.length > 0)
-                scrollToSourceMatch(matches[currentIndex]);
+            if (cur && scroll !== 'none')
+                scrollToSourceMatch(cur, scroll === 'center');
         }
         else {
             setFindHighlights(matches, currentIndex);
-            if (matches.length > 0)
-                scrollToPmMatch(matches[currentIndex]);
+            if (cur && scroll !== 'none')
+                scrollToPmMatch(cur, scroll === 'center');
         }
-    }, [currentIndex, matches, mode]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentIndex, matches, mode, findReplaceVisible]);
     // Clear highlights when the panel closes.
     useEffect(() => {
         if (!findReplaceVisible) {
@@ -94,11 +101,13 @@ export function FindReplace() {
     const goNext = useCallback(() => {
         if (matches.length === 0)
             return;
+        pendingScroll.current = 'center';
         setCurrentIndex(i => (i + 1) % matches.length);
     }, [matches.length]);
     const goPrev = useCallback(() => {
         if (matches.length === 0)
             return;
+        pendingScroll.current = 'center';
         setCurrentIndex(i => (i - 1 + matches.length) % matches.length);
     }, [matches.length]);
     const handleReplaceOne = useCallback(() => {

package/dist/findreplace/scroll-to-match.d.ts

@@ -24,6 +24,6 @@ export declare function findInPmDoc(doc: Node, query: string, options?: {
  * Highlighting is handled by the find-highlight plugin (decorations) — no selection
  * dispatch here so focus stays in the find input.
  */
-export declare function scrollToPmMatch(match: PmMatch): void;
+export declare function scrollToPmMatch(match: PmMatch, center?: boolean): void;
 /** Legacy: maps a flat text-space offset to PM position. Used by tests only. */
 export declare function textOffsetToPmPos(doc: Node, textOffset: number): number | null;

package/dist/findreplace/scroll-to-match.js

@@ -52,14 +52,24 @@ export function findInPmDoc(doc, query, options = {}) {
  * Highlighting is handled by the find-highlight plugin (decorations) — no selection
  * dispatch here so focus stays in the find input.
  */
-export function scrollToPmMatch(match) {
+export function scrollToPmMatch(match, center = true) {
     const view = getEditorView();
     if (!view)
         return;
     try {
         const domNode = view.nodeDOM(match.pmFrom);
         const el = domNode instanceof Element ? domNode : domNode?.parentElement;
-        el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        if (!el)
+            return;
+        if (!center) {
+            // While typing: only scroll when the match is off-screen, and don't animate.
+            const r = el.getBoundingClientRect();
+            if (r.top >= 0 && r.bottom <= window.innerHeight)
+                return;
+            el.scrollIntoView({ block: 'center' });
+            return;
+        }
+        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
     catch {
         // At doc boundary — ignore

package/dist/navigator/SceneNavigator.js

@@ -3,7 +3,7 @@ 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 { buildSceneList, buildSectionList } from './scene-list';
 import { getEditorView, getSourceView } from '../editor/editor-bus';
 import { schema } from '../editor/schema';
 import { EditorView as CmView } from '@codemirror/view';
@@ -198,6 +198,7 @@ export function SceneNavigator() {
     const ai = useAI();
     const canEdit = useCanEdit();
     const [scenes, setScenes] = useState([]);
+    const [sections, setSections] = useState([]);
     const [dragIndex, setDragIndex] = useState(null);
     const [dropIndex, setDropIndex] = useState(null);
     // New States
@@ -213,6 +214,7 @@ export function SceneNavigator() {
     // Rebuild scene list whenever text changes
     useEffect(() => {
         setScenes(buildSceneList(text));
+        setSections(buildSectionList(text));
     }, [text]);
     // Numbers that need renumbering (missing/duplicate/out of order; §7.4).
     // Nothing is flagged until at least one scene has a number.
@@ -389,6 +391,47 @@ export function SceneNavigator() {
             /* at doc boundary — ignore */
         }
     }, [setNavVisible]);
+    const handleSectionJump = useCallback((section) => {
+        const view = getEditorView();
+        if (!view) {
+            const cmView = getSourceView();
+            if (cmView) {
+                cmView.dispatch({
+                    selection: { anchor: section.textOffset },
+                    effects: CmView.scrollIntoView(section.textOffset, { y: 'start' }),
+                });
+                cmView.focus();
+                if (typeof window !== 'undefined' && window.innerWidth <= 640)
+                    setNavVisible(false);
+            }
+            return;
+        }
+        try {
+            let pos = null;
+            let count = 0;
+            view.state.doc.forEach((node, offset) => {
+                if (pos !== null)
+                    return;
+                if (node.type.name === 'section') {
+                    count++;
+                    if (count === section.index)
+                        pos = offset;
+                }
+            });
+            if (pos === null)
+                return;
+            view.dispatch(view.state.tr.setSelection(TextSelection.near(view.state.doc.resolve(pos + 1))));
+            view.focus();
+            const domNode = view.nodeDOM(pos);
+            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);
     }, []);
@@ -498,6 +541,12 @@ export function SceneNavigator() {
         const omitted = scene.status.toLowerCase() === 'omitted';
         applyTextEdit(omitted ? restoreSceneInText(current, idx) : omitSceneInText(current, idx), setText);
     }, [liveText, setText]);
+    const renderSection = (section) => (_jsx("div", { role: "button", tabIndex: 0, className: "cs-nav-item cs-nav-section-anchor", "aria-label": `Jump to section ${section.heading}`, onClick: () => handleSectionJump(section), onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleSectionJump(section);
+            }
+        }, children: _jsx("div", { className: "cs-nav-scene-info", children: _jsx("div", { className: "cs-nav-heading", children: section.heading || '—' }) }) }, `section:${section.index}`));
     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',
@@ -509,58 +558,65 @@ export function SceneNavigator() {
                             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) => {
+                        // Sections that start before this scene (and after the previous one) render as anchors above it.
+                        const prevOffset = idx === 0 ? -1 : scenes[idx - 1].textOffset;
+                        const leading = sections.filter(sec => sec.textOffset > prevOffset && sec.textOffset < scene.textOffset);
                         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();
-                                                            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" })) }), 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) })] }));
+                        return (_jsxs(React.Fragment, { children: [leading.map(renderSection), _jsxs("div", { 
+                                    // Ids can repeat until the writer renumbers (§7.4), so the index keeps keys unique.
+                                    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();
+                                                                    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" })) }), 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 ?? ''}`));
+                    }), sections
+                        .filter(sec => scenes.length === 0 || sec.textOffset > scenes[scenes.length - 1].textOffset)
+                        .map(renderSection), scenes.length === 0 && sections.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/scene-list.d.ts

@@ -14,3 +14,10 @@ export interface SceneEntry {
  * Scenes are identified by scene heading lines (## prefix).
  */
 export declare function buildSceneList(text: string): SceneEntry[];
+export interface SectionEntry {
+    heading: string;
+    index: number;
+    textOffset: number;
+}
+/** Derive the `# ` section headings (acts, sequences, …) from Sutra source text. */
+export declare function buildSectionList(text: string): SectionEntry[];

package/dist/navigator/scene-list.js

@@ -68,3 +68,17 @@ export function buildSceneList(text) {
     }
     return scenes;
 }
+/** Derive the `# ` section headings (acts, sequences, …) from Sutra source text. */
+export function buildSectionList(text) {
+    const sections = [];
+    let offset = 0;
+    for (const line of text.split('\n')) {
+        const trimmed = line.trim();
+        if (trimmed === '#' || trimmed.startsWith('# ') || trimmed.startsWith('#\t')) {
+            const { body } = splitAttributeBlock(trimmed.slice(1).trim());
+            sections.push({ heading: body.trim(), index: sections.length + 1, textOffset: offset });
+        }
+        offset += line.length + 1;
+    }
+    return sections;
+}

package/dist/source/find-highlight-source.d.ts

@@ -11,4 +11,4 @@ export declare function setSourceFindHighlights(matches: SourceMatch[], activeIn
 /** Called by FindReplace when the panel closes — clears all source-view highlights. */
 export declare function clearSourceFindHighlights(): void;
 /** Scroll the source view so the given match is visible. */
-export declare function scrollToSourceMatch(match: SourceMatch): void;
+export declare function scrollToSourceMatch(match: SourceMatch, center?: boolean): void;

package/dist/source/find-highlight-source.js

@@ -39,9 +39,10 @@ export function clearSourceFindHighlights() {
     setSourceFindHighlights([], 0);
 }
 /** Scroll the source view so the given match is visible. */
-export function scrollToSourceMatch(match) {
+export function scrollToSourceMatch(match, center = true) {
     const view = getSourceView();
     if (!view)
         return;
-    view.dispatch({ effects: EditorView.scrollIntoView(match.start, { y: 'center' }) });
+    // 'nearest' only scrolls when the match is off-screen (used while typing).
+    view.dispatch({ effects: EditorView.scrollIntoView(match.start, { y: center ? 'center' : 'nearest' }) });
 }

package/dist/styles/screenplay.css

@@ -3117,3 +3117,15 @@ html, body, #root { height: 100%; margin: 0; padding: 0; overflow: hidden; }
   color: var(--cs-ui-warning, #c2410c); background: var(--cs-ui-warning-subtle, #fff7ed);
   user-select: none; vertical-align: middle;
 }
+
+/* Section headings (acts, sequences) shown as anchors in the navigator. */
+.cs-nav-section-anchor {
+  background: var(--cs-ui-bg-panel-subtle, #f4f2ea);
+  border-bottom: 1px solid var(--cs-ui-border-light, #e2e0d6);
+}
+.cs-nav-section-anchor .cs-nav-heading {
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sutrata/editor",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React + ProseMirror screenplay editor for Sutra, with first-class support for Indic and other complex scripts.",
   "license": "GPL-3.0-or-later",
   "keywords": [