pixel-daylight-switch-gsvegetable 1.3.1 → 2.1.0

package/README.md

@@ -1,433 +1,207 @@
 # Pixel Daylight Switch
 
-一个可以拖动的像素昼夜开关组件。拖动玻璃滑块，场景会从白天流动到夜晚；像素小人生活在开关内部，随着时间变化活动。
+[![Quality checks](https://github.com/GSvegetable/pixel-daylight-switch/actions/workflows/ci.yml/badge.svg)](https://github.com/GSvegetable/pixel-daylight-switch/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/pixel-daylight-switch-gsvegetable)](https://www.npmjs.com/package/pixel-daylight-switch-gsvegetable)
+[![License: Unlicense](https://img.shields.io/badge/license-Unlicense-blue.svg)](LICENSE)
 
-<p align="center">
-  <a href="https://gsvegetable.github.io/pixel-daylight-switch/">在线演示</a> ·
-  <a href="https://gsvegetable.github.io/pixel-daylight-switch/playground.html">参数实验室 Playground</a> ·
-  <a href="https://github.com/GSvegetable/pixel-daylight-switch/releases">版本发布</a>
-</p>
+**Languages:** [English](README.md) · [简体中文](README.zh-CN.md) · [日本語](README.ja.md)
 
-<p align="center">
-  <img src="https://github.com/user-attachments/assets/f7f248a5-c39c-432c-92f6-73237abdfe6b" width="49%" alt="白天模式" />
-  <img src="https://github.com/user-attachments/assets/b2e24e65-a378-4ac6-be7b-efd3070e4da8" width="49%" alt="夜晚模式" />
-</p>
+![Five animated pixel-world scenes](assets/scene-gallery.png)
 
-**中文文档在前，English documentation is below.** [跳转到 English](#english)
+*A tiny animated world, held inside a refractive glass switch.*
 
-## 目录
+Pixel Daylight Switch is a draggable day/night UI component. Move its glass control to travel between day, dusk and night while a miniature pixel-art world changes inside the lens. It uses vanilla JavaScript, WebGL2 and a Canvas 2D fallback, with no third-party runtime dependency.
 
-- [快速开始](#快速开始)
-- [参数实验室](#参数实验室-playground)
-- [HTML 参数配置](#html-参数配置)
-- [交互与页面主题](#交互与页面主题)
-- [自定义外观](#自定义外观)
-- [动态挂载](#动态挂载)
-- [兼容性与本地开发](#兼容性与本地开发)
-- [更新记录](#更新记录)
-- [许可证](#许可证)
+**[Open the live demo](https://gsvegetable.github.io/pixel-daylight-switch/)** · **[Launch the parameter lab](https://gsvegetable.github.io/pixel-daylight-switch/playground.html)** · **[Install from npm](https://www.npmjs.com/package/pixel-daylight-switch-gsvegetable)**
 
-## 快速开始
+## Start here
 
-无需 npm、依赖安装或构建步骤。把下面两行放进 HTML：
+| Goal | Direct link |
+| --- | --- |
+| Experience the switch | [Live demo](https://gsvegetable.github.io/pixel-daylight-switch/) |
+| Customize scenes and visual behavior | [Interactive parameter lab](https://gsvegetable.github.io/pixel-daylight-switch/playground.html) |
+| Inspect the component | [Preview page](https://gsvegetable.github.io/pixel-daylight-switch/preview.html) |
+| Add it to a website with one script | [Embed loader source](embed.js) |
+| Use it in a JavaScript project | [npm package](https://www.npmjs.com/package/pixel-daylight-switch-gsvegetable) |
+| Read implementation details | [Runtime](app.js) · [Styles](style.css) |
+| Download mobile builds | [Build notes and limitations](builds/README.md) · [GitHub Actions artifacts](https://github.com/GSvegetable/pixel-daylight-switch/actions/workflows/mobile-build.yml) |
+| Check tests | [CI workflow](https://github.com/GSvegetable/pixel-daylight-switch/actions/workflows/ci.yml) |
+| Review changes | [Changelog](CHANGELOG.md) |
+| Report a bug | [Issue tracker](https://github.com/GSvegetable/pixel-daylight-switch/issues) |
 
-```html
-<div data-ld-part="toggle-daylight"></div>
-<script src="https://gsvegetable.github.io/pixel-daylight-switch/app.js"></script>
-```
-
-脚本会自动创建组件内部的 Canvas、交互区域和辅助无障碍元素。组件宽度跟随父容器，高度保持固定比例。一个页面可以放置多个独立实例。
-
-如果你需要离线部署，也可以直接下载仓库中的 `app.js` 并自行托管。
-
-### 使用 NPM
-
-适合 Vite、Webpack、Rspack 等构建项目：
-
-```bash
-npm install pixel-daylight-switch-gsvegetable
-```
-
-**原生 JavaScript / ESM**
-
-```js
-import PixelDaylightSwitch from 'pixel-daylight-switch-gsvegetable';
-
-const root = document.querySelector('[data-ld-part="toggle-daylight"]');
-PixelDaylightSwitch.mount(root);
-
-// 页面卸载或组件移除前
-PixelDaylightSwitch.unmount(root);
-```
-
-**React**
-
-```jsx
-import { useEffect, useRef } from 'react';
-import PixelDaylightSwitch from 'pixel-daylight-switch-gsvegetable';
-
-export function DaylightSwitch() {
-  const rootRef = useRef(null);
-
-  useEffect(() => {
-    const root = rootRef.current;
-    PixelDaylightSwitch.mount(root);
-    return () => PixelDaylightSwitch.unmount(root);
-  }, []);
-
-  return <div ref={rootRef} data-ld-part="toggle-daylight" />;
-}
-```
-
-**Vue 3**
-
-```vue
-<script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import PixelDaylightSwitch from 'pixel-daylight-switch-gsvegetable';
-
-const root = ref(null);
-onMounted(() => PixelDaylightSwitch.mount(root.value));
-onBeforeUnmount(() => PixelDaylightSwitch.unmount(root.value));
-</script>
+## Features
 
-<template>
-  <div ref="root" data-ld-part="toggle-daylight"></div>
-</template>
-```
-
-NPM 入口同时提供 CommonJS 与 ESM。导入在服务端渲染环境中不会访问 DOM；实际挂载应在浏览器端执行。
-
-## 参数实验室 Playground
-
-**不想手动试参数？打开 [Pixel Daylight Playground](https://gsvegetable.github.io/pixel-daylight-switch/playground.html)。**
-
-- 左侧实时预览组件，直接拖动开关测试手感。
-- 右侧按「运动反馈、玻璃光学、世界节奏、场景环境」四组调整参数。
-- 使用场景预设快速切换乡村小屋、日本街道、现代公寓、海边灯塔和山间木屋。
-- 调整参数时只更新数值；点击「应用参数」后才刷新独立预览，避免拖动滑块时反复重建 WebGL。
-- 预览运行在独立页面中，与控制面板隔离，减少渲染状态互相干扰。
-
-Playground 是独立页面，不会改变组件本身的零依赖接入方式。
-
-## HTML 参数配置
-
-所有参数都写在组件容器的 `data-*` 属性上。每个实例可以使用不同配置。参数可省略；缺失、空值或无效数值会回退到默认值。
+- Five scenes: countryside, Japanese street, modern apartment, seaside lighthouse and mountain cabin.
+- Refractive glass rendering with WebGL2 and a Canvas 2D fallback.
+- Continuous drag interaction, tap/click switching and keyboard operation.
+- Configurable motion, inertia, bounce, refraction, glass details, world speed, weather and scene.
+- Multiple independent instances on one page.
+- Switch semantics, live status announcements and `prefers-reduced-motion` support.
+- `mount()` and `unmount()` lifecycle methods for dynamic applications.
+- Rendering pauses when the document is hidden or the component is outside the viewport.
 
-### 全部参数
+## Quick start — browser, no build step
 
-| HTML 属性 | 默认值 | 作用 |
-| --- | ---: | --- |
-| `data-speed` | `9.5` | 开关运动的基础速度 |
-| `data-refraction` | `1.24` | 玻璃镜片的折射强度 |
-| `data-bezel` | `0.046` | 外框厚度系数，相对于开关高度 |
-| `data-start-night` | `false` | 设置为 `true` 时，初始化为夜晚状态 |
-| `data-friction` | `0.6` | 松手后的惯性阻尼，范围 `0.1–0.9`；越小越容易继续滑动 |
-| `data-bounce` | `3.2` | 滑块到达边缘时的回弹力度；越大弹性反馈越明显 |
-| `data-dispersion` | `0.05` | 玻璃边缘 RGB 色散强度，范围 `0–0.25`；设为 `0` 可关闭彩虹边 |
-| `data-shine` | `0.44` | 白天玻璃表面高光强度，范围 `0–1.5` |
-| `data-time-speed` | `1.0` | 像素世界时间倍率，范围 `0–8`；`0` 冻结世界动态，`2` 为两倍速度 |
-| `data-weather` | `default` | 天气预设：`default` 或 `snow`；雪天会出现飘落的像素雪花 |
-| `data-scene` | `countryside` | 世界场景：`countryside`、`japanese-street`、`apartment`、`seaside` 或 `mountain-cabin` |
-
-### 完整配置示例
+Place a mount point on your page and load the runtime:
 
 ```html
-<div
-  data-ld-part="toggle-daylight"
-  data-speed="12"
-  data-refraction="1.5"
-  data-bezel="0.05"
-  data-start-night="true"
-  data-friction="0.45"
-  data-bounce="4.2"
-  data-dispersion="0.12"
-  data-shine="0.6"
-  data-time-speed="1.5"
-  data-weather="snow"
-  data-scene="mountain-cabin"
-></div>
+<div data-ld-part="toggle-daylight" style="width: min(100%, 800px);">
+</div>
 
-<script src="https://gsvegetable.github.io/pixel-daylight-switch/app.js"></script>
+<script defer src="https://gsvegetable.github.io/pixel-daylight-switch/app.js"></script>
 ```
 
-### 参数分组与调校建议
-
-**运动反馈 / Motion**
-
-- `data-speed` 控制开关运动的基础速度。
-- `data-friction` 控制松手后的惯性衰减。较小的值更滑，较大的值更黏。
-- `data-bounce` 控制滑块触及边缘时的回弹力度。
-
-**玻璃光学 / Glass Optics**
+The browser runtime finds the mount point and creates the component UI. The host element needs a usable width.
 
-- `data-refraction` 控制镜片折射强度。
-- `data-bezel` 控制镜片外框厚度。
-- `data-dispersion` 控制边缘色散。数值越大，彩虹色边缘越明显。
-- `data-shine` 控制白天镜片高光。
+### Embed with one script
 
-**世界节奏 / World Rhythm**
-
-- `data-time-speed="0"` 可以冻结世界时间和动态。
-- `data-time-speed="2"` 会让世界模拟以两倍速度运行。
-- `data-weather="snow"` 开启飘雪；省略或填写其他值时使用默认天气。
-- `data-scene` 选择完整的像素环境：乡村、日本街道、公寓室内、海边或山间木屋。
-- `data-start-night="true"` 让组件从夜晚开始。
-
-### 默认值与兼容性
-
-场景、天气和初始昼夜状态归入「场景环境」；它们不是连续数值，因此使用选择器与开关，而不是滑动条。
-
-如果只写：
+For a self-inserting embed, add this script where you want the component to appear:
 
 ```html
-<div data-ld-part="toggle-daylight"></div>
+<script src="https://gsvegetable.github.io/pixel-daylight-switch/embed.js"></script>
 ```
 
-组件会使用默认参数。v1.2.0 的新增参数默认值与 v1.1.0 的原有参数保持一致，未配置新属性时不会主动改变原有视觉设定。数值参数会进行数字转换、有效性检查和范围限制；未知天气值回退到 `default`。
-
-## 交互与页面主题
-
-- **拖动**：拖动滑块，让世界从白天经过黄昏进入夜晚。
-- **点击**：点击开关，在白天和夜晚之间切换。
-- **键盘**：聚焦开关后使用方向键调整。
-- **无障碍**：使用 switch 语义，并尊重系统的减少动态效果偏好。
-
-组件会把当前夜晚程度写入根元素的 CSS 自定义属性 `--night`：
-
-- `0` 表示白天；
-- `1` 表示夜晚；
-- 中间值表示昼夜过渡。
+The loader inserts its own container, stylesheet and runtime. It currently creates one default instance with a fixed maximum display size; use the mount-point approach above when you need precise layout or custom attributes.
 
-例如，让页面背景跟随开关变化：
-
-```css
-body {
-  background: color-mix(
-    in srgb,
-    #f5ecd9,
-    #1b2146 calc(var(--night, 0) * 100%)
-  );
-}
-```
-
-如果只需要在昼夜状态变化时执行逻辑，可以监听事件：
-
-```js
-document.addEventListener('daylight:change', (event) => {
-  document.documentElement.classList.toggle('dark', event.detail.night);
-});
-```
-
-## 自定义外观
-
-在组件容器上覆盖 CSS 自定义属性：
-
-```css
-[data-ld-part="toggle-daylight"] {
-  --ld-bg: #f5ecd9;
-  --ld-surface: #8c9a62;
-  --ld-fg: #1b2146;
-  --ld-muted: #7f97b3;
-  --ld-accent: #efa02c;
-}
-```
-
-| CSS 变量 | 默认值 | 用途 |
-| --- | --- | --- |
-| `--ld-bg` | `#f5ecd9` | 背景色 |
-| `--ld-surface` | `#8c9a62` | 表面与场景色 |
-| `--ld-fg` | `#1b2146` | 前景色 |
-| `--ld-muted` | `#7f97b3` | 次要颜色 |
-| `--ld-accent` | `#efa02c` | 强调色 |
-
-## 动态挂载
-
-如果组件容器是在页面加载后动态创建的，可以手动挂载：
-
-```js
-const destroy = PixelDaylightSwitch.mount(element);
-
-// 不再需要时：
-PixelDaylightSwitch.unmount(element);
-```
-
-## 兼容性与本地开发
-
-- 优先使用 WebGL2 渲染玻璃效果；不可用时回退到 Canvas 2D。
-- 支持减少动态效果偏好。
-- 页面不可见或组件离开视口时会暂停不必要的绘制。
-- 不需要构建工具。
-
-本地运行：
-
-```bash
-git clone https://github.com/GSvegetable/pixel-daylight-switch.git
-cd pixel-daylight-switch
-```
-
-使用浏览器打开 `index.html` 即可。主要文件：
-
-- `app.js`：组件实现。
-- `index.html`：基础演示页面。
-- `playground.html`：参数实验室与场景切换。
-
-## 更新记录
-
-### v1.3.0
-
-- 新增四个独立像素环境：日本街道、现代公寓、海边灯塔和山间木屋。
-- Playground 新增真实场景选择，可与玻璃参数、昼夜和天气效果组合。
-
-### v1.2.0
-
-本次版本包含两轮未发布的更新：
-
-- 新增物理参数：惯性阻尼与边缘回弹。
-- 新增液态玻璃参数：色散与表面高光。
-- 新增世界时间倍率和像素飘雪天气。
-- 新增独立 Playground，可实时调节参数、套用预设并复制 HTML。
-- 重组 README，将中文说明置于文档顶部，并提供中英文跳转。
-
-### v1.1.0
-
-- 新增动画速度、镜片折射、外框厚度和初始夜晚状态的 HTML 参数配置。
-
-### v1.0.0
-
-- 首个公开版本。
-
-## 许可证
-
-[Unlicense](https://unlicense.org/) — 公有领域协议。允许自由使用，包括商业用途，无需署名。
-
----
-
-## English
-
-A draggable day/night switch with a tiny pixel world living inside the glass. Move the switch to transition between daylight, dusk, and night.
-
-**Quick links:** [Live demo](https://gsvegetable.github.io/pixel-daylight-switch/) · [Interactive Playground](https://gsvegetable.github.io/pixel-daylight-switch/playground.html) · [Releases](https://github.com/GSvegetable/pixel-daylight-switch/releases)
-
-### Quick start
-
-No npm, dependencies, or build step required:
-
-```html
-<div data-ld-part="toggle-daylight"></div>
-<script src="https://gsvegetable.github.io/pixel-daylight-switch/app.js"></script>
-```
-
-The script creates the internal canvas, interaction target, and accessibility elements. The component is responsive and supports multiple independent instances on one page.
-
-### NPM installation
+## Install from npm
 
 ```bash
 npm install pixel-daylight-switch-gsvegetable
 ```
 
-ESM / native build tools:
+**ES modules**
 
 ```js
 import PixelDaylightSwitch from 'pixel-daylight-switch-gsvegetable';
 
 const root = document.querySelector('[data-ld-part="toggle-daylight"]');
 PixelDaylightSwitch.mount(root);
-// Before removing the root:
+
+// Call before removing the root from the DOM.
 PixelDaylightSwitch.unmount(root);
 ```
 
-React and Vue 3 integrations should call `mount(element)` after the element is created and `unmount(element)` before it is removed. The package exposes both ESM and CommonJS entry points and is safe to import during SSR; mount only in the browser.
+**CommonJS**
 
-### Interactive Playground
+```js
+const PixelDaylightSwitch = require('pixel-daylight-switch-gsvegetable');
+```
 
-Open the [Pixel Daylight Playground](https://gsvegetable.github.io/pixel-daylight-switch/playground.html) to tune all component settings visually, try presets, preview changes, and copy generated HTML.
+The package exposes ESM and CommonJS entry points. Importing is safe in an SSR environment; call `mount()` only in a browser after the target element exists. The package's published file list is defined in [package.json](package.json).
 
-### HTML configuration
+## Configuration
 
-All settings are optional and configured per instance using `data-*` attributes.
+Set optional attributes on the mount element. Defaults apply when an attribute is omitted or invalid.
 
 | Attribute | Default | Description |
 | --- | ---: | --- |
-| `data-speed` | `9.5` | Base switch motion speed. |
-| `data-refraction` | `1.24` | Glass lens refraction strength. |
-| `data-bezel` | `0.046` | Bezel thickness relative to component height. |
-| `data-start-night` | `false` | Initialize in night mode when set to `true`. |
-| `data-friction` | `0.6` | Release inertia damping; lower values feel more slippery. |
-| `data-bounce` | `3.2` | Rebound impulse at the switch edges. |
-| `data-dispersion` | `0.05` | RGB chromatic dispersion at the glass edge; `0` disables it. |
-| `data-shine` | `0.44` | Daytime glass highlight intensity. |
-| `data-time-speed` | `1.0` | World simulation speed; `0` freezes world dynamics and `2` doubles the speed. |
-| `data-weather` | `default` | Weather preset: `default` or `snow`. |
-| `data-scene` | `countryside` | Pixel environment: `countryside`, `japanese-street`, `apartment`, `seaside`, or `mountain-cabin`. |
+| `data-speed` | `9.5` | Base response speed; greater than zero. |
+| `data-refraction` | `1.24` | Glass lens refraction strength; greater than zero. |
+| `data-bezel` | `0.046` | Relative glass-edge thickness; greater than zero. |
+| `data-start-night` | `false` | Exact string `"true"` starts in night mode. |
+| `data-friction` | `0.6` | Release inertia damping; clamped to `0.1–0.9`. |
+| `data-bounce` | `3.2` | Edge rebound strength; clamped to `0–12`. |
+| `data-dispersion` | `0.05` | RGB dispersion at the glass edge; clamped to `0–0.25`. |
+| `data-shine` | `0.44` | Daylight glass highlight; clamped to `0–1.5`. |
+| `data-time-speed` | `1` | World simulation speed; clamped to `0–8`. Set to `0` to freeze world motion. |
+| `data-weather` | `default` | `default` or `snow`. Unknown values fall back to `default`. |
+| `data-scene` | `countryside` | `countryside`, `japanese-street`, `apartment`, `seaside` or `mountain-cabin`. |
 
 Example:
 
 ```html
 <div
   data-ld-part="toggle-daylight"
-  data-speed="12"
-  data-refraction="1.5"
-  data-bezel="0.05"
   data-start-night="true"
-  data-friction="0.45"
-  data-bounce="4.2"
-  data-dispersion="0.12"
-  data-shine="0.6"
-  data-time-speed="1.5"
+  data-scene="seaside"
   data-weather="snow"
-  data-scene="mountain-cabin"
-></div>
+  data-time-speed="1.4"
+  data-refraction="1.3">
+</div>
 ```
 
-Missing or invalid numeric values fall back to defaults. Unknown weather values fall back to `default`; unknown scene values fall back to `countryside`. With no new v1.2.0 or v1.3.0 attributes, the component retains the intended default appearance.
-
-### Page theme integration
+## Events and state
 
-The component exposes the current night level as the `--night` CSS custom property on the root element: `0` is day, `1` is night, and intermediate values represent the transition.
-
-```css
-body {
-  background: color-mix(in srgb, #f5ecd9, #1b2146 calc(var(--night, 0) * 100%));
-}
-```
+The root element exposes transition progress through the CSS custom property `--night`: `0` is day, `1` is night, and values between them represent the transition.
 
-Listen for state changes with:
+When the committed day/night state changes, the root dispatches a bubbling, composed `daylight:change` event. `event.detail.night` is a boolean. It is not emitted on every animation frame.
 
 ```js
-document.addEventListener('daylight:change', (event) => {
-  document.documentElement.classList.toggle('dark', event.detail.night);
+const root = document.querySelector('[data-ld-part="toggle-daylight"]');
+
+root.addEventListener('daylight:change', (event) => {
+  console.log(event.detail.night ? 'Night' : 'Day');
 });
 ```
 
-### Theme colors
+## Rendering, accessibility and performance
 
-Override `--ld-bg`, `--ld-surface`, `--ld-fg`, `--ld-muted`, and `--ld-accent` on the component element to customize its palette.
+- WebGL2 renders the refractive lens; Canvas 2D is used if WebGL2 is unavailable or fails to initialize.
+- The component scales its drawing surface to its container.
+- Rendering pauses while the document is hidden or the component is outside the viewport.
+- Keyboard and switch semantics are provided, with a live status announcement.
+- The runtime respects the operating system's `prefers-reduced-motion` preference.
 
-### Dynamic mounting
+Performance varies with browser, graphics hardware, device pixel ratio and the number of visible instances.
 
-```js
-PixelDaylightSwitch.mount(element);
-PixelDaylightSwitch.unmount(element);
-```
-
-### Browser support
-
-WebGL2 is used for the glass effect when available, with Canvas 2D as a fallback. The component respects reduced-motion preferences and pauses unnecessary rendering when hidden or offscreen.
-
-### Development
+## Development and tests
 
 ```bash
 git clone https://github.com/GSvegetable/pixel-daylight-switch.git
 cd pixel-daylight-switch
+npm test
 ```
 
-Open `index.html` in a modern browser. No build step is needed.
-
-### Version status
+Run the Chromium browser regression suite:
 
-v1.3.0 adds four new pixel environments and a reorganized Playground. See [CHANGELOG.md](./CHANGELOG.md) for the detailed history.
-
-### License
-
-[Unlicense](https://unlicense.org/) — public domain. Free for personal and commercial use without attribution.
+```bash
+npm install --no-save @playwright/test@1.56.1
+npx playwright install chromium
+npm run test:browser
+```
+
+GitHub Actions runs package and SSR checks on Node.js 18, 20 and 22, plus Chromium interaction and mobile regression tests. See [current workflow runs](https://github.com/GSvegetable/pixel-daylight-switch/actions/workflows/ci.yml).
+
+## Android and iOS
+
+The repository includes Capacitor 8 build workflows that reuse the web runtime. GitHub Actions produces an Android debug APK and an unsigned iOS Simulator app archive. These are development artifacts, not store-ready releases: the Android APK is not a Play Store release, and the iOS Simulator build cannot be installed on a physical iPhone or iPad. See [mobile build notes](builds/README.md) and the [mobile workflow](https://github.com/GSvegetable/pixel-daylight-switch/actions/workflows/mobile-build.yml).
+
+## Repository map
+
+```text
+pixel-daylight-switch/
+├── .github/workflows/       # CI, native mobile builds, npm publishing
+├── assets/
+│   └── scene-gallery.png    # Five-scene overview image
+├── builds/
+│   └── README.md            # Mobile artifact notes; binaries are workflow outputs
+├── mobile/
+│   ├── index.html            # Capacitor app entry
+│   └── mobile.css            # Mobile-only layout
+├── scripts/
+│   └── prepare-mobile.cjs   # Prepare the shared web runtime for Capacitor
+├── tests/
+│   ├── browser/              # Playwright interaction and mobile regressions
+│   ├── fixture.html
+│   ├── mobile-smoke.cjs
+│   ├── package-smoke.cjs
+│   └── server.cjs
+├── app.js                    # Component runtime, scenes, input and rendering
+├── style.css                 # Component styles
+├── embed.js                  # One-script website embed loader
+├── index.html                # Live demo page
+├── preview.html              # Component preview
+├── playground.html            # Interactive parameter lab
+├── index.mjs / index.cjs     # ESM and CommonJS package entry points
+├── package.json               # Package metadata and scripts
+├── capacitor.config.json     # Capacitor configuration
+├── playwright.config.cjs     # Browser test configuration
+├── CHANGELOG.md
+├── llms.txt
+├── LICENSE
+└── README*.md                 # English, Simplified Chinese and Japanese docs
+```
+
+## License
+
+Released under [The Unlicense](LICENSE). You may copy, modify, publish, distribute and use the software for personal or commercial purposes without attribution. It is provided without warranty.