@evgkch/reactive-dom 0.1.0 → 0.2.0

package/README.md

@@ -25,11 +25,11 @@ One context handles subscriptions. One function unmounts everything.
 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).
+**Peer:** `@evgkch/reactive` ^1.1.0.
 
 ```ts
-import * as R from "@evgkch/reactive"; // data
-import * as UI from "@evgkch/reactive-dom"; // DOM
+import * as R from "@evgkch/reactive";
+import * as UI from "@evgkch/reactive-dom";
 ```
 
 ---
@@ -40,12 +40,10 @@ Creates a reusable factory from an HTML template. The template is parsed **once*
 
 ```ts
 const UserCard = UI.Struct(
-    `
-  <div class="card">
-    <span data-ref="name"></span>
-    <span data-ref="age"></span>
-  </div>
-`,
+    `<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;
@@ -65,10 +63,10 @@ document.body.appendChild(el);
 
 `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:
+To remove an element and stop its subscriptions:
 
 ```ts
-UI.remove(el); // unmount all subscriptions + el.remove()
+UI.remove(el);
 ```
 
 ---
@@ -79,13 +77,11 @@ Same signature as `UI.Struct`, but the factory has two modes depending on how it
 
 ```ts
 const TaskItem = UI.List(
-    `
-  <li>
-    <input type="checkbox" data-ref="check" />
-    <span data-ref="text"></span>
-    <button data-ref="remove">✕</button>
-  </li>
-`,
+    `<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;
@@ -124,19 +120,19 @@ In list mode the library uses `Watch` to track operations on the source:
 
 `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.
+`onRemove` receives `done` — the element is removed from the 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.
+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
+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.
@@ -149,18 +145,15 @@ There is no need to manage stop functions manually — `ctx` collects them all.
 
 ```ts
 const ColumnItem = UI.Struct(
-    `
-  <div class="column">
-    <h3 data-ref="title"></h3>
-    <ul data-ref="tasks"></ul>
-  </div>
-`,
+    `<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
     },
 );
 ```
@@ -178,7 +171,6 @@ const App = UI.Struct(`<div><div data-ref="panel"></div></div>`, (props, refs, c
 
 ```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" : "",
@@ -200,40 +192,36 @@ Conditional render outside a component:
 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.
+An anchor `Comment` node fixes the position in the DOM. When the getter result changes — the previous element is unmounted, the 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.remove(el); // stop all subscriptions + el.remove()
+UI.unmount(el); // stop all subscriptions, 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)
+## Debug logging
 
-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.
+Turn on component lifecycle logs to see mount, list add/remove, slot swap, and unmount. Uses a `[reactive-dom]` prefix; meta is the element at the call site — same pattern as `@evgkch/reactive`.
 
 ```ts
-import * as UI from "@evgkch/reactive-dom";
-
 UI.configure({ log: true });
-// mount c1 <div>
-// list mount c2
-// list add c3
-// unmount c3
+// [reactive-dom] [struct:mount] <element>
+// [reactive-dom] [list:mount] <element>
+// [reactive-dom] [list:add] <element>
+// [reactive-dom] [struct:unmount] <element>
 ```
 
-- `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.
+- `configure({ log: true })` — use the default console logger.
+- `configure({ log: logger })` — your logger `{ log(message: string, meta?: unknown): void }` (same shape as `@evgkch/reactive`).
+- `configure({ log: null })` — off (default). No overhead: one guard, no work when disabled.
 
 ---
 
@@ -263,7 +251,7 @@ class TaskItemEl extends UI.ReactiveElement {
 customElements.define("task-item", TaskItemEl);
 ```
 
