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

package/dist/scene/index.d.ts

@@ -930,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>;
 
@@ -946,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. */

package/dist/scene/index.js

@@ -761,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) {
@@ -884,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;
@@ -915,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);
@@ -938,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,
@@ -953,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;
@@ -987,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;
@@ -1024,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 ?? []) {
@@ -1066,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;