@sutrata/editor 0.1.1 → 0.2.0

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

@@ -0,0 +1,37 @@
+/**
+ * Scene numbers (Sutra format spec §7.4). A scene's `{#id}` is its number:
+ * digits plus an optional letter suffix (`12`, `12A`). Numbers change only
+ * when the writer asks to renumber; until then they may be missing,
+ * duplicated or out of order, and the navigator flags them.
+ */
+export interface SceneNumber {
+    base: number;
+    /** Uppercase letters, '' for a plain number. */
+    suffix: string;
+}
+export type SceneNumberIssue = 'missing' | 'invalid' | 'duplicate' | 'order';
+export declare function parseSceneNumber(value: string | null | undefined): SceneNumber | null;
+export declare function formatSceneNumber(n: SceneNumber): string;
+export declare function compareSceneNumbers(a: SceneNumber, b: SceneNumber): number;
+/** '' → A, A → B, Z → AA, AZ → BA. */
+export declare function nextLetter(suffix: string): string;
+/**
+ * Per scene: why its number needs renumbering, or null when it is fine.
+ * Nothing is flagged while no scene has a number (the script was never
+ * numbered). A repeat or a number that doesn't come after the previous good
+ * one is flagged on the later scene.
+ */
+export declare function sceneNumberIssues(numbers: readonly (string | null | undefined)[]): (SceneNumberIssue | null)[];
+/**
+ * New numbers for every scene, per §7.4. Position decides everything; a
+ * scene's old number only says whether it is a main scene (`12`) or a
+ * sub-scene (`12A`) of the main scene before it, so repeats and gaps need
+ * no special handling:
+ * - main scenes are numbered 1, 2, 3, … in order, closing any gaps;
+ * - sub-scenes take their main scene's number and the next letter (A, B, …);
+ * - a scene with no usable number is inserted: it is a sub-scene when the
+ *   next scene with a number is one (2A, new, 2B → 2A, 2B, 2C), otherwise
+ *   a main scene;
+ * - a sub-scene with no main scene before it becomes a main scene.
+ */
+export declare function renumberScenes(numbers: readonly (string | null | undefined)[]): string[];

package/dist/navigator/scene-numbering.js

