@sutrata/editor 0.1.0

package/src/shell/icons.tsx

@@ -0,0 +1,335 @@
+import React from 'react'
+
+type IconProps = { size?: number }
+const base = (size = 16) => ({
+  width: size,
+  height: size,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 1.35,
+  strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const,
+})
+
+export const NavigatorIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <rect x="1.5" y="2" width="13" height="12" rx="1.5" />
+    <line x1="5.5" y1="2" x2="5.5" y2="14" />
+  </svg>
+)
+
+export const TitlePageIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M3 1.5h6l4 4V13.5a1 1 0 01-1 1H3a1 1 0 01-1-1v-11a1 1 0 011-1z" />
+    <polyline points="9 1.5 9 5.5 13 5.5" />
+    <line x1="5" y1="8" x2="11" y2="8" />
+    <line x1="5" y1="10.5" x2="9" y2="10.5" />
+  </svg>
+)
+
+export const NewIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M3 1.5h6l4 4V13.5a1 1 0 01-1 1H3a1 1 0 01-1-1v-11a1 1 0 011-1z" />
+    <polyline points="9 1.5 9 5.5 13 5.5" />
+    <line x1="8" y1="8.5" x2="8" y2="12" />
+    <line x1="6.25" y1="10.25" x2="9.75" y2="10.25" />
+  </svg>
+)
+
+export const OpenIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M1.5 3.5a1 1 0 011-1h3.5l1.5 1.5h7a1 1 0 011 1V6H1.5V3.5z" />
+    <path d="M1 6.5h14l-1.5 6.5a1 1 0 01-1 .7H3.5a1 1 0 01-1-.7L1 6.5z" />
+  </svg>
+)
+
+export const ImportDocxIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M3 1.5h6l4 4V13.5a1 1 0 01-1 1H3a1 1 0 01-1-1v-11a1 1 0 011-1z" />
+    <polyline points="9 1.5 9 5.5 13 5.5" />
+    <line x1="8" y1="7.5" x2="8" y2="11.5" />
+    <polyline points="6 9.5 8 11.5 10 9.5" />
+  </svg>
+)
+
+export const StyleIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M8 2a6 6 0 00-6 6c0 3.3 2.7 6 6 6 1 0 1.8-.8 1.8-1.8 0-.5-.2-.9-.5-1.2-.3-.4-.5-.9-.5-1.5 0-1.1.9-2 2-2h1.2C13.8 7.5 14 6.7 14 5.8 14 3.7 11.3 2 8 2z" />
+    <circle cx="5" cy="6" r="0.75" fill="currentColor" stroke="none" />
+    <circle cx="8" cy="4.8" r="0.75" fill="currentColor" stroke="none" />
+    <circle cx="11" cy="6" r="0.75" fill="currentColor" stroke="none" />
+  </svg>
+)
+
+export const SaveIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M2.5 2h8.5l2.5 2.5V13.5a1 1 0 01-1 1h-10a1 1 0 01-1-1V3a1 1 0 011-1z" />
+    <path d="M5 2v4h5V2" />
+    <path d="M4.5 9h7v5h-7z" />
+  </svg>
+)
+
+export const SaveAsIcon = ({ size = 16 }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M2.5 2h7.5l2.5 2.5V8" />
+    <path d="M5 2v3.5h4V2" />
+    <path d="M2.5 13.5a1 1 0 01-1-1V3a1 1 0 011-1" />
+    <path d="M1.5 12.5a1 1 0 001 1h5.5" />
+    <circle cx="12" cy="12" r="3" />
+    <line x1="12" y1="10.5" x2="12" y2="13.5" />
+    <line x1="10.5" y1="12" x2="13.5" y2="12" />
+  </svg>
+)
+
+export const UndoIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M2 7c0-2.8 2.2-5 5-5 2.5 0 4.6 1.8 5 4.2" />
+    <path d="M2 3v4h4" />
+  </svg>
+)
+
+export const RedoIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M14 7c0-2.8-2.2-5-5-5C6.5 2 4.4 3.8 4 6.2" />
+    <path d="M14 3v4h-4" />
+  </svg>
+)
+
+export const SceneIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <line x1="3" y1="5" x2="3" y2="13" />
+    <line x1="3" y1="9" x2="8" y2="9" />
+    <line x1="8" y1="5" x2="8" y2="13" />
+    <line x1="12" y1="5" x2="12" y2="13" />
+    <line x1="12" y1="9" x2="17" y2="9" />
+    <line x1="17" y1="5" x2="17" y2="13" />
+  </svg>
+)
+
+export const ActionIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <line x1="2" y1="5" x2="16" y2="5" />
+    <line x1="2" y1="8" x2="16" y2="8" />
+    <line x1="2" y1="11" x2="12" y2="11" />
+    <line x1="2" y1="14" x2="9" y2="14" />
+  </svg>
+)
+
+export const CharacterIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <circle cx="9" cy="6" r="3" />
+    <path d="M3 16c0-3.3 2.7-6 6-6s6 2.7 6 6" />
+  </svg>
+)
+
+export const DialogueIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <path d="M2 4h14a1 1 0 011 1v6a1 1 0 01-1 1H6l-4 3v-3H2a1 1 0 01-1-1V5a1 1 0 011-1z" />
+  </svg>
+)
+
+export const ParentheticalIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <path d="M6 4c-2 2-2 8 0 10" />
+    <path d="M12 4c2 2 2 8 0 10" />
+  </svg>
+)
+
+export const TransitionIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <polyline points="3,6 8,9 3,12" />
+    <polyline points="9,6 14,9 9,12" />
+    <line x1="15" y1="6" x2="15" y2="12" />
+  </svg>
+)
+
+export const CenteredIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <line x1="3" y1="5" x2="15" y2="5" />
+    <line x1="5" y1="9" x2="13" y2="9" />
+    <line x1="3" y1="13" x2="15" y2="13" />
+  </svg>
+)
+
+export const LyricsIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <circle cx="5" cy="13" r="2" />
+    <circle cx="13" cy="11" r="2" />
+    <line x1="7" y1="13" x2="7" y2="4" />
+    <line x1="15" y1="11" x2="15" y2="2" />
+    <line x1="7" y1="4" x2="15" y2="2" />
+  </svg>
+)
+
+export const NoteIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <rect x="2" y="3" width="11" height="12" rx="1" />
+    <line x1="5" y1="7" x2="10" y2="7" />
+    <line x1="5" y1="10" x2="10" y2="10" />
+    <line x1="5" y1="13" x2="8" y2="13" />
+  </svg>
+)
+
+export const PageBreakIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <line x1="2" y1="9" x2="16" y2="9" />
+    <line x1="2" y1="5" x2="16" y2="5" strokeDasharray="2 2" opacity="0.4" />
+    <line x1="2" y1="13" x2="16" y2="13" strokeDasharray="2 2" opacity="0.4" />
+  </svg>
+)
+
+export const SectionIcon = ({ size }: IconProps) => (
+  <svg {...base(size)} viewBox="0 0 18 18">
+    <line x1="3" y1="6" x2="15" y2="6" />
+    <line x1="3" y1="9" x2="15" y2="9" />
+    <line x1="6" y1="3" x2="6" y2="7" />
+    <line x1="12" y1="3" x2="12" y2="7" />
+    <line x1="6" y1="8" x2="6" y2="12" />
+    <line x1="12" y1="8" x2="12" y2="12" />
+  </svg>
+)
+
+export const BoldIcon = ({ size = 16 }: IconProps) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor">
+    <text x="3" y="13" fontFamily="Georgia,serif" fontSize="13" fontWeight="700">B</text>
+  </svg>
+)
+
+export const ItalicIcon = ({ size = 16 }: IconProps) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor">
+    <text x="5" y="13" fontFamily="Georgia,serif" fontSize="13" fontStyle="italic">I</text>
+  </svg>
+)
+
+export const UnderlineIcon = ({ size = 16 }: IconProps) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.3} strokeLinecap="round">
+    <text x="4" y="11" fontFamily="Georgia,serif" fontSize="11" fill="currentColor" stroke="none">U</text>
+    <line x1="3" y1="14" x2="13" y2="14" />
+  </svg>
+)
+
+export const SourceIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <polyline points="5,4 2,8 5,12" />
+    <polyline points="11,4 14,8 11,12" />
+    <line x1="9" y1="2" x2="7" y2="14" />
+  </svg>
+)
+
+export const FormattedIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <line x1="2" y1="4" x2="14" y2="4" />
+    <line x1="2" y1="7" x2="14" y2="7" />
+    <line x1="2" y1="10" x2="9" y2="10" />
+  </svg>
+)
+
+export const RibbonIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <rect x="1" y="4" width="4" height="4" rx="0.5" />
+    <rect x="6" y="4" width="4" height="4" rx="0.5" />
+    <rect x="11" y="4" width="4" height="4" rx="0.5" />
+    <line x1="1" y1="11" x2="15" y2="11" />
+    <line x1="1" y1="13.5" x2="10" y2="13.5" />
+  </svg>
+)
+
+export const ExportIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M2.5 7.5v5a1 1 0 001 1h9a1 1 0 001-1v-5" />
+    <line x1="8" y1="2" x2="8" y2="9.5" />
+    <polyline points="4.75 5.25 8 2 11.25 5.25" />
+  </svg>
+)
+
+export const SettingsIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <circle cx="8" cy="8" r="2.25" />
+    <path d="M6.9 1.8h2.2l.3 1.4a4.8 4.8 0 011.2.7l1.3-.6 1.5 1.5-.6 1.3c.3.4.5.8.7 1.2l1.4.3v2.2l-1.4.3a4.8 4.8 0 01-.7 1.2l.6 1.3-1.5 1.5-1.3-.6a4.8 4.8 0 01-1.2.7l-.3 1.4H6.9l-.3-1.4a4.8 4.8 0 01-1.2-.7l-1.3.6-1.5-1.5.6-1.3a4.8 4.8 0 01-.7-1.2l-1.4-.3V6.9l1.4-.3a4.8 4.8 0 01.7-1.2l-.6-1.3 1.5-1.5 1.3.6a4.8 4.8 0 011.2-.7l.3-1.4z" />
+  </svg>
+)
+
+export const OverflowIcon = ({ size = 14 }: IconProps) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor">
+    <circle cx="3" cy="8" r="1.5" />
+    <circle cx="8" cy="8" r="1.5" />
+    <circle cx="13" cy="8" r="1.5" />
+  </svg>
+)
+
+export const EyeIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M1 8s3-6 7-6 7 6 7 6-3 6-7 6-7-6-7-6z" />
+    <circle cx="8" cy="8" r="2.2" />
+  </svg>
+)
+
+export const EyeOffIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M1 8s3-6 7-6 7 6 7 6-3 6-7 6-7-6-7-6z" />
+    <circle cx="8" cy="8" r="2.2" />
+    <line x1="2" y1="2" x2="14" y2="14" />
+  </svg>
+)
+
+export const LockIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <rect x="3" y="7" width="10" height="7" rx="1.5" />
+    <path d="M4.5 7V4.5a3.5 3.5 0 017 0V7" />
+  </svg>
+)
+
+export const StatsIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <line x1="12" y1="14" x2="12" y2="4" />
+    <line x1="8" y1="14" x2="8" y2="7" />
+    <line x1="4" y1="14" x2="4" y2="10" />
+  </svg>
+)
+
+export const HistoryIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <circle cx="8" cy="8.5" r="6" />
+    <polyline points="8,5.5 8,8.5 10.5,10" />
+  </svg>
+)
+
+export const MicIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <rect x="5.5" y="2" width="5" height="8" rx="2.5" />
+    <path d="M3 7.5a5 5 0 0010 0" />
+    <line x1="8" y1="12.5" x2="8" y2="14.5" />
+    <line x1="5.5" y1="14.5" x2="10.5" y2="14.5" />
+  </svg>
+)
+
+export const SparklesIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <path d="M8 2l1.2 3.8L13 7l-3.8 1.2L8 12l-1.2-3.8L3 7l3.8-1.2L8 2z" />
+    <path d="M12.5 11l.6 1.9 1.9.6-1.9.6-.6 1.9-.6-1.9-1.9-.6 1.9-.6.6-1.9z" />
+  </svg>
+)
+
+export const ClockIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <circle cx="8" cy="8" r="6" />
+    <polyline points="8 4.5 8 8 10.5 9.5" />
+  </svg>
+)
+
+export const MenuIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <line x1="2.5" y1="4.5" x2="13.5" y2="4.5" />
+    <line x1="2.5" y1="8" x2="13.5" y2="8" />
+    <line x1="2.5" y1="11.5" x2="13.5" y2="11.5" />
+  </svg>
+)
+
+export const CloseIcon = ({ size }: IconProps) => (
+  <svg {...base(size)}>
+    <line x1="3.5" y1="3.5" x2="12.5" y2="12.5" />
+    <line x1="12.5" y1="3.5" x2="3.5" y2="12.5" />
+  </svg>
+)
+

