rvlib-shipkit 2.1.1 → 2.3.0

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

@@ -0,0 +1,207 @@
+// the trailer page's timeline: the sections, the shots, the captions and the notes of the render on screen, a
+// playhead, a click or a drag to seek, a hover with the shot's frame from the contact strip; then every shot as a card
+import { observer } from 'mobx-react-lite'
+import { useEffect, useRef, useState, type CSSProperties, type RefObject } from 'react'
+import { clock, shotAt, type ShotSpan, type Timeline } from '../../../review/trailer-model.ts'
+import { captionText, type PlacedNote, type TrailerSt } from './trailer-st.ts'
+
+const RULER = 18
+const SECTIONS = 22
+const SHOTS = 46
+const CAPTIONS = 22
+const GAP = 3
+const HEIGHT = RULER + SECTIONS + SHOTS + CAPTIONS + GAP * 3
+const ROW = { ruler: 0, sections: RULER + GAP, shots: RULER + SECTIONS + GAP * 2, captions: RULER + SECTIONS + SHOTS + GAP * 3 }
+
+/** a section's hue, one of the page's kind hues by its order: the shot blocks of a section share it */
+export const hueOf = (tl: Timeline, section: string | null): string => {
+    const i = section === null ? -1 : tl.sections.findIndex((s) => s.name === section)
+    return i < 0 ? 'hue-none' : `hue-k${(i % 6) + 1}`
+}
+
+/** a shot's frame from the render's contact strip, `w` pixels wide; a plain tile when there is no strip */
+export const Thumb = observer(({ st, index, w, style }: { st: TrailerSt; index: number; w: number; style?: CSSProperties }) => {
+    const s = st.shown
+    const url = st.stripUrl
+    const g = s?.strip
+    const h = Math.round((w * (s?.timeline.size[1] ?? 9)) / (s?.timeline.size[0] ?? 16))
+    const base: CSSProperties = { width: w, height: h, ...style }
+    if (!url || !g || !s) return <div className="tr-thumb" style={base} />
+    const n = s.timeline.shots.length
+    const rows = Math.ceil(n / g.cols)
+    const k = w / g.tileW
+    const col = index % g.cols
+    const row = Math.floor(index / g.cols)
+    return (
+        <div className="tr-thumb" style={{
+            ...base,
+            backgroundImage: `url(${url})`,
+            backgroundSize: `${(g.cols * g.tileW + (g.cols - 1) * g.pad) * k}px ${(rows * g.tileH + (rows - 1) * g.pad) * k}px`,
+            backgroundPosition: `${-col * (g.tileW + g.pad) * k}px ${-row * (g.tileH + g.pad) * k}px`,
+        }} />
+    )
+})
+
+/** the ruler's step: the smallest that leaves room for a label */
+function stepOf(pps: number): number {
+    for (const s of [0.5, 1, 2, 5, 10, 15, 30, 60]) if (s * pps >= 56) return s
+    return 120
+}
+
+export const TrailerTimeline = observer(({ st }: { st: TrailerSt }) => {
+    const tl = st.timeline
+    const scroller = useRef<HTMLDivElement>(null)
+    const [width, setWidth] = useState(800)
+    const [hover, setHover] = useState<{ t: number; x: number } | null>(null)
+    useEffect(() => {
+        const el = scroller.current
+        if (!el) return
+        const ro = new ResizeObserver(() => setWidth(el.clientWidth))
+        ro.observe(el)
+        setWidth(el.clientWidth)
+        return () => ro.disconnect()
+    }, [])
+    // a zoom keeps the playhead where the eye is
+    useEffect(() => {
+        const el = scroller.current
+        if (!el || !tl) return
+        el.scrollLeft = Math.max(0, (st.time / tl.total) * width * st.zoom - width / 2)
+    }, [st.zoom, width, tl, st])
+    if (!tl) return null
+    const W = Math.max(width, width * st.zoom)
+    const xOf = (t: number): number => (t / tl.total) * W
+    const tOf = (clientX: number): number => {
+        const el = scroller.current
+        if (!el) return 0
+        const r = el.getBoundingClientRect()
+        return Math.max(0, Math.min(tl.total, ((clientX - r.left + el.scrollLeft) / W) * tl.total))
+    }
+    const step = stepOf(W / tl.total)
+    const ticks: number[] = []
+    for (let t = 0; t <= tl.total + 1e-6; t += step) ticks.push(t)
+    const cur = st.shot
+    const lit = new Set(st.captionsKey.split('\n'))
+    return (
+        <div className="tr-timelinewrap">
+            <div ref={scroller} className="tr-timeline"
+                onPointerDown={(e) => {
+                    if ((e.target as Element).closest('[data-note]')) return
+                    e.currentTarget.setPointerCapture(e.pointerId)
+                    st.seekPaused(tOf(e.clientX))
+                }}
+                onPointerMove={(e) => {
+                    const t = tOf(e.clientX)
+                    if (e.buttons & 1 && e.currentTarget.hasPointerCapture(e.pointerId)) st.seekPaused(t)
+                    setHover({ t, x: e.clientX })
+                }}
+                onPointerLeave={() => setHover(null)}>
+                <div className="tr-track" style={{ width: W, height: HEIGHT }}>
+                    {ticks.map((t) => (
+                        <div key={t} className="tr-tick" style={{ left: xOf(t), top: ROW.ruler, height: HEIGHT }}>
+                            <span>{t >= 60 ? `${Math.floor(t / 60)}:${String(Math.floor(t % 60)).padStart(2, '0')}` : `${t}s`}</span>
+                        </div>
+                    ))}
+                    {tl.sections.map((s) => (
+                        <div key={`${s.name}@${s.start}`} className={`tr-section ${hueOf(tl, s.name)}${st.section?.name === s.name ? ' on' : ''}`} title={`${s.name} · ${clock(s.start)} → ${clock(s.end)}`}
+                            style={{ left: xOf(s.start) + 1, width: Math.max(2, xOf(s.end) - xOf(s.start) - 2), top: ROW.sections, height: SECTIONS, lineHeight: `${SECTIONS}px` }}>
+                            {s.name}
+                        </div>
+                    ))}
+                    {tl.shots.map((s, i) => <ShotBlock key={`${s.name}@${i}`} s={s} i={i} x={xOf(s.start)} w={xOf(s.end) - xOf(s.start)} on={cur === s} hue={hueOf(tl, s.section)} />)}
+                    {tl.shots.flatMap((s) =>
+                        s.captions.map((c, j) => (
+                            <div key={`${s.name}-${j}`} className={`tr-caption${lit.has(`${c.start}|${c.text}`) ? ' on' : ''}`} title={captionText(c)}
+                                style={{ left: xOf(c.start), width: Math.max(2, xOf(Math.min(c.end, tl.total)) - xOf(c.start)), top: ROW.captions, height: CAPTIONS, lineHeight: `${CAPTIONS}px` }}>
+                                {captionText(c).replaceAll('\n', ' ')}
+                            </div>
+                        )),
+                    )}
+                    {st.here.map((n) => <NotePin key={n.note.id} st={st} n={n} x={xOf(n.at ?? 0)} />)}
+                    {st.draft ? <div className="tr-draftmark" style={{ left: xOf(st.draft.time) - 1, height: HEIGHT }} /> : null}
+                    <Playhead st={st} W={W} total={tl.total} scroller={scroller} />
+                </div>
+            </div>
+            {hover ? <HoverCard st={st} t={hover.t} x={hover.x} scroller={scroller} /> : null}
+        </div>
+    )
+})
+
+const ShotBlock = ({ s, i, x, w, on, hue }: { s: ShotSpan; i: number; x: number; w: number; on: boolean; hue: string }) => (
+    <div className={`tr-shot ${hue}${on ? ' on' : ''}${i % 2 ? ' odd' : ''}`} title={`${s.name} · ${clock(s.start)} · ${s.length} s`}
+        style={{ left: x + 0.5, width: Math.max(1, w - 1), top: ROW.shots, height: SHOTS }}>
+        {w > 26 ? s.name : ''}
+        {w > 44 ? <div className="tr-shottime">{clock(s.start)}</div> : null}
+    </div>
+)
+
+const NotePin = observer(({ st, n, x }: { st: TrailerSt; n: PlacedNote; x: number }) => {
+    const on = st.selected === n.note.id
+    return (
+        <>
+            <div className={`tr-noteline ns-${n.note.state}${on ? ' on' : ''}`} style={{ left: x, top: ROW.sections, height: HEIGHT - ROW.sections }} />
+            <div data-note className={`tr-notepin ns-${n.note.state}${on ? ' on' : ''}`} title={`#${n.note.n} · ${n.note.text}`} style={{ left: x - 8 }}
+                onPointerDown={(e) => e.stopPropagation()} onClick={() => st.goTo(n)} />
+        </>
+    )
+})
+
+/** the playhead; while it plays, the timeline scrolls to keep it in view */
+const Playhead = observer(({ st, W, total, scroller }: { st: TrailerSt; W: number; total: number; scroller: RefObject<HTMLDivElement | null> }) => {
+    const x = (st.time / total) * W
+    useEffect(() => {
+        const el = scroller.current
+        if (!el) return
+        if (x < el.scrollLeft + 8 || x > el.scrollLeft + el.clientWidth - 24) el.scrollLeft = Math.max(0, x - el.clientWidth * 0.2)
+    }, [x, scroller])
+    return <div className="tr-playhead" style={{ left: x - 1, height: HEIGHT }}><div className="tr-playknob" /></div>
+})
+
+/** under the mouse: the shot's frame, its name, the time */
+const HoverCard = observer(({ st, t, x, scroller }: { st: TrailerSt; t: number; x: number; scroller: RefObject<HTMLDivElement | null> }) => {
+    const tl = st.timeline
+    if (!tl) return null
+    const s = shotAt(tl, t)
+    if (!s) return null
+    const i = tl.shots.indexOf(s)
+    const top = scroller.current?.getBoundingClientRect().top ?? 0
+    return (
+        <div className="tr-hover" style={{ left: Math.max(8, Math.min(window.innerWidth - 216, x - 104)), bottom: window.innerHeight - (top - 8) }}>
+            <Thumb st={st} index={i} w={192} />
+            <div className="tr-hoverrow"><b>{s.name}</b><span>{clock(t)}</span></div>
+            <div className="tr-dim">{s.section ?? 'opening'} · shot {i + 1}/{tl.shots.length} · {s.length} s</div>
+        </div>
+    )
+})
+
+/** every shot as a card: its frame, its name, its start and length, its open notes; the one on screen lit and kept in
+ *  view */
+export const ShotCards = observer(({ st }: { st: TrailerSt }) => {
+    const tl = st.timeline
+    const box = useRef<HTMLDivElement>(null)
+    const cur = st.shotIndex
+    useEffect(() => {
+        const el = box.current
+        const card = el?.children[cur] as HTMLElement | undefined
+        if (!el || !card) return
+        const left = card.offsetLeft - el.offsetLeft
+        if (left < el.scrollLeft || left + card.offsetWidth > el.scrollLeft + el.clientWidth) el.scrollTo({ left: left - el.clientWidth / 2 + card.offsetWidth / 2, behavior: 'smooth' })
+    }, [cur])
+    if (!tl) return null
+    const counts = new Map<string, number>()
+    for (const n of st.here) if (n.note.state === 'open') counts.set(n.note.shot, (counts.get(n.note.shot) ?? 0) + 1)
+    return (
+        <div ref={box} className="tr-shotcards">
+            {tl.shots.map((s, i) => {
+                const n = counts.get(s.name) ?? 0
+                return (
+                    <button type="button" key={`${s.name}@${i}`} className={`tr-shotcard ${hueOf(tl, s.section)}${i === cur ? ' on' : ''}`} onMouseDown={(e) => e.preventDefault()} onClick={() => st.seek(s.start)}>
+                        <Thumb st={st} index={i} w={136} />
+                        <div className="tr-shotname"><span className="tr-dim">{i + 1} </span>{s.name}</div>
+                        <div className="tr-dim tr-small">{clock(s.start)} · {s.length} s{s.captions.length > 0 ? ` · ${s.captions.length} title${s.captions.length > 1 ? 's' : ''}` : ''}</div>
+                        {n > 0 ? <span className="tr-shotnotes">{n}</span> : null}
+                    </button>
+                )
+            })}
+        </div>
+    )
+})

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

