@sutrata/editor 0.1.0

package/dist/shell/icons.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+type IconProps = {
+    size?: number;
+};
+export declare const NavigatorIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const TitlePageIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const NewIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const OpenIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const ImportDocxIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const StyleIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const SaveIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const SaveAsIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const UndoIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const RedoIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const SceneIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const ActionIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const CharacterIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const DialogueIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const ParentheticalIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const TransitionIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const CenteredIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const LyricsIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const NoteIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const PageBreakIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const SectionIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const BoldIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const ItalicIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const UnderlineIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const SourceIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const FormattedIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const RibbonIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const ExportIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const SettingsIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const OverflowIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const EyeIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const EyeOffIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const LockIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const StatsIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const HistoryIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const MicIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const SparklesIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const ClockIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const MenuIcon: ({ size }: IconProps) => React.JSX.Element;
+export declare const CloseIcon: ({ size }: IconProps) => React.JSX.Element;
+export {};

package/dist/shell/icons.js

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

package/dist/shell/toolbar-actions.d.ts

@@ -0,0 +1,6 @@
+import type { Command } from 'prosemirror-state';
+import { undo, redo } from 'prosemirror-history';
+export declare function makeSetBlock(typeName: string, attrs?: Record<string, unknown>): Command;
+export declare function makeToggleMark(markName: string): Command;
+export declare function makeSetOrToggleNote(): Command;
+export { undo, redo };

package/dist/shell/toolbar-actions.js

