elements-kit 0.21.0 → 0.22.0

package/README.md

@@ -5,9 +5,9 @@
 ```tsx
 import { signal, computed } from "elements-kit/signals";
 import { render } from "elements-kit/render";
-import type { ReactiveProps } from "elements-kit/jsx-runtime";
+import type { Props } from "elements-kit/jsx-runtime";
 
-function Counter(props: ReactiveProps<{ initial?: number }>) {
+function Counter(props: Props<{ initial?: number }>) {
   const count = signal(props.initial() ?? 0);
   const doubled = computed(() => count() * 2);
 
@@ -63,10 +63,10 @@ Every feature is a separate subpath export — import only what you use.
 | `elements-kit/signals` | `signal`, `computed`, `effect`, `effectScope`, `batch`, `untracked`, `trigger`, `onCleanup`, `MaybeReactive`, `resolve`, `resolveProps`, `@reactive` |
 | `elements-kit/render` | `render(target, setup)` — mount a node with a scoped lifetime; returns `unmount` |
 | `elements-kit/attributes` | `@attributes` decorator + `ATTRIBUTES` symbol |
-| `elements-kit/slot` | `Slot`, `Slots`, `SLOTS` symbol — comment-marker DOM regions |
-| `elements-kit/custom-elements` | `defineElement`, `CustomElementRegistry` |
+| `elements-kit/slot` | `Slot` class + `@slot()` decorator + `SlotContent` type — comment-marker DOM regions as plain properties |
+| `elements-kit/custom-elements` | `defineElement`, `CustomElementRegistry`, `PropertiesOf`, `AttributesOf`, `EventsOf`, `PublicPropKeys` — raw framework-agnostic extractors for a custom element's properties/attributes/events |
 | `elements-kit/for` | `For` keyed-list component |
-| `elements-kit/jsx-runtime` | JSX factory + type helpers (`ElementProps`, `Props`, `ComponentProps`, `MaybeReactiveProps`, `ReactiveProps`, `Require`) — configure via `jsxImportSource` |
+| `elements-kit/jsx-runtime` | JSX factory + type helpers (`PropsOf`, `MaybeReactiveProps`, `RawProps`, `Props`, `Require`) — configure via `jsxImportSource` |
 | `elements-kit/server` | `renderToStream`, `renderToString` — streaming HTML rendering in any JS runtime (Node, edge/Workers), no DOM required *(experimental)* |
 | `elements-kit/hydrate` | `hydrate(container, () => <App/>)` — adopt server-rendered DOM and make it interactive *(experimental)* |
 | `elements-kit/await` | `Await` — loading boundary (Suspense equivalent); code splitting = `async` + dynamic import *(experimental)* |
@@ -412,24 +412,25 @@ import { For } from "elements-kit/for";
 
 ## Prop types
 
-Six type helpers derive JSX prop shapes from your components — no parallel `declare global` block to maintain. Full guide at [docs/src/content/docs/elements/types.mdx](docs/src/content/docs/elements/types.mdx).
+A small set of type helpers derives JSX prop shapes from your components — no parallel `declare global` block to maintain. Full guide at [docs/src/content/docs/elements/types.mdx](docs/src/content/docs/elements/types.mdx).
 
 | Helper | For |
 | ------ | --- |
-| `ElementProps<typeof Cls>` | `HTMLElement` subclass — full surface (attrs, events, slots, children) |
-| `Props<C>` | Class instance, constructor, or function component — unified |
-| `ComponentProps<typeof Cls>` | Class components with `constructor(props: P)` |
-| `MaybeReactiveProps<P>` | Caller-facing — wrap every prop in `MaybeReactive` (what parents pass) |
-| `ReactiveProps<P>` | Component-facing — every prop becomes a `Computed<T>` getter (what function components receive) |
+| `PropsOf<C>` | Unified — fn/class components give raw prop shapes; custom-element ctors give the full JSX surface (attrs, events, slots, children) |
+| `Props<P>` | Component-facing — every prop becomes a `Computed<T>` getter (what function components receive) |
+| `MaybeReactiveProps<P>` | Caller-facing — wrap every prop in `MaybeReactive` (e.g. a class component's constructor param) |
+| `RawProps<R>` | Recover the raw `P` from a branded `Props<P>` |
 | `MaybeReactive<T>` | Scalar value-or-getter (from `elements-kit/signals`) |
 | `Require<P, K>` | Promote optional keys to required |
 
-The JSX runtime auto-wraps function-component props — each key arrives as a callable getter that subscribes on read. Pair the signature with `ReactiveProps<P>` and read `props.x()`:
+Callers never wrap anything by hand — at every JSX call site the runtime's `LibraryManagedAttributes` automatically lets parents pass each prop as a static value *or* a signal/computed.
+
+The JSX runtime auto-wraps function-component props — each key arrives as a callable getter that subscribes on read. Pair the signature with `Props<P>` and read `props.x()`:
 
 ```tsx
