elements-kit 0.0.2 → 0.0.3

package/dist/{element-B3gwJmBr.mjs → element-CCHXkEsj.mjs}

@@ -1,7 +1,6 @@
-import { effect, isReactive } from "./signals.mjs";
+import { a as effect, t as isReactive } from "./signals-Cr7xgAJH.mjs";
 import { $slots, Slot, Slots } from "./slot.mjs";
-import { t as resolveNode } from "./polyfill-DAalJpCO.mjs";
-
+import { t as resolveNode } from "./lib-B2drrxlV.mjs";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -9,45 +8,35 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
-	for (var name in all) {
-		__defProp(target, name, {
-			get: all[name],
-			enumerable: true
-		});
-	}
-	if (!no_symbols) {
-		__defProp(target, Symbol.toStringTag, { value: "Module" });
-	}
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
 var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-			key = keys[i];
-			if (!__hasOwnProp.call(to, key) && key !== except) {
-				__defProp(to, key, {
-					get: ((k) => from[k]).bind(null, key),
-					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-				});
-			}
-		}
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
 	}
 	return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-
 //#endregion
 //#region src/jsx-runtime/constants.ts
 var constants_exports = /* @__PURE__ */ __exportAll({ ReservedNameSpaces: () => ReservedNameSpaces });
-import * as import_dom_expressions_src_constants from "dom-expressions/src/constants";
-__reExport(constants_exports, import_dom_expressions_src_constants);
+import * as import_dom_expressions_src_constants_js from "dom-expressions/src/constants.js";
+__reExport(constants_exports, import_dom_expressions_src_constants_js);
 const ReservedNameSpaces = new Set([
 	"class",
 	"on",
 	"style",
 	"prop"
 ]);
