@evgkch/reactive-dom 0.1.0

package/README.md

@@ -0,0 +1,431 @@
+# @evgkch/reactive-dom
+
+[![npm](https://img.shields.io/npm/v/@evgkch/reactive-dom)](https://www.npmjs.com/package/@evgkch/reactive-dom)
+
+DOM bindings for [@evgkch/reactive](https://www.npmjs.com/package/@evgkch/reactive). No VDOM, no compiler, no magic — two primitives, one context, close to the platform.
+
+## Philosophy
+
+The library maps directly onto the browser. Templates are real HTML parsed once by the browser. Elements are real DOM nodes. Reactivity is explicit — you decide what updates and when.
+
+Two primitives mirror the data layer:
+
+```
+R.Struct  →  UI.Struct   // one element
+R.List    →  UI.List     // collection of elements
+```
+
+One context handles subscriptions. One function unmounts everything.
+
+---
+
+## Install
+
+```sh
+npm install @evgkch/reactive @evgkch/reactive-dom
+```
+
+**Peer:** `@evgkch/reactive` ^1.0.3. In 1.0.3 the reactive package added **debug logging**: `configure({ log: true })` or `configure({ log: "verbose" })` to log Batch runs and Watch patches; `getObjectId(obj)` returns a stable id (e.g. `"t1"`) for correlating in DevTools. See [@evgkch/reactive](https://www.npmjs.com/package/@evgkch/reactive).
+
+```ts
+import * as R from "@evgkch/reactive"; // data
+import * as UI from "@evgkch/reactive-dom"; // DOM
+```
+
+---
+
+## UI.Struct
+
+Creates a reusable factory from an HTML template. The template is parsed **once** via `<template>`; each factory call clones it and runs `setup(props, refs, ctx)`.
+
+```ts
+const UserCard = UI.Struct(
+    `
+  <div class="card">
+    <span data-ref="name"></span>
+    <span data-ref="age"></span>
+  </div>
+`,
+    (props: { user: User; theme: string }, refs, ctx) => {
+        ctx.batch(() => {
+            refs.name.textContent = props.user.name;
+            refs.age.textContent = String(props.user.age);
+            refs.el.className = `card ${props.theme}`;
+        });
+    },
+);
+
+const el = UserCard({ user, theme: "dark" });
+document.body.appendChild(el);
+```
+
+- `refs.el` — root element
+- `refs[name]` — element with `[data-ref="name"]`
+- `ctx` — component context, collects all subscriptions
+
+`ctx.batch` runs **synchronously on first call** — the element is fully rendered before it enters the DOM. On subsequent reactive changes it re-runs automatically.
+
+For manual removal:
+
+```ts
+UI.remove(el); // unmount all subscriptions + el.remove()
+```
+
+---
+
+## UI.List
+
+Same signature as `UI.Struct`, but the factory has two modes depending on how it is called.
+
+```ts
+const TaskItem = UI.List(
+    `
+  <li>
+    <input type="checkbox" data-ref="check" />
+    <span data-ref="text"></span>
+    <button data-ref="remove">✕</button>
+  </li>
+`,
+    (props: { item: Task }, refs, ctx) => {
+        ctx.batch(() => {
+            refs.text.textContent = props.item.text;
+            (refs.check as HTMLInputElement).checked = props.item.done;
+            refs.el.className = props.item.done ? "done" : "";
+        });
+        refs.check.onchange = () => {
+            props.item.done = (refs.check as HTMLInputElement).checked;
+        };
+        refs.remove.onclick = () => tasks.splice(tasks.indexOf(props.item), 1);
+    },
+);
+```
+
+**Mode 1 — single element.** Pass props, get an Element back. Same as `UI.Struct`:
+
+```ts
+const el = TaskItem({ item: task });
+document.body.appendChild(el);
+```
+
+**Mode 2 — mount list.** Pass a container, a reactive source, and a props mapper. Returns a stop function:
+
+```ts
+const stop = TaskItem(ul, tasks, (item) => ({ item }), {
+    onAdd: (el) => el.animate([{ opacity: 0 }, { opacity: 1 }], 150),
+    onRemove: (el, done) => el.animate([{ opacity: 1 }, { opacity: 0 }], 150).finished.then(done),
+});
+```
+
+In list mode the library uses `Watch` to track operations on the source:
+
+- `push` → one element created and appended
+- `splice` → affected elements unmounted and removed
+- `sort` / `reverse` → nodes reordered in place
+
+`onAdd` fires only for elements added **after** initial mount — not for the initial list. Use it for enter animations, not for rendering.
+
+`onRemove` receives `done` — the element is removed from DOM only after `done()` is called, enabling exit animations.
+
+---
+
+## Context
+
+Third argument in every setup after `props` and `refs`. Every subscription registered through `ctx` is automatically stopped when the component is unmounted.
+
+```ts
+ctx.batch(fn)                                              // reactive effect
+ctx.watch(source, fn)                                      // operation handler (sync, with patch)
+ctx.list(container, source, propsFactory, factory, hooks?) // nested list
+ctx.slot(container, getter)                                // conditional render
+```
+
+There is no need to manage stop functions manually — `ctx` collects them all.
+
+---
+
+## Composition
+
+**Nested list:**
+
+```ts
+const ColumnItem = UI.Struct(
+    `
+  <div class="column">
+    <h3 data-ref="title"></h3>
+    <ul data-ref="tasks"></ul>
+  </div>
+`,
+    (props: { col: Column }, refs, ctx) => {
+        ctx.batch(() => {
+            refs.title.textContent = props.col.title;
+        });
+        ctx.list(refs.tasks, props.col.tasks, (item) => ({ item }), TaskItem);
+        // TaskItem's stop is registered in ctx — unmounted automatically with ColumnItem
+    },
+);
+```
+
+**Conditional render:**
+
+```ts
+const App = UI.Struct(`<div><div data-ref="panel"></div></div>`, (props, refs, ctx) => {
+    ctx.slot(refs.panel, () => (user.isAdmin ? AdminPanel({ user }) : UserPanel({ user })));
+    // when user.isAdmin changes — old element is unmounted, new one mounted
+});
+```
+
+**Multiple data sources in one component:**
+
+```ts
+const Item = UI.Struct(`<div data-ref="el"></div>`, (props: { item: Task }, refs, ctx) => {
+    // ctx.batch reads from multiple reactive sources — tracks all of them
+    ctx.batch(() => {
+        refs.el.className = [
+            props.item.done ? "done" : "",
+            filter.get() === "active" && props.item.done ? "hidden" : "",
+        ]
+            .join(" ")
+            .trim();
+    });
+});
+```
+
+---
+
+## UI.Slot
+
+Conditional render outside a component:
+
+```ts
+const stop = UI.Slot(container, () => (isOpen.get() ? Modal({ title }) : null));
+```
+
+An anchor `Comment` node fixes the position in DOM. When the getter result changes — previous element is unmounted, new one is inserted.
+
+---
+
+## UI.remove / UI.unmount
+
+```ts
+UI.remove(el); // unmount all subscriptions + el.remove()
+UI.unmount(el); // unmount only — element stays in DOM
+```
+
+`UI.List` and `UI.Slot` call `UI.remove` automatically on their elements. For manually mounted elements call it explicitly.
+
+---
+
+## Debug logging (component logger)
+
+Turn on component lifecycle logs to see mount, list add/remove, slot swap, and unmount in the console. Uses a `[reactive-dom]` prefix and stable ids (`c1`, `c2`, …) so you can correlate with DevTools.
+
+```ts
+import * as UI from "@evgkch/reactive-dom";
+
+UI.configure({ log: true });
+// mount c1 <div>
+// list mount c2
+// list add c3
+// unmount c3
+```
+
+- `configure({ log: true })` — mount, unmount, list mount/add/remove, slot mount/swap/stop.
+- `configure({ log: false })` — off (default).
+- `getComponentId(el)` — returns the stable id for a component root (e.g. `"c1"`), creates one if missing.
+
+In the **examples** (monitor, console, stream), both the reactive logger (`R.configure({ log: true })`) and the component logger (`UI.configure({ log: true })`) are enabled when you open the app in the browser, so you see Batch/Watch from reactive and mount/list/slot/unmount from reactive-dom together.
+
+---
+
+## ReactiveElement
+
+Base class for Custom Elements. Override `mount(ctx)` — it is called by the browser lifecycle at the right time.
+
+```ts
+class TaskItemEl extends UI.ReactiveElement {
+    #props: { item: Task } | null = null;
+
+    set props(v: { item: Task }) {
+        this.#props = v;
+        this.invalidate(); // re-mounts if already in DOM
+    }
+
+    protected mount(ctx: Context): void {
+        if (!this.#props) return;
+        const { item } = this.#props;
+        ctx.batch(() => {
+            this.textContent = item.text;
+            this.className = item.done ? "done" : "";
+        });
+    }
+}
+
+customElements.define("task-item", TaskItemEl);
+```
+
+`disconnectedCallback` calls `unmount` automatically. This means `UI.List` needs no manual stop — `el.remove()` triggers `disconnectedCallback` which cleans up:
+
+```ts
+TaskItem(ul, tasks, (item) => {
+    const el = document.createElement("task-item") as TaskItemEl;
+    el.props = { item };
+    return el; // no stop needed
+});
+```
+
+---
+
+## Full example — process monitor
+
+A compact terminal-style app: live CPU/MEM metrics, reactive process list, hotkeys.
+
+```ts
+import * as R from "@evgkch/reactive";
+import * as UI from "@evgkch/reactive-dom";
+
+const filter = R.Value("all");
+const cpu = R.Value(42);
+const tasks = R.List([
+    R.Struct({ text: "infiltrate server", done: false }),
+    R.Struct({ text: "extract data", done: true }),
+]);
+
+// live metrics
+setInterval(() => {
+    cpu.set(Math.max(10, Math.min(99, cpu.get() + Math.floor(Math.random() * 11) - 5)));
+}, 1000);
+
+const TaskItem = UI.List(
+    `
+  <li>
+    <input type="checkbox" data-ref="check" />
+    <span data-ref="text"></span>
+    <span data-ref="status"></span>
+    <button data-ref="remove">kill</button>
+  </li>
+`,
+    (props: { item: Task }, refs, ctx) => {
+        ctx.batch(() => {
+            refs.text.textContent = props.item.text;
+            (refs.check as HTMLInputElement).checked = props.item.done;
+            refs.el.className = props.item.done ? "done" : "";
+            refs.status.textContent = props.item.done ? "DONE" : "RUNNING";
+
+            const f = filter.get();
+            refs.el.style.display =
+                f === "active" ? (props.item.done ? "none" : "") : f === "done" ? (!props.item.done ? "none" : "") : "";
+        });
+        refs.check.onchange = () => {
+            props.item.done = (refs.check as HTMLInputElement).checked;
+        };
+        refs.remove.onclick = () => tasks.splice(tasks.indexOf(props.item), 1);
+    },
+);
+
+const App = UI.Struct(
+    `
+  <div class="monitor">
+    <div class="cpu-bar" data-ref="cpu-bar"></div>
+    <div class="prompt">
+      <span>$</span>
+      <input data-ref="input" placeholder="spawn process..." />
+    </div>
+    <ul data-ref="list"></ul>
+    <div class="statusbar">
+      <span data-ref="count"></span>
+      <div data-ref="filters">
+        <button data-filter="all">all</button>
+        <button data-filter="active">running</button>
+        <button data-filter="done">done</button>
+      </div>
+    </div>
+  </div>
+`,
+    (props, refs, ctx) => {
+        ctx.list(refs.list, tasks, (item) => ({ item }), TaskItem, {
+            onAdd: (el) => el.animate([{ opacity: 0 }, { opacity: 1 }], 150),
+            onRemove: (el, done) => el.animate([{ opacity: 1 }, { opacity: 0 }], 130).finished.then(done),
+        });
+
+        ctx.batch(() => {
+            refs["cpu-bar"].style.width = cpu.get() + "%";
+        });
+
+        ctx.batch(() => {
+            let running = 0;
+            tasks.forEach((t) => {
+                if (!t.done) running++;
+            });
+            refs.count.textContent = `${running} of ${tasks.length} running`;
+        });
+
+        ctx.batch(() => {
+            refs.filters.querySelectorAll("[data-filter]").forEach((btn) => {
+                btn.className = filter.get() === btn.getAttribute("data-filter") ? "active" : "";
+            });
+        });
+
+        refs.filters.addEventListener("click", (e) => {
+            const f = (e.target as HTMLElement).getAttribute("data-filter");
+            if (f) filter.set(f);
+        });
+
+        const input = refs.input as HTMLInputElement;
+        input.addEventListener("keydown", (e) => {
+            if (e.key !== "Enter" || !input.value.trim()) return;
+            tasks.push(R.Struct({ text: input.value.trim(), done: false }));
+            input.value = "";
+        });
+
+        // hotkeys
+        document.addEventListener("keydown", (e) => {
+            if (document.activeElement === input) return;
+            if (e.key === "1") filter.set("all");
+            if (e.key === "2") filter.set("active");
+            if (e.key === "3") filter.set("done");
+            if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) input.focus();
+        });
+    },
+);
+
+document.getElementById("app")!.appendChild(App({}));
+```
+
+---
+
+## API reference
+
+| API                       | Description                                                                                                                                                                  |
+| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Struct(html, setup)`     | Factory `(props) => Element`. Setup: `(props, refs, ctx)`. Template parsed once.                                                                                             |
+| `List(html, setup)`       | Dual factory. `(props) => Element` or `(container, source, propsFactory, hooks?) => stop`. Setup: `(props, refs, ctx)`. `onAdd` fires only for new items, not initial mount. |
+| `Slot(container, getter)` | Conditional slot. Swaps element on change. Returns `stop`.                                                                                                                   |
+| `remove(el)`              | `unmount(el)` + `el.remove()`.                                                                                                                                               |
+| `unmount(el)`             | Stop all subscriptions. Element stays in DOM.                                                                                                                                |
+| `ReactiveElement`         | Base class for Custom Elements. Override `mount(ctx)`, call `invalidate()` from setters.                                                                                     |
+| `configure({ log? })`     | Component logger: `log: true` logs mount/unmount, list add/remove, slot mount/swap/stop. Default `false`.                                                                   |
+| `getComponentId(el)`      | Stable id for a component root (e.g. `"c1"`). Use to correlate with logs or DevTools.                                                                                       |
+
+---
+
+## GitHub Pages
+
+Examples are deployed automatically on push to `main`. The workflow builds the lib, fills `docs/` (gitignored) with the site, and deploys it — no duplicated code in the repo.
+
+**One-time setup:** **Settings → Pages → Build and deployment → Source** must be **GitHub Actions** (not "Deploy from a branch"). If you see 404 for `dist/index.js` or `lib/index.js`, the live site is coming from the branch; switch Source to **GitHub Actions** and re-run the workflow.
+
+Site: `https://<username>.github.io/<repo>/`. To test the build locally: `npm run build:gh-pages` then serve the `docs/` folder.
+
+---
+
+## Testing
+
+```sh
+npm run build && npm test
+```
+
+---
+
+## License
+
+ISC

package/dist/create-element.d.ts

@@ -0,0 +1,5 @@
+import type { Refs } from "./ctx.js";
+import { Context } from "./ctx.js";
+export declare function createElement<P>(tmpl: HTMLTemplateElement, setup: (props: P, refs: Refs, ctx: Context) => void, props: P): Element;
+export declare function parseTemplate(html: string): HTMLTemplateElement;
+//# sourceMappingURL=create-element.d.ts.map

package/dist/create-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-element.d.ts","sourceRoot":"","sources":["../src/create-element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAInC,wBAAgB,aAAa,CAAC,CAAC,EAC3B,IAAI,EAAE,mBAAmB,EACzB,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,EACnD,KAAK,EAAE,CAAC,GACT,OAAO,CAuBT;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAI/D"}

package/dist/create-element.js

@@ -0,0 +1,32 @@
+import { Context } from "./ctx.js";
+import { logMount } from "./log.js";
+import { setComponentStop } from "./unmount.js";
+export function createElement(tmpl, setup, props) {
+    const fragment = tmpl.content.cloneNode(true);
+    const el = fragment.firstElementChild;
+    if (!el)
+        throw new Error("Template must have a root element");
+    const refs = { el };
+    const refEls = el.querySelectorAll("[data-ref]");
+    for (let i = 0; i < refEls.length; i++) {
+        const node = refEls[i];
+        const name = node.getAttribute("data-ref");
+        if (name)
+            refs[name] = node; // duplicate names: last wins
+    }
+    const stops = [];
+    const ctx = new Context(stops);
+    setup(props, refs, ctx);
+    const stop = () => {
+        for (const s of stops)
+            s();
+    };
+    setComponentStop(el, stop);
+    logMount(el);
+    return el;
+}
+export function parseTemplate(html) {
+    const tmpl = document.createElement("template");
+    tmpl.innerHTML = html.trim();
+    return tmpl;
+}

package/dist/ctx.d.ts

@@ -0,0 +1,22 @@
+export type Refs = Record<string, Element> & {
+    el: Element;
+};
+export type WatchSource<Patch> = {
+    watch(fn: (patch: Patch) => void): () => void;
+};
+export interface ContextListHooks {
+    onAdd?: (el: Element) => void;
+    onRemove?: (el: Element, done: () => void) => void;
+}
+export declare class Context {
+    #private;
+    constructor(stops: (() => void)[]);
+    batch(fn: () => void): void;
+    watch<Patch>(source: WatchSource<Patch>, fn: (patch: Patch) => void): void;
+    list<T>(container: Element, source: {
+        watch(fn: (p: unknown) => void): () => void;
+        forEach(fn: (item: T) => void): void;
+    }, propsFactory: (item: T) => unknown, itemFactory: (props: unknown) => Element, hooks?: ContextListHooks): void;
+    slot(container: Element, getter: () => Element | null): void;
+}
+//# sourceMappingURL=ctx.d.ts.map

package/dist/ctx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ctx.d.ts","sourceRoot":"","sources":["../src/ctx.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;IAAE,EAAE,EAAE,OAAO,CAAA;CAAE,CAAC;AAE7D,MAAM,MAAM,WAAW,CAAC,KAAK,IAAI;IAC7B,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CACjD,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC7B,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,qBAAa,OAAO;;gBAGJ,KAAK,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE;IAIjC,KAAK,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAI3B,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,IAAI;IAI1E,IAAI,CAAC,CAAC,EACF,SAAS,EAAE,OAAO,EAClB,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,GAAG,IAAI,CAAA;KAAE,EAC7F,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,EAClC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,EACxC,KAAK,CAAC,EAAE,gBAAgB,GACzB,IAAI;IAKP,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI;CAG/D"}

package/dist/ctx.js

@@ -0,0 +1,35 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Context_stops;
+import { Batch } from "@evgkch/reactive";
+import { mountList } from "./list.js";
+import { Slot } from "./slot.js";
+export class Context {
+    constructor(stops) {
+        _Context_stops.set(this, void 0);
+        __classPrivateFieldSet(this, _Context_stops, stops, "f");
+    }
+    batch(fn) {
+        __classPrivateFieldGet(this, _Context_stops, "f").push(Batch(fn));
+    }
+    watch(source, fn) {
+        __classPrivateFieldGet(this, _Context_stops, "f").push(source.watch(fn));
+    }
+    list(container, source, propsFactory, itemFactory, hooks) {
+        const factory = (item) => itemFactory(propsFactory(item));
+        __classPrivateFieldGet(this, _Context_stops, "f").push(mountList(container, source, factory, hooks));
+    }
+    slot(container, getter) {
+        __classPrivateFieldGet(this, _Context_stops, "f").push(Slot(container, getter));
+    }
+}
+_Context_stops = new WeakMap();

package/dist/element.d.ts

@@ -0,0 +1,13 @@
+import { Context } from "./ctx.js";
+/**
+ * Base class for Custom Elements. Override mount(ctx); call invalidate() from setters when data changes.
+ * disconnectedCallback runs when UI.List does el.remove() — no manual stop needed.
+ */
+export declare abstract class ReactiveElement extends HTMLElement {
+    #private;
+    protected invalidate(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected abstract mount(ctx: Context): void;
+}
+//# sourceMappingURL=element.d.ts.map

package/dist/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC;;;GAGG;AACH,8BAAsB,eAAgB,SAAQ,WAAW;;IAGrD,SAAS,CAAC,UAAU,IAAI,IAAI;IAiB5B,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;IAI5B,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI;CAC/C"}

package/dist/element.js

@@ -0,0 +1,44 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ReactiveElement_instances, _ReactiveElement_stops, _ReactiveElement_doMount, _ReactiveElement_unmount;
+import { Context } from "./ctx.js";
+/**
+ * Base class for Custom Elements. Override mount(ctx); call invalidate() from setters when data changes.
+ * disconnectedCallback runs when UI.List does el.remove() — no manual stop needed.
+ */
+export class ReactiveElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ReactiveElement_instances.add(this);
+        _ReactiveElement_stops.set(this, []);
+    }
+    invalidate() {
+        if (!this.isConnected)
+            return;
+        __classPrivateFieldGet(this, _ReactiveElement_instances, "m", _ReactiveElement_unmount).call(this);
+        __classPrivateFieldGet(this, _ReactiveElement_instances, "m", _ReactiveElement_doMount).call(this);
+    }
+    connectedCallback() {
+        __classPrivateFieldGet(this, _ReactiveElement_instances, "m", _ReactiveElement_doMount).call(this);
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _ReactiveElement_instances, "m", _ReactiveElement_unmount).call(this);
+    }
+}
+_ReactiveElement_stops = new WeakMap(), _ReactiveElement_instances = new WeakSet(), _ReactiveElement_doMount = function _ReactiveElement_doMount() {
+    const stops = [];
+    this.mount(new Context(stops));
+    __classPrivateFieldSet(this, _ReactiveElement_stops, stops, "f");
+}, _ReactiveElement_unmount = function _ReactiveElement_unmount() {
+    __classPrivateFieldGet(this, _ReactiveElement_stops, "f").forEach((s) => s());
+    __classPrivateFieldSet(this, _ReactiveElement_stops, [], "f");
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { Struct, Context } from "./struct.js";
+export type { Refs, StructSetup } from "./struct.js";
+export type { ListHooks } from "./list.js";
+export { List } from "./list.js";
+export type { Watchable, ListSetup } from "./list.js";
+export { Slot } from "./slot.js";
+export { unmount, remove } from "./unmount.js";
+export { ReactiveElement } from "./element.js";
+export { configure, getComponentId, setLogLevel } from "./log.js";
+export type { LogLevel, ConfigureOptions } from "./log.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACrD,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAClE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+export { Struct, Context } from "./struct.js";
+export { List } from "./list.js";
+export { Slot } from "./slot.js";
+export { unmount, remove } from "./unmount.js";
+export { ReactiveElement } from "./element.js";
+export { configure, getComponentId, setLogLevel } from "./log.js";

package/dist/list.d.ts

@@ -0,0 +1,24 @@
+import type { ListPatch } from "@evgkch/reactive";
+import type { Refs } from "./ctx.js";
+import type { Context } from "./ctx.js";
+export interface Watchable<T> {
+    watch(fn: (patch: ListPatch<T>) => void): () => void;
+    forEach(fn: (item: T) => void): void;
+}
+export interface ListHooks {
+    onAdd?: (el: Element) => void;
+    onRemove?: (el: Element, done: () => void) => void;
+}
+/**
+ * Mount reactive list into container. Patches via Watch.
+ * On remove: unmount(el), then onRemove(el, done) or el.remove().
+ */
+export declare function mountList<T>(container: Element, source: Watchable<T>, factory: (item: T) => Element, hooks?: ListHooks): () => void;
+export type ListSetup<P> = (props: P, refs: Refs, ctx: Context) => void;
+/**
+ * List(html, setup) returns a dual-purpose function:
+ * - (props) => Element — create one item (for use in ctx.list as itemFactory)
+ * - (container, source, propsFactory, hooks?) => () => void — mount list, returns stop
+ */
+export declare function List<P>(html: string, setup: ListSetup<P>): ((props: P) => Element) & ((container: Element, source: Watchable<unknown>, propsFactory: (item: unknown) => P, hooks?: ListHooks) => () => void);
+//# sourceMappingURL=list.d.ts.map

package/dist/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../src/list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAIxC,MAAM,WAAW,SAAS,CAAC,CAAC;IACxB,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,GAAG,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,SAAS;IACtB,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACtD;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,EACvB,SAAS,EAAE,OAAO,EAClB,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EACpB,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,EAC7B,KAAK,CAAC,EAAE,SAAS,GAClB,MAAM,IAAI,CAgDZ;AAUD,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;AAExE;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,GAAG,CAAC,CACnF,SAAS,EAAE,OAAO,EAClB,MAAM,EAAE,SAAS,CAAC,OAAO,CAAC,EAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,CAAC,EAClC,KAAK,CAAC,EAAE,SAAS,KAChB,MAAM,IAAI,CAAC,CAkBf"}