@sutrata/editor 0.1.0

package/dist/titlepage/TitlePageDialog.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useDocument } from '../context/DocumentContext';
+import { useTranslation } from '../i18n/useTranslation';
+import { allStyles, resolveStyle } from '../styles/registry';
+import { getEditorView } from '../editor/editor-bus';
+import { applyTitlePageText } from '../editor/frontmatter-field';
+import { readTitlePage, writeTitlePage, MANAGED_KEYS } from './frontmatter-form';
+import { languageOptions } from './languages';
+export { OPEN_TITLE_PAGE_EVENT, openTitlePageForm } from '../editor/editor-bus';
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+const TABS = ['story', 'credits', 'draft', 'contact', 'document', 'other'];
+function wordCount(s) {
+    return s.split(/\s+/).filter(Boolean).length;
+}
+export function TitlePageDialog({ onClose }) {
+    const { ast, text, setText, mode, customStyles, showToast } = useDocument();
+    const { t } = useTranslation();
+    const data = ast.frontmatter?.data;
+    const initial = useMemo(() => readTitlePage(data), []); // eslint-disable-line react-hooks/exhaustive-deps
+    const [form, setForm] = useState(initial);
+    const firstFieldRef = useRef(null);
+    const [tab, setTab] = useState('story');
+    const tabRefs = useRef({});
+    /** Arrow keys move between tabs (vertical tab list; left/right also work). */
+    function onTabKey(e, current) {
+        const i = TABS.indexOf(current);
+        let next;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowRight')
+            next = TABS[(i + 1) % TABS.length];
+        else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft')
+            next = TABS[(i - 1 + TABS.length) % TABS.length];
+        else if (e.key === 'Home')
+            next = TABS[0];
+        else if (e.key === 'End')
+            next = TABS[TABS.length - 1];
+        if (!next)
+            return;
+        e.preventDefault();
+        setTab(next);
+        tabRefs.current[next]?.focus();
+    }
+    const set = (key, value) => setForm(f => ({ ...f, [key]: value }));
+    useEffect(() => {
+        firstFieldRef.current?.focus();
+        const onKey = (e) => { if (e.key === 'Escape')
+            onClose(); };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [onClose]);
+    const langs = languageOptions([
+        form.lang, ...form.langSecondary, ...form.altTitles.map(a => a.lang),
+    ]);
+    const langLabel = (code) => langs.find(l => l.code === code)?.label ?? code;
+    const styles = allStyles(customStyles);
+    const defaultStyleName = resolveStyle(undefined, customStyles).name;
+    const logWords = wordCount(form.logline);
+    // Frontmatter keys the form neither manages nor shows as a custom row: kept as is.
+    const preservedCount = data
+        ? Object.keys(data).filter(k => !MANAGED_KEYS.includes(k) &&
+            !initial.custom.some(c => c.key === k)).length
+        : 0;
+    function save() {
+        const current = readTitlePage(ast.frontmatter?.data);
+        const next = writeTitlePage(text, current, form);
+        if (next !== text) {
+            applyTitlePageText(mode === 'formatted' ? getEditorView() : null, next, setText);
+            showToast(t('titlePage.saved'), 'success');
+        }
+        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 => {
+                                                            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') })] })] }) }));
+}
+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 }));
+}
+function Field({ label, htmlFor, hint, children }) {
+    return (_jsxs("div", { className: "cs-tp-field", children: [_jsxs("label", { className: "cs-tp-label", htmlFor: htmlFor, children: [label, hint ? _jsxs(_Fragment, { children: [" ", hint] }) : null] }), children] }));
+}
+function TextField({ id, label, value, placeholder, onChange }) {
+    return (_jsx(Field, { label: label, htmlFor: `cs-tp-f-${id}`, children: _jsx("input", { id: `cs-tp-f-${id}`, className: "cs-tp-input", value: value, placeholder: placeholder, onChange: e => onChange(e.target.value) }) }));
+}
+/** Date picker for ISO dates (YYYY-MM-DD). A date already written as free text (e.g.
+ *  "June 2026") stays editable as text, with a switch to the picker. */
+function DateInput({ id, value, onChange, usePickerLabel, useTextLabel }) {
+    const [asText, setAsText] = useState(value !== '' && !ISO_DATE.test(value));
+    return (_jsxs("div", { className: "cs-tp-date", children: [asText
+                ? _jsx("input", { id: id, className: "cs-tp-input", value: value, onChange: e => onChange(e.target.value) })
+                : _jsx("input", { id: id, type: "date", className: "cs-tp-input", value: ISO_DATE.test(value) ? value : '', onChange: e => onChange(e.target.value) }), _jsx("button", { type: "button", className: "cs-tp-link", onClick: () => setAsText(!asText), children: asText ? usePickerLabel : useTextLabel })] }));
+}

