@real-music-packages/web-core 0.14.0 → 0.16.0

package/dist/scene/index.d.ts

@@ -670,15 +670,25 @@ interface NotationProps {
 declare const notationFactory: LayerFactory<NotationProps>;
 
 interface ScrollCursorProps {
+    /**
+     * Cursor pacing mode. Default `'audio'` (foolproof): the cursor is driven
+     * note-by-note off the audio clock against each note's `onsetMs`, so it lands
+     * on every note as it sounds and can never race/desync the full score width —
+     * correct by construction regardless of timeline. `'linear'` is the legacy
+     * measure-linear sweep paced over `musicMs` (RSR's original behaviour) — kept
+     * for back-compat; prefer leaving this unset.
+     */
+    mode?: 'audio' | 'linear';
     /** Bars visible in the follow window. Default 2 (RSR FOLLOW_BARS). Informational
      *  for v1 — the geometry uses the module constant unless overridden here. */
     followBars?: number;
     /** Opening-zoom duration in ms before the music/cursor start (RSR INTRO_MS=900).
-     *  During this lead-in camProgress is held at 0. Default 900. */
+     *  During this lead-in the follow window is held at the start. Default 900. */
     openingZoomMs?: number;
-    /** Total music length in ms (RSR musicMs). Required to pace camProgress + the
-     *  cursor against the audio clock. */
-    musicMs: number;
+    /** Total music length in ms (RSR musicMs). Required by `'linear'` to pace
+     *  camProgress; in `'audio'` mode it is optional (the onset clock drives pacing)
+     *  and used only as a fallback when the score has no notes. */
+    musicMs?: number;
     /** Cursor stroke colour. Defaults to theme.accent. */
     color?: string;
 }
@@ -755,6 +765,24 @@ interface PlayheadLine {
     alpha: number;
 }
 declare function playheadLine(layout: NotationLayout, t01: number): PlayheadLine | null;
+/** Distinct, sorted note onsets from a Score's notes. */
+declare function distinctOnsets(notes: {
+    onsetMs: number;
+}[]): number[];
+/**
+ * The FOOLPROOF audio-driven playhead line for absolute audio time `tMs`.
+ *
+ * `tMs` is the audio clock; `onsetsMs` are the score's distinct note onsets
+ * (sorted). The cursor is the time-lerp of the two anchors bracketing `tMs`:
+ * before the first onset it holds on anchor 0; after the last it holds on the
+ * last; in a gap it eases between the bracketing onsets. Pure function of
+ * (layout, onsetsMs, tMs). Returns null only when there is no geometry to anchor
+ * to (falls back to the rect sweep in the layer, same as `playheadLine`).
+ *
+ * Fade in/out mirrors `playheadLine` but is keyed on position in the ONSET span
+ * (first→last onset), not on musicMs — so the fade tracks the notes too.
+ */
+declare function audioPlayheadLine(layout: NotationLayout, onsetsMs: number[], tMs: number): PlayheadLine | null;
 
 /** Map a canvas-space box through a base notation layout into world/screen coords. */
 declare function mapBoxThroughLayout(base: NotationLayout, b: Box): Box;
@@ -902,6 +930,10 @@ interface KeyboardProps {
     bottomY?: number;
     /** Right/left hand colours. Defaults: R = theme.accent, L = theme.gold. */
     handColors?: HandColors;
+    /** Realistic 3-D piano styling: white/black key gradients, rounded key fronts,
+     *  a felt rail + cast shadow at the top, and a soft glow on lit keys. Default
+     *  false (the flat two-tone look — unchanged for existing consumers). */
+    realistic?: boolean;
 }
 declare const keyboardFactory: LayerFactory<KeyboardProps>;
 
@@ -918,6 +950,10 @@ interface FallingNotesProps {
     speed?: number;
     /** Glow flash at the hit-line while a note sounds. Default true. */
     hitGlow?: boolean;
+    /** Glowy/translucent block styling: rounded corners, a vertical gradient that
+     *  fades toward the top, a soft bloom (shadow) in the note colour, and a bright
+     *  leading-edge cap. Default false (flat opaque rectangles — unchanged). */
+    glow?: boolean;
     /** Standalone-only: keyboard range when `keyboard:false`. Default "auto". */
     range?: '88' | 'auto';
     /** Standalone-only: hit-line (world y). Default safeBox.bottom - 220. */
@@ -1532,4 +1568,4 @@ interface SectionMinimapProps {
 }
 declare const sectionMinimapFactory: LayerFactory<SectionMinimapProps>;
 
-export { type Affine, type AudioClock, type AudioEvent, type BackgroundProps, type BeatGridOpts, type BeatTick, type BrandingProps, type BufferFactory, type BuildSceneOpts, type BuiltScene, type CameraState, type CaptionCue, type CaptionProps, type CaptionScript, type CaptionStyle, type ChordSpan, type CircleOfFifthsProps, type CirclePoint, type ClickTrackOpts, type ColorBy, type ContourPlot, type ContourPoint, type CountInOpts, type CountingTrackProps, type CtaProps, DEFAULT_FUNCTION_COLORS, type DegreeLabel, type DegreeLabelsProps, type DroneOpts, type DuckWindow, type Easing, type ExtendedDemoOpts, FIFTHS_MAJOR, FIFTHS_MINOR, FOLLOW_BARS, FOLLOW_PAD, type FallingKeyboardDemoOpts, type FallingNotesProps, type FunctionColors, type FunctionalHarmonyProps, type GateError, type GateInput, type HandColors, type HarmonicFunction, type HarmonyMode, type HighlightRegion, type HookProps, type KeyRect, type KeyboardLayout, type KeyboardLayoutOpts, type KeyboardProps, type LabelMode, type Layer, type LayerFactory, type McqCardProps, type NotationEngraving, type NotationLayout, type NotationLayoutOpts, type NotationProps, type NotationRect, type OutputProbe, PIANO_HIGH, PIANO_LOW, type PitchContourProps, type Placement, type PlayheadLine, type PortraitProps, type PromoCardsDemoOpts, type Quiz, type QuizOption, type QuizPhase, type RayEndpoints, type RecordSceneSpecOpts, type Rect, type RenderCtx, type ResolvedSegment, type RevealProps, type SafeGuidesProps, type SceneSpec, type ScheduleTarget, type Score, type ScoreFromMusicXMLOpts, type ScoreNote, type ScrollCursorProps, type Section, type SectionMinimapProps, type SegmentAudio, type SegmentAudioCtx, type SegmentTransition, type SpecLayer, type SpectrumInput, type SpectrumProps, type StaffKeyboardRayProps, type TempoMap, type TimeAnchor, type TimelineSegment, activeChord, activeCue, activeSection, animatedSlot, applySchedule, applyToContext, assertGate, ballArc, ballX, beatGrid, beatPhase, blackKeys, bpmOf, brandingFactory, buildScene, cameraForFollow, cameraTransform, circleOfFifthsDemoSpec, circleOfFifthsFactory, clamp, clickTrackSchedule, contourMinimapDemoSpec, contourPoints, contourPolyline, countInLeadSec, countInSchedule, countdownRemaining, countdownSeconds, countingDegreeDemoSpec, countingTrackFactory, cropAroundBox, ctaFactory, cubicEaseInOut, cueOpacity, degreeLabel, degreeLabelsFactory, dotAt, drawCaption, drawHighlight, droneSchedule, duckGainAt, easeIn, easeInOut, easeOut, fallingKeyboardDemoScore, fallingKeyboardDemoSpec, fallingNotesFactory, firstMeasureBox, followBoxAt, followSrcBox, followWindowStart, fracSlotPoint, frameRect, functionColor, functionalHarmonyFactory, getKeyboardLayout, getLayerFactory, getNotationEngraving, harmonyDemoSpec, highlightIntensity, hookFactory, identityCamera, inRange, invLerp, isBlackKey, kenBurns, keyCenterX, keyColumnWidth, keyRect, keySlot, keyboardFactory, keyboardLayout, lerp, lerpBox, lerpCamera, linear, mapBoxThroughLayout, mcqCardFactory, mcqDemoSpec, measureColumnsFromLayout, measureCount, measureSpanBox, measureSpans, timeToX as minimapTimeToX, msPerBeat, notationFactory, notationLayout, noteColor, noteSetXRange, parseKey, parseTimeSig, pcToSlot, pitchAt, pitchContourFactory, pitchRange, playheadLine, portraitFactory, progress01, projectPoint, promoCardsDemoSpec, quizPhase, rayEndpoints, rayPointAt, recordSceneSpec, registerLayer, registeredKeys, resolveAnchor, resolveKeyboardLayout, resolveTimeline, revealFactory, revealProgress, runGate, safeGuidesFactory, scoreFromMusicXML, scorePitchSpan, scrollCursorFactory, sectionMinimapFactory, setFollowLayoutProvider, setKeyboardLayout, setNotationEngraving, slotAngle, slotPc, slotPoint, spectrumFactory, staffAnchor, staffKeyboardRayFactory, staffRayDemoSpec, transitionProgress, validateChordTrack, validateQuiz, validateSections, visualTimelineMs, whiteKeys, worldToViewport };
+export { type Affine, type AudioClock, type AudioEvent, type BackgroundProps, type BeatGridOpts, type BeatTick, type BrandingProps, type BufferFactory, type BuildSceneOpts, type BuiltScene, type CameraState, type CaptionCue, type CaptionProps, type CaptionScript, type CaptionStyle, type ChordSpan, type CircleOfFifthsProps, type CirclePoint, type ClickTrackOpts, type ColorBy, type ContourPlot, type ContourPoint, type CountInOpts, type CountingTrackProps, type CtaProps, DEFAULT_FUNCTION_COLORS, type DegreeLabel, type DegreeLabelsProps, type DroneOpts, type DuckWindow, type Easing, type ExtendedDemoOpts, FIFTHS_MAJOR, FIFTHS_MINOR, FOLLOW_BARS, FOLLOW_PAD, type FallingKeyboardDemoOpts, type FallingNotesProps, type FunctionColors, type FunctionalHarmonyProps, type GateError, type GateInput, type HandColors, type HarmonicFunction, type HarmonyMode, type HighlightRegion, type HookProps, type KeyRect, type KeyboardLayout, type KeyboardLayoutOpts, type KeyboardProps, type LabelMode, type Layer, type LayerFactory, type McqCardProps, type NotationEngraving, type NotationLayout, type NotationLayoutOpts, type NotationProps, type NotationRect, type OutputProbe, PIANO_HIGH, PIANO_LOW, type PitchContourProps, type Placement, type PlayheadLine, type PortraitProps, type PromoCardsDemoOpts, type Quiz, type QuizOption, type QuizPhase, type RayEndpoints, type RecordSceneSpecOpts, type Rect, type RenderCtx, type ResolvedSegment, type RevealProps, type SafeGuidesProps, type SceneSpec, type ScheduleTarget, type Score, type ScoreFromMusicXMLOpts, type ScoreNote, type ScrollCursorProps, type Section, type SectionMinimapProps, type SegmentAudio, type SegmentAudioCtx, type SegmentTransition, type SpecLayer, type SpectrumInput, type SpectrumProps, type StaffKeyboardRayProps, type TempoMap, type TimeAnchor, type TimelineSegment, activeChord, activeCue, activeSection, animatedSlot, applySchedule, applyToContext, assertGate, audioPlayheadLine, ballArc, ballX, beatGrid, beatPhase, blackKeys, bpmOf, brandingFactory, buildScene, cameraForFollow, cameraTransform, circleOfFifthsDemoSpec, circleOfFifthsFactory, clamp, clickTrackSchedule, contourMinimapDemoSpec, contourPoints, contourPolyline, countInLeadSec, countInSchedule, countdownRemaining, countdownSeconds, countingDegreeDemoSpec, countingTrackFactory, cropAroundBox, ctaFactory, cubicEaseInOut, cueOpacity, degreeLabel, degreeLabelsFactory, distinctOnsets, dotAt, drawCaption, drawHighlight, droneSchedule, duckGainAt, easeIn, easeInOut, easeOut, fallingKeyboardDemoScore, fallingKeyboardDemoSpec, fallingNotesFactory, firstMeasureBox, followBoxAt, followSrcBox, followWindowStart, fracSlotPoint, frameRect, functionColor, functionalHarmonyFactory, getKeyboardLayout, getLayerFactory, getNotationEngraving, harmonyDemoSpec, highlightIntensity, hookFactory, identityCamera, inRange, invLerp, isBlackKey, kenBurns, keyCenterX, keyColumnWidth, keyRect, keySlot, keyboardFactory, keyboardLayout, lerp, lerpBox, lerpCamera, linear, mapBoxThroughLayout, mcqCardFactory, mcqDemoSpec, measureColumnsFromLayout, measureCount, measureSpanBox, measureSpans, timeToX as minimapTimeToX, msPerBeat, notationFactory, notationLayout, noteColor, noteSetXRange, parseKey, parseTimeSig, pcToSlot, pitchAt, pitchContourFactory, pitchRange, playheadLine, portraitFactory, progress01, projectPoint, promoCardsDemoSpec, quizPhase, rayEndpoints, rayPointAt, recordSceneSpec, registerLayer, registeredKeys, resolveAnchor, resolveKeyboardLayout, resolveTimeline, revealFactory, revealProgress, runGate, safeGuidesFactory, scoreFromMusicXML, scorePitchSpan, scrollCursorFactory, sectionMinimapFactory, setFollowLayoutProvider, setKeyboardLayout, setNotationEngraving, slotAngle, slotPc, slotPoint, spectrumFactory, staffAnchor, staffKeyboardRayFactory, staffRayDemoSpec, transitionProgress, validateChordTrack, validateQuiz, validateSections, visualTimelineMs, whiteKeys, worldToViewport };

package/dist/scene/index.js

@@ -489,6 +489,74 @@ function playheadLine(layout, t01) {
   }
   return { x, y0, y1, alpha };
 }
+var clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x;
+function anchorAtColumnPos(cols, pos, padV) {
+  const i = Math.min(cols.length - 1, Math.max(0, Math.floor(pos)));
+  const m = cols[i];
+  const startX = Math.min(m.noteStartX, m.x + m.w);
+  const frac = Math.min(1, Math.max(0, pos - i));
+  return {
+    onsetMs: 0,
+    x: startX + frac * (m.x + m.w - startX),
+    y0: m.y - padV,
+    y1: m.y + m.h + padV
+  };
+}
+function noteAnchors(layout, onsetsMs, padV) {
+  const cols = measureColumnsFromLayout(layout.measures);
+  if (!cols.length || !onsetsMs.length) return [];
+  const n = onsetsMs.length;
+  return onsetsMs.map((onsetMs, k) => {
+    const frac = n === 1 ? 0 : k / (n - 1);
+    const a = anchorAtColumnPos(cols, frac * cols.length, padV);
+    return { ...a, onsetMs };
+  });
+}
+function distinctOnsets(notes) {
+  const set = /* @__PURE__ */ new Set();
+  for (const n of notes) set.add(n.onsetMs);
+  return [...set].sort((a, b) => a - b);
+}
+function audioPlayheadLine(layout, onsetsMs, tMs) {
+  const padV = 10;
+  const anchors = noteAnchors(layout, onsetsMs, padV);
+  if (!anchors.length) return null;
+  const first = anchors[0].onsetMs;
+  const last = anchors[anchors.length - 1].onsetMs;
+  const span = last - first;
+  let a, b, frac;
+  if (tMs <= first || anchors.length === 1) {
+    a = b = anchors[0];
+    frac = 0;
+  } else if (tMs >= last) {
+    a = b = anchors[anchors.length - 1];
+    frac = 0;
+  } else {
+    let lo = 0;
+    let hi = anchors.length - 1;
+    while (lo < hi) {
+      const mid = lo + hi + 1 >> 1;
+      if (anchors[mid].onsetMs <= tMs) lo = mid;
+      else hi = mid - 1;
+    }
+    a = anchors[lo];
+    b = anchors[lo + 1];
+    const dt = b.onsetMs - a.onsetMs;
+    frac = dt > 0 ? cubicEaseInOut((tMs - a.onsetMs) / dt) : 0;
+  }
+  const x = a.x + (b.x - a.x) * frac;
+  const y0 = a.y0 + (b.y0 - a.y0) * frac;
+  const y1 = a.y1 + (b.y1 - a.y1) * frac;
+  let alpha = 0.85;
+  if (span > 0) {
+    const fadeIn = Math.min(250, span * 0.5);
+    const fadeOut = Math.min(400, span * 0.5);
+    if (tMs < first + fadeIn) alpha *= clamp01((tMs - (first - fadeIn)) / (2 * fadeIn));
+    if (tMs > last - fadeOut) alpha *= clamp01((last + fadeOut - tMs) / (2 * fadeOut));
+  }
+  if (alpha <= 0.02) return null;
+  return { x, y0, y1, alpha };
+}
 
 // src/scene/engravingStore.ts
 var STORE = /* @__PURE__ */ new WeakMap();
@@ -593,6 +661,7 @@ function followLayoutFor(ctx, camProgress01) {
   return notationLayout(eng.rendered, ctx.W, ctx.H, eng.bandTop, eng.bandHeight, { focusBox });
 }
 function scrollCursorLayer() {
+  let mode = "audio";
   let musicMs = 0;
   let openingZoomMs = 900;
   let color;
@@ -601,14 +670,41 @@ function scrollCursorLayer() {
     if (phMs < 0 || musicMs <= 0) return 0;
     return Math.min(1, phMs / musicMs);
   }
+  function onsetsFor(ctx) {
+    const notes = ctx.score?.notes;
+    return notes && notes.length ? distinctOnsets(notes) : [];
+  }
+  function notesProgress(onsetsMs, tMs) {
+    if (tMs < openingZoomMs) return 0;
+    const n = onsetsMs.length;
+    if (n <= 1) return 0;
+    const first = onsetsMs[0];
+    const last = onsetsMs[n - 1];
+    if (tMs <= first) return 0;
+    if (tMs >= last || last <= first) return 1;
+    let lo = 0, hi = n - 1;
+    while (lo < hi) {
+      const mid = lo + hi + 1 >> 1;
+      if (onsetsMs[mid] <= tMs) lo = mid;
+      else hi = mid - 1;
+    }
+    const segFrac = (tMs - onsetsMs[lo]) / (onsetsMs[lo + 1] - onsetsMs[lo]);
+    return (lo + segFrac) / (n - 1);
+  }
+  function followProgress(ctx, tMs) {
+    if (mode === "linear") return camProgress(tMs);
+    const onsets = onsetsFor(ctx);
+    return onsets.length ? notesProgress(onsets, tMs) : camProgress(tMs);
+  }
   function layoutAt(ctx, tMs) {
     const eng = getNotationEngraving(ctx);
-    return followLayoutFor(ctx, camProgress(tMs)) ?? eng.base;
+    return followLayoutFor(ctx, followProgress(ctx, tMs)) ?? eng.base;
   }
   return {
     key: "scroll-cursor",
     init(ctx, props) {
-      musicMs = props.musicMs;
+      mode = props.mode ?? "audio";
+      musicMs = props.musicMs ?? 0;
       openingZoomMs = props.openingZoomMs ?? 900;
       color = props.color;
       setFollowLayoutProvider(ctx, layoutAt);
@@ -616,9 +712,14 @@ function scrollCursorLayer() {
     draw(ctx, tMs) {
       const eng = getNotationEngraving(ctx);
       if (!eng) return;
-      const p = camProgress(tMs);
       const layout = layoutAt(ctx, tMs);
-      const line = playheadLine(layout, p);
+      let line;
+      const onsets = mode === "audio" ? onsetsFor(ctx) : [];
+      if (mode === "audio" && onsets.length) {
+        line = audioPlayheadLine(layout, onsets, tMs);
+      } else {
+        line = playheadLine(layout, camProgress(tMs));
+      }
       if (!line) return;
       const c = ctx.ctx2d;
       c.save();
@@ -640,8 +741,12 @@ var scrollCursorFactory = {
     const errs = [];
     if (props == null || typeof props !== "object") return ["scroll-cursor: props must be an object"];
     const p = props;
-    if (typeof p.musicMs !== "number" || !(p.musicMs > 0))
-      errs.push("scroll-cursor.musicMs must be a positive number (total music length ms)");
+    if (p.mode != null && p.mode !== "audio" && p.mode !== "linear")
+      errs.push('scroll-cursor.mode must be "audio" | "linear"');
+    if (p.mode === "linear" && (typeof p.musicMs !== "number" || !(p.musicMs > 0)))
+      errs.push('scroll-cursor.musicMs must be a positive number for mode:"linear"');
+    if (p.musicMs != null && (typeof p.musicMs !== "number" || !(p.musicMs > 0)))
+      errs.push("scroll-cursor.musicMs must be a positive number");
     if (p.followBars != null && (typeof p.followBars !== "number" || p.followBars < 1))
       errs.push("scroll-cursor.followBars must be a number >= 1");
     if (p.openingZoomMs != null && (typeof p.openingZoomMs !== "number" || p.openingZoomMs < 0))
@@ -656,7 +761,7 @@ var BLACK_PC = /* @__PURE__ */ new Set([1, 3, 6, 8, 10]);
 function whiteIndexAtOrBelow(midi) {
   const oct = Math.floor(midi / 12);
   const pc = midi - oct * 12;
-  const WHITES_BELOW = [0, 1, 1, 2, 2, 3, 4, 4, 5, 5, 6, 6];
+  const WHITES_BELOW = [0, 0, 1, 1, 2, 3, 3, 4, 4, 5, 5, 6];
   return oct * 7 + WHITES_BELOW[pc];
 }
 function isBlackKey(midi) {
@@ -779,15 +884,34 @@ function getKeyboardLayout(ctx) {
 }
 
 // src/scene/layers/keyboard.ts
+function roundedPath(c, x, y, w, h, radii) {
+  c.beginPath();
+  const rr = c.roundRect;
+  if (typeof rr === "function") {
+    rr.call(c, x, y, w, h, radii);
+    return;
+  }
+  c.rect(x, y, w, h);
+}
+function shade(hex, f) {
+  const n = parseInt(hex.slice(1), 16);
+  const t = f < 0 ? 0 : 255, p = Math.abs(f);
+  const r = Math.round((n >> 16 & 255) + (t - (n >> 16 & 255)) * p);
+  const g = Math.round((n >> 8 & 255) + (t - (n >> 8 & 255)) * p);
+  const b = Math.round((n & 255) + (t - (n & 255)) * p);
+  return `rgb(${r},${g},${b})`;
+}
 function keyboardLayer() {
   let layout = null;
   let colorBy = "hand";
   let hands = { R: "#7b2436", L: "#c8a55b" };
+  let realistic = false;
   return {
     key: "keyboard",
     init(ctx, props) {
       colorBy = props.colorBy ?? "hand";
       hands = props.handColors ?? { R: ctx.theme.accent, L: ctx.theme.gold };
+      realistic = props.realistic ?? false;
       const sb = ctx.safeBox;
       const height = props.height ?? 220;
       const bottomY = props.bottomY ?? sb.bottom;
@@ -810,6 +934,10 @@ function keyboardLayer() {
       for (const n of ctx.score?.notes ?? []) {
         if (tMs >= n.onsetMs && tMs < n.onsetMs + n.durMs) lit.set(n.pitchMidi, n.hand);
       }
+      if (realistic) {
+        drawRealisticKeyboard(c, L, lit, colorBy, hands);
+        return;
+      }
       c.save();
       for (const m of whiteKeys(L)) {
         const r = keyRect(L, m);
@@ -833,6 +961,78 @@ function keyboardLayer() {
     }
   };
 }
+function drawRealisticKeyboard(c, L, lit, colorBy, hands) {
+  {
+    const wr = keyRect(L, whiteKeys(L)[0] ?? 0);
+    const wRad = Math.max(3, Math.min(8, wr.w * 0.18));
+    c.save();
+    for (const m of whiteKeys(L)) {
+      const r = keyRect(L, m);
+      const onHand = lit.get(m);
+      const x = r.x + 0.75, w = r.w - 1.5;
+      roundedPath(c, x, r.y, w, r.h, [2, 2, wRad, wRad]);
+      if (onHand) {
+        const base = noteColor(m, onHand, colorBy, hands);
+        const g = c.createLinearGradient(0, r.y, 0, r.y + r.h);
+        g.addColorStop(0, shade(base, 0.18));
+        g.addColorStop(1, base);
+        c.fillStyle = g;
+      } else {
+        const g = c.createLinearGradient(0, r.y, 0, r.y + r.h);
+        g.addColorStop(0, "#e9e4da");
+        g.addColorStop(0.12, "#fbfaf7");
+        g.addColorStop(1, "#ffffff");
+        c.fillStyle = g;
+      }
+      c.fill();
+      c.strokeStyle = "#cdc6ba";
+      c.lineWidth = 1;
+      c.stroke();
+    }
+    const railH = Math.max(4, L.height * 0.03);
+    c.fillStyle = "#7b2436";
+    c.fillRect(L.x, L.top - railH, L.w, railH);
+    const sh = c.createLinearGradient(0, L.top, 0, L.top + L.height * 0.14);
+    sh.addColorStop(0, "rgba(0,0,0,0.22)");
+    sh.addColorStop(1, "rgba(0,0,0,0)");
+    c.fillStyle = sh;
+    c.fillRect(L.x, L.top, L.w, L.height * 0.14);
+    for (const m of blackKeys(L)) {
+      const r = keyRect(L, m);
+      const bRad = Math.max(2, r.w * 0.22);
+      const onHand = lit.get(m);
+      roundedPath(c, r.x, r.y, r.w, r.h, [1, 1, bRad, bRad]);
+      if (onHand) {
+        const base = noteColor(m, onHand, colorBy, hands);
+        const g = c.createLinearGradient(0, r.y, 0, r.y + r.h);
+        g.addColorStop(0, shade(base, -0.25));
+        g.addColorStop(1, base);
+        c.fillStyle = g;
+      } else {
+        const g = c.createLinearGradient(0, r.y, 0, r.y + r.h);
+        g.addColorStop(0, "#15110e");
+        g.addColorStop(0.82, "#2c2622");
+        g.addColorStop(1, "#453d36");
+        c.fillStyle = g;
+      }
+      c.fill();
+      c.fillStyle = onHand ? "rgba(255,255,255,0.28)" : "rgba(255,255,255,0.10)";
+      roundedPath(c, r.x + r.w * 0.18, r.y + r.h - Math.max(2, r.h * 0.06), r.w * 0.64, Math.max(1.5, r.h * 0.035), [1, 1, 1, 1]);
+      c.fill();
+    }
+    for (const [m, hand] of lit) {
+      const r = keyRect(L, m);
+      c.save();
+      c.shadowColor = noteColor(m, hand, colorBy, hands);
+      c.shadowBlur = 22;
+      c.globalAlpha = 0.55;
+      c.fillStyle = noteColor(m, hand, colorBy, hands);
+      c.fillRect(r.x + r.w * 0.2, r.y + r.h * 0.5, r.w * 0.6, r.h * 0.3);
+      c.restore();
+    }
+    c.restore();
+  }
+}
 var keyboardFactory = {
   key: "keyboard",
   create: keyboardLayer,
@@ -848,17 +1048,68 @@ var keyboardFactory = {
       errs.push("keyboard.height must be a positive number");
     if (p.bottomY != null && typeof p.bottomY !== "number")
       errs.push("keyboard.bottomY must be a number");
+    if (p.realistic != null && typeof p.realistic !== "boolean")
+      errs.push("keyboard.realistic must be a boolean");
     return errs;
   }
 };
 
 // src/scene/layers/fallingNotes.ts
 var DEFAULT_LEAD_MS = 2e3;
+function rgba(color, a) {
+  if (/^#[0-9a-fA-F]{6}$/.test(color)) {
+    const n = parseInt(color.slice(1), 16);
+    return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${a})`;
+  }
+  return color;
+}
+function roundedRect(c, x, y, w, h, r) {
+  c.beginPath();
+  const rr = c.roundRect;
+  if (typeof rr === "function") {
+    rr.call(c, x, y, w, h, r);
+    return;
+  }
+  c.rect(x, y, w, h);
+}
+function drawGlowBlock(c, x, y, w, hRaw, color) {
+  const h = Math.max(2, hRaw);
+  const r = Math.min(w * 0.42, 8);
+  const bx = x + 1, bw = Math.max(1, w - 2);
+  c.save();
+  c.shadowColor = rgba(color, 1);
+  c.shadowBlur = 22;
+  c.fillStyle = rgba(color, 0.5);
+  roundedRect(c, bx, y, bw, h, r);
+  c.fill();
+  c.fill();
+  c.shadowBlur = 0;
+  const g = c.createLinearGradient(0, y, 0, y + h);
+  g.addColorStop(0, rgba(color, 0.06));
+  g.addColorStop(0.5, rgba(color, 0.38));
+  g.addColorStop(1, rgba(color, 0.78));
+  c.fillStyle = g;
+  roundedRect(c, bx, y, bw, h, r);
+  c.fill();
+  const hl = c.createLinearGradient(bx, 0, bx + bw, 0);
+  hl.addColorStop(0, "rgba(255,255,255,0)");
+  hl.addColorStop(0.5, "rgba(255,255,255,0.22)");
+  hl.addColorStop(1, "rgba(255,255,255,0)");
+  c.fillStyle = hl;
+  roundedRect(c, bx + bw * 0.18, y, bw * 0.46, h, Math.min(r, bw * 0.2));
+  c.fill();
+  const capH = Math.min(7, h);
+  c.fillStyle = rgba(color, 0.98);
+  roundedRect(c, bx, y + h - capH, bw, capH, Math.min(r, capH / 2));
+  c.fill();
+  c.restore();
+}
 function fallingNotesLayer() {
   let paired = true;
   let colorBy = "hand";
   let hands = { R: "#7b2436", L: "#c8a55b" };
   let hitGlow = true;
+  let glow = false;
   let ownLayout = null;
   let topY = 0;
   let leadMsProp;
@@ -882,6 +1133,7 @@ function fallingNotesLayer() {
       colorBy = props.colorBy ?? "hand";
       hands = props.handColors ?? { R: ctx.theme.accent, L: ctx.theme.gold };
       hitGlow = props.hitGlow ?? true;
+      glow = props.glow ?? false;
       leadMsProp = props.leadMs;
       speedProp = props.speed;
       const sb = ctx.safeBox;
@@ -919,11 +1171,15 @@ function fallingNotesLayer() {
         const drawTop = Math.max(topY, topEdge);
         const drawBottom = Math.min(hit, bottomY);
         const fill = noteColor(n.pitchMidi, n.hand, colorBy, hands);
-        c.save();
-        c.fillStyle = fill;
-        c.globalAlpha = 0.92;
-        c.fillRect(cx - w / 2, drawTop, w, Math.max(1, drawBottom - drawTop));
-        c.restore();
+        if (glow) {
+          drawGlowBlock(c, cx - w / 2, drawTop, w, drawBottom - drawTop, fill);
+        } else {
+          c.save();
+          c.fillStyle = fill;
+          c.globalAlpha = 0.92;
+          c.fillRect(cx - w / 2, drawTop, w, Math.max(1, drawBottom - drawTop));
+          c.restore();
+        }
       }
       if (hitGlow) {
         for (const n of ctx.score?.notes ?? []) {
@@ -961,6 +1217,8 @@ var fallingNotesFactory = {
       errs.push("falling-notes.speed must be a positive number");
     if (p.hitGlow != null && typeof p.hitGlow !== "boolean")
       errs.push("falling-notes.hitGlow must be a boolean");
+    if (p.glow != null && typeof p.glow !== "boolean")
+      errs.push("falling-notes.glow must be a boolean");
     if (p.range != null && p.range !== "88" && p.range !== "auto")
       errs.push('falling-notes.range must be "88" | "auto"');
     return errs;
@@ -1173,11 +1431,11 @@ function spectrumLayer() {
     const src = fromProp ?? resolveFromCtx(ctx, tMs);
     if (src && src.length) {
       const out = new Array(n);
-      for (let b = 0; b < n; b++) out[b] = clamp01(src[Math.min(src.length - 1, b)] ?? 0);
+      for (let b = 0; b < n; b++) out[b] = clamp012(src[Math.min(src.length - 1, b)] ?? 0);
       return out;
     }
     const tSec = tMs / 1e3;
-    return Array.from({ length: n }, (_, b) => clamp01(syntheticMagnitude(tSec, b, n)));
+    return Array.from({ length: n }, (_, b) => clamp012(syntheticMagnitude(tSec, b, n)));
   }
   function resolveFromCtx(ctx, tMs) {
     const sp = ctx.spectrum;
@@ -1239,7 +1497,7 @@ function spectrumLayer() {
     }
   };
 }
-function clamp01(x) {
+function clamp012(x) {
   return x < 0 ? 0 : x > 1 ? 1 : x;
 }
 var spectrumFactory = {
@@ -3366,6 +3624,7 @@ export {
   applySchedule,
   applyToContext,
   assertGate,
+  audioPlayheadLine,
   ballArc,
   ballX,
   beatGrid,
@@ -3395,6 +3654,7 @@ export {
   cueOpacity,
   degreeLabel,
   degreeLabelsFactory,
+  distinctOnsets,
   dotAt,
   drawCaption,
   drawHighlight,