@barmark/render 0.0.0 → 0.2.0

package/dist/html.js

@@ -0,0 +1,200 @@
+import { glyphs, splitPitch, typesetChord } from "./chord.js";
+import { escapeHtml } from "./escape.js";
+import { fontFaceCss } from "./font.js";
+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>`;
+}
+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";
+/** 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. */
+export const loadErrorContent = (message, options = {}) => `<style>${stylesheet}</style><div class="bm-chart" data-theme="${themeOf(options)}">${errorHtml("", [message])}</div>`;
+const fontStyle = (options) => options.fontUrl ? `<style>${fontFaceCss(options.fontUrl)}</style>` : "";
+export function renderChartUnwrapped(text, options = {}) {
+    return `${fontStyle(options)}${chartHtml(text, options)}`;
+}
+function chartHtml(text, options) {
+    const model = layoutChart(text, { rehearsalLetters: options.rehearsalLetters ?? false });
+    const settings = { barNumbers: options.barNumbers ?? true };
+    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) {
+    const title = model.title
+        ? `<h2 class="bm-title" part="title">${escapeHtml(model.title)}</h2>`
+        : "";
+    const meta = metaText(model.header);
+    if (!title && !meta)
+        return "";
+    return `<header class="bm-header">${title}${meta ? `<p class="bm-meta" part="meta">${meta}</p>` : ""}</header>`;
+}
+/** "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}` : ""],
+        ["Feel", d.feel ?? ""],
+    ]
+        .filter(([, value]) => value)
+        .map(([label, value]) => escapeHtml(labelled ? `${label} ${value}` : (value ?? "")))
+        .join(" · ");
+}
+function blockHtml(block, settings) {
+    const label = block.heading === null ? "" : ` aria-label="${escapeHtml(block.heading)}"`;
+    return `<section class="bm-section"${label}>${headingHtml(block)}<div class="bm-grid" style="--bm-cols:${Math.max(1, block.columns)}" data-fit="${fitWidth(block)}">${block.items.map((i) => itemHtml(i, block.columns, settings)).join("")}</div></section>`;
+}
+/**
+ * Roughly how many em a section needs with its columns aligned, rounded up
+ * to a step the stylesheet knows; narrower than that, its rows wrap.
+ */
+function fitWidth(block) {
+    const widths = [];
+    for (const item of block.items) {
+        if (item.kind !== "row")
+            continue;
+        item.cells.forEach((cell, i) => {
+            widths[i] = Math.max(widths[i] ?? 0, cellWidth(cell));
+        });
+    }
+    const total = 5 + widths.reduce((a, b) => a + b, 0);
+    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));
+/** Roughly: 0.65em a baseline character, 0.4em a superscript one, 0.6em between slots. */
+function slotWidth(slot) {
+    if (slot.kind === "group")
+        return slot.members.reduce((w, m) => w + slotWidth(m), 0.2);
+    if (slot.kind !== "chord")
+        return slot.kind === "nc" ? 1.8 : 1.4;
+    const { chord } = slot;
+    if (chord.kind === "notes" || !chord.parts)
+        return 0.65 * chord.canonical.length + 0.6;
+    const p = typesetChord(chord.parts);
+    const base = p.root.length + p.quality.length + (p.bass ? p.bass.length + 1 : 0);
+    return 0.65 * base + 0.4 * p.superscript.length + 0.6;
+}
+function headingHtml(block) {
+    if (block.heading === null)
+        return "";
+    const letter = block.rehearsal
+        ? `<span class="bm-rehearsal" part="rehearsal">${block.rehearsal}</span><span class="bm-sr">,</span> `
+        : "";
+    return `<h3 class="bm-heading" part="heading">${letter}${escapeHtml(block.heading)}${repeatHtml(block.repeat)}</h3>`;
+}
+/** The visible count and its spoken form: ×2 is "play 2 times". */
+function repeatHtml(repeat) {
+    if (repeat === null)
+        return "";
+    return repeat === "open"
+        ? ` <span class="bm-times" aria-hidden="true">× as needed</span><span class="bm-sr">repeat until cued</span>`
+        : ` <span class="bm-times" aria-hidden="true">×${repeat}</span><span class="bm-sr">play ${repeat} times</span>`;
+}
+function itemHtml(item, columns, settings) {
+    switch (item.kind) {
+        case "row":
+            return rowHtml(item, columns, settings);
+        case "text":
+            return `<p class="bm-text${item.note ? " bm-note" : ""}" part="text">${escapeHtml(item.text)}</p>`;
+        case "directive":
+            // Mid-chart, a change names itself: "→ Time 3/4", never a lone "3/4".
+            return `<p class="bm-directive" part="meta"><span class="bm-change" aria-hidden="true">→</span><span>${metaText(item.set, true)}</span></p>`;
+        case "error":
+            return errorHtml(item.source, item.messages);
+    }
+}
+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>`
+        : "";
+    let n = row.barNumber;
+    const cells = row.cells.map((cell, i) => {
+        const html = cellHtml(cell, n, repeatMarks(row, i));
+        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>`;
+}
+/** Repeat bar lines: ‖: on a row's first bar, :‖ on its last. */
+function repeatMarks(row, i) {
+    const whole = row.repeat !== null && !row.closes;
+    const start = i === 0 && (row.opens || whole);
+    const end = i === row.cells.length - 1 && (row.closes || row.repeat !== null);
+    return `${start ? " data-repeat-start" : ""}${end ? " data-repeat-end" : ""}`;
+}
+function rowRepeatHtml(row) {
+    if (row.repeat === null)
+        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>`;
+    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 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) {
+    switch (slot.kind) {
+        case "chord":
+            return chordHtml(slot.chord);
+        case "hold":
+            return `<span class="bm-hold">/</span>`;
+        case "nc":
+            return `<span class="bm-nc">N.C.</span>`;
+        case "silence":
+            return `<span class="bm-silence"></span>`;
+        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>`;
+    }
+}
+function chordHtml(record) {
+    if (record.kind === "notes" || !record.parts)
+        return notesHtml(record);
+    const p = typesetChord(record.parts);
+    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>`;
+}
+/** A single note is ringed; a set sits in faint braces with its root underlined. */
+function notesHtml(record) {
+    const labels = record.canonical
+        .replace(/^\{|\}$/g, "")
+        .split(/\s+/)
+        .filter(Boolean);
+    const notes = labels.map((label) => {
+        const root = label.endsWith("!");
+        const { name, octave } = splitPitch(root ? label.slice(0, -1) : label);
+        const html = `${escapeHtml(name)}${octave === null ? "" : `<sub>${escapeHtml(octave)}</sub>`}`;
+        return root ? `<u>${html}</u>` : html;
+    });
+    if (notes.length === 1)
+        return `<span class="bm-chord" part="chord"><span class="bm-ring">${notes[0]}</span></span>`;
+    return `<span class="bm-chord bm-notes" part="chord"><span class="bm-brace">{</span>${notes.map((n) => `<span class="bm-note-name">${n}</span>`).join(" ")}<span class="bm-brace">}</span></span>`;
+}
+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>`;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { FONT_FAMILY, fontFaceCss } from "./font.js";
+export { type RenderOptions, renderChart, renderChartUnwrapped } from "./html.js";
+export { layoutChart } from "./model.js";
+export { stylesheet } from "./styles.js";
+export type * from "./types.js";

package/dist/index.js

@@ -0,0 +1,4 @@
+export { FONT_FAMILY, fontFaceCss } from "./font.js";
+export { renderChart, renderChartUnwrapped } from "./html.js";
+export { layoutChart } from "./model.js";
+export { stylesheet } from "./styles.js";

package/dist/model.d.ts

@@ -0,0 +1,2 @@
+import type { ChartModel, LayoutOptions } from "./types.js";
+export declare function layoutChart(text: string, options?: LayoutOptions): ChartModel;

package/dist/model.js

@@ -0,0 +1,248 @@
+/**
+ * The chart model: what to draw, with every musical decision made here
+ * (`%` copied out, bar numbers, repeats, errors) so the HTML layer only
+ * draws. Built from the parser's document lines; the played bars supply
+ * bar numbers and the slots `%` copies.
+ */
+import { parseChart, } from "barmark";
+export function layoutChart(text, options = {}) {
+    const parse = parseChart(text);
+    const { header, body } = splitHeader(parse.lines);
+    const groups = groupLines(body);
+    const ctx = {
+        parse,
+        source: text.split(/\r?\n/),
+        errors: errorsByLine(parse),
+        lastKnownBar: lastKnownBar(parse.events),
+        written: new Map(groups.flatMap((g) => (g.heading ? [[g.heading.line, g]] : []))),
+    };
+    const blocks = groups.map((g) => layoutGroup(g, ctx));
+    if (options.rehearsalLetters)
+        letterBlocks(blocks);
+    return { title: parse.title, 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"))
+            continue;
+        b.rehearsal = letters(n++);
+    }
+}
+/** 0 → A, 25 → Z, 26 → AA, as spreadsheet columns count. */
+function letters(n) {
+    const head = n >= 26 ? letters(Math.floor(n / 26) - 1) : "";
+    return head + String.fromCharCode(65 + (n % 26));
+}
+function errorsByLine(parse) {
+    const errors = new Map();
+    for (const d of parse.diagnostics) {
+        if (d.severity !== "error")
+            continue;
+        errors.set(d.line, [...(errors.get(d.line) ?? []), d.message]);
+    }
+    return errors;
+}
+/** The count of bars up to the end of the first open repeat (all of them if there is none). */
+function lastKnownBar(events) {
+    let count = 0;
+    const countBars = (es) => {
+        for (const e of es) {
+            if (e.kind === "bar")
+                count++;
+            else if (e.kind === "open")
+                countBars(e.events);
+        }
+    };
+    for (const e of events) {
+        if (e.kind === "open") {
+            countBars(e.events);
+            return count;
+        }
+        if (e.kind === "bar")
+            count++;
+    }
+    return Number.POSITIVE_INFINITY;
+}
+/** The title line, and the directives before any other content, form the header. */
+function splitHeader(lines) {
+    const header = {};
+    let i = 0;
+    for (; i < lines.length; i++) {
+        const l = lines[i];
+        if (l?.kind === "title")
+            continue;
+        if (l?.kind !== "directive")
+            break;
+        Object.assign(header, l.set);
+    }
+    return { header, body: lines.slice(i).filter((l) => l.kind !== "title") };
+}
+function groupLines(lines) {
+    const groups = [];
+    let current = { heading: null, lines: [] };
+    for (const l of lines) {
+        if (l.kind === "section") {
+            if (current.heading || current.lines.length)
+                groups.push(current);
+            current = { heading: l, lines: [] };
+        }
+        else
+            current.lines.push(l);
+    }
+    if (current.heading || current.lines.length)
+        groups.push(current);
+    return groups;
+}
+function layoutGroup(group, ctx) {
+    const h = group.heading;
+    const occurrence = h ? ctx.parse.sections.find((s) => s.line === h.line) : undefined;
+    // A heading with an error is drawn as written, like any line with an error.
+    const broken = h !== null && ctx.errors.has(h.line);
+    const written = occurrence?.replayOf != null ? ctx.written.get(occurrence.replayOf) : undefined;
+    const items = [
+        ...(broken ? [errorItem(h.line, ctx)] : []),
+        ...(written && occurrence
+            ? layoutReplay(written, group, occurrence, ctx)
+            : layoutLines(group.lines, occurrence, ctx)),
+    ];
+    return blockOf(broken ? null : h, occurrence, items);
+}
+/**
+ * A replay draws its written section with its own bar numbers. Its own
+ * text lines replace the written section's in order (extra ones follow the
+ * last row); its other lines follow. `->` marks the bar the parser cut.
+ */
+function layoutReplay(written, replay, occurrence, ctx) {
+    const isText = (l) => l.kind === "text";
+    const body = layoutLines(written.lines, occurrence, ctx);
+    const ownText = layoutLines(replay.lines.filter(isText), occurrence, ctx);
+    const ownOther = layoutLines(replay.lines.filter((l) => !isText(l)), occurrence, ctx);
+    const items = [...substituteText(body, ownText), ...ownOther];
+    return occurrence.elided ? markCut(items) : items;
+}
+function substituteText(items, own) {
+    if (!own.length)
+        return items;
+    const queue = [...own];
+    const out = items.flatMap((i) => {
+        if (i.kind !== "text")
+            return [i];
+        const next = queue.shift();
+        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"));
+    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;
+    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));
+}
+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))),
+        items,
+    };
+}
+function layoutLines(lines, occurrence, ctx) {
+    const items = [];
+    let previous = null;
+    for (const l of lines) {
+        if (ctx.errors.has(l.line)) {
+            items.push(errorItem(l.line, ctx));
+            continue;
+        }
+        const item = layoutLine(l, occurrence, previous, ctx);
+        if (!item)
+            continue;
+        if (item.kind === "row")
+            previous = lastSlots(item.cells) ?? previous;
+        items.push(item);
+    }
+    return items;
+}
+function layoutLine(l, occurrence, previous, ctx) {
+    switch (l.kind) {
+        case "bars":
+            return layoutRow(l, playedOn(l.line, occurrence, ctx.parse.bars), previous, ctx);
+        case "text":
+            return textItem(l.text);
+        case "directive":
+            return { kind: "directive", set: l.set };
+        case "invalid":
+            return errorItem(l.line, ctx);
+        default:
+            return null;
+    }
+}
+function textItem(text) {
+    const note = /^###(\s|$)/.exec(text);
+    return note
+        ? { kind: "text", text: text.slice(note[0].length).trim(), note: true }
+        : { kind: "text", text, note: false };
+}
+function errorItem(line, ctx) {
+    return {
+        kind: "error",
+        line,
+        source: (ctx.source[line - 1] ?? "").trimEnd(),
+        messages: ctx.errors.get(line) ?? [],
+    };
+}
+const lastSlots = (cells) => cells.findLast((c) => c.kind === "slots") ?? null;
+/** The bars a line plays within its section occurrence, in play order. */
+function playedOn(line, occurrence, bars) {
+    const first = occurrence?.firstBar ?? 1;
+    const last = occurrence?.lastBar ?? Number.POSITIVE_INFINITY;
+    return bars.filter((b) => b.line === line && b.index >= first && b.index <= last);
+}
+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);
+    let bar = 0;
+    let prev = previous;
+    for (const cell of l.cells) {
+        const model = layoutCell(cell, played[bar] ?? written[bar], prev);
+        if (cell.kind !== "fermata")
+            bar++;
+        if (model.kind === "slots")
+            prev = model;
+        cells.push(model);
+    }
+    const firstIndex = played[0]?.index;
+    return {
+        kind: "row",
+        line: l.line,
+        barNumber: firstIndex !== undefined && firstIndex <= ctx.lastKnownBar ? firstIndex : null,
+        opens: l.opens,
+        closes: l.closes,
+        repeat: l.repeat,
+        cells,
+    };
+}
+/** A cell as drawn: `%` becomes the bar it copies, its slots as the parser resolved them; `previous` lends only its meter. */
+function layoutCell(cell, played, previous) {
+    if (cell.kind === "fermata")
+        return { kind: "fermata" };
+    const from = cell.kind === "slots" ? cell : previous;
+    return {
+        kind: "slots",
+        meter: from?.meter ?? null,
+        slots: played?.slots ?? (cell.kind === "slots" ? cell.slots : []),
+        cut: false,
+    };
+}

