`. In AMLL, common types are:
+
+1. `ttm:*` metadata (TTML standard)
+2. `amll:meta` metadata (AMLL extension)
+
+Example:
+
+```xml
+
+ Song Title
+
+
+ Singer A
+
+
+
+```
+
+Common `amll:meta` keys:
+
+- `musicName`, `artists`, `album`, `isrc`
+- Platform IDs: `ncmMusicId`, `qqMusicId`, `spotifyId`, `appleMusicId`
+- Contributors: `ttmlAuthorGithub`, `ttmlAuthorGithubLogin`
+
+## Timing and Modes
+
+Timing is typically expressed by `begin` / `end` / `dur`. Supported units:
+
+- Clock format: `MM:SS.fff`, `HH:MM:SS.fff` (fractional digits 0-3)
+- Seconds format: `12.3s`
+
+With `itunes:timing="Word"`:
+
+- `` is one lyric line
+- Timestamped inline `` elements represent words/syllables
+
+With `itunes:timing="Line"`:
+
+- Primarily uses `whole line text
`
+- Inline word timing spans are usually not used
+
+## Body Structure and Extension Roles
+
+Typical body structure:
+
+```xml
+
+
+
+```
+
+Common attributes and conventions:
+
+- `itunes:key="L1"`: unique line ID (`L1`, `L2`, ...)
+- `ttm:agent="v1"`: points to ``
+- `itunes:song-part`: section info (`Verse`, `Chorus`, etc.)
+
+Inline assistant content uses `ttm:role`:
+
+- `x-translation`: translation
+- `x-roman`: transliteration / romanization
+- `x-bg`: background vocal
+
+Example:
+
+```xml
+
+ コーラス
+ です
+
+
+ (背景)
+ Background
+ haikei
+
+
+```
+
+## Apple Music Style Translation/Transliteration Sidecar
+
+In addition to inline spans, translation/transliteration can be stored in ``:
+
+```xml
+
+
+
+ First line translation
+
+
+
+
+ dai ichi gyou
+
+
+
+```
+
+`for="L1"` links to `itunes:key="L1"` in the body.
+
+## Ruby Annotation
+
+AMLL supports TTML Ruby (`tts:ruby`) for furigana, pinyin, etc.:
+
+- `tts:ruby="container"`: ruby container
+- `tts:ruby="base"`: base text
+- `tts:ruby="textContainer"`: ruby text container
+- `tts:ruby="text"`: ruby text (can carry timing)
+
+```xml
+
+ 所
+
+ しょ
+
+
+
+ 詮
+
+ せ
+ ん
+
+
+```
+
+## Implementation Behavior in This Library
+
+Current parse/export behavior includes:
+
+- Accepts both `itunes:songPart` and `itunes:song-part`; export prefers `song-part`
+- Parses and preserves `amll:obscene` and `amll:empty-beat`
+- Background vocal text can be with/without parentheses; parser normalizes it
+- Can merge inline translations with Head Sidecar translations (same language may duplicate; dedupe in business layer)
+- If word-level timing is absent but line timing exists, it can fallback to placeholder word entries to avoid information loss
diff --git a/amll-local/packages/docs/src/content/docs/en/guides/overview/eco.md b/amll-local/packages/docs/src/content/docs/en/guides/overview/eco.md
new file mode 100644
index 0000000..ebb0a07
--- /dev/null
+++ b/amll-local/packages/docs/src/content/docs/en/guides/overview/eco.md
@@ -0,0 +1,61 @@
+---
+title: Ecosystem
+---
+
+After continuous development, AMLL has built an open-source ecosystem around word-by-word lyrics, including lyric databases, editors, and music players.
+
+## First-party Ecosystem
+
+First-party projects are repositories under the [amll-dev](https://github.com/amll-dev/) GitHub organization. Content and docs for each project are maintained independently. Please report issues in the corresponding repository.
+
+### AMLL TTML Database
+
+[AMLL TTML Database](https://github.com/amll-dev/amll-ttml-db) is a high-quality open word-by-word lyrics database. Lyrics are community-contributed and reviewed, and published under [CC0-1.0](https://github.com/amll-dev/amll-ttml-db/blob/main/LICENSE).
+
+If you are building a player, you can use it as your lyric source. You can also contribute lyrics back to the database. For submission and usage details, see its [repository wiki](https://github.com/amll-dev/amll-ttml-db/wiki).
+
+### AMLL TTML Tool
+
+[AMLL TTML Tool](https://github.com/amll-dev/amll-ttml-tool) is a React-based word-by-word lyrics editor with lyric editing and timing capabilities. Most lyrics in the database were created using this tool.
+
+
+
+It is deployed at
+
diff --git a/amll-local/packages/docs/src/content/docs/guides/component/background.md b/amll-local/packages/docs/src/content/docs/guides/component/background.md
new file mode 100644
index 0000000..640e678
--- /dev/null
+++ b/amll-local/packages/docs/src/content/docs/guides/component/background.md
@@ -0,0 +1,218 @@
+---
+title: 动态背景
+---
+
+AMLL Core 提供了独立的背景渲染组件 [`BackgroundRender`](/reference/core/classbackgroundrender)。它负责把专辑图或专辑视频渲染成 Apple Music 风格的动态背景；歌词组件仍然只负责歌词视图本身，音频播放、资源加载与图层挂载需要由宿主环境管理。
+
+本文主要使用原生 Core API 说明背景集成方式，如果你使用 React 或 Vue 绑定，请直接转到 [绑定部分](#react-与-vue-绑定)。
+
+## 基本结构
+
+背景组件由两部分组成：
+
+- [`BackgroundRender`](/reference/core/classbackgroundrender)：统一的包装器，提供设置专辑图、帧率、渲染比例、暂停恢复等方法。
+- 渲染器：目前 Core 提供 [`MeshGradientRenderer`](/reference/core/classmeshgradientrenderer) 和 [`PixiRenderer`](/reference/core/classpixirenderer)。
+
+创建背景时需要选择其中一个渲染器：
+
+```ts
+// 使用 Mesh Gradient
+import {
+ BackgroundRender,
+ MeshGradientRenderer,
+} from "@applemusic-like-lyrics/core";
+const meshBackground = BackgroundRender.new(MeshGradientRenderer);
+
+// 使用 Pixi
+import { BackgroundRender, PixiRenderer } from "@applemusic-like-lyrics/core";
+const pixiBackground = BackgroundRender.new(PixiRenderer);
+```
+
+## 与歌词组件叠放
+
+背景元素是一个 ``。通常把它和歌词组件放在同一个容器中，并放置在歌词元素之前。
+
+```ts
+import {
+ BackgroundRender,
+ DomLyricPlayer,
+ MeshGradientRenderer,
+} from "@applemusic-like-lyrics/core";
+import "@applemusic-like-lyrics/core/style.css";
+
+const background = BackgroundRender.new(MeshGradientRenderer);
+const lyricPlayer = new DomLyricPlayer();
+
+function mountPlayer(host: HTMLElement) {
+ const backgroundElement = background.getElement();
+ const lyricElement = lyricPlayer.getElement();
+
+ host.appendChild(backgroundElement);
+ host.appendChild(lyricElement);
+}
+
+const host = document.querySelector("#player");
+if (!host) throw new Error("missing #player");
+
+mountPlayer(host);
+```
+
+背景的 canvas 尺寸由 CSS 决定，内部会通过 `ResizeObserver` 按设备像素比和渲染比例调整实际绘制尺寸。因此，宿主容器应有明确宽高。
+
+AMLL 本身不会定义背景组件与歌词组件的定位与层级样式，这部分样式应由宿主定义。
+
+## 设置专辑资源
+
+调用 [`setAlbum`](/reference/core/classbackgroundrender#setalbum) 设置背景来源。它可以接收图片或视频 URL、`HTMLImageElement` 或 `HTMLVideoElement`。
+
+如果传入字符串 URL 且资源是视频，需要把第二个参数设为 `true`：
+
+```ts
+// 图片 URL
+await background.setAlbum("/album-cover.jpg");
+
+// 视频 URL
+await background.setAlbum("/album-video.webm", true);
+```
+
+若你已经持有 `File` 或 `Blob` 对象，可以使用 [`URL.createObjectURL`](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL_static) 创建对象 URL 并提供给 `setAlbum`。
+
+背景渲染会把资源绘制到 canvas / WebGL 纹理中。
+
+## 同步播放状态
+
+背景组件拥有自己的动画循环，不需要像 `DomLyricPlayer` 一样手动逐帧调用 `update(delta)`。只需要在播放、暂停时调用 `resume()` 与 `pause()`：
+
+```ts
+audio.addEventListener("play", () => {
+ lyricPlayer.resume();
+ background.resume();
+});
+
+audio.addEventListener("pause", () => {
+ lyricPlayer.pause();
+ background.pause();
+});
+```
+
+背景动画的播放状态与歌词动画独立，你也可以只控制背景动画。
+
+```ts
+function setBackgroundPlaying(playing: boolean) {
+ if (playing) background.resume();
+ else background.pause();
+}
+```
+
+## 应用渲染设置
+
+常用设置可以在初始化后或用户调整选项时应用，设置后即时生效。
+
+```ts
+function applyBackgroundSettings() {
+ background.setFPS(60);
+ background.setRenderScale(1);
+ background.setFlowSpeed(0.2);
+ background.setStaticMode(false);
+ background.setLowFreqVolume(1);
+}
+```
+
+| 方法 | 说明 |
+| ------------------------------------------------------------------------------------ | -------------------------------------------------------------- |
+| [`setFPS(fps)`](/reference/core/classbackgroundrender#setfps) | 设置背景动画帧率 |
+| [`setRenderScale(scale)`](/reference/core/classbackgroundrender#setrenderscale) | 设置渲染比例，数值越高越清晰，也越消耗性能 |
+| [`setFlowSpeed(speed)`](/reference/core/classbackgroundrender#setflowspeed) | 设置背景流动速度 |
+| [`setStaticMode(enable)`](/reference/core/classbackgroundrender#setstaticmode) | 开启后，背景在资源切换动画结束后可以停在静态状态，以节省性能 |
+| [`setLowFreqVolume(volume)`](/reference/core/classbackgroundrender#setlowfreqvolume) | 传入低频音量提示，部分渲染器可能会据此调整动态效果 |
+| [`setHasLyric(hasLyric)`](/reference/core/classbackgroundrender#sethaslyric) | 告诉渲染器当前歌曲是否有歌词，部分渲染器可能会据此调整动态效果 |
+
+`setRenderScale` 的值通常在 `0.5` 到 `1` 之间取舍。移动端或低性能设备可以降低渲染比例和帧率；播放器全屏展示时可以提高渲染比例。
+
+## 更换渲染器
+
+`BackgroundRender` 创建后不能替换内部渲染器。如果用户从 `MeshGradientRenderer` 切换到 `PixiRenderer`，应该释放旧实例并创建新实例：
+
+```ts
+type PlayerBackground =
+ | BackgroundRender
+ | BackgroundRender;
+
+function switchToPixiRenderer(
+ host: HTMLElement,
+ lyricPlayer: DomLyricPlayer,
+ currentBackground: PlayerBackground,
+) {
+ currentBackground.dispose();
+
+ const nextBackground = BackgroundRender.new(PixiRenderer);
+ host.insertBefore(nextBackground.getElement(), lyricPlayer.getElement());
+ return nextBackground;
+}
+```
+
+## 清理
+
+页面卸载、播放器销毁或永久切换实现时，需要释放背景实例：
+
+```ts
+background.dispose();
+lyricPlayer.dispose();
+```
+
+`dispose()` 会释放渲染器内部资源，并移除背景 canvas。若你自己创建了 `ObjectURL`、音频事件监听或其他异步加载状态，也需要在宿主代码中一并清理。
+
+## React 与 Vue 绑定
+
+背景组件没有歌词组件那么复杂的中间状态维护，因此组件化轻松许多。
+
+React 与 Vue 是类似的，均通过 props 设置选项与维护状态。是否播放使用 `playing` 属性指定，专辑图片或视频资源使用 `album` 属性指定。你可以在 API 参考中查看完整的属性列表。
+
+- React 属性列表参考：[BackgroundRenderProps](/reference/react/interfacebackgroundrenderprops)
+- Vue 属性列表参考：[BackgroundRender](/reference/vue/classbackgroundrender)
+
+组件在卸载时会自动释放内部资源。但你自行定义的监听器、Object URL 等仍需你自行释放。
+
+下面是一个 React 的最小示例：
+
+```tsx
+import { LyricPlayer, BackgroundRender } from "@applemusic-like-lyrics/react";
+
+function app() {
+ const albumUrl = "/album-cover.jpg";
+ return (
+ <>
+
+
+
+
+```
+
+## 检查清单
+
+- 宿主容器有明确尺寸。
+- 背景 canvas 插入在歌词元素之前，且歌词层级高于背景层级。
+- 图片或视频资源允许跨域读取，或与页面同源。
+- 视频 URL 调用 `setAlbum(source, true)`。
+- 播放状态同步到 `resume()` / `pause()`。
+- 切换渲染器时先 `dispose()` 旧背景，再创建新背景。
+- 卸载时释放背景、歌词组件和宿主代码创建的资源。
diff --git a/amll-local/packages/docs/src/content/docs/guides/component/quickstart.mdx b/amll-local/packages/docs/src/content/docs/guides/component/quickstart.mdx
new file mode 100644
index 0000000..6709a7c
--- /dev/null
+++ b/amll-local/packages/docs/src/content/docs/guides/component/quickstart.mdx
@@ -0,0 +1,286 @@
+---
+title: 快速开始
+---
+
+import { CardGrid, LinkCard } from "@astrojs/starlight/components";
+import PackageInstall from "#components/PackageInstall.astro";
+
+下面快速介绍如何将 AMLL 歌词组件集成到你的项目中。请注意，AMLL 不提供 CDN 引入方式，必须使用 bundler。
+
+有关除组件库之外的其他周围工具包，请直接查阅 [API 参考](/reference)。
+
+## 依赖
+
+安装 AMLL 核心库：
+
+
+
+
+## 使用原生方式引入
+
+AMLL 核心库是框架无关的。无论是否使用框架，均可使用此方法引入。
+
+下面假设：
+
+- 页面中已有 `` 和 ``，并给歌词容器设置了明确高度
+- TTML 歌词文件在 `/lyrics/song.ttml` 上提供
+
+```js
+import { LyricPlayer } from "@applemusic-like-lyrics/core";
+import { parseTTML } from "@applemusic-like-lyrics/lyric";
+
+// 一般地，打包器会处理 CSS 导入；如果出现异常，请查阅你使用的打包器文档
+import "@applemusic-like-lyrics/core/style.css";
+
+const audio = document.querySelector("#audio");
+const playerHost = document.querySelector("#lyric-player");
+const player = new LyricPlayer();
+
+playerHost.appendChild(player.getElement());
+
+async function loadLyric() {
+ const ttml = await fetch("/lyrics/song.ttml").then((res) => res.text());
+ const currentTime = Math.round(audio.currentTime * 1000);
+ player.setLyricLines(parseTTML(ttml).lines, currentTime);
+ player.setCurrentTime(currentTime, true);
+}
+
+// 播放时持续同步音频进度
+let lastFrameTime = -1;
+function onFrame(frameTime) {
+ const delta = lastFrameTime === -1 ? 0 : frameTime - lastFrameTime;
+ lastFrameTime = frameTime;
+
+ if (!audio.paused) {
+ player.setCurrentTime(Math.round(audio.currentTime * 1000));
+ }
+
+ player.update(delta);
+ requestAnimationFrame(onFrame);
+}
+
+audio.addEventListener("play", () => player.resume());
+audio.addEventListener("pause", () => player.pause());
+audio.addEventListener("seeked", () => {
+ // 跳转后立即对齐歌词位置
+ player.setCurrentTime(Math.round(audio.currentTime * 1000), true);
+});
+
+loadLyric();
+requestAnimationFrame(onFrame);
+```
+
+有关更详细的时序管理，请转到 [时序与生命周期](./sequence)。
+
+你可以前往 [API 参考：Core 核心](/reference/core) 获取详细的接口文档。
+
+## 使用 React 绑定
+
+确保你已安装 `react` 和 `react-dom` 包。然后安装 AMLL React 绑定包：
+
+
+
+React 绑定包拥有具名导出 [`LyricPlayer`](/reference/react/variablelyricplayer) 作为核心组件。下面是一段示例，假设 TTML 歌词文件在 `/lyrics/song.ttml` 上提供、音频文件在 `/music/song.m4a` 上提供。
+
+```tsx
+import { useEffect, useRef, useState } from "react";
+import type { LyricLine } from "@applemusic-like-lyrics/core";
+import { LyricPlayer } from "@applemusic-like-lyrics/react";
+import { parseTTML } from "@applemusic-like-lyrics/lyric";
+
+// 一般地，打包器会处理 CSS 导入；如果出现异常，请查阅你使用的打包器文档
+import "@applemusic-like-lyrics/core/style.css";
+
+function App() {
+ const audioRef = useRef
(null);
+ const [lyricLines, setLyricLines] = useState([]);
+ const [currentTime, setCurrentTime] = useState(0);
+ const [playing, setPlaying] = useState(false);
+
+ function syncCurrentTime() {
+ const audio = audioRef.current;
+ if (audio) setCurrentTime(Math.round(audio.currentTime * 1000));
+ }
+
+ useEffect(() => {
+ let canceled = false;
+
+ // parseTTML 返回包含元数据的对象，组件只需要其中的 lines
+ fetch("/lyrics/song.ttml")
+ .then((res) => res.text())
+ .then((ttml) => {
+ if (!canceled) setLyricLines(parseTTML(ttml).lines);
+ });
+
+ return () => {
+ canceled = true;
+ };
+ }, []);
+
+ useEffect(() => {
+ let frameId = 0;
+ const onFrame = () => {
+ const audio = audioRef.current;
+ if (audio && !audio.paused) {
+ setCurrentTime(Math.round(audio.currentTime * 1000));
+ }
+ frameId = requestAnimationFrame(onFrame);
+ };
+
+ frameId = requestAnimationFrame(onFrame);
+ return () => cancelAnimationFrame(frameId);
+ }, []);
+
+ return (
+ <>
+ setPlaying(true)}
+ onPause={() => setPlaying(false)}
+ onEnded={() => setPlaying(false)}
+ onSeeked={syncCurrentTime}
+ />
+
+ );
+}
+
+export default App;
+```
+
+你可以前往 [API 参考：React 绑定](/reference/react) 获取详细的接口文档。
+
+## 使用 Vue 绑定
+
+确保你已安装 Vue。然后安装 AMLL Vue 绑定包：
+
+
+
+
+
+
+
+```
+
+你可以前往 [API 参考：Vue 绑定](/reference/vue) 获取详细的接口文档。
diff --git a/amll-local/packages/docs/src/content/docs/guides/component/sequence.md b/amll-local/packages/docs/src/content/docs/guides/component/sequence.md
new file mode 100644
index 0000000..94031f5
--- /dev/null
+++ b/amll-local/packages/docs/src/content/docs/guides/component/sequence.md
@@ -0,0 +1,209 @@
+---
+title: 时序与生命周期
+---
+
+下面介绍歌词组件的时序与生命周期管理。
+
+歌词组件只负责歌词视图本身，**不负责音频播放**。因此 **宿主环境（也就是你的代码）需要管理音频播放，并把音频播放状态与 AMLL 的组件状态桥接起来。**
+
+如果你使用 React 或 Vue 绑定，组件会代管一部分生命周期；如果直接使用原生方式，则需要自己管理完整流程。本文主要介绍原生方式引入的周期管理，并介绍绑定托管的状态。
+
+## 初始化
+
+初始化时需要完成：
+
+1. 创建歌词组件，并把它的元素挂载到一个 **有明确尺寸的** 容器里。
+2. （可选）设置自定义歌词优化选项。[`setOptimizeOptions`](/reference/core/classlyricplayerbase#setoptimizeoptions) 方法接受 [`OptimizeLyricOptions`](/reference/core/interfaceoptimizelyricoptions)。
+3. 设置歌词数据。[`setLyricLines`](/reference/core/classlyricplayerbase#setlyriclines) 方法接受 [`LyricLine[]`](/reference/core/interfacelyricline)，传入后不应再修改这些对象。
+4. 用当前播放进度对齐一次歌词位置。
+
+原生方式的典型顺序如下：
+
+```ts
+import { LyricPlayer } from "@applemusic-like-lyrics/core";
+
+const player = new LyricPlayer();
+host.appendChild(player.getElement());
+
+const currentTime = Math.round(audio.currentTime * 1000);
+player.setOptimizeOptions({}); // 可选
+player.setLyricLines(lines, currentTime);
+player.setCurrentTime(currentTime, true);
+player.update(0);
+```
+
+在设置歌词时会执行歌词优化处理，因此这部分选项如需调整，应在 `setLyricLines` 之前调用 `setOptimizeOptions`。在 `setLyricLines` 之后修改不会自动重新处理已有歌词，需要重新设置歌词。
+
+另外需要注意其中 `currentTime` 的单位是毫秒，且应为整数。`audio.currentTime` 单位为秒，所以要乘以 `1000`。
+
+## 播放与暂停
+
+`pause()` 和 `resume()` 控制歌词组件内部的演出状态，包括逐字动画与辉光、间奏点动画。音频开始播放时调用 `resume()`，音频暂停、结束或被外部中断时调用 `pause()`。
+
+例如，若使用 `` 播放音频，可以使用其事件驱动：
+
+```ts
+const onPlay = () => {
+ player.resume();
+};
+const onPause = () => {
+ player.pause();
+};
+
+audio.addEventListener("play", onPlay);
+audio.addEventListener("pause", onPause);
+```
+
+## 播放进度
+
+### 正常播放
+
+在播放过程中需要更新歌词组件的时间进度。**AMLL 使用的所有时间，单位均为毫秒**。
+
+其中有两个容易混淆的时间：
+
+| 时间类型 | 接收于 | 含义 |
+| ------------ | ------------------------------------------- | -------------------- |
+| 当前播放进度 | `setCurrentTime(time)` / `currentTime` 属性 | 歌曲播放的进度 |
+| 帧间隔 | `update(delta)` | 距离上一帧过去的时间 |
+
+原生方式下，`setCurrentTime` 会更新歌词时间线，`update` 会推进动画。**二者不是同一个值**。
+
+```ts
+let frameId = 0;
+let lastFrameTime = -1;
+
+function startFrameLoop() {
+ const onFrame = (frameTime: number) => {
+ const delta = lastFrameTime === -1 ? 0 : frameTime - lastFrameTime;
+ lastFrameTime = frameTime;
+ if (!audio.paused) {
+ player.setCurrentTime(Math.round(audio.currentTime * 1000));
+ }
+ player.update(delta);
+ frameId = requestAnimationFrame(onFrame);
+ };
+ frameId = requestAnimationFrame(onFrame);
+}
+
+function stopFrameLoop() {
+ cancelAnimationFrame(frameId);
+ frameId = 0;
+ lastFrameTime = -1;
+}
+```
+
+**不应依赖 `` 的 `timeupdate` 事件同步歌词**。这是由于浏览器触发 `timeupdate` 的频率较低且不稳定，通常明显低于动画帧频率。播放中应使用 `requestAnimationFrame` 逐帧同步当前进度。
+
+### 跳转
+
+在正常播放之外，播放进度有可能产生跳变，常见于：
+
+- 拖动进度条
+- 快进快退
+- 点击某一歌词行跳转
+- 循环播放时，进度从结尾跳至开头
+
+播放进度发生跳变时，需要把 `setCurrentTime` 的第二个参数设为 `true`：
+
+```ts
+function onSeeked() {
+ player.setCurrentTime(Math.round(audio.currentTime * 1000), true);
+}
+audio.addEventListener("seeked", onSeeked);
+```
+
+**这个参数表示本次同步是一次 seek。正常播放状态与 seek 状态的布局与动画行为是不同的：**
+
+- 正常播放时，组件会对视图内的每一行单独执行布局与弹簧动画，实现细腻的视觉效果
+- 调整进度时，组件会强制对齐歌词位置，对所有歌词行整体执行布局与弹簧动画效果，减小性能消耗且动画更加利落
+
+如果没有正确标记 seek 状态，可能出现布局异常，例如出现卡顿、歌词行从屏幕一端快速飞到另一端消失等等。你可以在 [issue #429](https://github.com/amll-dev/applemusic-like-lyrics/issues/429) 中看到截图。
+
+### 歌词行点击事件
+
+组件提供了 `line-click` 事件，在某一歌词行被点击时触发，其事件类型为 [`LyricLineMouseEvent`](/reference/core/classlyriclinemouseevent)。
+
+**组件本身不会响应歌词行的点击操作。** 宿主环境需要监听该事件，并作出音频进度跳转等操作。例如：
+
+```ts
+import type { LyricLineMouseEvent } from "@applemusic-like-lyrics/core";
+
+player.addEventListener("line-click", (event) => {
+ const lineEvent = event as LyricLineMouseEvent;
+ audio.currentTime = lineEvent.line.getLine().startTime / 1000;
+ player.setCurrentTime(lineEvent.line.getLine().startTime, true);
+});
+```
+
+值得一提：点击歌词行跳转时也属于 seek。
+
+## 更换歌词
+
+更换歌曲或歌词源时，通过 `setLyricLines` 方法再次设置歌词行对象数组即可。如果加载失败，可以传入空数组清空歌词。
+
+```ts
+player.setLyricLines([]);
+player.update(0);
+```
+
+## React 与 Vue 绑定
+
+React 和 Vue 绑定会创建并销毁底层 Core 组件，也会在未禁用时自动调用 `update`。因此使用绑定时，通常不需要自己调用底层 `update`。
+
+你仍然需要负责这些状态：
+
+| 状态 | React / Vue 传入方式 | 说明 |
+| ------------ | -------------------- | ------------------------------------------- |
+| 歌词数据 | `lyricLines` | 解析后的 `LyricLine[]` |
+| 当前播放进度 | `currentTime` | 播放中用 `requestAnimationFrame` 从音频同步 |
+| 播放状态 | `playing` | 控制歌词组件内部演出暂停或恢复 |
+
+React 绑定额外提供 `isSeeking` 属性，可以在跳转时传入：
+
+```tsx
+
+
diff --git a/amll-local/packages/docs/src/content/docs/guides/lyric/formats.md b/amll-local/packages/docs/src/content/docs/guides/lyric/formats.md
new file mode 100644
index 0000000..f0a18d2
--- /dev/null
+++ b/amll-local/packages/docs/src/content/docs/guides/lyric/formats.md
@@ -0,0 +1,195 @@
+---
+title: 各歌词格式介绍
+---
+
+本文介绍 [@applemusic-like-lyrics/lyric](https://www.npmjs.com/package/@applemusic-like-lyrics/lyric) 库支持的一些歌词文件格式。
+
+在本文中，「逐字歌词」**泛指时间戳精度高于行级别的歌词**。不同平台、格式实现有所不同，可能对应逐音节或逐词的时间戳。
+
+## TTML
+
+TTML 格式是 AMLL 生态的主要歌词存储与交换格式，支持 AMLL 生态的所有能力，包括翻译音译、背景对唱、逐字音译、注音等等。
+
+有关 TTML 的介绍详见 [TTML](./ttml) 一文。
+
+**本库提供 [`parseTTML`](/reference/lyric/functionparsettml) 和 [`stringifyTTML`](/reference/lyric/functionstringifyttml) 方法用于正反序列化 TTML 歌词。**
+
+## LRC
+
+LRC 是最常见的歌词文件格式，只支持逐行歌词。扩展名为 `.lrc`，是 **l**y**r**i**c**s 的缩写。
+
+我们这里所说的 LRC 是最基本、未作任何扩展的 LRC 格式，有时也称为简单 LRC。LRC 并不是某个机构公开声明定义的，其最初来源已经不可考，目前已经成为业界的某种约定俗成，因此各种变体繁多，很多细节也没有固定。
+
+一般地，LRC 格式中每一行对应着一个歌词行。歌词行的开头有时间戳，表示该行的开始时间。常见的格式有
+
+- `[mm:ss]`
+- `[mm:ss.xx]`
+- `[mm:ss.xxx]`
+
+其中 `mm` 为分钟，`ss.xxx` 为秒，小数点后可能不保留、保留 2 位或保留 3 位。特别地，同一行歌词可以使用多个时间戳，表示在不同时间重复出现。
+
+LRC 格式还支持在开头添加元数据。元数据的格式为 `[tag:content]`。AMLL Editor 支持 LRC 元数据模板，包含了常见字段，在元数据侧边栏的下拉框中可以选择。此处不再列举。
+
+一些实现允许使用 `#` 开头的行作为注释。
+
+这里给出一段 LRC 歌词的示例。
+
+```lrc
+[al:崩坏星穹铁道-不虚此行 On the Journey]
+[ti:不虚此行 On the Journey]
+[ar:魏晨, Nea]
+[length: 2:36]
+
+[00:25.494]We venture through the cosmic sea
+[00:27.541]A thousand light-years, wild and free
+[00:30.805]We dance beneath the galaxy
+[00:32.847]Then will you be with me?
+# ...
+[01:45.949]Catching on, our paths unknown
+[01:50.261]To sink into daylight
+[01:52.851]Break into the moonlight
+[01:56.487]Life goes on, through tides of time
+[02:00.900]Get in the line, to dream alive
+[02:03.580]In our souls, do we know?
+[02:05.896][02:08.473][02:11.262]On the journey
+```
+
+LRC 不支持为歌词添加翻译与音译。一般的处理方法是，如有翻译与音译，通过额外的独立文件提供，时间戳与原文歌词文件相同，对应时间戳对应行的翻译与音译。
+
+[维基百科：LRC (file format)]() 上有更多介绍。
+
+**本库提供 [`parseLrc`](/reference/lyric/functionparselrc) 和 [`stringifyLrc`](/reference/lyric/functionstringifylrc) 方法用于正反序列化 LRC 歌词。**
+
+## LRC A2
+
+LRC A2 首先由 A2 Media Player 提出，故名。其是在 LRC 基础上扩展的结果，通过在文中加注尖括号包裹的时间戳 `` 实现了逐字。时间戳格式与 LRC 类似，可能不保留小数点、或小数点后保留 2 位或 3 位。每个尖括号都表示其**后续**一部分文本片段的开始时间。
+
+LRC A2 的扩展名为 `.lrc` 或 `.alrc`。
+
+这里直接给出示例。
+
+```alrc
+[ti: Somebody to Love]
+[ar: Jefferson Airplane]
+[al: Surrealistic Pillow]
+[length: 2:58]
+
+[00:00.00] <00:00.04> When <00:00.16> the <00:00.82> truth <00:01.29> is <00:01.63> found <00:03.09> to <00:03.37> be <00:05.92> lies
+[00:06.47] <00:07.67> And <00:07.94> all <00:08.36> the <00:08.63> joy <00:10.28> within <00:10.53> you <00:13.09> dies
+[00:13.34] <00:14.32> Don't <00:14.73> you <00:15.14> want <00:15.57> somebody <00:16.09> to <00:16.46> Love
+```
+
+解析时，时间戳前后的空格应当合并。
+
+LRC A2 使用尖括号夹入文中，这里涉及到转义的问题：如果歌词中出现了大于号 `>` 或小于号 `<`，应当如何处置？目前没有找到公开的规范说明，业内没有统一的转义方式。在解析时会尽量按时间戳模式匹配 ``，若歌词中出现 `<` 或 `>` 且不符合时间戳格式，则按普通字符处理。
+
+LRC A2 也不支持为歌词添加翻译与音译。一般的做法是伴随提供 LRC 格式的翻译或音译。
+
+**本库提供 [`parseLrcA2`](/reference/lyric/functionparselrca2) 和 [`stringifyLrcA2`](/reference/lyric/functionstringifylrca2) 方法用于正反序列化 LRC 歌词。**
+
+## 网易云逐字与 QQ 音乐逐字
+
+二者都是音乐平台私有的逐字歌词格式。网易云音乐使用 `.yrc` 作为扩展名，QQ 音乐使用 `.qrc` 作为扩展名。
+
+二者都使用开头的方括号标注行时间戳，格式均为 `[lineStart,lineDur]`。`lineStart` 为行起始时间，以毫秒计的整数；`lineDur` 是行持续时间，也是以毫秒计的整数。二者也均**不支持**类似 LRC 的重复行使用多个时间戳。
+
+在逐字的表现形式上二者有一些不同。
+
+- 网易云的 YRC 采用 `(sylStart,sylDur,0)text` 格式，先时间戳、后文本，时间戳括号内三个数分别是起始时间、持续时间、`0`。所有 YRC 格式歌词都带有这个 `0`，目前尚未发现其具体含义，可能是为未来扩展预留的字段。
+- QQ 音乐的 QRC 采用 `text(sylStart,sylDur)` 格式，先文本、后时间戳。并且没有 YRC 的 `0`。
+
+所有的开始时间均为**绝对时间**，即从音频开始到文本开始所经过的时间。
+
+下面是同一段歌词在两种格式下的示例：
+
+```
+# 网易云音乐 YRC
+[190871,1984](190871,361,0)For (191232,172,0)the (191404,376,0)first (191780,1075,0)time
+[193459,4198](193459,412,0)What's (193871,574,0)past (194445,506,0)is (194951,2706,0)past
+
+# QQ 音乐 QRC
+[190871,1984]For (190871,361)the (191232,172)first (191404,376)time(191780,1075)
+[193459,4198]What's (193459,412)past (193871,574)is (194445,506)past(194951,2706)
+```
+
+QRC 和 YRC **不具有**类似 LRC A2 的合并相邻空格特性。
+
+由于在文中夹注半角括号 `()` 的时间戳，那歌词文本中的圆括号应当如何转义？由于 YRC 和 QRC 都是私有文件格式，没有官方资料可查，于是我们查找这两个平台上的官方歌词：
+
+- 在我们目前处理到的所有 YRC 歌词中，所有的圆括号均为全角 `（）`，无论是中文还是其他语言
+- 在我们目前处理到的所有 QRC 歌词中，圆括号未做转译或替换
+
+因此根据现有样本推测：
+
+- YRC 实际上可能不允许在歌词文本中使用半角圆括号，若有需要应使用全角圆括号。本库也遵守这一原则，在导出为 YRC 时若歌词文本中存在半角圆括号，会自动替换为全角。
+- QRC 在匹配时间戳时会略过非时间戳的圆括号，将其作为歌词文本处理。
+
+YRC、QRC 也不支持为歌词添加翻译与音译。一般的做法是伴随提供 LRC 格式的翻译或音译。
+
+另外，本库在解析 YRC 与 QRC 歌词时，若整行被圆括号括起，则会将该行视为背景行并去除括号。
+
+**本库提供 [`parseYrc`](/reference/lyric/functionparseyrc) 和 [`stringifyYrc`](/reference/lyric/functionstringifyyrc) 方法用于正反序列化 YRC 歌词；提供 [`parseQrc`](/reference/lyric/functionparseqrc) 和 [`stringifyQrc`](/reference/lyric/functionstringifyqrc) 方法用于正反序列化 QRC 歌词。**
+
+特别地，QQ 音乐在分发 QRC 歌词时使用了一种加密格式。此格式为包含了 QRC 文本的 XML，经一种类 DES 算法加密后使用 base64 编码而成。**本库提供 [`decryptQrcHex`](/reference/lyric/functiondecryptqrchex) 函数用于解密这样的 base64 串为 XML 文本，提供 [`encryptQrcHex`](/reference/lyric/functionencryptqrchex) 函数用于将明文 XML 加密为 base64 串。**
+
+## Lyricify 系列格式
+
+[Lyricify](https://lyricify.app) 是一款优秀的逐字歌词展示软件。其定义了 Lyricify Lines、Lyricify Syllable 和 Lyricify 快速导出 三种私有格式。
+
+其中：
+
+- Lyricify Lines 为逐行歌词，扩展名 `.lyl`
+- Lyricify Syllable 为逐字歌词，扩展名 `.lys`，支持设置背景与对唱行
+
+这两种格式 [官方提供了文档说明](https://github.com/WXRIW/Lyricify-App/blob/main/docs/Lyricify%204/Lyrics.md#lyricify-lines-%E6%A0%BC%E5%BC%8F%E8%A7%84%E8%8C%83)。
+
+**本库提供 [`parseLyl`](/reference/lyric/functionparselyl) 和 [`stringifyLyl`](/reference/lyric/functionstringifylyl) 方法用于正反序列化 Lyricify Lines 歌词；提供 [`parseLys`](/reference/lyric/functionparselys) 和 [`stringifyLys`](/reference/lyric/functionstringifylys) 方法用于正反序列化 Lyricify Syllable 歌词。**
+
+Lyricify 快速导出格式扩展名为 `.lqe`（**L**yricify **Q**uick **E**xport 的缩写）。官方没有提供文档说明，但其内容比较易懂。以下说明基于对相关软件实际导出文件的分析，并非官方规范，也可能与未来版本存在差异。
+
+```
+[Lyricify Quick Export]
+[version:1.0]
+
+[lyrics: format@Lyricify Syllable]
+[4]A(365,350)ni(715,307)ro(1022,312)dham (1334,419)a(3203,337)nut(3540,350)pā(3890,306)dam(4196,382)
+[5]Qua(6206,312)e(6518,350)so (6868,370)do(7238,338)mi(7576,373)ne (7949,413)nos (8362,736)ple(9098,306)ne (9404,338)sal(9742,237)va (9979,244)tam(10223,350)
+[4]A(6164,1436)nuc(7600,744)che(8344,724)dam (9068,399)a(9467,293)śā(9760,240)śva(10000,225)tam(10225,893)
+[4]Hi (11851,812)ma(12663,344)ma (13007,369)ja(13376,263)gad (13639,237)i(13876,212)daṃ(14088,800)
+
+
+[translation: format@LRC]
+[00:00.365]不生亦不灭
+[00:06.206]主人啊，求你像这般，赐给我们完全的救恩
+[00:06.164]不常亦不断
+[00:11.851]此世已为我之世
+
+
+[pronunciation: format@LRC, language@romaji]
+[00:00.365]阿难罗昙 阿耨钵昙
+[00:06.164]阿耨遮昙 阿刹缚多
+[00:11.851]天摩诃满 荼揭谛檀
+```
+
+头部定义了文件版本信息。此后内容由几部分构成。`[lyrics: format@Lyricify Syllable]` 后携带 Lyricify Syllable 格式的逐字歌词，此后 `[translation: format@LRC]` 后携带 LRC 格式的翻译歌词、`[pronunciation: format@LRC, language@romaji]` 后携带 LRC 格式的罗马字音译歌词。
+
+需要注意的是，翻译或音译区块只包含存在内容的行。若某一行没有翻译或音译，则该区块中不会出现对应时间戳。
+
+可见 Lyricify 快速导出格式支持逐字时间、背景行、对唱行、翻译、音译。
+
+此外，也可以参考 Lyricify 开发者的项目 [Lyricify Lyrics Helper](https://github.com/WXRIW/Lyricify-Lyrics-Helper)，其中有 Lyricify 系列格式的解析与生成逻辑，并以 MIT 开源。
+
+**本库提供 [`parseLqe`](/reference/lyric/functionparselqe) 和 [`stringifyLqe`](/reference/lyric/functionstringifylqe) 方法用于正反序列化 Lyricify 快速导出。**
+
+## 总结表格
+
+| 格式 | 扩展名 | 逐行时间 | 逐字时间 | 原生翻译音译 | 原生背景对唱 |
+| ----------------- | --------------- | :------: | :------: | :----------: | :----------: |
+| TTML | `.ttml` | ✓ | ✓ | ✓ | ✓ |
+| LRC | `.lrc` | ✓ | ✕ | ✕ | ✕ |
+| LRC A2 扩展 | `.lrc`, `.alrc` | ✓ | ✓ | ✕ | ✕ |
+| 网易云逐字 | `.yrc` | ✓ | ✓ | ✕ | ✕ |
+| QQ 音乐逐字 | `.qrc` | ✓ | ✓ | ✕ | ✕ |
+| Lyricify Lines | `.lyl` | ✓ | ✕ | ✕ | ✕ |
+| Lyricify Syllable | `.lys` | ✓ | ✓ | ✕ | ✓ |
+| Lyricify 快速导出 | `.lqe` | ✓ | ✓ | ✓ | ✓ |
diff --git a/amll-local/packages/docs/src/content/docs/guides/lyric/quickstart.mdx b/amll-local/packages/docs/src/content/docs/guides/lyric/quickstart.mdx
new file mode 100644
index 0000000..1b6f574
--- /dev/null
+++ b/amll-local/packages/docs/src/content/docs/guides/lyric/quickstart.mdx
@@ -0,0 +1,104 @@
+---
+title: 快速开始
+---
+
+import PackageInstall from "#components/PackageInstall.astro";
+
+AMLL 提供两个 npm 包，用于歌词格式正反序列化：
+
+- [@applemusic-like-lyrics/lyric](https://www.npmjs.com/package/@applemusic-like-lyrics/lyric)
+ 主流各歌词格式的解析与生成库，例如 LRC、YRC、LQE 等，其中 TTML 正反解实际上依赖 @applemusic-like-lyrics/ttml。
+- [@applemusic-like-lyrics/ttml](https://www.npmjs.com/package/@applemusic-like-lyrics/ttml)
+ TTML 逐字歌词格式正反序列化库。提供最详细的信息，包括逐字音译等特色功能。
+
+## Lyric 包
+
+`
+- `... ` 元数据区
+- `` 歌词正文区
+
+命名空间：
+
+- `xmlns="http://www.w3.org/ns/ttml"`
+- `xmlns:ttm="http://www.w3.org/ns/ttml#metadata"`
+- `xmlns:itunes="http://music.apple.com/lyric-ttml-internal"`
+- `xmlns:amll="http://www.example.com/ns/amll"`
+- `xmlns:tts="http://www.w3.org/ns/ttml#styling"`（Ruby 需要）
+
+根属性：
+
+- `xml:lang`：歌词主语言（BCP-47，如 `ja`、`zh-Hans`、`en-US`）
+- `itunes:timing`：`Word`（逐字）或 `Line`（逐行）
+
+## 元数据
+
+TTML 元数据主要放在 `` 中，AMLL 里常见两类：
+
+1. `ttm:*` 元数据（TTML 标准）
+2. `amll:meta` 元数据（AMLL 扩展）
+
+例如：
+
+```xml
+
+ Song Title
+
+
+ Singer A
+
+
+
+```
+
+常见 `amll:meta` 键：
+
+- `musicName`、`artists`、`album`、`isrc`
+- 平台 ID：`ncmMusicId`、`qqMusicId`、`spotifyId`、`appleMusicId`
+- 贡献者：`ttmlAuthorGithub`、`ttmlAuthorGithubLogin`
+
+## 时间与模式
+
+时间一般通过 `begin` / `end` / `dur` 表达，单位支持：
+
+- 时钟格式：`MM:SS.fff`、`HH:MM:SS.fff`，小数点后可保留 1~3 位或不保留
+- 秒值格式：`12.3s`
+
+`itunes:timing="Word"`（逐字）时：
+
+- `` 表示行
+- 行内多个带时间戳的 `` 表示字词
+
+`itunes:timing="Line"`（逐行）时：
+
+- 主要依赖 `整行文本
`
+- 内部 `span` 的逐字时间通常不使用
+
+## 正文结构与扩展角色
+
+正文结构一般为：
+
+```xml
+
+
+
+```
+
+常见属性与约定：
+
+- `itunes:key="L1"`：行唯一 ID（通常 `L1`、`L2`...）
+- `ttm:agent="v1"`：对应 ``
+- `itunes:song-part`：段落信息（如 `Verse`、`Chorus`）
+
+行内辅助信息通过 `ttm:role` 标记：
+
+- `x-translation`：翻译
+- `x-roman`：音译/罗马音
+- `x-bg`：背景人声
+
+示例：
+
+```xml
+
+ コーラス
+ です
+
+
+ (背景)
+ Background
+ haikei
+
+
+```
+
+## Apple Music 风格翻译音译
+
+除了把翻译/音译写在行内，也可以放在 ``：
+
+```xml
+
+
+
+ 第一行翻译
+
+
+
+
+ dai ichi gyou
+
+
+
+```
+
+其中 `for="L1"` 会关联到正文中的 `itunes:key="L1"`。
+
+## Ruby 注音
+
+AMLL 支持 TTML Ruby 结构（`tts:ruby`），适合日语振假名、拼音等：
+
+- `tts:ruby="container"`：整个 Ruby 容器
+- `tts:ruby="base"`：基文本
+- `tts:ruby="textContainer"`：注音容器
+- `tts:ruby="text"`：注音文本（可带时间）
+
+```xml
+
+ 所
+
+ しょ
+
+
+
+ 詮
+
+ せ
+ ん
+
+
+```
+
+## 与本库的实现对齐
+
+本库中的解析/导出实现有如下行为：
+
+- 同时兼容 `itunes:songPart` 与 `itunes:song-part`，导出时优先 `song-part`
+- 可解析并保留 `amll:obscene`、`amll:empty-beat`
+- 背景人声文本可带/不带括号，解析时会做清理
+- 可同时合并行内翻译与 Head Sidecar 翻译（同语言可能出现重复，需业务侧去重）
+- 在无逐字但有行时间戳时，可回退为单词级占位词条，避免信息丢失
diff --git a/amll-local/packages/docs/src/content/docs/guides/overview/eco.md b/amll-local/packages/docs/src/content/docs/guides/overview/eco.md
new file mode 100644
index 0000000..f316a44
--- /dev/null
+++ b/amll-local/packages/docs/src/content/docs/guides/overview/eco.md
@@ -0,0 +1,61 @@
+---
+title: 生态
+---
+
+经过一段时间的发展，AMLL 建立起了一个围绕逐字歌词的开源生态，包含逐字歌词库、编辑器、音乐播放器等。
+
+## 第一方生态
+
+第一方生态是指在 GitHub 上以 [amll-dev](https://github.com/amll-dev/) 组织下的仓库。以下项目的内容与文档均各自独立维护，问题反馈请至各仓库处理。
+
+### AMLL TTML Database
+
+[AMLL TTML Database](https://github.com/amll-dev/amll-ttml-db) 是一个高质量的开放逐字歌词数据库。其中的歌词均由社区贡献并经过审核，以 [CC0-1.0](https://github.com/amll-dev/amll-ttml-db/blob/main/LICENSE) 协议公开。
+
+如果你正在制作音乐播放器，可以将其作为歌词源。你也可以制作逐字歌词并提交到歌词库中。有关提交与使用的相关说明，请转到其 [仓库 wiki](https://github.com/amll-dev/amll-ttml-db/wiki)。
+
+### AMLL TTML Tool
+
+[AMLL TTML Tool](https://github.com/amll-dev/amll-ttml-tool) 是基于 React 编写的逐字歌词编辑器，涵盖歌词内容编辑、打轴等功能。歌词库中大部分逐字歌词均使用此工具制作。
+
+
+
+其部署在
+
diff --git a/amll-local/packages/docs/src/pages/en/index.astro b/amll-local/packages/docs/src/pages/en/index.astro
new file mode 100644
index 0000000..ca95c6e
--- /dev/null
+++ b/amll-local/packages/docs/src/pages/en/index.astro
@@ -0,0 +1,107 @@
+---
+import { Icon } from "@astrojs/starlight/components";
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+import { AMLLPreview } from "../../components/AMLLPreview";
+import "../../styles/index.css";
+import { amllCoreVersionLabel } from "../../utils/core-version";
+
+const entryLinks = [
+ {
+ title: "Component Quick Start",
+ description: "Bring word-by-word lyrics into your frontend project.",
+ href: "/en/guides/component/quickstart",
+ icon: "right-arrow",
+ },
+ {
+ title: "Lyric Processing",
+ description:
+ "Parse, generate, and convert formats including LRC, TTML, and more.",
+ href: "/en/guides/lyric/quickstart",
+ icon: "document",
+ },
+ {
+ title: "API Reference",
+ description:
+ "Look up types for Core, React, Vue, and lyric utility packages.",
+ href: "/en/reference",
+ icon: "information",
+ },
+ {
+ title: "Playground",
+ description: "Import audio and lyrics to tune rendering in real time.",
+ href: "/en/playground",
+ icon: "puzzle",
+ },
+] as const;
+
+const topicLinks = [
+ { label: "Overview", href: "/en/guides/overview/intro" },
+ { label: "Ecosystem", href: "/en/guides/overview/eco" },
+ { label: "Contributing", href: "/en/contribute" },
+] as const;
+---
+
+
+
+
+
+
+
{amllCoreVersionLabel}
+
Apple Music-like Lyrics
+
+ Apple Music style word-by-word lyric rendering for the web, from UI
+ components to framework bindings and lyric format tooling.
+
+
+
+
+
+
+
Explore
+
Ready to get started?
+
+
+
+ {topicLinks.map((link) => (
+
+ {link.label}
+
+ ))}
+
+
diff --git a/amll-local/packages/docs/src/pages/index.astro b/amll-local/packages/docs/src/pages/index.astro
new file mode 100644
index 0000000..09f67a3
--- /dev/null
+++ b/amll-local/packages/docs/src/pages/index.astro
@@ -0,0 +1,105 @@
+---
+import { Icon } from "@astrojs/starlight/components";
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+import { AMLLPreview } from "../components/AMLLPreview";
+import "../styles/index.css";
+import { amllCoreVersionLabel } from "../utils/core-version";
+
+const entryLinks = [
+ {
+ title: "组件快速开始",
+ description: "把逐字歌词组件接入你的前端项目。",
+ href: "/guides/component/quickstart",
+ icon: "rocket",
+ },
+ {
+ title: "歌词处理",
+ description: "解析、生成和转换 LRC、TTML 等歌词格式。",
+ href: "/guides/lyric/quickstart",
+ icon: "document",
+ },
+ {
+ title: "API 参考",
+ description: "查看核心及其绑定、歌词工具包的类型文档。",
+ href: "/reference",
+ icon: "information",
+ },
+ {
+ title: "交互试验场",
+ description: "导入音频和歌词，实时调试播放器效果。",
+ href: "/playground",
+ icon: "puzzle",
+ },
+] as const;
+
+const topicLinks = [
+ { label: "项目介绍", href: "/guides/overview/intro" },
+ { label: "生态项目", href: "/guides/overview/eco" },
+ { label: "贡献指南", href: "/contribute" },
+] as const;
+---
+
+
+
+
+
+
+
{amllCoreVersionLabel}
+
Apple Music-like Lyrics
+
+ 面向网页的 Apple Music
+ 风格逐字歌词组件库，覆盖渲染组件、框架绑定和歌词格式处理。
+
+
+
+
+
+
+
+ {topicLinks.map((link) => (
+
+ {link.label}
+
+ ))}
+
+
diff --git a/amll-local/packages/docs/src/scripts/typedoc.ts b/amll-local/packages/docs/src/scripts/typedoc.ts
new file mode 100644
index 0000000..ef65cf8
--- /dev/null
+++ b/amll-local/packages/docs/src/scripts/typedoc.ts
@@ -0,0 +1,358 @@
+import { createHash } from "node:crypto";
+import { existsSync } from "node:fs";
+import { mkdir, readdir, readFile, stat, writeFile } from "node:fs/promises";
+import { dirname, extname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { Application, PageEvent, type TypeDocOptions } from "typedoc";
+import type {
+ PluginOptions as TypeDocPluginOptions,
+ MarkdownApplication,
+} from "typedoc-plugin-markdown";
+
+type TypeDocBaseOptions = TypeDocOptions & TypeDocPluginOptions;
+
+type TypeDocDocTarget = TypeDocBaseOptions & {
+ name: string;
+ packageRoot: string;
+ routeBase: string;
+ out: string;
+ tsconfig: string;
+};
+
+type TypeDocCache = {
+ version: number;
+ targetFingerprints: Record;
+};
+
+type LoggerLike = {
+ info: (message: string) => void;
+};
+
+const TYPE_DOC_CONFIG_BASE_OPTIONS: TypeDocBaseOptions = {
+ githubPages: false,
+ hideGenerator: true,
+ plugin: [
+ "typedoc-plugin-markdown",
+ "typedoc-plugin-mark-react-functional-components",
+ "typedoc-plugin-vue",
+ ],
+ readme: "none",
+ logLevel: "Warn",
+ parametersFormat: "table",
+ outputFileStrategy: "members",
+ flattenOutputFiles: true,
+ entryFileName: "index.md",
+ hidePageHeader: true,
+ hidePageTitle: true,
+ hideBreadcrumbs: true,
+ useCodeBlocks: true,
+ propertiesFormat: "table",
+ typeDeclarationFormat: "table",
+ useHTMLAnchors: true,
+};
+
+const DOCS_ROOT = resolve(fileURLToPath(new URL("../../", import.meta.url)));
+const TYPEDOC_CACHE_PATH = resolve(
+ DOCS_ROOT,
+ "node_modules/.cache/typedoc-generation-cache.json",
+);
+const TYPEDOC_CACHE_VERSION = 1;
+const TYPEDOC_CONFIG_SEED = "typedoc-config-v1";
+const TYPEDOC_FINGERPRINT_EXTENSIONS = new Set([
+ ".ts",
+ ".tsx",
+ ".mts",
+ ".cts",
+ ".js",
+ ".jsx",
+ ".mjs",
+ ".cjs",
+ ".vue",
+ ".json",
+]);
+
+async function pathExists(path: string): Promise {
+ try {
+ await stat(path);
+ return true;
+ } catch {
+ return false;
+ }
+}
+
+async function collectFingerprintFiles(root: string): Promise {
+ const files: string[] = [];
+
+ async function walk(dir: string): Promise {
+ const entries = await readdir(dir, { withFileTypes: true });
+ for (const entry of entries) {
+ if (entry.name === "node_modules" || entry.name === "dist") continue;
+ const fullPath = join(dir, entry.name);
+ if (entry.isDirectory()) {
+ await walk(fullPath);
+ continue;
+ }
+ if (!entry.isFile()) continue;
+ if (TYPEDOC_FINGERPRINT_EXTENSIONS.has(extname(entry.name))) {
+ files.push(fullPath);
+ }
+ }
+ }
+
+ if (existsSync(root)) {
+ await walk(root);
+ }
+
+ return files.sort();
+}
+
+async function calculateFilesFingerprint(files: string[]): Promise {
+ const hash = createHash("sha1");
+ for (const filePath of files) {
+ const fileStat = await stat(filePath);
+ const normalizedPath = filePath.replaceAll("\\", "/").toLowerCase();
+ hash.update(normalizedPath);
+ hash.update(":");
+ hash.update(String(fileStat.size));
+ hash.update(":");
+ hash.update(String(fileStat.mtimeMs));
+ hash.update("\n");
+ }
+ return hash.digest("hex");
+}
+
+async function runWithConcurrency(
+ limit: number,
+ items: T[],
+ worker: (item: T) => Promise,
+): Promise {
+ if (items.length === 0) return;
+ const workers = Array.from(
+ { length: Math.max(1, Math.min(limit, items.length)) },
+ async () => {
+ while (items.length > 0) {
+ const next = items.shift();
+ if (!next) return;
+ await worker(next);
+ }
+ },
+ );
+ await Promise.all(workers);
+}
+
+function convertTypeDocHrefToRoute(href: string, routeBase: string): string {
+ const trimmedHref = href.trim();
+ if (
+ trimmedHref.startsWith("#") ||
+ trimmedHref.startsWith("http://") ||
+ trimmedHref.startsWith("https://") ||
+ trimmedHref.startsWith("mailto:")
+ ) {
+ return href;
+ }
+
+ const [filePartRaw, hashPart] = trimmedHref.split("#", 2);
+ const filePart = filePartRaw.replace(/^\.?\//, "");
+ if (!filePart.toLowerCase().endsWith(".md")) return href;
+
+ const fileName = filePart.split("/").pop();
+ if (!fileName) return href;
+
+ const stem = fileName.replace(/\.md$/i, "");
+ const normalizedBase = routeBase.endsWith("/")
+ ? routeBase.slice(0, -1)
+ : routeBase;
+
+ if (stem.toLowerCase() === "index") {
+ return hashPart ? `${normalizedBase}#${hashPart}` : normalizedBase;
+ }
+
+ const slug = stem.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
+ const route = `${normalizedBase}/${slug}`;
+ return hashPart ? `${route}#${hashPart}` : route;
+}
+
+async function generateOneDoc(cfg: TypeDocDocTarget): Promise {
+ const {
+ routeBase,
+ name: _name,
+ packageRoot: _packageRoot,
+ ...typedocConfig
+ } = cfg;
+
+ const config: TypeDocBaseOptions = {
+ ...TYPE_DOC_CONFIG_BASE_OPTIONS,
+ ...typedocConfig,
+ };
+
+ const app = (await Application.bootstrapWithPlugins(
+ config,
+ )) as unknown as MarkdownApplication;
+
+ function generateFrontmatter(evt: PageEvent): void {
+ const content: string[] = ["---"];
+ if (evt.model.name.startsWith("@applemusic-like-lyrics/")) {
+ content.push('title: "索引"');
+ } else {
+ content.push(`title: "${evt.model.name}"`);
+ }
+ content.push(`pageKind: ${evt.pageKind}`);
+ content.push("editUrl: false");
+ content.push("---");
+ content.push("");
+
+ let docContent = evt.contents ?? "";
+ if (routeBase) {
+ docContent = docContent
+ .replace(/\]\(([^)\n]+)\)/g, (_raw, href) => {
+ const converted = convertTypeDocHrefToRoute(href, routeBase);
+ return `](${converted})`;
+ })
+ .replace(/href="([^"\n]+)"/g, (_raw, href) => {
+ const converted = convertTypeDocHrefToRoute(href, routeBase);
+ return `href="${converted}"`;
+ });
+ }
+
+ content.push(docContent);
+ evt.contents = content.join("\n");
+ }
+
+ app.renderer.on(PageEvent.END, generateFrontmatter);
+
+ const project = await app.convert();
+ if (project) {
+ await app.generateOutputs(project);
+ }
+}
+
+function getDocTargets(): TypeDocDocTarget[] {
+ return [
+ {
+ name: "core",
+ packageRoot: "../core",
+ entryPoints: ["../core/src/index.ts"],
+ tsconfig: "../core/tsconfig.json",
+ out: "./src/content/docs/reference/core",
+ routeBase: "/reference/core",
+ },
+ {
+ name: "react",
+ packageRoot: "../react",
+ entryPoints: ["../react/src/index.ts"],
+ tsconfig: "../react/tsconfig.json",
+ out: "./src/content/docs/reference/react",
+ routeBase: "/reference/react",
+ },
+ {
+ name: "vue",
+ packageRoot: "../vue",
+ entryPoints: ["../vue/src/index.ts"],
+ tsconfig: "../vue/tsconfig.json",
+ out: "./src/content/docs/reference/vue",
+ routeBase: "/reference/vue",
+ },
+ {
+ name: "react-full",
+ packageRoot: "../react-full",
+ entryPoints: ["../react-full/src/index.ts"],
+ tsconfig: "../react-full/tsconfig.json",
+ out: "./src/content/docs/reference/react-full",
+ routeBase: "/reference/react-full",
+ },
+ {
+ name: "lyric",
+ packageRoot: "../lyric",
+ entryPoints: ["../lyric/src/index.ts"],
+ tsconfig: "../lyric/tsconfig.json",
+ skipErrorChecking: true,
+ out: "./src/content/docs/reference/lyric",
+ routeBase: "/reference/lyric",
+ },
+ {
+ name: "ttml",
+ packageRoot: "../ttml",
+ entryPoints: ["../ttml/src/index.ts"],
+ tsconfig: "../ttml/tsconfig.json",
+ skipErrorChecking: true,
+ out: "./src/content/docs/reference/ttml",
+ routeBase: "/reference/ttml",
+ },
+ ];
+}
+
+async function readTypeDocCache(): Promise {
+ if (await pathExists(TYPEDOC_CACHE_PATH)) {
+ try {
+ const raw = await readFile(TYPEDOC_CACHE_PATH, "utf8");
+ const parsed = JSON.parse(raw) as TypeDocCache;
+ if (
+ parsed &&
+ parsed.version === TYPEDOC_CACHE_VERSION &&
+ typeof parsed.targetFingerprints === "object"
+ ) {
+ return parsed;
+ }
+ } catch {
+ // ignore cache parse errors
+ }
+ }
+ return { version: TYPEDOC_CACHE_VERSION, targetFingerprints: {} };
+}
+
+async function writeTypeDocCache(cache: TypeDocCache): Promise {
+ await mkdir(dirname(TYPEDOC_CACHE_PATH), { recursive: true });
+ await writeFile(TYPEDOC_CACHE_PATH, JSON.stringify(cache, null, 2), "utf8");
+}
+
+export async function generateTypedocDocs(logger?: LoggerLike): Promise {
+ const docTargets = getDocTargets();
+ const typedocCache = await readTypeDocCache();
+
+ const optionsFingerprint = createHash("sha1")
+ .update(JSON.stringify(TYPE_DOC_CONFIG_BASE_OPTIONS))
+ .update("\n")
+ .update(TYPEDOC_CONFIG_SEED)
+ .digest("hex");
+
+ const dirtyTargets: TypeDocDocTarget[] = [];
+ for (const target of docTargets) {
+ const packageRootAbs = resolve(DOCS_ROOT, target.packageRoot);
+ const srcFiles = await collectFingerprintFiles(join(packageRootAbs, "src"));
+ const tsconfigAbs = resolve(DOCS_ROOT, target.tsconfig);
+ const inputFiles = [...srcFiles, tsconfigAbs];
+ const sourceFingerprint = await calculateFilesFingerprint(inputFiles);
+ const targetFingerprint = createHash("sha1")
+ .update(optionsFingerprint)
+ .update("\n")
+ .update(sourceFingerprint)
+ .digest("hex");
+ const previousFingerprint = typedocCache.targetFingerprints[target.name];
+ const outIndex = resolve(DOCS_ROOT, target.out, "index.md");
+ const hasOutput = await pathExists(outIndex);
+
+ if (hasOutput && previousFingerprint === targetFingerprint) {
+ logger?.info(`Skipping typedoc (${target.name}): cache hit`);
+ continue;
+ }
+
+ typedocCache.targetFingerprints[target.name] = targetFingerprint;
+ dirtyTargets.push(target);
+ }
+
+ const concurrencyRaw = Number.parseInt(
+ process.env.TYPEDOC_CONCURRENCY ?? "2",
+ 10,
+ );
+ const concurrency = Number.isFinite(concurrencyRaw)
+ ? Math.max(1, concurrencyRaw)
+ : 2;
+
+ await runWithConcurrency(concurrency, dirtyTargets, async (target) => {
+ logger?.info(`Generating typedoc (${target.name})...`);
+ await generateOneDoc(target);
+ logger?.info(`Finished typedoc (${target.name})`);
+ });
+
+ await writeTypeDocCache(typedocCache);
+}
diff --git a/amll-local/packages/docs/src/styles/consts.css b/amll-local/packages/docs/src/styles/consts.css
new file mode 100644
index 0000000..1234175
--- /dev/null
+++ b/amll-local/packages/docs/src/styles/consts.css
@@ -0,0 +1,105 @@
+:root {
+ --amll-accent: #ff4545;
+ --amll-accent-strong: #d51d1d;
+ --amll-radius: 0.5rem;
+ --amll-nav-border: color-mix(in srgb, var(--sl-color-white) 9%, transparent);
+ --amll-soft-border: color-mix(
+ in srgb,
+ var(--sl-color-white) 12%,
+ transparent
+ );
+ --sl-content-width: 48rem;
+ --sl-sidebar-width: 18.25rem;
+ --sl-color-text: var(--sl-color-gray-1);
+ --amll-page-illumination: radial-gradient(
+ 49.63% 57.02% at 58.99% -7.2%,
+ #ff60601a 39.4%,
+ transparent 100%
+ );
+}
+
+:root[data-theme="light"] {
+ --sl-color-accent-high: #8f1010;
+ --sl-color-accent: var(--amll-accent);
+ --sl-color-accent-low: #ffe8e8;
+ --sl-color-text-accent: #cc2d1f;
+ --sl-color-text-invert: #fff7f7;
+ --sl-color-bg: #fffafa;
+ --sl-color-bg-nav: #fffcfc;
+ --sl-color-bg-sidebar: #fdfdfdc7;
+ --sl-color-bg-inline-code: #fff0f0;
+ --sl-color-bg-accent: var(--sl-color-accent);
+ --sl-color-hairline: #2d222014;
+ --sl-color-hairline-light: #2d222014;
+ --sl-color-hairline-shade: #2d21201a;
+ --sl-color-white: #171417;
+ --sl-color-gray-1: #252020;
+ --sl-color-gray-2: #423939;
+ --sl-color-gray-3: #6b6060;
+ --sl-color-gray-4: #998f8f;
+ --sl-color-gray-5: #d8d0d0;
+ --sl-color-gray-6: #f2eded;
+ --sl-color-gray-7: #faf7f7;
+ --sl-color-black: #fffdfd;
+ --amll-page-bg: white;
+ --amll-card-bg: #fffa;
+ --amll-surface: #f0eeee88;
+ --amll-surface-strong: #fffdfd;
+ --amll-surface-hover: #fbeff1;
+ --amll-muted-border: #2d20201f;
+ --amll-shadow-soft: 0 18px 48px #37181814;
+}
+
+:root[data-theme="dark"] {
+ --sl-color-accent-high: #ffa19a;
+ --sl-color-accent: #ff5754;
+ --sl-color-accent-low: #2c1515;
+ --sl-color-text-accent: #ff928e;
+ --sl-color-text-invert: #250808;
+ --sl-color-bg: #100d0d;
+ --sl-color-bg-nav: #100e0dd1;
+ --sl-color-bg-sidebar: #130f0fbd;
+ --sl-color-bg-inline-code: #211a18;
+ --sl-color-bg-accent: var(--sl-color-accent-high);
+ --sl-color-hairline: #ffffff14;
+ --sl-color-hairline-light: #ffffff17;
+ --sl-color-hairline-shade: #ffffff14;
+ --sl-color-white: #fff8fa;
+ --sl-color-gray-1: #efe4e4;
+ --sl-color-gray-2: #cbbcbc;
+ --sl-color-gray-3: #9a8d8d;
+ --sl-color-gray-4: #665b5b;
+ --sl-color-gray-5: #332929;
+ --sl-color-gray-6: #1d1717;
+ --sl-color-gray-7: #151111;
+ --sl-color-black: #100d0d;
+ --amll-page-bg: #100d0d;
+ --amll-card-bg: #ffffff0b;
+ --amll-surface: #ffffff0b;
+ --amll-surface-strong: #ffffff11;
+ --amll-surface-hover: #ffffff16;
+ --amll-muted-border: #ffffff1a;
+ --amll-shadow-soft: 0 18px 54px #00000057;
+}
+
+:root {
+ --sl-font:
+ "Inter", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ --sl-font-mono:
+ ui-monospace, "Jetbrains Mono", "Iosevka", "Menlo", "Monaco", "Consolas",
+ "Liberation Mono", "Courier New", monospace;
+}
+
+[lang]:where(:is(:lang(zh), :lang(ja), :lang(ko))) {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ li,
+ p {
+ line-break: strict;
+ }
+}
diff --git a/amll-local/packages/docs/src/styles/content.css b/amll-local/packages/docs/src/styles/content.css
new file mode 100644
index 0000000..169ec5f
--- /dev/null
+++ b/amll-local/packages/docs/src/styles/content.css
@@ -0,0 +1,132 @@
+.content-panel {
+ border-top-color: transparent;
+
+ h1 {
+ margin-top: 2rem;
+ }
+}
+
+.sl-markdown-content {
+ --sl-content-gap-y: 1.05rem;
+
+ :is(h1, h2, h3, h4):not(:where(.not-content *)) {
+ font-weight: 700;
+ }
+
+ a:not(:where(.not-content *)) {
+ border-radius: 0.16rem;
+ text-decoration-color: color-mix(in srgb, currentColor 46%, transparent);
+ text-underline-offset: 0.22em;
+ transition:
+ color 0.12s,
+ text-decoration-color 0.12s;
+ }
+
+ a:hover:not(:where(.not-content *)) {
+ text-decoration-color: currentColor;
+ }
+
+ code:not(:where(.not-content *)) {
+ border: 1px solid
+ color-mix(in srgb, var(--sl-color-text-accent) 14%, transparent);
+ border-radius: 0.28rem;
+ }
+
+ blockquote:not(:where(.not-content *)) {
+ border-inline-start: var(--sl-color-text-accent) solid 2px;
+ color: var(--sl-color-gray-2);
+ }
+
+ .expressive-code figure.frame,
+ starlight-file-tree {
+ background-color: var(--amll-surface);
+ border: 1px solid var(--amll-muted-border);
+ border-radius: 0.55rem;
+ overflow: hidden;
+ box-shadow: none;
+ }
+
+ .expressive-code figure.frame {
+ figcaption.header {
+ background-color: var(--amll-surface);
+ border: none;
+ &::before {
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ }
+ &::after {
+ border: none;
+ }
+ }
+ pre {
+ background: none;
+ border: none;
+ }
+ .copy button {
+ transition: none;
+ background: none;
+ &::before {
+ border: none;
+ }
+ &::after {
+ margin: 0.6rem;
+ }
+ div {
+ background: none;
+ }
+ }
+ }
+}
+
+.starlight-aside {
+ border: 1px solid
+ color-mix(in srgb, var(--sl-color-asides-text-accent) 35%, transparent);
+ border-inline-start-width: 3px;
+ border-radius: var(--amll-radius);
+}
+
+article.card {
+ border-color: var(--amll-muted-border);
+ border-radius: var(--amll-radius);
+ background: var(--amll-card-bg);
+ box-shadow: none;
+}
+
+.sl-link-card {
+ border-color: var(--amll-muted-border);
+ border-radius: var(--amll-radius);
+ background: var(--amll-card-bg);
+ box-shadow: none;
+ &:hover {
+ border-color: var(--amll-muted-border);
+ background: var(--amll-surface-hover);
+ }
+ .description {
+ line-height: var(--sl-line-height-headings);
+ }
+}
+
+.pagination-links a {
+ border-color: var(--amll-muted-border);
+ border-radius: var(--amll-radius);
+ background: none;
+ box-shadow: none;
+ padding: 1.25rem 1rem;
+ span {
+ display: flex;
+ flex-direction: column-reverse;
+ line-height: 1;
+ gap: 0.6rem;
+ color: var(--sl-color-gray-3);
+ font-size: var(--sl-text-sm);
+ .link-title {
+ color: var(--sl-color-text);
+ font-size: var(--sl-text-lg);
+ }
+ }
+ &:hover {
+ border-color: var(--amll-muted-border);
+ background: var(--amll-surface);
+ }
+}
diff --git a/amll-local/packages/docs/src/styles/frame.css b/amll-local/packages/docs/src/styles/frame.css
new file mode 100644
index 0000000..8b5e28e
--- /dev/null
+++ b/amll-local/packages/docs/src/styles/frame.css
@@ -0,0 +1,250 @@
+* {
+ scrollbar-color: var(--amll-muted-border) transparent;
+ scrollbar-width: thin;
+}
+
+body {
+ background: var(--amll-page-bg);
+}
+
+.main-frame {
+ &::before {
+ position: absolute;
+ inset: 0;
+ content: "";
+ z-index: -1;
+ background: var(--amll-page-illumination);
+ }
+}
+
+header.header,
+#starlight__mobile-toc {
+ backdrop-filter: blur(18px) saturate(150%);
+}
+
+header.header {
+ border-bottom: 1px solid var(--amll-nav-border);
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
+ @media (max-width: 72rem) {
+ background-color: var(--amll-page-bg);
+ }
+}
+
+.site-title {
+ gap: 0.65rem;
+ color: var(--sl-color-white);
+ font-size: var(--sl-text-lg);
+ img {
+ width: 2rem;
+ height: 2rem;
+ border-radius: 0.45rem;
+ filter: drop-shadow(0 8px 18px rgba(255, 69, 111, 0.2));
+ }
+}
+
+starlight-theme-select,
+starlight-lang-select {
+ label {
+ margin: 0 1em;
+ &:hover,
+ &:focus-within {
+ background: transparent;
+ &::before {
+ content: "";
+ position: absolute;
+ inset: 0 -1em;
+ border-radius: 999px;
+ border: 1px solid var(--amll-muted-border);
+ background-color: var(--amll-surface);
+ z-index: -1;
+ }
+ }
+ }
+ select {
+ outline: none;
+ }
+}
+
+@media (min-width: 800px) {
+ site-search {
+ button[data-open-modal] {
+ border-color: var(--amll-muted-border);
+ border-radius: 999px;
+ background: var(--amll-surface);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+
+ &:hover {
+ border-color: color-mix(
+ in srgb,
+ var(--sl-color-text-accent) 42%,
+ transparent
+ );
+ background: var(--amll-surface-hover);
+ }
+ }
+
+ button > kbd {
+ border: 1px solid var(--amll-muted-border);
+ background: color-mix(
+ in srgb,
+ var(--sl-color-bg-inline-code) 75%,
+ transparent
+ );
+ box-shadow: none;
+ margin-right: 0.5rem;
+ }
+ }
+}
+
+button[aria-controls="starlight__sidebar"] {
+ background: none;
+ box-shadow: none;
+ color: var(--sl-color-text);
+ transform: scale(1.3);
+}
+
+@media (min-width: 50rem) {
+ .sidebar-pane {
+ border-inline-end: 1px solid var(--amll-nav-border);
+ }
+}
+
+#starlight__sidebar .sidebar-content {
+ padding-top: 1.25rem;
+}
+
+.starlight-sidebar-topics {
+ background: var(--sl-color-black);
+ border: 1px solid var(--amll-muted-border);
+ padding: 0.2rem;
+ border-radius: 0.8rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.2rem;
+
+ li {
+ margin: 0;
+ }
+
+ .starlight-sidebar-topics-icon {
+ border-color: var(--amll-muted-border);
+ border-radius: 0.42rem;
+ background: color-mix(
+ in srgb,
+ var(--sl-color-bg-inline-code) 64%,
+ transparent
+ );
+ }
+
+ a {
+ border-radius: 0.6rem;
+ padding: 0.65rem 0.75rem;
+ color: var(--sl-color-gray-2);
+ border: 1px solid transparent;
+ line-height: 1;
+
+ .starlight-sidebar-topics-icon.starlight-sidebar-topics-icon {
+ background: transparent;
+ border: none;
+ color: inherit;
+ padding: 0;
+ svg {
+ width: 18px;
+ height: 18px;
+ }
+ }
+
+ &:hover,
+ &:focus-visible {
+ color: var(--sl-color-white);
+ background: var(--amll-surface);
+ border-color: var(--amll-muted-border);
+ }
+
+ &.starlight-sidebar-topics-current.starlight-sidebar-topics-current {
+ color: var(--sl-color-text-accent);
+ background: color-mix(
+ in srgb,
+ var(--sl-color-accent-low) 50%,
+ var(--amll-surface)
+ );
+ border-color: color-mix(
+ in srgb,
+ var(--sl-color-text-accent) 10%,
+ var(--amll-muted-border)
+ );
+ }
+ }
+ &::after {
+ content: unset;
+ }
+}
+
+#starlight__sidebar sl-sidebar-state-persist {
+ &::before {
+ content: "";
+ display: block;
+ height: 1px;
+ border-bottom: 1px solid var(--sl-color-hairline-light);
+ }
+
+ [aria-current="page"] {
+ &,
+ &:hover,
+ &:focus {
+ color: var(--sl-color-text-accent);
+ font-weight: bold;
+ background: var(--sl-color-accent-low);
+ }
+ }
+
+ summary,
+ a {
+ border-radius: 0.42rem;
+ &:hover {
+ background: var(--amll-surface);
+ }
+ ul.top-level & {
+ padding-block: 0.4em;
+ --sl-sidebar-item-padding-inline: 0.6em;
+ }
+ }
+}
+
+.right-sidebar {
+ border-inline-start-color: transparent;
+}
+.right-sidebar-panel {
+ padding-top: 3rem;
+ padding-left: 2rem;
+ h2 {
+ font-size: var(--sl-text-sm);
+ margin-bottom: 1rem;
+ }
+ a {
+ border-inline-start: 1px solid var(--amll-nav-border);
+ border-radius: 0;
+ padding-block: 0.5rem;
+ padding-inline-start: calc(1rem + var(--depth) * 0.7rem);
+ position: relative;
+ line-height: 1;
+ &:hover {
+ color: var(--sl-color-text);
+ }
+ &[aria-current="true"] {
+ color: var(--sl-color-text);
+ &::before {
+ content: "";
+ position: absolute;
+ left: -1px;
+ top: 0;
+ bottom: 0;
+ width: 2px;
+ height: 1.2rem;
+ margin: auto 0;
+ border-radius: 3px;
+ background-color: var(--sl-color-text-accent);
+ }
+ }
+ }
+}
diff --git a/amll-local/packages/docs/src/styles/index.css b/amll-local/packages/docs/src/styles/index.css
new file mode 100644
index 0000000..8df44bc
--- /dev/null
+++ b/amll-local/packages/docs/src/styles/index.css
@@ -0,0 +1,335 @@
+/** biome-ignore-all lint/style/noDescendingSpecificity: Override starlight */
+
+.sl-markdown-content {
+ --sl-content-gap-y: 0;
+}
+
+:root[data-theme="light"] {
+ --home-lyric-color: #151316;
+ --home-hero-shade: rgba(255, 250, 252, 0.78);
+ --home-hero-text: #151316;
+ --home-hero-muted: #5e535b;
+ --home-preview-opacity: 0.3;
+}
+
+:root[data-theme="dark"] {
+ --home-lyric-color: #fff8fa;
+ --home-hero-shade: rgba(15, 13, 16, 0.72);
+ --home-hero-text: #fff8fa;
+ --home-hero-muted: #d1c4cb;
+ --home-preview-opacity: 0.3;
+}
+
+.content-panel:first-child {
+ display: none;
+}
+
+.content-panel {
+ padding-top: 0;
+}
+
+.amll-lyric-player {
+ pointer-events: none;
+ --amll-lp-font-size: 2.2rem;
+ --amll-lp-color: var(--home-lyric-color);
+ [class*="_lyricMainLine"] {
+ font-weight: 600;
+ }
+ [class*="_emphasizeWrapper"] span {
+ padding: 1em;
+ margin: -1em;
+ }
+}
+
+.home-shell {
+ width: 100%;
+ overflow: visible;
+}
+
+.home-hero {
+ position: relative;
+ display: grid;
+ align-items: end;
+ width: 100vw;
+ min-height: 36rem;
+ margin-inline: calc(50% - 50vw);
+ padding-block: 4rem 5.5rem;
+ padding-inline: max(var(--sl-content-pad-x), calc((100vw - 68rem) / 2));
+ box-sizing: border-box;
+ isolation: isolate;
+
+ &::after {
+ content: "";
+ position: absolute;
+ inset: auto 0 0;
+ height: 25rem;
+ background: linear-gradient(to bottom, transparent, var(--amll-page-bg));
+ z-index: -1;
+ }
+}
+
+.home-preview {
+ position: absolute;
+ inset: 0;
+ z-index: -2;
+ opacity: var(--home-preview-opacity);
+ max-width: 1600px;
+ margin: 0 auto;
+}
+
+.home-hero-copy {
+ position: relative;
+ z-index: 1;
+ margin-inline: 2rem;
+ color: var(--home-hero-text);
+}
+
+h1#home-title {
+ margin-top: 1rem;
+}
+
+.home-eyebrow {
+ margin: 0 0 0.5rem;
+ color: var(--sl-color-text-accent);
+ font-size: var(--sl-text-sm);
+ font-weight: 700;
+ line-height: 1;
+ .home-hero & {
+ width: fit-content;
+ padding: 0.4rem 0.5rem;
+ background-color: color-mix(
+ in srgb,
+ var(--sl-color-accent) 15%,
+ transparent
+ );
+ border-radius: 0.2rem;
+ }
+}
+
+.home-hero h1 {
+ margin: 0;
+ color: var(--home-hero-text);
+ font-size: 2.75rem;
+ font-weight: 700;
+ line-height: 0.98;
+ letter-spacing: 0;
+}
+
+.home-summary {
+ margin: 1.25rem 0 0;
+ color: var(--home-hero-muted);
+ font-size: var(--sl-text-lg);
+ line-height: 1.7;
+ text-wrap: balance;
+}
+
+.home-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ margin-top: 1.6rem;
+}
+
+.home-button.home-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.45rem;
+ min-height: 2.55rem;
+ padding: 0.55rem 0.9rem;
+ box-shadow:
+ 0 0 0 1px inset var(--amll-muted-border),
+ var(--amll-shadow-soft);
+ border-radius: 999px;
+ background: var(--amll-surface);
+ color: var(--sl-color-white);
+ font-weight: 700;
+ line-height: 1;
+ text-decoration: none;
+
+ &:hover {
+ border-color: color-mix(
+ in srgb,
+ var(--sl-color-text-accent) 44%,
+ transparent
+ );
+ background: var(--amll-surface-hover);
+ }
+
+ &.home-button-primary {
+ border: none;
+ color: white;
+ background: linear-gradient(
+ 135deg,
+ var(--sl-color-accent),
+ var(--amll-accent-strong)
+ );
+
+ &:hover {
+ filter: brightness(1.1);
+ }
+ }
+}
+
+.home-entry {
+ position: relative;
+ z-index: 1;
+ margin-top: -2.4rem;
+ padding: 0 var(--sl-content-pad-x) 2rem;
+}
+
+.home-section-heading {
+ display: grid;
+ gap: 0.25rem;
+ margin-bottom: 1rem;
+}
+
+.home-section-heading h2 {
+ margin: 0;
+ color: var(--sl-color-white);
+ font-size: var(--sl-text-2xl);
+ line-height: 1.15;
+}
+
+.home-card-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 0.8rem;
+}
+
+.home-card.home-card {
+ position: relative;
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: 0.9rem;
+ min-height: 6.25rem;
+ padding: 1rem;
+ border: 1px solid var(--amll-muted-border);
+ border-radius: var(--amll-radius);
+ background: var(--amll-card-bg);
+ color: var(--sl-color-white);
+ text-decoration: none;
+ box-shadow: var(--amll-shadow-soft);
+
+ &:hover {
+ background: var(--amll-surface-hover);
+ }
+}
+
+.home-card-icon {
+ display: grid;
+ place-items: center;
+ width: 2.25rem;
+ height: 2.25rem;
+ border: 1px solid
+ color-mix(in srgb, var(--sl-color-text-accent) 28%, transparent);
+ border-radius: 0.45rem;
+ background: var(--sl-color-accent-low);
+ color: var(--sl-color-text-accent);
+ svg {
+ /* biome-ignore lint/complexity/noImportantStyles: override starlight */
+ --sl-icon-size: 1.3rem !important;
+ }
+}
+
+.home-card-copy {
+ display: grid;
+ gap: 0.25rem;
+ min-width: 0;
+
+ strong {
+ font-size: var(--sl-text-lg);
+ line-height: 1.2;
+ }
+ span {
+ color: var(--sl-color-gray-3);
+ line-height: 1.5;
+ }
+}
+
+.home-card-arrow {
+ color: var(--sl-color-gray-3);
+ transition:
+ color 0.15s,
+ transform 0.15s;
+ /* biome-ignore lint/complexity/noImportantStyles: override starlight */
+ --sl-icon-size: 1.5rem !important;
+
+ .home-card:hover & {
+ color: var(--sl-color-text);
+ transform: translateX(0.15rem);
+ }
+}
+
+.home-topic-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.65rem;
+ padding: 0 var(--sl-content-pad-x) 4rem;
+
+ a[href] {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid transparent;
+ border-radius: 999px;
+ color: var(--sl-color-gray-2);
+ text-decoration: none;
+
+ &:hover {
+ border-color: var(--amll-muted-border);
+ background: var(--amll-surface);
+ color: var(--sl-color-white);
+ }
+ }
+}
+
+@media (min-width: 50rem) {
+ .amll-lyric-player {
+ --amll-lp-font-size: 3rem;
+ }
+ .home-hero {
+ min-height: 39rem;
+ padding-top: 5rem;
+ padding-bottom: 6rem;
+ }
+ .home-hero h1 {
+ font-size: 4rem;
+ }
+ .home-card-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (min-width: 72rem) {
+ .amll-lyric-player {
+ --amll-lp-font-size: 3.35rem;
+ }
+ .home-hero {
+ min-height: 42rem;
+ }
+}
+
+@media (max-width: 36rem) {
+ .home-hero {
+ min-height: 34rem;
+ padding-top: 3rem;
+ }
+ .home-preview {
+ opacity: 0.3;
+ }
+ .home-hero h1 {
+ font-size: 2.35rem;
+ }
+ .home-summary {
+ font-size: var(--sl-text-base);
+ }
+ .home-card.home-card {
+ grid-template-columns: 1fr auto;
+ }
+ .home-card-icon {
+ display: none;
+ }
+}
diff --git a/amll-local/packages/docs/src/utils/core-version.ts b/amll-local/packages/docs/src/utils/core-version.ts
new file mode 100644
index 0000000..af8c3ff
--- /dev/null
+++ b/amll-local/packages/docs/src/utils/core-version.ts
@@ -0,0 +1,26 @@
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const corePackageJsonPath = [
+ resolve(process.cwd(), "../core/package.json"),
+ resolve(process.cwd(), "packages/core/package.json"),
+].find((path) => existsSync(path));
+
+if (!corePackageJsonPath) {
+ throw new Error("Unable to locate packages/core/package.json.");
+}
+
+const corePackageJson = JSON.parse(
+ readFileSync(corePackageJsonPath, "utf-8"),
+) as {
+ version?: unknown;
+};
+
+if (typeof corePackageJson.version !== "string" || !corePackageJson.version) {
+ throw new Error(
+ `Expected ${corePackageJsonPath} to define a package version.`,
+ );
+}
+
+export const amllCoreVersion = corePackageJson.version;
+export const amllCoreVersionLabel = `AMLL Core v${amllCoreVersion}`;
diff --git a/amll-local/packages/docs/tsconfig.json b/amll-local/packages/docs/tsconfig.json
new file mode 100644
index 0000000..5b3105e
--- /dev/null
+++ b/amll-local/packages/docs/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "include": [".astro/types.d.ts", "src"],
+ "compilerOptions": {
+ "isolatedDeclarations": false,
+ "declaration": false,
+ "composite": false
+ }
+}
diff --git a/amll-local/packages/lyric/CHANGELOG.md b/amll-local/packages/lyric/CHANGELOG.md
new file mode 100644
index 0000000..fedcd09
--- /dev/null
+++ b/amll-local/packages/lyric/CHANGELOG.md
@@ -0,0 +1,51 @@
+## 1.0.1 (2026-05-17)
+
+### Patch Changes
+
+- **fix:** 更正 stringifyLrcA2 函数大小写错误 ([#535](https://github.com/amll-dev/applemusic-like-lyrics/pull/535))
+
+ 将 `stringifylrcA2` 更正为 `stringifyLrcA2`。我们保留了兼容旧版本拼写的接口，但其将在未来版本中移除。
+
+- **chore:** 更正 package.json 协议声明 ([#534](https://github.com/amll-dev/applemusic-like-lyrics/pull/534))
+
+ 仓库根目录的 LICENSE 文件为 AGPL v3.0 协议，但是 package.json 中的 `license` 字段为 `GPL-3.0`。经与原开发者确认，package.json 中的 `license` 字段有误。仓库与其所有产出的 npm 包均应为 AGPL v3 only 协议，SPDX: `AGPL-3.0-only`。因此，更正各包 `package.json` 的 `license` 字段为 `AGPL-3.0-only`。
+
+### Updated Dependencies
+
+- Updated `@applemusic-like-lyrics/ttml` to `1.0.1`
+
+### Contributors
+
+- Linho [@Linho1219](https://github.com/Linho1219)
+
+# 1.0.0 (2026-04-23)
+
+### Updated Dependencies
+
+- Updated `@applemusic-like-lyrics/ttml` to `1.0.0`
+
+## 1.0.0-alpha.0 (2026-04-14)
+
+### Major Changes
+
+- **refactor:** 使用 TS 重写歌词正反解逻辑 ([56fd547c](https://github.com/amll-dev/applemusic-like-lyrics/commit/56fd547c))
+
+### Minor Changes
+
+- **refactor:** 重构 TTML 解析和生成器 ([#471](https://github.com/amll-dev/applemusic-like-lyrics/pull/471))
+
+### Patch Changes
+
+- **fix:** 修复接驳错误导致的 ttml 输出对象结构问题 ([3418d391](https://github.com/amll-dev/applemusic-like-lyrics/commit/3418d391))
+- **fix:** 修复 lyric 包函数导出名误修改 ([1a81fcd1](https://github.com/amll-dev/applemusic-like-lyrics/commit/1a81fcd1))
+- **fix:** 修复 lyric 包在 isolatedDeclarations 下的类型问题 ([d2060cd9](https://github.com/amll-dev/applemusic-like-lyrics/commit/d2060cd9))
+- **chore:** 更换工具链 ([#476](https://github.com/amll-dev/applemusic-like-lyrics/pull/476))
+
+### Updated Dependencies
+
+- Updated `@applemusic-like-lyrics/ttml` to `1.0.0-alpha.0`
+
+### Contributors
+
+- apoint123 [@apoint123](https://github.com/apoint123)
+- Linho [@Linho1219](https://github.com/Linho1219)
diff --git a/amll-local/packages/lyric/README-CN.md b/amll-local/packages/lyric/README-CN.md
new file mode 100644
index 0000000..64940ce
--- /dev/null
+++ b/amll-local/packages/lyric/README-CN.md
@@ -0,0 +1,70 @@
+# Lyric parser/writer for AMLL
+
+[English](./README.md) / 简体中文
+
+此为基于 TypeScript 的重构版本 Lyrics 包，文档未完成。
+
+以下是原文档：
+
+---
+
+> 警告：此为个人项目，且尚未完成开发，可能仍有大量问题，所以请勿直接用于生产环境！
+
+
+[](https://www.npmjs.com/package/@applemusic-like-lyrics/lyric)
+[](https://www.npmjs.com/package/@applemusic-like-lyrics/lyric)
+
+一个 AMLL 的歌词解析/生成模块，使用纯 TypeScript 编写。
+
+本模块由于只着重于歌词内容，所以会丢弃一切和歌词无关的信息，如需获取一个歌词文件中的详细信息（例如歌手）请考虑使用其他框架。
+
+歌词格式支持表：
+
+| 源格式＼目标格式 | 解析自身格式 | LyRiC 格式 `.lrc` | ESLyric 逐词歌词格式 `.lrc` | 网易云音乐逐词歌词格式 `.yrc` | QQ 音乐逐词歌词格式 `.qrc` | Lyricify Syllable 逐词歌词格式 `.lys` | TTML 歌词格式 `.ttml` | ASS 字幕格式 `.ass` |
+| ------------------------------------- | ------------ | ----------------- | --------------------------- | ----------------------------- | -------------------------- | ------------------------------------- | --------------------- | ------------------- |
+| LyRiC 格式 `.lrc` | ✅ | ／ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| ESLyric 逐词歌词格式 `.lrc` | ✅ | ✅ | ／ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| 网易云音乐逐词歌词格式 `.yrc` | ✅ | ✅ [^1] | ✅ [^1] | ／ | ✅ | ✅ | ✅ | ✅ |
+| QQ 音乐逐词歌词格式 `.qrc` | ✅ | ✅ [^1] | ✅ [^1] | ✅ | ／ | ✅ | ✅ | ✅ |
+| Lyricify Syllable 逐词歌词格式 `.lys` | ✅ | ✅ [^1] | ✅ [^1] | ✅ [^2] | ✅ [^2] | ／ | ✅ | ✅ |
+| TTML 歌词格式 `.ttml` | ✅ | ✅ [^1] | ✅ [^1] | ✅ [^2] | ✅ [^2] | ✅ [^3] | ／ | ✅ |
+| ASS 字幕格式 `.ass` | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ／ |
+
+[^1]: 会丢失逐词时间数据、演唱属性（背景人声，对唱人声）和 AMLL 元数据
+
+[^2]: 会丢失演唱属性（背景人声，对唱人声）和 AMLL 元数据
+
+[^3]: 会丢失 AMLL 元数据
+
+## 与 Core 歌词组件一起使用
+
+在和二者合用的时候，需要注意**两者的歌词行结构并不完全相同**，需要进行诸如（以 LyRiC 举例）下面的方式进行转换方可被歌词组件正确解析：
+
+```typescript
+import { parseLrc } from "@applemusic-like-lyrics/lyric";
+const lines = parseLrc("[00:00.00]test");
+const converted = lines.map((line, i, lines) => ({
+ words: [
+ {
+ word: line.words[0]?.word ?? "",
+ startTime: line.words[0]?.startTime ?? 0,
+ endTime: lines[i + 1]?.words?.[0]?.startTime ?? Infinity,
+ },
+ ],
+ startTime: line.words[0]?.startTime ?? 0,
+ endTime: lines[i + 1]?.words?.[0]?.startTime ?? Infinity,
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+}));
+// 此时就可以将 converted 传给 LyricPlayer 了
+```
+
+推荐使用 TypeScript，这样可以更方便地查错。
+
+## 构建
+
+```shell
+wasm-pack build --target bundler --release --scope applemusic-like-lyrics
+```
diff --git a/amll-local/packages/lyric/README.md b/amll-local/packages/lyric/README.md
new file mode 100644
index 0000000..2e5cffd
--- /dev/null
+++ b/amll-local/packages/lyric/README.md
@@ -0,0 +1,70 @@
+# Lyric parser/writer for AMLL
+
+English / [简体中文](./README-CN.md)
+
+This is a refactored version of the original lyrics pack. Docs not finished yet.
+
+Below is the original docs.
+
+---
+
+> Warning: This is a personal project and is still under development. There may still be many issues, so please do not use it directly in production environments!
+
+
+[](https://www.npmjs.com/package/@applemusic-like-lyrics/lyric)
+[](https://www.npmjs.com/package/@applemusic-like-lyrics/lyric)
+
+A lyric parsing/generation module for AMLL, written entirely in TypeScript.
+
+Since this module focuses only on lyric content, it discards all information unrelated to lyrics. If you need to get detailed information from a lyric file (such as artist), please consider using other frameworks.
+
+Lyric format support table:
+
+| Source Format＼Target Format | Parse Own Format | LyRiC Format `.lrc` | ESLyric Word-by-word Format `.lrc` | NetEase Cloud Music Word-by-word Format `.yrc` | QQ Music Word-by-word Format `.qrc` | Lyricify Syllable Word-by-word Format `.lys` | TTML Lyric Format `.ttml` | ASS Subtitle Format `.ass` |
+| ---------------------------------------------- | ---------------- | ------------------- | ---------------------------------- | ---------------------------------------------- | ----------------------------------- | -------------------------------------------- | ------------------------- | -------------------------- |
+| LyRiC Format `.lrc` | ✅ | ／ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| ESLyric Word-by-word Format `.lrc` | ✅ | ✅ | ／ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| NetEase Cloud Music Word-by-word Format `.yrc` | ✅ | ✅ [^1] | ✅ [^1] | ／ | ✅ | ✅ | ✅ | ✅ |
+| QQ Music Word-by-word Format `.qrc` | ✅ | ✅ [^1] | ✅ [^1] | ✅ | ／ | ✅ | ✅ | ✅ |
+| Lyricify Syllable Word-by-word Format `.lys` | ✅ | ✅ [^1] | ✅ [^1] | ✅ [^2] | ✅ [^2] | ／ | ✅ | ✅ |
+| TTML Lyric Format `.ttml` | ✅ | ✅ [^1] | ✅ [^1] | ✅ [^2] | ✅ [^2] | ✅ [^3] | ／ | ✅ |
+| ASS Subtitle Format `.ass` | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ／ |
+
+[^1]: Will lose word-by-word timing data, vocal attributes (background vocals, duet vocals) and AMLL metadata
+
+[^2]: Will lose vocal attributes (background vocals, duet vocals) and AMLL metadata
+
+[^3]: Will lose AMLL metadata
+
+## Using with Core Lyric Component
+
+When using them together, note that **the lyric line structures of the two are not exactly the same**. You need to convert them in a way like the following example (using LyRiC as an example) for the lyric component to parse correctly:
+
+```typescript
+import { parseLrc } from "@applemusic-like-lyrics/lyric";
+const lines = parseLrc("[00:00.00]test");
+const converted = lines.map((line, i, lines) => ({
+ words: [
+ {
+ word: line.words[0]?.word ?? "",
+ startTime: line.words[0]?.startTime ?? 0,
+ endTime: lines[i + 1]?.words?.[0]?.startTime ?? Infinity,
+ },
+ ],
+ startTime: line.words[0]?.startTime ?? 0,
+ endTime: lines[i + 1]?.words?.[0]?.startTime ?? Infinity,
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+}));
+// Now you can pass converted to LyricPlayer
+```
+
+Using TypeScript is recommended as it makes it easier to detect errors.
+
+## Building
+
+```shell
+wasm-pack build --target bundler --release --scope applemusic-like-lyrics
+```
diff --git a/amll-local/packages/lyric/package.json b/amll-local/packages/lyric/package.json
new file mode 100644
index 0000000..69f325e
--- /dev/null
+++ b/amll-local/packages/lyric/package.json
@@ -0,0 +1,69 @@
+{
+ "name": "@applemusic-like-lyrics/lyric",
+ "version": "1.0.1",
+ "description": "一个歌词解析/生成模块，着重于歌词内容解析，支持多种格式",
+ "repository": {
+ "url": "https://github.com/amll-dev/applemusic-like-lyrics.git",
+ "directory": "packages/lyric",
+ "type": "git"
+ },
+ "license": "AGPL-3.0-only",
+ "nx": {
+ "tags": [
+ "library"
+ ],
+ "targets": {
+ "test": {
+ "executor": "nx:run-commands",
+ "options": {
+ "command": "vitest test",
+ "cwd": "packages/lyric"
+ }
+ },
+ "nx-release-publish": {
+ "executor": "@nx/js:release-publish",
+ "dependsOn": []
+ }
+ }
+ },
+ "type": "module",
+ "files": [
+ "dist"
+ ],
+ "main": "./dist/amll-lyric.cjs",
+ "module": "./dist/amll-lyric.mjs",
+ "types": "./dist/amll-lyric.d.mts",
+ "exports": {
+ "import": {
+ "types": "./dist/amll-lyric.d.mts",
+ "default": "./dist/amll-lyric.mjs"
+ },
+ "require": {
+ "types": "./dist/amll-lyric.d.cts",
+ "default": "./dist/amll-lyric.cjs"
+ }
+ },
+ "scripts": {
+ "build:docs": "typedoc --plugin typedoc-plugin-markdown --out docs src/index.ts",
+ "typecheck": "tsgo -b",
+ "build-only": "tsdown",
+ "build": "run-p typecheck \"build-only {@}\" --",
+ "build:dev": "tsdown",
+ "fmt": "biome format --write ./src",
+ "dev": "vite dev",
+ "test": "vitest test",
+ "test:watch": "vitest test --watch",
+ "test:coverage": "vitest test --coverage"
+ },
+ "devDependencies": {
+ "@biomejs/biome": "^2.4.8",
+ "@types/node": "^25.8.0",
+ "@types/pako": "^2.0.4",
+ "tsdown": "^0.22.0",
+ "vitest": "^4.1.6"
+ },
+ "dependencies": {
+ "@applemusic-like-lyrics/ttml": "file:../ttml",
+ "pako": "^2.1.0"
+ }
+}
diff --git a/amll-local/packages/lyric/src/formats/ass.ts b/amll-local/packages/lyric/src/formats/ass.ts
new file mode 100644
index 0000000..efb39f2
--- /dev/null
+++ b/amll-local/packages/lyric/src/formats/ass.ts
@@ -0,0 +1,109 @@
+/**
+ * @fileoverview ASS 字幕格式导出。
+ * 注意导出会损失 10ms 以内精度（按厘秒四舍五入）。
+ *
+ * 格式示例：
+ * Dialogue: 0,0:00:12.34, 0:00:15.67, Default, v1,0,0,0,,{\k20}Hello{\k15} world
+ * Dialogue: 0,0:00:12.34, 0:00:15.67, Default, v1-trans,0,0,0,,你好 世界
+ * Dialogue: 0,0:00:12.34, 0:00:15.67, Default, v1-roman,0,0,0,,ni hao shi jie
+ */
+import type { LyricLine } from "../types";
+import { normalizeTimestamp } from "../utils";
+
+function writeASSTimestamp(ms: number): string {
+ const normalized = normalizeTimestamp(ms);
+ const milli = Math.round(normalized) % 1000;
+ const secTotal = Math.floor(Math.round(normalized) / 1000);
+ const sec = secTotal % 60;
+ const minTotal = Math.floor(secTotal / 60);
+ const hour = Math.floor(minTotal / 60);
+ return `${hour}:${String(minTotal % 60).padStart(2, "0")}:${String(sec).padStart(2, "0")}.${String(Math.floor(milli / 10)).padStart(2, "0")}`;
+}
+
+function getSpeakerName(line: LyricLine): string {
+ let name = line.isDuet ? "v2" : "v1";
+ if (line.isBG) name += "-bg";
+ return name;
+}
+
+function writeLyricDialogue(
+ result: string[],
+ startTime: number,
+ endTime: number,
+ name: string,
+ text: string,
+) {
+ result.push(
+ `Dialogue: 0,${writeASSTimestamp(startTime)}, ${writeASSTimestamp(endTime)}, Default, ${name},0,0,0,,${text}`,
+ );
+}
+
+/**
+ * 将歌词数组转换为 ASS 字幕格式字符串
+ * @param lines 歌词数组
+ * @returns ASS 字幕格式字符串
+ */
+export function stringifyAss(lines: LyricLine[]): string {
+ const result: string[] = [
+ "[Script Info]",
+ "[Events]",
+ "Formats: Marked, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text",
+ ];
+
+ for (const line of lines) {
+ const timedWords = line.words
+ .map((w) => ({
+ ...w,
+ startTime: normalizeTimestamp(w.startTime),
+ endTime: normalizeTimestamp(w.endTime),
+ }))
+ .filter((w) => w.endTime > w.startTime);
+ const startTime = Math.min(...timedWords.map((w) => w.startTime));
+ const endTime = Math.max(...timedWords.map((w) => w.endTime));
+ if (!Number.isFinite(startTime) || !Number.isFinite(endTime)) continue;
+
+ let lyricText = "";
+ let previousWordEndTime = startTime;
+ for (const word of line.words) {
+ const wordStart = normalizeTimestamp(word.startTime);
+ const wordEnd = normalizeTimestamp(word.endTime);
+ if (wordStart >= wordEnd) {
+ lyricText += word.word;
+ continue;
+ }
+
+ if (wordStart > previousWordEndTime) {
+ const gapDurationCS = Math.floor(
+ (wordStart - previousWordEndTime + 5) / 10,
+ );
+ if (gapDurationCS > 0) lyricText += `{\\k${gapDurationCS}}`;
+ }
+
+ const wordDurationCS = Math.floor((wordEnd - wordStart + 5) / 10);
+ if (wordDurationCS > 0) lyricText += `{\\k${wordDurationCS}}`;
+ lyricText += word.word;
+ previousWordEndTime = wordEnd;
+ }
+
+ const speaker = getSpeakerName(line);
+ writeLyricDialogue(result, startTime, endTime, speaker, lyricText);
+ if (line.translatedLyric)
+ writeLyricDialogue(
+ result,
+ startTime,
+ endTime,
+ `${speaker}-trans`,
+ line.translatedLyric,
+ );
+ if (line.romanLyric)
+ writeLyricDialogue(
+ result,
+ startTime,
+ endTime,
+ `${speaker}-roman`,
+ line.romanLyric,
+ );
+ }
+
+ return `${result.join("\n")}\n`;
+}
diff --git a/amll-local/packages/lyric/src/formats/eqrc/constants.ts b/amll-local/packages/lyric/src/formats/eqrc/constants.ts
new file mode 100644
index 0000000..eac4295
--- /dev/null
+++ b/amll-local/packages/lyric/src/formats/eqrc/constants.ts
@@ -0,0 +1,102 @@
+/**
+ * @internal
+ * @module constants
+ * @description
+ * 包含了所有 `custom_des` 模块所需的常量数据。
+ */
+
+// 解密使用的3个8字节的DES密钥
+export const KEY_1: Uint8Array = new TextEncoder().encode("!@#)(*$%");
+export const KEY_2: Uint8Array = new TextEncoder().encode("123ZXC!@");
+export const KEY_3: Uint8Array = new TextEncoder().encode("!@#)(NHL");
+
+// --- QQ 音乐使用的非标准 S 盒定义 ---
+
+const SBOX1: number[] = [
+ 14, 4, 13, 1, 2, 15, 11, 8, 3, 10, 6, 12, 5, 9, 0, 7, 0, 15, 7, 4, 14, 2, 13,
+ 1, 10, 6, 12, 11, 9, 5, 3, 8, 4, 1, 14, 8, 13, 6, 2, 11, 15, 12, 9, 7, 3, 10,
+ 5, 0, 15, 12, 8, 2, 4, 9, 1, 7, 5, 11, 3, 14, 10, 0, 6, 13,
+];
+const SBOX2: number[] = [
+ 15, 1, 8, 14, 6, 11, 3, 4, 9, 7, 2, 13, 12, 0, 5, 10, 3, 13, 4, 7, 15, 2, 8,
+ 15, 12, 0, 1, 10, 6, 9, 11, 5, 0, 14, 7, 11, 10, 4, 13, 1, 5, 8, 12, 6, 9, 3,
+ 2, 15, 13, 8, 10, 1, 3, 15, 4, 2, 11, 6, 7, 12, 0, 5, 14, 9,
+];
+const SBOX3: number[] = [
+ 10, 0, 9, 14, 6, 3, 15, 5, 1, 13, 12, 7, 11, 4, 2, 8, 13, 7, 0, 9, 3, 4, 6,
+ 10, 2, 8, 5, 14, 12, 11, 15, 1, 13, 6, 4, 9, 8, 15, 3, 0, 11, 1, 2, 12, 5, 10,
+ 14, 7, 1, 10, 13, 0, 6, 9, 8, 7, 4, 15, 14, 3, 11, 5, 2, 12,
+];
+const SBOX4: number[] = [
+ 7, 13, 14, 3, 0, 6, 9, 10, 1, 2, 8, 5, 11, 12, 4, 15, 13, 8, 11, 5, 6, 15, 0,
+ 3, 4, 7, 2, 12, 1, 10, 14, 9, 10, 6, 9, 0, 12, 11, 7, 13, 15, 1, 3, 14, 5, 2,
+ 8, 4, 3, 15, 0, 6, 10, 10, 13, 8, 9, 4, 5, 11, 12, 7, 2, 14,
+];
+const SBOX5: number[] = [
+ 2, 12, 4, 1, 7, 10, 11, 6, 8, 5, 3, 15, 13, 0, 14, 9, 14, 11, 2, 12, 4, 7, 13,
+ 1, 5, 0, 15, 10, 3, 9, 8, 6, 4, 2, 1, 11, 10, 13, 7, 8, 15, 9, 12, 5, 6, 3, 0,
+ 14, 11, 8, 12, 7, 1, 14, 2, 13, 6, 15, 0, 9, 10, 4, 5, 3,
+];
+const SBOX6: number[] = [
+ 12, 1, 10, 15, 9, 2, 6, 8, 0, 13, 3, 4, 14, 7, 5, 11, 10, 15, 4, 2, 7, 12, 9,
+ 5, 6, 1, 13, 14, 0, 11, 3, 8, 9, 14, 15, 5, 2, 8, 12, 3, 7, 0, 4, 10, 1, 13,
+ 11, 6, 4, 3, 2, 12, 9, 5, 15, 10, 11, 14, 1, 7, 6, 0, 8, 13,
+];
+const SBOX7: number[] = [
+ 4, 11, 2, 14, 15, 0, 8, 13, 3, 12, 9, 7, 5, 10, 6, 1, 13, 0, 11, 7, 4, 9, 1,
+ 10, 14, 3, 5, 12, 2, 15, 8, 6, 1, 4, 11, 13, 12, 3, 7, 14, 10, 15, 6, 8, 0, 5,
+ 9, 2, 6, 11, 13, 8, 1, 4, 10, 7, 9, 5, 0, 15, 14, 2, 3, 12,
+];
+const SBOX8: number[] = [
+ 13, 2, 8, 4, 6, 15, 11, 1, 10, 9, 3, 14, 5, 0, 12, 7, 1, 15, 13, 8, 10, 3, 7,
+ 4, 12, 5, 6, 11, 0, 14, 9, 2, 7, 11, 4, 1, 9, 12, 14, 2, 0, 6, 10, 13, 15, 3,
+ 5, 8, 2, 1, 14, 7, 4, 10, 8, 13, 15, 12, 9, 0, 3, 5, 6, 11,
+];
+
+export const S_BOXES: number[][] = [
+ SBOX1,
+ SBOX2,
+ SBOX3,
+ SBOX4,
+ SBOX5,
+ SBOX6,
+ SBOX7,
+ SBOX8,
+];
+
+// QQ 音乐使用的标准 P 盒置换规则
+export const P_BOX: number[] = [
+ 16, 7, 20, 21, 29, 12, 28, 17, 1, 15, 23, 26, 5, 18, 31, 10, 2, 8, 24, 14, 32,
+ 27, 3, 9, 19, 13, 30, 6, 22, 11, 4, 25,
+];
+
+/// QQ 音乐使用的标准扩展置换表。
+export const E_BOX_TABLE: number[] = [
+ 32, 1, 2, 3, 4, 5, 4, 5, 6, 7, 8, 9, 8, 9, 10, 11, 12, 13, 12, 13, 14, 15, 16,
+ 17, 16, 17, 18, 19, 20, 21, 20, 21, 22, 23, 24, 25, 24, 25, 26, 27, 28, 29,
+ 28, 29, 30, 31, 32, 1,
+];
+
+// 每轮循环左移的位数表
+export const KEY_RND_SHIFT: number[] = [
+ 1, 1, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 1,
+];
+
+// 置换选择1 (PC-1) - C部分
+export const KEY_PERM_C: number[] = [
+ 56, 48, 40, 32, 24, 16, 8, 0, 57, 49, 41, 33, 25, 17, 9, 1, 58, 50, 42, 34,
+ 26, 18, 10, 2, 59, 51, 43, 35,
+];
+
+// 置换选择1 (PC-1) - D部分
+export const KEY_PERM_D: number[] = [
+ 62, 54, 46, 38, 30, 22, 14, 6, 61, 53, 45, 37, 29, 21, 13, 5, 60, 52, 44, 36,
+ 28, 20, 12, 4, 27, 19, 11, 3,
+];
+
+// 置换选择2 (PC-2)
+export const KEY_COMPRESSION: number[] = [
+ 13, 16, 10, 23, 0, 4, 2, 27, 14, 5, 20, 9, 22, 18, 11, 3, 25, 7, 15, 6, 26,
+ 19, 12, 1, 40, 51, 30, 36, 46, 54, 29, 39, 50, 44, 32, 47, 43, 48, 38, 55, 33,
+ 52, 45, 41, 49, 35, 28, 31,
+];
diff --git a/amll-local/packages/lyric/src/formats/eqrc/custom-des.ts b/amll-local/packages/lyric/src/formats/eqrc/custom-des.ts
new file mode 100644
index 0000000..81e9a2d
--- /dev/null
+++ b/amll-local/packages/lyric/src/formats/eqrc/custom-des.ts
@@ -0,0 +1,363 @@
+/**
+ * @internal
+ * @module custom_des
+ * @description
+ * 本模块包含了为解密 QRC 歌词而移植的、非标准的类 DES 算法的底层实现。
+ *
+ *
+ * 警告：该 DES 实现并非标准实现！
+ *
+ *
+ * 它是结构类似DES的、但完全私有的分组密码算法。
+ * 本实现仅用于 QRC 歌词解密，不应用于实际安全目的。
+ */
+
+import {
+ E_BOX_TABLE,
+ KEY_COMPRESSION,
+ KEY_PERM_C,
+ KEY_PERM_D,
+ KEY_RND_SHIFT,
+ P_BOX,
+ S_BOXES,
+} from "./constants";
+
+export enum Mode {
+ Encrypt,
+ Decrypt,
+}
+
+export type KeySchedule = Int32Array;
+
+/**
+ * 从8字节密钥中根据置换表提取位，生成一个 BigInt。
+ *
+ * 这个函数对应原始C代码中的天书BITNUM宏，模拟 QQ 音乐特有的非标准的字节序处理方式。
+ * 其将 8 字节密钥视为两个独立的、小端序的32位整数拼接而成。
+ *
+ * 例如，要读取第0位（MSB），它实际访问的是 `key[3]` 的最高位。
+ * 要读取第31位，它访问的是 `key[0]` 的最低位。
+ *
+ * @param key 8字节的密钥 Uint8Array
+ * @param table 0-based 的位索引置换表
+ */
+function permuteFromKeyBytes(key: Uint8Array, table: number[]): bigint {
+ let output = 0n;
+ let currentBitMask = 1n << BigInt(table.length - 1);
+
+ for (let i = 0; i < table.length; i++) {
+ const pos = table[i];
+
+ const wordIndex = pos >> 5;
+ const bitInWord = pos & 31;
+ const byteInWord = bitInWord >> 3;
+ const bitInByte = bitInWord & 7;
+ const byteIndex = wordIndex * 4 + 3 - byteInWord;
+
+ const bit = (key[byteIndex] >> (7 - bitInByte)) & 1;
+
+ if (bit) {
+ output |= currentBitMask;
+ }
+ currentBitMask >>= 1n;
+ }
+ return output;
+}
+
+/**
+ * 对一个存储在 BigInt 中的28位密钥部分进行循环左移。
+ * @param value 包含28位数据的高位的 BigInt
+ * @param amount 左移的位数
+ */
+function rotateLeft28Bit(value: bigint, amount: number): bigint {
+ const BITS_28_MASK = 0xfffffff0n;
+ const val = value & BITS_28_MASK;
+ const shifted = (val << BigInt(amount)) | (val >> BigInt(28 - amount));
+ return shifted & BITS_28_MASK;
+}
+
+/**
+ * DES 密钥调度算法。
+ * 从一个64位的主密钥（实际使用56位，每字节的最低位是奇偶校验位，被忽略）
+ * 生成16个48位的轮密钥。
+ *
+ * @param key 8字节的DES密钥
+ * @param mode 加密或解密模式
+ */
+export function keySchedule(key: Uint8Array, mode: Mode): KeySchedule {
+ // 预先分配连续的内存空间
+ const schedule = new Int32Array(32);
+
+ // 应用 PC-1
+ const c0 = permuteFromKeyBytes(key, KEY_PERM_C);
+ const d0 = permuteFromKeyBytes(key, KEY_PERM_D);
+
+ // 将28位的结果左移4位，以匹配 `rotateLeft28Bit` 对高位对齐的期望。
+ let c = c0 << 4n;
+ let d = d0 << 4n;
+
+ for (let i = 0; i < 16; i++) {
+ const shift = KEY_RND_SHIFT[i];
+ c = rotateLeft28Bit(c, shift);
+ d = rotateLeft28Bit(d, shift);
+
+ const toGen = mode === Mode.Decrypt ? 15 - i : i;
+
+ let subkey48bit = 0n;
+ // 应用 PC-2
+ for (let k = 0; k < KEY_COMPRESSION.length; k++) {
+ const pos = KEY_COMPRESSION[k];
+
+ const bitBigInt =
+ pos < 28
+ ? (c >> BigInt(31 - pos)) & 1n
+ : (d >> BigInt(31 - (pos - 27))) & 1n; // QQ 音乐特有的怪癖，该算法的规则就是pos - 27
+
+ if (bitBigInt === 1n) {
+ subkey48bit |= 1n << BigInt(47 - k);
+ }
+ }
+
+ // 提取高 24 位 (由第 5, 4, 3 字节组成)
+ const b5 = Number((subkey48bit >> 40n) & 0xffn);
+ const b4 = Number((subkey48bit >> 32n) & 0xffn);
+ const b3 = Number((subkey48bit >> 24n) & 0xffn);
+ const high24 = (b5 << 16) | (b4 << 8) | b3;
+
+ // 提取低 24 位 (由第 2, 1, 0 字节组成)
+ const b2 = Number((subkey48bit >> 16n) & 0xffn);
+ const b1 = Number((subkey48bit >> 8n) & 0xffn);
+ const b0 = Number(subkey48bit & 0xffn);
+ const low24 = (b2 << 16) | (b1 << 8) | b0;
+
+ // 存储到一维数组中
+ schedule[toGen * 2] = high24;
+ schedule[toGen * 2 + 1] = low24;
+ }
+
+ return schedule;
+}
+
+// 初始置换规则。
+const IP_RULE: number[] = [
+ 34, 42, 50, 58, 2, 10, 18, 26, 36, 44, 52, 60, 4, 12, 20, 28, 38, 46, 54, 62,
+ 6, 14, 22, 30, 40, 48, 56, 64, 8, 16, 24, 32, 33, 41, 49, 57, 1, 9, 17, 25,
+ 35, 43, 51, 59, 3, 11, 19, 27, 37, 45, 53, 61, 5, 13, 21, 29, 39, 47, 55, 63,
+ 7, 15, 23, 31,
+];
+
+// 逆初始置换规则。
+const INV_IP_RULE: number[] = [
+ 37, 5, 45, 13, 53, 21, 61, 29, 38, 6, 46, 14, 54, 22, 62, 30, 39, 7, 47, 15,
+ 55, 23, 63, 31, 40, 8, 48, 16, 56, 24, 64, 32, 33, 1, 41, 9, 49, 17, 57, 25,
+ 34, 2, 42, 10, 50, 18, 58, 26, 35, 3, 43, 11, 51, 19, 59, 27, 36, 4, 44, 12,
+ 52, 20, 60, 28,
+];
+
+const IP_LEFT_TABLE = new Int32Array(2048);
+const IP_RIGHT_TABLE = new Int32Array(2048);
+const INV_IP_LEFT_TABLE = new Int32Array(2048);
+const INV_IP_RIGHT_TABLE = new Int32Array(2048);
+
+function generatePermutationTables(): void {
+ const applyPermutation = (input: bigint, rule: number[]): bigint => {
+ let output = 0n;
+ for (let i = 0; i < 64; i++) {
+ const srcBit1Based = rule[i];
+ if ((input >> BigInt(64 - srcBit1Based)) & 1n) {
+ output |= 1n << BigInt(63 - i);
+ }
+ }
+ return output;
+ };
+
+ // 生成 IP 结果查找表
+ for (let bytePos = 0; bytePos < 8; bytePos++) {
+ for (let byteVal = 0; byteVal < 256; byteVal++) {
+ const input = BigInt(byteVal) << BigInt(56 - bytePos * 8);
+ const permuted = applyPermutation(input, IP_RULE);
+ const idx = (bytePos << 8) | byteVal;
+ IP_LEFT_TABLE[idx] = Number((permuted >> 32n) & 0xffffffffn);
+ IP_RIGHT_TABLE[idx] = Number(permuted & 0xffffffffn);
+ }
+ }
+
+ // 生成 InvIP 结果查找表 (一维 TypedArray，分为左右 32 位以避免 BigInt)
+ for (let blockPos = 0; blockPos < 8; blockPos++) {
+ for (let blockVal = 0; blockVal < 256; blockVal++) {
+ const input = BigInt(blockVal) << BigInt(56 - blockPos * 8);
+ const permuted = applyPermutation(input, INV_IP_RULE);
+ const idx = (blockPos << 8) | blockVal;
+ INV_IP_LEFT_TABLE[idx] = Number((permuted >> 32n) & 0xffffffffn);
+ INV_IP_RIGHT_TABLE[idx] = Number(permuted & 0xffffffffn);
+ }
+ }
+}
+generatePermutationTables();
+
+/**
+ * 计算 DES S-盒的查找索引。
+ * @param a 一个包含6位数据的 u8
+ */
+function calculateSboxIndex(a: number): number {
+ return (a & 0x20) | ((a & 0x1f) >> 1) | ((a & 0x01) << 4);
+}
+
+/**
+ * 对一个 32 位整数应用非标准的 P 盒置换规则。
+ * @param input S-盒代换后的 32 位中间结果
+ */
+function applyQqPboxPermutation(input: number): number {
+ let output = 0;
+ for (let i = 0; i < 32; i++) {
+ const sourceBit1Based = P_BOX[i];
+ const destBitMask = 1 << (31 - i);
+ const sourceBitMask = 1 << (32 - sourceBit1Based);
+ if ((input & sourceBitMask) !== 0) {
+ output |= destBitMask;
+ }
+ }
+ return output;
+}
+
+const SP_TABLE = new Int32Array(512);
+
+/**
+ * 生成 S-P 盒合并查找表以提高性能。
+ */
+function generateSpTables(): void {
+ for (let sBoxIdx = 0; sBoxIdx < 8; sBoxIdx++) {
+ for (let sBoxInput = 0; sBoxInput < 64; sBoxInput++) {
+ const sBoxIndex = calculateSboxIndex(sBoxInput);
+ const fourBitOutput = S_BOXES[sBoxIdx][sBoxIndex];
+ const prePBoxVal = fourBitOutput << (28 - sBoxIdx * 4);
+ SP_TABLE[(sBoxIdx << 6) | sBoxInput] = applyQqPboxPermutation(prePBoxVal);
+ }
+ }
+}
+generateSpTables();
+
+const EBOX_HIGH_TABLE = new Int32Array(1024);
+const EBOX_LOW_TABLE = new Int32Array(1024);
+
+function generateEBoxTables(): void {
+ for (let chunkIdx = 0; chunkIdx < 4; chunkIdx++) {
+ const shiftIn32 = (3 - chunkIdx) * 8;
+
+ for (let byteVal = 0; byteVal < 256; byteVal++) {
+ let high24 = 0;
+ let low24 = 0;
+ const input = byteVal << shiftIn32;
+
+ for (let i = 0; i < 24; i++) {
+ const sourceBitPos = E_BOX_TABLE[i];
+ const bit = (input >>> (32 - sourceBitPos)) & 1;
+ if (bit) {
+ high24 |= 1 << (23 - i);
+ }
+ }
+
+ for (let i = 24; i < 48; i++) {
+ const sourceBitPos = E_BOX_TABLE[i];
+ const bit = (input >>> (32 - sourceBitPos)) & 1;
+ if (bit) {
+ low24 |= 1 << (47 - i);
+ }
+ }
+
+ const tableIdx = (chunkIdx << 8) | byteVal;
+ EBOX_HIGH_TABLE[tableIdx] = high24;
+ EBOX_LOW_TABLE[tableIdx] = low24;
+ }
+ }
+}
+generateEBoxTables();
+
+/**
+ * DES 的 F 函数。
+ */
+function fFunction(state: number, keyHigh24: number, keyLow24: number): number {
+ // 将 32 位状态拆分为 4 个字节，直接查表并进行按位或拼接
+ const b0 = (state >>> 24) & 0xff;
+ const b1 = (state >>> 16) & 0xff;
+ const b2 = (state >>> 8) & 0xff;
+ const b3 = state & 0xff;
+
+ const eboxHigh24 =
+ EBOX_HIGH_TABLE[b0] |
+ EBOX_HIGH_TABLE[256 | b1] |
+ EBOX_HIGH_TABLE[512 | b2] |
+ EBOX_HIGH_TABLE[768 | b3];
+ const eboxLow24 =
+ EBOX_LOW_TABLE[b0] |
+ EBOX_LOW_TABLE[256 | b1] |
+ EBOX_LOW_TABLE[512 | b2] |
+ EBOX_LOW_TABLE[768 | b3];
+
+ const xorHigh24 = eboxHigh24 ^ keyHigh24;
+ const xorLow24 = eboxLow24 ^ keyLow24;
+
+ return (
+ SP_TABLE[(xorHigh24 >>> 18) & 0x3f] |
+ SP_TABLE[64 | ((xorHigh24 >>> 12) & 0x3f)] |
+ SP_TABLE[128 | ((xorHigh24 >>> 6) & 0x3f)] |
+ SP_TABLE[192 | (xorHigh24 & 0x3f)] |
+ SP_TABLE[256 | ((xorLow24 >>> 18) & 0x3f)] |
+ SP_TABLE[320 | ((xorLow24 >>> 12) & 0x3f)] |
+ SP_TABLE[384 | ((xorLow24 >>> 6) & 0x3f)] |
+ SP_TABLE[448 | (xorLow24 & 0x3f)]
+ );
+}
+
+/**
+ * DES 加密/解密单个64位数据块。
+ *
+ * @param input 8字节的输入数据块 (明文或密文)。
+ * @param output 8字节的可变切片，用于存储输出数据块 (密文或明文)。
+ * @param keySchedule 一个包含16个轮密钥的向量的引用，每个轮密钥是6字节。
+ */
+export function desCrypt(
+ input: Uint8Array,
+ output: Uint8Array,
+ keySchedule: KeySchedule,
+): void {
+ let left = 0;
+ let right = 0;
+ for (let i = 0; i < 8; i++) {
+ const idx = (i << 8) | input[i];
+ left |= IP_LEFT_TABLE[idx];
+ right |= IP_RIGHT_TABLE[idx];
+ }
+
+ for (let i = 0; i < 15; i++) {
+ const temp = right;
+ right =
+ (left ^ fFunction(right, keySchedule[i * 2], keySchedule[i * 2 + 1])) >>>
+ 0;
+ left = temp;
+ }
+ left = (left ^ fFunction(right, keySchedule[30], keySchedule[31])) >>> 0;
+
+ let outLeft = 0;
+ let outRight = 0;
+ for (let i = 0; i < 4; i++) {
+ // 分别计算左侧 32 位和右侧 32 位在 INV_IP 阶段的表现
+ const idxL = (i << 8) | ((left >>> (24 - i * 8)) & 0xff);
+ outLeft |= INV_IP_LEFT_TABLE[idxL];
+ outRight |= INV_IP_RIGHT_TABLE[idxL];
+
+ const idxR = ((i + 4) << 8) | ((right >>> (24 - i * 8)) & 0xff);
+ outLeft |= INV_IP_LEFT_TABLE[idxR];
+ outRight |= INV_IP_RIGHT_TABLE[idxR];
+ }
+
+ // 使用按位移位进行输出数组写入
+ output[0] = (outLeft >>> 24) & 0xff;
+ output[1] = (outLeft >>> 16) & 0xff;
+ output[2] = (outLeft >>> 8) & 0xff;
+ output[3] = outLeft & 0xff;
+ output[4] = (outRight >>> 24) & 0xff;
+ output[5] = (outRight >>> 16) & 0xff;
+ output[6] = (outRight >>> 8) & 0xff;
+ output[7] = outRight & 0xff;
+}
diff --git a/amll-local/packages/lyric/src/formats/eqrc/index.ts b/amll-local/packages/lyric/src/formats/eqrc/index.ts
new file mode 100644
index 0000000..61e8509
--- /dev/null
+++ b/amll-local/packages/lyric/src/formats/eqrc/index.ts
@@ -0,0 +1,149 @@
+/**
+ * @module qrc-codec
+ * @description
+ * 此模块是加密与解密 QRC 歌词的核心。
+ * 提供了两个主要的公共函数：`decryptQrc` 和 `encryptQrc`。
+ *
+ * 非标准 3DES 算法实现由 `custom_des` 模块提供。
+ *
+ * 迁移自 https://github.com/apoint123/qrc-decoder
+ */
+
+import { deflate, inflate } from "pako";
+import { KEY_1, KEY_2, KEY_3 } from "./constants";
+import { desCrypt, type KeySchedule, keySchedule, Mode } from "./custom-des";
+import { hexToUint8Array, uint8ArrayToHex } from "./utils";
+
+const DES_BLOCK_SIZE = 8;
+
+/**
+ * 非标准 3DES 编解码器
+ */
+class QqMusicCodec {
+ private readonly encryptSchedule: KeySchedule[];
+ private readonly decryptSchedule: KeySchedule[];
+
+ constructor() {
+ // 解密流程 D(K3) -> E(K2) -> D(K1)
+ this.decryptSchedule = [
+ keySchedule(KEY_3, Mode.Decrypt),
+ keySchedule(KEY_2, Mode.Encrypt),
+ keySchedule(KEY_1, Mode.Decrypt),
+ ];
+
+ // 加密流程 E(K1) -> D(K2) -> E(K3)
+ this.encryptSchedule = [
+ keySchedule(KEY_1, Mode.Encrypt),
+ keySchedule(KEY_2, Mode.Decrypt),
+ keySchedule(KEY_3, Mode.Encrypt),
+ ];
+ }
+
+ /**
+ * 解密一个8字节的数据块。
+ */
+ public decryptBlock(input: Uint8Array, output: Uint8Array): void {
+ const temp1 = new Uint8Array(8);
+ const temp2 = new Uint8Array(8);
+ desCrypt(input, temp1, this.decryptSchedule[0]);
+ desCrypt(temp1, temp2, this.decryptSchedule[1]);
+ desCrypt(temp2, output, this.decryptSchedule[2]);
+ }
+
+ /**
+ * 加密一个8字节的数据块。
+ */
+ public encryptBlock(input: Uint8Array, output: Uint8Array): void {
+ const temp1 = new Uint8Array(8);
+ const temp2 = new Uint8Array(8);
+ desCrypt(input, temp1, this.encryptSchedule[0]);
+ desCrypt(temp1, temp2, this.encryptSchedule[1]);
+ desCrypt(temp2, output, this.encryptSchedule[2]);
+ }
+}
+
+const CODEC = new QqMusicCodec();
+
+/**
+ * 使用零字节对数据进行填充。
+ *
+ * QQ音乐使用的填充方案是零填充。
+ * @param data 需要填充的字节数据
+ * @param blockSize 块大小，对于DES来说是8
+ */
+function zeroPad(data: Uint8Array, blockSize: number): Uint8Array {
+ const paddingLen = (blockSize - (data.length % blockSize)) % blockSize;
+ if (paddingLen === 0) {
+ return data;
+ }
+
+ const paddedData = new Uint8Array(data.length + paddingLen);
+ paddedData.set(data, 0);
+ return paddedData;
+}
+
+/**
+ * 使用 Zlib 解压缩字节数据。
+ * 同时会尝试移除头部的 UTF-8 BOM (0xEF 0xBB 0xBF)。
+ */
+function decompress(data: Uint8Array): Uint8Array {
+ const decompressed = inflate(data);
+ if (
+ decompressed.length >= 3 &&
+ decompressed[0] === 0xef &&
+ decompressed[1] === 0xbb &&
+ decompressed[2] === 0xbf
+ ) {
+ return decompressed.slice(3);
+ }
+ return decompressed;
+}
+
+/**
+ * 解密十六进制字符串格式的 Qrc 歌词数据
+ * 解密后可去头尾 XML 数据后通过调用 `parseQrc` 解析歌词行
+ * @param encryptedHexString 十六进制格式的字符串，代表被加密的歌词数据
+ * @returns 被解密出来的歌词字符串，是前后有 XML 混合的 QRC 歌词
+ */
+export function decryptQrcHex(encryptedHexString: string): string {
+ const encryptedBytes = hexToUint8Array(encryptedHexString);
+
+ if (encryptedBytes.length % DES_BLOCK_SIZE !== 0) {
+ throw new Error(`加密数据长度不是${DES_BLOCK_SIZE}的倍数`);
+ }
+
+ const decryptedData = new Uint8Array(encryptedBytes.length);
+
+ for (let i = 0; i < encryptedBytes.length; i += DES_BLOCK_SIZE) {
+ const chunk = encryptedBytes.subarray(i, i + DES_BLOCK_SIZE);
+ const outChunk = decryptedData.subarray(i, i + DES_BLOCK_SIZE);
+ CODEC.decryptBlock(chunk, outChunk);
+ }
+
+ const decompressedBytes = decompress(decryptedData);
+
+ return new TextDecoder("utf-8").decode(decompressedBytes);
+}
+
+/**
+ * 对明文执行加密操作。
+ * @param plaintext 明文字符串
+ * @returns 十六进制格式的字符串，代表被加密的歌词数据
+ */
+export function encryptQrcHex(plaintext: string): string {
+ const textBytes = new TextEncoder().encode(plaintext);
+
+ const compressedData = deflate(textBytes);
+
+ const paddedData = zeroPad(compressedData, DES_BLOCK_SIZE);
+
+ const encryptedData = new Uint8Array(paddedData.length);
+
+ for (let i = 0; i < paddedData.length; i += DES_BLOCK_SIZE) {
+ const chunk = paddedData.subarray(i, i + DES_BLOCK_SIZE);
+ const outChunk = encryptedData.subarray(i, i + DES_BLOCK_SIZE);
+ CODEC.encryptBlock(chunk, outChunk);
+ }
+
+ return uint8ArrayToHex(encryptedData);
+}
diff --git a/amll-local/packages/lyric/src/formats/eqrc/utils.ts b/amll-local/packages/lyric/src/formats/eqrc/utils.ts
new file mode 100644
index 0000000..2c41183
--- /dev/null
+++ b/amll-local/packages/lyric/src/formats/eqrc/utils.ts
@@ -0,0 +1,39 @@
+///
+): ReturnType {
+ return stringifyLrcA2(...args);
+}
+
+export type { LyricLine, LyricWord, TTMLLyric } from "./types";
diff --git a/amll-local/packages/lyric/src/types.ts b/amll-local/packages/lyric/src/types.ts
new file mode 100644
index 0000000..8f1070c
--- /dev/null
+++ b/amll-local/packages/lyric/src/types.ts
@@ -0,0 +1,69 @@
+/**
+ * 一个歌词单词
+ */
+export interface LyricWord {
+ /** 单词的起始时间 */
+ startTime: number;
+ /** 单词的结束时间 */
+ endTime: number;
+ /** 单词 */
+ word: string;
+ /** 单词的音译 */
+ romanWord?: string;
+}
+
+/**
+ * 一行歌词，存储多个单词
+ * 如果是 LyRiC 等只能表达一行歌词的格式，则会将整行当做一个单词存储起来
+ */
+export interface LyricLine {
+ /**
+ * 该行的所有单词
+ * 如果是 LyRiC 等只能表达一行歌词的格式，这里就只会有一个单词
+ */
+ words: LyricWord[];
+ /**
+ * 该行的翻译
+ */
+ translatedLyric: string;
+ /**
+ * 该行的音译
+ */
+ romanLyric: string;
+ /**
+ * 该行是否为背景歌词行
+ * 此选项只有作为 Lyricify Syllable 文件格式导入导出时才有意义
+ */
+ isBG: boolean;
+ /**
+ * 该行是否为对唱歌词行（即歌词行靠右对齐）
+ * 此选项只有作为 Lyricify Syllable 文件格式导入导出时才有意义
+ */
+ isDuet: boolean;
+ /**
+ * 该行的开始时间
+ *
+ * **并不总是等于第一个单词的开始时间**
+ */
+ startTime: number;
+ /**
+ * 该行的结束时间
+ *
+ * **并不总是等于最后一个单词的开始时间**
+ */
+ endTime: number;
+}
+
+/**
+ * 一个 TTML 歌词行对象，存储了歌词行信息和 AMLL 元数据信息
+ */
+export interface TTMLLyric {
+ /**
+ * TTML 中存储的歌词行信息
+ */
+ lines: LyricLine[];
+ /**
+ * 一个元数据表，以 `[键, 值数组]` 的形式存储
+ */
+ metadata: [string, string[]][];
+}
diff --git a/amll-local/packages/lyric/src/utils.ts b/amll-local/packages/lyric/src/utils.ts
new file mode 100644
index 0000000..1a8a3e1
--- /dev/null
+++ b/amll-local/packages/lyric/src/utils.ts
@@ -0,0 +1,75 @@
+import type { LyricLine, LyricWord } from "./types";
+
+export const createLine = (line: Partial): LyricLine => ({
+ words: [],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ startTime: 0,
+ endTime: 0,
+ ...line,
+});
+
+export const createWord = (word: Partial): LyricWord => ({
+ startTime: 0,
+ endTime: 0,
+ word: "",
+ ...word,
+});
+
+export const parseTime = (time: string): number =>
+ Math.round(
+ time
+ .split(":")
+ .map(Number)
+ .reverse()
+ .reduce((acc, cur, idx) => acc + cur * 60 ** idx, 0) * 1000,
+ );
+
+export const formatTime = (ms: number): string => {
+ const min = Math.floor(ms / 60000)
+ .toString()
+ .padStart(2, "0");
+ const sec = Math.floor((ms % 60000) / 1000)
+ .toString()
+ .padStart(2, "0");
+ const msPart = Math.round(ms % 1000)
+ .toString()
+ .padStart(3, "0");
+ return `${min}:${sec}.${msPart}`;
+};
+
+export const normalizeTimestamp = (ms: number): number => {
+ if (!Number.isFinite(ms) || ms < 0) return 0;
+ return ms;
+};
+
+export const normalizeDuration = (duration: number): number => {
+ if (!Number.isFinite(duration) || duration < 0) return 0;
+ return duration;
+};
+
+export const MAX_LRC_TIMESTAMP = 60_039_999; // 999:99.999
+
+export const clampTimestamp = (
+ ms: number,
+ max: number = MAX_LRC_TIMESTAMP,
+): number => Math.min(max, normalizeTimestamp(ms));
+
+/**
+ * Returns consecutive pairs from the given iterable.
+ *
+ * Example: `0, 1, 2, 3` -> `[0, 1], [1, 2], [2, 3]`
+ */
+export function* pairwise(
+ iterable: Iterable,
+): Generator<[T, T], void, unknown> {
+ let prev: T | undefined;
+ let hasPrev = false;
+ for (const curr of iterable) {
+ if (hasPrev) yield [prev as T, curr];
+ prev = curr;
+ hasPrev = true;
+ }
+}
diff --git a/amll-local/packages/lyric/test/ass.test.ts b/amll-local/packages/lyric/test/ass.test.ts
new file mode 100644
index 0000000..091496b
--- /dev/null
+++ b/amll-local/packages/lyric/test/ass.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from "vitest";
+import { stringifyAss } from "../src/formats/ass";
+
+describe("ass", () => {
+ it("stringifies basic timed words into dialogue with k tags", () => {
+ const result = stringifyAss([
+ {
+ startTime: 0,
+ endTime: 0,
+ words: [
+ { startTime: 1000, endTime: 1200, word: "Hello", romanWord: "" },
+ { startTime: 0, endTime: 0, word: " ", romanWord: "" },
+ { startTime: 1300, endTime: 1500, word: "World", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe(
+ "[Script Info]\n[Events]\nFormats: Marked, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text\nDialogue: 0,0:00:01.00, 0:00:01.50, Default, v1,0,0,0,,{\\k20}Hello {\\k10}{\\k20}World\n",
+ );
+ });
+
+ it("stringifies duet/bg speaker and trans/roman lines", () => {
+ const result = stringifyAss([
+ {
+ startTime: 0,
+ endTime: 0,
+ words: [
+ { startTime: 1000, endTime: 1500, word: "Hello", romanWord: "" },
+ ],
+ translatedLyric: "你好",
+ romanLyric: "ni hao",
+ isBG: true,
+ isDuet: true,
+ },
+ ]);
+
+ expect(result).toContain(
+ "Dialogue: 0,0:00:01.00, 0:00:01.50, Default, v2-bg,0,0,0,,{\\k50}Hello",
+ );
+ expect(result).toContain(
+ "Dialogue: 0,0:00:01.00, 0:00:01.50, Default, v2-bg-trans,0,0,0,,你好",
+ );
+ expect(result).toContain(
+ "Dialogue: 0,0:00:01.00, 0:00:01.50, Default, v2-bg-roman,0,0,0,,ni hao",
+ );
+ });
+
+ it("skips lines without any valid timed words", () => {
+ const result = stringifyAss([
+ {
+ startTime: 0,
+ endTime: 0,
+ words: [{ startTime: 0, endTime: 0, word: "NoTime", romanWord: "" }],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe(
+ "[Script Info]\n[Events]\nFormats: Marked, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text\n",
+ );
+ });
+
+ it("normalizes invalid timestamps when stringifying", () => {
+ const result = stringifyAss([
+ {
+ startTime: 0,
+ endTime: 0,
+ words: [
+ {
+ startTime: Number.NaN,
+ endTime: Number.POSITIVE_INFINITY,
+ word: "Bad",
+ romanWord: "",
+ },
+ { startTime: -1, endTime: 100, word: "Ok", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toContain(
+ "Dialogue: 0,0:00:00.00, 0:00:00.10, Default, v1,0,0,0,,Bad{\\k10}Ok",
+ );
+ });
+});
diff --git a/amll-local/packages/lyric/test/eqrc.hex b/amll-local/packages/lyric/test/eqrc.hex
new file mode 100644
index 0000000..9952fb3
--- /dev/null
+++ b/amll-local/packages/lyric/test/eqrc.hex
@@ -0,0 +1 @@
+76782DD2D2D02305BAD47017F2618CC5613974810544E844BE4D1B83CFB246AD03E593EF0A5946BC253527D85D29AA319B8ED03CFE295021A5069D9E31E738651CBA39A6B040538CC1DA3A5F4314109F3669F6E4999398B540BC91B0ED81BCB2BC59D6AD4DC6F968DDEF2BA95B1AF8CDE8D28C39B73C26E175CCD8CD0EC4F4D3D2BFD6DB8275668FA3AFCA4B468FA626AFAB16754CD8D47448A7F643E21BF0822CB3EF9EE01F64B5EC9FC4CF5AC013FE31BDE0C654B0D26C8D2DC44E07A45FDF07ED1DFA5CB5D5B03DB41F9E32DB218B2F7F09286B4AAFF42A86712D4B98BEDDD0D57227002EA453C0F1DEF24762EFBF4E398FA1D9472750CF7B469DDAF2B8B108A0D57C250FDA037FEC72C21DC70FC5C2B32DE3719BC8F75DB09C0CDB88C57DC410A728540629F4FA3A2A01DA439151C408250E96DEEDC0B7ED4D3B75BD4ABC5BC2917408B612ABD311967790A4D39BE4563E385AA1AFE23C762F68E629BC69B906AC4A6E9B732103132A3A5319C1DE2C5C3AAE7EF722080A23FEC4EB06134C926A97FC6C48B892555731CF6BADFF7AFDDD8DA1BFA5B4DD41D4D5830C38B54C7E75AC66C3B7C3367CAD9FA676BB25B142D5399909C77A48945808214DFAA9929CEB44DB6FAA0DA1186D5745A8356A94696BB83B344C9A284019F2336BC09D5A77E8C38A60A6D2236E86C3D2EDA90C2B7E91E6660BEB119B6144C8E56D020FD866263520CA4C10DC4169B3BF694FD86167294431041E91E74EECC02CF04C5E7AC6A700D9294E98EDB0B68DA234FF4C23AFEB67E6D9CF731733CCD7E2EAC70F0367C67CAF0EE95ABA6B0D8F623E98E78EA4A1F882900E63FA5436864E69F00BABD1ED9010D59BE88C40118154DCE5B8D6F5D8E7D2FB06563400ABCE4FF946557BC00B22C4C7593F328A5FDCE442A05F438015D172C0E9F56B8C8D97DEAF1DDD77518CCCB26865EFC23D48AF3CF828F5735EBB96F3FEFB526F6B83916958CAFAD4DCFFF40C3A5F2682B1D4D24033D5A88FB5E051D98540581B61B4642D9CD45C1583726ABE3FC8E160BABE053FC03C5E07E95A6ECB05BDD30DE7046CFC240FC38578CBD132BFD196F3E89203555CB8FC3870A3633D9728775BCACB9F5502E13349CFE57450919990EC9403B52BDD708DC8E064CEE9BE67EE9D07EE61E5650E721473C42875B80004B86750176B4A0683C4B240640B63AB583FEE83A2B9EA32309F6933AEA1E78975B14552AC2421F15F44F0860BAE515BE87EFBCFD27DB1ACD14EC835CAB8A27AA6C3F119BC2524AA6849D8E943D887901C652822B594134DDD019CD176B5200BB80BD7E45C1B30ACF59150F062D114D9FEB446508467F6F8906CBF30ACC8A2FB809D26BD2976A33162C0C9E23DB77F53D8B645D03129631CCA59A98BEE0467E2E9954D289CA4675776D57DC90FE494482DDD73376ABA47611E23FA72106C4320510041ECEA9120F0CAEC77F7BE1C4EF3E3CBA513F11AAB1E820E46CC7AD1A06928075EC9CDB1A4785883F21B67D6CD21B39177A7338B24A689C3690418969220794A7F8715724E920A15E2FD088D0DF6151F07916F2883AE3276AC2CCCAEA6B2B1C9654B78B8AB444DBF5A37B2FC19BFF8EADF2AE694F63836C1B00BF4A8774E45824BBF44D5C4ED2C4F6431F5D8856424525F83BF5B77DA31E6DD5C475CB860D0A8BB54D747E08448242647B236D9E87D7CAD201E22EA1BEBBE9294B5960A3E75E9847A8F4845708F5917214C2E008451C0AAA75535AD7DD59234ACDD129146A5258FEF477B730582213EF185621F0058243ACF0BD4B7138F553184ED3CEC676091E7EAE831E8C95A65D47B5A37A928C9FABEA9FA6A4F97CEBEF5066C9F418A9A31F075B4612FF820C901FACA543160DFD029B02D59EC48C771F7D685BDA7039EF02DA9198678C3E06BEC0A7672D275115C44991646035EAB4C2E4B5323B7657AC50E711D62AB3EA5ECD78B60158EAB0C164C82D314E26CD6469AB0BEE032F0FBBE3A3CD5F85497A7B193D05182EAE23AB515253B102CA7F2F0DF9DE21BF25AF34DB0772C427F03EC5067904D6D77A812B6F6A5C1F2248F362C41E419CB55C536246E9E49E702CC3EDAE7D70D683B05E01749E9B2B16C157A97CA9298CA2B55791093E5250DA6F36DBCD7C573A8E58E52ED11A12B38BD4512DBAF636D9241D6FA26BB853D259B8C4C8A41AB1603F1F367D4D7E4DEED339B1F6FE9C47A485602772B15BAE25EBED881A4ECF28327DC920C30B749527A0734482CF39851FFC9D331275262FC83E1492858AE4677A8CB80CD757BAEC25A97ED834142AF52F7289D34FE730B43C2A28CA9D93B7BFCA8FB79B665035188B07952957BE2E66BB85A9A319E0D27B3D0E9AE726213A6FC1F5B82D237669B0852DAA198CC38BFE75B1FD6B130546BFB2EB6172B4222C37B86B7427764A7C945868670186BE7B9A32C516B3DCF7432F405A70B90EE87FD1658ABD50D1037BCC8DF286D6DDC39B4E9228AF969057610722DDBAE559ACEFFC6B6CC00F503A27BCDF442EF77D79BFCC92101EA986866EEBFF3BA6C44ECFC0AA2BC1A14E20EBA58DC0CBBA3C1545D49526267865321FB1A07448C7E39A40E1E6BC5FB72860CD8B12BE10EAEBEBF6F0133FDA4CA2195E162D9367ED713F43851F8647D1665938D1B6FD4BF76E6955DDEDB2149C4127BF0BDD7CDEE2EAAF023432D33EB023D60E088CDB013F253FC6A1AC76DAD19948A4DE7C9FEB98941809B0F6183A78DCAFC8DED2635C441B415415FBEF121282756966A2C157C20B5689D139DF8DD367B68ED66E4C96726B14ABC98FA8E21F5BB30188BAEEC9947F0F072028AAEAA25DB5C0F4A4F4A922464A8422A9F167B5C5CD32CC2008D7ED4E005DC0D8032433088A019920BEAAF86E606A8256FD8170B2DFEFB5ECF8EDFC5B5A54F3391357025403828CAED8086807F140CC59A1B0EABE9B74E4579CEFEBD56881D4BAF5B1E53E070180011E583C22195128A0ABC8B2D95981370E298EA39C1A6B83A3D21EBBFFE4EBAB8DE595771B60FDB8704106112B26116E6C7F21A4551C172AB13812AE498B85B9F32CA9D6AE5DC9CE73331209D0C5E159296508089B1628867CB2882DE7E49680F17F57829478C682DACEE0C70B95E9BFCC95934F88DE5861FE5684E3D2189C8E71E5EC20A20BEF3755B8F5FC8D910B80FA9EF1393DED8289AD25C6B4EFC3B2DDB270BB16A26C92EF920DF2AF4F95B888D9B8597629B058BCC0CB87C3994B6BB2705B0072D6B8AE5D1B1A5AA64687651E9E27EDC3EF95E1FD55EB836A9BD74EC264F7496245C217899DBFE70F12C7CC2174031A7DCC51FE8B06BE0B508B59C793DBB21043850777B410921EDCCC0062926E418EAF76EA67AF847A2B58915019B72B99F71B92969D6385A780DD2A488124326E15D3E886AFA93A19CB39FF35123C1BF6524B5CB24A5FDF21A8E8F7B905BD18305DF6BD9DBFCBFCC605F0E8A1A2A6B9F493CC2AF2E13F70CA68C780E62C8BB394E530C68FD59D9B73348814049D80154C793C597775734A42991CD035CFD97460BB91A629845936B1B61F3AAABB69A0063B08A02574B13D61A89BB0156F3FAE006017B8BB0184EFDB7082AD2CFCFB68980CA14CA0E87F77124746FCBA4EA29EDF90548E56FC55C3C2156B35EE47AB9C280B9DCFEAB47A04ECAB3E457DA21718C626CD8B21C92962654D97E9CE10C638FB02481481EDD01572DCCBF327FB8A1E978B8B0EE456F718FEE6E5B6439B8E379DF485E62D2B5DAE427001D2E5BB831AE1CC176164937A966C509A616E853FE729DB6A536C069053505C195E423688DB35726506A0A60716A920C6EC7E9785C836248123327D9B3E7FD36F3CF5C774BA1D3239CD5296897E961242980468A2248A48A066354B2BF33F8ECEC1CBBC087EA051832585E67DC6D70CA83847A255B9C533D50CDB75676F0E38AFBA14A428A85D9E4FC3731706DE21989E96822A858BCA9B7948B6DF5F1263C832D247425E5A2E586B37F998DDFB7201007297DDFBCB177F9DC7D80773784E0A0F8F16F6FAF3C0BC35849DFC6ECC6197E170CBB52CB1CFFD9C142D9F9B2EE6975E6242BE633109986EF09CCB85D4BEE6E05B41A6077225182DD670B3589EA25B0068A31506FE06DB38DABDA44AC0EF7430475F455ABED8C81DDEC6135979ACFE0488E8985F3C0754651AA462A256F2AA469EF4A68DDA352C7914195FCCFF3E80618316B86AB79311DEB59C4A8B665CBA8CEA44603C56304761EF2E181124BEFDF68E661CA669A55B8A2E9118C5976E8EBFB4BC5DBCB11CF542C22A11E4BD3B5413DA570816DA280C78318103BCA762728D2BF5EC282D22C25DA688173CD5E7FCC41AFBDA4FB199337F12EEB2D89B64E35216393A95D51EE468AD950B9D9FA8B840E2497D974E5B4B315FF2413A44D4DD0127B14F491285CBAB7E4B707663B38934299BD8CE7773BB1EF7FD4082CEF4763BCFC8AA37F185680A4633A8D611BE26FAD189AD1BD86979FEEB52C5CA7F26444F03DCA21917995763E96C46104889D9B41EA9AE2D0AC7F90B43FBEF282D04AF67C2D0CF36769D35351E36E555F10ECDD4CA2D079B08084653D6593754413AD71C4668974D6E6A9A3C045A0EBD49929B94D12DBD50CAB93C24D72F259AE2571BE40EF88F1618B59EAFDBCEC79CA01797DBFC2F6A6B2A08A2140242236B76CBD2178694181F48A49A0F7B428F2EE420F8B4F62C0058F8AB3B8813A24E2A9A6E6C332CFD39F20156CA1F9C6C44DB262C62880713FE2319A82EA9439F0C1FE0504D5799AF425E9B1E5824099E61D8A84FEDD83DDB3163C920A2F88638466574AEA92AD353B00E92BEAE8678D181AF4FA52338FDCBF0CEC9A426EF4C1D9F2F4161DEDA380A800DB01884B25139AD7794C2A97CB8FBFC74099A1849D7E47A9FA71765CB3888009F4CD59D79C2923E1C32D076E1F4106D19D88737D2A4AA0BA5CE96939F73F5A3CC4AC6BBB412C3CE7441D2F421580D16BB454DFA2E4358419816448F8A7C6F092E2B9134DD8679AD6BAEEF239222F6C2D4387EAA1751AD5
\ No newline at end of file
diff --git a/amll-local/packages/lyric/test/eqrc.test.ts b/amll-local/packages/lyric/test/eqrc.test.ts
new file mode 100644
index 0000000..61b19e2
--- /dev/null
+++ b/amll-local/packages/lyric/test/eqrc.test.ts
@@ -0,0 +1,56 @@
+import { createHash } from "node:crypto";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+import { decryptQrcHex, encryptQrcHex } from "../src/formats/eqrc";
+import { parseQrc } from "../src/formats/qrc";
+
+function decodeXmlEntities(text: string): string {
+ return text
+ .replace(/</g, "<")
+ .replace(/>/g, ">")
+ .replace(/"/g, '"')
+ .replace(/'/g, "'")
+ .replace(/&/g, "&")
+ .replace(/
/g, "\n")
+ .replace(/
/g, "\r");
+}
+
+function extractQrcPayload(xmlLike: string): string {
+ const match = xmlLike.match(//);
+ if (match?.[1]) return match[1].trim();
+ const attrMatch = xmlLike.match(/LyricContent="([^"]*)"/);
+ if (!attrMatch?.[1]) return "";
+ return decodeXmlEntities(attrMatch[1]).trim();
+}
+
+describe("eqrc", () => {
+ it("decrypts rust sample hex with stable output", () => {
+ const hexPath = resolve(__dirname, "eqrc.hex");
+ const hex = readFileSync(hexPath, "utf8").trim();
+ const decrypted = decryptQrcHex(hex);
+ const sha256 = createHash("sha256").update(decrypted).digest("hex");
+ const qrcText = extractQrcPayload(decrypted);
+ const lines = parseQrc(qrcText);
+
+ expect(hex.length).toBe(7136);
+ expect(decrypted.length).toBe(7188);
+ expect(sha256).toBe(
+ "f3bf2f3b5af01e9f21c5fc49e5ed9ab59370faa530f62b60a38df1881ea31f6a",
+ );
+ expect(decrypted).toContain("");
+ expect(decrypted).toContain('');
+ expect(qrcText.length).toBeGreaterThan(0);
+ expect(lines.length).toBeGreaterThan(0);
+ });
+
+ it("keeps decrypt/encrypt/decrypt text stable for rust sample", () => {
+ const hexPath = resolve(__dirname, "eqrc.hex");
+ const hex = readFileSync(hexPath, "utf8").trim();
+ const decrypted = decryptQrcHex(hex);
+ const encryptedAgain = encryptQrcHex(decrypted);
+ const decryptedAgain = decryptQrcHex(encryptedAgain);
+
+ expect(decryptedAgain).toBe(decrypted);
+ });
+});
diff --git a/amll-local/packages/lyric/test/eslrc.test.ts b/amll-local/packages/lyric/test/eslrc.test.ts
new file mode 100644
index 0000000..bd7f580
--- /dev/null
+++ b/amll-local/packages/lyric/test/eslrc.test.ts
@@ -0,0 +1,112 @@
+import { describe, expect, it } from "vitest";
+import { parseEslrc, stringifyEslrc } from "../src/formats/eslrc";
+
+describe("eslrc", () => {
+ it("parses basic word-ended-timestamp lines", () => {
+ const lines = parseEslrc(
+ "[00:10.82]Test[00:10.97] Word[00:12.62]\n[00:12.62]Next[00:13.20] line[00:14.10]",
+ );
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(10820);
+ expect(lines[0].endTime).toBe(12620);
+ expect(lines[0].words[0].word).toBe("Test");
+ expect(lines[0].words[0].startTime).toBe(10820);
+ expect(lines[0].words[0].endTime).toBe(10970);
+ expect(lines[0].words[1].word).toBe(" Word");
+ expect(lines[0].words[1].startTime).toBe(10970);
+ expect(lines[0].words[1].endTime).toBe(12620);
+ });
+
+ it("handles CRLF and ignores malformed lines", () => {
+ const lines = parseEslrc(
+ "[00:10.82]Ok[00:11.00]\r\nno timestamp\r\n[00:12.00]Broken no end\r\n[00:12.00]AlsoBroken[invalid]\r\n[00:13.00]Fine[00:13.50]",
+ );
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].words.map((w) => w.word).join("")).toBe("Ok");
+ expect(lines[1].words.map((w) => w.word).join("")).toBe("Fine");
+ });
+
+ it("sorts parsed lines by first word timestamp", () => {
+ const lines = parseEslrc(
+ "[00:20.00]Second[00:21.00]\n[00:10.00]First[00:11.00]",
+ );
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].words.map((w) => w.word).join("")).toBe("First");
+ expect(lines[1].words.map((w) => w.word).join("")).toBe("Second");
+ });
+
+ it("clamps parsed timestamps to max lrc time", () => {
+ const lines = parseEslrc("[999:99.999]Max[1000:40.000]");
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].startTime).toBe(60039999);
+ expect(lines[0].endTime).toBe(60039999);
+ expect(lines[0].words[0].startTime).toBe(60039999);
+ expect(lines[0].words[0].endTime).toBe(60039999);
+ });
+
+ it("ignores empty lines and lines with only whitespace", () => {
+ const lines = parseEslrc(
+ "[00:01.000] \n[00:02.000]\n[00:10.82]Test[00:10.97] Word[00:12.62]\n \n[00:12.62]Next[00:13.20] line[00:14.10]\n \n",
+ );
+ expect(lines).toHaveLength(2);
+ expect(lines[0].words[0].word).toBe("Test");
+ expect(lines[1].words[0].word).toBe("Next");
+ });
+
+ it("stringifies to expected eslrc text", () => {
+ const result = stringifyEslrc([
+ {
+ startTime: 0,
+ endTime: 0,
+ words: [
+ { startTime: 10820, endTime: 10970, word: "Test", romanWord: "" },
+ { startTime: 10970, endTime: 12620, word: " Word", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[00:10.820]Test[00:10.970] Word[00:12.620]");
+ });
+
+ it("normalizes invalid timestamps when stringifying", () => {
+ const result = stringifyEslrc([
+ {
+ startTime: 0,
+ endTime: 0,
+ words: [
+ {
+ startTime: Number.NaN,
+ endTime: Number.POSITIVE_INFINITY,
+ word: "Hello",
+ romanWord: "",
+ },
+ { startTime: -1, endTime: -2, word: "World", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[00:00.000]Hello[00:00.000]World[00:00.000]");
+ });
+
+ it("keeps parse -> stringify -> parse stable for content and timing", () => {
+ const input =
+ "[00:10.82]Test[00:10.97] Word[00:12.62]\n[00:12.62]Next[00:13.20] line[00:14.10]";
+ const first = parseEslrc(input);
+ const text = stringifyEslrc(first);
+ const second = parseEslrc(text);
+
+ expect(second).toEqual(first);
+ });
+});
diff --git a/amll-local/packages/lyric/test/lrc.test.ts b/amll-local/packages/lyric/test/lrc.test.ts
new file mode 100644
index 0000000..13833f5
--- /dev/null
+++ b/amll-local/packages/lyric/test/lrc.test.ts
@@ -0,0 +1,201 @@
+import { describe, expect, it } from "vitest";
+import { parseLrc, stringifyLrc } from "../src/formats/lrc";
+import { MAX_LRC_TIMESTAMP } from "../src/utils";
+import { timeStampsTestCases } from "./timestampcase.fixture";
+
+describe("lrc", () => {
+ it("parses basic timestamped lines", () => {
+ const lines = parseLrc("[00:01.120]Hello\n[00:03.000]World");
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(1120);
+ expect(lines[0].endTime).toBe(3000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].startTime).toBe(3000);
+ expect(lines[1].words[0].word).toBe("World");
+ });
+
+ it("handles CRLF line breaks correctly", () => {
+ const lines = parseLrc("[00:01.120]Hello\r\n[00:03.000]World");
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(1120);
+ expect(lines[0].endTime).toBe(3000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].startTime).toBe(3000);
+ expect(lines[1].words[0].word).toBe("World");
+ });
+
+ it("parses multiple timestamps for the same line", () => {
+ const lines = parseLrc("[00:01.120][00:02.000]Hello");
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(1120);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].startTime).toBe(2000);
+ expect(lines[1].words[0].word).toBe("Hello");
+ });
+
+ it("ignores lines without timestamps", () => {
+ const lines = parseLrc(
+ "This is a line without timestamp\n[ar: Artist]\n[00:01.120]Hello\n# This is a comment\n{ some: 'metadata' }\n\n[00:03.000]World",
+ );
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(1120);
+ expect(lines[0].endTime).toBe(3000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].startTime).toBe(3000);
+ expect(lines[1].words[0].word).toBe("World");
+ });
+
+ it("ignores lines with bad timestamps", () => {
+ const lines = parseLrc(
+ "[00:01.120]Hello\n[invalid]Bad line\n[xx:yy.zzz]Bad line\n[-1:00.000]Bad line\n[NaN:NaN]Bad line\n[00:03.000]World",
+ );
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(1120);
+ expect(lines[0].endTime).toBe(3000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].startTime).toBe(3000);
+ expect(lines[1].words[0].word).toBe("World");
+ });
+
+ it("sorts lines by timestamp and sets end times correctly", () => {
+ const lines = parseLrc("[00:03.000]World\n[00:01.120][00:05.000]Hello");
+
+ expect(lines).toHaveLength(3);
+ expect(lines[0].startTime).toBe(1120);
+ expect(lines[0].endTime).toBe(3000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].startTime).toBe(3000);
+ expect(lines[1].endTime).toBe(5000);
+ expect(lines[1].words[0].word).toBe("World");
+ expect(lines[2].startTime).toBe(5000);
+ expect(lines[2].endTime).toBe(MAX_LRC_TIMESTAMP);
+ expect(lines[2].words[0].word).toBe("Hello");
+ });
+
+ it("parses all kinds of timestamps", () => {
+ const input = timeStampsTestCases
+ .map(([ts, ms]) => `[${ts}]Should be ${ts} = ${ms} ms`)
+ .join("\n");
+ const lines = parseLrc(input);
+ expect(lines).toHaveLength(timeStampsTestCases.length);
+ lines.forEach((line, i) => {
+ const [ts, ms] = timeStampsTestCases[i];
+ expect(line.words[0].word).toBe(`Should be ${ts} = ${ms} ms`);
+ expect(line.startTime).toBe(ms);
+ });
+ });
+
+ it("identifies background lines with parentheses", () => {
+ const lines = parseLrc(
+ "[00:01.120](Hello)\n[00:03.000]（Hi）\n[00:03.000]World",
+ );
+
+ expect(lines).toHaveLength(3);
+ expect(lines[0].isBG).toBe(true);
+ expect(lines[0].words).toHaveLength(1);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].isBG).toBe(true);
+ expect(lines[1].words).toHaveLength(1);
+ expect(lines[1].words[0].word).toBe("Hi");
+ expect(lines[2].isBG).toBe(false);
+ expect(lines[2].words).toHaveLength(1);
+ expect(lines[2].words[0].word).toBe("World");
+ });
+
+ it("trims whitespace from lines and ignore empty lines, while preserving end times", () => {
+ const lines = parseLrc(
+ "[00:00.000]\n[00:01.000] \n[00:01.120] Hello \n[00:02.333]\n[00:03.000] World \n[00:05.000] \n",
+ );
+ expect(lines).toHaveLength(2);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[0].endTime).toBe(2333);
+ expect(lines[1].words[0].word).toBe("World");
+ expect(lines[1].endTime).toBe(5000);
+ });
+
+ it("stringifies background lines with parentheses and normal lines without", () => {
+ const lines = [
+ {
+ startTime: 1120,
+ endTime: 3000,
+ words: [
+ { startTime: 1120, endTime: 3000, word: "Hello", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: true,
+ isDuet: false,
+ },
+ {
+ startTime: 3000,
+ endTime: 3000,
+ words: [
+ { startTime: 3000, endTime: 3000, word: "World", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ];
+
+ const result = stringifyLrc(lines);
+ expect(result).toBe("[00:01.120](Hello)\n[00:03.000]World");
+ });
+
+ it("stringifies lines to expected lrc text", () => {
+ const result = stringifyLrc([
+ {
+ startTime: 1120,
+ endTime: 3000,
+ words: [
+ { startTime: 1120, endTime: 3000, word: "Hello", romanWord: "" },
+ { startTime: 0, endTime: 0, word: " ", romanWord: "" },
+ { startTime: 1120, endTime: 3000, word: "world!", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[00:01.120]Hello world!");
+ });
+
+ it("normalizes invalid startTime when stringifying", () => {
+ const baseLine = {
+ endTime: 3000,
+ words: [{ startTime: 0, endTime: 0, word: "Hello", romanWord: "" }],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ };
+
+ expect(stringifyLrc([{ ...baseLine, startTime: -1 }])).toBe(
+ "[00:00.000]Hello",
+ );
+ expect(stringifyLrc([{ ...baseLine, startTime: Number.NaN }])).toBe(
+ "[00:00.000]Hello",
+ );
+ expect(
+ stringifyLrc([{ ...baseLine, startTime: Number.POSITIVE_INFINITY }]),
+ ).toBe("[00:00.000]Hello");
+ });
+
+ it("keeps parse -> stringify -> parse stable for content and timing", () => {
+ const input = "[00:01.120]Hello\n[00:03.000](World)";
+ const first = parseLrc(input);
+ const text = stringifyLrc(first);
+ const second = parseLrc(text);
+
+ expect(second).toEqual(first);
+ });
+});
diff --git a/amll-local/packages/lyric/test/lrca2.test.ts b/amll-local/packages/lyric/test/lrca2.test.ts
new file mode 100644
index 0000000..f42c14e
--- /dev/null
+++ b/amll-local/packages/lyric/test/lrca2.test.ts
@@ -0,0 +1,150 @@
+import { describe, expect, it } from "vitest";
+import { parseLrcA2, stringifyLrcA2 } from "../src/formats/lrca2";
+import { timeStampsTestCases } from "./timestampcase.fixture";
+
+describe("lrca2", () => {
+ it("parses basic word-timestamped line", () => {
+ const lines = parseLrcA2(
+ "[00:01.000]<00:01.000>Hello <00:01.500>World<00:02.000>",
+ );
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[0].words[0].startTime).toBe(1000);
+ expect(lines[0].words[0].endTime).toBe(1500);
+ expect(lines[0].words[1].word).toBe(" ");
+ expect(lines[0].words[2].word).toBe("World");
+ expect(lines[0].words[2].startTime).toBe(1500);
+ expect(lines[0].words[2].endTime).toBe(2000);
+ });
+
+ it("handles CRLF and ignores non-lyric lines", () => {
+ const lines = parseLrcA2(
+ "[ar: Artist]\r\n#comment\r\n{meta:true}\r\n[00:01.000]<00:01.000>Hello<00:02.000>",
+ );
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ });
+
+ it("ignores lines with bad timestamps", () => {
+ const lines = parseLrcA2(
+ "[00:01.000]<00:01.000>Hello<00:02.000>\n[invalid]<00:03.000>Bad<00:04.000>\n[-1:00.000]<00:03.000>Bad<00:04.000>\n[NaN:NaN]<00:03.000>Bad<00:04.000>\n[00:03.000]<00:03.000>World<00:04.000>",
+ );
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words.map((w) => w.word).join("")).toBe("Hello");
+ expect(lines[1].startTime).toBe(3000);
+ expect(lines[1].endTime).toBe(4000);
+ expect(lines[1].words.map((w) => w.word).join("")).toBe("World");
+ });
+
+ it("parses all kinds of valid line timestamps", () => {
+ const input = timeStampsTestCases
+ .map(([ts]) => `[${ts}]<${ts}>Word<${ts}>`)
+ .join("\n");
+ const lines = parseLrcA2(input);
+
+ expect(lines).toHaveLength(timeStampsTestCases.length);
+ lines.forEach((line, i) => {
+ const [, ms] = timeStampsTestCases[i];
+ expect(line.startTime).toBe(ms);
+ });
+ });
+
+ it("ignores empty lines and lines with only whitespace", () => {
+ const lines = parseLrcA2(
+ "[00:00.000] \n[00:01.000]<00:01.000>Hello<00:02.000>\n \n\n[00:03.000]<00:03.000>World<00:04.000>\n \n",
+ );
+ expect(lines).toHaveLength(2);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].words[0].word).toBe("World");
+ });
+
+ it("stringifies words and preserves spaces", () => {
+ const result = stringifyLrcA2([
+ {
+ startTime: 1000,
+ endTime: 3000,
+ words: [
+ { startTime: 1000, endTime: 2000, word: "Hello", romanWord: "" },
+ { startTime: 0, endTime: 0, word: " ", romanWord: "" },
+ { startTime: 2000, endTime: 3000, word: "World", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe(
+ "[00:01.000]<00:01.000>Hello <00:02.000>World<00:03.000>",
+ );
+ });
+
+ it("stringifies empty-word line as bare line timestamp", () => {
+ const result = stringifyLrcA2([
+ {
+ startTime: 1000,
+ endTime: 1000,
+ words: [],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[00:01.000]");
+ });
+
+ it("normalizes invalid timestamps when stringifying", () => {
+ const result = stringifyLrcA2([
+ {
+ startTime: Number.NaN,
+ endTime: 0,
+ words: [
+ {
+ startTime: -1,
+ endTime: Number.POSITIVE_INFINITY,
+ word: "Hello",
+ romanWord: "",
+ },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[00:00.000]<00:00.000>Hello<00:00.000>");
+ });
+
+ it("keeps parse -> stringify -> parse stable for content and timing", () => {
+ const input =
+ "[00:01.000]<00:01.000>Hello <00:01.500>World<00:02.000>\n[00:03.000]<00:03.000>Again<00:03.500>";
+ const first = parseLrcA2(input);
+ const text = stringifyLrcA2(first);
+ const second = parseLrcA2(text);
+
+ expect(second).toEqual(first);
+ });
+
+ it("keeps exactly one space between adjacent words in ' word word' pattern", () => {
+ const input = "[00:01.000]<00:01.000> word <00:01.500> word<00:02.000>";
+ const output = stringifyLrcA2(parseLrcA2(input));
+
+ expect(output).toBe(
+ "[00:01.000]<00:01.000>word <00:01.500>word<00:02.000>",
+ );
+ expect(output).not.toContain(" ");
+ });
+});
diff --git a/amll-local/packages/lyric/test/lyl.test.ts b/amll-local/packages/lyric/test/lyl.test.ts
new file mode 100644
index 0000000..fc019d6
--- /dev/null
+++ b/amll-local/packages/lyric/test/lyl.test.ts
@@ -0,0 +1,129 @@
+import { describe, expect, it } from "vitest";
+import { parseLyl, stringifyLyl } from "../src/formats/lyl";
+
+describe("lyl", () => {
+ it("parses basic line-timestamped lines", () => {
+ const lines = parseLyl("[1000,2000]Hello\n[3000,4000]World");
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].startTime).toBe(3000);
+ expect(lines[1].endTime).toBe(4000);
+ expect(lines[1].words[0].word).toBe("World");
+ });
+
+ it("handles CRLF and ignores non-lyric lines", () => {
+ const lines = parseLyl(
+ "[type:LyricifyLines]\r\n#comment\r\n{meta:true}\r\nno timestamp\r\n[1000,2000]Hello",
+ );
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ });
+
+ it("ignores lines with bad timestamps", () => {
+ const lines = parseLyl(
+ "[1000,2000]Hello\n[invalid,2000]Bad\n[-1,2000]Bad\n[NaN,NaN]Bad\n[3000,4000]World",
+ );
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].startTime).toBe(3000);
+ expect(lines[1].endTime).toBe(4000);
+ expect(lines[1].words[0].word).toBe("World");
+ });
+
+ it("identifies background lines with parentheses", () => {
+ const lines = parseLyl(
+ "[1000,2000](Hello)\n[3000,4000]（Hi）\n[5000,6000]World",
+ );
+
+ expect(lines).toHaveLength(3);
+ expect(lines[0].isBG).toBe(true);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].isBG).toBe(true);
+ expect(lines[1].words[0].word).toBe("Hi");
+ expect(lines[2].isBG).toBe(false);
+ expect(lines[2].words[0].word).toBe("World");
+ });
+
+ it("trims whitespace from lines and ignore empty lines", () => {
+ const lines = parseLyl(
+ "[0,500]\n[600,1000] \n[1000,2000] Hello \n\n[3000,4000] World \n[5000,6000] \n",
+ );
+ expect(lines).toHaveLength(2);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].words[0].word).toBe("World");
+ });
+
+ it("stringifies with header and bg markers", () => {
+ const result = stringifyLyl([
+ {
+ startTime: 1000,
+ endTime: 2000,
+ words: [
+ { startTime: 1000, endTime: 2000, word: "Hello", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: true,
+ isDuet: false,
+ },
+ {
+ startTime: 3000,
+ endTime: 4000,
+ words: [
+ { startTime: 3000, endTime: 4000, word: "World", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe(
+ "[type:LyricifyLines]\n[1000,2000](Hello)\n[3000,4000]World",
+ );
+ });
+
+ it("normalizes invalid timestamps when stringifying", () => {
+ const result = stringifyLyl([
+ {
+ startTime: Number.NaN,
+ endTime: Number.POSITIVE_INFINITY,
+ words: [{ startTime: 0, endTime: 0, word: "Hello", romanWord: "" }],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ {
+ startTime: -1,
+ endTime: -2,
+ words: [{ startTime: 0, endTime: 0, word: "World", romanWord: "" }],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[type:LyricifyLines]\n[0,0]Hello\n[0,0]World");
+ });
+
+ it("keeps parse -> stringify -> parse stable for content and timing", () => {
+ const input = "[1000,2000]Hello\n[3000,4000](World)";
+ const first = parseLyl(input);
+ const text = stringifyLyl(first);
+ const second = parseLyl(text);
+
+ expect(second).toEqual(first);
+ });
+});
diff --git a/amll-local/packages/lyric/test/lys.test.ts b/amll-local/packages/lyric/test/lys.test.ts
new file mode 100644
index 0000000..4f9bf8b
--- /dev/null
+++ b/amll-local/packages/lyric/test/lys.test.ts
@@ -0,0 +1,136 @@
+import { describe, expect, it } from "vitest";
+import { parseLys, stringifyLys } from "../src/formats/lys";
+
+describe("lys", () => {
+ it("parses basic word-timestamped line", () => {
+ const lines = parseLys("[0]Hello(1000,500) World(1500,500)");
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].isBG).toBe(false);
+ expect(lines[0].isDuet).toBe(false);
+ expect(lines[0].words.map((w) => w.word)).toEqual(["Hello", " World"]);
+ });
+
+ it("parses bg + duet flags from prop and strips bg wrappers", () => {
+ const lines = parseLys("[8](Hello(1000,500)World(1500,500))");
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].isBG).toBe(true);
+ expect(lines[0].isDuet).toBe(true);
+ expect(lines[0].words.map((w) => w.word).join("")).toBe("HelloWorld");
+ });
+
+ it("handles CRLF and ignores lines without valid prop prefix", () => {
+ const lines = parseLys(
+ "no prop\r\n#comment\r\n{meta:true}\r\n[4]Hello(1000,500)World(1500,500)",
+ );
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ });
+
+ it("ignores lines with bad word timestamps", () => {
+ const lines = parseLys(
+ "[0]Hello(1000,500)\n[0]Bad(a,b)\n[0]AlsoBad(1000,-10)\n[0]World(2000,500)",
+ );
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].words.map((w) => w.word).join("")).toBe("Hello");
+ expect(lines[1].words.map((w) => w.word).join("")).toBe("World");
+ });
+
+ it("ignores empty lines and lines with only whitespace", () => {
+ const lines = parseLys(
+ "[0] \n[3]\n[0]Hello(1000,500) World(1500,500)\n \n\n[0]Next(2000,500) line(2500,500)\n \n",
+ );
+ expect(lines).toHaveLength(2);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[1].words[0].word).toBe("Next");
+ });
+
+ it("stringifies words and preserves spaces", () => {
+ const result = stringifyLys([
+ {
+ startTime: 1000,
+ endTime: 2000,
+ words: [
+ { startTime: 1000, endTime: 1500, word: "Hello", romanWord: "" },
+ { startTime: 0, endTime: 0, word: " ", romanWord: "" },
+ { startTime: 1500, endTime: 2000, word: "World", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[4]Hello (1000,500)World(1500,500)");
+ });
+
+ it("stringifies props according to duet/background presence", () => {
+ const result = stringifyLys([
+ {
+ startTime: 0,
+ endTime: 0,
+ words: [{ startTime: 1000, endTime: 1500, word: "A", romanWord: "" }],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: true,
+ isDuet: true,
+ },
+ {
+ startTime: 0,
+ endTime: 0,
+ words: [{ startTime: 2000, endTime: 2500, word: "B", romanWord: "" }],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[8]A(1000,500)\n[4]B(2000,500)");
+ });
+
+ it("normalizes invalid timestamps when stringifying", () => {
+ const result = stringifyLys([
+ {
+ startTime: 0,
+ endTime: 0,
+ words: [
+ {
+ startTime: Number.NaN,
+ endTime: Number.POSITIVE_INFINITY,
+ word: "Hello",
+ romanWord: "",
+ },
+ {
+ startTime: -1,
+ endTime: -2,
+ word: "World",
+ romanWord: "",
+ },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[4]Hello(0,0)World(0,0)");
+ });
+
+ it("keeps parse -> stringify -> parse stable for content and timing", () => {
+ const input = "[4]Hello(1000,500) World(1500,500)\n[8](Again(3000,500))";
+ const first = parseLys(input);
+ const text = stringifyLys(first);
+ const second = parseLys(text);
+
+ expect(second).toEqual(first);
+ });
+});
diff --git a/amll-local/packages/lyric/test/qrc.test.ts b/amll-local/packages/lyric/test/qrc.test.ts
new file mode 100644
index 0000000..c86d0f9
--- /dev/null
+++ b/amll-local/packages/lyric/test/qrc.test.ts
@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+import { parseQrc, stringifyQrc } from "../src/formats/qrc";
+
+describe("qrc", () => {
+ it("parses basic word-timestamped line", () => {
+ const lines = parseQrc(
+ "[1000,1000]Hello(1000,500)World(1500,500)\n[3000,1000]Again(3000,1000)",
+ );
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[0].words[0].startTime).toBe(1000);
+ expect(lines[0].words[0].endTime).toBe(1500);
+ expect(lines[0].words[1].word).toBe("World");
+ expect(lines[0].words[1].startTime).toBe(1500);
+ expect(lines[0].words[1].endTime).toBe(2000);
+ expect(lines[1].words[0].word).toBe("Again");
+ });
+
+ it("handles CRLF and ignores lines without valid line timestamp", () => {
+ const lines = parseQrc(
+ "no timestamp\r\n[invalid,100]Bad(0,100)\r\n[-1,100]Bad(0,100)\r\n[1000,1000]Hello(1000,1000)",
+ );
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ });
+
+ it("ignores empty lines and lines with only whitespace", () => {
+ const lines = parseQrc(
+ "[0,20] \n[0,20]\n[0,20]Test(10,10)\n \n\n[0,20] \n",
+ );
+ expect(lines).toHaveLength(1);
+ expect(lines[0].words[0].word).toBe("Test");
+ });
+
+ it("stringifies words and preserves spaces", () => {
+ const result = stringifyQrc([
+ {
+ startTime: 1000,
+ endTime: 3000,
+ words: [
+ { startTime: 1000, endTime: 2000, word: "Hello", romanWord: "" },
+ { startTime: 0, endTime: 0, word: " ", romanWord: "" },
+ { startTime: 2000, endTime: 3000, word: "World", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[1000,2000]Hello(1000,1000) World(2000,1000)");
+ });
+
+ it("stringifies bg lines with full-width wrapping parentheses", () => {
+ const result = stringifyQrc([
+ {
+ startTime: 1000,
+ endTime: 2000,
+ words: [
+ { startTime: 1000, endTime: 2000, word: "Hello", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: true,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[1000,1000]（Hello）(1000,1000)");
+ });
+
+ it("parses and keeps bg wrapper lines stable", () => {
+ const input = "[1000,1000]（Hello,(1000,1000) world）(2000,2000)";
+ const lines = parseQrc(input);
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].isBG).toBe(true);
+ expect(lines[0].words).toHaveLength(2);
+ expect(lines[0].words[0].word).toBe("Hello,");
+ expect(lines[0].words[1].word).toBe(" world");
+ expect(stringifyQrc(lines)).toBe(input);
+ });
+
+ it("keeps parenthesized fragments in plain word text", () => {
+ const lines = parseQrc("[0,20]A(x)B(0,10) C(10,10)");
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].words.map((w) => w.word)).toEqual(["A(x)B", " C"]);
+ expect(lines[0].words[0].startTime).toBe(0);
+ expect(lines[0].words[0].endTime).toBe(10);
+ expect(lines[0].words[1].startTime).toBe(10);
+ expect(lines[0].words[1].endTime).toBe(20);
+ });
+
+ it("normalizes invalid timestamps when stringifying", () => {
+ const result = stringifyQrc([
+ {
+ startTime: Number.NaN,
+ endTime: Number.POSITIVE_INFINITY,
+ words: [
+ {
+ startTime: -1,
+ endTime: Number.POSITIVE_INFINITY,
+ word: "Hello",
+ romanWord: "",
+ },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[0,0]Hello(0,0)");
+ });
+
+ it("keeps parse -> stringify -> parse stable for content and timing", () => {
+ const input =
+ "[1000,1000]Hello (1000,500)World(1500,500)\n[3000,1000]Again(3000,1000)";
+ const first = parseQrc(input);
+ const text = stringifyQrc(first);
+ const second = parseQrc(text);
+
+ expect(second).toEqual(first);
+ });
+});
diff --git a/amll-local/packages/lyric/test/timestampcase.fixture.ts b/amll-local/packages/lyric/test/timestampcase.fixture.ts
new file mode 100644
index 0000000..f6b4166
--- /dev/null
+++ b/amll-local/packages/lyric/test/timestampcase.fixture.ts
@@ -0,0 +1,24 @@
+const timeStampsTestCasesReg: [string, number][] = [
+ ["1", 1_000],
+ ["2.1", 2_100],
+ ["3.12", 3_120],
+ ["4.123", 4_123],
+ ["5.1234", 5_123],
+ ["6.12354", 6_124],
+ ["7.123456", 7_123],
+ ["8.00100000", 8_001],
+ ["61", 61_000],
+ ["2:01", 2 * 60_000 + 1_000],
+ ["3:1", 3 * 60_000 + 1_000],
+ ["4:1.1", 4 * 60_000 + 1_100],
+ ["5:1.12", 5 * 60_000 + 1_120],
+ ["06:1.12", 6 * 60_000 + 1_120],
+ ["07:01.012", 7 * 60_000 + 1_012],
+ ["61:21", 61 * 60_000 + 21_000],
+ ["1:2:3.123", 1 * 3600_000 + 2 * 60_000 + 3_123],
+ ["01:05:03.123", 1 * 3600_000 + 5 * 60_000 + 3_123],
+];
+
+export const timeStampsTestCases = timeStampsTestCasesReg.toSorted(
+ ([, t1], [, t2]) => t1 - t2,
+) as readonly [string, number][];
diff --git a/amll-local/packages/lyric/test/yrc.test.ts b/amll-local/packages/lyric/test/yrc.test.ts
new file mode 100644
index 0000000..4eb0cf0
--- /dev/null
+++ b/amll-local/packages/lyric/test/yrc.test.ts
@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+import { parseYrc, stringifyYrc } from "../src/formats/yrc";
+
+describe("yrc", () => {
+ it("parses basic word-timestamped line", () => {
+ const lines = parseYrc(
+ "[1000,1000](1000,500,0)Hello(1500,500,0)World\n[3000,1000](3000,1000,0)Again",
+ );
+
+ expect(lines).toHaveLength(2);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ expect(lines[0].words[0].startTime).toBe(1000);
+ expect(lines[0].words[0].endTime).toBe(1500);
+ expect(lines[0].words[1].word).toBe("World");
+ expect(lines[0].words[1].startTime).toBe(1500);
+ expect(lines[0].words[1].endTime).toBe(2000);
+ expect(lines[1].words[0].word).toBe("Again");
+ });
+
+ it("handles CRLF and ignores lines without valid line timestamp", () => {
+ const lines = parseYrc(
+ "no timestamp\r\n[invalid,100](0,100,0)Bad\r\n[-1,100](0,100,0)Bad\r\n[1000,1000](1000,1000,0)Hello",
+ );
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].startTime).toBe(1000);
+ expect(lines[0].endTime).toBe(2000);
+ expect(lines[0].words[0].word).toBe("Hello");
+ });
+
+ it("ignores empty lines and lines with only whitespace", () => {
+ const lines = parseYrc(
+ "[0,20] \n[0,20]\n[0,20](10,10,0)Test\n \n\n[0,20] \n",
+ );
+ expect(lines).toHaveLength(1);
+ expect(lines[0].words[0].word).toBe("Test");
+ });
+
+ it("stringifies words and preserves spaces", () => {
+ const result = stringifyYrc([
+ {
+ startTime: 1000,
+ endTime: 3000,
+ words: [
+ { startTime: 1000, endTime: 2000, word: "Hello", romanWord: "" },
+ { startTime: 0, endTime: 0, word: " ", romanWord: "" },
+ { startTime: 2000, endTime: 3000, word: "World", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[1000,2000](1000,1000,0)Hello (2000,1000,0)World");
+ });
+
+ it("stringifies bg lines with full-width wrapping parentheses", () => {
+ const result = stringifyYrc([
+ {
+ startTime: 1000,
+ endTime: 2000,
+ words: [
+ { startTime: 1000, endTime: 2000, word: "Hello", romanWord: "" },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: true,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[1000,1000](1000,1000,0)（Hello）");
+ });
+
+ it("parses and keeps bg wrapper lines stable", () => {
+ const input = "[1000,1000](1000,1000,0)（Hello, (2000,2000,0)world）";
+ const lines = parseYrc(input);
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].isBG).toBe(true);
+ expect(lines[0].words).toHaveLength(2);
+ expect(lines[0].words[0].word).toBe("Hello, ");
+ expect(lines[0].words[1].word).toBe("world");
+ expect(stringifyYrc(lines)).toBe(input);
+ });
+
+ it("keeps parenthesized fragments in plain word text", () => {
+ const lines = parseYrc("[0,20](0,10,0)A(x)(10,10,0) B");
+
+ expect(lines).toHaveLength(1);
+ expect(lines[0].words.map((w) => w.word)).toEqual(["A(x)", " B"]);
+ expect(lines[0].words[0].startTime).toBe(0);
+ expect(lines[0].words[0].endTime).toBe(10);
+ expect(lines[0].words[1].startTime).toBe(10);
+ expect(lines[0].words[1].endTime).toBe(20);
+ });
+
+ it("normalizes invalid timestamps when stringifying", () => {
+ const result = stringifyYrc([
+ {
+ startTime: Number.NaN,
+ endTime: Number.POSITIVE_INFINITY,
+ words: [
+ {
+ startTime: -1,
+ endTime: Number.POSITIVE_INFINITY,
+ word: "Hello",
+ romanWord: "",
+ },
+ ],
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+
+ expect(result).toBe("[0,0](0,0,0)Hello");
+ });
+
+ it("keeps parse -> stringify -> parse stable for content and timing", () => {
+ const input =
+ "[1000,1000](1000,500,0)Hello (1500,500,0)World\n[3000,1000](3000,1000,0)Again";
+ const first = parseYrc(input);
+ const text = stringifyYrc(first);
+ const second = parseYrc(text);
+
+ expect(second).toEqual(first);
+ });
+});
diff --git a/amll-local/packages/lyric/tsconfig.app.json b/amll-local/packages/lyric/tsconfig.app.json
new file mode 100644
index 0000000..9e5fc68
--- /dev/null
+++ b/amll-local/packages/lyric/tsconfig.app.json
@@ -0,0 +1,4 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "include": ["src"]
+}
diff --git a/amll-local/packages/lyric/tsconfig.json b/amll-local/packages/lyric/tsconfig.json
new file mode 100644
index 0000000..c00d790
--- /dev/null
+++ b/amll-local/packages/lyric/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.test.json" }
+ ]
+}
diff --git a/amll-local/packages/lyric/tsconfig.test.json b/amll-local/packages/lyric/tsconfig.test.json
new file mode 100644
index 0000000..07e5d4e
--- /dev/null
+++ b/amll-local/packages/lyric/tsconfig.test.json
@@ -0,0 +1,9 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "include": ["test/**/*.ts", "tests/**/*.ts"],
+ "compilerOptions": {
+ "types": ["node", "vitest"],
+ "isolatedDeclarations": false,
+ "declaration": false
+ }
+}
diff --git a/amll-local/packages/lyric/tsdown.config.ts b/amll-local/packages/lyric/tsdown.config.ts
new file mode 100644
index 0000000..bbf3844
--- /dev/null
+++ b/amll-local/packages/lyric/tsdown.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "tsdown";
+import { baseConfig } from "../../tsdown.base.ts";
+
+export default defineConfig({
+ ...baseConfig,
+ entry: { "amll-lyric": "./src/index.ts" },
+ dts: { tsconfig: "./tsconfig.app.json" },
+});
diff --git a/amll-local/packages/playground/core-legacy/index.html b/amll-local/packages/playground/core-legacy/index.html
new file mode 100644
index 0000000..507df23
--- /dev/null
+++ b/amll-local/packages/playground/core-legacy/index.html
@@ -0,0 +1,37 @@
+
+
+
+ AMLL Core Test
+
+
+
diff --git a/amll-local/packages/playground/core-legacy/mg.html b/amll-local/packages/playground/core-legacy/mg.html
new file mode 100644
index 0000000..26d0917
--- /dev/null
+++ b/amll-local/packages/playground/core-legacy/mg.html
@@ -0,0 +1,91 @@
+
+
+
+ AMLL Core Test
+
+ | BackgroundRender;
+ lyrics: typeof lyrics;
+ }
+}
+
+window.globalLyricPlayer = lyricPlayer;
+
+const waitFrame = (): Promise =>
+ new Promise((resolve) => requestAnimationFrame(resolve));
+let localLyricUrl: string | null = null;
+let localLyricExt: string | null = null;
+let localMusicUrl: string | null = null;
+const mapLyric = (
+ line: RawLyricLine,
+ _i: number,
+ _lines: RawLyricLine[],
+): LyricLine => ({
+ words: line.words.map((word) => ({
+ ...word,
+ obscene: false,
+ romanWord: word.romanWord ?? "",
+ })),
+ startTime: line.words[0]?.startTime ?? 0,
+ endTime:
+ line.words[line.words.length - 1]?.endTime ?? Number.POSITIVE_INFINITY,
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+});
+
+async function loadLyric() {
+ const lyricFile = debugValues.lyric;
+ const content = await (await fetch(lyricFile)).text();
+ const lyricSource = (localLyricExt ?? lyricFile).toLowerCase();
+ if (lyricSource.endsWith(".ttml")) {
+ lyricPlayer.setLyricLines(parseTTML(content).lines);
+ } else if (lyricSource.endsWith(".lrc")) {
+ lyricPlayer.setLyricLines(parseLrc(content).map(mapLyric));
+ } else if (lyricSource.endsWith(".yrc")) {
+ lyricPlayer.setLyricLines(parseYrc(content).map(mapLyric));
+ } else if (lyricSource.endsWith(".lys")) {
+ lyricPlayer.setLyricLines(parseLys(content).map(mapLyric));
+ } else if (lyricSource.endsWith(".qrc")) {
+ lyricPlayer.setLyricLines(parseQrc(content).map(mapLyric));
+ } else if (lyricFile === "bug") {
+ const buildLyricLines = (
+ lyric: string,
+ startTime = 1000,
+ otherParams: Partial = {},
+ ): LyricLine => {
+ let curTime = startTime;
+ const words = [];
+ for (const word of lyric.split("|")) {
+ const [text, duration] = word.split(",");
+ const endTime = curTime + Number.parseInt(duration, 10);
+ words.push({
+ word: text,
+ romanWord: "",
+ startTime: curTime,
+ endTime,
+ obscene: false,
+ });
+ curTime = endTime;
+ }
+ return {
+ startTime,
+ endTime: curTime + 3000,
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ words,
+ ...otherParams,
+ };
+ };
+
+ const DEMO_LYRIC: LyricLine[] = [
+ buildLyricLines(
+ "Apple ,750|Music ,500|Like ,500|Ly,400|ri,500|cs ,250",
+ 1000,
+ ),
+ buildLyricLines("BG ,750|Lyrics ,1000", 2000, {
+ isBG: true,
+ }),
+ buildLyricLines("Next ,1000|Lyrics,1000", 2500, {
+ // isDuet: true,
+ }),
+ ];
+
+ lyricPlayer.setLyricLines(DEMO_LYRIC);
+ }
+}
+
+(async () => {
+ recreateBGRenderer(debugValues.bgMode);
+ audio.style.display = "none";
+ // lyricPlayer.getBottomLineElement().innerHTML = "Test Bottom Line";
+ const player = document.getElementById("player");
+ if (player) {
+ player.appendChild(audio);
+ player.appendChild(window.globalBackground.getElement());
+ player.appendChild(lyricPlayer.getElement());
+ }
+ if (!debugValues.enableSpring) {
+ lyricPlayer.setEnableSpring(false);
+ }
+ await loadLyric();
+ // debugValues.play();
+ // debugValues.currentTime = 34;
+ // debugValues.mockPlay();
+})();
diff --git a/amll-local/packages/playground/core-legacy/tsconfig.json b/amll-local/packages/playground/core-legacy/tsconfig.json
new file mode 100644
index 0000000..bdc3679
--- /dev/null
+++ b/amll-local/packages/playground/core-legacy/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "extends": "../../../tsconfig.base.json",
+ "include": ["src"]
+}
diff --git a/amll-local/packages/playground/core-legacy/vite.config.ts b/amll-local/packages/playground/core-legacy/vite.config.ts
new file mode 100644
index 0000000..0d77ce0
--- /dev/null
+++ b/amll-local/packages/playground/core-legacy/vite.config.ts
@@ -0,0 +1,20 @@
+import path from "node:path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ "@applemusic-like-lyrics/core": path.resolve(__dirname, "../../core/src"),
+ "@applemusic-like-lyrics/core/style.css": path.resolve(
+ __dirname,
+ "../../core/src/styles/index.css",
+ ),
+ "@applemusic-like-lyrics/lyric": path.resolve(
+ __dirname,
+ "../../lyric/src",
+ ),
+ "@applemusic-like-lyrics/ttml": path.resolve(__dirname, "../../ttml/src"),
+ "@amll-core-src": path.resolve(__dirname, "../../core/src"),
+ },
+ },
+});
diff --git a/amll-local/packages/playground/core/components.json b/amll-local/packages/playground/core/components.json
new file mode 100644
index 0000000..3223c50
--- /dev/null
+++ b/amll-local/packages/playground/core/components.json
@@ -0,0 +1,25 @@
+{
+ "$schema": "https://shadcn-vue.com/schema.json",
+ "style": "reka-vega",
+ "font": "inter",
+ "typescript": true,
+ "tailwind": {
+ "config": "",
+ "css": "src/assets/index.tailwind.css",
+ "baseColor": "neutral",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "iconLibrary": "lucide",
+ "rtl": false,
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui",
+ "lib": "@/lib",
+ "composables": "@/composables"
+ },
+ "menuColor": "default",
+ "menuAccent": "subtle",
+ "registries": {}
+}
diff --git a/amll-local/packages/playground/core/index.html b/amll-local/packages/playground/core/index.html
new file mode 100644
index 0000000..b06ed0a
--- /dev/null
+++ b/amll-local/packages/playground/core/index.html
@@ -0,0 +1,18 @@
+
+
+
+ AMLL Playground
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/package.json b/amll-local/packages/playground/core/package.json
new file mode 100644
index 0000000..4ab2fd6
--- /dev/null
+++ b/amll-local/packages/playground/core/package.json
@@ -0,0 +1,48 @@
+{
+ "name": "@applemusic-like-lyrics/playground-core",
+ "type": "module",
+ "version": "0.0.0",
+ "private": true,
+ "scripts": {
+ "dev": "vite",
+ "typecheck": "vue-tsc --noEmit",
+ "build-only": "vite build",
+ "build": "run-p typecheck \"build-only {@}\" --"
+ },
+ "dependencies": {
+ "@applemusic-like-lyrics/core": "workspace:^",
+ "@applemusic-like-lyrics/lyric": "workspace:^",
+ "@pixi/app": "^7.4.3",
+ "@pixi/core": "^7.4.3",
+ "@pixi/display": "^7.4.3",
+ "@pixi/filter-blur": "^7.4.3",
+ "@pixi/filter-bulge-pinch": "^5.1.1",
+ "@pixi/filter-color-matrix": "^7.4.3",
+ "@pixi/sprite": "^7.4.3",
+ "@vueuse/core": "^14.3.0",
+ "class-variance-authority": "^0.7.1",
+ "clsx": "^2.1.1",
+ "jss": "^10.10.0",
+ "jss-preset-default": "^10.10.0",
+ "lucide-vue-next": "^1.0.0",
+ "music-metadata": "^11.12.3",
+ "pinia": "^3.0.4",
+ "reka-ui": "^2.9.7",
+ "shadcn-vue": "^2.7.3",
+ "tailwind-merge": "^3.5.0",
+ "tw-animate-css": "^1.4.0",
+ "vue": "^3.5.34"
+ },
+ "devDependencies": {
+ "@iconify-json/radix-icons": "^1.2.6",
+ "@iconify/vue": "^5.0.1",
+ "@tailwindcss/vite": "^4.3.0",
+ "@tsconfig/node22": "^22.0.5",
+ "@types/node": "^25.8.0",
+ "@vitejs/plugin-vue": "^6.0.7",
+ "tailwindcss": "^4.3.0",
+ "typescript": "^6.0.3",
+ "vite": "^8.0.13",
+ "vue-tsc": "^3.2.9"
+ }
+}
diff --git a/amll-local/packages/playground/core/src/App.vue b/amll-local/packages/playground/core/src/App.vue
new file mode 100644
index 0000000..3a7a5a0
--- /dev/null
+++ b/amll-local/packages/playground/core/src/App.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/assets/amll-logo.svg b/amll-local/packages/playground/core/src/assets/amll-logo.svg
new file mode 100644
index 0000000..387c527
--- /dev/null
+++ b/amll-local/packages/playground/core/src/assets/amll-logo.svg
@@ -0,0 +1,159 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/assets/index.tailwind.css b/amll-local/packages/playground/core/src/assets/index.tailwind.css
new file mode 100644
index 0000000..fcdcd34
--- /dev/null
+++ b/amll-local/packages/playground/core/src/assets/index.tailwind.css
@@ -0,0 +1,121 @@
+@import "tailwindcss";
+@import "shadcn-vue/tailwind.css";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --font-sans:
+ -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "PingFang SC",
+ system-ui, sans-serif;
+ --font-heading: var(--font-sans);
+ --color-sidebar-ring: var(--sidebar-ring);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar: var(--sidebar);
+ --color-chart-5: var(--chart-5);
+ --color-chart-4: var(--chart-4);
+ --color-chart-3: var(--chart-3);
+ --color-chart-2: var(--chart-2);
+ --color-chart-1: var(--chart-1);
+ --color-ring: var(--ring);
+ --color-input: var(--input);
+ --color-border: var(--border);
+ --color-destructive: var(--destructive);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-accent: var(--accent);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-muted: var(--muted);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-secondary: var(--secondary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-primary: var(--primary);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-popover: var(--popover);
+ --color-card-foreground: var(--card-foreground);
+ --color-card: var(--card);
+ --color-foreground: var(--foreground);
+ --color-background: var(--background);
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.629 0.215 25.963);
+ --primary-foreground: oklch(0.969 0.015 12.422);
+ --secondary: oklch(0.967 0.001 286.375);
+ --secondary-foreground: oklch(0.21 0.006 285.885);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --radius: 0.625rem;
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: var(--primary);
+ --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.582 0.193 26.976);
+ --primary-foreground: oklch(0.969 0.015 12.422);
+ --secondary: oklch(0.281 0 271.152);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --sidebar: oklch(0.218 0 271.152);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: var(--primary);
+ --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ @apply font-sans;
+ }
+}
+
+::selection {
+ background-color: color-mix(in oklab, var(--primary) 40%, transparent);
+}
diff --git a/amll-local/packages/playground/core/src/components/AudioController.vue b/amll-local/packages/playground/core/src/components/AudioController.vue
new file mode 100644
index 0000000..e393c16
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/AudioController.vue
@@ -0,0 +1,123 @@
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/BackgroundController.vue b/amll-local/packages/playground/core/src/components/BackgroundController.vue
new file mode 100644
index 0000000..0f27574
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/BackgroundController.vue
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Mesh Gradient 渲染器
+ Pixi 渲染器
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ControllerSlider.vue b/amll-local/packages/playground/core/src/components/ControllerSlider.vue
new file mode 100644
index 0000000..8b58007
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ControllerSlider.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+ {{ title }}
+ {{ displayValue }}
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ControllerSliderGroup.vue b/amll-local/packages/playground/core/src/components/ControllerSliderGroup.vue
new file mode 100644
index 0000000..8e8b093
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ControllerSliderGroup.vue
@@ -0,0 +1,3 @@
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ControllerSwitch.vue b/amll-local/packages/playground/core/src/components/ControllerSwitch.vue
new file mode 100644
index 0000000..56dbdea
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ControllerSwitch.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
{{ title }}
+
{{ description }}
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/LyricController.vue b/amll-local/packages/playground/core/src/components/LyricController.vue
new file mode 100644
index 0000000..2e9eda1
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/LyricController.vue
@@ -0,0 +1,127 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/MainPlayer.vue b/amll-local/packages/playground/core/src/components/MainPlayer.vue
new file mode 100644
index 0000000..022cdd5
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/MainPlayer.vue
@@ -0,0 +1,360 @@
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ModeToggle.vue b/amll-local/packages/playground/core/src/components/ModeToggle.vue
new file mode 100644
index 0000000..7b81440
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ModeToggle.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Toggle theme
+
+
+
+ 亮色
+ 暗色
+ 跟随系统
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/SidebarShell.vue b/amll-local/packages/playground/core/src/components/SidebarShell.vue
new file mode 100644
index 0000000..d31cb52
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/SidebarShell.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+ 源
+ 歌词
+ 背景
+
+
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/SourceController.vue b/amll-local/packages/playground/core/src/components/SourceController.vue
new file mode 100644
index 0000000..c15cc90
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/SourceController.vue
@@ -0,0 +1,134 @@
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/button-group/ButtonGroup.vue b/amll-local/packages/playground/core/src/components/ui/button-group/ButtonGroup.vue
new file mode 100644
index 0000000..8257d82
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/button-group/ButtonGroup.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/button-group/ButtonGroupSeparator.vue b/amll-local/packages/playground/core/src/components/ui/button-group/ButtonGroupSeparator.vue
new file mode 100644
index 0000000..5265343
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/button-group/ButtonGroupSeparator.vue
@@ -0,0 +1,24 @@
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/button-group/ButtonGroupText.vue b/amll-local/packages/playground/core/src/components/ui/button-group/ButtonGroupText.vue
new file mode 100644
index 0000000..90e92e7
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/button-group/ButtonGroupText.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/button-group/index.ts b/amll-local/packages/playground/core/src/components/ui/button-group/index.ts
new file mode 100644
index 0000000..bb06ecb
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/button-group/index.ts
@@ -0,0 +1,25 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as ButtonGroup } from './ButtonGroup.vue'
+export { default as ButtonGroupSeparator } from './ButtonGroupSeparator.vue'
+export { default as ButtonGroupText } from './ButtonGroupText.vue'
+
+export const buttonGroupVariants = cva(
+ 'has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*=\'w-\'])]:w-fit [&>input]:flex-1',
+ {
+ variants: {
+ orientation: {
+ horizontal:
+ '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+ vertical:
+ '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+ },
+ },
+ defaultVariants: {
+ orientation: 'horizontal',
+ },
+ },
+)
+
+export type ButtonGroupVariants = VariantProps
diff --git a/amll-local/packages/playground/core/src/components/ui/button/Button.vue b/amll-local/packages/playground/core/src/components/ui/button/Button.vue
new file mode 100644
index 0000000..1b6a512
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/button/Button.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/button/index.ts b/amll-local/packages/playground/core/src/components/ui/button/index.ts
new file mode 100644
index 0000000..0bae5de
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/button/index.ts
@@ -0,0 +1,35 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+ 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*=size-])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+ outline: 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
+ secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+ ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+ destructive: 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ 'default': 'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+ 'xs': 'h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=size-])]:size-3',
+ 'sm': 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+ 'lg': 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+ 'icon': 'size-9',
+ 'icon-xs': 'size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*=size-])]:size-3',
+ 'icon-sm': 'size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md',
+ 'icon-lg': 'size-10',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+)
+export type ButtonVariants = VariantProps
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenu.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 0000000..c08018b
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 0000000..0020a34
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 0000000..9c38410
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuGroup.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 0000000..ab71e1a
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 0000000..d1c0fe6
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuLabel.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 0000000..e90737a
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 0000000..8306812
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 0000000..4cffe0e
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 0000000..e90bcc8
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,23 @@
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 0000000..7bfa823
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSub.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 0000000..ef54276
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 0000000..679b501
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 0000000..582ba5e
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 0000000..39be3ff
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/dropdown-menu/index.ts b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..f488d39
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { DropdownMenuPortal } from 'reka-ui'
diff --git a/amll-local/packages/playground/core/src/components/ui/input/Input.vue b/amll-local/packages/playground/core/src/components/ui/input/Input.vue
new file mode 100644
index 0000000..b6da88e
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/input/Input.vue
@@ -0,0 +1,31 @@
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/input/index.ts b/amll-local/packages/playground/core/src/components/ui/input/index.ts
new file mode 100644
index 0000000..a691dd6
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
diff --git a/amll-local/packages/playground/core/src/components/ui/label/Label.vue b/amll-local/packages/playground/core/src/components/ui/label/Label.vue
new file mode 100644
index 0000000..9d30cbb
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/label/Label.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/label/index.ts b/amll-local/packages/playground/core/src/components/ui/label/index.ts
new file mode 100644
index 0000000..572c2f0
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
diff --git a/amll-local/packages/playground/core/src/components/ui/number-field/NumberField.vue b/amll-local/packages/playground/core/src/components/ui/number-field/NumberField.vue
new file mode 100644
index 0000000..de03b2f
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/number-field/NumberField.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldContent.vue b/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldContent.vue
new file mode 100644
index 0000000..2cde64c
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldContent.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldDecrement.vue b/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldDecrement.vue
new file mode 100644
index 0000000..3852488
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldDecrement.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldIncrement.vue b/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldIncrement.vue
new file mode 100644
index 0000000..b198c50
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldIncrement.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldInput.vue b/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldInput.vue
new file mode 100644
index 0000000..a06ba70
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/number-field/NumberFieldInput.vue
@@ -0,0 +1,16 @@
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/number-field/index.ts b/amll-local/packages/playground/core/src/components/ui/number-field/index.ts
new file mode 100644
index 0000000..5489697
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/number-field/index.ts
@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue'
+export { default as NumberFieldContent } from './NumberFieldContent.vue'
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
+export { default as NumberFieldInput } from './NumberFieldInput.vue'
diff --git a/amll-local/packages/playground/core/src/components/ui/popover/Popover.vue b/amll-local/packages/playground/core/src/components/ui/popover/Popover.vue
new file mode 100644
index 0000000..a3fe9ac
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/popover/Popover.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/popover/PopoverAnchor.vue b/amll-local/packages/playground/core/src/components/ui/popover/PopoverAnchor.vue
new file mode 100644
index 0000000..e96a121
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/popover/PopoverAnchor.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/popover/PopoverContent.vue b/amll-local/packages/playground/core/src/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..f5b08f4
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/popover/PopoverDescription.vue b/amll-local/packages/playground/core/src/components/ui/popover/PopoverDescription.vue
new file mode 100644
index 0000000..4c7968a
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/popover/PopoverDescription.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/popover/PopoverHeader.vue b/amll-local/packages/playground/core/src/components/ui/popover/PopoverHeader.vue
new file mode 100644
index 0000000..fe1338d
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/popover/PopoverHeader.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/popover/PopoverTitle.vue b/amll-local/packages/playground/core/src/components/ui/popover/PopoverTitle.vue
new file mode 100644
index 0000000..2da9e87
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/popover/PopoverTitle.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/popover/PopoverTrigger.vue b/amll-local/packages/playground/core/src/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..0d41065
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/popover/index.ts b/amll-local/packages/playground/core/src/components/ui/popover/index.ts
new file mode 100644
index 0000000..1633776
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/popover/index.ts
@@ -0,0 +1,7 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverAnchor } from './PopoverAnchor.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverDescription } from './PopoverDescription.vue'
+export { default as PopoverHeader } from './PopoverHeader.vue'
+export { default as PopoverTitle } from './PopoverTitle.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
diff --git a/amll-local/packages/playground/core/src/components/ui/select/Select.vue b/amll-local/packages/playground/core/src/components/ui/select/Select.vue
new file mode 100644
index 0000000..553bf67
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/Select.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/SelectContent.vue b/amll-local/packages/playground/core/src/components/ui/select/SelectContent.vue
new file mode 100644
index 0000000..bb4a1ca
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/SelectContent.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/SelectGroup.vue b/amll-local/packages/playground/core/src/components/ui/select/SelectGroup.vue
new file mode 100644
index 0000000..4ae4b88
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/SelectGroup.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/SelectItem.vue b/amll-local/packages/playground/core/src/components/ui/select/SelectItem.vue
new file mode 100644
index 0000000..5ccbd86
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/SelectItem.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/SelectItemText.vue b/amll-local/packages/playground/core/src/components/ui/select/SelectItemText.vue
new file mode 100644
index 0000000..af85394
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/SelectItemText.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/SelectLabel.vue b/amll-local/packages/playground/core/src/components/ui/select/SelectLabel.vue
new file mode 100644
index 0000000..67a046e
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/SelectLabel.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/SelectScrollDownButton.vue b/amll-local/packages/playground/core/src/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..f021132
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/SelectScrollUpButton.vue b/amll-local/packages/playground/core/src/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..442c149
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/SelectSeparator.vue b/amll-local/packages/playground/core/src/components/ui/select/SelectSeparator.vue
new file mode 100644
index 0000000..17dadcf
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,19 @@
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/SelectTrigger.vue b/amll-local/packages/playground/core/src/components/ui/select/SelectTrigger.vue
new file mode 100644
index 0000000..98d103f
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/SelectValue.vue b/amll-local/packages/playground/core/src/components/ui/select/SelectValue.vue
new file mode 100644
index 0000000..c18762e
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/SelectValue.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/select/index.ts b/amll-local/packages/playground/core/src/components/ui/select/index.ts
new file mode 100644
index 0000000..31b9294
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
diff --git a/amll-local/packages/playground/core/src/components/ui/separator/Separator.vue b/amll-local/packages/playground/core/src/components/ui/separator/Separator.vue
new file mode 100644
index 0000000..cac21cc
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/separator/Separator.vue
@@ -0,0 +1,29 @@
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/separator/index.ts b/amll-local/packages/playground/core/src/components/ui/separator/index.ts
new file mode 100644
index 0000000..2287bcb
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
diff --git a/amll-local/packages/playground/core/src/components/ui/sheet/Sheet.vue b/amll-local/packages/playground/core/src/components/ui/sheet/Sheet.vue
new file mode 100644
index 0000000..5f598fd
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sheet/Sheet.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sheet/SheetClose.vue b/amll-local/packages/playground/core/src/components/ui/sheet/SheetClose.vue
new file mode 100644
index 0000000..892eeb0
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sheet/SheetContent.vue b/amll-local/packages/playground/core/src/components/ui/sheet/SheetContent.vue
new file mode 100644
index 0000000..bc861ca
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+ Close
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sheet/SheetDescription.vue b/amll-local/packages/playground/core/src/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 0000000..ab0e80f
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sheet/SheetFooter.vue b/amll-local/packages/playground/core/src/components/ui/sheet/SheetFooter.vue
new file mode 100644
index 0000000..11cc25d
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sheet/SheetFooter.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sheet/SheetHeader.vue b/amll-local/packages/playground/core/src/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 0000000..1dd9962
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sheet/SheetOverlay.vue b/amll-local/packages/playground/core/src/components/ui/sheet/SheetOverlay.vue
new file mode 100644
index 0000000..3b243d6
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sheet/SheetOverlay.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sheet/SheetTitle.vue b/amll-local/packages/playground/core/src/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 0000000..e525c47
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sheet/SheetTrigger.vue b/amll-local/packages/playground/core/src/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 0000000..bca1a5b
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sheet/index.ts b/amll-local/packages/playground/core/src/components/ui/sheet/index.ts
new file mode 100644
index 0000000..ee33431
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sheet/index.ts
@@ -0,0 +1,8 @@
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/Sidebar.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/Sidebar.vue
new file mode 100644
index 0000000..63e2eef
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/Sidebar.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarContent.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarContent.vue
new file mode 100644
index 0000000..09d558d
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarContent.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarFooter.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarFooter.vue
new file mode 100644
index 0000000..6d7d7fa
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarFooter.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroup.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroup.vue
new file mode 100644
index 0000000..312be81
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroup.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroupAction.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroupAction.vue
new file mode 100644
index 0000000..ef035c4
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroupAction.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroupContent.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroupContent.vue
new file mode 100644
index 0000000..82e651b
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroupContent.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroupLabel.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroupLabel.vue
new file mode 100644
index 0000000..ea823bc
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarGroupLabel.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarHeader.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarHeader.vue
new file mode 100644
index 0000000..4c2317d
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarHeader.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarInput.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarInput.vue
new file mode 100644
index 0000000..9d50abb
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarInput.vue
@@ -0,0 +1,19 @@
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarInset.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarInset.vue
new file mode 100644
index 0000000..4aec54c
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarInset.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenu.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenu.vue
new file mode 100644
index 0000000..7cfdfa6
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenu.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuAction.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuAction.vue
new file mode 100644
index 0000000..43ecb51
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuAction.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuBadge.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuBadge.vue
new file mode 100644
index 0000000..98d9e67
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuBadge.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuButton.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuButton.vue
new file mode 100644
index 0000000..e2ade09
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuButton.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ tooltip }}
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuButtonChild.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuButtonChild.vue
new file mode 100644
index 0000000..ccf34e0
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuItem.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuItem.vue
new file mode 100644
index 0000000..b7b4d3f
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuItem.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSkeleton.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSkeleton.vue
new file mode 100644
index 0000000..193abcb
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSub.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSub.vue
new file mode 100644
index 0000000..e9a3024
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSub.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSubButton.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSubButton.vue
new file mode 100644
index 0000000..4a96e87
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSubItem.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSubItem.vue
new file mode 100644
index 0000000..f0c35bc
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarMenuSubItem.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarProvider.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarProvider.vue
new file mode 100644
index 0000000..339b451
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarProvider.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarRail.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarRail.vue
new file mode 100644
index 0000000..59ef894
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarRail.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarSeparator.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarSeparator.vue
new file mode 100644
index 0000000..1803bff
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarSeparator.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarTrigger.vue b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarTrigger.vue
new file mode 100644
index 0000000..cedb47e
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/SidebarTrigger.vue
@@ -0,0 +1,28 @@
+
+
+
+
+ Toggle Sidebar
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/index.ts b/amll-local/packages/playground/core/src/components/ui/sidebar/index.ts
new file mode 100644
index 0000000..c4ab6f8
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/index.ts
@@ -0,0 +1,59 @@
+import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+import { cva } from 'class-variance-authority'
+
+export interface SidebarProps {
+ side?: 'left' | 'right'
+ variant?: 'sidebar' | 'floating' | 'inset'
+ collapsible?: 'offcanvas' | 'icon' | 'none'
+ class?: HTMLAttributes['class']
+}
+
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+
+export { useSidebar } from './utils'
+
+export const sidebarMenuButtonVariants = cva(
+ 'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
+ {
+ variants: {
+ variant: {
+ default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+ outline: 'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+ },
+ size: {
+ default: 'h-8 text-sm',
+ sm: 'h-7 text-xs',
+ lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+)
+
+export type SidebarMenuButtonVariants = VariantProps
diff --git a/amll-local/packages/playground/core/src/components/ui/sidebar/utils.ts b/amll-local/packages/playground/core/src/components/ui/sidebar/utils.ts
new file mode 100644
index 0000000..9a352b4
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/sidebar/utils.ts
@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '20rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+ state: ComputedRef<'expanded' | 'collapsed'>
+ open: Ref
+ setOpen: (value: boolean) => void
+ isMobile: Ref
+ openMobile: Ref
+ setOpenMobile: (value: boolean) => void
+ toggleSidebar: () => void
+}>('Sidebar')
diff --git a/amll-local/packages/playground/core/src/components/ui/skeleton/Skeleton.vue b/amll-local/packages/playground/core/src/components/ui/skeleton/Skeleton.vue
new file mode 100644
index 0000000..26c7c45
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/skeleton/Skeleton.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/skeleton/index.ts b/amll-local/packages/playground/core/src/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..be21fad
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue'
diff --git a/amll-local/packages/playground/core/src/components/ui/slider/Slider.vue b/amll-local/packages/playground/core/src/components/ui/slider/Slider.vue
new file mode 100644
index 0000000..b31ed22
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/slider/Slider.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/slider/index.ts b/amll-local/packages/playground/core/src/components/ui/slider/index.ts
new file mode 100644
index 0000000..1c945de
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/slider/index.ts
@@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue'
diff --git a/amll-local/packages/playground/core/src/components/ui/switch/Switch.vue b/amll-local/packages/playground/core/src/components/ui/switch/Switch.vue
new file mode 100644
index 0000000..db35b03
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/switch/Switch.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/switch/index.ts b/amll-local/packages/playground/core/src/components/ui/switch/index.ts
new file mode 100644
index 0000000..87b4b17
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'
diff --git a/amll-local/packages/playground/core/src/components/ui/tabs/Tabs.vue b/amll-local/packages/playground/core/src/components/ui/tabs/Tabs.vue
new file mode 100644
index 0000000..7505f12
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/tabs/Tabs.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/tabs/TabsContent.vue b/amll-local/packages/playground/core/src/components/ui/tabs/TabsContent.vue
new file mode 100644
index 0000000..ca78a0f
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/tabs/TabsContent.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/tabs/TabsList.vue b/amll-local/packages/playground/core/src/components/ui/tabs/TabsList.vue
new file mode 100644
index 0000000..a8b1b7c
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/tabs/TabsList.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/tabs/TabsTrigger.vue b/amll-local/packages/playground/core/src/components/ui/tabs/TabsTrigger.vue
new file mode 100644
index 0000000..7c1e25b
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/tabs/index.ts b/amll-local/packages/playground/core/src/components/ui/tabs/index.ts
new file mode 100644
index 0000000..62f5266
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/tabs/index.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
+
+export const tabsListVariants = cva(
+ 'rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col',
+ {
+ variants: {
+ variant: {
+ default: 'bg-muted',
+ line: 'gap-1 bg-transparent',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ },
+)
+
+export type TabsListVariants = VariantProps
diff --git a/amll-local/packages/playground/core/src/components/ui/tooltip/Tooltip.vue b/amll-local/packages/playground/core/src/components/ui/tooltip/Tooltip.vue
new file mode 100644
index 0000000..a531d43
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/tooltip/Tooltip.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/tooltip/TooltipContent.vue b/amll-local/packages/playground/core/src/components/ui/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..c726149
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/tooltip/TooltipProvider.vue b/amll-local/packages/playground/core/src/components/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000..8cc971f
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/tooltip/TooltipTrigger.vue b/amll-local/packages/playground/core/src/components/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000..59f16b6
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/amll-local/packages/playground/core/src/components/ui/tooltip/index.ts b/amll-local/packages/playground/core/src/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..5ab9653
--- /dev/null
+++ b/amll-local/packages/playground/core/src/components/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
diff --git a/amll-local/packages/playground/core/src/lib/extract-cover.ts b/amll-local/packages/playground/core/src/lib/extract-cover.ts
new file mode 100644
index 0000000..aa969df
--- /dev/null
+++ b/amll-local/packages/playground/core/src/lib/extract-cover.ts
@@ -0,0 +1,15 @@
+import { parseBlob, selectCover } from "music-metadata";
+
+export async function extractCoverBlob(file: File): Promise {
+ const metadata = await parseBlob(file, { skipCovers: false });
+ const cover = selectCover(metadata.common.picture);
+ if (!cover) return null;
+
+ const data = new Uint8Array(cover.data);
+ return new Blob(
+ [data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength)],
+ {
+ type: cover.format,
+ },
+ );
+}
diff --git a/amll-local/packages/playground/core/src/lib/utils.ts b/amll-local/packages/playground/core/src/lib/utils.ts
new file mode 100644
index 0000000..d39aff9
--- /dev/null
+++ b/amll-local/packages/playground/core/src/lib/utils.ts
@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/amll-local/packages/playground/core/src/main.ts b/amll-local/packages/playground/core/src/main.ts
new file mode 100644
index 0000000..babfa31
--- /dev/null
+++ b/amll-local/packages/playground/core/src/main.ts
@@ -0,0 +1,7 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+
+import "./assets/index.tailwind.css";
+
+createApp(App).use(createPinia()).mount("#app");
diff --git a/amll-local/packages/playground/core/src/runtime/audio.ts b/amll-local/packages/playground/core/src/runtime/audio.ts
new file mode 100644
index 0000000..4c3c2f3
--- /dev/null
+++ b/amll-local/packages/playground/core/src/runtime/audio.ts
@@ -0,0 +1,131 @@
+import type { usePlayerStore } from "@/stores/player";
+
+type PlayerStore = ReturnType;
+
+class AudioRuntime {
+ private readonly audio = document.createElement("audio");
+ private store: PlayerStore | undefined;
+ private source = "";
+
+ constructor() {
+ this.audio.preload = "auto";
+ this.audio.volume = 0.5;
+ this.audio.style.display = "none";
+ this.audio.addEventListener("play", this.onPlay);
+ this.audio.addEventListener("pause", this.onPause);
+ this.audio.addEventListener("ended", this.onEnded);
+ this.audio.addEventListener("loadedmetadata", this.onLoadedMetadata);
+ this.audio.addEventListener("durationchange", this.onLoadedMetadata);
+ this.audio.addEventListener("error", this.onError);
+ }
+
+ private readonly onPlay = (): void => {
+ this.store?.setPlaying(true);
+ };
+
+ private readonly onPause = (): void => {
+ this.store?.setPlaying(false);
+ };
+
+ private readonly onEnded = (): void => {
+ this.store?.syncCurrentTime(this.audio.duration);
+ this.store?.setPlaying(false);
+ };
+
+ private readonly onLoadedMetadata = (): void => {
+ this.store?.setDuration(this.audio.duration);
+ };
+
+ private readonly onError = (): void => {
+ this.store?.setPlaying(false);
+ this.store?.setAudioError("音频加载失败");
+ };
+
+ attachStore(store: PlayerStore): void {
+ this.store = store;
+ }
+
+ mount(host: HTMLElement): void {
+ if (this.audio.parentElement !== host) {
+ host.appendChild(this.audio);
+ }
+ }
+
+ setSource(source: string): void {
+ const normalizedSource = source.trim();
+ this.store?.setAudioError("");
+
+ if (!normalizedSource) {
+ this.source = "";
+ this.audio.pause();
+ this.audio.removeAttribute("src");
+ this.audio.load();
+ this.store?.setDuration(0);
+ return;
+ }
+
+ if (this.source === normalizedSource) return;
+
+ const shouldResume = this.store?.audio.playing ?? !this.audio.paused;
+ this.source = normalizedSource;
+ this.audio.src = normalizedSource;
+ this.audio.load();
+ if (shouldResume) void this.setPlaying(true);
+ }
+
+ async setPlaying(playing: boolean): Promise {
+ if (!playing) {
+ this.audio.pause();
+ return;
+ }
+
+ if (!this.audio.src) return;
+
+ if (this.audio.ended) {
+ this.store?.seek(0);
+ }
+
+ try {
+ await this.audio.play();
+ this.store?.setAudioError("");
+ } catch (error) {
+ this.store?.setPlaying(false);
+ this.store?.setAudioError(
+ error instanceof Error ? error.message : String(error),
+ );
+ }
+ }
+
+ seek(time: number): void {
+ if (Number.isFinite(time)) {
+ this.audio.currentTime = Math.max(0, time);
+ }
+ }
+
+ get currentTime(): number {
+ return this.audio.currentTime;
+ }
+
+ get isPaused(): boolean {
+ return this.audio.paused;
+ }
+}
+
+type HotData = {
+ audioRuntime?: AudioRuntime;
+};
+
+const hotData = import.meta.hot?.data as HotData | undefined;
+
+export const audioRuntime = hotData?.audioRuntime ?? new AudioRuntime();
+
+if (hotData?.audioRuntime) {
+ Object.setPrototypeOf(audioRuntime, AudioRuntime.prototype);
+}
+
+if (import.meta.hot) {
+ import.meta.hot.accept();
+ import.meta.hot.dispose((data: HotData) => {
+ data.audioRuntime = audioRuntime;
+ });
+}
diff --git a/amll-local/packages/playground/core/src/runtime/background.ts b/amll-local/packages/playground/core/src/runtime/background.ts
new file mode 100644
index 0000000..bd48c77
--- /dev/null
+++ b/amll-local/packages/playground/core/src/runtime/background.ts
@@ -0,0 +1,121 @@
+import {
+ BackgroundRender,
+ MeshGradientRenderer,
+ PixiRenderer,
+} from "@applemusic-like-lyrics/core";
+import type { BackgroundRendererMode, usePlayerStore } from "@/stores/player";
+
+type PlayerStore = ReturnType;
+type PlayerBackground =
+ | BackgroundRender
+ | BackgroundRender;
+
+class BackgroundRuntime {
+ private background: PlayerBackground | undefined;
+ private renderer: BackgroundRendererMode | undefined;
+ private albumKey = "";
+ private albumLoadRevision = 0;
+
+ mount(
+ host: HTMLElement,
+ renderer: BackgroundRendererMode,
+ before?: HTMLElement | null,
+ ): void {
+ this.ensureRenderer(renderer);
+ const element = this.background?.getElement();
+ if (!element) return;
+ if (element.parentElement !== host || element.nextSibling !== before) {
+ host.insertBefore(element, before ?? null);
+ }
+ }
+
+ ensureRenderer(renderer: BackgroundRendererMode): void {
+ if (this.background && this.renderer === renderer) return;
+
+ this.background?.dispose();
+ this.background =
+ renderer === "pixi"
+ ? BackgroundRender.new(PixiRenderer)
+ : BackgroundRender.new(MeshGradientRenderer);
+ this.renderer = renderer;
+ this.albumKey = "";
+
+ const element = this.background.getElement();
+ Object.assign(element.style, {
+ position: "absolute",
+ inset: "0",
+ width: "100%",
+ height: "100%",
+ zIndex: "0",
+ pointerEvents: "none",
+ });
+ }
+
+ applySettings(store: PlayerStore): void {
+ const background = this.background;
+ if (!background) return;
+
+ background.setFPS(store.background.fps);
+ background.setRenderScale(store.background.scale);
+ background.setFlowSpeed(store.background.flowSpeed);
+ background.setStaticMode(store.background.staticMode);
+ if (store.background.playing) background.resume();
+ else background.pause();
+ }
+
+ setHasLyric(hasLyric: boolean): void {
+ this.background?.setHasLyric(hasLyric);
+ }
+
+ async loadAlbum(store: PlayerStore): Promise {
+ const background = this.background;
+ const source = store.source.albumUrl.trim();
+ const key = `${source}\0${store.source.albumName}\0${store.source.albumRevision}`;
+
+ if (!background || !source) {
+ this.albumKey = key;
+ store.setBackgroundError("");
+ return;
+ }
+
+ if (this.albumKey === key) return;
+
+ this.albumKey = key;
+ const revision = ++this.albumLoadRevision;
+ store.setBackgroundError("");
+
+ try {
+ const sourceName = store.source.albumName || source;
+ await background.setAlbum(source, isVideoAlbumSource(sourceName));
+ } catch (error) {
+ if (revision !== this.albumLoadRevision) return;
+ store.setBackgroundError(
+ error instanceof Error ? error.message : String(error),
+ );
+ }
+ }
+}
+
+function isVideoAlbumSource(source: string): boolean {
+ return /\.(mp4|webm|ogg|ogv|mov|m4v)(?:[?#].*)?$/i.test(source);
+}
+
+type HotData = {
+ backgroundRuntime?: BackgroundRuntime;
+};
+
+const hotData = import.meta.hot?.data as HotData | undefined;
+
+export const backgroundRuntime =
+ hotData?.backgroundRuntime ?? new BackgroundRuntime();
+
+if (hotData?.backgroundRuntime) {
+ Object.setPrototypeOf(backgroundRuntime, BackgroundRuntime.prototype);
+}
+
+if (import.meta.hot) {
+ import.meta.hot.accept();
+ import.meta.hot.dispose((data: HotData) => {
+ data.backgroundRuntime = backgroundRuntime;
+ });
+}
diff --git a/amll-local/packages/playground/core/src/stores/player.ts b/amll-local/packages/playground/core/src/stores/player.ts
new file mode 100644
index 0000000..82eb159
--- /dev/null
+++ b/amll-local/packages/playground/core/src/stores/player.ts
@@ -0,0 +1,193 @@
+import { defineStore } from "pinia";
+
+export type BackgroundRendererMode = "mg" | "pixi";
+
+export interface SpringParams {
+ mass: number;
+ damping: number;
+ stiffness: number;
+ soft: boolean;
+}
+
+const query = new URLSearchParams(globalThis.location?.search ?? "");
+
+function revokeObjectUrl(url: string): void {
+ if (url) URL.revokeObjectURL(url);
+}
+
+function clampTime(time: number, duration: number): number {
+ const safeTime = Number.isFinite(time) ? time : 0;
+ const safeDuration = Number.isFinite(duration) && duration > 0 ? duration : 0;
+ return Math.min(Math.max(0, safeTime), safeDuration);
+}
+
+export const usePlayerStore = defineStore("player", {
+ state: () => ({
+ source: {
+ lyricUrl: query.get("lyric") ?? "",
+ lyricName: query.get("lyric") ?? "",
+ lyricRevision: 0,
+ musicUrl: query.get("music") ?? "",
+ musicName: query.get("music") ?? "",
+ albumUrl: query.get("album") ?? "",
+ albumName: query.get("album") ?? "",
+ albumRevision: 0,
+ },
+ localObjectUrls: {
+ lyric: "",
+ music: "",
+ album: "",
+ extractedAlbum: "",
+ },
+ audio: {
+ currentTime: 0,
+ duration: 0,
+ playing: false,
+ seekRevision: 0,
+ error: "",
+ },
+ lyric: {
+ loading: false,
+ error: "",
+ fadeWidth: 0.5,
+ enableBlur: true,
+ enableSpring: true,
+ fontFamily: "",
+ fontWeight: 600,
+ verticalSpring: {
+ mass: 1,
+ damping: 15,
+ stiffness: 100,
+ soft: false,
+ } satisfies SpringParams,
+ scaleSpring: {
+ mass: 1,
+ damping: 20,
+ stiffness: 100,
+ soft: false,
+ } satisfies SpringParams,
+ },
+ background: {
+ playing: true,
+ staticMode: false,
+ renderer: (query.get("bg") === "pixi"
+ ? "pixi"
+ : "mg") as BackgroundRendererMode,
+ scale: 1,
+ fps: 60,
+ flowSpeed: 0.2,
+ error: "",
+ },
+ }),
+ actions: {
+ setLyricUrl(url: string): void {
+ if (url !== this.localObjectUrls.lyric) {
+ revokeObjectUrl(this.localObjectUrls.lyric);
+ this.localObjectUrls.lyric = "";
+ }
+ this.source.lyricUrl = url;
+ this.source.lyricName = url;
+ },
+ setMusicUrl(url: string): void {
+ if (url !== this.localObjectUrls.music) {
+ revokeObjectUrl(this.localObjectUrls.music);
+ this.localObjectUrls.music = "";
+ }
+ this.source.musicUrl = url;
+ this.source.musicName = url;
+ },
+ setAlbumUrl(url: string): void {
+ if (url !== this.localObjectUrls.album) {
+ revokeObjectUrl(this.localObjectUrls.album);
+ this.localObjectUrls.album = "";
+ }
+ if (url !== this.localObjectUrls.extractedAlbum) {
+ revokeObjectUrl(this.localObjectUrls.extractedAlbum);
+ this.localObjectUrls.extractedAlbum = "";
+ }
+ this.source.albumUrl = url;
+ this.source.albumName = url;
+ },
+ setLocalLyricFile(file: File): void {
+ revokeObjectUrl(this.localObjectUrls.lyric);
+ const url = URL.createObjectURL(file);
+ this.localObjectUrls.lyric = url;
+ this.source.lyricUrl = url;
+ this.source.lyricName = file.name;
+ },
+ setLocalMusicFile(file: File): void {
+ revokeObjectUrl(this.localObjectUrls.music);
+ const url = URL.createObjectURL(file);
+ this.localObjectUrls.music = url;
+ this.source.musicUrl = url;
+ this.source.musicName = file.name;
+ },
+ setLocalAlbumFile(file: File): void {
+ revokeObjectUrl(this.localObjectUrls.album);
+ const url = URL.createObjectURL(file);
+ this.localObjectUrls.album = url;
+ this.source.albumUrl = url;
+ this.source.albumName = file.name;
+ },
+ setExtractedAlbumBlob(blob: Blob, name: string): void {
+ revokeObjectUrl(this.localObjectUrls.extractedAlbum);
+ const url = URL.createObjectURL(blob);
+ this.localObjectUrls.extractedAlbum = url;
+ this.source.albumUrl = url;
+ this.source.albumName = name;
+ },
+ clearExtractedAlbum(): void {
+ if (this.source.albumUrl === this.localObjectUrls.extractedAlbum) {
+ this.source.albumUrl = "";
+ this.source.albumName = "";
+ }
+ revokeObjectUrl(this.localObjectUrls.extractedAlbum);
+ this.localObjectUrls.extractedAlbum = "";
+ },
+ reloadLyric(): void {
+ this.source.lyricRevision += 1;
+ },
+ reloadAlbum(): void {
+ this.source.albumRevision += 1;
+ },
+ disposeLocalObjectUrls(): void {
+ revokeObjectUrl(this.localObjectUrls.lyric);
+ revokeObjectUrl(this.localObjectUrls.music);
+ revokeObjectUrl(this.localObjectUrls.album);
+ revokeObjectUrl(this.localObjectUrls.extractedAlbum);
+ this.localObjectUrls.lyric = "";
+ this.localObjectUrls.music = "";
+ this.localObjectUrls.album = "";
+ this.localObjectUrls.extractedAlbum = "";
+ },
+ togglePlayback(): void {
+ this.audio.playing = !this.audio.playing;
+ },
+ setPlaying(playing: boolean): void {
+ this.audio.playing = playing;
+ },
+ seek(time: number): void {
+ this.audio.currentTime = clampTime(time, this.audio.duration);
+ this.audio.seekRevision += 1;
+ },
+ syncCurrentTime(time: number): void {
+ this.audio.currentTime = clampTime(time, this.audio.duration);
+ },
+ setDuration(duration: number): void {
+ this.audio.duration =
+ Number.isFinite(duration) && duration > 0 ? duration : 0;
+ },
+ setAudioError(error: string): void {
+ this.audio.error = error;
+ },
+ setLyricLoading(loading: boolean): void {
+ this.lyric.loading = loading;
+ },
+ setLyricError(error: string): void {
+ this.lyric.error = error;
+ },
+ setBackgroundError(error: string): void {
+ this.background.error = error;
+ },
+ },
+});
diff --git a/amll-local/packages/playground/core/src/vite-env.d.ts b/amll-local/packages/playground/core/src/vite-env.d.ts
new file mode 100644
index 0000000..e63dbbb
--- /dev/null
+++ b/amll-local/packages/playground/core/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+/// AMLL React Wrapper Test
+
+
+
diff --git a/amll-local/packages/playground/react-full/package.json b/amll-local/packages/playground/react-full/package.json
new file mode 100644
index 0000000..c400408
--- /dev/null
+++ b/amll-local/packages/playground/react-full/package.json
@@ -0,0 +1,39 @@
+{
+ "name": "@applemusic-like-lyrics/playground-react-full",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "nx": {
+ "tags": [
+ "playground"
+ ]
+ },
+ "scripts": {
+ "dev": "vite dev"
+ },
+ "devDependencies": {
+ "@applemusic-like-lyrics/core": "workspace:^",
+ "@applemusic-like-lyrics/lyric": "workspace:^",
+ "@applemusic-like-lyrics/react": "workspace:^",
+ "@applemusic-like-lyrics/react-full": "workspace:^",
+ "@pixi/app": "^7.4.3",
+ "@pixi/core": "^7.4.3",
+ "@pixi/display": "^7.4.3",
+ "@pixi/filter-blur": "^7.4.3",
+ "@pixi/filter-color-matrix": "^7.4.3",
+ "@pixi/sprite": "^7.4.3",
+ "@types/react": "catalog:",
+ "@types/react-dom": "catalog:",
+ "@vitejs/plugin-react": "catalog:",
+ "react": "catalog:",
+ "react-dom": "catalog:",
+ "vite": "catalog:",
+ "vite-plugin-svgr": "^5.2.0"
+ },
+ "dependencies": {
+ "@radix-ui/themes": "^3.3.0",
+ "@types/jsmediatags": "^3.9.6",
+ "jotai": "^2.19.1",
+ "jsmediatags": "^3.9.7"
+ }
+}
diff --git a/amll-local/packages/playground/react-full/prebuilt.html b/amll-local/packages/playground/react-full/prebuilt.html
new file mode 100644
index 0000000..58ad4ae
--- /dev/null
+++ b/amll-local/packages/playground/react-full/prebuilt.html
@@ -0,0 +1,33 @@
+
+
+
+ AMLL React Wrapper Test
+
+
+
diff --git a/amll-local/packages/playground/react-full/src/test-prebuilt.tsx b/amll-local/packages/playground/react-full/src/test-prebuilt.tsx
new file mode 100644
index 0000000..1d96905
--- /dev/null
+++ b/amll-local/packages/playground/react-full/src/test-prebuilt.tsx
@@ -0,0 +1,245 @@
+import { ContextMenu, Theme } from "@radix-ui/themes";
+import { Provider, useStore } from "jotai";
+import {
+ type FC,
+ useCallback,
+ useEffect,
+ useLayoutEffect,
+ useRef,
+ useState,
+} from "react";
+import { createRoot } from "react-dom/client";
+import { PrebuiltLyricPlayer } from "@react-full/components/PrebuiltLyricPlayer";
+import "@radix-ui/themes/styles.css";
+import type { LyricLine } from "@applemusic-like-lyrics/core";
+import {
+ parseLrc,
+ parseLys,
+ parseQrc,
+ parseTTML,
+ parseYrc,
+ type LyricLine as RawLyricLine,
+} from "@applemusic-like-lyrics/lyric";
+import { onRequestOpenMenuAtom } from "@react-full/states/callbacks";
+import { hideLyricViewAtom } from "@react-full/states/configAtoms";
+import {
+ musicAlbumNameAtom,
+ musicArtistsAtom,
+ musicCoverAtom,
+ musicLyricLinesAtom,
+ musicNameAtom,
+} from "@react-full/states/dataAtoms";
+import jsmediatags from "jsmediatags";
+
+const mapLyric = (
+ line: RawLyricLine,
+ _i: number,
+ _lines: RawLyricLine[],
+): LyricLine => ({
+ words: line.words.map((w) => ({ ...w, obscene: false })),
+ startTime: line.words[0]?.startTime ?? 0,
+ endTime:
+ line.words[line.words.length - 1]?.endTime ?? Number.POSITIVE_INFINITY,
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+});
+
+const App: FC = () => {
+ const [hideLyric, setHideLyric] = useState(false);
+ const audioRef = useRef(null);
+ const store = useStore();
+
+ useEffect(() => {
+ store.set(musicLyricLinesAtom, [
+ {
+ words: [
+ {
+ word: "Test",
+ startTime: 0,
+ endTime: 1000,
+ romanWord: "",
+ },
+ ],
+ startTime: 0,
+ endTime: 1000,
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+ }, [store]);
+
+ useEffect(() => {
+ store.set(hideLyricViewAtom, hideLyric);
+ }, [hideLyric, store]);
+
+ const onRequestOpenMenu = useCallback(() => {
+ const inputEl = document.createElement("input");
+ inputEl.type = "file";
+ inputEl.accept = "audio/*";
+ inputEl.onchange = (e) => {
+ const files = (e.target as HTMLInputElement).files;
+ if (!files) return;
+ const file = files[0];
+ jsmediatags.read(file, {
+ onSuccess(tag) {
+ console.log("tag read", tag);
+ const title: string = tag.tags?.title ?? file.name ?? "未知歌曲";
+ const album: string = tag.tags?.album ?? "未知专辑";
+ const artist: string = tag.tags?.artist ?? "未知作者";
+ // const lyrics: string = tag.tags?.lyrics ?? "";
+ store.set(musicNameAtom, title);
+ store.set(musicAlbumNameAtom, album);
+ store.set(musicArtistsAtom, [{ name: artist, id: "unknown" }]);
+ if ("picture" in tag.tags && tag.tags.picture) {
+ const { data, format } = tag.tags.picture;
+ let base64String = "";
+ for (let i = 0; i < data.length; i++) {
+ base64String += String.fromCharCode(data[i]);
+ }
+ const imgUrl = `data:${format};base64,${window.btoa(base64String)}`;
+ store.set(musicCoverAtom, imgUrl);
+ }
+ },
+ onError(error) {
+ console.log(error);
+ },
+ });
+ };
+ inputEl.click();
+ }, [store]);
+
+ const loadLyric = useCallback(
+ (format: "yrc" | "qrc" | "ttml" | "lrc" | "lys" | "") => {
+ let accept: string;
+ switch (format) {
+ case "yrc":
+ accept = ".yrc";
+ break;
+ case "qrc":
+ accept = ".qrc";
+ break;
+ case "ttml":
+ accept = ".ttml";
+ break;
+ case "lrc":
+ accept = ".lrc";
+ break;
+ case "lys":
+ accept = ".lys";
+ break;
+ default:
+ accept = "";
+ store.set(musicLyricLinesAtom, []);
+ return;
+ }
+ const inputEl = document.createElement("input");
+ inputEl.type = "file";
+ inputEl.accept = accept;
+ inputEl.onchange = async (e) => {
+ const files = (e.target as HTMLInputElement).files;
+ if (!files) return;
+ const file = files[0];
+ const raw = await file.text();
+ let lines: RawLyricLine[];
+ switch (format) {
+ case "yrc":
+ lines = parseYrc(raw);
+ break;
+ case "qrc":
+ lines = parseQrc(raw);
+ break;
+ case "ttml":
+ lines = parseTTML(raw).lines;
+ break;
+ case "lrc":
+ lines = parseLrc(raw);
+ break;
+ case "lys":
+ lines = parseLys(raw);
+ break;
+ }
+ store.set(musicLyricLinesAtom, lines.map(mapLyric));
+ };
+ inputEl.click();
+ },
+ [store],
+ );
+
+ useLayoutEffect(() => {}, []);
+
+ useLayoutEffect(() => {
+ store.set(onRequestOpenMenuAtom, {
+ onEmit: onRequestOpenMenu,
+ });
+ }, [store, onRequestOpenMenu]);
+
+ return (
+ <>
+
+
+
+
+ AMLL React 框架示例
+
+ 打开音乐文件
+
+ setHideLyric(!e)}
+ >
+ 显示歌词
+
+
+ 设置歌词
+
+ loadLyric("")}>
+ 空歌词
+
+ loadLyric("ttml")}>
+ TTML 歌词
+
+ loadLyric("lys")}>
+ Lyricify Syllable 歌词
+
+ loadLyric("lrc")}>
+ LyRiC 歌词
+
+ loadLyric("yrc")}>
+ YRC 歌词
+
+ loadLyric("qrc")}>
+ QRC 歌词
+
+
+
+
+
+
+ );
+};
+
+createRoot(document.getElementById("root") as HTMLElement).render(
+
+
+
+ ,
+);
diff --git a/amll-local/packages/playground/react-full/src/test.tsx b/amll-local/packages/playground/react-full/src/test.tsx
new file mode 100644
index 0000000..e425f98
--- /dev/null
+++ b/amll-local/packages/playground/react-full/src/test.tsx
@@ -0,0 +1,167 @@
+import { Provider, useStore } from "jotai";
+import { type FC, useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { PrebuiltLyricPlayer } from "@react-full/components/PrebuiltLyricPlayer";
+import { HorizontalLayout } from "@react-full/layout/horizontal";
+import { VerticalLayout } from "@react-full/layout/vertical";
+import { hideLyricViewAtom } from "@react-full/states/configAtoms";
+import { musicLyricLinesAtom } from "@react-full/states/dataAtoms";
+
+const App: FC = () => {
+ const [hideLyric, setHideLyric] = useState(false);
+ const store = useStore();
+
+ useEffect(() => {
+ store.set(musicLyricLinesAtom, [
+ {
+ words: [
+ {
+ word: "Test",
+ startTime: 0,
+ endTime: 1000,
+ romanWord: "",
+ },
+ ],
+ startTime: 0,
+ endTime: 1000,
+ translatedLyric: "",
+ romanLyric: "",
+ isBG: false,
+ isDuet: false,
+ },
+ ]);
+ }, [store]);
+
+ useEffect(() => {
+ store.set(hideLyricViewAtom, hideLyric);
+ }, [hideLyric, store]);
+
+ return (
+ <>
+ AMLL React Framework gallery
+ Go to Prebuilt Player
+ Prebuilt Player
+ Horizontal Layout
+
+
+
+ {hideLyric ? "Lyric is hidden" : "Lyric is shown"}
+
+
+ }
+ coverSlot={
+
+ Cover slot
+
+ }
+ controlsSlot={
+
+ Controls slot
+
+ }
+ lyricSlot={
+
+ Lyric slot
+
+ }
+ hideLyric={hideLyric}
+ />
+
Vertical Layout
+
+
+
+ }
+ coverSlot={
+
+ Cover slot
+
+ }
+ smallControlsSlot={
+
+ Small Controls slot
+
+ }
+ bigControlsSlot={
+
+ Big Controls slot
+
+ }
+ lyricSlot={
+
+ Lyric slot
+
+ }
+ hideLyric={hideLyric}
+ />
+