@@ -0,0 +1,88 @@
+/**
+ * Scene numbers (Sutra format spec §7.4). A scene's `{#id}` is its number:
+ * digits plus an optional letter suffix (`12`, `12A`). Numbers change only
+ * when the writer asks to renumber; until then they may be missing,
+ * duplicated or out of order, and the navigator flags them.
+ */
+export function parseSceneNumber(value) {
+    const m = /^(\d+)([A-Za-z]*)$/.exec((value ?? '').trim());
+    return m ? { base: Number(m[1]), suffix: m[2].toUpperCase() } : null;
+}
+export function formatSceneNumber(n) {
+    return `${n.base}${n.suffix}`;
+}
+/** Letter suffixes in order: '' < A < … < Z < AA < AB … */
+function compareSuffix(a, b) {
+    return a.length !== b.length ? a.length - b.length : a < b ? -1 : a > b ? 1 : 0;
+}
+export function compareSceneNumbers(a, b) {
+    return a.base !== b.base ? a.base - b.base : compareSuffix(a.suffix, b.suffix);
+}
+/** '' → A, A → B, Z → AA, AZ → BA. */
+export function nextLetter(suffix) {
+    const letters = suffix.split('');
+    let i = letters.length - 1;
+    while (i >= 0 && letters[i] === 'Z')
+        letters[i--] = 'A';
+    if (i < 0)
+        return 'A' + letters.join('');
+    letters[i] = String.fromCharCode(letters[i].charCodeAt(0) + 1);
+    return letters.join('');
+}
+/**
+ * Per scene: why its number needs renumbering, or null when it is fine.
+ * Nothing is flagged while no scene has a number (the script was never
+ * numbered). A repeat or a number that doesn't come after the previous good
+ * one is flagged on the later scene.
+ */
+export function sceneNumberIssues(numbers) {
+    if (!numbers.some(n => parseSceneNumber(n)))
+        return numbers.map(() => null);
+    const seen = new Set();
+    let last = null;
+    return numbers.map(value => {
+        if (!value || !value.trim())
+            return 'missing';
+        const n = parseSceneNumber(value);
+        if (!n)
+            return 'invalid';
+        const key = formatSceneNumber(n);
+        if (seen.has(key))
+            return 'duplicate';
+        if (last && compareSceneNumbers(n, last) <= 0)
+            return 'order';
+        seen.add(key);
+        last = n;
+        return null;
+    });
+}
+/**
+ * New numbers for every scene, per §7.4. Position decides everything; a
+ * scene's old number only says whether it is a main scene (`12`) or a
+ * sub-scene (`12A`) of the main scene before it, so repeats and gaps need
+ * no special handling:
+ * - main scenes are numbered 1, 2, 3, … in order, closing any gaps;
+ * - sub-scenes take their main scene's number and the next letter (A, B, …);
+ * - a scene with no usable number is inserted: it is a sub-scene when the
+ *   next scene with a number is one (2A, new, 2B → 2A, 2B, 2C), otherwise
+ *   a main scene;
+ * - a sub-scene with no main scene before it becomes a main scene.
+ */
+export function renumberScenes(numbers) {
+    const own = numbers.map(parseSceneNumber);
+    const out = [];
+    let base = 0;
+    let suffix = '';
+    for (let i = 0; i < numbers.length; i++) {
+        const ref = own[i] ?? own.slice(i + 1).find((n) => n !== null) ?? null;
+        if (ref && ref.suffix && base > 0) {
+            suffix = nextLetter(suffix);
+        }
+        else {
+            base++;
+            suffix = '';
+        }
+        out.push(formatSceneNumber({ base, suffix }));
+    }
+    return out;
+}

package/dist/settings/SettingsDialog.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } 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';
+import { usePanels } from '../extensions/panel-registry';
+import { usePanelContext } from '../shell/use-panel-context';
 const UI_LANGUAGES = [
     { code: 'en', label: 'English' },
     { code: 'hi', label: 'हिन्दी' },
@@ -19,129 +19,17 @@ const UI_LANGUAGES = [
 ];
 export function SettingsDialog({ onClose }) {
     const { t, locale, setLocale } = useTranslation();
-    const { setAIOnboardingVisible } = useDocument();
+    const panelContext = usePanelContext();
+    // Embedder sections (e.g. the OSS app's AI provider & key settings) — the
+    // editor itself has no provider-specific settings.
+    const sections = usePanels('settings');
     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" }) })] })] }) }));
+    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))) })] }), sections.map(section => (_jsxs("section", { className: "cs-settings-section", "aria-label": section.title, children: [_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: section.title }), section.render(panelContext)] }, section.id)))] })] }) }));
 }

package/dist/shell/AppBar.js

@@ -2,10 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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 { NavigatorIcon, TitlePageIcon, NewIcon, OpenIcon, SaveIcon, SaveAsIcon, SourceIcon, FormattedIcon, RibbonIcon, ExportIcon, SettingsIcon, ImportDocxIcon, StyleIcon, MicIcon, MenuIcon, CloseIcon, SparklesIcon, } from './icons';
+import { useAI } from '../extensions/ai-provider';
+import { AIImportDialog } from '../import/AIImportDialog';
 import { SutrataLogo } from './SutrataLogo';
 import { getTemplate } from '../templates/templates';
 import { openTitlePageForm } from '../titlepage/TitlePageDialog';
+import { useSpeech } from '../extensions/speech-provider';
+import { useCanEdit } from '../extensions/session';
+import { usePanels } from '../extensions/panel-registry';
+import { usePanelContext } from './use-panel-context';
+import { useCommands, useCommandContext, displayShortcut } from './use-commands';
 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] })] }));
