@lincyaw/workbench 0.1.0 → 0.2.0-rc.0

package/src/panels/ProductionPanel.tsx

@@ -0,0 +1,272 @@
+import { useEffect, useRef, useState } from 'react'
+import { keyBelongsToTarget, PRODUCTION_PLAYBACK_RATES, sameProductionBinding, watchFocusSource } from '@lincyaw/kernel'
+import type { ProductionPlaybackCommand } from '@lincyaw/kernel'
+import { PmBadge, PmButton, PmCard, PmDialog, PmEmpty, PmIconButton, PmNotice, PmPanelHeader, PmPopover, PmSearchList, PmSelect, PmSegmented, PmSplitGroup, PmSplitHandle, PmSplitPanel, PmTabs, PmTabPanel, PmToolbar, PmToolbarButton } from '../components.tsx'
+import { useMessages, useWorkbench, useWorkbenchState } from '../context.tsx'
+import { DocumentStepNarration } from '../document-editor/DocumentStepNarration.tsx'
+import { PRODUCTION_MESSAGES, productionFailure } from '../production-messages.ts'
+import { SHORTCUTS } from '../shortcuts.ts'
+import { isAgentChanging } from '../workbench.ts'
+import type { PlaybackKey } from '../workbench.ts'
+import { DocumentVoiceField } from './DocumentVoiceField.tsx'
+import { ExportPanel } from './ExportPanel.tsx'
+import { PreviewPanel } from './PreviewPanel.tsx'
+import { VoiceoverDialog } from './VoiceoverDialog.tsx'
+import { ProductionCaptionTiming } from './ProductionCaptionTiming.tsx'
+import { ProductionTimeline } from './ProductionTimeline.tsx'
+import { ProductionMediaClips } from './ProductionMediaClips.tsx'
+import { ProductionRecording } from './ProductionRecording.tsx'
+import { ProductionTranscription } from './ProductionTranscription.tsx'
+import { useProductionVoicePlayback } from '../production-voice-playback.ts'
+
+const clockTime = (value?: number) => {
+  if (value === undefined || !Number.isFinite(value)) return '--:--.---'
+  const ms = Math.max(0, Math.round(value))
+  return `${String(Math.floor(ms / 60000)).padStart(2, '0')}:${(ms % 60000 / 1000).toFixed(3).padStart(6, '0')}`
+}
+
+const PLAYBACK_KEYS: Record<string, PlaybackKey> = { ' ': 'play-pause', ArrowLeft: 'previous', ArrowRight: 'next' }
+
+/**
+ * An explicit production workspace edits the same source; its preview has an independent compilation boundary.
+ * While it is `active`, Space plays or pauses and the left and right arrows select the previous or next step, from the
+ * workbench and from its preview alike; text entry, menus, dialogs and controls the keyboard moved to keep their keys.
+ */
+export function ProductionPanel({ onClose, closing, active = true }: { onClose(): void, closing: boolean, active?: boolean }) {
+  const workbench = useWorkbench(), t = useMessages(), locale = useWorkbenchState(state => state.locale), p = PRODUCTION_MESSAGES[locale]
+  const voicePlayback = useProductionVoicePlayback()
+  const serviceVersion = useWorkbenchState(state => state.voiceServiceVersion)
+  const source = useWorkbenchState(state => state.authoring), position = useWorkbenchState(state => state.position)
+  const stamp = useWorkbenchState(state => state.presentationSnapshot), view = useWorkbenchState(state => state.webView)
+  const preparing = useWorkbenchState(state => Boolean(state.isPreparingPresentation))
+  const plan = useWorkbenchState(state => state.productionPlan), playback = useWorkbenchState(state => state.productionPlayback)
+  const playbackFailure = useWorkbenchState(state => state.productionFailure), connection = useWorkbenchState(state => state.previewConnection)
+  const previewReload = useWorkbenchState(state => state.previewReload), timingDraft = useWorkbenchState(state => Boolean(state.hasDocumentTimingDrafts || state.documentTimingDraftStorageFailure))
+  const captionDraftSteps = useWorkbenchState(state => state.captionTimingDraftSteps), captionStorageFailure = useWorkbenchState(state => state.captionTimingDraftStorageFailure)
+  const frameCurrent = useWorkbenchState(state => Boolean(state.presentationSnapshot && state.previewIrRevision === state.presentationSnapshot.revision))
+  const blocked = useWorkbenchState(state => Boolean(state.authoring?.loading || state.authoring?.composing) || isAgentChanging(state))
+  const [wide, setWide] = useState(() => matchMedia('(min-width: 1100px)').matches), [tab, setTab] = useState('preview')
+  const [libraryTab, setLibraryTab] = useState('pages'), [inspectorTab, setInspectorTab] = useState('script'), [outputsOpen, setOutputsOpen] = useState(false)
+  const [generateStep, setGenerateStep] = useState<string>(), [failure, setFailure] = useState<string>()
+  const [planBusy, setPlanBusy] = useState(false), [planFailure, setPlanFailure] = useState<string>(), [planReload, setPlanReload] = useState(0)
+  const [playerBusy, setPlayerBusy] = useState(false), [seeking, setSeeking] = useState(false), controlRequest = useRef<AbortController>()
+  const [enabling, setEnabling] = useState(false), [issuesOpen, setIssuesOpen] = useState(false)
+  const [mediaRefresh, setMediaRefresh] = useState(false)
+  const [transcriptionAsset, setTranscriptionAsset] = useState<{ identity: string, id: string, revision: number }>()
+  const transcriptionSelection = useRef(0)
+  const owner = useRef({ active: true, generation: 0 }), initial = useRef(false)
+  const document = source?.content, sectionId = position && document?.sections[position.section] ? position.section : document?.sectionOrder[0]
+  const declared = Boolean(document?.metadata.plugins?.includes('@lincyaw/addon-lecture'))
+  const section = sectionId ? document?.sections[sectionId] : undefined
+  const stepId = section?.stepOrder[position && position.section === sectionId ? position.step : 0] ?? section?.stepOrder[0]
+  const sourceCurrent = Boolean(source && stamp && source.version === stamp.version && source.fingerprint === stamp.fingerprint && (source.projectRevision ?? 0) === stamp.project && !source.dirty && !source.saving && !source.error)
+  const previewVisible = sourceCurrent && view === 'present'
+  const planCurrent = Boolean(plan && source?.content?.id === plan.binding.source.documentId && source.version === plan.binding.source.version && source.fingerprint === plan.binding.source.fingerprint
+    && !source.loading && !source.dirty && !source.saving && !source.composing && !source.restored && !source.error)
+  const playbackConnected = Boolean(planCurrent && plan && previewVisible && frameCurrent && stamp?.revision === plan.binding.irRevision)
+  const live = plan && playback && sameProductionBinding(plan.binding, playback.binding) ? playback : undefined
+  const canPlay = Boolean(playbackConnected && plan?.canPreview && live?.status === 'ready' && !timingDraft)
+  const backgroundBody = !wide && tab === 'timeline', backgroundVisuals = !wide && tab !== 'preview'
+  useEffect(() => workbench.observeVoiceoverJobs(), [workbench, source?.identity])
+  useEffect(() => {
+    const media = matchMedia('(min-width: 1100px)'), update = () => setWide(media.matches)
+    media.addEventListener('change', update)
+    return () => media.removeEventListener('change', update)
+  }, [])
+  useEffect(() => () => { owner.current.active = false; owner.current.generation++; controlRequest.current?.abort(); workbench.closeProduction(); workbench.cancelPreviewPreparation() }, [workbench])
+  useEffect(() => {
+    const controller = new AbortController()
+    if (!declared || !source?.identity || source.loading || source.dirty || source.saving || source.composing || source.restored || source.error || blocked) { setPlanBusy(false); return }
+    setPlanBusy(true); setPlanFailure(undefined)
+    void workbench.prepareProductionPlan(controller.signal).catch(error => {
+      if (!controller.signal.aborted) setPlanFailure(error instanceof Error && error.message.startsWith('production-') ? productionFailure(error, locale) : p.planFailed)
+    }).finally(() => { if (!controller.signal.aborted) setPlanBusy(false) })
+    return () => controller.abort()
+  }, [workbench, source?.identity, source?.version, source?.fingerprint, source?.projectRevision, source?.loading, source?.dirty, source?.saving, source?.composing, source?.restored, source?.error, blocked, declared, planReload, previewReload, serviceVersion])
+  useEffect(() => {
+    const controller = new AbortController()
+    // Reading an unchanged cache plan must not cancel an in-flight load of the same immutable binding.
+    if (!plan || !playbackConnected || preparing || blocked || timingDraft) { setPlayerBusy(false); return }
+    setPlayerBusy(true)
+    void workbench.controlProduction({ binding: plan.binding, action: 'load' }, controller.signal).catch(() => {}).finally(() => { if (!controller.signal.aborted) setPlayerBusy(false) })
+    return () => controller.abort()
+  }, [workbench, plan?.binding.planId, playbackConnected, connection, preparing, blocked, timingDraft])
+  const control = async (command: ProductionPlaybackCommand) => {
+    if (!owner.current.active || !playbackConnected || blocked || closing || timingDraft) return
+    if (command.action === 'pause' || command.action === 'seek' || command.action === 'step') voicePlayback.stop()
+    controlRequest.current?.abort()
+    const controller = new AbortController(); controlRequest.current = controller
+    setSeeking(command.action === 'seek')
+    try { await workbench.controlProduction(command, controller.signal) } catch {}
+    finally { if (controlRequest.current === controller) { controlRequest.current = undefined; if (owner.current.active) setSeeking(false) } }
+  }
+  const compile = async (refreshPlan = true) => {
+    if (workbench.getState().isPreparingPresentation || !source?.identity) return
+    const identity = source.identity, generation = ++owner.current.generation
+    const current = () => owner.current.active && generation === owner.current.generation && workbench.getState().authoring?.identity === identity
+    setFailure(undefined)
+    try {
+      await workbench.flushPendingEdits()
+      if (!current()) return
+      const prepared = await workbench.preparePresentation()
+      if (!current()) return
+      if (!prepared) {
+        const message = workbench.getState().presentationFailure
+        setFailure(message === t.timingDraftPending ? undefined : message)
+        return
+      }
+      workbench.setWebView('present')
+      if (refreshPlan) setPlanReload(value => value + 1)
+    } catch { if (current()) setFailure(t.presentationCompileFailed) }
+  }
+  useEffect(() => {
+    if (!mediaRefresh || preparing || workbench.getState().isPreparingPresentation || blocked || closing || !source?.identity
+      || source.loading || source.dirty || source.saving || source.composing || source.restored || source.error) return
+    // Consume one merged intent; a later accepted media change can queue the next saved version.
+    setMediaRefresh(false)
+    if (!sourceCurrent || !frameCurrent) void compile()
+  }, [mediaRefresh, preparing, blocked, closing, source?.identity, source?.version, source?.fingerprint, source?.loading, source?.dirty, source?.saving, source?.composing, source?.restored, source?.error, sourceCurrent, frameCurrent])
+  useEffect(() => { if (!initial.current) { initial.current = true; void compile(false) } }, [])
+  const select = (page: string, step: string) => { voicePlayback.stop(); workbench.stopAuditions(); workbench.selectDocumentStep(page, step) }
+  const playbackKey = useRef<(key: PlaybackKey) => void>(() => {})
+  playbackKey.current = key => {
+    if (blocked || closing || !document || !sectionId || !stepId) return
+    if (key === 'play-pause') {
+      if (voicePlayback.busy || plan && canPlay && !playerBusy && !planBusy && !preparing && !seeking) void voicePlayback.toggle()
+      return
+    }
+    // Steps run on across pages and stop at the first and the last.
+    const steps = document.sectionOrder.flatMap(page => document.sections[page]?.stepOrder.map(step => ({ page, step })) ?? [])
+    const at = steps.findIndex(item => item.page === sectionId && item.step === stepId), next = at < 0 ? undefined : steps[at + (key === 'next' ? 1 : -1)]
+    if (next) select(next.page, next.step)
+  }
+  useEffect(() => {
+    if (!active) return
+    watchFocusSource()
+    const press = (event: KeyboardEvent) => {
+      const key = PLAYBACK_KEYS[event.key]
+      if (!key || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || keyBelongsToTarget(event)) return
+      // Taken before the focused control sees it: Space would press the button clicked last, the arrows move in its toolbar.
+      event.preventDefault(); event.stopPropagation()
+      if (!(event.repeat && key === 'play-pause')) playbackKey.current(key)
+    }
+    window.addEventListener('keydown', press, true)
+    const stop = workbench.observePlaybackKeys(key => playbackKey.current(key))
+    return () => { window.removeEventListener('keydown', press, true); stop() }
+  }, [workbench, active])
+  const enable = async () => {
+    if (blocked || closing || enabling) return
+    setFailure(undefined); setEnabling(true)
+    try { await workbench.enableDocumentProduction(); if (owner.current.active) { workbench.cancelPreviewPreparation(); await compile() } }
+    catch (error) { if (owner.current.active) setFailure(productionFailure(error, locale)) }
+    finally { if (owner.current.active) setEnabling(false) }
+  }
+  const openOutputs = () => { voicePlayback.stop(); void workbench.pausePlayback(true).catch(() => {}); setOutputsOpen(true) }
+  if (!source?.identity || !document || !section || !sectionId || !stepId) return <PmEmpty icon="video">{t.noSections}</PmEmpty>
+  const feedback = [...new Set([
+    captionStorageFailure && p.captionStorageFailed,
+    captionDraftSteps?.length && p.captionDraft,
+    failure, planFailure,
+    planCurrent && (playbackFailure || live?.error) && productionFailure(playbackFailure ?? live?.error, locale),
+    timingDraft ? p.timingDraft : planCurrent && plan?.timing === 'estimated' ? p.estimatedPlan : planCurrent && plan?.timing === 'unknown' ? p.unknownPlan : planCurrent && !playbackConnected && !preparing ? p.playbackWaiting : undefined,
+  ].filter((message): message is string => typeof message === 'string' && Boolean(message)))]
+  const diagnostics = planCurrent ? plan?.diagnostics ?? [] : []
+  const issueCount = diagnostics.length + feedback.length
+  const summary = failure ?? planFailure ?? (diagnostics[0] && ((p.diagnostics as Record<string, string>)[diagnostics[0].code] ?? p.diagnosticFallback)) ?? feedback[0]
+  const pageIndex = document.sectionOrder.indexOf(sectionId)
+  const mediaEditor = <ProductionMediaClips key={`${source.identity}:${stepId}`} identity={source.identity} version={source.version ?? ''} document={document} sectionId={sectionId} stepId={stepId}
+    binding={planCurrent ? plan?.binding : undefined} stepDurationMs={(() => { const step = planCurrent ? plan?.pages.find(page => page.sectionId === sectionId)?.steps.find(step => step.stepId === stepId) : undefined; return step?.timing === 'confirmed' && step.startMs !== undefined && step.endMs !== undefined ? step.endMs - step.startMs : undefined })()}
+    disabled={blocked || closing || !declared || !source.version || Boolean(source.dirty || source.saving || source.restored || source.error)} onChanged={() => setMediaRefresh(true)} />
+  return <section className="pmw-production" aria-label={p.title}>
+    <PmPanelHeader title={p.title} meta={wide ? document.metadata.title : undefined}
+      leading={<PmIconButton small icon="arrow-left" label={p.back} loading={closing} onClick={onClose} />}
+      actions={<>
+        <PmBadge tone={sourceCurrent && frameCurrent ? 'ok' : preparing || sourceCurrent ? 'accent' : 'warn'}>{sourceCurrent && frameCurrent ? p.current : preparing || sourceCurrent ? p.preparing : p.outdated}</PmBadge>
+        {issueCount > 0 && <PmPopover open={issuesOpen} onOpenChange={setIssuesOpen} label={p.issues(issueCount)} trigger={wide ? <PmButton small icon="warning" title={summary} aria-label={p.issues(issueCount)}>{p.issueCount(issueCount)}</PmButton> : <PmIconButton small icon="warning" label={p.issues(issueCount)} hint={summary} />}>
+          <div className="pmw-production__feedback">
+            {feedback.map(message => <PmNotice key={message} tone="warn">{message}</PmNotice>)}
+            {captionDraftSteps?.length ? document.sectionOrder.flatMap(pageId => document.sections[pageId]?.stepOrder.map((id, index) => captionDraftSteps.includes(id) ? <PmButton key={id} small onClick={() => { select(pageId, id); setIssuesOpen(false) }}>{document.sections[pageId]!.title} · {p.stepNumber(index)}</PmButton> : null) ?? []) : null}
+            {diagnostics.map((issue, index) => {
+              const page = issue.sectionId ? document.sections[issue.sectionId] : undefined, step = page && issue.stepId ? page.stepOrder.indexOf(issue.stepId) : -1
+              return <PmCard key={`${issue.code}:${issue.sectionId}:${issue.stepId}:${index}`}>
+                <p>{(p.diagnostics as Record<string, string>)[issue.code] ?? p.diagnosticFallback}</p>
+                {page && issue.stepId && step >= 0 && <PmButton small disabled={blocked || closing} onClick={() => { select(page.id, issue.stepId!); setIssuesOpen(false) }}>{page.title} · {p.stepNumber(step)}</PmButton>}
+              </PmCard>
+            })}
+          </div>
+        </PmPopover>}
+        <PmIconButton small icon="refresh" label={p.prepare} loading={preparing} disabled={blocked || closing} onClick={() => void compile()} />
+        {wide ? <PmButton small variant="accent" icon="export" disabled={closing} onClick={openOutputs}>{p.outputs}</PmButton>
+          : <PmIconButton small icon="export" label={p.outputs} disabled={closing} onClick={openOutputs} />}
+      </>} />
+    {!declared && <PmNotice tone="accent"><span>{p.enableHint}</span><PmButton small loading={enabling} disabled={blocked || closing} onClick={() => void enable()}>{p.enable}</PmButton></PmNotice>}
+    {!wide && <PmSegmented label={p.title} value={tab} options={[{ value: 'library', label: p.library }, { value: 'preview', label: p.preview }, { value: 'properties', label: p.properties }, { value: 'timeline', label: p.timeline }]} onChange={setTab} />}
+    {voicePlayback.failure && <PmNotice tone="danger">{voicePlayback.failure}{workbench.client.openSpeechSettings && <PmButton small variant="ghost" icon="sliders" onClick={() => { voicePlayback.stop(); workbench.client.openSpeechSettings?.() }}>{p.serviceSettings}</PmButton>}</PmNotice>}
+    {voicePlayback.busy && <div role="status"><PmNotice>{voicePlayback.progress ? p.generatingProgress(voicePlayback.progress.completed, voicePlayback.progress.total) : p.generatingPlayback}</PmNotice></div>}
+    <PmSplitGroup orientation="vertical" disabled={!wide} className="pmw-production__workarea">
+      <PmSplitPanel id="production-main" defaultSize="71%" minSize={wide ? '32%' : 0} className="pmw-production__main" background={backgroundBody}>
+        <PmSplitGroup disabled={!wide} className="pmw-production__body">
+          <PmSplitPanel id="production-library" defaultSize="18%" minSize={wide ? '12%' : 0} maxSize={wide ? '30%' : '100%'} className="pmw-production__library" hidden={!wide && tab !== 'library'}>
+            <PmPanelHeader title={p.library} />
+            <PmTabs variant="dock" value={libraryTab} label={p.library} tabs={[{ value: 'pages', label: p.pages, icon: 'slides' }, { value: 'media', label: p.media, icon: 'audio' }]} onValueChange={setLibraryTab}>
+              <PmTabPanel value="pages" keepMounted>
+                <PmSearchList label={p.pages} searchLabel={p.searchPages} searchPlaceholder={p.searchPages} value={sectionId} disabled={blocked || closing}
+                  items={document.sectionOrder.map((id, index) => ({ value: id, label: `${String(index + 1).padStart(2, '0')} · ${document.sections[id]!.title}`, description: p.pageSteps(document.sections[id]!.stepOrder.length), icon: 'slides' }))}
+                  onValueChange={id => { const step = document.sections[id]?.stepOrder[0]; if (step) select(id, step) }} resultsLabel={p.pageResults} emptyLabel={p.noPages} loadingLabel={p.planLoading} />
+              </PmTabPanel>
+              <PmTabPanel value="media" keepMounted>{mediaEditor}</PmTabPanel>
+            </PmTabs>
+          </PmSplitPanel>
+          {wide && <PmSplitHandle label={p.resizeLibrary} />}
+          <PmSplitPanel id="production-visuals" defaultSize="56%" minSize={wide ? '30%' : 0} className="pmw-production__visuals" background={backgroundVisuals}>
+            <PmPanelHeader title={p.preview} meta={`${pageIndex + 1} · ${section.title}`} />
+            <div className="pmw-production__frame" hidden={!previewVisible}><PreviewPanel active={previewVisible} playbackKeys onPresentationAction={action => { if (action === 'refresh') void compile(); else onClose() }} /></div>
+            {!previewVisible && <PmEmpty icon="slides" title={p.unavailable} action={<PmButton small loading={preparing} disabled={blocked || closing} onClick={() => void compile()}>{p.prepare}</PmButton>}>{p.previewHint}</PmEmpty>}
+            <div className="pmw-production__monitor-tools">
+              <PmToolbar scroll label={p.step}>{section.stepOrder.map((id, index) => <PmToolbarButton asChild key={id}><PmButton small aria-label={p.stepNumber(index)} aria-pressed={stepId === id} disabled={blocked || closing} onClick={() => select(sectionId, id)}>{index + 1}</PmButton></PmToolbarButton>)}</PmToolbar>
+              <PmToolbar label={p.timeline} className="pmw-production__transport">
+                <output aria-label={p.timelineLabels.position}>{clockTime(live?.position?.timeMs)} / {clockTime(planCurrent ? plan?.durationMs : undefined)}</output>
+                <PmToolbarButton asChild><PmIconButton small icon={voicePlayback.busy || live?.position?.playing ? 'pause' : 'play'} label={voicePlayback.busy || live?.position?.playing ? p.pause : p.play} hint={p.playOnDemand} shortcut={SHORTCUTS.playPause} aria-keyshortcuts="Space" loading={playerBusy && !voicePlayback.busy} disabled={!voicePlayback.busy && (!canPlay || planBusy || preparing || blocked || closing || seeking)} onClick={() => void voicePlayback.toggle()} /></PmToolbarButton>
+                <PmSelect label={p.rate} labelHidden value={live?.position?.rate === undefined ? '' : String(live.position.rate)} disabled={!canPlay || voicePlayback.busy || playerBusy || planBusy || preparing || blocked || closing || seeking} onChange={event => { if (plan) void control({ binding: plan.binding, action: 'rate', rate: Number(event.target.value) }) }}>
+                  {live?.position?.rate === undefined && <option value="">{p.timelineLabels.unknown}</option>}{PRODUCTION_PLAYBACK_RATES.map(value => <option key={value} value={value}>{value}×</option>)}
+                </PmSelect>
+                {(planFailure || playbackFailure) && <PmToolbarButton asChild><PmIconButton small icon="refresh" label={p.planRetry} onClick={() => setPlanReload(value => value + 1)} /></PmToolbarButton>}
+              </PmToolbar>
+            </div>
+          </PmSplitPanel>
+          {wide && <PmSplitHandle label={p.resizeProperties} />}
+          <PmSplitPanel id="production-properties" defaultSize="26%" minSize={wide ? '20%' : 0} maxSize={wide ? '42%' : '100%'} className="pmw-production__properties" hidden={!wide && tab !== 'properties'}>
+            <PmPanelHeader title={p.properties} meta={p.stepNumber(section.stepOrder.indexOf(stepId))} />
+            <PmTabs variant="dock" value={inspectorTab} label={p.properties} tabs={[{ value: 'script', label: p.narration }, { value: 'voice', label: p.voiceTab }, { value: 'captions', label: p.captionsTab }]} onValueChange={setInspectorTab}>
+              <PmTabPanel value="script" keepMounted><div className="pmw-production__fields pm-ui-block-editor">
+                <DocumentStepNarration sectionId={sectionId} stepId={stepId} expanded advanced panelId="production-step-fields" onPause={() => select(sectionId, stepId)} />
+              </div></PmTabPanel>
+              <PmTabPanel value="voice" keepMounted><div className="pmw-production__fields">
+                <DocumentVoiceField key={`${source.identity}:${stepId}`} stepId={stepId} disabled={blocked || closing} onGenerate={() => { voicePlayback.stop(); workbench.stopAuditions(); setGenerateStep(stepId) }} />
+                <ProductionRecording key={source.identity} identity={source.identity} sectionId={sectionId} stepId={stepId} active={!outputsOpen && (wide || tab === 'properties') && inspectorTab === 'voice'} disabled={blocked || closing}
+                  onImportStarted={() => transcriptionSelection.current}
+                  onImported={(assetId, selection) => {
+                    setMediaRefresh(true)
+                    if (selection === transcriptionSelection.current) setTranscriptionAsset({ identity: source.identity!, id: assetId, revision: ++transcriptionSelection.current })
+                  }} onAdopted={() => setMediaRefresh(true)} />
+                <ProductionTranscription key={source.identity} identity={source.identity} directory={source.directory} document={document} sectionId={sectionId} stepId={stepId}
+                  active={!outputsOpen && (wide || tab === 'properties') && inspectorTab === 'voice'} disabled={blocked || closing}
+                  selectedAsset={transcriptionAsset?.identity === source.identity ? transcriptionAsset : undefined}
+                  onSelectAsset={() => { transcriptionSelection.current++; setTranscriptionAsset(undefined) }} />
+              </div></PmTabPanel>
+              <PmTabPanel value="captions" keepMounted><ProductionCaptionTiming key={source.identity} identity={source.identity} stepId={stepId} plan={plan} current={planCurrent} loading={preparing || planBusy} disabled={blocked || closing} onChanged={() => setMediaRefresh(true)} /></PmTabPanel>
+            </PmTabs>
+          </PmSplitPanel>
+        </PmSplitGroup>
+      </PmSplitPanel>
+      {wide && <PmSplitHandle label={p.resizeTimeline} />}
+      <PmSplitPanel id="production-timeline" defaultSize="29%" minSize={wide ? '18%' : 0} maxSize={wide ? '65%' : '100%'} scroll className="pmw-production__timeline" hidden={!wide && tab !== 'timeline'}>
+        <ProductionTimeline plan={plan} sectionId={sectionId} stepId={stepId} active={wide || tab === 'timeline'} current={planCurrent} seekEnabled={canPlay && plan?.timing === 'confirmed' && !voicePlayback.busy && !playerBusy && !preparing && !planBusy}
+          loading={planBusy && !planCurrent} seeking={seeking} disabled={blocked || closing} onSelectStep={id => { const step = document.steps[id]; if (step) select(step.sectionId, id) }}
+          onSeek={timeMs => { if (plan) void control({ binding: plan.binding, action: 'seek', timeMs }) }} />
+      </PmSplitPanel>
+    </PmSplitGroup>
+    <PmDialog open={outputsOpen} label={p.outputs} closeLabel={t.close} onClose={() => setOutputsOpen(false)}>{outputsOpen && <ExportPanel embedded onClose={() => setOutputsOpen(false)} />}</PmDialog>
+    {generateStep && <VoiceoverDialog key={`${source.identity}:${generateStep}`} stepId={generateStep} onClose={() => setGenerateStep(undefined)} />}
+  </section>
+}

