@sutrata/editor 0.1.1 → 0.2.0

package/src/styles/docx-adapter.ts

@@ -1,109 +0,0 @@
-import { AlignmentType } from 'docx'
-import type { IParagraphStyleOptions } from 'docx'
-import { BODY_ELEMENT_KEYS, COVER_ELEMENT_KEYS } from './types.js'
-import { KEEP_WITH_NEXT_ELEMENTS, KEEP_TOGETHER_ELEMENTS } from './pagination.js'
-import type { ScreenplayStyleDefinition, ElementStyle, BodyElementKey, CoverElementKey } from './types.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: Record<BodyElementKey, string> = {
-  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: Record<CoverElementKey, string> = {
-  title: 'CineTitle',
-  author: 'CineAuthor',
-  logline: 'CineLogline',
-}
-
-const ALIGN_MAP = {
-  left: AlignmentType.LEFT,
-  center: AlignmentType.CENTER,
-  right: AlignmentType.RIGHT,
-} as const
-
-function pctToTwips(pct: number | undefined, contentWidthTwips: number): number | undefined {
-  if (pct === undefined) return undefined
-  return Math.round((pct / 100) * contentWidthTwips)
-}
-
-/** docx's *style-level* paragraph options type omits `widowControl`, but the paragraph-
- *  property serializer it shares with `Paragraph` does emit it (verified: `<w:widowControl/>`
- *  lands in the generated word/styles.xml). Widen the type rather than drop the property. */
-type StyleParagraphOptions = NonNullable<IParagraphStyleOptions['paragraph']> & { widowControl?: boolean }
-
-/** `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: string,
-  el: ElementStyle,
-  fontFamily: string,
-  contentWidthTwips: number,
-  pagination: { keepNext?: boolean; keepLines?: boolean } = {},
-): IParagraphStyleOptions {
-  const left = pctToTwips(el.marginLeftPct, contentWidthTwips)
-  const right = pctToTwips(el.marginRightPct, contentWidthTwips)
-  const paragraph: StyleParagraphOptions = {
-    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: ScreenplayStyleDefinition,
-  contentWidthTwips: number,
-): IParagraphStyleOptions[] {
-  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/src/styles/embed-fonts.ts

@@ -1,81 +0,0 @@
-/**
- * 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: string): Promise<string> {
-  return fetch(url)
-    .then(res => {
-      if (!res.ok) throw new Error(`Failed to fetch font: ${url}`)
-      return res.blob()
-    })
-    .then(blob => new Promise<string>((resolve, reject) => {
-      const reader = new FileReader()
-      reader.onload = () => resolve(reader.result as string)
-      reader.onerror = () => reject(reader.error ?? new Error('Failed to read font file'))
-      reader.readAsDataURL(blob)
-    }))
-}
-
-function findFontFaceRules(familyName: string): CSSFontFaceRule[] {
-  const rules: CSSFontFaceRule[] = []
-  for (const sheet of Array.from(document.styleSheets)) {
-    let cssRules: CSSRuleList
-    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: string[]): Promise<string> {
-  const blocks: string[] = []
-  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/src/styles/pagination.ts

@@ -1,27 +0,0 @@
-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 const KEEP_WITH_NEXT_ELEMENTS: readonly BodyElementKey[] = [
-  'sceneHeading', 'character', 'parenthetical', 'section',
-]
-
-/** 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 const KEEP_TOGETHER_ELEMENTS: readonly BodyElementKey[] = [
-  'sceneHeading', 'character', 'parenthetical', 'transition', 'section',
-]
-
-/** 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 const MIN_ORPHAN_WIDOW_LINES = 2

package/src/styles/print-adapter.ts

@@ -1,288 +0,0 @@
-import type { ScreenplayStyleDefinition, ElementStyle } from './types.js'
-import { MIN_ORPHAN_WIDOW_LINES } from './pagination.js'
-
-function color(el: ElementStyle): string {
-  return el.color ? `#${el.color}` : 'black'
-}
-
-function fontProps(el: ElementStyle): string {
-  const lines = [`font-size: ${el.fontSizePt}pt;`, `color: ${color(el)};`]
-  if (el.bold) lines.push('font-weight: bold;')
-  if (el.italic) lines.push('font-style: italic;')
-  if (el.underline) lines.push('text-decoration: underline;')
-  if (el.align) lines.push(`text-align: ${el.align};`)
-  return lines.join('\n            ')
-}
-
-/** Screenplay page-break rules for PDF/print — the CSS half of pagination.ts (DOCX gets
- *  the same rules as keepNext/keepLines). `page-break-*` is emitted alongside the modern
- *  `break-*` because print engines are uneven about which spelling they honor. */
-const KEEP_WITH_NEXT = `
-            break-after: avoid;
-            page-break-after: avoid;
-            break-inside: avoid;
-            page-break-inside: avoid;`
-const KEEP_TOGETHER = `
-            break-inside: avoid;
-            page-break-inside: avoid;`
-/** For elements that may legitimately run longer than a page: don't forbid the break,
- *  just refuse to strand one line on either side of it. */
-const ORPHAN_WIDOW = `
-            orphans: ${MIN_ORPHAN_WIDOW_LINES};
-            widows: ${MIN_ORPHAN_WIDOW_LINES};`
-
-function marginProps(el: ElementStyle): string {
-  const lines: string[] = []
-  if (el.marginLeftPct !== undefined) lines.push(`margin-left: ${el.marginLeftPct}%;`)
-  if (el.marginRightPct !== undefined) lines.push(`margin-right: ${el.marginRightPct}%;`)
-  lines.push(`margin-top: ${el.spaceBeforePt ?? 0}pt;`)
-  lines.push(`margin-bottom: ${el.spaceAfterPt ?? 0}pt;`)
-  return lines.join('\n            ')
-}
-
-/** Builds the screenplay-specific portion of the PDF/print-preview `<style>` block
- *  (packages/app/src/file/workflow-reports.ts's buildScreenplayPrintHtml) from a style
- *  definition. UI chrome (print button, page-break rule, dual-dialogue column layout)
- *  stays hardcoded in workflow-reports.ts — only the parametrized visual properties live here. */
-export function styleToPrintCss(style: ScreenplayStyleDefinition, pageFormat: 'letter' | 'a4' = 'letter'): string {
-  const e = style.elements
-  const contentWidthIn = (pageFormat === 'a4' ? 8.27 : 8.5) - style.page.marginLeftIn - style.page.marginRightIn
-  // The style's own font first, then its explicit per-script overrides (e.g. Traditional's
-  // Noto Serif Tamil) so they win over the generic Indic fallback that always follows — this
-  // HTML has no per-span language tagging, so one comprehensive stack has to do the work the
-  // editor's .cs-lang-* rules split across classes. Overrides are style-specific, so unlike
-  // the fixed Noto Sans fallback list they must come from the style itself, not be hardcoded —
-  // otherwise every style would render Indic scripts in whatever the *last*-defined style's
-  // overrides asked for.
-  const overrideFonts = Object.values(style.complexScriptFontOverrides ?? {})
-  // Noto Sans comes right after the style's own fonts: it is the Latin fallback (app spec
-  // §4.4) and its bundled file carries every ISO 15919 letter and combining mark, which the
-  // Indic families' Latin subsets do not. Its unicode-range stops at Latin, so Indic text
-  // still falls through to the script-specific faces below.
-  const fontStack = [...new Set([
-    `'${style.fontFamily}'`,
-    ...overrideFonts.map(f => `'${f}'`),
-    "'Noto Sans'",
-    "'Noto Sans Tamil'", "'Noto Sans Devanagari'", "'Noto Sans Telugu'", "'Noto Sans Kannada'",
-    "'Noto Sans Malayalam'", "'Noto Sans Bengali'", "'Noto Sans Gujarati'", "'Noto Sans Gurmukhi'",
-    "'Noto Sans Oriya'", 'sans-serif',
-  ])].join(', ')
-  return `
-          @page {
-            /* Stated, not left to the print dialog's default: print-paginator.ts fills
-               fixed-height page boxes, so the paper it fills them for has to be the paper
-               the browser actually prints on (and it's the same page: field the DOCX
-               export already honors). */
-            size: ${pageFormat === 'a4' ? 'A4' : 'letter'};
-            margin: ${style.page.marginTopIn}in ${style.page.marginRightIn}in ${style.page.marginBottomIn}in ${style.page.marginLeftIn}in;
-          }
-          body {
-            font-family: ${fontStack};
-            margin: 0;
-            padding: 0;
-            background: white;
-            color: black;
-            font-size: 11pt;
-          }
-          /* Cover layouts — one of these two classes is on .print-cover-page, picked by
-             the style's coverLayout (see types.ts). Both wrap the same markup: a
-             .print-cover-top block (title / by-line / logline) and a .print-cover-bottom
-             block (date / contact). */
-          .print-cover-centered {
-            height: 80vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-          }
-          .print-cover-corners {
-            height: 88vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            text-align: left;
-          }
-          /* Down from the top edge, not glued to it — the reference script starts its
-             title roughly a quarter of the way down the page. */
-          .print-cover-corners .print-cover-top {
-            padding-top: 20%;
-          }
-          .print-cover-corners .print-cover-bottom {
-            align-self: flex-end;
-            padding-bottom: 6%;
-            max-width: 45%;
-          }
-          .print-cover-corners .print-cover-logline {
-            margin-top: 12pt;
-            max-width: 75%;
-          }
-          /* The corner block is its own visual group: the centered layout's big
-             separating margins would push it off the page bottom. */
-          .print-cover-corners .print-cover-date,
-          .print-cover-corners .print-cover-contact {
-            margin-top: 0;
-          }
-          .print-cover-title {
-            ${fontProps(e.title)}
-            text-transform: uppercase;
-            margin-bottom: 20px;
-          }
-          .print-cover-by {
-            font-size: 12pt;
-            margin: 10px 0;
-          }
-          .print-cover-author {
-            ${fontProps(e.author)}
-          }
-          .print-cover-logline {
-            ${fontProps(e.logline)}
-            margin-top: 40px;
-            max-width: 600px;
-            white-space: pre-line;
-          }
-          .print-cover-date {
-            font-size: 10pt;
-            margin-top: 50px;
-            color: #777;
-          }
-          .print-cover-contact {
-            font-size: 11pt;
-            margin-top: 24px;
-            color: #888;
-            white-space: pre-line;
-          }
-
-          /* The preview lays out at exactly the printable width, on screen as well as on
-             paper. print-paginator.ts measures where the page breaks fall in the live
-             window, so if the on-screen line breaks differed from the printed ones (a
-             1280px-wide window wraps far later than a 6in column) every page it filled
-             would overflow its sheet when printed. */
-          #print-flow, #print-pages, .print-cover-page {
-            width: ${contentWidthIn}in;
-            margin-left: auto;
-            margin-right: auto;
-          }
-
-          /* One printed sheet of body content, built by print-paginator.ts: an exact
-             page-height box (set inline, from the paper size) so the browser puts exactly
-             one on each sheet, with the running header at its top. */
-          .print-page {
-            break-after: page;
-            page-break-after: always;
-            box-sizing: border-box;
-            overflow: visible;
-          }
-          .print-page:last-child {
-            break-after: auto;
-            page-break-after: auto;
-          }
-          .print-page-body {
-            position: relative;
-            display: flow-root; /* so a first child's margin-top counts inside the page */
-          }
-          .print-page-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: baseline;
-            font-size: ${e.action.fontSizePt}pt;
-            font-style: italic;
-            margin-bottom: 24pt;
-          }
-          @media screen {
-            .print-page {
-              border-bottom: 1px dashed #ccc;
-              margin-bottom: 24px;
-            }
-          }
-
-          /* Screenplay items */
-          .print-scene-heading {
-            ${fontProps(e.sceneHeading)}
-            text-transform: uppercase;
-            ${marginProps(e.sceneHeading)}
-            display: flex;
-            justify-content: space-between;${KEEP_WITH_NEXT}
-          }
-          .print-action {
-            ${fontProps(e.action)}
-            ${marginProps(e.action)}
-            line-height: 1.4;${ORPHAN_WIDOW}
-          }
-          .print-character-block {
-            margin-top: ${e.character.spaceBeforePt ?? 0}pt;
-            margin-bottom: ${e.character.spaceAfterPt ?? 0}pt;
-          }
-          .print-character {
-            ${fontProps(e.character)}
-            margin-left: ${e.character.marginLeftPct ?? 0}%;
-            margin-bottom: 2pt;${KEEP_WITH_NEXT}
-          }
-          .print-parenthetical {
-            ${fontProps(e.parenthetical)}
-            margin-left: ${e.parenthetical.marginLeftPct ?? 0}%;
-            margin-right: ${e.parenthetical.marginRightPct ?? 0}%;
-            margin-bottom: 2pt;${KEEP_WITH_NEXT}
-          }
-          .print-dialogue {
-            ${fontProps(e.dialogue)}
-            ${marginProps(e.dialogue)}
-            line-height: 1.3;${ORPHAN_WIDOW}
-          }
-          .print-transition {
-            ${fontProps(e.transition)}
-            ${marginProps(e.transition)}
-            text-transform: uppercase;${KEEP_TOGETHER}
-          }
-          .print-centered {
-            ${fontProps(e.centered)}
-            ${marginProps(e.centered)}
-          }
-          .print-lyrics {
-            ${fontProps(e.lyrics)}
-            ${marginProps(e.lyrics)}${ORPHAN_WIDOW}
-          }
-          .print-note {
-            background: #fffbeb;
-            border-left: 2px solid #d97706;
-            padding: 4px 8px;
-            ${fontProps(e.note)}
-            ${marginProps(e.note)}
-          }
-          .print-comment {
-            ${fontProps(e.comment)}
-            ${marginProps(e.comment)}
-          }
-          .print-section {
-            ${fontProps(e.section)}
-            ${marginProps(e.section)}${KEEP_WITH_NEXT}
-          }
-          .print-page-break {
-            page-break-after: always;
-          }
-
-          /* Dual dialogue */
-          .print-dual-dialogue {
-            display: flex;
-            margin-top: 6pt;
-            margin-bottom: 6pt;
-          }
-          .print-dual-column {
-            flex: 1;
-            min-width: 0;
-          }
-          .print-left-column {
-            margin-right: 20px;
-          }
-          .print-right-column {
-            margin-left: 20px;
-          }
-          .print-dual-column .print-character {
-            margin-left: 10%;
-          }
-          .print-dual-column .print-parenthetical,
-          .print-dual-column .print-dialogue {
-            margin-left: 10%;
-            margin-right: 5%;
-          }`
-}

package/src/styles/registry.ts

@@ -1,20 +0,0 @@
-import type { ScreenplayStyleDefinition } from './types.js'
-import { DEFAULT_STYLE_ID } from './types.js'
-import { BUILTIN_STYLES, getBuiltinStyle } from './builtin-styles.js'
-
-/** Resolves a style id (usually from frontmatter's `style:` field) to a definition.
- *  Falls back to the default style when the id is missing or unrecognized — e.g. a
- *  document referencing a custom style the current machine/browser hasn't imported. */
-export function resolveStyle(
-  id: string | undefined,
-  customStyles: ScreenplayStyleDefinition[],
-): ScreenplayStyleDefinition {
-  const wanted = id ?? DEFAULT_STYLE_ID
-  return getBuiltinStyle(wanted)
-    ?? customStyles.find(s => s.id === wanted)
-    ?? getBuiltinStyle(DEFAULT_STYLE_ID)!
-}
-
-export function allStyles(customStyles: ScreenplayStyleDefinition[]): ScreenplayStyleDefinition[] {
-  return [...BUILTIN_STYLES, ...customStyles]
-}