@sutrata/editor 0.1.0

package/dist/navigator/StatisticsDialog.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDocument } from '../context/DocumentContext';
+import { extractWorkflowData } from '../file/workflow-reports';
+import { getEditorView } from '../editor/editor-bus';
+import { schema } from '../editor/schema';
+export function StatisticsDialog({ onClose }) {
+    const { ast, text, setText } = useDocument();
+    const { scenes, characters } = extractWorkflowData(ast);
+    const handleUpdateActor = (charName, actorName) => {
+        const cleanChar = charName.trim().toUpperCase();
+        if (!cleanChar)
+            return;
+        const view = getEditorView();
+        const key = `characters.${cleanChar}`;
+        if (view) {
+            let tr = view.state.tr;
+            let titlePagePos = null;
+            view.state.doc.forEach((node, offset) => {
+                if (node.type.name === 'title_page')
+                    titlePagePos = offset;
+            });
+            if (titlePagePos !== null) {
+                const tpNode = view.state.doc.nodeAt(titlePagePos);
+                let existingPos = null;
+                let pos = titlePagePos + 1; // inside title_page
+                tpNode.forEach((field) => {
+                    if (field.attrs['fmKey'] === key) {
+                        existingPos = pos;
+                    }
+                    pos += field.nodeSize;
+                });
+                if (existingPos !== null) {
+                    const fieldNode = view.state.doc.nodeAt(existingPos);
+                    if (actorName.trim() === '') {
+                        tr = tr.delete(existingPos, existingPos + fieldNode.nodeSize);
+                    }
+                    else {
+                        tr = tr.replaceWith(existingPos + 1, existingPos + fieldNode.nodeSize - 1, schema.text(actorName));
+                    }
+                }
+                else if (actorName.trim() !== '') {
+                    const insertPos = titlePagePos + tpNode.nodeSize - 1; // end of title_page
+                    const newField = schema.nodes['frontmatter_field'].create({ fmKey: key }, schema.text(actorName));
+                    tr = tr.insert(insertPos, newField);
+                }
+                view.dispatch(tr);
+            }
+            else {
+                const freshText = updateActorInText(text, cleanChar, actorName);
+                setText(freshText);
+            }
+        }
+        else {
+            const freshText = updateActorInText(text, cleanChar, actorName);
+            setText(freshText);
+        }
+    };
+    // Word count helper
+    const wordCount = text.split(/\s+/).filter(Boolean).length;
+    // Sum up estimated duration. Each scene's est-duration is "MM:SS" — sum
+    // in seconds and only convert to minutes/hours once, at the end. Summing
+    // the MM parts alone (the previous approach) silently dropped every
+    // scene's seconds component, undercounting the total by tens of minutes
+    // on a script with many scenes.
+    let totalSeconds = 0;
+    scenes.forEach(s => {
+        const match = /^(\d+):(\d{1,2})$/.exec(s.estDuration.trim());
+        if (match && match[1] && match[2]) {
+            totalSeconds += Number.parseInt(match[1], 10) * 60 + Number.parseInt(match[2], 10);
+        }
+    });
+    const totalMinutes = Math.round(totalSeconds / 60);
+    const totalDurationLabel = totalSeconds === 0
+        ? 'TBD'
+        : totalMinutes >= 60
+            ? `${Math.floor(totalMinutes / 60)}h ${totalMinutes % 60}m`
+            : `${totalMinutes} min`;
+    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-stats-dialog-title", style: { maxWidth: '640px', width: '92%', maxHeight: '85vh', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-stats-dialog-title", className: "cs-panel-title", children: "Script Statistics" }), _jsx("button", { className: "cs-panel-close", onClick: onClose, "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { className: "cs-panel-body", style: { overflowY: 'auto', flex: 1, padding: '20px' }, children: [_jsxs("div", { className: "cs-stats-summary-grid", children: [_jsxs("div", { className: "cs-stats-card", children: [_jsx("div", { className: "cs-stats-card-val", children: scenes.length }), _jsx("div", { className: "cs-stats-card-lbl", children: "Scenes" })] }), _jsxs("div", { className: "cs-stats-card", children: [_jsx("div", { className: "cs-stats-card-val", children: wordCount.toLocaleString() }), _jsx("div", { className: "cs-stats-card-lbl", children: "Words" })] }), _jsxs("div", { className: "cs-stats-card", children: [_jsx("div", { className: "cs-stats-card-val", children: totalDurationLabel }), _jsx("div", { className: "cs-stats-card-lbl", children: "Est. Duration" })] })] }), _jsxs("div", { className: "cs-stats-section-hdr", children: ["Cast List & Occurrences (", characters.length, ")"] }), characters.length === 0 ? (_jsx("div", { style: { color: 'var(--cs-ui-text-light-muted, #8c897f)', fontStyle: 'italic', fontSize: '12px' }, children: "No character cues detected in the screenplay yet." })) : (_jsxs("table", { className: "cs-stats-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { textAlign: 'left', width: '35%' }, children: "Character" }), _jsx("th", { style: { textAlign: 'left' }, children: "Actor" }), _jsx("th", { style: { textAlign: 'center', width: '15%' }, children: "Scenes" })] }) }), _jsx("tbody", { children: characters.map((c, i) => (_jsxs("tr", { children: [_jsx("td", { style: { fontWeight: '600' }, children: c.name }), _jsx("td", { children: _jsx("input", { type: "text", className: "cs-stats-actor-input", value: c.actor, onChange: (e) => handleUpdateActor(c.name, e.target.value), placeholder: "Assign actor...", "aria-label": `Actor for ${c.name}` }) }), _jsx("td", { style: { textAlign: 'center', fontWeight: '500' }, children: c.sceneCount })] }, i))) })] }))] }), _jsx("div", { style: {
+                        borderTop: '1px solid var(--cs-ui-border-light-subtle, #eeece4)',
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        padding: '12px 20px',
+                        background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)',
+                    }, children: _jsx("button", { type: "button", className: "cs-confirm-btn-primary", onClick: onClose, children: "Close" }) })] }) }));
+}
+function updateActorInText(text, charName, actorName) {
+    const lines = text.split('\n');
+    const fmStartIndex = lines.indexOf('---');
+    if (fmStartIndex === -1) {
+        return `---\ncharacters:\n  ${charName}: ${actorName}\n---\n\n${text}`;
+    }
+    const fmEndIndex = lines.indexOf('---', fmStartIndex + 1);
+    if (fmEndIndex === -1)
+        return text;
+    const fmLines = lines.slice(fmStartIndex + 1, fmEndIndex);
+    let charsLineIdx = -1;
+    for (let i = 0; i < fmLines.length; i++) {
+        if (fmLines[i].trim() === 'characters:') {
+            charsLineIdx = i;
+            break;
+        }
+    }
+    const cleanChar = charName.toUpperCase();
+    if (charsLineIdx === -1) {
+        if (actorName.trim() !== '') {
+            fmLines.push('characters:');
+            fmLines.push(`  ${cleanChar}: ${actorName}`);
+        }
+    }
+    else {
+        let insertIdx = charsLineIdx + 1;
+        let charLineIdx = -1;
+        while (insertIdx < fmLines.length) {
+            const line = fmLines[insertIdx];
+            if (!line.startsWith('  ') && line.trim() !== '') {
+                break;
+            }
+            const match = /^\s+([A-Za-z0-9_ -]+)\s*:(.*)/.exec(line);
+            if (match && match[1]?.trim().toUpperCase() === cleanChar) {
+                charLineIdx = insertIdx;
+                break;
+            }
+            insertIdx++;
+        }
+        if (charLineIdx !== -1) {
+            if (actorName.trim() === '') {
+                fmLines.splice(charLineIdx, 1);
+            }
+            else {
+                fmLines[charLineIdx] = `  ${cleanChar}: ${actorName}`;
+            }
+        }
+        else if (actorName.trim() !== '') {
+            fmLines.splice(insertIdx, 0, `  ${cleanChar}: ${actorName}`);
+        }
+    }
+    const newLines = [
+        ...lines.slice(0, fmStartIndex + 1),
+        ...fmLines,
+        ...lines.slice(fmEndIndex)
+    ];
+    return newLines.join('\n');
+}

