@braccato/core 1.16.7 → 1.16.9

package/README.md

@@ -586,5 +586,7 @@ For real-browser regression checks, build the package, serve the repository root
 `tooling/browser/image-highlights.html`. Import `image-highlights-checks.js` from that page and
 call `runImageHighlightChecks(testView)`. The default fixture uses an SDR image; a `theme` query
 parameter can point at a consumer's HDR stylesheet for physical-display testing.
+`runLetterInkChecks(testView)` in the same module checks that letter masks cover glyph overhang,
+such as a `j`'s hook or an italic `f`, without moving any letter.
 
 Words that mix RTL characters with LTR letters or numbers retain native text shaping instead of per-letter motion. Image glow, letter masks and letter motion retain their current paint during the line exit fade.

package/dist/README.md

@@ -586,5 +586,7 @@ For real-browser regression checks, build the package, serve the repository root
 `tooling/browser/image-highlights.html`. Import `image-highlights-checks.js` from that page and
 call `runImageHighlightChecks(testView)`. The default fixture uses an SDR image; a `theme` query
 parameter can point at a consumer's HDR stylesheet for physical-display testing.
+`runLetterInkChecks(testView)` in the same module checks that letter masks cover glyph overhang,
+such as a `j`'s hook or an italic `f`, without moving any letter.
 
 Words that mix RTL characters with LTR letters or numbers retain native text shaping instead of per-letter motion. Image glow, letter masks and letter motion retain their current paint during the line exit fade.

package/dist/inject.js

@@ -15,7 +15,7 @@ import { alignImageGlowRun, wrapImageHighlight } from "./imageHighlights.js";
 import { normalizeLanguage } from "./language.js";
 import { BACKGROUND_LINE_CLASS, BACKGROUND_LYRIC_CLASS, BIDI_RUN_CLASS, BIDI_SENSITIVE_CLASS, CONTENT_LINE_CLASS, EXPLICIT_WORD_CLASS, HIGHLIGHT_RUN_CLASS, LETTER_CLASS, LINE_MAIN_CLASS, LINE_SYNCED_WORD_CLASS, LONG_WORD_GROUP_CLASS, ROMANIZED_LYRICS_CLASS, RTL_CLASS, TRANSLATED_LYRICS_CLASS, WORD_CLASS, WORD_GROUP_CLASS, WORD_HIGHLIGHT_CLASS, WORD_HIGHLIGHT_LETTERED_CLASS, WORD_STATE_ATTR, WORD_STATE_UPCOMING, ZERO_DURATION_ANIMATION_CLASS, } from "./constants.js";
 import { getSeekTimeFromClick } from "./seek.js";
-import { testJoiningScript, testRtl } from "./text.js";
+import { isSameText, testJoiningScript, testRtl } from "./text.js";
 import { registerThemeSetting } from "./themeSettings.js";
 export let disableRichsync = registerThemeSetting("blyrics-disable-richsync", false, true);
 let lineSyncedAnimationDelay = registerThemeSetting("blyrics-line-synced-animation-delay", 50, true);
@@ -414,8 +414,15 @@ export function addSeekHandler(seek, lyricElement, allZero) {
         seek(seekTime);
     });
 }
