@sutrata/editor 0.1.0

package/src/shell/LanguageStatus.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useLanguage } from '../i18n/LanguageContext'
+import { useDocument } from '../context/DocumentContext'
+import { getEditorView } from '../editor/editor-bus'
+
+const LANG_NAMES: Record<string, string> = {
+  en: 'English',
+  hi: 'Hindi (Devanagari)',
+  ta: 'Tamil',
+  te: 'Telugu',
+  kn: 'Kannada',
+  ml: 'Malayalam',
+  bn: 'Bengali',
+  gu: 'Gujarati',
+  pa: 'Gurmukhi',
+  or: 'Odia',
+  si: 'Sinhala',
+}
+
+export function LanguageStatus() {
+  const { currentLanguage } = useLanguage()
+  const { text, setText } = useDocument()
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  const langName = LANG_NAMES[currentLanguage] ?? currentLanguage
+
+  useEffect(() => {
+    if (!menuOpen) return
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false)
+      }
+    }
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenuOpen(false)
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [menuOpen])
+
+  const handleSelectLanguage = (code: string) => {
+    const view = getEditorView()
+    if (view) {
+      const { state, dispatch } = view
+      const { from, to } = state.selection
+      const tagText = `{lang=${code}}`
+      dispatch(state.tr.insertText(tagText, from, to))
+      view.focus()
+    } else {
+      setText(text + `\n{lang=${code}}`)
+    }
+    setMenuOpen(false)
+  }
+
+  return (
+    <div className="cs-lang-status" ref={menuRef}>
+      <button
+        type="button"
+        className="cs-lang-status-btn cs-lang-pill"
+        title={`Script language at caret: ${langName} (${currentLanguage.toUpperCase()})`}
+        aria-label={`Script language: ${langName}`}
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        onClick={() => setMenuOpen(!menuOpen)}
+      >
+        <span className="cs-lang-pill-script">अ/A</span>
+        <span className="cs-lang-code">{currentLanguage.toUpperCase()}</span>
+      </button>
+
+      {menuOpen && (
+        <div className="cs-lang-menu" role="menu" aria-label="Script languages">
+          {Object.entries(LANG_NAMES).map(([code, name]) => {
+            const isActive = currentLanguage === code
+            return (
+              <button
+                type="button"
+                key={code}
+                role="menuitem"
+                className={`cs-lang-option${isActive ? ' cs-lang-active' : ''}`}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleSelectLanguage(code)
+                }}
+              >
+                <span>{name}</span>
+                <span className="cs-lang-code" style={{ fontSize: '10px', opacity: 0.7 }}>
+                  {code.toUpperCase()}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/shell/StatusBar.tsx

@@ -0,0 +1,135 @@
+import React, { useMemo, useState, useEffect } from 'react'
+import { useDocument } from '../context/DocumentContext'
+import { LanguageStatus } from './LanguageStatus'
+import { buildSceneList } from '../navigator/scene-list'
+import { StatisticsDialog } from '../navigator/StatisticsDialog'
+import { VersionHistory } from './VersionHistory'
+import { StatsIcon, HistoryIcon } from './icons'
+import { subscribeToAICalls, formatActiveCalls } from '../ai/ai-client'
+import { useTranslation } from '../i18n/useTranslation'
+
+function AIStatusBarStatus() {
+  const [activeCalls, setActiveCalls] = useState<{ providerName: string; model: string }[]>([])
+
+  useEffect(() => {
+    return subscribeToAICalls(setActiveCalls)
+  }, [])
+
+  if (activeCalls.length === 0) return null
+
+  return (
+    <div
+      className="cs-ai-status-indicator"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '6px',
+        color: 'var(--cs-ui-accent, #c4760a)',
+        fontWeight: 600,
+        fontSize: '11px',
+        marginRight: '8px',
+      }}
+    >
+      <span className="cs-spinner" style={{ width: '10px', height: '10px', borderWidth: '1.5px' }} />
+      <span>{formatActiveCalls(activeCalls)}</span>
+    </div>
+  )
+}
+
+export function StatusBar() {
+  const { text, isDirty, lastSaveTarget, filePath, versions, versionHistoryVisible, setVersionHistoryVisible, restoreVersion, clearVersionHistory } = useDocument()
+  const { t } = useTranslation()
+  const [statsOpen, setStatsOpen] = useState(false)
+
+  // VS Code-style: a local autosave backs the content up but never counts as
+  // "saved" in the main label — only a real write to the file (saveFile/
+  // saveFileAs, which clears isDirty) does. While still dirty, the tooltip
+  // says whether that local backup has caught up with the latest edits yet.
+  const saveLabel = isDirty
+    ? t('statusbar.unsavedChanges')
+    : lastSaveTarget === 'file' ? t('statusbar.savedToFile')
+    : t('statusbar.allChangesSaved')
+  const saveTooltip = isDirty
+    ? lastSaveTarget === 'local' ? t('statusbar.savedLocallyTooltip') : undefined
+    : lastSaveTarget === 'file' ? t('statusbar.savedToFileTooltip')
+    : undefined
+
+  const scenes = useMemo(() => buildSceneList(text), [text])
+
+  const { wordCount, pageEstimate } = useMemo(() => {
+    const trimmed = text.trim()
+    const words = trimmed ? trimmed.split(/\s+/).length : 0
+    // Standard screenplay rule: ~54 lines or ~200-250 words per page
+    const lines = text.split('\n').length
+    const estPages = Math.max(1, Math.round(lines / 54))
+    return { wordCount: words, pageEstimate: estPages }
+  }, [text])
+
+  return (
+    <>
+      <footer className="cs-status-bar" role="contentinfo" aria-label="Status bar">
+        <div className="cs-sb-left">
+          <span className="cs-sb-metric cs-sb-metric-scenes" title={t('statusbar.scenesTooltip')}>
+            <strong>{scenes.length}</strong> <span className="cs-sb-metric-label">{scenes.length === 1 ? t('statusbar.scene') : t('statusbar.scenes')}</span>
+          </span>
+          <span className="cs-sb-sep">•</span>
+          <span className="cs-sb-metric cs-sb-metric-pages" title={t('statusbar.pagesTooltip')}>
+            <strong>~{pageEstimate}</strong> <span className="cs-sb-metric-label">{pageEstimate === 1 ? t('statusbar.page') : t('statusbar.pages')}</span>
+          </span>
+          <span className="cs-sb-sep cs-sb-words-sep">•</span>
+          <span className="cs-sb-metric cs-sb-metric-words" title={t('statusbar.wordsTooltip')}>
+            <strong>{wordCount.toLocaleString()}</strong> <span className="cs-sb-metric-label">{t('statusbar.words')}</span>
+          </span>
+        </div>
+
+        <div className="cs-sb-center">
+          <div className="cs-sb-save" role="status" aria-live="polite" title={saveTooltip}>
+            <span className={`cs-sb-dot ${isDirty ? 'cs-sb-dot-dirty' : 'cs-sb-dot-clean'}`} />
+            <span className={isDirty ? 'cs-sb-save-dirty' : 'cs-sb-save-clean'}>
+              {saveLabel}
+            </span>
+          </div>
+        </div>
+
+        <div className="cs-sb-right">
+          <AIStatusBarStatus />
+          {filePath && versions.length > 0 && (
+            <button
+              type="button"
+              className="cs-nav-action-btn"
+              onClick={() => setVersionHistoryVisible(true)}
+              title={`${versions.length} version${versions.length === 1 ? '' : 's'} saved`}
+              style={{ fontSize: '11px', gap: '4px', padding: '2px 6px' }}
+            >
+              <HistoryIcon size={13} />
+              <span>{versions.length}</span>
+            </button>
+          )}
+          <button
+            type="button"
+            className="cs-nav-action-btn"
+            onClick={() => setStatsOpen(true)}
+            title={t('statusbar.statsTooltip')}
+            style={{ fontSize: '11px', gap: '4px', padding: '2px 6px' }}
+          >
+            <StatsIcon size={13} />
+            <span>{t('statusbar.statsButton')}</span>
+          </button>
+          <LanguageStatus />
+        </div>
+      </footer>
+
+      {statsOpen && <StatisticsDialog onClose={() => setStatsOpen(false)} />}
+      {filePath && (
+        <VersionHistory
+          versions={versions}
+          filePath={filePath}
+          onRestore={restoreVersion}
+          onClearAll={clearVersionHistory}
+          visible={versionHistoryVisible}
+          onClose={() => setVersionHistoryVisible(false)}
+        />
+      )}
+    </>
+  )
+}

package/src/shell/SutrataLogo.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+
+// The Sutrata monogram: an S-shaped filmstrip ribbon with sprocket holes and a
+// center reel, in the app's Deep Amber / Amber Glow palette. Source of truth for
+// the shape and color values is packages/app/public/sutrata-monogram.svg — keep
+// the two in sync if either changes.
+
+interface LogoProps {
+  size?: number
+  className?: string
+  showText?: boolean
+}
+
+const MONOGRAM_ASPECT = 231.65818 / 324.60373
+
+export function SutrataLogo({ size = 20, className = '', showText = true }: LogoProps) {
+  const height = size
+  const width = size * MONOGRAM_ASPECT
+
+  return (
+    <div className={`cs-brand-mark ${className}`} style={{ display: 'inline-flex', alignItems: 'center', gap: '7px', userSelect: 'none' }}>
+      <svg
+        width={width}
+        height={height}
+        viewBox="0 0 231.65818 324.60373"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        style={{ flexShrink: 0 }}
+      >
+        <g transform="translate(-3.0466903,-3.069361)">
+          <g>
+            <path
+              fill="#502308"
+              d="M 76.35291,222.53041 C 75.478969,209.22098 71.352034,194.29907 56.664655,177.24787 35.352192,152.22995 46.850499,139.85601 62.978003,130.13046 L 3.6899176,150.4351 c 5.0786411,20.05339 13.9650544,36.08746 28.6678214,45.98205 16.601069,11.28577 30.572578,19.06546 43.995171,26.11326 z" />
+            <path
+              fill="#92400e"
+              d="m 213.6921,3.069361 c 0,0 0.96049,32.353598 -0.14192,43.494212 -1.10241,11.140614 -14.06146,22.120287 -23.28179,26.493068 -26.78003,12.700542 -124.035721,55.394599 -124.035721,55.394599 0,0 -7.314493,3.8005 -14.852175,9.23243 -7.537682,5.43193 -23.670324,18.71663 -28.098707,33.71845 -1.670439,5.65887 -2.408461,14.04935 -2.408461,14.04935 C 8.2528446,173.99227 -4.2995876,149.42142 8.2289074,120.92479 18.129451,103.32842 31.24605,87.051456 55.796006,75.465101 101.11959,52.013746 150.99666,33.115884 198.69801,12.042303 Z" />
+            <g>
+              <path
+                fill="#fbbf24"
+                d="m 157.01648,44.42498 c 14.17698,-5.71484 11.14517,-6.35429 11.1893,10.23596 -0.40601,13.28313 2.27097,11.17087 -9.33278,16.05641 -13.29184,4.92069 -12.50077,7.73152 -12.14266,-9.03173 -0.29088,-15.61229 -1.75968,-11.39786 10.28614,-17.26064 z" />
+              <path
+                fill="#fbbf24"
+                d="m 118.47741,61.789741 c 14.17699,-5.71484 11.14518,-6.35429 11.18931,10.23596 -0.40601,13.28313 2.27097,11.17087 -9.33279,16.05641 -13.29183,4.92069 -12.50076,7.73152 -12.14265,-9.03173 -0.29089,-15.61229 -1.75968,-11.39786 10.28613,-17.26064 z" />
+              <path
+                fill="#fbbf24"
+                d="m 80.42697,79.119631 c 14.176988,-5.71484 11.145175,-6.35429 11.189307,10.23596 -0.406014,13.283129 2.27097,11.170869 -9.332786,16.056409 -13.291838,4.92069 -12.500765,7.73152 -12.142656,-9.031729 -0.290884,-15.61229 -1.759682,-11.39786 10.286135,-17.26064 z" />
+            </g>
+          </g>
+          <g transform="rotate(180,118.87578,165.37123)">
+            <path
+              fill="#502308"
+              d="M 76.35291,222.53041 C 75.478969,209.22098 71.352034,194.29907 56.664655,177.24787 35.352192,152.22995 46.850499,139.85601 62.978003,130.13046 L 3.6899176,150.4351 c 5.0786411,20.05339 13.9650544,36.08746 28.6678214,45.98205 16.601069,11.28577 30.572578,19.06546 43.995171,26.11326 z" />
+            <path
+              fill="#92400e"
+              d="m 213.6921,3.069361 c 0,0 0.96049,32.353598 -0.14192,43.494212 -1.10241,11.140614 -14.06146,22.120287 -23.28179,26.493068 -26.78003,12.700542 -124.035721,55.394599 -124.035721,55.394599 0,0 -7.314493,3.8005 -14.852175,9.23243 -7.537682,5.43193 -23.670324,18.71663 -28.098707,33.71845 -1.670439,5.65887 -2.408461,14.04935 -2.408461,14.04935 C 8.2528446,173.99227 -4.2995876,149.42142 8.2289074,120.92479 18.129451,103.32842 31.24605,87.051456 55.796006,75.465101 101.11959,52.013746 150.99666,33.115884 198.69801,12.042303 Z" />
+            <g>
+              <path
+                fill="#fbbf24"
+                d="m 157.01648,44.42498 c 14.17698,-5.71484 11.14517,-6.35429 11.1893,10.23596 -0.40601,13.28313 2.27097,11.17087 -9.33278,16.05641 -13.29184,4.92069 -12.50077,7.73152 -12.14266,-9.03173 -0.29088,-15.61229 -1.75968,-11.39786 10.28614,-17.26064 z" />
+              <path
+                fill="#fbbf24"
+                d="m 118.47741,61.789741 c 14.17699,-5.71484 11.14518,-6.35429 11.18931,10.23596 -0.40601,13.28313 2.27097,11.17087 -9.33279,16.05641 -13.29183,4.92069 -12.50076,7.73152 -12.14265,-9.03173 -0.29089,-15.61229 -1.75968,-11.39786 10.28613,-17.26064 z" />
+              <path
+                fill="#fbbf24"
+                d="m 80.42697,79.119631 c 14.176988,-5.71484 11.145175,-6.35429 11.189307,10.23596 -0.406014,13.283129 2.27097,11.170869 -9.332786,16.056409 -13.291838,4.92069 -12.500765,7.73152 -12.142656,-9.031729 -0.290884,-15.61229 -1.759682,-11.39786 10.286135,-17.26064 z" />
+            </g>
+          </g>
+          <g transform="matrix(1.1983554,-0.06280315,0.06280315,1.1983554,-34.773977,-29.239318)">
+            <path
+              fill="#fbbf24"
+              d="m 90.317275,164.77885 48.369915,-17.86274 c -6.75724,-6.27184 -19.73649,-10.33577 -32.1128,-4.41552 -11.797753,5.74748 -14.462218,13.89845 -16.257115,22.27826 z" />
+            <path
+              fill="#fbbf24"
+              d="M 148.18495,171.26956 99.815045,189.1323 c 6.757235,6.27184 19.736485,10.33577 32.112795,4.41552 11.79775,-5.74748 14.46221,-13.89845 16.25711,-22.27826 z" />
+            <path
+              fill="#fbbf24"
+              d="m 90.417628,169.79648 51.882262,-19.36804 c 3.81102,4.8999 5.68801,10.3205 6.02115,16.15676 l -52.032789,19.06698 c -3.269689,-4.15996 -5.408353,-9.28938 -5.870623,-15.8557 z" />
+          </g>
+        </g>
+      </svg>
+      {showText && (
+        <span className="cs-brand-text" style={{ fontWeight: 700, fontSize: '11px', letterSpacing: '1.2px', textTransform: 'uppercase', color: 'var(--cs-ui-accent-badge, #d97706)' }}>
+          Sutrata
+        </span>
+      )}
+    </div>
+  )
+}

package/src/shell/Toast.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react'
+
+export interface ToastItem {
+  id: string
+  message: string
+  type?: 'info' | 'success' | 'warn' | 'error'
+}
+
+interface ToastContainerProps {
+  toasts: ToastItem[]
+  onDismiss: (id: string) => void
+}
+
+export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
+  return (
+    <div className="cs-toast-container" aria-live="polite" aria-atomic="true">
+      {toasts.map((toast) => (
+        <ToastMessage key={toast.id} toast={toast} onDismiss={onDismiss} />
+      ))}
+    </div>
+  )
+}
+
+function ToastMessage({ toast, onDismiss }: { toast: ToastItem; onDismiss: (id: string) => void }) {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onDismiss(toast.id)
+    }, 3500)
+    return () => clearTimeout(timer)
+  }, [toast.id, onDismiss])
+
+  const typeClass =
+    toast.type === 'success'
+      ? 'cs-toast-success'
+      : toast.type === 'error'
+      ? 'cs-toast-error'
+      : toast.type === 'warn'
+      ? 'cs-toast-warn'
+      : 'cs-toast-info'
+
+  return (
+    <div className={`cs-toast ${typeClass}`} role="status">
+      <span>{toast.message}</span>
+    </div>
+  )
+}