package/dist/navigator/scene-list.d.ts

@@ -0,0 +1,16 @@
+export interface SceneEntry {
+    id: string | null;
+    heading: string;
+    synopsis: string;
+    status: string;
+    tags: string[];
+    location: string;
+    index: number;
+    textOffset: number;
+    estDuration?: string;
+}
+/**
+ * Derive a flat scene list from Sutra source text.
+ * Scenes are identified by scene heading lines (## prefix).
+ */
+export declare function buildSceneList(text: string): SceneEntry[];

package/dist/navigator/scene-list.js

@@ -0,0 +1,70 @@
+/**
+ * Derive a flat scene list from Sutra source text.
+ * Scenes are identified by scene heading lines (## prefix).
+ */
+export function buildSceneList(text) {
+    const lines = text.split('\n');
+    const scenes = [];
+    let sceneIndex = 0;
+    let currentOffset = 0;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i] ?? '';
+        const trimmed = line.trim();
+        // Scene headings start with ## (Sutra sigil)
+        if (trimmed.startsWith('## ') || trimmed.startsWith('##\t')) {
+            const headingRaw = trimmed.slice(3).trim();
+            const sceneStart = currentOffset;
+            // Extract scene id from inline {#...} on the heading line, then strip it
+            const idMatch = /\{#([^}]+)\}/.exec(headingRaw);
+            const sceneId = idMatch?.[1] ?? null;
+            const heading = headingRaw.replace(/\s*\{#[^}]+\}/, '').trim();
+            // Collect metadata (& key: value) until next heading
+            let synopsis = '';
+            let status = '';
+            let tags = [];
+            let location = '';
+            let estDuration = '';
+            let j = i + 1;
+            while (j < lines.length) {
+                const nextLine = (lines[j] ?? '').trim();
+                if (nextLine.startsWith('## ') || nextLine.startsWith('##\t'))
+                    break;
+                if (nextLine.startsWith('& synopsis:')) {
+                    if (!synopsis)
+                        synopsis = nextLine.replace('& synopsis:', '').trim();
+                }
+                else if (nextLine.startsWith('& status:')) {
+                    status = nextLine.replace('& status:', '').trim();
+                }
+                else if (nextLine.startsWith('& tags:')) {
+                    tags = nextLine
+                        .replace('& tags:', '')
+                        .trim()
+                        .split(',')
+                        .map((t) => t.trim())
+                        .filter(Boolean);
+                }
+                else if (nextLine.startsWith('& location:')) {
+                    location = nextLine.replace('& location:', '').trim();
+                }
+                else if (nextLine.startsWith('& est-duration:')) {
+                    estDuration = nextLine.replace('& est-duration:', '').trim();
+                }
+                j++;
+            }
+            scenes.push({
+                id: sceneId,
+                heading,
+                synopsis,
+                status,
+                tags,
+                location,
+                estDuration: estDuration || undefined,
+                index: ++sceneIndex,
+                textOffset: sceneStart,
+            });
+        }
+        currentOffset += (line?.length ?? 0) + 1; // +1 for \n
+    }
+    return scenes;
+}

package/dist/settings/SettingsDialog.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    onClose: () => void;
+}
+export declare function SettingsDialog({ onClose }: Props): React.JSX.Element;
+export {};

