@barmark/render 0.7.2 → 0.8.0

package/CHANGELOG.md

@@ -6,6 +6,32 @@ package uses [semantic versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [0.8.0] - 2026-11-03
+
+Requires `barmark` 0.11.0.
+
+### Changed
+
+- **Depends on `barmark` `^0.11.0`** (was `^0.10.0`).
+
+### Added
+
+- **Endings:** an ending row has a bracket over its bars and a `1.`, `2.`
+  or `1.–3.` label; screen readers hear "ending for pass 1".
+- **Directions:** Segno and Coda as their signs, To Coda with the coda
+  sign, Fine and the jumps as words. Each is spoken ("dal segno al
+  coda"). Bar numbers skip them, since they are not bars.
+
+## [0.7.3] - 2026-11-03
+
+Requires `barmark` 0.10.0. No change to the renderer's code: a page that
+installs `barmark` 0.10.0 alongside it gets one copy instead of two.
+
+### Changed
+
+- **Depends on `barmark` `^0.10.0`** (was `^0.9.0`, which in 0.x stops
+  short of 0.10.0).
+
 ## [0.7.2] - 2026-11-02
 
 Requires `barmark` 0.9.0, and shows its swing amount.
@@ -213,7 +239,9 @@ 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.7.2...HEAD
+[Unreleased]: https://github.com/kevinpeckham/barmark/compare/render-v0.8.0...HEAD
+[0.8.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.7.3...render-v0.8.0
+[0.7.3]: https://github.com/kevinpeckham/barmark/compare/render-v0.7.2...render-v0.7.3
 [0.7.2]: https://github.com/kevinpeckham/barmark/compare/render-v0.7.1...render-v0.7.2
 [0.7.1]: https://github.com/kevinpeckham/barmark/compare/render-v0.7.0...render-v0.7.1
 [0.7.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.6.0...render-v0.7.0

package/dist/html.js

@@ -1,3 +1,9 @@
+/**
+ * The chart model as HTML: a <barmark-chart> holding a declarative shadow
+ * root, or the bare markup for pages that bring the stylesheet themselves.
+ * Every string from the chart is escaped; every bar carries its spoken name.
+ */
+import { printDirection, printPasses, } from "barmark";
 import { glyphs, NUMERALS, splitPitch, typesetChord, typesetNumeral, } from "./chord.js";
 import { escapeHtml } from "./escape.js";
 import { fontFaceCss } from "./font.js";
@@ -91,9 +97,11 @@ function fitWidth(block) {
     return FIT_STEPS.find((step) => step >= total) ?? FIT_STEPS.at(-1) ?? 0;
 }
 /** Em per bar: padding, plus each slot's text and the gap after it. */
-const cellWidth = (cell) => cell.kind === "fermata"
-    ? MIN_BAR
-    : Math.max(MIN_BAR, 1.5 + (cell.meter ? 0.8 : 0) + cell.slots.reduce((w, s) => w + slotWidth(s), 0));
+const cellWidth = (cell) => cell.kind === "direction"
+    ? 1 + 0.55 * printDirection(cell.direction).length
+    : cell.kind === "fermata"
+        ? MIN_BAR
+        : Math.max(MIN_BAR, 1.5 + (cell.meter ? 0.8 : 0) + cell.slots.reduce((w, s) => w + slotWidth(s), 0));
 /** Roughly: 0.65em a baseline character, 0.4em a superscript one, 0.6em between slots. */
 function slotWidth(slot) {
     if (slot.kind === "group")
@@ -145,15 +153,28 @@ function rowHtml(row, columns, settings) {
         ? `<span class="bm-bar-number" part="bar-number" aria-hidden="true">${row.barNumber ?? ""}</span>`
         : "";
     let n = row.barNumber;
+    const label = row.ending ? endingLabel(row.ending) : null;
     const cells = row.cells.map((cell, i) => {
-        const html = cellHtml(cell, n, repeatMarks(row, i), settings.numerals);
+        const ending = i === 0 && label ? ` data-ending="${label.shown}"` : "";
+        const html = cellHtml(cell, n, repeatMarks(row, i) + ending, settings.numerals);
         if (n !== null && cell.kind === "slots")
             n++;
         return html;
     });
     const empty = `<span class="bm-empty" aria-hidden="true"></span>`.repeat(Math.max(0, columns - row.cells.length));
     const opens = row.opens || typeof row.repeat === "number" || row.repeat === "open";
-    return `<div class="bm-row">${opens ? `<span class="bm-sr">repeat start</span>` : ""}${number}${cells.join("")}${empty}<span class="bm-repeat">${rowRepeatHtml(row)}</span></div>`;
+    const ending = label ? `<span class="bm-sr">${label.spoken}</span>` : "";
+    return `<div class="bm-row${label ? " bm-ending" : ""}">${opens ? `<span class="bm-sr">repeat start</span>` : ""}${ending}${number}${cells.join("")}${empty}<span class="bm-repeat">${rowRepeatHtml(row)}</span></div>`;
+}
+/** An ending's passes as printed, "1.", "1.–3.", "1., 3.", and spoken, "ending for passes 1 to 3". */
+function endingLabel(passes) {
+    const parts = printPasses(passes)
+        .split(",")
+        .map((part) => part.split("-"));
+    const shown = parts.map((p) => p.map((n) => `${n}.`).join("–")).join(", ");
+    const said = parts.map((p) => p.join(" to "));
+    const list = said.length > 1 ? `${said.slice(0, -1).join(", ")} and ${said.at(-1)}` : said[0];
+    return { shown, spoken: `ending for pass${passes.length > 1 ? "es" : ""} ${list}` };
 }
 /** Repeat bar lines: ‖: on a row's first bar, :‖ on its last. */
 function repeatMarks(row, i) {
@@ -170,8 +191,8 @@ function rowRepeatHtml(row) {
 function cellHtml(cell, barNumber, marks, numerals) {
     const view = numerals && cell.kind === "slots" && cell.key ? { style: numerals, key: cell.key } : null;
     const spoken = `<span class="bm-sr">${escapeHtml(speakBar(barNumber, cell, view !== null))}</span>`;
-    if (cell.kind === "fermata")
-        return `<div class="bm-bar bm-fermata" part="bar"${marks}>${spoken}<span aria-hidden="true">${FERMATA}</span></div>`;
+    if (cell.kind !== "slots")
+        return betweenBarsHtml(cell, spoken, marks);
     const meter = cell.meter
         ? `<span class="bm-meter"><span>${cell.meter.n}</span><span>${cell.meter.d}</span></span>`
         : "";
@@ -179,6 +200,23 @@ function cellHtml(cell, barNumber, marks, numerals) {
     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((s) => slotHtml(s, view)).join("")}${cut}</span></div>`;
 }
+/** A fermata or a direction: a place between bars, drawn as its sign. */
+function betweenBarsHtml(cell, spoken, marks) {
+    if (cell.kind === "fermata")
+        return `<div class="bm-bar bm-fermata" part="bar"${marks}>${spoken}<span aria-hidden="true">${FERMATA}</span></div>`;
+    return `<div class="bm-bar bm-direction" part="direction" data-direction="${cell.direction.kind}"${marks}>${spoken}<span aria-hidden="true">${directionGlyph(cell.direction)}</span></div>`;
+}
+/** Segno and coda as the score's signs; To Coda and the jumps as their words. */
+function directionGlyph(d) {
+    if (d.kind === "segno")
+        return SEGNO;
+    if (d.kind === "coda")
+        return CODA;
+    const words = `<span class="bm-direction-words">${escapeHtml(printDirection(d))}</span>`;
+    return d.kind === "to coda" ? `${words} ${CODA}` : words;
+}
+const SEGNO = `<svg class="bm-sign" viewBox="0 0 20 28" width="0.9em" height="1.25em"><path d="M14.5 6.5c-1-3-6.5-3.5-7.5-.5s3 4.5 4.5 5.5 5 3.5 3 7-7.5 2-8-1" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/><path d="M4 24 16 3" stroke="currentColor" stroke-width="1.6"/><circle cx="4.5" cy="13" r="1.6" fill="currentColor"/><circle cx="15.5" cy="15" r="1.6" fill="currentColor"/></svg>`;
+const CODA = `<svg class="bm-sign" viewBox="0 0 24 24" width="1em" height="1em"><circle cx="12" cy="12" r="6.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 1v22M1 12h22" stroke="currentColor" stroke-width="1.6"/></svg>`;
 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, view) {
     switch (slot.kind) {

package/dist/model.js

@@ -220,7 +220,7 @@ function layoutRow(l, played, previous, ctx) {
     let prev = previous;
     for (const cell of l.cells) {
         const model = layoutCell(cell, played[bar] ?? written[bar], prev);
-        if (cell.kind !== "fermata")
+        if (cell.kind !== "fermata" && cell.kind !== "direction")
             bar++;
         if (model.kind === "slots")
             prev = model;
@@ -234,6 +234,7 @@ function layoutRow(l, played, previous, ctx) {
         opens: l.opens,
         closes: l.closes,
         repeat: l.repeat,
+        ending: l.ending,
         cells,
     };
 }
@@ -241,6 +242,8 @@ function layoutRow(l, played, previous, ctx) {
 function layoutCell(cell, played, previous) {
     if (cell.kind === "fermata")
         return { kind: "fermata" };
+    if (cell.kind === "direction")
+        return cell;
     const from = cell.kind === "slots" ? cell : previous;
     return withPlayed({
         kind: "slots",

package/dist/speech.js

@@ -2,7 +2,7 @@
  * Spoken names: how a screen reader reads a chart as music. Built from the
  * parsed structure, never from the symbol's text.
  */
-import { degreeOf } from "barmark";
+import { degreeOf, } from "barmark";
 const NUMBERS = {
     "1": "one",
     "2": "two",
@@ -118,10 +118,18 @@ export function speakSlot(slot, key) {
             return `${GROUPS[slot.members.length] ?? `group of ${slot.members.length}`}: ${slot.members.map((m) => speakSlot(m, key)).join(", ")}`;
     }
 }
+/** "segno", "to coda", "dal segno al coda", "da capo al fine". */
+function speakDirection(d) {
+    if (d.kind !== "jump")
+        return d.kind;
+    return `${d.to === "start" ? "da capo" : "dal segno"}${d.al ? ` al ${d.al}` : ""}`;
+}
 /** "bar 9: G, hold, D, hold"; a fermata is held until cued. With `numerals`, each chord's degree comes first. */
 export function speakBar(barNumber, cell, numerals = false) {
     if (cell.kind === "fermata")
         return "fermata: hold until cued";
+    if (cell.kind === "direction")
+        return speakDirection(cell.direction);
     const meter = cell.meter ? `, in ${cell.meter.n}/${cell.meter.d}` : "";
     const cut = cell.cut ? ", cut on this pass" : "";
     return `bar${barNumber === null ? "" : ` ${barNumber}`}${meter}: ${cell.slots.map((s) => speakSlot(s, numerals ? cell.key : undefined)).join(", ")}${cut}`;

package/dist/styles.js

@@ -116,6 +116,12 @@ 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-row>div.bm-direction{min-width:0;padding-inline:.35em;border-right:none;align-items:flex-start;color:var(--bm-ink)}
+.bm-sign{display:inline-block;vertical-align:middle}
+.bm-direction-words{font:italic ${em(SIZES.repeat)}/1.2 Georgia,serif;white-space:nowrap}
+.bm-bar[data-ending]::after{content:attr(data-ending);position:absolute;left:.45em;top:.2em;font:italic .75em/1 Georgia,serif;color:var(--bm-muted)}
+.bm-ending>.bm-bar{border-top:.06em solid var(--bm-muted)}
+.bm-ending>.bm-bar[data-ending]{box-shadow:inset .06em 0 var(--bm-muted)}
 .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)}

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { ChartDiagnostic, Directives, Key, Meter, Repeat, Slot } from "barmark";
+import type { ChartDiagnostic, Direction, Directives, Key, Meter, Repeat, Slot } from "barmark";
 export type LayoutOptions = {
     rehearsalLetters?: boolean;
 };
@@ -30,6 +30,8 @@ export type BlockItem = {
     opens: boolean;
     closes: boolean;
     repeat: Repeat;
+    /** The passes an ending plays on; null for any other row. */
+    ending: number[] | null;
     cells: CellModel[];
 }
 /** `note` marks a `###` line, whose text is given without the marks. */
@@ -57,4 +59,9 @@ export type CellModel = {
     key?: Key;
 } | {
     kind: "fermata";
+}
+/** A segno, coda or jump between bars (barmark's grammar 5.2). */
+ | {
+    kind: "direction";
+    direction: Direction;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@barmark/render",
-	"version": "0.7.2",
+	"version": "0.8.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.9.0"
+		"barmark": "^0.11.0"
 	},
 	"scripts": {
 		"build": "rm -rf dist && tsc -p tsconfig.build.json",