@sutrata/editor 0.1.0

package/dist/spellcheck/spellcheck-plugin.js

@@ -0,0 +1,75 @@
+import { Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { loadDictionary } from './hunspell';
+// Module-level state
+let currentChecker = null;
+let currentLang = 'en';
+export function setSpellcheckLanguage(lang) {
+    if (lang === currentLang)
+        return;
+    currentLang = lang;
+    currentChecker = null; // force reload
+    loadDictionary(lang).then(checker => {
+        currentChecker = checker;
+    });
+}
+/**
+ * Tokenize text into words (splitting on whitespace and punctuation).
+ * Returns array of {word, start, end} with character offsets.
+ * Uses Unicode letter/mark categories to support Indic scripts.
+ */
+export function tokenizeWords(text) {
+    const results = [];
+    const regex = /[\p{L}\p{M}'-]+/gu;
+    let match;
+    while ((match = regex.exec(text)) !== null) {
+        results.push({ word: match[0], start: match.index, end: match.index + match[0].length });
+    }
+    return results;
+}
+/**
+ * ProseMirror plugin that underlines misspelled words via Decoration API.
+ * Recomputes decorations on every doc change.
+ */
+export function createSpellcheckPlugin() {
+    return new Plugin({
+        state: {
+            init() {
+                return DecorationSet.empty;
+            },
+            apply(tr, set, _oldState, newState) {
+                if (!tr.docChanged)
+                    return set;
+                if (!currentChecker)
+                    return DecorationSet.empty;
+                return computeDecorations(newState, currentChecker);
+            },
+        },
+        props: {
+            decorations(state) {
+                return this.getState(state);
+            },
+        },
+    });
+}
+function computeDecorations(state, checker) {
+    const decorations = [];
+    state.doc.forEach((node, offset) => {
+        if (!node.isBlock || !node.textContent)
+            return;
+        const text = node.textContent;
+        const tokens = tokenizeWords(text);
+        for (const token of tokens) {
+            if (!checker.check(token.word)) {
+                // Misspelled: add wavy underline decoration
+                const from = offset + 1 + token.start;
+                const to = offset + 1 + token.end;
+                decorations.push(Decoration.inline(from, to, {
+                    class: 'cs-spell-error',
+                    title: `"${token.word}" may be misspelled`,
+                }));
+            }
+        }
+    });
+    return DecorationSet.create(state.doc, decorations);
+}

package/dist/styles/StyleDialog.d.ts

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

package/dist/styles/StyleDialog.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useDocument } from '../context/DocumentContext';
+import { useTranslation } from '../i18n/useTranslation';
+import { allStyles } from './registry';
+import { isBuiltinStyleId } from './builtin-styles';
+import { validateStyleJson } from './validate';
+import { useStorageAdapter } from '../extensions/storage-adapter';
+export function StyleDialog({ onClose }) {
+    const { resolvedStyle, customStyles, setDocumentStyle, reloadCustomStyles } = useDocument();
+    const { t } = useTranslation();
+    const storageAdapter = useStorageAdapter();
+    const dialogRef = useRef(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        dialogRef.current?.focus();
+    }, []);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape')
+            onClose();
+    };
+    async function handleImport() {
+        setError(null);
+        const picked = await storageAdapter.openStyleJson();
+        if (!picked)
+            return;
+        let data;
+        try {
+            data = JSON.parse(picked.text);
+        }
+        catch {
+            setError(`${t('style.importInvalid')}: not valid JSON`);
+            return;
+        }
+        const result = validateStyleJson(data);
+        if (!result.ok) {
+            setError(`${t('style.importInvalid')}: ${result.errors.join('; ')}`);
+            return;
+        }
+        if (isBuiltinStyleId(result.style.id)) {
+            setError(t('style.importIdReserved'));
+            return;
+        }
+        if (customStyles.some(s => s.id === result.style.id) && !confirm(t('style.importOverwriteConfirm'))) {
+            return;
+        }
+        await storageAdapter.saveStyle(result.style);
+        await reloadCustomStyles();
+    }
+    async function handleDelete(id) {
+        if (!confirm(t('style.deleteConfirm')))
+            return;
+        await storageAdapter.deleteStyle(id);
+        await reloadCustomStyles();
+    }
+    function renderRow(style, deletable) {
+        const active = style.id === resolvedStyle.id;
+        const swatchColor = style.elements.sceneHeading.color ? `#${style.elements.sceneHeading.color}` : '#999';
+        return (_jsxs("div", { className: "cs-settings-row", style: { alignItems: 'flex-start', cursor: 'pointer', padding: '6px 0' }, onClick: () => setDocumentStyle(style.id), children: [_jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'flex-start' }, children: [_jsx("span", { style: { display: 'inline-block', width: '10px', height: '10px', borderRadius: '50%', background: swatchColor, flexShrink: 0, marginTop: '4px' } }), _jsxs("div", { children: [_jsxs("div", { className: "cs-settings-label", style: { fontWeight: active ? 600 : 400 }, children: [style.name, active && _jsxs("span", { style: { color: '#1976d2', fontWeight: 600 }, children: [" \u2014 ", t('style.current')] })] }), style.description && (_jsx("div", { style: { fontSize: '11px', color: '#888', marginTop: '2px' }, children: style.description }))] })] }), deletable && (_jsx("button", { className: "cs-panel-close", "aria-label": t('style.delete'), onClick: e => { e.stopPropagation(); void handleDelete(style.id); }, children: "\u00D7" }))] }, style.id));
+    }
+    const builtins = allStyles([]).filter(s => isBuiltinStyleId(s.id));
+    return (_jsx("div", { className: "cs-dialog-overlay", onClick: onClose, children: _jsxs("div", { ref: dialogRef, className: "cs-dialog cs-settings-dialog", role: "dialog", "aria-modal": "true", "aria-label": t('style.title'), tabIndex: -1, onClick: e => e.stopPropagation(), onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "cs-dialog-header", children: [_jsx("span", { className: "cs-dialog-title", children: t('style.title') }), _jsx("button", { className: "cs-fr-close", "aria-label": t('style.close'), onClick: onClose, children: "\u00D7" })] }), _jsxs("div", { className: "cs-settings-body", children: [error && (_jsx("div", { className: "cs-export-warnings", style: { marginTop: 0 }, children: _jsx("div", { className: "cs-export-warn-item", children: error }) })), _jsx("div", { className: "cs-settings-section-label", children: t('style.builtIn') }), builtins.map(s => renderRow(s, false)), customStyles.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "cs-settings-section-label", style: { marginTop: '8px' }, children: t('style.custom') }), customStyles.map(s => renderRow(s, true))] })), _jsx("button", { className: "cs-export-btn-cancel", style: { marginTop: '8px', alignSelf: 'flex-start' }, onClick: () => { void handleImport(); }, children: t('style.import') })] })] }) }));
+}

