@sutrata/editor 0.3.0 → 0.4.1

package/dist/shell/VersionHistory.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { diffWordsWithSpace } from 'diff';
+import { useTranslation } from '../i18n/useTranslation';
 // Word-level diff over the full text (not line-bucketed): if only one word in
 // a sentence changed, only that word is marked added/removed — the rest of
 // the sentence comes back as an unchanged, unstyled Change chunk. Whitespace
@@ -17,6 +18,7 @@ function formatTimestamp(ts) {
     });
 }
 export function VersionHistory({ versions, filePath, onRestore, onClearAll, visible, onClose }) {
+    const { t } = useTranslation();
     const [selectedId, setSelectedId] = useState(null);
     const diffScrollRef = useRef(null);
     // Maps a diff-part index (only added/removed parts) to its rendered <span>,
@@ -75,7 +77,7 @@ export function VersionHistory({ versions, filePath, onRestore, onClearAll, visi
     if (!visible || !filePath)
         return null;
     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-version-dialog-title", style: { maxWidth: '620px', width: '92%', maxHeight: '80vh', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-version-dialog-title", className: "cs-panel-title", children: "Version History" }), _jsx("button", { className: "cs-panel-close", onClick: onClose, "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { className: "cs-version-body", children: [_jsx("div", { className: "cs-version-list", children: versions.length === 0 ? (_jsx("div", { className: "cs-version-empty", children: "No versions saved yet" })) : (versions.map((v, idx) => (_jsxs("button", { type: "button", className: `cs-version-list-item${selectedId === v.id ? ' cs-version-list-item-active' : ''}`, onClick: () => setSelectedId(v.id), children: [_jsx("div", { className: "cs-version-list-item-label", children: idx === 0 ? 'Current' : formatTimestamp(v.timestamp) }), idx !== 0 && _jsx("div", { className: "cs-version-list-item-date", children: formatTimestamp(v.timestamp) })] }, v.id)))) }), _jsxs("div", { className: "cs-version-diff-wrap", children: [_jsx("div", { className: "cs-version-diff", ref: diffScrollRef, children: !selectedVersion ? (_jsx("div", { className: "cs-version-empty", children: "Select a version to compare against the current document" })) : selectedVersion.id === currentVersion?.id ? (_jsx("div", { className: "cs-version-empty", children: "This is the current version" })) : diff ? (diff.every(part => !part.added && !part.removed) ? (_jsx("div", { className: "cs-version-empty", children: "No differences from the current version" })) : (_jsx("div", { className: "cs-version-diff-content", children: diff.map((part, i) => {
+            onClose(); }, children: _jsxs("div", { className: "cs-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "cs-version-dialog-title", style: { maxWidth: '620px', width: '92%', maxHeight: '80vh', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-version-dialog-title", className: "cs-panel-title", children: t('version.title') }), _jsx("button", { className: "cs-panel-close", onClick: onClose, "aria-label": t('common.close'), children: "\u00D7" })] }), _jsxs("div", { className: "cs-version-body", children: [_jsx("div", { className: "cs-version-list", children: versions.length === 0 ? (_jsx("div", { className: "cs-version-empty", children: t('version.empty') })) : (versions.map((v, idx) => (_jsxs("button", { type: "button", className: `cs-version-list-item${selectedId === v.id ? ' cs-version-list-item-active' : ''}`, onClick: () => setSelectedId(v.id), children: [_jsx("div", { className: "cs-version-list-item-label", children: idx === 0 ? t('version.current') : formatTimestamp(v.timestamp) }), idx !== 0 && _jsx("div", { className: "cs-version-list-item-date", children: formatTimestamp(v.timestamp) })] }, v.id)))) }), _jsxs("div", { className: "cs-version-diff-wrap", children: [_jsx("div", { className: "cs-version-diff", ref: diffScrollRef, children: !selectedVersion ? (_jsx("div", { className: "cs-version-empty", children: t('version.select') })) : selectedVersion.id === currentVersion?.id ? (_jsx("div", { className: "cs-version-empty", children: t('version.isCurrent') })) : diff ? (diff.every(part => !part.added && !part.removed) ? (_jsx("div", { className: "cs-version-empty", children: t('version.noDiff') })) : (_jsx("div", { className: "cs-version-diff-content", children: diff.map((part, i) => {
                                             const isChange = part.added || part.removed;
                                             return (_jsx("span", { ref: isChange ? (el) => {
                                                     if (el)
@@ -85,5 +87,5 @@ export function VersionHistory({ versions, filePath, onRestore, onClearAll, visi
                                                 } : undefined, className: part.added ? 'cs-version-diff-added'
                                                     : part.removed ? 'cs-version-diff-removed'
                                                         : undefined, children: part.value }, i));
-                                        }) }))) : null }), _jsx("div", { className: "cs-version-diff-minimap", "aria-hidden": "true", children: markers.map((m, i) => (_jsx("button", { type: "button", className: `cs-version-diff-marker cs-version-diff-marker-${m.type}`, style: { top: `${m.position * 100}%` }, title: m.type === 'added' ? 'Jump to added text' : 'Jump to removed text', onClick: () => scrollToMarker(m.position) }, i))) })] })] }), _jsxs("div", { className: "cs-version-footer", children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel cs-version-clear-btn", onClick: () => void onClearAll(), disabled: versions.length === 0, children: "Delete Version History" }), _jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel", onClick: onClose, children: "Close" }), selectedVersion && selectedVersion.id !== currentVersion?.id && (_jsx("button", { type: "button", className: "cs-confirm-btn-primary", onClick: () => onRestore(selectedVersion), children: "Restore This Version" }))] })] })] }) }));
+                                        }) }))) : null }), _jsx("div", { className: "cs-version-diff-minimap", "aria-hidden": "true", children: markers.map((m, i) => (_jsx("button", { type: "button", className: `cs-version-diff-marker cs-version-diff-marker-${m.type}`, style: { top: `${m.position * 100}%` }, title: m.type === 'added' ? t('version.jumpAdded') : t('version.jumpRemoved'), onClick: () => scrollToMarker(m.position) }, i))) })] })] }), _jsxs("div", { className: "cs-version-footer", children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel cs-version-clear-btn", onClick: () => void onClearAll(), disabled: versions.length === 0, children: t('version.delete') }), _jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel", onClick: onClose, children: t('common.close') }), selectedVersion && selectedVersion.id !== currentVersion?.id && (_jsx("button", { type: "button", className: "cs-confirm-btn-primary", onClick: () => onRestore(selectedVersion), children: t('version.restore') }))] })] })] }) }));
 }

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/dist/titlepage/ExportDialog.js

