@lincyaw/workbench 0.1.0 → 0.2.0-rc.0

package/src/panels/PageDeleteDialog.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+import type { PageDeletePlan } from '@lincyaw/kernel'
+import { PmButton, PmDialog, PmNotice } from '../components.tsx'
+import { useMessages, useWorkbench, useWorkbenchState } from '../context.tsx'
+
+/** Confirmation is prepared from the source version after pending document edits have finished. */
+export function PageDeleteDialog({ section, title, trigger, onClose }: { section: string, title: string, trigger?: HTMLButtonElement, onClose(): void }) {
+  const t = useMessages(), workbench = useWorkbench()
+  const [plan, setPlan] = useState<PageDeletePlan>(), [loading, setLoading] = useState(true), [error, setError] = useState<string>(), [attempt, setAttempt] = useState(0)
+  const busy = useWorkbenchState(state => Boolean(state.isEditingPage))
+  const failure = useWorkbenchState(state => state.pageEditFailure)
+  useEffect(() => {
+    let current = true
+    setLoading(true); setError(undefined)
+    void workbench.preparePageDeletion(section).then(answer => { if (current) setPlan(answer) }, () => { if (current) setError(t.pageEditRequestFailed) }).finally(() => { if (current) setLoading(false) })
+    return () => { current = false }
+  }, [workbench, section, attempt])
+  return <PmDialog open label={t.pageDeleteTitle(title)} description={plan ? t.pageDeleteHint(plan.counts.steps, plan.counts.narration) : t.pageDeleteLoading} busy={busy} closeLabel={t.close} onClose={onClose} onCloseAutoFocus={event => {
+    const target = trigger?.isConnected ? trigger : document.querySelector<HTMLElement>('.pmw-navigation__item[aria-current]')
+    if (target) { event.preventDefault(); target.focus() }
+  }}>
+    <div className="pmw-operation">
+      {plan?.last && <PmNotice>{t.pageDeleteLast}</PmNotice>}
+      {plan && !plan.allowed && <PmNotice tone="warn">{workbench.pageDeleteMessage(plan.reason ?? 'page-boundary')}</PmNotice>}
+      {(error || failure) && <PmNotice tone="danger">{error || failure}</PmNotice>}
+      <div className="pmw-operation__actions">
+        <PmButton disabled={busy} onClick={onClose}>{t.cancel}</PmButton>
+        {error || failure ? <PmButton disabled={busy} onClick={() => { workbench.clearPageEditFailure(); setAttempt(value => value + 1) }}>{t.retry}</PmButton>
+          : <PmButton variant="danger" loading={loading || busy} disabled={!plan?.allowed || loading} onClick={() => { if (plan) void workbench.deletePage(plan).then(saved => { if (saved) onClose() }) }}>{t.pageDelete}</PmButton>}
+      </div>
+    </div>
+  </PmDialog>
+}

package/src/panels/PageRenameDialog.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import { PmButton, PmDialog, PmInput } from '../components.tsx'
+import { useMessages, useWorkbench, useWorkbenchState } from '../context.tsx'
+
+/** The submitted title stays local until the source write and compiled page are acknowledged. */
+export function PageRenameDialog({ section, title: original, trigger, onClose }: { section: string, title: string, trigger?: HTMLButtonElement, onClose(): void }) {
+  const t = useMessages()
+  const workbench = useWorkbench()
+  const busy = useWorkbenchState(state => Boolean(state.isEditingPage))
+  const failure = useWorkbenchState(state => state.pageEditFailure)
+  const [title, setTitle] = useState(original)
+  return <PmDialog open label={t.pageRenameTitle} closeLabel={t.close} busy={busy} onClose={onClose} onCloseAutoFocus={event => { if (trigger?.isConnected) { event.preventDefault(); trigger.focus() } }}>
+    <form className="pmw-operation" onKeyDown={event => {
+      if (event.key === 'Enter' && (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229)) event.preventDefault()
+    }} onSubmit={event => {
+      event.preventDefault()
+      if (busy || !title.trim()) return
+      void workbench.renamePage(section, title.trim()).then(saved => { if (saved) onClose() })
+    }}>
+      <PmInput label={t.pageTitle} density="regular" value={title} error={failure} required autoFocus readOnly={busy} onChange={event => setTitle(event.target.value)} />
+      <div className="pmw-operation__actions">
+        <PmButton disabled={busy} onClick={onClose}>{t.cancel}</PmButton>
+        <PmButton type="submit" variant="primary" loading={busy} disabled={!title.trim()}>{t.save}</PmButton>
+      </div>
+    </form>
+  </PmDialog>
+}

