@sutrata/editor 0.1.1 → 0.1.2

package/src/navigator/StatisticsDialog.tsx

@@ -1,249 +0,0 @@
-import React from 'react'
-import { useDocument } from '../context/DocumentContext'
-import { extractWorkflowData } from '../file/workflow-reports'
-import { getEditorView } from '../editor/editor-bus'
-import { schema } from '../editor/schema'
-
-interface Props {
-  onClose: () => void
-}
-
-export function StatisticsDialog({ onClose }: Props) {
-  const { ast, text, setText } = useDocument()
-  const { scenes, characters } = extractWorkflowData(ast)
-
-  const handleUpdateActor = (charName: string, actorName: string) => {
-    const cleanChar = charName.trim().toUpperCase()
-    if (!cleanChar) return
-
-    const view = getEditorView()
-    const key = `characters.${cleanChar}`
-
-    if (view) {
-      let tr = view.state.tr
-      let titlePagePos: number | null = null
-      view.state.doc.forEach((node, offset) => {
-        if (node.type.name === 'title_page') titlePagePos = offset
-      })
-
-      if (titlePagePos !== null) {
-        const tpNode = view.state.doc.nodeAt(titlePagePos)!
-        let existingPos: number | null = null
-        let pos = titlePagePos + 1 // inside title_page
-
-        tpNode.forEach((field) => {
-          if (field.attrs['fmKey'] === key) {
-            existingPos = pos
-          }
-          pos += field.nodeSize
-        })
-
-        if (existingPos !== null) {
-          const fieldNode = view.state.doc.nodeAt(existingPos)!
-          if (actorName.trim() === '') {
-            tr = tr.delete(existingPos, existingPos + fieldNode.nodeSize)
-          } else {
-            tr = tr.replaceWith(
-              existingPos + 1,
-              existingPos + fieldNode.nodeSize - 1,
-              schema.text(actorName)
-            )
-          }
-        } else if (actorName.trim() !== '') {
-          const insertPos = titlePagePos + tpNode.nodeSize - 1 // end of title_page
-          const newField = schema.nodes['frontmatter_field']!.create(
-            { fmKey: key },
-            schema.text(actorName)
-          )
-          tr = tr.insert(insertPos, newField)
-        }
-        view.dispatch(tr)
-      } else {
-        const freshText = updateActorInText(text, cleanChar, actorName)
-        setText(freshText)
-      }
-    } else {
-      const freshText = updateActorInText(text, cleanChar, actorName)
-      setText(freshText)
-    }
-  }
-
-  // Word count helper
-  const wordCount = text.split(/\s+/).filter(Boolean).length
-
-  // Sum up estimated duration. Each scene's est-duration is "MM:SS" — sum
-  // in seconds and only convert to minutes/hours once, at the end. Summing
-  // the MM parts alone (the previous approach) silently dropped every
-  // scene's seconds component, undercounting the total by tens of minutes
-  // on a script with many scenes.
-  let totalSeconds = 0
-  scenes.forEach(s => {
-    const match = /^(\d+):(\d{1,2})$/.exec(s.estDuration.trim())
-    if (match && match[1] && match[2]) {
-      totalSeconds += Number.parseInt(match[1], 10) * 60 + Number.parseInt(match[2], 10)
-    }
-  })
-  const totalMinutes = Math.round(totalSeconds / 60)
-  const totalDurationLabel = totalSeconds === 0
-    ? 'TBD'
-    : totalMinutes >= 60
-      ? `${Math.floor(totalMinutes / 60)}h ${totalMinutes % 60}m`
-      : `${totalMinutes} min`
-
-  return (
-    <div
-      className="cs-dialog-overlay"
-      role="presentation"
-      onClick={e => {
-        if (e.target === e.currentTarget) onClose()
-      }}
-    >
-      <div
-        className="cs-dialog"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="cs-stats-dialog-title"
-        style={{ maxWidth: '640px', width: '92%', maxHeight: '85vh', display: 'flex', flexDirection: 'column' }}
-      >
-        <div className="cs-panel-header">
-          <span id="cs-stats-dialog-title" className="cs-panel-title">Script Statistics</span>
-          <button className="cs-panel-close" onClick={onClose} aria-label="Close">
-            ×
-          </button>
-        </div>
-        <div className="cs-panel-body" style={{ overflowY: 'auto', flex: 1, padding: '20px' }}>
-          <div className="cs-stats-summary-grid">
-            <div className="cs-stats-card">
-              <div className="cs-stats-card-val">{scenes.length}</div>
-              <div className="cs-stats-card-lbl">Scenes</div>
-            </div>
-            <div className="cs-stats-card">
-              <div className="cs-stats-card-val">{wordCount.toLocaleString()}</div>
-              <div className="cs-stats-card-lbl">Words</div>
-            </div>
-            <div className="cs-stats-card">
-              <div className="cs-stats-card-val">
-                {totalDurationLabel}
-              </div>
-              <div className="cs-stats-card-lbl">Est. Duration</div>
-            </div>
-          </div>
-
-          <div className="cs-stats-section-hdr">
-            Cast List &amp; Occurrences ({characters.length})
-          </div>
-
-          {characters.length === 0 ? (
-            <div style={{ color: 'var(--cs-ui-text-light-muted, #8c897f)', fontStyle: 'italic', fontSize: '12px' }}>
-              No character cues detected in the screenplay yet.
-            </div>
-          ) : (
-            <table className="cs-stats-table">
-              <thead>
-                <tr>
-                  <th style={{ textAlign: 'left', width: '35%' }}>Character</th>
-                  <th style={{ textAlign: 'left' }}>Actor</th>
-                  <th style={{ textAlign: 'center', width: '15%' }}>Scenes</th>
-                </tr>
-              </thead>
-              <tbody>
-                {characters.map((c, i) => (
-                  <tr key={i}>
-                    <td style={{ fontWeight: '600' }}>{c.name}</td>
-                    <td>
-                      <input
-                        type="text"
-                        className="cs-stats-actor-input"
-                        value={c.actor}
-                        onChange={(e) => handleUpdateActor(c.name, e.target.value)}
-                        placeholder="Assign actor..."
-                        aria-label={`Actor for ${c.name}`}
-                      />
-                    </td>
-                    <td style={{ textAlign: 'center', fontWeight: '500' }}>{c.sceneCount}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          )}
-        </div>
-        <div
-          style={{
-            borderTop: '1px solid var(--cs-ui-border-light-subtle, #eeece4)',
-            display: 'flex',
-            justifyContent: 'flex-end',
-            padding: '12px 20px',
-            background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)',
-          }}
-        >
-          <button
-            type="button"
-            className="cs-confirm-btn-primary"
-            onClick={onClose}
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function updateActorInText(text: string, charName: string, actorName: string): string {
-  const lines = text.split('\n')
-  const fmStartIndex = lines.indexOf('---')
-  if (fmStartIndex === -1) {
-    return `---\ncharacters:\n  ${charName}: ${actorName}\n---\n\n${text}`
-  }
-  const fmEndIndex = lines.indexOf('---', fmStartIndex + 1)
-  if (fmEndIndex === -1) return text
-
-  const fmLines = lines.slice(fmStartIndex + 1, fmEndIndex)
-  let charsLineIdx = -1
-  for (let i = 0; i < fmLines.length; i++) {
-    if (fmLines[i]!.trim() === 'characters:') {
-      charsLineIdx = i
-      break
-    }
-  }
-
-  const cleanChar = charName.toUpperCase()
-  if (charsLineIdx === -1) {
-    if (actorName.trim() !== '') {
-      fmLines.push('characters:')
-      fmLines.push(`  ${cleanChar}: ${actorName}`)
-    }
-  } else {
-    let insertIdx = charsLineIdx + 1
-    let charLineIdx = -1
-    while (insertIdx < fmLines.length) {
-      const line = fmLines[insertIdx]!
-      if (!line.startsWith('  ') && line.trim() !== '') {
-        break
-      }
-      const match = /^\s+([A-Za-z0-9_ -]+)\s*:(.*)/.exec(line)
-      if (match && match[1]?.trim().toUpperCase() === cleanChar) {
-        charLineIdx = insertIdx
-        break
-      }
-      insertIdx++
-    }
-
-    if (charLineIdx !== -1) {
-      if (actorName.trim() === '') {
-        fmLines.splice(charLineIdx, 1)
-      } else {
-        fmLines[charLineIdx] = `  ${cleanChar}: ${actorName}`
-      }
-    } else if (actorName.trim() !== '') {
-      fmLines.splice(insertIdx, 0, `  ${cleanChar}: ${actorName}`)
-    }
-  }
-
-  const newLines = [
-    ...lines.slice(0, fmStartIndex + 1),
-    ...fmLines,
-    ...lines.slice(fmEndIndex)
-  ]
-  return newLines.join('\n')
-}

package/src/navigator/scene-list.ts

@@ -1,84 +0,0 @@
-export interface SceneEntry {
-  id: string | null
-  heading: string
-  synopsis: string
-  status: string
-  tags: string[]
-  location: string
-  index: number       // 1-based position (internal, used for PM navigation)
-  textOffset: number  // character offset in source text where this scene starts
-  estDuration?: string
-}
-
-/**
- * Derive a flat scene list from Sutra source text.
- * Scenes are identified by scene heading lines (## prefix).
- */
-export function buildSceneList(text: string): SceneEntry[] {
-  const lines = text.split('\n')
-  const scenes: SceneEntry[] = []
-  let sceneIndex = 0
-  let currentOffset = 0
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i] ?? ''
-    const trimmed = line.trim()
-
-    // Scene headings start with ## (Sutra sigil)
-    if (trimmed.startsWith('## ') || trimmed.startsWith('##\t')) {
-      const headingRaw = trimmed.slice(3).trim()
-      const sceneStart = currentOffset
-
-      // Extract scene id from inline {#...} on the heading line, then strip it
-      const idMatch = /\{#([^}]+)\}/.exec(headingRaw)
-      const sceneId: string | null = idMatch?.[1] ?? null
-      const heading = headingRaw.replace(/\s*\{#[^}]+\}/, '').trim()
-
-      // Collect metadata (& key: value) until next heading
-      let synopsis = ''
-      let status = ''
-      let tags: string[] = []
-      let location = ''
-      let estDuration = ''
-
-      let j = i + 1
-      while (j < lines.length) {
-        const nextLine = (lines[j] ?? '').trim()
-        if (nextLine.startsWith('## ') || nextLine.startsWith('##\t')) break
-        if (nextLine.startsWith('& synopsis:')) {
-          if (!synopsis) synopsis = nextLine.replace('& synopsis:', '').trim()
-        } else if (nextLine.startsWith('& status:')) {
-          status = nextLine.replace('& status:', '').trim()
-        } else if (nextLine.startsWith('& tags:')) {
-          tags = nextLine
-            .replace('& tags:', '')
-            .trim()
-            .split(',')
-            .map((t) => t.trim())
-            .filter(Boolean)
-        } else if (nextLine.startsWith('& location:')) {
-          location = nextLine.replace('& location:', '').trim()
-        } else if (nextLine.startsWith('& est-duration:')) {
-          estDuration = nextLine.replace('& est-duration:', '').trim()
-        }
-        j++
-      }
-
-      scenes.push({
-        id: sceneId,
-        heading,
-        synopsis,
-        status,
-        tags,
-        location,
-        estDuration: estDuration || undefined,
-        index: ++sceneIndex,
-        textOffset: sceneStart,
-      })
-    }
-
-    currentOffset += (line?.length ?? 0) + 1 // +1 for \n
-  }
-
-  return scenes
-}

package/src/settings/SettingsDialog.tsx

@@ -1,303 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { useTranslation } from '../i18n/useTranslation'
-import { useDocument } from '../context/DocumentContext'
-import {
-  getAIConfig,
-  saveAIConfig,
-  fetchProviders,
-  getApiKey,
-  setApiKey,
-  deleteApiKey,
-  testConnection,
-  listModels,
-  ProviderConfig,
-  ModelConfig,
-  AIConfig,
-} from '../ai/ai-client'
-
-const UI_LANGUAGES = [
-  { code: 'en', label: 'English' },
-  { code: 'hi', label: 'हिन्दी' },
-  { code: 'ta', label: 'தமிழ்' },
-  { code: 'te', label: 'తెలుగు' },
-  { code: 'ml', label: 'മലയാളം' },
-  { code: 'kn', label: 'ಕನ್ನಡ' },
-  { code: 'bn', label: 'বাংলা' },
-  { code: 'gu', label: 'ગુજરાતી' },
-  { code: 'mr', label: 'मराठी' },
-  { code: 'pa', label: 'ਪੰਜਾਬੀ' },
-  { code: 'or', label: 'ଓଡ଼ିଆ' },
-  { code: 'si', label: 'සිංහල' },
-]
-
-interface Props {
-  onClose: () => void
-}
-
-export function SettingsDialog({ onClose }: Props) {
-  const { t, locale, setLocale } = useTranslation()
-  const { setAIOnboardingVisible } = useDocument()
-  const dialogRef = useRef<HTMLDivElement>(null)
-
-  // AI states
-  const [aiConfig, setAiConfig] = useState<AIConfig>(getAIConfig())
-  const [providers, setProviders] = useState<ProviderConfig[]>([])
-  const [activeKey, setActiveKey] = useState<string>('')
-  const [showKey, setShowKey] = useState<boolean>(false)
-  const [testStatus, setTestStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle')
-  const [testError, setTestError] = useState<string>('')
-  const [dynamicModels, setDynamicModels] = useState<ModelConfig[] | null>(null)
-  const [modelsLoading, setModelsLoading] = useState<boolean>(false)
-
-  useEffect(() => {
-    dialogRef.current?.focus()
-    void loadProviders()
-  }, [])
-
-  const loadProviders = async () => {
-    const p = await fetchProviders(aiConfig)
-    setProviders(p)
-  }
-
-  // Loads the stored key for the selected provider, then refreshes its
-  // model list from the provider's live /models endpoint (falls back to the
-  // static list on any error — see listModels). Depends on `providers` too
-  // so it re-runs once fetchProviders() resolves on mount, instead of
-  // racing it.
-  useEffect(() => {
-    let cancelled = false
-    const run = async () => {
-      setTestStatus('idle')
-      setTestError('')
-      const key = await getApiKey(aiConfig.preferredProvider)
-      if (cancelled) return
-      setActiveKey(key || '')
-      setDynamicModels(null)
-
-      const provider = providers.find(p => p.id === aiConfig.preferredProvider)
-      if (key && provider) {
-        setModelsLoading(true)
-        const models = await listModels(provider, key)
-        if (!cancelled) {
-          setDynamicModels(models)
-          setModelsLoading(false)
-        }
-      }
-    }
-    void run()
-    return () => { cancelled = true }
-  }, [aiConfig.preferredProvider, providers])
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') onClose()
-  }
-
-  const handleProviderChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const nextProvider = e.target.value
-    const provider = providers.find(p => p.id === nextProvider)
-    const nextModel = provider?.models[0]?.id || ''
-
-    const updated = {
-      ...aiConfig,
-      preferredProvider: nextProvider,
-      preferredModel: nextModel,
-    }
-    setAiConfig(updated)
-    saveAIConfig(updated)
-  }
-
-  const handleModelChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const updated = {
-      ...aiConfig,
-      preferredModel: e.target.value,
-    }
-    setAiConfig(updated)
-    saveAIConfig(updated)
-  }
-
-  const handleKeyChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value
-    setActiveKey(val)
-    if (val.trim()) {
-      await setApiKey(aiConfig.preferredProvider, val.trim())
-    } else {
-      await deleteApiKey(aiConfig.preferredProvider)
-    }
-    setTestStatus('idle')
-  }
-
-  const handleTestKey = async () => {
-    if (!activeKey.trim()) {
-      setTestStatus('error')
-      setTestError('Please enter an API key to test.')
-      return
-    }
-    setTestStatus('testing')
-    setTestError('')
-    try {
-      const ok = await testConnection(aiConfig.preferredProvider, activeKey.trim(), aiConfig)
-      if (ok) {
-        setTestStatus('success')
-        const provider = providers.find(p => p.id === aiConfig.preferredProvider)
-        if (provider) {
-          setModelsLoading(true)
-          setDynamicModels(await listModels(provider, activeKey.trim()))
-          setModelsLoading(false)
-        }
-      } else {
-        setTestStatus('error')
-        setTestError('Connection failed: empty or invalid response.')
-      }
-    } catch (err: any) {
-      setTestStatus('error')
-      setTestError(err.message || String(err))
-    }
-  }
-
-  const currentProvider = providers.find(p => p.id === aiConfig.preferredProvider)
-  const models = dynamicModels ?? currentProvider?.models ?? []
-
-  return (
-    <div className="cs-dialog-overlay" onClick={onClose}>
-      <div
-        ref={dialogRef}
-        className="cs-dialog cs-settings-dialog"
-        role="dialog"
-        aria-modal="true"
-        aria-label={t('settings.title')}
-        tabIndex={-1}
-        onClick={e => e.stopPropagation()}
-        onKeyDown={handleKeyDown}
-        style={{ maxWidth: '480px' }}
-      >
-        <div className="cs-dialog-header">
-          <span className="cs-dialog-title">{t('settings.title')}</span>
-          <button className="cs-fr-close" aria-label={t('settings.close')} onClick={onClose}>×</button>
-        </div>
-
-        <div className="cs-settings-body" style={{ maxHeight: '80vh', overflowY: 'auto' }}>
-          <div className="cs-settings-section-label">{t('settings.general')}</div>
-
-          <div className="cs-settings-row">
-            <label className="cs-settings-label" htmlFor="cs-ui-lang-select">
-              {t('settings.uiLanguage')}
-            </label>
-            <select
-              id="cs-ui-lang-select"
-              className="cs-settings-select"
-              value={locale}
-              onChange={e => setLocale(e.target.value)}
-            >
-              {UI_LANGUAGES.map(lang => (
-                <option key={lang.code} value={lang.code}>{lang.label}</option>
-              ))}
-            </select>
-          </div>
-
-          <div style={{ margin: '14px 0 6px 0', borderTop: '1px solid var(--cs-ui-border-light, #e8e8e4)', paddingTop: '14px' }} className="cs-settings-section-label">
-            Intelligence &amp; Voice Settings
-          </div>
-
-          <div className="cs-settings-row">
-            <label className="cs-settings-label" htmlFor="cs-ai-provider-select">
-              Preferred Provider
-            </label>
-            <select
-              id="cs-ai-provider-select"
-              className="cs-settings-select"
-              value={aiConfig.preferredProvider}
-              onChange={handleProviderChange}
-            >
-              {providers.map(p => (
-                <option key={p.id} value={p.id}>{p.name}</option>
-              ))}
-            </select>
-          </div>
-
-          <div className="cs-settings-row">
-            <label className="cs-settings-label" htmlFor="cs-ai-model-select">
-              Preferred Model{modelsLoading ? ' (refreshing...)' : ''}
-            </label>
-            <select
-              id="cs-ai-model-select"
-              className="cs-settings-select"
-              value={aiConfig.preferredModel}
-              onChange={handleModelChange}
-              disabled={models.length === 0}
-            >
-              {models.map(m => (
-                <option key={m.id} value={m.id}>{m.name}</option>
-              ))}
-            </select>
-          </div>
-
-          <div className="cs-settings-row" style={{ flexDirection: 'column', alignItems: 'stretch', gap: '6px' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
-              <label className="cs-settings-label" htmlFor="cs-ai-key-input">
-                API Key for {currentProvider?.name || aiConfig.preferredProvider}
-              </label>
-              <button
-                type="button"
-                style={{ background: 'none', border: 'none', color: 'var(--cs-ui-accent, #c4760a)', cursor: 'pointer', fontSize: '11px', padding: 0 }}
-                onClick={() => setShowKey(!showKey)}
-              >
-                {showKey ? 'Hide' : 'Show'}
-              </button>
-            </div>
-            <input
-              id="cs-ai-key-input"
-              type={showKey ? 'text' : 'password'}
-              style={{
-                width: '100%',
-                padding: '7px 10px',
-                border: '1px solid var(--cs-ui-border-light, #ccc)',
-                borderRadius: '4px',
-                boxSizing: 'border-box',
-                fontFamily: 'monospace',
-                fontSize: '12px',
-              }}
-              value={activeKey}
-              onChange={handleKeyChange}
-              placeholder={`Enter API Key for ${aiConfig.preferredProvider}`}
-            />
-            <div style={{ display: 'flex', gap: '8px', marginTop: '4px' }}>
-              <button
-                type="button"
-                className="cs-voice-btn-secondary"
-                style={{ padding: '4px 10px', fontSize: '12px' }}
-                onClick={handleTestKey}
-                disabled={testStatus === 'testing'}
-              >
-                {testStatus === 'testing' ? 'Testing...' : 'Test Connection'}
-              </button>
-            </div>
-            {testStatus === 'success' && (
-              <span style={{ color: '#10b981', fontSize: '12px', marginTop: '2px' }}>
-                ✓ Key verified! Connection succeeded.
-              </span>
-            )}
-            {testStatus === 'error' && (
-              <span style={{ color: '#ef4444', fontSize: '12px', marginTop: '2px', whiteSpace: 'pre-wrap' }}>
-                ✗ Error: {testError}
-              </span>
-            )}
-          </div>
-
-          <div style={{ marginTop: '16px', display: 'flex', justifyContent: 'flex-start' }}>
-            <button
-              type="button"
-              className="cs-voice-btn-primary"
-              style={{ padding: '6px 12px', fontSize: '12px' }}
-              onClick={() => {
-                onClose()
-                setAIOnboardingVisible(true)
-              }}
-            >
-              Open Setup Wizard
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}