Make the first run legible, and join the two halves

[pallaoro]

Follows the design-system pass (#6). That pass made the app look right; opening it still told you nothing about what to do, and the two halves were unconnected.

The first run

A new video showed a black rectangle. Compositions animate in with gsap.from({opacity: 0}), so at t=0 every element is invisible. Both the gallery thumbnails and the editor sat at t=0, so the starter composition that is meant to teach you what this app is was showing nothing, and the app read as broken on open. Both now seek to the halfway frame, which is what a video tool picks for a poster. The preview harness already accepted ?seek=, so this is a parameter, not new machinery.

The editor opens with the headline selected, so the first thing on screen is a field holding the text you are about to change. An editor that opens on "select something to edit it" spends the user's first move on housekeeping.

That exposed a defect: the preview iframe renders the saved composition, because the harness is served by /api/compositions/:id/preview. Reloading it after an inspector edit without saving first just re-showed the old frame, so you typed your title and the canvas never changed — and the save button lives only in the Compose tab, so from the default Timeline tab there was no way to make your own edit appear at all. The debounced refresh now persists, then reloads.

Copy: a new composition is named after what is on screen ("Product launch title card") rather than "Untitled", and each section says which one you want — "Graphics you make from scratch" against "Video you already shot". When a section is empty its empty state carries the action, so the page keeps one solid button.

The seam

The composition side and the footage side were two unconnected documents. A render only ever produced a row in render_jobs and an MP4 you could download; you could not put your own title card into your own cut, which is most of what a launch video is.

A finished composition is footage, so it now becomes a media-library asset: render_jobs.asset_id records what the render produced, the render handler inserts the assets row with the duration computed from the composition's own clip timings, and a completed render offers Use in an edit, which starts a cut with that clip at the head of the main track. Export staging already streams from this app's storage, so the export path is unchanged.

That exposed a latent bug it now trips reliably: useSourceDurations gave srcDur an empty dep array, so when a duration landed in the cache the segments memo never recomputed. It only bit when the EDL already referenced an asset at mount, which is exactly what "Use in an edit" creates: every clip rendered at zero length.

The player

The footage stage was sized by aspect-ratio off a full-width box with max-height: 100%. The parent's height is indefinite, so max-height never applied: at 1920x936 the stage computed to 1392x783 inside a 560px-tall pane and the bottom of the frame was clipped, taking the caption safe area with it. The ratio was right; the size was not. It now measures the pane and takes the limiting dimension, which is what the composition preview's harness already does.

Verification

Typecheck, scripts/apps-design-lint.py and build all pass. Driven in a browser: a new video from the empty state through to a first edit landing on the canvas; "Use in an edit" producing a cut that opens at 0:04.2 with the filmstrip on the main track; the player at 1920x936, 1600x1000 and 1280x620 with an exact 16:9 inside the padding on all four sides.

Not verified: the render service call itself. It needs CLAWNIFY_TOKEN, so POST /api/renders returns 503 locally. The seam was exercised with a real uploaded clip standing in for a render. The assets insert inside the render handler has never executed.

Note on scope

This makes a launch video assemblable; it does not make the composition side a builder. You still cannot add an element to a composition without writing HTML. That is tracked separately.