fix(clip): a time's error line sits in the flow, the remove button off the cut, and every player surface rings amber

- useTimecodeField holds a time field's draft for its caller, which places TimecodeError (role
  alert) in its own flow under the fields' row: it no longer lies over the crop row taking its
  clicks, runs out of the editor's card, or joins the field's <label> name.
- The editor's remove-cut buttons sit in a row under the track at their cut (trackLeft), off the
  cut's grab area, where a press drags it; RangeTrack's adornment slot is gone.
- media-focus re-points --focus to the media amber on the Plex player, the YouTube stage and every
  bg-media-chrome surface; a contract test holds each such class string to media-focus or
  media-scope, the field's focus edge to the focus token, and --color-focus to the inline theme.
- An upload's quota headline says the converted file does not fit, not "Storage full".
- DESIGN.md: the tokens paragraph says what is re-pointed where; the decision row measures all
  three colours on the chrome.
This commit is contained in:
2026-10-10 21:29:55 +02:00
parent 89d18b46a6
commit 977ba244fa
22 changed files with 306 additions and 153 deletions
@@ -140,16 +140,6 @@ describe("RangeTrack", () => {
expect(a.onChange).toHaveBeenLastCalledWith(40, true);
});
it("puts a handle's adornment beside its slider, not inside it, where a button stays a button", () => {
const h = handle({ adornment: <button>Remove</button> });
render(<RangeTrack duration={100} label="Clip" handles={[h]} />);
const button = screen.getByRole("button", { name: "Remove" });
expect(screen.getByRole("slider", { name: "In" }).contains(button)).toBe(false);
// The slider's arrows are not the button's.
fireEvent.keyDown(button, { key: "ArrowLeft" });
expect(h.onChange).not.toHaveBeenCalled();
});
it("ends a drag whose handle leaves the window under it, so the track takes the next press", () => {
const onChange = vi.fn();
const onSeek = vi.fn();