@sutrata/editor 0.1.1 → 0.2.0

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,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { EditorState } from '@codemirror/state';
+import { Annotation, Compartment, EditorState } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
@@ -9,6 +9,9 @@ import { sutraLanguage } from './sutra-lang';
 import { useDocument } from '../context/DocumentContext';
 import { setSourceView } 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,6 +81,8 @@ 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) {
                             const newText = update.state.doc.toString();
@@ -100,7 +111,13 @@ export function SourceView() {
         lastTextRef.current = text;
         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,11 @@ 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] {
+  display: none;
+}
+
 /* Synopsis renders as italic prose, visually distinct from key-value metadata */
 .cs-scene-metadata[data-key="synopsis"] {
   font-size: 10pt;
@@ -2675,9 +2753,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 +2770,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 +3087,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;

package/dist/titlepage/ExportDialog.js

@@ -1,16 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useDocument } from '../context/DocumentContext';
-import { exportFountain, parse, romanizeSutra } from '@sutrata/parser';
+import { parse, romanizeSutra } from '@sutrata/parser';
 import { useTranslation } from '../i18n/useTranslation';
-import { exportToDocx } from '../file/docx-exporter';
-import { extractWorkflowData, exportOneLinerCsv, exportShotListCsv, exportCastReportCsv, exportOneLinerDocx, exportShotListDocx, exportCastReportDocx, openPrintPreview, openScreenplayPrintPreview, } from '../file/workflow-reports';
 import { allStyles } from '../styles/registry';
+import { useExportRegistry } from '../extensions/export-registry';
+import { useRegistryList, withBuiltins } from '../extensions/registry-store';
+import { builtinExporters } from '../file/builtin-exporters';
+/**
+ * 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 function ExportDialog() {
     const { ast, text, filePath, setExportVisible, resolvedStyle, customStyles, showToast } = useDocument();
     const { t } = useTranslation();
+    const registered = useRegistryList(useExportRegistry());
+    const exporters = useMemo(() => withBuiltins(builtinExporters(t), registered), [t, registered]);
+    const screenplayFormats = exporters.filter(e => e.group === 'screenplay');
+    const reportFormats = exporters.filter(e => e.group === 'report');
+    const reportFamilies = useMemo(() => {
+        const families = new Map();
+        for (const e of reportFormats)
+            families.set(e.family ?? e.label, [...(families.get(e.family ?? e.label) ?? []), e]);
+        return [...families];
+    }, [reportFormats]);
     const [tab, setTab] = useState('screenplay');
-    const [format, setFormat] = useState('pdf');
+    const [formatId, setFormatId] = useState(screenplayFormats[0]?.id ?? '');
     const [warnings, setWarnings] = useState([]);
     const [isExporting, setIsExporting] = useState(false);
     const [styleOverride, setStyleOverride] = useState('');
@@ -20,7 +36,11 @@ export function ExportDialog() {
     const [skipNotes, setSkipNotes] = useState(false);
     const hasIndicText = /[\u0900-\u0DFF]/.test(text);
     const styleChoices = allStyles(customStyles);
-    const showStylePicker = tab === 'screenplay' && (format === 'docx' || format === 'pdf');
+    const selected = exporters.find(e => e.id === formatId) ?? screenplayFormats[0];
+    const showStylePicker = tab === 'screenplay' && !!selected?.supports?.style;
+    const showSkipNotes = tab === 'screenplay' && !!selected?.supports?.skipNotes;
+    const showRomanize = tab === 'screenplay' && hasIndicText && !!selected?.supports?.romanize;
+    const showReportRomanize = hasIndicText && reportFormats.some(e => e.supports?.romanize);
     useEffect(() => {
         const onKey = (e) => {
             if (e.key === 'Escape')
@@ -30,87 +50,37 @@ export function ExportDialog() {
         return () => document.removeEventListener('keydown', onKey);
     }, [setExportVisible]);
     const baseName = (filePath ?? 'screenplay').replace(/\.[^.]+$/, '');
-    /** The AST handed to the PDF/DOCX exporters: the document itself, or a romanized copy
+    /** The context an exporter runs with: the document, or a romanized copy
      *  (Indic → ISO 15919, export only; the .sutra text is never changed). */
-    function screenplayAst() {
-        if (romanizeScope === 'off' || !hasIndicText)
-            return { doc: ast, suffix: '' };
-        const romanized = romanizeSutra(text, { scope: romanizeScope, variant: romanizeVariant });
-        return { doc: parse(romanized), suffix: '_romanized' };
-    }
-    /** Workflow-report data, from a fully romanized copy when that option is on. */
-    function reportData() {
-        if (!romanizeReports || !hasIndicText)
-            return { data: extractWorkflowData(ast), suffix: '' };
-        const romanized = romanizeSutra(text, { scope: 'all', variant: romanizeVariant, notice: false });
-        return { data: extractWorkflowData(parse(romanized)), suffix: '_romanized' };
+    function exportContext(exporter) {
+        const romanizeScopeFor = !exporter.supports?.romanize || !hasIndicText ? null
+            : exporter.group === 'report' ? (romanizeReports ? 'all' : null)
+                : romanizeScope === 'off' ? null : romanizeScope;
+        const options = {
+            styleId: exporter.group === 'screenplay' ? styleOverride || undefined : undefined,
+            skipNotes: exporter.group === 'screenplay' && skipNotes,
+            romanized: romanizeScopeFor ? { scope: romanizeScopeFor, variant: romanizeVariant } : null,
+        };
+        if (!romanizeScopeFor)
+            return { text, ast, style: resolvedStyle, customStyles, options, baseName };
+        const romanized = romanizeSutra(text, {
+            scope: romanizeScopeFor, variant: romanizeVariant, ...(exporter.group === 'report' ? { notice: false } : {}),
+        });
+        return { text: romanized, ast: parse(romanized), style: resolvedStyle, customStyles, options, baseName };
     }
     async function doExport() {
+        if (!selected)
+            return;
         setIsExporting(true);
         try {
-            const { data, suffix: reportSuffix } = reportData();
-            const reportTitleSuffix = reportSuffix ? ' (ROMANIZED)' : '';
-            if (format === 'fountain') {
-                const result = exportFountain(ast);
-                setWarnings(result.warnings);
-                download(`${baseName}.fountain`, result.text, 'text/plain');
-                showToast('Exported Fountain screenplay', 'success');
-            }
-            else if (format === 'docx') {
-                setWarnings([]);
-                const { doc, suffix } = screenplayAst();
-                const blob = await exportToDocx(doc, styleOverride || undefined, customStyles, skipNotes);
-                downloadBlob(`${baseName}${suffix}.docx`, blob);
-                showToast('Exported Word document (.docx)', 'success');
-            }
-            else if (format === 'pdf') {
-                setWarnings([]);
-                const { doc, suffix } = screenplayAst();
-                const title = `${baseName.toUpperCase()} - SCREENPLAY${suffix ? ' (ROMANIZED)' : ''}`;
-                await openScreenplayPrintPreview(doc, title, styleOverride || undefined, customStyles, skipNotes);
-                showToast('Opened Screenplay Print Preview', 'info');
-            }
-            else if (format === 'oneliner-print') {
-                setWarnings([]);
-                await openPrintPreview(data.scenes, `${baseName.toUpperCase()} - ONE-LINER SCHEDULE${reportTitleSuffix}`);
-                showToast('Opened One-Liner Schedule', 'info');
-            }
-            else if (format === 'oneliner-docx') {
-                setWarnings([]);
-                const blob = await exportOneLinerDocx(data.scenes);
-                downloadBlob(`${baseName}_one_liner${reportSuffix}.docx`, blob);
-                showToast('Exported One-Liner DOCX', 'success');
-            }
-            else if (format === 'oneliner-csv') {
-                setWarnings([]);
-                const csv = exportOneLinerCsv(data.scenes);
-                download(`${baseName}_one_liner${reportSuffix}.csv`, csv, 'text/csv');
-                showToast('Exported One-Liner CSV', 'success');
-            }
-            else if (format === 'shotlist-docx') {
-                setWarnings([]);
-                const blob = await exportShotListDocx(data.scenes);
-                downloadBlob(`${baseName}_shot_list${reportSuffix}.docx`, blob);
-                showToast('Exported Shot List DOCX', 'success');
-            }
-            else if (format === 'shotlist-csv') {
-                setWarnings([]);
-                const csv = exportShotListCsv(data.scenes);
-                download(`${baseName}_shot_list${reportSuffix}.csv`, csv, 'text/csv');
-                showToast('Exported Shot List CSV', 'success');
-            }
-            else if (format === 'cast-docx') {
-                setWarnings([]);
-                const blob = await exportCastReportDocx(data.characters);
-                downloadBlob(`${baseName}_cast_report${reportSuffix}.docx`, blob);
-                showToast('Exported Cast Report DOCX', 'success');
-            }
-            else if (format === 'cast-csv') {
-                setWarnings([]);
-                const csv = exportCastReportCsv(data.characters);
-                download(`${baseName}_cast_report${reportSuffix}.csv`, csv, 'text/csv');
-                showToast('Exported Cast Report CSV', 'success');
-            }
+            const ctx = exportContext(selected);
+            // Called before any await: print previews must open inside the click.
+            const output = await selected.run(ctx);
+            const blob = output instanceof Blob ? output : output?.blob;
+            setWarnings(output && !(output instanceof Blob) ? output.warnings ?? [] : []);
+            if (blob)
+                downloadBlob(selected.fileName(ctx), blob);
+            showToast(selected.successMessage ?? `Exported ${selected.label}`, blob ? 'success' : 'info');
         }
         catch (err) {
             console.error('Export failed', err);
@@ -121,11 +91,6 @@ export function ExportDialog() {
             setIsExporting(false);
         }
     }
-    function download(filename, content, mimeType) {
-        const data = mimeType === 'text/csv' ? ['\uFEFF', content] : [content];
-        const blob = new Blob(data, { type: `${mimeType};charset=utf-8` });
-        downloadBlob(filename, blob);
-    }
     function downloadBlob(filename, blob) {
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
@@ -139,14 +104,12 @@ export function ExportDialog() {
                 setExportVisible(false);
         }, children: _jsxs("div", { className: "cs-export-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "cs-export-title", style: { maxHeight: '90vh', maxWidth: '540px', width: '92%', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { className: "cs-panel-header", children: [_jsx("span", { id: "cs-export-title", className: "cs-panel-title", children: t('export.title') }), _jsx("button", { className: "cs-panel-close", onClick: () => setExportVisible(false), "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { className: "cs-panel-body", style: { overflowY: 'auto', flex: 1, padding: '16px' }, children: [_jsxs("div", { className: "cs-export-segmented", role: "tablist", "aria-label": "Export category", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": tab === 'screenplay', className: `cs-export-seg-btn${tab === 'screenplay' ? ' cs-export-seg-btn-active' : ''}`, onClick: () => {
                                         setTab('screenplay');
-                                        if (!['fountain', 'docx', 'pdf'].includes(format))
-                                            setFormat('pdf');
-                                    }, children: "Screenplay Formats" }), _jsx("button", { type: "button", role: "tab", "aria-selected": tab === 'reports', className: `cs-export-seg-btn${tab === 'reports' ? ' cs-export-seg-btn-active' : ''}`, onClick: () => {
+                                        if (selected?.group !== 'screenplay')
+                                            setFormatId(screenplayFormats[0]?.id ?? '');
+                                    }, children: "Screenplay Formats" }), reportFormats.length > 0 && _jsx("button", { type: "button", role: "tab", "aria-selected": tab === 'reports', className: `cs-export-seg-btn${tab === 'reports' ? ' cs-export-seg-btn-active' : ''}`, onClick: () => {
                                         setTab('reports');
-                                        if (['fountain', 'docx', 'pdf'].includes(format))
-                                            setFormat('oneliner-print');
-                                    }, children: "Production Reports" })] }), tab === 'screenplay' ? (_jsxs("div", { children: [_jsxs("div", { className: "cs-export-card-grid", children: [_jsxs("div", { className: `cs-export-format-card${format === 'pdf' ? ' cs-export-format-card-selected' : ''}`, onClick: () => setFormat('pdf'), role: "radio", "aria-checked": format === 'pdf', tabIndex: 0, onKeyDown: e => { if (e.key === 'Enter' || e.key === ' ')
-                                                setFormat('pdf'); }, children: [_jsx("input", { type: "radio", name: "format", value: "pdf", checked: format === 'pdf', onChange: () => setFormat('pdf'), style: { marginTop: '2px' } }), _jsxs("div", { children: [_jsx("strong", { style: { fontSize: '13px', display: 'block', color: 'var(--cs-ui-text-light-primary, #1c1b18)' }, children: "PDF / Print Preview" }), _jsx("span", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: "Print-ready industry screenplay layout styled according to your active visual template." })] })] }), _jsxs("div", { className: `cs-export-format-card${format === 'docx' ? ' cs-export-format-card-selected' : ''}`, onClick: () => setFormat('docx'), role: "radio", "aria-checked": format === 'docx', tabIndex: 0, onKeyDown: e => { if (e.key === 'Enter' || e.key === ' ')
-                                                setFormat('docx'); }, children: [_jsx("input", { type: "radio", name: "format", value: "docx", checked: format === 'docx', onChange: () => setFormat('docx'), style: { marginTop: '2px' } }), _jsxs("div", { children: [_jsx("strong", { style: { fontSize: '13px', display: 'block', color: 'var(--cs-ui-text-light-primary, #1c1b18)' }, children: "Microsoft Word (.docx)" }), _jsx("span", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: t('export.docxDesc') })] })] }), _jsxs("div", { className: `cs-export-format-card${format === 'fountain' ? ' cs-export-format-card-selected' : ''}`, onClick: () => setFormat('fountain'), role: "radio", "aria-checked": format === 'fountain', tabIndex: 0, onKeyDown: e => { if (e.key === 'Enter' || e.key === ' ')
-                                                setFormat('fountain'); }, children: [_jsx("input", { type: "radio", name: "format", value: "fountain", checked: format === 'fountain', onChange: () => setFormat('fountain'), style: { marginTop: '2px' } }), _jsxs("div", { children: [_jsx("strong", { style: { fontSize: '13px', display: 'block', color: 'var(--cs-ui-text-light-primary, #1c1b18)' }, children: "Fountain (.fountain)" }), _jsx("span", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: t('export.fountainDesc') })] })] })] }), showStylePicker && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '14px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-style-select", style: { fontSize: '12px' }, children: t('export.style') }), _jsxs("select", { id: "cs-export-style-select", className: "cs-settings-select", value: styleOverride, onChange: e => setStyleOverride(e.target.value), children: [_jsxs("option", { value: "", children: [t('export.styleDefault'), " (", resolvedStyle.name, ")"] }), styleChoices.map(s => (_jsx("option", { value: s.id, children: s.name }, s.id)))] })] })), showStylePicker && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("input", { id: "cs-export-skip-notes", type: "checkbox", checked: skipNotes, onChange: e => setSkipNotes(e.target.checked) }), _jsx("label", { htmlFor: "cs-export-skip-notes", className: "cs-settings-label", style: { fontSize: '12px', margin: 0 }, children: "Skip notes ([[ ]])" })] })), showStylePicker && hasIndicText && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', flexWrap: 'wrap', gap: '8px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-romanize-select", style: { fontSize: '12px' }, children: "Romanized copy (ISO 15919)" }), _jsxs("select", { id: "cs-export-romanize-select", className: "cs-settings-select", value: romanizeScope, onChange: e => setRomanizeScope(e.target.value), children: [_jsx("option", { value: "off", children: "Off (native script)" }), _jsx("option", { value: "all", children: "All text" }), _jsx("option", { value: "dialogue", children: "Dialogue only" })] }), romanizeScope !== 'off' && (_jsxs("select", { "aria-label": "Romanization variant", className: "cs-settings-select", value: romanizeVariant, onChange: e => setRomanizeVariant(e.target.value), children: [_jsx("option", { value: "strict", children: "Strict ISO 15919" }), _jsx("option", { value: "colloquial", children: "Casual (no diacritics)" })] })), romanizeScope !== 'off' && (_jsx("span", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)', flexBasis: '100%' }, children: "Your script is not changed. Page numbers in the romanized copy differ from the original." }))] }))] })) : (_jsxs("div", { children: [_jsxs("div", { className: "cs-export-report-box", children: [_jsxs("div", { className: "cs-export-report-header", children: [_jsx("span", { className: "cs-export-report-title", children: "One-Liner Schedule" }), _jsxs("div", { className: "cs-export-chips", children: [_jsx("button", { type: "button", className: `cs-export-chip${format === 'oneliner-print' ? ' cs-export-chip-active' : ''}`, onClick: () => setFormat('oneliner-print'), children: "Print View" }), _jsx("button", { type: "button", className: `cs-export-chip${format === 'oneliner-docx' ? ' cs-export-chip-active' : ''}`, onClick: () => setFormat('oneliner-docx'), children: "Word (.docx)" }), _jsx("button", { type: "button", className: `cs-export-chip${format === 'oneliner-csv' ? ' cs-export-chip-active' : ''}`, onClick: () => setFormat('oneliner-csv'), children: "Spreadsheet (.csv)" })] })] }), _jsx("div", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: "A scene-by-scene production stripboard breakdown with locations, cast, and timings." })] }), _jsxs("div", { className: "cs-export-report-box", children: [_jsxs("div", { className: "cs-export-report-header", children: [_jsx("span", { className: "cs-export-report-title", children: "Shot List" }), _jsxs("div", { className: "cs-export-chips", children: [_jsx("button", { type: "button", className: `cs-export-chip${format === 'shotlist-docx' ? ' cs-export-chip-active' : ''}`, onClick: () => setFormat('shotlist-docx'), children: "Word (.docx)" }), _jsx("button", { type: "button", className: `cs-export-chip${format === 'shotlist-csv' ? ' cs-export-chip-active' : ''}`, onClick: () => setFormat('shotlist-csv'), children: "Spreadsheet (.csv)" })] })] }), _jsx("div", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: "Camera shot specifications extracted from scene headings and production notes." })] }), _jsxs("div", { className: "cs-export-report-box", children: [_jsxs("div", { className: "cs-export-report-header", children: [_jsx("span", { className: "cs-export-report-title", children: "Cast Breakdown" }), _jsxs("div", { className: "cs-export-chips", children: [_jsx("button", { type: "button", className: `cs-export-chip${format === 'cast-docx' ? ' cs-export-chip-active' : ''}`, onClick: () => setFormat('cast-docx'), children: "Word (.docx)" }), _jsx("button", { type: "button", className: `cs-export-chip${format === 'cast-csv' ? ' cs-export-chip-active' : ''}`, onClick: () => setFormat('cast-csv'), children: "Spreadsheet (.csv)" })] })] }), _jsx("div", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: "Character occurrences, dialogue counts, and assigned actors list." })] }), hasIndicText && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', flexWrap: 'wrap', gap: '8px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-romanize-reports", style: { fontSize: '12px' }, children: "Romanized copy (ISO 15919)" }), _jsxs("select", { id: "cs-export-romanize-reports", className: "cs-settings-select", value: romanizeReports ? 'on' : 'off', onChange: e => setRomanizeReports(e.target.value === 'on'), children: [_jsx("option", { value: "off", children: "Off (native script)" }), _jsx("option", { value: "on", children: "Romanize all text" })] }), romanizeReports && (_jsxs("select", { "aria-label": "Romanization variant", className: "cs-settings-select", value: romanizeVariant, onChange: e => setRomanizeVariant(e.target.value), children: [_jsx("option", { value: "strict", children: "Strict ISO 15919" }), _jsx("option", { value: "colloquial", children: "Casual (no diacritics)" })] }))] }))] })), warnings.length > 0 && (_jsxs("div", { className: "cs-export-warnings", style: { background: '#fffbeb', border: '1px solid #fcd34d', padding: '10px', borderRadius: '4px', marginTop: '14px' }, children: [_jsx("div", { className: "cs-export-warn-title", style: { fontWeight: 600, color: '#b45309', fontSize: '12px', marginBottom: '4px' }, children: t('export.warnings') }), warnings.map((w, i) => (_jsxs("div", { className: "cs-export-warn-item", style: { fontSize: '11px', color: '#59574f' }, children: ["\u2022 ", w] }, i)))] }))] }), _jsxs("div", { className: "cs-export-actions", style: { borderTop: '1px solid var(--cs-ui-border-light-subtle, #eeece4)', padding: '12px 16px', display: 'flex', justifyContent: 'flex-end', gap: '8px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)' }, children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel", onClick: () => setExportVisible(false), children: t('export.cancel') }), _jsx("button", { type: "button", className: "cs-confirm-btn-primary", onClick: doExport, disabled: isExporting, children: isExporting ? 'Exporting...' : t('export.download') })] })] }) }));
+                                        if (selected?.group !== 'report')
+                                            setFormatId(reportFormats[0]?.id ?? '');
+                                    }, children: "Production Reports" })] }), tab === 'screenplay' ? (_jsxs("div", { children: [_jsx("div", { className: "cs-export-card-grid", children: screenplayFormats.map(f => (_jsxs("div", { className: `cs-export-format-card${selected?.id === f.id ? ' cs-export-format-card-selected' : ''}`, onClick: () => setFormatId(f.id), role: "radio", "aria-checked": selected?.id === f.id, tabIndex: 0, onKeyDown: e => { if (e.key === 'Enter' || e.key === ' ')
+                                            setFormatId(f.id); }, children: [_jsx("input", { type: "radio", name: "format", value: f.id, checked: selected?.id === f.id, onChange: () => setFormatId(f.id), style: { marginTop: '2px' } }), _jsxs("div", { children: [_jsx("strong", { style: { fontSize: '13px', display: 'block', color: 'var(--cs-ui-text-light-primary, #1c1b18)' }, children: f.label }), f.description && (_jsx("span", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: f.description }))] })] }, f.id))) }), showStylePicker && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '14px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-style-select", style: { fontSize: '12px' }, children: t('export.style') }), _jsxs("select", { id: "cs-export-style-select", className: "cs-settings-select", value: styleOverride, onChange: e => setStyleOverride(e.target.value), children: [_jsxs("option", { value: "", children: [t('export.styleDefault'), " (", resolvedStyle.name, ")"] }), styleChoices.map(s => (_jsx("option", { value: s.id, children: s.name }, s.id)))] })] })), showSkipNotes && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("input", { id: "cs-export-skip-notes", type: "checkbox", checked: skipNotes, onChange: e => setSkipNotes(e.target.checked) }), _jsx("label", { htmlFor: "cs-export-skip-notes", className: "cs-settings-label", style: { fontSize: '12px', margin: 0 }, children: "Skip notes ([[ ]])" })] })), showRomanize && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', flexWrap: 'wrap', gap: '8px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-romanize-select", style: { fontSize: '12px' }, children: "Romanized copy (ISO 15919)" }), _jsxs("select", { id: "cs-export-romanize-select", className: "cs-settings-select", value: romanizeScope, onChange: e => setRomanizeScope(e.target.value), children: [_jsx("option", { value: "off", children: "Off (native script)" }), _jsx("option", { value: "all", children: "All text" }), _jsx("option", { value: "dialogue", children: "Dialogue only" })] }), romanizeScope !== 'off' && (_jsxs("select", { "aria-label": "Romanization variant", className: "cs-settings-select", value: romanizeVariant, onChange: e => setRomanizeVariant(e.target.value), children: [_jsx("option", { value: "strict", children: "Strict ISO 15919" }), _jsx("option", { value: "colloquial", children: "Casual (no diacritics)" })] })), romanizeScope !== 'off' && (_jsx("span", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)', flexBasis: '100%' }, children: "Your script is not changed. Page numbers in the romanized copy differ from the original." }))] }))] })) : (_jsxs("div", { children: [reportFamilies.map(([family, formats]) => (_jsxs("div", { className: "cs-export-report-box", children: [_jsxs("div", { className: "cs-export-report-header", children: [_jsx("span", { className: "cs-export-report-title", children: family }), _jsx("div", { className: "cs-export-chips", children: formats.map(f => (_jsx("button", { type: "button", className: `cs-export-chip${selected?.id === f.id ? ' cs-export-chip-active' : ''}`, onClick: () => setFormatId(f.id), children: f.formatLabel ?? f.label }, f.id))) })] }), formats[0].description && (_jsx("div", { style: { fontSize: '11px', color: 'var(--cs-ui-text-light-secondary, #59574f)' }, children: formats[0].description }))] }, family))), showReportRomanize && (_jsxs("div", { className: "cs-settings-row", style: { marginTop: '8px', padding: '10px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)', borderRadius: '6px', flexWrap: 'wrap', gap: '8px' }, children: [_jsx("label", { className: "cs-settings-label", htmlFor: "cs-export-romanize-reports", style: { fontSize: '12px' }, children: "Romanized copy (ISO 15919)" }), _jsxs("select", { id: "cs-export-romanize-reports", className: "cs-settings-select", value: romanizeReports ? 'on' : 'off', onChange: e => setRomanizeReports(e.target.value === 'on'), children: [_jsx("option", { value: "off", children: "Off (native script)" }), _jsx("option", { value: "on", children: "Romanize all text" })] }), romanizeReports && (_jsxs("select", { "aria-label": "Romanization variant", className: "cs-settings-select", value: romanizeVariant, onChange: e => setRomanizeVariant(e.target.value), children: [_jsx("option", { value: "strict", children: "Strict ISO 15919" }), _jsx("option", { value: "colloquial", children: "Casual (no diacritics)" })] }))] }))] })), warnings.length > 0 && (_jsxs("div", { className: "cs-export-warnings", style: { background: '#fffbeb', border: '1px solid #fcd34d', padding: '10px', borderRadius: '4px', marginTop: '14px' }, children: [_jsx("div", { className: "cs-export-warn-title", style: { fontWeight: 600, color: '#b45309', fontSize: '12px', marginBottom: '4px' }, children: t('export.warnings') }), warnings.map((w, i) => (_jsxs("div", { className: "cs-export-warn-item", style: { fontSize: '11px', color: '#59574f' }, children: ["\u2022 ", w] }, i)))] }))] }), _jsxs("div", { className: "cs-export-actions", style: { borderTop: '1px solid var(--cs-ui-border-light-subtle, #eeece4)', padding: '12px 16px', display: 'flex', justifyContent: 'flex-end', gap: '8px', background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)' }, children: [_jsx("button", { type: "button", className: "cs-confirm-btn-cancel", onClick: () => setExportVisible(false), children: t('export.cancel') }), _jsx("button", { type: "button", className: "cs-confirm-btn-primary", onClick: doExport, disabled: isExporting || !selected, children: isExporting ? 'Exporting...' : t('export.download') })] })] }) }));
 }