@sutrata/editor 0.1.0

package/src/shell/AppBar.tsx

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

package/src/shell/AppShell.tsx

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

package/src/shell/ConfirmDialog.tsx

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

package/src/shell/ElementToolbar.tsx

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