@@ -13,6 +20,18 @@ function AbBtn({ label, shortcut, active, variant, onClick, children }) {
 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 speech = useSpeech();
+    // AI-assisted import needs a provider and an edit session (useAI covers both).
+    const ai = useAI();
+    const [aiImportOpen, setAiImportOpen] = useState(false);
+    // Read-only sessions (SessionContext.permission 'read'/'comment') get no
+    // file, title-page, style or voice actions.
+    const canEdit = useCanEdit();
+    // Embedder contributions: `appbar` panels and `menu: 'appbar'` commands.
+    const appbarPanels = usePanels('appbar');
+    const appbarCommands = useCommands().filter(c => c.menu === 'appbar');
+    const commandContext = useCommandContext();
+    const panelContext = usePanelContext();
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const name = filePath ?? 'untitled.sutra';
     const nextMode = mode === 'formatted' ? 'source' : 'formatted';
@@ -30,5 +49,5 @@ export function AppBar() {
             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') })] })] })] })] }))] }));
+    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 }) }), canEdit && (_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 }) }), canEdit && (_jsx(AbBtn, { label: ribbonVisible ? t('appbar.hideToolbar') : t('appbar.showToolbar'), shortcut: "Ctrl+Shift+H", active: ribbonVisible, onClick: () => setRibbonVisible(!ribbonVisible), children: _jsx(RibbonIcon, { size: 18 }) })), speech && (_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: [canEdit && (_jsxs(_Fragment, { 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 }) }), ai && (_jsx(AbBtn, { label: "Import with AI", onClick: () => setAiImportOpen(true), children: _jsx(SparklesIcon, { 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 }) }), canEdit && (_jsx(AbBtn, { label: t('appbar.style'), active: styleVisible, onClick: () => setStyleVisible(!styleVisible), children: _jsx(StyleIcon, { size: 18 }) })), (appbarCommands.length > 0 || appbarPanels.length > 0) && _jsx("span", { className: "cs-ab-sep" }), appbarCommands.map(c => (_jsx(AbBtn, { label: c.label, shortcut: displayShortcut(c.shortcut ?? c.shortcutHint), onClick: () => c.run(commandContext()), children: c.icon ? c.icon(18) : _jsx("span", { className: "cs-ab-text-label", children: c.label }) }, c.id))), appbarPanels.map(p => (_jsx("span", { className: "cs-ab-panel", "aria-label": p.title, children: p.render(panelContext) }, p.id))), _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: [canEdit && (_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') })] }), canEdit && _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') })] }), speech && _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' })] })] }), canEdit && _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') })] }), ai && _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { setAiImportOpen(true); setMobileMenuOpen(false); }, children: [_jsx(SparklesIcon, { size: 18 }), _jsx("span", { children: "Import with AI" })] }), _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') })] })] }), !canEdit && _jsx("div", { className: "cs-mm-section", children: _jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { setExportVisible(true); setMobileMenuOpen(false); }, children: [_jsx(ExportIcon, { size: 18 }), _jsx("span", { children: t('appbar.export') })] }) }), appbarCommands.length > 0 && _jsx("div", { className: "cs-mm-section", children: appbarCommands.map(c => (_jsxs("button", { type: "button", className: "cs-mm-item", onClick: () => { c.run(commandContext()); setMobileMenuOpen(false); }, children: [c.icon?.(18), _jsx("span", { children: c.label })] }, c.id))) }), _jsxs("div", { className: "cs-mm-section", children: [_jsx("div", { className: "cs-mm-section-title", children: "Preferences" }), canEdit && _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') })] })] })] })] })), aiImportOpen && _jsx(AIImportDialog, { onClose: () => setAiImportOpen(false) })] }));
 }

package/dist/shell/AppShell.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { AppBar } from './AppBar';
 import { ElementToolbar } from './ElementToolbar';
