@braccato/core 1.10.0 → 1.12.0

package/README.md

@@ -7,6 +7,9 @@ than a shadow root, so the CSS already on your page reaches them.
 Extracted from the [Better Lyrics](https://better-lyrics.boidu.dev) rendering engine, which is still
 where it runs.
 
+The [renderer guide](https://docs.betterlyrics.org/braccato/renderer) on the docs site covers properties, events,
+scrolling and theming with lyrics from the Better Lyrics API. This README is still the full reference.
+
 ## Install
 
 ```bash
@@ -68,6 +71,15 @@ A `Lyric` is `{ startTimeMs, durationMs, words }`, with an optional `parts` arra
 fields for syllable or word timing, and optional `translation`, `romanization` and
 `timedRomanization` beside them.
 
+Who wrote the song travels beside the lines rather than in them. Hand the names to `lyricsOptions` and
+the view closes with a "Written by" line after the last lyric. The parsers read them out of the file:
+
+```js
+const parser = detectParser(text);
+view.lyricsOptions = { songwriters: parser.metadata(text).songwriters };
+view.lyrics = parser.parse(text, player.duration * 1000);
+```
+
 ## Properties
 
 Every one of these may be written before the element is in a document. The renderer is built when it
@@ -76,7 +88,7 @@ connects, and everything it was handed by then is applied at once.
 | Property        | Attribute      | Type                                | Default  | Description                                                                                                                              |
 | --------------- | -------------- | ----------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | `lyrics`        |                | `Lyric[] \| null`                   | `null`   | The song. Null means it was never given one, and an empty array clears the view, so there is a way to say both.                            |
-| `lyricsOptions` |                | `{ loaderVisible?, noLyrics?, language? }`     | `{}`     | How the lines are built. `noLyrics` marks a message as a placeholder rather than a song, which keeps passive scrolling from drifting it.   |
+| `lyricsOptions` |                | `{ loaderVisible?, noLyrics?, language?, songwriters? }` | `{}`     | How the lines are built. `noLyrics` marks a message as a placeholder rather than a song, which keeps passive scrolling from drifting it. `songwriters` closes the view with a credits line. |
 | `source`        | `source`       | `string \| HTMLMediaElement \| null` | `null`  | A selector or the media element itself. See Following a media element.                                                                     |
 | `mediaElement`  |                | `HTMLMediaElement \| null` (get)    | `null`   | What `source` resolved to. Null while disconnected, and null for a selector that missed.                                                   |
 | `currentTime`   | `current-time` | `number`                            | `0`      | Playback position in **seconds**. Writing it renders the view again, so whoever holds the clock drives the lyrics by writing this.        |
@@ -226,6 +238,24 @@ frequency. Both must use the same commands in the same order with the same numbe
 browser only interpolates two paths smoothly when their command sequences match, and a mismatched
 pair snaps at the halfway point instead of flowing.
 
+### Credits
+
+Given `songwriters`, the view ends with `A, B & C` after the last line. It sits dim through the song,
+and once the last line has ended it brightens and takes the scroll focus, the way Apple Music closes a
+song. Seeking back hands the focus to the lines again. Unsynced lyrics have no end, so their credits
+show at full strength from the start.
+
+| Custom property                      | Default          | What it sets                                         |
+| ------------------------------------ | ---------------- | ---------------------------------------------------- |
+| `--blyrics-credits-label`            | `"Written by"`   | The words before the names. Localise it here.        |
+| `--blyrics-credits-font-size`        | `max(0.4em, 12px)` | The size of the whole line.                        |
+| `--blyrics-credits-opacity`          | `0.2`            | While the song plays.                                |
+| `--blyrics-credits-focused-opacity`  | `0.85`           | Once the song has ended.                             |
+
+The container carries `data-credits-focused` while the credits hold the focus. To hide them, a
+stylesheet can set `.blyrics-credits { display: none; }`, which the scroll then ignores, or a theme can
+declare `/* blyrics-hide-credits = true; */` so they are never built.
+
 ### Letter wave (experimental)
 
 On by default; a theme opts out with `/* blyrics-letter-wave = false; */`. It splits every word into
@@ -292,6 +322,8 @@ refactor. Import them from `@braccato/core/constants` instead of typing them out
 | `BACKGROUND_LYRIC_CLASS`  | `blyrics-background-lyric`  | A background vocal, sung over the line it answers.           |
 | `USER_SCROLLING_CLASS`    | `blyrics-user-scrolling`    | Set while a reader has scrolled away and autoscroll waits.   |
 | `TRANSLATED_LYRICS_CLASS` | `blyrics--translated`       | A translation hung off a line that was already built.        |
+| `EXPLICIT_WORD_CLASS`     | `blyrics-explicit`          | A word the lyrics flag as explicit. Unstyled unless a theme styles it. |
+| `CREDITS_CLASS`           | `blyrics-credits`           | The songwriter credits after the last line.                  |
 | `CUSTOM_THEME_STYLE_ID`   | `blyrics-custom-style`      | The id of the `<style>` the theme lands in.                  |
 
 ## Stylesheets

package/dist/README.md

@@ -7,6 +7,9 @@ than a shadow root, so the CSS already on your page reaches them.
 Extracted from the [Better Lyrics](https://better-lyrics.boidu.dev) rendering engine, which is still
 where it runs.
 
+The [renderer guide](https://docs.betterlyrics.org/braccato/renderer) on the docs site covers properties, events,
+scrolling and theming with lyrics from the Better Lyrics API. This README is still the full reference.
+
 ## Install
 
 ```bash
@@ -68,6 +71,15 @@ A `Lyric` is `{ startTimeMs, durationMs, words }`, with an optional `parts` arra
 fields for syllable or word timing, and optional `translation`, `romanization` and
 `timedRomanization` beside them.
 
+Who wrote the song travels beside the lines rather than in them. Hand the names to `lyricsOptions` and
+the view closes with a "Written by" line after the last lyric. The parsers read them out of the file:
+
+```js
+const parser = detectParser(text);
+view.lyricsOptions = { songwriters: parser.metadata(text).songwriters };
+view.lyrics = parser.parse(text, player.duration * 1000);
+```
+
 ## Properties
 
 Every one of these may be written before the element is in a document. The renderer is built when it
@@ -76,7 +88,7 @@ connects, and everything it was handed by then is applied at once.
 | Property        | Attribute      | Type                                | Default  | Description                                                                                                                              |
 | --------------- | -------------- | ----------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | `lyrics`        |                | `Lyric[] \| null`                   | `null`   | The song. Null means it was never given one, and an empty array clears the view, so there is a way to say both.                            |
-| `lyricsOptions` |                | `{ loaderVisible?, noLyrics?, language? }`     | `{}`     | How the lines are built. `noLyrics` marks a message as a placeholder rather than a song, which keeps passive scrolling from drifting it.   |
+| `lyricsOptions` |                | `{ loaderVisible?, noLyrics?, language?, songwriters? }` | `{}`     | How the lines are built. `noLyrics` marks a message as a placeholder rather than a song, which keeps passive scrolling from drifting it. `songwriters` closes the view with a credits line. |
 | `source`        | `source`       | `string \| HTMLMediaElement \| null` | `null`  | A selector or the media element itself. See Following a media element.                                                                     |
 | `mediaElement`  |                | `HTMLMediaElement \| null` (get)    | `null`   | What `source` resolved to. Null while disconnected, and null for a selector that missed.                                                   |
 | `currentTime`   | `current-time` | `number`                            | `0`      | Playback position in **seconds**. Writing it renders the view again, so whoever holds the clock drives the lyrics by writing this.        |
@@ -226,6 +238,24 @@ frequency. Both must use the same commands in the same order with the same numbe
 browser only interpolates two paths smoothly when their command sequences match, and a mismatched
 pair snaps at the halfway point instead of flowing.
 
+### Credits
+
+Given `songwriters`, the view ends with `A, B & C` after the last line. It sits dim through the song,
+and once the last line has ended it brightens and takes the scroll focus, the way Apple Music closes a
+song. Seeking back hands the focus to the lines again. Unsynced lyrics have no end, so their credits
+show at full strength from the start.
+
+| Custom property                      | Default          | What it sets                                         |
+| ------------------------------------ | ---------------- | ---------------------------------------------------- |
+| `--blyrics-credits-label`            | `"Written by"`   | The words before the names. Localise it here.        |
+| `--blyrics-credits-font-size`        | `max(0.4em, 12px)` | The size of the whole line.                        |
+| `--blyrics-credits-opacity`          | `0.2`            | While the song plays.                                |
+| `--blyrics-credits-focused-opacity`  | `0.85`           | Once the song has ended.                             |
+
+The container carries `data-credits-focused` while the credits hold the focus. To hide them, a
+stylesheet can set `.blyrics-credits { display: none; }`, which the scroll then ignores, or a theme can
+declare `/* blyrics-hide-credits = true; */` so they are never built.
+
 ### Letter wave (experimental)
 
 On by default; a theme opts out with `/* blyrics-letter-wave = false; */`. It splits every word into
@@ -292,6 +322,8 @@ refactor. Import them from `@braccato/core/constants` instead of typing them out
 | `BACKGROUND_LYRIC_CLASS`  | `blyrics-background-lyric`  | A background vocal, sung over the line it answers.           |
 | `USER_SCROLLING_CLASS`    | `blyrics-user-scrolling`    | Set while a reader has scrolled away and autoscroll waits.   |
 | `TRANSLATED_LYRICS_CLASS` | `blyrics--translated`       | A translation hung off a line that was already built.        |
+| `EXPLICIT_WORD_CLASS`     | `blyrics-explicit`          | A word the lyrics flag as explicit. Unstyled unless a theme styles it. |
+| `CREDITS_CLASS`           | `blyrics-credits`           | The songwriter credits after the last line.                  |
 | `CUSTOM_THEME_STYLE_ID`   | `blyrics-custom-style`      | The id of the `<style>` the theme lands in.                  |
 
 ## Stylesheets

package/dist/constants.d.ts

@@ -4,6 +4,8 @@ export declare const LINE_CLASS: "blyrics--line";
 export declare const WORD_CLASS: "blyrics--word";
 export declare const LETTER_CLASS: "blyrics--letter";
 export declare const FOOTER_CLASS: "blyrics-footer";
+export declare const CREDITS_CLASS: "blyrics-credits";
+export declare const CREDITS_NAMES_CLASS: "blyrics-credits__names";
 export declare const CURRENT_LYRICS_CLASS: "blyrics--active";
 export declare const ANIMATING_CLASS: "blyrics--animating";
 export declare const PAUSED_CLASS: "blyrics--paused";

package/dist/constants.js

@@ -7,6 +7,8 @@ export const LINE_CLASS = "blyrics--line";
 export const WORD_CLASS = "blyrics--word";
 export const LETTER_CLASS = "blyrics--letter";
 export const FOOTER_CLASS = "blyrics-footer";
+export const CREDITS_CLASS = "blyrics-credits";
+export const CREDITS_NAMES_CLASS = "blyrics-credits__names";
 // -- Playback state --------------------------------------------
 export const CURRENT_LYRICS_CLASS = "blyrics--active";
 export const ANIMATING_CLASS = "blyrics--animating";

package/dist/engine.d.ts

@@ -40,6 +40,8 @@ export interface AnimationEngineInstance extends AnimEngineViewState {
     host: LyricsRendererHost;
     cachedTabRendererHeight: number | null;
     cachedFooterItem: LineScrollItem | null;
+    cachedCreditsItem: LineScrollItem | null;
+    creditsFocused: boolean;
     cachedLineScrollTiming: Map<string, LineScrollTiming>;
     tabRendererResizeObserver: ResizeObserver | null;
     observedTabRenderer: HTMLElement | null;

package/dist/engine.js

@@ -16,7 +16,7 @@
 // playback clock the last tick wrote. Their unit is a bundle rather than a document, and this
 // module is bundled into the isolated world and the page world separately, so those are two clocks
 // that never meet. `themeSettings.ts` holds the third thing under that rule.
-import { ANIMATING_CLASS, CURRENT_LYRICS_CLASS, FOOTER_CLASS, LINE_CLASS, PAUSED_CLASS, ROMANIZED_LYRICS_CLASS, RTL_CLASS, TRANSLATED_LYRICS_CLASS, USER_SCROLLING_CLASS, WORD_STATE_ACTIVE, WORD_STATE_ATTR, WORD_STATE_PAST, WORD_STATE_UPCOMING, } from "./constants.js";
+import { ANIMATING_CLASS, CREDITS_CLASS, CURRENT_LYRICS_CLASS, FOOTER_CLASS, LINE_CLASS, PAUSED_CLASS, ROMANIZED_LYRICS_CLASS, RTL_CLASS, TRANSLATED_LYRICS_CLASS, USER_SCROLLING_CLASS, WORD_STATE_ACTIVE, WORD_STATE_ATTR, WORD_STATE_PAST, WORD_STATE_UPCOMING, } from "./constants.js";
 import { INSTRUMENTAL_WAVE_PATH_HIGH, INSTRUMENTAL_WAVE_PATH_LOW } from "./instrumental.js";
 import { registerThemeSetting } from "./themeSettings.js";
 import { clamp, getRelativeLayoutBounds, positiveModulo, roundedMs, toMs } from "./util.js";
@@ -129,6 +129,8 @@ export function createAnimationEngineInstance(engineDocument, engineWindow, host
         passiveLastWallTime: 0,
         cachedTabRendererHeight: null,
         cachedFooterItem: null,
+        cachedCreditsItem: null,
+        creditsFocused: false,
         cachedLineScrollTiming: new Map(),
         tabRendererResizeObserver: null,
         observedTabRenderer: null,
@@ -280,6 +282,8 @@ export function clearLyrics(engine) {
     stopPassiveScrollLoop(engine);
     engine.lines = [];
     engine.cachedFooterItem = null;
+    engine.cachedCreditsItem = null;
+    engine.creditsFocused = false;
     engine.lyricsContainer = null;
     engine.waveAnimationPool.length = 0;
 }
@@ -1464,19 +1468,19 @@ function updateVisibleLyricWillChange(engine, lines, fromScrollTop, toScrollTop,
     }
     engine.visibleWillChangeElements = nextVisibleElements;
 }
-// Footer bounds come from the relayout-time cache, not a getBoundingClientRect here, which would force
-// a synchronous recalc mid-tick after the scroll commit dirtied style.
+// The credits and the footer after the last line scroll with the lines. Their bounds come from the
+// relayout-time cache, not a getBoundingClientRect here, which would force a synchronous recalc
+// mid-tick after the scroll commit dirtied style.
 function getLineScrollItems(engine, lines) {
-    return engine.cachedFooterItem ? [...lines, engine.cachedFooterItem] : lines;
+    const trailing = [engine.cachedCreditsItem, engine.cachedFooterItem].filter(item => item !== null);
+    return trailing.length > 0 ? [...lines, ...trailing] : lines;
 }
-function measureFooterItem(engine, lyricsElement) {
-    const footer = lyricsElement.querySelector(`:scope > .${FOOTER_CLASS}`);
-    if (!footer) {
-        engine.cachedFooterItem = null;
-        return;
-    }
-    const footerBounds = getRelativeLayoutBounds(lyricsElement, footer);
-    engine.cachedFooterItem = { lyricElement: footer, position: footerBounds.y, height: footerBounds.height };
+function measureTrailingItem(lyricsElement, className) {
+    const element = lyricsElement.querySelector(`:scope > .${className}`);
+    if (!element)
+        return null;
+    const bounds = getRelativeLayoutBounds(lyricsElement, element);
+    return { lyricElement: element, position: bounds.y, height: bounds.height };
 }
 function prepareLineScrollOffsets(engine, lines, activeLineIndex, scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config) {
     if (!config.enabled.scroll || activeLineIndex < 0) {
@@ -1989,6 +1993,18 @@ export function tickView(engine, currentTime, options) {
                     setAnimationsPlayState(lineData, false);
             }
         }
+        const lastSungLine = lines.findLast(lineData => lineData.lyricElement.dataset.instrumental !== "true");
+        const creditsFocused = lastSungLine !== undefined &&
+            (engine.cachedCreditsItem?.height ?? 0) > 0 &&
+            lyricScrollTime >= lastSungLine.time + lastSungLine.duration;
+        if (creditsFocused !== engine.creditsFocused) {
+            engine.creditsFocused = creditsFocused;
+            if (creditsFocused)
+                lyricsElement.dataset.creditsFocused = "true";
+            else
+                delete lyricsElement.dataset.creditsFocused;
+            newLyricSelected = true;
+        }
         if (engine.scrollResumeTime < Date.now() || engine.scrollPos === -1) {
             if (activeElems.length == 0) {
                 activeElems.push(lines[0]);
@@ -2014,6 +2030,10 @@ export function tickView(engine, currentTime, options) {
             scrollPos = Math.max(scrollPos, lastActiveLyric.position - tabRendererHeight + lastActiveLyric.height);
             // Make sure top of last active lyric is visible.
             scrollPos = Math.min(scrollPos, lastActiveLyric.position);
+            const credits = engine.cachedCreditsItem;
+            if (engine.creditsFocused && credits) {
+                scrollPos = credits.position + credits.height / 2 - scrollPosOffset;
+            }
             // Past either end the browser clamps the write and reports nothing, leaving the view aiming
             // at a position it never reached and re-aiming once per remaining line.
             scrollPos = clamp(scrollPos, 0, maxScrollTop);
@@ -2183,7 +2203,14 @@ function applyScrollPadding(engine) {
     const lyricLines = lyricsElement.querySelectorAll(`:scope > .${LINE_CLASS}`);
     const firstLyric = lyricLines[0] ?? null;
     const lastLyric = lyricLines[lyricLines.length - 1] ?? null;
-    const lastLyricBounds = lastLyric ? getRelativeLayoutBounds(lyricsElement, lastLyric) : null;
+    const credits = lyricsElement.querySelector(`:scope > .${CREDITS_CLASS}`);
+    const creditsBounds = credits ? getRelativeLayoutBounds(lyricsElement, credits) : null;
+    // The credits take the focus once the song ends, so they are the last thing the scroll must reach.
+    const lastLyricBounds = creditsBounds && creditsBounds.height > 0
+        ? creditsBounds
+        : lastLyric
+            ? getRelativeLayoutBounds(lyricsElement, lastLyric)
+            : null;
     const footer = lyricsElement.querySelector(`:scope > .${FOOTER_CLASS}`);
     const { top, bottom } = computeScrollPadding({
         viewportHeight: tabRendererHeight,
@@ -2227,7 +2254,8 @@ export function relayout(engine, measureLines) {
         line.height = bounds.height;
         line.decorations = new Map(lineDecorators(line.lyricElement).map(element => [element, getRelativeLayoutBounds(lyricsElement, element).y]));
     }
-    measureFooterItem(engine, lyricsElement);
+    engine.cachedCreditsItem = measureTrailingItem(lyricsElement, CREDITS_CLASS);
+    engine.cachedFooterItem = measureTrailingItem(lyricsElement, FOOTER_CLASS);
     // Re-arm from the fresh measurements, so a line skipped after this holds its new placeholder height.
     setupLineCullObserver(engine);
     engine.wasUserScrolling = true; // trigger rescrolls

package/dist/inject.d.ts

@@ -1,6 +1,7 @@
 import { type WordState } from "./constants.js";
 import type { Lyric, LyricPart, LyricSyncType } from "./types.js";
 export declare let disableRichsync: import("./themeSettings.js").Setting;
+export declare const hideCredits: import("./themeSettings.js").Setting;
 export declare function findNearestAgent(lyrics: Lyric[], fromIndex: number): string | undefined;
 export declare function isNearestLyricRtl(lyrics: Lyric[], fromIndex: number): boolean;
 export declare function deriveSyncType(lyrics: Lyric[]): LyricSyncType;

package/dist/inject.js

@@ -21,6 +21,7 @@ let lineSyncedAnimationDelay = registerThemeSetting("blyrics-line-synced-animati
 let longWordThreshold = registerThemeSetting("blyrics-long-word-threshold", 1500, true);
 let longWordWrapThreshold = registerThemeSetting("blyrics-long-word-wrap-threshold", 10, true);
 let letterWave = registerThemeSetting("blyrics-letter-wave", true, true);
+export const hideCredits = registerThemeSetting("blyrics-hide-credits", false, true);
 const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
 const RTL_SCRIPT_REGEX = /[\p{Script=Arabic}\p{Script=Hebrew}\p{Script=Syriac}\p{Script=Thaana}]/u;
 const LTR_SCRIPT_REGEX = /[\p{Script=Latin}\p{Script=Greek}\p{Script=Cyrillic}\p{Script=Han}\p{Script=Hangul}\p{Script=Hiragana}\p{Script=Katakana}]/u;

package/dist/renderer.js

@@ -260,6 +260,7 @@ export function createLyricsRenderer(rendererOptions) {
                 language: options?.language,
                 loaderVisible: options?.loaderVisible ?? false,
                 noLyrics: options?.noLyrics ?? false,
+                songwriters: options?.songwriters,
             });
             currentLyrics = lyrics;
             currentLanguage = normalizeLanguage(options?.language);

package/dist/styles/lyrics.css

@@ -215,11 +215,6 @@
 	color: color-mix(in srgb, var(--blyrics-lyric-inactive-color) 78%, transparent);
 }
 
-.blyrics-explicit {
-	text-decoration: line-through;
-	text-decoration-thickness: 0.08em;
-}
-
 .blyrics--translated,
 .blyrics--romanized {
 	animation: blyrics-decoration-in calc(var(--blyrics-animate-decoration-entry) * 0.35s)
@@ -244,6 +239,26 @@
 	}
 }
 
+.blyrics-container > .blyrics-credits {
+	cursor: default;
+}
+
+.blyrics-credits {
+	color: var(--blyrics-ui-text-color);
+	font-size: var(--blyrics-credits-font-size);
+	opacity: var(--blyrics-credits-opacity);
+	transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.blyrics-credits::before {
+	content: var(--blyrics-credits-label) " ";
+}
+
+.blyrics-container[data-credits-focused] > .blyrics-credits,
+.blyrics-container[data-sync="none"] > .blyrics-credits {
+	opacity: var(--blyrics-credits-focused-opacity);
+}
+
 .blyrics--romanized {
 	background: rgba(255, 255, 255, 0.05);
 	border: 1px solid rgba(255, 255, 255, 0.1);

package/dist/styles/variables.css

@@ -50,6 +50,11 @@
 		display-p3 1 1 1 / var(--blyrics-translated-opacity, 0.6)
 	);
 
+	--blyrics-credits-label: "Written by";
+	--blyrics-credits-font-size: max(0.4em, 12px);
+	--blyrics-credits-opacity: 0.2;
+	--blyrics-credits-focused-opacity: 0.85;
+
 	--blyrics-footer-font-family: Satoshi, Roboto, Noto Naskh Arabic UI, Arial, sans-serif;
 	--blyrics-footer-font-size: 14px;
 	--blyrics-footer-font-weight: 400;

package/dist/view.d.ts

@@ -11,6 +11,8 @@ export interface SetLyricsOptions {
      * These lyrics are a "not found" placeholder rather than a real result.
      */
     noLyrics: boolean;
+    /** Who wrote the song, shown after the last line. */
+    songwriters?: readonly string[];
 }
 /**
  * Replaces whatever the mount holds with a container built from these lyrics, and hands the render

package/dist/view.js

@@ -9,9 +9,9 @@
 // This is also the one place outside the engine that writes engine view state, because building the
 // lines is where those values are first knowable: the container, the records, the sync type, the
 // size they were measured at, and the scrolls to swallow before the view has settled.
-import { LINE_CLASS, LYRICS_CLASS, RTL_CLASS } from "./constants.js";
+import { CREDITS_CLASS, CREDITS_NAMES_CLASS, LINE_CLASS, LYRICS_CLASS, RTL_CLASS } from "./constants.js";
 import { setupLineCullObserver } from "./engine.js";
-import { addSeekHandler, applyDirection, buildLineSyncedParts, createLyricsLine, deriveSyncType, disableRichsync, findNearestAgent, isNearestLyricRtl, newLineData, } from "./inject.js";
+import { addSeekHandler, applyDirection, buildLineSyncedParts, createLyricsLine, deriveSyncType, disableRichsync, findNearestAgent, hideCredits, isNearestLyricRtl, newLineData, } from "./inject.js";
 import { createInstrumentalElement } from "./instrumental.js";
 import { applyLyricLanguage, resolveLyricLanguages } from "./language.js";
 const INITIAL_SKIP_SCROLLS = 2;
@@ -41,6 +41,19 @@ function buildSungLine(doc, lyricElement, lyricItem, line) {
         lyricElement.dataset.agent = lyricItem.agent;
     }
 }
+function formatSongwriters(names) {
+    return names.length > 1 ? `${names.slice(0, -1).join(", ")} & ${names.at(-1)}` : (names[0] ?? "");
+}
+function buildCredits(doc, songwriters) {
+    const credits = doc.createElement("div");
+    credits.className = CREDITS_CLASS;
+    const names = doc.createElement("span");
+    names.className = CREDITS_NAMES_CLASS;
+    names.dir = "auto";
+    names.textContent = formatSongwriters(songwriters);
+    credits.appendChild(names);
+    return credits;
+}
 /**
  * Replaces whatever the mount holds with a container built from these lyrics, and hands the render
  * records, the container and its measured size to the engine that animates them.
@@ -79,6 +92,10 @@ export function setLyrics(engine, mount, lyrics, options) {
         }
         container.appendChild(lyricElement);
     }
+    const songwriters = options.songwriters ?? [];
+    if (songwriters.length > 0 && !options.noLyrics && !hideCredits.getBooleanValue()) {
+        container.appendChild(buildCredits(doc, songwriters));
+    }
     engine.skipScrolls = INITIAL_SKIP_SCROLLS;
     engine.skipScrollsDecayTimes = Array.from({ length: INITIAL_SKIP_SCROLLS }, () => Date.now() + SKIP_SCROLL_DECAY_MS);
     engine.scrollResumeTime = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braccato/core",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Synchronized lyrics renderer with word-by-word animations",
   "type": "module",
   "license": "MIT",