@fictjs/runtime 0.0.7 → 0.0.9

package/dist/index.d.cts

@@ -88,13 +88,13 @@ interface ErrorInfo {
 /** Event handler type for type-safe event handling */
 type EventHandler<E extends Event = Event> = (event: E) => void;
 /** Ref callback type */
-type RefCallback<T extends HTMLElement = HTMLElement> = (element: T) => void;
+type RefCallback<T extends Element = HTMLElement> = (element: T) => void;
 /** Ref object type (for future use with createRef) */
-interface RefObject<T extends HTMLElement = HTMLElement> {
+interface RefObject<T extends Element = HTMLElement> {
     current: T | null;
 }
 /** Ref type that can be either callback or object */
-type Ref<T extends HTMLElement = HTMLElement> = RefCallback<T> | RefObject<T>;
+type Ref<T extends Element = HTMLElement> = RefCallback<T> | RefObject<T>;
 /** CSS style value - can be string or number (number becomes px) */
 type StyleValue = string | number;
 /** CSS style object */
@@ -198,7 +198,7 @@ declare function createTextBinding(value: MaybeReactive<unknown>): Text;
  */
 declare function bindText(textNode: Text, getValue: () => unknown): Cleanup;
 /** Attribute setter function type */
-type AttributeSetter = (el: HTMLElement, key: string, value: unknown) => void;
+type AttributeSetter = (el: Element, key: string, value: unknown) => void;
 /**
  * Create a reactive attribute binding on an element.
  *
@@ -211,35 +211,35 @@ type AttributeSetter = (el: HTMLElement, key: string, value: unknown) => void;
  * createAttributeBinding(button, 'disabled', () => !$isValid(), setAttribute)
  * ```
  */
-declare function createAttributeBinding(el: HTMLElement, key: string, value: MaybeReactive<unknown>, setter: AttributeSetter): void;
+declare function createAttributeBinding(el: Element, key: string, value: MaybeReactive<unknown>, setter: AttributeSetter): void;
 /**
  * Bind a reactive value to an element's attribute.
  */
-declare function bindAttribute(el: HTMLElement, key: string, getValue: () => unknown): Cleanup;
+declare function bindAttribute(el: Element, key: string, getValue: () => unknown): Cleanup;
 /**
  * Bind a reactive value to an element's property.
  */
-declare function bindProperty(el: HTMLElement, key: string, getValue: () => unknown): Cleanup;
+declare function bindProperty(el: Element, key: string, getValue: () => unknown): Cleanup;
 /**
  * Apply styles to an element, supporting reactive style objects/strings.
  */
-declare function createStyleBinding(el: HTMLElement, value: MaybeReactive<string | Record<string, string | number> | null | undefined>): void;
+declare function createStyleBinding(el: Element, value: MaybeReactive<string | Record<string, string | number> | null | undefined>): void;
 /**
  * Bind a reactive style value to an existing element.
  */
-declare function bindStyle(el: HTMLElement, getValue: () => string | Record<string, string | number> | null | undefined): Cleanup;
+declare function bindStyle(el: Element, getValue: () => string | Record<string, string | number> | null | undefined): Cleanup;
 /**
  * Apply class to an element, supporting reactive class values.
  */
-declare function createClassBinding(el: HTMLElement, value: MaybeReactive<string | Record<string, boolean> | null | undefined>): void;
+declare function createClassBinding(el: Element, value: MaybeReactive<string | Record<string, boolean> | null | undefined>): void;
 /**
  * Bind a reactive class value to an existing element.
  */
-declare function bindClass(el: HTMLElement, getValue: () => string | Record<string, boolean> | null | undefined): Cleanup;
+declare function bindClass(el: Element, getValue: () => string | Record<string, boolean> | null | undefined): Cleanup;
 /**
  * Exported classList function for direct use (compatible with dom-expressions)
  */
-declare function classList(node: HTMLElement, value: Record<string, boolean> | null | undefined, prev?: Record<string, boolean>): Record<string, boolean>;
+declare function classList(node: Element, value: Record<string, boolean> | null | undefined, prev?: Record<string, boolean>): Record<string, boolean>;
 /**
  * Insert reactive content into a parent element.
  * This is a simpler API than createChildBinding for basic cases.
@@ -249,7 +249,7 @@ declare function classList(node: HTMLElement, value: Record<string, boolean> | n
  * @param markerOrCreateElement - Optional marker node to insert before, or createElementFn
  * @param createElementFn - Optional function to create DOM elements (when marker is provided)
  */
-declare function insert(parent: HTMLElement | DocumentFragment, getValue: () => FictNode, markerOrCreateElement?: Node | CreateElementFn, createElementFn?: CreateElementFn): Cleanup;
+declare function insert(parent: ParentNode & Node, getValue: () => FictNode, markerOrCreateElement?: Node | CreateElementFn, createElementFn?: CreateElementFn): Cleanup;
 /**
  * Create a reactive child binding that updates when the child value changes.
  * This is used for dynamic expressions like `{show && <Modal />}` or `{items.map(...)}`.
@@ -263,10 +263,10 @@ declare function insert(parent: HTMLElement | DocumentFragment, getValue: () =>
  * createChildBinding(parent, () => $show() && jsx(Modal, {}), createElement)
  * ```
  */
-declare function createChildBinding(parent: HTMLElement | DocumentFragment, getValue: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
+declare function createChildBinding(parent: ParentNode & Node, getValue: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
 declare global {
-    interface HTMLElement {
-        _$host?: HTMLElement;
+    interface Element {
+        _$host?: Element;
         [key: `$$${string}`]: EventListener | [EventListener, unknown] | undefined;
         [key: `$$${string}Data`]: unknown;
     }
@@ -302,7 +302,7 @@ declare function clearDelegatedEvents(doc?: Document): void;
  * @param handler - The event handler or [handler, data] tuple
  * @param delegate - Whether to use delegation (auto-detected based on event name)
  */
-declare function addEventListener(node: HTMLElement, name: string, handler: EventListener | [EventListener, unknown] | null | undefined, delegate?: boolean): void;
+declare function addEventListener(node: Element, name: string, handler: EventListener | [EventListener, unknown] | null | undefined, delegate?: boolean): void;
 /**
  * Bind an event listener to an element.
  * Uses event delegation for better performance when applicable.
@@ -319,7 +319,7 @@ declare function addEventListener(node: HTMLElement, name: string, handler: Even
  * bindEvent(button, 'click', handler, { capture: true, passive: true, once: true })
  * ```
  */
-declare function bindEvent(el: HTMLElement, eventName: string, handler: EventListenerOrEventListenerObject | null | undefined, options?: boolean | AddEventListenerOptions): Cleanup;
+declare function bindEvent(el: Element, eventName: string, handler: EventListenerOrEventListenerObject | null | undefined, options?: boolean | AddEventListenerOptions): Cleanup;
 /**
  * Bind a ref to an element.
  * Supports both callback refs and ref objects.
@@ -341,7 +341,7 @@ declare function bindEvent(el: HTMLElement, eventName: string, handler: EventLis
  * bindRef(el, () => props.ref)
  * ```
  */
-declare function bindRef(el: HTMLElement, ref: unknown): Cleanup;
+declare function bindRef(el: Element, ref: unknown): Cleanup;
 /**
  * Apply spread props to an element with reactive updates.
  * This handles dynamic spread like `<div {...props}>`.
@@ -358,7 +358,7 @@ declare function bindRef(el: HTMLElement, ref: unknown): Cleanup;
  * spread(el, props, false, false)
  * ```
  */
-declare function spread(node: HTMLElement, props?: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean): Record<string, unknown>;
+declare function spread(node: Element, props?: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean): Record<string, unknown>;
 /**
  * Assign props to a node, tracking previous values for efficient updates.
  * This is the core prop assignment logic used by spread.
@@ -370,7 +370,7 @@ declare function spread(node: HTMLElement, props?: Record<string, unknown>, isSV
  * @param prevProps - Previous props for comparison
  * @param skipRef - Whether to skip ref handling
  */
-declare function assign(node: HTMLElement, props: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean, prevProps?: Record<string, unknown>, skipRef?: boolean): void;
+declare function assign(node: Element, props: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean, prevProps?: Record<string, unknown>, skipRef?: boolean): void;
 /**
  * Create a conditional rendering binding.
  * Efficiently renders one of two branches based on a condition.
@@ -394,8 +394,9 @@ declare function createConditional(condition: () => boolean, renderTrue: () => F
 type KeyFn<T> = (item: T, index: number) => string | number;
 /**
  * Create a reactive list rendering binding with optional keying.
+ * The render callback receives signal accessors for the item and index.
  */
-declare function createList<T>(items: () => T[], renderItem: (item: T, index: number) => FictNode, createElementFn: CreateElementFn, getKey?: KeyFn<T>): BindingHandle;
+declare function createList<T>(items: () => T[], renderItem: (item: SignalAccessor<T>, index: SignalAccessor<number>) => FictNode, createElementFn: CreateElementFn, getKey?: KeyFn<T>): BindingHandle;
 /**
  * Create a show/hide binding that uses CSS display instead of DOM manipulation.
  * More efficient than conditional when the content is expensive to create.
@@ -405,7 +406,9 @@ declare function createList<T>(items: () => T[], renderItem: (item: T, index: nu
  * createShow(container, () => $visible())
  * ```
  */
-declare function createShow(el: HTMLElement, condition: () => boolean, displayValue?: string): void;
+declare function createShow(el: Element & {
+    style: CSSStyleDeclaration;
+}, condition: () => boolean, displayValue?: string): void;
 /**
  * Create a portal that renders content into a different DOM container.
  *
@@ -418,7 +421,7 @@ declare function createShow(el: HTMLElement, condition: () => boolean, displayVa
  * )
  * ```
  */
-declare function createPortal(container: HTMLElement, render: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
+declare function createPortal(container: ParentNode & Node, render: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
 
 interface ReactiveScope {
     run<T>(fn: () => T): T;
@@ -549,7 +552,7 @@ declare function createRoot<T>(fn: () => T): {
  * }
  * ```
  */
-declare function createRef<T extends HTMLElement = HTMLElement>(): RefObject<T>;
+declare function createRef<T extends Element = HTMLElement>(): RefObject<T>;
 
 /**
  * Execute a function with low-priority scheduling.
@@ -1580,7 +1583,7 @@ declare function createKeyedListContainer<T = unknown>(): KeyedListContainer<T>;
  * @param render - Function that creates the DOM nodes and sets up bindings
  * @returns New KeyedBlock
  */
-declare function createKeyedBlock<T>(key: string | number, item: T, index: number, render: (item: SignalAccessor<T>, index: SignalAccessor<number>, key: string | number) => Node[], needsIndex?: boolean): KeyedBlock<T>;
+declare function createKeyedBlock<T>(key: string | number, item: T, index: number, render: (item: SignalAccessor<T>, index: SignalAccessor<number>, key: string | number) => Node[], needsIndex?: boolean, hostRoot?: RootContext): KeyedBlock<T>;
 /**
  * Find the first node after the start marker (for getting current anchor)
  */

package/dist/index.d.ts

@@ -88,13 +88,13 @@ interface ErrorInfo {
 /** Event handler type for type-safe event handling */
 type EventHandler<E extends Event = Event> = (event: E) => void;
 /** Ref callback type */
-type RefCallback<T extends HTMLElement = HTMLElement> = (element: T) => void;
+type RefCallback<T extends Element = HTMLElement> = (element: T) => void;
 /** Ref object type (for future use with createRef) */
-interface RefObject<T extends HTMLElement = HTMLElement> {
+interface RefObject<T extends Element = HTMLElement> {
     current: T | null;
 }
 /** Ref type that can be either callback or object */
-type Ref<T extends HTMLElement = HTMLElement> = RefCallback<T> | RefObject<T>;
+type Ref<T extends Element = HTMLElement> = RefCallback<T> | RefObject<T>;
 /** CSS style value - can be string or number (number becomes px) */
 type StyleValue = string | number;
 /** CSS style object */
@@ -198,7 +198,7 @@ declare function createTextBinding(value: MaybeReactive<unknown>): Text;
  */
 declare function bindText(textNode: Text, getValue: () => unknown): Cleanup;
 /** Attribute setter function type */
-type AttributeSetter = (el: HTMLElement, key: string, value: unknown) => void;
+type AttributeSetter = (el: Element, key: string, value: unknown) => void;
 /**
  * Create a reactive attribute binding on an element.
  *
@@ -211,35 +211,35 @@ type AttributeSetter = (el: HTMLElement, key: string, value: unknown) => void;
  * createAttributeBinding(button, 'disabled', () => !$isValid(), setAttribute)
  * ```
  */
-declare function createAttributeBinding(el: HTMLElement, key: string, value: MaybeReactive<unknown>, setter: AttributeSetter): void;
+declare function createAttributeBinding(el: Element, key: string, value: MaybeReactive<unknown>, setter: AttributeSetter): void;
 /**
  * Bind a reactive value to an element's attribute.
  */
-declare function bindAttribute(el: HTMLElement, key: string, getValue: () => unknown): Cleanup;
+declare function bindAttribute(el: Element, key: string, getValue: () => unknown): Cleanup;
 /**
  * Bind a reactive value to an element's property.
  */
-declare function bindProperty(el: HTMLElement, key: string, getValue: () => unknown): Cleanup;
+declare function bindProperty(el: Element, key: string, getValue: () => unknown): Cleanup;
 /**
  * Apply styles to an element, supporting reactive style objects/strings.
  */
-declare function createStyleBinding(el: HTMLElement, value: MaybeReactive<string | Record<string, string | number> | null | undefined>): void;
+declare function createStyleBinding(el: Element, value: MaybeReactive<string | Record<string, string | number> | null | undefined>): void;
 /**
  * Bind a reactive style value to an existing element.
  */
-declare function bindStyle(el: HTMLElement, getValue: () => string | Record<string, string | number> | null | undefined): Cleanup;
+declare function bindStyle(el: Element, getValue: () => string | Record<string, string | number> | null | undefined): Cleanup;
 /**
  * Apply class to an element, supporting reactive class values.
  */
-declare function createClassBinding(el: HTMLElement, value: MaybeReactive<string | Record<string, boolean> | null | undefined>): void;
+declare function createClassBinding(el: Element, value: MaybeReactive<string | Record<string, boolean> | null | undefined>): void;
 /**
  * Bind a reactive class value to an existing element.
  */
-declare function bindClass(el: HTMLElement, getValue: () => string | Record<string, boolean> | null | undefined): Cleanup;
+declare function bindClass(el: Element, getValue: () => string | Record<string, boolean> | null | undefined): Cleanup;
 /**
  * Exported classList function for direct use (compatible with dom-expressions)
  */
-declare function classList(node: HTMLElement, value: Record<string, boolean> | null | undefined, prev?: Record<string, boolean>): Record<string, boolean>;
+declare function classList(node: Element, value: Record<string, boolean> | null | undefined, prev?: Record<string, boolean>): Record<string, boolean>;
 /**
  * Insert reactive content into a parent element.
  * This is a simpler API than createChildBinding for basic cases.
@@ -249,7 +249,7 @@ declare function classList(node: HTMLElement, value: Record<string, boolean> | n
  * @param markerOrCreateElement - Optional marker node to insert before, or createElementFn
  * @param createElementFn - Optional function to create DOM elements (when marker is provided)
  */
-declare function insert(parent: HTMLElement | DocumentFragment, getValue: () => FictNode, markerOrCreateElement?: Node | CreateElementFn, createElementFn?: CreateElementFn): Cleanup;
+declare function insert(parent: ParentNode & Node, getValue: () => FictNode, markerOrCreateElement?: Node | CreateElementFn, createElementFn?: CreateElementFn): Cleanup;
 /**
  * Create a reactive child binding that updates when the child value changes.
  * This is used for dynamic expressions like `{show && <Modal />}` or `{items.map(...)}`.
@@ -263,10 +263,10 @@ declare function insert(parent: HTMLElement | DocumentFragment, getValue: () =>
  * createChildBinding(parent, () => $show() && jsx(Modal, {}), createElement)
  * ```
  */
-declare function createChildBinding(parent: HTMLElement | DocumentFragment, getValue: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
+declare function createChildBinding(parent: ParentNode & Node, getValue: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
 declare global {
-    interface HTMLElement {
-        _$host?: HTMLElement;
+    interface Element {
+        _$host?: Element;
         [key: `$$${string}`]: EventListener | [EventListener, unknown] | undefined;
         [key: `$$${string}Data`]: unknown;
     }
@@ -302,7 +302,7 @@ declare function clearDelegatedEvents(doc?: Document): void;
  * @param handler - The event handler or [handler, data] tuple
  * @param delegate - Whether to use delegation (auto-detected based on event name)
  */
-declare function addEventListener(node: HTMLElement, name: string, handler: EventListener | [EventListener, unknown] | null | undefined, delegate?: boolean): void;
+declare function addEventListener(node: Element, name: string, handler: EventListener | [EventListener, unknown] | null | undefined, delegate?: boolean): void;
 /**
  * Bind an event listener to an element.
  * Uses event delegation for better performance when applicable.
@@ -319,7 +319,7 @@ declare function addEventListener(node: HTMLElement, name: string, handler: Even
  * bindEvent(button, 'click', handler, { capture: true, passive: true, once: true })
  * ```
  */
-declare function bindEvent(el: HTMLElement, eventName: string, handler: EventListenerOrEventListenerObject | null | undefined, options?: boolean | AddEventListenerOptions): Cleanup;
+declare function bindEvent(el: Element, eventName: string, handler: EventListenerOrEventListenerObject | null | undefined, options?: boolean | AddEventListenerOptions): Cleanup;
 /**
  * Bind a ref to an element.
  * Supports both callback refs and ref objects.
@@ -341,7 +341,7 @@ declare function bindEvent(el: HTMLElement, eventName: string, handler: EventLis
  * bindRef(el, () => props.ref)
  * ```
  */
-declare function bindRef(el: HTMLElement, ref: unknown): Cleanup;
+declare function bindRef(el: Element, ref: unknown): Cleanup;
 /**
  * Apply spread props to an element with reactive updates.
  * This handles dynamic spread like `<div {...props}>`.
@@ -358,7 +358,7 @@ declare function bindRef(el: HTMLElement, ref: unknown): Cleanup;
  * spread(el, props, false, false)
  * ```
  */
-declare function spread(node: HTMLElement, props?: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean): Record<string, unknown>;
+declare function spread(node: Element, props?: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean): Record<string, unknown>;
 /**
  * Assign props to a node, tracking previous values for efficient updates.
  * This is the core prop assignment logic used by spread.
@@ -370,7 +370,7 @@ declare function spread(node: HTMLElement, props?: Record<string, unknown>, isSV
  * @param prevProps - Previous props for comparison
  * @param skipRef - Whether to skip ref handling
  */
-declare function assign(node: HTMLElement, props: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean, prevProps?: Record<string, unknown>, skipRef?: boolean): void;
+declare function assign(node: Element, props: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean, prevProps?: Record<string, unknown>, skipRef?: boolean): void;
 /**
  * Create a conditional rendering binding.
  * Efficiently renders one of two branches based on a condition.
@@ -394,8 +394,9 @@ declare function createConditional(condition: () => boolean, renderTrue: () => F
 type KeyFn<T> = (item: T, index: number) => string | number;
 /**
  * Create a reactive list rendering binding with optional keying.
+ * The render callback receives signal accessors for the item and index.
  */
-declare function createList<T>(items: () => T[], renderItem: (item: T, index: number) => FictNode, createElementFn: CreateElementFn, getKey?: KeyFn<T>): BindingHandle;
+declare function createList<T>(items: () => T[], renderItem: (item: SignalAccessor<T>, index: SignalAccessor<number>) => FictNode, createElementFn: CreateElementFn, getKey?: KeyFn<T>): BindingHandle;
 /**
  * Create a show/hide binding that uses CSS display instead of DOM manipulation.
  * More efficient than conditional when the content is expensive to create.
@@ -405,7 +406,9 @@ declare function createList<T>(items: () => T[], renderItem: (item: T, index: nu
  * createShow(container, () => $visible())
  * ```
  */
-declare function createShow(el: HTMLElement, condition: () => boolean, displayValue?: string): void;
+declare function createShow(el: Element & {
+    style: CSSStyleDeclaration;
+}, condition: () => boolean, displayValue?: string): void;
 /**
  * Create a portal that renders content into a different DOM container.
  *
@@ -418,7 +421,7 @@ declare function createShow(el: HTMLElement, condition: () => boolean, displayVa
  * )
  * ```
  */
-declare function createPortal(container: HTMLElement, render: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
+declare function createPortal(container: ParentNode & Node, render: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
 
 interface ReactiveScope {
     run<T>(fn: () => T): T;
@@ -549,7 +552,7 @@ declare function createRoot<T>(fn: () => T): {
  * }
  * ```
  */
-declare function createRef<T extends HTMLElement = HTMLElement>(): RefObject<T>;
+declare function createRef<T extends Element = HTMLElement>(): RefObject<T>;
 
 /**
  * Execute a function with low-priority scheduling.
@@ -1580,7 +1583,7 @@ declare function createKeyedListContainer<T = unknown>(): KeyedListContainer<T>;
  * @param render - Function that creates the DOM nodes and sets up bindings
  * @returns New KeyedBlock
  */
-declare function createKeyedBlock<T>(key: string | number, item: T, index: number, render: (item: SignalAccessor<T>, index: SignalAccessor<number>, key: string | number) => Node[], needsIndex?: boolean): KeyedBlock<T>;
+declare function createKeyedBlock<T>(key: string | number, item: T, index: number, render: (item: SignalAccessor<T>, index: SignalAccessor<number>, key: string | number) => Node[], needsIndex?: boolean, hostRoot?: RootContext): KeyedBlock<T>;
 /**
  * Find the first node after the start marker (for getting current anchor)
  */