elements-kit 0.0.1 → 0.0.3

package/dist/index.mjs

@@ -0,0 +1,127 @@
+import { n as disposeElement } from "./element-CCHXkEsj.mjs";
+import { a as effect, f as signal, m as untracked } from "./signals-Cr7xgAJH.mjs";
+//#region src/components/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) {
+		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());
+		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 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 };

package/dist/jsx-runtime/index.d.mts

@@ -0,0 +1,70 @@
+import { t as PrimitiveNodeType } from "../polyfill-BEL-HWkO.mjs";
+import { JSX as JSX$1 } from "dom-expressions/src/jsx-h";
+
+//#region src/jsx-runtime/types.d.ts
+/** An instance created by a component class — must expose `render()`. */
+interface ComponentInstance {
+  render(): Element | DocumentFragment | null;
+}
+/** A class whose constructor returns a ComponentInstance. */
+type ComponentClass = new (...args: any[]) => ComponentInstance;
+/** Anything that can appear as a JSX child. */
+type Child = PrimitiveNodeType | AnyFn | Child[];
+/** A function that renders props into an element or fragment. */
+type AnyFn = (...args: any[]) => any;
+//#endregion
+//#region src/jsx-runtime/ref.d.ts
+declare const $ref: unique symbol;
+//#endregion
+//#region src/jsx-runtime/element.d.ts
+declare function createElement(type: string | Element | DocumentFragment | ComponentClass | ((props: Record<string | symbol, unknown>) => null | Element | DocumentFragment), {
+  [$ref]: ref,
+  ...props
+}?: Record<string | symbol, unknown>): Element | DocumentFragment | null;
+//#endregion
+//#region src/jsx-runtime/index.d.ts
+/** A value or a reactive zero-argument getter. */
+type FunctionMaybe<T> = JSX$1.FunctionMaybe<T>;
+/**
+ * Maps slot names to `Child` content.
+ * Use this to type `slot:name` JSX props on a custom component.
+ *
+ * @example
+ * ```tsx
+ * function Card(props: { title: string } & SlotProps<"header" | "footer">) { … }
+ * // caller: <Card title="…" slot:header={<h1>…</h1>} slot:footer={<p>…</p>} />
+ * ```
+ */
+type SlotProps<K extends string> = { [P in K as `slot:${P}`]?: Child };
+/**
+ * Get the full JSX prop types for a given tag name, including reactive
+ * attributes, events, and all our namespace extensions.
+ *
+ * @example
+ * ```ts
+ * type InputProps = Attrs<"input">;   // typed props for <input>
+ * type DivProps   = Attrs<"div">;     // typed props for <div>
+ * ```
+ */
+type Attrs<K extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[K];
+/** Extra props injected into every intrinsic element beyond dom-expressions defaults. */
+type OurProps = {
+  [$ref]?: (el: Element) => void;
+  [slot: `slot:${string}`]: Child;
+  [cls: `class:${string}`]: FunctionMaybe<boolean>;
+  [sty: `style:${string}`]: FunctionMaybe<string | null>;
+  [prop: `prop:${string}`]: unknown;
+};
+type WithOurProps<T> = T & OurProps;
+declare namespace JSX {
+  type Element = globalThis.Element | globalThis.DocumentFragment | null;
+  type ElementType = Child | ComponentClass;
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+  type IntrinsicElements = { [K in keyof JSX$1.IntrinsicElements]: WithOurProps<JSX$1.IntrinsicElements[K]> } & {
+    /** Custom elements (`x-foo`, `my-component`, …) get a loose typed fallback. */[customElement: `${string}-${string}`]: WithOurProps<JSX$1.DOMAttributes<HTMLElement>> & Record<string, unknown>;
+  };
+}
+//#endregion
+export { Attrs, FunctionMaybe, JSX, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime/index.mjs

@@ -0,0 +1,2 @@
+import { t as createElement } from "../element-CCHXkEsj.mjs";
+export { createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/lib-B2drrxlV.mjs

@@ -0,0 +1,15 @@
+//#region src/lib.ts
+var UnsupportedChildError = class extends Error {
+	constructor(value) {
+		super(`Unsupported child type: ${typeof value}`);
+		this.name = "UnsupportedChildError";
+	}
+};
+function resolveNode(c) {
+	if (c instanceof Node) return c;
+	if (c === null || c === void 0 || typeof c === "boolean") return document.createComment("");
+	if (typeof c === "string" || typeof c === "number" || typeof c === "bigint" || typeof c === "symbol" || c instanceof Date || c instanceof RegExp) return document.createTextNode(String(c));
+	throw new UnsupportedChildError(c);
+}
+//#endregion
+export { resolveNode as t };

package/dist/polyfill-BEL-HWkO.d.mts

@@ -0,0 +1,14 @@
+//#region src/lib.d.ts
+type PrimitiveNodeType = Node | string | boolean | number | bigint | symbol | Date | RegExp | null | undefined;
+//#endregion
+//#region src/polyfill.d.ts
+declare global {
+  interface SymbolConstructor {
+    readonly dispose: symbol;
+  }
+  interface Disposable {
+    [Symbol.dispose](): void;
+  }
+}
+//#endregion
+export { PrimitiveNodeType as t };

package/dist/signals/index.d.mts

@@ -0,0 +1,2 @@
+import { _ as untracked, a as reactive, c as effect, d as isEffect, f as isEffectScope, g as trigger, h as signal, i as isReactive, l as effectScope, m as onCleanup, n as Signal, o as batch, p as isSignal, r as Updater, s as computed, t as Computed, u as isComputed } from "../index-C6xwOPCO.mjs";
+export { Computed, Signal, Updater, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, signal, trigger, untracked };

package/dist/signals/index.mjs

@@ -0,0 +1,2 @@
+import { a as effect, c as isEffect, d as onCleanup, f as signal, i as computed, l as isEffectScope, m as untracked, n as reactive, o as effectScope, p as trigger, r as batch, s as isComputed, t as isReactive, u as isSignal } from "../signals-Cr7xgAJH.mjs";
+export { batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, signal, trigger, untracked };

package/dist/signals/lib/media.d.mts

@@ -0,0 +1,14 @@
+import { t as Computed } from "../../index-C6xwOPCO.mjs";
+
+//#region src/signals/lib/media.d.ts
+declare const isBrowser: boolean;
+/**
+ * Creates a signal that tracks a CSS media query.
+ *
+ * @param query The media query string (e.g. '(max-width: 600px)')
+ * @param defaultState The default value (for SSR/hydration)
+ * @returns Computed<boolean> that is true if the query matches
+ */
+declare function createMediaSignal(query: string, defaultState?: boolean): Computed<boolean>;
+//#endregion
+export { createMediaSignal, isBrowser };

package/dist/signals/lib/media.mjs

@@ -0,0 +1,26 @@
+import { d as onCleanup, f as signal } from "../../signals-Cr7xgAJH.mjs";
+//#region src/signals/lib/media.ts
+const isBrowser = typeof window !== "undefined";
+/**
+* Creates a signal that tracks a CSS media query.
+*
+* @param query The media query string (e.g. '(max-width: 600px)')
+* @param defaultState The default value (for SSR/hydration)
+* @returns Computed<boolean> that is true if the query matches
+*/
+function createMediaSignal(query, defaultState) {
+	if (!isBrowser) return signal(defaultState ?? false);
+	const mql = window.matchMedia(query);
+	const state = signal(mql.matches);
+	const handler = () => {
+		state(mql.matches);
+	};
+	mql.addEventListener("change", handler);
+	const cleanup = () => {
+		mql.removeEventListener("change", handler);
+	};
+	onCleanup(cleanup);
+	return Object.assign(state, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createMediaSignal, isBrowser };

package/dist/signals/lib/react.d.mts

@@ -0,0 +1,62 @@
+import { t as Computed } from "../../index-C6xwOPCO.mjs";
+
+//#region src/signals/lib/react.d.ts
+/**
+ * Subscribe to any readable signal — writable or computed — returning its current value.
+ *
+ * Accepts any zero-argument callable `() => T`, which includes both `Signal<T>` and
+ * `Computed<T>`. Using `() => T` instead of `Computed<T>` prevents TypeScript from
+ * picking the write overload of `Signal<T>` during type inference.
+ *
+ * @template T - The type of the signal value.
+ * @param value - A writable `Signal<T>` or a derived `Computed<T>`.
+ * @returns The current value, updated on every signal change.
+ *
+ * @example
+ * ```tsx
+ * const count = signal(0);
+ * const double = computed(() => count() * 2);
+ *
+ * function Display() {
+ *   const countValue = useSignal(count);
+ *   const doubleValue = useSignal(double);
+ *   return <div>{countValue} × 2 = {doubleValue}</div>;
+ * }
+ * ```
+ */
+declare function useSignal<T>(value: () => T): T;
+/**
+ * Create a signal effect scope tied to a React component's lifetime.
+ *
+ * All effects registered inside `callback` are grouped into a single scope. The scope — and every effect within it — is automatically stopped when the component unmounts.
+ *
+ * If your callback returns a `Computed<T>` signal, the hook will always return its current value, updating reactively as dependencies change. If your callback returns `void`, the value will be `undefined`.
+ *
+ * Returns the current value of the computed signal (or `undefined`).
+ *
+ * Use this when you want to create multiple related effects at once without individually managing each one's lifecycle. All effects and cleanups inside the callback are automatically cleaned up on unmount.
+ *
+ * @template T - The type of the computed value (if any).
+ * @param callback - A function that registers one or more signal effects, optionally returning a `Computed<T>`.
+ * @returns `value` — the current value of the computed signal (or `undefined`).
+ *
+ * @example
+ * ```tsx
+ * function Analytics() {
+ *   useScope(() => {
+ *     effect(() => console.log("page:", currentPage()));
+ *     effect(() => console.log("user:", currentUser()));
+ *   });
+ *   return null;
+ * }
+ *
+ * // With computed value:
+ * function DoubleCounter() {
+ *   const double = useScope(() => computed(() => count() * 2));
+ *   return <div>{double}</div>;
+ * }
+ * ```
+ */
+declare function useScope<T>(callback: () => Computed<T> | void): T | void;
+//#endregion
+export { useScope, useSignal };

package/dist/signals/lib/react.mjs

@@ -0,0 +1,82 @@
+import { a as effect, f as signal, o as effectScope } from "../../signals-Cr7xgAJH.mjs";
+import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+//#region src/signals/lib/react.ts
+/**
+* Subscribe to any readable signal — writable or computed — returning its current value.
+*
+* Accepts any zero-argument callable `() => T`, which includes both `Signal<T>` and
+* `Computed<T>`. Using `() => T` instead of `Computed<T>` prevents TypeScript from
+* picking the write overload of `Signal<T>` during type inference.
+*
+* @template T - The type of the signal value.
+* @param value - A writable `Signal<T>` or a derived `Computed<T>`.
+* @returns The current value, updated on every signal change.
+*
+* @example
+* ```tsx
+* const count = signal(0);
+* const double = computed(() => count() * 2);
+*
+* function Display() {
+*   const countValue = useSignal(count);
+*   const doubleValue = useSignal(double);
+*   return <div>{countValue} × 2 = {doubleValue}</div>;
+* }
+* ```
+*/
+function useSignal(value) {
+	return useSyncExternalStore((callback) => effect(() => {
+		value();
+		callback();
+	}), () => value(), () => value());
+}
+/**
+* Create a signal effect scope tied to a React component's lifetime.
+*
+* All effects registered inside `callback` are grouped into a single scope. The scope — and every effect within it — is automatically stopped when the component unmounts.
+*
+* If your callback returns a `Computed<T>` signal, the hook will always return its current value, updating reactively as dependencies change. If your callback returns `void`, the value will be `undefined`.
+*
+* Returns the current value of the computed signal (or `undefined`).
+*
+* Use this when you want to create multiple related effects at once without individually managing each one's lifecycle. All effects and cleanups inside the callback are automatically cleaned up on unmount.
+*
+* @template T - The type of the computed value (if any).
+* @param callback - A function that registers one or more signal effects, optionally returning a `Computed<T>`.
+* @returns `value` — the current value of the computed signal (or `undefined`).
+*
+* @example
+* ```tsx
+* function Analytics() {
+*   useScope(() => {
+*     effect(() => console.log("page:", currentPage()));
+*     effect(() => console.log("user:", currentUser()));
+*   });
+*   return null;
+* }
+*
+* // With computed value:
+* function DoubleCounter() {
+*   const double = useScope(() => computed(() => count() * 2));
+*   return <div>{double}</div>;
+* }
+* ```
+*/
+function useScope(callback) {
+	const computedRef = useRef(void 0);
+	const stopScope = useMemo(() => {
+		return effectScope(() => {
+			computedRef.current = callback();
+		});
+	}, [callback]);
+	const value = useSignal(computedRef.current ?? fallbackSignal);
+	useEffect(() => {
+		return () => {
+			stopScope();
+		};
+	}, [stopScope]);
+	return value;
+}
+const fallbackSignal = signal(void 0);
+//#endregion
+export { useScope, useSignal };