@barmark/render 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -6,6 +6,27 @@ package uses [semantic versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [0.7.0] - 2026-11-02
+
+Power chords in the numerals views. Requires `barmark` 0.7.0.
+
+### Changed
+
+- **A power chord's 5 is raised in the numerals views:** D5 in D shows as
+  1⁵ (Nashville) and I⁵ (Roman), G5(7) as 4⁵⁽⁷⁾. On the baseline the
+  Nashville 5 joined the number and read as 15. Chord names are
+  unchanged (D5).
+
+## [0.6.0] - 2026-11-02
+
+Charts that scroll instead of wrapping. barmark.dev's home page uses it.
+
+### Added
+
+- **`wrap: false`** (attribute `wrap="off"`, property `wrap`): a section
+  wider than the chart's box keeps its rows and columns rather than
+  wrapping them, and the chart overflows for its page to scroll.
+
 ## [0.5.0] - 2026-11-02
 
 The spoken name of a chord, for other tools. barmark.dev's /try page
@@ -169,7 +190,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.5.0...HEAD
+[Unreleased]: https://github.com/kevinpeckham/barmark/compare/render-v0.7.0...HEAD
+[0.7.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.6.0...render-v0.7.0
+[0.6.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.5.0...render-v0.6.0
 [0.5.0]: https://github.com/kevinpeckham/barmark/compare/render-v0.4.0...render-v0.5.0
 [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

package/README.md

@@ -76,6 +76,7 @@ the element loads, with `<style data-barmark-font>` holding
 | `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 |
+| `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 |
 | `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 |
@@ -87,10 +88,11 @@ 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.
+shows minor and diminished in lower case (ii, vii°, ♭VII). Both raise a
+power chord's 5 into the superscript (D5 in D is 1⁵ and I⁵, never 15).
+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.
 
 ### Spoken names
 

package/dist/chord.d.ts

@@ -17,7 +17,8 @@ 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.
+ * case. Both raise a power chord's 5 into the superscript (1⁵, I⁵). 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. */

package/dist/chord.js

@@ -27,21 +27,25 @@ const ROMAN_QUALITY = {
     m: "",
     dim: "°",
     aug: "+",
-    "5": "5",
+    // Raised into the superscript with the other numerals (raisePower).
+    "5": "",
 };
+/** A power chord's 5 goes up with the superscript: on the baseline it joins the number (1 and 5 read as 15). */
+const raisePower = (p) => p.quality === "5" ? { ...p, quality: "", superscript: `5${p.superscript}` } : p;
 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.
+ * case. Both raise a power chord's 5 into the superscript (1⁵, I⁵). 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 pieces = raisePower(typesetChord(parts));
     const bass = parts.bass ? degreeOf(parts.bass, key) : null;
     const withBass = { ...pieces, bass: bass ? degreeText(bass) : pieces.bass };
     if (style === "nashville")

package/dist/element.js

@@ -14,6 +14,7 @@ export function optionsFromAttributes(el) {
         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 } : {}),
     };
 }
@@ -48,7 +49,14 @@ async function fetchText(src) {
 }
 function defineElement() {
     class BarmarkChart extends HTMLElement {
-        static observedAttributes = ["src", "theme", "bar-numbers", "rehearsal-letters", "numerals"];
+        static observedAttributes = [
+            "src",
+            "theme",
+            "bar-numbers",
+            "rehearsal-letters",
+            "numerals",
+            "wrap",
+        ];
         #observer = new MutationObserver(() => this.#schedule());
         #renders = 0;
         #scheduled = false;
@@ -103,6 +111,15 @@ function defineElement() {
             else
                 this.setAttribute("bar-numbers", "off");
         }
+        get wrap() {
+            return optionsFromAttributes(this).wrap ?? true;
+        }
+        set wrap(v) {
+            if (v)
+                this.removeAttribute("wrap");
+            else
+                this.setAttribute("wrap", "off");
+        }
         get rehearsalLetters() {
             return this.hasAttribute("rehearsal-letters");
         }
@@ -167,6 +184,10 @@ function defineElement() {
                 chart?.setAttribute("data-bar-numbers", "off");
             else
                 chart?.removeAttribute("data-bar-numbers");
+            if (options.wrap === false)
+                chart?.setAttribute("data-wrap", "off");
+            else
+                chart?.removeAttribute("data-wrap");
         }
     }
     customElements.define("barmark-chart", BarmarkChart);

package/dist/html.d.ts

@@ -9,6 +9,11 @@ export type RenderOptions = {
     fontUrl?: string;
     /** Show each chord as its degree in the bar's key, where the chart names one. Off by default. */
     numerals?: Numerals;
+    /**
+     * Wrap a section's rows when it is wider than the chart's box (the default).
+     * With `false` rows keep their columns, and the page scrolls the chart instead.
+     */
+    wrap?: boolean;
 };
 export declare function renderChart(text: string, options?: RenderOptions): string;
 export declare const THEMES: readonly ["auto", "light", "dark"];

package/dist/html.js

@@ -15,6 +15,7 @@ function elementAttributes(options) {
         options.barNumbers === false ? ' bar-numbers="off"' : "",
         options.rehearsalLetters ? " rehearsal-letters" : "",
         numeralsOf(options) ? ` numerals="${numeralsOf(options)}"` : "",
+        options.wrap === false ? ' wrap="off"' : "",
     ].join("");
 }
 export const THEMES = ["auto", "light", "dark"];
@@ -35,7 +36,7 @@ function chartHtml(text, options) {
         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>`;
+    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>`;
 }
 function headerHtml(model) {
     const title = model.title

package/dist/styles.js

@@ -84,6 +84,7 @@ const css = `
 .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-chart[data-wrap="off"] .bm-grid{max-width:none}
 .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)}}
@@ -131,7 +132,7 @@ const css = `
 	.bm-bar[data-cut]{outline-color:CanvasText}
 }
 ${FIT_STEPS.map((w) => {
-    const g = `.bm-grid[data-fit="${w}"]`;
+    const g = `.bm-chart:not([data-wrap="off"]) .bm-grid[data-fit="${w}"]`;
     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")}
 `;

package/package.json

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