elements-kit 0.21.0 → 0.22.1

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 };

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

@@ -0,0 +1,87 @@
+import { t as ATTRIBUTES } from "./attributes-DILeh3-s.mjs";
+
+//#region src/custom-elements.d.ts
+type RegisteredElementInstances = { [K in keyof ElementsKit.CustomElementRegistry]: ElementsKit.CustomElementRegistry[K] extends (abstract new (...args: any[]) => infer I) ? I : never };
+declare global {
+  namespace ElementsKit {
+    interface CustomElementRegistry {}
+  }
+  interface HTMLElementTagNameMap extends RegisteredElementInstances {}
+}
+type CustomElementRegistry = ElementsKit.CustomElementRegistry;
+type AnyCtor = CustomElementConstructor;
+/**
+ * @internal Public instance keys of `I`: for `HTMLElement` subclasses the
+ * inherited DOM surface is dropped; for plain classes `render` is dropped.
+ * Shared by the raw extractors here and the JSX helpers in jsx-runtime.
+ */
+type PublicPropKeys<I> = I extends HTMLElement ? Exclude<keyof I, keyof HTMLElement | symbol> : Exclude<keyof I, symbol | "render">;
+type InstanceOfCtor<C> = C extends (abstract new (...args: any[]) => infer I) ? I : C;
+/**
+ * Settable property surface of a custom-element class (or instance) — the
+ * user's public fields, all optional, without the inherited `HTMLElement`
+ * surface. Slot-backed props (`@slot()` accessors) appear here as their
+ * `Node | null` read type — assignment fills the slot.
+ *
+ * @example
+ * ```ts
+ * class XCounter extends HTMLElement { count = 0; }
+ * type P = PropertiesOf<typeof XCounter>; // { count?: number }
+ * ```
+ */
+type PropertiesOf<C> = InstanceOfCtor<C> extends infer I ? { [K in PublicPropKeys<I> & string]?: I[K] } : never;
+/**
+ * Observed attributes of a custom-element class — every key of
+ * `static [ATTRIBUTES]`, valued `string | null` (the raw HTML surface).
+ *
+ * @example
+ * ```ts
+ * type A = AttributesOf<typeof XRange>; // { min?: string | null; ... }
+ * ```
+ */
+type AttributesOf<C> = C extends {
+  [ATTRIBUTES]: infer M;
+} ? M extends Record<string, unknown> ? string extends keyof M ? {} : { [K in keyof M & string]?: string | null } : {} : {};
+/**
+ * Raw event map of a custom-element class — `static events` verbatim.
+ * Shape it however your host needs: `addEventListener` typing, framework
+ * event bindings, or an `HTMLElementEventMap` augmentation.
+ *
+ * @example
+ * ```ts
+ * type E = EventsOf<typeof XRange>; // { commit: CustomEvent<number> }
+ * declare global {
+ *   interface HTMLElementEventMap extends EventsOf<typeof XRange> {}
+ * }
+ * ```
+ */
+type EventsOf<C> = C extends {
+  events: infer E;
+} ? E extends Record<string, Event> ? E : {} : {};
+/**
+ * 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 { PublicPropKeys as a, PropertiesOf as i, CustomElementRegistry as n, defineElement as o, EventsOf as r, AttributesOf as t };

package/dist/custom-elements.d.mts

@@ -1,2 +1,2 @@
-import { n as defineElement, t as CustomElementRegistry } from "./custom-elements-BGcU6ldL.mjs";
-export { CustomElementRegistry, defineElement };
+import { a as PublicPropKeys, i as PropertiesOf, n as CustomElementRegistry, o as defineElement, r as EventsOf, t as AttributesOf } from "./custom-elements-CdpilMDu.mjs";
+export { AttributesOf, CustomElementRegistry, EventsOf, PropertiesOf, PublicPropKeys, defineElement };

package/dist/{element-D3om9yA6.mjs → element-Di0PYFX1.mjs}

@@ -2,7 +2,7 @@ import { C as untracked, _ as onCleanup, d as effectScope, u as effect } from ".
 import "./polyfill-CdZVCxdo.mjs";
 import { isReactive, resolveProps } from "./signals/index.mjs";
 import { on } from "./utilities/event-listener.mjs";
-import { n as Slot, r as resolveNode$1, t as SLOTS } from "./slot-Dvf30O0B.mjs";
+import { Slot } from "./slot.mjs";
 //#region src/jsx-runtime/constants.ts
 /**
 * IDL properties that take precedence over the default `setAttribute` path.
@@ -267,46 +267,23 @@ const ReservedNameSpaces = new Set([
 ]);
 //#endregion
 //#region src/jsx-runtime/children.ts
-function hasSlots(node) {
-	return SLOTS in node;
+var UnsupportedChildError = class extends Error {
+	constructor(value) {
+		super(`Unsupported child type: ${typeof value}`);
+		this.name = "UnsupportedChildError";
+	}
+};
+function resolveNode$1(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);
 }
 function isChildrenProperty(node, key) {
-	if (key === "children" && (node instanceof Element || node instanceof DocumentFragment)) return true;
-	if (hasSlots(node)) {
-		if (key.replace(/^slot:/, "") in node[SLOTS]) return true;
-	}
-	return key in node && node[key] instanceof Slot;
+	return key === "children" && (node instanceof Element || node instanceof DocumentFragment);
 }
 function applyChildren(node, key, value) {
-	if (hasSlots(node)) {
-		const slotName = key.replace(/^slot:/, "");
-		if (slotName in node[SLOTS]) {
-			applySlot(node[SLOTS][slotName], value);
-			return;
-		}
-	}
-	if (key === "children" && (node instanceof Element || node instanceof DocumentFragment)) {
-		mountChildren(node, value);
-		return;
-	}
-	if (key in node) {
-		const slot = node[key];
-		if (!(slot instanceof Slot)) return;
-		applySlot(slot, value);
-	}
-}
-function applySlot(slot, value) {
-	let dispose;
-	if (typeof value === "function") effect(() => slot.set(resolveChild(value())));
-	else {
-		const node = resolveChild(value);
-		dispose = node[Symbol.dispose];
-		slot.set(node);
-	}
-	onCleanup(() => {
-		dispose?.();
-		slot.clear();
-	});
+	if (key === "children" && (node instanceof Element || node instanceof DocumentFragment)) mountChildren(node, value);
 }
 const FRAGMENT_POOL_MAX = 4;
 const fragmentPool = [];
@@ -388,7 +365,7 @@ function mountStatic(el, list, kind) {
 function mountChild(el, child) {
 	if (typeof child === "function") {
 		const slot = new Slot();
-		el.appendChild(slot.render());
+		el.appendChild(slot.get());
 		effect(() => slot.set(resolveChild(child())));
 		onCleanup(() => slot.clear());
 		return;

package/dist/environment-CTAGxqz_.d.mts

@@ -0,0 +1,19 @@
+//#region src/utilities/environment.d.ts
+/** `true` when running in a browser (both `window` and `document` exist). */
+declare const isBrowser: boolean;
+/**
+ * `HTMLElement` in the browser; an empty stand-in on the server.
+ *
+ * A custom-element class evaluates its `extends` clause at module load, but
+ * `HTMLElement` is undefined in Node — so importing an element module during
+ * SSR (e.g. an Astro `client:load` island) throws `HTMLElement is not defined`
+ * before any `isBrowser` guard can run. Elements are never *constructed* on the
+ * server (the streaming renderer emits plain tags), so a stub base is enough to
+ * let the class definition load; the guarded `customElements.define` still only
+ * registers in a real browser.
+ */
+declare const HTMLElementBase: typeof HTMLElement;
+/** A shared `Disposable` whose `Symbol.dispose` is a no-op — useful as a safe default. */
+declare const noopDisposable: Disposable;
+//#endregion
+export { isBrowser as n, noopDisposable as r, HTMLElementBase as t };