-import type { ReactiveProps } from "elements-kit/jsx-runtime";
+import type { Props } from "elements-kit/jsx-runtime";
 
-function Greeting(props: ReactiveProps<{ name: string }>) {
+function Greeting(props: Props<{ name: string }>) {
   return <p>Hello, {props.name}</p>;
 }
 ```
@@ -472,15 +473,15 @@ class MyElement extends HTMLElement {
 }
 ```
 
-For typed slots, attach a `[SLOTS]` instance field — pass the key list with `as const` so TS can narrow:
+For named slots, declare `@slot()` properties — reading places the region in your template, assigning fills it (from any framework, or none):
 
 ```ts
-import { SLOTS, Slots } from "elements-kit/slot";
+import { slot } from "elements-kit/slot";
 
 class Card extends HTMLElement {
-  [SLOTS] = Slots.new(["header", "footer"] as const);
+  @slot() header!: Node
+  @slot() footer!: Node
 }
-// ElementProps<typeof Card> now includes `slot:header` / `slot:footer`
 ```
 
 For typed events, declare a `static events` map:
@@ -489,7 +490,7 @@ For typed events, declare a `static events` map:
 class XPicker extends HTMLElement {
   declare static events: { commit: CustomEvent<number> };
 }
-// ElementProps<typeof XPicker> now includes `on:commit`
+// PropsOf<typeof XPicker> now includes `on:commit`
 ```
 
 ## Roadmap

package/dist/attributes.d.mts

@@ -1,2 +1,2 @@
-import { a as Attributes, c as observedAttributes, i as AttributeTarget, n as AttrChangeHandler, o as attributes, r as AttributeDecorated, s as dispatchAttrChange, t as ATTRIBUTES } from "./attributes-3r7Diua4.mjs";
+import { a as Attributes, c as observedAttributes, i as AttributeTarget, n as AttrChangeHandler, o as attributes, r as AttributeDecorated, s as dispatchAttrChange, t as ATTRIBUTES } from "./attributes-DILeh3-s.mjs";
 export { ATTRIBUTES, AttrChangeHandler, AttributeDecorated, AttributeTarget, Attributes, attributes, dispatchAttrChange, observedAttributes };

package/dist/await.d.mts

@@ -1,4 +1,4 @@
-import { t as Child } from "./types-CUvFIgPa.mjs";
+import { c as Props, t as Children } from "./children-s3nFjpLA.mjs";
 
 //#region src/await.d.ts
 /** @internal Metadata stamped on an Await region getter (see claim walk). */
@@ -44,10 +44,11 @@ interface AsyncRegionMeta {
  * </Await>
  * ```
  */
-declare function Await(props: {
-  fallback?: Child | (() => Child);
+type AwaitChildren = Children | PromiseLike<Children> | (Children | PromiseLike<Children>)[];
+declare function Await(props: Props<{
+  fallback?: Children;
   when?: unknown;
-  children?: Child;
-}): Element;
+  children?: AwaitChildren;
+}>): Element;
 //#endregion
 export { AsyncRegionMeta, Await };

package/dist/await.mjs

@@ -13,42 +13,6 @@ function toAwaitables(value) {
 	else if (isThenable(item)) out.push(promise(item));
 	return out;
 }
-/**
-* Loading boundary for async children — elements-kit's `Suspense` equivalent.
-*
-* Direct async children (`promise`/`async` values — including the
-* code-splitting pattern `async(() => import("./chart"))`) are detected
-* automatically; pass `when` to gate on arbitrary awaitables instead. While
-* anything is pending the client renders `fallback`; once everything settles
-* the children show. The server never renders the fallback — the stream
-* awaits and emits the real content. During hydration the server content
-* stays visible while the region is pending (no fallback flash).
-*
-* Prefer a thunk fallback (`fallback={() => <Spinner/>}`) so it renders
-* fresh each time the boundary re-enters a pending state.
-*
-* @example Code splitting with `async` + dynamic import:
-* ```tsx
-* const chart = async(() => import("./chart").then((m) => m.default));
-*
-* function Panel() {
-*   chart.run(); // server: awaited · hydration: deferred · client: import
-*   return (
-*     <Await fallback={() => <em>loading…</em>}>{chart}</Await>
-*   );
-* }
-* ```
-*
-* @example Passing props to a code-split component:
-* ```tsx
-* const chart = async(() => import("./chart").then((m) => m.default));
-* chart.run();
-*
-* <Await fallback={() => <em>loading…</em>}>
-*   {promise(chart.then((C) => () => <C data={data} />))}
-* </Await>
-* ```
-*/
 function Await(props) {
 	const read = (value) => typeof value === "function" && !isReactive(value) ? value() : value;
 	const children = read(props.children);

package/dist/{types-CUvFIgPa.d.mts → children-s3nFjpLA.d.mts}

@@ -1,11 +1,8 @@
-import { n as AttrChangeHandler, t as ATTRIBUTES } from "./attributes-3r7Diua4.mjs";
-import { n as Slot, r as PrimitiveNodeType, t as SLOTS } from "./slot-BFWXeFRl.mjs";
-import { t as CustomElementRegistry } from "./custom-elements-BGcU6ldL.mjs";
-import { JSX } from "dom-expressions/src/jsx-h";
+import { n as AttrChangeHandler, t as ATTRIBUTES } from "./attributes-DILeh3-s.mjs";
+import { i as PropertiesOf, n as CustomElementRegistry, r as EventsOf } from "./custom-elements-CdpilMDu.mjs";
+import * as CSS from "csstype";
+import { JSX } from "dom-expressions/src/jsx";
 
-//#region src/jsx-runtime/element.d.ts
-declare function createElement(type: string | Component, allProps?: JSX$1.IntrinsicAttributes & Record<string, unknown>): JSX$1.Element | null;
-//#endregion
 //#region src/signals/lib.d.ts
 declare const SIGNAL: unique symbol;
 declare const COMPUTED: unique symbol;
@@ -343,29 +340,9 @@ type MaybeReactive<T> = T | Computed<T>;
  * ```
  */
 declare function resolve<T>(value: MaybeReactive<T>): T;
-declare function resolveProps<P extends object>(raw: { [K in keyof P]: MaybeReactive<P[K]> }): ReactiveProps<P>;
+declare function resolveProps<P extends object>(raw: { [K in keyof P]: MaybeReactive<P[K]> }): Props<P>;
 //#endregion
 //#region src/jsx-runtime/infer.d.ts
-type AnyElementCtor = abstract new (...args: any[]) => HTMLElement;
-type Inst<C> = C extends (abstract new (...args: any[]) => infer I) ? I : never;
-/**
- * When the instance extends `HTMLElement`, drop the DOM surface so only the
- * user's own fields remain. Plain class components also drop `render` — it's
- * the internal rendering method, not a JSX prop.
- */
-type PublicPropKeys<I> = I extends HTMLElement ? Exclude<keyof I, keyof HTMLElement | symbol> : Exclude<keyof I, symbol | "render">;
-/**
- * Instance fields typed as `Slot` are default-slot mounts at runtime — the JSX
- * consumer passes DOM content, which `applyChildren` routes via `applySlot`.
- * Surface them as `Child` in the JSX prop shape so callers type-check.
- */
-type PropValueFor<V> = V extends Slot ? Child : V;
-/**
- * Public instance fields of `I` — all optional. For `HTMLElement` subclasses
- * the DOM surface is excluded; for plain classes, all own keys are kept.
- * `Slot`-typed fields are mapped to `Child` (see {@link PropValueFor}).
- */
-type InstanceProps<I> = { [K in PublicPropKeys<I> & string]?: PropValueFor<I[K]> };
 /**
  * Promote keys `K` of `P` to required; leave the rest unchanged.
  *
@@ -380,78 +357,51 @@ type InstanceProps<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 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.
- *
- * @example
- * ```ts
- * type Raw = { count: number; label?: string; onClick: (e: Event) => void };
- * type Wrapped = MaybeReactiveProps<Raw>;
- * // {
- * //   count:    MaybeReactive<number>;
- * //   label?:   MaybeReactive<string>;
- * //   onClick:  (e: Event) => void;
- * // }
- * ```
- *
- * @see {@link MaybeReactive}
- * @see {@link Props}
- */
-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]> } & {
+type Props<P> = { readonly [K in keyof P]: Computed<P[K]> } & {
   readonly [RAW_PROPS]?: P;
 };
-/** Recover the raw prop shape `P` from a `ReactiveProps<P>`. */
+/** Recover the raw prop shape `P` from a `Props<P>`. */
 type RawProps<R> = R extends {
   readonly [RAW_PROPS]?: infer P;
 } ? P : R;
 /**
- * Resolve the JSX call-site prop type for a component (function or class).
- * Wired into `JSX.LibraryManagedAttributes` so parents see the right shape:
- * - branded `ReactiveProps<P>` (function components) → `MaybeReactiveProps<P>`
- * - empty constructor param (instance-field classes) → `Props<C>`
- * - otherwise pass the constructor param shape through (preserves generic
- *   inference for classes like `For<T>` whose param is already shaped).
- *
- * Component props only — custom-element attributes go through {@link ElementProps}.
+ * Caller-facing wrap: each key accepts a plain value OR a reactive getter.
+ * The JSX checker applies it automatically to component props; name it
+ * directly when typing a call-site shape by hand (e.g. a class component's
+ * constructor param, like `For`'s). Function-typed props are wrapped too
+ * (`Computed<F>` is zero-arg, so TS still picks the handler signature by
+ * arity for inline arrows). `Signal<F>` must never be added explicitly — its
+ * one-arg `Updater` half would collapse inline arrow params to implicit any.
  */
-type ResolveProps<C, P, NN = NonNullable<P>> = NN extends {
+type MaybeReactiveProps<P> = { [K in keyof P]: undefined extends P[K] ? MaybeReactive<Exclude<P[K], undefined>> | undefined : MaybeReactive<P[K]> };
+/**
+ * @internal Call-site prop resolution for `JSX.LibraryManagedAttributes`:
+ * - empty param (instance-field classes, no ctor) → wrap `PropsOf<C>`
+ * - branded `Props<P>` param (function components) → wrap the raw `P`
+ * - non-empty constructor param → pass through (preserves `For<T>` inference)
+ *
+ * Emptiness is checked FIRST: `{}` structurally matches the optional brand
+ * (`{} extends { [RAW_PROPS]?: infer Raw }` with `Raw = unknown`), which
+ * would silently type every no-ctor class as `MaybeReactiveProps<unknown>`
+ * (= `{}`, accepting anything). A real `Props<P>` is never empty — its
+ * `keyof` always contains the brand symbol.
+ */
+type ResolveProps<C, P, NN = NonNullable<P>> = [keyof NN] extends [never] ? C extends JSX$1.ElementType | JSX$1.ElementClass ? MaybeReactiveProps<PropsOf<C>> : {} : NN extends {
   readonly [RAW_PROPS]?: infer Raw;
-} ? MaybeReactiveProps<Raw> : [keyof NN] extends [never] ? Props<C> : NN;
-type InstancePropsOf<C> = Inst<C> extends infer I ? InstanceProps<I> : {};
-type PropKeysOf<C> = keyof InstancePropsOf<C> & string;
+} ? MaybeReactiveProps<Raw> : NN;
+type PropKeysOf<C> = keyof PropertiesOf<C> & string;
 type AttrMap<C> = C extends {
   [ATTRIBUTES]: infer M;
 } ? M : {};
 type HandlerValue<H> = H extends AttrChangeHandler<any> ? string | null : H;
 type AttrsOf<C> = AttrMap<C> extends infer M ? M extends Record<string, unknown> ? string extends keyof M ? {} : { [K in Exclude<keyof M & string, PropKeysOf<C>>]?: HandlerValue<M[K]> } : {} : {};
-type FlatPropsOf<C> = InstancePropsOf<C>;
-type PropNamespacedOf<C> = { [K in PropKeysOf<C> as `prop:${K}`]?: NonNullable<InstancePropsOf<C>[K]> };
-type EventMapOf<C> = C extends {
-  events: infer E;
-} ? E : {};
-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]: 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 PropNamespacedOf<C> = { [K in PropKeysOf<C> as `prop:${K}`]?: NonNullable<PropertiesOf<C>[K]> };
+type JsxEventsOf<C> = { [K in keyof EventsOf<C> & string as `on:${K}`]?: (ev: EventsOf<C>[K]) => void };
 type ChildrenOf<C> = C extends {
   children: never;
 } ? {} : {
-  children?: Child;
+  children?: Children;
 };
 type BaseDOMAttrs = JSX.DOMAttributes<HTMLElement>;
 /**
@@ -462,9 +412,8 @@ type BaseDOMAttrs = JSX.DOMAttributes<HTMLElement>;
  *   Keys also present on the instance are dropped here so the flat key carries the property type.
  * - **Flat properties** — public instance fields, wrapped in `MaybeReactive`.
  * - **`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] = { ... } as const` produce `slot:${K}`.
+ * - **Events** — keys from `declare static events: { ... }` produce
+ *   `on:${K}` typed handlers (the only event syntax the runtime attaches).
  * - **Children** — `children?: Child` unless `static children: never`.
  * - **DOM attrs** — the standard dom-expressions surface (`class`, `style`, `ref`, …).
  *
@@ -476,7 +425,9 @@ 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] = { label: new Slot() } as const;
+ *   #slot = new Slot();
+ *   get label() { return this.#slot.get(); }
+ *   set label(value: Node) { this.#slot.set(value) }
  *   \@reactive() min = 0;
  * }
  *
@@ -485,77 +436,62 @@ type BaseDOMAttrs = JSX.DOMAttributes<HTMLElement>;
  * //   min?: MaybeReactive<number>;
  * //   "prop:min"?: number;
  * //   "on:commit"?: (e: CustomEvent<number>) => void;
- * //   onCommit?:   (e: CustomEvent<number>) => void;
- * //   "slot:label"?: Child;
- * //   children?: Child;
+ * //   label?: Node
+ * //   children?: Node;
  * //   // …plus ref, class, class:*, style, style:*, standard DOM events
  * // }
  * ```
  *
- * @see {@link Props} for class-components / function components (no attr/event/slot synthesis).
- */
-type ElementProps<C extends AnyElementCtor> = BaseDOMAttrs & AttrsOf<C> & FlatPropsOf<C> & PropNamespacedOf<C> & EventsOf<C> & SlotsOf<C> & ChildrenOf<C>;
-/**
- * Props of a class component that receives them via its constructor:
- * `class Comp { constructor(props: P) }`. Reads `ConstructorParameters[0]`.
- *
- * Use this when the component's props live on a constructor parameter rather
- * than on public instance fields. For instance-field components, use {@link Props}.
- *
- * @template C — the class constructor type (e.g. `typeof Card`).
- *
- * @example
- * ```ts
- * class Card {
- *   constructor(public props: { title: string; children?: Child }) {}
- *   render() { return <div>{this.props.title}</div>; }
- * }
- *
- * type P = ComponentProps<typeof Card>;
- * // { title: string; children?: Child }
- * ```
- *
- * @see {@link Props}
+ * @see {@link PropsOf} for class-components / function components (no attr/event synthesis).
  */
-type ComponentProps<C extends ComponentClass<any>> = C extends ComponentClass<infer P> ? (P extends object ? P : {}) : {};
+type ElementProps<C extends AnyElementCtor> = BaseDOMAttrs & AttrsOf<C> & PropertiesOf<C> & PropNamespacedOf<C> & JsxEventsOf<C> & ChildrenOf<C>;
 /**
- * Props for any component — class or function. Wraps every non-function
- * prop in {@link MaybeReactive} so callers may pass values or reactive getters.
- *
- * Branches by input shape:
- * - **Class constructor** (`typeof Cls`) → uses `InstanceProps<InstanceType<Cls>>`.
- * - **Function component** (`(props: P) => ...`) → uses the first parameter.
- * - **Class instance** (`Cls<T>`) → uses `InstanceProps<Cls<T>>` (useful when
- *   generics need to flow through — see the `For` example below).
+ * Props for any component — class or function.
  *
- * Does **not** synthesize `on:*`, `slot:*`, or attribute surface. For custom
- * elements that need those, use {@link ElementProps}.
+ * The combination of the two specialised helpers:
+ * - **Custom-element constructor** (`typeof Cls`, `Cls extends HTMLElement`)
+ *   → `ElementProps<Cls>` — the full JSX surface (attrs, `prop:*`, `on:*`,children).
+ * - **Everything else** (function component, class component ctor or
+ *   instance) → `ComponentProps<T>` — the raw prop shape.
  *
- * @template C — constructor, function, or instance.
+ * @template T — constructor, function, or instance.
  *
  * @example
  * ```ts
  * // 1. Class instance (lets a generic flow)
  * class For<T> { each: T[] = []; render() { return null } }
- * type ForProps<T> = Props<For<T>>;
- * //   ↑ { each?: MaybeReactive<T[]> }
+ * type ForProps<T> = PropsOf<For<T>>;
+ * //   ↑ { each?: T[] }
  *
  * // 2. Function component
  * const Greeting = (_p: { name: string; excited?: boolean }) => null;
- * type GreetingProps = Props<typeof Greeting>;
- * //   ↑ { name: MaybeReactive<string>; excited?: MaybeReactive<boolean> }
+ * type GreetingProps = PropsOf<typeof Greeting>;
+ * //   ↑ { name: string; excited?: boolean }
  *
  * // 3. Class constructor
  * class Counter { count = 0; render() { return null } }
- * type CounterProps = Props<typeof Counter>;
- * //   ↑ { count?: MaybeReactive<number> }
+ * type CounterProps = PropsOf<typeof Counter>;
+ * //   ↑ { count?: number }
  * ```
- *
- * @see {@link ElementProps} — custom elements (`HTMLElement` subclasses).
- * @see {@link ComponentProps} — constructor-param-based class components.
- * @see {@link MaybeReactiveProps}
  */
-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>;
+type PropsOf<T extends JSX$1.ElementType | JSX$1.ElementClass | AnyElementCtor> = T extends AnyElementCtor ? ElementProps<T> : T extends JSX$1.ElementType | JSX$1.ElementClass ? ComponentProps<T> : never;
+/**
+ * Raw props of a function or class COMPONENT (not a custom element):
+ * function components use the first parameter (`RawProps` unwraps a branded
+ * `Props<P>`); classes use their public instance fields. The custom-element half of `PropsOf` is `ElementProps`.
+ */
+type ComponentProps<T extends JSX$1.ElementType | JSX$1.ElementClass> = T extends ((props: infer P, ...rest: any[]) => any) ? P extends object ? RawProps<P> : {} : PropertiesOf<T>;
+type AnyElementCtor = abstract new (...args: any[]) => HTMLElement;
+//#endregion
+//#region src/jsx-runtime/element.d.ts
+type UnsupportedDomKeys = "ref" | "children" | "classList" | "$ServerOnly" | keyof JSX.CustomEventHandlersCamelCase<any> | keyof JSX.CustomEventHandlersLowerCase<any> | keyof JSX.DirectiveAttributes | keyof JSX.DirectiveFunctionAttributes<any> | keyof JSX.AttrAttributes | keyof JSX.BoolAttributes | keyof JSX.OnCaptureAttributes<any>;
+type DOMIntrinsicElements = { [K in keyof JSX.IntrinsicElements]: Omit<JSX.IntrinsicElements[K], UnsupportedDomKeys> };
+type DOMElements = { [K in keyof JSX.IntrinsicElements]: JSX.IntrinsicElements[K] extends {
+  ref?: infer R | undefined;
+} ? Extract<R, (el: any) => any> extends ((el: infer E) => any) ? E : Element : Element };
+declare function createElement(type: JSX$1.ElementType, allProps?: {
+  ref?: (el: Element) => void;
+} & Record<string, unknown>): JSX$1.Element | null;
 //#endregion
 //#region src/jsx-runtime/fragment.d.ts
 /**
@@ -575,109 +511,71 @@ type Props<C> = (C extends (abstract new (...args: any[]) => infer I) ? MaybeRea
  * untrusted input at the call site. `<script>` tags never execute.
  */
 declare function Fragment(props: Props<{
-  children: Child;
+  children?: Children;
 }> | {
   html: true;
   children: MaybeReactive<string>;
 }): DocumentFragment;
 //#endregion
 //#region src/jsx-runtime/index.d.ts
-/**
- * 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$1.IntrinsicElements> = JSX$1.IntrinsicElements[K];
-/**
- * Namespaced JSX props added by elements-kit on top of dom-expressions.
- * 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 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>;
-} & StyleNamespace & PropNamespace<E>;
-type XlinkAttrs = {
-  "xlink:href"?: MaybeReactive<string | undefined>;
-  "xlink:title"?: MaybeReactive<string | undefined>;
-  "xlink:show"?: MaybeReactive<"new" | "replace" | "embed" | "other" | "none" | undefined>;
-  "xlink:role"?: MaybeReactive<string | undefined>;
-  "xlink:type"?: MaybeReactive<"simple" | "extended" | "locator" | "arc" | "resource" | "title" | undefined>;
-  "xlink:arcrole"?: MaybeReactive<string | undefined>;
-  "xlink:actuate"?: MaybeReactive<"onLoad" | "onRequest" | "other" | "none" | undefined>;
-};
-type XmlAttrs = {
-  "xml:lang"?: MaybeReactive<string | undefined>;
-  "xml:space"?: MaybeReactive<"default" | "preserve" | undefined>;
-  "xml:base"?: MaybeReactive<string | undefined>;
-};
-type SvgNamespaceAttrs = XlinkAttrs & XmlAttrs;
-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;
-  export type ElementType = Child | Component;
+  export type ElementClass = {
+    render(): JSX$1.Element | null;
+  };
+  export type ElementType = string | JSX$1.Element | (new (props: any) => JSX$1.ElementClass) | ((props: any) => JSX$1.Element | null);
   export interface ElementChildrenAttribute {
     children: {};
   }
-  export interface IntrinsicAttributes {
-    ref?: (el: Element) => void;
-  }
+  export interface IntrinsicAttributes {}
   export type LibraryManagedAttributes<C, P> = ResolveProps<C, P>;
-  type RegisteredElements = { [K in keyof CustomElementRegistry]: CustomElementRegistry[K] extends infer C extends AnyElementCtor ? WithJsxNamespaces<MaybeReactiveProps<ElementProps<C>>, InstanceType<C>> : never };
-  export type IntrinsicElements = { [K in keyof JSX.IntrinsicElements]: WithJsxNamespaces<JSX.IntrinsicElements[K], IntrinsicElementOf<JSX.IntrinsicElements[K]>> & (IntrinsicElementOf<JSX.IntrinsicElements[K]> extends SVGElement ? SvgNamespaceAttrs : {}) } & RegisteredElements;
+  type RegisteredElements = { [K in keyof CustomElementRegistry]: CustomElementRegistry[K] extends infer C extends AnyElementCtor ? MaybeReactiveProps<WithJsxNamespaces<Omit<ElementProps<C>, "children" | "ref">, InstanceType<C>>> & {
+    ref?: (el: InstanceType<C>) => void;
+    children?: Children;
+  } : never };
+  export type IntrinsicElements = { [K in keyof DOMIntrinsicElements]: MaybeReactiveProps<WithJsxNamespaces<DOMIntrinsicElements[K], DOMElements[K]>> & {
+    ref?: (el: DOMElements[K]) => void;
+    children?: Children;
+  } & (DOMElements[K] extends SVGElement ? SvgNamespaceAttrs : {}) } & RegisteredElements;
   export {};
 }
+/** A class whose constructor returns a ComponentInstance. */
+type ComponentClass<P extends Record<PropertyKey, unknown> = any> = new (props: P) => JSX$1.ElementClass;
+type ComponentFn<P extends Record<PropertyKey, unknown> = any> = (props: Props<P>) => JSX$1.Element | null;
 //#endregion
-//#region src/jsx-runtime/types.d.ts
-/** An instance created by a component class — must expose `render()`. */
-interface ComponentInstance {
-  render(): JSX$1.Element | null;
+//#region src/jsx-runtime/properties.d.ts
+interface CSSProperties extends CSS.PropertiesHyphen {
+  [key: `-${string}`]: string | number | undefined;
 }
-/** A class whose constructor returns a ComponentInstance. */
-type ComponentClass<P extends Record<PropertyKey, unknown> = any> = new (props: P) => ComponentInstance;
-type ComponentFn<P extends Record<PropertyKey, unknown> = any> = (props: ReactiveProps<P>) => JSX$1.Element | null;
-/** Anything valid as the first arg to `createElement` / a JSX tag target. */
-type Component = JSX$1.Element | ComponentClass | ComponentFn;
-/** A resolved runtime node — what `applyProps` / `applyChildren` operate on. */
-type PropsTarget = JSX$1.Element | ComponentInstance;
-/** Anything that can appear as a JSX child. */
-type Child = PrimitiveNodeType | JSX$1.Element | AnyFn | Child[];
-type AnyFn = (...args: any[]) => Child;
+type CssStyleKey = Extract<keyof CSSProperties, string> extends infer K ? K extends `-${string}` ? never : K : never;
+type StyleNamespace = { [K in CssStyleKey as `style:${K}`]?: CSSProperties[K] | null };
+type PropNamespace<E> = { [K in keyof E as K extends string ? `prop:${K}` : never]?: E[K] };
+type XlinkAttrs = {
+  "xlink:href"?: string | undefined;
+  "xlink:title"?: string | undefined;
+  "xlink:show"?: "new" | "replace" | "embed" | "other" | "none" | undefined;
+  "xlink:role"?: string | undefined;
+  "xlink:type"?: "simple" | "extended" | "locator" | "arc" | "resource" | "title" | undefined;
+  "xlink:arcrole"?: string | undefined;
+  "xlink:actuate"?: "onLoad" | "onRequest" | "other" | "none" | undefined;
+};
+type ClassNamespace = { [K in `class:${string}`]?: boolean };
+type XmlAttrs = {
+  "xml:lang"?: string | undefined;
+  "xml:space"?: "default" | "preserve" | undefined;
+  "xml:base"?: string | undefined;
+};
+type SvgNamespaceAttrs = XlinkAttrs & XmlAttrs;
+interface StyleAttrObject extends CSS.Properties {}
+type JsxNamespaces<E extends Element = Element> = (E extends ElementCSSInlineStyle ? {
+  style?: string | StyleAttrObject;
+} & StyleNamespace : {}) & PropNamespace<Omit<E, "children">> & ClassNamespace;
+type JsxNamespaceKeys = "style" | `class:${string}` | `style:${string}` | `prop:${string}`;
+type WithJsxNamespaces<T, E extends Element = Element> = Omit<T, JsxNamespaceKeys> & JsxNamespaces<E>;
+//#endregion
+//#region src/jsx-runtime/children.d.ts
+type PrimitiveNodeType = Node | string | boolean | number | bigint | symbol | Date | RegExp | null | undefined;
+type AnyFn = (...args: any[]) => Children;
+type Children = PrimitiveNodeType | AnyFn | Element | DocumentFragment | Children[];
 //#endregion
-export { EFFECT_SCOPE as A, isSignal as B, isReactive as C, CLAIM as D, resolveProps as E, effect as F, createElement as G, signal as H, effectScope as I, isComputed as L, SIGNAL as M, batch as N, COMPUTED as O, computed as P, isEffect as R, Updater as S, resolve as T, trigger as U, onCleanup as V, untracked as W, Require as _, ComponentInstance as a, MaybeReactive as b, JSX$1 as c, ComponentProps as d, ElementProps as f, ReactiveProps as g, RawProps as h, ComponentFn as i, SEED as j, EFFECT as k, SlotProps as l, Props as m, Component as n, PropsTarget as o, MaybeReactiveProps as p, ComponentClass as r, Attrs as s, Child as t, Fragment as u, ResolveProps as v, reactive as w, Signal as x, Computed as y, isEffectScope as z };
+export { isComputed as A, EFFECT_SCOPE as C, computed as D, batch as E, signal as F, trigger as I, untracked as L, isEffectScope as M, isSignal as N, effect as O, onCleanup as P, EFFECT as S, SIGNAL as T, reactive as _, Fragment as a, CLAIM as b, Props as c, Require as d, Computed as f, isReactive as g, Updater as h, JSX$1 as i, isEffect as j, effectScope as k, PropsOf as l, Signal as m, ComponentClass as n, createElement as o, MaybeReactive as p, ComponentFn as r, MaybeReactiveProps as s, Children as t, RawProps as u, resolve as v, SEED as w, COMPUTED as x, resolveProps as y };