package/src/panels/PreviewPanel.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import type { CSSProperties } from 'react'
+import { createPreviewPool } from '../preview-pool.ts'
+import type { PresentationAction, PreviewFrameStatus } from '../preview-pool.ts'
+import { PmButton, PmNotice } from '../components.tsx'
+import { useMessages, useWorkbench, useWorkbenchState } from '../context.tsx'
+import { slideAspect } from '../workbench.ts'
+import { failureReason } from '../messages.ts'
+import { PreviewChangeTrail } from './ChangeTrail.tsx'
+
+/**
+ * The open document as its readers see it (the web form or the slides), with the tools for what the author points at.
+ * `playbackKeys`: the workbench plays the page, which hands it Space and the left and right arrows.
+ */
+export function PreviewPanel({ active = true, onPresentationAction, presentation = false, playbackKeys = false }: { active?: boolean, presentation?: boolean, playbackKeys?: boolean, onPresentationAction?(action: PresentationAction): void }) {
+  const presentationAction = useRef(onPresentationAction)
+  presentationAction.current = onPresentationAction
+  const t = useMessages()
+  const workbench = useWorkbench()
+  useEffect(() => active ? workbench.observePreviewRuntime() : undefined, [workbench, active])
+  const document = useWorkbenchState(state => state.document)
+  const documents = useWorkbenchState(state => state.documents)
+  const preview = useWorkbenchState(state => state.preview)
+  const failure = useWorkbenchState(state => state.previewFailure)
+  const renderer = useWorkbenchState(state => state.previewRenderer)
+  const snapshotMatches = useWorkbenchState(state => !state.presentationSnapshot || state.webView !== 'present' || state.presentationSnapshot.revision === state.previewIrRevision)
+  const preparing = useWorkbenchState(state => Boolean(state.isPreparingPresentation))
+  const confirmedRevision = useWorkbenchState(state => presentation ? state.presentationSnapshot?.revision : undefined)
+  const reload = useWorkbenchState(state => state.previewReload)
+  const aspect = useWorkbenchState(state => (state.previewRenderer === 'slides' ? slideAspect(state.ir) : undefined))
+  const container = useRef<HTMLDivElement>(null)
+  const stage = useRef<HTMLDivElement>(null)
+  const pool = useRef<ReturnType<typeof createPreviewPool>>()
+  const [loads, setLoads] = useState(0)
+  const [{ ready, mismatch, identityFailure, handshakeFailure, canvasGate }, setStatus] = useState<PreviewFrameStatus>({ ready: false })
+  const address = renderer === 'slides' ? preview?.slides : preview?.web
+  const title = documents?.documents.find(doc => doc.dir === document)?.title ?? document ?? ''
+
+  useLayoutEffect(() => {
+    if (!container.current) return
+    const current = createPreviewPool(container.current, workbench, setStatus, document => {
+      setLoads(n => n + 1)
+      void workbench.openDocument(document)
+    }, action => presentationAction.current?.(action), { presentation, playbackKeys })
+    pool.current = current
+    return () => { current.dispose(); pool.current = undefined }
+  }, [workbench, presentation, playbackKeys])
+  useLayoutEffect(() => { pool.current?.confirmPresentation(confirmedRevision) }, [confirmedRevision])
+  // A presentation takes the keyboard (arrows, space, Esc) once its frame can be seen, unless the author already focused something else.
+  const keyboardTaken = useRef(false)
+  useEffect(() => {
+    if (!presentation || !active || !ready || keyboardTaken.current) return
+    const frame = container.current?.querySelector<HTMLIFrameElement>('iframe[data-active="true"]:not([hidden])')
+    const focused = globalThis.document.activeElement
+    if (!frame || focused && focused !== globalThis.document.body) return
+    frame.focus()
+    keyboardTaken.current = globalThis.document.activeElement === frame
+  }, [presentation, active, ready, snapshotMatches, canvasGate])
+  useLayoutEffect(() => {
+    pool.current?.select(active && document !== undefined && !failure && !(renderer === 'slides' && preview && !preview.slides)
+      ? { document, renderer, address, title: t.previewTitle(title), reload: loads + reload }
+      : undefined)
+  }, [active, document, renderer, address, title, loads, reload, failure, t, workbench])
+
+  return (
+    <section className="pmw-preview" aria-label={t.preview} data-ready={(active && document !== undefined && ready && snapshotMatches) || undefined}>
+      {mismatch && <PmNotice tone="warn">{t.versionMismatch}</PmNotice>}
+      {identityFailure && <PmNotice tone="danger"><span>{t.previewIdentityMismatch}</span><PmButton small onClick={() => workbench.reloadPreview()}>{t.reloadPreview}</PmButton></PmNotice>}
+      {handshakeFailure && <PmNotice tone="danger"><span>{t.previewStalled}</span><PmButton small onClick={() => workbench.reloadPreview()}>{t.reloadPreview}</PmButton></PmNotice>}
+      {failure && <PmNotice tone="danger"><span>{t.previewFailed(failureReason(t, failure))}</span><PmButton small onClick={() => workbench.retryPreview()}>{t.retry}</PmButton></PmNotice>}
+      {(!ready || !snapshotMatches) && !failure && !handshakeFailure && !(renderer === 'slides' && preview && !preview.slides) && <p className="pmw-muted pmw-preview__loading">{presentation && ready && !snapshotMatches && !preparing ? t.presentationOutdated : address ? t.previewLoading : t.previewPreparing}</p>}
+      {renderer === 'slides' && preview && !preview.slides && <p className="pmw-muted pmw-preview__loading">{t.noSlides}</p>}
+      <div ref={stage} className="pmw-preview__stage">
+        <div ref={container} className="pmw-preview__frames" data-renderer={renderer} data-pending-snapshot={!snapshotMatches || undefined} data-presentation-gated={presentation && canvasGate || undefined} style={aspect === undefined ? undefined : { '--pmw-slide-aspect': aspect } as CSSProperties} />
+        {!presentation && <PreviewChangeTrail stage={stage} frames={container} />}
+      </div>
+    </section>
+  )
+}

