@hyperframes/studio 0.8.50 → 0.8.51

package/src/player/components/timelineClipDragPreview.ts

@@ -12,6 +12,7 @@ import {
   snapMoveToTargets,
   snapTimelineTime,
   type TimelineSnapTarget,
+  type TimelineSnapType,
 } from "./timelineSnapping";
 import { resolveInsertRow, resolveZoneDropPlacement } from "./timelineCollision";
 import {
@@ -21,11 +22,13 @@ import {
 import { clampGroupMoveDelta } from "./timelineMultiDragPreview";
 import type { DraggedClipState, ResizingClipState } from "./timelineClipDragTypes";
 import { resolveDragLandingStart } from "./timelineDragLanding";
+import { STUDIO_PREVIEW_FPS } from "../lib/time";
 
 /** Snap-target builder closure supplied by the hook (closes over refs + store). */
 type BuildSnapTargets = (
   excludeElementKey: string | null,
   includeBeats: boolean,
+  includePlayhead?: boolean,
 ) => TimelineSnapTarget[];
 
 export interface DragPreviewContext {
@@ -223,6 +226,14 @@ export function computeDragPreview(
   };
 }
 
+/** One frame: the last visible frame of a clip sits just before its end time. */
+const TRIM_END_FRAME_LEAD_S = 1 / STUDIO_PREVIEW_FPS;
+
+/** The composition time whose frame a trim shows: the edge being dragged. */
+export function trimPreviewTime(edge: "start" | "end", start: number, duration: number): number {
+  return edge === "start" ? start : Math.max(start, start + duration - TRIM_END_FRAME_LEAD_S);
+}
+
 export interface ResizePreviewContext {
   scroll: HTMLDivElement | null;
   pps: number;
@@ -234,6 +245,9 @@ export interface ResizePreviewResult {
   previewStart: number;
   previewDuration: number;
   previewPlaybackStart?: number;
+  /** The target the trimmed edge snapped to; null when the edge is free. */
+  snapTime: number | null;
+  snapType: TimelineSnapType | null;
 }
 
 /** Compute the trim preview for a pointer x (pure — the hook applies the state). */
@@ -287,28 +301,31 @@ export function computeResizePreview(
     effectiveClientX,
   );
 
-  // Snap edge to unified targets (beats + clip edges + playhead) when available.
-  // The snap must stay inside the same limits resolveTimelineResize enforces, or
-  // it would push the edge past the available source media / composition end.
-  // The music track defines the beats, so it must not snap to them — but it
-  // still snaps to the playhead and other clip edges.
+  // Snap to beats and clip edges, never the playhead (the dragged edge drives
+  // its own preview seek, so that would be circular). Stay inside the same
+  // limits resolveTimelineResize enforces. The music track defines the
+  // beats, so it must not snap to them, but still snaps to clip edges.
   const trimTargets = buildSnapTargets(
     resize.element.key ?? resize.element.id,
     !isMusicTrack(resize.element),
+    false,
   );
+  let snap: TimelineSnapTarget | null = null;
   if (trimTargets.length > 0) {
     const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
     if (resize.edge === "end") {
       const edgeTime = nextResize.start + nextResize.duration;
-      const snapped = snapTimelineTime(edgeTime, trimTargets, snapSecs).time;
+      const { time: snapped, target } = snapTimelineTime(edgeTime, trimTargets, snapSecs);
       // Stay within [start+minDuration, maxEnd] so the snap can't create a
       // degenerate clip or run past the source/composition limit.
       const snappedDuration = Math.round((snapped - nextResize.start) * 1000) / 1000;
-      if (snapped !== edgeTime && snapped <= maxEnd + 1e-6 && snappedDuration >= 0.05) {
-        nextResize = { ...nextResize, duration: snappedDuration };
+      if (target && snapped <= maxEnd + 1e-6 && snappedDuration >= 0.05) {
+        // An edge already on the target still owns the guide; only move it when off.
+        if (snapped !== edgeTime) nextResize = { ...nextResize, duration: snappedDuration };
+        snap = target;
       }
     } else {
-      const snapped = snapTimelineTime(nextResize.start, trimTargets, snapSecs).time;
+      const { time: snapped, target } = snapTimelineTime(nextResize.start, trimTargets, snapSecs);
       const delta = nextResize.start - snapped; // >0 when snapping left
       // Leftward snap reveals more source; cap so playbackStart can't go < 0.
       const maxLeftDelta =
@@ -318,22 +335,20 @@ export function computeResizePreview(
       // Also require the resulting duration to stay >= minDuration so a rightward
       // snap (delta < 0) can't collapse the clip to zero/negative.
       const snappedDuration = Math.round((nextResize.duration + delta) * 1000) / 1000;
-      if (
-        snapped !== nextResize.start &&
-        snapped >= 0 &&
-        delta <= maxLeftDelta + 1e-6 &&
-        snappedDuration >= 0.05
-      ) {
-        nextResize = {
-          ...nextResize,
-          start: snapped,
-          duration: snappedDuration,
-          playbackStart:
-            nextResize.playbackStart != null
-              ? Math.round(Math.max(0, nextResize.playbackStart - delta * playbackRate) * 1000) /
-                1000
-              : undefined,
-        };
+      if (target && snapped >= 0 && delta <= maxLeftDelta + 1e-6 && snappedDuration >= 0.05) {
+        if (snapped !== nextResize.start) {
+          nextResize = {
+            ...nextResize,
+            start: snapped,
+            duration: snappedDuration,
+            playbackStart:
+              nextResize.playbackStart != null
+                ? Math.round(Math.max(0, nextResize.playbackStart - delta * playbackRate) * 1000) /
+                  1000
+                : undefined,
+          };
+        }
+        snap = target;
       }
     }
   }
@@ -343,6 +358,8 @@ export function computeResizePreview(
     previewStart: nextResize.start,
     previewDuration: nextResize.duration,
     previewPlaybackStart: nextResize.playbackStart,
+    snapTime: snap?.time ?? null,
+    snapType: snap?.type ?? null,
   };
 }
 
@@ -359,11 +376,18 @@ export function previewGroupResize(
   ) => void,
 ): void {
   const grabbedChange = applyTimelineGroupResizePreview(session, next);
+  const previewStart = grabbedChange?.start ?? next.previewStart;
+  const previewDuration = grabbedChange?.duration ?? next.previewDuration;
+  // A member clamp can pull the grabbed edge off the raw snap target; then no guide.
+  const edgeTime = session.edge === "end" ? previewStart + previewDuration : previewStart;
+  const stillSnapped = next.snapTime != null && Math.abs(edgeTime - next.snapTime) < 1e-3;
   setResizeState({
     originScrollLeft: next.originScrollLeft,
-    previewStart: grabbedChange?.start ?? next.previewStart,
-    previewDuration: grabbedChange?.duration ?? next.previewDuration,
+    previewStart,
+    previewDuration,
     previewPlaybackStart: grabbedChange?.playbackStart ?? next.previewPlaybackStart,
+    snapTime: stillSnapped ? next.snapTime : null,
+    snapType: stillSnapped ? next.snapType : null,
     groupPreview: session.changes,
   });
 }

package/src/player/components/timelineClipDragTypes.ts

@@ -57,6 +57,9 @@ export interface ResizingClipState {
   previewStart: number;
   previewDuration: number;
   previewPlaybackStart?: number;
+  /** Snap target the trimmed edge landed on, for the guide highlight. */
+  snapTime?: number | null;
+  snapType?: TimelineSnapType | null;
   /** Coordinator-owned group projection; canonical elements change only on commit. */
   groupPreview?: readonly {
     key: string;

package/src/player/components/timelineDragDrop.test.tsx

@@ -6,7 +6,8 @@ import { afterEach, describe, expect, it, vi, type Mock } from "vitest";
 import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 import { usePlayerStore } from "../store/playerStore";
 import { createTimelineRowGeometry } from "./timelineLayout";
-import { useTimelineAssetDrop } from "./timelineDragDrop";
+import { resolveDropInsertRow, useTimelineAssetDrop } from "./timelineDragDrop";
+import { getTimelineRowTop, TRACK_H } from "./timelineLayout";
 import { configureTimelineTestViewport } from "./timelineTestViewport";
 
 (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -252,3 +253,62 @@ describe("useTimelineAssetDrop", () => {
     act(() => view.root.unmount());
   });
 });
+
+describe("resolveDropInsertRow", () => {
+  const rows = [TRACK_H, TRACK_H, TRACK_H];
+  it("arms a new track at the boundary between two lanes", () => {
+    expect(resolveDropInsertRow(getTimelineRowTop(1, rows), rows, 3)).toBe(1);
+  });
+  it("arms a new track above the first lane", () => {
+    expect(resolveDropInsertRow(getTimelineRowTop(0, rows) - 4, rows, 3)).toBe(0);
+  });
+  it("stays on the lane when the pointer is over its middle", () => {
+    expect(resolveDropInsertRow(getTimelineRowTop(1, rows) + TRACK_H / 2, rows, 3)).toBeNull();
+  });
+  it("leaves the area below the last lane to the append path", () => {
+    expect(resolveDropInsertRow(getTimelineRowTop(2, rows) + TRACK_H + 4, rows, 3)).toBeNull();
+  });
+  it("never arms on an empty timeline", () => {
+    expect(resolveDropInsertRow(80, [], 0)).toBeNull();
+  });
+});
+
+describe("useTimelineAssetDrop new-track drops", () => {
+  it("previews and commits an insert row for an asset dropped between lanes", () => {
+    const onAssetDrop = vi.fn();
+    const view = renderHarness(onAssetDrop);
+    const transfer = assetTransfer(JSON.stringify({ path: "assets/a.png" }));
+    const y = getTimelineRowTop(1) + 1;
+
+    act(() => view.api.handleAssetDragOver(dragEvent(transfer, 400, y)));
+    expect(view.api.dropPreview).toMatchObject({ start: 10, insertRow: 1 });
+    act(() => view.api.handleAssetDrop(dragEvent(transfer, 400, y)));
+    expect(onAssetDrop).toHaveBeenCalledWith(
+      "assets/a.png",
+      expect.objectContaining({
+        start: 10,
+        insertRow: 1,
+        trackOrder: Array.from({ length: 100 }, (_, index) => index),
+      }),
+    );
+    act(() => view.root.unmount());
+  });
+
+  it("does not ask a block drop to insert a track", () => {
+    const onBlockDrop = vi.fn();
+    const view = renderHarness(vi.fn(), 1, { onBlockDrop });
+    const transfer: DropTransfer = {
+      types: [TIMELINE_BLOCK_MIME],
+      files: [],
+      dropEffect: "none",
+      getData: (type) => (type === TIMELINE_BLOCK_MIME ? JSON.stringify({ name: "b" }) : ""),
+    };
+    const y = getTimelineRowTop(1) + 1;
+    act(() => {
+      view.api.handleAssetDragOver(dragEvent(transfer, 400, y));
+      view.api.handleAssetDrop(dragEvent(transfer, 400, y));
+    });
+    expect(onBlockDrop).toHaveBeenCalledWith("b", { start: 10, track: 1 });
+    act(() => view.root.unmount());
+  });
+});

package/src/player/components/timelineDragDrop.ts

@@ -4,8 +4,14 @@ import {
   parseTimelineCompositionPayload,
   TIMELINE_COMPOSITION_MIME,
 } from "../../utils/timelineCompositionDrop";
-import { resolveTimelineAssetDrop, type TimelineRowGeometry } from "./timelineLayout";
-import type { TimelineDropCallbacks } from "./timelineCallbacks";
+import {
+  getTimelineInsertBoundaryBand,
+  getTimelineRowPositionFromY,
+  resolveTimelineAssetDrop,
+  type TimelineRowGeometry,
+} from "./timelineLayout";
+import { resolveInsertRow } from "./timelineCollision";
+import type { TimelineDropCallbacks, TimelineDropPlacement } from "./timelineCallbacks";
 import {
   applyTimelineAutoScrollStep,
   resolveTimelineAutoScrollLoopAction,
@@ -20,8 +26,6 @@ interface UseTimelineAssetDropOptions extends TimelineDropCallbacks {
   sessionEpoch: number;
 }
 
-type TimelinePlacement = { start: number; track: number };
-
 /**
  * Parse a JSON drag payload and, if it yields a value, forward it to the drop
  * callback. Malformed payloads are ignored. Shared by the asset + block paths so
@@ -30,8 +34,8 @@ type TimelinePlacement = { start: number; track: number };
 function applyJsonDropPayload(
   raw: string,
   pick: (parsed: Record<string, string | undefined>) => string | undefined,
-  apply: (value: string, placement: TimelinePlacement) => void,
-  placement: TimelinePlacement,
+  apply: (value: string, placement: TimelineDropPlacement) => void,
+  placement: TimelineDropPlacement,
 ): boolean {
   try {
     const value = pick(JSON.parse(raw) as Record<string, string | undefined>);
@@ -43,6 +47,40 @@ function applyJsonDropPayload(
   }
 }
 
+/** Only file and asset drops are written by the asset op that can open a track. */
+function canInsertTrackFor(types: readonly string[]): boolean {
+  return types.includes("Files") || types.includes(TIMELINE_ASSET_MIME);
+}
+
+/** The row boundary a pointer at `contentY` arms for a new track, or null over a lane's middle. */
+export function resolveDropInsertRow(
+  contentY: number,
+  rowHeights: readonly number[] | undefined,
+  trackCount: number,
+): number | null {
+  if (trackCount === 0) return null;
+  const { rowFloat, rowHeight } = getTimelineRowPositionFromY(contentY, rowHeights);
+  // Past the last lane the drop already appends a track (getDefaultDroppedTrack).
+  if (rowFloat >= trackCount) return null;
+  return resolveInsertRow(rowFloat, trackCount, getTimelineInsertBoundaryBand(rowHeight));
+}
+
+function placeDrop(
+  geometry: Parameters<typeof resolveTimelineAssetDrop>[0],
+  clientX: number,
+  clientY: number,
+  // Blocks and compositions are written by their own installers, which only take a track.
+  canInsertTrack: boolean,
+): TimelineDropPlacement {
+  const placement = resolveTimelineAssetDrop(geometry, clientX, clientY);
+  if (!canInsertTrack) return placement;
+  const contentY = clientY - geometry.rectTop + geometry.scrollTop;
+  const insertRow = resolveDropInsertRow(contentY, geometry.rowHeights, geometry.trackOrder.length);
+  return insertRow == null
+    ? placement
+    : { ...placement, insertRow, trackOrder: geometry.trackOrder };
+}
+
 function invokeDropCallback(callback: () => Promise<void> | void): void {
   try {
     void Promise.resolve(callback()).catch(() => undefined);
@@ -54,7 +92,7 @@ function invokeDropCallback(callback: () => Promise<void> | void): void {
 function applyFileDrop(
   transfer: DataTransfer,
   onFileDrop: TimelineDropCallbacks["onFileDrop"],
-  placement: TimelinePlacement,
+  placement: TimelineDropPlacement,
 ): boolean {
   if (!onFileDrop || transfer.files.length === 0) return false;
   invokeDropCallback(() => onFileDrop(Array.from(transfer.files), placement));
@@ -65,8 +103,8 @@ function applyTypedJsonDrop(
   transfer: DataTransfer,
   mime: string,
   field: "name" | "path",
-  apply: ((value: string, placement: TimelinePlacement) => Promise<void> | void) | undefined,
-  placement: TimelinePlacement,
+  apply: ((value: string, placement: TimelineDropPlacement) => Promise<void> | void) | undefined,
+  placement: TimelineDropPlacement,
 ): boolean {
   if (!apply || !Array.from(transfer.types).includes(mime)) return false;
   const payload = transfer.getData(mime);
@@ -98,7 +136,7 @@ export function useTimelineAssetDrop({
   sessionEpoch,
 }: UseTimelineAssetDropOptions) {
   const [isDragOver, setIsDragOver] = useState(false);
-  const [dropPreview, setDropPreview] = useState<TimelinePlacement | null>(null);
+  const [dropPreview, setDropPreview] = useState<TimelineDropPlacement | null>(null);
   const dragPointerRef = useRef<{ clientX: number; clientY: number; sessionEpoch: number } | null>(
     null,
   );
@@ -144,10 +182,10 @@ export function useTimelineAssetDrop({
   );
 
   const resolveDropPlacement = useCallback(
-    (clientX: number, clientY: number): TimelinePlacement => {
+    (clientX: number, clientY: number, canInsertTrack: boolean): TimelineDropPlacement => {
       const scroll = scrollRef.current;
       const rect = scroll?.getBoundingClientRect();
-      return resolveTimelineAssetDrop(
+      return placeDrop(
         {
           rectLeft: rect?.left ?? 0,
           rectTop: rect?.top ?? 0,
@@ -160,6 +198,7 @@ export function useTimelineAssetDrop({
         },
         clientX,
         clientY,
+        canInsertTrack,
       );
     },
     [scrollRef, ppsRef, trackOrderRef, rowGeometryRef, contentOrigin],
@@ -177,9 +216,11 @@ export function useTimelineAssetDrop({
       e.dataTransfer.dropEffect = "copy";
       activeDropEpochRef.current = sessionEpoch;
       setIsDragOver(true);
-      const next = resolveDropPlacement(e.clientX, e.clientY);
+      const next = resolveDropPlacement(e.clientX, e.clientY, canInsertTrackFor(types));
       setDropPreview((prev) =>
-        prev?.start === next.start && prev.track === next.track ? prev : next,
+        prev?.start === next.start && prev.track === next.track && prev.insertRow === next.insertRow
+          ? prev
+          : next,
       );
       syncAutoScroll(e.clientX, e.clientY);
     },
@@ -208,7 +249,8 @@ export function useTimelineAssetDrop({
       const canCommit = activeDropEpochRef.current === sessionEpoch;
       clearDropPreview();
       if (!canCommit) return;
-      const placement = resolveDropPlacement(e.clientX, e.clientY);
+      const types = Array.from(e.dataTransfer.types);
+      const placement = resolveDropPlacement(e.clientX, e.clientY, canInsertTrackFor(types));
 
       const compositionPayload = parseTimelineCompositionPayload(
         e.dataTransfer.getData(TIMELINE_COMPOSITION_MIME),

package/src/player/components/timelineLaneProps.ts

@@ -8,6 +8,7 @@ import type { TrackVisualStyle } from "./timelineIcons";
 import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
 import type { TimelineClipIndex, TimelineTimeRange } from "../lib/timelineClipIndex";
 import type { TimelineRowGeometry } from "./timelineLayout";
+import type { TimelineSnapTarget } from "./timelineSnapping";
 import type { TimelineVirtualRow } from "./useTimelineVirtualRows";
 import type { MultiDragPreviewInput } from "./timelineMultiDragPreview";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
@@ -112,6 +113,8 @@ export interface TimelineLaneBaseProps {
 export interface TimelineLanesProps extends TimelineLaneBaseProps {
   /** Live-derived by TimelineCanvas from {@link TimelineLaneBaseProps.draggedClip}. */
   draggedElement: TimelineElement | null;
+  /** Live move or trim snap target, resolved once by TimelineCanvas. */
+  snapGuide: TimelineSnapTarget | null;
   multiDragPreview: MultiDragPreviewInput | null;
   onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
   onTogglePropertyGroupKeyframe: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];

package/src/player/components/timelineSnapping.test.ts

@@ -4,6 +4,7 @@ import {
   collectTimelineSnapTargets,
   snapMoveToTargets,
   snapTimelineTime,
+  resolveSnapGuide,
 } from "./timelineSnapping";
 
 describe("collectTimelineSnapTargets", () => {
@@ -26,6 +27,18 @@ describe("collectTimelineSnapTargets", () => {
     expect(targets).toContainEqual({ time: 0.5, type: "beat" });
   });
 
+  it("omits the playhead when includePlayhead is false, for a trim", () => {
+    const targets = collectTimelineSnapTargets({
+      elements,
+      playheadTime: 7.25,
+      beatTimes: [0.5],
+      includePlayhead: false,
+    });
+    expect(targets.some((t) => t.type === "playhead")).toBe(false);
+    expect(targets).toContainEqual({ time: 2, type: "clip-edge" });
+    expect(targets).toContainEqual({ time: 0.5, type: "beat" });
+  });
+
   it("excludes the dragged element's own edges", () => {
     const targets = collectTimelineSnapTargets({
       elements,
@@ -132,3 +145,17 @@ describe("snapMoveToTargets", () => {
     expect(r.snapTime).toBeNull();
   });
 });
+
+describe("resolveSnapGuide", () => {
+  it("prefers a started move, falls back to a trim, and is null when neither snapped", () => {
+    const move = { started: true, snapTime: 2, snapType: "playhead" as const };
+    const trim = { snapTime: 5, snapType: "clip-edge" as const };
+    expect(resolveSnapGuide(move, trim)).toEqual({ time: 2, type: "playhead" });
+    expect(resolveSnapGuide({ ...move, started: false }, trim)).toEqual({
+      time: 5,
+      type: "clip-edge",
+    });
+    expect(resolveSnapGuide(null, { snapTime: null, snapType: null })).toBeNull();
+    expect(resolveSnapGuide(null, null)).toBeNull();
+  });
+});

package/src/player/components/timelineSnapping.ts

@@ -7,6 +7,16 @@ export interface TimelineSnapTarget {
   type: TimelineSnapType;
 }
 
+/** The guide the canvas draws: the live move's snap target, else the live trim's. */
+export function resolveSnapGuide(
+  moving: { started: boolean; snapTime: number | null; snapType: TimelineSnapType | null } | null,
+  trimming: { snapTime?: number | null; snapType?: TimelineSnapType | null } | null,
+): TimelineSnapTarget | null {
+  const source = moving?.started ? moving : trimming;
+  if (source?.snapTime == null || source.snapType == null) return null;
+  return { time: source.snapTime, type: source.snapType };
+}
+
 /** Pixel radius within which a time snaps to a target (matches historical beat snap). */
 export const TIMELINE_SNAP_PX = 8;
 
@@ -21,6 +31,8 @@ export function collectTimelineSnapTargets(input: {
   playheadTime: number | null;
   beatTimes: readonly number[];
   excludeElementKey?: string | null;
+  /** A trim excludes the playhead: the dragged edge drives it, so snapping to it is circular. */
+  includePlayhead?: boolean;
 }): TimelineSnapTarget[] {
   const byTime = new Map<number, TimelineSnapTarget>();
   const add = (time: number, type: TimelineSnapType) => {
@@ -38,7 +50,8 @@ export function collectTimelineSnapTargets(input: {
     add(el.start, "clip-edge");
     add(el.start + el.duration, "clip-edge");
   }
-  if (input.playheadTime != null) add(input.playheadTime, "playhead");
+  if (input.playheadTime != null && input.includePlayhead !== false)
+    add(input.playheadTime, "playhead");
 
   return Array.from(byTime.values()).sort((a, b) => a.time - b.time);
 }

package/src/player/components/trackHeaderLabelRows.tsx

@@ -39,7 +39,7 @@ function PropertyGroupNavigation({
   // bigger box; focus-visible matches every other control in this header.
   const CHEVRON_BUTTON_CLASS =
     "relative h-5 w-3 border-0 bg-transparent p-0 text-white/55 hover:text-white disabled:text-white/15 " +
-    "focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] " +
+    "focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] " +
     "before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 " +
     "before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
   const seekTo = (keyframe: { percentage: number } | null) => {
@@ -154,7 +154,7 @@ export function PropertyGroupHeaderRow({
           aria-label={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
           title={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
           // h-6 w-6 = the 24x24 WCAG 2.2 minimum target; the ◆ glyph stays 11px.
-          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-[#3CE6AC] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-[#3CE6AC] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
           onClick={(event) => {
             // Same as the disclosure caret and the eye: a control in the label
             // column owns its click, it does not also hit the track row behind it.
@@ -262,7 +262,7 @@ export function AutomationLaneHeaderRow({
         aria-label={onReveal ? `Show ${label} in the effect rack` : undefined}
         title={onReveal ? `Show ${label} in the effect rack` : label}
         disabled={!onReveal}
-        className="flex min-w-0 flex-1 flex-col justify-center rounded border-0 bg-transparent p-0 text-left leading-tight enabled:hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+        className="flex min-w-0 flex-1 flex-col justify-center rounded-sm border-0 bg-transparent p-0 text-left leading-tight enabled:hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
         onPointerDown={(event) => event.stopPropagation()}
         onClick={(event) => {
           // The label column owns its click; it does not also fall through to
@@ -311,7 +311,7 @@ export function AutomationLaneHeaderRow({
           aria-label={`Remove ${label} automation`}
           title={`Remove ${label} automation`}
           // h-6 w-6 is the 24x24 WCAG 2.2 target; the glyph stays small.
-          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-white/35 hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-white/35 hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
           onPointerDown={(event) => event.stopPropagation()}
           onClick={(event) => {
             // A control in the label column owns its click; it does not also hit