package/dist/titlepage/frontmatter-form.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Title page form ⇄ Sutra frontmatter.
+ *
+ * `readTitlePage` turns the parsed frontmatter into form state. `writeTitlePage` writes the
+ * form back into the Sutra text by editing only the frontmatter lines of keys whose
+ * value actually changed. Every other line (unknown keys, nested maps the form does not
+ * manage, comments, ordering, formatting) is kept byte for byte, so opening the form and
+ * saving without edits leaves the file unchanged.
+ *
+ * Values are written in the subset the parser's minimal YAML reader understands: plain
+ * scalars, `key: |` block scalars, one level of nested map (multilingual `title:`), and
+ * `[a, b]` flow lists (kept as strings by the parser and split by readers).
+ */
+export type PageSize = '' | 'A4' | 'Letter';
+export interface AltTitle {
+    lang: string;
+    text: string;
+}
+export interface CustomField {
+    key: string;
+    value: string;
+}
+export interface TitlePageForm {
+    title: string;
+    altTitles: AltTitle[];
+    logline: string;
+    author: string;
+    credit: string;
+    source: string;
+    story: string;
+    screenplay: string;
+    dialogue: string;
+    draft: string;
+    revision: string;
+    date: string;
+    contact: string;
+    copyright: string;
+    lang: string;
+    langSecondary: string[];
+    page: PageSize;
+    style: string;
+    watermark: string;
+    custom: CustomField[];
+}
+/** Keys the form edits directly (in the order new keys are appended). */
+export declare const MANAGED_KEYS: readonly ["title", "logline", "author", "credit", "source", "story", "screenplay", "dialogue", "draft", "revision", "date", "contact", "copyright", "lang", "lang-secondary", "page", "style", "watermark"];
+export declare function emptyForm(): TitlePageForm;
+/** Split a list value: `[a, b]`, `a, b`, or an array. */
+export declare function splitList(v: unknown): string[];
+/** Build form state from parsed frontmatter data. */
+export declare function readTitlePage(data: Record<string, unknown> | undefined): TitlePageForm;
+/**
+ * Write `next` into `text`'s frontmatter. `original` is the form as read from the same
+ * text; only keys whose value differs between the two are rewritten.
+ */
+export declare function writeTitlePage(text: string, original: TitlePageForm, next: TitlePageForm): string;

package/dist/titlepage/frontmatter-form.js