package/src/panels/ProductionCaptionTiming.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from 'react'
+import { CAPTION_TIMING_MAX_SEGMENTS, captionSourceFingerprint, captionTimingProblem, stepCaptionText } from '@lincyaw/kernel'
+import type { CaptionTiming, CaptionTimingSource, DocumentCaptionTimingAction, ProductionPlan } from '@lincyaw/kernel'
+import { PmButton, PmCard, PmDialog, PmInput, PmNotice } from '../components.tsx'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { CAPTION_TIMING_MESSAGES } from '../caption-timing-messages.ts'
+import type { CaptionTimingDraft as Draft, CaptionTimingRow as Row } from '../caption-timing-drafts.ts'
+
+const same = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b)
+const seconds = (raw: string) => {
+  if (!/^\d+(?:\.\d{1,3})?$/.test(raw.trim())) return undefined
+  const value = Math.round(Number(raw.trim()) * 1000)
+  return Number.isSafeInteger(value) ? value : undefined
+}
+/** An explicit line-break partition retains every original character, including blank lines. */
+function lineRows(text: string): Row[] {
+  const cuts = [0, ...Array.from(text.matchAll(/\n+(?=[^\n]*\S)/g), match => match.index + match[0].length), text.length]
+  const ranges: { from: number, to: number }[] = []
+  for (let i = 0; i + 1 < cuts.length; i++) {
+    const from = cuts[i]!, to = cuts[i + 1]!
+    if (from === to) continue
+    if (!text.slice(from, to).trim() && ranges.length) ranges[ranges.length - 1]!.to = to
+    else if (ranges.length && !text.slice(ranges.at(-1)!.from, ranges.at(-1)!.to).trim()) ranges[ranges.length - 1]!.to = to
+    else ranges.push({ from, to })
+  }
+  return ranges.map(range => ({ ...range, id: crypto.randomUUID(), start: '', end: '' }))
+}
+function valueOf(draft: Draft): CaptionTiming | undefined {
+  if (!draft.basis.available || !draft.basis.playbackFingerprint || draft.basis.durationMs === undefined) return
+  const rows = draft.rows.map(row => ({ id: row.id, from: row.from, to: row.to, startMs: seconds(row.start), endMs: seconds(row.end) }))
+  if (rows.some(row => row.startMs === undefined || row.endMs === undefined)) return
+  const value: CaptionTiming = { narrationIds: draft.basis.narrationIds, sourceFingerprint: draft.basis.sourceFingerprint,
+    playbackFingerprint: draft.basis.playbackFingerprint, durationMs: draft.basis.durationMs, segments: rows as CaptionTiming['segments'] }
+  return captionTimingProblem(value, draft.text) ? undefined : value
+}
+
+/** Video-only explicit timing proposals. The shared semantic action and canonical actor own every save. */
+export function ProductionCaptionTiming({ identity, stepId, plan, current, loading, disabled, onChanged }: {
+  identity: string, stepId: string, plan?: ProductionPlan, current: boolean, loading: boolean, disabled: boolean, onChanged(): void,
+}) {
+  const workbench = useWorkbench(), source = useWorkbenchState(state => state.authoring), locale = useWorkbenchState(state => state.locale), t = CAPTION_TIMING_MESSAGES[locale]
+  const document = source?.identity === identity ? source.content : undefined, basis = current ? plan?.pages.flatMap(page => page.steps).find(step => step.stepId === stepId)?.captionTiming : undefined
+  const pendingSteps = useWorkbenchState(state => state.captionTimingDraftSteps), storageFailure = useWorkbenchState(state => state.captionTimingDraftStorageFailure)
+  const [open, setOpen] = useState(false), [busy, setBusy] = useState(false), [failure, setFailure] = useState<string>(), [saved, setSaved] = useState(false), [, render] = useState(0)
+  const drafts = useRef(new Map<string, Draft>()), alive = useRef(true), request = useRef<AbortController>(), needsRefresh = useRef(false), openRef = useRef(false), composing = useRef(false)
+  const latest = useRef({ stepId, onChanged }); latest.current = { stepId, onChanged }
+  if (!drafts.current.has(stepId)) { const savedDraft = workbench.captionTimingDraft(stepId, identity); if (savedDraft) drafts.current.set(stepId, savedDraft) }
+  const draft = drafts.current.get(stepId), value = draft && valueOf(draft), canonical = document?.production.captionTimings?.[stepId], hasDraft = Boolean(pendingSteps?.includes(stepId))
+  const changed = draft && source?.version !== draft.version || draft && basis && (!same(draft.basis, basis) || draft.text !== (document && stepCaptionText(document, stepId)))
+  const writable = Boolean(source?.version && source.fingerprint && !source.loading && !source.dirty && !source.saving && !source.composing && !source.restored && !source.recovering && !source.error && !disabled)
+  useEffect(() => { alive.current = true; return () => { alive.current = false; request.current?.abort() } }, [])
+  useEffect(() => { request.current?.abort(); openRef.current = false; setOpen(false); setBusy(false); setFailure(undefined); setSaved(false) }, [stepId])
+  const pending = (next: Draft, changedByAuthor = true) => { drafts.current.set(stepId, next); if (changedByAuthor) workbench.setCaptionTimingDraft(stepId, next, identity); setSaved(false); setFailure(undefined); render(n => n + 1) }
+  const initialize = () => {
+    if (!document || !source?.version || !basis) return
+    const text = stepCaptionText(document, stepId), existing = document.production.captionTimings?.[stepId]
+    const original = existing?.sourceFingerprint === captionSourceFingerprint(document, stepId)
+    pending({ version: source.version, text, basis: original ? { ...structuredClone(basis), sourceFingerprint: existing.sourceFingerprint, playbackFingerprint: existing.playbackFingerprint, durationMs: existing.durationMs, narrationIds: [...existing.narrationIds] } : structuredClone(basis), rows: original ? existing.segments.map(row => ({ id: row.id, from: row.from, to: row.to, start: String(row.startMs / 1000), end: String(row.endMs / 1000) })) : lineRows(text) }, false)
+  }
+  useEffect(() => {
+    // A plan may arrive after opening. Step/close effects fence the original opening;
+    // an existing target draft always wins over this passive initialization.
+    if (open && openRef.current && !saved && current && basis && source?.identity === identity && !drafts.current.has(stepId)) initialize()
+  }, [open, saved, current, basis, source?.identity, source?.version, identity, stepId])
+  const close = () => {
+    request.current?.abort(); setBusy(false); openRef.current = false; setOpen(false)
+    if (needsRefresh.current) { needsRefresh.current = false; latest.current.onChanged() }
+  }
+  const apply = async (automatic = false) => {
+    if (!document || !source?.version || !source.fingerprint || !writable || busy || composing.current || !automatic && (!value || changed || !current)) return
+    const sent = draft, target = stepId, expected = { identity, version: source.version, fingerprint: source.fingerprint }, controller = new AbortController()
+    const action: DocumentCaptionTimingAction = automatic ? { type: 'caption.timing.reset', stepId } : { type: 'caption.timing.set', stepId, value: value! }
+    request.current = controller; setBusy(true); setFailure(undefined)
+    try {
+      const answer = await workbench.applyDocumentCaptionTiming(action, crypto.randomUUID(), expected, controller.signal)
+      needsRefresh.current = true
+      if (!alive.current || workbench.getState().authoring?.identity !== identity) return
+      const ownsInput = drafts.current.get(target) === sent
+      if (ownsInput) {
+        workbench.setCaptionTimingDraft(target, undefined, identity)
+        if (automatic) drafts.current.delete(target)
+        else if (sent) drafts.current.set(target, { ...sent, version: answer.version })
+      }
+      if (latest.current.stepId === target) { setSaved(ownsInput); render(n => n + 1) }
+      if (!openRef.current) { needsRefresh.current = false; latest.current.onChanged() }
+    } catch (error) {
+      if (alive.current && request.current === controller && !controller.signal.aborted) setFailure(error instanceof Error && /source|version|playback|revision/.test(error.message) ? t.changed : t.failed)
+    } finally { if (alive.current && request.current === controller) { request.current = undefined; setBusy(false) } }
+  }
+  if (!document?.steps[stepId] || !stepCaptionText(document, stepId).trim()) return null
+  return <PmCard>
+    <PmButton small disabled={disabled} onClick={() => { if (!drafts.current.has(stepId)) initialize(); setSaved(false); openRef.current = true; setOpen(true) }}>{t.open}</PmButton>
+    <PmDialog open={open} label={t.title} closeLabel={t.cancel} onClose={close} footer={<>
+      <PmButton small onClick={close}>{saved ? t.done : t.cancel}</PmButton>
+      <PmButton small variant="primary" loading={busy} disabled={!writable || !current || !value || Boolean(changed) || same(value, canonical)} onClick={() => void apply()}>{t.apply}</PmButton>
+    </>}>
+      <div className="pmw-caption-times" onCompositionStart={() => { composing.current = true }} onCompositionEnd={() => { composing.current = false }}>
+        <span>{t.step}</span>
+        {!saved && basis?.available === false && <PmNotice tone="warn">{t.unavailable}</PmNotice>}
+        {!saved && !basis && <PmNotice>{loading ? t.loading : t.prepare}</PmNotice>}
+        {changed && <PmNotice tone="warn">{t.changed}<PmButton small disabled={!basis?.available || busy || !writable || draft?.text !== stepCaptionText(document, stepId)} onClick={() => { if (draft && basis && source?.version) pending({ ...draft, version: source.version, basis: structuredClone(basis) }) }}>{t.recheck}</PmButton></PmNotice>}
+        {draft?.rows.map((row, index) => <section key={row.id} className="pmw-caption-times" aria-label={t.segment(index + 1)}>
+          <p className="pmw-caption-times__text">{draft.text.slice(row.from, row.to)}</p>
+          <div className="pmw-caption-times__range">
+            {(['start', 'end'] as const).map(key => <PmInput key={key} label={key === 'start' ? t.start : t.end} inputMode="decimal" maxLength={32} value={row[key]}
+              aria-invalid={Boolean(row[key] && seconds(row[key]) === undefined) || undefined} readOnly={disabled}
+              onChange={event => pending({ ...draft, rows: draft.rows.map(item => item === row ? { ...row, [key]: event.target.value } : item) })} />)}
+          </div>
+        </section>)}
+        {draft && draft.rows.length > CAPTION_TIMING_MAX_SEGMENTS ? <PmNotice tone="warn">{t.limit}</PmNotice> : draft && draft.rows.every(row => row.start && row.end) && !value ? <PmNotice tone="warn">{t.invalid}</PmNotice> : null}
+        <div className="pmw-caption-times__actions">
+          <PmButton small disabled={!basis?.available || busy || !writable} onClick={() => { if (document && basis && source?.version) pending({ version: source.version, text: stepCaptionText(document, stepId), basis: structuredClone(basis), rows: lineRows(stepCaptionText(document, stepId)) }) }}>{t.split}</PmButton>
+          <PmButton small disabled={!canonical || busy || !writable} onClick={() => void apply(true)}>{t.automatic}</PmButton>
+          {hasDraft && <PmButton small disabled={busy} onClick={() => { workbench.setCaptionTimingDraft(stepId, undefined, identity); drafts.current.delete(stepId); initialize() }}>{t.discard}</PmButton>}
+        </div>
+        {storageFailure && <PmNotice tone="warn">{t.storageFailed}</PmNotice>}
+        {saved && <PmNotice tone="ok">{t.saved}</PmNotice>}
+        {failure && <PmNotice tone="danger">{failure}</PmNotice>}
+      </div>
+    </PmDialog>
+  </PmCard>
+}

