@hyperframes/studio 0.8.50 → 0.8.52

package/src/player/components/SpeedMenu.tsx

@@ -23,7 +23,7 @@ export const SpeedMenu = memo(function SpeedMenu({
   const speedMenuContainerRef = useContextMenuDismiss(closeMenu);
 
   return (
-    <div ref={speedMenuContainerRef} className="relative flex-shrink-0">
+    <div ref={speedMenuContainerRef} className="relative shrink-0">
       <Tooltip label="Playback speed">
         <button
           type="button"
@@ -57,10 +57,8 @@ export const SpeedMenu = memo(function SpeedMenu({
                   setPlaybackRate(rate);
                   setShowSpeedMenu(false);
                 }}
-                className={`block w-full px-3 py-1.5 text-[11px] text-left font-mono tabular-nums transition-colors outline-none focus-visible:bg-white/[0.04] ${
-                  isCurrent
-                    ? "text-neutral-50 bg-white/[0.06]"
-                    : "text-neutral-500 hover:bg-white/[0.04]"
+                className={`block w-full px-3 py-1.5 text-[11px] text-left font-mono tabular-nums transition-colors outline-hidden focus-visible:bg-white/4 ${
+                  isCurrent ? "text-neutral-50 bg-white/6" : "text-neutral-500 hover:bg-white/4"
                 }`}
               >
                 {rate}x

package/src/player/components/Timeline.tsx

@@ -233,6 +233,7 @@ export const Timeline = memo(function Timeline({
     onResizeElement: pinnedOnResizeElement,
     onResizeElements: pinnedOnResizeElements,
     onBlockedEditAttempt,
+    onSeek,
     setShowPopover,
     setRangeSelectionRef,
     readZIndex: zSyncEnabled ? readClipZIndex : undefined,
@@ -464,7 +465,7 @@ export const Timeline = memo(function Timeline({
         data-timeline-scroll-viewport
         data-timeline-auto-scroll-left-inset={labelMode ? LABEL_COL_W : 0}
         tabIndex={-1}
-        className={`${zoomMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto"} overflow-y-auto h-full outline-none`}
+        className={`${zoomMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto"} overflow-y-auto h-full outline-hidden`}
         onScroll={(e) => {
           lastScrollLeftRef.current = e.currentTarget.scrollLeft; // restored across post-edit reload
           recordTimelineScroll(e.currentTarget);

package/src/player/components/TimelineCanvas.tsx

@@ -2,6 +2,7 @@ import { memo } from "react";
 import { TimelineRuler } from "./TimelineRuler";
 import { PlayheadIndicator } from "./PlayheadIndicator";
 import type { TimelineRangeSelection } from "./timelineEditing";
+import type { TimelineDropPlacement } from "./timelineCallbacks";
 import {
   RULER_H,
   CLIP_Y,
@@ -23,6 +24,7 @@ import type { TimelineLaneBaseProps } from "./timelineLaneProps";
 import type { TimelineLaneGapStrips } from "./useTimelineGapHighlights";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { TimelineGestureOverlay } from "./TimelineGestureOverlay";
+import { resolveSnapGuide } from "./timelineSnapping";
 
 interface TimelineCanvasProps extends TimelineLaneBaseProps {
   major: number[];
@@ -40,14 +42,15 @@ interface TimelineCanvasProps extends TimelineLaneBaseProps {
   /** Gap strips: loud on gap-menu-row hover, quiet on the selected clip's lane. */
   laneGapStrips: TimelineLaneGapStrips[];
   /** Landing spot of an outside drag in progress, or null. */
-  dropPreview: { start: number; track: number } | null;
+  dropPreview: TimelineDropPlacement | null;
 }
 
 // A dropped clip's length is unknown until it lands; the preview shows a default.
 const DROP_PREVIEW_SECONDS = 3;
 
 export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvasProps) {
-  const { draggedClip, scrollRef, selectedElementIds, displayTrackOrder } = props;
+  const { draggedClip, resizingClip, scrollRef, selectedElementIds, displayTrackOrder } = props;
+  const snapGuide = resolveSnapGuide(draggedClip, resizingClip);
   const draggedRowIndex =
     draggedClip?.started === true ? displayTrackOrder.indexOf(draggedClip.previewTrack) : -1;
   const dropTrackIndex = props.dropPreview
@@ -55,6 +58,8 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
     : -1;
   // A track not in the order is a new track, drawn one row past the last lane.
   const dropRowIndex = dropTrackIndex < 0 ? displayTrackOrder.length : dropTrackIndex;
+  const insertLineRow =
+    (draggedClip?.started ? draggedClip.insertRow : null) ?? props.dropPreview?.insertRow ?? null;
   const draggedRowHeight = getTimelineRowHeight(draggedRowIndex, props.rowHeights);
   // A clip bar in an EXPANDED row still renders at TRACK_H (the property lanes
   // occupy the rest of the row — see TimelineLanes' clipHeight), so the drag
@@ -117,6 +122,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
 
       <TimelineLanes
         {...props}
+        snapGuide={snapGuide}
         draggedElement={draggedElement}
         multiDragPreview={multiDragPreview}
         onToggleTrackHidden={onToggleTrackHidden}
@@ -173,8 +179,8 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
             left: props.contentOrigin + draggedClip.previewStart * props.pps,
             width: Math.max(draggedClip.element.duration * props.pps, 4),
             height: draggedClipHeight,
-            border: "1px solid rgba(60,230,172,0.55)",
-            background: "rgba(60,230,172,0.12)",
+            border: "1px solid color-mix(in srgb, var(--color-accent) 55%, transparent)",
+            background: "color-mix(in srgb, var(--color-accent) 12%, transparent)",
             borderRadius: 4,
             zIndex: 30,
           }}
@@ -183,7 +189,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
 
       {/* Drop preview: where an asset or file dragged in from outside will land
           (a row past the last lane means a new track). */}
-      {props.dropPreview && (
+      {props.dropPreview && props.dropPreview.insertRow == null && (
         <div
           aria-hidden="true"
           data-testid="timeline-drop-preview"
@@ -193,8 +199,8 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
             left: props.contentOrigin + props.dropPreview.start * props.pps,
             width: DROP_PREVIEW_SECONDS * props.pps,
             height: TRACK_H - CLIP_Y * 2,
-            border: "1px solid rgba(60,230,172,0.55)",
-            background: "rgba(60,230,172,0.12)",
+            border: "1px solid color-mix(in srgb, var(--color-accent) 55%, transparent)",
+            background: "color-mix(in srgb, var(--color-accent) 12%, transparent)",
             borderRadius: 4,
             zIndex: 30,
           }}
@@ -203,11 +209,12 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
 
       {/* Insertion line — a new track will be inserted at this boundary on drop.
           Shown while the pointer is near a lane boundary (insert mode). */}
-      {draggedClip?.started && draggedClip.insertRow != null && (
+      {insertLineRow != null && (
         <div
+          data-testid="timeline-insert-line"
           className="absolute pointer-events-none"
           style={{
-            top: getTimelineRowTop(draggedClip.insertRow, props.rowHeights) - 0.5,
+            top: getTimelineRowTop(insertLineRow, props.rowHeights) - 0.5,
             left: props.contentOrigin,
             width: props.trackContentWidth,
             height: 1,
@@ -218,18 +225,18 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         />
       )}
 
-      {/* Snap guide for non-beat targets during clip drag */}
-      {draggedClip?.started && draggedClip.snapTime != null && draggedClip.snapType !== "beat" && (
+      {/* Snap guide for non-beat targets during a clip move or trim */}
+      {snapGuide && snapGuide.type !== "beat" && (
         <div
           className="absolute pointer-events-none"
           style={{
-            left: props.contentOrigin + draggedClip.snapTime * props.pps,
+            left: props.contentOrigin + snapGuide.time * props.pps,
             top: RULER_H,
             bottom: 0,
             width: 1,
-            background: draggedClip.snapType === "playhead" ? "#3CE6AC" : "rgba(255,255,255,0.6)",
+            background: snapGuide.type === "playhead" ? "#3CE6AC" : "rgba(255,255,255,0.6)",
             boxShadow:
-              draggedClip.snapType === "playhead"
+              snapGuide.type === "playhead"
                 ? "0 0 6px rgba(60,230,172,0.5)"
                 : "0 0 6px rgba(255,255,255,0.4)",
             zIndex: 60,

package/src/player/components/TimelineClip.tsx

@@ -71,7 +71,6 @@ export const TimelineClip = memo(function TimelineClip({
     isSelected ? "is-selected" : "",
     isHovered ? "is-hovered" : "",
     isDragging ? "is-dragging" : "",
-    showDefaultText ? "" : "is-micro",
     isAudioTimelineElement(el) ? "is-audio" : "",
   ]
     .filter((className) => className.length > 0)

package/src/player/components/TimelineDiamondConnectors.tsx

@@ -203,7 +203,7 @@ function SegmentEaseControl({
         // for that overlay the button keeps its 16x16 hit area, which is WCAG's
         // target-spacing exception: the neighbouring diamonds are themselves the
         // reason it cannot grow, and stealing their clicks is the worse failure.
-        className={`absolute flex items-center justify-center rounded ${restingVisible ? "opacity-40" : "opacity-0"} transition-opacity hover:opacity-100 group-hover:opacity-100 focus-visible:opacity-100 ${roomForFullTarget ? "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-['']" : ""}`}
+        className={`absolute flex items-center justify-center rounded-sm ${restingVisible ? "opacity-40" : "opacity-0"} transition-opacity hover:opacity-100 group-hover:opacity-100 focus-visible:opacity-100 ${roomForFullTarget ? "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-['']" : ""}`}
         style={{
           left: "50%",
           top: "50%",

package/src/player/components/TimelineEmptyState.tsx

@@ -19,7 +19,7 @@ export function TimelineEmptyState({
   return (
     <div
       className={`h-full border-t bg-[#0a0a0b] flex flex-col select-none transition-colors duration-150 ${
-        isDragOver ? "border-studio-accent/50 bg-studio-accent/[0.03]" : "border-neutral-800/50"
+        isDragOver ? "border-studio-accent/50 bg-studio-accent/3" : "border-neutral-800/50"
       }`}
       onDragOver={onDragOver}
       onDragLeave={onDragLeave}
@@ -27,7 +27,7 @@ export function TimelineEmptyState({
     >
       {/* Ruler */}
       <div
-        className="flex-shrink-0 border-b border-neutral-800/40 flex items-end relative"
+        className="shrink-0 border-b border-neutral-800/40 flex items-end relative"
         style={{ height: RULER_H, paddingLeft: GUTTER }}
       >
         {[0, 10, 20, 30, 40, 50].map((s) => (
@@ -49,7 +49,7 @@ export function TimelineEmptyState({
       <div className="flex-1 flex items-center justify-center">
         <div
           className={`flex items-center gap-3 px-6 py-3 border border-dashed rounded-lg transition-colors duration-150 ${
-            isDragOver ? "border-studio-accent/60 bg-studio-accent/[0.06]" : "border-neutral-700/50"
+            isDragOver ? "border-studio-accent/60 bg-studio-accent/6" : "border-neutral-700/50"
           }`}
         >
           {isDragOver ? (
@@ -63,7 +63,7 @@ export function TimelineEmptyState({
                 strokeWidth="1.5"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                className="text-studio-accent flex-shrink-0"
+                className="text-studio-accent shrink-0"
               >
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                 <polyline points="7 10 12 15 17 10" />
@@ -82,7 +82,7 @@ export function TimelineEmptyState({
                 strokeWidth="1.5"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                className="text-neutral-600 flex-shrink-0"
+                className="text-neutral-600 shrink-0"
               >
                 <rect x="2" y="2" width="20" height="20" rx="2" />
                 <path d="M7 2v20" />

package/src/player/components/TimelineFxButton.tsx

@@ -79,7 +79,7 @@ function GroupNameDialog({
       <div
         role="dialog"
         aria-label="This track cannot be grouped"
-        className="z-[200] w-64 rounded-md border border-white/10 bg-[#1b1b1f] p-3 text-[11px] leading-snug text-white/75 shadow-xl"
+        className="z-200 w-64 rounded-md border border-white/10 bg-[#1b1b1f] p-3 text-[11px] leading-snug text-white/75 shadow-xl"
         style={{ position: "fixed", ...groupDialogPosition(anchorRect) }}
         onPointerDown={(event) => event.stopPropagation()}
         onKeyDown={(event) => {
@@ -97,7 +97,7 @@ function GroupNameDialog({
     <div
       role="dialog"
       aria-label="Name this group"
-      className="z-[200] w-64 rounded-md border border-white/10 bg-[#1b1b1f] p-3 text-[11px] text-white/75 shadow-xl"
+      className="z-200 w-64 rounded-md border border-white/10 bg-[#1b1b1f] p-3 text-[11px] text-white/75 shadow-xl"
       style={{ position: "fixed", ...groupDialogPosition(anchorRect) }}
       onPointerDown={(event) => event.stopPropagation()}
       onKeyDown={(event) => {
@@ -115,7 +115,7 @@ function GroupNameDialog({
         aria-label="Group name"
         value={label}
         onChange={(event) => setLabel(event.currentTarget.value)}
-        className="w-full rounded border border-white/20 bg-black/30 px-1.5 py-1 text-[11px] text-white outline-none focus:border-[#3CE6AC]"
+        className="w-full rounded-sm border border-white/20 bg-black/30 px-1.5 py-1 text-[11px] text-white outline-hidden focus:border-[#3CE6AC]"
       />
       {/* The sentence. No jargon, and it names both things a bus does. */}
       <p className="mt-2 leading-snug">
@@ -125,14 +125,14 @@ function GroupNameDialog({
       <div className="mt-2.5 flex justify-end gap-1.5">
         <button
           type="button"
-          className="rounded border border-white/20 px-2 py-1 text-[10px] text-white/75 hover:bg-white/10"
+          className="rounded-sm border border-white/20 px-2 py-1 text-[10px] text-white/75 hover:bg-white/10"
           onClick={onCancel}
         >
           Cancel
         </button>
         <button
           type="button"
-          className="rounded border border-[#3CE6AC] bg-[#3CE6AC]/15 px-2 py-1 text-[10px] font-semibold text-[#3CE6AC] hover:bg-[#3CE6AC]/25"
+          className="rounded-sm border border-[#3CE6AC] bg-[#3CE6AC]/15 px-2 py-1 text-[10px] font-semibold text-[#3CE6AC] hover:bg-[#3CE6AC]/25"
           onClick={confirm}
         >
           Group
@@ -212,7 +212,7 @@ export function TimelineFxButton(props: TimelineFxButtonProps) {
           ref={buttonRef}
           aria-label="Effects — group these clips first"
           title="Group these clips to add effects to all of them"
-          className="flex h-6 items-center justify-center rounded border-0 bg-transparent px-1 text-[10px] font-semibold text-white/35 hover:text-white/75"
+          className="flex h-6 items-center justify-center rounded-sm border-0 bg-transparent px-1 text-[10px] font-semibold text-white/35 hover:text-white/75"
           onPointerDown={(event) => event.stopPropagation()}
           onClick={(event) => {
             event.stopPropagation();

package/src/player/components/TimelineGroupHeader.tsx

@@ -55,7 +55,7 @@ function GroupNameButton({
       // No `flex-1`: the row's control group owns the slack now (`ml-auto`), so
       // claiming it here would push the controls off the right edge — and the
       // count with them, since it rides inside this button.
-      className="flex h-6 min-w-0 items-center gap-1.5 rounded border-0 bg-transparent p-0 text-left text-[11px] text-white hover:text-[#3CE6AC] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+      className="flex h-6 min-w-0 items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 text-left text-[11px] text-white hover:text-[#3CE6AC] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
         event.stopPropagation();
@@ -67,7 +67,7 @@ function GroupNameButton({
       </span>
       {/* Wraps rather than truncating — a name that needs a hover to be read
           is no use in a column you scan. */}
-      <span className="min-w-0 break-words text-left font-medium leading-tight">{label}</span>
+      <span className="min-w-0 wrap-break-word text-left font-medium leading-tight">{label}</span>
       <span
         className="shrink-0 rounded-full bg-white/10 px-1 text-[9px] leading-[14px] tabular-nums text-white/55"
         aria-hidden="true"
@@ -99,7 +99,7 @@ export function TimelineGroupHeader({
     <div
       role="rowheader"
       aria-colindex={1}
-      className="sticky left-0 z-[12] flex shrink-0 items-center gap-1.5 overflow-hidden px-1.5 text-[11px]"
+      className="sticky left-0 z-12 flex shrink-0 items-center gap-1.5 overflow-hidden px-1.5 text-[11px]"
       style={{
         width: columnWidth,
         height: TRACK_H,
@@ -121,7 +121,7 @@ export function TimelineGroupHeader({
         // 13px mono, matching the property panel's preset-run caret
         // (`hf-fx-preset-run-caret`) — the same disclosure, so the same glyph
         // at the same size rather than a smaller one unique to this row.
-        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 font-mono text-[13px] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
+        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 font-mono text-[13px] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
           isExpanded ? "text-white" : "text-white/55 hover:text-white"
         }`}
         onPointerDown={(event) => event.stopPropagation()}
@@ -159,7 +159,7 @@ export function TimelineGroupHeader({
             aria-label={`${isLaneOpen ? "Hide" : "Show"} ${label} lanes`}
             title={`${isLaneOpen ? "Hide" : "Show"} lanes`}
             // Anchored right, matching every other header's lane toggle.
-            className={`ml-auto flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[11px] leading-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
+            className={`ml-auto flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[11px] leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
               isLaneOpen ? "text-[#3CE6AC]" : "text-white/55 hover:text-white"
             }`}
             onPointerDown={(event) => event.stopPropagation()}

package/src/player/components/TimelineGroupLaneLabels.tsx

@@ -64,7 +64,7 @@ export function TimelineGroupLaneLabels({
             key={lane.target}
             data-group-lane-label={lane.target}
             aria-label={`Show ${groupLabel} ${parts.name}${parts.param ? ` ${parts.param}` : ""} in the effect rack`}
-            className="absolute left-0 flex items-center gap-1.5 overflow-hidden border-0 px-1.5 text-left text-[10px] text-white/65 hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+            className="absolute left-0 flex items-center gap-1.5 overflow-hidden border-0 px-1.5 text-left text-[10px] text-white/65 hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
             style={{
               top: top + index * AUTOMATION_LANE_H,
               width: columnWidth,

package/src/player/components/TimelineGroupRow.tsx

@@ -140,7 +140,7 @@ export function TimelineGroupRow({
           around the labels alone does not work either, because as a flex item
           after the header it starts at x = columnWidth, i.e. inside the lanes. */}
       <div
-        className="sticky left-0 z-[12] shrink-0"
+        className="sticky left-0 z-12 shrink-0"
         style={{ width: contentOrigin >= LABEL_COL_W ? LABEL_COL_W : contentOrigin }}
       >
         <TimelineGroupHeader

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

@@ -72,6 +72,7 @@ interface RenderLanesOptions {
   onContextMenuLane?: (e: React.MouseEvent, track: number, time: number) => void;
   hoveredClip?: string | null;
   renderClipContent?: React.ComponentProps<typeof TimelineLanes>["renderClipContent"];
+  snapGuide?: { time: number; type: "beat" | "clip-edge" | "playhead" } | null;
 }
 
 function renderLanes(options: RenderLanesOptions = {}): {
@@ -141,6 +142,7 @@ function renderLanes(options: RenderLanesOptions = {}): {
           renderClipContent={next.renderClipContent}
           draggedClip={next.draggedClip ?? null}
           draggedElement={null}
+          snapGuide={next.snapGuide ?? null}
           multiDragPreview={next.multiDragPreview ?? null}
           blockedClipRef={createRef<BlockedClipState | null>()}
           suppressClickRef={{ current: false }}
@@ -179,6 +181,36 @@ function visibilityLabels(host: HTMLElement): (string | null)[] {
   );
 }
 
+/** The beat guide's own highlight div, keyed by the green glow every other beat lacks. */
+function beatHighlight(host: HTMLElement): HTMLElement | undefined {
+  return Array.from(host.querySelectorAll("div")).find((div) =>
+    (div.style.boxShadow ?? "").includes("34,197,94"),
+  );
+}
+
+describe("TimelineLanes beat guide", () => {
+  it("draws the beat highlight from snapGuide, not from the stale draggedClip prop", () => {
+    const view = renderLanes({
+      elements: [element("clip-a", TRACK_A)],
+      snapGuide: { time: 1.5, type: "beat" },
+    });
+
+    expect(beatHighlight(view.host)?.style.left).toBe("150px");
+    act(() => view.root.unmount());
+  });
+
+  it("clears the highlight once the trim it belonged to ends", () => {
+    const view = renderLanes({
+      elements: [element("clip-a", TRACK_A)],
+      snapGuide: { time: 1.5, type: "beat" },
+    });
+    view.rerender({ elements: [element("clip-a", TRACK_A)], snapGuide: null });
+
+    expect(beatHighlight(view.host)).toBeUndefined();
+    act(() => view.root.unmount());
+  });
+});
+
 describe("TimelineLanes track numbering", () => {
   // Screen readers literally announced "Hide track 0.16666666666666666".
   it("numbers tracks contiguously from 1 regardless of the fractional sort keys", () => {

package/src/player/components/TimelineLanes.tsx

@@ -59,6 +59,7 @@ export function TimelineLanes({
   hoveredClip,
   draggedClip,
   draggedElement,
+  snapGuide,
   multiDragPreview,
   blockedClipRef,
   suppressClickRef,
@@ -331,11 +332,7 @@ export function TimelineLanes({
                   beatTimes={beatAnalysis?.beatTimes}
                   beatStrengths={beatAnalysis?.beatStrengths}
                   pps={pps}
-                  highlightTime={
-                    draggedClip?.started && draggedClip.snapType === "beat"
-                      ? draggedClip.snapTime
-                      : null
-                  }
+                  highlightTime={snapGuide?.type === "beat" ? snapGuide.time : null}
                   renderTimeRange={rowsVirtualized ? renderTimeRange : undefined}
                 />
                 {/* Beat dots on the active track (the one holding the selection),

package/src/player/components/TimelineLayerGroupHeader.tsx

@@ -56,14 +56,14 @@ export function TimelineLayerGroupHeader({
       }}
     >
       <div
-        className="sticky left-0 z-[13] flex h-full items-center"
+        className="sticky left-0 z-13 flex h-full items-center"
         style={{
           width: Math.min(GUTTER + 220, GUTTER + trackContentWidth),
           background: theme.gutterBackground,
         }}
       >
         <div
-          className="relative h-full flex-shrink-0"
+          className="relative h-full shrink-0"
           style={{
             width: GUTTER,
             borderRight: `1px solid ${theme.gutterBorder}`,

package/src/player/components/TimelineRuler.tsx

@@ -85,7 +85,7 @@ export const TimelineRuler = memo(function TimelineRuler({
         style={{ height: RULER_H, width: contentOrigin + trackContentWidth, zIndex: 70 }}
       >
         <div
-          className="sticky left-0 z-[12] flex-shrink-0"
+          className="sticky left-0 z-12 shrink-0"
           style={{
             width: contentOrigin,
             // Ruler corner uses the panel surface — same as the ruler strip itself.

package/src/player/components/TimelineShortcutHint.tsx

@@ -12,7 +12,7 @@ export function TimelineShortcutHint({ theme }: TimelineShortcutHintProps) {
         style={{ background: "rgba(17,23,35,0.84)", borderColor: theme.gutterBorder }}
       >
         <kbd
-          className="text-[9px] font-mono px-1 py-0.5 rounded"
+          className="text-[9px] font-mono px-1 py-0.5 rounded-sm"
           style={{ color: theme.textSecondary, background: "rgba(255,255,255,0.06)" }}
         >
           Shift

package/src/player/components/TimelineTrackHeader.tsx

@@ -259,7 +259,7 @@ export function TimelineTrackHeader({
     <div
       role="rowheader"
       aria-colindex={1}
-      className="sticky left-0 z-[12] shrink-0"
+      className="sticky left-0 z-12 shrink-0"
       style={{
         width: showTrackLabel ? LABEL_COL_W : contentOrigin,
         background: gutterFill(theme.gutterBackground, isGroupMember),

package/src/player/components/TimelineTrackPlainHeader.tsx

@@ -39,7 +39,7 @@ export function VisibilityButton({
       type="button"
       aria-label={label}
       title={label}
-      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-[#3CE6AC] ${
+      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 transition-colors focus-visible:outline-solid focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-[#3CE6AC] ${
         hidden ? "text-[#3CE6AC] hover:text-white" : "text-white/35 hover:text-white/75"
       }`}
       onPointerDown={(event) => event.stopPropagation()}
@@ -97,10 +97,10 @@ export function PlainTrackHeader({
 
             Wraps rather than truncating: a truncated name needs a hover to be
             read at all, and a tooltip is no use to a name you are scanning a
-            column of. `break-words` so a long single token breaks instead of
+            column of. `wrap-break-word` so a long single token breaks instead of
             forcing the column wider. */}
         {showTrackLabel && (
-          <span className="min-w-0 break-words text-[11px] leading-tight">{trackLabel}</span>
+          <span className="min-w-0 wrap-break-word text-[11px] leading-tight">{trackLabel}</span>
         )}
         {showTrackLabel && <TrackClipCount clipCount={clipCount} />}
         {/* `ml-auto` is what anchors the group right: it absorbs the slack the

package/src/player/components/TimelineTypes.ts

@@ -12,7 +12,8 @@ export interface TimelineClipRenderContext {
 export interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverrides {
   /** Project-scoped reset boundary; soft source refreshes retain the same epoch. */
   sessionEpoch?: number;
-  onSeek?: (time: number) => void;
+  /** keepPlaying: true preserves the current play state across the seek. */
+  onSeek?: (time: number, options?: { keepPlaying?: boolean }) => void;
   onDrillDown?: (element: TimelineElement) => void;
   renderClipContent?: (
     element: TimelineElement,

package/src/player/components/TrackGapContextMenu.tsx

@@ -75,7 +75,7 @@ export const TrackGapContextMenu = memo(function TrackGapContextMenu({
   return createPortal(
     <div
       ref={menuRef}
-      className="fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
+      className="fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
       onPointerLeave={() => onHoverAction(null)}
     >

package/src/player/components/VideoThumbnail.tsx

@@ -94,7 +94,7 @@ export const VideoThumbnail = memo(function VideoThumbnail({
             return (
               <div
                 key={index}
-                className="relative h-full flex-shrink-0 overflow-hidden bg-neutral-900"
+                className="relative h-full shrink-0 overflow-hidden bg-neutral-900"
                 style={{ width: frameW }}
               >
                 <img
@@ -119,7 +119,9 @@ export const VideoThumbnail = memo(function VideoThumbnail({
       )}
       {snapshot.status === "error" && (
         <div className="absolute inset-0 flex items-center justify-center bg-neutral-900/60">
-          <span className="rounded bg-black/50 px-1 text-[8px] text-neutral-500">no preview</span>
+          <span className="rounded-sm bg-black/50 px-1 text-[8px] text-neutral-500">
+            no preview
+          </span>
         </div>
       )}
       {label && (

package/src/player/components/VolumeControl.tsx

@@ -52,7 +52,7 @@ export const VolumeControl = memo(function VolumeControl({
   const muteLabel = silent ? "Unmute audio" : "Mute audio";
 
   return (
-    <div className="group flex flex-shrink-0 items-center">
+    <div className="group flex shrink-0 items-center">
       <div className="w-0 overflow-hidden opacity-0 transition-[width,opacity] duration-150 ease-out group-hover:w-14 group-hover:opacity-100 group-focus-within:w-14 group-focus-within:opacity-100">
         <div className="relative mx-1 flex h-6 w-12 items-center">
           <div className="absolute inset-x-0 h-0.5 overflow-hidden rounded-full bg-neutral-700">
@@ -92,7 +92,7 @@ export const VolumeControl = memo(function VolumeControl({
           disabled={disabled}
           aria-label={muteLabel}
           aria-pressed={silent}
-          className={`flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${
+          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${
             silent ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
           }`}
         >

package/src/player/components/timelineCallbacks.ts

@@ -14,20 +14,20 @@ export interface TimelinePropertyGroupKeyframeToggle {
   remove: boolean;
 }
 
+/** Where an outside drop lands; `insertRow` opens a new track at that row boundary of `trackOrder`. */
+export type TimelineDropPlacement = { start: number; track: number } & (
+  | { insertRow?: null; trackOrder?: undefined }
+  | { insertRow: number; trackOrder: readonly number[] }
+);
+
 /**
  * Shared callback signatures for timeline editing operations.
  * Used by NLELayout, Timeline, and any component that passes through
  * the standard set of timeline mutation handlers.
  */
 export interface TimelineDropCallbacks {
-  onFileDrop?: (
-    files: File[],
-    placement?: { start: number; track: number },
-  ) => Promise<void> | void;
-  onAssetDrop?: (
-    assetPath: string,
-    placement: { start: number; track: number },
-  ) => Promise<void> | void;
+  onFileDrop?: (files: File[], placement?: TimelineDropPlacement) => Promise<void> | void;
+  onAssetDrop?: (assetPath: string, placement: TimelineDropPlacement) => Promise<void> | void;
   onBlockDrop?: (
     blockName: string,
     placement: { start: number; track: number },