rvlib-shipkit 2.7.0 → 2.9.0

package/src/serve/hub-app/review/review-views.tsx

@@ -1,10 +1,12 @@
 // the review page's middle column: every view of the open card stacked, each under its heading with the owner's reaction and
 // its zoom; a view is an image, a clip, a pair (side by side, the curtain, the onion skin, the after alone) or a
-// gallery of tiles. A drag on an image draws a rectangle, on a clip it pauses and keeps the frame's time. A choice, or
-// views that each play alone, show as thin option rows; the card's header sits on top when the page reads in one column
+// gallery of tiles. A drag on an image draws a rectangle, on a clip it pauses and keeps the frame's time; the picked
+// rectangle's note box opens beside it. A choice, or views that each play alone, show as option rows, each image and
+// clip shown full under its row; the card's header sits on top when the page reads in one column
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { isGallery, isPair, onFrame, STARS, thumbFileOf, verdictOf, viewName, type GalleryView, type MediaView, type Rect, type ReviewClip, type ReviewItem, type ReviewMark, type ReviewView, type Side } from '../../../review/model.ts'
+import { AutoText } from '../auto-text.tsx'
 import { blurOnEscape, Empty, FIT_ROOM, keepFocus, PAIR_NAMES, REACTIONS, secs } from './kit.tsx'
 import { CardHead } from './review-answer.tsx'
 import type { ClipSt } from './clip-st.ts'
@@ -20,11 +22,13 @@ export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
     const views = r.views
     const drawable = views.some((v) => !isGallery(v) && !v.clip && !v.audio)
     const rows = rv.rows
