@tempots/dom 36.0.1 → 37.0.1

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@tempots/dom",
-  "version": "36.0.1",
+  "version": "37.0.1",
   "type": "module",
+  "sideEffects": false,
   "main": "./index.cjs",
   "module": "./index.js",
   "types": "./index.d.ts",
@@ -14,8 +15,8 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@tempots/core": "^2.1.1",
-    "@tempots/render": "^0.0.2"
+    "@tempots/core": "^3.0.0",
+    "@tempots/render": "^0.0.3"
   },
   "description": "Fully-typed frontend framework alternative to React and Angular",
   "keywords": [

package/renderable/attribute.d.ts

@@ -1,5 +1,5 @@
 import { Renderable, SplitNValue } from '../types/domain';
-import { Value } from '@tempots/core';
+import { Signal, Value } from '@tempots/core';
 /**
  * Creates a renderable for an HTML attribute with the specified name and value.
  *
@@ -759,3 +759,29 @@ export declare const mathAttr: {
     xmlns: (value: SplitNValue<string>) => Renderable;
     xref: (value: SplitNValue<string>) => Renderable;
 };
+/**
+ * Creates a renderable that toggles a CSS class based on O(1) selection matching.
+ *
+ * Instead of creating a `computed` per row that re-evaluates when the source changes
+ * (O(n) for n rows), this uses `createSelector` from `@tempots/core` to only update
+ * the two rows that actually change (the previously selected and newly selected).
+ *
+ * A shared selector is automatically created per source signal and cached via WeakMap.
+ *
+ * @param source - The signal containing the currently selected value.
+ * @param key - The static key to compare against (e.g., the row's ID).
+ * @param activeClass - The CSS class(es) to toggle (space-separated). Defaults to `'danger'`.
+ * @param equals - Optional equality function. Defaults to `===`.
+ * @returns A renderable that adds/removes the class based on selection state.
+ *
+ * @example
+ * ```ts
+ * const selected = prop(0)
+ * html.tr(
+ *   selectedClass(selected, item.id, 'danger'),
+ *   // ...
+ * )
+ * ```
+ * @public
+ */
+export declare const selectedClass: <T>(source: Signal<T>, key: T, activeClass?: string, equals?: (a: T, b: T) => boolean) => Renderable;

package/renderable/delegate.d.ts

@@ -0,0 +1,169 @@
+import { Renderable } from '../types/domain';
+import { DOMContext, HandlerOptions } from '../dom/dom-context';
+/**
+ * Provides type-safe delegated event handlers for all HTML events.
+ *
+ * The `delegate` object is a proxy that creates event handlers attached to the
+ * **container element** rather than individual children. Events are matched
+ * against a CSS selector using `Element.closest()`, making this ideal for lists
+ * and other containers with many similar children.
+ *
+ * Unlike `on`, which attaches one listener per element, `delegate` attaches a
+ * single listener on the container regardless of how many children match.
+ *
+ * @example
+ * ```typescript
+ * // Delegated click on list items — one listener on the <ul>
+ * html.ul(
+ *   delegate.click('li', (event, ctx) => {
+ *     const li = (event.target as Element).closest('li')!
+ *     console.log('Clicked:', li.textContent)
+ *   }),
+ *   ForEach(items, (item) => html.li(item))
+ * )
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Delegated click on buttons inside a toolbar
+ * html.div(
+ *   delegate.click('button', (event) => {
+ *     const btn = (event.target as Element).closest('button')!
+ *     console.log('Button clicked:', btn.dataset.action)
+ *   }),
+ *   html.button(attr.data('action', 'save'), 'Save'),
+ *   html.button(attr.data('action', 'cancel'), 'Cancel')
+ * )
+ * ```
+ *
+ * @remarks
+ * Delegated events rely on event bubbling. Events that do not bubble (such as
+ * `focus`, `blur`, `mouseenter`, `mouseleave`) will not be captured by
+ * delegation. Use the regular `on` handler for those events.
+ *
+ * @public
+ */
+export declare const delegate: {
+    abort: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    afterprint: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    animationcancel: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    animationend: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    animationiteration: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    animationstart: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    auxclick: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    beforeinput: (selector: string, handler: (event: InputEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    beforeprint: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    beforeunload: (selector: string, handler: (event: BeforeUnloadEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    blur: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    cancel: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    canplay: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    canplaythrough: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    change: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    click: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    close: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    compositionend: (selector: string, handler: (event: CompositionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    compositionstart: (selector: string, handler: (event: CompositionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    compositionupdate: (selector: string, handler: (event: CompositionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    contextmenu: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    copy: (selector: string, handler: (event: ClipboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    cuechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    cut: (selector: string, handler: (event: ClipboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    dblclick: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    drag: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    dragend: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    dragenter: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    dragexit: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    dragleave: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    dragover: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    dragstart: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    drop: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    durationchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    emptied: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    ended: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    error: (selector: string, handler: (event: ErrorEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    focus: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    focusin: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    focusout: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    formdata: (selector: string, handler: (event: FormDataEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    fullscreenchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    fullscreenerror: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    gotpointercapture: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    hashchange: (selector: string, handler: (event: HashChangeEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    input: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    invalid: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    keydown: (selector: string, handler: (event: KeyboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    keypress: (selector: string, handler: (event: KeyboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    keyup: (selector: string, handler: (event: KeyboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    languagechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    load: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    loadeddata: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    loadedmetadata: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    loadend: (selector: string, handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    loadstart: (selector: string, handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    lostpointercapture: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    message: (selector: string, handler: (event: MessageEvent<any>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    messageerror: (selector: string, handler: (event: MessageEvent<any>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    mousedown: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    mouseenter: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    mouseleave: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    mousemove: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    mouseout: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    mouseover: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    mouseup: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    offline: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    online: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    orientationchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pagehide: (selector: string, handler: (event: PageTransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pageshow: (selector: string, handler: (event: PageTransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    paste: (selector: string, handler: (event: ClipboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pause: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    play: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    playing: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointercancel: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointerdown: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointerenter: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointerleave: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointerlockchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointerlockerror: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointermove: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointerout: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointerover: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointerrawupdate: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    pointerup: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    popstate: (selector: string, handler: (event: PopStateEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    progress: (selector: string, handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    ratechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    readystatechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    rejectionhandled: (selector: string, handler: (event: PromiseRejectionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    reset: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    resize: (selector: string, handler: (event: UIEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    scroll: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    scrollend: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    securitypolicyviolation: (selector: string, handler: (event: SecurityPolicyViolationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    seeked: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    seeking: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    select: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    selectionchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    selectstart: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    slotchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    stalled: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    storage: (selector: string, handler: (event: StorageEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    submit: (selector: string, handler: (event: SubmitEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    suspend: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    timeupdate: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    toggle: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    touchcancel: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    touchend: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    touchmove: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    touchstart: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    transitioncancel: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    transitionend: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    transitionrun: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    transitionstart: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    unhandledrejection: (selector: string, handler: (event: PromiseRejectionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    unload: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    visibilitychange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    volumechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    waiting: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+    wheel: (selector: string, handler: (event: WheelEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
+};

package/renderable/keyed-foreach.d.ts

@@ -0,0 +1 @@
+export { KeyedForEach } from './shared';

package/renderable/map-text.d.ts

@@ -0,0 +1 @@
+export { MapText } from './shared';

package/renderable/shared.d.ts

@@ -1,8 +1,8 @@
 import { DOMContext } from '../dom/dom-context';
 import { DOM_RENDERABLE_TYPE } from '../types/domain';
 export declare const domKit: import('@tempots/render').RenderKit<DOMContext, typeof DOM_RENDERABLE_TYPE>;
-export declare const Empty: import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Fragment: (...children: import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>[]) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, When: (condition: import('@tempots/core').Value<boolean>, then: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Unless: (condition: import('@tempots/core').Value<boolean>, then: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, ForEach: <T>(value: import('@tempots/core').Value<T[]>, item: (value: import('@tempots/core').Signal<T>, position: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, separator?: ((pos: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Repeat: (times: import('@tempots/core').Value<number>, element: (index: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, separator?: ((pos: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOf: <T extends Record<string, unknown>>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOfField: <T extends { [_ in K]: string; }, K extends string>(match: import('@tempots/core').Value<T>, field: K, cases: import('@tempots/render').OneOfFieldOptions<T, K, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOfKind: <T extends {
+export declare const Empty: import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Fragment: (...children: import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>[]) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, When: (condition: import('@tempots/core').Value<boolean>, then: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Unless: (condition: import('@tempots/core').Value<boolean>, then: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, ForEach: <T>(value: import('@tempots/core').Value<T[]>, item: (value: import('@tempots/core').Signal<T>, position: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, separator?: ((pos: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, KeyedForEach: <T, K>(value: import('@tempots/core').Value<T[]>, key: (item: T) => K, item: (value: import('@tempots/core').Signal<T>, position: import('@tempots/core').KeyedPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, separator?: ((pos: import('@tempots/core').KeyedPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Repeat: (times: import('@tempots/core').Value<number>, element: (index: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, separator?: ((pos: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOf: <T extends Record<string, unknown>>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOfField: <T extends { [_ in K]: string; }, K extends string>(match: import('@tempots/core').Value<T>, field: K, cases: import('@tempots/render').OneOfFieldOptions<T, K, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOfKind: <T extends {
     kind: string;
 }>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfKindOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOfType: <T extends {
     type: string;
-}>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfTypeOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOfValue: <T extends symbol | number | string>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfValueOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOfTuple: <T extends string, V>(match: import('@tempots/core').Value<[T, V]>, cases: import('@tempots/render').OneOfTupleOptions<T, V, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, MapSignal: <T>(value: import('@tempots/core').Value<T>, fn: (value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Ensure: <T>(value: import('@tempots/render').NillifyValue<T>, then: (value: import('@tempots/core').Signal<T & {} extends infer T_1 ? { [P in keyof T_1]: T_1[P]; } : never>) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, EnsureAll: <T extends readonly import('@tempots/core').Value<unknown>[]>(...signals: { [K in keyof T]: import('@tempots/render').NillifyValue<T[K]>; }) => (callback: (...values: { [K_1 in keyof T]: import('@tempots/core').Signal<(T[K_1] extends import('@tempots/core').Value<infer U> ? U : never) & {} extends infer T_1 ? { [P in keyof T_1]: T_1[P]; } : never>; }) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, NotEmpty: <T>(value: import('@tempots/core').Value<T[]>, display: (value: import('@tempots/core').Signal<T[]>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, whenEmpty?: (() => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Task: <T>(task: () => Promise<T>, options: import('@tempots/render').TaskOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE> | ((value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>)) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Async: <T>(promise: Promise<T>, options: import('@tempots/render').AsyncOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE> | ((value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>)) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OnDispose: (...fns: (import('@tempots/render').DisposeCallback<DOMContext> | import('@tempots/render').WithDispose<DOMContext>)[]) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Conjunction: (separator: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, options?: import('@tempots/render').ConjunctionOptions<DOMContext, typeof DOM_RENDERABLE_TYPE> | undefined) => (pos: import('@tempots/core').Signal<import('@tempots/core').ElementPosition>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, WithScope: (fn: (scope: import('@tempots/core').DisposalScope) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, WithProvider: (fn: (opts: import('@tempots/render').ProviderOptions<DOMContext>) => void | import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Provide: <T, O>(provider: import('@tempots/render').Provider<T, O, DOMContext>, options: O, child: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Use: <T>(provider: import('@tempots/render').Provider<T, unknown, DOMContext>, child: (provider: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, UseMany: <P extends import('@tempots/render').Provider<unknown, unknown, DOMContext>[]>(...providers: P) => (child: (...values: import('@tempots/render').ToProviderTypes<P>) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, handleValueOrSignal: <T, R>(value: import('@tempots/core').Value<T>, onSignal: (signal: import('@tempots/core').Signal<T>) => R, onStatic: (literal: T) => R) => R, createReactiveRenderable: <T>(ctx: DOMContext, signal: import('@tempots/core').Signal<T>, render: (value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Clear, renderableOfTNode: (child: import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>;
+}>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfTypeOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOfValue: <T extends symbol | number | string>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfValueOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OneOfTuple: <T extends string, V>(match: import('@tempots/core').Value<[T, V]>, cases: import('@tempots/render').OneOfTupleOptions<T, V, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, MapSignal: <T>(value: import('@tempots/core').Value<T>, fn: (value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, MapText: <T>(source: import('@tempots/core').Signal<T>, fn: (value: T) => string) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Ensure: <T>(value: import('@tempots/render').NillifyValue<T>, then: (value: import('@tempots/core').Signal<T & {} extends infer T_1 ? { [P in keyof T_1]: T_1[P]; } : never>) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, EnsureAll: <T extends readonly import('@tempots/core').Value<unknown>[]>(...signals: { [K in keyof T]: import('@tempots/render').NillifyValue<T[K]>; }) => (callback: (...values: { [K_1 in keyof T]: import('@tempots/core').Signal<(T[K_1] extends import('@tempots/core').Value<infer U> ? U : never) & {} extends infer T_1 ? { [P in keyof T_1]: T_1[P]; } : never>; }) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, NotEmpty: <T>(value: import('@tempots/core').Value<T[]>, display: (value: import('@tempots/core').Signal<T[]>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, whenEmpty?: (() => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Task: <T>(task: () => Promise<T>, options: import('@tempots/render').TaskOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE> | ((value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>)) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Async: <T>(promise: Promise<T>, options: import('@tempots/render').AsyncOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE> | ((value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>)) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, OnDispose: (...fns: (import('@tempots/render').DisposeCallback<DOMContext> | import('@tempots/render').WithDispose<DOMContext>)[]) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Conjunction: (separator: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, options?: import('@tempots/render').ConjunctionOptions<DOMContext, typeof DOM_RENDERABLE_TYPE> | undefined) => (pos: import('@tempots/core').Signal<import('@tempots/core').ElementPosition>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, WithScope: (fn: (scope: import('@tempots/core').DisposalScope) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, WithProvider: (fn: (opts: import('@tempots/render').ProviderOptions<DOMContext>) => void | import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Provide: <T, O>(provider: import('@tempots/render').Provider<T, O, DOMContext>, options: O, child: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, Use: <T>(provider: import('@tempots/render').Provider<T, unknown, DOMContext>, child: (provider: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, UseMany: <P extends import('@tempots/render').Provider<unknown, unknown, DOMContext>[]>(...providers: P) => (child: (...values: import('@tempots/render').ToProviderTypes<P>) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, handleValueOrSignal: <T, R>(value: import('@tempots/core').Value<T>, onSignal: (signal: import('@tempots/core').Signal<T>) => R, onStatic: (literal: T) => R) => R, createReactiveRenderable: <T>(ctx: DOMContext, signal: import('@tempots/core').Signal<T>, render: (value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Clear, renderableOfTNode: (child: import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>;

package/renderable/text.d.ts

@@ -1,13 +1,13 @@
 import { Renderable } from '../types/domain';
-import { Signal, Value } from '@tempots/core';
+import { Primitive, Signal, Value } from '@tempots/core';
 /**
  * @internal
  */
-export declare const _staticText: (text: string) => Renderable;
+export declare const _staticText: (text: Primitive) => Renderable;
 /**
  * @internal
  */
-export declare const _signalText: (signal: Signal<string>) => Renderable;
+export declare const _signalText: (signal: Signal<Primitive>) => Renderable;
 /**
  * Creates a renderable text node.
  *
@@ -15,4 +15,4 @@ export declare const _signalText: (signal: Signal<string>) => Renderable;
  * @returns A renderable text node.
  * @public
  */
-export declare const TextNode: (value: Value<string>) => Renderable;
+export declare const TextNode: (value: Value<Primitive>) => Renderable;

package/template/builder.d.ts

@@ -0,0 +1,11 @@
+import { CompiledTemplate, TemplateNode } from './types';
+/**
+ * Walk a renderable tree with kind metadata and build a DOM template
+ * programmatically (no innerHTML — avoids HTML parser normalization
+ * issues with `<tr>`, `<td>`, etc.).
+ *
+ * Returns null if the tree contains an unknown kind that can't be templated.
+ *
+ * @internal
+ */
+export declare function buildTemplate(renderable: TemplateNode, doc: Document): CompiledTemplate | null;

package/template/engine.d.ts

@@ -0,0 +1,12 @@
+import { TemplateEngine } from '@tempots/render';
+import { DOMContext } from '../dom/dom-context';
+import { DOM_RENDERABLE_TYPE } from '../types/domain';
+/**
+ * DOM-specific template engine for cloneNode(true) optimization.
+ *
+ * Builds templates programmatically (no innerHTML) to avoid HTML parser
+ * normalization issues with elements like `<tr>`, `<td>`, etc.
+ *
+ * @internal
+ */
+export declare const domTemplateEngine: TemplateEngine<DOMContext, typeof DOM_RENDERABLE_TYPE>;

package/template/hydrator.d.ts

@@ -0,0 +1,21 @@
+import { CompiledTemplate, DynamicTextSlot, RenderableSlot } from './types';
+import { Clear } from '@tempots/core';
+import { DOMContext } from '../dom/dom-context';
+/**
+ * Clone a compiled template and wire up dynamic bindings.
+ *
+ * Optimizations vs naive approach:
+ * - Pre-allocated topNodes array (no Array.from) — minimal allocation
+ * - Pre-allocated clears array — saves dynamic resizing
+ * - Dynamic-text onChange stored directly as Clear — no wrapper closure
+ *
+ * Returns `{ clear, startCtx }` where startCtx is a DOMContext whose
+ * reference is the first top-level node of the clone. This lets
+ * KeyedForEach skip creating a separate Comment start marker.
+ *
+ * @internal
+ */
+export declare function hydrateClone(template: CompiledTemplate, ctx: DOMContext, slots: readonly (DynamicTextSlot | RenderableSlot)[]): {
+    clear: Clear;
+    startCtx: DOMContext;
+};

package/template/types.d.ts

@@ -0,0 +1,85 @@
+import { Clear, Signal } from '@tempots/core';
+import { DOMContext } from '../dom/dom-context';
+/**
+ * Describes a dynamic slot in a compiled template.
+ *
+ * @internal
+ */
+export interface SlotInfo {
+    /** childNodes indices from the template fragment root to the target node */
+    path: number[];
+    /** The kind of dynamic binding this slot represents */
+    kind: 'dynamic-attr' | 'dynamic-text' | 'slot';
+}
+/**
+ * A compiled DOM template ready for cloning.
+ *
+ * @internal
+ */
+export interface CompiledTemplate {
+    /** The template fragment to clone via `cloneNode(true)` */
+    fragment: DocumentFragment;
+    /** Slot descriptors in build order (matches extractSlots order) */
+    slots: SlotInfo[];
+    /** Number of top-level child nodes in the fragment */
+    topNodeCount: number;
+}
+/** An element renderable with tag name and children. */
+export interface ElementNode {
+    readonly kind: 'element';
+    readonly tag: string;
+    readonly ns?: string;
+    readonly children: readonly TemplateNode[];
+}
+/** A static attribute baked into the template. */
+export interface StaticAttrNode {
+    readonly kind: 'static-attr';
+    readonly name: string;
+    readonly value: string;
+}
+/** A dynamic attribute that needs runtime binding. */
+export interface DynamicAttrNode {
+    readonly kind: 'dynamic-attr';
+    readonly render: (ctx: DOMContext) => Clear;
+}
+/** A static text node baked into the template. */
+export interface StaticTextNode {
+    readonly kind: 'static-text';
+    readonly text: string;
+}
+/** A dynamic text node bound to a signal. */
+export interface DynamicTextNode {
+    readonly kind: 'dynamic-text';
+    readonly source: Signal<unknown>;
+    readonly transform: (v: unknown) => string;
+}
+/** A fragment that inlines its children (no DOM node). */
+export interface FragmentNode {
+    readonly kind: 'fragment';
+    readonly children: readonly TemplateNode[];
+}
+/** An empty renderable (no DOM output). */
+export interface EmptyNode {
+    readonly kind: 'empty';
+}
+/** An opaque renderable without kind metadata (e.g. When, ForEach). */
+export interface OpaqueNode {
+    readonly kind?: undefined;
+    readonly render: (ctx: DOMContext) => Clear;
+}
+/**
+ * Discriminated union of all renderable node shapes the template engine
+ * can encounter when walking a renderable tree.
+ *
+ * @internal
+ */
+export type TemplateNode = ElementNode | StaticAttrNode | DynamicAttrNode | StaticTextNode | DynamicTextNode | FragmentNode | EmptyNode | OpaqueNode;
+/** A dynamic-text slot carries a signal source and transform function. */
+export interface DynamicTextSlot {
+    readonly source: Signal<unknown>;
+    readonly transform: (v: unknown) => string;
+}
+/** A renderable slot (dynamic-attr or opaque) carries a render function. */
+export interface RenderableSlot {
+    readonly render: (ctx: DOMContext) => Clear;
+}

package/types/domain.d.ts

@@ -127,7 +127,7 @@ export declare const domRenderable: <CTX extends DOMContext = DOMContext>(render
  * @typeParam CTX - The type of DOMContext (defaults to DOMContext)
  * @public
  */
-export type TNode<CTX extends DOMContext = DOMContext> = Renderable<CTX> | string | Signal<string> | undefined | null | Renderable<CTX>[];
+export type TNode<CTX extends DOMContext = DOMContext> = Renderable<CTX> | string | number | boolean | Signal<string> | Signal<number> | Signal<boolean> | undefined | null | Renderable<CTX>[];
 export type { Providers } from '@tempots/render';
 /**
  * Represents the size of an object with width and height.