@sutrata/editor 0.1.2 → 0.3.0

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 {};

package/dist/shell/builtin-commands.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeSetBlock, makeSetOrToggleNote, makeToggleMark, undo, redo } from './toolbar-actions';
+import { runCommand, activeBlockType } from '../editor/editor-bus';
+import { UndoIcon, RedoIcon, SceneIcon, ActionIcon, CharacterIcon, DialogueIcon, ParentheticalIcon, TransitionIcon, CenteredIcon, LyricsIcon, NoteIcon, PageBreakIcon, SectionIcon, BoldIcon, ItalicIcon, UnderlineIcon, } from './icons';
+const ELEMENTS = [
+    { type: 'scene_heading', sigil: '##', shortcut: 'Alt-Shift-H', Icon: SceneIcon, labelKey: 'toolbar.scene' },
+    { type: 'action', sigil: '(plain)', shortcut: 'Alt-Shift-A', Icon: ActionIcon, labelKey: 'toolbar.action' },
+    { type: 'character', sigil: '@', shortcut: 'Alt-Shift-C', Icon: CharacterIcon, labelKey: 'toolbar.character' },
+    { type: 'dialogue', sigil: '(after @)', shortcut: 'Alt-Shift-D', Icon: DialogueIcon, labelKey: 'toolbar.dialogue' },
+    { type: 'parenthetical', sigil: '( )', shortcut: 'Alt-Shift-P', Icon: ParentheticalIcon, labelKey: 'toolbar.parenthetical' },
+    { type: 'transition', sigil: '>>', shortcut: 'Alt-Shift-X', Icon: TransitionIcon, labelKey: 'toolbar.transition' },
+    { type: 'centered', sigil: '>> <<', Icon: CenteredIcon, labelKey: 'toolbar.centered' },
+    { type: 'lyrics', sigil: '~', shortcut: 'Alt-Shift-L', Icon: LyricsIcon, labelKey: 'toolbar.lyrics' },
+    { type: 'note', sigil: '[[ ]]', shortcut: 'Alt-Shift-N', Icon: NoteIcon, labelKey: 'toolbar.note' },
+    { type: 'page_break', sigil: '===', Icon: PageBreakIcon, labelKey: 'toolbar.pageBreak' },
+    { type: 'section', sigil: '#', Icon: SectionIcon, labelKey: 'toolbar.section' },
+];
+/**
+ * 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 function builtinCommands(t) {
+    return [
+        { id: 'history.undo', label: t('toolbar.undo'), group: 'history', menu: 'toolbar', shortcutHint: 'Mod-Z', icon: s => _jsx(UndoIcon, { size: s }), run: () => runCommand(undo) },
+        { id: 'history.redo', label: t('toolbar.redo'), group: 'history', menu: 'toolbar', shortcutHint: 'Mod-Shift-Z', icon: s => _jsx(RedoIcon, { size: s }), run: () => runCommand(redo) },
+        ...ELEMENTS.map((el) => ({
+            id: `element.${el.type}`,
+            label: t(el.labelKey),
+            group: 'elements',
+            menu: 'toolbar',
+            sigil: el.sigil,
+            shortcut: el.shortcut,
+            icon: s => _jsx(el.Icon, { size: s }),
+            isActive: () => activeBlockType() === el.type,
+            run: () => runCommand(el.type === 'note' ? makeSetOrToggleNote() : makeSetBlock(el.type)),
+        })),
+        { id: 'mark.bold', label: t('toolbar.bold'), group: 'marks', menu: 'toolbar', shortcutHint: 'Mod-B', icon: s => _jsx(BoldIcon, { size: s }), run: () => runCommand(makeToggleMark('bold')) },
+        { id: 'mark.italic', label: t('toolbar.italic'), group: 'marks', menu: 'toolbar', shortcutHint: 'Mod-I', icon: s => _jsx(ItalicIcon, { size: s }), run: () => runCommand(makeToggleMark('italic')) },
+        { id: 'mark.underline', label: t('toolbar.underline'), group: 'marks', menu: 'toolbar', shortcutHint: 'Mod-U', icon: s => _jsx(UnderlineIcon, { size: s }), run: () => runCommand(makeToggleMark('underline')) },
+    ];
+}

package/dist/shell/icons.d.ts

@@ -35,6 +35,12 @@ export declare const OverflowIcon: ({ size }: IconProps) => React.JSX.Element;
 export declare const EyeIcon: ({ size }: IconProps) => React.JSX.Element;
 export declare const EyeOffIcon: ({ size }: IconProps) => React.JSX.Element;
 export declare const LockIcon: ({ size }: IconProps) => React.JSX.Element;
+/** Numbered list: "Renumber scenes". */
+export declare const RenumberIcon: ({ size }: IconProps) => React.JSX.Element;
+/** Circle with a slash: "Omit scene". */
+export declare const OmitIcon: ({ size }: IconProps) => React.JSX.Element;
+/** Curved arrow back: "Restore scene". */
+export declare const RestoreIcon: ({ size }: IconProps) => React.JSX.Element;
 export declare const StatsIcon: ({ size }: IconProps) => React.JSX.Element;
 export declare const HistoryIcon: ({ size }: IconProps) => React.JSX.Element;
 export declare const MicIcon: ({ size }: IconProps) => React.JSX.Element;