-
 //#endregion
 //#region src/jsx-runtime/children.ts
 function hasSlots(node) {
@@ -107,7 +96,6 @@ function resolveChild(value) {
 function ensureFlatArray(raw) {
 	return (Array.isArray(raw) ? raw : [raw]).flat(Infinity);
 }
-
 //#endregion
 //#region src/jsx-runtime/properties.ts
 function applyProps(node, props) {
@@ -217,11 +205,9 @@ function setEvent(el, key, handler) {
 	el.addEventListener(event, handler);
 	return () => el.removeEventListener(event, handler);
 }
-
 //#endregion
 //#region src/jsx-runtime/ref.ts
 const $ref = Symbol("ref");
-
 //#endregion
 //#region src/jsx-runtime/element.ts
 function createElement(type, { [$ref]: ref, ...props } = {}) {
@@ -272,6 +258,5 @@ function attachDisposables(el, disposables) {
 function disposeElement(el) {
 	el[Symbol.dispose]?.();
 }
-
 //#endregion
-export { disposeElement as n, createElement as t };
+export { disposeElement as n, createElement as t };

package/dist/index-C6xwOPCO.d.mts

@@ -0,0 +1,263 @@
+import { u as ValueOrReactive } from "./index-DJejH8Ff.mjs";
+
+//#region src/signals/lib.d.ts
+/**
+ * Returns `true` if `fn` is a signal handle created by {@link signal}.
+ *
+ * Relies on `Function.name` matching the internal `signalOper` function name.
+ */
+declare function isSignal(fn: () => void): boolean;
+/**
+ * Returns `true` if `fn` is a computed handle created by {@link computed}.
+ *
+ * Relies on `Function.name` matching the internal `computedOper` function name.
+ */
+declare function isComputed(fn: () => void): boolean;
+/**
+ * Returns `true` if `fn` is an effect cleanup handle created by {@link effect}.
+ *
+ * Relies on `Function.name` matching the internal `effectOper` function name.
+ */
+declare function isEffect(fn: () => void): boolean;
+/**
+ * Returns `true` if `fn` is an effectScope cleanup handle created by
+ * {@link effectScope}.
+ *
+ * Relies on `Function.name` matching the internal `effectScopeOper` function name.
+ */
+declare function isEffectScope(fn: () => void): boolean;
+/**
+ * Creates a mutable reactive signal.
+ *
+ * - **Read**: call with no arguments → returns the current value and
+ *   subscribes the active tracking context.
+ * - **Write**: call with a value → updates the signal and schedules
+ *   downstream effects if the value changed.
+ *
+ * @example
+ * ```ts
+ * const count = signal(0);
+ * count();        // → 0  (read)
+ * count(1);       // write – effects depending on count will re-run
+ * count();        // → 1
+ * ```
+ */
+declare function signal<T>(): {
+  (): T | undefined;
+  (value: T | undefined): void;
+};
+declare function signal<T>(initialValue: T): {
+  (): T;
+  (value: T): void;
+};
+/**
+ * Creates a lazily-evaluated computed value.
+ *
+ * The `getter` is only called when the computed value is read **and** one of
+ * its dependencies has changed since the last evaluation.  If nothing has
+ * changed the cached `value` is returned without re-running `getter`.
+ *
+ * Computed values are read-only; they cannot be set directly.
+ *
+ * @param getter - Pure function deriving a value from other reactive sources.
+ *                 Receives the previous value as an optional optimisation hint.
+ *
+ * @example
+ * ```ts
+ * const a = signal(1);
+ * const b = signal(2);
+ * const sum = computed(() => a() + b());
+ *
+ * sum(); // → 3
+ * a(10);
+ * sum(); // → 12  (re-evaluated lazily)
+ * ```
+ */
+declare function computed<T>(getter: (previousValue?: T) => T): () => T;
+/**
+ * Creates a reactive side-effect that runs immediately and re-runs whenever
+ * any signal or computed it read during its last execution changes.
+ *
+ * Use {@link onCleanup} inside `fn` to register teardown logic that runs
+ * before each re-execution and on final disposal.
+ *
+ * If `effect` is called inside an `effectScope` or another `effect`, the
+ * new effect is automatically owned by the outer scope and will be disposed
+ * when the scope is disposed.
+ *
+ * @param fn - The side-effect body.  Reactive reads inside this function
+ *             establish dependency links.
+ * @returns A disposal function.  Call it to stop the effect and run any
+ *          registered cleanup.
+ *
+ * @example
+ * ```ts
+ * const url = signal('/api/data');
+ *
+ * const stop = effect(() => {
+ *   const controller = new AbortController();
+ *   fetch(url(), { signal: controller.signal });
+ *   onCleanup(() => controller.abort());
+ * });
+ *
+ * url('/api/other'); // previous fetch is aborted, new one starts
+ * stop();            // final cleanup: abort the last fetch
+ * ```
+ */
+declare function effect(fn: () => void): () => void;
+/**
+ * Creates an ownership scope that groups reactive effects so they can all be
+ * disposed at once.
+ *
+ * Effects and nested scopes created inside `fn` are linked to this scope.
+ * When the returned disposal function is called, all owned effects are stopped
+ * in cascade – triggering their registered {@link onCleanup} callbacks – and
+ * the scope itself is removed from any parent scope that owns it.
+ *
+ * @param fn - Synchronous setup function.  Create effects and nested scopes
+ *             here.
+ * @returns A disposal function that tears down all owned effects and the scope
+ *          itself.
+ *
+ * @example
+ * ```ts
+ * const stopAll = effectScope(() => {
+ *   effect(() => console.log('a:', a()));
+ *   effect(() => console.log('b:', b()));
+ * });
+ *
+ * stopAll(); // both effects stopped simultaneously
+ * ```
+ */
+declare function effectScope(fn: () => void): () => void;
+/**
+ * Registers a cleanup callback for the currently executing effect or scope.
+ *
+ * The callback will be called:
+ * 1. **Before the next re-run** of the enclosing effect (so resources from
+ *    the previous run are released before the new run sets them up again).
+ * 2. **On final disposal** of the effect, whether triggered explicitly by
+ *    calling the effect's cleanup handle or implicitly by an owning
+ *    `effectScope` being disposed.
+ *
+ * Calling `onCleanup` outside of a tracking context (no active effect) is a
+ * no-op; it does **not** throw.
+ *
+ * Only one cleanup function per effect run is supported.  Calling `onCleanup`
+ * multiple times within the same run overwrites the previous registration.
+ *
+ * @param fn - The teardown callback.
+ *
+ * @example
+ * ```ts
+ * effect(() => {
+ *   const id = setInterval(() => tick(), 1000);
+ *   onCleanup(() => clearInterval(id));
+ * });
+ * ```
+ *
+ * @example Composable helper – no prop-drilling needed:
+ * ```ts
+ * function useEventListener(target: EventTarget, type: string, handler: EventListener) {
+ *   target.addEventListener(type, handler);
+ *   onCleanup(() => target.removeEventListener(type, handler));
+ * }
+ *
+ * effect(() => {
+ *   useEventListener(window, 'resize', onResize);
+ * });
+ * ```
+ */
+declare function onCleanup(fn: () => void): void;
+/**
+ * Runs `fn` as a single atomic update: all signal writes inside `fn` are
+ * collected and effects are flushed only once after `fn` returns, rather than
+ * after each individual write.
+ *
+ * Batches can be nested; the flush only occurs when the outermost batch
+ * completes.
+ *
+ * @example
+ * ```ts
+ * batch(() => {
+ *   x(1);
+ *   y(2);
+ *   z(3);
+ * }); // effects that depend on x, y, or z run once here
+ * ```
+ */
+declare function batch(fn: () => void): void;
+/**
+ * Executes `fn` in a non-tracking context: any signals read inside `fn` do
+ * **not** create dependency links on the currently active subscriber.
+ *
+ * Useful when you need to read a signal's current value without subscribing to
+ * future changes.
+ *
+ * @returns The value returned by `fn`.
+ *
+ * @example
+ * ```ts
+ * const logCount = effect(() => {
+ *   console.log('triggered by a:', a());
+ *   // read b without subscribing – effect won't re-run when b changes
+ *   console.log('current b:', untracked(() => b()));
+ * });
+ * ```
+ */
+declare function untracked<T>(fn: () => T): T;
+/**
+ * Manually triggers all subscribers of every signal read inside `fn`.
+ *
+ * Unlike writing to a signal, `trigger` does not change the signal's value; it
+ * only forces downstream effects and computeds to re-evaluate.
+ *
+ * @param fn - Function whose reactive reads identify the signals to trigger.
+ *
+ * @example
+ * ```ts
+ * const items = signal([1, 2, 3]);
+ *
+ * // Mutate in place (referential equality won't detect the change):
+ * items().push(4);
+ * trigger(() => items()); // manually notify subscribers
+ * ```
+ */
+declare function trigger(fn: () => void): void;
+//#endregion
+//#region src/signals/index.d.ts
+declare function isReactive<T>(value: ValueOrReactive<T>): value is () => T;
+type Updater<T> = (value: T) => void;
+type Computed<T> = () => T;
+type Signal<T> = Updater<T> & Computed<T>;
+/**
+ * A decorator that makes a class field reactive by automatically wrapping its value in a signal.
+ *
+ * The field behaves like a normal property (get/set) but reactivity is tracked under the hood.
+ * Any reads will subscribe to the signal and any writes will trigger updates.
+ *
+ * @example
+ * ```ts
+ * class Counter {
+ *   @reactive()
+ *   count: number = 0;
+ * }
+ *
+ * const counter = new Counter();
+ * counter.count++;        // Triggers reactivity
+ * console.log(counter.count); // Subscribes to changes
+ * ```
+ *
+ * @remarks
+ * Equivalent to manually creating a private signal and getter/setter:
+ * ```ts
+ * class Counter {
+ *   #count = signal(0);
+ *   get count() { return this.#count(); }
+ *   set count(value) { this.#count(value); }
+ * }
+ * ```
+ */
+declare function reactive<This extends object, Value>(source?: (self: This) => Signal<Value>): (_target: unknown, context: ClassFieldDecoratorContext<This, Value>) => (this: This, initialValue: Value) => Value;
+//#endregion
+export { untracked as _, reactive as a, effect as c, isEffect as d, isEffectScope as f, trigger as g, signal as h, isReactive as i, effectScope as l, onCleanup as m, Signal as n, batch as o, isSignal as p, Updater as r, computed as s, Computed as t, isComputed as u };

package/dist/index-DJejH8Ff.d.mts

@@ -0,0 +1,89 @@
+import { t as PrimitiveNodeType } from "./polyfill-BEL-HWkO.mjs";
+
+//#region src/builder/index.d.ts
+declare const DISPOSABLES: unique symbol;
+declare const DISPOSE: symbol;
+declare const VALUE: unique symbol;
+declare const EFFECT: unique symbol;
+declare class ElementBuilder<T extends Element = Element> {
+  /** Dispose the reactive element and run all cleanup functions */
+  [DISPOSE]: () => void;
+  /** The underlying DOM element */
+  private [VALUE];
+  /** A set of cleanup functions to run when disposing the element */
+  private [DISPOSABLES];
+  [EFFECT](fn: () => void): this;
+  private constructor();
+  static create<T extends Element>(el: T): ReactiveElement<T>;
+  children(...children: ValueOrReactive<ElementBuilder | Node | string | number>[]): T;
+  ref(): T;
+  ref(apply: (ref: T) => void | (() => void)): this;
+  on<K extends keyof HTMLElementEventMap>(eventType: K, listener: (ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): this;
+}
+declare function toNode(c: ElementBuilder | PrimitiveNodeType): Node;
+declare function builder<T extends Element>(el: T): ReactiveElementOf<T>;
+/**
+ * Callable overloads matching the Proxy apply trap → ref() behavior.
+ * Calling a reactive element as a function delegates to ref():
+ *   el()            → returns the raw DOM element
+ *   el((ref) => {}) → applies a side-effect, returns the builder for chaining
+ */
+interface RefCallable<T extends Element> {
+  (): T;
+  (apply: (ref: T) => void | (() => void)): this;
+}
+type ReactiveElement<T extends Element> = ElementBuilder<T> & RefCallable<T>;
+type ValueOrReactive<T> = (() => T) | T;
+type ValueOrReactiveArray<T extends any[]> = { [K in keyof T]: ValueOrReactive<T[K]> | T[K] };
+/**
+ * Filter keys that are writable (exclude readonly and getter-only).
+ */
+type WritableKeys<T> = { [K in keyof T]: (<U>() => U extends { [Q in K]: T[K] } ? 1 : 2) extends (<U>() => U extends { readonly [Q in K]: T[K] } ? 1 : 2) ? never : K }[keyof T];
+/**
+ * Extracts the object chaining part of ReactiveBuilder.
+ * Used for properties like `style` where you can do both:
+ *   .style("padding: 20px;")     // setter
+ *   .style.padding("20px")       // sub-property chaining
+ */
+type Chain<R, T> = T extends object ? { [K in WritableKeys<T>]: Builder<R, T[K]> } : {};
+type Builder<R, T = R> = T extends ((...args: infer U) => unknown) ? (...value: ValueOrReactiveArray<U>) => R : (value?: ValueOrReactive<T>) => R;
+/**
+ * Types eligible for sub-property chaining (e.g., `.style.padding("20px")`).
+ */
+type ChainableType = CSSStyleDeclaration | DOMTokenList | DOMStringMap | StylePropertyMap;
+/**
+ * Filters keys to only writable data properties.
+ * Excludes methods (function-valued properties) and event handlers (`on*`).
+ */
+type DataPropertyKeys<T> = { [K in keyof T]: K extends `on${string}` ? never : T[K] extends ((...args: any[]) => any) ? never : K }[keyof T];
+/**
+ * Reactive setter for a single property.
+ * Chainable types (CSSStyleDeclaration, DOMTokenList, etc.) get both
+ * sub-property chaining and direct setter support.
+ */
+type ReactiveSetter<R, T> = T extends ChainableType ? Chain<R, T> & ((value: ValueOrReactive<T>) => R) : (value: ValueOrReactive<T>) => R;
+/**
+ * A fully-typed reactive element builder for any Element type.
+ * Automatically maps all writable data properties into reactive setters.
+ *
+ * Use this for custom elements instead of needing generated builder interfaces.
+ *
+ * @example
+ * ```ts
+ * import { reactive, type ReactiveElementOf } from "elements-kit";
+ *
+ * class MyElement extends HTMLElement {
+ *   greeting = "hello";
+ * }
+ * customElements.define("my-element", MyElement);
+ *
+ * const myEl = () =>
+ *   reactive(document.createElement("my-element") as MyElement);
+ *
+ * // Full type support for both own and inherited properties:
+ * myEl().greeting("world").style.padding("20px").id("main");
+ * ```
+ */
+type ReactiveElementOf<T extends Element> = ElementBuilder<T> & { [K in WritableKeys<T> & DataPropertyKeys<T> & keyof T]: ReactiveSetter<ReactiveElementOf<T>, T[K]> };
+//#endregion
+export { EFFECT as a, ReactiveElementOf as c, builder as d, toNode as f, DISPOSE as i, VALUE as l, Chain as n, ElementBuilder as o, DISPOSABLES as r, ReactiveElement as s, Builder as t, ValueOrReactive as u };

package/dist/index.mjs

@@ -1,7 +1,5 @@
-import { n as disposeElement } from "./element-B3gwJmBr.mjs";
-import { effect, signal, untracked } from "./signals.mjs";
-import "./polyfill-DAalJpCO.mjs";
-
+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
@@ -125,6 +123,5 @@ function moveEntry(parent, entry, before) {
 	range.setEndAfter(entry.end);
 	parent.insertBefore(range.extractContents(), before);
 }
-
 //#endregion
-export { For };
+export { For };

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

@@ -1,4 +1,4 @@
-import { t as PrimitiveNodeType } from "../polyfill-Bvo2e52W.mjs";
+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

package/dist/jsx-runtime/index.mjs

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

package/dist/{polyfill-DAalJpCO.mjs → lib-B2drrxlV.mjs}

@@ -11,10 +11,5 @@ function resolveNode(c) {
 	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
-//#region src/polyfill.ts
-if (!Symbol.dispose) Object.defineProperty(Symbol, "dispose", { value: Symbol("dispose") });
-
-//#endregion
-export { resolveNode as t };
+export { resolveNode 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 };