package/dist/settings/SettingsDialog.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from '../i18n/useTranslation';
+import { useDocument } from '../context/DocumentContext';
+import { getAIConfig, saveAIConfig, fetchProviders, getApiKey, setApiKey, deleteApiKey, testConnection, listModels, } from '../ai/ai-client';
+const UI_LANGUAGES = [
+    { code: 'en', label: 'English' },
+    { code: 'hi', label: 'हिन्दी' },
+    { code: 'ta', label: 'தமிழ்' },
+    { code: 'te', label: 'తెలుగు' },
+    { code: 'ml', label: 'മലയാളം' },
+    { code: 'kn', label: 'ಕನ್ನಡ' },
+    { code: 'bn', label: 'বাংলা' },
+    { code: 'gu', label: 'ગુજરાતી' },
+    { code: 'mr', label: 'मराठी' },
+    { code: 'pa', label: 'ਪੰਜਾਬੀ' },
+    { code: 'or', label: 'ଓଡ଼ିଆ' },
+    { code: 'si', label: 'සිංහල' },
+];
+export function SettingsDialog({ onClose }) {
+    const { t, locale, setLocale } = useTranslation();
+    const { setAIOnboardingVisible } = useDocument();
+    const dialogRef = useRef(null);
+    // AI states
+    const [aiConfig, setAiConfig] = useState(getAIConfig());
+    const [providers, setProviders] = useState([]);
+    const [activeKey, setActiveKey] = useState('');
+    const [showKey, setShowKey] = useState(false);
+    const [testStatus, setTestStatus] = useState('idle');
+    const [testError, setTestError] = useState('');
+    const [dynamicModels, setDynamicModels] = useState(null);
+    const [modelsLoading, setModelsLoading] = useState(false);
+    useEffect(() => {
+        dialogRef.current?.focus();
+        void loadProviders();
+    }, []);
+    const loadProviders = async () => {
+        const p = await fetchProviders(aiConfig);
+        setProviders(p);
+    };
+    // Loads the stored key for the selected provider, then refreshes its
+    // model list from the provider's live /models endpoint (falls back to the
+    // static list on any error — see listModels). Depends on `providers` too
+    // so it re-runs once fetchProviders() resolves on mount, instead of
+    // racing it.
+    useEffect(() => {
+        let cancelled = false;
+        const run = async () => {
+            setTestStatus('idle');
+            setTestError('');
+            const key = await getApiKey(aiConfig.preferredProvider);
+            if (cancelled)
+                return;
+            setActiveKey(key || '');
+            setDynamicModels(null);
+            const provider = providers.find(p => p.id === aiConfig.preferredProvider);
+            if (key && provider) {
+                setModelsLoading(true);
+                const models = await listModels(provider, key);
+                if (!cancelled) {
+                    setDynamicModels(models);
+                    setModelsLoading(false);
+                }
+            }
+        };
+        void run();
+        return () => { cancelled = true; };
+    }, [aiConfig.preferredProvider, providers]);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape')
+            onClose();
+    };
+    const handleProviderChange = (e) => {
+        const nextProvider = e.target.value;
+        const provider = providers.find(p => p.id === nextProvider);
+        const nextModel = provider?.models[0]?.id || '';
+        const updated = {
+            ...aiConfig,
+            preferredProvider: nextProvider,
+            preferredModel: nextModel,
+        };
+        setAiConfig(updated);
+        saveAIConfig(updated);
+    };
+    const handleModelChange = (e) => {
+        const updated = {
+            ...aiConfig,
+            preferredModel: e.target.value,
+        };
+        setAiConfig(updated);
+        saveAIConfig(updated);
+    };
+    const handleKeyChange = async (e) => {
+        const val = e.target.value;
+        setActiveKey(val);
+        if (val.trim()) {
+            await setApiKey(aiConfig.preferredProvider, val.trim());
+        }
+        else {
+            await deleteApiKey(aiConfig.preferredProvider);
+        }
+        setTestStatus('idle');
+    };
+    const handleTestKey = async () => {
+        if (!activeKey.trim()) {
+            setTestStatus('error');
+            setTestError('Please enter an API key to test.');
+            return;
+        }
+        setTestStatus('testing');
+        setTestError('');
+        try {
+            const ok = await testConnection(aiConfig.preferredProvider, activeKey.trim(), aiConfig);
+            if (ok) {
+                setTestStatus('success');
+                const provider = providers.find(p => p.id === aiConfig.preferredProvider);
+                if (provider) {
+                    setModelsLoading(true);
+                    setDynamicModels(await listModels(provider, activeKey.trim()));
+                    setModelsLoading(false);
+                }
+            }
+            else {
+                setTestStatus('error');
+                setTestError('Connection failed: empty or invalid response.');
+            }
+        }
+        catch (err) {
+            setTestStatus('error');
+            setTestError(err.message || String(err));
+        }
+    };
+    const currentProvider = providers.find(p => p.id === aiConfig.preferredProvider);
+    const models = dynamicModels ?? currentProvider?.models ?? [];
+    return (_jsx("div", { className: "cs-dialog-overlay", onClick: onClose, children: _jsxs("div", { ref: dialogRef, className: "cs-dialog cs-settings-dialog", role: "dialog", "aria-modal": "true", "aria-label": t('settings.title'), tabIndex: -1, onClick: e => e.stopPropagation(), onKeyDown: handleKeyDown, style: { maxWidth: '480px' }, children: [_jsxs("div", { className: "cs-dialog-header", children: [_jsx("span", { className: "cs-dialog-title", children: t('settings.title') }), _jsx("button", { className: "cs-fr-close", "aria-label": t('settings.close'), onClick: onClose, children: "\u00D7" })] }), _jsxs("div", { className: "cs-settings-body", style: { maxHeight: '80vh', overflowY: 'auto' }, children: [_jsx("div", { className: "cs-settings-section-label", children: t('settings.general') }), _jsxs("div", { className: "cs-settings-row", children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-ui-lang-select", children: t('settings.uiLanguage') }), _jsx("select", { id: "cs-ui-lang-select", className: "cs-settings-select", value: locale, onChange: e => setLocale(e.target.value), children: UI_LANGUAGES.map(lang => (_jsx("option", { value: lang.code, children: lang.label }, lang.code))) })] }), _jsx("div", { style: { margin: '14px 0 6px 0', borderTop: '1px solid var(--cs-ui-border-light, #e8e8e4)', paddingTop: '14px' }, className: "cs-settings-section-label", children: "Intelligence & Voice Settings" }), _jsxs("div", { className: "cs-settings-row", children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-ai-provider-select", children: "Preferred Provider" }), _jsx("select", { id: "cs-ai-provider-select", className: "cs-settings-select", value: aiConfig.preferredProvider, onChange: handleProviderChange, children: providers.map(p => (_jsx("option", { value: p.id, children: p.name }, p.id))) })] }), _jsxs("div", { className: "cs-settings-row", children: [_jsxs("label", { className: "cs-settings-label", htmlFor: "cs-ai-model-select", children: ["Preferred Model", modelsLoading ? ' (refreshing...)' : ''] }), _jsx("select", { id: "cs-ai-model-select", className: "cs-settings-select", value: aiConfig.preferredModel, onChange: handleModelChange, disabled: models.length === 0, children: models.map(m => (_jsx("option", { value: m.id, children: m.name }, m.id))) })] }), _jsxs("div", { className: "cs-settings-row", style: { flexDirection: 'column', alignItems: 'stretch', gap: '6px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("label", { className: "cs-settings-label", htmlFor: "cs-ai-key-input", children: ["API Key for ", currentProvider?.name || aiConfig.preferredProvider] }), _jsx("button", { type: "button", style: { background: 'none', border: 'none', color: 'var(--cs-ui-accent, #c4760a)', cursor: 'pointer', fontSize: '11px', padding: 0 }, onClick: () => setShowKey(!showKey), children: showKey ? 'Hide' : 'Show' })] }), _jsx("input", { id: "cs-ai-key-input", type: showKey ? 'text' : 'password', style: {
+                                        width: '100%',
+                                        padding: '7px 10px',
+                                        border: '1px solid var(--cs-ui-border-light, #ccc)',
+                                        borderRadius: '4px',
+                                        boxSizing: 'border-box',
+                                        fontFamily: 'monospace',
+                                        fontSize: '12px',
+                                    }, value: activeKey, onChange: handleKeyChange, placeholder: `Enter API Key for ${aiConfig.preferredProvider}` }), _jsx("div", { style: { display: 'flex', gap: '8px', marginTop: '4px' }, children: _jsx("button", { type: "button", className: "cs-voice-btn-secondary", style: { padding: '4px 10px', fontSize: '12px' }, onClick: handleTestKey, disabled: testStatus === 'testing', children: testStatus === 'testing' ? 'Testing...' : 'Test Connection' }) }), testStatus === 'success' && (_jsx("span", { style: { color: '#10b981', fontSize: '12px', marginTop: '2px' }, children: "\u2713 Key verified! Connection succeeded." })), testStatus === 'error' && (_jsxs("span", { style: { color: '#ef4444', fontSize: '12px', marginTop: '2px', whiteSpace: 'pre-wrap' }, children: ["\u2717 Error: ", testError] }))] }), _jsx("div", { style: { marginTop: '16px', display: 'flex', justifyContent: 'flex-start' }, children: _jsx("button", { type: "button", className: "cs-voice-btn-primary", style: { padding: '6px 12px', fontSize: '12px' }, onClick: () => {
+                                    onClose();
+                                    setAIOnboardingVisible(true);
+                                }, children: "Open Setup Wizard" }) })] })] }) }));
+}

