@barmark/render 0.0.0 → 0.2.0

package/dist/styles.js

@@ -0,0 +1,130 @@
+import { FONT_FAMILY } from "./font.js";
+/**
+ * The chart's styles. Everything is sized in em from `--barmark-size`, so
+ * text size and zoom scale the chart; colours come from the palettes below
+ * unless the page sets the `--barmark-*` custom properties.
+ */
+/**
+ * Text sizes as fractions of the chord size, `--barmark-size` (1rem unless
+ * the page sets it). Chosen on barmark.dev, 2026-11-01: at the default size
+ * nothing a reader needs is under 12px. The superscript is a fraction of its
+ * chord and the octave of its note name; everything else of the chord size.
+ */
+const SIZES = {
+    title: 1.16,
+    meta: 1,
+    directive: 0.97,
+    heading: 0.77,
+    text: 0.9,
+    noChord: 1.03,
+    noteNames: 0.9,
+    superscript: 0.84,
+    octave: 0.79,
+    tuplet: 0.84,
+    repeat: 0.97,
+    diagnostics: 0.97,
+    barNumber: 0.84,
+    meter: 0.77,
+    cut: 0.77,
+};
+/** Lengths, in chord sizes: the bar-number gutter, the narrowest bar (a D7sus4 bar), the gap under a heading. */
+const GUTTER = 2.06;
+export const MIN_BAR = 4.68;
+const HEADING_GAP = 0.645;
+/** The single note's ring, in its own em: padding, and the border it spills past. */
+const RING = { y: 0.21, x: 0.5, border: 0.07 };
+const em = (n) => `${Number(n.toFixed(3))}em`;
+/** A length in chord sizes, in the em of text at `size`. */
+const at = (size, length) => em(length / size);
+/** Both pass WCAG AA on their paper (tests/contrast.test.ts). */
+export const PALETTES = {
+    light: { ink: "#1d1d1f", paper: "#fffdf8", muted: "#6a6052", rule: "#4a4a4a", accent: "#9a4a12" },
+    dark: { ink: "#ece8e0", paper: "#1b1a18", muted: "#a8a092", rule: "#8f897f", accent: "#e8a56a" },
+};
+/** Section widths, in em, at which a section stops aligning columns and wraps its rows. */
+export const FIT_STEPS = Array.from({ length: 23 }, (_, i) => 8 + i * 4);
+const colours = (p) => Object.keys(p)
+    .map((k) => `--bm-${k}:var(--barmark-${k},${p[k]});`)
+    .join("");
+const SANS = `system-ui,-apple-system,"Segoe UI",sans-serif`;
+/** The meta line, directives, headings and diagnostics. */
+const LABEL = `var(--barmark-label-font,${SANS})`;
+/** Lyrics and note lines: a serif every system has, with a true italic (Edwin has none). */
+const TEXT = "var(--barmark-text-font,Georgia,serif)";
+const CHART_FONT = `var(--barmark-font,"${FONT_FAMILY}","Edwin",Georgia,serif)`;
+const css = `
+:host{all:initial;display:block}
+.bm-chart{${colours(PALETTES.light)}
+	container:bm/inline-size;
+	font-family:${CHART_FONT};
+	font-size:var(--barmark-size,1rem);
+	line-height:1.3;color:var(--bm-ink);background:var(--bm-paper);
+	padding:1em 1.2em;box-sizing:border-box;text-align:start}
+.bm-chart *{box-sizing:border-box}
+.bm-chart[data-theme="dark"]{${colours(PALETTES.dark)}color-scheme:dark}
+@media (prefers-color-scheme:dark){.bm-chart[data-theme="auto"]{${colours(PALETTES.dark)}color-scheme:dark}}
+@media print{.bm-chart[data-theme]{${colours(PALETTES.light)}color-scheme:light}}
+.bm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+.bm-header{margin-bottom:.8em}
+.bm-title{font-size:${em(SIZES.title)};font-weight:normal;margin:0 0 .15em}
+.bm-meta{font-family:${LABEL};font-size:${em(SIZES.meta)};color:var(--bm-muted);margin:0}
+.bm-directive{grid-column:1/-1;display:flex;align-items:baseline;gap:.4em;margin:.9em 0 .3em ${at(SIZES.directive, GUTTER)};font-family:${LABEL};font-size:${em(SIZES.directive)};color:var(--barmark-directive,var(--bm-muted))}
+.bm-directive::after{content:"";flex:1;align-self:center;margin-left:.4em;border-top:.06em solid var(--bm-rule);opacity:.6}
+.bm-section{margin-top:.9em}
+.bm-heading{display:flex;align-items:center;gap:.5em;margin:0 0 ${at(SIZES.heading, HEADING_GAP)} ${at(SIZES.heading, GUTTER)};font:600 ${em(SIZES.heading)}/1 ${LABEL};letter-spacing:.08em;text-transform:uppercase;color:var(--bm-ink)}
+.bm-rehearsal{border:.12em solid currentColor;padding:.15em .35em;border-radius:.15em;letter-spacing:0}
+.bm-times{font:italic 1.2em/1 Georgia,serif;text-transform:none;letter-spacing:0;color:var(--bm-muted)}
+.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-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}
+.bm-bar{position:relative;display:flex;align-items:baseline;min-width:${em(MIN_BAR)};min-height:2.2em;padding:.65em .7em .25em;border-right:.075em solid var(--bm-rule)}
+.bm-row>div.bm-bar:first-of-type{border-left:.075em solid var(--bm-rule)}
+.bm-row>div.bm-bar[data-repeat-start]{border-left:.25em double var(--bm-rule)}
+.bm-row>div.bm-bar[data-repeat-end]{border-right:.25em double var(--bm-rule)}
+.bm-bar-body{display:flex;flex:1;align-items:baseline;gap:.6em}
+.bm-bar-body>:not(.bm-meter,.bm-cut){flex:1 1 0;min-width:max-content}
+.bm-repeat{display:flex;align-items:center;padding-left:.4em;white-space:nowrap}
+.bm-repeat .bm-times{font-size:${em(SIZES.repeat)}}
+.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-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)}}
+.bm-ring{display:inline-block;min-width:1.4em;padding:${em(RING.y)} ${em(RING.x)};margin:${em(-(RING.y + RING.border))} 0;border:${em(RING.border)} solid currentColor;border-radius:1em;text-align:center}
+.bm-notes{display:inline-flex;gap:.3em;align-items:baseline}
+.bm-notes u{text-decoration-thickness:.08em;text-underline-offset:.15em}
+.bm-group{position:relative;display:inline-flex;gap:.45em;align-items:baseline}
+.bm-group::before{content:"";position:absolute;left:0;right:0;top:-.45em;height:.3em;border:.06em solid var(--bm-muted);border-bottom:none}
+.bm-tuplet{position:absolute;left:50%;top:-1.25em;transform:translateX(-50%);font:italic 600 ${em(SIZES.tuplet)}/1 Georgia,serif;color:var(--bm-muted);background:var(--bm-paper);padding:0 .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-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)}}
+.bm-note{font-style:italic;color:var(--barmark-note,var(--bm-ink))}
+.bm-error{grid-column:1/-1;margin:.3em 0}
+.bm-error code{font:.7em/1.4 ui-monospace,Menlo,Consolas,monospace;text-decoration:underline wavy var(--bm-accent);text-decoration-thickness:.08em;text-underline-offset:.25em;white-space:pre-wrap}
+.bm-diagnostics{margin:1em 0 0;padding-left:1.2em;font:${em(SIZES.diagnostics)}/1.5 ${LABEL};color:var(--bm-muted)}
+.bm-diagnostics .bm-error{color:var(--bm-accent)}
+@media (forced-colors:active){
+	.bm-bar,.bm-row>div.bm-bar:first-of-type,.bm-row>div.bm-bar[data-repeat-start],.bm-row>div.bm-bar[data-repeat-end]{border-color:CanvasText}
+	.bm-ring,.bm-group::before{border-color:CanvasText}
+	.bm-silence{background:CanvasText;forced-color-adjust:none}
+	.bm-bar[data-cut]{outline-color:CanvasText}
+}
+${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}}`;
+}).join("\n")}
+`;
+/** Collapse the readable source above: whitespace around punctuation and between rules. */
+const minify = (text) => text
+    .replace(/\n\s*/g, "")
+    .replace(/\s*([{};,>])\s*/g, "$1")
+    .replace(/:\s+/g, ":");
+export const stylesheet = minify(css);

package/dist/types.d.ts

@@ -0,0 +1,56 @@
+import type { ChartDiagnostic, Directives, Meter, Repeat, Slot } from "barmark";
+export type LayoutOptions = {
+    rehearsalLetters?: boolean;
+};
+/** What to draw, with every musical decision already made. */
+export type ChartModel = {
+    title: string | null;
+    /** Directives before the first heading, bar line or text line. */
+    header: Directives;
+    blocks: SectionBlock[];
+    diagnostics: ChartDiagnostic[];
+};
+export type SectionBlock = {
+    /** The heading as written; null for content before the first heading. */
+    heading: string | null;
+    /** `## Chorus x2` */
+    repeat: Repeat;
+    form: number | null;
+    /** "A", "B", … when rehearsal letters are on. */
+    rehearsal: string | null;
+    /** The widest row's cell count. */
+    columns: number;
+    items: BlockItem[];
+};
+export type BlockItem = {
+    kind: "row";
+    line: number;
+    /** The play-order number of the row's first bar on its first pass. */
+    barNumber: number | null;
+    opens: boolean;
+    closes: boolean;
+    repeat: Repeat;
+    cells: CellModel[];
+}
+/** `note` marks a `###` line, whose text is given without the marks. */
+ | {
+    kind: "text";
+    text: string;
+    note: boolean;
+} | {
+    kind: "directive";
+    set: Directives;
+} | {
+    kind: "error";
+    line: number;
+    source: string;
+    messages: string[];
+};
+export type CellModel = {
+    kind: "slots";
+    meter: Meter | null;
+    slots: Slot[];
+    cut: boolean;
+} | {
+    kind: "fermata";
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2021, MuseScore Limited (http://www.musescore.org/),
+with Reserved Font Name "Edwin".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/README.md

@@ -0,0 +1,16 @@
+# Edwin
+
+`Edwin-Roman.otf` is the roman of **Edwin**, MuseScore's text font for
+music, shipped here **unmodified** (byte for byte; `tests/font.test.ts`
+checks its SHA-256).
+
+- Source: <https://github.com/musescore/MuseScore/tree/c66993b7c9674ad35a05a30b685b04edb3471c07/fonts/edwin>
+- Copyright (c) 2021, MuseScore Limited, with Reserved Font Name "Edwin".
+- Licence: SIL Open Font License 1.1, in `OFL.txt` (MuseScore's
+  `LICENSE.txt`).
+
+The Reserved Font Name means a modified version, including a subset or a
+format conversion, may not be called Edwin, so this package never alters
+the file. `@barmark/render` registers it under the CSS family name
+"barmark Edwin" so it cannot collide with a page's own fonts; the font
+itself is unchanged.

package/package.json

@@ -1 +1,56 @@
-{"name":"@barmark/render","version":"0.0.0"}
+{
+	"name": "@barmark/render",
+	"version": "0.2.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": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./element": {
+			"types": "./dist/element.d.ts",
+			"import": "./dist/element.js"
+		},
+		"./fonts/*": "./fonts/*"
+	},
+	"types": "./dist/index.d.ts",
+	"sideEffects": [
+		"./dist/element.js"
+	],
+	"files": [
+		"dist",
+		"fonts",
+		"CHANGELOG.md"
+	],
+	"engines": {
+		"node": ">=20"
+	},
+	"keywords": [
+		"barmark",
+		"chord-chart",
+		"chords",
+		"music",
+		"lead-sheet",
+		"web-component",
+		"renderer"
+	],
+	"author": "Kevin Peckham",
+	"license": "MIT",
+	"homepage": "https://github.com/kevinpeckham/barmark/tree/main/packages/render#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/kevinpeckham/barmark.git",
+		"directory": "packages/render"
+	},
+	"bugs": {
+		"url": "https://github.com/kevinpeckham/barmark/issues"
+	},
+	"dependencies": {
+		"barmark": "^0.2.0"
+	},
+	"scripts": {
+		"build": "rm -rf dist && tsc -p tsconfig.build.json",
+		"prepack": "bun run build"
+	}
+}