-`disconnectedCallback` calls `unmount` automatically. This means `UI.List` needs no manual stop — `el.remove()` triggers `disconnectedCallback` which cleans up:
+`disconnectedCallback` calls `unmount` automatically — `UI.List` needs no manual stop:
 
 ```ts
 TaskItem(ul, tasks, (item) => {
@@ -290,20 +278,17 @@ const tasks = R.List([
     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>
-`,
+    `<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;
@@ -323,24 +308,22 @@ const TaskItem = UI.List(
 );
 
 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>
-`,
+    `<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),
@@ -377,7 +360,6 @@ const App = UI.Struct(
             input.value = "";
         });
 
-        // hotkeys
         document.addEventListener("keydown", (e) => {
             if (document.activeElement === input) return;
             if (e.key === "1") filter.set("all");
@@ -395,26 +377,23 @@ 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.                                                                                       |
+| 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`. `onAdd` fires only for items added after initial mount. |
+| `Slot(container, getter)` | Conditional slot outside a component. Swaps element on change. Returns `stop`.                                                                     |
+| `remove(el)`              | Stop all subscriptions + `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? })`     | `true` = console logger, `{ log(msg, meta?) }` = your logger, `null` = off. Same pattern as `@evgkch/reactive`.                                    |
 
 ---
 
-## 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.
+## Examples
 
-**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.
+Live: `https://evgkch.github.io/reactive-dom/` — monitor, console, stream.
 
-Site: `https://<username>.github.io/<repo>/`. To test the build locally: `npm run build:gh-pages` then serve the `docs/` folder.
+Local: `npm run examples`
 
 ---
 

package/dist/create-element.js

@@ -1,5 +1,5 @@
 import { Context } from "./ctx.js";
