@barmark/render 0.2.1 → 0.4.0

package/CHANGELOG.md

@@ -6,6 +6,47 @@ package uses [semantic versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [0.4.0] - 2026-11-01
+
+Chords as Nashville numbers or Roman numerals, and a little air between
+rows. Depends on `barmark` ^0.6.0, for `degreeOf`.
+
+### Added
+
+- **A numerals view**: `numerals: "nashville" | "roman"` (the `numerals`
+  attribute and property on `<barmark-chart>`). Each chord shows as its
+  degree in its bar's key, counted from the tonic against the major
+  scale (in A minor, C is ♭3). Nashville keeps the chord's quality and
+  superscript (Bm7 in D is 6m⁷, D/F♯ is 1/3); Roman shows minor and
+  diminished in lower case (vi⁷, vii°, ♭VII). Bars with no key, note
+  sets, N.C., `?` and `--` are unchanged. Screen readers hear the
+  numeral and the chord: "bar 5: five, A seven". Uses barmark 0.6.0's
+  `degreeOf`; each bar in the model now carries its `key`.
+
+### Changed
+
+- **A small gap between rows** (0.35em), so the bar lines of one row no
+  longer run into the next.
+
+### Changed
+
+- A little space (0.35 of the chord size) between consecutive bar rows,
+  and between bars that wrap onto another line on a narrow screen, so
+  one row's bar lines no longer run into the next row's.
+
+## [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 +158,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.2.1...HEAD
+[Unreleased]: https://github.com/kevinpeckham/barmark/compare/render-v0.4.0...HEAD
+[0.4.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.3.0...render-v0.4.0
+[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/README.md

@@ -75,10 +75,23 @@ the element loads, with `<style data-barmark-font>` holding
 | `theme` | `theme` (`theme`) | `"auto"` | `"auto"` follows the system; `"light"` or `"dark"` force one |
 | `barNumbers` | `bar-numbers="off"` (`barNumbers`) | `true` | bar numbers at the start of each row |
 | `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 |
 | `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 |
 
+### Numerals
+
+With `numerals`, each chord shows as its degree in the key its bar is
+played in, so a modulation renumbers from its next bar. Degrees count
+from the key's tonic against the major scale, in every mode: in `key:
+Am`, Am is 1m and C is ♭3. Nashville keeps the chord's quality and
+superscript after the number (Bm7 in D is 6m⁷, D/F♯ is 1/3); Roman
+shows minor and diminished in lower case (ii, vii°, ♭VII). A bar with
+no key, note sets, N.C., `?` and `--` look as they always do, and a
+screen reader hears both: "bar 5: five, A seven". Numbered chords carry
+`data-numeral`. It's a view: the music and bar numbers don't change.
+
 ## Styling on purpose
 
 Set these custom properties on the element or anything above it:

package/dist/chord.d.ts

@@ -1,5 +1,5 @@
 /** Chords and notes as display pieces: ♯ and ♭ glyphs, the suffix split for superscript. */
-import type { ChordParts } from "barmark";
+import { type ChordParts, type Key } from "barmark";
 export type ChordPieces = {
     root: string;
     /** m, dim, aug or 5: set on the baseline. */
@@ -11,6 +11,15 @@ export type ChordPieces = {
 /** `F#` → `F♯`, `b9` → `♭9`, `Bbb` → `B𝄫`. */
 export declare function glyphs(text: string): string;
 export declare function typesetChord(parts: ChordParts): ChordPieces;
+/** How chords read in a key: Nashville numbers (6m⁷) or Roman numerals (vi⁷). */
+export type Numerals = "nashville" | "roman";
+export declare const NUMERALS: readonly Numerals[];
+/**
+ * A chord as its degree in `key`: Nashville keeps the chord's quality and
+ * superscript after the number; Roman shows minor and diminished in lower
+ * case. A slash bass is a number in both. Null if the root has no degree.
+ */
+export declare function typesetNumeral(parts: ChordParts, key: Key, style: Numerals): ChordPieces | null;
 /** A note set's label (`E1`, `F#`) as name and octave. */
 export declare function splitPitch(label: string): {
     name: string;

package/dist/chord.js

@@ -1,3 +1,5 @@
+/** Chords and notes as display pieces: ♯ and ♭ glyphs, the suffix split for superscript. */
+import { degreeOf } from "barmark";
 const ACCIDENTALS = [
     [/##/g, "𝄪"],
     [/bb(?=\d|$|\))/g, "𝄫"],
@@ -17,6 +19,41 @@ export function typesetChord(parts) {
         bass: parts.bass ? glyphs(parts.bass) : null,
     };
 }
+export const NUMERALS = ["nashville", "roman"];
+const ROMAN = ["I", "II", "III", "IV", "V", "VI", "VII"];
+/** In Roman numerals case carries minor, so only diminished and augmented keep a mark. */
+const ROMAN_QUALITY = {
+    "": "",
+    m: "",
+    dim: "°",
+    aug: "+",
+    "5": "5",
+};
+const accidentals = (alter) => (alter < 0 ? "b" : "#").repeat(Math.abs(alter));
+/** `{ degree: 7, alter: -1 }` → `♭7`. */
+const degreeText = (d) => glyphs(`${accidentals(d.alter)}${d.degree}`);
+/**
+ * A chord as its degree in `key`: Nashville keeps the chord's quality and
+ * superscript after the number; Roman shows minor and diminished in lower
+ * case. A slash bass is a number in both. Null if the root has no degree.
+ */
+export function typesetNumeral(parts, key, style) {
+    const degree = degreeOf(parts.root, key);
+    if (!degree)
+        return null;
+    const pieces = typesetChord(parts);
+    const bass = parts.bass ? degreeOf(parts.bass, key) : null;
+    const withBass = { ...pieces, bass: bass ? degreeText(bass) : pieces.bass };
+    if (style === "nashville")
+        return { ...withBass, root: degreeText(degree) };
+    const numeral = ROMAN[degree.degree - 1] ?? "";
+    const lower = parts.quality === "m" || parts.quality === "dim";
+    return {
+        ...withBass,
+        root: glyphs(accidentals(degree.alter)) + (lower ? numeral.toLowerCase() : numeral),
+        quality: ROMAN_QUALITY[parts.quality],
+    };
+}
 /** A note set's label (`E1`, `F#`) as name and octave. */
 export function splitPitch(label) {
     const m = /^([A-G](?:##|bb|#|b)?)(-?\d+)?$/.exec(label);

package/dist/element.d.ts

@@ -1,3 +1,9 @@
+/**
+ * `<barmark-chart>`: renders itself from its `text` property, a `src` URL
+ * or a child `<script type="text/barmark">`, and again whenever one
+ * changes. A shadow root rendered on the server is reused. Importing this
+ * module registers the element (once) and the font (once per document).
+ */
 import { type RenderOptions } from "./html.js";
 type Attributes = {
     getAttribute(name: string): string | null;

package/dist/element.js

@@ -4,14 +4,17 @@
  * changes. A shadow root rendered on the server is reused. Importing this
  * module registers the element (once) and the font (once per document).
  */
+import { NUMERALS } from "./chord.js";
 import { FONT_FAMILY, fontFaceCss } from "./font.js";
 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"));
     return {
         theme: THEMES.find((t) => t === theme) ?? "auto",
         barNumbers: el.getAttribute("bar-numbers") !== "off",
         rehearsalLetters: el.hasAttribute("rehearsal-letters"),
+        ...(numerals ? { numerals } : {}),
     };
 }
 /** What a chart draws: its `text` while that is a string, else `src`, else its script child. */
@@ -45,7 +48,7 @@ async function fetchText(src) {
 }
 function defineElement() {
     class BarmarkChart extends HTMLElement {
-        static observedAttributes = ["src", "theme", "bar-numbers", "rehearsal-letters"];
+        static observedAttributes = ["src", "theme", "bar-numbers", "rehearsal-letters", "numerals"];
         #observer = new MutationObserver(() => this.#schedule());
         #renders = 0;
         #scheduled = false;
@@ -106,6 +109,16 @@ function defineElement() {
         set rehearsalLetters(v) {
             this.toggleAttribute("rehearsal-letters", v);
         }
+        /** "nashville", "roman", or null for chord names. */
+        get numerals() {
+            return optionsFromAttributes(this).numerals ?? null;
+        }
+        set numerals(v) {
+            if (v === null)
+                this.removeAttribute("numerals");
+            else
+                this.setAttribute("numerals", v);
+        }
         /** Every change in one task (an upgrade sets each attribute in turn) renders once. */
         #schedule() {
             if (this.#scheduled)

package/dist/html.d.ts

@@ -1,3 +1,4 @@
+import { type Numerals } from "./chord.js";
 export type RenderOptions = {
     theme?: "auto" | "light" | "dark";
     barNumbers?: boolean;
@@ -6,6 +7,8 @@ export type RenderOptions = {
     diagnostics?: boolean;
     /** Where the page serves Edwin-Roman.otf: emits its @font-face rule before the chart. */
     fontUrl?: string;
+    /** Show each chord as its degree in the bar's key, where the chart names one. Off by default. */
+    numerals?: Numerals;
 };
 export declare function renderChart(text: string, options?: RenderOptions): string;
 export declare const THEMES: readonly ["auto", "light", "dark"];

package/dist/html.js

@@ -1,4 +1,4 @@
-import { glyphs, splitPitch, typesetChord } from "./chord.js";
+import { glyphs, NUMERALS, splitPitch, typesetChord, typesetNumeral, } from "./chord.js";
 import { escapeHtml } from "./escape.js";
 import { fontFaceCss } from "./font.js";
 import { layoutChart } from "./model.js";
@@ -14,11 +14,13 @@ function elementAttributes(options) {
         theme === "auto" ? "" : ` theme="${theme}"`,
         options.barNumbers === false ? ' bar-numbers="off"' : "",
         options.rehearsalLetters ? " rehearsal-letters" : "",
+        numeralsOf(options) ? ` numerals="${numeralsOf(options)}"` : "",
     ].join("");
 }
 export const THEMES = ["auto", "light", "dark"];
 /** Only a known theme reaches the markup: hosts may pass any string through. */
 const themeOf = (options) => THEMES.find((t) => t === options.theme) ?? "auto";
+const numeralsOf = (options) => NUMERALS.find((n) => n === options.numerals) ?? null;
 /** What goes in the shadow root: the styles and the chart. */
 export const shadowContent = (text, options = {}) => `<style>${stylesheet}</style>${chartHtml(text, options)}`;
 /** A chart that could not be loaded: the message, shown where the chart would be. */
@@ -29,7 +31,10 @@ export function renderChartUnwrapped(text, options = {}) {
 }
 function chartHtml(text, options) {
     const model = layoutChart(text, { rehearsalLetters: options.rehearsalLetters ?? false });
-    const settings = { barNumbers: options.barNumbers ?? true };
+    const settings = {
+        barNumbers: options.barNumbers ?? true,
+        numerals: numeralsOf(options),
+    };
     return `<div class="bm-chart" data-theme="${themeOf(options)}"${settings.barNumbers ? "" : ' data-bar-numbers="off"'}>${headerHtml(model)}${model.blocks.map((b) => blockHtml(b, settings)).join("")}${options.diagnostics ? diagnosticsHtml(model) : ""}</div>`;
 }
 function headerHtml(model) {
@@ -41,16 +46,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) {
@@ -129,7 +145,7 @@ function rowHtml(row, columns, settings) {
         : "";
     let n = row.barNumber;
     const cells = row.cells.map((cell, i) => {
-        const html = cellHtml(cell, n, repeatMarks(row, i));
+        const html = cellHtml(cell, n, repeatMarks(row, i), settings.numerals);
         if (n !== null && cell.kind === "slots")
             n++;
         return html;
@@ -150,21 +166,23 @@ function rowRepeatHtml(row) {
         return row.closes ? `<span class="bm-sr">repeat end, play 2 times</span>` : "";
     return repeatHtml(row.repeat).trim();
 }
-function cellHtml(cell, barNumber, marks) {
-    const spoken = `<span class="bm-sr">${escapeHtml(speakBar(barNumber, cell))}</span>`;
+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>`;
     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>` : "";
-    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((s) => slotHtml(s, view)).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) {
+function slotHtml(slot, view) {
     switch (slot.kind) {
         case "chord":
-            return chordHtml(slot.chord);
+            return chordHtml(slot.chord, view);
         case "hold":
             return `<span class="bm-hold">/</span>`;
         case "nc":
@@ -174,17 +192,22 @@ function slotHtml(slot) {
         case "unknown":
             return `<span class="bm-unknown">?</span>`;
         case "group":
-            return `<span class="bm-group" data-count="${slot.members.length}"><span class="bm-tuplet">${slot.members.length}</span>${slot.members.map(slotHtml).join("")}</span>`;
+            return `<span class="bm-group" data-count="${slot.members.length}"><span class="bm-tuplet">${slot.members.length}</span>${slot.members.map((m) => slotHtml(m, view)).join("")}</span>`;
     }
 }
-function chordHtml(record) {
+function chordHtml(record, view) {
     if (record.kind === "notes" || !record.parts)
         return notesHtml(record);
-    const p = typesetChord(record.parts);
+    const numeral = view ? typesetNumeral(record.parts, view.key, view.style) : null;
+    if (!numeral)
+        return piecesHtml(typesetChord(record.parts), "");
+    return piecesHtml(numeral, ` data-numeral="${view?.style}"`);
+}
+function piecesHtml(p, attributes) {
     const quality = p.quality ? `<span class="bm-quality">${p.quality}</span>` : "";
     const sup = p.superscript ? `<sup>${escapeHtml(p.superscript)}</sup>` : "";
     const bass = p.bass ? `<span class="bm-bass">/${escapeHtml(p.bass)}</span>` : "";
-    return `<span class="bm-chord" part="chord">${escapeHtml(p.root)}${quality}${sup}${bass}</span>`;
+    return `<span class="bm-chord" part="chord"${attributes}>${escapeHtml(p.root)}${quality}${sup}${bass}</span>`;
 }
 /** A single note is ringed; a set sits in faint braces with its root underlined. */
 function notesHtml(record) {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export type { Numerals } from "./chord.js";
 export { FONT_FAMILY, fontFaceCss } from "./font.js";
 export { type RenderOptions, renderChart, renderChartUnwrapped } from "./html.js";
 export { layoutChart } from "./model.js";

package/dist/model.js

@@ -239,10 +239,16 @@ function layoutCell(cell, played, previous) {
     if (cell.kind === "fermata")
         return { kind: "fermata" };
     const from = cell.kind === "slots" ? cell : previous;
-    return {
+    return withPlayed({
         kind: "slots",
         meter: from?.meter ?? null,
         slots: played?.slots ?? (cell.kind === "slots" ? cell.slots : []),
         cut: false,
-    };
+    }, played);
+}
+/** 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;
+    const key = played?.key;
+    return { ...cell, ...(change ? { tempoChange: change } : {}), ...(key ? { key } : {}) };
 }

package/dist/speech.d.ts

@@ -2,9 +2,10 @@
  * Spoken names: how a screen reader reads a chart as music. Built from the
  * parsed structure, never from the symbol's text.
  */
-import type { ChordRecord, Slot } from "barmark";
+import { type ChordRecord, type Key, type Slot } from "barmark";
 import type { CellModel } from "./types.js";
-export declare function speakChord(record: ChordRecord): string;
-export declare function speakSlot(slot: Slot): string;
-/** "bar 9: G, hold, D, hold"; a fermata is held until cued. */
-export declare function speakBar(barNumber: number | null, cell: CellModel): string;
+/** A chord's name; with a key, its degree first: "five, A seven". */
+export declare function speakChord(record: ChordRecord, key?: Key): string;
+export declare function speakSlot(slot: Slot, key?: Key): string;
+/** "bar 9: G, hold, D, hold"; a fermata is held until cued. With `numerals`, each chord's degree comes first. */
+export declare function speakBar(barNumber: number | null, cell: CellModel, numerals?: boolean): string;

package/dist/speech.js

@@ -1,3 +1,8 @@
+/**
+ * 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";
 const NUMBERS = {
     "1": "one",
     "2": "two",
@@ -82,15 +87,25 @@ function speakNotes(record) {
     const spoken = labels.map((l) => l.endsWith("!") ? `${speakPitch(l.slice(0, -1))} (root)` : speakPitch(l));
     return `${spoken.length === 1 ? "note" : "notes"} ${spoken.join(", ")}`;
 }
-export function speakChord(record) {
+/** "five", "flat seven": a root's degree in a key. */
+function speakDegree(root, key) {
+    const d = degreeOf(root, key);
+    if (!d)
+        return "";
+    const accidental = ACCIDENTAL[(d.alter < 0 ? "b" : "#").repeat(Math.abs(d.alter))] ?? "";
+    return `${accidental.trim()} ${number(String(d.degree))}`.trim();
+}
+/** A chord's name; with a key, its degree first: "five, A seven". */
+export function speakChord(record, key) {
     if (record.kind === "notes" || !record.parts)
         return speakNotes(record);
-    return speakParts(record.parts);
+    const degree = key ? speakDegree(record.parts.root, key) : "";
+    return `${degree ? `${degree}, ` : ""}${speakParts(record.parts)}`;
 }
-export function speakSlot(slot) {
+export function speakSlot(slot, key) {
     switch (slot.kind) {
         case "chord":
-            return speakChord(slot.chord);
+            return speakChord(slot.chord, key);
         case "hold":
             return "hold";
         case "nc":
@@ -100,14 +115,14 @@ export function speakSlot(slot) {
         case "unknown":
             return "unknown chord";
         case "group":
-            return `${GROUPS[slot.members.length] ?? `group of ${slot.members.length}`}: ${slot.members.map(speakSlot).join(", ")}`;
+            return `${GROUPS[slot.members.length] ?? `group of ${slot.members.length}`}: ${slot.members.map((m) => speakSlot(m, key)).join(", ")}`;
     }
 }
-/** "bar 9: G, hold, D, hold"; a fermata is held until cued. */
-export function speakBar(barNumber, cell) {
+/** "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";
     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(speakSlot).join(", ")}${cut}`;
+    return `bar${barNumber === null ? "" : ` ${barNumber}`}${meter}: ${cell.slots.map((s) => speakSlot(s, numerals ? cell.key : undefined)).join(", ")}${cut}`;
 }

package/dist/styles.js

@@ -31,6 +31,8 @@ const SIZES = {
 const GUTTER = 2.06;
 export const MIN_BAR = 4.68;
 const HEADING_GAP = 0.645;
+/** Space between consecutive bar rows, so one row's bar lines don't run into the next. */
+const ROW_GAP = 0.35;
 /**
  * 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
@@ -83,6 +85,8 @@ 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-row{display:contents}
+.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)}
 .bm-bar-number::before{content:"\\200b";font:${em(1 / SIZES.barNumber)}/1.3 ${CHART_FONT}}
 .bm-chart[data-bar-numbers="off"] :is(.bm-heading,.bm-text,.bm-directive){margin-left:0}
@@ -111,6 +115,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)}}
@@ -127,7 +132,7 @@ const css = `
 }
 ${FIT_STEPS.map((w) => {
     const g = `.bm-grid[data-fit="${w}"]`;
-    return `@container bm (max-width:${w}em){${g}{display:block}${g}>.bm-row{display:flex;flex-wrap:wrap}${g} .bm-empty{display:none}${g} .bm-bar{flex:0 1 auto;max-width:100%;border-left:.075em solid var(--bm-rule);margin-left:-.075em}${g} :is(.bm-bar-body,.bm-group,.bm-notes){flex-wrap:wrap}${g} .bm-bar-body>*{flex:1 1 auto;min-width:auto}}`;
+    return `@container bm (max-width:${w}em){${g}{display:block}${g}>.bm-row{display:flex;flex-wrap:wrap;row-gap:${em(ROW_GAP)}}${g} .bm-empty{display:none}${g} .bm-bar{flex:0 1 auto;max-width:100%;border-left:.075em solid var(--bm-rule);margin-left:-.075em}${g} :is(.bm-bar-body,.bm-group,.bm-notes){flex-wrap:wrap}${g} .bm-bar-body>*{flex:1 1 auto;min-width:auto}}`;
 }).join("\n")}
 `;
 /** Collapse the readable source above: whitespace around punctuation and between rules. */

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { ChartDiagnostic, Directives, Meter, Repeat, Slot } from "barmark";
+import type { ChartDiagnostic, Directives, Key, Meter, Repeat, Slot } from "barmark";
 export type LayoutOptions = {
     rehearsalLetters?: boolean;
 };
@@ -51,6 +51,10 @@ export type CellModel = {
     meter: Meter | null;
     slots: Slot[];
     cut: boolean;
+    /** Set on a bar played inside a rit. or accel. */
+    tempoChange?: "rit" | "accel";
+    /** The key the bar is played in, when the chart names one. */
+    key?: Key;
 } | {
     kind: "fermata";
 };

package/package.json

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