@sutrata/editor 0.1.1 → 0.2.0

package/src/shell/LanguageStatus.tsx

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

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

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

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

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

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

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