package/src/shell/ToolbarButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+interface ToolbarButtonProps {
+  label: string
+  sigil?: string
+  shortcut?: string
+  active?: boolean
+  onClick: () => void
+  children: React.ReactNode
+}
+
+export function ToolbarButton({ label, sigil, shortcut, active, onClick, children }: ToolbarButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      className={`cs-tb-btn${active ? ' cs-tb-active' : ''}`}
+      onClick={onClick}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
+        {children}
+      </div>
+      <span className="cs-tb-tip" role="tooltip">
+        <span>{label}</span>
+        {sigil ? <span className="cs-tb-sigil">{sigil}</span> : null}
+        {shortcut ? <span className="cs-tb-key">{shortcut}</span> : null}
+      </span>
+    </button>
+  )
+}

package/src/shell/VersionHistory.tsx

@@ -0,0 +1,212 @@
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { diffWordsWithSpace, type Change } from 'diff'
+import type { VersionEntry } from '../types'
+
+interface VersionHistoryProps {
+  versions: VersionEntry[]
+  filePath: string | null
+  onRestore: (entry: VersionEntry) => void
+  onClearAll: () => Promise<void>
+  visible: boolean
+  onClose: () => void
+}
+
+interface DiffMarker {
+  type: 'added' | 'removed'
+  position: number // 0..1, fraction of the diff pane's scrollHeight
+}
+
+// Word-level diff over the full text (not line-bucketed): if only one word in
+// a sentence changed, only that word is marked added/removed — the rest of
+// the sentence comes back as an unchanged, unstyled Change chunk. Whitespace
+// (including newlines) is treated as part of the diff so line breaks survive.
+function computeDiff(oldText: string, newText: string): Change[] {
+  return diffWordsWithSpace(oldText, newText)
+}
+
+// Two markers within this many pixels of each other collapse into one, so a
+// tight run of word edits doesn't paint a solid wall of ticks.
+const CLUSTER_PX = 10
+
+function formatTimestamp(ts: number): string {
+  return new Date(ts).toLocaleString(undefined, {
+    month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit',
+  })
+}
+
+export function VersionHistory({ versions, filePath, onRestore, onClearAll, visible, onClose }: VersionHistoryProps) {
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const diffScrollRef = useRef<HTMLDivElement>(null)
+  // Maps a diff-part index (only added/removed parts) to its rendered <span>,
+  // so marker positions come from real layout instead of a text-based estimate —
+  // screenplay format has wildly uneven character density per line (short
+  // character cues and blank lines vs. long action paragraphs), which threw
+  // off an earlier character-offset heuristic by a page or more.
+  const spanRefMap = useRef(new Map<number, HTMLSpanElement>())
+  const [markers, setMarkers] = useState<DiffMarker[]>([])
+
+  const currentVersion = versions[0] ?? null
+  const selectedVersion = useMemo(
+    () => versions.find(v => v.id === selectedId) ?? null,
+    [versions, selectedId],
+  )
+
+  const diff = useMemo(() => {
+    if (!selectedVersion || !currentVersion || selectedVersion.id === currentVersion.id) return null
+    return computeDiff(selectedVersion.content, currentVersion.content)
+  }, [selectedVersion, currentVersion])
+
+  useLayoutEffect(() => {
+    const container = diffScrollRef.current
+    if (!container || !diff) { setMarkers([]); return }
+
+    const raw: { type: 'added' | 'removed'; top: number }[] = []
+    diff.forEach((part, i) => {
+      if (!part.added && !part.removed) return
+      const span = spanRefMap.current.get(i)
+      if (!span) return
+      raw.push({ type: part.added ? 'added' : 'removed', top: span.offsetTop })
+    })
+    raw.sort((a, b) => a.top - b.top)
+
+    const scrollHeight = container.scrollHeight || 1
+    const clustered: DiffMarker[] = []
+    let lastTop = -Infinity
+    let lastType: 'added' | 'removed' | null = null
+    for (const m of raw) {
+      if (lastType === m.type && m.top - lastTop < CLUSTER_PX) continue
+      clustered.push({ type: m.type, position: m.top / scrollHeight })
+      lastTop = m.top
+      lastType = m.type
+    }
+    setMarkers(clustered)
+  }, [diff])
+
+  const scrollToMarker = (position: number) => {
+    const el = diffScrollRef.current
+    if (!el) return
+    const target = Math.max(0, position * el.scrollHeight - el.clientHeight / 2)
+    if (typeof el.scrollTo === 'function') el.scrollTo({ top: target, behavior: 'smooth' })
+    else el.scrollTop = target
+  }
+
+  if (!visible || !filePath) return null
+
+  return (
+    <div
+      className="cs-dialog-overlay"
+      role="presentation"
+      onClick={e => { if (e.target === e.currentTarget) onClose() }}
+    >
+      <div
+        className="cs-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="cs-version-dialog-title"
+        style={{ maxWidth: '620px', width: '92%', maxHeight: '80vh', display: 'flex', flexDirection: 'column' }}
+      >
+        <div className="cs-panel-header">
+          <span id="cs-version-dialog-title" className="cs-panel-title">Version History</span>
+          <button className="cs-panel-close" onClick={onClose} aria-label="Close">×</button>
+        </div>
+
+        <div className="cs-version-body">
+          <div className="cs-version-list">
+            {versions.length === 0 ? (
+              <div className="cs-version-empty">No versions saved yet</div>
+            ) : (
+              versions.map((v, idx) => (
+                <button
+                  key={v.id}
+                  type="button"
+                  className={`cs-version-list-item${selectedId === v.id ? ' cs-version-list-item-active' : ''}`}
+                  onClick={() => setSelectedId(v.id)}
+                >
+                  <div className="cs-version-list-item-label">{idx === 0 ? 'Current' : formatTimestamp(v.timestamp)}</div>
+                  {idx !== 0 && <div className="cs-version-list-item-date">{formatTimestamp(v.timestamp)}</div>}
+                </button>
+              ))
+            )}
+          </div>
+
+          <div className="cs-version-diff-wrap">
+            <div className="cs-version-diff" ref={diffScrollRef}>
+              {!selectedVersion ? (
+                <div className="cs-version-empty">Select a version to compare against the current document</div>
+              ) : selectedVersion.id === currentVersion?.id ? (
+                <div className="cs-version-empty">This is the current version</div>
+              ) : diff ? (
+                diff.every(part => !part.added && !part.removed) ? (
+                  <div className="cs-version-empty">No differences from the current version</div>
+                ) : (
+                  <div className="cs-version-diff-content">
+                    {diff.map((part, i) => {
+                      const isChange = part.added || part.removed
+                      return (
+                        <span
+                          key={i}
+                          ref={isChange ? (el) => {
+                            if (el) spanRefMap.current.set(i, el)
+                            else spanRefMap.current.delete(i)
+                          } : undefined}
+                          className={
+                            part.added ? 'cs-version-diff-added'
+                            : part.removed ? 'cs-version-diff-removed'
+                            : undefined
+                          }
+                        >
+                          {part.value}
+                        </span>
+                      )
+                    })}
+                  </div>
+                )
+              ) : null}
+            </div>
+
+            {/* Rendered unconditionally (even with zero markers) so its width is
+                reserved from the diff pane's very first layout pass — otherwise
+                measuring offsetTop before this strip exists, then having it pop
+                in afterward and narrow the text column, would make every
+                position stale by however much the text rewrapped. */}
+            <div className="cs-version-diff-minimap" aria-hidden="true">
+              {markers.map((m, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  className={`cs-version-diff-marker cs-version-diff-marker-${m.type}`}
+                  style={{ top: `${m.position * 100}%` }}
+                  title={m.type === 'added' ? 'Jump to added text' : 'Jump to removed text'}
+                  onClick={() => scrollToMarker(m.position)}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="cs-version-footer">
+          <button
+            type="button"
+            className="cs-confirm-btn-cancel cs-version-clear-btn"
+            onClick={() => void onClearAll()}
+            disabled={versions.length === 0}
+          >
+            Delete Version History
+          </button>
+          <div style={{ display: 'flex', gap: '10px' }}>
+            <button type="button" className="cs-confirm-btn-cancel" onClick={onClose}>Close</button>
+            {selectedVersion && selectedVersion.id !== currentVersion?.id && (
+              <button
+                type="button"
+                className="cs-confirm-btn-primary"
+                onClick={() => onRestore(selectedVersion)}
+              >
+                Restore This Version
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/shell/Watermark.tsx

@@ -0,0 +1,9 @@
+import { useDocument } from '../context/DocumentContext'
+
+/** Renders the document's frontmatter `watermark:` text.
+ *  Hidden in the screen editor UI, visible only in print output. */
+export function Watermark() {
+  const { watermarkText } = useDocument()
+  if (!watermarkText) return null
+  return <div className="cs-watermark" aria-hidden="true">{watermarkText}</div>
+}