@@ -0,0 +1,245 @@
+/**
+ * Title page form ⇄ Sutra frontmatter.
+ *
+ * `readTitlePage` turns the parsed frontmatter into form state. `writeTitlePage` writes the
+ * form back into the Sutra text by editing only the frontmatter lines of keys whose
+ * value actually changed. Every other line (unknown keys, nested maps the form does not
+ * manage, comments, ordering, formatting) is kept byte for byte, so opening the form and
+ * saving without edits leaves the file unchanged.
+ *
+ * Values are written in the subset the parser's minimal YAML reader understands: plain
+ * scalars, `key: |` block scalars, one level of nested map (multilingual `title:`), and
+ * `[a, b]` flow lists (kept as strings by the parser and split by readers).
+ */
+/** Keys the form edits directly (in the order new keys are appended). */
+export const MANAGED_KEYS = [
+    'title', 'logline', 'author', 'credit', 'source', 'story', 'screenplay', 'dialogue',
+    'draft', 'revision', 'date', 'contact', 'copyright',
+    'lang', 'lang-secondary', 'page', 'style', 'watermark',
+];
+/** Keys kept but never shown as editable custom rows. */
+const HIDDEN_KEYS = new Set(['format']);
+const KEY_RE = /^([A-Za-z0-9_-]+):(.*)$/;
+export function emptyForm() {
+    return {
+        title: '', altTitles: [], logline: '',
+        author: '', credit: '', source: '', story: '', screenplay: '', dialogue: '',
+        draft: '', revision: '', date: '',
+        contact: '', copyright: '',
+        lang: '', langSecondary: [], page: '', style: '', watermark: '',
+        custom: [],
+    };
+}
+function str(v) {
+    return typeof v === 'string' ? v : v === undefined || v === null ? '' : String(v);
+}
+/** Split a list value: `[a, b]`, `a, b`, or an array. */
+export function splitList(v) {
+    if (Array.isArray(v))
+        return v.map(x => str(x).trim()).filter(Boolean);
+    return str(v).replace(/^\s*\[|\]\s*$/g, '').split(',')
+        .map(x => x.trim().replace(/^['"]|['"]$/g, '')).filter(Boolean);
+}
+function normalizePage(v) {
+    const p = v.trim().toLowerCase();
+    if (p === 'a4')
+        return 'A4';
+    if (p === 'letter' || p === 'us-letter' || p === 'usletter')
+        return 'Letter';
+    return '';
+}
+/** Build form state from parsed frontmatter data. */
+export function readTitlePage(data) {
+    const f = emptyForm();
+    if (!data)
+        return f;
+    f.lang = str(data['lang']).trim();
+    const title = data['title'];
+    if (title && typeof title === 'object' && !Array.isArray(title)) {
+        const map = title;
+        const keys = Object.keys(map);
+        const primary = keys.includes(f.lang) ? f.lang : keys[0];
+        if (primary !== undefined)
+            f.title = str(map[primary]);
+        f.altTitles = keys.filter(k => k !== primary).map(k => ({ lang: k, text: str(map[k]) }));
+        // Remember which language key held the main title.
+        if (primary !== undefined && !f.lang)
+            f.lang = primary;
+    }
+    else {
+        f.title = str(title);
+    }
+    f.logline = str(data['logline']);
+    f.author = str(data['author']);
+    f.credit = str(data['credit']);
+    f.source = str(data['source']);
+    f.story = str(data['story']);
+    f.screenplay = str(data['screenplay']);
+    f.dialogue = str(data['dialogue']);
+    f.draft = str(data['draft']);
+    f.revision = str(data['revision']);
+    f.date = str(data['date']);
+    f.contact = str(data['contact']);
+    f.copyright = str(data['copyright']);
+    f.langSecondary = splitList(data['lang-secondary']);
+    f.page = normalizePage(str(data['page']));
+    f.style = str(data['style']);
+    f.watermark = str(data['watermark']);
+    const managed = new Set(MANAGED_KEYS);
+    for (const [key, value] of Object.entries(data)) {
+        if (managed.has(key) || HIDDEN_KEYS.has(key))
+            continue;
+        if (typeof value === 'string' && !value.includes('\n'))
+            f.custom.push({ key, value });
+    }
+    return f;
+}
+// ── Writing ─────────────────────────────────────────────────────────────────────────
+function scalarLines(key, value) {
+    const v = value.replace(/\s+$/g, '');
+    if (v.trim() === '')
+        return null;
+    if (v.includes('\n')) {
+        return [`${key}: |`, ...v.split('\n').map(l => (l ? `  ${l}` : ''))];
+    }
+    return [`${key}: ${v.trim()}`];
+}
+function oneLine(v) {
+    return v.replace(/\s*\n\s*/g, ' ').trim();
+}
+/** Lines for a managed key, or null to remove it. */
+function managedLines(key, f) {
+    switch (key) {
+        case 'title': {
+            const alts = f.altTitles.filter(a => a.lang.trim() && a.text.trim());
+            if (alts.length === 0)
+                return scalarLines('title', oneLine(f.title));
+            const primaryKey = f.lang.trim() || 'und';
+            const lines = ['title:'];
+            if (f.title.trim())
+                lines.push(`  ${primaryKey}: ${oneLine(f.title)}`);
+            for (const a of alts)
+                if (a.lang.trim() !== primaryKey)
+                    lines.push(`  ${a.lang.trim()}: ${oneLine(a.text)}`);
+            return lines;
+        }
+        case 'lang-secondary': {
+            const list = f.langSecondary.map(l => l.trim()).filter(Boolean);
+            return list.length ? [`lang-secondary: [${list.join(', ')}]`] : null;
+        }
+        case 'page': return f.page ? [`page: ${f.page}`] : null;
+        case 'logline': return scalarLines('logline', oneLine(f.logline));
+        case 'contact': return scalarLines('contact', f.contact);
+        default: {
+            const field = {
+                author: f.author, credit: f.credit, source: f.source, story: f.story,
+                screenplay: f.screenplay, dialogue: f.dialogue, draft: f.draft, revision: f.revision,
+                date: f.date, copyright: f.copyright, lang: f.lang, style: f.style, watermark: f.watermark,
+            }[key] ?? '';
+            return scalarLines(key, oneLine(field));
+        }
+    }
+}
+/** Semantic value of a managed key, for change detection. */
+function managedValue(key, f) {
+    return JSON.stringify(managedLines(key, f));
+}
+function splitEntries(yamlLines) {
+    const entries = [];
+    for (const line of yamlLines) {
+        const m = KEY_RE.exec(line);
+        if (m)
+            entries.push({ key: m[1], lines: [line] });
+        else if (entries.length > 0)
+            entries[entries.length - 1].lines.push(line);
+        else
+            entries.push({ key: null, lines: [line] });
+    }
+    return entries;
+}
+/**
+ * Write `next` into `text`'s frontmatter. `original` is the form as read from the same
+ * text; only keys whose value differs between the two are rewritten.
+ */
+export function writeTitlePage(text, original, next) {
+    const eol = text.includes('\r\n') ? '\r\n' : '\n';
+    const lines = text.split(/\r?\n/);
+    let yamlLines = [];
+    let bodyLines = lines;
+    let hadFrontmatter = false;
+    if (lines[0] === '---') {
+        const close = lines.indexOf('---', 1);
+        if (close > 0) {
+            hadFrontmatter = true;
+            yamlLines = lines.slice(1, close);
+            bodyLines = lines.slice(close + 1);
+        }
+    }
+    const entries = splitEntries(yamlLines);
+    const present = new Set(entries.map(e => e.key).filter((k) => k !== null));
+    // Managed keys that changed → their new lines (null = remove).
+    const changes = new Map();
+    for (const key of MANAGED_KEYS) {
+        if (managedValue(key, original) !== managedValue(key, next))
+            changes.set(key, managedLines(key, next));
+    }
+    // Primary language key of a multilingual title follows `lang`.
+    if (next.altTitles.some(a => a.text.trim()) && original.lang !== next.lang) {
+        changes.set('title', managedLines('title', next));
+    }
+    // Custom rows: edited, removed, or added.
+    const origCustom = new Map(original.custom.map(c => [c.key, c.value]));
+    const nextCustom = new Map();
+    for (const c of next.custom) {
+        const k = c.key.trim();
+        if (!/^[A-Za-z0-9_-]+$/.test(k) || MANAGED_KEYS.includes(k))
+            continue;
+        nextCustom.set(k, c.value);
+    }
+    for (const [k, v] of origCustom) {
+        if (!nextCustom.has(k))
+            changes.set(k, null);
+        else if (nextCustom.get(k) !== v)
+            changes.set(k, scalarLines(k, oneLine(nextCustom.get(k))));
+    }
+    for (const [k, v] of nextCustom) {
+        if (!origCustom.has(k))
+            changes.set(k, scalarLines(k, oneLine(v)));
+    }
+    if (changes.size === 0)
+        return text;
+    const out = [];
+    for (const e of entries) {
+        if (e.key !== null && changes.has(e.key)) {
+            const replacement = changes.get(e.key);
+            if (replacement)
+                out.push(...replacement);
+            changes.delete(e.key);
+        }
+        else {
+            out.push(...e.lines);
+        }
+    }
+    // Keys not present before: managed keys in canonical order, then custom keys.
+    for (const key of MANAGED_KEYS) {
+        if (!present.has(key) && changes.has(key)) {
+            const add = changes.get(key);
+            if (add)
+                out.push(...add);
+            changes.delete(key);
+        }
+    }
+    for (const [, add] of changes)
+        if (add)
+            out.push(...add);
+    const hasContent = out.some(l => l.trim() !== '');
+    if (!hasContent) {
+        // Everything removed: drop the frontmatter block and the blank line after it.
+        const rest = hadFrontmatter && bodyLines[0] === '' ? bodyLines.slice(1) : bodyLines;
+        return rest.join(eol);
+    }
+    if (!hadFrontmatter) {
+        return ['---', ...out, '---', '', ...lines].join(eol);
+    }
+    return ['---', ...out, '---', ...bodyLines].join(eol);
+}

package/dist/titlepage/languages.d.ts

@@ -0,0 +1,10 @@
+/** Languages offered for a document's `lang` / `lang-secondary` (BCP-47 primary tags).
+ *  Indian languages first, then others commonly mixed into Indian scripts. A code found in
+ *  a file but missing here is still shown (see `languageOptions`). */
+export interface LanguageOption {
+    code: string;
+    label: string;
+}
+export declare const DOCUMENT_LANGUAGES: LanguageOption[];
+/** The list plus any codes already in the document that it does not contain. */
+export declare function languageOptions(inUse: string[]): LanguageOption[];

package/dist/titlepage/languages.js

@@ -0,0 +1,31 @@
+export const DOCUMENT_LANGUAGES = [
+    { code: 'hi', label: 'Hindi — हिन्दी' },
+    { code: 'ta', label: 'Tamil — தமிழ்' },
+    { code: 'te', label: 'Telugu — తెలుగు' },
+    { code: 'ml', label: 'Malayalam — മലയാളം' },
+    { code: 'kn', label: 'Kannada — ಕನ್ನಡ' },
+    { code: 'bn', label: 'Bengali — বাংলা' },
+    { code: 'mr', label: 'Marathi — मराठी' },
+    { code: 'gu', label: 'Gujarati — ગુજરાતી' },
+    { code: 'pa', label: 'Punjabi — ਪੰਜਾਬੀ' },
+    { code: 'or', label: 'Odia — ଓଡ଼ିଆ' },
+    { code: 'as', label: 'Assamese — অসমীয়া' },
+    { code: 'ur', label: 'Urdu — اردو' },
+    { code: 'si', label: 'Sinhala — සිංහල' },
+    { code: 'sa', label: 'Sanskrit — संस्कृतम्' },
+    { code: 'ne', label: 'Nepali — नेपाली' },
+    { code: 'kok', label: 'Konkani — कोंकणी' },
+    { code: 'mai', label: 'Maithili — मैथिली' },
+    { code: 'bho', label: 'Bhojpuri — भोजपुरी' },
+    { code: 'tcy', label: 'Tulu — ತುಳು' },
+    { code: 'en', label: 'English' },
+    { code: 'ar', label: 'Arabic — العربية' },
+    { code: 'fr', label: 'French — Français' },
+    { code: 'es', label: 'Spanish — Español' },
+];
+/** The list plus any codes already in the document that it does not contain. */
+export function languageOptions(inUse) {
+    const known = new Set(DOCUMENT_LANGUAGES.map(l => l.code));
+    const extra = inUse.filter(c => c && !known.has(c)).map(c => ({ code: c, label: c }));
+    return [...DOCUMENT_LANGUAGES, ...extra];
+}

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+export type EditorMode = 'formatted' | 'source';
+export interface VersionEntry {
+    id: string;
+    timestamp: number;
+    content: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sutrata/editor",
+  "version": "0.1.0",
+  "license": "GPL-3.0-or-later",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "node scripts/generate-providers.mjs && tsc && node scripts/copy-assets.mjs",
+    "generate:providers": "node scripts/generate-providers.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.43.1",
+    "@lezer/highlight": "^1.2.3",
+    "@sutrata/parser": "workspace:*",
+    "diff": "^9.0.0",
+    "docx": "^9.7.1",
+    "jszip": "^3.10.1",
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-history": "^1.4.0",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.21.0",
+    "prosemirror-schema-basic": "^1.2.2",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-transform": "^1.9.0",
+    "prosemirror-view": "^1.33.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "jsdom": "^29.1.1",
+    "typescript": "^5.4.0",
+    "vitest": "^1.6.0"
+  }
+}

package/scripts/copy-assets.mjs

@@ -0,0 +1,16 @@
+import { mkdirSync, copyFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..');
+
+const files = [
+  ['src/shell/fonts/fonts.css', 'dist/shell/fonts/fonts.css'],
+  ['src/styles/screenplay.css', 'dist/styles/screenplay.css'],
+  ['src/desktop-api.d.ts', 'dist/desktop-api.d.ts'],
+];
+
+for (const [from, to] of files) {
+  mkdirSync(dirname(join(root, to)), { recursive: true });
+  copyFileSync(join(root, from), join(root, to));
+}

package/scripts/generate-providers.mjs

@@ -0,0 +1,127 @@
+// Generates src/ai/generated-providers.json (and a copy at
+// packages/app/public/models-config.json) from the community-maintained
+// all-llm-provider-list registry, at build time.
+//
+// Only providers Sutrata can actually drive are kept: ones with a real
+// env_variable (i.e. a "paste an API key" auth model — this drops
+// OAuth/browser-cookie/local-only/no-auth entries) and either
+// openai_compatible: true, or Anthropic (the one vendor ai-client.ts still
+// calls via a bespoke request shape, since Anthropic has no OpenAI-compat
+// endpoint). Google/Gemini is retargeted at its official OpenAI-compat base
+// URL (https://generativelanguage.googleapis.com/v1beta/openai) so it flows
+// through the generic branch too, rather than needing its own adapter.
+//
+// TODO(future): this list is currently refreshed only when this script is
+// re-run at build time. A follow-up could instead fetch the upstream list
+// live each time the user opens the AI settings/onboarding dialog, so the
+// provider catalog stays current without a rebuild — intentionally not done
+// here to keep this change scoped.
+
+import { writeFileSync, existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..');
+const editorOutPath = join(root, 'src/ai/generated-providers.json');
+const appOutPath = join(root, '../app/public/models-config.json');
+
+const SOURCE_URL = 'https://raw.githubusercontent.com/foisalislambd/all-llm-provider-list/main/data/providers.json';
+
+// id/baseUrl overrides for vendors Sutrata treats specially. Ids double as
+// localStorage key suffixes (sutrata_api_key_<id>) and, for anthropic, as
+// invokeProvider's branch discriminator — they must stay stable across
+// regenerations regardless of what the upstream slug says.
+//
+// `models` overrides are needed because the upstream list's popular_models
+// sometimes holds human-readable display names (e.g. "Claude Opus 4.8")
+// rather than API-ready model ids — fine for a dropdown label, but wrong if
+// sent verbatim as the `model` field. These two are the ids actually used
+// for testConnection() before listModels() has a chance to fetch live ones;
+// everyone else relies on listModels() to correct a bad static id at
+// first use.
+const OVERRIDES = {
+  anthropic: {
+    id: 'anthropic',
+    baseUrl: 'https://api.anthropic.com/v1',
+    models: [
+      { id: 'claude-opus-5', name: 'Claude Opus 5' },
+      { id: 'claude-sonnet-5', name: 'Claude Sonnet 5' },
+      { id: 'claude-haiku-4-5', name: 'Claude Haiku 4.5' },
+    ],
+  },
+  'google-ai-studio': {
+    id: 'gemini',
+    baseUrl: 'https://generativelanguage.googleapis.com/v1beta/openai',
+    models: [
+      { id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash' },
+      { id: 'gemini-2.5-pro', name: 'Gemini 2.5 Pro' },
+      { id: 'gemini-2.0-flash-lite', name: 'Gemini 2.0 Flash Lite' },
+    ],
+  },
+};
+OVERRIDES.gemini = OVERRIDES['google-ai-studio'];
+OVERRIDES.google = OVERRIDES['google-ai-studio'];
+
+const ESSENTIAL_IDS = new Set(['anthropic', 'gemini', 'groq']);
+
+function isSupported(entry) {
+  if (!entry.env_variable || !entry.api_base_url) return false;
+  const override = OVERRIDES[entry.slug];
+  return entry.openai_compatible === true || override?.id === 'anthropic';
+}
+
+function toProviderConfig(entry) {
+  const override = OVERRIDES[entry.slug];
+  const id = override?.id ?? entry.slug;
+  const baseUrl = override?.baseUrl ?? entry.api_base_url;
+  const config = {
+    id,
+    name: entry.name,
+    baseUrl,
+    models: override?.models ?? (entry.popular_models ?? []).map((m) => ({ id: m, name: m })),
+  };
+  if (ESSENTIAL_IDS.has(id)) config.essential = true;
+  return config;
+}
+
+async function main() {
+  let source;
+  try {
+    const res = await fetch(SOURCE_URL);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    source = await res.json();
+  } catch (e) {
+    console.warn(`[generate-providers] Failed to fetch ${SOURCE_URL}: ${e}. Leaving existing generated files untouched.`);
+    if (!existsSync(editorOutPath)) {
+      console.error('[generate-providers] No existing generated-providers.json to fall back to — build will use the compiled-in defaults only.');
+    }
+    return;
+  }
+
+  const entries = Array.isArray(source) ? source : source.providers ?? [];
+  const seen = new Set();
+  const providers = [];
+  for (const entry of entries) {
+    if (!isSupported(entry)) continue;
+    const config = toProviderConfig(entry);
+    if (seen.has(config.id)) continue; // first match wins (upstream list order)
+    seen.add(config.id);
+    providers.push(config);
+  }
+
+  const output = {
+    generatedAt: new Date().toISOString(),
+    source: 'https://github.com/foisalislambd/all-llm-provider-list',
+    providers,
+  };
+
+  const json = JSON.stringify(output, null, 2) + '\n';
+  writeFileSync(editorOutPath, json);
+
+  const appConfig = { providers: output.providers };
+  writeFileSync(appOutPath, JSON.stringify(appConfig, null, 2) + '\n');
+
+  console.log(`[generate-providers] Wrote ${providers.length} providers to ${editorOutPath} and ${appOutPath}.`);
+}
+
+await main();