@@ -80,12 +80,12 @@ export function ExportDialog() {
             setWarnings(output && !(output instanceof Blob) ? output.warnings ?? [] : []);
             if (blob)
                 downloadBlob(selected.fileName(ctx), blob);
-            showToast(selected.successMessage ?? `Exported ${selected.label}`, blob ? 'success' : 'info');
+            showToast(selected.successMessage ?? t('export.exported').replace('{label}', selected.label), blob ? 'success' : 'info');
         }
         catch (err) {
             console.error('Export failed', err);
             setWarnings(['An error occurred during export. Please check the console.']);
-            showToast('Export failed. Check console for details.', 'error');
+            showToast(t('export.failed'), 'error');
         }
         finally {
             setIsExporting(false);
@@ -102,14 +102,14 @@ export function ExportDialog() {
     return (_jsx("div", { className: "cs-export-overlay", role: "presentation", onClick: e => {
             if (e.target === e.currentTarget)
                 setExportVisible(false);
-        }, children: _jsxs("div", { className: "cs-export-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "cs-export-title", style: { maxHeight: '90vh', maxWidth: '540px', width: '92%', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-export-title", className: "cs-panel-title", children: t('export.title') }), _jsx("button", { className: "cs-panel-close", onClick: () => setExportVisible(false), "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { className: "cs-panel-body", style: { overflowY: 'auto', flex: 1, padding: '16px' }, children: [_jsxs("div", { className: "cs-export-segmented", role: "tablist", "aria-label": "Export category", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": tab === 'screenplay', className: `cs-export-seg-btn${tab === 'screenplay' ? ' cs-export-seg-btn-active' : ''}`, onClick: () => {
+        }, children: _jsxs("div", { className: "cs-export-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "cs-export-title", style: { maxHeight: '90vh', maxWidth: '540px', width: '92%', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-export-title", className: "cs-panel-title", children: t('export.title') }), _jsx("button", { className: "cs-panel-close", onClick: () => setExportVisible(false), "aria-label": t('common.close'), children: "\u00D7" })] }), _jsxs("div", { className: "cs-panel-body", style: { overflowY: 'auto', flex: 1, padding: '16px' }, children: [_jsxs("div", { className: "cs-export-segmented", role: "tablist", "aria-label": t('export.category'), children: [_jsx("button", { type: "button", role: "tab", "aria-selected": tab === 'screenplay', className: `cs-export-seg-btn${tab === 'screenplay' ? ' cs-export-seg-btn-active' : ''}`, onClick: () => {
                                         setTab('screenplay');
                                         if (selected?.group !== 'screenplay')
                                             setFormatId(screenplayFormats[0]?.id ?? '');
-                                    }, children: "Screenplay Formats" }), reportFormats.length > 0 && _jsx("button", { type: "button", role: "tab", "aria-selected": tab === 'reports', className: `cs-export-seg-btn${tab === 'reports' ? ' cs-export-seg-btn-active' : ''}`, onClick: () => {
+                                    }, children: t('export.tab.screenplay') }), reportFormats.length > 0 && _jsx("button", { type: "button", role: "tab", "aria-selected": tab === 'reports', className: `cs-export-seg-btn${tab === 'reports' ? ' cs-export-seg-btn-active' : ''}`, onClick: () => {
                                         setTab('reports');
                                         if (selected?.group !== 'report')
                                             setFormatId(reportFormats[0]?.id ?? '');
-                                    }, children: "Production Reports" })] }), tab === 'screenplay' ? (_jsxs("div", { children: [_jsx("div", { className: "cs-export-card-grid", children: screenplayFormats.map(f => (_jsxs("div", { className: `cs-export-format-card${selected?.id === f.id ? ' cs-export-format-card-selected' : ''}`, onClick: () => setFormatId(f.id), role: "radio", "aria-checked": selected?.id === f.id, tabIndex: 0, onKeyDown: e => { if (e.key === 'Enter' || e.key === ' ')
-                                            setFormatId(f.id); }, children: [_jsx("input", { type: "radio", name: "format", value: f.id, checked: selected?.id === f.id, onChange: () => setFormatId(f.id), style: { marginTop: '2px' } }), _jsxs("div", { children: [_jsx("strong", { style: { fontSize: '13px', display: 'block', color: 'var(--cs-ui-text-light-primary, #1c1b18)' }, children: f.label }), f.description && (_jsx("span", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: f.description }))] })] }, f.id))) }), showStylePicker && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '14px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-style-select", style: { fontSize: '12px' }, children: t('export.style') }), _jsxs("select", { id: "cs-export-style-select", className: "cs-settings-select", value: styleOverride, onChange: e => setStyleOverride(e.target.value), children: [_jsxs("option", { value: "", children: [t('export.styleDefault'), " (", resolvedStyle.name, ")"] }), styleChoices.map(s => (_jsx("option", { value: s.id, children: s.name }, s.id)))] })] })), showSkipNotes && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("input", { id: "cs-export-skip-notes", type: "checkbox", checked: skipNotes, onChange: e => setSkipNotes(e.target.checked) }), _jsx("label", { htmlFor: "cs-export-skip-notes", className: "cs-settings-label", style: { fontSize: '12px', margin: 0 }, children: "Skip notes ([[ ]])" })] })), showRomanize && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', flexWrap: 'wrap', gap: '8px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-romanize-select", style: { fontSize: '12px' }, children: "Romanized copy (ISO 15919)" }), _jsxs("select", { id: "cs-export-romanize-select", className: "cs-settings-select", value: romanizeScope, onChange: e => setRomanizeScope(e.target.value), children: [_jsx("option", { value: "off", children: "Off (native script)" }), _jsx("option", { value: "all", children: "All text" }), _jsx("option", { value: "dialogue", children: "Dialogue only" })] }), romanizeScope !== 'off' && (_jsxs("select", { "aria-label": "Romanization variant", className: "cs-settings-select", value: romanizeVariant, onChange: e => setRomanizeVariant(e.target.value), children: [_jsx("option", { value: "strict", children: "Strict ISO 15919" }), _jsx("option", { value: "colloquial", children: "Casual (no diacritics)" })] })), romanizeScope !== 'off' && (_jsx("span", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)', flexBasis: '100%' }, children: "Your script is not changed. Page numbers in the romanized copy differ from the original." }))] }))] })) : (_jsxs("div", { children: [reportFamilies.map(([family, formats]) => (_jsxs("div", { className: "cs-export-report-box", children: [_jsxs("div", { className: "cs-export-report-header", children: [_jsx("span", { className: "cs-export-report-title", children: family }), _jsx("div", { className: "cs-export-chips", children: formats.map(f => (_jsx("button", { type: "button", className: `cs-export-chip${selected?.id === f.id ? ' cs-export-chip-active' : ''}`, onClick: () => setFormatId(f.id), children: f.formatLabel ?? f.label }, f.id))) })] }), formats[0].description && (_jsx("div", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: formats[0].description }))] }, family))), showReportRomanize && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', flexWrap: 'wrap', gap: '8px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-romanize-reports", style: { fontSize: '12px' }, children: "Romanized copy (ISO 15919)" }), _jsxs("select", { id: "cs-export-romanize-reports", className: "cs-settings-select", value: romanizeReports ? 'on' : 'off', onChange: e => setRomanizeReports(e.target.value === 'on'), children: [_jsx("option", { value: "off", children: "Off (native script)" }), _jsx("option", { value: "on", children: "Romanize all text" })] }), romanizeReports && (_jsxs("select", { "aria-label": "Romanization variant", className: "cs-settings-select", value: romanizeVariant, onChange: e => setRomanizeVariant(e.target.value), children: [_jsx("option", { value: "strict", children: "Strict ISO 15919" }), _jsx("option", { value: "colloquial", children: "Casual (no diacritics)" })] }))] }))] })), warnings.length > 0 && (_jsxs("div", { className: "cs-export-warnings", style: { background: '#fffbeb', border: '1px solid #fcd34d', padding: '10px', borderRadius: '4px', marginTop: '14px' }, children: [_jsx("div", { className: "cs-export-warn-title", style: { fontWeight: 600, color: '#b45309', fontSize: '12px', marginBottom: '4px' }, children: t('export.warnings') }), warnings.map((w, i) => (_jsxs("div", { className: "cs-export-warn-item", style: { fontSize: '11px', color: '#59574f' }, children: ["\u2022 ", w] }, i)))] }))] }), _jsxs("div", { className: "cs-export-actions", style: { borderTop: '1px solid var(--cs-ui-border-light-subtle, #eeece4)', padding: '12px 16px', display: 'flex', justifyContent: 'flex-end', gap: '8px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)' }, children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel", onClick: () => setExportVisible(false), children: t('export.cancel') }), _jsx("button", { type: "button", className: "cs-confirm-btn-primary", onClick: doExport, disabled: isExporting || !selected, children: isExporting ? 'Exporting...' : t('export.download') })] })] }) }));
+                                    }, children: t('export.tab.reports') })] }), tab === 'screenplay' ? (_jsxs("div", { children: [_jsx("div", { className: "cs-export-card-grid", children: screenplayFormats.map(f => (_jsxs("div", { className: `cs-export-format-card${selected?.id === f.id ? ' cs-export-format-card-selected' : ''}`, onClick: () => setFormatId(f.id), role: "radio", "aria-checked": selected?.id === f.id, tabIndex: 0, onKeyDown: e => { if (e.key === 'Enter' || e.key === ' ')
+                                            setFormatId(f.id); }, children: [_jsx("input", { type: "radio", name: "format", value: f.id, checked: selected?.id === f.id, onChange: () => setFormatId(f.id), style: { marginTop: '2px' } }), _jsxs("div", { children: [_jsx("strong", { style: { fontSize: '13px', display: 'block', color: 'var(--cs-ui-text-light-primary, #1c1b18)' }, children: f.label }), f.description && (_jsx("span", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: f.description }))] })] }, f.id))) }), showStylePicker && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '14px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-style-select", style: { fontSize: '12px' }, children: t('export.style') }), _jsxs("select", { id: "cs-export-style-select", className: "cs-settings-select", value: styleOverride, onChange: e => setStyleOverride(e.target.value), children: [_jsxs("option", { value: "", children: [t('export.styleDefault'), " (", resolvedStyle.name, ")"] }), styleChoices.map(s => (_jsx("option", { value: s.id, children: s.name }, s.id)))] })] })), showSkipNotes && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("input", { id: "cs-export-skip-notes", type: "checkbox", checked: skipNotes, onChange: e => setSkipNotes(e.target.checked) }), _jsx("label", { htmlFor: "cs-export-skip-notes", className: "cs-settings-label", style: { fontSize: '12px', margin: 0 }, children: t('export.skipNotes') })] })), showRomanize && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', flexWrap: 'wrap', gap: '8px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-romanize-select", style: { fontSize: '12px' }, children: t('export.romanized') }), _jsxs("select", { id: "cs-export-romanize-select", className: "cs-settings-select", value: romanizeScope, onChange: e => setRomanizeScope(e.target.value), children: [_jsx("option", { value: "off", children: t('export.roman.off') }), _jsx("option", { value: "all", children: t('export.roman.all') }), _jsx("option", { value: "dialogue", children: t('export.roman.dialogue') })] }), romanizeScope !== 'off' && (_jsxs("select", { "aria-label": t('export.roman.variant'), className: "cs-settings-select", value: romanizeVariant, onChange: e => setRomanizeVariant(e.target.value), children: [_jsx("option", { value: "strict", children: t('export.roman.strict') }), _jsx("option", { value: "colloquial", children: t('export.roman.colloquial') })] })), romanizeScope !== 'off' && (_jsx("span", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)', flexBasis: '100%' }, children: t('export.roman.note') }))] }))] })) : (_jsxs("div", { children: [reportFamilies.map(([family, formats]) => (_jsxs("div", { className: "cs-export-report-box", children: [_jsxs("div", { className: "cs-export-report-header", children: [_jsx("span", { className: "cs-export-report-title", children: family }), _jsx("div", { className: "cs-export-chips", children: formats.map(f => (_jsx("button", { type: "button", className: `cs-export-chip${selected?.id === f.id ? ' cs-export-chip-active' : ''}`, onClick: () => setFormatId(f.id), children: f.formatLabel ?? f.label }, f.id))) })] }), formats[0].description && (_jsx("div", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: formats[0].description }))] }, family))), showReportRomanize && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', flexWrap: 'wrap', gap: '8px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-romanize-reports", style: { fontSize: '12px' }, children: t('export.romanized') }), _jsxs("select", { id: "cs-export-romanize-reports", className: "cs-settings-select", value: romanizeReports ? 'on' : 'off', onChange: e => setRomanizeReports(e.target.value === 'on'), children: [_jsx("option", { value: "off", children: t('export.roman.off') }), _jsx("option", { value: "on", children: t('export.roman.allReports') })] }), romanizeReports && (_jsxs("select", { "aria-label": t('export.roman.variant'), className: "cs-settings-select", value: romanizeVariant, onChange: e => setRomanizeVariant(e.target.value), children: [_jsx("option", { value: "strict", children: t('export.roman.strict') }), _jsx("option", { value: "colloquial", children: t('export.roman.colloquial') })] }))] }))] })), warnings.length > 0 && (_jsxs("div", { className: "cs-export-warnings", style: { background: '#fffbeb', border: '1px solid #fcd34d', padding: '10px', borderRadius: '4px', marginTop: '14px' }, children: [_jsx("div", { className: "cs-export-warn-title", style: { fontWeight: 600, color: '#b45309', fontSize: '12px', marginBottom: '4px' }, children: t('export.warnings') }), warnings.map((w, i) => (_jsxs("div", { className: "cs-export-warn-item", style: { fontSize: '11px', color: '#59574f' }, children: ["\u2022 ", w] }, i)))] }))] }), _jsxs("div", { className: "cs-export-actions", style: { borderTop: '1px solid var(--cs-ui-border-light-subtle, #eeece4)', padding: '12px 16px', display: 'flex', justifyContent: 'flex-end', gap: '8px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)' }, children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel", onClick: () => setExportVisible(false), children: t('export.cancel') }), _jsx("button", { type: "button", className: "cs-confirm-btn-primary", onClick: doExport, disabled: isExporting || !selected, children: isExporting ? t('export.exporting') : t('export.download') })] })] }) }));
 }