@@ -16,15 +16,29 @@ import { Watermark } from './Watermark';
 import { ConfirmDialog } from './ConfirmDialog';
 import { ToastContainer } from './Toast';
 import { VoiceToolbar } from '../ai/VoiceToolbar';
-import { OnboardingDialog } from '../ai/OnboardingDialog';
+import { useSpeech } from '../extensions/speech-provider';
+import { useCanEdit } from '../extensions/session';
+import { usePanels } from '../extensions/panel-registry';
+import { usePanelContext } from './use-panel-context';
+import { useTranslation } from '../i18n/useTranslation';
 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 { mode, ribbonVisible, navVisible, setNavVisible, exportVisible, settingsVisible, setSettingsVisible, styleVisible, setStyleVisible, metadataVisible, voiceActive, confirmModal, closeConfirm, toasts, dismissToast, } = useDocument();
     const [titlePageVisible, setTitlePageVisible] = useState(false);
+    const speech = useSpeech();
+    const canEdit = useCanEdit();
+    const { t } = useTranslation();
+    const panelContext = usePanelContext();
+    // The scene navigator is the built-in first sidebar tab; embedder sidebar
+    // panels become further tabs. Inspector panels stack on the right.
+    const sidebarPanels = usePanels('sidebar');
+    const inspectorPanels = usePanels('inspector');
+    const [sidebarTab, setSidebarTab] = useState('navigator');
+    const activeSidebar = sidebarPanels.find(p => p.id === sidebarTab);
     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, {})] }));
+    return (_jsxs("div", { className: `cs-shell ${metadataVisible ? '' : 'cs-hide-metadata'}`, children: [_jsx(Watermark, {}), _jsx(AppBar, {}), voiceActive && speech && _jsx(VoiceToolbar, {}), ribbonVisible && canEdit && _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) }), sidebarPanels.length === 0 ? (_jsx(SceneNavigator, {})) : (_jsxs("div", { className: "cs-sidebar", children: [_jsx("div", { className: "cs-sidebar-tabs", role: "tablist", "aria-label": "Sidebar", children: [{ id: 'navigator', title: t('navigator.title') }, ...sidebarPanels].map(p => (_jsx("button", { type: "button", role: "tab", "aria-selected": (activeSidebar?.id ?? 'navigator') === p.id, className: `cs-sidebar-tab${(activeSidebar?.id ?? 'navigator') === p.id ? ' cs-sidebar-tab-active' : ''}`, onClick: () => setSidebarTab(p.id), children: p.title }, p.id))) }), activeSidebar ? (_jsx("div", { className: "cs-sidebar-panel", role: "tabpanel", "aria-label": activeSidebar.title, children: activeSidebar.render(panelContext) })) : (_jsx(SceneNavigator, {}))] }))] })), _jsx("div", { className: "cs-editor-area", children: _jsx("main", { className: "cs-main", children: mode === 'formatted' ? _jsx(EditorView, {}) : _jsx(SourceView, {}) }) }), inspectorPanels.length > 0 && (_jsx("aside", { className: "cs-inspector", "aria-label": "Inspector", children: inspectorPanels.map(p => (_jsxs("section", { className: "cs-inspector-section", "aria-label": p.title, children: [_jsx("div", { className: "cs-inspector-title", children: p.title }), p.render(panelContext)] }, p.id))) }))] }), _jsx(StatusBar, {}), _jsx(FindReplace, {}), exportVisible && _jsx(ExportDialog, {}), titlePageVisible && canEdit && _jsx(TitlePageDialog, { onClose: () => setTitlePageVisible(false) }), settingsVisible && _jsx(SettingsDialog, { onClose: () => setSettingsVisible(false) }), styleVisible && canEdit && _jsx(StyleDialog, { onClose: () => setStyleVisible(false) }), confirmModal && _jsx(ConfirmDialog, { options: confirmModal, onClose: closeConfirm }), _jsx(ToastContainer, { toasts: toasts, onDismiss: dismissToast }), canEdit && _jsx(SelectionMenu, {})] }));
 }

