@applemusic-like-lyrics/core 0.5.2 → 0.6.0

package/dist/rolldown-runtime-D7D4PA-g.mjs

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist/style.css

@@ -29,11 +29,23 @@
     --amll-lp-line-padding-x: 0;
   }
 }
+@property --bright-mask-alpha {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --dark-mask-alpha {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: .2;
+}
+
 .FmKaba_lyricLineWrapper {
   box-sizing: border-box;
   width: 100%;
   padding: .4em var(--lyric-line-padding-x);
-  will-change: transform, opacity, filter;
+  will-change: transform;
   border-radius: .25em;
   flex-direction: column;
   align-items: flex-start;
@@ -44,11 +56,11 @@
   top: 0;
   left: 0;
 
-  &:hover {
+  &:not(.FmKaba_bottomLineWrapper):hover {
     background-color: var(--amll-lp-hover-bg-color, #fff1);
   }
 
-  &:active {
+  &:not(.FmKaba_bottomLineWrapper):active {
     background-color: var(--amll-lp-hover-bg-color, #ffffff05);
   }
 }
@@ -63,12 +75,22 @@
   contain-intrinsic-size: auto 40px;
   backface-visibility: hidden;
   transform-origin: 0;
-  will-change: transform, filter, opacity;
+  --mask-alpha-duration: .45s;
+  --bright-mask-alpha: .2;
+  --dark-mask-alpha: .2;
   height: fit-content;
+  transition: box-shadow .25s,
+		--bright-mask-alpha var(--mask-alpha-duration) ease-out,
+		--dark-mask-alpha var(--mask-alpha-duration) ease-out;
   margin: -.2em;
   padding: .2em;
-  transition: box-shadow .25s;
   position: relative;
+
+  &.FmKaba_gradientMask {
+    --mask-alpha-duration: .3s;
+    --bright-mask-alpha: 1;
+    --dark-mask-alpha: .4;
+  }
 }
 
 .FmKaba_lyricDuetLine {
@@ -112,26 +134,33 @@
 
   & .FmKaba_wordBody {
     flex-direction: column;
-    align-items: center;
     display: flex;
   }
 
+  & .FmKaba_rubyBaseWord {
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    justify-content: center;
+    display: inline-flex;
+  }
+
   & > span, & span.FmKaba_emphasizeWrapper {
     white-space: pre-wrap;
     vertical-align: bottom;
-    will-change: transform, text-shadow;
     contain: layout style;
     margin: -1em;
     padding: 1em;
     display: inline-block;
 
-    &.FmKaba_emphasize, & span.FmKaba_emphasize {
-      backface-visibility: hidden;
+    & > span {
       margin: -1em;
       padding: 1em;
+    }
+
+    &.FmKaba_emphasize, & span.FmKaba_emphasize {
+      backface-visibility: hidden;
 
       & > span {
-        will-change: transform, text-shadow;
         backface-visibility: hidden;
         margin: -1em;
         padding: 1em;
@@ -143,7 +172,10 @@
 .FmKaba_lyricBgLine {
   opacity: .4;
   font-size: max(calc(1em * var(--amll-lp-bg-line-scale, .7)), 10px);
-  transition: background-color .25s, box-shadow .25s;
+  transition: background-color .25s,
+		box-shadow .25s,
+		--bright-mask-alpha var(--mask-alpha-duration) ease-out,
+		--dark-mask-alpha var(--mask-alpha-duration) ease-out;
 
   & .FmKaba_lyricMainLine {
     padding: 1.2em 1em;
@@ -151,7 +183,10 @@
 
   &.FmKaba_active {
     opacity: .4;
-    transition: background-color .25s, box-shadow .25s;
+    transition: background-color .25s,
+			box-shadow .25s,
+			--bright-mask-alpha var(--mask-alpha-duration) ease-out,
+			--dark-mask-alpha var(--mask-alpha-duration) ease-out;
   }
 }
 
@@ -167,10 +202,17 @@
 }
 
 .FmKaba_bottomLine {
+  font-size: var(--amll-lp-bottom-line-font-size, max(.7em, 10px));
   cursor: default;
+  opacity: .2;
   padding-top: 0;
   padding-bottom: 0;
   line-height: 1.8em;
+  transition: opacity .4s;
+
+  &.FmKaba_gradientMask {
+    opacity: .85;
+  }
 
   &:empty {
     height: 0;
@@ -199,7 +241,6 @@
 .FmKaba_bgWrapperTop {
   transform-origin: 0 100%;
   width: 100%;
-  margin-top: -999px;
   position: relative;
   top: auto;
   bottom: auto;
@@ -221,35 +262,24 @@
 }
 
 .FmKaba_interludeDots {
-  opacity: 0;
-  transform-origin: center;
-  gap: .25em;
   width: fit-content;
   height: clamp(.5em, 1vh, 3em);
-  padding: 2.5% .75em;
-  transition: opacity .25s;
+  padding: .4em var(--lyric-line-padding-x);
+  transform-origin: center;
+  align-items: center;
+  gap: .18em;
   display: flex;
   position: absolute;
   left: 0;
 
-  &.FmKaba_enabled {
-    opacity: 1;
-  }
-
   & > * {
     background-color: var(--amll-lp-color, white);
     aspect-ratio: 1;
     border-radius: 50%;
-    width: clamp(.5em, 1vh, 3em);
-    height: clamp(.5em, 1vh, 3em);
-    margin-right: 4px;
+    width: .3em;
+    height: .3em;
     display: inline-block;
   }
-
-  &.FmKaba_duet {
-    transform-origin: center;
-    right: 0;
-  }
 }
 
 .FmKaba_disableSpring > *, .FmKaba_disableSpring .FmKaba_lyricLine {
@@ -262,6 +292,7 @@
 
 .amll-lyric-player {
   --lyric-line-padding-x: 1em;
+  touch-action: pan-x;
 
   @media screen and (width <= 500px) {
     --lyric-line-padding-x: 20px;
@@ -289,7 +320,7 @@
       padding-left: 15%;
     }
 
-    & .FmKaba_lyricLineWrapper:has(.FmKaba_lyricDuetLine) {
+    & .FmKaba_isDuetWrapper {
       align-items: flex-end;
 
       & .FmKaba_bgWrapper {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applemusic-like-lyrics/core",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件",
   "repository": {
     "url": "https://github.com/amll-dev/applemusic-like-lyrics.git",
@@ -50,16 +50,16 @@
     }
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.8",
+    "@biomejs/biome": "^2.5.7",
+    "@tsdown/css": "^0.22.14",
     "@types/deep-freeze": "^0.1.5",
     "@types/stats.js": "^0.17.3",
     "@types/ungap__structured-clone": "^1.2.0",
     "lil-gui": "^0.21.0",
     "stats.js": "^0.17.0",
-    "typedoc": "^0.28.18",
-    "typedoc-plugin-markdown": "^4.11.0",
-    "@tsdown/css": "^0.22.0",
-    "tsdown": "^0.22.0"
+    "tsdown": "^0.22.14",
+    "typedoc": "^0.28.20",
+    "typedoc-plugin-markdown": "^4.12.0"
   },
   "peerDependencies": {
     "@pixi/app": "*",
@@ -71,10 +71,11 @@
     "@pixi/sprite": "*"
   },
   "dependencies": {
-    "@ungap/structured-clone": "^1.3.0",
-    "bezier-easing": "^3.0.0",
+    "@ungap/structured-clone": "^1.3.3",
+    "bezier-easing": "^3.0.1",
     "deep-freeze": "^0.0.1",
-    "gl-matrix": "4.0.0-beta.2"
+    "gl-matrix": "4.0.0-beta.2",
+    "vitest": "^4.1.10"
   },
   "scripts": {
     "build:docs": "typedoc --plugin typedoc-plugin-markdown --out docs src/index.ts",
@@ -83,6 +84,9 @@
     "build": "run-p typecheck \"build-only {@}\" --",
     "build:dev": "tsdown",
     "fmt": "biome format --write ./src",
-    "dev": "nx run @applemusic-like-lyrics/playground-core:dev"
+    "dev": "nx run @applemusic-like-lyrics/playground-core:dev",
+    "test": "vitest test",
+    "test:watch": "vitest test --watch",
+    "test:coverage": "vitest test --coverage"
   }
 }