package/dist/titlepage/TitlePageDialog.js

@@ -70,12 +70,12 @@ export function TitlePageDialog({ onClose }) {
         onClose();
     }
     return (_jsx("div", { className: "cs-export-overlay", role: "presentation", onClick: e => { if (e.target === e.currentTarget)
-            onClose(); }, children: _jsxs("div", { className: "cs-export-dialog cs-tp-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "cs-tp-title", children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-tp-title", className: "cs-panel-title", children: t('titlePage.title') }), _jsx("button", { className: "cs-panel-close", onClick: onClose, "aria-label": t('titlePage.cancel'), children: "\u00D7" })] }), _jsxs("div", { className: "cs-tp-body", children: [_jsx("div", { className: "cs-tp-tabs", role: "tablist", "aria-orientation": "vertical", "aria-label": t('titlePage.title'), children: TABS.map(id => (_jsx("button", { ref: el => { tabRefs.current[id] = el; }, type: "button", role: "tab", id: `cs-tp-tab-${id}`, "aria-selected": tab === id, "aria-controls": `cs-tp-panel-${id}`, tabIndex: tab === id ? 0 : -1, className: `cs-tp-tab${tab === id ? ' cs-tp-tab-active' : ''}`, onClick: () => setTab(id), onKeyDown: e => onTabKey(e, id), children: t(`titlePage.section.${id}`) }, id))) }), _jsxs("form", { className: "cs-tp-form", onSubmit: e => { e.preventDefault(); save(); }, children: [_jsxs(Panel, { id: "story", active: tab, children: [_jsx(Field, { label: t('titlePage.field.title'), htmlFor: "cs-tp-f-title", children: _jsx("input", { id: "cs-tp-f-title", ref: firstFieldRef, className: "cs-tp-input", value: form.title, onChange: e => set('title', e.target.value) }) }), form.altTitles.map((alt, i) => (_jsxs("div", { className: "cs-tp-row", children: [_jsxs("select", { "aria-label": t('titlePage.field.titleLanguage'), className: "cs-settings-select cs-tp-lang-select", value: alt.lang, onChange: e => set('altTitles', form.altTitles.map((a, j) => j === i ? { ...a, lang: e.target.value } : a)), children: [_jsx("option", { value: "", children: t('titlePage.chooseLanguage') }), langs.map(l => _jsx("option", { value: l.code, children: l.label }, l.code))] }), _jsx("input", { "aria-label": t('titlePage.field.titleIn'), className: "cs-tp-input", value: alt.text, onChange: e => set('altTitles', form.altTitles.map((a, j) => j === i ? { ...a, text: e.target.value } : a)) }), _jsx("button", { type: "button", className: "cs-tp-remove", "aria-label": t('titlePage.remove'), onClick: () => set('altTitles', form.altTitles.filter((_, j) => j !== i)), children: "\u00D7" })] }, i))), _jsxs("button", { type: "button", className: "cs-tp-add", onClick: () => set('altTitles', [...form.altTitles, { lang: '', text: '' }]), children: ["+ ", t('titlePage.addTitle')] }), _jsx(Field, { label: t('titlePage.field.logline'), htmlFor: "cs-tp-f-logline", hint: _jsx("span", { className: logWords > 50 ? 'cs-tp-count-bad' : logWords > 30 ? 'cs-tp-count-warn' : 'cs-tp-count', children: t('titlePage.words').replace('{n}', String(logWords)) }), children: _jsx("textarea", { id: "cs-tp-f-logline", className: "cs-tp-input", rows: 2, value: form.logline, onChange: e => set('logline', e.target.value) }) })] }), _jsxs(Panel, { id: "credits", active: tab, children: [_jsx(TextField, { id: "author", label: t('titlePage.field.author'), value: form.author, onChange: v => set('author', v) }), _jsx(TextField, { id: "credit", label: t('titlePage.field.credit'), placeholder: "Written by", value: form.credit, onChange: v => set('credit', v) }), _jsx(TextField, { id: "source", label: t('titlePage.field.source'), value: form.source, onChange: v => set('source', v) }), _jsx(TextField, { id: "story", label: t('titlePage.field.story'), value: form.story, onChange: v => set('story', v) }), _jsx(TextField, { id: "screenplay", label: t('titlePage.field.screenplay'), value: form.screenplay, onChange: v => set('screenplay', v) }), _jsx(TextField, { id: "dialogue", label: t('titlePage.field.dialogue'), value: form.dialogue, onChange: v => set('dialogue', v) })] }), _jsxs(Panel, { id: "draft", active: tab, children: [_jsx(TextField, { id: "draft", label: t('titlePage.field.draft'), placeholder: "First Draft", value: form.draft, onChange: v => set('draft', v) }), _jsx(TextField, { id: "revision", label: t('titlePage.field.revision'), value: form.revision, onChange: v => set('revision', v) }), _jsx(Field, { label: t('titlePage.field.date'), htmlFor: "cs-tp-f-date", children: _jsx(DateInput, { id: "cs-tp-f-date", value: form.date, onChange: v => set('date', v), usePickerLabel: t('titlePage.usePicker'), useTextLabel: t('titlePage.useText') }) })] }), _jsxs(Panel, { id: "contact", active: tab, children: [_jsx(Field, { label: t('titlePage.field.contact'), htmlFor: "cs-tp-f-contact", children: _jsx("textarea", { id: "cs-tp-f-contact", className: "cs-tp-input", rows: 3, value: form.contact, onChange: e => set('contact', e.target.value) }) }), _jsx(TextField, { id: "copyright", label: t('titlePage.field.copyright'), placeholder: "\u00A9 2026 \u2026", value: form.copyright, onChange: v => set('copyright', v) })] }), _jsxs(Panel, { id: "document", active: tab, children: [_jsx(Field, { label: t('titlePage.field.lang'), htmlFor: "cs-tp-f-lang", children: _jsxs("select", { id: "cs-tp-f-lang", className: "cs-settings-select", value: form.lang, onChange: e => set('lang', e.target.value), children: [_jsx("option", { value: "", children: t('titlePage.notSet') }), langs.map(l => _jsx("option", { value: l.code, children: l.label }, l.code))] }) }), _jsx(Field, { label: t('titlePage.field.langSecondary'), htmlFor: "cs-tp-f-lang2", children: _jsxs("div", { className: "cs-tp-chips", children: [form.langSecondary.map(code => (_jsxs("span", { className: "cs-tp-chip", children: [langLabel(code), _jsx("button", { type: "button", "aria-label": `${t('titlePage.remove')} ${langLabel(code)}`, onClick: () => set('langSecondary', form.langSecondary.filter(c => c !== code)), children: "\u00D7" })] }, code))), _jsxs("select", { id: "cs-tp-f-lang2", className: "cs-settings-select", value: "", onChange: e => {
+            onClose(); }, children: _jsxs("div", { className: "cs-export-dialog cs-tp-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "cs-tp-title", children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-tp-title", className: "cs-panel-title", children: t('titlePage.title') }), _jsx("button", { className: "cs-panel-close", onClick: onClose, "aria-label": t('titlePage.cancel'), children: "\u00D7" })] }), _jsxs("div", { className: "cs-tp-body", children: [_jsx("div", { className: "cs-tp-tabs", role: "tablist", "aria-orientation": "vertical", "aria-label": t('titlePage.title'), children: TABS.map(id => (_jsx("button", { ref: el => { tabRefs.current[id] = el; }, type: "button", role: "tab", id: `cs-tp-tab-${id}`, "aria-selected": tab === id, "aria-controls": `cs-tp-panel-${id}`, tabIndex: tab === id ? 0 : -1, className: `cs-tp-tab${tab === id ? ' cs-tp-tab-active' : ''}`, onClick: () => setTab(id), onKeyDown: e => onTabKey(e, id), children: t(`titlePage.section.${id}`) }, id))) }), _jsxs("form", { className: "cs-tp-form", onSubmit: e => { e.preventDefault(); save(); }, children: [_jsxs(Panel, { id: "story", active: tab, children: [_jsx(Field, { label: t('titlePage.field.title'), htmlFor: "cs-tp-f-title", children: _jsx("input", { id: "cs-tp-f-title", ref: firstFieldRef, className: "cs-tp-input", value: form.title, onChange: e => set('title', e.target.value) }) }), form.altTitles.map((alt, i) => (_jsxs("div", { className: "cs-tp-row", children: [_jsxs("select", { "aria-label": t('titlePage.field.titleLanguage'), className: "cs-settings-select cs-tp-lang-select", value: alt.lang, onChange: e => set('altTitles', form.altTitles.map((a, j) => j === i ? { ...a, lang: e.target.value } : a)), children: [_jsx("option", { value: "", children: t('titlePage.chooseLanguage') }), langs.map(l => _jsx("option", { value: l.code, children: l.label }, l.code))] }), _jsx("input", { "aria-label": t('titlePage.field.titleIn'), className: "cs-tp-input", value: alt.text, onChange: e => set('altTitles', form.altTitles.map((a, j) => j === i ? { ...a, text: e.target.value } : a)) }), _jsx("button", { type: "button", className: "cs-tp-remove", "aria-label": t('titlePage.remove'), onClick: () => set('altTitles', form.altTitles.filter((_, j) => j !== i)), children: "\u00D7" })] }, i))), _jsxs("button", { type: "button", className: "cs-tp-add", onClick: () => set('altTitles', [...form.altTitles, { lang: '', text: '' }]), children: ["+ ", t('titlePage.addTitle')] }), _jsx(Field, { label: t('titlePage.field.logline'), htmlFor: "cs-tp-f-logline", hint: _jsx("span", { className: logWords > 50 ? 'cs-tp-count-bad' : logWords > 30 ? 'cs-tp-count-warn' : 'cs-tp-count', children: t('titlePage.words').replace('{n}', String(logWords)) }), children: _jsx("textarea", { id: "cs-tp-f-logline", className: "cs-tp-input", rows: 2, value: form.logline, onChange: e => set('logline', e.target.value) }) })] }), _jsxs(Panel, { id: "credits", active: tab, children: [_jsx(TextField, { id: "author", label: t('titlePage.field.author'), value: form.author, onChange: v => set('author', v) }), _jsx(TextField, { id: "credit", label: t('titlePage.field.credit'), placeholder: t('titlePage.placeholder.credit'), value: form.credit, onChange: v => set('credit', v) }), _jsx(TextField, { id: "source", label: t('titlePage.field.source'), value: form.source, onChange: v => set('source', v) }), _jsx(TextField, { id: "story", label: t('titlePage.field.story'), value: form.story, onChange: v => set('story', v) }), _jsx(TextField, { id: "screenplay", label: t('titlePage.field.screenplay'), value: form.screenplay, onChange: v => set('screenplay', v) }), _jsx(TextField, { id: "dialogue", label: t('titlePage.field.dialogue'), value: form.dialogue, onChange: v => set('dialogue', v) })] }), _jsxs(Panel, { id: "draft", active: tab, children: [_jsx(TextField, { id: "draft", label: t('titlePage.field.draft'), placeholder: t('titlePage.placeholder.draft'), value: form.draft, onChange: v => set('draft', v) }), _jsx(TextField, { id: "revision", label: t('titlePage.field.revision'), value: form.revision, onChange: v => set('revision', v) }), _jsx(Field, { label: t('titlePage.field.date'), htmlFor: "cs-tp-f-date", children: _jsx(DateInput, { id: "cs-tp-f-date", value: form.date, onChange: v => set('date', v), usePickerLabel: t('titlePage.usePicker'), useTextLabel: t('titlePage.useText') }) })] }), _jsxs(Panel, { id: "contact", active: tab, children: [_jsx(Field, { label: t('titlePage.field.contact'), htmlFor: "cs-tp-f-contact", children: _jsx("textarea", { id: "cs-tp-f-contact", className: "cs-tp-input", rows: 3, value: form.contact, onChange: e => set('contact', e.target.value) }) }), _jsx(TextField, { id: "copyright", label: t('titlePage.field.copyright'), placeholder: "\u00A9 2026 \u2026", value: form.copyright, onChange: v => set('copyright', v) })] }), _jsxs(Panel, { id: "document", active: tab, children: [_jsx(Field, { label: t('titlePage.field.lang'), htmlFor: "cs-tp-f-lang", children: _jsxs("select", { id: "cs-tp-f-lang", className: "cs-settings-select", value: form.lang, onChange: e => set('lang', e.target.value), children: [_jsx("option", { value: "", children: t('titlePage.notSet') }), langs.map(l => _jsx("option", { value: l.code, children: l.label }, l.code))] }) }), _jsx(Field, { label: t('titlePage.field.langSecondary'), htmlFor: "cs-tp-f-lang2", children: _jsxs("div", { className: "cs-tp-chips", children: [form.langSecondary.map(code => (_jsxs("span", { className: "cs-tp-chip", children: [langLabel(code), _jsx("button", { type: "button", "aria-label": `${t('titlePage.remove')} ${langLabel(code)}`, onClick: () => set('langSecondary', form.langSecondary.filter(c => c !== code)), children: "\u00D7" })] }, code))), _jsxs("select", { id: "cs-tp-f-lang2", className: "cs-settings-select", value: "", onChange: e => {
                                                             const code = e.target.value;
                                                             if (code && !form.langSecondary.includes(code))
                                                                 set('langSecondary', [...form.langSecondary, code]);
                                                         }, children: [_jsx("option", { value: "", children: t('titlePage.addLanguage') }), langs.filter(l => l.code !== form.lang && !form.langSecondary.includes(l.code))
-                                                                .map(l => _jsx("option", { value: l.code, children: l.label }, l.code))] })] }) }), _jsx(Field, { label: t('titlePage.field.page'), htmlFor: "cs-tp-f-page", children: _jsxs("select", { id: "cs-tp-f-page", className: "cs-settings-select", value: form.page, onChange: e => set('page', e.target.value), children: [_jsx("option", { value: "", children: t('titlePage.pageDefault') }), _jsx("option", { value: "A4", children: "A4" }), _jsx("option", { value: "Letter", children: "US Letter" })] }) }), _jsx(Field, { label: t('titlePage.field.style'), htmlFor: "cs-tp-f-style", children: _jsxs("select", { id: "cs-tp-f-style", className: "cs-settings-select", value: form.style, onChange: e => set('style', e.target.value), children: [_jsx("option", { value: "", children: t('titlePage.styleDefault').replace('{name}', defaultStyleName) }), styles.map(s => _jsx("option", { value: s.id, children: s.name }, s.id)), form.style && !styles.some(s => s.id === form.style) && (_jsx("option", { value: form.style, children: form.style }))] }) }), _jsx(TextField, { id: "watermark", label: t('titlePage.field.watermark'), placeholder: "CONFIDENTIAL", value: form.watermark, onChange: v => set('watermark', v) })] }), _jsxs(Panel, { id: "other", active: tab, children: [form.custom.map((c, i) => (_jsxs("div", { className: "cs-tp-row", children: [_jsx("input", { "aria-label": t('titlePage.field.key'), className: "cs-tp-input cs-tp-key", value: c.key, placeholder: "key", onChange: e => set('custom', form.custom.map((x, j) => j === i ? { ...x, key: e.target.value } : x)) }), _jsx("input", { "aria-label": t('titlePage.field.value'), className: "cs-tp-input", value: c.value, onChange: e => set('custom', form.custom.map((x, j) => j === i ? { ...x, value: e.target.value } : x)) }), _jsx("button", { type: "button", className: "cs-tp-remove", "aria-label": t('titlePage.remove'), onClick: () => set('custom', form.custom.filter((_, j) => j !== i)), children: "\u00D7" })] }, i))), _jsxs("button", { type: "button", className: "cs-tp-add", onClick: () => set('custom', [...form.custom, { key: '', value: '' }]), children: ["+ ", t('titlePage.addField')] }), preservedCount > 0 && (_jsx("p", { className: "cs-tp-note", children: t('titlePage.preserved').replace('{n}', String(preservedCount)) }))] })] })] }), _jsxs("div", { className: "cs-export-actions cs-tp-actions", children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel", onClick: onClose, children: t('titlePage.cancel') }), _jsx("button", { type: "button", className: "cs-confirm-btn-primary", onClick: save, children: t('titlePage.save') })] })] }) }));
+                                                                .map(l => _jsx("option", { value: l.code, children: l.label }, l.code))] })] }) }), _jsx(Field, { label: t('titlePage.field.page'), htmlFor: "cs-tp-f-page", children: _jsxs("select", { id: "cs-tp-f-page", className: "cs-settings-select", value: form.page, onChange: e => set('page', e.target.value), children: [_jsx("option", { value: "", children: t('titlePage.pageDefault') }), _jsx("option", { value: "A4", children: "A4" }), _jsx("option", { value: "Letter", children: t('titlePage.pageLetter') })] }) }), _jsx(Field, { label: t('titlePage.field.style'), htmlFor: "cs-tp-f-style", children: _jsxs("select", { id: "cs-tp-f-style", className: "cs-settings-select", value: form.style, onChange: e => set('style', e.target.value), children: [_jsx("option", { value: "", children: t('titlePage.styleDefault').replace('{name}', defaultStyleName) }), styles.map(s => _jsx("option", { value: s.id, children: s.name }, s.id)), form.style && !styles.some(s => s.id === form.style) && (_jsx("option", { value: form.style, children: form.style }))] }) }), _jsx(TextField, { id: "watermark", label: t('titlePage.field.watermark'), placeholder: t('titlePage.placeholder.watermark'), value: form.watermark, onChange: v => set('watermark', v) })] }), _jsxs(Panel, { id: "other", active: tab, children: [form.custom.map((c, i) => (_jsxs("div", { className: "cs-tp-row", children: [_jsx("input", { "aria-label": t('titlePage.field.key'), className: "cs-tp-input cs-tp-key", value: c.key, placeholder: t('titlePage.placeholder.key'), onChange: e => set('custom', form.custom.map((x, j) => j === i ? { ...x, key: e.target.value } : x)) }), _jsx("input", { "aria-label": t('titlePage.field.value'), className: "cs-tp-input", value: c.value, onChange: e => set('custom', form.custom.map((x, j) => j === i ? { ...x, value: e.target.value } : x)) }), _jsx("button", { type: "button", className: "cs-tp-remove", "aria-label": t('titlePage.remove'), onClick: () => set('custom', form.custom.filter((_, j) => j !== i)), children: "\u00D7" })] }, i))), _jsxs("button", { type: "button", className: "cs-tp-add", onClick: () => set('custom', [...form.custom, { key: '', value: '' }]), children: ["+ ", t('titlePage.addField')] }), preservedCount > 0 && (_jsx("p", { className: "cs-tp-note", children: t('titlePage.preserved').replace('{n}', String(preservedCount)) }))] })] })] }), _jsxs("div", { className: "cs-export-actions cs-tp-actions", children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel", onClick: onClose, children: t('titlePage.cancel') }), _jsx("button", { type: "button", className: "cs-confirm-btn-primary", onClick: save, children: t('titlePage.save') })] })] }) }));
 }
 function Panel({ id, active, children }) {
     return (_jsx("div", { role: "tabpanel", id: `cs-tp-panel-${id}`, "aria-labelledby": `cs-tp-tab-${id}`, className: "cs-tp-panel", hidden: active !== id, children: children }));

package/package.json

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