@hyperframes/studio 0.8.59 → 0.8.61

package/src/player/components/TimelineClipFades.tsx

@@ -192,13 +192,14 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
           viewBox={`0 0 ${Math.max(widthPx, 1)} 100`}
           preserveAspectRatio="none"
         >
-          {/* The shaded wedge is the gain that is NOT there: above the ramp. */}
+          {/* Keep the #4250 wedge geometry, but let the real waveform read through it. */}
           {showIn && (
             <>
               <polygon
                 data-testid="clip-fade-in"
                 points={`0,0 ${inPx},0 0,100`}
                 fill="var(--timeline-fade-shade)"
+                fillOpacity={0.35}
               />
               <line
                 x1={0}
@@ -218,6 +219,7 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
                 data-testid="clip-fade-out"
                 points={`${widthPx - outPx},0 ${widthPx},0 ${widthPx},100`}
                 fill="var(--timeline-fade-shade)"
+                fillOpacity={0.35}
               />
               <line
                 x1={widthPx - outPx}
@@ -235,54 +237,85 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
       )}
       {canEdit && (
         <>
-          <div
-            role="slider"
-            tabIndex={-1}
-            aria-label="Fade in"
-            aria-valuemin={0}
-            aria-valuemax={Math.max(0, el.duration - fades.fadeOut)}
-            aria-valuenow={fades.fadeIn}
-            aria-valuetext={`${formatFadeSeconds(fades.fadeIn)}s`}
-            data-testid="clip-fade-handle-in"
-            title={`Fade in: ${formatFadeSeconds(fades.fadeIn)}s — drag to change`}
+          <FadeHandle
+            direction="in"
+            value={fades.fadeIn}
+            max={Math.max(0, el.duration - fades.fadeOut)}
             style={handleStyle(inPx)}
+            dragging={dragging === "in"}
             onPointerDown={onHandlePointerDown("in")}
             onPointerMove={onHandlePointerMove}
             onPointerUp={(e) => finish(e, false)}
             onPointerCancel={(e) => finish(e, true)}
             onKeyDown={onHandleKeyDown}
-            onClick={(e) => e.stopPropagation()}
-            onDoubleClick={(e) => e.stopPropagation()}
-          >
-            <FadeDot active={dragging === "in"} />
-          </div>
-          <div
-            role="slider"
-            tabIndex={-1}
-            aria-label="Fade out"
-            aria-valuemin={0}
-            aria-valuemax={Math.max(0, el.duration - fades.fadeIn)}
-            aria-valuenow={fades.fadeOut}
-            aria-valuetext={`${formatFadeSeconds(fades.fadeOut)}s`}
-            data-testid="clip-fade-handle-out"
-            title={`Fade out: ${formatFadeSeconds(fades.fadeOut)}s — drag to change`}
+          />
+          <FadeHandle
+            direction="out"
+            value={fades.fadeOut}
+            max={Math.max(0, el.duration - fades.fadeIn)}
             style={handleStyle(widthPx - outPx)}
+            dragging={dragging === "out"}
             onPointerDown={onHandlePointerDown("out")}
             onPointerMove={onHandlePointerMove}
             onPointerUp={(e) => finish(e, false)}
             onPointerCancel={(e) => finish(e, true)}
             onKeyDown={onHandleKeyDown}
-            onClick={(e) => e.stopPropagation()}
-            onDoubleClick={(e) => e.stopPropagation()}
-          >
-            <FadeDot active={dragging === "out"} />
-          </div>
+          />
         </>
       )}
     </>
   );
 }
 