package/src/shell/toolbar-actions.ts

@@ -0,0 +1,59 @@
+import type { Command } from 'prosemirror-state'
+import { TextSelection } from 'prosemirror-state'
+import { toggleMark } from 'prosemirror-commands'
+import { undo, redo } from 'prosemirror-history'
+import { schema } from '../editor/schema'
+
+export function makeSetBlock(typeName: string, attrs: Record<string, unknown> = {}): Command {
+  return (state, dispatch) => {
+    const nodeType = schema.nodes[typeName]
+    if (!nodeType) return false
+    if (dispatch) {
+      const { from, to } = state.selection
+      const tr = state.tr
+      state.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.isBlock && node.type.name !== 'doc') {
+          tr.setNodeMarkup(pos, nodeType, { ...node.attrs, ...attrs })
+        }
+      })
+      dispatch(tr)
+    }
+    return true
+  }
+}
+
+export function makeToggleMark(markName: string): Command {
+  return (state, dispatch) => {
+    const mark = schema.marks[markName]
+    if (!mark) return false
+    if (state.selection.empty) return false
+    return toggleMark(mark)(state, dispatch)
+  }
+}
+
+// The "Note" toolbar button/shortcut does double duty: on an Action line it
+// marks text as an inline [[ ]] note — the selection, or (with no selection)
+// the whole line — leaving the line itself an Action. Inline notes aren't
+// allowed on any other line type, so elsewhere it falls back to the original
+// whole-block conversion to a standalone `note` block.
+export function makeSetOrToggleNote(): Command {
+  return (state, dispatch) => {
+    const { $from, $to, empty } = state.selection
+    const inAction = $from.parent.type.name === 'action' && (empty || $from.sameParent($to))
+    if (!inAction) return makeSetBlock('note')(state, dispatch)
+
+    const mark = schema.marks['note_mark']
+    if (!mark) return false
+
+    let target = state
+    if (empty) {
+      const lineStart = $from.start()
+      const lineEnd = $from.end()
+      if (lineEnd <= lineStart) return false
+      target = state.apply(state.tr.setSelection(TextSelection.create(state.doc, lineStart, lineEnd)))
+    }
+    return toggleMark(mark)(target, dispatch)
+  }
+}
+
+export { undo, redo }