package/src/panels/ProductionRecording.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import { useRecordingAdoption } from '../use-recording-adoption.ts'
+import { PRODUCTION_MESSAGES } from '../production-messages.ts'
+import { Audition } from '../audition.ts'
+import type { AuditionState } from '../audition.ts'
+import { documentRecording, recordingUnavailable } from '../audio-recording.ts'
+import { AUDIO_RECORDING_MESSAGES } from '../audio-recording-messages.ts'
+import { PmButton, PmCard, PmDialog, PmNotice, PmSelect } from '../components.tsx'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { mediaFailure } from '../media-messages.ts'
+import { ProductionRecordingRange } from './ProductionRecordingRange.tsx'
+
+interface Props { identity: string, sectionId: string, stepId: string, active: boolean, disabled: boolean, onImportStarted(): number, onImported(assetId: string, selection: number): void, onAdopted(): void }
+const elapsed = (ms: number) => `${String(Math.floor(ms / 60000)).padStart(2, '0')}:${String(Math.floor(ms / 1000) % 60).padStart(2, '0')}`
+
+/** Video-only microphone material. The document actor and existing binary transaction still own every save. */
+export function ProductionRecording({ identity, sectionId, stepId, active, disabled, onImportStarted, onImported, onAdopted }: Props) {
+  const workbench = useWorkbench(), locale = useWorkbenchState(state => state.locale), t = AUDIO_RECORDING_MESSAGES[locale]
+  const source = useWorkbenchState(state => state.authoring)
+  const [recording] = useState(() => documentRecording(workbench, identity))
+  const state = useSyncExternalStore(recording.subscribe, recording.snapshot)
+  const audition = useRef<Audition>(), request = useRef<AbortController>(), mounted = useRef(false)
+  const [listening, setListening] = useState<AuditionState>({ status: 'idle' }), [saving, setSaving] = useState(false), [failure, setFailure] = useState<string>(), [discard, setDiscard] = useState(false)
+  const [unavailable] = useState(recordingUnavailable)
+  const current = () => mounted.current && workbench.getState().authoring?.identity === identity
+  const candidate = state.candidate
+  const adoption = useRecordingAdoption({ identity, sectionId, stepId, active, disabled, candidateAssetId: candidate?.assetId, onAdopted })
+  const capturing = ['requesting', 'recording', 'stopping'].includes(state.phase)
+  const status = state.phase === 'requesting' ? t.requesting : state.phase === 'recording' ? t.recording : state.phase === 'stopping' ? t.stopping : candidate ? candidate.assetId ? t.imported : t.ready : undefined
+  useEffect(() => {
+    mounted.current = true
+    return () => { mounted.current = false; request.current?.abort(); audition.current?.dispose(); audition.current = undefined; recording.stop() }
+  }, [recording])
+  useEffect(() => () => { recording.stop(); audition.current?.stop() }, [recording, sectionId, stepId, active])
+  useEffect(() => {
+    if (!active) { recording.stop(); audition.current?.stop() }
+    if (candidate?.assetId && source?.identity === identity && source.content && !source.content.assets[candidate.assetId]) recording.forgetImport(candidate.assetId)
+  }, [active, candidate?.assetId, source?.content, source?.identity, identity, recording])
+  const start = () => {
+    setFailure(undefined)
+    void recording.start(async () => {
+      workbench.stopAuditions()
+      await workbench.pausePlayback(true)
+      if (!current() || !active) throw new Error('recording-failed')
+      return workbench.registerAudioCapture(() => recording.stop())
+    })
+  }
+  const listen = () => {
+    if (!candidate) return
+    if (!audition.current) {
+      const player = audition.current = new Audition(workbench)
+      player.subscribe(() => { if (current()) setListening(player.snapshot()) })
+    }
+    if (listening.status === 'playing' || listening.status === 'loading') audition.current.stop()
+    else void audition.current.play(async () => ({ audio: candidate.file }))
+  }
+  const save = async () => {
+    if (!candidate || saving || !current()) return
+    const file = candidate.file, selection = adoption.revision(), transcriptionSelection = onImportStarted(), controller = new AbortController()
+    request.current = controller; setSaving(true); setFailure(undefined)
+    const owns = () => current() && !controller.signal.aborted && request.current === controller && recording.snapshot().candidate?.file === file
+    try {
+      await workbench.flushPendingEdits(controller.signal)
+      if (!owns()) return
+      const currentSource = workbench.getState().authoring
+      if (!currentSource?.version || currentSource.identity !== identity || currentSource.dirty || currentSource.saving || currentSource.composing || currentSource.restored || currentSource.error) throw new Error('production-source-changed')
+      const answer = await workbench.ensureDocumentAudio(file, { identity, version: currentSource.version }, controller.signal)
+      if (!owns()) return
+      recording.imported(file, answer.inspection.assetId); adoption.imported(answer.inspection.assetId, selection); onImported(answer.inspection.assetId, transcriptionSelection)
+    } catch (error) {
+      if (owns()) setFailure(`${t.saveFailed} ${mediaFailure(error, locale)}`)
+    } finally {
+      if (request.current === controller) { request.current = undefined; if (current()) setSaving(false) }
+    }
+  }
+  return <PmCard className="pmw-audio-recording" data-recording={state.phase}>
+    <strong>{t.title}</strong>
+    {status && !(status === t.imported && adoption.adopted && candidate?.assetId === adoption.selected) && <span className="pm-ui-hint"><span role="status">{saving ? t.saving : status}</span>{state.phase === 'recording' && <span aria-hidden="true"> · {elapsed(state.elapsedMs)}</span>}</span>}
+    {(state.error || unavailable) && <PmNotice tone="warn">{t.failures[state.error ?? unavailable!] ?? t.failures['recording-failed']}</PmNotice>}
+    {failure && <PmNotice tone="danger">{failure}</PmNotice>}
+    {listening.status === 'failed' && <PmNotice tone="warn">{t.failures[listening.error ?? 'audition-request'] ?? t.failures['audition-request']}</PmNotice>}
+    <div className="pmw-voice__actions">
+      {!capturing && !candidate && <PmButton small variant="primary" disabled={disabled || saving || !active || Boolean(unavailable)} onClick={start}>{t.start}</PmButton>}
+      {state.phase === 'requesting' && <PmButton small onClick={() => recording.cancelTake()}>{t.cancel}</PmButton>}
+      {state.phase === 'recording' && <><PmButton small onClick={() => recording.stop()}>{t.stop}</PmButton><PmButton small onClick={() => recording.cancelTake()}>{t.cancelTake}</PmButton></>}
+      {candidate && !capturing && <PmButton small disabled={!active || saving} loading={listening.status === 'loading'} onClick={listen}>{listening.status === 'playing' ? t.stopAudition : t.audition}</PmButton>}
+      {candidate && !candidate.assetId && !capturing && <PmButton small variant="primary" disabled={disabled || !active} loading={saving} onClick={() => void save()}>{failure ? t.retry : t.save}</PmButton>}
+      {candidate && !capturing && <PmButton small disabled={disabled || saving || !active || Boolean(unavailable)} onClick={start}>{t.rerecord}</PmButton>}
+      {saving && <PmButton small onClick={() => { request.current?.abort(); setSaving(false) }}>{t.cancelSave}</PmButton>}
+      {candidate && !capturing && !saving && <PmButton small onClick={() => setDiscard(true)}>{t.discard}</PmButton>}
+    </div>
+    {(adoption.assets.length > 0 || adoption.selected) && <>
+      <PmSelect label={t.source} value={adoption.selected} disabled={disabled || !active || saving} onChange={event => adoption.choose(event.target.value)}>
+        <option value="">{t.choose}</option>{adoption.selected && !adoption.assets.some(asset => asset.id === adoption.selected) && <option value={adoption.selected} disabled>{t.removedAudio}</option>}{adoption.assets.map(asset => <option key={asset.id} value={asset.id}>{asset.title || asset.location.split('/').at(-1) || asset.id}</option>)}
+      </PmSelect>
+      <div className="pmw-voice__actions">
+        <PmButton small variant="primary" disabled={disabled || !active || saving || capturing || !adoption.assets.some(asset => asset.id === adoption.selected) || adoption.adopted} loading={adoption.busy} onClick={() => void adoption.adopt()}>{adoption.adopted ? t.adopted : adoption.failure ? t.retryAdoption : t.adopt}</PmButton>
+        {adoption.busy && <PmButton small onClick={adoption.cancel}>{t.cancelAdoption}</PmButton>}
+      </div>
+      {adoption.failure && <PmNotice tone="danger">{['production-source-changed', 'document-version-changed'].includes(adoption.failure) ? t.adoptionSourceChanged
+        : adoption.failure === 'recording-cue-unsupported' || adoption.failure === 'recording-start-conflict' ? (PRODUCTION_MESSAGES[locale].diagnostics as Record<string, string>)[`production.${adoption.failure}`]
+        : adoption.failure.startsWith('production.asset-') || adoption.failure === 'production-audio-unavailable' ? mediaFailure(adoption.failure, locale) : t.adoptionFailed}</PmNotice>}
+    </>}
+    <ProductionRecordingRange identity={identity} sectionId={sectionId} stepId={stepId} active={active} disabled={disabled || capturing || saving} onChanged={onAdopted} />
+    {discard && <PmDialog open label={t.discardTitle} closeLabel={t.cancel} description={t.discardHint} onClose={() => setDiscard(false)} actions={<><PmButton onClick={() => setDiscard(false)}>{t.keep}</PmButton><PmButton variant="danger" onClick={() => { audition.current?.stop(); recording.discard(); setFailure(undefined); setDiscard(false) }}>{t.discard}</PmButton></>} />}
+  </PmCard>
+}