package/dist/shell/AppBar.d.ts

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

package/dist/shell/AppBar.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useDocument } from '../context/DocumentContext';
+import { useTranslation } from '../i18n/useTranslation';
+import { NavigatorIcon, TitlePageIcon, NewIcon, OpenIcon, SaveIcon, SaveAsIcon, SourceIcon, FormattedIcon, RibbonIcon, ExportIcon, SettingsIcon, ImportDocxIcon, StyleIcon, MicIcon, MenuIcon, CloseIcon, } from './icons';
+import { SutrataLogo } from './SutrataLogo';
+import { getTemplate } from '../templates/templates';
+import { openTitlePageForm } from '../titlepage/TitlePageDialog';
+function AbBtn({ label, shortcut, active, variant, onClick, children }) {
+    const variantClass = variant === 'primary' ? ' cs-ab-btn-primary' : variant === 'secondary' ? ' cs-ab-btn-secondary' : '';
+    return (_jsxs("button", { type: "button", "aria-label": label, className: `cs-ab-btn${active ? ' cs-ab-active' : ''}${variantClass}`, onClick: onClick, children: [children, _jsxs("span", { className: "cs-tb-tip", role: "tooltip", children: [_jsx("span", { children: label }), shortcut ? _jsx("span", { className: "cs-tb-key", children: shortcut }) : null] })] }));
+}
+export function AppBar() {
+    const { mode, setMode, isDirty, filePath, ribbonVisible, setRibbonVisible, navVisible, setNavVisible, exportVisible, setExportVisible, settingsVisible, setSettingsVisible, metadataVisible, setMetadataVisible, voiceActive, setVoiceActive, newDocument, openFile, saveFile, saveFileAs, setText, importDocx, styleVisible, setStyleVisible, showConfirm, showToast, } = useDocument();
+    const { t, locale } = useTranslation();
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+    const name = filePath ?? 'untitled.sutra';
+    const nextMode = mode === 'formatted' ? 'source' : 'formatted';
+    const handleNew = () => {
+        newDocument(getTemplate(locale));
+    };
+    const handleImportDocx = async () => {
+        try {
+            const warnings = await importDocx();
+            if (warnings && warnings.length) {
+                showToast(warnings.join(' • '), 'warn');
+            }
+        }
+        catch (err) {
+            showToast(err instanceof Error ? err.message : 'Failed to import the Word document.', 'error');
+        }
+    };
+    return (_jsxs("header", { className: "cs-app-bar", role: "banner", "aria-label": "Application header", children: [_jsxs("div", { className: "cs-ab-group cs-ab-left", children: [_jsxs("div", { className: "cs-ab-brand", title: "Sutrata Multilingual Screenplay Editor", children: [_jsx(SutrataLogo, { size: 20, showText: false }), _jsx("span", { className: "cs-ab-brand-title", children: "Sutrata" })] }), _jsx("span", { className: "cs-ab-sep cs-ab-desktop-only" }), _jsx(AbBtn, { label: t('appbar.navigator'), shortcut: "Ctrl+Shift+B", active: navVisible, onClick: () => setNavVisible(!navVisible), children: _jsx(NavigatorIcon, { size: 18 }) }), _jsx("span", { className: "cs-ab-desktop-only", children: _jsx(AbBtn, { label: t('appbar.titlePage'), onClick: openTitlePageForm, children: _jsx(TitlePageIcon, { size: 18 }) }) }), _jsxs("div", { className: "cs-ab-file-pill", title: filePath ?? 'untitled.sutra', children: [_jsx("span", { className: "cs-ab-file-name", children: name }), isDirty && _jsx("span", { className: "cs-ab-dirty", title: "Unsaved edits" })] })] }), _jsx("span", { className: "cs-ab-spacer cs-ab-desktop-only" }), _jsxs("div", { className: "cs-ab-group cs-ab-desktop-group", children: [_jsx(AbBtn, { label: mode === 'formatted' ? t('appbar.switchToSource') : t('appbar.switchToFormatted'), shortcut: "Ctrl+Shift+E", onClick: () => setMode(nextMode), children: mode === 'formatted' ? _jsx(SourceIcon, { size: 18 }) : _jsx(FormattedIcon, { size: 18 }) }), _jsx(AbBtn, { label: ribbonVisible ? t('appbar.hideToolbar') : t('appbar.showToolbar'), shortcut: "Ctrl+Shift+H", active: ribbonVisible, onClick: () => setRibbonVisible(!ribbonVisible), children: _jsx(RibbonIcon, { size: 18 }) }), _jsx(AbBtn, { label: "Voice Dictation", shortcut: "Ctrl+Shift+V", active: voiceActive, onClick: () => setVoiceActive(!voiceActive), children: _jsx(MicIcon, { size: 18 }) }), _jsx(AbBtn, { label: metadataVisible ? 'Hide Metadata' : 'Show Metadata', active: metadataVisible, onClick: () => setMetadataVisible(!metadataVisible), children: _jsx("span", { style: { fontWeight: 700, fontSize: '13px' }, children: "&" }) })] }), _jsx("span", { className: "cs-ab-spacer cs-ab-desktop-only" }), _jsxs("div", { className: "cs-ab-group cs-ab-desktop-group", children: [_jsx(AbBtn, { label: t('appbar.new'), onClick: handleNew, children: _jsx(NewIcon, { size: 18 }) }), _jsx(AbBtn, { label: t('appbar.open'), shortcut: "Ctrl+O", onClick: () => { void openFile(); }, children: _jsx(OpenIcon, { size: 18 }) }), _jsx(AbBtn, { label: t('appbar.importDocx'), onClick: () => { void handleImportDocx(); }, children: _jsx(ImportDocxIcon, { size: 18 }) }), _jsx("span", { className: "cs-ab-sep" }), _jsx(AbBtn, { label: t('appbar.save'), shortcut: "Ctrl+S", variant: "primary", onClick: () => { void saveFile(); }, children: _jsx(SaveIcon, { size: 17 }) }), _jsx(AbBtn, { label: t('appbar.saveAs'), shortcut: "Ctrl+Shift+S", onClick: () => { void saveFileAs(); }, children: _jsx(SaveAsIcon, { size: 17 }) }), _jsx("span", { className: "cs-ab-sep" }), _jsx(AbBtn, { label: t('appbar.export'), variant: "secondary", active: exportVisible, onClick: () => setExportVisible(!exportVisible), children: _jsx(ExportIcon, { size: 18 }) }), _jsx(AbBtn, { label: t('appbar.style'), active: styleVisible, onClick: () => setStyleVisible(!styleVisible), children: _jsx(StyleIcon, { size: 18 }) }), _jsx(AbBtn, { label: t('settings.title'), active: settingsVisible, onClick: () => setSettingsVisible(!settingsVisible), children: _jsx(SettingsIcon, { size: 18 }) })] }), _jsxs("div", { className: "cs-ab-group cs-ab-mobile-controls", children: [_jsx(AbBtn, { label: t('appbar.save'), variant: isDirty ? 'primary' : undefined, onClick: () => { void saveFile(); }, children: _jsx(SaveIcon, { size: 17 }) }), _jsx(AbBtn, { label: "Menu", active: mobileMenuOpen, onClick: () => setMobileMenuOpen(!mobileMenuOpen), children: mobileMenuOpen ? _jsx(CloseIcon, { size: 18 }) : _jsx(MenuIcon, { size: 18 }) })] }), mobileMenuOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "cs-mobile-menu-backdrop", "aria-hidden": "true", onClick: () => setMobileMenuOpen(false) }), _jsxs("div", { className: "cs-mobile-menu-drawer", role: "dialog", "aria-modal": "true", "aria-label": "Application Menu", children: [_jsxs("div", { className: "cs-mm-header", children: [_jsxs("div", { className: "cs-mm-brand", children: [_jsx(SutrataLogo, { size: 22, showText: false }), _jsx("span", { children: "Sutrata" })] }), _jsx("button", { type: "button", className: "cs-mm-close", "aria-label": "Close menu", onClick: () => setMobileMenuOpen(false), children: _jsx(CloseIcon, { size: 18 }) })] }), _jsxs("div", { className: "cs-mm-file-info", children: [_jsx("span", { className: "cs-mm-file-name", children: name }), isDirty && _jsx("span", { className: "cs-ab-dirty", title: "Unsaved edits" })] }), _jsxs("div", { className: "cs-mm-section", children: [_jsx("div", { className: "cs-mm-section-title", children: "Views & Tools" }), _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { setMode(nextMode); setMobileMenuOpen(false); }, children: [mode === 'formatted' ? _jsx(SourceIcon, { size: 18 }) : _jsx(FormattedIcon, { size: 18 }), _jsx("span", { children: mode === 'formatted' ? t('appbar.switchToSource') : t('appbar.switchToFormatted') })] }), _jsxs("button", { type: "button", className: `cs-mm-item${navVisible ? ' cs-mm-active' : ''}`, onClick: () => { setNavVisible(!navVisible); setMobileMenuOpen(false); }, children: [_jsx(NavigatorIcon, { size: 18 }), _jsx("span", { children: t('appbar.navigator') })] }), _jsxs("button", { type: "button", className: `cs-mm-item${ribbonVisible ? ' cs-mm-active' : ''}`, onClick: () => { setRibbonVisible(!ribbonVisible); setMobileMenuOpen(false); }, children: [_jsx(RibbonIcon, { size: 18 }), _jsx("span", { children: ribbonVisible ? t('appbar.hideToolbar') : t('appbar.showToolbar') })] }), _jsxs("button", { type: "button", className: `cs-mm-item${voiceActive ? ' cs-mm-active' : ''}`, onClick: () => { setVoiceActive(!voiceActive); setMobileMenuOpen(false); }, children: [_jsx(MicIcon, { size: 18 }), _jsx("span", { children: "Voice Dictation" })] }), _jsxs("button", { type: "button", className: `cs-mm-item${metadataVisible ? ' cs-mm-active' : ''}`, onClick: () => { setMetadataVisible(!metadataVisible); setMobileMenuOpen(false); }, children: [_jsx("span", { style: { fontWeight: 700, width: 18, textAlign: 'center' }, children: "&" }), _jsx("span", { children: metadataVisible ? 'Hide Metadata' : 'Show Metadata' })] })] }), _jsxs("div", { className: "cs-mm-section", children: [_jsx("div", { className: "cs-mm-section-title", children: "File Operations" }), _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { openTitlePageForm(); setMobileMenuOpen(false); }, children: [_jsx(TitlePageIcon, { size: 18 }), _jsx("span", { children: t('appbar.titlePage') })] }), _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { handleNew(); setMobileMenuOpen(false); }, children: [_jsx(NewIcon, { size: 18 }), _jsx("span", { children: t('appbar.new') })] }), _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { void openFile(); setMobileMenuOpen(false); }, children: [_jsx(OpenIcon, { size: 18 }), _jsx("span", { children: t('appbar.open') })] }), _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { void handleImportDocx(); setMobileMenuOpen(false); }, children: [_jsx(ImportDocxIcon, { size: 18 }), _jsx("span", { children: t('appbar.importDocx') })] }), _jsxs("button", { type: "button", className: "cs-mm-item cs-mm-primary", onClick: () => { void saveFile(); setMobileMenuOpen(false); }, children: [_jsx(SaveIcon, { size: 18 }), _jsx("span", { children: t('appbar.save') })] }), _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { void saveFileAs(); setMobileMenuOpen(false); }, children: [_jsx(SaveAsIcon, { size: 18 }), _jsx("span", { children: t('appbar.saveAs') })] }), _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { setExportVisible(true); setMobileMenuOpen(false); }, children: [_jsx(ExportIcon, { size: 18 }), _jsx("span", { children: t('appbar.export') })] })] }), _jsxs("div", { className: "cs-mm-section", children: [_jsx("div", { className: "cs-mm-section-title", children: "Preferences" }), _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { setStyleVisible(true); setMobileMenuOpen(false); }, children: [_jsx(StyleIcon, { size: 18 }), _jsx("span", { children: t('appbar.style') })] }), _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { setSettingsVisible(true); setMobileMenuOpen(false); }, children: [_jsx(SettingsIcon, { size: 18 }), _jsx("span", { children: t('settings.title') })] })] })] })] }))] }));
+}