package/dist/shell/icons.js

@@ -42,6 +42,12 @@ export const OverflowIcon = ({ size = 14 }) => (_jsxs("svg", { width: size, heig
 export const EyeIcon = ({ size }) => (_jsxs("svg", { ...base(size), children: [_jsx("path", { d: "M1 8s3-6 7-6 7 6 7 6-3 6-7 6-7-6-7-6z" }), _jsx("circle", { cx: "8", cy: "8", r: "2.2" })] }));
 export const EyeOffIcon = ({ size }) => (_jsxs("svg", { ...base(size), children: [_jsx("path", { d: "M1 8s3-6 7-6 7 6 7 6-3 6-7 6-7-6-7-6z" }), _jsx("circle", { cx: "8", cy: "8", r: "2.2" }), _jsx("line", { x1: "2", y1: "2", x2: "14", y2: "14" })] }));
 export const LockIcon = ({ size }) => (_jsxs("svg", { ...base(size), children: [_jsx("rect", { x: "3", y: "7", width: "10", height: "7", rx: "1.5" }), _jsx("path", { d: "M4.5 7V4.5a3.5 3.5 0 017 0V7" })] }));
+/** Numbered list: "Renumber scenes". */
+export const RenumberIcon = ({ size }) => (_jsxs("svg", { ...base(size), children: [_jsx("path", { d: "M2.5 3.5h1v3M2.5 6.5h2" }), _jsx("path", { d: "M2.5 10h2l-2 2.5h2" }), _jsx("path", { d: "M7 4.5h6.5M7 11.5h6.5" })] }));
+/** Circle with a slash: "Omit scene". */
+export const OmitIcon = ({ size }) => (_jsxs("svg", { ...base(size), children: [_jsx("circle", { cx: "8", cy: "8", r: "5.5" }), _jsx("path", { d: "M4.2 11.8l7.6-7.6" })] }));
+/** Curved arrow back: "Restore scene". */
+export const RestoreIcon = ({ size }) => (_jsxs("svg", { ...base(size), children: [_jsx("path", { d: "M3.5 6.5h6a3.5 3.5 0 010 7H6" }), _jsx("path", { d: "M6 3.5l-2.5 3 2.5 3" })] }));
 export const StatsIcon = ({ size }) => (_jsxs("svg", { ...base(size), children: [_jsx("line", { x1: "12", y1: "14", x2: "12", y2: "4" }), _jsx("line", { x1: "8", y1: "14", x2: "8", y2: "7" }), _jsx("line", { x1: "4", y1: "14", x2: "4", y2: "10" })] }));
 export const HistoryIcon = ({ size }) => (_jsxs("svg", { ...base(size), children: [_jsx("circle", { cx: "8", cy: "8.5", r: "6" }), _jsx("polyline", { points: "8,5.5 8,8.5 10.5,10" })] }));
 export const MicIcon = ({ size }) => (_jsxs("svg", { ...base(size), children: [_jsx("rect", { x: "5.5", y: "2", width: "5", height: "8", rx: "2.5" }), _jsx("path", { d: "M3 7.5a5 5 0 0010 0" }), _jsx("line", { x1: "8", y1: "12.5", x2: "8", y2: "14.5" }), _jsx("line", { x1: "5.5", y1: "14.5", x2: "10.5", y2: "14.5" })] }));

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

@@ -0,0 +1,7 @@
+import type { CommandContext, CommandContribution } from '../extensions/command-registry';
+/** Built-in + registered commands available in this session (read-only sessions keep only `readOnly` ones). */
+export declare function useCommands(): CommandContribution[];
+/** A CommandContext for the current moment. */
+export declare function useCommandContext(): () => CommandContext;
+/** `Alt-Shift-H` → `Alt+Shift+H` for tooltips. */
+export declare function displayShortcut(shortcut: string | undefined): string | undefined;

package/dist/shell/use-commands.js

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { useDocument } from '../context/DocumentContext';
+import { useTranslation } from '../i18n/useTranslation';
+import { useCanEdit } from '../extensions/session';
+import { useCommandRegistry } from '../extensions/command-registry';
+import { useRegistryList, withBuiltins } from '../extensions/registry-store';
+import { getEditorView, getSourceView } from '../editor/editor-bus';
+import { builtinCommands } from './builtin-commands';
+/** Built-in + registered commands available in this session (read-only sessions keep only `readOnly` ones). */
+export function useCommands() {
+    const { t } = useTranslation();
+    const canEdit = useCanEdit();
+    const registered = useRegistryList(useCommandRegistry());
+    return useMemo(() => withBuiltins(builtinCommands(t), registered).filter(c => canEdit || c.readOnly), [t, registered, canEdit]);
+}
+/** A CommandContext for the current moment. */
+export function useCommandContext() {
+    const { mode, text, setText } = useDocument();
+    return () => ({ view: getEditorView(), sourceView: getSourceView(), mode, text, setText });
+}
+/** `Alt-Shift-H` → `Alt+Shift+H` for tooltips. */
+export function displayShortcut(shortcut) {
+    return shortcut?.split(/[-+](?=.)/).join('+');
+}

package/dist/shell/use-panel-context.d.ts

@@ -0,0 +1,3 @@
+import type { PanelRenderContext } from '../extensions/panel-registry';
+/** The context panels render with; re-computed on document and selection changes. */
+export declare function usePanelContext(): PanelRenderContext;

package/dist/shell/use-panel-context.js

@@ -0,0 +1,39 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useDocument } from '../context/DocumentContext';
+import { getEditorView, getSourceView, subscribe } from '../editor/editor-bus';
+import { buildSceneList } from '../navigator/scene-list';
+/** Id of the scene containing the caret (formatted or source editor), if it has one. */
+function currentSceneId(text) {
+    const view = getEditorView();
+    if (view) {
+        const caret = view.state.selection.from;
+        let id = null;
+        view.state.doc.forEach((node, offset) => {
+            if (offset < caret && node.type.name === 'scene_heading')
+                id = node.attrs['id'] ?? null;
+        });
+        return id;
+    }
+    const source = getSourceView();
+    if (source) {
+        const caret = source.state.selection.main.head;
+        let id = null;
+        for (const scene of buildSceneList(text))
+            if (scene.textOffset <= caret)
+                id = scene.id;
+        return id;
+    }
+    return null;
+}
+/** The context panels render with; re-computed on document and selection changes. */
+export function usePanelContext() {
+    const { ast, text } = useDocument();
+    const [activeSceneId, setActiveSceneId] = useState(null);
+    useEffect(() => {
+        const update = () => setActiveSceneId(currentSceneId(text));
+        update();
+        return subscribe(update);
+    }, [text]);
+    const sceneIds = useMemo(() => ast.children.flatMap(n => (n.type === 'scene-heading' && n.id ? [n.id] : [])), [ast]);
+    return useMemo(() => ({ ast, sceneIds, activeSceneId }), [ast, sceneIds, activeSceneId]);
+}

package/dist/source/SourceView.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { EditorState } from '@codemirror/state';
+import { Annotation, Compartment, EditorState, Transaction } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { sutraLanguage } from './sutra-lang';
 import { useDocument } from '../context/DocumentContext';
-import { setSourceView } from '../editor/editor-bus';
+import { setSourceView, takeExternalText } from '../editor/editor-bus';
 import { sourceFindHighlightExtension } from './find-highlight-source';
+import { useCanEdit } from '../extensions/session';
+/** Marks the transaction that mirrors an external text change into the view. */
+const externalSync = Annotation.define();
 // Light theme matching the app's warm off-white palette.
 // No internal scroll — the editor grows to content height and .cs-main scrolls.
 const sutraTheme = EditorView.theme({
@@ -54,6 +57,12 @@ const sutraHighlight = HighlightStyle.define([
 ]);
 export function SourceView() {
     const { text, setText } = useDocument();
+    // Read-only sessions: the view is not editable and doc changes other than
+    // mirroring external text are filtered out (see the transactionFilter).
+    const canEdit = useCanEdit();
+    const canEditRef = useRef(canEdit);
+    canEditRef.current = canEdit;
+    const editableCompartment = useRef(new Compartment());
     const containerRef = useRef(null);
     const viewRef = useRef(null);
     // Track externally-driven text so we don't feed our own updates back
@@ -72,8 +81,11 @@ export function SourceView() {
                     syntaxHighlighting(sutraHighlight),
                     sourceFindHighlightExtension,
                     EditorView.lineWrapping,
+                    editableCompartment.current.of([EditorView.editable.of(canEdit), EditorState.readOnly.of(!canEdit)]),
+                    EditorState.transactionFilter.of(tr => tr.docChanged && !canEditRef.current && !tr.annotation(externalSync) ? [] : tr),
                     EditorView.updateListener.of(update => {
-                        if (update.docChanged) {
+                        // Mirrored text (externalSync) is already the document's text.
+                        if (update.docChanged && !update.transactions.some(t => t.annotation(externalSync))) {
                             const newText = update.state.doc.toString();
                             lastTextRef.current = newText;
                             setText(newText);
@@ -98,9 +110,33 @@ export function SourceView() {
         if (!view || text === lastTextRef.current)
             return;
         lastTextRef.current = text;
+        if (takeExternalText(text)) {
+            // From storage: change only what differs, keep the cursor, not undoable.
+            const old = view.state.doc.toString();
+            let from = 0;
+            while (from < old.length && from < text.length && old[from] === text[from])
+                from++;
+            let endOld = old.length;
+            let endNew = text.length;
+            while (endOld > from && endNew > from && old[endOld - 1] === text[endNew - 1]) {
+                endOld--;
+                endNew--;
+            }
+            view.dispatch({
+                changes: { from, to: endOld, insert: text.slice(from, endNew) },
+                annotations: [externalSync.of(true), Transaction.addToHistory.of(false)],
+            });
+            return;
+        }
         view.dispatch({
             changes: { from: 0, to: view.state.doc.length, insert: text },
+            annotations: externalSync.of(true),
         });
     }, [text]);
+    useEffect(() => {
+        viewRef.current?.dispatch({
+            effects: editableCompartment.current.reconfigure([EditorView.editable.of(canEdit), EditorState.readOnly.of(!canEdit)]),
+        });
+    }, [canEdit]);
     return _jsx("div", { ref: containerRef, className: "cs-source-view" });
 }

package/dist/styles/screenplay.css

@@ -31,6 +31,10 @@
   --cs-ui-accent-badge: #d97706;
   --cs-ui-accent-border: #fcd34d;
 
+  /* Warnings (e.g. a scene without an {#id}) — distinct from the amber accent */
+  --cs-ui-warning: #c2410c;
+  --cs-ui-warning-subtle: #fff7ed;
+
   /* Screenplay note tokens */
   --cs-note-bg: #fffbeb;
   --cs-note-border-color: #d97706;
@@ -91,6 +95,45 @@ html, body, #root { height: 100%; margin: 0; padding: 0; overflow: hidden; }
   flex-shrink: 0;
 }
 
+/* Sidebar with embedder tabs (only when PanelRegistry has 'sidebar' panels) */
+.cs-sidebar {
+  width: min(33%,400px);
+  min-width: 180px;
+  max-width: 480px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex-shrink: 0;
+  border-right: 1px solid #ddd;
+  background: #f8f8f6;
+}
+.cs-sidebar > .cs-navigator { width: auto; min-width: 0; max-width: none; flex: 1; border-right: none; }
+.cs-sidebar-tabs { display: flex; gap: 2px; padding: 4px 6px 0; border-bottom: 1px solid var(--cs-ui-border-light, #e2e0d6); }
+.cs-sidebar-tab {
+  background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 8px;
+  font-size: 12px; font-weight: 600; color: var(--cs-ui-text-light-secondary, #59574f); cursor: pointer;
+}
+.cs-sidebar-tab-active { color: var(--cs-ui-text-light-primary, #1c1b18); border-bottom-color: var(--cs-ui-accent, #c4760a); }
+.cs-sidebar-panel { flex: 1; overflow: auto; padding: 8px 12px; font-size: 12px; }
+
+/* Inspector (only when PanelRegistry has 'inspector' panels) */
+.cs-inspector {
+  width: min(28%, 320px);
+  min-width: 200px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  border-left: 1px solid var(--cs-ui-border-light, #e2e0d6);
+  background: var(--cs-ui-bg-panel, #fcfbfa);
+  font-size: 12px;
+}
+.cs-inspector-section { padding: 10px 12px; border-bottom: 1px solid var(--cs-ui-border-light-subtle, #eeece4); }
+.cs-inspector-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cs-ui-text-light-secondary, #59574f); margin-bottom: 6px; }
+@media (max-width: 640px) {
+  .cs-inspector { display: none; }
+}
+.cs-ab-text-label, .cs-tb-text-label { font-size: 12px; font-weight: 600; }
+.cs-ab-panel { display: inline-flex; align-items: center; }
+
 .cs-nav-count {
   background: #e0e0dd;
   border-radius: 10px;
@@ -160,6 +203,36 @@ html, body, #root { height: 100%; margin: 0; padding: 0; overflow: hidden; }
   border-bottom-color: #1976d2;
 }
 
+.cs-nav-scene-missing-id {
+  box-shadow: inset 3px 0 0 var(--cs-ui-warning, #c2410c);
+}
+
+.cs-nav-missing-id-icon {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--cs-ui-warning, #c2410c);
+  flex-shrink: 0;
+  align-self: flex-start;
+  padding-left: 8px;
+  cursor: help;
+}
+
+/* Scene number needs renumbering (format spec §7.4) */
+.cs-nav-scene-number-issue { box-shadow: inset 3px 0 0 var(--cs-ui-warning, #c2410c); }
+.cs-nav-num-issue {
+  color: var(--cs-ui-warning, #c2410c) !important;
+  background: var(--cs-ui-warning-subtle, #fff7ed);
+  border-radius: 3px;
+  padding: 0 4px;
+  cursor: help;
+}
+.cs-nav-scene-side { display: flex; align-items: flex-start; gap: 2px; flex-shrink: 0; }
+.cs-nav-omit-btn { opacity: 0; transition: opacity 0.1s; }
+.cs-nav-item:hover .cs-nav-omit-btn,
+.cs-nav-item:focus-within .cs-nav-omit-btn,
+.cs-nav-omit-btn:focus-visible { opacity: 1; }
+.cs-nav-scene-omitted .cs-nav-heading { text-decoration: line-through; opacity: 0.7; }
+
 .cs-nav-scene-num {
   font-size: 12px;
   font-weight: 600;
@@ -434,6 +507,12 @@ html, body, #root { height: 100%; margin: 0; padding: 0; overflow: hidden; }
   margin-left: max(10%, 8px);
 }
 
+/* Tool-private `x-` keys (format spec §7.1) stay in the text but are not shown */
+.cs-scene-metadata[data-private],
+.cs-fm-field[data-private] {
+  display: none;
+}
+
 /* Synopsis renders as italic prose, visually distinct from key-value metadata */
 .cs-scene-metadata[data-key="synopsis"] {
   font-size: 10pt;
@@ -2675,9 +2754,12 @@ html, body, #root { height: 100%; margin: 0; padding: 0; overflow: hidden; }
   padding: 10px 12px;
   font-size: 13px;
   color: var(--cs-ui-text-light-primary, #1c1b18);
-  min-height: 140px;
   line-height: 1.5;
   white-space: pre-wrap;
+  /* Long selections scroll inside the pane; .cs-dialog clips overflow. */
+  box-sizing: border-box;
+  height: min(50vh, 420px);
+  overflow-y: auto;
 }
 .cs-voice-box-formatted {
   width: 100%;
@@ -2689,6 +2771,8 @@ html, body, #root { height: 100%; margin: 0; padding: 0; overflow: hidden; }
   font-size: 13px;
   font-family: 'Courier Prime', Courier, monospace;
   color: var(--cs-ui-text-light-primary, #1c1b18);
+  /* Same height as the raw pane so the two read side by side. */
+  height: min(50vh, 420px);
   min-height: 140px;
   line-height: 1.4;
   resize: vertical;
@@ -3004,3 +3088,32 @@ html, body, #root { height: 100%; margin: 0; padding: 0; overflow: hidden; }
   .cs-tp-row > :first-child { grid-column: 1 / -1; }
   .cs-tp-add { margin-left: 0; }
 }
+
+/* AI-assisted import dialog */
+.cs-ai-import-body { padding: 14px 16px; max-height: 80vh; overflow-y: auto; font-size: 13px; }
+.cs-ai-import-hint { margin: 0 0 10px; color: var(--cs-ui-text-light-secondary, #59574f); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
+.cs-ai-import-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 8px 10px; border-radius: 4px; margin-bottom: 10px; }
+.cs-ai-import-paste { width: 100%; box-sizing: border-box; font-family: 'Courier New', monospace; font-size: 12px; padding: 8px; border: 1px solid var(--cs-ui-border-light, #e2e0d6); border-radius: 4px; }
+.cs-ai-import-policy { background: var(--cs-ui-bg-panel-subtle, #f4f2ea); border-radius: 4px; padding: 10px; font-size: 12px; margin-bottom: 10px; white-space: pre-wrap; }
+.cs-ai-import-agree { display: flex; gap: 8px; align-items: center; font-size: 12px; }
+.cs-ai-import-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+.cs-ai-import-warnings { margin-bottom: 10px; }
+.cs-ai-import-review { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.cs-ai-import-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cs-ui-text-light-secondary, #59574f); margin-bottom: 6px; }
+.cs-ai-import-source, .cs-ai-import-block pre { white-space: pre-wrap; word-break: break-word; font-family: 'Courier New', monospace; font-size: 12px; margin: 0; }
+.cs-ai-import-source { max-height: 60vh; overflow: auto; background: var(--cs-ui-bg-panel-subtle, #f4f2ea); padding: 8px; border-radius: 4px; }
+.cs-ai-import-blocks { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
+.cs-ai-import-block { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--cs-ui-border-light-subtle, #eeece4); }
+@media (max-width: 640px) {
+  .cs-ai-import-review { grid-template-columns: 1fr; }
+  .cs-ai-import-block { grid-template-columns: 1fr; }
+}
+
+/* Omitted scene (format spec §7.4) */
+.cs-scene-omitted .cs-scene-heading-text { text-decoration: line-through; opacity: 0.6; }
+.cs-omitted-badge {
+  display: inline-block; margin-left: 12px; padding: 0 6px; border-radius: 3px;
+  font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; text-decoration: none;
+  color: var(--cs-ui-warning, #c2410c); background: var(--cs-ui-warning-subtle, #fff7ed);
+  user-select: none; vertical-align: middle;
+}

package/dist/titlepage/ExportDialog.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders every export format from one list: the editor's built-ins
+ * (file/builtin-exporters.ts) plus the embedder's ExportRegistry entries.
+ * Screenplay formats are cards; reports are grouped by `family` with chips.
+ */
 export declare function ExportDialog(): import("react").JSX.Element;