package/src/panels/ProductionRecordingRange.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useId, useRef, useState } from 'react'
+import { recordingSourceRange } from '@lincyaw/kernel'
+import type { DocumentRecordingAdoption, ProductionAssetInspection, TimeRange, VoiceSource } from '@lincyaw/kernel'
+import { PmButton, PmInput, PmNotice } from '../components.tsx'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { AUDIO_RECORDING_MESSAGES } from '../audio-recording-messages.ts'
+import { MEDIA_MESSAGES, mediaFailure } from '../media-messages.ts'
+import { mediaTime, mediaTimeValue } from '../media-time.ts'
+import { PRODUCTION_MESSAGES } from '../production-messages.ts'
+
+type RecordingSource = Extract<VoiceSource, { type: 'recording' }>
+interface RangeDraft { version: string, voice: RecordingSource, range?: TimeRange, startText?: string, endText?: string }
+const same = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b)
+
+/** Video-only pending input; the existing recording transaction and source actor own every write. */
+export function ProductionRecordingRange({ identity, sectionId, stepId, active, disabled, onChanged }: {
+  identity: string, sectionId: string, stepId: string, active: boolean, disabled: boolean, onChanged(): void,
+}) {
+  const workbench = useWorkbench(), locale = useWorkbenchState(state => state.locale), source = useWorkbenchState(state => state.authoring)
+  const t = MEDIA_MESSAGES[locale], r = AUDIO_RECORDING_MESSAGES[locale]
+  const document = source?.identity === identity ? source.content : undefined
+  const effective = document?.production.stepOverrides[stepId]?.voiceSource ?? document?.production.sectionOverrides?.[sectionId]?.voiceSource ?? document?.production.defaults.voiceSource
+  const voice = effective?.type === 'recording' ? effective : undefined, key = JSON.stringify([stepId, voice?.assetId])
+  const drafts = useRef(new Map<string, RangeDraft>()), mounted = useRef(true), request = useRef<AbortController>()
+  const [inspection, setInspection] = useState<{ version: string, value: ProductionAssetInspection }>(), [loading, setLoading] = useState(false)
+  const [busy, setBusy] = useState(false), [failure, setFailure] = useState<string>(), [reload, setReload] = useState(0), [, render] = useState(0)
+  const rangeErrorId = useId()
+  const failureText = (error: unknown) => {
+    const code = error instanceof Error ? error.message : String(error)
+    return code === 'recording-cue-unsupported' || code === 'recording-start-conflict' ? (PRODUCTION_MESSAGES[locale].diagnostics as Record<string, string>)[`production.${code}`]!
+      : code === 'recording-source-changed' || code === 'production-source-changed' || code === 'document-version-changed' ? r.adoptionSourceChanged : mediaFailure(error, locale)
+  }
+  const sent = useRef<{ key: string, draft: RangeDraft, request: DocumentRecordingAdoption }>(), reported = useRef<string>()
+  const latest = useRef({ key, active, disabled, onChanged }); latest.current = { key, active, disabled, onChanged }
+  const current = () => mounted.current && workbench.getState().authoring?.identity === identity
+  const inspected = inspection && inspection.version === source?.version && inspection.value.assetId === voice?.assetId ? inspection.value : undefined
+  const draft = drafts.current.get(key) ?? (voice ? { version: source?.version ?? '', voice } : undefined)
+  const range = draft?.range ?? (draft && inspected ? recordingSourceRange(draft.voice, inspected.durationMs) : undefined)
+  const start = draft ? mediaTimeValue(draft.startText, range?.startMs ?? draft.voice.sourceRange?.startMs ?? 0) : undefined
+  const end = draft ? mediaTimeValue(draft.endText, range?.endMs ?? draft.voice.sourceRange?.endMs ?? 0) : undefined
+  const valid = Boolean(inspected && start !== undefined && end !== undefined && start >= 0 && end > start && end <= inspected.durationMs)
+  const canonicalRange = voice && inspected ? recordingSourceRange(voice, inspected.durationMs) : undefined
+  const changed = Boolean(valid && !same(canonicalRange, { startMs: start, endMs: end }))
+  const composing = useRef(false)
+  const clean = () => { const value = workbench.getState().authoring; return value?.identity === identity && !value.loading && !value.dirty && !value.saving && !value.composing && !value.restored && !value.recovering && !value.error ? value : undefined }
+  const settle = () => {
+    const value = sent.current, actual = clean(), step = value && actual?.content?.steps[value.request.stepId]
+    const saved = step && (actual!.content!.production.stepOverrides[step.id]?.voiceSource ?? actual!.content!.production.sectionOverrides?.[step.sectionId]?.voiceSource ?? actual!.content!.production.defaults.voiceSource)
+    if (!value || !actual?.version || saved?.type !== 'recording' || saved.assetId !== value.request.assetId || !same(saved.sourceRange, value.request.sourceRange)
+      || actual.content?.assets[saved.assetId]?.fingerprint !== `sha256:${value.request.sha256}`) return false
+    const pending = drafts.current.get(value.key)
+    if (pending === value.draft) drafts.current.delete(value.key)
+    else if (pending?.version === value.draft.version && same(pending.voice, value.draft.voice)) drafts.current.set(value.key, { ...pending, version: actual.version, voice: structuredClone(saved) })
+    if (current()) { setFailure(undefined); render(value => value + 1) }
+    if (latest.current.key === value.key && latest.current.active && !latest.current.disabled && reported.current !== value.request.id) {
+      reported.current = value.request.id; latest.current.onChanged()
+    }
+    return true
+  }
+  useEffect(() => () => { mounted.current = false; request.current?.abort() }, [])
+  useEffect(() => { request.current?.abort(); request.current = undefined; setBusy(false); setFailure(undefined) }, [key, active])
+  useEffect(() => {
+    const version = source?.version, assetId = voice?.assetId, controller = new AbortController()
+    if (!active || !version || !assetId || disabled) { setLoading(false); return }
+    setLoading(true)
+    void workbench.inspectDocumentAudio(assetId, { identity, version }, controller.signal).then(answer => {
+      if (!controller.signal.aborted && current() && latest.current.key === key) setInspection({ version: answer.version, value: answer.inspection })
+    }, error => { if (!controller.signal.aborted && current() && latest.current.key === key) setFailure(failureText(error)) })
+      .finally(() => { if (!controller.signal.aborted && current() && latest.current.key === key) setLoading(false) })
+    return () => controller.abort()
+  }, [workbench, identity, source?.version, voice?.assetId, key, active, disabled, reload])
+  useEffect(() => { settle() }, [source?.version, source?.content, source?.loading, source?.dirty, source?.saving, source?.composing, source?.restored, source?.error, active, disabled, key])
+  const edit = (patch: Partial<RangeDraft>) => {
+    if (!draft) return
+    drafts.current.set(key, { ...draft, ...range ? { range: { ...range } } : {}, ...patch }); setFailure(undefined); render(value => value + 1)
+  }
+  const apply = async () => {
+    if (!voice || !draft || !inspected || !valid || !changed || busy || disabled || !active || composing.current || !current()) return
+    const source = clean()
+    if (!source?.version || !source.fingerprint || source.version !== draft.version || !source.content) return
+    const controller = new AbortController(), proposed = { startMs: start!, endMs: end! }
+    const previous = sent.current?.request
+    const change: DocumentRecordingAdoption = previous && previous.source.version === source.version && previous.stepId === stepId && previous.assetId === voice.assetId && previous.sha256 === inspected.sha256 && same(previous.sourceRange, proposed)
+      ? previous : { id: crypto.randomUUID(), source: { documentId: source.content.id, version: source.version, fingerprint: source.fingerprint }, stepId, assetId: voice.assetId, sha256: inspected.sha256, sourceRange: proposed }
+    const stored = drafts.current.get(key) ?? draft
+    drafts.current.set(key, stored); sent.current = { key, draft: stored, request: change }; request.current = controller
+    setBusy(true); setFailure(undefined)
+    try { await workbench.adoptDocumentRecording(change, { identity, version: source.version }, controller.signal); if (current()) settle() }
+    catch (error) { if (current() && request.current === controller && !settle() && !controller.signal.aborted) setFailure(failureText(error)) }
+    finally { if (request.current === controller) { request.current = undefined; if (current()) setBusy(false) } }
+  }
+  if (!voice || !draft) return null
+  const review = draft.version !== source?.version
+  const rangeError = start === undefined || end === undefined ? t.invalidTime : inspected && !valid ? t.invalidRange : undefined
+  const trimmed = Boolean(canonicalRange && inspected && (canonicalRange.startMs > 0 || canonicalRange.endMs < inspected.durationMs))
+  const hasCaptions = document?.steps[stepId]?.narrationIds.some(id => document.narrations[id]?.content.some(node => node.type !== 'cue' && (node.type === 'text' ? node.text : node.display).trim()))
+  return <section className="pm-ui-media-clip-editor" aria-label={r.trim} onFocusCapture={() => { if (!disabled) void workbench.pausePlayback() }}
+    onCompositionStart={() => { composing.current = true }} onCompositionEnd={() => { composing.current = false }}
+    onKeyDown={event => { event.stopPropagation(); if (event.key === 'Enter' && event.target instanceof HTMLInputElement && !event.nativeEvent.isComposing && !composing.current) { event.preventDefault(); void apply() } }}>
+    <strong>{r.trim}</strong>
+    <span>{document?.assets[voice.assetId]?.title || r.title}</span>
+    {loading ? <span role="status">{t.loading}</span> : inspected && <output className="pm-ui-field__hint">{t.original(mediaTime(inspected.durationMs), valid ? mediaTime(end! - start!) : undefined)}</output>}
+    <div className="pm-ui-media-clip-editor__times">
+      <PmInput label={t.in} density="compact" width="time" maxLength={32} value={draft.startText ?? mediaTime(range?.startMs ?? draft.voice.sourceRange?.startMs ?? 0)} aria-describedby={rangeError ? rangeErrorId : undefined} aria-invalid={Boolean(rangeError) || undefined} readOnly={disabled || !inspected} onChange={event => edit({ startText: event.target.value })} />
+      <PmInput label={t.out} density="compact" width="time" maxLength={32} value={draft.endText ?? mediaTime(range?.endMs ?? draft.voice.sourceRange?.endMs ?? 0)} aria-describedby={rangeError ? rangeErrorId : undefined} aria-invalid={Boolean(rangeError) || undefined} readOnly={disabled || !inspected} onChange={event => edit({ endText: event.target.value })} />
+    </div>
+    {rangeError && <PmNotice tone="warn"><span id={rangeErrorId}>{rangeError}</span></PmNotice>}
+    <div className="pm-ui-media-clip-editor__actions">
+      <PmButton small variant="primary" loading={busy} disabled={disabled || !active || !valid || !changed || review} onClick={() => void apply()}>{t.apply}</PmButton>
+      <PmButton small disabled={disabled || !inspected} onClick={() => edit({ range: { startMs: 0, endMs: inspected!.durationMs }, startText: undefined, endText: undefined })}>{t.restore}</PmButton>
+      {busy && <PmButton small onClick={() => { request.current?.abort(); request.current = undefined; setBusy(false) }}>{AUDIO_RECORDING_MESSAGES[locale].cancelAdoption}</PmButton>}
+    </div>
+    {review && <PmNotice tone="warn">{t.review}<PmButton small disabled={disabled || !inspected || busy} onClick={() => edit({ version: source!.version!, voice: structuredClone(voice) })}>{t.check}</PmButton></PmNotice>}
+    {trimmed && hasCaptions && <PmNotice tone="warn">{r.captionReview}</PmNotice>}
+    {failure && <PmNotice tone="danger">{failure}<PmButton small disabled={disabled || busy} onClick={() => { setInspection(undefined); setFailure(undefined); setReload(value => value + 1) }}>{t.retry}</PmButton></PmNotice>}
+    {drafts.current.has(key) && <span className="pm-ui-field__hint" role="status">{t.pending}</span>}
+  </section>
+}

