@sutrata/editor 0.1.0

package/src/spellcheck/dictionaries.ts

@@ -0,0 +1,21 @@
+export interface DictionaryManifest {
+  aff: string  // path relative to public/
+  dic: string  // path relative to public/
+}
+
+/**
+ * Dictionary manifest: maps BCP-47 language code → asset paths under public/dict/.
+ * The actual .dic/.aff files are not committed; see public/dict/README.md for acquisition.
+ */
+export const DICTIONARIES: Record<string, DictionaryManifest> = {
+  'en': { aff: '/dict/en_US.aff', dic: '/dict/en_US.dic' },
+  'hi': { aff: '/dict/hi_IN.aff', dic: '/dict/hi_IN.dic' },
+  'ta': { aff: '/dict/ta_IN.aff', dic: '/dict/ta_IN.dic' },
+  'te': { aff: '/dict/te_IN.aff', dic: '/dict/te_IN.dic' },
+  'kn': { aff: '/dict/kn_IN.aff', dic: '/dict/kn_IN.dic' },
+  'ml': { aff: '/dict/ml_IN.aff', dic: '/dict/ml_IN.dic' },
+  'bn': { aff: '/dict/bn_IN.aff', dic: '/dict/bn_IN.dic' },
+  'gu': { aff: '/dict/gu_IN.aff', dic: '/dict/gu_IN.dic' },
+  'pa': { aff: '/dict/pa_IN.aff', dic: '/dict/pa_IN.dic' },
+  'or': { aff: '/dict/or_IN.aff', dic: '/dict/or_IN.dic' },
+}

package/src/spellcheck/hunspell.ts

@@ -0,0 +1,110 @@
+import { DICTIONARIES } from './dictionaries'
+
+export interface SpellChecker {
+  check(word: string): boolean
+  suggest(word: string): string[]
+}
+
+/**
+ * In-memory dictionary: Set-based word lookup.
+ * Production: load from .dic file; tests: use fixture words.
+ */
+class SimpleSpellChecker implements SpellChecker {
+  private words: Set<string>
+  private customWords: Set<string>
+
+  constructor(words: string[]) {
+    this.words = new Set(words.map(w => w.toLowerCase().trim()).filter(Boolean))
+    this.customWords = new Set()
+  }
+
+  check(word: string): boolean {
+    const lower = word.toLowerCase()
+    return this.words.has(lower) || this.customWords.has(lower)
+  }
+
+  suggest(_word: string): string[] {
+    // Minimal: return empty (full Hunspell suggestions require .aff parsing)
+    return []
+  }
+
+  addCustomWord(word: string) {
+    this.customWords.add(word.toLowerCase())
+  }
+}
+
+// Cache: lang → checker
+const checkerCache = new Map<string, SpellChecker>()
+
+// Custom words per-project (in-memory; production uses IndexedDB)
+const customWords = new Map<string, Set<string>>()
+
+/**
+ * Load a dictionary for the given language.
+ * In production: fetches .dic file, parses word list.
+ * In test/jsdom: fetch will fail gracefully, returning an empty checker.
+ */
+export async function loadDictionary(lang: string): Promise<SpellChecker> {
+  if (checkerCache.has(lang)) {
+    return checkerCache.get(lang)!
+  }
+
+  const manifest = DICTIONARIES[lang]
+  if (!manifest) {
+    // Fallback: empty checker for unknown language codes
+    const checker = new SimpleSpellChecker([])
+    checkerCache.set(lang, checker)
+    return checker
+  }
+
+  try {
+    // Fetch .dic file (word list, one per line)
+    const response = await fetch(manifest.dic)
+    if (!response.ok) throw new Error(`Failed to load dictionary: ${manifest.dic}`)
+    const text = await response.text()
+    const words = text.split('\n').filter(Boolean)
+    const checker = new SimpleSpellChecker(words)
+
+    // Apply any cached custom words
+    const custom = customWords.get(lang)
+    if (custom) {
+      for (const w of custom) checker.addCustomWord(w)
+    }
+
+    checkerCache.set(lang, checker)
+    return checker
+  } catch {
+    // Network unavailable (expected in dev/CI without dict files)
+    const checker = new SimpleSpellChecker([])
+    checkerCache.set(lang, checker)
+    return checker
+  }
+}
+
+/**
+ * Add a word to the custom dictionary for a language.
+ * Persists in-memory; production would write to IndexedDB.
+ */
+export function addToCustomDictionary(lang: string, word: string) {
+  if (!customWords.has(lang)) customWords.set(lang, new Set())
+  customWords.get(lang)!.add(word.toLowerCase())
+
+  // Update cached checker if loaded
+  const checker = checkerCache.get(lang) as SimpleSpellChecker | undefined
+  if (checker) checker.addCustomWord(word)
+}
+
+/**
+ * Create a spell checker from a word list (for testing).
+ */
+export function createCheckerFromWords(words: string[]): SpellChecker {
+  return new SimpleSpellChecker(words)
+}
+
+/**
+ * Clear cached checkers (for testing).
+ */
+export function clearCheckerCache() {
+  checkerCache.clear()
+  customWords.clear()
+}

package/src/spellcheck/spellcheck-plugin.ts