package/dist/styles/builtin-styles.d.ts

@@ -0,0 +1,43 @@
+import type { ScreenplayStyleDefinition } from './types.js';
+/**
+ * The app's long-standing default look, extracted from the values that were
+ * hardcoded across screenplay.css / docx-exporter.ts / workflow-reports.ts
+ * before those three were unified onto this shared definition. Where the
+ * three disagreed (they had drifted — see the multi-style implementation
+ * plan), the live editor's CSS is treated as canonical for font-size/color/
+ * margin-%, so the editor's appearance is unchanged; DOCX/PDF absorb the
+ * (small, confirmed) corrections needed to match it.
+ */
+export declare const CLASSIC_STYLE: ScreenplayStyleDefinition;
+/**
+ * A second built-in style with a genuinely different look — monospace,
+ * monochrome (no `color` on any element, exercising the fallback-to-black
+ * path), industry-standard flush-left margins — to prove the architecture
+ * isn't secretly hardcoded to CLASSIC_STYLE's shape.
+ */
+export declare const INDUSTRY_COURIER_STYLE: ScreenplayStyleDefinition;
+/**
+ * Modeled on a real Tamil feature screenplay PDF (betterfountain/Fountain export):
+ * bold scene headings, underlined (not bold) character cues, fully monochrome,
+ * flush-left action/scene headings, A4 with 1in margins all around.
+ * Measurements (font sizes, indents as % of content width) were taken
+ * directly from the PDF's text positions; elements the reference document
+ * doesn't print at all (section/note/comment — Fountain strips these from
+ * output) are extrapolated to match its scale rather than measured.
+ *
+ * The reference PDF actually used Vijaya, a proprietary Microsoft font — not
+ * bundled here (unlike Noto, it can't legally ship in the repo, and depending
+ * on the reader's OS/Word already having it installed is a worse default than
+ * a font that just works). Noto Serif is the deliberate second choice: not a
+ * perfect visual match, but it already has a variant for every script Noto
+ * Sans does (so this style isn't just "Tamil-only" the way a Vijaya-based one
+ * would be) and ships under the OFL, so it's self-hosted for real instead of
+ * hoped-for. Tamil specifically renders in Noto Serif Tamil's *italic* face by
+ * default (`italicScripts`, forced even on bold scene headings/sections) since
+ * that slant reads closer to Vijaya than the upright serif does — every other
+ * script stays upright serif, `italicScripts` only lists 'ta'.
+ */
+export declare const TRADITIONAL_STYLE: ScreenplayStyleDefinition;
+export declare const BUILTIN_STYLES: ScreenplayStyleDefinition[];
+export declare function getBuiltinStyle(id: string): ScreenplayStyleDefinition | undefined;
+export declare function isBuiltinStyleId(id: string): boolean;

