@sutrata/editor 0.1.0

package/dist/shell/LanguageStatus.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { useLanguage } from '../i18n/LanguageContext';
+import { useDocument } from '../context/DocumentContext';
+import { getEditorView } from '../editor/editor-bus';
+const LANG_NAMES = {
+    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(null);
+    const langName = LANG_NAMES[currentLanguage] ?? currentLanguage;
+    useEffect(() => {
+        if (!menuOpen)
+            return;
+        const handleClickOutside = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                setMenuOpen(false);
+            }
+        };
+        const handleKeyDown = (e) => {
+            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) => {
+        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 (_jsxs("div", { className: "cs-lang-status", ref: menuRef, children: [_jsxs("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), children: [_jsx("span", { className: "cs-lang-pill-script", children: "\u0905/A" }), _jsx("span", { className: "cs-lang-code", children: currentLanguage.toUpperCase() })] }), menuOpen && (_jsx("div", { className: "cs-lang-menu", role: "menu", "aria-label": "Script languages", children: Object.entries(LANG_NAMES).map(([code, name]) => {
+                    const isActive = currentLanguage === code;
+                    return (_jsxs("button", { type: "button", role: "menuitem", className: `cs-lang-option${isActive ? ' cs-lang-active' : ''}`, onClick: (e) => {
+                            e.stopPropagation();
+                            handleSelectLanguage(code);
+                        }, children: [_jsx("span", { children: name }), _jsx("span", { className: "cs-lang-code", style: { fontSize: '10px', opacity: 0.7 }, children: code.toUpperCase() })] }, code));
+                }) }))] }));
+}

package/dist/shell/StatusBar.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function StatusBar(): React.JSX.Element;

