@barmark/render 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -6,6 +6,48 @@ 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.
+
+### Added
+
+- **Several parts** (barmark 0.14.0, grammar 7.4): a system draws as
+  stacked rows, one per declared part in score order, sharing the
+  section's columns, with the part's label in the gutter and one bar
+  number. A part tacet there gets an empty row marked "tacet"; a tutti
+  line stays one row. The header lists the parts. The model gains
+  `parts`, a `system` item (its `rows`, each a row or an error) and
+  `tacet` on a bar. A tutti bar the parts play differently (`%` or a
+  leading `/` after a system) is drawn as written, `%` included, with
+  `simile` on its cell, rather than as one part's chords.
+- **One part's view**: the `part` option and attribute draw only the
+  part with that label, as a single-part chart, with "tacet" where it
+  rests. An undeclared label draws the whole chart with a warning.
+
 ## [0.10.0] - 2026-11-03
 
 ### Added
@@ -275,7 +317,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.10.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
 [0.9.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.8.0...render-v0.9.0

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,6 +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` | `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 |
@@ -185,6 +188,14 @@ section shows the numbers it was written with. A line with an error shows as wri
 with its message. `layoutChart(text)` returns all of this as data, if
 you want to draw it yourself.
 
+A chart of several parts (barmark's grammar 7.4) draws each system as
+stacked rows, one per part in score order, with the part's label in the
+gutter and one bar number on the top row. A part tacet in a system gets
+an empty row that says "tacet" in its first bar, so every system keeps its
+shape; a tutti line is one row. The header lists the parts' names, and
+each part row is announced by name to a screen reader. On a screen too
+narrow for a section, its rows wrap one by one, as any row does.
+
 ## License
 
 MIT. Edwin is © MuseScore Limited, under the SIL Open Font License 1.1.

package/dist/element.js

@@ -10,12 +10,15 @@ 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"));
+    // 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",
         rehearsalLetters: el.hasAttribute("rehearsal-letters"),
         wrap: el.getAttribute("wrap") !== "off",
         ...(numerals ? { numerals } : {}),
+        ...(part ? { part } : {}),
     };
 }
 /** What a chart draws: its `text` while that is a string, else `src`, else its script child. */
@@ -56,6 +59,7 @@ function defineElement() {
             "rehearsal-letters",
             "numerals",
             "wrap",
+            "show-part",
         ];
         #observer = new MutationObserver(() => this.#schedule());
         #renders = 0;
@@ -136,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.d.ts

@@ -14,6 +14,8 @@ export type RenderOptions = {
      * With `false` rows keep their columns, and the page scrolls the chart instead.
      */
     wrap?: boolean;
+    /** Draw only the part with this label (barmark's grammar 7.4): one player's view. */
+    part?: string;
 };
 export declare function renderChart(text: string, options?: RenderOptions): string;
 export declare const THEMES: readonly ["auto", "light", "dark"];

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,6 +22,7 @@ function elementAttributes(options) {
         options.rehearsalLetters ? " rehearsal-letters" : "",
         numeralsOf(options) ? ` numerals="${numeralsOf(options)}"` : "",
         options.wrap === false ? ' wrap="off"' : "",
+        options.part ? ` show-part="${escapeHtml(options.part)}"` : "",
     ].join("");
 }
 export const THEMES = ["auto", "light", "dark"];
