elements-kit 0.0.14 → 0.0.16

package/dist/{element-C_4VbkvQ.mjs → element-CGVy_8TW.mjs}

@@ -1,6 +1,7 @@
-import { d as effectScope, g as onCleanup, t as isReactive, u as effect, y as untracked } from "./signals-BHmWX6ox.mjs";
+import { _ as onCleanup, b as untracked, d as effect, f as effectScope, t as isReactive } from "./signals-J8dK_rA4.mjs";
 import "./polyfill-B1lNNcum.mjs";
-import { i as resolveNode$1, n as Slot, r as Slots, t as $slots } from "./slot-Cydy7-0L.mjs";
+import { on } from "./utilities/event-listener.mjs";
+import { i as resolveNode$1, n as Slot, r as Slots, t as SLOTS } from "./slot-Kb61AcgW.mjs";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -40,21 +41,21 @@ const ReservedNameSpaces = new Set([
 //#endregion
 //#region src/jsx-runtime/children.ts
 function hasSlots(node) {
-	return $slots in node;
+	return SLOTS in node;
 }
 function isChildrenProperty(node, key) {
 	if (key === "children" && (node instanceof Element || node instanceof DocumentFragment)) return true;
 	if (hasSlots(node)) {
 		const slotName = key.replace(/^slot:/, "");
-		if (Slots.has(node[$slots], slotName)) return true;
+		if (Slots.has(node[SLOTS], slotName)) return true;
 	}
 	return key in node && node[key] instanceof Slot;
 }
 function applyChildren(node, key, value) {
 	if (hasSlots(node)) {
 		const slotName = key.replace(/^slot:/, "");
-		if (Slots.has(node[$slots], slotName)) {
-			applySlot(node[$slots][slotName], value);
+		if (Slots.has(node[SLOTS], slotName)) {
+			applySlot(node[SLOTS][slotName], value);
 			return;
 		}
 	}
@@ -126,7 +127,7 @@ function applyProps(node, props) {
 		if (isReactive(value)) {
 			if (isEventKey(key)) {
 				effect(() => {
-					onCleanup(setEvent(node, key, value()));
+					on(node, eventName(key), value());
 				});
 				continue;
 			}
@@ -134,7 +135,7 @@ function applyProps(node, props) {
 			continue;
 		}
 		if (isEventKey(key)) {
-			onCleanup(setEvent(node, key, value));
+			on(node, eventName(key), value);
 			continue;
 		}
 		setProp(node, key, value);
@@ -210,19 +211,12 @@ function setAttribute(el, key, value) {
 function isEventKey(key) {
 	return key.startsWith("on:") || key.length > 2 && key.startsWith("on") && key[2] >= "A" && key[2] <= "Z";
 }
-function setEvent(el, key, handler) {
-	const event = key.startsWith("on:") ? key.slice(3) : key[2].toLowerCase() + key.slice(3);
-	el.addEventListener(event, handler);
-	return () => el.removeEventListener(event, handler);
+function eventName(key) {
+	return key.startsWith("on:") ? key.slice(3) : key[2].toLowerCase() + key.slice(3);
 }
 //#endregion
-//#region src/jsx-runtime/ref.ts
-const $ref = Symbol("ref");
-//#endregion
 //#region src/jsx-runtime/element.ts
-function createElement(type, rawProps = {}) {
-	const ref = rawProps[$ref];
-	const props = Object.fromEntries(Object.entries(rawProps));
+function createElement(type, { ref, ...props } = {}) {
 	if (typeof type === "function" && !type.prototype?.render) return createFunctionElement(type, props, ref);
 	return createNodeElement(type, props, ref);
 }

package/dist/for.d.mts

@@ -0,0 +1,45 @@
+import { a as Props, o as Require } from "./infer-BfzRJoCn.mjs";
+
+//#region src/for.d.ts
+type KeyFn<T> = (item: T, index: number) => string | number;
+type RenderFn<T> = (item: T, index: number) => Element | DocumentFragment | null;
+/**
+ * Keyed list renderer. Reconciles a reactive array into the DOM using a key
+ * function to match existing nodes — minimising create/destroy churn.
+ *
+ * Reconciliation strategy (inspired by udomdiff / dom-expressions):
+ *   1. Remove stale entries (keys absent from the new array).
+ *   2. Skip unchanged common prefix and suffix.
+ *   3. Pure-append fast path when the surviving old range is empty.
+ *   4. Backward scan of the middle region — move or create entries so that
+ *      each entry's range lands immediately before the already-correct cursor.
+ *
+ * @example
+ * ```tsx
+ * <For each={visibleTodos} by={(todo) => todo.id}>
+ *   {(todo) => <li>{todo.text}</li>}
+ * </For>
+ * ```
+ *
+ * Props:
+ *   each     — reactive getter returning the array (e.g. a `computed`)
+ *   by       — extracts a stable key per item (default: index)
+ *   children — render function called once per new key
+ */
+/**
+ * Props for `<For>`, derived from its public instance fields.
+ * All props are optional — the class initializes sane defaults at runtime.
+ * Non-function props also accept a reactive getter.
+ */
+type ForProps<T> = Require<Props<For<T>>, "each" | "children">;
+declare class For<T = unknown> {
+  #private;
+  constructor(_props?: ForProps<T>);
+  get each(): T[];
+  set each(v: T[]);
+  by: KeyFn<T>;
+  children: RenderFn<T>;
+  render(): DocumentFragment;
+}
+//#endregion
+export { For, ForProps };

package/dist/for.mjs

@@ -0,0 +1,136 @@
+import { n as disposeElement } from "./element-CGVy_8TW.mjs";
+import { _ as onCleanup, b as untracked, d as effect, f as effectScope, v as signal, y as trigger } from "./signals-J8dK_rA4.mjs";
+//#region src/for.ts
+var For = class {
+	constructor(_props) {}
+	#each = signal([]);
+	get each() {
+		return this.#each();
+	}
+	set each(v) {
+		if (v === untracked(this.#each)) {
+			trigger(this.#each);
+			return;
+		}
+		this.#each(v);
+	}
+	by = (_, i) => i;
+	children = () => null;
+	#start = document.createComment("<For>");
+	#end = document.createComment("</For>");
+	#cache = /* @__PURE__ */ new Map();
+	/** Keys in current DOM order — needed for prefix/suffix optimisation. */
+	#order = [];
+	render() {
+		const fragment = document.createDocumentFragment();
+		fragment.appendChild(this.#start);
+		fragment.appendChild(this.#end);
+		effect(() => this.#reconcile());
+		onCleanup(() => {
+			for (const entry of this.#cache.values()) cleanEntry(entry);
+			this.#cache.clear();
+			this.#order = [];
+		});
+		return fragment;
+	}
+	#reconcile() {
+		const parent = this.#start.parentNode;
+		if (!parent) return;
+		const items = this.each;
+		const b = items.map((item, i) => this.by(item, i));
+		const bSet = new Set(b);
+		for (const [key, entry] of this.#cache) if (!bSet.has(key)) {
+			removeEntry(entry);
+			this.#cache.delete(key);
+		}
+		const a = this.#order.filter((k) => this.#cache.has(k));
+		let aStart = 0, aEnd = a.length;
+		let bStart = 0, bEnd = b.length;
+		while (aStart < aEnd && bStart < bEnd && a[aStart] === b[bStart]) {
+			aStart++;
+			bStart++;
+		}
+		while (aEnd > aStart && bEnd > bStart && a[aEnd - 1] === b[bEnd - 1]) {
+			aEnd--;
+			bEnd--;
+		}
+		const after = bEnd < b.length ? this.#cache.get(b[bEnd]).start : this.#end;
+		if (aStart === aEnd) {
+			let cursor = after;
+			for (let i = bEnd - 1; i >= bStart; i--) {
+				const key = b[i];
+				const { entry, rendered } = this.#makeEntry(key, items[i], i);
+				insertEntry(parent, entry, cursor, rendered);
+				this.#cache.set(key, entry);
+				cursor = entry.start;
+			}
+			this.#order = [...b];
+			return;
+		}
+		let cursor = after;
+		for (let i = bEnd - 1; i >= bStart; i--) {
+			const key = b[i];
+			let entry = this.#cache.get(key);
+			if (!entry) {
+				const made = this.#makeEntry(key, items[i], i);
+				entry = made.entry;
+				insertEntry(parent, entry, cursor, made.rendered);
+				this.#cache.set(key, entry);
+			} else if (entry.end.nextSibling !== cursor) moveEntry(parent, entry, cursor);
+			cursor = entry.start;
+		}
+		this.#order = [...b];
+	}
+	#makeEntry(key, item, index) {
+		let rendered = null;
+		let dispose;
+		untracked(() => {
+			dispose = effectScope(() => {
+				rendered = this.children(item, index);
+			});
+		});
+		return {
+			entry: {
+				start: document.createComment(`[${key}]`),
+				end: document.createComment(`[/${key}]`),
+				dispose
+			},
+			rendered
+		};
+	}
+};
+function insertEntry(parent, entry, before, rendered) {
+	parent.insertBefore(entry.start, before);
+	if (rendered) parent.insertBefore(rendered, before);
+	parent.insertBefore(entry.end, before);
+}
+function cleanEntry(entry) {
+	let node = entry.start.nextSibling;
+	while (node && node !== entry.end) {
+		const next = node.nextSibling;
+		if (node instanceof Element) disposeElement(node);
+		node = next;
+	}
+	entry.dispose();
+}
+function removeEntry(entry) {
+	let node = entry.start.nextSibling;
+	while (node && node !== entry.end) {
+		const next = node.nextSibling;
+		if (node instanceof Element) disposeElement(node);
+		node = next;
+	}
+	entry.dispose();
+	const range = document.createRange();
+	range.setStartBefore(entry.start);
+	range.setEndAfter(entry.end);
+	range.deleteContents();
+}
+function moveEntry(parent, entry, before) {
+	const range = document.createRange();
+	range.setStartBefore(entry.start);
+	range.setEndAfter(entry.end);
+	parent.insertBefore(range.extractContents(), before);
+}
+//#endregion
+export { For };

package/dist/{index-DUshSQ_6.d.mts → index-DydGTqZU.d.mts}

@@ -1,24 +1,24 @@
 //#region src/signals/lib.d.ts
-declare const $signal: unique symbol;
-declare const $computed: unique symbol;
-declare const $effect: unique symbol;
-declare const $effectScope: unique symbol;
+declare const SIGNAL: unique symbol;
+declare const COMPUTED: unique symbol;
+declare const EFFECT: unique symbol;
+declare const EFFECT_SCOPE: unique symbol;
 /**
  * Returns `true` if `fn` is a signal handle created by {@link signal}.
  *
- * Relies on `$signal` matching the internal `signalOper` function name.
+ * Relies on the SIGNAL symbol.
  */
 declare function isSignal(fn: unknown): boolean;
 /**
  * Returns `true` if `fn` is a computed handle created by {@link computed}.
  *
- * Relies on `$computed` matching the internal `computedOper` function name.
+ * Relies on the COMPUTED symbol.
  */
 declare function isComputed(fn: unknown): boolean;
 /**
  * Returns `true` if `fn` is an effect cleanup handle created by {@link effect}.
  *
- * Relies on the $effect symbol branding.
+ * Relies on the EFFECT symbol.
  */
 declare function isEffect(fn: unknown): boolean;
 /**
@@ -255,11 +255,61 @@ type Signal<T> = Updater<T> & Computed<T>;
  * ```
  */
 declare function reactive<This extends object, Value>(source?: (self: This) => Signal<Value>): (_target: unknown, context: ClassFieldDecoratorContext<This, Value>) => (this: This, initialValue: Value) => Value;
+/**
+ * A value that may be static or reactive. Accepts a plain `T` or a
+ * zero-arg getter (`() => T`) — typically a `signal` or `computed`.
+ *
+ * Used across the library anywhere a prop or attribute may be bound to
+ * reactive state. Resolve with {@link resolve}, detect with {@link isReactive}.
+ *
+ * @template T — the value type.
+ *
+ * @example
+ * ```ts
+ * import { signal, computed } from "elements-kit/signals";
+ *
+ * const count = signal(0);
+ * const double = computed(() => count() * 2);
+ *
+ * const a: MaybeReactive<number> = 5;       // static
+ * const b: MaybeReactive<number> = count;   // signal (getter)
+ * const c: MaybeReactive<number> = double;  // computed (getter)
+ * ```
+ */
 type MaybeReactive<T> = T | Computed<T>;
 /**
- * Resolves a MaybeReactive<T> to its current value.
- * If the input is a function, calls it; otherwise returns as-is.
+ * Resolve a {@link MaybeReactive} to its current value. Calls the getter
+ * when reactive; returns the value as-is when static.
+ *
+ * @example
+ * ```ts
+ * resolve(5);              // 5
+ * resolve(() => count());  // current count value
+ * ```
  */
 declare function resolve<T>(value: MaybeReactive<T>): T;
+/**
+ * Turn a reactive-props object into a bag of per-key getters. Callers may
+ * pass values or reactive sources (`signal`, `computed`); reading
+ * `props.name()` inside an effect or JSX getter subscribes to whatever
+ * drives it. Static values become stable thunks, signals and computed pass
+ * through unchanged — so identity is preserved (`props.name === props.name`).
+ *
+ * @example
+ * ```tsx
+ * import { resolveProps } from "elements-kit/signals";
+ *
+ * function Greeting(raw: MaybeReactiveProps<{ name: string; excited?: boolean }>) {
+ *   const props = resolveProps(raw);
+ *   return (
+ *     <p>
+ *       Hello, {props.name}
+ *       {() => (props.excited() ? "!" : ".")}
+ *     </p>
+ *   );
+ * }
+ * ```
+ */
+declare function resolveProps<P extends object>(raw: { [K in keyof P]: MaybeReactive<P[K]> }): { readonly [K in keyof P]: Computed<P[K]> };
 //#endregion
-export { untracked as C, trigger as S, isEffect as _, isReactive as a, onCleanup as b, $computed as c, $signal as d, batch as f, isComputed as g, effectScope as h, Updater as i, $effect as l, effect as m, MaybeReactive as n, reactive as o, computed as p, Signal as r, resolve as s, Computed as t, $effectScope as u, isEffectScope as v, signal as x, isSignal as y };
+export { trigger as C, signal as S, isComputed as _, isReactive as a, isSignal as b, resolveProps as c, EFFECT_SCOPE as d, SIGNAL as f, effectScope as g, effect as h, Updater as i, COMPUTED as l, computed as m, MaybeReactive as n, reactive as o, batch as p, Signal as r, resolve as s, Computed as t, EFFECT as u, isEffect as v, untracked as w, onCleanup as x, isEffectScope as y };

package/dist/index.d.mts

@@ -1,36 +1 @@
-//#region src/jsx-runtime/for.d.ts
-type KeyFn<T> = (item: T, index: number) => string | number;
-type RenderFn<T> = (item: T, index: number) => Element | DocumentFragment | null;
-/**
- * Keyed list renderer. Reconciles a reactive array into the DOM using a key
- * function to match existing nodes — minimising create/destroy churn.
- *
- * Reconciliation strategy (inspired by udomdiff / dom-expressions):
- *   1. Remove stale entries (keys absent from the new array).
- *   2. Skip unchanged common prefix and suffix.
- *   3. Pure-append fast path when the surviving old range is empty.
- *   4. Backward scan of the middle region — move or create entries so that
- *      each entry's range lands immediately before the already-correct cursor.
- *
- * @example
- * ```tsx
- * <For each={visibleTodos} by={(todo) => todo.id}>
- *   {(todo) => <li>{todo.text}</li>}
- * </For>
- * ```
- *
- * Props:
- *   each     — reactive getter returning the array (e.g. a `computed`)
- *   by       — extracts a stable key per item (default: index)
- *   children — render function called once per new key
- */
-declare class For<T = unknown> {
-  #private;
-  get each(): T[];
-  set each(v: T[]);
-  by: KeyFn<T>;
-  children: RenderFn<T>;
-  render(): DocumentFragment;
-}
-//#endregion
-export { For };
+export { };

package/dist/index.mjs

@@ -1,144 +1 @@
-import { n as disposeElement } from "./element-C_4VbkvQ.mjs";
-import { _ as signal, g as onCleanup, u as effect, v as trigger, y as untracked } from "./signals-BHmWX6ox.mjs";
-//#region src/jsx-runtime/for.ts
-/**
-* Keyed list renderer. Reconciles a reactive array into the DOM using a key
-* function to match existing nodes — minimising create/destroy churn.
-*
-* Reconciliation strategy (inspired by udomdiff / dom-expressions):
-*   1. Remove stale entries (keys absent from the new array).
-*   2. Skip unchanged common prefix and suffix.
-*   3. Pure-append fast path when the surviving old range is empty.
-*   4. Backward scan of the middle region — move or create entries so that
-*      each entry's range lands immediately before the already-correct cursor.
-*
-* @example
-* ```tsx
-* <For each={visibleTodos} by={(todo) => todo.id}>
-*   {(todo) => <li>{todo.text}</li>}
-* </For>
-* ```
-*
-* Props:
-*   each     — reactive getter returning the array (e.g. a `computed`)
-*   by       — extracts a stable key per item (default: index)
-*   children — render function called once per new key
-*/
-var For = class {
-	#each = signal([]);
-	get each() {
-		return this.#each();
-	}
-	set each(v) {
-		if (v === untracked(this.#each)) {
-			trigger(this.#each);
-			return;
-		}
-		this.#each(v);
-	}
-	by = (_, i) => i;
-	children = () => null;
-	#start = document.createComment("<For>");
-	#end = document.createComment("</For>");
-	#cache = /* @__PURE__ */ new Map();
-	/** Keys in current DOM order — needed for prefix/suffix optimisation. */
-	#order = [];
-	render() {
-		const fragment = document.createDocumentFragment();
-		fragment.appendChild(this.#start);
-		fragment.appendChild(this.#end);
-		effect(() => this.#reconcile());
-		onCleanup(() => {
-			for (const entry of this.#cache.values()) cleanEntry(entry);
-			this.#cache.clear();
-			this.#order = [];
-		});
-		return fragment;
-	}
-	#reconcile() {
-		const parent = this.#start.parentNode;
-		if (!parent) return;
-		const items = this.each;
-		const b = items.map((item, i) => this.by(item, i));
-		const bSet = new Set(b);
-		for (const [key, entry] of this.#cache) if (!bSet.has(key)) {
-			removeEntry(entry);
-			this.#cache.delete(key);
-		}
-		const a = this.#order.filter((k) => this.#cache.has(k));
-		let aStart = 0, aEnd = a.length;
-		let bStart = 0, bEnd = b.length;
-		while (aStart < aEnd && bStart < bEnd && a[aStart] === b[bStart]) {
-			aStart++;
-			bStart++;
-		}
-		while (aEnd > aStart && bEnd > bStart && a[aEnd - 1] === b[bEnd - 1]) {
-			aEnd--;
-			bEnd--;
-		}
-		const after = bEnd < b.length ? this.#cache.get(b[bEnd]).start : this.#end;
-		if (aStart === aEnd) {
-			let cursor = after;
-			for (let i = bEnd - 1; i >= bStart; i--) {
-				const key = b[i];
-				const entry = this.#makeEntry(key);
-				insertEntry(parent, entry, cursor, untracked(() => this.children(items[i], i)));
-				this.#cache.set(key, entry);
-				cursor = entry.start;
-			}
-			this.#order = [...b];
-			return;
-		}
-		let cursor = after;
-		for (let i = bEnd - 1; i >= bStart; i--) {
-			const key = b[i];
-			let entry = this.#cache.get(key);
-			if (!entry) {
-				entry = this.#makeEntry(key);
-				insertEntry(parent, entry, cursor, untracked(() => this.children(items[i], i)));
-				this.#cache.set(key, entry);
-			} else if (entry.end.nextSibling !== cursor) moveEntry(parent, entry, cursor);
-			cursor = entry.start;
-		}
-		this.#order = [...b];
-	}
-	#makeEntry(key) {
-		return {
-			start: document.createComment(`[${key}]`),
-			end: document.createComment(`[/${key}]`)
-		};
-	}
-};
-function insertEntry(parent, entry, before, rendered) {
-	parent.insertBefore(entry.start, before);
-	if (rendered) parent.insertBefore(rendered, before);
-	parent.insertBefore(entry.end, before);
-}
-function cleanEntry(entry) {
-	let node = entry.start.nextSibling;
-	while (node && node !== entry.end) {
-		const next = node.nextSibling;
-		if (node instanceof Element) disposeElement(node);
-		node = next;
-	}
-}
-function removeEntry(entry) {
-	let node = entry.start.nextSibling;
-	while (node && node !== entry.end) {
-		const next = node.nextSibling;
-		if (node instanceof Element) disposeElement(node);
-		node = next;
-	}
-	const range = document.createRange();
-	range.setStartBefore(entry.start);
-	range.setEndAfter(entry.end);
-	range.deleteContents();
-}
-function moveEntry(parent, entry, before) {
-	const range = document.createRange();
-	range.setStartBefore(entry.start);
-	range.setEndAfter(entry.end);
-	parent.insertBefore(range.extractContents(), before);
-}
-//#endregion
-export { For };
+export {};