@real-music-packages/web-core 0.42.2 → 0.43.0

package/dist/scene/index.d.ts

@@ -891,10 +891,23 @@ declare const portraitFactory: LayerFactory<PortraitProps>;
 interface BrandingProps {
     /** Wordmark to draw. Default theme.brand. */
     logo?: string;
+    /** Optional second line under the wordmark (e.g. a domain) — the brand-card
+     *  form used for an end-of-clip mark: wordmark + URL, nothing else. Omit
+     *  for the original single-line chrome mark. */
+    sub?: string;
+    /** Sub-line font size in px. Default size*0.5. */
+    subSize?: number;
+    /** Sub-line colour. Default color/theme.sepia at reduced alpha handled by
+     *  the caller's theme choice (no alpha applied here so callers stay in
+     *  control of exact tone). */
+    subColor?: string;
+    /** Gap between wordmark baseline and sub-line baseline, px. Default size*0.85. */
+    gap?: number;
     /** Show the safe-zone debug overlay on top (apps' ?safe=1). Default false. */
     safezone?: boolean;
     /** Vertical anchor as a fraction of safeBox height from its TOP. Default 1
-     *  (bottom edge of the safe box). */
+     *  (bottom edge of the safe box). With `sub` set, this anchors the WORDMARK
+     *  line and the sub-line is drawn `gap` px below it. */
     yFrac?: number;
     /** Font size in px. Default 34. */
     size?: number;
@@ -1731,10 +1744,15 @@ interface CompositeRhythmProps {
     tickH?: number;
     /** Merged-mark radius (world px). Default 12. */
     mergeR?: number;
-    /** Reference subdivision counts, drawn as faint rows ABOVE the LH row (e.g.
-     *  [3,2] for a 3-against-2 bar) — each divides `windowMs` into N equal
-     *  ticks. Default none. */
-    grids?: number[];
+    /** Reference subdivision rows, drawn as faint rows ABOVE the LH row. Two
+     *  forms per entry: a plain number N divides `windowMs` into N EQUAL ticks
+     *  (e.g. `3` for a triplet feel, `2` for straight eighths — a 3-against-2
+     *  bar is `grids: [3, 2]`); an array of positive weights draws ticks at
+     *  each GROUP's start per those relative durations (e.g. `[3, 3, 2]` for a
+     *  3-3-2 clave bar — ticks at fractions 0, 3/8, 6/8, labeled "3+3+2") — for
+     *  asymmetric groupings the rhythm montage needs that an equal-N grid can't
+     *  represent. Default none. */
+    grids?: Array<number | number[]>;
     /** Onsets within this many ms of each other collapse into ONE composite
      *  mark. Default 60. */
     mergeWindowMs?: number;

package/dist/scene/index.js

@@ -1245,6 +1245,10 @@ var spectrumFactory = {
 // src/scene/layers/branding.ts
 function brandingLayer() {
   let logo;
+  let sub;
+  let subSize = 0;
+  let subColor;
+  let gap = 0;
   let safezone = false;
   let yFrac = 1;
   let size = 34;
@@ -1253,10 +1257,14 @@ function brandingLayer() {
     key: "branding",
     init(_ctx, props) {
       logo = props.logo;
+      sub = props.sub;
       safezone = props.safezone ?? false;
       yFrac = props.yFrac ?? 1;
       size = props.size ?? 34;
+      subSize = props.subSize ?? size * 0.5;
+      gap = props.gap ?? size * 0.85;
       color = props.color;
+      subColor = props.subColor;
     },
     draw(ctx) {
       const c = ctx.ctx2d;
@@ -1266,8 +1274,14 @@ function brandingLayer() {
       c.textAlign = "center";
       c.font = `italic ${size}px ${ctx.theme.fontBody}`;
       c.fillStyle = color ?? ctx.theme.sepia;
-      const y = sb.top + sb.h * yFrac - (yFrac >= 1 ? size * 0.3 : 0);
+      const pairShift = sub ? gap / 2 : 0;
+      const y = sb.top + sb.h * yFrac - (yFrac >= 1 ? size * 0.3 : 0) - pairShift;
       c.fillText(text, sb.cx, y);
+      if (sub) {
+        c.font = `${subSize}px ${ctx.theme.fontBody}`;
+        c.fillStyle = subColor ?? color ?? ctx.theme.sepia;
+        c.fillText(sub, sb.cx, y + gap);
+      }
       c.restore();
       if (safezone) drawSafeGuides(c);
     }
@@ -1281,6 +1295,10 @@ var brandingFactory = {
     const p = props;
     const errs = [];
     if (p.logo != null && typeof p.logo !== "string") errs.push("branding.logo must be a string");
+    if (p.sub != null && typeof p.sub !== "string") errs.push("branding.sub must be a string");
+    if (p.subSize != null && (typeof p.subSize !== "number" || p.subSize <= 0)) errs.push("branding.subSize must be a positive number");
+    if (p.subColor != null && typeof p.subColor !== "string") errs.push("branding.subColor must be a string");
+    if (p.gap != null && typeof p.gap !== "number") errs.push("branding.gap must be a number");
     if (p.safezone != null && typeof p.safezone !== "boolean") errs.push("branding.safezone must be a boolean");
     if (p.yFrac != null && typeof p.yFrac !== "number") errs.push("branding.yFrac must be a number");
     if (p.size != null && (typeof p.size !== "number" || p.size <= 0)) errs.push("branding.size must be a positive number");
@@ -4416,8 +4434,11 @@ function compositeRhythmLayer() {
       const lhY = yCenter - rowGap;
       const rhY = yCenter + rowGap;
       c.save();
-      grids.forEach((n, gi) => {
-        if (n <= 0) return;
+      grids.forEach((entry, gi) => {
+        const isGrouping = Array.isArray(entry);
+        const weights = isGrouping ? entry.filter((w) => w > 0) : [];
+        if (isGrouping && weights.length === 0) return;
+        if (!isGrouping && entry <= 0) return;
         const gy = lhY - rowGap * (grids.length - gi);
         c.strokeStyle = "rgba(26,22,20,0.22)";
         c.lineWidth = 2;
@@ -4425,8 +4446,20 @@ function compositeRhythmLayer() {
         c.moveTo(sb.left, gy);
         c.lineTo(sb.left + sb.w, gy);
         c.stroke();
-        for (let i = 0; i < n; i++) {
-          const t = w0 + (w1 - w0) * i / n;
+        const starts = [];
+        if (isGrouping) {
+          const total = weights.reduce((a, b) => a + b, 0);
+          let acc = 0;
+          for (const w of weights) {
+            starts.push(acc / total);
+            acc += w;
+          }
+        } else {
+          const n = entry;
+          for (let i = 0; i < n; i++) starts.push(i / n);
+        }
+        for (const f of starts) {
+          const t = w0 + (w1 - w0) * f;
           if (!revealed(t)) continue;
           const gx = x(t);
           c.strokeStyle = "rgba(26,22,20,0.38)";
@@ -4440,7 +4473,7 @@ function compositeRhythmLayer() {
         c.font = "600 22px system-ui, sans-serif";
         c.textAlign = "right";
         c.textBaseline = "middle";
-        c.fillText(String(n), sb.left - 10, gy);
+        c.fillText(isGrouping ? weights.join("+") : String(entry), sb.left - 10, gy);
       });
       const drawTicks = (ticks, y, color) => {
         c.fillStyle = color;
@@ -4532,8 +4565,14 @@ var compositeRhythmFactory = {
     if (p.rowGap != null && (typeof p.rowGap !== "number" || p.rowGap <= 0)) errs.push("composite-rhythm.rowGap must be a positive number");
     if (p.tickH != null && (typeof p.tickH !== "number" || p.tickH <= 0)) errs.push("composite-rhythm.tickH must be a positive number");
     if (p.mergeR != null && (typeof p.mergeR !== "number" || p.mergeR <= 0)) errs.push("composite-rhythm.mergeR must be a positive number");
-    if (p.grids != null && (!Array.isArray(p.grids) || p.grids.some((v) => typeof v !== "number" || v <= 0)))
-      errs.push("composite-rhythm.grids must be an array of positive numbers");
+    if (p.grids != null) {
+      const gridsValid = Array.isArray(p.grids) && p.grids.every((v) => {
+        if (typeof v === "number") return v > 0;
+        if (Array.isArray(v)) return v.length > 0 && v.every((w) => typeof w === "number" && w > 0);
+        return false;
+      });
+      if (!gridsValid) errs.push("composite-rhythm.grids must be an array of positive numbers or arrays of positive-number weights");
+    }
     if (p.mergeWindowMs != null && (typeof p.mergeWindowMs !== "number" || p.mergeWindowMs < 0))
       errs.push("composite-rhythm.mergeWindowMs must be a non-negative number");
     if (p.mergeColor != null && typeof p.mergeColor !== "string") errs.push("composite-rhythm.mergeColor must be a string");