+function FadeHandle({
+  direction,
+  value,
+  max,
+  style,
+  dragging,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  onKeyDown,
+}: {
+  direction: "in" | "out";
+  value: number;
+  max: number;
+  style: CSSProperties;
+  dragging: boolean;
+  onPointerDown: (event: PointerEvent<HTMLDivElement>) => void;
+  onPointerMove: (event: PointerEvent<HTMLDivElement>) => void;
+  onPointerUp: (event: PointerEvent<HTMLDivElement>) => void;
+  onPointerCancel: (event: PointerEvent<HTMLDivElement>) => void;
+  onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+}) {
+  const label = direction === "in" ? "Fade in" : "Fade out";
+  return (
+    <div
+      role="slider"
+      tabIndex={-1}
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-valuetext={`${formatFadeSeconds(value)}s`}
+      data-testid={`clip-fade-handle-${direction}`}
+      title={`${label}: ${formatFadeSeconds(value)}s — drag to change`}
+      style={style}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerCancel}
+      onKeyDown={onKeyDown}
+      onClick={(e) => e.stopPropagation()}
+      onDoubleClick={(e) => e.stopPropagation()}
+    >
+      <FadeDot active={dragging} />
+    </div>
+  );
+}
+
 function FadeDot({ active }: { active: boolean }) {
   return (
     <span

package/src/player/components/TimelineDiamondConnectors.tsx

@@ -213,8 +213,8 @@ function SegmentEaseControl({
           zIndex: 3,
           pointerEvents: "auto",
           padding: 0,
-          border: "1px solid rgba(255, 255, 255, 0.14)",
-          background: "#171717",
+          border: "1px solid var(--timeline-diamond-border)",
+          background: "var(--timeline-diamond-bg)",
           cursor: "pointer",
         }}
         onPointerDown={(e) => {

package/src/player/components/TimelineEmptyState.tsx

@@ -18,7 +18,7 @@ export function TimelineEmptyState({
 }: TimelineEmptyStateProps) {
   return (
     <div
-      className={`h-full border-t bg-[#0a0a0b] flex flex-col select-none transition-colors duration-150 ${
+      className={`h-full border-t bg-[var(--timeline-shell-bg)] flex flex-col select-none transition-colors duration-150 ${
         isDragOver ? "border-studio-accent/50 bg-studio-accent/3" : "border-neutral-800/50"
       }`}
       onDragOver={onDragOver}

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-[var(--timeline-tick-major)] bg-[var(--timeline-dialog-bg)] p-3 text-[11px] leading-snug text-[var(--timeline-text-soft)] 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-[var(--timeline-tick-major)] bg-[var(--timeline-dialog-bg)] p-3 text-[11px] text-[var(--timeline-text-soft)] shadow-xl"
       style={{ position: "fixed", ...groupDialogPosition(anchorRect) }}
       onPointerDown={(event) => event.stopPropagation()}
       onKeyDown={(event) => {
@@ -108,14 +108,14 @@ function GroupNameDialog({
         if (event.key === "Enter") confirm();
       }}
     >
-      <p className="mb-1.5 font-medium text-white">Name this group</p>
+      <p className="mb-1.5 font-medium text-[var(--timeline-text-solid)]">Name this group</p>
       <input
         ref={inputRef}
         type="text"
         aria-label="Group name"
         value={label}
         onChange={(event) => setLabel(event.currentTarget.value)}
-        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]"
+        className="w-full rounded-sm border border-[var(--timeline-border-strong)] bg-[var(--timeline-input-bg)] px-1.5 py-1 text-[11px] text-[var(--timeline-text-solid)] outline-hidden focus:border-[var(--timeline-accent)]"
       />
       {/* 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-sm border border-white/20 px-2 py-1 text-[10px] text-white/75 hover:bg-white/10"
+          className="rounded-sm border border-[var(--timeline-border-strong)] px-2 py-1 text-[10px] text-[var(--timeline-text-soft)] hover:bg-[var(--timeline-tick-major)]"
           onClick={onCancel}
         >
           Cancel
         </button>
         <button
           type="button"
-          className="rounded-sm 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-[var(--timeline-accent)] bg-[var(--timeline-accent-button-bg)] px-2 py-1 text-[10px] font-semibold text-[var(--timeline-accent)] hover:bg-[var(--timeline-accent-hover)]"
           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-sm 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-[var(--timeline-text-faint)] hover:text-[var(--timeline-text-soft)]"
           onPointerDown={(event) => event.stopPropagation()}
           onClick={(event) => {
             event.stopPropagation();
@@ -253,7 +253,9 @@ export function TimelineFxButton(props: TimelineFxButtonProps) {
         aria-label={nodeCount > 0 ? `Effects — ${nodeCount} applied` : "Effects"}
         title="Effects"
         className={`flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[10px] font-semibold transition-colors ${
-          open || nodeCount > 0 ? "text-[#3CE6AC]" : "text-white/35 hover:text-white/75"
+          open || nodeCount > 0
+            ? "text-[var(--timeline-accent)]"
+            : "text-[var(--timeline-text-faint)] hover:text-[var(--timeline-text-soft)]"
         }`}
         onPointerDown={(event) => event.stopPropagation()}
         onClick={(event) => {

package/src/player/components/TimelineGroupHeader.tsx

@@ -55,21 +55,24 @@ 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-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]"
+      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-[var(--timeline-text-solid)] hover:text-[var(--timeline-accent)] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)]"
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
         event.stopPropagation();
         onOpenFxRack();
       }}
     >
-      <span aria-hidden="true" className="shrink-0 text-[12px] leading-none text-white/50">
+      <span
+        aria-hidden="true"
+        className="shrink-0 text-[12px] leading-none text-[var(--timeline-track-label)]"
+      >
         ▤
       </span>
       <span title={label} className="min-w-0 truncate 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"
+        className="shrink-0 rounded-full bg-[var(--timeline-tick-major)] px-1 text-[9px] leading-[14px] tabular-nums text-[var(--timeline-handle)]"
         aria-hidden="true"
         title={`${memberCount} tracks`}
       >
@@ -103,7 +106,7 @@ export function TimelineGroupHeader({
       style={{
         width: columnWidth,
         height: TRACK_H,
-        color: "#ffffff",
+        color: "var(--timeline-text-solid)",
         background: theme.gutterBackground,
         borderRight: `1px solid ${theme.gutterBorder}`,
       }}
@@ -119,8 +122,10 @@ 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-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
-          isExpanded ? "text-white" : "text-white/55 hover:text-white"
+        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-[var(--timeline-accent)] ${
+          isExpanded
+            ? "text-[var(--timeline-text-solid)]"
+            : "text-[var(--timeline-handle)] hover:text-[var(--timeline-text-solid)]"
         }`}
         onPointerDown={(event) => event.stopPropagation()}
         onClick={(event) => {
@@ -157,8 +162,10 @@ 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-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
-              isLaneOpen ? "text-[#3CE6AC]" : "text-white/55 hover:text-white"
+            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-[var(--timeline-accent)] ${
+              isLaneOpen
+                ? "text-[var(--timeline-accent)]"
+                : "text-[var(--timeline-handle)] hover:text-[var(--timeline-text-solid)]"
             }`}
             onPointerDown={(event) => event.stopPropagation()}
             onClick={(event) => {
@@ -167,7 +174,9 @@ export function TimelineGroupHeader({
             }}
           >
             <span aria-hidden="true">∿</span>
-            <span className="text-[9px] tabular-nums text-white/55">{laneCount}</span>
+            <span className="text-[9px] tabular-nums text-[var(--timeline-handle)]">
+              {laneCount}
+            </span>
           </button>
         )}
       </div>

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-solid 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-[var(--timeline-text-secondary)] hover:text-[var(--timeline-text-solid)] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)]"
             style={{
               top: top + index * AUTOMATION_LANE_H,
               width: columnWidth,
@@ -79,16 +79,23 @@ export function TimelineGroupLaneLabels({
               onReveal?.(lane.target);
             }}
           >
-            <span aria-hidden="true" className="shrink-0 text-[11px] text-white/40">
+            <span
+              aria-hidden="true"
+              className="shrink-0 text-[11px] text-[var(--timeline-text-dim)]"
+            >
               ▤
             </span>
             <span className="flex min-w-0 flex-1 flex-col justify-center leading-tight">
-              <span className="truncate font-mono text-[9px] text-white/70">{parts.name}</span>
+              <span className="truncate font-mono text-[9px] text-[var(--timeline-text-bright)]">
+                {parts.name}
+              </span>
               {parts.param ? (
-                <span className="truncate font-mono text-[9px] text-white/40">{parts.param}</span>
+                <span className="truncate font-mono text-[9px] text-[var(--timeline-text-dim)]">
+                  {parts.param}
+                </span>
               ) : null}
             </span>
-            <span className="shrink-0 font-mono text-[9px] tabular-nums text-white/55">
+            <span className="shrink-0 font-mono text-[9px] tabular-nums text-[var(--timeline-handle)]">
               {value.toFixed(2)}
             </span>
           </button>

package/src/player/components/TimelineGroupRow.tsx

@@ -21,7 +21,7 @@ import { usePlayerStore } from "../store/playerStore";
 
 /** Accent rail on a group-owned lane — the same green the member rail uses, so
  *  "this belongs to the group" reads the same in both places (groups doc §5). */
-const GROUP_LANE_ACCENT = "#3CE6AC";
+const GROUP_LANE_ACCENT = "var(--timeline-accent)";
 
 interface TimelineGroupRowProps {
   index: number;

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

@@ -432,6 +432,20 @@ describe("TimelineLanes selection", () => {
 });
 
 describe("TimelineLanes clip thumbnails", () => {
+  it("keeps thumbnail content inside a selected clip", () => {
+    const selected = element("clip-a", TRACK_A);
+    const view = renderLanes({
+      elements: [selected],
+      selectedElementIds: new Set([selected.id]),
+      renderClipContent: () => <div className="absolute inset-0 bg-neutral-900" data-thumbnail />,
+    });
+
+    const clip = view.host.querySelector('[data-el-id="clip-a"]');
+    expect(clip?.classList.contains("is-selected")).toBe(true);
+    expect(clip?.querySelector("[data-thumbnail]")).not.toBeNull();
+    act(() => view.root.unmount());
+  });
+
   it("asks for the same frames at rest, hovered and selected", () => {
     const rich: unknown[] = [];
     const renderClipContent = vi.fn(

package/src/player/components/TimelineLanes.tsx

@@ -32,6 +32,8 @@ import { queryTimelineClipIndex } from "../lib/timelineClipIndex";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { timelineClipFocusId } from "./timelineNavigationIdentity";
 import { useTimelineKeyboardActor } from "./useTimelineKeyboardActor";
+import { deriveTimelineTransitionSeams } from "./timelineTransitionSeams";
+import { TimelineTransitionOverlays } from "./TimelineTransitionOverlays";
 
 export function TimelineLanes({
   pps,
@@ -104,13 +106,15 @@ export function TimelineLanes({
   const { collapsedGroupIds, expandedLaneOwnerIds, toggleGroupExpanded, toggleLaneOwnerExpanded } =
     useTimelineGroupDisclosure();
   const automationLanes = useAutomationLanes();
+  const allTransitionElements = useMemo(
+    () => tracks.flatMap(([, elements]) => elements.map(getPreviewElement)),
+    [getPreviewElement, tracks],
+  );
   // A group's automation clock is COMPOSITION time (groups doc §1.3), so its
   // synthetic lane element spans the whole composition rather than a clip.
   const compositionDuration = usePlayerStore((s) => s.duration);
   useAutomationSelectionKeyboard({ lanes: automationLanes });
   const { logicalRowsByTrack, groupByAnchor } = useTimelineLaneRowIndexes(logicalRows, groups);
-  // Which tracks are group MEMBERS, so their headers can render the level-2
-  // nesting their `aria-level` already reports.
   const groupMemberTracks = useMemo(
     () => new Set(groups.flatMap((group) => group.memberTracks)),
     [groups],
@@ -197,11 +201,7 @@ export function TimelineLanes({
           const ts = trackStyles.get(trackNum) ?? getTrackStyle("");
           const isPendingTrack =
             draggedClip?.started === true && !trackOrder.includes(trackNum) && els.length === 0;
-          // All lanes use the same uniform color — no alternating stripes.
           const rowBackground = theme.rowBackground;
-          // The beat-dot strip occupies the top of this track's lane (active track,
-          // or the music track when nothing is selected). When shown, keyframe
-          // diamonds shrink + drop to the bottom half so they don't collide with it.
           const beatStripOnTrack = trackShowsBeatStrip(els, beatAnalysis?.beatTimes, {
             selectedElementId,
             isMusicTrack,
@@ -223,9 +223,10 @@ export function TimelineLanes({
           // property lanes are showing. Undefined means "fill the row", which is
           // right only while it is collapsed and the row is nothing but bar.
           const clipBarHeight = rowExpanded ? TRACK_H - 2 * CLIP_Y : undefined;
-          // The clips whose envelopes this row draws, at their dragged positions.
-          // Once per row, not once per clip in the map below.
           const automationElements = els.map(getPreviewElement);
+          const transitionSeams = deriveTimelineTransitionSeams(allTransitionElements).filter(
+            (seam) => seam.incoming.track === trackNum,
+          );
           // Minted here because this is the only place that sees BOTH ends of
           // the disclosure: the caret in the sticky header and the diamond lanes
           // on the canvas. Keyed by display row, not by `trackNum`, which is a
@@ -553,6 +554,12 @@ export function TimelineLanes({
                     );
                   })
                 }
+                <TimelineTransitionOverlays
+                  seams={transitionSeams}
+                  pixelsPerSecond={pps}
+                  rowHeight={rowHeight}
+                  clipBarHeight={clipBarHeight}
+                />
                 {/* The automation lanes belong to the ROW, so they are mounted
                     here rather than under the active clip's property lanes.
                     Hanging off that clip meant selecting a sibling moved the

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

@@ -386,7 +386,7 @@ describe("TimelinePropertyLanes", () => {
     const positionFill = laneDiamonds(host, "position")[0]?.querySelector("path:last-child");
     const visualFill = laneDiamonds(host, "visual")[0]?.querySelector("path:last-child");
     expect(positionFill?.getAttribute("fill")).toBe("#4ba3d2");
-    expect(visualFill?.getAttribute("fill")).toBe("#a3a3a3");
+    expect(visualFill?.getAttribute("fill")).toBe("var(--timeline-diamond-muted)");
     act(() => root.unmount());
   });
 

package/src/player/components/TimelineRazorInteraction.tsx

@@ -54,7 +54,7 @@ export function TimelineRazorGuideOverlay({ x }: { x: number }) {
   return (
     <div
       className="absolute top-0 bottom-0 pointer-events-none z-10"
-      style={{ left: x, width: 1, background: "rgba(239,68,68,0.7)" }}
+      style={{ left: x, width: 1, background: "var(--timeline-danger)" }}
     />
   );
 }

package/src/player/components/TimelineRuler.tsx

@@ -69,7 +69,8 @@ export const TimelineRuler = memo(function TimelineRuler({
                 y1={0}
                 x2={x}
                 y2={totalH}
-                stroke={`rgba(34, 197, 94, ${opacity.toFixed(3)})`}
+                stroke="var(--timeline-beat)"
+                strokeOpacity={opacity}
                 strokeWidth="1"
               />
             );
@@ -99,7 +100,7 @@ export const TimelineRuler = memo(function TimelineRuler({
           style={{
             height: RULER_H,
             width: trackContentWidth,
-            // Ruler background = panel surface (#0A0A0B) — no bottom border,
+            // Ruler background = the panel surface token — no bottom border,
             // no tick lines (CapCut-style clean ruler, labels only).
             background: theme.shellBackground,
           }}

package/src/player/components/TimelineShortcutHint.tsx

@@ -9,11 +9,11 @@ export function TimelineShortcutHint({ theme }: TimelineShortcutHintProps) {
     <div className="absolute bottom-2 right-3 pointer-events-none z-20">
       <div
         className="flex items-center gap-1.5 px-2 py-1 rounded-md border"
-        style={{ background: "rgba(17,23,35,0.84)", borderColor: theme.gutterBorder }}
+        style={{ background: "var(--timeline-shortcut-bg)", borderColor: theme.gutterBorder }}
       >
         <kbd
           className="text-[9px] font-mono px-1 py-0.5 rounded-sm"
-          style={{ color: theme.textSecondary, background: "rgba(255,255,255,0.06)" }}
+          style={{ color: theme.textSecondary, background: "var(--timeline-tick-minor)" }}
         >
           Shift
         </kbd>

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

@@ -793,7 +793,7 @@ describe("TimelineTrackHeader", () => {
         isGroupMember: true,
       });
       expect(header()?.style.paddingLeft).toBe("14px");
-      expect(header()?.style.borderLeft).toContain("2px");
+      expect(header()?.style.borderLeft).toContain("var(--timeline-accent-rail)");
       act(() => view.root.unmount());
     });
 

package/src/player/components/TimelineTrackHeader.tsx

@@ -26,12 +26,10 @@ import { useMemo } from "react";
 
 /** Accent rail + inset marking a row as a group MEMBER, matching the level-2
  *  nesting its `aria-level` already reports. */
-const GROUP_MEMBER_RAIL = "#3CE6AC59";
+const GROUP_MEMBER_RAIL = "var(--timeline-accent-rail)";
 const GROUP_MEMBER_INDENT = 14;
-/** A hair lighter than `gutterBackground`, so a member row reads as sitting
- *  INSIDE its group rather than beside it. Overlaid rather than hard-coded so
- *  it tracks whatever the theme's gutter is. */
-const GROUP_MEMBER_TINT = "rgba(255,255,255,0.035)";
+/** A neutral wash keeps group membership visible without changing the row's hue. */
+const GROUP_MEMBER_TINT = "var(--timeline-group-member-tint)";
 
 /** The gutter fill for a row, tinted when it belongs to a group. */
 export function gutterFill(base: string, isGroupMember: boolean): string {
@@ -288,7 +286,7 @@ export function TimelineTrackHeader({
           <div
             className={
               showTrackLabel
-                ? "flex flex-col justify-center gap-0.5 px-1.5 text-white/55"
+                ? "flex flex-col justify-center gap-0.5 px-1.5 text-[var(--timeline-handle)]"
                 : "flex flex-col items-center justify-center gap-0.5"
             }
             style={{ height: TRACK_H }}

package/src/player/components/TimelineTrackPlainHeader.tsx

@@ -39,8 +39,10 @@ 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-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"
+      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-[var(--timeline-accent)] ${
+        hidden
+          ? "text-[var(--timeline-accent)] hover:text-[var(--timeline-text-solid)]"
+          : "text-[var(--timeline-text-faint)] hover:text-[var(--timeline-text-soft)]"
       }`}
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
@@ -89,7 +91,12 @@ export function PlainTrackHeader({
           and the name gives way instead. */}
       <div className="flex min-w-0 items-center gap-1">
         {isAudioTrack && (
-          <Music size={12} weight="fill" aria-hidden="true" className="text-white/35" />
+          <Music
+            size={12}
+            weight="fill"
+            aria-hidden="true"
+            className="text-[var(--timeline-text-faint)]"
+          />
         )}
         {/* No `flex-1`: the name takes only the width it needs, so the clip
             count sits against it rather than being pushed out to meet the

package/src/player/components/TimelineTransitionBadge.tsx

@@ -0,0 +1,59 @@
+import type { CSSProperties } from "react";
+
+interface TimelineTransitionBadgeProps {
+  centerPx: number;
+  top: number;
+  widthPx: number;
+  outgoingSrc?: string;
+  incomingSrc?: string;
+}
+
+export function TimelineTransitionBadge({
+  centerPx,
+  top,
+  widthPx,
+  outgoingSrc,
+  incomingSrc,
+}: TimelineTransitionBadgeProps) {
+  const style = {
+    left: centerPx,
+    top,
+    "--timeline-transition-zone-width": `${widthPx}px`,
+  } as CSSProperties;
+  return (
+    <div className="timeline-transition" style={style} aria-hidden="true">
+      <div className="timeline-transition__zone">
+        <div
+          className="timeline-transition__image timeline-transition__image--out"
+          style={outgoingSrc ? { backgroundImage: `url("${outgoingSrc}")` } : undefined}
+        />
+        <div
+          className="timeline-transition__image timeline-transition__image--in"
+          style={incomingSrc ? { backgroundImage: `url("${incomingSrc}")` } : undefined}
+        />
+      </div>
+      <div className="timeline-transition__badge">
+        <svg viewBox="0 0 20 20" role="presentation">
+          <defs>
+            <filter id="timeline-transition-glyph-blur">
+              <feGaussianBlur stdDeviation="0.55" />
+            </filter>
+          </defs>
+          <path
+            className="timeline-transition__frame timeline-transition__frame--out"
+            d="M3 5h8v10H3z"
+          />
+          <path
+            className="timeline-transition__frame timeline-transition__frame--in"
+            d="M9 5h8v10H9z"
+          />
+          <path
+            className="timeline-transition__intersection"
+            d="M9 5h2v10H9z"
+            filter="url(#timeline-transition-glyph-blur)"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}

package/src/player/components/TimelineTransitionOverlays.tsx

@@ -0,0 +1,30 @@
+import { CLIP_Y } from "./timelineLayout";
+import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
+import type { TimelineTransitionSeam } from "./timelineTransitionSeams";
+import { TimelineTransitionBadge } from "./TimelineTransitionBadge";
+
+interface TimelineTransitionOverlaysProps {
+  seams: readonly TimelineTransitionSeam[];
+  pixelsPerSecond: number;
+  rowHeight: number;
+  clipBarHeight?: number;
+}
+
+export function TimelineTransitionOverlays({
+  seams,
+  pixelsPerSecond,
+  rowHeight,
+  clipBarHeight,
+}: TimelineTransitionOverlaysProps) {
+  const top = CLIP_Y + (clipBarHeight ?? rowHeight - 2 * CLIP_Y) / 2;
+  return seams.map((seam) => (
+    <TimelineTransitionBadge
+      key={`${getTimelineElementIdentity(seam.outgoing)}-${getTimelineElementIdentity(seam.incoming)}`}
+      centerPx={seam.centerTime * pixelsPerSecond}
+      top={top}
+      widthPx={Math.min(Math.max(seam.duration * pixelsPerSecond, 24), 32)}
+      outgoingSrc={seam.outgoing.src}
+      incomingSrc={seam.incoming.src}
+    />
+  ));
+}