package/dist/styles/builtin-styles.js

@@ -0,0 +1,131 @@
+import { DEFAULT_STYLE_ID } from './types.js';
+/**
+ * The app's long-standing default look, extracted from the values that were
+ * hardcoded across screenplay.css / docx-exporter.ts / workflow-reports.ts
+ * before those three were unified onto this shared definition. Where the
+ * three disagreed (they had drifted — see the multi-style implementation
+ * plan), the live editor's CSS is treated as canonical for font-size/color/
+ * margin-%, so the editor's appearance is unchanged; DOCX/PDF absorb the
+ * (small, confirmed) corrections needed to match it.
+ */
+export const CLASSIC_STYLE = {
+    id: 'classic',
+    name: 'Classic',
+    description: 'The original Sutrata look — teal scene headings, rust character cues.',
+    fontFamily: 'Noto Sans',
+    page: { marginTopIn: 1, marginBottomIn: 1, marginLeftIn: 1, marginRightIn: 1 },
+    elements: {
+        sceneHeading: { fontSizePt: 13, bold: true, color: '0A5C6A', marginLeftPct: 10, marginRightPct: 8, spaceBeforePt: 13, spaceAfterPt: 7.2 },
+        action: { fontSizePt: 12, marginLeftPct: 10, marginRightPct: 8, spaceBeforePt: 6, spaceAfterPt: 7.2 },
+        character: { fontSizePt: 13, bold: true, color: '9C4221', marginLeftPct: 17, spaceBeforePt: 6.5, spaceAfterPt: 0 },
+        parenthetical: { fontSizePt: 13, marginLeftPct: 17, marginRightPct: 20, spaceAfterPt: 0 },
+        dialogue: { fontSizePt: 12, marginLeftPct: 17, marginRightPct: 17, spaceAfterPt: 7.2 },
+        transition: { fontSizePt: 13, align: 'right', marginRightPct: 8, spaceBeforePt: 6.5, spaceAfterPt: 7.2 },
+        centered: { fontSizePt: 13, align: 'center', spaceBeforePt: 6.5, spaceAfterPt: 7.2 },
+        lyrics: { fontSizePt: 13, italic: true, marginLeftPct: 10, marginRightPct: 8, spaceAfterPt: 3.6 },
+        section: { fontSizePt: 14, bold: true, color: '6F6F6F', marginLeftPct: 10, spaceBeforePt: 21, spaceAfterPt: 7.2 },
+        note: { fontSizePt: 10, color: '7A6000', marginLeftPct: 10, marginRightPct: 8, spaceAfterPt: 3.6 },
+        comment: { fontSizePt: 10, color: 'AAAAAA', italic: true, marginLeftPct: 10, spaceAfterPt: 3.6 },
+        title: { fontSizePt: 24, bold: true, color: '0A5C6A', align: 'center', spaceAfterPt: 14.4 },
+        author: { fontSizePt: 16, align: 'center', spaceAfterPt: 7.2 },
+        logline: { fontSizePt: 12, italic: true, color: '555555', align: 'center', spaceAfterPt: 7.2 },
+    },
+};
+/**
+ * A second built-in style with a genuinely different look — monospace,
+ * monochrome (no `color` on any element, exercising the fallback-to-black
+ * path), industry-standard flush-left margins — to prove the architecture
+ * isn't secretly hardcoded to CLASSIC_STYLE's shape.
+ */
+export const INDUSTRY_COURIER_STYLE = {
+    id: 'industry-courier',
+    name: 'Industry Courier',
+    description: 'Monospace, monochrome, flush-left margins — the classic spec-script look.',
+    fontFamily: 'Courier Prime',
+    page: { marginTopIn: 1, marginBottomIn: 1, marginLeftIn: 1.5, marginRightIn: 1 },
+    elements: {
+        sceneHeading: { fontSizePt: 12, bold: true, spaceBeforePt: 24, spaceAfterPt: 12 },
+        action: { fontSizePt: 12, spaceBeforePt: 12, spaceAfterPt: 12 },
+        character: { fontSizePt: 12, bold: true, marginLeftPct: 30, spaceBeforePt: 12, spaceAfterPt: 0 },
+        parenthetical: { fontSizePt: 12, marginLeftPct: 26, marginRightPct: 15, spaceAfterPt: 0 },
+        dialogue: { fontSizePt: 12, marginLeftPct: 20, marginRightPct: 15, spaceAfterPt: 12 },
+        transition: { fontSizePt: 12, align: 'right', spaceBeforePt: 12, spaceAfterPt: 12 },
+        centered: { fontSizePt: 12, align: 'center', spaceBeforePt: 12, spaceAfterPt: 12 },
+        lyrics: { fontSizePt: 12, italic: true, spaceAfterPt: 6 },
+        section: { fontSizePt: 12, bold: true, spaceBeforePt: 24, spaceAfterPt: 12 },
+        note: { fontSizePt: 10, spaceAfterPt: 6 },
+        comment: { fontSizePt: 10, italic: true, spaceAfterPt: 6 },
+        title: { fontSizePt: 24, bold: true, align: 'center', spaceAfterPt: 14.4 },
+        author: { fontSizePt: 16, align: 'center', spaceAfterPt: 7.2 },
+        logline: { fontSizePt: 12, italic: true, align: 'center', spaceAfterPt: 7.2 },
+    },
+};
+/** Every Indic script Sutrata already self-hosts Noto Sans for, pointed at its Noto
+ *  Serif equivalent instead (all bundled in shell/fonts/fonts.css the same way as Noto
+ *  Sans — see fonts-serif-block.css generation notes in that file's history). Reused by
+ *  TRADITIONAL_STYLE's `complexScriptFontOverrides`: Noto Serif was chosen over the
+ *  originally-considered Vijaya specifically because it already covers every script
+ *  Noto Sans does and carries an OFL license, so — unlike Vijaya — it can actually ship
+ *  in the repo instead of depending on the reader's OS/Word already having it installed. */
+const NOTO_SERIF_COMPLEX_SCRIPT_FONTS = {
+    hi: 'Noto Serif Devanagari', ta: 'Noto Serif Tamil', te: 'Noto Serif Telugu',
+    kn: 'Noto Serif Kannada', ml: 'Noto Serif Malayalam', bn: 'Noto Serif Bengali',
+    gu: 'Noto Serif Gujarati', pa: 'Noto Serif Gurmukhi', or: 'Noto Serif Oriya',
+    si: 'Noto Serif Sinhala',
+};
+/**
+ * Modeled on a real Tamil feature screenplay PDF (betterfountain/Fountain export):
+ * bold scene headings, underlined (not bold) character cues, fully monochrome,
+ * flush-left action/scene headings, A4 with 1in margins all around.
+ * Measurements (font sizes, indents as % of content width) were taken
+ * directly from the PDF's text positions; elements the reference document
+ * doesn't print at all (section/note/comment — Fountain strips these from
+ * output) are extrapolated to match its scale rather than measured.
+ *
+ * The reference PDF actually used Vijaya, a proprietary Microsoft font — not
+ * bundled here (unlike Noto, it can't legally ship in the repo, and depending
+ * on the reader's OS/Word already having it installed is a worse default than
+ * a font that just works). Noto Serif is the deliberate second choice: not a
+ * perfect visual match, but it already has a variant for every script Noto
+ * Sans does (so this style isn't just "Tamil-only" the way a Vijaya-based one
+ * would be) and ships under the OFL, so it's self-hosted for real instead of
+ * hoped-for. Tamil specifically renders in Noto Serif Tamil's *italic* face by
+ * default (`italicScripts`, forced even on bold scene headings/sections) since
+ * that slant reads closer to Vijaya than the upright serif does — every other
+ * script stays upright serif, `italicScripts` only lists 'ta'.
+ */
+export const TRADITIONAL_STYLE = {
+    id: 'traditional',
+    name: 'Traditional',
+    description: 'Bold serif scene headings, underlined cues, italic Tamil — modeled on a real Tamil shooting script.',
+    fontFamily: 'Noto Serif',
+    complexScriptFontOverrides: NOTO_SERIF_COMPLEX_SCRIPT_FONTS,
+    italicScripts: ['ta'],
+    // The reference PDF's cover: title / "by <author>" / logline flush top-left,
+    // date and contact down in the bottom-right corner.
+    coverLayout: 'corners',
+    page: { marginTopIn: 1, marginBottomIn: 1, marginLeftIn: 1, marginRightIn: 1 },
+    elements: {
+        sceneHeading: { fontSizePt: 12, bold: true, spaceBeforePt: 17, spaceAfterPt: 9 },
+        action: { fontSizePt: 10, spaceBeforePt: 8, spaceAfterPt: 9 },
+        character: { fontSizePt: 10, underline: true, marginLeftPct: 32, spaceBeforePt: 8, spaceAfterPt: 0 },
+        parenthetical: { fontSizePt: 10, marginLeftPct: 32, marginRightPct: 20, spaceAfterPt: 0 },
+        dialogue: { fontSizePt: 10, marginLeftPct: 24, marginRightPct: 17, spaceAfterPt: 9 },
+        transition: { fontSizePt: 10, align: 'right', spaceBeforePt: 9, spaceAfterPt: 9 },
+        centered: { fontSizePt: 10, align: 'center', italic: true, spaceBeforePt: 9, spaceAfterPt: 9 },
+        lyrics: { fontSizePt: 10, italic: true, marginLeftPct: 6, spaceAfterPt: 5 },
+        section: { fontSizePt: 12, bold: true, spaceBeforePt: 27, spaceAfterPt: 9 },
+        note: { fontSizePt: 10, color: '666666', spaceAfterPt: 5 },
+        comment: { fontSizePt: 13, italic: true, spaceAfterPt: 5 },
+        title: { fontSizePt: 32, bold: true, align: 'left', spaceAfterPt: 16 },
+        author: { fontSizePt: 16, align: 'left', spaceAfterPt: 8 },
+        logline: { fontSizePt: 10, align: 'left', spaceAfterPt: 8 },
+    },
+};
+export const BUILTIN_STYLES = [CLASSIC_STYLE, INDUSTRY_COURIER_STYLE, TRADITIONAL_STYLE];
+export function getBuiltinStyle(id) {
+    return BUILTIN_STYLES.find(s => s.id === id);
+}
+export function isBuiltinStyleId(id) {
+    return id === DEFAULT_STYLE_ID || BUILTIN_STYLES.some(s => s.id === id);
+}