package/src/source/SourceView.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useRef } from 'react'
+import { EditorState } from '@codemirror/state'
+import { EditorView, keymap } from '@codemirror/view'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { tags } from '@lezer/highlight'
+import { sutraLanguage } from './sutra-lang'
+import { useDocument } from '../context/DocumentContext'
+import { setSourceView } from '../editor/editor-bus'
+import { sourceFindHighlightExtension } from './find-highlight-source'
+
+// Light theme matching the app's warm off-white palette.
+// No internal scroll — the editor grows to content height and .cs-main scrolls.
+const sutraTheme = EditorView.theme({
+  '&': {
+    width: '100%',
+    maxWidth: '960px',
+    fontSize: '12pt',
+    fontFamily: "'Courier New', Courier, monospace",
+    lineHeight: '1.5',
+    backgroundColor: 'transparent',
+  },
+  '.cm-scroller': { overflow: 'visible', lineHeight: '1.5' },
+  '.cm-content': { padding: '0', caretColor: '#1a1a18' },
+  '.cm-line': { padding: '0' },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-cursor': { borderLeftColor: '#1a1a18' },
+  '.cm-selectionBackground, ::selection': { backgroundColor: '#b8d3f0' },
+  '&.cm-focused .cm-selectionBackground': { backgroundColor: '#b8d3f0' },
+})
+
+const sutraHighlight = HighlightStyle.define([
+  // ## Scene heading — dark teal, bold
+  { tag: tags.keyword, color: '#0a5c6a', fontWeight: 'bold' },
+  // # Section heading — medium slate
+  { tag: tags.heading, color: '#4a5568', fontWeight: 'bold' },
+  // @Character — warm brown/amber
+  { tag: tags.variableName, color: '#9c4221', fontWeight: 'bold' },
+  // Dialogue — dark ink, slightly indented feel via color
+  { tag: tags.labelName, color: '#2a3568' },
+  // Parenthetical — muted gray-green
+  { tag: tags.string, color: '#5a7a4a', fontStyle: 'italic' },
+  // >> Transition / centered — medium blue-gray
+  { tag: tags.operator, color: '#4a5a7a', fontWeight: 'bold' },
+  // ~ Lyrics — purple
+  { tag: tags.meta, color: '#6b46c1' },
+  // [[ Note ]] / <!-- comment --> — gray
+  { tag: tags.comment, color: '#9ca3af', fontStyle: 'italic' },
+  // & metadata key — teal
+  { tag: tags.attributeName, color: '#0694a2' },
+  // Frontmatter values — muted
+  { tag: tags.attributeValue, color: '#6b7280' },
+  // === page break, sigils — light gray
+  { tag: tags.punctuation, color: '#9ca3af' },
+])
+
+export function SourceView() {
+  const { text, setText } = useDocument()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+  // Track externally-driven text so we don't feed our own updates back
+  const lastTextRef = useRef(text)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: text,
+        extensions: [
+          history(),
+          keymap.of([...defaultKeymap, ...historyKeymap]),
+          sutraLanguage,
+          sutraTheme,
+          syntaxHighlighting(sutraHighlight),
+          sourceFindHighlightExtension,
+          EditorView.lineWrapping,
+          EditorView.updateListener.of(update => {
+            if (update.docChanged) {
+              const newText = update.state.doc.toString()
+              lastTextRef.current = newText
+              setText(newText)
+            }
+          }),
+        ],
+      }),
+      parent: containerRef.current,
+    })
+
+    viewRef.current = view
+    setSourceView(view)
+    return () => {
+      setSourceView(null)
+      view.destroy()
+      viewRef.current = null
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Sync external text changes (e.g. switching back from formatted view)
+  useEffect(() => {
+    const view = viewRef.current
+    if (!view || text === lastTextRef.current) return
+    lastTextRef.current = text
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: text },
+    })
+  }, [text])
+
+  return <div ref={containerRef} className="cs-source-view" />
+}