package/src/panels/ProductionMediaClips.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useRef, useState } from 'react'
+import type { DocumentChangeAnswer, MediaClip, ProductionAssetInspection, ProductionBinding, TeachingDocument } from '@lincyaw/kernel'
+import { MediaClipEditor } from '../MediaClipEditor.tsx'
+import type { MediaClipDraft } from '../MediaClipEditor.tsx'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { keepMediaDrafts, mediaDraftStorageFailed, readMediaDrafts } from '../media-drafts.ts'
+import type { MediaDrafts } from '../media-drafts.ts'
+import { MEDIA_MESSAGES, mediaFailure } from '../media-messages.ts'
+
+interface Props {
+  identity: string
+  version: string
+  document: TeachingDocument
+  sectionId: string
+  stepId: string
+  binding?: ProductionBinding
+  stepDurationMs?: number
+  disabled: boolean
+  onChanged(): void
+}
+const newDraft = (version: string, stepId: string): MediaClipDraft => ({ version, clip: { id: `clip_${crypto.randomUUID().replaceAll('-', '')}`, assetId: '', sourceRange: { startMs: 0, endMs: 0 }, attachment: { stepId, offsetMs: 0 }, volume: 1, muted: false } })
+const fromClip = (version: string, clip: MediaClip): MediaClipDraft => ({ version, clip: structuredClone(clip), baseClip: structuredClone(clip) })
+const same = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b)
+const draftKey = (clipId?: string) => clipId === undefined ? 'new' : `clip:${clipId}`
+const ownDraft = (entries: MediaDrafts['entries'], key: string) => Object.hasOwn(entries, key) ? entries[key] : undefined
+
+/** The source actor owns writes; this adapter owns only stable-target input and request lifetimes. */
+export function ProductionMediaClips({ identity, version, document, sectionId, stepId, binding, stepDurationMs, disabled, onChanged }: Props) {
+  const workbench = useWorkbench(), locale = useWorkbenchState(state => state.locale), t = MEDIA_MESSAGES[locale]
+  const [session, setSession] = useState(() => readMediaDrafts(workbench.client, identity, stepId)), latest = useRef(session)
+  const [storageFailed, setStorageFailed] = useState(() => mediaDraftStorageFailed(workbench.client, identity, stepId))
+  const [inspection, setInspection] = useState<{ version: string, value: ProductionAssetInspection }>(), [loading, setLoading] = useState(false), [reload, setReload] = useState(0)
+  const [busy, setBusy] = useState<'import' | 'apply' | 'remove'>(), [failure, setFailure] = useState<string>(), [status, setStatus] = useState<string>()
+  const [retryImport, setRetryImport] = useState(false), file = useRef<File>(), request = useRef<AbortController>()
+  const owner = useRef({ active: true, revision: 0 }), blank = useRef<MediaClipDraft>()
+  blank.current ??= newDraft(version, stepId)
+  const clips = document.production.mediaClips.filter(clip => clip.attachment.stepId === stepId), selectedClipId = session.selectedClipId
+  const key = draftKey(selectedClipId), canonical = clips.find(clip => clip.id === selectedClipId)
+  const draft = ownDraft(session.entries, key) ?? (canonical ? fromClip(version, canonical) : { ...blank.current, version })
+  const snapshot = useRef(draft), selected = useRef(key)
+  snapshot.current = draft; selected.current = key; latest.current = session
+  const assets = Object.values(document.assets).filter(asset => asset.kind === 'audio').map(asset => ({ id: asset.id, label: asset.title || asset.location.split('/').at(-1) || asset.id }))
+  const active = () => owner.current.active && workbench.getState().authoring?.identity === identity
+  const remember = (value: MediaDrafts) => {
+    latest.current = value; setSession(value)
+    setStorageFailed(!keepMediaDrafts(workbench.client, identity, stepId, value))
+  }
+  const edit = (value: MediaClipDraft) => {
+    owner.current.revision++; setFailure(undefined); setStatus(undefined)
+    remember({ ...latest.current, entries: { ...latest.current.entries, [selected.current]: value } })
+  }
+  const pause = () => { workbench.stopAuditions(); workbench.selectDocumentStep(sectionId, stepId) }
+  useEffect(() => () => { owner.current.active = false; request.current?.abort(); file.current = undefined }, [])
+  useEffect(() => {
+    const assetId = draft.clip.assetId, controller = new AbortController(), requestKey = key
+    if (!assetId || disabled || !version || inspection?.version === version && inspection.value.assetId === assetId) { setLoading(false); return }
+    setLoading(true)
+    void workbench.inspectDocumentAudio(assetId, { identity, version }, controller.signal).then(answer => {
+      if (controller.signal.aborted || !active()) return
+      setInspection({ version: answer.version, value: answer.inspection })
+      const current = ownDraft(latest.current.entries, requestKey)
+      if (current?.clip.assetId === assetId && current.clip.sourceRange.endMs === 0 && current.startText === undefined && current.endText === undefined) {
+        remember({ ...latest.current, entries: { ...latest.current.entries, [requestKey]: { ...current, clip: { ...current.clip, sourceRange: { startMs: 0, endMs: answer.inspection.durationMs } } } } })
+      }
+    }, error => { if (!controller.signal.aborted && active()) setFailure(mediaFailure(error, locale)) }).finally(() => { if (!controller.signal.aborted && active()) setLoading(false) })
+    return () => controller.abort()
+  }, [workbench, identity, version, draft.clip.assetId, key, disabled, reload])
+  const start = (kind: 'import' | 'apply' | 'remove') => {
+    const source = workbench.getState().authoring
+    if (!active() || disabled || busy || request.current || source?.version !== version || source.dirty || source.saving || source.loading || source.composing || source.restored || source.error) return undefined
+    const controller = new AbortController(); request.current = controller
+    setBusy(kind); setFailure(undefined); setStatus(undefined)
+    pause()
+    return { controller, expected: { identity, version }, revision: owner.current.revision, key: selected.current, draft: structuredClone(snapshot.current) }
+  }
+  const finish = (controller: AbortController) => { if (request.current === controller) { request.current = undefined; if (active()) setBusy(undefined) } }
+  const acknowledge = (answer: Pick<DocumentChangeAnswer, 'version'>, expectedVersion: string) => {
+    const entries = Object.fromEntries(Object.entries(latest.current.entries).map(([id, value]) => [id, value.version === expectedVersion ? { ...value, version: answer.version } : value]))
+    return { ...latest.current, entries }
+  }
+  const importAudio = async (value: File) => {
+    if (!value.size || value.size > 16 * 1024 * 1024) { setFailure(t.size); setRetryImport(false); return }
+    const sent = start('import')
+    if (!sent) return
+    file.current = value; setRetryImport(false)
+    try {
+      const answer = await workbench.ensureDocumentAudio(value, sent.expected, sent.controller.signal)
+      if (!active() || sent.controller.signal.aborted) return
+      const next = acknowledge(answer, sent.expected.version)
+      if (owner.current.revision === sent.revision && selected.current === sent.key) {
+        const full = newDraft(answer.version, stepId)
+        full.clip.assetId = answer.inspection.assetId; full.clip.sourceRange.endMs = answer.inspection.durationMs
+        next.selectedClipId = undefined; next.entries.new = full
+        setInspection({ version: answer.version, value: answer.inspection })
+      }
+      remember(next); file.current = undefined; setStatus(t.imported); onChanged()
+    } catch (error) { if (active() && !sent.controller.signal.aborted) { setFailure(mediaFailure(error, locale)); setRetryImport(true) } }
+    finally { finish(sent.controller) }
+  }
+  const apply = async (clip: MediaClip) => {
+    if (!binding || stepDurationMs === undefined || draft.version !== version || clip.attachment.stepId !== stepId) return
+    const sent = start('apply')
+    if (!sent) return
+    try {
+      const answer = await workbench.applyDocumentMediaClip(clip, { ...sent.expected, binding }, sent.controller.signal)
+      if (!active() || sent.controller.signal.aborted) return
+      const next = acknowledge(answer, sent.expected.version), current = ownDraft(latest.current.entries, sent.key)
+      if (sent.key === 'new') blank.current = newDraft(answer.version, stepId)
+      if (current && same(current, sent.draft)) delete next.entries[sent.key]
+      else if (current) next.entries[sent.key] = { ...ownDraft(next.entries, sent.key)!, baseClip: structuredClone(clip) }
+      if (selected.current === sent.key) {
+        next.selectedClipId = clip.id
+        const pending = ownDraft(next.entries, 'new')
+        if (sent.key === 'new' && pending) { next.entries[draftKey(clip.id)] = pending; delete next.entries.new }
+      }
+      remember(next); setStatus(t.saved); onChanged()
+    } catch (error) { if (active() && !sent.controller.signal.aborted) setFailure(mediaFailure(error, locale)) }
+    finally { finish(sent.controller) }
+  }
+  const remove = async () => {
+    if (!canonical) return
+    const sent = start('remove')
+    if (!sent) return
+    try {
+      const answer = await workbench.removeDocumentMediaClip(canonical.id, sent.expected, sent.controller.signal)
+      if (!active() || sent.controller.signal.aborted) return
+      const next = acknowledge(answer, sent.expected.version), current = ownDraft(latest.current.entries, sent.key)
+      if (!current || same(current, sent.draft)) {
+        delete next.entries[sent.key]
+        if (selected.current === sent.key) { next.selectedClipId = undefined; blank.current = newDraft(answer.version, stepId) }
+      }
+      remember(next); setStatus(t.saved); onChanged()
+    } catch (error) { if (active() && !sent.controller.signal.aborted) setFailure(mediaFailure(error, locale)) }
+    finally { finish(sent.controller) }
+  }
+  const inspectCurrent = inspection?.version === version && inspection.value.assetId === draft.clip.assetId ? inspection.value : undefined
+  return <MediaClipEditor locale={locale} assets={assets} clips={clips} selectedClipId={selectedClipId} draft={draft} inspection={inspectCurrent} stepDurationMs={stepDurationMs}
+    disabled={disabled} canApply={Boolean(binding && stepDurationMs !== undefined)} loading={loading} busy={busy} pending={Boolean(ownDraft(session.entries, key))} review={Boolean(ownDraft(session.entries, key) && draft.version !== version)}
+    failure={failure} storageFailed={storageFailed} status={status} retryImport={retryImport}
+    onEditStart={pause} onChange={edit} onImport={value => void importAudio(value)} onRetryImport={() => { if (file.current) void importAudio(file.current) }}
+    onRead={() => { setFailure(undefined); setInspection(undefined); setReload(value => value + 1) }}
+    onReview={() => { if (inspectCurrent && (!draft.baseClip || canonical)) edit({ ...draft, version, ...canonical ? { baseClip: structuredClone(canonical) } : {} }) }}
+    onSelectClip={id => {
+      owner.current.revision++; setFailure(undefined); setStatus(undefined)
+      const next = { ...latest.current, selectedClipId: id }
+      if (!id && selectedClipId && !canonical) {
+        const retained = ownDraft(latest.current.entries, draftKey(selectedClipId))
+        if (retained) next.entries = { ...next.entries, new: { ...retained, clip: { ...retained.clip, id: newDraft(version, stepId).clip.id }, baseClip: undefined } }
+      }
+      remember(next)
+    }}
+    onSelectAsset={id => {
+      const value = snapshot.current
+      edit({ ...value, clip: { ...value.clip, assetId: id, sourceRange: { startMs: 0, endMs: 0 } }, startText: undefined, endText: undefined })
+    }} onApply={clip => void apply(clip)} onRemove={() => void remove()} />
+}