@braccato/core 1.12.0 → 1.12.2

package/README.md

@@ -252,6 +252,9 @@ show at full strength from the start.
 | `--blyrics-credits-opacity`          | `0.2`            | While the song plays.                                |
 | `--blyrics-credits-focused-opacity`  | `0.85`           | Once the song has ended.                             |
 
+The credits are a `p`, not a `div`, so rules a theme writes for the lines as `.blyrics-container > div`
+(hover scaling, per-line opacity and blur) never reach them. Style them through `.blyrics-credits`.
+
 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.

package/dist/README.md

@@ -252,6 +252,9 @@ show at full strength from the start.
 | `--blyrics-credits-opacity`          | `0.2`            | While the song plays.                                |
 | `--blyrics-credits-focused-opacity`  | `0.85`           | Once the song has ended.                             |
 
+The credits are a `p`, not a `div`, so rules a theme writes for the lines as `.blyrics-container > div`
+(hover scaling, per-line opacity and blur) never reach them. Style them through `.blyrics-credits`.
+
 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.

package/dist/constants.d.ts

@@ -5,6 +5,7 @@ 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_TEXT_CLASS: "blyrics-credits__text";
 export declare const CREDITS_NAMES_CLASS: "blyrics-credits__names";
 export declare const CURRENT_LYRICS_CLASS: "blyrics--active";
 export declare const ANIMATING_CLASS: "blyrics--animating";

package/dist/constants.js

@@ -8,6 +8,7 @@ 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_TEXT_CLASS = "blyrics-credits__text";
 export const CREDITS_NAMES_CLASS = "blyrics-credits__names";
 // -- Playback state --------------------------------------------
 export const CURRENT_LYRICS_CLASS = "blyrics--active";

package/dist/styles/lyrics.css

@@ -240,17 +240,26 @@
 }
 
 .blyrics-container > .blyrics-credits {
+	box-sizing: border-box;
 	cursor: default;
+	margin: 0;
+	padding: var(--blyrics-padding) 0.25em;
+	transform: scale(var(--blyrics-scale));
+	transform-origin: left center;
 }
 
 .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 {
+.blyrics-credits__text {
+	display: block;
+	font-size: var(--blyrics-credits-font-size);
+}
+
+.blyrics-credits__text::before {
 	content: var(--blyrics-credits-label) " ";
 }
 

package/dist/view.js

@@ -9,7 +9,7 @@
 // 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 { CREDITS_CLASS, CREDITS_NAMES_CLASS, LINE_CLASS, LYRICS_CLASS, RTL_CLASS } from "./constants.js";
+import { CREDITS_CLASS, CREDITS_NAMES_CLASS, CREDITS_TEXT_CLASS, LINE_CLASS, LYRICS_CLASS, RTL_CLASS, } from "./constants.js";
 import { setupLineCullObserver } from "./engine.js";
 import { addSeekHandler, applyDirection, buildLineSyncedParts, createLyricsLine, deriveSyncType, disableRichsync, findNearestAgent, hideCredits, isNearestLyricRtl, newLineData, } from "./inject.js";
 import { createInstrumentalElement } from "./instrumental.js";
@@ -45,13 +45,18 @@ 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");
+    // Not a div: themes style the lines as `.blyrics-container > div`, and none of that is meant for the credits.
+    const credits = doc.createElement("p");
     credits.className = CREDITS_CLASS;
+    // The smaller size lives on an inner block so the credits keep the lines' em, and with it their inset.
+    const text = doc.createElement("span");
+    text.className = CREDITS_TEXT_CLASS;
     const names = doc.createElement("span");
     names.className = CREDITS_NAMES_CLASS;
     names.dir = "auto";
     names.textContent = formatSongwriters(songwriters);
-    credits.appendChild(names);
+    text.appendChild(names);
+    credits.appendChild(text);
     return credits;
 }
 /**

package/package.json

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