package/src/source/find-highlight-source.ts

@@ -0,0 +1,57 @@
+import { StateEffect, StateField } from '@codemirror/state'
+import { Decoration, EditorView } from '@codemirror/view'
+import type { DecorationSet } from '@codemirror/view'
+import { getSourceView } from '../editor/editor-bus'
+
+export interface SourceMatch {
+  start: number
+  end: number
+}
+
+const setMatchesEffect = StateEffect.define<{ matches: SourceMatch[]; activeIndex: number }>()
+
+function buildDecorations(matches: SourceMatch[], activeIndex: number, docLength: number): DecorationSet {
+  if (matches.length === 0) return Decoration.none
+  const decos = matches
+    .filter(m => m.start >= 0 && m.end <= docLength && m.start < m.end)
+    .map((m, i) => Decoration.mark({ class: i === activeIndex ? 'cs-find-active' : 'cs-find-match' }).range(m.start, m.end))
+  return Decoration.set(decos, true)
+}
+
+const findHighlightField = StateField.define<DecorationSet>({
+  create() {
+    return Decoration.none
+  },
+  update(deco, tr) {
+    deco = deco.map(tr.changes)
+    for (const effect of tr.effects) {
+      if (effect.is(setMatchesEffect)) {
+        deco = buildDecorations(effect.value.matches, effect.value.activeIndex, tr.state.doc.length)
+      }
+    }
+    return deco
+  },
+  provide: field => EditorView.decorations.from(field),
+})
+
+/** CodeMirror extension providing find-match highlighting in source view. */
+export const sourceFindHighlightExtension = findHighlightField
+
+/** Called by FindReplace whenever matches or active index change in source mode. */
+export function setSourceFindHighlights(matches: SourceMatch[], activeIndex: number): void {
+  const view = getSourceView()
+  if (!view) return
+  view.dispatch({ effects: setMatchesEffect.of({ matches, activeIndex }) })
+}
+
+/** Called by FindReplace when the panel closes — clears all source-view highlights. */
+export function clearSourceFindHighlights(): void {
+  setSourceFindHighlights([], 0)
+}
+
+/** Scroll the source view so the given match is visible. */
+export function scrollToSourceMatch(match: SourceMatch): void {
+  const view = getSourceView()
+  if (!view) return
+  view.dispatch({ effects: EditorView.scrollIntoView(match.start, { y: 'center' }) })
+}