@@ -0,0 +1,83 @@
+import { Plugin, EditorState } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { loadDictionary, SpellChecker } from './hunspell'
+
+// Module-level state
+let currentChecker: SpellChecker | null = null
+let currentLang = 'en'
+
+export function setSpellcheckLanguage(lang: string) {
+  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: string): Array<{ word: string; start: number; end: number }> {
+  const results: Array<{ word: string; start: number; end: number }> = []
+  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: EditorState, checker: SpellChecker): DecorationSet {
+  const decorations: Decoration[] = []
+
+  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/src/styles/StyleDialog.tsx

@@ -0,0 +1,148 @@
+import React, { 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'
+import type { ScreenplayStyleDefinition } from './types'
+
+interface Props {
+  onClose: () => void
+}
+
+export function StyleDialog({ onClose }: Props) {
+  const { resolvedStyle, customStyles, setDocumentStyle, reloadCustomStyles } = useDocument()
+  const { t } = useTranslation()
+  const storageAdapter = useStorageAdapter()
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    dialogRef.current?.focus()
+  }, [])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') onClose()
+  }
+
+  async function handleImport() {
+    setError(null)
+    const picked = await storageAdapter.openStyleJson()
+    if (!picked) return
+
+    let data: unknown
+    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: string) {
+    if (!confirm(t('style.deleteConfirm'))) return
+    await storageAdapter.deleteStyle(id)
+    await reloadCustomStyles()
+  }
+
+  function renderRow(style: ScreenplayStyleDefinition, deletable: boolean) {
+    const active = style.id === resolvedStyle.id
+    const swatchColor = style.elements.sceneHeading.color ? `#${style.elements.sceneHeading.color}` : '#999'
+    return (
+      <div
+        key={style.id}
+        className="cs-settings-row"
+        style={{ alignItems: 'flex-start', cursor: 'pointer', padding: '6px 0' }}
+        onClick={() => setDocumentStyle(style.id)}
+      >
+        <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
+          <span style={{ display: 'inline-block', width: '10px', height: '10px', borderRadius: '50%', background: swatchColor, flexShrink: 0, marginTop: '4px' }} />
+          <div>
+            <div className="cs-settings-label" style={{ fontWeight: active ? 600 : 400 }}>
+              {style.name}
+              {active && <span style={{ color: '#1976d2', fontWeight: 600 }}> — {t('style.current')}</span>}
+            </div>
+            {style.description && (
+              <div style={{ fontSize: '11px', color: '#888', marginTop: '2px' }}>{style.description}</div>
+            )}
+          </div>
+        </div>
+        {deletable && (
+          <button
+            className="cs-panel-close"
+            aria-label={t('style.delete')}
+            onClick={e => { e.stopPropagation(); void handleDelete(style.id) }}
+          >
+            ×
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  const builtins = allStyles([]).filter(s => isBuiltinStyleId(s.id))
+
+  return (
+    <div className="cs-dialog-overlay" onClick={onClose}>
+      <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}
+      >
+        <div className="cs-dialog-header">
+          <span className="cs-dialog-title">{t('style.title')}</span>
+          <button className="cs-fr-close" aria-label={t('style.close')} onClick={onClose}>×</button>
+        </div>
+
+        <div className="cs-settings-body">
+          {error && (
+            <div className="cs-export-warnings" style={{ marginTop: 0 }}>
+              <div className="cs-export-warn-item">{error}</div>
+            </div>
+          )}
+
+          <div className="cs-settings-section-label">{t('style.builtIn')}</div>
+          {builtins.map(s => renderRow(s, false))}
+
+          {customStyles.length > 0 && (
+            <>
+              <div className="cs-settings-section-label" style={{ marginTop: '8px' }}>{t('style.custom')}</div>
+              {customStyles.map(s => renderRow(s, true))}
+            </>
+          )}
+
+          <button
+            className="cs-export-btn-cancel"
+            style={{ marginTop: '8px', alignSelf: 'flex-start' }}
+            onClick={() => { void handleImport() }}
+          >
+            {t('style.import')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/styles/builtin-styles.ts

@@ -0,0 +1,139 @@
+import type { ScreenplayStyleDefinition } from './types.js'
+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: ScreenplayStyleDefinition = {
+  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: ScreenplayStyleDefinition = {
+  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: Record<string, string> = {
+  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: ScreenplayStyleDefinition = {
+  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: ScreenplayStyleDefinition[] = [CLASSIC_STYLE, INDUSTRY_COURIER_STYLE, TRADITIONAL_STYLE]
+
+export function getBuiltinStyle(id: string): ScreenplayStyleDefinition | undefined {
+  return BUILTIN_STYLES.find(s => s.id === id)
+}
+
+export function isBuiltinStyleId(id: string): boolean {
+  return id === DEFAULT_STYLE_ID || BUILTIN_STYLES.some(s => s.id === id)
+}

package/src/styles/css-adapter.ts

@@ -0,0 +1,76 @@
+import { BODY_ELEMENT_KEYS, COMPLEX_SCRIPT_CODES } from './types.js'
+import type { ScreenplayStyleDefinition, ElementStyle } from './types.js'
+
+function kebab(key: string): string {
+  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: ScreenplayStyleDefinition): Record<string, string | null> {
+  const vars: Record<string, string | null> = {
+    '--cs-body-font-family': style.fontFamily,
+  }
+
+  for (const key of BODY_ELEMENT_KEYS) {
+    const el: ElementStyle = 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: HTMLElement, style: ScreenplayStyleDefinition): void {
+  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)
+  }
+}