package/dist/shell/AppShell.d.ts

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

package/dist/shell/AppShell.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { AppBar } from './AppBar';
+import { ElementToolbar } from './ElementToolbar';
+import { StatusBar } from './StatusBar';
+import { EditorView } from '../editor/EditorView';
+import { SourceView } from '../source/SourceView';
+import { useDocument } from '../context/DocumentContext';
+import { SceneNavigator } from '../navigator/SceneNavigator';
+import { FindReplace } from '../findreplace/FindReplace';
+import { ExportDialog } from '../titlepage/ExportDialog';
+import { TitlePageDialog, OPEN_TITLE_PAGE_EVENT } from '../titlepage/TitlePageDialog';
+import { SettingsDialog } from '../settings/SettingsDialog';
+import { StyleDialog } from '../styles/StyleDialog';
+import { Watermark } from './Watermark';
+import { ConfirmDialog } from './ConfirmDialog';
+import { ToastContainer } from './Toast';
+import { VoiceToolbar } from '../ai/VoiceToolbar';
+import { OnboardingDialog } from '../ai/OnboardingDialog';
+import { SelectionMenu } from '../editor/SelectionMenu';
+export function AppShell() {
+    const { mode, ribbonVisible, navVisible, setNavVisible, exportVisible, settingsVisible, setSettingsVisible, styleVisible, setStyleVisible, metadataVisible, voiceActive, aiOnboardingVisible, setAIOnboardingVisible, confirmModal, closeConfirm, toasts, dismissToast, } = useDocument();
+    const [titlePageVisible, setTitlePageVisible] = useState(false);
+    useEffect(() => {
+        const open = () => setTitlePageVisible(true);
+        window.addEventListener(OPEN_TITLE_PAGE_EVENT, open);
+        return () => window.removeEventListener(OPEN_TITLE_PAGE_EVENT, open);
+    }, []);
+    return (_jsxs("div", { className: `cs-shell ${metadataVisible ? '' : 'cs-hide-metadata'}`, children: [_jsx(Watermark, {}), _jsx(AppBar, {}), voiceActive && _jsx(VoiceToolbar, {}), ribbonVisible && _jsx(ElementToolbar, {}), _jsxs("div", { className: "cs-shell-body", children: [navVisible && (_jsxs(_Fragment, { children: [_jsx("div", { className: "cs-nav-backdrop", "aria-hidden": "true", onClick: () => setNavVisible(false) }), _jsx(SceneNavigator, {})] })), _jsx("div", { className: "cs-editor-area", children: _jsx("main", { className: "cs-main", children: mode === 'formatted' ? _jsx(EditorView, {}) : _jsx(SourceView, {}) }) })] }), _jsx(StatusBar, {}), _jsx(FindReplace, {}), exportVisible && _jsx(ExportDialog, {}), titlePageVisible && _jsx(TitlePageDialog, { onClose: () => setTitlePageVisible(false) }), settingsVisible && _jsx(SettingsDialog, { onClose: () => setSettingsVisible(false) }), styleVisible && _jsx(StyleDialog, { onClose: () => setStyleVisible(false) }), aiOnboardingVisible && _jsx(OnboardingDialog, { onClose: () => setAIOnboardingVisible(false) }), confirmModal && _jsx(ConfirmDialog, { options: confirmModal, onClose: closeConfirm }), _jsx(ToastContainer, { toasts: toasts, onDismiss: dismissToast }), _jsx(SelectionMenu, {})] }));
+}