package/dist/speech.d.ts

@@ -0,0 +1,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 { 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;

package/dist/speech.js

@@ -0,0 +1,113 @@
+const NUMBERS = {
+    "1": "one",
+    "2": "two",
+    "3": "three",
+    "4": "four",
+    "5": "five",
+    "6": "six",
+    "7": "seven",
+    "9": "nine",
+    "11": "eleven",
+    "13": "thirteen",
+};
+const QUALITY = {
+    "": "",
+    m: "minor",
+    dim: "diminished",
+    aug: "augmented",
+    "5": "five",
+};
+const EXTENSION = {
+    "6": "six",
+    "6/9": "six nine",
+    "7": "seven",
+    maj7: "major seven",
+    "9": "nine",
+    maj9: "major nine",
+    "11": "eleven",
+    "13": "thirteen",
+    maj13: "major thirteen",
+    "7alt": "seven altered",
+};
+const SUS = { sus2: "sus two", sus4: "sus four" };
+const GROUPS = {
+    2: "duplet",
+    3: "triplet",
+    4: "quadruplet",
+    5: "quintuplet",
+    6: "sextuplet",
+};
+const number = (n) => NUMBERS[n] ?? n.split("").join(" ");
+const ACCIDENTAL = {
+    "#": " sharp",
+    "##": " double sharp",
+    b: " flat",
+    bb: " double flat",
+};
+/** `F#` → "F sharp", `E1` → "E one". */
+function speakPitch(label) {
+    const m = /^([A-G])(##|bb|#|b)?(-?\d+)?$/.exec(label);
+    if (!m)
+        return label;
+    const octave = m[3] === undefined
+        ? ""
+        : ` ${m[3].startsWith("-") ? "minus " : ""}${number(m[3].replace("-", ""))}`;
+    return `${m[1]}${ACCIDENTAL[m[2] ?? ""] ?? ""}${octave}`;
+}
+/** `b9` → "flat nine"; a natural tone is added: `9` → "add nine". */
+function speakTone(tone) {
+    const m = /^(#|b)?(\d+)$/.exec(tone);
+    if (!m)
+        return tone;
+    return `${m[1] ? (m[1] === "#" ? "sharp" : "flat") : "add"} ${number(m[2] ?? "")}`;
+}
+function speakParts(p) {
+    return [
+        speakPitch(p.root),
+        QUALITY[p.quality],
+        p.extension ? EXTENSION[p.extension] : "",
+        p.sus ? SUS[p.sus] : "",
+        ...p.tones.map(speakTone),
+        p.bass ? `over ${speakPitch(p.bass)}` : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+}
+/** A note set: "note E", "notes D, E (root), G". */
+function speakNotes(record) {
+    const labels = record.canonical
+        .replace(/^\{|\}$/g, "")
+        .split(/\s+/)
+        .filter(Boolean);
+    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) {
+    if (record.kind === "notes" || !record.parts)
+        return speakNotes(record);
+    return speakParts(record.parts);
+}
+export function speakSlot(slot) {
+    switch (slot.kind) {
+        case "chord":
+            return speakChord(slot.chord);
+        case "hold":
+            return "hold";
+        case "nc":
+            return "no chord";
+        case "silence":
+            return "stop";
+        case "unknown":
+            return "unknown chord";
+        case "group":
+            return `${GROUPS[slot.members.length] ?? `group of ${slot.members.length}`}: ${slot.members.map(speakSlot).join(", ")}`;
+    }
+}
+/** "bar 9: G, hold, D, hold"; a fermata is held until cued. */
+export function speakBar(barNumber, cell) {
+    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}`;
+}

package/dist/styles.d.ts

@@ -0,0 +1,16 @@
+export declare const MIN_BAR = 4.68;
+export type Palette = {
+    ink: string;
+    paper: string;
+    muted: string;
+    rule: string;
+    accent: string;
+};
+/** Both pass WCAG AA on their paper (tests/contrast.test.ts). */
+export declare const PALETTES: {
+    light: Palette;
+    dark: Palette;
+};
+/** Section widths, in em, at which a section stops aligning columns and wraps its rows. */
+export declare const FIT_STEPS: number[];
+export declare const stylesheet: string;