package/dist/shell/ElementToolbar.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * Renders every command registered with `menu: 'toolbar'` — the editor's
+ * built-ins (shell/builtin-commands.tsx) and the embedder's — grouped, with a
+ * separator between groups.
+ */
 export declare function ElementToolbar(): React.JSX.Element;

package/dist/shell/ElementToolbar.js

@@ -1,30 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import React, { 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' },
-];
+import { subscribe } from '../editor/editor-bus';
+import { OverflowIcon, CloseIcon } from './icons';
+import { useCommands, useCommandContext, displayShortcut } from './use-commands';
+/** Toolbar groups in display order; embedder groups follow. */
+const GROUP_ORDER = ['history', 'elements', 'marks'];
+function groupsOf(commands) {
+    const groups = new Map();
+    for (const c of commands) {
+        const g = c.group ?? 'extensions';
+        groups.set(g, [...(groups.get(g) ?? []), c]);
+    }
+    const names = [...GROUP_ORDER.filter(g => groups.has(g)), ...[...groups.keys()].filter(g => !GROUP_ORDER.includes(g))];
+    return names.map(g => groups.get(g));
+}
+/**
+ * Renders every command registered with `menu: 'toolbar'` — the editor's
+ * built-ins (shell/builtin-commands.tsx) and the embedder's — grouped, with a
+ * separator between groups.
+ */
 export function ElementToolbar() {
-    const [activeType, setActiveType] = useState(null);
+    const [, setTick] = useState(0);
     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))) })] })] }))] }));
+    const commands = useCommands().filter(c => c.menu === 'toolbar');
+    const context = useCommandContext();
+    // Re-render on selection changes so isActive() stays current.
+    useEffect(() => subscribe(() => setTick(n => n + 1)), []);
+    const ctx = context();
+    const groups = groupsOf(commands);
+    const inline = commands.filter(c => c.group === 'marks' || c.group === 'history');
+    const elements = commands.filter(c => c.group === 'elements');
+    const others = commands.filter(c => !['marks', 'history', 'elements'].includes(c.group ?? ''));
+    const run = (c) => { c.run(context()); setOverflowOpen(false); };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cs-element-toolbar", role: "toolbar", "aria-label": "Editing toolbar", children: [groups.map((group, gi) => (_jsxs(React.Fragment, { children: [gi > 0 && _jsx("span", { className: "cs-tb-sep" }), group.map(c => (_jsx(ToolbarButton, { label: c.label, sigil: c.sigil, shortcut: displayShortcut(c.shortcut ?? c.shortcutHint), active: c.isActive?.(ctx) ?? false, onClick: () => c.run(context()), children: c.icon ? c.icon(20) : _jsx("span", { className: "cs-tb-text-label", children: c.label }) }, c.id)))] }, group[0].group ?? `g${gi}`))), _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" }), _jsx("div", { className: "cs-tb-overflow-inline-grid", children: inline.map(c => (_jsxs("button", { type: "button", className: "cs-tb-overflow-item", onClick: () => run(c), children: [c.icon?.(18), _jsx("span", { children: c.label })] }, c.id))) }), _jsx("div", { className: "cs-tb-overflow-section-label", children: "Screenplay Elements" }), _jsx("div", { className: "cs-tb-overflow-list", children: [...elements, ...others].map(c => {
+                                    const active = c.isActive?.(ctx) ?? false;
+                                    return (_jsxs("button", { type: "button", className: `cs-tb-overflow-list-item${active ? ' cs-tb-overflow-item-active' : ''}`, onClick: () => run(c), children: [_jsx("div", { className: "cs-tb-overflow-list-icon", children: c.icon?.(18) }), _jsxs("div", { className: "cs-tb-overflow-list-text", children: [_jsx("span", { className: "cs-tb-overflow-list-name", children: c.label }), c.sigil && _jsx("span", { className: "cs-tb-overflow-list-sigil", children: c.sigil })] }), active && _jsx("span", { className: "cs-tb-overflow-current-badge", children: "Active" })] }, c.id));
+                                }) })] })] }))] }));
 }

