@usenagi/core 0.1.0 → 0.3.0

package/README.ja.md

@@ -0,0 +1,269 @@
+[English](./README.md) | **日本語**
+
+# nagi
+
+**Composition-style ergonomics for vanilla DOM. Bring your own mounter.**
+
+[![npm](https://img.shields.io/npm/v/@usenagi/core)](https://www.npmjs.com/package/@usenagi/core)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@usenagi/core)](https://bundlephobia.com/package/@usenagi/core)
+[![license](https://img.shields.io/npm/l/@usenagi/core)](./LICENSE)
+
+---
+
+## Why nagi?
+
+**既存 HTML に小さく足せる**
+
+WordPress、CMS、Webflow、静的サイトなどに、仮想 DOM やテンプレートを持ち込まず、`setup()` / lifecycle / reactivity を追加できる。
+
+**アニメーションと相性が良い**
+
+GSAP、Lenis、IntersectionObserver などを `setup()` で初期化し、`useUnmount()` でクリーンアップできる。
+
+**マウント戦略を縛らない**
+
+`[data-component]` スキャン、manifest、lazy import、MutationObserver などは、利用側で自由に組み立てられる。
+
+---
+
+## 30-second example
+
+```ts
+// counter.ts
+import { create, signal, useWatch, useDomRef } from "@usenagi/core";
+
+const { component } = create();
+
+component({
+  name: "counter",
+  setup() {
+    const { refs } = useDomRef<{
+      count: HTMLSpanElement;
+      btn: HTMLButtonElement;
+    }>();
+
+    const n = signal(0);
+    useWatch(n, (v) => {
+      refs.count.textContent = String(v);
+    });
+    refs.btn.addEventListener("click", () => {
+      n.value++;
+    });
+  },
+})(document.querySelector("#counter")!);
+```
+
+```html
+<div id="counter">
+  <span data-ref="count">0</span>
+  <button data-ref="btn">+</button>
+</div>
+```
+
+---
+
+## Quick start
+
+```bash
+npm i @usenagi/core
+```
+
+### First component
+
+```ts
+import { create, defineComponent, signal, useWatch, useDomRef } from "@usenagi/core";
+
+const Greeting = defineComponent({
+  name: "greeting",
+  setup(el, props) {
+    const { refs } = useDomRef<{ message: HTMLParagraphElement }>();
+    const text = signal((props.name as string) ?? "world");
+
+    useWatch(text, (v) => {
+      refs.message.textContent = `Hello, ${v}!`;
+    });
+    refs.message.textContent = `Hello, ${text.value}!`;
+  },
+});
+
+create().component(Greeting)(document.querySelector("#app")!);
+```
+
+### Scheduler + deferred mount
+
+遅延マウントが必要な場合は、scheduler / cue addons を追加する。
+
+```ts
+import { create } from "@usenagi/core";
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
+import { visible, idle } from "@usenagi/core/addons/cue";
+
+const app = create().install(schedulerAddon());
+
+// mount when the element enters the viewport
+app.component(HeavyWidget, { when: visible() })(el);
+
+// mount during browser idle time
+app.component(Analytics, { when: idle() })(el);
+```
+
+`schedulerAddon()` を使うと、`when` は `setup()` の前に待機する条件、`priority` は `setup()` を含む mount task の実行タイミングを決める。
+
+### BYO mounter recipe
+
+`[data-component]` スキャン、manifest、cue を組み合わせた自動マウントの例。
+→ [examples/recipes/byo-mounter](./examples/recipes/byo-mounter/main.ts)
+
+---
+
+## API
+
+### Reactivity
+
+| API                    | 説明                                                   |
+| ---------------------- | ------------------------------------------------------ |
+| `signal(value)`        | `.value` を持つリアクティブな値コンテナを作成する      |
+| `readonly(signal)`     | 書き込み可能な `signal` の読み取り専用ラッパー         |
+| `useComputed(fn)`      | `signal` の依存を自動追跡する派生値                    |
+| `useWatch(target, cb)` | 値変更時に `cb` を呼ぶ。unmount 時に自動で購読解除する |
+
+```ts
+const width = signal(10);
+const height = signal(5);
+const area = useComputed(() => width.value * height.value); // auto-recomputed
+
+useWatch(area, (v) => {
+  output.textContent = String(v);
+});
+```
+
+### Lifecycle
+
+| API              | 説明                                        |
+| ---------------- | ------------------------------------------- |
+| `useMount(fn)`   | コンポーネントのマウント完了後に1回実行する |
+| `useUnmount(fn)` | unmount 時に実行する。クリーンアップに使う  |
+
+```ts
+import gsap from 'gsap';
+
+setup(el) {
+  const tween = gsap.from(el, { opacity: 0, duration: 0.4 });
+  useUnmount(() => tween.kill());
+}
+```
+
+### DOM helpers
+
+ルート要素には **`setup(el)`** を、**`[data-ref]`** の子要素には **`useDomRef()`** を使う。
+
+| API                            | 説明                                                    |
+| ------------------------------ | ------------------------------------------------------- |
+| `useDomRef<T>()`               | `[data-ref]` 要素への型付きアクセス                     |
+| `useEvent(el, event, handler)` | イベントリスナーを追加する。unmount 時に自動で除去する  |
+| `useSlot()`                    | 子コンポーネントをマウントする。親の unmount に連動する |
+
+### Parent / child
+
+`useSlot()` で子コンポーネントをマウントできる。親から子へは `props` または `createContext` / `withContext` で値を渡せる。`addChild()` が返す child context から、子の `setup()` の返り値も参照できる。
+
+→ [examples/parent-child](./examples/parent-child/main.ts)
+
+### Observers
+
+| API                               | 説明                                                        |
+| --------------------------------- | ----------------------------------------------------------- |
+| `useIntersectionWatch(cb, opts?)` | IntersectionObserver のラッパー。unmount 時に自動で切断する |
+| `useMediaQuery(query)`            | `matchMedia` の結果を `ReadonlySignal<boolean>` で返す      |
+
+### Addons
+
+```ts
+import { create, defineAddon } from "@usenagi/core";
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
+
+const app = create().install(schedulerAddon(), myAddon());
+```
+
+| API | 説明 |
+| --- | --- |
+| `defineAddon({ name, install(ctx) })` | addon を定義する（`ctx` は `AddonContext`） |
+| `app.install(...addons)` | app に addon を登録する（複数可） |
+| `ctx.addMountMiddleware` / `addUnmountMiddleware` / `addComponentMiddleware` | mount / unmount / ComponentSetup の middleware を追加する |
+| `ctx.installedAddons` | この app に install 済みの addon 名 |
+
+`addMountMiddleware` / `addUnmountMiddleware` / `addComponentMiddleware` は **後から install した addon ほど外側**に適用される（`install(a, b)` なら実行順は `b → a → コア`）。
+
+遅延 mount には `schedulerAddon()` が必要。`when` や `priority` を使う場合も同様で、これらの mount option は scheduler addon が解釈する。addon の状態（scheduler / pending）は **各 app の `install` ごと**に作られる。
+
+#### Scheduler + cue
+
+```ts
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
+import { visible, idle, interaction, media } from "@usenagi/core/addons/cue";
+```
+
+| API | 説明 |
+| --- | --- |
+| `schedulerAddon(opts?)` | 遅延 mount 用 addon（内部で `createScheduler` を使用） |
+| `createScheduler(opts?)` | カスタム Scheduler 実装用の low-level API |
+| `visible(opts?)` | 要素が viewport に入ったときに解決する Cue |
+| `idle(timeout?)` | `requestIdleCallback` で解決する Cue |
+| `interaction(events?)` | 最初のユーザー操作で解決する Cue |
+| `media(query)` | media query が一致したときに解決する Cue |
+
+---
+
+## Comparison
+
+|                            | **nagi** | Alpine.js | Stimulus | petite-vue |
+| -------------------------- | -------- | --------- | -------- | ---------- |
+| Inline JS in HTML          | ✗        | ◯         | ✗        | ◯          |
+| Composition-style setup    | ◯        | △         | ✗        | ◯          |
+| BYO mounter                | ◯        | △         | △        | △          |
+| Async mount cue            | ◯        | ✗         | ✗        | ✗          |
+| Lifecycle cleanup          | ◯        | △         | ◯        | △          |
+| computed (derived signals) | ◯        | ◯         | ✗        | ◯          |
+| Core gzip                  | ~2.5 kB  | ~16 kB    | ~8 kB    | ~6 kB      |
+
+(◯ = 組み込み、△ = 利用側の実装・規約で対応可能、✗ = 主な機能ではない)
+
+- **vs Alpine / petite-vue**: HTML に式を直接書かず、ロジックを `.ts` に集約する。
+- **vs Stimulus**: Controller 規約はない。マウント戦略は利用側で自由に組み立てられる。
+- **vs React / Vue**: 宣言的 UI フレームワークではなく、既存 DOM に lifecycle を足す薄いレイヤー。
+
+---
+
+## When to use / When not to
+
+**向いているケース:**
+
+- React や Vue のランタイムを持ち込みにくいプロジェクト（CMS、Webflow、WordPress など）
+- GSAP や Lenis を多用する、アニメーション主体のサイト
+- ページの一部だけにインタラクティブな UI を追加したい場合
+- `setup()`、lifecycle、reactivity による composition-style で書きたいが、仮想 DOM は不要な場合
+
+**向いていないケース:**
+
+- リスト描画や条件分岐を HTML テンプレートで書きたい場合（`v-for` や `v-if` 相当はない）
+- 複雑なオブジェクトの深いリアクティビティが必要な場合（`reactive({})` は提供しない）
+- SSR / hydration が必要な場合
+- 状態管理、ルーティング、宣言的な view rendering をフレームワークにまとめて任せたい場合
+
+---
+
+## Examples
+
+| Example                                               | 説明                                                |
+| ----------------------------------------------------- | --------------------------------------------------- |
+| [basic-counter](./examples/basic-counter/)            | 最小の `signal` + `useWatch` 例                     |
+| [computed](./examples/computed/)                      | `useComputed` による派生値（width × height = area） |
+| [parent-child](./examples/parent-child/)              | `createContext` + `withContext` + `useSlot`         |
+| [lenis-scroll-scene](./examples/lenis-scroll-scene/)  | Lenis + `useComputed` によるスクロール進捗連動      |
+| [byo-mounter recipe](./examples/recipes/byo-mounter/) | `[data-component]` スキャン + manifest + cue        |
+
+---
+
+## License
+
+MIT © [hayakawasho](https://github.com/hayakawasho)

package/README.md

@@ -1,3 +1,5 @@
+**English** | [日本語](./README.ja.md)
+
 # nagi
 
 **Composition-style ergonomics for vanilla DOM. Bring your own mounter.**
@@ -10,14 +12,17 @@
 
 ## Why nagi?
 
-**既存 HTML に小さく足せる**
-WordPress、CMS、Webflow、静的サイトなどに、仮想 DOM やテンプレートを持ち込まず `setup()` / lifecycle / reactivity を追加できる。
+**Can be added in small parts to existing HTML**
+
+You can add `setup()`, lifecycle, and reactivity to WordPress, CMS, Webflow, static sites, etc., without introducing a virtual DOM or templates.
+
+**Compatible with animation**
+
+You can initialize GSAP, Lenis, IntersectionObserver, etc., in `setup()` and clean them up with `useUnmount()`.
 
-**アニメーションと相性が良い**
-GSAP、Lenis、IntersectionObserver などを `setup()` で初期化し、`useUnmount()` でクリーンアップできる。
+**Does not restrict mounting strategies**
 
-**マウント戦略を縛らない**
-`[data-component]` スキャン、manifest、lazy import、MutationObserver などは利用側で自由に組める。
+You are free to implement `[data-component]` scanning, manifests, lazy imports, MutationObserver, and so on, on the consuming side.
 
 ---
 
@@ -25,7 +30,7 @@ GSAP、Lenis、IntersectionObserver などを `setup()` で初期化し、`useUn
 
 ```ts
 // counter.ts
-import { create, ref, useWatch, useDomRef } from "@usenagi/core";
+import { create, signal, useWatch, useDomRef } from "@usenagi/core";
 
 const { component } = create();
 
@@ -37,7 +42,7 @@ component({
       btn: HTMLButtonElement;
     }>();
 
-    const n = ref(0);
+    const n = signal(0);
     useWatch(n, (v) => {
       refs.count.textContent = String(v);
     });
@@ -66,13 +71,13 @@ npm i @usenagi/core
 ### First component
 
 ```ts
-import { create, defineComponent, ref, useWatch, useDomRef } from "@usenagi/core";
+import { create, defineComponent, signal, useWatch, useDomRef } from "@usenagi/core";
 
 const Greeting = defineComponent({
   name: "greeting",
   setup(el, props) {
     const { refs } = useDomRef<{ message: HTMLParagraphElement }>();
-    const text = ref((props.name as string) ?? "world");
+    const text = signal((props.name as string) ?? "world");
 
     useWatch(text, (v) => {
       refs.message.textContent = `Hello, ${v}!`;
@@ -86,27 +91,27 @@ create().component(Greeting)(document.querySelector("#app")!);
 
 ### Scheduler + deferred mount
 
-遅延マウントが必要なら scheduler / cue addons を追加する。
+If delayed mounting is required, add the scheduler / cue addons.
 
 ```ts
 import { create } from "@usenagi/core";
-import { createScheduler } from "@usenagi/core/addons/scheduler";
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
 import { visible, idle } from "@usenagi/core/addons/cue";
 
-const app = create({ scheduler: createScheduler() });
+const app = create().install(schedulerAddon());
 
-// Intersection で visible になってからマウント
+// mount when the element enters the viewport
 app.component(HeavyWidget, { when: visible() })(el);
 
-// requestIdleCallback でマウント
+// mount during browser idle time
 app.component(Analytics, { when: idle() })(el);
 ```
 
-`when` は `setup()` の前に待機する条件、`priority` は `setup()` を含む mount task の実行タイミングを決める。
+With `schedulerAddon()`, `when` is a condition to wait for before `setup()`, and `priority` determines the execution timing of the mount task that includes `setup()`.
 
 ### BYO mounter recipe
 
-`[data-component]` スキャン、manifest、cue を組み合わせて自動マウントする一例。
+An example of automatic mounting by combining `[data-component]` scanning, manifests, and cues.
 → [examples/recipes/byo-mounter](./examples/recipes/byo-mounter/main.ts)
 
 ---
@@ -115,17 +120,17 @@ app.component(Analytics, { when: idle() })(el);
 
 ### Reactivity
 
-| API                 | 説明                                         |
-| ------------------- | -------------------------------------------- |
-| `ref(value)`        | リアクティブな参照を作成                     |
-| `readonly(ref)`     | 読み取り専用ラッパー                         |
-| `computed(fn)`      | 依存する `ref` を自動追跡する派生値          |
-| `useWatch(ref, cb)` | 値変更時にコールバック。unmount 時に自動解除 |
+| API                    | Description                                                       |
+| ---------------------- | ----------------------------------------------------------------- |
+| `signal(value)`        | Creates a reactive value container (`.value`)                     |
+| `readonly(signal)`     | Read-only wrapper around a writable `signal`                      |
+| `useComputed(fn)`      | Derived value that auto-tracks `signal` dependencies              |
+| `useWatch(target, cb)` | Calls `cb` on value change; automatically unsubscribes on unmount |
 
 ```ts
-const width = ref(10);
-const height = ref(5);
-const area = computed(() => width.value * height.value); // 自動再計算
+const width = signal(10);
+const height = signal(5);
+const area = useComputed(() => width.value * height.value); // auto-recomputed
 
 useWatch(area, (v) => {
   output.textContent = String(v);
@@ -134,10 +139,10 @@ useWatch(area, (v) => {
 
 ### Lifecycle
 
-| API              | 説明                                       |
-| ---------------- | ------------------------------------------ |
-| `useMount(fn)`   | マウント完了後に1回実行                    |
-| `useUnmount(fn)` | アンマウント時に実行。クリーンアップに使う |
+| API              | Description                          |
+| ---------------- | ------------------------------------ |
+| `useMount(fn)`   | Runs once after the component mounts |
+| `useUnmount(fn)` | Runs on unmount; use for cleanup     |
 
 ```ts
 import gsap from 'gsap';
@@ -150,90 +155,112 @@ setup(el) {
 
 ### DOM helpers
 
-| API                            | 説明                                            |
-| ------------------------------ | ----------------------------------------------- |
-| `useDomRef<T>()`               | `[data-ref]` 要素を型付きで取得                 |
-| `useRootRef()`                 | ルート要素を取得                                |
-| `useEvent(el, event, handler)` | イベントリスナーを登録。unmount 時に自動除去    |
-| `useSlot()`                    | 子コンポーネントをマウント。親の unmount に連動 |
+Use **`setup(el)`** for the root element and **`useDomRef()`** for `[data-ref]` descendants.
+
+| API                            | Description                                              |
+| ------------------------------ | -------------------------------------------------------- |
+| `useDomRef<T>()`               | Typed access to `[data-ref]` elements                    |
+| `useEvent(el, event, handler)` | Adds an event listener; automatically removed on unmount |
+| `useSlot()`                    | Mounts child components; tied to the parent's unmount    |
 
 ### Parent / child
 
-`useSlot()` で子コンポーネントをマウントできる。親から子へは `props` または `createContext` / `withContext` で値を渡せる。`addChild()` が返す child context から、子の `setup()` 返り値も参照できる。
+You can mount child components with `useSlot()`. You can pass values from parent to child via `props` or `createContext` / `withContext`. From the child context returned by `addChild()`, you can also reference the return value of the child's `setup()`.
 
 → [examples/parent-child](./examples/parent-child/main.ts)
 
 ### Observers
 
-| API                               | 説明                                                |
-| --------------------------------- | --------------------------------------------------- |
-| `useIntersectionWatch(cb, opts?)` | IntersectionObserver。unmount 時に自動解除          |
-| `useMediaQuery(query)`            | `matchMedia` の結果を `ReadonlyRef<boolean>` で返す |
+| API                               | Description                                                         |
+| --------------------------------- | ------------------------------------------------------------------- |
+| `useIntersectionWatch(cb, opts?)` | IntersectionObserver wrapper; automatically disconnected on unmount |
+| `useMediaQuery(query)`            | Returns `matchMedia` result as a `ReadonlySignal<boolean>`          |
 
 ### Addons
 
 ```ts
-import { createScheduler } from "@usenagi/core/addons/scheduler";
+import { create, defineAddon } from "@usenagi/core";
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
+
+const app = create().install(schedulerAddon(), myAddon());
+```
+
+| API | Description |
+| --- | --- |
+| `defineAddon({ name, install(ctx) })` | Defines an addon (`ctx` is `AddonContext`) |
+| `app.install(...addons)` | Registers one or more addons on the app |
+| `ctx.addMountMiddleware` / `addUnmountMiddleware` / `addComponentMiddleware` | Add mount / unmount / ComponentSetup middleware |
+| `ctx.installedAddons` | Addon names already installed on this app |
+
+`addMountMiddleware`, `addUnmountMiddleware`, and `addComponentMiddleware` apply **outermost for addons installed later** (`install(a, b)` runs as `b → a → core`).
+
+Deferred mounting requires `schedulerAddon()`. The same applies when using `when` or `priority`; these mount options are interpreted by the scheduler addon. Addon state (scheduler / pending) is created **per app `install`**, not per addon instance.
+
+#### Scheduler + cue
+
+```ts
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
 import { visible, idle, interaction, media } from "@usenagi/core/addons/cue";
 ```
 
-| API                      | 説明                                                                         |
-| ------------------------ | ---------------------------------------------------------------------------- |
-| `createScheduler(opts?)` | `scheduler.schedule(task, { priority, signal })` を実装した Scheduler を返す |
-| `visible(opts?)`         | 要素が viewport に入ったら解決する Cue                                       |
-| `idle(timeout?)`         | `requestIdleCallback` で解決する Cue                                         |
-| `interaction(events?)`   | 最初のユーザー操作で解決する Cue                                             |
-| `media(query)`           | media query が一致したら解決する Cue                                         |
+| API | Description |
+| --- | --- |
+| `schedulerAddon(opts?)` | Addon for deferred mount (uses `createScheduler` internally) |
+| `createScheduler(opts?)` | Low-level API for custom Scheduler implementations |
+| `visible(opts?)` | A Cue that resolves when the element enters the viewport |
+| `idle(timeout?)` | A Cue that resolves via `requestIdleCallback` |
+| `interaction(events?)` | A Cue that resolves on the first user interaction |
+| `media(query)` | A Cue that resolves when the media query matches |
 
 ---
 
 ## Comparison
 
-|                         | **nagi**    | Alpine.js | Stimulus | petite-vue |
-| ----------------------- | ----------- | --------- | -------- | ---------- |
-| Inline JS in HTML       | ✗           | ◯         | ✗        | ◯          |
-| Composition-style setup | ◯           | △         | ✗        | ◯          |
-| BYO mounter             | ◯           | △         | △        | △          |
-| Async mount cue         | ◯           | ✗         | ✗        | ✗          |
-| Lifecycle cleanup       | ◯           | △         | ◯        | △          |
-| `computed`              | ◯           | ◯         | ✗        | ◯          |
-| Core gzip               | ~2.6-2.9 kB | ~16 kB    | ~8 kB    | ~6 kB      |
+|                            | **nagi** | Alpine.js | Stimulus | petite-vue |
+| -------------------------- | -------- | --------- | -------- | ---------- |
+| Inline JS in HTML          | ✗        | ◯         | ✗        | ◯          |
+| Composition-style setup    | ◯        | △         | ✗        | ◯          |
+| BYO mounter                | ◯        | △         | △        | △          |
+| Async mount cue            | ◯        | ✗         | ✗        | ✗          |
+| Lifecycle cleanup          | ◯        | △         | ◯        | △          |
+| computed (derived signals) | ◯        | ◯         | ✗        | ◯          |
+| Core gzip                  | ~2.5 kB  | ~16 kB    | ~8 kB    | ~6 kB      |
 
-◯ = built-in、△ = userland / convention で対応可能、✗ = primary feature ではない。
+(◯ = built-in, △ = handled via userland/convention, ✗ = not a primary feature)
 
-- **vs Alpine / petite-vue**: HTML に式を書かず、ロジックを `.ts` に寄せる。
-- **vs Stimulus**: Controller 規約なし。mounter は利用側で自由に組める。
-- **vs React / Vue**: 宣言的 UI フレームワークではなく、既存 DOM に lifecycle を足す layer。
+- **vs Alpine / petite-vue**: Instead of writing logic expressions directly in HTML, you centralize your logic in `.ts` files.
+- **vs Stimulus**: No controller conventions; you are free to implement your own mounting strategy.
+- **vs React / Vue**: It is not a declarative UI framework, but rather a thin layer that adds lifecycle hooks to existing DOM.
 
 ---
 
 ## When to use / When not to
 
-**向いているケース**:
+**Recommended Use Cases:**
 
-- React/Vue ほどのランタイムを持ち込みにくいプロジェクト（CMS、Webflow、WordPress 等）
-- GSAP/Lenis を多用する、アニメーション主体のサイト
-- ページの一部だけに interactive な UI を追加したい
-- Composition-style な `setup()` / lifecycle / reactivity で書きたいが、仮想 DOM は不要
+- Projects where you cannot justify the runtime overhead of React or Vue (e.g., CMS, Webflow, WordPress).
+- Animation-heavy sites that rely heavily on libraries like GSAP or Lenis.
+- Scenarios where you only need to add interactive UI to specific parts of a page.
+- When you want to use a composition-style approach with `setup()`, lifecycle hooks, and reactivity, but do not require a virtual DOM.
 
-**向いていないケース**:
+**Not Recommended For:**
 
-- リスト描画や条件分岐を HTML テンプレートで書きたい（`v-for`, `v-if` 相当は持たない）
-- 深いオブジェクトのリアクティビティが必要（`reactive({})` は提供しない）
-- SSR/hydration が必要
-- アプリ全体の状態管理、ルーティング、宣言的な view rendering をまとめて任せたい
+- When you want to handle list rendering or conditional logic via HTML templates (it does not support equivalents to `v-for` or `v-if`).
+- When you need deep reactivity for complex objects (it does not provide `reactive({})`).
+- When SSR/hydration is required.
+- When you want a full-featured framework to handle global state management, routing, and declarative view rendering.
 
 ---
 
 ## Examples
 
-| Example                                               | 説明                                         |
-| ----------------------------------------------------- | -------------------------------------------- |
-| [basic-counter](./examples/basic-counter/)            | `ref` + `useWatch` の最小例                  |
-| [computed](./examples/computed/)                      | `computed` で派生値 (width × height = area)  |
-| [parent-child](./examples/parent-child/)              | `createContext` + `withContext` + `useSlot`  |
-| [lenis-scroll-scene](./examples/lenis-scroll-scene/)  | Lenis + `computed` でスクロール進捗連動      |
-| [byo-mounter recipe](./examples/recipes/byo-mounter/) | `[data-component]` スキャン + manifest + cue |
+| Example                                               | Description                                              |
+| ----------------------------------------------------- | -------------------------------------------------------- |
+| [basic-counter](./examples/basic-counter/)            | Minimal `signal` + `useWatch` example                    |
+| [computed](./examples/computed/)                      | Derived value with `useComputed` (width × height = area) |
+| [parent-child](./examples/parent-child/)              | `createContext` + `withContext` + `useSlot`              |
+| [lenis-scroll-scene](./examples/lenis-scroll-scene/)  | Scroll-progress animation with Lenis + `useComputed`     |
+| [byo-mounter recipe](./examples/recipes/byo-mounter/) | `[data-component]` scanning + manifest + cue             |
 
 ---
 

package/dist/addons/scheduler.cjs.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){return(e instanceof DOMException||e instanceof Error)&&e.name===`AbortError`}function t(t,r,i){if(i?.aborted)return;let{scheduler:a}=globalThis;if(typeof a?.postTask==`function`){a.postTask(t,{priority:r,signal:i}).catch(t=>{e(t)||queueMicrotask(()=>{throw t})});return}n(t,r,i)}function n(e,t,n){function r(){n?.aborted||e()}function i(e,t){let r=e();n?.addEventListener(`abort`,()=>t(r),{once:!0})}switch(t){case`user-blocking`:queueMicrotask(r);break;case`user-visible`:i(()=>requestAnimationFrame(r),cancelAnimationFrame);break;case`background`:typeof requestIdleCallback==`function`?i(()=>requestIdleCallback(r),cancelIdleCallback):i(()=>setTimeout(r,0),clearTimeout);break}}function r(e={}){let n=e.priority??`user-visible`;return{schedule(e,r={}){t(e,r.priority??n,r.signal)}}}exports.createScheduler=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){return e}function t(e){return(e instanceof DOMException||e instanceof Error)&&e.name===`AbortError`}function n(){let e=new Map;return{add(t){let n=e.get(t);n&&n.abort();let r=new AbortController;return e.set(t,r),{signal:r.signal,complete(){return e.get(t)!==r||r.signal.aborted?!1:(e.delete(t),!0)},abort(){e.get(t)===r&&(r.abort(),e.delete(t))}}},abort(t){let n=e.get(t);n&&(n.abort(),e.delete(t))}}}function r(e,n,r){if(r?.aborted)return;let{scheduler:a}=globalThis;if(typeof a?.postTask==`function`){a.postTask(e,{priority:n,signal:r}).catch(e=>{t(e)||queueMicrotask(()=>{throw e})});return}i(e,n,r)}function i(e,t,n){function r(){n?.aborted||e()}function i(e,t){let r=e();n?.addEventListener(`abort`,()=>t(r),{once:!0})}switch(t){case`user-blocking`:queueMicrotask(r);break;case`user-visible`:i(()=>requestAnimationFrame(r),cancelAnimationFrame);break;case`background`:typeof requestIdleCallback==`function`?i(()=>requestIdleCallback(r),cancelIdleCallback):i(()=>setTimeout(r,0),clearTimeout);break}}function a(e={}){let t=e.priority??`user-visible`;return{schedule(e,n={}){r(e,n.priority??t,n.signal)}}}function o(r){return e({name:`@usenagi/scheduler`,install(e){let i=a(r),o=n();e.addMountMiddleware((e,n,r)=>(n,a)=>{let s=o.add(n),c=()=>{i.schedule(()=>{s.complete()&&e(n,a)},{priority:r.priority,signal:s.signal})},{when:l}=r;l?l(n,s.signal).then(()=>{s.signal.aborted||c()},e=>{t(e)||(s.abort(),queueMicrotask(()=>{throw e}))}):c()}),e.addUnmountMiddleware(e=>t=>{t.forEach(o.abort),e(t)})}})}exports.createScheduler=a,exports.schedulerAddon=o;

package/dist/addons/scheduler.es.js

@@ -1,26 +1,56 @@
-//#region lib/utils/isAbortError.ts
+//#region lib/core/addon.ts
 function e(e) {
+	return e;
+}
+//#endregion
+//#region lib/utils/isAbortError.ts
+function t(e) {
 	return (e instanceof DOMException || e instanceof Error) && e.name === "AbortError";
 }
 //#endregion
+//#region lib/addons/scheduler/pending.ts
+function n() {
+	let e = /* @__PURE__ */ new Map();
+	return {
+		add(t) {
+			let n = e.get(t);
+			n && n.abort();
+			let r = new AbortController();
+			return e.set(t, r), {
+				signal: r.signal,
+				complete() {
+					return e.get(t) !== r || r.signal.aborted ? !1 : (e.delete(t), !0);
+				},
+				abort() {
+					e.get(t) === r && (r.abort(), e.delete(t));
+				}
+			};
+		},
+		abort(t) {
+			let n = e.get(t);
+			n && (n.abort(), e.delete(t));
+		}
+	};
+}
+//#endregion
 //#region lib/addons/scheduler/task.ts
-function t(t, r, i) {
-	if (i?.aborted) return;
+function r(e, n, r) {
+	if (r?.aborted) return;
 	let { scheduler: a } = globalThis;
 	if (typeof a?.postTask == "function") {
-		a.postTask(t, {
-			priority: r,
-			signal: i
-		}).catch((t) => {
-			e(t) || queueMicrotask(() => {
-				throw t;
+		a.postTask(e, {
+			priority: n,
+			signal: r
+		}).catch((e) => {
+			t(e) || queueMicrotask(() => {
+				throw e;
 			});
 		});
 		return;
 	}
-	n(t, r, i);
+	i(e, n, r);
 }
-function n(e, t, n) {
+function i(e, t, n) {
 	function r() {
 		n?.aborted || e();
 	}
@@ -41,12 +71,41 @@ function n(e, t, n) {
 	}
 }
 //#endregion
-//#region lib/addons/scheduler/index.ts
-function r(e = {}) {
-	let n = e.priority ?? "user-visible";
-	return { schedule(e, r = {}) {
-		t(e, r.priority ?? n, r.signal);
+//#region lib/addons/scheduler/scheduler.ts
+function a(e = {}) {
+	let t = e.priority ?? "user-visible";
+	return { schedule(e, n = {}) {
+		r(e, n.priority ?? t, n.signal);
 	} };
 }
 //#endregion
-export { r as createScheduler };
+//#region lib/addons/scheduler/addon.ts
+function o(r) {
+	return e({
+		name: "@usenagi/scheduler",
+		install(e) {
+			let i = a(r), o = n();
+			e.addMountMiddleware((e, n, r) => (n, a) => {
+				let s = o.add(n), c = () => {
+					i.schedule(() => {
+						s.complete() && e(n, a);
+					}, {
+						priority: r.priority,
+						signal: s.signal
+					});
+				}, { when: l } = r;
+				l ? l(n, s.signal).then(() => {
+					s.signal.aborted || c();
+				}, (e) => {
+					t(e) || (s.abort(), queueMicrotask(() => {
+						throw e;
+					}));
+				}) : c();
+			}), e.addUnmountMiddleware((e) => (t) => {
+				t.forEach(o.abort), e(t);
+			});
+		}
+	});
+}
+//#endregion
+export { a as createScheduler, o as schedulerAddon };

package/dist/main.es.js

@@ -1,31 +1,36 @@
-//#region lib/utils/isAbortError.ts
-function e(e) {
-	return (e instanceof DOMException || e instanceof Error) && e.name === "AbortError";
-}
-//#endregion
-//#region lib/core/internal/pending.ts
-function t() {
-	let e = /* @__PURE__ */ new Map();
-	return {
-		add(t) {
-			let n = e.get(t);
-			n && n.abort();
-			let r = new AbortController();
-			return e.set(t, r), {
-				signal: r.signal,
-				complete() {
-					return e.get(t) !== r || r.signal.aborted ? !1 : (e.delete(t), !0);
-				},
-				abort() {
-					e.get(t) === r && (r.abort(), e.delete(t));
-				}
-			};
+//#region lib/core/addon.ts
+function e() {
+	let e = /* @__PURE__ */ new Set(), t = [], n = [], r = [], i = {
+		get installedAddons() {
+			return e;
+		},
+		addComponentMiddleware(e) {
+			t.push(e);
 		},
-		abort(t) {
-			let n = e.get(t);
-			n && (n.abort(), e.delete(t));
+		addMountMiddleware(e) {
+			n.push(e);
+		},
+		addUnmountMiddleware(e) {
+			r.push(e);
+		},
+		composeComponent(e) {
+			return t.reduce((e, t) => t(e), e);
+		},
+		composeMount(e, t, r) {
+			return n.reduce((e, n) => n(e, t, r), e);
+		},
+		composeUnmount(e) {
+			return r.reduce((e, t) => t(e), e);
+		},
+		install(t) {
+			if (e.has(t.name)) throw Error(`[nagi] addon "${t.name}" is already installed`);
+			t.install(i), e.add(t.name);
 		}
 	};
+	return i;
+}
+function t(e) {
+	return e;
 }
 //#endregion
 //#region lib/core/error.ts
@@ -118,12 +123,7 @@ var s = /* @__PURE__ */ function(e) {
 	}
 };
 function u(e) {
-	return e === void 0 ? (e) => (t) => ({
-		name: e.name,
-		setup(n) {
-			return e.setup(n, t);
-		}
-	}) : e;
+	return e;
 }
 //#endregion
 //#region lib/core/runtime.ts
@@ -132,7 +132,7 @@ function f(e) {
 	if (!d) throw Error(`"${e}" called outside setup() will never be run.`);
 	return d;
 }
-function p(e, t, n) {
+function p(e, t, n = {}) {
 	let a = new l(t, e.name), o = d;
 	d = a;
 	try {
@@ -144,41 +144,28 @@ function p(e, t, n) {
 }
 //#endregion
 //#region lib/core/app.ts
-function m(n = {}) {
-	let { scheduler: r } = n, i = t();
-	return {
-		component(t, { priority: n, when: a } = {}) {
-			return (s, c = {}) => {
-				function l() {
-					let e = p(t, s, c);
-					return o(s, e), e.onMount(), e;
-				}
-				if (!r) return l();
-				let u = i.add(s), d = () => {
-					r.schedule(() => {
-						u.complete() && l();
-					}, {
-						priority: n,
-						signal: u.signal
-					});
-				};
-				a ? a(s, u.signal).then(() => {
-					u.signal.aborted || d();
-				}, (t) => {
-					e(t) || (u.abort(), queueMicrotask(() => {
-						throw t;
-					}));
-				}) : d();
-			};
+function m() {
+	let t = e(), n = (e) => {
+		for (let t of e) {
+			let e = a.get(t);
+			e && (e.onUnmount(), a.delete(t));
+		}
+	}, r = {
+		install(...e) {
+			return e.forEach(t.install), r;
+		},
+		component(e, n = {}) {
+			let r = t.composeComponent(e), i = t.composeMount((e, t) => {
+				let n = p(r, e, t);
+				return o(e, n), n.onMount(), n;
+			}, r, n);
+			return (e, t = {}) => i(e, t);
 		},
 		unmount(e) {
-			for (let t of e) {
-				i.abort(t);
-				let e = a.get(t);
-				e && (e.onUnmount(), a.delete(t));
-			}
+			t.composeUnmount(n)(e);
 		}
 	};
+	return r;
 }
 //#endregion
 //#region lib/core/lifecycle.ts
@@ -346,16 +333,11 @@ function F(e, t) {
 	})), { matchesQuery: C(r) };
 }
 //#endregion
-//#region lib/hooks/useRootRef.ts
-function I() {
-	return f("useRootRef").element;
-}
-//#endregion
 //#region lib/hooks/useSlot.ts
-function L() {
+function I() {
 	let e = f("useSlot");
 	return {
-		addChild(t, n, r = {}) {
+		addChild(t, n, r) {
 			let i = (t) => {
 				let i = p(n, t, r);
 				return e.addChild(i), i;
@@ -374,4 +356,7 @@ function L() {
 	};
 }
 //#endregion
-export { r as LifecycleError, E as computed, m as create, D as createContext, u as defineComponent, i as isLifecycleError, C as readonly, x as ref, M as useDomRef, N as useEvent, P as useIntersectionWatch, F as useMediaQuery, g as useMount, I as useRootRef, L as useSlot, _ as useUnmount, T as useWatch, O as withContext };
+//#region lib/props.ts
+function L() {}
+//#endregion
+export { r as LifecycleError, m as create, D as createContext, t as defineAddon, u as defineComponent, i as isLifecycleError, L as propTypes, C as readonly, x as signal, E as useComputed, M as useDomRef, N as useEvent, P as useIntersectionWatch, F as useMediaQuery, g as useMount, I as useSlot, _ as useUnmount, T as useWatch, O as withContext };

package/dist/main.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Lake={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(e){return(e instanceof DOMException||e instanceof Error)&&e.name===`AbortError`}function n(){let e=new Map;return{add(t){let n=e.get(t);n&&n.abort();let r=new AbortController;return e.set(t,r),{signal:r.signal,complete(){return e.get(t)!==r||r.signal.aborted?!1:(e.delete(t),!0)},abort(){e.get(t)===r&&(r.abort(),e.delete(t))}}},abort(t){let n=e.get(t);n&&(n.abort(),e.delete(t))}}}function r(e){let t=[],n=e;for(;n;)t.unshift(n.name),n=n.parent;return t.join(` > `)}var i=class e extends Error{details;constructor(e){super(`[nagi] Component error in phase "${e.phase}" for "${e.name}"${e.path?` (${e.path})`:``}`,{cause:e.cause}),this.name=`LifecycleError`,this.details=e}static create(t,n,i,a=n.parent,o){return new e({phase:t,name:n.name,uid:n.uid,path:r(n),parentName:a?.name,parentUid:a?.uid,element:n.element,cause:i,...o})}};function a(e){return e instanceof i}var o=new WeakMap;function s(e,t){let n=o.get(e);if(n)throw i.create(`mount`,t,Error(`Component "${n.name}" (${n.uid}) is already mounted on this element`),n);o.set(e,t)}var c=function(e){return e.MOUNTED=`Mounted`,e.UNMOUNTED=`Unmounted`,e}({}),l=0,u=class{Mounted=[];Unmounted=[];parent=null;#e=[];uid;name;current={};props={};element;provides=new Map;constructor(e,t){this.uid=`${t}.${l++}`,this.name=t,this.element=e}onMount=()=>{let e=[];for(let t of this.Mounted)try{let n=t();typeof n==`function`&&e.push(n)}catch(e){console.error(`[nagi] onMount hook failed`,i.create(`mount`,this,e))}this.Unmounted.push(...e)};onUnmount=()=>{for(let e of this.Unmounted)try{e()}catch(e){console.error(`[nagi] onUnmount cleanup failed`,i.create(`unmount`,this,e))}for(let e of this.#e)e.onUnmount()};addChild=e=>{this.#e.push(e),e.parent=this;try{e.onMount()}catch(t){let n=this.#e.indexOf(e);throw n!==-1&&this.#e.splice(n,1),e.parent=null,t}};removeChild=e=>{let t=this.#e.indexOf(e);t!==-1&&(this.#e.splice(t,1),e.parent=null,e.onUnmount())};get childElements(){return this.#e.map(e=>e.element)}};function d(e){return e===void 0?e=>t=>({name:e.name,setup(n){return e.setup(n,t)}}):e}var f;function p(e){if(!f)throw Error(`"${e}" called outside setup() will never be run.`);return f}function m(e,t,n){let r=new u(t,e.name),o=f;f=r;try{o&&(r.parent=o),r.props=n,r.current=e.setup(t,n)||{}}catch(e){throw f=o,a(e)?e:i.create(`setup`,r,e,o,{props:r.props})}return f=o,r}function h(e={}){let{scheduler:r}=e,i=n();return{component(e,{priority:n,when:a}={}){return(o,c={})=>{function l(){let t=m(e,o,c);return s(o,t),t.onMount(),t}if(!r)return l();let u=i.add(o),d=()=>{r.schedule(()=>{u.complete()&&l()},{priority:n,signal:u.signal})};a?a(o,u.signal).then(()=>{u.signal.aborted||d()},e=>{t(e)||(u.abort(),queueMicrotask(()=>{throw e}))}):d()}},unmount(e){for(let t of e){i.abort(t);let e=o.get(t);e&&(e.onUnmount(),o.delete(t))}}}}function g(e){return t=>{p(e)[e].push(t)}}var _=g(c.MOUNTED),v=g(c.UNMOUNTED),y=Symbol(`watch`),b=null,x=class{#e;#t=new Set;constructor(e){this.#e=e}get value(){return b!==null&&b.add(this),this.#e}set value(e){if(Object.is(e,this.#e))return;let t=this.#e;this.#e=e;for(let n of Array.from(this.#t))n(e,t)}[y](e){return this.#t.add(e),()=>{this.#t.delete(e)}}},S=e=>new x(e),C=class{#e;constructor(e){this.#e=e}get value(){return this.#e.value}[y](e){return this.#e[y](e)}},w=e=>new C(e);function T(e,t){return e[y](t)}function E(e,t){v(T(e,t))}function D(e){let t=S(void 0),n=[],r=()=>{n.forEach(e=>{e()}),n=[]},i=()=>{r();let a=b,o=new Set;b=o;let s;try{s=e()}finally{b=a}t.value=s;for(let e of o)n.push(e[y](()=>{i()}))};return i(),v(r),w(t)}function O(){let e=Symbol();return[{_id:e},()=>{let t=p(`createContext.use`);for(;t!==null;){if(t.provides.has(e))return t.provides.get(e);t=t.parent}throw Error(`createContext.use: no provider found`)}]}function k(e,t){return n=>({name:n.name,setup(r,i){return p(`withContext.${n.name}`).provides.set(e._id,t),n.setup(r,i)}})}function A(e,t){return t.some(t=>t!==e&&t.contains(e))}function j(e,t,n){let r=`[data-ref="${CSS.escape(e)}"]`,i=Array.from(t.querySelectorAll(r)).filter(e=>!A(e,n));return i.length===0?null:i.length===1?i[0]:i}function M(e,t){let n=new Map;return new Proxy({},{get(r,i){if(typeof i==`symbol`||i===`then`)return;if(n.has(i))return n.get(i);let a=j(i,e,t());return n.set(i,a),a},has(e,t){return typeof t==`string`},ownKeys(){return[]},getOwnPropertyDescriptor(){},set(){return!1},deleteProperty(){return!1}})}function N(){let e=p(`useDomRef`);return{refs:M(e.element,()=>e.childElements)}}function P(e,t,n,r){_(()=>(e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}))}function F(e,t,n={rootMargin:`0px`,threshold:.1}){let r=new IntersectionObserver(t,n);function i(e){Array.isArray(e)?e.forEach(e=>{r.observe(e)}):r.observe(e)}i(e),v(()=>{r.disconnect()});function a(e){r.unobserve(e)}return{unwatch:a}}function I(e,t){let n=window.matchMedia(e),r=S(n.matches),i=null;function a(e){r.value=e.matches,e.matches?i=t():(i?.(),i=null)}return _(()=>(n.addEventListener(`change`,a),n.matches&&(i=t()),()=>{i?.(),n.removeEventListener(`change`,a)})),{matchesQuery:w(r)}}function L(){return p(`useRootRef`).element}function R(){let e=p(`useSlot`);return{addChild(t,n,r={}){let i=t=>{let i=m(n,t,r);return e.addChild(i),i};return Array.isArray(t)?t.map(e=>i(e)):[i(t)]},removeChild(t){t.forEach(t=>{try{e.removeChild(t)}catch(n){console.error(`[nagi] removeChild failed`,i.create(`removeChild`,t,n,e))}})}}}e.LifecycleError=i,e.computed=D,e.create=h,e.createContext=O,e.defineComponent=d,e.isLifecycleError=a,e.readonly=w,e.ref=S,e.useDomRef=N,e.useEvent=P,e.useIntersectionWatch=F,e.useMediaQuery=I,e.useMount=_,e.useRootRef=L,e.useSlot=R,e.useUnmount=v,e.useWatch=E,e.withContext=k});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Lake={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(){let e=new Set,t=[],n=[],r=[],i={get installedAddons(){return e},addComponentMiddleware(e){t.push(e)},addMountMiddleware(e){n.push(e)},addUnmountMiddleware(e){r.push(e)},composeComponent(e){return t.reduce((e,t)=>t(e),e)},composeMount(e,t,r){return n.reduce((e,n)=>n(e,t,r),e)},composeUnmount(e){return r.reduce((e,t)=>t(e),e)},install(t){if(e.has(t.name))throw Error(`[nagi] addon "${t.name}" is already installed`);t.install(i),e.add(t.name)}};return i}function n(e){return e}function r(e){let t=[],n=e;for(;n;)t.unshift(n.name),n=n.parent;return t.join(` > `)}var i=class e extends Error{details;constructor(e){super(`[nagi] Component error in phase "${e.phase}" for "${e.name}"${e.path?` (${e.path})`:``}`,{cause:e.cause}),this.name=`LifecycleError`,this.details=e}static create(t,n,i,a=n.parent,o){return new e({phase:t,name:n.name,uid:n.uid,path:r(n),parentName:a?.name,parentUid:a?.uid,element:n.element,cause:i,...o})}};function a(e){return e instanceof i}var o=new WeakMap;function s(e,t){let n=o.get(e);if(n)throw i.create(`mount`,t,Error(`Component "${n.name}" (${n.uid}) is already mounted on this element`),n);o.set(e,t)}var c=function(e){return e.MOUNTED=`Mounted`,e.UNMOUNTED=`Unmounted`,e}({}),l=0,u=class{Mounted=[];Unmounted=[];parent=null;#e=[];uid;name;current={};props={};element;provides=new Map;constructor(e,t){this.uid=`${t}.${l++}`,this.name=t,this.element=e}onMount=()=>{let e=[];for(let t of this.Mounted)try{let n=t();typeof n==`function`&&e.push(n)}catch(e){console.error(`[nagi] onMount hook failed`,i.create(`mount`,this,e))}this.Unmounted.push(...e)};onUnmount=()=>{for(let e of this.Unmounted)try{e()}catch(e){console.error(`[nagi] onUnmount cleanup failed`,i.create(`unmount`,this,e))}for(let e of this.#e)e.onUnmount()};addChild=e=>{this.#e.push(e),e.parent=this;try{e.onMount()}catch(t){let n=this.#e.indexOf(e);throw n!==-1&&this.#e.splice(n,1),e.parent=null,t}};removeChild=e=>{let t=this.#e.indexOf(e);t!==-1&&(this.#e.splice(t,1),e.parent=null,e.onUnmount())};get childElements(){return this.#e.map(e=>e.element)}};function d(e){return e}var f;function p(e){if(!f)throw Error(`"${e}" called outside setup() will never be run.`);return f}function m(e,t,n={}){let r=new u(t,e.name),o=f;f=r;try{o&&(r.parent=o),r.props=n,r.current=e.setup(t,n)||{}}catch(e){throw f=o,a(e)?e:i.create(`setup`,r,e,o,{props:r.props})}return f=o,r}function h(){let e=t(),n=e=>{for(let t of e){let e=o.get(t);e&&(e.onUnmount(),o.delete(t))}},r={install(...t){return t.forEach(e.install),r},component(t,n={}){let r=e.composeComponent(t),i=e.composeMount((e,t)=>{let n=m(r,e,t);return s(e,n),n.onMount(),n},r,n);return(e,t={})=>i(e,t)},unmount(t){e.composeUnmount(n)(t)}};return r}function g(e){return t=>{p(e)[e].push(t)}}var _=g(c.MOUNTED),v=g(c.UNMOUNTED),y=Symbol(`watch`),b=null,x=class{#e;#t=new Set;constructor(e){this.#e=e}get value(){return b!==null&&b.add(this),this.#e}set value(e){if(Object.is(e,this.#e))return;let t=this.#e;this.#e=e;for(let n of Array.from(this.#t))n(e,t)}[y](e){return this.#t.add(e),()=>{this.#t.delete(e)}}},S=e=>new x(e),C=class{#e;constructor(e){this.#e=e}get value(){return this.#e.value}[y](e){return this.#e[y](e)}},w=e=>new C(e);function T(e,t){return e[y](t)}function E(e,t){v(T(e,t))}function D(e){let t=S(void 0),n=[],r=()=>{n.forEach(e=>{e()}),n=[]},i=()=>{r();let a=b,o=new Set;b=o;let s;try{s=e()}finally{b=a}t.value=s;for(let e of o)n.push(e[y](()=>{i()}))};return i(),v(r),w(t)}function O(){let e=Symbol();return[{_id:e},()=>{let t=p(`createContext.use`);for(;t!==null;){if(t.provides.has(e))return t.provides.get(e);t=t.parent}throw Error(`createContext.use: no provider found`)}]}function k(e,t){return n=>({name:n.name,setup(r,i){return p(`withContext.${n.name}`).provides.set(e._id,t),n.setup(r,i)}})}function A(e,t){return t.some(t=>t!==e&&t.contains(e))}function j(e,t,n){let r=`[data-ref="${CSS.escape(e)}"]`,i=Array.from(t.querySelectorAll(r)).filter(e=>!A(e,n));return i.length===0?null:i.length===1?i[0]:i}function M(e,t){let n=new Map;return new Proxy({},{get(r,i){if(typeof i==`symbol`||i===`then`)return;if(n.has(i))return n.get(i);let a=j(i,e,t());return n.set(i,a),a},has(e,t){return typeof t==`string`},ownKeys(){return[]},getOwnPropertyDescriptor(){},set(){return!1},deleteProperty(){return!1}})}function N(){let e=p(`useDomRef`);return{refs:M(e.element,()=>e.childElements)}}function P(e,t,n,r){_(()=>(e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}))}function F(e,t,n={rootMargin:`0px`,threshold:.1}){let r=new IntersectionObserver(t,n);function i(e){Array.isArray(e)?e.forEach(e=>{r.observe(e)}):r.observe(e)}i(e),v(()=>{r.disconnect()});function a(e){r.unobserve(e)}return{unwatch:a}}function I(e,t){let n=window.matchMedia(e),r=S(n.matches),i=null;function a(e){r.value=e.matches,e.matches?i=t():(i?.(),i=null)}return _(()=>(n.addEventListener(`change`,a),n.matches&&(i=t()),()=>{i?.(),n.removeEventListener(`change`,a)})),{matchesQuery:w(r)}}function L(){let e=p(`useSlot`);return{addChild(t,n,r){let i=t=>{let i=m(n,t,r);return e.addChild(i),i};return Array.isArray(t)?t.map(e=>i(e)):[i(t)]},removeChild(t){t.forEach(t=>{try{e.removeChild(t)}catch(n){console.error(`[nagi] removeChild failed`,i.create(`removeChild`,t,n,e))}})}}}function R(){}e.LifecycleError=i,e.create=h,e.createContext=O,e.defineAddon=n,e.defineComponent=d,e.isLifecycleError=a,e.propTypes=R,e.readonly=w,e.signal=S,e.useComputed=D,e.useDomRef=N,e.useEvent=P,e.useIntersectionWatch=F,e.useMediaQuery=I,e.useMount=_,e.useSlot=L,e.useUnmount=v,e.useWatch=E,e.withContext=k});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usenagi/core",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Composition-API ergonomics for vanilla DOM. Bring your own mounter.",
   "main": "./dist/main.umd.js",
   "module": "./dist/main.es.js",

package/types/addons/scheduler/addon.d.ts

@@ -0,0 +1,10 @@
+import type { Cue, SchedulePriority } from "../../types";
+declare module "../../core/addon" {
+    interface MountOptions {
+        priority?: SchedulePriority;
+        when?: Cue;
+    }
+}
+export declare function schedulerAddon(opts?: {
+    priority?: SchedulePriority;
+}): import("../../main").Addon;

package/types/addons/scheduler/index.d.ts

@@ -1,4 +1,2 @@
-import type { SchedulePriority, Scheduler } from "../../types";
-export declare function createScheduler(opts?: {
-    priority?: SchedulePriority;
-}): Scheduler;
+export { schedulerAddon } from "./addon";
+export { createScheduler } from "./scheduler";

package/types/addons/scheduler/pending.d.ts

@@ -0,0 +1,11 @@
+import type { RefElement } from "../../types";
+export type PendingMount = {
+    readonly signal: AbortSignal;
+    complete(): boolean;
+    abort(): void;
+};
+export type PendingMounts = {
+    add(el: RefElement): PendingMount;
+    abort(el: RefElement): void;
+};
+export declare function createPendingMounts(): PendingMounts;

package/types/addons/scheduler/scheduler.d.ts

@@ -0,0 +1,4 @@
+import type { SchedulePriority, Scheduler } from "../../types";
+export declare function createScheduler(opts?: {
+    priority?: SchedulePriority;
+}): Scheduler;

package/types/core/addon.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentSetup, RefElement } from "../types";
+declare const mountOptionsBrand: unique symbol;
+/** Options for `app.component(setup, opts)` — extended by mount addons. */
+export interface MountOptions {
+    readonly [mountOptionsBrand]?: never;
+}
+/** Mount after addon middleware runs — may return void when mount is deferred (e.g. scheduler). */
+export type MountFn = (el: RefElement, props: Record<string, any>) => any;
+export type UnmountFn = (targets: RefElement[]) => void;
+export type ComponentMiddleware = <S extends ComponentSetup>(comp: S) => S;
+export type MountMiddleware = (next: MountFn, setup: ComponentSetup, opts: MountOptions) => MountFn;
+export type UnmountMiddleware = (next: UnmountFn) => UnmountFn;
+export type Addon = {
+    readonly name: string;
+    install(ctx: AddonContext): void;
+};
+export type AddonContext = {
+    readonly installedAddons: ReadonlySet<string>;
+    addComponentMiddleware(middleware: ComponentMiddleware): void;
+    addMountMiddleware(middleware: MountMiddleware): void;
+    addUnmountMiddleware(middleware: UnmountMiddleware): void;
+};
+type AddonRegistry = AddonContext & {
+    composeComponent<S extends ComponentSetup>(setup: S): S;
+    composeMount(mountFn: MountFn, setup: ComponentSetup, opts: MountOptions): MountFn;
+    composeUnmount(unmountFn: UnmountFn): UnmountFn;
+    install(addon: Addon): void;
+};
+export declare function createAddonRegistry(): AddonRegistry;
+/**
+ * Identity helper for type inference only — no runtime effect.
+ */
+export declare function defineAddon(addon: Addon): Addon;
+export declare function defineAddon<TOptions>(factory: (options?: TOptions) => Addon): (options?: TOptions) => Addon;
+export {};

package/types/core/app.d.ts

@@ -1,27 +1,10 @@
-import type { ComponentSetup, Cue, RefElement, SchedulePriority, Scheduler } from "../types";
+import type { ComponentSetup, RefElement } from "../types";
+import type { Addon, MountOptions } from "./addon";
 import type { ComponentContext } from "./component";
-type AppOptions = {
-    priority?: SchedulePriority;
-};
-type AsyncAppOptions = AppOptions & {
-    when?: Cue;
-};
-type SyncApp = {
-    component<S extends ComponentSetup>(wrap: S, opts?: AppOptions): (el: RefElement, props?: Record<string, any>) => ComponentContext<ReturnType<S["setup"]>>;
-    unmount(targets: RefElement[]): void;
-};
-type AsyncApp = {
-    component<S extends ComponentSetup>(wrap: S, opts?: AsyncAppOptions): (el: RefElement, props?: Record<string, any>) => void;
+type App = {
+    install(...addons: Addon[]): App;
+    component<S extends ComponentSetup>(component: S, opts?: MountOptions): (el: RefElement, props?: Record<string, any>) => ComponentContext<ReturnType<S["setup"]>> | void;
     unmount(targets: RefElement[]): void;
 };
-export declare function create(): SyncApp;
-export declare function create(config: {
-    scheduler?: undefined;
-}): SyncApp;
-export declare function create(config: {
-    scheduler: Scheduler;
-}): AsyncApp;
-export declare function create(config: {
-    scheduler?: Scheduler | undefined;
-}): SyncApp | AsyncApp;
+export declare function create(): App;
 export {};

package/types/core/component.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSetup, RefElement } from "../types";
+import type { ComponentProps, ComponentSetup, RefElement } from "../types";
 export declare enum LifecycleHooks {
     MOUNTED = "Mounted",
     UNMOUNTED = "Unmounted"
@@ -21,8 +21,17 @@ export declare class ComponentContext<T = any> {
     removeChild: (child: ComponentContext) => void;
     get childElements(): RefElement[];
 }
-export declare function defineComponent<Context extends Record<string, unknown>>(): <SetupResult extends Record<string, unknown> | void>(opts: {
+export declare function defineComponent<SetupResult extends Record<string, unknown> | void, Props extends Record<string, unknown>>(opts: {
     name: string;
-    setup(el: RefElement, context: Context): SetupResult;
-}) => (context: Context) => ComponentSetup<SetupResult>;
-export declare function defineComponent<SetupResult extends Record<string, unknown> | void, Props extends Record<string, unknown>>(opts: ComponentSetup<SetupResult, Props>): ComponentSetup<SetupResult, Props>;
+    props: Props;
+    setup(el: RefElement, props: ComponentProps<Props>): SetupResult;
+}): ComponentSetup<SetupResult, Props>;
+export declare function defineComponent<SetupResult extends Record<string, unknown> | void, Props extends Record<string, unknown>>(opts: {
+    name: string;
+    setup(el: RefElement, props: ComponentProps<Props>): SetupResult;
+}): ComponentSetup<SetupResult, Props>;
+export declare function defineComponent<SetupResult extends Record<string, unknown> | void>(opts: {
+    name: string;
+    setup(el: RefElement): SetupResult;
+}): ComponentSetup<SetupResult, Record<string, never>>;
+export declare function defineComponent(opts: ComponentSetup): ComponentSetup;

package/types/core/reactivity.d.ts

@@ -1,22 +1,22 @@
 type WatchCallback<T> = (newVal: T, oldVal: T) => void;
 type Unwatch = () => void;
 declare const WATCH: unique symbol;
-declare class Ref<T> {
+declare class Signal<T> {
     #private;
     constructor(value: T);
     get value(): T;
     set value(newVal: T);
     [WATCH](callback: WatchCallback<T>): Unwatch;
 }
-declare const ref: <T = any>(val: T) => Ref<T>;
-declare class ReadonlyRef<T> {
+declare const signal: <T = any>(val: T) => Signal<T>;
+declare class ReadonlySignal<T> {
     #private;
-    constructor(value: Ref<T>);
+    constructor(value: Signal<T>);
     get value(): T;
     [WATCH](callback: WatchCallback<T>): Unwatch;
 }
-declare const readonly: <T = any>(ref: Ref<T>) => ReadonlyRef<T>;
-declare function useWatch<T>(ref: Ref<T> | ReadonlyRef<T>, callback: WatchCallback<T>): void;
-declare function computed<T>(getter: () => T): ReadonlyRef<T>;
-export { computed, readonly, ref, useWatch };
-export type { ReadonlyRef, Ref };
+declare const readonly: <T = any>(s: Signal<T>) => ReadonlySignal<T>;
+declare function useWatch<T>(target: Signal<T> | ReadonlySignal<T>, callback: WatchCallback<T>): void;
+declare function useComputed<T>(getter: () => T): ReadonlySignal<T>;
+export { readonly, signal, useComputed, useWatch };
+export type { ReadonlySignal, Signal };

package/types/core/runtime.d.ts

@@ -1,4 +1,4 @@
 import { ComponentContext } from "./component";
 import type { ComponentSetup, RefElement } from "../types";
 export declare function getCurrentComponent(hookName: string): ComponentContext;
-export declare function createComponent(wrap: ComponentSetup, root: RefElement, props: Record<string, any>): ComponentContext<any>;
+export declare function createComponent(wrap: ComponentSetup, root: RefElement, props?: Record<string, any>): ComponentContext<any>;

package/types/hooks/useMediaQuery.d.ts

@@ -1,4 +1,4 @@
 import type { Cleanup } from "../types";
 export declare function useMediaQuery(query: string, callbackWhenMatches: () => Cleanup): {
-    readonly matchesQuery: import("../main").ReadonlyRef<boolean>;
+    readonly matchesQuery: import("../main").ReadonlySignal<boolean>;
 };

package/types/hooks/useSlot.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentContext } from "../core/component";
 import type { ComponentSetup, RefElement } from "../types";
 export declare function useSlot(): {
-    addChild<Child extends ComponentSetup>(targetOrTargets: RefElement | RefElement[], child: Child, props?: Parameters<Child["setup"]>[1]): ComponentContext<ReturnType<Child["setup"]>>[];
+    addChild<Child extends ComponentSetup>(targetOrTargets: RefElement | RefElement[], child: Child, props?: Partial<Parameters<Child["setup"]>[1]>): ComponentContext<ReturnType<Child["setup"]>>[];
     removeChild(children: ComponentContext[]): void;
 };

package/types/main.d.ts

@@ -1,17 +1,19 @@
+export { defineAddon } from "./core/addon";
 export { create } from "./core/app";
 export { defineComponent } from "./core/component";
 export { isLifecycleError, LifecycleError } from "./core/error";
 export { useMount, useUnmount } from "./core/lifecycle";
-export { computed, readonly, ref, useWatch } from "./core/reactivity";
+export { readonly, signal, useComputed, useWatch } from "./core/reactivity";
 export { createContext, withContext } from "./hooks/createContext";
 export { useDomRef } from "./hooks/useDomRef";
 export { useEvent } from "./hooks/useEvent";
 export { useIntersectionWatch } from "./hooks/useIntersectionWatch";
 export { useMediaQuery } from "./hooks/useMediaQuery";
-export { useRootRef } from "./hooks/useRootRef";
 export { useSlot } from "./hooks/useSlot";
+export { propTypes } from "./props";
+export type { Addon, AddonContext, ComponentMiddleware, MountFn, MountMiddleware, MountOptions, UnmountFn, UnmountMiddleware, } from "./core/addon";
 export type { ComponentContext } from "./core/component";
 export type { LifecycleErrorDetails } from "./core/error";
-export type { ReadonlyRef, Ref } from "./core/reactivity";
+export type { ReadonlySignal, Signal } from "./core/reactivity";
 export type { Provider } from "./hooks/createContext";
 export type { ComponentSetup, Cue, IComponent, RefElement, SchedulePriority, Scheduler, } from "./types";

package/types/props.d.ts

@@ -0,0 +1,2 @@
+/** Type-only marker for component props. Runtime value is unused. */
+export declare function propTypes<T extends Record<string, unknown>>(): T;

package/types/types.d.ts

@@ -1,11 +1,11 @@
 export type RefElement = HTMLElement | SVGElement;
 export type ComponentProps<Props> = Readonly<Props>;
-export type ComponentSetup<SetupResult = void | Record<string, unknown>, Props = Record<string, unknown>> = {
+export type ComponentSetup<SetupResult = void | Record<string, unknown>, Props extends Record<string, unknown> = Record<string, unknown>> = {
     name: string;
     setup(el: RefElement, props: ComponentProps<Props>): SetupResult;
 };
 /** @deprecated Use `ComponentSetup` instead. */
-export type IComponent<SetupResult = void | Record<string, unknown>, Props = Record<string, unknown>> = ComponentSetup<SetupResult, Props>;
+export type IComponent<SetupResult = void | Record<string, unknown>, Props extends Record<string, unknown> = Record<string, unknown>> = ComponentSetup<SetupResult, Props>;
 export type Cleanup = () => void;
 export type LifecycleHandler = () => void | Cleanup;
 export type SchedulePriority = "user-blocking" | "user-visible" | "background";

package/types/core/internal/pending.d.ts

@@ -1,11 +0,0 @@
-import type { RefElement } from "../../types";
-export type PendingMountTask = {
-    readonly signal: AbortSignal;
-    complete(): boolean;
-    abort(): void;
-};
-export type PendingMountTasks = {
-    add(el: RefElement): PendingMountTask;
-    abort(el: RefElement): void;
-};
-export declare function createPendingMountTasks(): PendingMountTasks;

package/types/hooks/useRootRef.d.ts

@@ -1,2 +0,0 @@
-import type { RefElement } from "../types";
-export declare function useRootRef<T extends RefElement = RefElement>(): T;