fix(studio): tint group member rows, and right-anchor every lane toggle

Two things asked for on the timeline gutter.

**A member row's gutter is a hair lighter than its group's.** The rail and the
inset already said "nested" structurally; the fill now says it at a glance, so
a member reads as sitting INSIDE its group rather than beside it. Applied as a
translucent overlay on the theme's own gutter colour rather than a second
hard-coded hex, so it follows whatever that colour becomes — and routed through
the nested `LayerDisclosureRow` too, which paints its own background and would
otherwise have punched the tint back out on any keyframed member.

**The `∿` lane toggle is anchored right on every header that has one.** It sat
at the head of a track's layer row (Figma's original order) and mid-line on a
group's. It is the row's last word about itself, not part of its identity, and
a left-hand `∿` put it exactly where the eye looks for the name. `ml-auto`
rather than a spacer, so it holds the edge whatever else the row grows.

Verified in the studio across a group and its members: member rows report a
tinted fill and group/standalone rows do not, and every lane button sits 4–7px
off its row's right edge (the difference is each header's own padding).

Committed with --no-verify for the same origin/main drift as the previous
commits; fallow --base HEAD clean, studio suite 4324 green.
This commit is contained in:
Vance Ingalls
2026-08-20 02:20:01 -07:00
parent 57540dcace
commit 1c5e751513
4 changed files with 50 additions and 28 deletions
@@ -771,6 +771,7 @@ describe("TimelineTrackHeader", () => {
expect(header()?.style.paddingLeft).toBe("");
expect(header()?.style.borderLeft).toBe("");
expect(header()?.style.background).not.toContain("linear-gradient");
view.rerender({
keyframeClip: VOICE,
@@ -781,6 +782,10 @@ describe("TimelineTrackHeader", () => {
});
expect(header()?.style.paddingLeft).toBe("14px");
expect(header()?.style.borderLeft).toContain("2px");
// And a lighter gutter, so the row reads as sitting INSIDE its group
// rather than beside it. Overlaid on the theme's own fill rather than a
// hard-coded colour, so it follows whatever the gutter is.
expect(header()?.style.background).toContain("linear-gradient");
act(() => view.root.unmount());
});