@sutrata/editor 0.1.1 → 0.2.0

package/src/shell/icons.tsx

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

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

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

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

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