@barmark/render 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -6,6 +6,37 @@ 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
+`barmark` ^0.3.0, which warns when a chart has no bar lines.
+
+### Fixed
+
+- **Triplet brackets work on any paper.** The bracket is drawn either
+  side of its number, leaving a gap, instead of under it with the number
+  painted over in the paper colour. A see-through `--barmark-paper` used
+  to show the number in a box.
+- **A chart from `renderChart` keeps its options when the element
+  loads.** The `<barmark-chart>` it wraps the chart in now carries them as
+  attributes (`theme`, `bar-numbers="off"`, `rehearsal-letters`). Before,
+  a page that rendered a dark chart on the server and imported
+  `@barmark/render/element` saw it switch to the system theme, and lose
+  its rehearsal letters once given new `text`.
+
 ## [0.2.0] - 2026-11-01
 
 Easier to read, and the bar numbers easier to scan. Every size below was
@@ -99,6 +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.0...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

@@ -5,7 +5,16 @@ import { layoutChart } from "./model.js";
 import { speakBar } from "./speech.js";
 import { FIT_STEPS, MIN_BAR, stylesheet } from "./styles.js";
 export function renderChart(text, options = {}) {
-    return `${fontStyle(options)}<barmark-chart><template shadowrootmode="open">${shadowContent(text, options)}</template></barmark-chart>`;
+    return `${fontStyle(options)}<barmark-chart${elementAttributes(options)}><template shadowrootmode="open">${shadowContent(text, options)}</template></barmark-chart>`;
+}
+/** The options as the element's attributes, so it keeps them when it loads or takes new text. */
+function elementAttributes(options) {
+    const theme = themeOf(options);
+    return [
+        theme === "auto" ? "" : ` theme="${theme}"`,
+        options.barNumbers === false ? ' bar-numbers="off"' : "",
+        options.rehearsalLetters ? " rehearsal-letters" : "",
+    ].join("");
 }
 export const THEMES = ["auto", "light", "dark"];
 /** Only a known theme reaches the markup: hosts may pass any string through. */
@@ -32,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) {
@@ -149,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

@@ -31,6 +31,12 @@ const SIZES = {
 const GUTTER = 2.06;
 export const MIN_BAR = 4.68;
 const HEADING_GAP = 0.645;
+/**
+ * The triplet bracket, in chord sizes: its line sits this far below the top
+ * of the number, with hooks this long, drawn either side of the number so
+ * nothing is painted over it and any paper shows through.
+ */
+const BRACKET = { top: 0.6, hook: 0.3, line: 0.06 };
 /** The single note's ring, in its own em: padding, and the border it spills past. */
 const RING = { y: 0.21, x: 0.5, border: 0.07 };
 const em = (n) => `${Number(n.toFixed(3))}em`;
@@ -99,10 +105,13 @@ const css = `
 .bm-notes{display:inline-flex;gap:.3em;align-items:baseline}
 .bm-notes u{text-decoration-thickness:.08em;text-underline-offset:.15em}
 .bm-group{position:relative;display:inline-flex;gap:.45em;align-items:baseline}
-.bm-group::before{content:"";position:absolute;left:0;right:0;top:-.45em;height:.3em;border:.06em solid var(--bm-muted);border-bottom:none}
-.bm-tuplet{position:absolute;left:50%;top:-1.25em;transform:translateX(-50%);font:italic 600 ${em(SIZES.tuplet)}/1 Georgia,serif;color:var(--bm-muted);background:var(--bm-paper);padding:0 .3em}
+.bm-tuplet{position:absolute;left:0;right:0;top:-1.25em;display:flex;justify-content:center;font:italic 600 ${em(SIZES.tuplet)}/1 Georgia,serif;color:var(--bm-muted)}
+.bm-tuplet::before,.bm-tuplet::after{content:"";flex:1;align-self:flex-start;margin-top:${at(SIZES.tuplet, BRACKET.top)};height:${at(SIZES.tuplet, BRACKET.hook)};border:${at(SIZES.tuplet, BRACKET.line)} solid var(--bm-muted);border-bottom:none}
+.bm-tuplet::before{border-right:none;margin-right:.3em}
+.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)}}
@@ -113,7 +122,7 @@ const css = `
 .bm-diagnostics .bm-error{color:var(--bm-accent)}
 @media (forced-colors:active){
 	.bm-bar,.bm-row>div.bm-bar:first-of-type,.bm-row>div.bm-bar[data-repeat-start],.bm-row>div.bm-bar[data-repeat-end]{border-color:CanvasText}
-	.bm-ring,.bm-group::before{border-color:CanvasText}
+	.bm-ring,.bm-tuplet::before,.bm-tuplet::after{border-color:CanvasText}
 	.bm-silence{background:CanvasText;forced-color-adjust:none}
 	.bm-bar[data-cut]{outline-color:CanvasText}
 }

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.0",
+	"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.2.0"
+		"barmark": "^0.5.0"
 	},
 	"scripts": {
 		"build": "rm -rf dist && tsc -p tsconfig.build.json",