+function repeatsLine(lyricElement, text) {
+    const mainRun = [
+        ...(lyricElement.querySelector(`:scope > .${LINE_MAIN_CLASS}`)?.querySelectorAll(`:scope > .${BIDI_RUN_CLASS}`) ??
+            []),
+    ].find(run => !run.classList.contains(HIGHLIGHT_RUN_CLASS));
+    return mainRun?.textContent != null && isSameText(mainRun.textContent, text);
+}
 export function injectRomanization(doc, lyricElement, lineData, text, timedRomanization = null) {
-    if (lyricElement.querySelector(`.${ROMANIZED_LYRICS_CLASS}`))
+    if (lyricElement.querySelector(`.${ROMANIZED_LYRICS_CLASS}`) || repeatsLine(lyricElement, text))
         return;
     const romanizedLine = doc.createElement("div");
     romanizedLine.classList.add(ROMANIZED_LYRICS_CLASS, CONTENT_LINE_CLASS);
@@ -433,7 +440,7 @@ export function injectRomanization(doc, lyricElement, lineData, text, timedRoman
     lyricElement.insertBefore(romanizedLine, translation);
 }
 export function injectTranslation(doc, lyricElement, text, language) {
-    if (lyricElement.querySelector(`.${TRANSLATED_LYRICS_CLASS}`))
+    if (lyricElement.querySelector(`.${TRANSLATED_LYRICS_CLASS}`) || repeatsLine(lyricElement, text))
         return;
     const translatedLine = doc.createElement("div");
     translatedLine.classList.add(TRANSLATED_LYRICS_CLASS, CONTENT_LINE_CLASS);

package/dist/styles/image-highlights.css

@@ -17,6 +17,11 @@
   color: transparent;
   -webkit-text-fill-color: transparent;
 }
+/* The content-box copy keeps each letter's image; the padding-box copy carries it under glyph overhang. */
+.blyrics-word-highlight.blyrics-image-highlight .blyrics--letter {
+  background-image: var(--blyrics-highlight-image, none), var(--blyrics-highlight-image, none);
+  background-origin: content-box, padding-box;
+}
 .blyrics-image-highlight:not(.blyrics-word-highlight--lettered) .blyrics-image-fill {
   --blyrics-image-sweep-angle: 90deg;
   mask-image: linear-gradient(var(--blyrics-image-sweep-angle),

package/dist/styles/lyrics.css

@@ -186,7 +186,13 @@
 	background-image: none;
 }
 
+/* A mask clips to the border box, cutting off glyph overhang (a j's hook, italics). The padding
+   widens that clip without moving layout, and the content-box origin keeps the sweep geometry. */
 .blyrics-word-highlight .blyrics--letter {
+	padding-inline: 0.25em;
+	margin-inline: -0.25em;
+	-webkit-mask-origin: content-box;
+	mask-origin: content-box;
 	color: var(--blyrics-lyric-active-color);
 	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 50%, #0000 calc(50% + var(--mask-fade, 3%)));
 	mask-image: linear-gradient(90deg, #000 0, #000 50%, #0000 calc(50% + var(--mask-fade, 3%)));

package/dist/text.d.ts

@@ -9,4 +9,5 @@ export declare function containsNonLatin(text: string): boolean;
 declare const SCRIPT_TO_LANG: readonly [readonly [RegExp, "ja"], readonly [RegExp, "ko"], readonly [RegExp, "zh"], readonly [RegExp, "ru"], readonly [RegExp, "hi"], readonly [RegExp, "ar"], readonly [RegExp, "th"], readonly [RegExp, "el"], readonly [RegExp, "he"], readonly [RegExp, "bn"], readonly [RegExp, "ta"], readonly [RegExp, "te"], readonly [RegExp, "ml"], readonly [RegExp, "kn"], readonly [RegExp, "gu"], readonly [RegExp, "pa"], readonly [RegExp, "si"], readonly [RegExp, "my"], readonly [RegExp, "ka"], readonly [RegExp, "km"], readonly [RegExp, "lo"]];
 type NonLatinLanguageCode = (typeof SCRIPT_TO_LANG)[number][1];
 export declare function detectNonLatinLanguage(text: string): NonLatinLanguageCode | null;
+export declare const isSameText: (a: string, b: string) => boolean;
 export {};

package/dist/text.js

@@ -53,3 +53,5 @@ export function detectNonLatinLanguage(text) {
     }
     return null;
 }
+const comparable = (text) => text.toLowerCase().replaceAll(/\p{P}/gu, "").trim();
+export const isSameText = (a, b) => comparable(a) === comparable(b);

package/package.json

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