elements-kit 0.3.1 → 0.3.3

package/dist/{benchmark.CX_oY03V-COK1VBpH.mjs → benchmark.CX_oY03V-CsUg-gW0.mjs}

@@ -5106,7 +5106,7 @@ function manageArtifactAttachment(attachment) {
 	if (attachment.body != null) attachment.bodyEncoding ??= "base64";
 }
 //#endregion
-//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_jsdom@29.1.0_vite@8.0.8_@types+node@25.5.2_esbuild@0.27.7_/node_modules/vitest/dist/chunks/utils.BX5Fg8C4.js
+//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_vite@8.0.8_@types+node@25.5.2_esbuild@0.27.7_/node_modules/vitest/dist/chunks/utils.BX5Fg8C4.js
 const NAME_WORKER_STATE = "__vitest_worker__";
 function getWorkerState() {
 	const workerState = globalThis[NAME_WORKER_STATE];
@@ -5146,7 +5146,7 @@ async function waitForImportsToResolve() {
 	await waitForImportsToResolve();
 }
 //#endregion
-//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_jsdom@29.1.0_vite@8.0.8_@types+node@25.5.2_esbuild@0.27.7_/node_modules/vitest/dist/chunks/benchmark.CX_oY03V.js
+//#region node_modules/.pnpm/vitest@4.1.3_@types+node@25.5.2_happy-dom@20.8.9_vite@8.0.8_@types+node@25.5.2_esbuild@0.27.7_/node_modules/vitest/dist/chunks/benchmark.CX_oY03V.js
 const benchFns = /* @__PURE__ */ new WeakMap();
 const benchOptsMap = /* @__PURE__ */ new WeakMap();
 const bench = createBenchmark(function(name, fn = noop, options = {}) {

package/dist/custom-elements-D5CgfNKc.d.mts

@@ -0,0 +1,55 @@
+//#region src/custom-elements.d.ts
+/**
+ * Registry of custom-element tags to their constructors.
+ * Users augment this interface to add typed JSX support for their elements.
+ *
+ * The interface lives in the global `ElementsKit` namespace so augmentations
+ * propagate cleanly through type-bundle chunk splits — augmenting a module
+ * subpath would not always merge with internal references inside the JSX
+ * namespace's `IntrinsicElements`.
+ *
+ * @example
+ * ```ts
+ * declare global {
+ *   namespace ElementsKit {
+ *     interface CustomElementRegistry {
+ *       "x-range": typeof XRange;
+ *     }
+ *   }
+ * }
+ * ```
+ */
+declare global {
+  namespace ElementsKit {
+    interface CustomElementRegistry {}
+  }
+}
+type CustomElementRegistry = ElementsKit.CustomElementRegistry;
+type AnyCtor = CustomElementConstructor;
+/**
+ * Register a custom element with the browser and return its class.
+ * Pair with an augmentation of `ElementsKit.CustomElementRegistry` to get typed JSX.
+ *
+ * @example
+ * ```tsx
+ * import { defineElement } from "elements-kit/custom-elements";
+ *
+ * class XCounter extends HTMLElement {}
+ *
+ * defineElement("x-counter", XCounter);
+ *
+ * declare global {
+ *   namespace ElementsKit {
+ *     interface CustomElementRegistry {
+ *       "x-counter": typeof XCounter;
+ *     }
+ *   }
+ * }
+ *
+ * // JSX now gets typed props + typed ref
+ * // <x-counter />
+ * ```
+ */
+declare function defineElement<Tag extends `${string}-${string}`, C extends AnyCtor>(tag: Tag, cls: C, options?: ElementDefinitionOptions): C;
+//#endregion
+export { defineElement as n, CustomElementRegistry as t };

package/dist/custom-elements.d.mts

@@ -1,2 +1,2 @@
-import { n as defineElement, t as CustomElementRegistry } from "./custom-elements-CBuenqVD.mjs";
+import { n as defineElement, t as CustomElementRegistry } from "./custom-elements-D5CgfNKc.mjs";
 export { CustomElementRegistry, defineElement };

package/dist/custom-elements.mjs

@@ -1,7 +1,7 @@
 //#region src/custom-elements.ts
 /**
 * Register a custom element with the browser and return its class.
-* Pair with a module augmentation of `CustomElementRegistry` to get typed JSX.
+* Pair with an augmentation of `ElementsKit.CustomElementRegistry` to get typed JSX.
 *
 * @example
 * ```tsx
@@ -11,9 +11,11 @@
 *
 * defineElement("x-counter", XCounter);
 *
-* declare module "elements-kit/custom-elements" {
-*   interface CustomElementRegistry {
-*     "x-counter": typeof XCounter;
+* declare global {
+*   namespace ElementsKit {
+*     interface CustomElementRegistry {
+*       "x-counter": typeof XCounter;
+*     }
 *   }
 * }
 *

package/dist/{element-BjpyY6qv.mjs → element-DvqBlRly.mjs}

@@ -2,19 +2,96 @@ import { c as effectScope, g as untracked, p as onCleanup, s as effect } from ".
 import "./polyfill-CdZVCxdo.mjs";
 import { isReactive, resolveProps } from "./signals/index.mjs";
 import { on } from "./utilities/event-listener.mjs";
-import { i as resolveNode$1, n as Slot, r as Slots, t as SLOTS } from "./slot-BnzxFBfO.mjs";
-import { ChildProperties, Properties, SVGNamespace } from "dom-expressions/src/constants.js";
+import { n as Slot, r as resolveNode$1, t as SLOTS } from "./slot-DLjSL6t1.mjs";
 //#region src/jsx-runtime/constants.ts
 /**
 * IDL properties that take precedence over the default `setAttribute` path.
 *
-* Extends dom-expressions' base set with `defaultValue` — without it, JSX
-* `<input defaultValue="x" />` falls through to `setAttribute("defaultValue",
-* "x")` and creates a useless `defaultvalue` HTML attribute (native
-* `HTMLInputElement` has no such content attribute; its `defaultValue` IDL
-* property reflects the `value` content attribute instead).
+* Includes camelCase boolean aliases (`readOnly`, `noValidate`, …) plus
+* lowercase boolean attributes that should be set as properties for correct
+* reflection. `defaultValue` is added on top — without it, `<input
+* defaultValue="x" />` falls through to `setAttribute("defaultValue", "x")`
+* which creates a useless `defaultvalue` content attribute (native
+* `HTMLInputElement` has no such attribute; the IDL property reflects `value`).
 */
-const Properties$1 = new Set([...Properties, "defaultValue"]);
+const Properties = new Set([
+	"className",
+	"value",
+	"readOnly",
+	"noValidate",
+	"formNoValidate",
+	"isMap",
+	"noModule",
+	"playsInline",
+	"adAuctionHeaders",
+	"allowFullscreen",
+	"browsingTopics",
+	"defaultChecked",
+	"defaultMuted",
+	"defaultSelected",
+	"disablePictureInPicture",
+	"disableRemotePlayback",
+	"preservesPitch",
+	"shadowRootClonable",
+	"shadowRootCustomElementRegistry",
+	"shadowRootDelegatesFocus",
+	"shadowRootSerializable",
+	"sharedStorageWritable",
+	"allowfullscreen",
+	"async",
+	"alpha",
+	"autofocus",
+	"autoplay",
+	"checked",
+	"controls",
+	"default",
+	"disabled",
+	"formnovalidate",
+	"hidden",
+	"indeterminate",
+	"inert",
+	"ismap",
+	"loop",
+	"multiple",
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"seamless",
+	"selected",
+	"adauctionheaders",
+	"browsingtopics",
+	"credentialless",
+	"defaultchecked",
+	"defaultmuted",
+	"defaultselected",
+	"defer",
+	"disablepictureinpicture",
+	"disableremoteplayback",
+	"preservespitch",
+	"shadowrootclonable",
+	"shadowrootcustomelementregistry",
+	"shadowrootdelegatesfocus",
+	"shadowrootserializable",
+	"sharedstoragewritable",
+	"defaultValue"
+]);
+/** Properties whose assignment replaces the element's children. */
+const ChildProperties = new Set([
+	"innerHTML",
+	"textContent",
+	"innerText",
+	"children"
+]);
+/** XML namespaces for SVG-namespaced attributes (`xlink:href`, `xml:lang`). */
+const SVGNamespace = {
+	xlink: "http://www.w3.org/1999/xlink",
+	xml: "http://www.w3.org/XML/1998/namespace"
+};
 const ReservedNameSpaces = new Set([
 	"class",
 	"on",
@@ -29,15 +106,14 @@ function hasSlots(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 (key.replace(/^slot:/, "") in node[SLOTS]) 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)) {
+		if (slotName in node[SLOTS]) {
 			applySlot(node[SLOTS][slotName], value);
 			return;
 		}
@@ -67,8 +143,72 @@ function applySlot(slot, value) {
 		});
 	});
 }
+const FRAGMENT_POOL_MAX = 4;
+const fragmentPool = [];
+function acquireFragment() {
+	return fragmentPool.pop() ?? document.createDocumentFragment();
+}
+function releaseFragment(frag) {
+	if (fragmentPool.length < FRAGMENT_POOL_MAX) fragmentPool.push(frag);
+}
 function mountChildren(el, value) {
-	for (const child of ensureFlatArray(value)) mountChild(el, child);
+	const list = ensureFlatArray(value);
+	if (list.length === 0) return;
+	if (list.length === 1) {
+		mountChild(el, list[0]);
+		return;
+	}
+	const kind = classifyStatic(list);
+	if (kind !== 0) {
+		mountStatic(el, list, kind);
+		return;
+	}
+	const buffer = acquireFragment();
+	for (const child of list) mountChild(buffer, child);
+	el.appendChild(buffer);
+	releaseFragment(buffer);
+}
+function classifyStatic(list) {
+	let kind = 3;
+	for (const c of list) {
+		if (c == null || c === false || c === true) continue;
+		if (typeof c === "function") return 0;
+		if (c instanceof Node) kind &= 1;
+		else if (typeof c === "string" || typeof c === "number") kind &= 2;
+		else return 0;
+		if (kind === 0) return 3;
+	}
+	return kind === 3 ? 2 : kind;
+}
+function mountStatic(el, list, kind) {
+	const buffer = acquireFragment();
+	let disposers = null;
+	if (kind === 1) for (const c of list) {
+		const node = c;
+		const dispose = node[Symbol.dispose];
+		if (dispose) (disposers ??= []).push(dispose);
+		buffer.appendChild(node);
+	}
+	else if (kind === 2) for (const c of list) {
+		if (c == null || c === false || c === true) continue;
+		buffer.appendChild(document.createTextNode(String(c)));
+	}
+	else for (const c of list) {
+		if (c == null || c === false || c === true) continue;
+		if (c instanceof Node) {
+			const dispose = c[Symbol.dispose];
+			if (dispose) (disposers ??= []).push(dispose);
+			buffer.appendChild(c);
+		} else buffer.appendChild(document.createTextNode(String(c)));
+	}
+	el.appendChild(buffer);
+	releaseFragment(buffer);
+	if (disposers && disposers.length > 0) {
+		const ds = disposers;
+		effectScope(() => {
+			onCleanup(() => ds.forEach((d) => d()));
+		});
+	}
 }
 /**
 * Mounts a single child into `el`. Reactive functions become live slots; other
@@ -82,8 +222,8 @@ function mountChildren(el, value) {
 */
 function mountChild(el, child) {
 	if (typeof child === "function") {
-		const slot = Slot.new();
-		el.appendChild(slot());
+		const slot = new Slot();
+		el.appendChild(slot.render());
 		effectScope(() => {
 			effect(() => slot.set(resolveChild(child())));
 			onCleanup(() => slot.clear());
@@ -113,23 +253,24 @@ function ensureFlatArray(raw) {
 //#endregion
 //#region src/jsx-runtime/properties.ts
 function applyProps(node, props) {
-	for (const [key, value] of Object.entries(props)) {
+	const entries = Object.entries(props);
+	if (entries.length === 0) return;
+	for (const [key, value] of entries) {
 		if (isChildrenProperty(node, key)) {
 			applyChildren(node, key, value);
 			continue;
 		}
-		if (isReactive(value)) {
-			if (isEventKey(key)) {
-				effect(() => {
-					on(node, eventName(key), value());
-				});
-				continue;
-			}
-			effect(() => setProp(node, key, value()));
+		const colonIdx = key.indexOf(":");
+		if ((colonIdx > 0 ? key.slice(0, colonIdx) : "") === "on") {
+			const evName = key.slice(colonIdx + 1);
+			if (isReactive(value)) effect(() => {
+				on(node, evName, value());
+			});
+			else on(node, evName, value);
 			continue;
 		}
-		if (isEventKey(key)) {
-			on(node, eventName(key), value);
+		if (isReactive(value)) {
+			effect(() => setProp(node, key, value()));
 			continue;
 		}
 		setProp(node, key, value);
@@ -174,7 +315,7 @@ function setProp(node, key, value) {
 		node[key] = value ?? "";
 		return;
 	}
-	if (!(node instanceof SVGElement) && Properties$1.has(key)) {
+	if (!(node instanceof SVGElement) && Properties.has(key)) {
 		node[key] = value;
 		return;
 	}
@@ -199,14 +340,35 @@ function applyStyle(el, value) {
 	else if (value && typeof value === "object") Object.assign(s, value);
 }
 function setAttribute(el, key, value) {
-	if (value == null || value === false) el.removeAttribute(key);
-	else el.setAttribute(key, value === true ? "" : String(value));
-}
-function isEventKey(key) {
-	return key.startsWith("on:");
+	if (value == null || value === false) {
+		if (el.hasAttribute(key)) el.removeAttribute(key);
+		return;
+	}
+	const next = value === true ? "" : String(value);
+	if (el.getAttribute(key) === next) return;
+	el.setAttribute(key, next);
 }
-function eventName(key) {
-	return key.slice(3);
+//#endregion
+//#region src/jsx-runtime/dispose.ts
+const DISPOSABLES = /* @__PURE__ */ new WeakMap();
+const sharedDispose = function() {
+	const set = DISPOSABLES.get(this);
+	if (!set) return;
+	DISPOSABLES.delete(this);
+	set.forEach((fn) => fn());
+	set.clear();
+};
+function attachDisposables(target, disposers) {
+	const existing = DISPOSABLES.get(target);
+	if (existing) {
+		disposers.forEach((d) => existing.add(d));
+		return;
+	}
+	DISPOSABLES.set(target, disposers);
+	Object.defineProperty(target, Symbol.dispose, {
+		value: sharedDispose.bind(target),
+		configurable: true
+	});
 }
 //#endregion
 //#region src/jsx-runtime/element.ts
@@ -259,19 +421,5 @@ function renderNode(node) {
 	if (!node || typeof node.render !== "function") return null;
 	return renderNode(node.render());
 }
-function hasOwnDisposable(el) {
-	return Object.hasOwn(el, Symbol.dispose);
-}
-function attachDisposables(el, disposables) {
-	const existingDispose = hasOwnDisposable(el) ? el[Symbol.dispose].bind(el) : null;
-	Object.defineProperty(el, Symbol.dispose, {
-		value() {
-			existingDispose?.();
-			disposables.forEach((fn) => fn());
-			disposables.clear();
-		},
-		configurable: true
-	});
-}
 //#endregion
 export { disposeElement as n, mountChild as r, createElement as t };

package/dist/for.d.mts

@@ -1,4 +1,4 @@
-import { i as Props, s as Require } from "./infer-BUUWMoG9.mjs";
+import { i as Props, s as Require } from "./infer-K2Te9gn1.mjs";
 
 //#region src/for.d.ts
 type KeyFn<T> = (item: T, index: number) => string | number;

package/dist/for.mjs

@@ -1,6 +1,6 @@
 import { c as effectScope, g as untracked, h as trigger, m as signal, p as onCleanup, s as effect } from "./lib-CVfOddra.mjs";
 import "./signals/index.mjs";
-import { n as disposeElement } from "./element-BjpyY6qv.mjs";
+import { n as disposeElement } from "./element-DvqBlRly.mjs";
 //#region src/for.ts
 /**
 * Keyed list renderer. See {@link ForProps} for prop details.

package/dist/{infer-BUUWMoG9.d.mts → infer-K2Te9gn1.d.mts}

@@ -1,6 +1,6 @@
 import { n as AttrChangeHandler, t as ATTRIBUTES } from "./attributes-3r7Diua4.mjs";
-import { t as CustomElementRegistry } from "./custom-elements-CBuenqVD.mjs";
-import { a as PrimitiveNodeType, i as Slots, n as Slot, t as SLOTS } from "./slot-CfafCBOW.mjs";
+import { t as CustomElementRegistry } from "./custom-elements-D5CgfNKc.mjs";
+import { n as Slot, r as PrimitiveNodeType, t as SLOTS } from "./slot-B8y0aEoz.mjs";
 import { JSX } from "dom-expressions/src/jsx-h";
 
 //#region src/jsx-runtime/element.d.ts
@@ -395,24 +395,34 @@ type SlotProps<K extends string> = { [P in K as `slot:${P}`]?: Child };
 type Attrs<K extends keyof JSX$1.IntrinsicElements> = JSX$1.IntrinsicElements[K];
 /**
  * Namespaced JSX props added by elements-kit on top of dom-expressions.
- *
- * - `ref` — callback invoked with the mounted element.
- * - `slot:foo` — accepts any `Child`. Reactive children come for free because
- *   `Child` already includes `AnyFn` (so `() => content()` and `signal` both
- *   typecheck and are wired as reactive slots by `mountChild`).
- * - `class:foo` / `style:foo` — `MaybeReactive<T>` (value or zero-arg getter),
- *   because their value types (`boolean` / `string | null`) are primitives
- *   that don't otherwise allow function form.
- * - `prop:foo` — any value, direct property assignment, no reactive coupling.
+ * All four are tag-aware via the element type `E`.
+ *
+ * - `ref` — callback invoked with the mounted element, typed as the concrete
+ *   element class for intrinsics and registered custom elements.
+ * - `class:foo` — open string + `MaybeReactive<boolean>`. Class names are
+ *   user-defined CSS so the key stays open (no autocomplete possible).
+ * - `style:cssProp` — keys mapped from `DomJSX.CSSProperties` (csstype's
+ *   hyphenated property names) for autocomplete; value typed per-property.
+ * - `prop:K` — inferred from `keyof E`. On `<div>` exposes
+ *   `prop:className`, `prop:id`, etc. (from `HTMLDivElement`); on a
+ *   registered custom element exposes its public fields too.
+ *
+ * `slot:foo` is NOT here — it's emitted per-element via `SlotsOf<C>` only
+ * for elements that declare `[SLOTS]`. Plain HTML intrinsics don't accept
+ * slot props (the runtime ignores them).
  */
-type JsxNamespaces = {
-  ref?: (el: Element) => void;
-  [slot: `slot:${string}`]: Child;
+type CssStyleKey = Extract<keyof JSX.CSSProperties, string> extends infer K ? K extends `-${string}` ? never : K : never;
+type StyleNamespace = { [K in CssStyleKey as `style:${K}`]?: MaybeReactive<JSX.CSSProperties[K] | null> };
+type PropNamespace<E> = { [K in keyof E as K extends string ? `prop:${K}` : never]?: MaybeReactive<E[K]> };
+type JsxNamespaces<E extends Element = Element> = {
+  ref?: (el: E) => void;
   [cls: `class:${string}`]: MaybeReactive<boolean>;
-  [sty: `style:${string}`]: MaybeReactive<string | null>;
-  [prop: `prop:${string}`]: unknown;
-};
-type WithJsxNamespaces<T> = T & JsxNamespaces;
+} & StyleNamespace & PropNamespace<E>;
+type JsxNamespaceKeys = "ref" | `class:${string}` | `style:${string}` | `prop:${string}`;
+type WithJsxNamespaces<T, E extends Element = Element> = Omit<T, JsxNamespaceKeys> & JsxNamespaces<E>;
+type IntrinsicElementOf<T> = T extends {
+  ref?: infer R | undefined;
+} ? Extract<R, (el: any) => any> extends ((el: infer E) => any) ? E : Element : Element;
 declare namespace JSX$1 {
   export type Element = globalThis.Element | globalThis.DocumentFragment | null;
   export type ElementType = Child | Component;
@@ -423,10 +433,8 @@ declare namespace JSX$1 {
     ref?: (el: Element) => void;
   }
   export type LibraryManagedAttributes<C, P> = ResolveProps<C, P>;
-  type RegisteredElements = { [K in keyof CustomElementRegistry]: CustomElementRegistry[K] extends AnyElementCtor ? MaybeReactiveProps<ElementProps<CustomElementRegistry[K]>> : never };
-  export type IntrinsicElements = { [K in keyof JSX.IntrinsicElements]: WithJsxNamespaces<JSX.IntrinsicElements[K]> } & RegisteredElements & {
-    /** Unregistered custom elements (`x-foo`, `my-component`, …) — loose fallback. */[customElement: `${string}-${string}`]: WithJsxNamespaces<JSX.DOMAttributes<HTMLElement>> & Record<string, unknown>;
-  };
+  type RegisteredElements = { [K in keyof CustomElementRegistry]: CustomElementRegistry[K] extends AnyElementCtor ? WithJsxNamespaces<MaybeReactiveProps<ElementProps<CustomElementRegistry[K]>>, InstanceType<CustomElementRegistry[K]>> : never };
+  export type IntrinsicElements = { [K in keyof JSX.IntrinsicElements]: WithJsxNamespaces<JSX.IntrinsicElements[K], IntrinsicElementOf<JSX.IntrinsicElements[K]>> } & RegisteredElements;
   export {};
 }
 //#endregion
@@ -466,7 +474,7 @@ type PropValueFor<V> = V extends Slot ? Child : V;
  * the DOM surface is excluded; for plain classes, all own keys are kept.
  * `Slot`-typed fields are mapped to `Child` (see {@link PropValueFor}).
  */
-type PropsOfInstance<I> = { [K in PublicPropKeys<I> & string]?: PropValueFor<I[K]> };
+type InstanceProps<I> = { [K in PublicPropKeys<I> & string]?: PropValueFor<I[K]> };
 /**
  * Promote keys `K` of `P` to required; leave the rest unchanged.
  *
@@ -482,11 +490,14 @@ type PropsOfInstance<I> = { [K in PublicPropKeys<I> & string]?: PropValueFor<I[K
  */
 type Require<P, K extends keyof P> = { [X in K]-?: P[X] } & Omit<P, K>;
 /**
- * Wrap every prop in {@link MaybeReactive} so callers may pass either a
- * plain value or a reactive getter. Function-typed props (event handlers,
- * render callbacks) are wrapped too — the JSX runtime detects branded
- * signals/computed and re-binds on change. Optionality is preserved at the
- * key level — the `| undefined` stays at the prop, not inside the reactive.
+ * Wrap every non-function prop in {@link MaybeReactive} so callers may pass
+ * either a plain value or a reactive getter. Function-typed props (event
+ * handlers, render callbacks) are left as-is so inline arrow callbacks get
+ * proper contextual typing for their parameters — wrapping them in
+ * `MaybeReactive<F> = F | (() => F)` produces two callable alternatives and
+ * TS falls back to implicit-any on the callback's params. Optionality is
+ * preserved at the key level — the `| undefined` stays at the prop, not
+ * inside the reactive.
  *
  * @template P — source prop object type.
  *
@@ -497,14 +508,15 @@ type Require<P, K extends keyof P> = { [X in K]-?: P[X] } & Omit<P, K>;
  * // {
  * //   count:    MaybeReactive<number>;
  * //   label?:   MaybeReactive<string>;
- * //   onClick:  MaybeReactive<(e: Event) => void>;   // computed handlers OK
+ * //   onClick:  (e: Event) => void;
  * // }
  * ```
  *
  * @see {@link MaybeReactive}
  * @see {@link Props}
  */
-type MaybeReactiveProps<P> = { [K in keyof P]: undefined extends P[K] ? MaybeReactive<Exclude<P[K], undefined>> | undefined : MaybeReactive<P[K]> };
+type MaybeReactiveProps<P> = { [K in keyof P]: undefined extends P[K] ? MaybeReactiveOrFn<Exclude<P[K], undefined>> | undefined : MaybeReactiveOrFn<P[K]> };
+type MaybeReactiveOrFn<T> = Extract<T, (...args: any[]) => any> extends never ? MaybeReactive<T> : T;
 declare const RAW_PROPS: unique symbol;
 type ReactiveProps<P> = { readonly [K in keyof P]: Computed<P[K]> } & {
   readonly [RAW_PROPS]?: P;
@@ -526,7 +538,7 @@ type RawProps<R> = R extends {
 type ResolveProps<C, P, NN = NonNullable<P>> = NN extends {
   readonly [RAW_PROPS]?: infer Raw;
 } ? MaybeReactiveProps<Raw> : [keyof NN] extends [never] ? Props<C> : NN;
-type InstancePropsOf<C> = Inst<C> extends infer I ? PropsOfInstance<I> : {};
+type InstancePropsOf<C> = Inst<C> extends infer I ? InstanceProps<I> : {};
 type PropKeysOf<C> = keyof InstancePropsOf<C> & string;
 type AttrMap<C> = C extends {
   [ATTRIBUTES]: infer M;
@@ -541,8 +553,8 @@ type EventMapOf<C> = C extends {
 type Capitalize1<S extends string> = S extends `${infer H}${infer R}` ? `${Uppercase<H>}${R}` : S;
 type EventsOf<C> = EventMapOf<C> extends infer E ? E extends Record<string, Event> ? { [K in keyof E & string as `on:${K}`]?: (ev: E[K]) => void } & { [K in keyof E & string as `on${Capitalize1<K>}`]?: (ev: E[K]) => void } : {} : {};
 type SlotKeys<I> = I extends {
-  [SLOTS]: Slots<infer K>;
-} ? K : never;
+  [SLOTS]: infer S;
+} ? Extract<keyof S, string> : never;
 type InstanceOf<C> = C extends (abstract new (...args: any[]) => infer I) ? I : C;
 type SlotsOf<C> = SlotKeys<InstanceOf<C>> extends infer K ? [K] extends [string] ? { [P in K as `slot:${P}`]?: Child } : {} : {};
 type ChildrenOf<C> = C extends {
@@ -561,7 +573,7 @@ type BaseDOMAttrs = JSX.DOMAttributes<HTMLElement>;
  * - **`prop:*`** — explicit property assignment for every field.
  * - **Events** — keys from `declare static events: { ... }` produce both
  *   `on:${K}` and `on${Capitalize<K>}` typed handlers.
- * - **Slots** — keys from `[SLOTS] = Slots.new([...] as const)` produce `slot:${K}`.
+ * - **Slots** — keys from `[SLOTS] = { ... } as const` produce `slot:${K}`.
  * - **Children** — `children?: Child` unless `static children: never`.
  * - **DOM attrs** — the standard dom-expressions surface (`class`, `style`, `ref`, …).
  *
@@ -573,7 +585,7 @@ type BaseDOMAttrs = JSX.DOMAttributes<HTMLElement>;
  * class XRange extends HTMLElement {
  *   static [ATTRIBUTES]: Attributes<XRange> = { min(v) { this.min = +v! } };
  *   declare static events: { commit: CustomEvent<number> };
- *   [SLOTS] = Slots.new(["label"] as const);
+ *   [SLOTS] = { label: new Slot() } as const;
  *   \@reactive() min = 0;
  * }
  *
@@ -620,9 +632,9 @@ type ComponentProps<C extends ComponentClass<any>> = C extends ComponentClass<in
  * prop in {@link MaybeReactive} so callers may pass values or reactive getters.
  *
  * Branches by input shape:
- * - **Class constructor** (`typeof Cls`) → uses `PropsOfInstance<InstanceType<Cls>>`.
+ * - **Class constructor** (`typeof Cls`) → uses `InstanceProps<InstanceType<Cls>>`.
  * - **Function component** (`(props: P) => ...`) → uses the first parameter.
- * - **Class instance** (`Cls<T>`) → uses `PropsOfInstance<Cls<T>>` (useful when
+ * - **Class instance** (`Cls<T>`) → uses `InstanceProps<Cls<T>>` (useful when
  *   generics need to flow through — see the `For` example below).
  *
  * Does **not** synthesize `on:*`, `slot:*`, or attribute surface. For custom
@@ -652,6 +664,6 @@ type ComponentProps<C extends ComponentClass<any>> = C extends ComponentClass<in
  * @see {@link ComponentProps} — constructor-param-based class components.
  * @see {@link MaybeReactiveProps}
  */
-type Props<C> = (C extends (abstract new (...args: any[]) => infer I) ? MaybeReactiveProps<PropsOfInstance<I>> : C extends ((props: infer P, ...rest: any[]) => any) ? P extends object ? MaybeReactiveProps<RawProps<P>> : {} : MaybeReactiveProps<PropsOfInstance<C>>) & SlotsOf<C>;
+type Props<C> = (C extends (abstract new (...args: any[]) => infer I) ? MaybeReactiveProps<InstanceProps<I>> : C extends ((props: infer P, ...rest: any[]) => any) ? P extends object ? MaybeReactiveProps<RawProps<P>> : {} : MaybeReactiveProps<InstanceProps<C>>) & SlotsOf<C>;
 //#endregion
 export { SIGNAL as A, signal as B, isReactive as C, COMPUTED as D, resolveProps as E, isComputed as F, untracked as H, isEffect as I, isEffectScope as L, computed as M, effect as N, EFFECT as O, effectScope as P, isSignal as R, Updater as S, resolve as T, createElement as U, trigger as V, SlotProps as _, RawProps as a, MaybeReactive as b, ResolveProps as c, ComponentClass as d, ComponentFn as f, JSX$1 as g, Attrs as h, Props as i, batch as j, EFFECT_SCOPE as k, Child as l, PropsTarget as m, ElementProps as n, ReactiveProps as o, ComponentInstance as p, MaybeReactiveProps as r, Require as s, ComponentProps as t, Component as u, Fragment as v, reactive as w, Signal as x, Computed as y, onCleanup as z };

package/dist/integrations/react.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-BUUWMoG9.mjs";
+import { y as Computed } from "../infer-K2Te9gn1.mjs";
 
 //#region src/integrations/react.d.ts
 /**

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

@@ -1,2 +1,2 @@
-import { U as createElement, _ as SlotProps, a as RawProps, b as MaybeReactive, c as ResolveProps, d as ComponentClass, f as ComponentFn, g as JSX, h as Attrs, i as Props, l as Child, m as PropsTarget, n as ElementProps, o as ReactiveProps, p as ComponentInstance, r as MaybeReactiveProps, s as Require, t as ComponentProps, u as Component, v as Fragment } from "../infer-BUUWMoG9.mjs";
+import { U as createElement, _ as SlotProps, a as RawProps, b as MaybeReactive, c as ResolveProps, d as ComponentClass, f as ComponentFn, g as JSX, h as Attrs, i as Props, l as Child, m as PropsTarget, n as ElementProps, o as ReactiveProps, p as ComponentInstance, r as MaybeReactiveProps, s as Require, t as ComponentProps, u as Component, v as Fragment } from "../infer-K2Te9gn1.mjs";
 export { Attrs, Child, Component, ComponentClass, ComponentFn, ComponentInstance, ComponentProps, ElementProps, Fragment, JSX, MaybeReactive, MaybeReactiveProps, Props, PropsTarget, RawProps, ReactiveProps, Require, ResolveProps, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime/index.mjs

@@ -1,4 +1,4 @@
-import { r as mountChild, t as createElement } from "../element-BjpyY6qv.mjs";
+import { r as mountChild, t as createElement } from "../element-DvqBlRly.mjs";
 //#region src/jsx-runtime/fragment.ts
 /**
 * Used by the JSX transform for `<>...</>` fragments.

package/dist/signals/index.d.mts

@@ -1,2 +1,2 @@
-import { A as SIGNAL, B as signal, C as isReactive, D as COMPUTED, E as resolveProps, F as isComputed, H as untracked, I as isEffect, L as isEffectScope, M as computed, N as effect, O as EFFECT, P as effectScope, R as isSignal, S as Updater, T as resolve, V as trigger, b as MaybeReactive, j as batch, k as EFFECT_SCOPE, w as reactive, x as Signal, y as Computed, z as onCleanup } from "../infer-BUUWMoG9.mjs";
+import { A as SIGNAL, B as signal, C as isReactive, D as COMPUTED, E as resolveProps, F as isComputed, H as untracked, I as isEffect, L as isEffectScope, M as computed, N as effect, O as EFFECT, P as effectScope, R as isSignal, S as Updater, T as resolve, V as trigger, b as MaybeReactive, j as batch, k as EFFECT_SCOPE, w as reactive, x as Signal, y as Computed, z as onCleanup } from "../infer-K2Te9gn1.mjs";
 export { COMPUTED, Computed, EFFECT, EFFECT_SCOPE, MaybeReactive, SIGNAL, Signal, Updater, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, resolveProps, signal, trigger, untracked };