package/dist/shell/LanguageStatus.js

@@ -3,6 +3,7 @@ import { useState, useEffect, useRef } from 'react';
 import { useLanguage } from '../i18n/LanguageContext';
 import { useDocument } from '../context/DocumentContext';
 import { getEditorView } from '../editor/editor-bus';
+import { useCanEdit } from '../extensions/session';
 const LANG_NAMES = {
     en: 'English',
     hi: 'Hindi (Devanagari)',
@@ -19,6 +20,7 @@ const LANG_NAMES = {
 export function LanguageStatus() {
     const { currentLanguage } = useLanguage();
     const { text, setText } = useDocument();
+    const canEdit = useCanEdit();
     const [menuOpen, setMenuOpen] = useState(false);
     const menuRef = useRef(null);
     const langName = LANG_NAMES[currentLanguage] ?? currentLanguage;
@@ -42,6 +44,10 @@ export function LanguageStatus() {
         };
     }, [menuOpen]);
     const handleSelectLanguage = (code) => {
+        if (!canEdit) {
+            setMenuOpen(false);
+            return;
+        }
         const view = getEditorView();
         if (view) {
             const { state, dispatch } = view;

package/dist/shell/StatusBar.js

@@ -6,14 +6,18 @@ 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';
+import { useAI, formatActivity } from '../extensions/ai-provider';
+import { useCanEdit } from '../extensions/session';
 function AIStatusBarStatus() {
+    const ai = useAI();
     const [activeCalls, setActiveCalls] = useState([]);
     useEffect(() => {
-        return subscribeToAICalls(setActiveCalls);
-    }, []);
-    if (activeCalls.length === 0)
+        if (!ai?.subscribeActivity)
+            return;
+        return ai.subscribeActivity(setActiveCalls);
+    }, [ai]);
+    if (!ai || activeCalls.length === 0)
         return null;
     return (_jsxs("div", { className: "cs-ai-status-indicator", style: {
             display: 'inline-flex',
@@ -23,11 +27,12 @@ function AIStatusBarStatus() {
             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) })] }));
+        }, children: [_jsx("span", { className: "cs-spinner", style: { width: '10px', height: '10px', borderWidth: '1.5px' } }), _jsx("span", { children: formatActivity(activeCalls) })] }));
 }
 export function StatusBar() {
     const { text, isDirty, lastSaveTarget, filePath, versions, versionHistoryVisible, setVersionHistoryVisible, restoreVersion, clearVersionHistory } = useDocument();
     const { t } = useTranslation();
+    const canEdit = useCanEdit();
     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/
@@ -50,5 +55,5 @@ export function StatusBar() {
         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) }))] }));
+    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, {}), canEdit && 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) }), canEdit && filePath && (_jsx(VersionHistory, { versions: versions, filePath: filePath, onRestore: restoreVersion, onClearAll: clearVersionHistory, visible: versionHistoryVisible, onClose: () => setVersionHistoryVisible(false) }))] }));
 }

package/dist/shell/builtin-commands.d.ts

@@ -0,0 +1,10 @@
+import type { CommandContribution } from '../extensions/command-registry';
+type Translate = (key: string) => string;
+/**
+ * The editor's own commands, registered like an embedder's: undo/redo,
+ * element types (with their Alt+Shift shortcuts) and inline marks, all shown
+ * in the element toolbar. Mark and history keys are bound by the ProseMirror
+ * keymap, so they only carry a `shortcutHint`.
+ */
+export declare function builtinCommands(t: Translate): CommandContribution[];
+export {};