-import { logMount } from "./log.js";
+import { getLogger, PREFIX } from "./log.js";
 import { setComponentStop } from "./unmount.js";
 export function createElement(tmpl, setup, props) {
     const fragment = tmpl.content.cloneNode(true);
@@ -22,7 +22,7 @@ export function createElement(tmpl, setup, props) {
             s();
     };
     setComponentStop(el, stop);
-    logMount(el);
+    getLogger()?.log(`${PREFIX} [struct:mount]`, el);
     return el;
 }
 export function parseTemplate(html) {

package/dist/index.d.ts

@@ -6,6 +6,6 @@ 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";
+export { configure, setLogger, getLogger } from "./log.js";
+export type { ReactiveDomLogger, ConfigureOptions } from "./log.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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"}
+{"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,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC3D,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -3,4 +3,4 @@ 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";
+export { configure, setLogger, getLogger } from "./log.js";

package/dist/list.js

@@ -1,6 +1,6 @@
 import { createElement } from "./create-element.js";
 import { parseTemplate } from "./create-element.js";
-import { logListAdd, logListMount, logListRemove } from "./log.js";
+import { getLogger, PREFIX } from "./log.js";
 import { unmount } from "./unmount.js";
 /**
  * Mount reactive list into container. Patches via Watch.
@@ -13,7 +13,7 @@ export function mountList(container, source, factory, hooks) {
         nodes.set(item, el);
         container.insertBefore(el, ref);
         if (runOnAdd) {
-            logListAdd(el);
+            getLogger()?.log(`${PREFIX} [list:add]`, el);
             hooks?.onAdd?.(el);
         }
         return el;
@@ -23,7 +23,7 @@ export function mountList(container, source, factory, hooks) {
         if (!el)
             return;
         nodes.delete(item);
-        logListRemove(el);
+        getLogger()?.log(`${PREFIX} [list:remove]`, el);
         unmount(el);
         if (hooks?.onRemove) {
             hooks.onRemove(el, () => el.remove());
@@ -32,7 +32,7 @@ export function mountList(container, source, factory, hooks) {
             el.remove();
         }
     }
-    logListMount(container);
+    getLogger()?.log(`${PREFIX} [list:mount]`, container);
     // Initial mount: no onAdd so items are visible immediately (onAdd often animates from opacity 0)
     source.forEach((item) => addItem(item, null, false));
     const stopWatch = source.watch(({ start, removed, added }) => {

package/dist/log.d.ts

@@ -1,18 +1,13 @@
-export type LogLevel = false | true | "verbose";
-export declare function setLogLevel(level: LogLevel): void;
+/** Same shape as @evgkch/reactive: one logger, inline at call site, no overhead when null. */
+export declare const PREFIX = "[reactive-dom]";
+export interface ReactiveDomLogger {
+    log(message: string, meta?: unknown): void;
+}
+export declare function setLogger(lg: ReactiveDomLogger | null): void;
+export declare function getLogger(): ReactiveDomLogger | null;
 export interface ConfigureOptions {
-    log?: LogLevel;
+    /** `null` = off, `true` = default console, or your logger. No overhead when null. */
+    log?: ReactiveDomLogger | null | true;
 }
 export declare function configure(opts?: ConfigureOptions): void;
-export declare function getLogLevel(): LogLevel;
-/** Stable id for a component root element — use in console to find references. */
-export declare function getComponentId(el: Element): string;
-export declare function logMount(el: Element): void;
-export declare function logUnmount(el: Element): void;
-export declare function logListMount(container: Element): void;
-export declare function logListAdd(el: Element): void;
-export declare function logListRemove(el: Element): void;
-export declare function logSlotMount(container: Element): void;
-export declare function logSlotSwap(container: Element, prev: Element | null, next: Element | null): void;
-export declare function logSlotStop(container: Element): void;
 //# sourceMappingURL=log.d.ts.map

package/dist/log.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"log.d.ts","sourceRoot":"","sources":["../src/log.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;AAOhD,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,CAEjD;AAED,MAAM,WAAW,gBAAgB;IAC7B,GAAG,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,wBAAgB,SAAS,CAAC,IAAI,GAAE,gBAAqB,GAAG,IAAI,CAE3D;AAED,wBAAgB,WAAW,IAAI,QAAQ,CAEtC;AAED,kFAAkF;AAClF,wBAAgB,cAAc,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,CAOlD;AAUD,wBAAgB,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAK1C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAI5C;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAIrD;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAI5C;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAI/C;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAIrD;AAED,wBAAgB,WAAW,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAMhG;AAED,wBAAgB,WAAW,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAIpD"}
+{"version":3,"file":"log.d.ts","sourceRoot":"","sources":["../src/log.ts"],"names":[],"mappings":"AAAA,8FAA8F;AAC9F,eAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAC9B,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9C;AAID,wBAAgB,SAAS,CAAC,EAAE,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAE5D;AAED,wBAAgB,SAAS,IAAI,iBAAiB,GAAG,IAAI,CAEpD;AAED,MAAM,WAAW,gBAAgB;IAC7B,qFAAqF;IACrF,GAAG,CAAC,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,IAAI,GAAE,gBAAqB,GAAG,IAAI,CAe3D"}

package/dist/log.js

@@ -1,84 +1,26 @@
-const PREFIX = "[reactive-dom]";
-let logLevel = false;
-const componentIds = new WeakMap();
-let nextId = 0;
-export function setLogLevel(level) {
-    logLevel = level;
+/** Same shape as @evgkch/reactive: one logger, inline at call site, no overhead when null. */
+export const PREFIX = "[reactive-dom]";
+let logger = null;
+export function setLogger(lg) {
+    logger = lg;
 }
-export function configure(opts = {}) {
-    if (opts.log !== undefined)
-        setLogLevel(opts.log);
-}
-export function getLogLevel() {
-    return logLevel;
-}
-/** Stable id for a component root element — use in console to find references. */
-export function getComponentId(el) {
-    let id = componentIds.get(el);
-    if (id === undefined) {
-        id = `c${++nextId}`;
-        componentIds.set(el, id);
-    }
-    return id;
-}
-function log(msg, id, extra) {
-    if (!logLevel)
-        return;
-    const parts = [PREFIX, msg];
-    if (id)
-        parts.push(id);
-    if (extra)
-        parts.push(extra);
-    console.log(parts.join(" "));
+export function getLogger() {
+    return logger;
 }
-export function logMount(el) {
-    if (!logLevel)
-        return;
-    const id = getComponentId(el);
-    const tag = el.tagName.toLowerCase();
-    log("mount", id, `<${tag}>`);
-}
-export function logUnmount(el) {
-    if (!logLevel)
-        return;
-    const id = getComponentId(el);
-    log("unmount", id);
-}
-export function logListMount(container) {
-    if (!logLevel)
-        return;
-    const id = getComponentId(container);
-    log("list mount", id);
-}
-export function logListAdd(el) {
-    if (!logLevel)
-        return;
-    const id = getComponentId(el);
-    log("list add", id);
-}
-export function logListRemove(el) {
-    if (!logLevel)
-        return;
-    const id = getComponentId(el);
-    log("list remove", id);
-}
-export function logSlotMount(container) {
-    if (!logLevel)
+export function configure(opts = {}) {
+    if (opts.log === undefined)
         return;
-    const id = getComponentId(container);
-    log("slot mount", id);
-}
-export function logSlotSwap(container, prev, next) {
-    if (!logLevel)
+    if (opts.log === null) {
+        logger = null;
         return;
-    const id = getComponentId(container);
-    const prevId = prev ? getComponentId(prev) : "-";
-    const nextId = next ? getComponentId(next) : "-";
-    log("slot swap", id, `${prevId} → ${nextId}`);
-}
-export function logSlotStop(container) {
-    if (!logLevel)
+    }
+    if (opts.log === true) {
+        logger = {
+            log(msg, meta) {
+                console.log(msg, meta ?? "");
+            },
+        };
         return;
-    const id = getComponentId(container);
-    log("slot stop", id);
+    }
+    logger = opts.log;
 }

package/dist/slot.js

@@ -1,5 +1,5 @@
 import { Batch } from "@evgkch/reactive";
-import { logSlotMount, logSlotStop, logSlotSwap } from "./log.js";
+import { getLogger, PREFIX } from "./log.js";
 import { unmount } from "./unmount.js";
 /**
  * Conditional slot. Getter returns Element | null.
@@ -8,7 +8,7 @@ import { unmount } from "./unmount.js";
 export function Slot(container, getter) {
     const anchor = document.createComment("slot");
     container.appendChild(anchor);
-    logSlotMount(container);
+    getLogger()?.log(`${PREFIX} [slot:mount]`, container);
     let current = null;
     const stopBatch = Batch(() => {
         const next = getter();
@@ -21,12 +21,12 @@ export function Slot(container, getter) {
         if (next) {
             container.insertBefore(next, anchor);
         }
-        logSlotSwap(container, current, next);
+        getLogger()?.log(`${PREFIX} [slot:swap]`, { container, prev: current, next });
         current = next;
     });
     const stop = () => {
         stopBatch();
-        logSlotStop(container);
+        getLogger()?.log(`${PREFIX} [slot:stop]`, container);
         if (current) {
             unmount(current);
             current.remove();

package/dist/unmount.js

@@ -1,4 +1,4 @@
-import { logUnmount } from "./log.js";
+import { getLogger, PREFIX } from "./log.js";
 /**
  * WeakMap: Element → stop. No leak — GC collects with the element.
  */
@@ -10,7 +10,7 @@ export function setComponentStop(el, stop) {
 export function unmount(el) {
     const stop = componentMap.get(el);
     if (stop) {
-        logUnmount(el);
+        getLogger()?.log(`${PREFIX} [struct:unmount]`, el);
         stop();
         componentMap.delete(el);
     }

package/examples/index.html

@@ -9,18 +9,18 @@
 </head>
 <body>
   <h1>Examples</h1>
-  <p>From repo root: <code>npm run build && npm run examples</code>, then open the links below.</p>
+  <p><code>npm run build && npm run examples</code>, then open the links below.</p>
   <ul>
     <li>
-      <a href="./monitor/">Monitor</a>
+      <a href="./pages/monitor/">Monitor</a>
       <span>Fake process monitor: list, add, toggle, kill, CPU/MEM/procs, hotkeys</span>
     </li>
     <li>
-      <a href="./console/">Console</a>
+      <a href="./pages/console/">Console</a>
       <span>REPL-style console: type help, ping, echo &lt;msg&gt;, clear</span>
     </li>
     <li>
-      <a href="./stream/">Stream</a>
+      <a href="./pages/stream/">Stream</a>
       <span>Live log stream: filter by level (info/warn/err), clear</span>
     </li>
   </ul>