@@ -37,20 +38,28 @@ export function renderChartUnwrapped(text, options = {}) {
     return `${fontStyle(options)}${chartHtml(text, options)}`;
 }
 function chartHtml(text, options) {
-    const model = layoutChart(text, { rehearsalLetters: options.rehearsalLetters ?? false });
+    const model = layoutChart(text, {
+        rehearsalLetters: options.rehearsalLetters ?? false,
+        ...(options.part && { part: options.part }),
+    });
+    const barNumbers = options.barNumbers ?? true;
+    const parts = model.parts.length > 1;
     const settings = {
-        barNumbers: options.barNumbers ?? true,
+        barNumbers,
+        gutter: barNumbers || parts,
         numerals: numeralsOf(options),
     };
-    return `<div class="bm-chart" data-theme="${themeOf(options)}"${settings.barNumbers ? "" : ' data-bar-numbers="off"'}${options.wrap === false ? ' data-wrap="off"' : ""}>${headerHtml(model)}${model.blocks.map((b) => blockHtml(b, settings)).join("")}${options.diagnostics ? diagnosticsHtml(model) : ""}</div>`;
+    // Every section's left column is as wide as the longest part label, so tutti rows line up with systems.
+    const widest = Math.max(0, ...model.parts.map((p) => p.label?.length ?? 0));
+    const gutter = parts ? ` data-parts style="--bm-label-chars:${widest}"` : "";
+    return `<div class="bm-chart" data-theme="${themeOf(options)}"${gutter}${settings.barNumbers ? "" : ' data-bar-numbers="off"'}${options.wrap === false ? ' data-wrap="off"' : ""}>${headerHtml(model)}${model.blocks.map((b) => blockHtml(b, settings)).join("")}${options.diagnostics ? diagnosticsHtml(model) : ""}</div>`;
 }
 function headerHtml(model) {
     const title = model.title
         ? `<h2 class="bm-title" part="title">${escapeHtml(model.title)}</h2>`
         : "";
-    const meta = [model.part ? escapeHtml(model.part.name) : "", metaText(model.header)]
-        .filter(Boolean)
-        .join(" · ");
+    const names = model.parts.length > 1 ? model.parts.map((p) => p.name).join(", ") : model.part?.name;
+    const meta = [names ? escapeHtml(names) : "", metaText(model.header)].filter(Boolean).join(" · ");
     if (!title && !meta)
         return "";
     return `<header class="bm-header">${title}${meta ? `<p class="bm-meta" part="meta">${meta}</p>` : ""}</header>`;
@@ -144,6 +153,8 @@ function itemHtml(item, columns, settings) {
     switch (item.kind) {
         case "row":
             return rowHtml(item, columns, settings);
+        case "system":
+            return systemHtml(item, columns, settings);
         case "text":
             return `<p class="bm-text${item.note ? " bm-note" : ""}" part="text">${escapeHtml(item.text)}</p>`;
         case "directive":
@@ -157,23 +168,65 @@ function errorHtml(source, messages) {
     const message = escapeHtml(messages.join("; "));
     return `<div class="bm-error" title="${message}"><code>${escapeHtml(source)}</code><span class="bm-sr">Error: ${message}</span></div>`;
 }
-function rowHtml(row, columns, settings) {
-    const number = settings.barNumbers
-        ? `<span class="bm-bar-number" part="bar-number" aria-hidden="true">${row.barNumber ?? ""}</span>`
+/** 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 === 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. */
+function gutterHtml(row, settings, part) {
+    if (!settings.gutter)
+        return "";
+    const number = settings.barNumbers && (!part || part.first) ? (row.barNumber ?? "") : "";
+    const label = part
+        ? `<span class="bm-part-label" part="part-label">${escapeHtml(part.label)}</span>`
         : "";
+    return `<span class="bm-bar-number" part="bar-number" aria-hidden="true">${label}${number}</span>`;
+}
+/** A row's cells; a tacet row says "tacet" in its first bar. */
+function rowCells(row, numerals, ending) {
     let n = row.barNumber;
-    const label = row.ending ? endingLabel(row.ending) : null;
-    const cells = row.cells.map((cell, i) => {
-        const ending = i === 0 && label ? ` data-ending="${label.shown}"` : "";
-        const html = cellHtml(cell, n, repeatMarks(row, i) + ending, settings.numerals);
+    const firstTacet = row.cells.findIndex(isTacetCell);
+    return row.cells.map((cell, i) => {
+        const marks = repeatMarks(row, i) + (i === 0 ? ending : "");
+        const html = isTacetCell(cell)
+            ? tacetHtml(cell, n, marks, i === firstTacet)
+            : cellHtml(cell, n, marks, numerals);
         if (n !== null && cell.kind === "slots")
             n++;
         return html;
     });
+}
+const sr = (text) => (text ? `<span class="bm-sr">${text}</span>` : "");
+/** The row's class list. */
+function rowClasses(row, part) {
+    const classes = ["bm-row"];
+    if (part)
+        classes.push("bm-part-row");
+    if (row.cells.some(isTacetCell))
+        classes.push("bm-tacet");
+    if (row.ending)
+        classes.push("bm-ending");
+    return classes.join(" ");
+}
+/** What a screen reader hears before a row's bars: its part, a repeat start, its ending. */
+function rowOpening(row, part, ending) {
+    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 && 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 opens = row.opens || typeof row.repeat === "number" || row.repeat === "open";
-    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>`;
+    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">${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) {
@@ -202,13 +255,25 @@ function cellHtml(cell, barNumber, marks, numerals) {
     const spoken = `<span class="bm-sr">${escapeHtml(speakBar(barNumber, cell, view !== null))}</span>`;
     if (cell.kind !== "slots")
         return betweenBarsHtml(cell, spoken, marks);
+    const change = cell.tempoChange ? ` data-tempo-change="${cell.tempoChange}"` : "";
+    const [body, end] = barBody(cell, view);
+    return `<div class="bm-bar" part="bar"${cell.cut ? " data-cut" : ""}${change}${marks}>${spoken}<span class="bm-bar-body" aria-hidden="true">${body}</span>${end}</div>`;
+}
+/** What a bar shows: its meter, its slots (or `%`), and "cut"; then the words after its last slot. */
+function barBody(cell, view) {
     const meter = cell.meter
         ? `<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>` : "";
-    const change = cell.tempoChange ? ` data-tempo-change="${cell.tempoChange}"` : "";
-    const [slots, end] = slotsWithWords(cell, view);
-    return `<div class="bm-bar" part="bar"${cell.cut ? " data-cut" : ""}${change}${marks}>${spoken}<span class="bm-bar-body" aria-hidden="true">${meter}${slots.join("")}${cut}</span>${end}</div>`;
+    const [written, end] = slotsWithWords(cell, view);
+    const slots = cell.simile ? `<span class="bm-simile">%</span>` : written.join("");
+    return [`${meter}${slots}${cut}`, end];
+}
+/** A bar where the part rests; the first of a row says so, in its body. */
+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) {
@@ -319,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

@@ -4,9 +4,46 @@
  * draws. Built from the parser's document lines; the played bars supply
  * bar numbers and the slots `%` copies.
  */
-import { parseChart, } from "barmark";
+import { extractPart, parseChart, } from "barmark";
+/** Whether a tutti bar's parts play different slots, as `%` or `/` on a tutti line can. */
+const playedApart = (b, line) => {
+    const own = (b.parts ?? []).filter((p) => p?.line === line).map((p) => JSON.stringify(p?.slots));
+    return new Set(own).size > 1;
+};
+/** Each part's bars on its own lines; a tutti bar once (barmark's grammar 7.4). */
+function barsByLine(parse) {
+    if (parse.parts.length < 2)
+        return parse.bars;
+    const seen = new Set();
+    return parse.bars.flatMap((b) => (b.parts ?? []).flatMap((p) => {
+        const key = `${b.index}:${p?.line}`;
+        if (!p || seen.has(key))
+            return [];
+        seen.add(key);
+        const { words: _w, parts: _p, tacet: _t, ...shared } = b;
+        const apart = playedApart(b, p.line) ? { perPart: true } : {};
+        return [
+            { ...shared, ...apart, line: p.line, slots: p.slots, ...(p.words && { words: p.words }) },
+        ];
+    }));
+}
+/** The whole chart, or one part of it; an undeclared part draws the whole chart, with a warning. */
+function parseFor(text, part) {
+    const one = part ? extractPart(text, part) : null;
+    if (one || !part)
+        return one ?? parseChart(text);
+    const whole = parseChart(text);
+    const missing = {
+        // Line 0: the warning is about the chart, not one of its lines.
+        line: 0,
+        severity: "warning",
+        message: `no part labelled ${part}`,
+        token: part,
+    };
+    return { ...whole, diagnostics: [missing, ...whole.diagnostics] };
+}
 export function layoutChart(text, options = {}) {
-    const parse = parseChart(text);
+    const parse = parseFor(text, options.part);
     const { header, body } = splitHeader(parse.lines);
     const groups = groupLines(body);
     const ctx = {
@@ -14,17 +51,25 @@ export function layoutChart(text, options = {}) {
         source: text.split(/\r?\n/),
         errors: errorsByLine(parse),
         written: new Map(groups.flatMap((g) => (g.heading ? [[g.heading.line, g]] : []))),
+        bars: barsByLine(parse),
     };
     const blocks = groups.map((g) => layoutGroup(g, ctx));
     if (options.rehearsalLetters)
         letterBlocks(blocks);
-    return { title: parse.title, part: parse.part, header, blocks, diagnostics: parse.diagnostics };
+    return {
+        title: parse.title,
+        part: parse.part,
+        parts: parse.parts,
+        header,
+        blocks,
+        diagnostics: parse.diagnostics,
+    };
 }
 /** Rehearsal letters mark position: every section occurrence, and leading bars, in play order. */
 function letterBlocks(blocks) {
     let n = 0;
     for (const b of blocks) {
-        if (b.form === null && !b.items.some((i) => i.kind === "row"))
+        if (b.form === null && !b.items.some((i) => i.kind === "row" || i.kind === "system"))
             continue;
         b.rehearsal = letters(n++);
     }
@@ -114,34 +159,61 @@ function substituteText(items, own) {
         return next ? [next] : [];
     });
     // Extra lines continue after the last row and any text already following it.
-    const after = Math.max(out.findLastIndex((i) => i.kind === "row"), out.findLastIndex((i) => i.kind === "text"));
+    const after = Math.max(out.findLastIndex((i) => i.kind === "row" || i.kind === "system"), out.findLastIndex((i) => i.kind === "text"));
     out.splice(after + 1, 0, ...queue);
     return out;
 }
-/** The parser cuts the last bar it would play; a fermata is not a bar. */
-function markCut(items) {
-    const r = items.findLastIndex((i) => i.kind === "row" && lastSlots(i.cells) !== null);
-    const row = items[r];
-    if (row?.kind !== "row")
-        return items;
+/** The row's last bar, marked cut. */
+function cutRow(row) {
     const c = row.cells.findLastIndex((cell) => cell.kind === "slots");
     const cells = row.cells.map((cell, i) => i === c && cell.kind === "slots" ? { ...cell, cut: true } : cell);
-    return items.map((item, i) => (i === r ? { ...row, cells } : item));
+    return { ...row, cells };
+}
+const hasBars = (i) => (i.kind === "row" && lastSlots(i.cells) !== null) || i.kind === "system";
+/** The parser cuts the last bar it would play; a fermata is not a bar. A system's every part loses it. */
+function markCut(items) {
+    const r = items.findLastIndex(hasBars);
+    const item = items[r];
+    if (!item || (item.kind !== "row" && item.kind !== "system"))
+        return items;
+    const cut = item.kind === "row"
+        ? cutRow(item)
+        : {
+            ...item,
+            rows: item.rows.map((p) => (p.row.kind === "row" ? { ...p, row: cutRow(p.row) } : p)),
+        };
+    return items.map((it, i) => (i === r ? cut : it));
 }
+/** How many cells an item's widest row has. */
+const widthOf = (i) => i.kind === "row"
+    ? i.cells.length
+    : i.kind === "system"
+        ? Math.max(0, ...i.rows.map((p) => (p.row.kind === "row" ? p.row.cells.length : 0)))
+        : 0;
 function blockOf(h, occurrence, items) {
     return {
         heading: h?.name ?? null,
         repeat: h?.repeat ?? null,
         form: occurrence?.form ?? null,
         rehearsal: null,
-        columns: Math.max(0, ...items.map((i) => (i.kind === "row" ? i.cells.length : 0))),
+        columns: Math.max(0, ...items.map(widthOf)),
         items,
     };
 }
 function layoutLines(lines, occurrence, ctx) {
     const items = [];
     let previous = null;
-    for (const l of lines) {
+    for (const [i, l] of lines.entries()) {
+        const system = systemOf(l);
+        if (system !== null) {
+            // A system is laid out once, at its first line.
+            if (systemOf(lines[i - 1]) === system)
+                continue;
+            const item = layoutSystem(systemLines(lines, i), occurrence, previous, ctx);
+            previous = lastOfSystem(item) ?? previous;
+            items.push(item);
+            continue;
+        }
         if (ctx.errors.has(l.line)) {
             items.push(errorItem(l.line, ctx));
             continue;
@@ -155,10 +227,66 @@ function layoutLines(lines, occurrence, ctx) {
     }
     return items;
 }
+const systemOf = (l) => (l?.kind === "bars" || l?.kind === "invalid") && l.system !== undefined ? l.system : null;
+/** The lines of the system that starts at `i`. */
+function systemLines(lines, i) {
+    const system = systemOf(lines[i]);
+    const out = [];
+    for (const l of lines.slice(i)) {
+        if (systemOf(l) !== system)
+            break;
+        out.push(l);
+    }
+    return out;
+}
+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;
+};
+/** 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));
+    const reference = ref
+        ? layoutRow(ref, playedOn(ref.line, occurrence, ctx.bars), previous, ctx)
+        : null;
+    const rows = ctx.parse.parts.map((p) => {
+        const own = lines.find((l) => l.part === p.label);
+        const row = own && ctx.errors.has(own.line)
+            ? errorItem(own.line, ctx)
+            : own?.kind === "bars"
+                ? layoutRow(own, playedOn(own.line, occurrence, ctx.bars), previous, ctx)
+                : tacetRow(reference, lines[0]?.line ?? 0);
+        return { label: p.label ?? "", name: p.name, row };
+    });
+    return {
+        kind: "system",
+        line: lines[0]?.line ?? 0,
+        barNumber: reference?.barNumber ?? null,
+        rows,
+    };
+}
+const NO_ROW = {
+    kind: "row",
+    line: 0,
+    barNumber: null,
+    opens: false,
+    closes: false,
+    repeat: null,
+    ending: null,
+    cells: [],
+};
+/** The system's bars, with nothing played in them (barmark's grammar 7.4). */
+function tacetRow(reference, line) {
+    const base = reference ?? NO_ROW;
+    const cells = base.cells.map((c) => c.kind === "slots" ? { kind: "slots", meter: c.meter, slots: [], cut: false, tacet: true } : c);
+    return { ...base, line, cells };
+}
 function layoutLine(l, occurrence, previous, ctx) {
     switch (l.kind) {
         case "bars":
-            return layoutRow(l, playedOn(l.line, occurrence, ctx.parse.bars), previous, ctx);
+            return layoutRow(l, playedOn(l.line, occurrence, ctx.bars), previous, ctx);
         case "text":
             return textItem(l.text);
         case "directive":
@@ -193,7 +321,7 @@ function playedOn(line, occurrence, bars) {
 function layoutRow(l, played, previous, ctx) {
     const cells = [];
     // A cut bar is not played: what it would play is what the line's bar played when written.
-    const written = ctx.parse.bars.filter((b) => b.line === l.line);
+    const written = ctx.bars.filter((b) => b.line === l.line);
     let bar = 0;
     let prev = previous;
     for (const cell of l.cells) {
@@ -222,8 +350,16 @@ function layoutCell(cell, played, previous) {
         return { kind: "fermata" };
     if (cell.kind === "direction" || cell.kind === "rehearsal")
         return cell;
+    // Parts that play a tutti bar differently each read their own: draw it as written.
+    if (played?.perPart)
+        return withPlayed(asWritten(cell, previous), played);
     return withPlayed(layoutBar(cell, played, previous), played);
 }
+/** A tutti bar as written: its own slots, holds as holds, or `%` itself. */
+function asWritten(cell, previous) {
+    const bar = layoutBar(cell, undefined, previous);
+    return cell.kind === "simile" ? { ...bar, slots: [], simile: true } : bar;
+}
 /** A bar or `%`, with the slots it plays. */
 function layoutBar(cell, played, previous) {
     const own = cell.kind === "slots" ? cell : null;
@@ -235,8 +371,11 @@ function layoutBar(cell, played, previous) {
         ...wordsOf(cell),
     };
 }
-/** The words written on a bar, as a field to spread; nothing when it has none. */
-const wordsOf = (cell) => cell.words ? { words: cell.words } : {};
+/** The words written on a bar, and whether the part rests there, as fields to spread. */
+const wordsOf = (cell) => ({
+    ...(cell.words && { words: cell.words }),
+    ...(cell.kind === "slots" && cell.tacet && { tacet: cell.tacet }),
+});
 /** What the parser says about the bar as played: inside a rit. or accel., and its key. */
 function withPlayed(cell, played) {
     const change = played?.tempoChange?.kind;

package/dist/speech.js

@@ -148,6 +148,9 @@ export function speakBar(barNumber, cell, numerals = false) {
         return speakDirection(cell.direction);
     if (cell.kind === "rehearsal")
         return `rehearsal ${cell.label}`;
+    const bar = `bar${barNumber === null ? "" : ` ${barNumber}`}`;
+    if (cell.simile)
+        return `${bar}: each part repeats its bar before`;
     const meter = cell.meter ? `, in ${cell.meter.n}/${cell.meter.d}` : "";
     const cut = cell.cut ? ", cut on this pass" : "";
     const words = (at) => (cell.words ?? []).filter((w) => w.at === at).map((w) => `“${w.text}”`);

package/dist/styles.js

@@ -85,7 +85,14 @@ const css = `
 .bm-grid{display:grid;grid-template-columns:${em(GUTTER)} repeat(var(--bm-cols),auto) auto;width:max-content;max-width:100%}
 .bm-chart[data-bar-numbers="off"] .bm-grid{grid-template-columns:repeat(var(--bm-cols),auto) auto}
 .bm-chart[data-wrap="off"] .bm-grid{max-width:none}
-.bm-row{display:contents}
+.bm-row,.bm-system{display:contents}
+.bm-chart[data-parts] .bm-grid{grid-template-columns:calc(${em(GUTTER + 0.9)} + var(--bm-label-chars) * .62em) repeat(var(--bm-cols),auto) auto}
+.bm-chart[data-parts] .bm-bar-number{width:auto;justify-content:flex-end;gap:.35em;padding-right:.45em}
+.bm-part-row>.bm-bar-number{border-right:.15em solid var(--bm-rule)}
+.bm-part-label{margin-right:auto}
+.bm-part-label{font-family:${LABEL};font-weight:600;color:var(--bm-ink)}
+.bm-tacet-bar .bm-bar-body{font-family:${LABEL};font-style:italic;color:var(--bm-muted)}
+:is(.bm-row,.bm-system,.bm-error)+.bm-system>.bm-row:first-child>*,.bm-system+.bm-row>*{margin-top:${em(ROW_GAP * 2)}}
 .bm-row+.bm-row>*{margin-top:${em(ROW_GAP)}}
 .bm-row+.bm-row>.bm-bar-number{margin-top:${at(SIZES.barNumber, ROW_GAP)}}
 .bm-bar-number{display:flex;flex:none;align-items:baseline;width:${at(SIZES.barNumber, GUTTER)};padding-top:${at(SIZES.barNumber, 0.65)};font:${em(SIZES.barNumber)}/1 ${SANS};color:var(--bm-muted)}
@@ -102,7 +109,7 @@ const css = `
 .bm-chord{white-space:nowrap}
 .bm-chord sup{font-size:${em(SIZES.superscript)};vertical-align:.55em;line-height:0}
 .bm-chord sub{font-size:${em(SIZES.octave)};line-height:0}
-.bm-hold,.bm-unknown,.bm-brace{color:var(--bm-muted)}
+.bm-hold,.bm-unknown,.bm-brace,.bm-simile{color:var(--bm-muted)}
 .bm-nc{font-size:${em(SIZES.noChord)};letter-spacing:.06em}
 .bm-silence{display:inline-block;width:.9em;height:.32em;background:var(--bm-ink);vertical-align:.25em}
 .bm-ring,.bm-notes{font-size:${em(SIZES.noteNames)}}

package/dist/types.d.ts

@@ -1,12 +1,16 @@
 import type { ChartDiagnostic, Direction, Directives, Key, Meter, Part, Repeat, Slot, Words } from "barmark";
+/** `part`: draw only the part with this label (barmark's grammar 7.4), as a single-part chart. */
 export type LayoutOptions = {
     rehearsalLetters?: boolean;
+    part?: string;
 };
 /** What to draw, with every musical decision already made. */
 export type ChartModel = {
     title: string | null;
-    /** What `part:` names; null when the chart names none. */
+    /** What `part:` names in a single-part chart; null when the chart names none or several. */
     part: Part | null;
+    /** Every declared part, in score order (barmark's grammar 7.4). */
+    parts: Part[];
     /** Directives before the first heading, bar line or text line. */
     header: Directives;
     blocks: SectionBlock[];
@@ -24,6 +28,9 @@ export type SectionBlock = {
     columns: number;
     items: BlockItem[];
 };
+export type RowItem = Extract<BlockItem, {
+    kind: "row";
+}>;
 export type BlockItem = {
     kind: "row";
     line: number;
@@ -36,6 +43,21 @@ export type BlockItem = {
     ending: number[] | null;
     cells: CellModel[];
 }
+/**
+ * A system (barmark's grammar 7.4): a row per declared part, in score
+ * order, sharing bars. A part tacet there has a row of `tacet` bars; a
+ * part whose line has an error has an error item.
+ */
+ | {
+    kind: "system";
+    line: number;
+    barNumber: number | null;
+    rows: Array<{
+        label: string;
+        name: string;
+        row: RowItem | ErrorItem;
+    }>;
+}
 /** `note` marks a `###` line, whose text is given without the marks. */
  | {
     kind: "text";
@@ -44,7 +66,8 @@ export type BlockItem = {
 } | {
     kind: "directive";
     set: Directives;
-} | {
+} | ErrorItem;
+export type ErrorItem = {
     kind: "error";
     line: number;
     source: string;
@@ -61,6 +84,10 @@ export type CellModel = {
     key?: Key;
     /** Words written on the bar (barmark's grammar 2.6), each before slot `at`. */
     words?: Words[];
+    /** A bar where the part rests, in a system (barmark's grammar 7.4). */
+    tacet?: true;
+    /** `%` on a tutti line whose parts each copy a different bar: drawn as `%`, its slots empty (barmark's grammar 7.4). */
+    simile?: true;
 } | {
     kind: "fermata";
 }

package/package.json

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