@@ -0,0 +1,58 @@
+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, attrs = {}) {
+    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) {
+    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() {
+    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/dist/source/SourceView.d.ts

@@ -0,0 +1 @@
+export declare function SourceView(): import("react").JSX.Element;

package/dist/source/SourceView.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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(null);
+    const viewRef = useRef(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 _jsx("div", { ref: containerRef, className: "cs-source-view" });
+}

package/dist/source/find-highlight-source.d.ts

@@ -0,0 +1,14 @@
+import { StateField } from '@codemirror/state';
+import type { DecorationSet } from '@codemirror/view';
+export interface SourceMatch {
+    start: number;
+    end: number;
+}
+/** CodeMirror extension providing find-match highlighting in source view. */
+export declare const sourceFindHighlightExtension: StateField<DecorationSet>;
+/** Called by FindReplace whenever matches or active index change in source mode. */
+export declare function setSourceFindHighlights(matches: SourceMatch[], activeIndex: number): void;
+/** Called by FindReplace when the panel closes — clears all source-view highlights. */
+export declare function clearSourceFindHighlights(): void;
+/** Scroll the source view so the given match is visible. */
+export declare function scrollToSourceMatch(match: SourceMatch): void;

package/dist/source/find-highlight-source.js

@@ -0,0 +1,47 @@
+import { StateEffect, StateField } from '@codemirror/state';
+import { Decoration, EditorView } from '@codemirror/view';
+import { getSourceView } from '../editor/editor-bus';
+const setMatchesEffect = StateEffect.define();
+function buildDecorations(matches, activeIndex, docLength) {
+    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({
+    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, activeIndex) {
+    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() {
+    setSourceFindHighlights([], 0);
+}
+/** Scroll the source view so the given match is visible. */
+export function scrollToSourceMatch(match) {
+    const view = getSourceView();
+    if (!view)
+        return;
+    view.dispatch({ effects: EditorView.scrollIntoView(match.start, { y: 'center' }) });
+}

package/dist/source/sutra-lang.d.ts

@@ -0,0 +1,2 @@
+import { LanguageSupport } from '@codemirror/language';
+export declare const sutraLanguage: LanguageSupport;

package/dist/source/sutra-lang.js

@@ -0,0 +1,97 @@
+import { StreamLanguage, LanguageSupport } from '@codemirror/language';
+const sutra = StreamLanguage.define({
+    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);

package/dist/spellcheck/dictionaries.d.ts

@@ -0,0 +1,9 @@
+export interface DictionaryManifest {
+    aff: string;
+    dic: string;
+}
+/**
+ * Dictionary manifest: maps BCP-47 language code → asset paths under public/dict/.
+ * The actual .dic/.aff files are not committed; see public/dict/README.md for acquisition.
+ */
+export declare const DICTIONARIES: Record<string, DictionaryManifest>;

package/dist/spellcheck/dictionaries.js

@@ -0,0 +1,16 @@
+/**
+ * Dictionary manifest: maps BCP-47 language code → asset paths under public/dict/.
+ * The actual .dic/.aff files are not committed; see public/dict/README.md for acquisition.
+ */
+export const DICTIONARIES = {
+    'en': { aff: '/dict/en_US.aff', dic: '/dict/en_US.dic' },
+    'hi': { aff: '/dict/hi_IN.aff', dic: '/dict/hi_IN.dic' },
+    'ta': { aff: '/dict/ta_IN.aff', dic: '/dict/ta_IN.dic' },
+    'te': { aff: '/dict/te_IN.aff', dic: '/dict/te_IN.dic' },
+    'kn': { aff: '/dict/kn_IN.aff', dic: '/dict/kn_IN.dic' },
+    'ml': { aff: '/dict/ml_IN.aff', dic: '/dict/ml_IN.dic' },
+    'bn': { aff: '/dict/bn_IN.aff', dic: '/dict/bn_IN.dic' },
+    'gu': { aff: '/dict/gu_IN.aff', dic: '/dict/gu_IN.dic' },
+    'pa': { aff: '/dict/pa_IN.aff', dic: '/dict/pa_IN.dic' },
+    'or': { aff: '/dict/or_IN.aff', dic: '/dict/or_IN.dic' },
+};

package/dist/spellcheck/hunspell.d.ts

@@ -0,0 +1,23 @@
+export interface SpellChecker {
+    check(word: string): boolean;
+    suggest(word: string): string[];
+}
+/**
+ * Load a dictionary for the given language.
+ * In production: fetches .dic file, parses word list.
+ * In test/jsdom: fetch will fail gracefully, returning an empty checker.
+ */
+export declare function loadDictionary(lang: string): Promise<SpellChecker>;
+/**
+ * Add a word to the custom dictionary for a language.
+ * Persists in-memory; production would write to IndexedDB.
+ */
+export declare function addToCustomDictionary(lang: string, word: string): void;
+/**
+ * Create a spell checker from a word list (for testing).
+ */
+export declare function createCheckerFromWords(words: string[]): SpellChecker;
+/**
+ * Clear cached checkers (for testing).
+ */
+export declare function clearCheckerCache(): void;

package/dist/spellcheck/hunspell.js

@@ -0,0 +1,94 @@
+import { DICTIONARIES } from './dictionaries';
+/**
+ * In-memory dictionary: Set-based word lookup.
+ * Production: load from .dic file; tests: use fixture words.
+ */
+class SimpleSpellChecker {
+    words;
+    customWords;
+    constructor(words) {
+        this.words = new Set(words.map(w => w.toLowerCase().trim()).filter(Boolean));
+        this.customWords = new Set();
+    }
+    check(word) {
+        const lower = word.toLowerCase();
+        return this.words.has(lower) || this.customWords.has(lower);
+    }
+    suggest(_word) {
+        // Minimal: return empty (full Hunspell suggestions require .aff parsing)
+        return [];
+    }
+    addCustomWord(word) {
+        this.customWords.add(word.toLowerCase());
+    }
+}
+// Cache: lang → checker
+const checkerCache = new Map();
+// Custom words per-project (in-memory; production uses IndexedDB)
+const customWords = new Map();
+/**
+ * Load a dictionary for the given language.
+ * In production: fetches .dic file, parses word list.
+ * In test/jsdom: fetch will fail gracefully, returning an empty checker.
+ */
+export async function loadDictionary(lang) {
+    if (checkerCache.has(lang)) {
+        return checkerCache.get(lang);
+    }
+    const manifest = DICTIONARIES[lang];
+    if (!manifest) {
+        // Fallback: empty checker for unknown language codes
+        const checker = new SimpleSpellChecker([]);
+        checkerCache.set(lang, checker);
+        return checker;
+    }
+    try {
+        // Fetch .dic file (word list, one per line)
+        const response = await fetch(manifest.dic);
+        if (!response.ok)
+            throw new Error(`Failed to load dictionary: ${manifest.dic}`);
+        const text = await response.text();
+        const words = text.split('\n').filter(Boolean);
+        const checker = new SimpleSpellChecker(words);
+        // Apply any cached custom words
+        const custom = customWords.get(lang);
+        if (custom) {
+            for (const w of custom)
+                checker.addCustomWord(w);
+        }
+        checkerCache.set(lang, checker);
+        return checker;
+    }
+    catch {
+        // Network unavailable (expected in dev/CI without dict files)
+        const checker = new SimpleSpellChecker([]);
+        checkerCache.set(lang, checker);
+        return checker;
+    }
+}
+/**
+ * Add a word to the custom dictionary for a language.
+ * Persists in-memory; production would write to IndexedDB.
+ */
+export function addToCustomDictionary(lang, word) {
+    if (!customWords.has(lang))
+        customWords.set(lang, new Set());
+    customWords.get(lang).add(word.toLowerCase());
+    // Update cached checker if loaded
+    const checker = checkerCache.get(lang);
+    if (checker)
+        checker.addCustomWord(word);
+}
+/**
+ * Create a spell checker from a word list (for testing).
+ */
+export function createCheckerFromWords(words) {
+    return new SimpleSpellChecker(words);
+}
+/**
+ * Clear cached checkers (for testing).
+ */
+export function clearCheckerCache() {
+    checkerCache.clear();
+    customWords.clear();
+}

package/dist/spellcheck/spellcheck-plugin.d.ts

@@ -0,0 +1,18 @@
+import { Plugin } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+export declare function setSpellcheckLanguage(lang: string): void;
+/**
+ * Tokenize text into words (splitting on whitespace and punctuation).
+ * Returns array of {word, start, end} with character offsets.
+ * Uses Unicode letter/mark categories to support Indic scripts.
+ */
+export declare function tokenizeWords(text: string): Array<{
+    word: string;
+    start: number;
+    end: number;
+}>;
+/**
+ * ProseMirror plugin that underlines misspelled words via Decoration API.
+ * Recomputes decorations on every doc change.
+ */
+export declare function createSpellcheckPlugin(): Plugin<DecorationSet>;