@sutrata/editor 0.1.1 → 0.1.2

package/src/spellcheck/dictionaries.ts

@@ -1,21 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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)
-  }
-}