package/dist/shell/ConfirmDialog.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface ConfirmOptions {
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+    onConfirm: () => void;
+    onCancel?: () => void;
+}
+interface ConfirmDialogProps {
+    options: ConfirmOptions;
+    onClose: () => void;
+}
+export declare function ConfirmDialog({ options, onClose }: ConfirmDialogProps): React.JSX.Element;
+export {};

package/dist/shell/ConfirmDialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export function ConfirmDialog({ options, onClose }) {
+    const confirmBtnRef = useRef(null);
+    useEffect(() => {
+        confirmBtnRef.current?.focus();
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                options.onCancel?.();
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [options, onClose]);
+    return (_jsx("div", { className: "cs-confirm-overlay", role: "presentation", onClick: () => { options.onCancel?.(); onClose(); }, children: _jsxs("div", { className: "cs-confirm-dialog", role: "alertdialog", "aria-modal": "true", "aria-labelledby": "cs-confirm-title", "aria-describedby": "cs-confirm-desc", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { id: "cs-confirm-title", className: "cs-confirm-title", children: options.title }), _jsx("div", { id: "cs-confirm-desc", className: "cs-confirm-msg", children: options.message }), _jsxs("div", { className: "cs-confirm-actions", children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel", onClick: () => {
+                                options.onCancel?.();
+                                onClose();
+                            }, children: options.cancelLabel ?? 'Cancel' }), _jsx("button", { ref: confirmBtnRef, type: "button", className: options.destructive ? 'cs-confirm-btn-danger' : 'cs-confirm-btn-primary', onClick: () => {
+                                options.onConfirm();
+                                onClose();
+                            }, children: options.confirmLabel ?? 'Confirm' })] })] }) }));
+}