+    // a draft card's history is no view of its own: its frames cycle in place over the live one
+    const history = r.wip ? views.find(isGallery) : undefined
     return (
         <div className="rv-views">
             {rv.headInViews ? <CardHead rv={rv} x={x} /> : null}
             <div className="rv-viewsbar">
-                {views.length > 1 && !rows ? <JumpList rv={rv} /> : <span />}
+                {views.length > 1 && !rows && !history ? <JumpList rv={rv} /> : <span />}
                 <span className="rv-viewsctl">
                     {asOptionsCard(rv) ? (
                         <span className="seg" title="the options as thin rows, one below the other, or every view full">
@@ -49,7 +53,9 @@ export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
             {rows ? (
                 <div className="rv-opts">{views.map((v, i) => <OptionRow key={`${r.id}#${i}`} rv={rv} x={x} v={v} i={i} />)}</div>
             ) : (
-                views.map((v, i) => <ViewBlock key={`${r.id}#${i}`} rv={rv} id={r.id} v={v} i={i} many={views.length > 1} />)
+                views.map((v, i) => (v === history ? null : (
+                    <ViewBlock key={`${r.id}#${i}`} rv={rv} id={r.id} v={v} i={i} many={views.length > (history ? 2 : 1)} {...(i === 0 && history && isGallery(history) ? { frames: history } : {})} />
+                )))
             )}
             {views.length === 0 ? <TextOnly x={x} /> : null}
         </div>
@@ -59,8 +65,9 @@ export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
 /** the open card may show as rows: a choice, or views that each play alone (the switch shows while it shows full) */
 const asOptionsCard = (rv: ReviewSt): boolean => rv.rows || rv.full[rv.open?.item.id ?? ''] === true
 
-/** one option of a choice, or one view of a group, as a thin row: its number, ▶ and the clock, its label, a strip that
- *  scrubs it, its stars and « pick » (a choice) or OK, fix, no (a group), ✎ his word, ⤢ the full view under it */
+/** one option of a choice, or one view of a group, as a row: its number, ▶ and the clock, its label, a strip that
+ *  scrubs it, its stars and « pick » (a choice) or OK, fix, no (a group), ✎ his word, ⤢ folds or unfolds the full view
+ *  under it (an image or a clip shows it from the start) */
 const OptionRow = observer(({ rv, x, v, i }: { rv: ReviewSt; x: ReviewItem; v: ReviewView; i: number }) => {
     const [word, setWord] = useState(false)
     const id = x.item.id
@@ -71,7 +78,7 @@ const OptionRow = observer(({ rv, x, v, i }: { rv: ReviewSt; x: ReviewItem; v: R
     const choice = rv.choice
     const picked = rv.draft.pick === i
     const sent = verdictOf(x)?.pick === i
-    const unfolded = rv.openRows[i] === true
+    const unfolded = rv.rowOpen(i)
     const file = playable ? ('video' in playable.files ? playable.files.video : 'audio' in playable.files ? playable.files.audio : '') : ''
     const duration = playable?.clip?.duration ?? playable?.audio?.duration ?? 0
     const showWord = word || (reaction?.comment ?? '') !== ''
@@ -92,7 +99,7 @@ const OptionRow = observer(({ rv, x, v, i }: { rv: ReviewSt; x: ReviewItem; v: R
                 ) : null}
                 {c && playable ? (
                     <Strip clip={c} duration={duration} wave={playable.audio ? rv.fileUrl(id, playable.audio.wave) : undefined} />
-                ) : (
+                ) : unfolded ? null : (
                     <span className="rv-optthumb img" onClick={() => rv.toggleRow(i)} title="the full view"><img src={rv.thumbUrl(x, thumbFileOf(v))} alt="" draggable={false} /></span>
                 )}
                 {c ? <span className="rv-mono rv-opttime">{clock(c.time)} / {clock(duration)}</span> : null}
@@ -112,8 +119,8 @@ const OptionRow = observer(({ rv, x, v, i }: { rv: ReviewSt; x: ReviewItem; v: R
             </div>
             {media?.note ? <div className="rv-optnote">{media.note}</div> : null}
             {showWord ? (
-                <textarea className="rv-word" rows={1} placeholder="a word on this one" value={reaction?.comment ?? ''} autoFocus={word && !reaction?.comment}
-                    onKeyDown={blurOnEscape} onChange={(e) => rv.setReactionComment(i, undefined, e.currentTarget.value)} />
+                <AutoText className="rv-word" placeholder="a word on this one" value={reaction?.comment ?? ''} autoFocus={word && !reaction?.comment}
+                    onKeyDown={blurOnEscape} onText={(t) => rv.setReactionComment(i, undefined, t)} />
             ) : null}
             {c && playable?.audio ? <SoundEl clip={c} src={rv.fileUrl(id, file)} /> : null}
             {unfolded ? (
@@ -223,8 +230,11 @@ const JumpList = observer(({ rv }: { rv: ReviewSt }) => {
     )
 })
 
-/** one view: its label, its reaction and zoom, its image, pair, clip or gallery, then his word on it */
-const ViewBlock = observer(({ rv, id, v, i, many }: { rv: ReviewSt; id: string; v: ReviewView; i: number; many: boolean }) => {
+/** one view: its label, its reaction and zoom, its image, pair, clip or gallery, then his word on it; a draft card's
+ *  live view carries its history's frames, one shown in its place */
+const ViewBlock = observer(({ rv, id, v: live, i, many, frames }: { rv: ReviewSt; id: string; v: ReviewView; i: number; many: boolean; frames?: GalleryView }) => {
+    const past = frames && rv.frame !== null ? frames.gallery[rv.frame] : undefined
+    const v: ReviewView = past && !isGallery(live) ? { ...live, files: { image: past.file }, size: past.size } : live
     const reaction = rv.reactionOf(i)
     const media = isGallery(v) ? null : v
     const zoom = rv.zoomOf(i)
@@ -243,9 +253,25 @@ const ViewBlock = observer(({ rv, id, v, i, many }: { rv: ReviewSt; id: string;
                         onClick={() => rv.setViewZoom(i, zoom === 'fit' ? '1' : 'fit')}>{zoom === 'fit' ? '100 %' : 'Fit'}</button>
                 ) : null}
             </div>
+            {frames ? <FrameSlider rv={rv} frames={frames} /> : null}
             {isGallery(v) ? <Gallery rv={rv} id={id} v={v} view={i} /> : <MediaBody rv={rv} id={id} v={v} i={i} zoom={zoom} />}
-            <textarea className="rv-word" rows={1} placeholder={isGallery(v) ? 'a word on these images' : 'a word on this image'} value={reaction?.comment ?? ''}
-                onKeyDown={blurOnEscape} onChange={(e) => rv.setReactionComment(i, undefined, e.currentTarget.value)} />
+            <AutoText className="rv-word" placeholder={isGallery(v) ? 'a word on these images' : 'a word on this image'} value={reaction?.comment ?? ''}
+                onKeyDown={blurOnEscape} onText={(t) => rv.setReactionComment(i, undefined, t)} />
+        </div>
+    )
+})
+
+/** a draft card's frames over its live view: a slider and two arrows cycle them in place, the live one at the right end */
+const FrameSlider = observer(({ rv, frames }: { rv: ReviewSt; frames: GalleryView }) => {
+    const last = frames.gallery.length
+    const at = rv.frame ?? last
+    const go = (f: number): void => rv.setFrame(f >= last ? null : Math.max(0, f))
+    return (
+        <div className="rv-frames">
+            <button title="the frame before" disabled={at === 0} onMouseDown={keepFocus} onClick={() => go(at - 1)}>‹</button>
+            <input type="range" min={0} max={last} step={1} value={at} aria-label="the draft's frames" onChange={(e) => go(Number(e.currentTarget.value))} onMouseUp={(e) => e.currentTarget.blur()} />
+            <button title="the frame after" disabled={at === last} onMouseDown={keepFocus} onClick={() => go(at + 1)}>›</button>
+            <span className="rv-dim rv-small">{at === last ? 'now' : (frames.gallery[at]?.label ?? `frame ${at + 1}`)}</span>
         </div>
     )
 })
@@ -285,8 +311,8 @@ const Gallery = observer(({ rv, id, v, view }: { rv: ReviewSt; id: string; v: Ga
                     </div>
                     <div className="rv-tilelabel" title={t.label}>{t.label}</div>
                     <ReactionToggles rv={rv} view={view} tile={k} small />
-                    <textarea className="rv-word" rows={1} placeholder="a word" value={r?.comment ?? ''} onKeyDown={blurOnEscape}
-                        onChange={(e) => rv.setReactionComment(view, k, e.currentTarget.value)} />
+                    <AutoText className="rv-word" placeholder="a word" value={r?.comment ?? ''} onKeyDown={blurOnEscape}
+                        onText={(t) => rv.setReactionComment(view, k, t)} />
                 </div>
             )
         })}
@@ -309,7 +335,8 @@ const MediaBody = observer(({ rv, id, v, i, zoom }: { rv: ReviewSt; id: string;
         return (
             <div style={scroll}>
                 <div style={{ width: scale ? `${v.size.w * scale}px` : `min(100%, calc((100vh - ${room}px) * ${ratio}))`, margin: '0 auto' }}>
-                    <Compare c={rv.compare} base={rv.fileUrl(id, name)} mod={undefined} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={undefined} view={i} />} />
+                    <Compare c={rv.compare} base={rv.fileUrl(id, name)} mod={undefined} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={undefined} view={i} />}
+                        over={() => <RectNote rv={rv} view={i} sides={[undefined]} />} />
                     {bar}
                     <Downloads rv={rv} id={id} files={[{ file: name }]} />
                 </div>
@@ -334,7 +361,8 @@ const MediaBody = observer(({ rv, id, v, i, zoom }: { rv: ReviewSt; id: string;
             <div style={scroll}>
                 <div className="rv-pairgrid" style={{ width: scale ? `${v.size.w * scale * cols + 8 * (cols - 1)}px` : fitW, gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
                     <Compare c={c} base={before} mod={after} names={PAIR_NAMES} aspect={aspect}
-                        draw={(s) => <Marks rv={rv} src={s} side={drawnSide(c.mode, s === before ? 'before' : 'after')} view={i} />} />
+                        draw={(s) => <Marks rv={rv} src={s} side={drawnSide(c.mode, s === before ? 'before' : 'after')} view={i} />}
+                        over={(srcs) => <RectNote rv={rv} view={i} sides={srcs.map((s) => drawnSide(c.mode, s === before ? 'before' : 'after'))} />} />
                 </div>
             </div>
             {bar ? <div style={{ width: fitW, margin: '0 auto' }}>{bar}</div> : null}
@@ -351,7 +379,7 @@ const SoundBody = ({ rv, id, v }: { rv: ReviewSt; id: string; v: MediaView }) =>
     if (!a) return null
     const rows = isPair(f) ? [{ label: 'before', file: f.before, wave: a.waveBefore ?? a.wave }, { label: 'after', file: f.after, wave: a.wave }] : [{ label: '', file: 'audio' in f ? f.audio : '', wave: a.wave }]
     return (
-        <div className="rv-sound">
+        <div className="rv-soundview">
             {rows.map((r) => (
                 <div key={r.file} className="rv-soundrow">
                     {r.label ? <div className="rv-dim">{r.label}</div> : null}
@@ -412,9 +440,11 @@ const PhonePair = observer(({ rv, view, bar, before, after, aspect, size, scale
             <div style={scale ? { overflow: 'auto', maxHeight: '70vh' } : undefined}>
                 <div style={{ width: scale ? `${size.w * scale}px` : '100%' }}>
                     {side === 'swipe' ? (
-                        <Compare c={c} base={before} mod={after} names={PAIR_NAMES} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={s === before ? 'before' : 'after'} view={view} />} />
+                        <Compare c={c} base={before} mod={after} names={PAIR_NAMES} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={s === before ? 'before' : 'after'} view={view} />}
+                            over={(srcs) => <RectNote rv={rv} view={view} sides={srcs.map((s) => (s === before ? 'before' : 'after'))} />} />
                     ) : (
-                        <Compare key={side} c={c} base={one} mod={undefined} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={side} view={view} />} />
+                        <Compare key={side} c={c} base={one} mod={undefined} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={side} view={view} />}
+                            over={() => <RectNote rv={rv} view={view} sides={[side]} />} />
                     )}
                     {bar}
                 </div>
@@ -458,27 +488,28 @@ function track(move: (e: PointerEvent) => void): void {
 }
 
 /** THE pair: side by side, the curtain clipping both images, the after over the before as an onion skin, or the
- *  after alone (the before while the pointer is over it). One image alone when `mod` is undefined */
-const Compare = observer(({ c, base, mod, names, aspect, draw }: { c: CompareSt; base: string; mod: string | undefined; names?: { base: string; mod: string }; aspect: string; draw: (src: string) => ReactNode }) => {
+ *  after alone (the before while the pointer is over it). One image alone when `mod` is undefined. `over` draws what
+ *  sits over a frame unclipped (the picked rectangle's note box), given the images that frame shows */
+const Compare = observer(({ c, base, mod, names, aspect, draw, over }: { c: CompareSt; base: string; mod: string | undefined; names?: { base: string; mod: string }; aspect: string; draw: (src: string) => ReactNode; over?: (srcs: string[]) => ReactNode }) => {
     const [peek, setPeek] = useState(false)
-    if (mod === undefined) return <Cell aspect={aspect} caption={null}><div className="rv-fill">{draw(base)}</div></Cell>
+    if (mod === undefined) return <Cell aspect={aspect} caption={null} over={over?.([base])}><div className="rv-fill">{draw(base)}</div></Cell>
     const n = names ?? PAIR_NAMES
     if (c.mode === 'side')
         return (
             <>
-                <Cell aspect={aspect} caption={n.base}><div className="rv-fill">{draw(base)}</div></Cell>
-                <Cell aspect={aspect} caption={n.mod} modCap><div className="rv-fill">{draw(mod)}</div></Cell>
+                <Cell aspect={aspect} caption={n.base} over={over?.([base])}><div className="rv-fill">{draw(base)}</div></Cell>
+                <Cell aspect={aspect} caption={n.mod} modCap over={over?.([mod])}><div className="rv-fill">{draw(mod)}</div></Cell>
             </>
         )
     if (c.mode === 'mod')
         return (
-            <Cell aspect={aspect} caption={peek ? n.base : n.mod} modCap={!peek} onPeek={setPeek}>
+            <Cell aspect={aspect} caption={peek ? n.base : n.mod} modCap={!peek} onPeek={setPeek} over={over?.([peek ? base : mod])}>
                 <div className="rv-fill">{draw(peek ? base : mod)}</div>
             </Cell>
         )
     const pct = Math.round(c.split * 100)
     return (
-        <Cell aspect={aspect} caption={<>{n.base} {c.mode === 'swipe' ? '◀ ▶' : '+'} <span className="rv-modcap">{n.mod}</span></>} swipe={c.mode === 'swipe' ? c : undefined}>
+        <Cell aspect={aspect} caption={<>{n.base} {c.mode === 'swipe' ? '◀ ▶' : '+'} <span className="rv-modcap">{n.mod}</span></>} swipe={c.mode === 'swipe' ? c : undefined} over={over?.([base, mod])}>
             <div className="rv-fill" style={c.mode === 'swipe' ? { clipPath: `inset(0 ${100 - pct}% 0 0)` } : undefined}>{draw(base)}</div>
             <div className="rv-fill" style={c.mode === 'swipe' ? { clipPath: `inset(0 0 0 ${pct}%)` } : { opacity: c.opacity }}>{draw(mod)}</div>
             {c.mode === 'swipe' ? <div className="rv-curtain" style={{ left: `${pct}%` }} /> : null}
@@ -486,8 +517,8 @@ const Compare = observer(({ c, base, mod, names, aspect, draw }: { c: CompareSt;
     )
 })
 
-/** one frame and its caption; the curtain's line follows the pointer */
-const Cell = ({ aspect, caption, modCap, swipe, onPeek, children }: { aspect: string; caption: ReactNode; modCap?: boolean; swipe?: CompareSt | undefined; onPeek?: (on: boolean) => void; children: ReactNode }) => {
+/** one frame and its caption; the curtain's line follows the pointer; `over` sits on the frame, free of its clip */
+const Cell = ({ aspect, caption, modCap, swipe, onPeek, over, children }: { aspect: string; caption: ReactNode; modCap?: boolean; swipe?: CompareSt | undefined; onPeek?: (on: boolean) => void; over?: ReactNode; children: ReactNode }) => {
     const frame = useRef<HTMLDivElement>(null)
     const down = (e: React.PointerEvent): void => {
         const el = frame.current
@@ -502,9 +533,12 @@ const Cell = ({ aspect, caption, modCap, swipe, onPeek, children }: { aspect: st
     }
     return (
         <div className="rv-cell">
-            <div ref={frame} className={`rv-frame${swipe ? ' swipe' : ''}`} style={{ aspectRatio: aspect }} onPointerDown={down}
-                onMouseEnter={() => onPeek?.(true)} onMouseLeave={() => onPeek?.(false)}>
-                {children}
+            <div className="rv-framebox">
+                <div ref={frame} className={`rv-frame${swipe ? ' swipe' : ''}`} style={{ aspectRatio: aspect }} onPointerDown={down}
+                    onMouseEnter={() => onPeek?.(true)} onMouseLeave={() => onPeek?.(false)}>
+                    {children}
+                </div>
+                {over ? <div className="rv-over">{over}</div> : null}
             </div>
             {caption != null ? <div className={`rv-caption${modCap ? ' mod' : ''}`}>{caption}</div> : null}
         </div>
@@ -578,7 +612,7 @@ const Marks = observer(({ rv, src, side, view }: { rv: ReviewSt; src: string; si
             {clip ? <ClipVideo key={src} clip={c} src={src} /> : <img src={src} alt="" draggable={false} className="rv-markimg" />}
             {shown && rings.length > 0 ? <Rings marks={rings} w={shown.size.w} h={shown.size.h} /> : null}
             {rects.map(([r, i]) => (
-                <RectMark key={i} r={r} n={i + 1} on={rv.rect === i} faint={!onIts(r)} at={clip && r.t !== undefined ? secs(r.t) : undefined} pick={() => rv.pickRect(i)} />
+                <RectMark key={i} r={r} n={i + 1} on={rv.rect === i} faint={!onIts(r)} at={clip && r.t !== undefined ? secs(r.t) : undefined} pick={() => rv.pickRect(i, true)} />
             ))}
             {drag ? <div className="rv-drag" style={pct(box(drag))} /> : null}
         </div>
@@ -600,11 +634,46 @@ const Rings = ({ marks, w, h }: { marks: readonly ReviewMark[]; w: number; h: nu
 /** a rectangle of his; on a clip, faint and dashed away from its frame, its time on its number */
 const RectMark = ({ r, n, on, faint, at, pick }: { r: Rect; n: number; on: boolean; faint: boolean; at: string | undefined; pick: () => void }) => (
     <div className={`rv-rect${on ? ' on' : ''}${faint ? ' faint' : ''}`} style={pct(r)} title={r.comment || `rectangle ${n}`}
-        onPointerDown={(e) => { e.stopPropagation(); pick() }}>
+        onPointerDown={(e) => { e.stopPropagation(); pick() }} onMouseDown={keepFocus}>
         <span className="rv-rectn">{n}{at ? ` · ${at}` : ''}</span>
     </div>
 )
 
+/** the picked rectangle's note box, beside it on the image: under it, or over it when it sits low, focused once drawn
+ *  or clicked. Enter or Escape closes it (the rectangle stays), Shift Enter is a new line; `sides` are the sides the
+ *  frame shows */
+const RectNote = observer(({ rv, view, sides }: { rv: ReviewSt; view: number; sides: readonly (Side | undefined)[] }) => {
+    const box = useRef<HTMLTextAreaElement | null>(null)
+    const i = rv.rect
+    const r = i === null ? undefined : rv.draft.rects[i]
+    const here = i !== null && r !== undefined && (r.view ?? 0) === view && sides.includes(r.side)
+    const focus = here && rv.noteFocus === i
+    useEffect(() => {
+        if (!focus || box.current === null) return
+        box.current.focus()
+        rv.noteFocused()
+    }, [focus, rv])
+    if (!here) return null
+    const below = r.y + r.h <= NOTE_LOW || r.y < 1 - NOTE_LOW
+    const place = below ? { top: `${(r.y + r.h) * 100}%` } : { bottom: `${(1 - r.y) * 100}%` }
+    return (
+        <div className={`rv-note${below ? ' below' : ' above'}`} style={{ ...place, ['--nx' as string]: `${r.x * 100}%` }} onPointerDown={(e) => e.stopPropagation()}>
+            <span className="rv-noten">{i + 1}{r.t !== undefined ? ` · ${secs(r.t)}` : ''}</span>
+            <AutoText el={(t) => (box.current = t)} placeholder="what is wrong here · Enter closes" value={r.comment}
+                onText={(t) => rv.setRectComment(i, t)}
+                onKeyDown={(e) => {
+                    if ((e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) || e.key === 'Escape') {
+                        e.preventDefault()
+                        rv.pickRect(null)
+                    }
+                }} />
+            <button className="ghost rv-x" title="delete this rectangle" aria-label="delete this rectangle" onMouseDown={keepFocus} onClick={() => rv.removeRect(i)}>✕</button>
+        </div>
+    )
+})
+/** a rectangle whose bottom is lower than this share of the image opens its note over it, when there is room above */
+const NOTE_LOW = 0.78
+
 // ── a clip ──
 
 /** one video of the open view, driven by the view's one clock; muted until the sound button, inline; looping, or at its

package/src/serve/hub-app/review/trailer-page.tsx

@@ -4,6 +4,7 @@
 import { observer } from 'mobx-react-lite'
 import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react'
 import { Group, Panel, Separator } from 'react-resizable-panels'
+import { AutoText } from '../auto-text.tsx'
 import { clock, cutsByRecent, shotAt, type CutInfo, type TrailerNote } from '../../../review/trailer-model.ts'
 import { editorHref } from '../check-words.ts'
 import { renderMd } from '../md.ts'
@@ -271,7 +272,7 @@ const DraftBox = observer(({ tr }: { tr: TrailerSt }) => {
                     <span className="tr-dim tr-small">click the image to pin a point</span>
                 )}
             </div>
-            <textarea autoFocus rows={3} placeholder="What is wrong, what you want instead…" value={d.text} onChange={(e) => tr.setDraftText(e.currentTarget.value)}
+            <AutoText autoFocus rows={3} placeholder="What is wrong, what you want instead…" value={d.text} onText={(t) => tr.setDraftText(t)}
                 onKeyDown={(e) => {
                     if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
                         e.preventDefault()
@@ -362,7 +363,7 @@ const NoteCard = observer(({ tr, n: p }: { tr: TrailerSt; n: PlacedNote }) => {
             {on ? <Still tr={tr} n={n} w="100%" /> : null}
             {editing ? (
                 <div className="tr-edit">
-                    <textarea autoFocus rows={3} value={editing.text} onChange={(e) => tr.setEditText(e.currentTarget.value)} onKeyDown={enterSaves(() => void tr.saveEdit(), () => tr.cancelEdit())} />
+                    <AutoText autoFocus rows={3} value={editing.text} onText={(t) => tr.setEditText(t)} onKeyDown={enterSaves(() => void tr.saveEdit(), () => tr.cancelEdit())} />
                     <div className="tr-dim tr-small">Enter saves · Escape drops it · on its frame, a click moves the pin</div>
                 </div>
             ) : null}
@@ -374,8 +375,8 @@ const NoteCard = observer(({ tr, n: p }: { tr: TrailerSt; n: PlacedNote }) => {
             ) : null}
             {closing ? (
                 <div className="tr-edit">
-                    <textarea autoFocus rows={2} placeholder={closing.state === 'done' ? 'The commit, or what was done (optional)' : 'Why (optional)'} value={closing.reply}
-                        onChange={(e) => tr.setReply(e.currentTarget.value)} onKeyDown={enterSaves(() => void tr.confirmClose(), () => tr.cancelClose())} />
+                    <AutoText autoFocus rows={2} placeholder={closing.state === 'done' ? 'The commit, or what was done (optional)' : 'Why (optional)'} value={closing.reply}
+                        onText={(t) => tr.setReply(t)} onKeyDown={enterSaves(() => void tr.confirmClose(), () => tr.cancelClose())} />
                     <div className="tr-draftbtns">
                         <button onClick={() => tr.cancelClose()}>Cancel</button>
                         <button className="primary" onClick={() => void tr.confirmClose()}>{closing.state === 'done' ? 'Mark done' : 'Not doing it'}</button>

package/src/serve/hub-app/review.css

@@ -120,6 +120,9 @@
 .rv-raisedimg{display:block;max-width:100%;max-height:320px;margin-top:var(--s2);border-radius:4px}
 .rv-pairgrid{display:grid;gap:var(--s2)}
 .rv-cell{display:flex;flex-direction:column;align-items:center;gap:var(--s0);min-width:0}
+/* the frame's box: what sits over the frame free of its clip (the note box) shares its size */
+.rv-framebox{position:relative;width:100%}
+.rv-over{position:absolute;inset:0;z-index:4;pointer-events:none}
 .rv-frame{position:relative;width:100%;max-width:100%;border-radius:4px;border:1px solid var(--line);overflow:hidden;
  background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/16px 16px}
 .rv-frame.swipe{cursor:ew-resize;touch-action:none}
@@ -142,6 +145,13 @@
 .rv-rectn{position:absolute;left:-2px;top:-2px;transform:translateY(-100%);padding:0 var(--s1);border-radius:3px;background:var(--warn);color:var(--bg);font-size:11px;font-weight:800;line-height:16px;white-space:nowrap}
 .rv-rect.on .rv-rectn{background:var(--blue)}
 .rv-drag{position:absolute;border:2px dashed var(--warn)}
+/* the picked rectangle's note box, in the picked rectangle's blue: under it, or over it (clearing its number) */
+.rv-note{position:absolute;left:clamp(0px,var(--nx),calc(100% - min(300px,100%)));width:min(300px,100%);pointer-events:auto;display:flex;gap:var(--s1);align-items:flex-start;
+ padding:var(--s1);border-radius:6px;border:2px solid var(--blue);background:var(--panel);box-shadow:0 2px 10px var(--shadow)}
+.rv-note.below{margin-top:var(--s1)}
+.rv-note.above{margin-bottom:var(--s4)}
+.rv-noten{flex:none;padding:0 var(--s1);border-radius:3px;background:var(--blue);color:var(--bg);font-size:11px;font-weight:800;line-height:18px;white-space:nowrap}
+.rv-note textarea{flex:1;min-width:0}
 .rv-downloads{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s1)}
 .rv-dl{font-size:11.5px;text-decoration:none}
 .rv-gallery{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:flex-start}
@@ -153,8 +163,12 @@
 .rv-tileimg img{display:block;width:100%;height:100%;object-fit:contain}
 .rv-tilelabel{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .rv-clipbar{display:flex;gap:var(--s1);align-items:center;margin-top:var(--s2)}
+.rv-frames{display:flex;gap:var(--s1);align-items:center;margin-bottom:var(--s2)}
+.rv-frames input{flex:1;min-width:60px}
+.rv-frames button{padding:0 var(--s2);line-height:22px}
 .rv-clipbar button{padding:0 var(--s2);line-height:22px}
 .rv-scrub{flex:1;min-width:60px}
+.rv-clipbar .rv-mono{flex:none;white-space:nowrap}
 .rv-sound{display:inline-flex;align-items:center;gap:var(--s1)}
 .rv-sound button{padding:0 var(--s1);line-height:22px}
 .rv-sound input{width:72px}
@@ -223,7 +237,7 @@
 .rv-linkedtitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
 .rv-outgoing,.rv-messages{display:flex;flex-direction:column;gap:var(--s1)}
 .rv-outrow{display:flex;gap:var(--s1);align-items:flex-start}
-.rv-outrow textarea{flex:1;min-height:44px}
+.rv-outrow textarea{flex:1}
 .rv-outbadge{flex:none;max-width:170px;margin-top:var(--s0);font-size:11px;padding:0 var(--s2);line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--tone,var(--ink));border-color:color-mix(in srgb,var(--tone,var(--line)) 50%,var(--line))}
 .rv-outbadge.rect{--tone:var(--warn)}
@@ -251,6 +265,8 @@
 .rv-verdictbar .rv-verdict{flex:1;text-align:center;font-size:14px;padding:var(--s2) var(--s1);color:var(--tone)}
 .rv-verdictbar .rv-verdict.chosen{color:var(--bg)}
 .rv-phone .rv-views{gap:var(--s3)}
+/* the views' labels take the phone's whole width, the zoom under them */
+.rv-phone .rv-jumps{flex:1 1 100%}
 .rv-phone .rv-toast{top:var(--s4);bottom:auto}
 /* a row on a phone: ▶, the label and the time on one line, the strip and the acts under them */
 .rv-phone .rv-optrow{flex-wrap:wrap;row-gap:var(--s1)}
@@ -261,6 +277,8 @@
 .rv-phone .rv-stars button{font-size:22px;padding:0 var(--s1)}
 .rv-phone .rv-optplay{width:40px;height:34px}
 .rv-phone .rv-optnote,.rv-phone .rv-opt .rv-word{margin-left:0;width:100%}
+/* a phone zooms the page into a field whose text is under 16px: the field takes 16px instead */
+.rv-phone textarea,.tr-phone textarea{font-size:16px}
 
 /* ── the trailer page ── */
 .tr-cuts{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3)}
@@ -385,5 +403,5 @@
 .rv-parttext{font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
 .rv-anim select{font-size:12px}
 /* a sound view (review-views.tsx SoundBody): its waveform over the player, a row a side on a pair */
-.rv-sound{display:flex;flex-direction:column;gap:var(--s2)}
+.rv-soundview{display:flex;flex-direction:column;gap:var(--s2)}
 .rv-soundrow{display:flex;flex-direction:column;gap:var(--s1);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:var(--s2)}

package/src/trailer/sound/comfy.ts

@@ -12,6 +12,7 @@ export function comfyModule(comfy: string | undefined, name: string): string {
 const COMFY_TIMEOUT_S = 15 * 60
 
 export async function comfyRun(module: string, vars: Record<string, string | number | boolean | undefined>, out: string): Promise<void> {
+    if (Bun.which('comfy-ts') == null) throw new Error(`comfy-ts is not on PATH, and ${module} is a comfy-ts module. Install it: bun add -g comfy-ts`)
     const args = ['comfy-ts', 'run', module]
     for (const [k, v] of Object.entries(vars)) if (v !== undefined) args.push(`--${k}`, String(v))
     args.push('--out', out, '--json')