package/src/panels/ProductionTimeline.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from 'react'
+import type { ProductionPlan } from '@lincyaw/kernel'
+import { sameProductionBinding } from '@lincyaw/kernel'
+import { PmTimeline } from '../components.tsx'
+import type { TimelineTrack } from '../components.tsx'
+import { AudioWaveforms } from '../audio-waveform.ts'
+import type { AudioWaveform } from '../audio-waveform.ts'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { PRODUCTION_MESSAGES } from '../production-messages.ts'
+
+/** Projects the server's one plan into this page's relative ruler; it never computes a second schedule. */
+export function ProductionTimeline({ plan, sectionId, stepId, active, current, seekEnabled, loading, seeking, disabled, onSeek, onSelectStep }: {
+  plan?: ProductionPlan, sectionId: string, stepId: string, active: boolean, current: boolean, seekEnabled: boolean,
+  loading: boolean, seeking: boolean, disabled: boolean, onSeek(timeMs: number): void, onSelectStep(stepId: string): void,
+}) {
+  const workbench = useWorkbench(), locale = useWorkbenchState(state => state.locale), p = PRODUCTION_MESSAGES[locale]
+  const source = useWorkbenchState(state => state.authoring), playback = useWorkbenchState(state => state.productionPlayback)
+  const directory = useWorkbenchState(state => state.document)
+  const reader = useRef<AudioWaveforms>(), [waveState, setWaves] = useState<{ planId?: string, values: Record<string, AudioWaveform | false> }>({ values: {} })
+  const waves = waveState.planId === plan?.binding.planId ? waveState.values : {}
+  const [zoom, setZoom] = useState(1)
+  useEffect(() => { reader.current = new AudioWaveforms(); return () => { reader.current?.dispose(); reader.current = undefined } }, [])
+  useEffect(() => {
+    setWaves({ planId: plan?.binding.planId, values: {} })
+    if (!active || !current || !plan || directory === undefined) return
+    const controller = new AbortController(), decoder = reader.current
+    if (!decoder) return
+    const audio = new Map(plan.tracks.flatMap(track => track.kind === 'voice' ? track.segments.filter(segment => segment.sectionId === sectionId && segment.status === 'cached' && segment.audio).map(segment => [segment.audio!.clipId, segment.audio!] as const) : []))
+    for (const clip of audio.values()) {
+      void decoder.read(JSON.stringify([plan.binding.planId, clip.clipId, clip.sha256]), signal => workbench.client.readProductionMedia(directory, { ...plan.binding, clipId: clip.clipId }, signal), clip.durationMs, controller.signal).then(
+        value => { if (!controller.signal.aborted) setWaves(previous => previous.planId === plan.binding.planId ? { ...previous, values: { ...previous.values, [clip.clipId]: value } } : previous) },
+        () => { if (!controller.signal.aborted) setWaves(previous => previous.planId === plan.binding.planId ? { ...previous, values: { ...previous.values, [clip.clipId]: false } } : previous) },
+      )
+    }
+    return () => controller.abort()
+  }, [workbench, directory, plan, sectionId, active, current])
+  const document = source?.content, section = document?.sections[sectionId]
+  const page = current ? plan?.pages.find(page => page.sectionId === sectionId) : undefined
+  const start = page?.startMs, end = page?.endMs, duration = start !== undefined && end !== undefined ? Math.max(0, end - start) : undefined
+  const position = plan && current && playback && sameProductionBinding(playback.binding, plan.binding) && playback.position?.sectionId === sectionId && start !== undefined ? Math.max(0, playback.position.timeMs - start) : undefined
+  const tracks: TimelineTrack[] = page && plan ? plan.tracks.map(track => ({ id: track.kind, label: p.tracks[track.kind], segments: track.segments.filter(segment => segment.sectionId === sectionId).map(segment => {
+    const step = document?.steps[segment.stepId], index = section?.stepOrder.indexOf(segment.stepId) ?? -1
+    const wave = track.kind === 'voice' && segment.audio ? waves[segment.audio.clipId] : undefined
+    const status = segment.status ? p.segmentStatus[segment.status] : undefined
+    return { id: segment.id, stepId: segment.stepId, timing: segment.timing,
+      label: track.kind === 'visual' ? step?.title ?? p.stepNumber(Math.max(0, index)) : segment.label,
+      ...segment.startMs !== undefined && start !== undefined ? { startMs: Math.max(0, segment.startMs - start) } : {},
+      ...segment.endMs !== undefined && start !== undefined ? { endMs: Math.max(0, segment.endMs - start) } : {},
+      statusLabel: [status, track.kind === 'caption' && p.alignmentStatus[segment.alignment ?? 'none'], segment.audio && (wave === false ? p.waveformUnavailable : wave === undefined ? p.waveformLoading : undefined)].filter(Boolean).join(' · '),
+      waveform: wave ? wave.peaks : undefined,
+    }
+  }) })) : [{ id: 'visual', label: p.tracks.visual, segments: section?.stepOrder.map((id, index) => ({ id, stepId: id, label: document?.steps[id]?.title ?? p.stepNumber(index), timing: 'unknown' as const })) ?? [] }, { id: 'voice', label: p.tracks.voice, segments: [] }, { id: 'caption', label: p.tracks.caption, segments: [] }]
+  const captionChoices = current ? plan?.tracks.find(track => track.kind === 'caption')?.segments.filter(segment => segment.stepId === stepId && (segment.alignment === 'words' || segment.alignment === 'manual') && segment.timing === 'confirmed').map(segment => segment.id) ?? [] : []
+  return <PmTimeline variant="editor" label={p.timeline} tracks={tracks} labels={p.timelineLabels} durationMs={duration} durationStatus={page?.timing ?? 'unknown'} currentTimeMs={position} selectedStepId={stepId} showSteps={false}
+    segmentPicker={{ track: 'caption', ids: captionChoices, label: p.captionSegment, placeholder: p.chooseCaptionSegment }}
+    zoom={zoom} onZoomChange={setZoom} disabled={disabled} loading={loading} seeking={seeking} seekDisabled={!seekEnabled || start === undefined}
+    onSelectStep={onSelectStep} onSelectSegment={(track, selected) => {
+      const segment = current ? plan?.tracks.find(value => value.kind === track)?.segments.find(value => value.id === selected.id) : undefined
+      if (track === 'caption' && seekEnabled && (segment?.alignment === 'words' || segment?.alignment === 'manual') && segment.timing === 'confirmed' && segment.startMs !== undefined) onSeek(segment.startMs)
+      else if (selected.stepId) onSelectStep(selected.stepId)
+    }} onSeek={time => { if (start !== undefined) onSeek(start + time) }} />
+}