package/dist/shell/ElementToolbar.d.ts

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

package/dist/shell/ElementToolbar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ToolbarButton } from './ToolbarButton';
+import { makeSetBlock, makeSetOrToggleNote, makeToggleMark, undo, redo } from './toolbar-actions';
+import { runCommand, activeBlockType, subscribe } from '../editor/editor-bus';
+import { useTranslation } from '../i18n/useTranslation';
+import { UndoIcon, RedoIcon, SceneIcon, ActionIcon, CharacterIcon, DialogueIcon, ParentheticalIcon, TransitionIcon, CenteredIcon, LyricsIcon, NoteIcon, PageBreakIcon, SectionIcon, BoldIcon, ItalicIcon, UnderlineIcon, OverflowIcon, CloseIcon, } from './icons';
+const ELEMENTS = [
+    { type: 'scene_heading', label: 'Scene Heading', sigil: '##', shortcut: 'Alt+Shift+H', Icon: SceneIcon, translationKey: 'toolbar.scene' },
+    { type: 'action', label: 'Action', sigil: '(plain)', shortcut: 'Alt+Shift+A', Icon: ActionIcon, translationKey: 'toolbar.action' },
+    { type: 'character', label: 'Character', sigil: '@', shortcut: 'Alt+Shift+C', Icon: CharacterIcon, translationKey: 'toolbar.character' },
+    { type: 'dialogue', label: 'Dialogue', sigil: '(after @)', shortcut: 'Alt+Shift+D', Icon: DialogueIcon, translationKey: 'toolbar.dialogue' },
+    { type: 'parenthetical', label: 'Parenthetical', sigil: '( )', shortcut: 'Alt+Shift+P', Icon: ParentheticalIcon, translationKey: 'toolbar.parenthetical' },
+    { type: 'transition', label: 'Transition', sigil: '>>', shortcut: 'Alt+Shift+X', Icon: TransitionIcon, translationKey: 'toolbar.transition' },
+    { type: 'centered', label: 'Centered', sigil: '>> <<', shortcut: '', Icon: CenteredIcon, translationKey: 'toolbar.centered' },
+    { type: 'lyrics', label: 'Lyrics', sigil: '~', shortcut: 'Alt+Shift+L', Icon: LyricsIcon, translationKey: 'toolbar.lyrics' },
+    { type: 'note', label: 'Note', sigil: '[[ ]]', shortcut: 'Alt+Shift+N', Icon: NoteIcon, translationKey: 'toolbar.note' },
+    { type: 'page_break', label: 'Page Break', sigil: '===', shortcut: '', Icon: PageBreakIcon, translationKey: 'toolbar.pageBreak' },
+    { type: 'section', label: 'Section', sigil: '#', shortcut: '', Icon: SectionIcon, translationKey: 'toolbar.section' },
+];
+export function ElementToolbar() {
+    const [activeType, setActiveType] = useState(null);
+    const [overflowOpen, setOverflowOpen] = useState(false);
+    const { t } = useTranslation();
+    useEffect(() => subscribe(() => setActiveType(activeBlockType())), []);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cs-element-toolbar", role: "toolbar", "aria-label": "Editing toolbar", children: [_jsx(ToolbarButton, { label: t('toolbar.undo'), shortcut: "Mod-Z", onClick: () => runCommand(undo), children: _jsx(UndoIcon, { size: 20 }) }), _jsx(ToolbarButton, { label: t('toolbar.redo'), shortcut: "Mod-Shift-Z", onClick: () => runCommand(redo), children: _jsx(RedoIcon, { size: 20 }) }), _jsx("span", { className: "cs-tb-sep" }), ELEMENTS.map(el => (_jsx(ToolbarButton, { label: t(el.translationKey), sigil: el.sigil, shortcut: el.shortcut || undefined, active: activeType === el.type, onClick: () => runCommand(el.type === 'note' ? makeSetOrToggleNote() : makeSetBlock(el.type)), children: _jsx(el.Icon, { size: 20 }) }, el.type))), _jsx("span", { className: "cs-tb-sep" }), _jsx(ToolbarButton, { label: t('toolbar.bold'), shortcut: "Mod-B", onClick: () => runCommand(makeToggleMark('bold')), children: _jsx(BoldIcon, { size: 20 }) }), _jsx(ToolbarButton, { label: t('toolbar.italic'), shortcut: "Mod-I", onClick: () => runCommand(makeToggleMark('italic')), children: _jsx(ItalicIcon, { size: 20 }) }), _jsx(ToolbarButton, { label: t('toolbar.underline'), shortcut: "Mod-U", onClick: () => runCommand(makeToggleMark('underline')), children: _jsx(UnderlineIcon, { size: 20 }) }), _jsx("button", { type: "button", className: `cs-tb-overflow${overflowOpen ? ' cs-tb-overflow-active' : ''}`, "aria-label": "More", "aria-expanded": overflowOpen, onClick: () => setOverflowOpen(!overflowOpen), children: _jsx(OverflowIcon, { size: 18 }) })] }), overflowOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "cs-tb-overflow-backdrop", "aria-hidden": "true", onClick: () => setOverflowOpen(false) }), _jsxs("div", { className: "cs-tb-overflow-sheet", role: "dialog", "aria-modal": "true", "aria-label": "Screenplay Elements & Formatting", children: [_jsxs("div", { className: "cs-tb-overflow-header", children: [_jsx("span", { className: "cs-tb-overflow-title", children: "Formatting & Elements" }), _jsx("button", { type: "button", className: "cs-tb-overflow-close", "aria-label": "Close", onClick: () => setOverflowOpen(false), children: _jsx(CloseIcon, { size: 18 }) })] }), _jsx("div", { className: "cs-tb-overflow-section-label", children: "Inline Formatting" }), _jsxs("div", { className: "cs-tb-overflow-inline-grid", children: [_jsxs("button", { type: "button", className: "cs-tb-overflow-item", onClick: () => { runCommand(makeToggleMark('bold')); setOverflowOpen(false); }, children: [_jsx(BoldIcon, { size: 18 }), _jsx("span", { children: t('toolbar.bold') })] }), _jsxs("button", { type: "button", className: "cs-tb-overflow-item", onClick: () => { runCommand(makeToggleMark('italic')); setOverflowOpen(false); }, children: [_jsx(ItalicIcon, { size: 18 }), _jsx("span", { children: t('toolbar.italic') })] }), _jsxs("button", { type: "button", className: "cs-tb-overflow-item", onClick: () => { runCommand(makeToggleMark('underline')); setOverflowOpen(false); }, children: [_jsx(UnderlineIcon, { size: 18 }), _jsx("span", { children: t('toolbar.underline') })] }), _jsxs("button", { type: "button", className: "cs-tb-overflow-item", onClick: () => { runCommand(undo); setOverflowOpen(false); }, children: [_jsx(UndoIcon, { size: 18 }), _jsx("span", { children: t('toolbar.undo') })] }), _jsxs("button", { type: "button", className: "cs-tb-overflow-item", onClick: () => { runCommand(redo); setOverflowOpen(false); }, children: [_jsx(RedoIcon, { size: 18 }), _jsx("span", { children: t('toolbar.redo') })] })] }), _jsx("div", { className: "cs-tb-overflow-section-label", children: "Screenplay Elements" }), _jsx("div", { className: "cs-tb-overflow-list", children: ELEMENTS.map(el => (_jsxs("button", { type: "button", className: `cs-tb-overflow-list-item${activeType === el.type ? ' cs-tb-overflow-item-active' : ''}`, onClick: () => {
+                                        runCommand(el.type === 'note' ? makeSetOrToggleNote() : makeSetBlock(el.type));
+                                        setOverflowOpen(false);
+                                    }, children: [_jsx("div", { className: "cs-tb-overflow-list-icon", children: _jsx(el.Icon, { size: 18 }) }), _jsxs("div", { className: "cs-tb-overflow-list-text", children: [_jsx("span", { className: "cs-tb-overflow-list-name", children: t(el.translationKey) }), _jsx("span", { className: "cs-tb-overflow-list-sigil", children: el.sigil })] }), activeType === el.type && (_jsx("span", { className: "cs-tb-overflow-current-badge", children: "Active" }))] }, el.type))) })] })] }))] }));
+}

package/dist/shell/LanguageStatus.d.ts

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