@usenagi/core 0.4.1 → 0.4.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 hayakawasho
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.ja.md

@@ -0,0 +1,276 @@
+[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 app = create();
+
+app.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, propTypes, signal, useWatch, useDomRef } from "@usenagi/core";
+
+const Greeting = defineComponent({
+  name: "greeting",
+  props: propTypes<{ name: string }>(),
+  setup(el, props) {
+    const { refs } = useDomRef<{ message: HTMLParagraphElement }>();
+    const text = signal(props.name ?? "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
+
+### Component Definition
+
+| API                    | 説明                                                             |
+| ---------------------- | ---------------------------------------------------------------- |
+| `defineComponent(opts)` | 型安全な `ComponentSetup` 定義ヘルパー                          |
+| `propTypes<T>()`       | コンポーネント props の型マーカー（ランタイムコストゼロ）         |
+
+### 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, cb)` | query 一致時に callback を実行し、`matchesQuery` を `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 |
+| `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

@@ -0,0 +1,276 @@
+**English** | [日本語](./README.ja.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?
+
+**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()`.
+
+**Does not restrict mounting strategies**
+
+You are free to implement `[data-component]` scanning, manifests, lazy imports, MutationObserver, and so on, on the consuming side.
+
+---
+
+## 30-second example
+
+```ts
+// counter.ts
+import { create, signal, useWatch, useDomRef } from "@usenagi/core";
+
+const app = create();
+
+app.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, propTypes, signal, useWatch, useDomRef } from "@usenagi/core";
+
+const Greeting = defineComponent({
+  name: "greeting",
+  props: propTypes<{ name: string }>(),
+  setup(el, props) {
+    const { refs } = useDomRef<{ message: HTMLParagraphElement }>();
+    const text = signal(props.name ?? "world");
+
+    useWatch(text, (v) => {
+      refs.message.textContent = `Hello, ${v}!`;
+    });
+    refs.message.textContent = `Hello, ${text.value}!`;
+  },
+});
+
+create().component(Greeting)(document.querySelector("#app")!);
+```
+
+### Scheduler + deferred mount
+
+If delayed mounting is required, add the 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);
+```
+
+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
+
+An example of automatic mounting by combining `[data-component]` scanning, manifests, and cues.
+→ [examples/recipes/byo-mounter](../../examples/recipes/byo-mounter/main.ts)
+
+---
+
+## API
+
+### Component Definition
+
+| API                    | Description                                                                 |
+| ---------------------- | --------------------------------------------------------------------------- |
+| `defineComponent(opts)` | Type-safe helper to define a `ComponentSetup` object                       |
+| `propTypes<T>()`       | Type-only marker for declaring component props shape (zero runtime cost)    |
+
+### Reactivity
+
+| 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 = signal(10);
+const height = signal(5);
+const area = useComputed(() => width.value * height.value); // auto-recomputed
+
+useWatch(area, (v) => {
+  output.textContent = String(v);
+});
+```
+
+### Lifecycle
+
+| API              | Description                          |
+| ---------------- | ------------------------------------ |
+| `useMount(fn)`   | Runs once after the component mounts |
+| `useUnmount(fn)` | Runs on unmount; use for cleanup     |
+
+```ts
+import gsap from 'gsap';
+
+setup(el) {
+  const tween = gsap.from(el, { opacity: 0, duration: 0.4 });
+  useUnmount(() => tween.kill());
+}
+```
+
+### DOM helpers
+
+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
+
+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                               | Description                                                         |
+| --------------------------------- | ------------------------------------------------------------------- |
+| `useIntersectionWatch(cb, opts?)` | IntersectionObserver wrapper; automatically disconnected on unmount |
+| `useMediaQuery(query, cb)` | Runs `callback` when the query matches; returns `matchesQuery` as `ReadonlySignal<boolean>` |
+
+### Addons
+
+```ts
+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 | Description |
+| --- | --- |
+| `schedulerAddon(opts?)` | Addon for deferred mount |
+| `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 (derived signals) | ◯        | ◯         | ✗        | ◯          |
+| Core gzip                  | ~2.5 kB  | ~16 kB    | ~8 kB    | ~6 kB      |
+
+(◯ = built-in, △ = handled via userland/convention, ✗ = not a primary feature)
+
+- **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:**
+
+- 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:**
+
+- 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                                               | 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             |
+
+---
+
+## License
+
+MIT © [hayakawasho](https://github.com/hayakawasho)

package/dist/addons/scheduler.cjs.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){return e}function t(){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 n(e){return(e instanceof DOMException||e instanceof Error)&&e.name===`AbortError`}function r(e,t,r){if(r?.aborted)return;let{scheduler:a}=globalThis;if(typeof a?.postTask==`function`){a.postTask(e,{priority:t,signal:r}).catch(e=>{n(e)||queueMicrotask(()=>{throw e})});return}i(e,t,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(e){return(e instanceof DOMException||e instanceof Error)&&e.name===`AbortError`}function s(n){return e({name:`@usenagi/scheduler`,install(e){let r=a(n),i=t();e.addMountMiddleware((e,t,n)=>(t,a)=>{let s=i.add(t),c=()=>{r.schedule(()=>{s.complete()&&e(t,a)},{priority:n.priority,signal:s.signal})},{when:l}=n;l?l(t,s.signal).then(()=>{s.signal.aborted||c()},e=>{o(e)||(s.abort(),queueMicrotask(()=>{throw e}))}):c()}),e.addUnmountMiddleware(e=>t=>{t.forEach(i.abort),e(t)})}})}exports.schedulerAddon=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){return e}var t=class{#e=new Map;add(e){this.#n(e,this.#e.get(e));let t=new AbortController;return this.#e.set(e,t),{signal:t.signal,complete:()=>this.#t(e,t),abort:()=>this.#n(e,t)}}abort=e=>{this.#n(e,this.#e.get(e))};#t(e,t){let n=this.#e.get(e)!==t,r=t.signal.aborted;return n||r?!1:(this.#e.delete(e),!0)}#n(e,t){!t||this.#e.get(e)!==t||(t.abort(),this.#e.delete(e))}};function n(){return new t}function r(e){return(e instanceof DOMException||e instanceof Error)&&e.name===`AbortError`}function i(e,t,n){if(n?.aborted)return;let{scheduler:i}=globalThis;if(typeof i?.postTask==`function`){i.postTask(e,{priority:t,signal:n}).catch(e=>{r(e)||queueMicrotask(()=>{throw e})});return}a(e,t,n)}function a(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 o(e={}){let t=e.priority??`user-visible`;return{schedule(e,n={}){i(e,n.priority??t,n.signal)}}}function s(t){return e({name:`@usenagi/scheduler`,install(e){let i=o(t),a=n();e.addMountMiddleware((e,t,n)=>(t,o)=>{let s=a.add(t),c=()=>{i.schedule(()=>{s.complete()&&e(t,o)},{priority:n.priority,signal:s.signal})},{when:l}=n;l?l(t,s.signal).then(()=>{s.signal.aborted||c()},e=>{r(e)||(s.abort(),queueMicrotask(()=>{throw e}))}):c()}),e.addUnmountMiddleware(e=>t=>{t.forEach(a.abort),e(t)})}})}exports.schedulerAddon=s;

package/dist/addons/scheduler.es.js

@@ -3,52 +3,56 @@ function e(e) {
 	return e;
 }
 //#endregion
-//#region ../addons/scheduler/_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));
-				}
-			};
-		},
-		abort(t) {
-			let n = e.get(t);
-			n && (n.abort(), e.delete(t));
-		}
+//#region ../addons/scheduler/_internal/deferredMounts.ts
+var t = class {
+	#e = /* @__PURE__ */ new Map();
+	add(e) {
+		this.#n(e, this.#e.get(e));
+		let t = new AbortController();
+		return this.#e.set(e, t), {
+			signal: t.signal,
+			complete: () => this.#t(e, t),
+			abort: () => this.#n(e, t)
+		};
+	}
+	abort = (e) => {
+		this.#n(e, this.#e.get(e));
 	};
+	#t(e, t) {
+		let n = this.#e.get(e) !== t, r = t.signal.aborted;
+		return n || r ? !1 : (this.#e.delete(e), !0);
+	}
+	#n(e, t) {
+		!t || this.#e.get(e) !== t || (t.abort(), this.#e.delete(e));
+	}
+};
+function n() {
+	return new t();
 }
 //#endregion
-//#region ../addons/scheduler/_internal/schedule.ts
-function n(e) {
+//#region ../addons/scheduler/_internal/isAbortError.ts
+function r(e) {
 	return (e instanceof DOMException || e instanceof Error) && e.name === "AbortError";
 }
-function r(e, t, r) {
-	if (r?.aborted) return;
-	let { scheduler: a } = globalThis;
-	if (typeof a?.postTask == "function") {
-		a.postTask(e, {
+//#endregion
+//#region ../addons/scheduler/_internal/schedule.ts
+function i(e, t, n) {
+	if (n?.aborted) return;
+	let { scheduler: i } = globalThis;
+	if (typeof i?.postTask == "function") {
+		i.postTask(e, {
 			priority: t,
-			signal: r
+			signal: n
 		}).catch((e) => {
-			n(e) || queueMicrotask(() => {
+			r(e) || queueMicrotask(() => {
 				throw e;
 			});
 		});
 		return;
 	}
-	i(e, t, r);
+	a(e, t, n);
 }
-function i(e, t, n) {
+function a(e, t, n) {
 	function r() {
 		n?.aborted || e();
 	}
@@ -68,26 +72,23 @@ function i(e, t, n) {
 			break;
 	}
 }
-function a(e = {}) {
+function o(e = {}) {
 	let t = e.priority ?? "user-visible";
 	return { schedule(e, n = {}) {
-		r(e, n.priority ?? t, n.signal);
+		i(e, n.priority ?? t, n.signal);
 	} };
 }
 //#endregion
 //#region ../addons/scheduler/index.ts
-function o(e) {
-	return (e instanceof DOMException || e instanceof Error) && e.name === "AbortError";
-}
-function s(n) {
+function s(t) {
 	return e({
 		name: "@usenagi/scheduler",
 		install(e) {
-			let r = a(n), i = t();
-			e.addMountMiddleware((e, t, n) => (t, a) => {
-				let s = i.add(t), c = () => {
-					r.schedule(() => {
-						s.complete() && e(t, a);
+			let i = o(t), a = n();
+			e.addMountMiddleware((e, t, n) => (t, o) => {
+				let s = a.add(t), c = () => {
+					i.schedule(() => {
+						s.complete() && e(t, o);
 					}, {
 						priority: n.priority,
 						signal: s.signal
@@ -96,12 +97,12 @@ function s(n) {
 				l ? l(t, s.signal).then(() => {
 					s.signal.aborted || c();
 				}, (e) => {
-					o(e) || (s.abort(), queueMicrotask(() => {
+					r(e) || (s.abort(), queueMicrotask(() => {
 						throw e;
 					}));
 				}) : c();
 			}), e.addUnmountMiddleware((e) => (t) => {
-				t.forEach(i.abort), e(t);
+				t.forEach(a.abort), e(t);
 			});
 		}
 	});

package/dist/main.es.js

@@ -4,78 +4,79 @@ function e(e) {
 }
 //#endregion
 //#region lib/core/_internal/addonRegistry.ts
-function t() {
-	let e = /* @__PURE__ */ 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);
-		}
+var t = class {
+	#e = /* @__PURE__ */ new Set();
+	#t = [];
+	#n = [];
+	#r = [];
+	get installedAddons() {
+		return this.#e;
+	}
+	addComponentMiddleware(e) {
+		this.#t.push(e);
+	}
+	addMountMiddleware(e) {
+		this.#n.push(e);
+	}
+	addUnmountMiddleware(e) {
+		this.#r.push(e);
+	}
+	composeComponent(e) {
+		return this.#t.reduce((e, t) => t(e), e);
+	}
+	composeMount(e, t, n) {
+		return this.#n.reduce((e, r) => r(e, t, n), e);
+	}
+	composeUnmount(e) {
+		return this.#r.reduce((e, t) => t(e), e);
+	}
+	install = (e) => {
+		if (this.#e.has(e.name)) throw Error(`[nagi] addon "${e.name}" is already installed`);
+		e.install(this), this.#e.add(e.name);
 	};
-	return i;
-}
+}, n = () => new t();
 //#endregion
 //#region lib/core/error.ts
-function n(e) {
+function r(e) {
 	let t = [], n = e;
 	for (; n;) t.unshift(n.name), n = n.parent;
 	return t.join(" > ");
 }
-var r = class e extends Error {
+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, r, i, a = r.parent, o) {
+	static create(t, n, i, a = n.parent, o) {
 		return new e({
 			phase: t,
-			name: r.name,
-			uid: r.uid,
-			path: n(r),
+			name: n.name,
+			uid: n.uid,
+			path: r(n),
 			parentName: a?.name,
 			parentUid: a?.uid,
-			element: r.element,
+			element: n.element,
 			cause: i,
 			...o
 		});
 	}
 };
-function i(e) {
-	return e instanceof r;
+function a(e) {
+	return e instanceof i;
 }
 //#endregion
 //#region lib/core/_internal/registry.ts
-var a = /* @__PURE__ */ new WeakMap();
-function o(e, t) {
-	let n = a.get(e);
-	if (n) throw r.create("mount", t, /* @__PURE__ */ Error(`Component "${n.name}" (${n.uid}) is already mounted on this element`), n);
-	a.set(e, t);
+var o = /* @__PURE__ */ new WeakMap();
+function s(e, t) {
+	let n = o.get(e);
+	if (n) throw i.create("mount", t, /* @__PURE__ */ Error(`Component "${n.name}" (${n.uid}) is already mounted on this element`), n);
+	o.set(e, t);
 }
 //#endregion
 //#region lib/core/_internal/component.ts
-var s = /* @__PURE__ */ function(e) {
+var c = /* @__PURE__ */ function(e) {
 	return e.MOUNTED = "Mounted", e.UNMOUNTED = "Unmounted", e;
-}(s || {}), c = 0, l = class {
+}(c || {}), l = 0, u = class {
 	Mounted = [];
 	Unmounted = [];
 	parent = null;
@@ -87,7 +88,7 @@ var s = /* @__PURE__ */ function(e) {
 	element;
 	provides = /* @__PURE__ */ new Map();
 	constructor(e, t) {
-		this.uid = `${t}.${c++}`, this.name = t, this.element = e;
+		this.uid = `${t}.${l++}`, this.name = t, this.element = e;
 	}
 	onMount = () => {
 		let e = [];
@@ -95,7 +96,7 @@ var s = /* @__PURE__ */ function(e) {
 			let n = t();
 			typeof n == "function" && e.push(n);
 		} catch (e) {
-			console.error("[nagi] onMount hook failed", r.create("mount", this, e));
+			console.error("[nagi] onMount hook failed", i.create("mount", this, e));
 		}
 		this.Unmounted.push(...e);
 	};
@@ -103,7 +104,7 @@ var s = /* @__PURE__ */ function(e) {
 		for (let e of this.Unmounted) try {
 			e();
 		} catch (e) {
-			console.error("[nagi] onUnmount cleanup failed", r.create("unmount", this, e));
+			console.error("[nagi] onUnmount cleanup failed", i.create("unmount", this, e));
 		}
 		for (let e of this.#e) e.onUnmount();
 	};
@@ -123,28 +124,28 @@ var s = /* @__PURE__ */ function(e) {
 	get childElements() {
 		return this.#e.map((e) => e.element);
 	}
-}, u;
-function d(e) {
-	if (!u) throw Error(`"${e}" called outside setup() will never be run.`);
-	return u;
+}, d;
+function f(e) {
+	if (!d) throw Error(`"${e}" called outside setup() will never be run.`);
+	return d;
 }
-function f(e, t, n = {}) {
-	let a = new l(t, e.name), o = u;
-	u = a;
+function p(e, t, n = {}) {
+	let r = new u(t, e.name), o = d;
+	d = r;
 	try {
-		o && (a.parent = o), a.props = n, a.current = e.setup(t, n) || {};
+		o && (r.parent = o), r.props = n, r.current = e.setup(t, n) || {};
 	} catch (e) {
-		throw u = o, i(e) ? e : r.create("setup", a, e, o, { props: a.props });
+		throw d = o, a(e) ? e : i.create("setup", r, e, o, { props: r.props });
 	}
-	return u = o, a;
+	return d = o, r;
 }
 //#endregion
 //#region lib/core/app.ts
-function p() {
-	let e = t(), n = (e) => {
+function m() {
+	let e = n(), t = (e) => {
 		for (let t of e) {
-			let e = a.get(t);
-			e && (e.onUnmount(), a.delete(t));
+			let e = o.get(t);
+			e && (e.onUnmount(), o.delete(t));
 		}
 	}, r = {
 		install(...t) {
@@ -152,28 +153,28 @@ function p() {
 		},
 		component(t, n = {}) {
 			let r = e.composeComponent(t), i = e.composeMount((e, t) => {
-				let n = f(r, e, t);
-				return o(e, n), n.onMount(), n;
+				let n = p(r, e, t);
+				return s(e, n), n.onMount(), n;
 			}, r, n);
 			return (e, t = {}) => i(e, t);
 		},
-		unmount(t) {
-			e.composeUnmount(n)(t);
+		unmount(n) {
+			e.composeUnmount(t)(n);
 		}
 	};
 	return r;
 }
 //#endregion
 //#region lib/core/component.ts
-function m(e) {
+function h(e) {
 	return e;
 }
 //#endregion
 //#region lib/core/context.ts
-function h() {
+function g() {
 	let e = Symbol();
 	return [{ _id: e }, () => {
-		let t = d("createContext.use");
+		let t = f("createContext.use");
 		for (; t !== null;) {
 			if (t.provides.has(e)) return t.provides.get(e);
 			t = t.parent;
@@ -181,35 +182,35 @@ function h() {
 		throw Error("createContext.use: no provider found");
 	}];
 }
-function g(e, t) {
+function _(e, t) {
 	return (n) => ({
 		name: n.name,
 		setup(r, i) {
-			return d(`withContext.${n.name}`).provides.set(e._id, t), n.setup(r, i);
+			return f(`withContext.${n.name}`).provides.set(e._id, t), n.setup(r, i);
 		}
 	});
 }
 //#endregion
 //#region lib/core/lifecycle.ts
-function _(e) {
+function v(e) {
 	return (t) => {
-		d(e)[e].push(t);
+		f(e)[e].push(t);
 	};
 }
-var v = _(s.MOUNTED), y = _(s.UNMOUNTED);
+var y = v(c.MOUNTED), b = v(c.UNMOUNTED);
 //#endregion
 //#region lib/core/props.ts
-function b() {}
+function x() {}
 //#endregion
 //#region lib/core/reactivity.ts
-var x = Symbol("watch"), S = null, C = class {
+var S = Symbol("watch"), C = null, w = class {
 	#e;
 	#t = /* @__PURE__ */ new Set();
 	constructor(e) {
 		this.#e = e;
 	}
 	get value() {
-		return S !== null && S.add(this), this.#e;
+		return C !== null && C.add(this), this.#e;
 	}
 	set value(e) {
 		if (Object.is(e, this.#e)) return;
@@ -217,12 +218,12 @@ var x = Symbol("watch"), S = null, C = class {
 		this.#e = e;
 		for (let n of Array.from(this.#t)) n(e, t);
 	}
-	[x](e) {
+	[S](e) {
 		return this.#t.add(e), () => {
 			this.#t.delete(e);
 		};
 	}
-}, w = (e) => new C(e), T = class {
+}, T = (e) => new w(e), E = class {
 	#e;
 	constructor(e) {
 		this.#e = e;
@@ -230,54 +231,54 @@ var x = Symbol("watch"), S = null, C = class {
 	get value() {
 		return this.#e.value;
 	}
-	[x](e) {
-		return this.#e[x](e);
+	[S](e) {
+		return this.#e[S](e);
 	}
-}, E = (e) => new T(e);
-function D(e, t) {
-	return e[x](t);
-}
+}, D = (e) => new E(e);
 function O(e, t) {
-	y(D(e, t));
+	return e[S](t);
+}
+function k(e, t) {
+	b(O(e, t));
 }
-function k(e) {
-	let t = w(void 0), n = [], r = () => {
+function A(e) {
+	let t = T(void 0), n = [], r = () => {
 		n.forEach((e) => {
 			e();
 		}), n = [];
 	}, i = () => {
 		r();
-		let a = S, o = /* @__PURE__ */ new Set();
-		S = o;
+		let a = C, o = /* @__PURE__ */ new Set();
+		C = o;
 		let s;
 		try {
 			s = e();
 		} finally {
-			S = a;
+			C = a;
 		}
 		t.value = s;
-		for (let e of o) n.push(e[x](() => {
+		for (let e of o) n.push(e[S](() => {
 			i();
 		}));
 	};
-	return i(), y(r), E(t);
+	return i(), b(r), D(t);
 }
 //#endregion
 //#region lib/hooks/core/useDomRef.ts
-function A(e, t) {
+function j(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));
+function M(e, t, n) {
+	let r = `[data-ref="${CSS.escape(e)}"]`, i = Array.from(t.querySelectorAll(r)).filter((e) => !j(e, n));
 	return i.length === 0 ? null : i.length === 1 ? i[0] : i;
 }
-function M(e, t) {
+function N(e, t) {
 	let n = /* @__PURE__ */ 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());
+			let a = M(i, e, t());
 			return n.set(i, a), a;
 		},
 		has(e, t) {
@@ -295,18 +296,18 @@ function M(e, t) {
 		}
 	});
 }
-function N() {
-	let e = d("useDomRef");
-	return { refs: M(e.element, () => e.childElements) };
+function P() {
+	let e = f("useDomRef");
+	return { refs: N(e.element, () => e.childElements) };
 }
 //#endregion
 //#region lib/hooks/core/useSlot.ts
-function P() {
-	let e = d("useSlot");
+function F() {
+	let e = f("useSlot");
 	return {
 		addChild(t, n, r) {
 			let i = (t) => {
-				let i = f(n, t, r);
+				let i = p(n, t, r);
 				return e.addChild(i), i;
 			};
 			return Array.isArray(t) ? t.map((e) => i(e)) : [i(t)];
@@ -316,7 +317,7 @@ function P() {
 				try {
 					e.removeChild(t);
 				} catch (n) {
-					console.error("[nagi] removeChild failed", r.create("removeChild", t, n, e));
+					console.error("[nagi] removeChild failed", i.create("removeChild", t, n, e));
 				}
 			});
 		}
@@ -324,14 +325,14 @@ function P() {
 }
 //#endregion
 //#region lib/hooks/useEvent.ts
-function F(e, t, n, r) {
-	v(() => (e.addEventListener(t, n, r), () => {
+function I(e, t, n, r) {
+	y(() => (e.addEventListener(t, n, r), () => {
 		e.removeEventListener(t, n, r);
 	}));
 }
 //#endregion
 //#region lib/hooks/useIntersectionWatch.ts
-function I(e, t, n = {
+function L(e, t, n = {
 	rootMargin: "0px",
 	threshold: .1
 }) {
@@ -341,7 +342,7 @@ function I(e, t, n = {
 			r.observe(e);
 		}) : r.observe(e);
 	}
-	v(() => (i(e), () => {
+	y(() => (i(e), () => {
 		r.disconnect();
 	}));
 	function a(e) {
@@ -351,14 +352,14 @@ function I(e, t, n = {
 }
 //#endregion
 //#region lib/hooks/useMediaQuery.ts
-function L(e, t) {
-	let n = window.matchMedia(e), r = w(n.matches), i = null;
+function R(e, t) {
+	let n = window.matchMedia(e), r = T(n.matches), i = null;
 	function a(e) {
 		r.value = e.matches, e.matches ? i = t() : (i?.(), i = null);
 	}
-	return v(() => (n.addEventListener("change", a), n.matches && (i = t()), () => {
+	return y(() => (n.addEventListener("change", a), n.matches && (i = t()), () => {
 		i?.(), n.removeEventListener("change", a);
-	})), { matchesQuery: E(r) };
+	})), { matchesQuery: D(r) };
 }
 //#endregion
-export { r as LifecycleError, p as create, h as createContext, e as defineAddon, m as defineComponent, i as isLifecycleError, b as propTypes, E as readonly, w as signal, k as useComputed, N as useDomRef, F as useEvent, I as useIntersectionWatch, L as useMediaQuery, v as useMount, P as useSlot, y as useUnmount, O as useWatch, g as withContext };
+export { i as LifecycleError, m as create, g as createContext, e as defineAddon, h as defineComponent, a as isLifecycleError, x as propTypes, D as readonly, T as signal, A as useComputed, P as useDomRef, I as useEvent, L as useIntersectionWatch, R as useMediaQuery, y as useMount, F as useSlot, b as useUnmount, k as useWatch, _ 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.Nagi={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(e){return e}function n(){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 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}(c||{}),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)}},d;function f(e){if(!d)throw Error(`"${e}" called outside setup() will never be run.`);return d}function p(e,t,n={}){let r=new u(t,e.name),o=d;d=r;try{o&&(r.parent=o),r.props=n,r.current=e.setup(t,n)||{}}catch(e){throw d=o,a(e)?e:i.create(`setup`,r,e,o,{props:r.props})}return d=o,r}function m(){let e=n(),t=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=p(r,e,t);return s(e,n),n.onMount(),n},r,n);return(e,t={})=>i(e,t)},unmount(n){e.composeUnmount(t)(n)}};return r}function h(e){return e}function g(){let e=Symbol();return[{_id:e},()=>{let t=f(`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 _(e,t){return n=>({name:n.name,setup(r,i){return f(`withContext.${n.name}`).provides.set(e._id,t),n.setup(r,i)}})}function v(e){return t=>{f(e)[e].push(t)}}var y=v(c.MOUNTED),b=v(c.UNMOUNTED);function x(){}var S=Symbol(`watch`),C=null,w=class{#e;#t=new Set;constructor(e){this.#e=e}get value(){return C!==null&&C.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)}[S](e){return this.#t.add(e),()=>{this.#t.delete(e)}}},T=e=>new w(e),E=class{#e;constructor(e){this.#e=e}get value(){return this.#e.value}[S](e){return this.#e[S](e)}},D=e=>new E(e);function O(e,t){return e[S](t)}function k(e,t){b(O(e,t))}function A(e){let t=T(void 0),n=[],r=()=>{n.forEach(e=>{e()}),n=[]},i=()=>{r();let a=C,o=new Set;C=o;let s;try{s=e()}finally{C=a}t.value=s;for(let e of o)n.push(e[S](()=>{i()}))};return i(),b(r),D(t)}function j(e,t){return t.some(t=>t!==e&&t.contains(e))}function M(e,t,n){let r=`[data-ref="${CSS.escape(e)}"]`,i=Array.from(t.querySelectorAll(r)).filter(e=>!j(e,n));return i.length===0?null:i.length===1?i[0]:i}function N(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=M(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 P(){let e=f(`useDomRef`);return{refs:N(e.element,()=>e.childElements)}}function F(){let e=f(`useSlot`);return{addChild(t,n,r){let i=t=>{let i=p(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 I(e,t,n,r){y(()=>(e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}))}function L(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)}y(()=>(i(e),()=>{r.disconnect()}));function a(e){r.unobserve(e)}return{unwatch:a}}function R(e,t){let n=window.matchMedia(e),r=T(n.matches),i=null;function a(e){r.value=e.matches,e.matches?i=t():(i?.(),i=null)}return y(()=>(n.addEventListener(`change`,a),n.matches&&(i=t()),()=>{i?.(),n.removeEventListener(`change`,a)})),{matchesQuery:D(r)}}e.LifecycleError=i,e.create=m,e.createContext=g,e.defineAddon=t,e.defineComponent=h,e.isLifecycleError=a,e.propTypes=x,e.readonly=D,e.signal=T,e.useComputed=A,e.useDomRef=P,e.useEvent=I,e.useIntersectionWatch=L,e.useMediaQuery=R,e.useMount=y,e.useSlot=F,e.useUnmount=b,e.useWatch=k,e.withContext=_});
+(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.Nagi={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(e){return e}var n=class{#e=new Set;#t=[];#n=[];#r=[];get installedAddons(){return this.#e}addComponentMiddleware(e){this.#t.push(e)}addMountMiddleware(e){this.#n.push(e)}addUnmountMiddleware(e){this.#r.push(e)}composeComponent(e){return this.#t.reduce((e,t)=>t(e),e)}composeMount(e,t,n){return this.#n.reduce((e,r)=>r(e,t,n),e)}composeUnmount(e){return this.#r.reduce((e,t)=>t(e),e)}install=e=>{if(this.#e.has(e.name))throw Error(`[nagi] addon "${e.name}" is already installed`);e.install(this),this.#e.add(e.name)}},r=()=>new n;function i(e){let t=[],n=e;for(;n;)t.unshift(n.name),n=n.parent;return t.join(` > `)}var a=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,r,a=n.parent,o){return new e({phase:t,name:n.name,uid:n.uid,path:i(n),parentName:a?.name,parentUid:a?.uid,element:n.element,cause:r,...o})}};function o(e){return e instanceof a}var s=new WeakMap;function c(e,t){let n=s.get(e);if(n)throw a.create(`mount`,t,Error(`Component "${n.name}" (${n.uid}) is already mounted on this element`),n);s.set(e,t)}var l=function(e){return e.MOUNTED=`Mounted`,e.UNMOUNTED=`Unmounted`,e}(l||{}),u=0,d=class{Mounted=[];Unmounted=[];parent=null;#e=[];uid;name;current={};props={};element;provides=new Map;constructor(e,t){this.uid=`${t}.${u++}`,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`,a.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`,a.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)}},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 d(t,e.name),i=f;f=r;try{i&&(r.parent=i),r.props=n,r.current=e.setup(t,n)||{}}catch(e){throw f=i,o(e)?e:a.create(`setup`,r,e,i,{props:r.props})}return f=i,r}function h(){let e=r(),t=e=>{for(let t of e){let e=s.get(t);e&&(e.onUnmount(),s.delete(t))}},n={install(...t){return t.forEach(e.install),n},component(t,n={}){let r=e.composeComponent(t),i=e.composeMount((e,t)=>{let n=m(r,e,t);return c(e,n),n.onMount(),n},r,n);return(e,t={})=>i(e,t)},unmount(n){e.composeUnmount(t)(n)}};return n}function g(e){return e}function _(){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 v(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 y(e){return t=>{p(e)[e].push(t)}}var b=y(l.MOUNTED),x=y(l.UNMOUNTED);function S(){}var C=Symbol(`watch`),w=null,T=class{#e;#t=new Set;constructor(e){this.#e=e}get value(){return w!==null&&w.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)}[C](e){return this.#t.add(e),()=>{this.#t.delete(e)}}},E=e=>new T(e),D=class{#e;constructor(e){this.#e=e}get value(){return this.#e.value}[C](e){return this.#e[C](e)}},O=e=>new D(e);function k(e,t){return e[C](t)}function A(e,t){x(k(e,t))}function j(e){let t=E(void 0),n=[],r=()=>{n.forEach(e=>{e()}),n=[]},i=()=>{r();let a=w,o=new Set;w=o;let s;try{s=e()}finally{w=a}t.value=s;for(let e of o)n.push(e[C](()=>{i()}))};return i(),x(r),O(t)}function M(e,t){return t.some(t=>t!==e&&t.contains(e))}function N(e,t,n){let r=`[data-ref="${CSS.escape(e)}"]`,i=Array.from(t.querySelectorAll(r)).filter(e=>!M(e,n));return i.length===0?null:i.length===1?i[0]:i}function P(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=N(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 F(){let e=p(`useDomRef`);return{refs:P(e.element,()=>e.childElements)}}function I(){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`,a.create(`removeChild`,t,n,e))}})}}}function L(e,t,n,r){b(()=>(e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}))}function R(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)}b(()=>(i(e),()=>{r.disconnect()}));function a(e){r.unobserve(e)}return{unwatch:a}}function z(e,t){let n=window.matchMedia(e),r=E(n.matches),i=null;function a(e){r.value=e.matches,e.matches?i=t():(i?.(),i=null)}return b(()=>(n.addEventListener(`change`,a),n.matches&&(i=t()),()=>{i?.(),n.removeEventListener(`change`,a)})),{matchesQuery:O(r)}}e.LifecycleError=a,e.create=h,e.createContext=_,e.defineAddon=t,e.defineComponent=g,e.isLifecycleError=o,e.propTypes=S,e.readonly=O,e.signal=E,e.useComputed=j,e.useDomRef=F,e.useEvent=L,e.useIntersectionWatch=R,e.useMediaQuery=z,e.useMount=b,e.useSlot=I,e.useUnmount=x,e.useWatch=A,e.withContext=v});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usenagi/core",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Composition-API ergonomics for vanilla DOM. Bring your own mounter.",
   "main": "./dist/main.umd.js",
   "module": "./dist/main.es.js",
@@ -23,18 +23,22 @@
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "README.md",
+    "README.ja.md",
+    "LICENSE"
   ],
   "author": "hayakawasho",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hayakawasho/nagi.git"
+    "url": "git+https://github.com/hayakawasho/nagi.git",
+    "directory": "packages/core"
   },
   "bugs": {
     "url": "https://github.com/hayakawasho/nagi/issues"
   },
-  "homepage": "https://github.com/hayakawasho/nagi#readme",
+  "homepage": "https://github.com/hayakawasho/nagi/blob/main/packages/core/README.md",
   "keywords": [
     "dom",
     "component",

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

@@ -0,0 +1,13 @@
+import type { RefElement } from "@usenagi/core";
+type DeferredMount = {
+    readonly signal: AbortSignal;
+    complete(): boolean;
+    abort(): void;
+};
+declare class DeferredMounts {
+    #private;
+    add(el: RefElement): DeferredMount;
+    abort: (el: RefElement) => void;
+}
+declare function createDeferredMounts(): DeferredMounts;
+export {};

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

@@ -0,0 +1,2 @@
+declare function isAbortError(error: unknown): boolean;
+export {};

package/types/core/_internal/addonRegistry.d.ts

@@ -1,10 +1,20 @@
-import type { ComponentSetup } from "../../types";
-import type { Addon, AddonContext, MountFn, MountOptions, UnmountFn } from "../addon";
-type AddonRegistry = AddonContext & {
+import type { ComponentSetup, RefElement } from "../../types";
+import type { Addon, AddonContext, MountOptions } from "../addon";
+type MountFn = (el: RefElement, props: Record<string, any>) => any;
+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;
+declare class AddonRegistry implements AddonContext {
+    #private;
+    get installedAddons(): ReadonlySet<string>;
+    addComponentMiddleware(middleware: ComponentMiddleware): void;
+    addMountMiddleware(middleware: MountMiddleware): void;
+    addUnmountMiddleware(middleware: UnmountMiddleware): void;
     composeComponent<S extends ComponentSetup>(setup: S): S;
     composeMount(mountFn: MountFn, setup: ComponentSetup, opts: MountOptions): MountFn;
     composeUnmount(unmountFn: UnmountFn): UnmountFn;
-    install(addon: Addon): void;
-};
-declare function createAddonRegistry(): AddonRegistry;
+    install: (addon: Addon) => void;
+}
+declare const createAddonRegistry: () => AddonRegistry;
 export {};

package/types/core/addon.d.ts

@@ -1,25 +1,19 @@
-import type { ComponentSetup, RefElement } from "../types";
+import type { ComponentMiddleware, MountMiddleware, UnmountMiddleware } from "./_internal/addonRegistry";
 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;
 };
+export type Addon = {
+    readonly name: string;
+    install(ctx: AddonContext): void;
+};
 /**
  * Identity helper for type inference only — no runtime effect.
  */

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

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