package/dist/shell/StatusBar.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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([]);
+    useEffect(() => {
+        return subscribeToAICalls(setActiveCalls);
+    }, []);
+    if (activeCalls.length === 0)
+        return null;
+    return (_jsxs("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',
+        }, children: [_jsx("span", { className: "cs-spinner", style: { width: '10px', height: '10px', borderWidth: '1.5px' } }), _jsx("span", { children: formatActiveCalls(activeCalls) })] }));
+}
+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 (_jsxs(_Fragment, { children: [_jsxs("footer", { className: "cs-status-bar", role: "contentinfo", "aria-label": "Status bar", children: [_jsxs("div", { className: "cs-sb-left", children: [_jsxs("span", { className: "cs-sb-metric cs-sb-metric-scenes", title: t('statusbar.scenesTooltip'), children: [_jsx("strong", { children: scenes.length }), " ", _jsx("span", { className: "cs-sb-metric-label", children: scenes.length === 1 ? t('statusbar.scene') : t('statusbar.scenes') })] }), _jsx("span", { className: "cs-sb-sep", children: "\u2022" }), _jsxs("span", { className: "cs-sb-metric cs-sb-metric-pages", title: t('statusbar.pagesTooltip'), children: [_jsxs("strong", { children: ["~", pageEstimate] }), " ", _jsx("span", { className: "cs-sb-metric-label", children: pageEstimate === 1 ? t('statusbar.page') : t('statusbar.pages') })] }), _jsx("span", { className: "cs-sb-sep cs-sb-words-sep", children: "\u2022" }), _jsxs("span", { className: "cs-sb-metric cs-sb-metric-words", title: t('statusbar.wordsTooltip'), children: [_jsx("strong", { children: wordCount.toLocaleString() }), " ", _jsx("span", { className: "cs-sb-metric-label", children: t('statusbar.words') })] })] }), _jsx("div", { className: "cs-sb-center", children: _jsxs("div", { className: "cs-sb-save", role: "status", "aria-live": "polite", title: saveTooltip, children: [_jsx("span", { className: `cs-sb-dot ${isDirty ? 'cs-sb-dot-dirty' : 'cs-sb-dot-clean'}` }), _jsx("span", { className: isDirty ? 'cs-sb-save-dirty' : 'cs-sb-save-clean', children: saveLabel })] }) }), _jsxs("div", { className: "cs-sb-right", children: [_jsx(AIStatusBarStatus, {}), filePath && versions.length > 0 && (_jsxs("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' }, children: [_jsx(HistoryIcon, { size: 13 }), _jsx("span", { children: versions.length })] })), _jsxs("button", { type: "button", className: "cs-nav-action-btn", onClick: () => setStatsOpen(true), title: t('statusbar.statsTooltip'), style: { fontSize: '11px', gap: '4px', padding: '2px 6px' }, children: [_jsx(StatsIcon, { size: 13 }), _jsx("span", { children: t('statusbar.statsButton') })] }), _jsx(LanguageStatus, {})] })] }), statsOpen && _jsx(StatisticsDialog, { onClose: () => setStatsOpen(false) }), filePath && (_jsx(VersionHistory, { versions: versions, filePath: filePath, onRestore: restoreVersion, onClearAll: clearVersionHistory, visible: versionHistoryVisible, onClose: () => setVersionHistoryVisible(false) }))] }));
+}

package/dist/shell/SutrataLogo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface LogoProps {
+    size?: number;
+    className?: string;
+    showText?: boolean;
+}
+export declare function SutrataLogo({ size, className, showText }: LogoProps): React.JSX.Element;
+export {};

package/dist/shell/SutrataLogo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MONOGRAM_ASPECT = 231.65818 / 324.60373;
+export function SutrataLogo({ size = 20, className = '', showText = true }) {
+    const height = size;
+    const width = size * MONOGRAM_ASPECT;
+    return (_jsxs("div", { className: `cs-brand-mark ${className}`, style: { display: 'inline-flex', alignItems: 'center', gap: '7px', userSelect: 'none' }, children: [_jsx("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 }, children: _jsxs("g", { transform: "translate(-3.0466903,-3.069361)", children: [_jsxs("g", { children: [_jsx("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" }), _jsx("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" }), _jsxs("g", { children: [_jsx("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" }), _jsx("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" }), _jsx("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" })] })] }), _jsxs("g", { transform: "rotate(180,118.87578,165.37123)", children: [_jsx("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" }), _jsx("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" }), _jsxs("g", { children: [_jsx("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" }), _jsx("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" }), _jsx("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" })] })] }), _jsxs("g", { transform: "matrix(1.1983554,-0.06280315,0.06280315,1.1983554,-34.773977,-29.239318)", children: [_jsx("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" }), _jsx("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" }), _jsx("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" })] })] }) }), showText && (_jsx("span", { className: "cs-brand-text", style: { fontWeight: 700, fontSize: '11px', letterSpacing: '1.2px', textTransform: 'uppercase', color: 'var(--cs-ui-accent-badge, #d97706)' }, children: "Sutrata" }))] }));
+}

package/dist/shell/Toast.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ToastItem {
+    id: string;
+    message: string;
+    type?: 'info' | 'success' | 'warn' | 'error';
+}
+interface ToastContainerProps {
+    toasts: ToastItem[];
+    onDismiss: (id: string) => void;
+}
+export declare function ToastContainer({ toasts, onDismiss }: ToastContainerProps): React.JSX.Element;
+export {};

package/dist/shell/Toast.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+export function ToastContainer({ toasts, onDismiss }) {
+    return (_jsx("div", { className: "cs-toast-container", "aria-live": "polite", "aria-atomic": "true", children: toasts.map((toast) => (_jsx(ToastMessage, { toast: toast, onDismiss: onDismiss }, toast.id))) }));
+}
+function ToastMessage({ toast, onDismiss }) {
+    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 (_jsx("div", { className: `cs-toast ${typeClass}`, role: "status", children: _jsx("span", { children: toast.message }) }));
+}

package/dist/shell/ToolbarButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ToolbarButtonProps {
+    label: string;
+    sigil?: string;
+    shortcut?: string;
+    active?: boolean;
+    onClick: () => void;
+    children: React.ReactNode;
+}
+export declare function ToolbarButton({ label, sigil, shortcut, active, onClick, children }: ToolbarButtonProps): React.JSX.Element;
+export {};

package/dist/shell/ToolbarButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ToolbarButton({ label, sigil, shortcut, active, onClick, children }) {
+    return (_jsxs("button", { type: "button", "aria-label": label, className: `cs-tb-btn${active ? ' cs-tb-active' : ''}`, onClick: onClick, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: children }), _jsxs("span", { className: "cs-tb-tip", role: "tooltip", children: [_jsx("span", { children: label }), sigil ? _jsx("span", { className: "cs-tb-sigil", children: sigil }) : null, shortcut ? _jsx("span", { className: "cs-tb-key", children: shortcut }) : null] })] }));
+}

package/dist/shell/VersionHistory.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { VersionEntry } from '../types';
+interface VersionHistoryProps {
+    versions: VersionEntry[];
+    filePath: string | null;
+    onRestore: (entry: VersionEntry) => void;
+    onClearAll: () => Promise<void>;
+    visible: boolean;
+    onClose: () => void;
+}
+export declare function VersionHistory({ versions, filePath, onRestore, onClearAll, visible, onClose }: VersionHistoryProps): React.JSX.Element | null;
+export {};

package/dist/shell/VersionHistory.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { diffWordsWithSpace } from 'diff';
+// 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, newText) {
+    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) {
+    return new Date(ts).toLocaleString(undefined, {
+        month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit',
+    });
+}
+export function VersionHistory({ versions, filePath, onRestore, onClearAll, visible, onClose }) {
+    const [selectedId, setSelectedId] = useState(null);
+    const diffScrollRef = useRef(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());
+    const [markers, setMarkers] = useState([]);
+    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 = [];
+        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 = [];
+        let lastTop = -Infinity;
+        let lastType = 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) => {
+        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 (_jsx("div", { className: "cs-dialog-overlay", role: "presentation", onClick: e => { if (e.target === e.currentTarget)
+            onClose(); }, children: _jsxs("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' }, children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-version-dialog-title", className: "cs-panel-title", children: "Version History" }), _jsx("button", { className: "cs-panel-close", onClick: onClose, "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { className: "cs-version-body", children: [_jsx("div", { className: "cs-version-list", children: versions.length === 0 ? (_jsx("div", { className: "cs-version-empty", children: "No versions saved yet" })) : (versions.map((v, idx) => (_jsxs("button", { type: "button", className: `cs-version-list-item${selectedId === v.id ? ' cs-version-list-item-active' : ''}`, onClick: () => setSelectedId(v.id), children: [_jsx("div", { className: "cs-version-list-item-label", children: idx === 0 ? 'Current' : formatTimestamp(v.timestamp) }), idx !== 0 && _jsx("div", { className: "cs-version-list-item-date", children: formatTimestamp(v.timestamp) })] }, v.id)))) }), _jsxs("div", { className: "cs-version-diff-wrap", children: [_jsx("div", { className: "cs-version-diff", ref: diffScrollRef, children: !selectedVersion ? (_jsx("div", { className: "cs-version-empty", children: "Select a version to compare against the current document" })) : selectedVersion.id === currentVersion?.id ? (_jsx("div", { className: "cs-version-empty", children: "This is the current version" })) : diff ? (diff.every(part => !part.added && !part.removed) ? (_jsx("div", { className: "cs-version-empty", children: "No differences from the current version" })) : (_jsx("div", { className: "cs-version-diff-content", children: diff.map((part, i) => {
+                                            const isChange = part.added || part.removed;
+                                            return (_jsx("span", { 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, children: part.value }, i));
+                                        }) }))) : null }), _jsx("div", { className: "cs-version-diff-minimap", "aria-hidden": "true", children: markers.map((m, i) => (_jsx("button", { 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) }, i))) })] })] }), _jsxs("div", { className: "cs-version-footer", children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel cs-version-clear-btn", onClick: () => void onClearAll(), disabled: versions.length === 0, children: "Delete Version History" }), _jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel", onClick: onClose, children: "Close" }), selectedVersion && selectedVersion.id !== currentVersion?.id && (_jsx("button", { type: "button", className: "cs-confirm-btn-primary", onClick: () => onRestore(selectedVersion), children: "Restore This Version" }))] })] })] }) }));
+}

package/dist/shell/Watermark.d.ts

@@ -0,0 +1,3 @@
+/** Renders the document's frontmatter `watermark:` text.
+ *  Hidden in the screen editor UI, visible only in print output. */
+export declare function Watermark(): import("react").JSX.Element | null;

package/dist/shell/Watermark.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 _jsx("div", { className: "cs-watermark", "aria-hidden": "true", children: watermarkText });
+}