package/dist/styles/css-adapter.d.ts

@@ -0,0 +1,32 @@
+import type { ScreenplayStyleDefinition } from './types.js';
+/**
+ * Converts a style into the CSS custom properties screenplay.css reads via
+ * `var(--cs-<element>-<prop>, <classic-fallback>)`. Applied to `.cs-editor-mount`
+ * so the live editor picks up whichever style the current document (or an
+ * explicit override) resolves to — works identically for built-in and
+ * user-imported styles since both are plain `ScreenplayStyleDefinition` objects
+ * by the time they reach here.
+ *
+ * Deliberately does NOT emit anything for `spaceAfterPt` — the live editor only
+ * ever expresses "space before" via margin-top; adjacent elements form their gap
+ * from the *following* element's margin-top, not a margin-bottom on the
+ * preceding one (see types.ts). `spaceAfterPt` is DOCX/print-only.
+ *
+ * A `null` entry means "no override" and must be cleared with `removeProperty`,
+ * never `setProperty(k, 'inherit')`: for a CUSTOM property, the literal value
+ * `inherit` is a CSS-wide keyword that makes the property itself inherit from
+ * *its own* parent (here, .cs-editor-mount's parent, which never defines it) —
+ * it does not store the string "inherit" for descendants to read. That breaks
+ * inheritance for every element below it, not just the unset one.
+ */
+export declare function styleToCssVars(style: ScreenplayStyleDefinition): Record<string, string | null>;
+/** Applies every var from `styleToCssVars` onto an element (the `.cs-editor-mount` ref),
+ *  clearing any that resolved to `null` so a previous style's value can't linger. Also
+ *  toggles a `.cs-force-italic-<code>` class per `style.italicScripts` — a class rather
+ *  than a CSS var because `.cs-lang-<code>` rules already exist for lyrics/comments etc.
+ *  that are legitimately italic on their own; a `font-style` var on `.cs-lang-<code>`
+ *  itself would unconditionally win the cascade and stomp that even for styles that
+ *  don't ask for forced italics (see types.ts's `italicScripts` doc for the full
+ *  reasoning). The class only ever *adds* specificity to force italic on; it's absent
+ *  entirely for scripts/styles that don't want it, so nothing is stomped either way. */
+export declare function applyStyleVars(el: HTMLElement, style: ScreenplayStyleDefinition): void;

