@sutrata/editor 0.1.0 → 0.1.2

package/src/shell/AppBar.tsx

@@ -1,354 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,175 +0,0 @@
-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>
-        </>
-      )}
-    </>
-  )
-}