@barmark/render 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -6,6 +6,19 @@ package uses [semantic versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [0.3.0] - 2026-11-01
+
+Draws gradual tempo changes. Depends on `barmark` ^0.5.0, which reads
+them.
+
+### Added
+
+- Gradual tempo changes. A `tempo: rit. to 90` line reads
+  "→ Tempo rit. to ♩ = 90" (`a tempo` reads as itself), and every bar
+  played inside a rit. or accel. has a dashed line along its top, in
+  the directive colour, with `data-tempo-change="rit"` or `"accel"`.
+  Uses barmark 0.5.0's `tempoChange`.
+
 ## [0.2.1] - 2026-11-01
 
 Two fixes found while moving barmark.dev to the element. Depends on
@@ -117,7 +130,8 @@ that needs no script or as the `<barmark-chart>` web component. Requires
   zoom without sideways scrolling, the element renders and re-renders, and
   a screen reader hears "bar 9: D". Run them with `bun run test:browser`.
 
-[Unreleased]: https://github.com/kevinpeckham/barmark/compare/render-v0.2.1...HEAD
+[Unreleased]: https://github.com/kevinpeckham/barmark/compare/render-v0.3.0...HEAD
+[0.3.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.2.1...render-v0.3.0
 [0.2.1]: https://github.com/kevinpeckham/barmark/compare/render-v0.2.0...render-v0.2.1
 [0.2.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.1.0...render-v0.2.0
 [0.1.0]: https://github.com/kevinpeckham/barmark/releases/tag/render-v0.1.0

package/dist/html.js

@@ -41,16 +41,27 @@ function headerHtml(model) {
         return "";
     return `<header class="bm-header">${title}${meta ? `<p class="bm-meta" part="meta">${meta}</p>` : ""}</header>`;
 }
+/** "rit. to ♩ = 90", "accel.", "a tempo". */
+function tempoChangeText(c) {
+    if (c.kind === "a tempo")
+        return c.kind;
+    return `${c.kind}.${c.to === null ? "" : ` to ♩ = ${c.to}`}`;
+}
 /** "D major · 4/4 · ♩ = 145 · swing", escaped; labelled, "Key D major · Time 4/4 · …". */
 function metaText(d, labelled = false) {
     return [
         ["Key", d.key ? `${glyphs(d.key.tonic)} ${d.key.mode}` : ""],
         ["Time", d.time ? `${d.time.n}/${d.time.d}` : ""],
         ["Tempo", d.tempo ? `♩ = ${d.tempo}` : ""],
+        // "a tempo" names itself; "Tempo a tempo" would stutter.
+        [
+            d.tempoChange?.kind === "a tempo" ? "" : "Tempo",
+            d.tempoChange ? tempoChangeText(d.tempoChange) : "",
+        ],
         ["Feel", d.feel ?? ""],
     ]
         .filter(([, value]) => value)
-        .map(([label, value]) => escapeHtml(labelled ? `${label} ${value}` : (value ?? "")))
+        .map(([label, value]) => escapeHtml(labelled && label ? `${label} ${value}` : (value ?? "")))
         .join(" · ");
 }
 function blockHtml(block, settings) {
@@ -158,7 +169,8 @@ function cellHtml(cell, barNumber, marks) {
         ? `<span class="bm-meter"><span>${cell.meter.n}</span><span>${cell.meter.d}</span></span>`
         : "";
     const cut = cell.cut ? `<span class="bm-cut">cut</span>` : "";
-    return `<div class="bm-bar" part="bar"${cell.cut ? " data-cut" : ""}${marks}>${spoken}<span class="bm-bar-body" aria-hidden="true">${meter}${cell.slots.map(slotHtml).join("")}${cut}</span></div>`;
+    const change = cell.tempoChange ? ` data-tempo-change="${cell.tempoChange}"` : "";
+    return `<div class="bm-bar" part="bar"${cell.cut ? " data-cut" : ""}${change}${marks}>${spoken}<span class="bm-bar-body" aria-hidden="true">${meter}${cell.slots.map(slotHtml).join("")}${cut}</span></div>`;
 }
 const FERMATA = `<svg class="bm-fermata-glyph" viewBox="0 0 24 14" width="1.4em" height="0.8em"><path d="M2 13 A10 10 0 0 1 22 13" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="11" r="1.8" fill="currentColor"/></svg>`;
 function slotHtml(slot) {

package/dist/model.js

@@ -239,10 +239,15 @@ function layoutCell(cell, played, previous) {
     if (cell.kind === "fermata")
         return { kind: "fermata" };
     const from = cell.kind === "slots" ? cell : previous;
-    return {
+    return withTempoChange({
         kind: "slots",
         meter: from?.meter ?? null,
         slots: played?.slots ?? (cell.kind === "slots" ? cell.slots : []),
         cut: false,
-    };
+    }, played);
+}
+/** Marks a bar played inside a rit. or accel. */
+function withTempoChange(cell, played) {
+    const change = played?.tempoChange?.kind;
+    return change ? { ...cell, tempoChange: change } : cell;
 }

package/dist/styles.js

@@ -111,6 +111,7 @@ const css = `
 .bm-tuplet::after{border-left:none;margin-left:.3em}
 .bm-meter{display:inline-flex;flex-direction:column;align-items:center;align-self:center;font:700 ${em(SIZES.meter)}/.95 ${SANS};color:var(--bm-muted)}
 .bm-fermata-glyph{display:block;color:var(--bm-ink)}
+.bm-bar[data-tempo-change]::before{content:"";position:absolute;inset:.15em 0 auto;border-top:.08em dashed var(--barmark-directive,var(--bm-muted))}
 .bm-bar[data-cut]{outline:.08em dashed var(--bm-muted);outline-offset:-.25em}
 .bm-cut{position:absolute;top:.3em;right:.45em;font:${em(SIZES.cut)}/1 ${SANS};color:var(--bm-muted)}
 .bm-text{grid-column:1/-1;margin:.2em 0 .5em ${at(SIZES.text, GUTTER)};font-family:${TEXT};font-size:${em(SIZES.text)}}

package/dist/types.d.ts

@@ -51,6 +51,8 @@ export type CellModel = {
     meter: Meter | null;
     slots: Slot[];
     cut: boolean;
+    /** Set on a bar played inside a rit. or accel. */
+    tempoChange?: "rit" | "accel";
 } | {
     kind: "fermata";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@barmark/render",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"description": "Render barmark chord charts as a clean, accessible bar grid: HTML with Declarative Shadow DOM, or the <barmark-chart> web component.",
 	"type": "module",
 	"exports": {
@@ -47,7 +47,7 @@
 		"url": "https://github.com/kevinpeckham/barmark/issues"
 	},
 	"dependencies": {
-		"barmark": "^0.3.0"
+		"barmark": "^0.5.0"
 	},
 	"scripts": {
 		"build": "rm -rf dist && tsc -p tsconfig.build.json",