package/dist/styles/css-adapter.js

@@ -0,0 +1,71 @@
+import { BODY_ELEMENT_KEYS, COMPLEX_SCRIPT_CODES } from './types.js';
+function kebab(key) {
+    return key.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+/**
+ * Converts a style into the CSS custom properties screenplay.css reads via
+ * `var(--cs-<element>-<prop>, <classic-fallback>)`. Applied to `.cs-editor-mount`
+ * so the live editor picks up whichever style the current document (or an
+ * explicit override) resolves to — works identically for built-in and
+ * user-imported styles since both are plain `ScreenplayStyleDefinition` objects
+ * by the time they reach here.
+ *
+ * Deliberately does NOT emit anything for `spaceAfterPt` — the live editor only
+ * ever expresses "space before" via margin-top; adjacent elements form their gap
+ * from the *following* element's margin-top, not a margin-bottom on the
+ * preceding one (see types.ts). `spaceAfterPt` is DOCX/print-only.
+ *
+ * A `null` entry means "no override" and must be cleared with `removeProperty`,
+ * never `setProperty(k, 'inherit')`: for a CUSTOM property, the literal value
+ * `inherit` is a CSS-wide keyword that makes the property itself inherit from
+ * *its own* parent (here, .cs-editor-mount's parent, which never defines it) —
+ * it does not store the string "inherit" for descendants to read. That breaks
+ * inheritance for every element below it, not just the unset one.
+ */
+export function styleToCssVars(style) {
+    const vars = {
+        '--cs-body-font-family': style.fontFamily,
+    };
+    for (const key of BODY_ELEMENT_KEYS) {
+        const el = style.elements[key];
+        const prefix = `--cs-${kebab(key)}`;
+        vars[`${prefix}-font-size`] = `${el.fontSizePt}pt`;
+        vars[`${prefix}-font-weight`] = el.bold ? 'bold' : 'normal';
+        vars[`${prefix}-font-style`] = el.italic ? 'italic' : 'normal';
+        vars[`${prefix}-text-decoration`] = el.underline ? 'underline' : 'none';
+        vars[`${prefix}-color`] = el.color ? `#${el.color}` : null;
+        vars[`${prefix}-margin-left`] = `${el.marginLeftPct ?? 0}%`;
+        vars[`${prefix}-margin-right`] = `${el.marginRightPct ?? 0}%`;
+        vars[`${prefix}-text-align`] = el.align ?? 'left';
+        vars[`${prefix}-margin-top`] = `${el.spaceBeforePt ?? 0}pt`;
+    }
+    // Per-script font override: screenplay.css's .cs-lang-<code> rules prefer this over
+    // the generic --cs-body-font-family fallback. Emit `null` for every code the style
+    // doesn't override so a previously-applied style's choice can't linger (see
+    // applyStyleVars). italicScripts is NOT emitted as a var — see applyStyleVars.
+    for (const code of COMPLEX_SCRIPT_CODES) {
+        vars[`--cs-lang-${code}-font-family`] = style.complexScriptFontOverrides?.[code] ?? null;
+    }
+    return vars;
+}
+/** Applies every var from `styleToCssVars` onto an element (the `.cs-editor-mount` ref),
+ *  clearing any that resolved to `null` so a previous style's value can't linger. Also
+ *  toggles a `.cs-force-italic-<code>` class per `style.italicScripts` — a class rather
+ *  than a CSS var because `.cs-lang-<code>` rules already exist for lyrics/comments etc.
+ *  that are legitimately italic on their own; a `font-style` var on `.cs-lang-<code>`
+ *  itself would unconditionally win the cascade and stomp that even for styles that
+ *  don't ask for forced italics (see types.ts's `italicScripts` doc for the full
+ *  reasoning). The class only ever *adds* specificity to force italic on; it's absent
+ *  entirely for scripts/styles that don't want it, so nothing is stomped either way. */
+export function applyStyleVars(el, style) {
+    const vars = styleToCssVars(style);
+    for (const [k, v] of Object.entries(vars)) {
+        if (v === null)
+            el.style.removeProperty(k);
+        else
+            el.style.setProperty(k, v);
+    }
+    for (const code of COMPLEX_SCRIPT_CODES) {
+        el.classList.toggle(`cs-force-italic-${code}`, style.italicScripts?.includes(code) ?? false);
+    }
+}

package/dist/styles/docx-adapter.d.ts

@@ -0,0 +1,7 @@
+import type { IParagraphStyleOptions } from 'docx';
+import type { ScreenplayStyleDefinition } from './types.js';
+/** Builds the `paragraphStyles` array for `new Document({ styles: { paragraphStyles } })`
+ *  from a style definition. `contentWidthTwips` is the page's printable width (page width
+ *  minus left+right margins) — percentages are resolved against it, so indentation scales
+ *  correctly with page size/margins instead of reusing one page format's fixed twips. */
+export declare function styleToDocxParagraphStyles(style: ScreenplayStyleDefinition, contentWidthTwips: number): IParagraphStyleOptions[];

package/dist/styles/docx-adapter.js

@@ -0,0 +1,84 @@
+import { AlignmentType } from 'docx';
+import { BODY_ELEMENT_KEYS, COVER_ELEMENT_KEYS } from './types.js';
+import { KEEP_WITH_NEXT_ELEMENTS, KEEP_TOGETHER_ELEMENTS } from './pagination.js';
+/** Sutra element -> stable docx paragraph style id. Fixed forever: docx-importer.ts
+ *  matches re-imported .docx files against these exact ids, regardless of appearance. */
+const DOCX_STYLE_IDS = {
+    sceneHeading: 'CineSceneHeading',
+    action: 'CineAction',
+    character: 'CineCharacter',
+    parenthetical: 'CineParenthetical',
+    dialogue: 'CineDialogue',
+    transition: 'CineTransition',
+    centered: 'CineCentered',
+    lyrics: 'CineLyrics',
+    section: 'CineSection',
+    note: 'CineNote',
+    comment: 'CineComment',
+};
+/** Cover-page element -> docx paragraph style id, referenced by docx-exporter.ts's
+ *  title page. These must be emitted alongside the body styles: a paragraph naming a
+ *  style the document doesn't define silently falls back to Word's Normal style
+ *  (left-aligned 11pt black), which is exactly how the title page used to render. */
+const DOCX_COVER_STYLE_IDS = {
+    title: 'CineTitle',
+    author: 'CineAuthor',
+    logline: 'CineLogline',
+};
+const ALIGN_MAP = {
+    left: AlignmentType.LEFT,
+    center: AlignmentType.CENTER,
+    right: AlignmentType.RIGHT,
+};
+function pctToTwips(pct, contentWidthTwips) {
+    if (pct === undefined)
+        return undefined;
+    return Math.round((pct / 100) * contentWidthTwips);
+}
+/** `pagination` carries the screenplay page-break rules for body elements (see
+ *  pagination.ts); cover-page elements pass none — a cover page is one page by
+ *  construction. */
+function elementToDocxStyle(id, el, fontFamily, contentWidthTwips, pagination = {}) {
+    const left = pctToTwips(el.marginLeftPct, contentWidthTwips);
+    const right = pctToTwips(el.marginRightPct, contentWidthTwips);
+    const paragraph = {
+        alignment: el.align ? ALIGN_MAP[el.align] : undefined,
+        indent: (left !== undefined || right !== undefined) ? { left, right } : undefined,
+        spacing: {
+            before: el.spaceBeforePt !== undefined ? Math.round(el.spaceBeforePt * 20) : undefined,
+            after: el.spaceAfterPt !== undefined ? Math.round(el.spaceAfterPt * 20) : undefined,
+        },
+        keepNext: pagination.keepNext,
+        keepLines: pagination.keepLines,
+        // Stated rather than left to Word's default: action/dialogue stay breakable
+        // (no keepLines), so widow control is what stops a page break from stranding a
+        // single line of them on either side.
+        widowControl: true,
+    };
+    return {
+        id,
+        name: id,
+        run: {
+            font: fontFamily,
+            size: Math.round(el.fontSizePt * 2),
+            bold: el.bold || undefined,
+            italics: el.italic || undefined,
+            underline: el.underline ? {} : undefined,
+            color: el.color,
+        },
+        paragraph,
+    };
+}
+/** Builds the `paragraphStyles` array for `new Document({ styles: { paragraphStyles } })`
+ *  from a style definition. `contentWidthTwips` is the page's printable width (page width
+ *  minus left+right margins) — percentages are resolved against it, so indentation scales
+ *  correctly with page size/margins instead of reusing one page format's fixed twips. */
+export function styleToDocxParagraphStyles(style, contentWidthTwips) {
+    return [
+        ...BODY_ELEMENT_KEYS.map(key => elementToDocxStyle(DOCX_STYLE_IDS[key], style.elements[key], style.fontFamily, contentWidthTwips, {
+            keepNext: KEEP_WITH_NEXT_ELEMENTS.includes(key) || undefined,
+            keepLines: KEEP_TOGETHER_ELEMENTS.includes(key) || undefined,
+        })),
+        ...COVER_ELEMENT_KEYS.map(key => elementToDocxStyle(DOCX_COVER_STYLE_IDS[key], style.elements[key], style.fontFamily, contentWidthTwips)),
+    ];
+}

package/dist/styles/embed-fonts.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Embeds self-hosted @font-face rules (from shell/fonts/fonts.css, already loaded into
+ * the running app's own document) as data: URIs, for splicing into the PDF/print-preview
+ * HTML — a separate, standalone document that never sees the app's own stylesheets.
+ *
+ * Introspects the CSSOM (`document.styleSheets`) rather than hardcoding filenames/unicode
+ * ranges per family: whatever fonts.css declares for a family is exactly what gets embedded,
+ * so this can never drift out of sync with the actual font files bundled in public/fonts.
+ *
+ * Why embed at all instead of just linking `/fonts/...` from the print HTML: the native
+ * desktop PDF export writes the HTML to a temp file and loads it via a `file://` URL in a
+ * hidden webview, which cannot resolve a root-relative `/fonts/...` path back to the running
+ * app's own server/origin. A data: URI works regardless of the HTML's own location.
+ */
+/** Builds `@font-face` CSS text embedding every self-hosted rule for the given family
+ *  names, as data: URIs. Families with no matching rules (e.g. web-safe fonts that were
+ *  never in fonts.css) are silently skipped — the Google Fonts `<link>`/generic fallback
+ *  stack in print-adapter.ts's font stack still applies. Fetch failures for an individual
+ *  rule are likewise skipped rather than failing the whole export. */
+export declare function embedFontFacesFor(familyNames: string[]): Promise<string>;

package/dist/styles/embed-fonts.js

@@ -0,0 +1,81 @@
+/**
+ * Embeds self-hosted @font-face rules (from shell/fonts/fonts.css, already loaded into
+ * the running app's own document) as data: URIs, for splicing into the PDF/print-preview
+ * HTML — a separate, standalone document that never sees the app's own stylesheets.
+ *
+ * Introspects the CSSOM (`document.styleSheets`) rather than hardcoding filenames/unicode
+ * ranges per family: whatever fonts.css declares for a family is exactly what gets embedded,
+ * so this can never drift out of sync with the actual font files bundled in public/fonts.
+ *
+ * Why embed at all instead of just linking `/fonts/...` from the print HTML: the native
+ * desktop PDF export writes the HTML to a temp file and loads it via a `file://` URL in a
+ * hidden webview, which cannot resolve a root-relative `/fonts/...` path back to the running
+ * app's own server/origin. A data: URI works regardless of the HTML's own location.
+ */
+function urlToDataUri(url) {
+    return fetch(url)
+        .then(res => {
+        if (!res.ok)
+            throw new Error(`Failed to fetch font: ${url}`);
+        return res.blob();
+    })
+        .then(blob => new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(reader.error ?? new Error('Failed to read font file'));
+        reader.readAsDataURL(blob);
+    }));
+}
+function findFontFaceRules(familyName) {
+    const rules = [];
+    for (const sheet of Array.from(document.styleSheets)) {
+        let cssRules;
+        try {
+            cssRules = sheet.cssRules;
+        }
+        catch {
+            continue; // cross-origin stylesheets throw on access; nothing we bundle is cross-origin
+        }
+        for (const rule of Array.from(cssRules)) {
+            if (rule instanceof CSSFontFaceRule) {
+                const family = rule.style.getPropertyValue('font-family').replace(/^['"]|['"]$/g, '');
+                if (family === familyName)
+                    rules.push(rule);
+            }
+        }
+    }
+    return rules;
+}
+/** Builds `@font-face` CSS text embedding every self-hosted rule for the given family
+ *  names, as data: URIs. Families with no matching rules (e.g. web-safe fonts that were
+ *  never in fonts.css) are silently skipped — the Google Fonts `<link>`/generic fallback
+ *  stack in print-adapter.ts's font stack still applies. Fetch failures for an individual
+ *  rule are likewise skipped rather than failing the whole export. */
+export async function embedFontFacesFor(familyNames) {
+    const blocks = [];
+    for (const family of familyNames) {
+        for (const rule of findFontFaceRules(family)) {
+            const srcRaw = rule.style.getPropertyValue('src');
+            const match = /url\(["']?([^"')]+)["']?\)/.exec(srcRaw);
+            if (!match)
+                continue;
+            try {
+                const dataUri = await urlToDataUri(match[1]);
+                const weight = rule.style.getPropertyValue('font-weight') || '400';
+                const style = rule.style.getPropertyValue('font-style') || 'normal';
+                const unicodeRange = rule.style.getPropertyValue('unicode-range');
+                blocks.push('@font-face {\n' +
+                    `  font-family: '${family}';\n` +
+                    `  font-weight: ${weight};\n` +
+                    `  font-style: ${style};\n` +
+                    `  src: url(${dataUri}) format('woff2');\n` +
+                    (unicodeRange ? `  unicode-range: ${unicodeRange};\n` : '') +
+                    '}');
+            }
+            catch {
+                // Skip; the Google Fonts link / generic fallback stack still covers this family.
+            }
+        }
+    }
+    return blocks.join('\n');
+}

package/dist/styles/pagination.d.ts

@@ -0,0 +1,19 @@
+import type { BodyElementKey } from './types.js';
+/** Screenplay pagination rules — format conventions, not per-style visual choices, so
+ *  they live here rather than in ScreenplayStyleDefinition: no style (built-in or
+ *  user-imported) gets to end a page on a character cue. Consumed by both export
+ *  paths, which express the same rule differently: DOCX via `keepNext`/`keepLines`
+ *  paragraph properties (docx-adapter.ts), PDF/print via `break-after`/`break-inside`
+ *  (print-adapter.ts). The live editor has no pagination, so it ignores these. */
+/** Elements that must not be the last thing on a page — a scene heading or character
+ *  cue stranded at the bottom with its action/dialogue overleaf is the classic
+ *  screenplay pagination error. A parenthetical is included for the same reason: it
+ *  belongs to the dialogue line that follows it. */
+export declare const KEEP_WITH_NEXT_ELEMENTS: readonly BodyElementKey[];
+/** Elements short enough that splitting them across a page boundary is always wrong.
+ *  Deliberately excludes action/dialogue/lyrics/note — those can legitimately run
+ *  longer than a page, so they get orphan/widow control instead of an unbreakable box. */
+export declare const KEEP_TOGETHER_ELEMENTS: readonly BodyElementKey[];
+/** Minimum lines of a breakable element left on either side of a page boundary. Two is
+ *  the standard screenplay/typography minimum (a single stranded line reads as an error). */
+export declare const MIN_ORPHAN_WIDOW_LINES = 2;