@barmark/render 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -6,6 +6,29 @@ package uses [semantic versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [0.12.0] - 2026-11-03
+
+Needs `barmark` 0.14.1.
+
+### Changed
+
+- **Breaking:** the element's one-part attribute is now `show-part`
+  (property `showPart`), not `part`. HTML keeps `part` on every element
+  for `::part()` styling, so a page styling `<barmark-chart part="…">`
+  got a one-part view by accident, and `el.part` could not return the
+  label. `renderChart`'s option stays `part`.
+
+### Fixed
+
+- A system shows and speaks what its rows share once, on its first drawn
+  row: the bar number, "repeat start", the ending's number and ×N. Every
+  row still draws its repeat bar lines. A system whose first part's line
+  has an error numbers the next row.
+- Tacet rows carry `bm-tacet` in a part's own view too, and a tacet bar
+  cut in a `->` replay is marked and spoken as cut.
+- The "no part labelled X" warning is about the whole chart: its line is
+  0, and the diagnostics list shows it without a line number.
+
 ## [0.11.0] - 2026-11-03
 
 Needs `barmark` 0.14.0.
@@ -294,7 +317,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.11.0...HEAD
+[Unreleased]: https://github.com/kevinpeckham/barmark/compare/render-v0.12.0...HEAD
+[0.12.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.11.0...render-v0.12.0
 [0.11.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.10.0...render-v0.11.0
 [0.10.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.9.1...render-v0.10.0
 [0.9.1]: https://github.com/kevinpeckham/barmark/compare/render-v0.9.0...render-v0.9.1

package/README.md

@@ -48,7 +48,9 @@ The element renders from its `text` property, its `src` URL, or a child
 whenever one changes; it fetches a `src` once, and renders once however
 many properties and attributes change together. A chart rendered on the
 server by `renderChart` keeps its music until it has a source of its own,
-and still follows `theme` and `bar-numbers`.
+and still follows `theme`, `bar-numbers` and `wrap`; a change to
+`numerals`, `rehearsal-letters` or `show-part` needs the chart's text, so
+it waits for a source.
 
 For a live editor, set `text`:
 
@@ -77,7 +79,7 @@ the element loads, with `<style data-barmark-font>` holding
 | `rehearsalLetters` | `rehearsal-letters` (`rehearsalLetters`) | `false` | boxed A, B, C… on each section as played |
 | `numerals` | `numerals` (`numerals`) | none | `"nashville"` (6m⁷) or `"roman"` (vi⁷): each chord as its degree in its bar's key |
 | `wrap` | `wrap="off"` (`wrap`) | `true` | wrap a section's rows when it is wider than the chart's box; off, rows keep their columns and the chart overflows, for its page to scroll |
-| `part` | `part` (`part`) | none | draw only the part with this label, as one player reads it: tutti bars, its own bars, and "tacet" where it rests |
+| `part` | `show-part` (`showPart`) | none | draw only the part with this label, as one player reads it: tutti bars, its own bars, and "tacet" where it rests. The attribute isn't `part`, which HTML keeps for `::part()` styling |
 | `diagnostics` | | `false` | list the chart's errors and warnings below it |
 | `fontUrl` | | none | emit Edwin's `@font-face` rule before the chart |
 | (the `text` argument) | (`text`) | `null` | the chart to draw; wins over `src` and the script child |

package/dist/element.js

@@ -10,7 +10,8 @@ import { loadErrorContent, shadowContent, THEMES } from "./html.js";
 export function optionsFromAttributes(el) {
     const theme = el.getAttribute("theme");
     const numerals = NUMERALS.find((n) => n === el.getAttribute("numerals"));
-    const part = el.getAttribute("part");
+    // Not `part`: that global attribute names an element for ::part() styling.
+    const part = el.getAttribute("show-part");
     return {
         theme: THEMES.find((t) => t === theme) ?? "auto",
         barNumbers: el.getAttribute("bar-numbers") !== "off",
@@ -58,7 +59,7 @@ function defineElement() {
             "rehearsal-letters",
             "numerals",
             "wrap",
-            "part",
+            "show-part",
         ];
         #observer = new MutationObserver(() => this.#schedule());
         #renders = 0;
@@ -139,6 +140,16 @@ function defineElement() {
             else
                 this.setAttribute("numerals", v);
         }
+        /** The label of the part to draw on its own, or null for the whole chart. */
+        get showPart() {
+            return this.getAttribute("show-part");
+        }
+        set showPart(v) {
+            if (v === null)
+                this.removeAttribute("show-part");
+            else
+                this.setAttribute("show-part", v);
+        }
         /** Every change in one task (an upgrade sets each attribute in turn) renders once. */
         #schedule() {
             if (this.#scheduled)

package/dist/html.js

@@ -7,7 +7,7 @@ import { printDirection, printPasses, } from "barmark";
 import { glyphs, NUMERALS, splitPitch, typesetChord, typesetNumeral, } from "./chord.js";
 import { escapeHtml } from "./escape.js";
 import { fontFaceCss } from "./font.js";
-import { layoutChart } from "./model.js";
+import { isTacet as isTacetCell, layoutChart } from "./model.js";
 import { speakBar } from "./speech.js";
 import { FIT_STEPS, MIN_BAR, stylesheet } from "./styles.js";
 export function renderChart(text, options = {}) {
@@ -22,7 +22,7 @@ function elementAttributes(options) {
         options.rehearsalLetters ? " rehearsal-letters" : "",
         numeralsOf(options) ? ` numerals="${numeralsOf(options)}"` : "",
         options.wrap === false ? ' wrap="off"' : "",
-        options.part ? ` part="${escapeHtml(options.part)}"` : "",
+        options.part ? ` show-part="${escapeHtml(options.part)}"` : "",
     ].join("");
 }
 export const THEMES = ["auto", "light", "dark"];
@@ -171,9 +171,11 @@ function errorHtml(source, messages) {
 /** A system: its parts' rows stacked, sharing the section's columns (barmark's grammar 7.4). */
 function systemHtml(item, columns, settings) {
     const names = escapeHtml(item.rows.map((p) => p.name).join(", "));
+    // The first drawn row carries what the system shares: its number, ×N, the ending's number.
+    const lead = item.rows.findIndex((p) => p.row.kind === "row");
     const rows = item.rows.map((p, i) => p.row.kind === "error"
         ? errorHtml(p.row.source, p.row.messages)
-        : rowHtml(p.row, columns, settings, { label: p.label, name: p.name, first: i === 0 }));
+        : rowHtml(p.row, columns, settings, { label: p.label, name: p.name, first: i === lead }));
     return `<div class="bm-system" role="group" aria-label="${names}">${rows.join("")}</div>`;
 }
 /** The left column: the bar number, and in a system the part's label. */
@@ -186,16 +188,14 @@ function gutterHtml(row, settings, part) {
         : "";
     return `<span class="bm-bar-number" part="bar-number" aria-hidden="true">${label}${number}</span>`;
 }
-const isTacetCell = (c) => c.kind === "slots" && c.tacet === true;
 /** A row's cells; a tacet row says "tacet" in its first bar. */
 function rowCells(row, numerals, ending) {
     let n = row.barNumber;
     const firstTacet = row.cells.findIndex(isTacetCell);
     return row.cells.map((cell, i) => {
         const marks = repeatMarks(row, i) + (i === 0 ? ending : "");
-        const spoken = `<span class="bm-sr">bar ${n ?? ""}: tacet</span>`;
         const html = isTacetCell(cell)
-            ? tacetHtml(spoken, marks, i === firstTacet ? "tacet" : "")
+            ? tacetHtml(cell, n, marks, i === firstTacet)
             : cellHtml(cell, n, marks, numerals);
         if (n !== null && cell.kind === "slots")
             n++;
@@ -208,7 +208,7 @@ function rowClasses(row, part) {
     const classes = ["bm-row"];
     if (part)
         classes.push("bm-part-row");
-    if (part && row.cells.some(isTacetCell))
+    if (row.cells.some(isTacetCell))
         classes.push("bm-tacet");
     if (row.ending)
         classes.push("bm-ending");
@@ -216,15 +216,17 @@ function rowClasses(row, part) {
 }
 /** What a screen reader hears before a row's bars: its part, a repeat start, its ending. */
 function rowOpening(row, part, ending) {
-    const opens = row.opens || typeof row.repeat === "number" || row.repeat === "open";
+    const opens = leads(part) && (row.opens || typeof row.repeat === "number" || row.repeat === "open");
     return sr(part ? escapeHtml(part.name) : "") + sr(opens ? "repeat start" : "") + sr(ending);
 }
+/** Whether a row says what its system shares: a row on its own, or a system's first drawn row. */
+const leads = (part) => !part || part.first;
 function rowHtml(row, columns, settings, part) {
-    const label = row.ending ? endingLabel(row.ending) : null;
+    const label = row.ending && leads(part) ? endingLabel(row.ending) : null;
     const cells = rowCells(row, settings.numerals, label ? ` data-ending="${label.shown}"` : "");
     const empty = `<span class="bm-empty" aria-hidden="true"></span>`.repeat(Math.max(0, columns - row.cells.length));
     const said = rowOpening(row, part, label?.spoken ?? "");
-    return `<div class="${rowClasses(row, part)}">${said}${gutterHtml(row, settings, part)}${cells.join("")}${empty}<span class="bm-repeat">${rowRepeatHtml(row)}</span></div>`;
+    return `<div class="${rowClasses(row, part)}">${said}${gutterHtml(row, settings, part)}${cells.join("")}${empty}<span class="bm-repeat">${leads(part) ? 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) {
@@ -268,8 +270,10 @@ function barBody(cell, view) {
     return [`${meter}${slots}${cut}`, end];
 }
 /** A bar where the part rests; the first of a row says so, in its body. */
-function tacetHtml(spoken, marks, text = "") {
-    return `<div class="bm-bar bm-tacet-bar" part="bar"${marks}>${spoken}<span class="bm-bar-body" aria-hidden="true">${text}</span></div>`;
+function tacetHtml(cell, n, marks, first) {
+    const cut = cell.kind === "slots" && cell.cut;
+    const spoken = `<span class="bm-sr">bar ${n ?? ""}: tacet${cut ? ", cut on this pass" : ""}</span>`;
+    return `<div class="bm-bar bm-tacet-bar" part="bar"${marks}${cut ? " data-cut" : ""}>${spoken}<span class="bm-bar-body" aria-hidden="true">${first ? "tacet" : ""}</span></div>`;
 }
 /** A bar's slots, each under any words before it, and the words after the last slot. */
 function slotsWithWords(cell, view) {
@@ -380,5 +384,7 @@ function notesHtml(record) {
 function diagnosticsHtml(model) {
     if (!model.diagnostics.length)
         return "";
-    return `<ul class="bm-diagnostics">${model.diagnostics.map((d) => `<li class="bm-${d.severity}">line ${d.line}: ${escapeHtml(d.message)}</li>`).join("")}</ul>`;
+    // Line 0: about the whole chart, not a line of it.
+    const at = (line) => (line > 0 ? `line ${line}: ` : "");
+    return `<ul class="bm-diagnostics">${model.diagnostics.map((d) => `<li class="bm-${d.severity}">${at(d.line)}${escapeHtml(d.message)}</li>`).join("")}</ul>`;
 }

package/dist/model.d.ts

@@ -1,2 +1,4 @@
-import type { ChartModel, LayoutOptions } from "./types.js";
+import type { CellModel, ChartModel, LayoutOptions } from "./types.js";
 export declare function layoutChart(text: string, options?: LayoutOptions): ChartModel;
+/** A bar where the part rests, in a system or a part's own view (barmark's grammar 7.4). */
+export declare const isTacet: (c: CellModel) => boolean;

package/dist/model.js

@@ -34,7 +34,8 @@ function parseFor(text, part) {
         return one ?? parseChart(text);
     const whole = parseChart(text);
     const missing = {
-        line: 1,
+        // Line 0: the warning is about the chart, not one of its lines.
+        line: 0,
         severity: "warning",
         message: `no part labelled ${part}`,
         token: part,
@@ -242,7 +243,8 @@ const lastOfSystem = (item) => {
     const first = item.rows.find((p) => p.row.kind === "row" && !p.row.cells.some(isTacet))?.row;
     return first?.kind === "row" ? lastSlots(first.cells) : null;
 };
-const isTacet = (c) => c.kind === "slots" && c.tacet === true;
+/** A bar where the part rests, in a system or a part's own view (barmark's grammar 7.4). */
+export const isTacet = (c) => c.kind === "slots" && c.tacet === true;
 /** A row per declared part, in score order: its own line, its error, or tacet bars. */
 function layoutSystem(lines, occurrence, previous, ctx) {
     const ref = lines.find((l) => l.kind === "bars" && !ctx.errors.has(l.line));

package/dist/speech.js

@@ -149,8 +149,6 @@ export function speakBar(barNumber, cell, numerals = false) {
     if (cell.kind === "rehearsal")
         return `rehearsal ${cell.label}`;
     const bar = `bar${barNumber === null ? "" : ` ${barNumber}`}`;
-    if (cell.tacet)
-        return `${bar}: tacet`;
     if (cell.simile)
         return `${bar}: each part repeats its bar before`;
     const meter = cell.meter ? `, in ${cell.meter.n}/${cell.meter.d}` : "";

package/package.json

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