@@ -0,0 +1,329 @@
+/* the review page and the trailer page (hub-app/review/): pkm-multi's Revue and Trailer tabs on the hub's tokens.
+   A status, a reaction, a note state and a section each set --tone or --hue, and the parts read it, so no rule here
+   writes a colour (tests/hub-css-invariants.test.ts) */
+.st-pending{--tone:var(--blue)}
+.st-approved,.re-approved{--tone:var(--ok)}
+.st-approved-with-fix,.re-approved-with-fix,.st-raised{--tone:var(--warn)}
+.st-rejected,.re-rejected{--tone:var(--red)}
+.st-archived,.st-superseded,.st-withdrawn,.st-wontfix,.st-rated{--tone:var(--dim)}
+.st-wip{--tone:var(--k2)}
+.st-fixed{--tone:var(--k3)}
+.ns-open{--tone:var(--warn)}
+.ns-done{--tone:var(--ok)}
+.ns-wontfix{--tone:var(--dim)}
+.hue-k1{--hue:var(--k1)}.hue-k2{--hue:var(--k2)}.hue-k3{--hue:var(--k3)}.hue-k4{--hue:var(--k4)}.hue-k5{--hue:var(--k5)}.hue-k6{--hue:var(--k6)}
+.hue-none{--hue:var(--dim)}
+
+/* ── the three columns ── */
+.rv-cols{flex:1;min-height:0}
+.rv-pane{height:100%;min-width:0;display:flex;flex-direction:column}
+.rv-scroll{flex:1;min-height:0;overflow-y:auto}
+.rv-dim,.tr-dim{color:var(--dim)}
+.rv-small,.tr-small{font-size:11px}
+.rv-mono,.tr-mono{font:11.5px ui-monospace,Menlo,monospace}
+.rv-pre{white-space:pre-wrap;overflow-wrap:anywhere}
+.rv-center{text-align:center}
+.rv-empty{padding:var(--s3);color:var(--dim);font-size:12.5px;display:flex;gap:var(--s2);align-items:center}
+.rv-err{padding:var(--s1) var(--s3);color:var(--errink);font-size:12px;white-space:pre-wrap}
+.rv-lanehead .sp,.rv-viewhead .sp,.tr-cutrow .sp,.tr-transport .sp,.tr-noteshead .sp,.tr-noteacts .sp{flex:1}
+.rv-divider{display:flex;align-items:center;gap:var(--s2);margin:var(--s2) 0 var(--s1);color:var(--dim);font-size:11px}
+.rv-divider::after{content:'';flex:1;border-top:1px solid var(--line)}
+.rv-cols textarea,.tr-notescol textarea,.rv-phone textarea{min-height:0;font:12.5px/1.45 system-ui,sans-serif;padding:var(--s1) var(--s2)}
+
+/* ── the list ── */
+.rv-listcol{height:100%;display:flex;flex-direction:column;min-height:0;background:var(--panel);container-type:inline-size}
+.rv-filters{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
+.rv-search{background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);padding:var(--s1) var(--s2);font-size:12.5px;outline:none}
+.rv-search:focus{border-color:var(--accent)}
+.rv-selects{display:flex;gap:var(--s1)}
+.rv-selects select{flex:1;min-width:0}
+.rv-whose{align-self:flex-start}
+.rv-switches{display:flex;gap:var(--s3);font-size:12px}
+.rv-switch{display:inline-flex;align-items:center;gap:var(--s1);cursor:pointer;color:var(--ink)}
+.rv-count{font-size:11px;color:var(--dim)}
+.rv-listscroll{flex:1;min-height:0;overflow-y:auto;padding:var(--s1) 0 var(--s4)}
+.rv-lanehead{display:flex;align-items:center;gap:var(--s2);margin:var(--s2) var(--s2) var(--s0);padding:var(--s1) var(--s2);border-radius:4px;border-left:4px solid var(--lane,var(--dim));background:var(--panel2);font-size:12px}
+.rv-lanehead b{color:var(--lane,var(--dim))}
+.rv-row{display:flex;gap:var(--s2);align-items:center;margin:var(--s1) var(--s2);padding:var(--s1) var(--s2);border-radius:6px;cursor:pointer;
+ border:1px solid color-mix(in srgb,var(--tone) 45%,var(--line));background:color-mix(in srgb,var(--tone) 9%,var(--panel))}
+.rv-row:hover{background:color-mix(in srgb,var(--tone) 16%,var(--panel))}
+.rv-row.on{background:color-mix(in srgb,var(--tone) 22%,var(--panel));box-shadow:inset 3px 0 0 var(--accent)}
+.rv-row.laned,.rv-vrow.laned{border-left:4px solid var(--lane)}
+.rv-row.muted .rv-thumb,.rv-row.muted .rv-rowbody{opacity:.55}
+.rv-thumb{width:56px;height:56px;flex:none;border-radius:4px;overflow:hidden;background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/12px 12px}
+.rv-thumb.sm{width:32px;height:32px}
+.rv-thumb.xs{width:36px;height:36px;cursor:pointer}
+.rv-thumbimg{width:100%;height:100%;object-fit:cover;display:block}
+.rv-thumbnone{width:100%;height:100%;display:grid;place-items:center;color:var(--dim);background:var(--panel2)}
+.rv-rowbody{flex:1;min-width:0}
+.rv-rowtitle{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.rv-rowtitle.strong{font-weight:700}
+.rv-unread{display:inline-block;width:8px;height:8px;border-radius:4px;background:var(--blue);margin-right:var(--s1);vertical-align:middle}
+.rv-rowmeta{display:flex;gap:var(--s1);align-items:center;margin-top:var(--s0);min-width:0}
+.rv-badge{flex:none;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:0 var(--s1);border-radius:3px;line-height:16px;
+ color:var(--bg);background:var(--tone,var(--dim));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
+.rv-badge.outline{background:none;color:var(--ink);border:1px solid var(--line)}
+.rv-about{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
+.rv-fold{flex:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:999px;color:var(--dim)}
+.rv-fold .cvt{width:14px;height:14px;transform:rotate(90deg)}
+.rv-fold .cvt.open{transform:rotate(-90deg)}
+.rv-fold:hover{color:var(--ink);border-color:var(--accent)}
+/* a narrow list: the title on its own line on top, a smaller image under it beside the badges */
+@container (max-width:250px){
+ .rv-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"title title fold" "thumb meta meta" "rework rework rework";align-items:center;column-gap:var(--s2);row-gap:var(--s1)}
+ .rv-row .rv-rowbody{display:contents}
+ .rv-row .rv-rowtitle{grid-area:title}
+ .rv-row .rv-thumb{grid-area:thumb;width:40px;height:40px}
+ .rv-row .rv-rowmeta{grid-area:meta;flex-wrap:wrap;margin-top:0}
+ .rv-row .rv-fold{grid-area:fold}
+ .rv-row > .rv-rowbody > :not(.rv-rowtitle):not(.rv-rowmeta){grid-area:rework}
+ .rv-row.muted .rv-rowtitle,.rv-row.muted .rv-rowmeta{opacity:.55}
+ /* the filters: one select a line, the whose bar across the width, the switches one a line */
+ .rv-filters{padding:var(--s2)}
+ .rv-selects{flex-direction:column}
+ .rv-whose{align-self:stretch}
+ .seg.rv-whose button{flex:1 1 auto;justify-content:center;padding:0 var(--s1);font-size:11px;white-space:nowrap}
+ .rv-switches{flex-direction:column;gap:var(--s1)}
+}
+.rv-vrow{display:flex;gap:var(--s1);align-items:center;margin:var(--s0) var(--s2) var(--s0) var(--s4);padding:var(--s0) var(--s1);border-radius:4px;cursor:pointer;opacity:.8;
+ border:1px solid color-mix(in srgb,var(--tone) 40%,var(--line));background:color-mix(in srgb,var(--tone) 8%,var(--panel));font-size:11.5px}
+.rv-vrow.on{opacity:1;box-shadow:inset 3px 0 0 var(--accent)}
+.rv-vn{flex:none}
+.rv-vtitle{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rv-lane{flex:none;font-size:10px;font-weight:700;color:var(--bg);background:var(--lane);border-radius:3px;padding:0 var(--s1);line-height:16px}
+.rv-auto{flex:none;font-size:10px;font-weight:700;color:var(--bg);background:var(--warn);border-radius:3px;padding:0 var(--s1);line-height:16px}
+.rv-reworkrow{display:flex;margin-top:var(--s1)}
+.rv-rework{display:inline-flex;align-items:center;gap:var(--s1);font-size:11px;font-weight:700;color:var(--lane);border:1px solid var(--lane);border-radius:4px;padding:0 var(--s1);white-space:nowrap}
+.rv-spin{width:10px;height:10px;border-radius:50%;border:2px solid var(--lane);border-top-color:transparent;animation:rot 2.4s linear infinite}
+.rv-listen{display:inline-flex;align-items:center;gap:var(--s1);font-size:11px;font-weight:700;color:var(--dim);border:1px solid var(--line);border-radius:10px;padding:0 var(--s2);white-space:nowrap;line-height:18px}
+.rv-listen.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
+
+/* ── the views ── */
+.rv-views{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s3)}
+.rv-viewsbar{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;align-items:center}
+.rv-viewsctl{display:inline-flex;gap:var(--s2);align-items:center}
+.rv-jumps{display:flex;flex-wrap:wrap;gap:var(--s1);flex:1;min-width:0}
+.rv-jump{font-size:11.5px;padding:var(--s0) var(--s2);border-color:transparent;color:var(--dim);display:inline-flex;align-items:center;gap:var(--s1)}
+.rv-jump.on{color:var(--ink);border-color:var(--line);background:var(--panel2)}
+.rv-jdot{width:8px;height:8px;border-radius:4px;background:var(--tone)}
+.rv-view{scroll-margin-top:8px;padding-left:var(--s2);border-left:4px solid transparent}
+.rv-view.active{border-left-color:var(--line)}
+.rv-view[class*=' re-']{border-left-color:var(--tone)}
+.rv-viewhead{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s2)}
+.rv-viewname{font-size:14px}
+.rv-reacts{display:inline-flex;gap:var(--s1)}
+.rv-react{font-size:11.5px;padding:0 var(--s2);line-height:20px;color:var(--tone);border-color:color-mix(in srgb,var(--tone) 45%,var(--line));background:color-mix(in srgb,var(--tone) 10%,transparent)}
+.rv-react.on{color:var(--bg);background:var(--tone);border-color:var(--tone)}
+.rv-react.off{opacity:.45}
+.rv-word{margin-top:var(--s2)}
+.rv-raised{padding:var(--s2) var(--s3);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:4px;background:var(--panel)}
+.rv-raisedimg{display:block;max-width:100%;max-height:320px;margin-top:var(--s2);border-radius:4px}
+.rv-pairgrid{margin:0 auto;display:grid;gap:var(--s2)}
+.rv-cell{display:flex;flex-direction:column;align-items:center;gap:var(--s0);min-width:0}
+.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}
+.rv-fill{position:absolute;inset:0}
+.rv-caption{font-size:11px;color:var(--dim)}
+.rv-caption.mod,.rv-modcap{color:var(--k2)}
+.rv-curtain{position:absolute;top:0;bottom:0;width:2px;transform:translateX(-1px);background:var(--k2);pointer-events:none}
+.rv-modes{position:relative;display:inline-flex;flex-direction:column;gap:var(--s1)}
+.rv-onion{position:absolute;top:100%;left:0;right:0;z-index:3;margin-top:var(--s0)}
+.rv-marks{position:absolute;inset:0;user-select:none}
+.rv-marks.draw{cursor:crosshair}
+.rv-marks.pick{cursor:pointer}
+.rv-markimg,.rv-video{display:block;width:100%;height:100%;pointer-events:none}
+.rv-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
+.rv-ring{fill:none;stroke:var(--warn);stroke-width:3}
+.rv-ringshade{fill:none;stroke:var(--solid);stroke-opacity:.35;stroke-width:7}
+.rv-rect{position:absolute;border:2px solid var(--warn);box-shadow:0 0 0 1px var(--hi1);background:color-mix(in srgb,var(--warn) 7%,transparent);cursor:pointer}
+.rv-rect.on{border-width:3px;border-color:var(--blue)}
+.rv-rect.faint{border-style:dashed;opacity:.6;box-shadow:none;background:none}
+.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)}
+.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}
+.rv-tile{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s1);border-radius:6px;border:2px solid var(--line)}
+.rv-tile[class*=' re-']{border-color:var(--tone);background:color-mix(in srgb,var(--tone) 8%,transparent)}
+.rv-tile.big{width:100%}
+.rv-tileimg{border-radius:4px;cursor:zoom-in;margin:0 auto;width:100%;background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/12px 12px}
+.rv-tile.big .rv-tileimg{cursor:zoom-out}
+.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-clipbar button{padding:0 var(--s2);line-height:22px}
+.rv-scrub{flex:1;min-width:60px}
+.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}
+.rv-phonepair{display:flex;flex-direction:column;gap:var(--s2)}
+
+/* ── the answer ── */
+.rv-form{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3)}
+.rv-status{padding:var(--s1) var(--s3);border-radius:4px;border:1px solid color-mix(in srgb,var(--tone) 45%,var(--line));border-left:4px solid var(--tone);background:color-mix(in srgb,var(--tone) 10%,var(--panel))}
+.rv-statushead{font-weight:800;color:var(--tone);display:flex;gap:var(--s1);align-items:center;flex-wrap:wrap}
+.rv-title{margin:0;font-size:17px;line-height:1.3}
+.rv-what{font-size:13px}
+.rv-what ul{margin:var(--s1) 0;padding-left:var(--s4)}
+.rv-what p{margin:var(--s1) 0}
+.rv-keeps{color:var(--ok);font-size:13px}
+.rv-facts{display:flex;flex-direction:column}
+.rv-fact{display:flex;gap:var(--s2);align-items:center;min-height:24px;font-size:12.5px}
+.rv-factl{width:64px;flex:none;color:var(--dim);font-size:11px}
+.rv-factv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rv-linked{padding:var(--s1) var(--s2);border:1px solid var(--line);border-radius:4px;background:var(--panel)}
+.rv-linkedrow{display:flex;gap:var(--s2);align-items:center;font-size:12px}
+.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-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)}
+.rv-outbadge.rect.on{--tone:var(--blue)}
+.rv-x{flex:none;padding:0 var(--s1);border:0}
+.rv-label{font-size:12px;font-weight:600;margin-top:var(--s1)}
+.rv-listenrow{display:flex;gap:var(--s2);align-items:center;font-size:11px}
+.rv-verdicts{display:flex;flex-direction:column;gap:var(--s1)}
+.rv-verdict{text-align:left;padding:var(--s1) var(--s3);font-size:13px;border-color:color-mix(in srgb,var(--tone) 60%,var(--line))}
+.rv-verdict .rv-vglyph{color:var(--tone);font-weight:800}
+.rv-verdict.chosen{background:var(--tone);color:var(--bg);border-color:var(--tone)}
+.rv-verdict.chosen .rv-vglyph{color:var(--bg)}
+.rv-verdict.off{opacity:.5}
+.rv-msg{max-width:88%;align-self:flex-start;padding:var(--s1) var(--s2);border-radius:6px;border:1px solid var(--line);background:var(--panel2)}
+.rv-msg.mine{align-self:flex-end;border-color:var(--hair);background:var(--wash)}
+.rv-msgimg{display:block;max-width:100%;max-height:160px;margin-top:var(--s1);border-radius:4px}
+.rv-replyrow,.rv-formfoot{display:flex;gap:var(--s2);justify-content:space-between}
+.rv-replyrow{justify-content:flex-end}
+
+/* ── the phone: the page covers the hub's panes, one pane at a time, the verdicts under the thumb ── */
+.rv-phone,.tr-phone{position:fixed;inset:0;z-index:30;background:var(--bg)}
+.rv-phone{display:flex;flex-direction:column}
+.rv-phonetop{flex:none;display:flex;gap:var(--s2);align-items:center;padding:var(--s1) var(--s2);border-bottom:1px solid var(--line);background:var(--bg-top);font-size:13px}
+.rv-phonetabs{margin:var(--s2);align-self:stretch;display:flex}
+.rv-phonetabs button{flex:1;font-size:13px;padding:var(--s1) var(--s2)}
+.rv-phonepane{flex:1;min-height:0;overflow-y:auto}
+.rv-verdictbar{flex:none;display:flex;gap:var(--s1);padding:var(--s2);border-top:1px solid var(--line);background:var(--panel)}
+.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)}
+
+/* ── the trailer page ── */
+.tr-cuts{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3)}
+.tr-trailername{font-weight:800}
+.tr-cutrows{display:flex;flex-direction:column;gap:var(--s0)}
+.tr-cutrow{display:flex;align-items:center;gap:var(--s1);width:100%;padding:var(--s0) var(--s2);border:0;border-radius:4px;text-align:left;font-size:13px}
+.tr-cutrow:hover{background:var(--panel2)}
+.tr-cutrow.on{background:var(--sel);box-shadow:inset 2px 0 0 var(--accent);font-weight:700}
+.tr-cutrow.unrendered{opacity:.45}
+.tr-cutname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tr-edited{color:var(--warn)}
+.tr-cuterr{color:var(--red);font-weight:800}
+.tr-opencount{flex:none;min-width:16px;padding:0 var(--s1);border-radius:8px;background:var(--warn);color:var(--bg);font-size:10px;font-weight:700;text-align:center;line-height:16px}
+.tr-cutage{flex:none;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
+.tr-keys{margin-top:var(--s3);padding:var(--s2);border:1px solid var(--line);border-radius:6px;background:var(--panel);display:flex;flex-direction:column;gap:var(--s0)}
+.tr-keyshead{font-size:11px;font-weight:700;color:var(--dim)}
+.tr-keyrow{display:flex;gap:var(--s2);align-items:baseline;font-size:11px}
+.tr-keyrow kbd{min-width:44px;text-align:center}
+.tr-player{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3)}
+.tr-banner{display:flex;gap:var(--s2);align-items:center;justify-content:space-between;padding:var(--s2) var(--s3);border-radius:4px;border:1px solid var(--hair);background:var(--wash);font-size:12.5px}
+.tr-banner.warn{border-color:color-mix(in srgb,var(--warn) 50%,var(--line));background:color-mix(in srgb,var(--warn) 10%,var(--panel))}
+.tr-screen{background:var(--solid);border-radius:8px;padding:var(--s2);display:flex;justify-content:center}
+.tr-frame{position:relative}
+.tr-frame video{display:block;width:100%;height:100%;border-radius:4px;background:var(--solid)}
+.tr-clickzone{position:absolute;inset:0;cursor:crosshair}
+.tr-paused{position:absolute;left:var(--s2);top:var(--s2);padding:var(--s0) var(--s2);border-radius:4px;background:var(--scrim);color:var(--tag);font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none}
+.tr-pin{position:absolute;transform:translate(-50%,-100%);pointer-events:none}
+.tr-pinhead{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--tone);border:2px solid var(--tag);box-shadow:0 2px 8px var(--shadow);display:flex;align-items:center;justify-content:center}
+.tr-pinhead.on{width:28px;height:28px}
+.tr-pinhead span{transform:rotate(45deg);color:var(--tag);font-weight:800;font-size:11px}
+.tr-pulse{position:absolute;left:calc(50% - 12px);bottom:-6px;width:24px;height:24px;border-radius:12px;border:2px solid var(--warn);animation:trpulse 1.1s ease-out infinite}
+@keyframes trpulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
+.tr-transport{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center}
+.tr-tbtn{width:32px;height:32px;padding:0;border-radius:16px;border-color:transparent;font-size:15px}
+.tr-tbtn.big{width:44px;height:44px;border-radius:22px;background:var(--ink);color:var(--bg);font-size:17px}
+.tr-time{margin-left:var(--s1);line-height:1.15;font-variant-numeric:tabular-nums}
+.tr-timebig{font-size:18px;font-weight:800}
+.tr-timebig span{font-size:12px;font-weight:500}
+.tr-file{font-size:11px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tr-notebtn{color:var(--bg);background:var(--warn);border-color:var(--warn);font-weight:700;padding:var(--s1) var(--s3)}
+.tr-now{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;min-height:30px;font-size:12.5px}
+.tr-secbadge{padding:0 var(--s2);border-radius:3px;background:var(--hue);color:var(--bg);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:20px}
+.tr-secbadge.small{text-transform:none;letter-spacing:0;line-height:16px;font-size:10.5px}
+.tr-shotnow{font-size:16px}
+.tr-capnow{font-style:italic;padding:0 var(--s2);border-radius:4px;background:color-mix(in srgb,var(--warn) 18%,transparent);white-space:pre-line}
+.tr-timelinewrap{position:relative}
+.tr-timeline{overflow-x:auto;overflow-y:hidden;border-radius:6px;background:var(--bg);border:1px solid var(--line);padding:var(--s1) 0 var(--s2);cursor:col-resize;user-select:none}
+.tr-track{position:relative}
+.tr-tick{position:absolute;border-left:1px solid var(--hi3)}
+.tr-tick span{position:absolute;left:3px;top:1px;font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
+.tr-section{position:absolute;border-radius:4px;background:color-mix(in srgb,var(--hue) 55%,var(--bg));color:var(--ink);font-size:11px;font-weight:700;padding-left:var(--s1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.8}
+.tr-section.on{background:var(--hue);color:var(--bg);opacity:1;box-shadow:0 0 0 2px var(--hi1)}
+.tr-shot{position:absolute;border-radius:3px;background:var(--panel2);border-top:3px solid color-mix(in srgb,var(--hue) 60%,var(--bg));color:var(--ink);font-size:11px;font-weight:600;padding:var(--s0) var(--s1) 0;overflow:hidden;white-space:nowrap;opacity:.85}
+.tr-shot.odd{background:var(--panel)}
+.tr-shot.on{background:color-mix(in srgb,var(--hue) 70%,var(--bg));border-top-color:var(--hue);color:var(--bg);font-weight:800;box-shadow:0 0 0 2px var(--ink);opacity:1;z-index:1}
+.tr-shottime{font-size:9px;opacity:.6;font-variant-numeric:tabular-nums}
+.tr-caption{position:absolute;border-radius:3px;background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);font-size:10px;font-style:italic;padding:0 var(--s1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.tr-caption.on{background:var(--warn);color:var(--bg)}
+.tr-noteline{position:absolute;border-left:1px dashed var(--tone);opacity:.5;pointer-events:none}
+.tr-noteline.on{border-left-style:solid;opacity:.9}
+.tr-notepin{position:absolute;top:0;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--tone);border:1px solid var(--shadow);cursor:pointer;z-index:3}
+.tr-notepin.on{border:2px solid var(--tag)}
+.tr-draftmark{position:absolute;top:0;width:2px;background:var(--warn);z-index:3;pointer-events:none}
+.tr-playhead{position:absolute;top:0;width:2px;background:var(--red);z-index:4;pointer-events:none;box-shadow:0 0 6px var(--red)}
+.tr-playknob{position:absolute;left:-5px;top:-2px;width:12px;height:8px;border-radius:3px;background:var(--red)}
+.tr-hover{position:fixed;width:208px;padding:var(--s2);border-radius:6px;background:var(--panel2);border:1px solid var(--line);box-shadow:0 6px 24px var(--shadow);pointer-events:none;z-index:50;font-size:12px}
+.tr-hoverrow{display:flex;justify-content:space-between;margin-top:var(--s1)}
+.tr-thumb{border-radius:4px;background-color:var(--panel2);background-repeat:no-repeat;flex:none}
+.tr-shotcards{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s1) var(--s0) var(--s2)}
+.tr-shotcard{position:relative;flex:none;width:148px;padding:var(--s1);border-radius:6px;text-align:left;border:1px solid var(--line);background:var(--panel)}
+.tr-shotcard.on{border:2px solid var(--hue);background:color-mix(in srgb,var(--hue) 12%,var(--panel))}
+.tr-shotname{font-size:12px;font-weight:800;margin-top:var(--s1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tr-shotnotes{position:absolute;top:var(--s2);right:var(--s2);min-width:18px;height:18px;border-radius:9px;background:var(--warn);color:var(--bg);font-size:11px;font-weight:800;text-align:center;line-height:18px;padding:0 var(--s1)}
+.tr-montage{display:flex;flex-direction:column;gap:var(--s1);align-items:flex-start}
+.tr-montagebody{width:100%;font-size:12.5px;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:4px;background:var(--panel);overflow-x:auto}
+.tr-notescol{height:100%;display:flex;flex-direction:column;min-height:0}
+.tr-noteshead{display:flex;gap:var(--s2);align-items:center;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
+.tr-openbadge{font-size:10px;font-weight:700;text-transform:uppercase;padding:0 var(--s1);border-radius:3px;line-height:16px;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 50%,var(--line))}
+.tr-openbadge.on{background:var(--warn);color:var(--bg)}
+.tr-notesscroll{flex:1;min-height:0;overflow-y:auto;padding:var(--s2);display:flex;flex-direction:column;gap:var(--s2)}
+.tr-elsewhere{font-size:11px;font-weight:700;color:var(--dim);margin-top:var(--s3)}
+.tr-draft{padding:var(--s2) var(--s3);border-radius:6px;border:1px solid var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 18%,transparent);display:flex;flex-direction:column;gap:var(--s1)}
+.tr-drafthead{display:flex;justify-content:space-between;gap:var(--s2);align-items:center;font-size:12.5px}
+.tr-pinned{color:var(--warn);font-size:11px;font-weight:700}
+.tr-draftbtns{display:flex;justify-content:flex-end;gap:var(--s1)}
+.tr-note{border-radius:6px;border:1px solid var(--line);border-left:4px solid var(--tone);padding:var(--s2);background:var(--panel);cursor:pointer;display:flex;flex-direction:column;gap:var(--s1)}
+.tr-note.ns-done:not(.on),.tr-note.ns-wontfix:not(.on){opacity:.72}
+.tr-note.on{border:2px solid var(--tone);border-left-width:5px;background:var(--panel2)}
+.tr-notetop{display:flex;gap:var(--s2)}
+.tr-notebody{flex:1;min-width:0}
+.tr-notemeta{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center;font-size:12px}
+.tr-statebadge{font-size:10px;font-weight:700;padding:0 var(--s1);border-radius:3px;background:var(--tone);color:var(--bg);line-height:16px}
+.tr-moved{font-size:11px;color:var(--warn)}
+.tr-notetext{font-size:13px;margin-top:var(--s0);white-space:pre-wrap;overflow-wrap:anywhere}
+.tr-notetext.struck{text-decoration:line-through}
+.tr-edit{display:flex;flex-direction:column;gap:var(--s1)}
+.tr-reply{padding:var(--s1) var(--s2);border-radius:4px;border-left:3px solid var(--tone);background:color-mix(in srgb,var(--tone) 10%,var(--panel));font-size:12px}
+.tr-noteacts{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center}
+.tr-noteacts button{font-size:12px;padding:0 var(--s2);line-height:22px}
+.tr-done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,var(--line))}
+.tr-delete{color:var(--red);border-color:transparent}
+.tr-delete.sure{background:var(--red);color:var(--bg)}
+.tr-still{position:relative;flex:none}
+.tr-still img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;background:var(--panel2)}
+.tr-stillpin{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:6px;background:var(--tone);border:2px solid var(--tag);box-shadow:0 1px 4px var(--shadow)}
+.tr-phone{overflow-y:auto;display:flex;flex-direction:column}
+.tr-phone > *{flex:none}
+.tr-phone .tr-notescol{height:auto}
+/* the dispatcher's board and a kind's data view (review-board.tsx, kind-view.tsx) */
+.rv-board{padding:var(--s2) var(--s3)}
+.rv-boardrow{padding:var(--s2);border:1px solid var(--line);border-radius:4px;margin-bottom:var(--s1);cursor:pointer;font-size:12.5px}
+.rv-boardrow:hover,.rv-boardrow.on{background:var(--panel)}
+.rv-boardrow .rv-linkedtitle{display:block}
+.rv-kindview{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s2) 0}
+.rv-kindtext{font:12px/1.5 ui-monospace,Menlo,monospace;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:var(--s2) var(--s3);margin:0;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-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/serve/hub-app/theme-st.ts

@@ -0,0 +1,56 @@
+// the page's theme, a node of the root (home-st.ts): his pick (dark, light or
+// auto, which follows the system) kept per browser, resolved to dark or light
+// on <html data-theme>, where hub.css swaps its token block. Applied at
+// construction, before the first render, so a reload paints in the theme.
+import { autorun, makeAutoObservable, runInAction } from 'mobx'
+
+export const THEMES = ['dark', 'light', 'auto'] as const
+export type ThemePick = (typeof THEMES)[number]
+export type Theme = 'dark' | 'light'
+
+const KEY = 'hub:theme'
+
+function loadPick(): ThemePick {
+    try {
+        const v = globalThis.localStorage?.getItem(KEY)
+        return (THEMES as readonly string[]).includes(v ?? '') ? (v as ThemePick) : 'auto'
+    } catch {
+        return 'auto'
+    }
+}
+
+export class ThemeSt {
+    pick: ThemePick = loadPick()
+    /** what the system asks for, read live */
+    system: Theme = 'dark'
+
+    constructor() {
+        makeAutoObservable(this)
+        const mq = typeof window !== 'undefined' && typeof window.matchMedia === 'function' ? window.matchMedia('(prefers-color-scheme: light)') : null
+        if (mq != null) {
+            this.system = mq.matches ? 'light' : 'dark'
+            mq.addEventListener('change', (e) => runInAction(() => (this.system = e.matches ? 'light' : 'dark')))
+        }
+        const root = typeof document !== 'undefined' ? document.documentElement : null
+        if (root != null) autorun(() => {
+            root.dataset.theme = this.resolved
+            root.style.colorScheme = this.resolved
+        })
+    }
+
+    get resolved(): Theme {
+        return this.pick === 'auto' ? this.system : this.pick
+    }
+
+    set(p: ThemePick): void {
+        this.pick = p
+        try {
+            globalThis.localStorage?.setItem(KEY, p)
+        } catch { /* private window or blocked site data: the pick lasts the tab */ }
+    }
+
+    /** the foot's button: dark, light, auto, then dark again */
+    cycle(): void {
+        this.set(THEMES[(THEMES.indexOf(this.pick) + 1) % THEMES.length]!)
+    }
+}

package/src/serve/hub-app/tree-build.ts

@@ -74,6 +74,8 @@ export const KIND_SECTION: Record<ResourceType, SectionId> = {
     post: 'media',
     wiki: 'wikis',
     process: 'processes',
+    card: 'review',
+    cut: 'trailer',
 }
 
 /** a process's colour: up reads green, crashed red, on its way orange,
@@ -392,6 +394,8 @@ export const TYPE_MARK: Record<string, TypeMark> = {
     test: { glyph: '\u2263', hue: 'k5', word: 'a test file: the check that runs it, its last runs against its budget, the command that runs it alone' },
     reflection: { glyph: '\u203b', hue: 'k2', word: 'a reflection: friction this repo logged against the wiki, waiting to be folded in' },
     process: { glyph: '\u223f', hue: 'k1', word: 'a global process this repo declares: its state, its menu, its log' },
+    card: { glyph: '\u25a3', hue: 'k2', word: 'a review card waiting for your answer: approve, fix, reject, circle a detail' },
+    cut: { glyph: '\u25b6', hue: 'k3', word: 'a trailer cut: play it with its timeline, pin a note on any frame' },
     done: { glyph: '\u2713', hue: 'k5', word: 'a done ask: answered, filed under done, out of every count above it' },
 }
 

package/src/serve/hub-app/tree-row.tsx

@@ -45,7 +45,7 @@ export const SectionRowView = observer(({ app, row }: { app: RepoSt; row: TreeRo
     const key = s == null ? null : sectionKeyLabel(id)
     const el = useInSight(t.cursor === row.key)
     return (
-        <div ref={el} className={`tsec${s?.empty === true ? ' empty' : ''}${s?.opens === false ? ' noop' : ''}${s?.on === true ? ' cur' : ''}${t.cursor === row.key ? ' on' : ''}`} aria-current={s?.on === true ? 'page' : undefined}
+        <div ref={el} className={`tsec s-${id}${s?.empty === true ? ' empty' : ''}${s?.opens === false ? ' noop' : ''}${s?.on === true ? ' cur' : ''}${t.cursor === row.key ? ' on' : ''}`} aria-current={s?.on === true ? 'page' : undefined}
             title={s == null ? row.label : `${s.title} (${key})`} onClick={() => t.click(row)}>
             <Fold app={app} row={row} />
             <Icon d={ICON[id]} />

package/src/serve/hub-app/tree-svc.ts

@@ -144,6 +144,10 @@ export class TreeSvc {
         this.cursor = row.key
         this.activate(row)
     }
+    /** a click in the page: the arrows are the page's again until the tree is walked or clicked */
+    leave(): void {
+        this.cursor = null
+    }
     /** the chevron: fold or unfold, never open */
     fold(row: TreeRow): void {
         this.cursor = row.key