package/src/source/sutra-lang.ts

@@ -0,0 +1,121 @@
+import { StreamLanguage, LanguageSupport } from '@codemirror/language'
+
+type State = {
+  inFrontmatter: boolean
+  lineNum: number
+  afterCharacter: boolean
+}
+
+const sutra = StreamLanguage.define<State>({
+  name: 'sutra',
+
+  startState: () => ({ inFrontmatter: false, lineNum: 0, afterCharacter: false }),
+
+  token(stream, state) {
+    state.lineNum++
+
+    // Blank line — reset dialogue context, emit nothing
+    if (stream.match(/^\s*$/)) {
+      state.afterCharacter = false
+      return null
+    }
+
+    // Frontmatter delimiter ---
+    if (state.lineNum === 1 && stream.match(/^---\s*$/)) {
+      state.inFrontmatter = true
+      return 'keyword'
+    }
+    if (state.inFrontmatter) {
+      if (stream.match(/^---\s*$/)) {
+        state.inFrontmatter = false
+        return 'keyword'
+      }
+      // key: value lines inside frontmatter
+      if (stream.match(/^[A-Za-z][A-Za-z ]*:/)) return 'attributeName'
+      stream.skipToEnd()
+      return 'string'
+    }
+
+    // Page break ===
+    if (stream.match(/^===\s*$/)) {
+      state.afterCharacter = false
+      return 'punctuation'
+    }
+
+    // Comment <!-- ... -->
+    if (stream.match(/^<!--[\s\S]*?-->\s*$/)) {
+      state.afterCharacter = false
+      return 'comment'
+    }
+
+    // Note [[ ... ]]
+    if (stream.match(/^\[\[[\s\S]*?\]\]\s*$/)) {
+      state.afterCharacter = false
+      return 'comment'
+    }
+
+    // Scene heading ## ...
+    if (stream.match(/^##/)) {
+      stream.skipToEnd()
+      state.afterCharacter = false
+      return 'keyword'
+    }
+
+    // Section heading # ...
+    if (stream.match(/^#(?!#)/)) {
+      stream.skipToEnd()
+      state.afterCharacter = false
+      return 'heading'
+    }
+
+    // Scene metadata & key: value
+    if (stream.match(/^&\s/)) {
+      stream.skipToEnd()
+      state.afterCharacter = false
+      return 'attributeName'
+    }
+
+    // Character cue @name ...
+    if (stream.match(/^@/)) {
+      stream.skipToEnd()
+      state.afterCharacter = true
+      return 'variableName'
+    }
+
+    // Centered or transition >> ...
+    if (stream.match(/^>>/)) {
+      stream.skipToEnd()
+      state.afterCharacter = false
+      return 'operator'
+    }
+
+    // Lyrics ~ ...
+    if (stream.match(/^~\s/)) {
+      stream.skipToEnd()
+      state.afterCharacter = false
+      return 'meta'
+    }
+
+    // Parenthetical (inside dialogue context)
+    if (state.afterCharacter && stream.match(/^\(/)) {
+      stream.skipToEnd()
+      return 'string'
+    }
+
+    // Dialogue (inside dialogue context) — styled differently from action
+    if (state.afterCharacter) {
+      stream.skipToEnd()
+      return 'labelName'
+    }
+
+    // Action — unstyled
+    stream.skipToEnd()
+    return null
+  },
+
+  blankLine(state) {
+    state.afterCharacter = false
+  },
+})
+
+export const sutraLanguage = new LanguageSupport(sutra)