@fictjs/runtime 0.0.2

package/dist/index.d.ts

@@ -0,0 +1,1572 @@
+/**
+ * Signal accessor - function to get/set signal value
+ */
+interface SignalAccessor<T> {
+    (): T;
+    (value: T): void;
+}
+/**
+ * Computed accessor - function to get computed value
+ */
+type ComputedAccessor<T> = () => T;
+/**
+ * Create a reactive signal
+ * @param initialValue - The initial value
+ * @returns A signal accessor function
+ */
+declare function signal<T>(initialValue: T): SignalAccessor<T>;
+declare const $state: <T>(value: T) => T;
+/**
+ * Create a selector signal that efficiently updates only when the selected key matches.
+ * Useful for large lists where only one item is selected.
+ *
+ * @param source - The source signal returning the current key
+ * @param equalityFn - Optional equality function
+ * @returns A selector function that takes a key and returns a boolean signal accessor
+ */
+declare function createSelector<T>(source: () => T, equalityFn?: (a: T, b: T) => boolean): (key: T) => boolean;
+
+type Store<T> = T;
+/**
+ * Create a Store: a reactive proxy that allows fine-grained access and mutation.
+ *
+ * @param initialValue - The initial state object
+ * @returns [store, setStore]
+ */
+declare function createStore<T extends object>(initialValue: T): [Store<T>, (fn: (state: T) => void | T) => void];
+
+type Memo<T> = () => T;
+declare function createMemo<T>(fn: () => T): Memo<T>;
+declare const $memo: typeof createMemo;
+
+/** Any DOM node that can be rendered */
+type DOMElement = Node;
+/** Cleanup function type */
+type Cleanup = () => void;
+/** Fict Virtual Node - represents a component or element in the virtual tree */
+interface FictVNode {
+    /** Element type: tag name, Fragment symbol, or component function */
+    type: string | symbol | ((props: Record<string, unknown>) => FictNode);
+    /** Props passed to the element/component */
+    props: Record<string, unknown> | null;
+    /** Optional key for list rendering optimization */
+    key?: string | undefined;
+}
+/**
+ * Fict Node - represents any renderable value
+ * This type covers all possible values that can appear in JSX
+ */
+type FictNode = FictVNode | FictNode[] | Node | string | number | boolean | null | undefined;
+/** Props that all components receive */
+interface BaseProps {
+    /** Optional key for list rendering */
+    key?: string | number;
+    /** Optional children */
+    children?: FictNode | FictNode[];
+}
+/** A Fict component function */
+type Component<P extends Record<string, unknown> = Record<string, unknown>> = (props: P & BaseProps) => FictNode;
+/** Props with children */
+type PropsWithChildren<P = unknown> = P & {
+    children?: FictNode | FictNode[];
+};
+interface ErrorInfo {
+    source: 'render' | 'effect' | 'event' | 'renderChild' | 'cleanup';
+    componentName?: string;
+    eventName?: string;
+}
+/** 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;
+/** Ref object type (for future use with createRef) */
+interface RefObject<T extends HTMLElement = HTMLElement> {
+    current: T | null;
+}
+/** Ref type that can be either callback or object */
+type Ref<T extends HTMLElement = HTMLElement> = RefCallback<T> | RefObject<T>;
+/** CSS style value - can be string or number (number becomes px) */
+type StyleValue = string | number;
+/** CSS style object */
+type CSSStyleObject = {
+    [K in keyof CSSStyleDeclaration]?: StyleValue;
+} & Record<string, StyleValue>;
+/** Style prop type - can be string or object */
+type StyleProp = string | CSSStyleObject | null | undefined;
+/** Class object for conditional classes */
+type ClassObject = Record<string, boolean | undefined | null>;
+/** Class prop type - can be string or object */
+type ClassProp = string | ClassObject | null | undefined;
+interface SuspenseToken {
+    then: Promise<unknown>['then'];
+}
+
+type Effect = () => void | Cleanup;
+declare function createEffect(fn: Effect): () => void;
+declare const $effect: typeof createEffect;
+declare function createRenderEffect(fn: Effect): () => void;
+
+interface HookContext {
+    slots: unknown[];
+    cursor: number;
+}
+declare function __fictUseContext(): HookContext;
+declare function __fictPushContext(): HookContext;
+declare function __fictPopContext(): void;
+declare function __fictResetContext(): void;
+declare function __fictUseSignal<T>(ctx: HookContext, initial: T, slot?: number): SignalAccessor<T>;
+declare function __fictUseMemo<T>(ctx: HookContext, fn: () => T, slot?: number): ComputedAccessor<T>;
+declare function __fictUseEffect(ctx: HookContext, fn: () => void, slot?: number): void;
+declare function __fictRender<T>(ctx: HookContext, fn: () => T): T;
+
+interface VersionedSignalOptions<T> {
+    equals?: (prev: T, next: T) => boolean;
+}
+interface VersionedSignal<T> {
+    /** Reactive read that tracks both the value and version counter */
+    read: () => T;
+    /** Write a new value, forcing a version bump when value is equal */
+    write: (next: T) => void;
+    /** Force a version bump without changing the value */
+    force: () => void;
+    /** Read the current version without creating a dependency */
+    peekVersion: () => number;
+    /** Read the current value without tracking */
+    peekValue: () => T;
+}
+/**
+ * Create a signal wrapper that forces subscribers to update when the same reference is written.
+ *
+ * Useful for compiler-generated keyed list items where updates may reuse the same object reference.
+ */
+declare function createVersionedSignal<T>(initialValue: T, options?: VersionedSignalOptions<T>): VersionedSignal<T>;
+
+/**
+ * @internal
+ * Marks a zero-arg getter so props proxy can lazily evaluate it.
+ * Users normally never call this directly; the compiler injects it.
+ */
+declare function __fictProp<T>(getter: () => T): () => T;
+declare function createPropsProxy<T extends Record<string, unknown>>(props: T): T;
+/**
+ * Create a rest-like props object while preserving prop getters.
+ * Excludes the specified keys from the returned object.
+ */
+declare function __fictPropsRest<T extends Record<string, unknown>>(props: T, exclude: (string | number | symbol)[]): Record<string, unknown>;
+/**
+ * Merge multiple props-like objects while preserving lazy getters.
+ * Later sources override earlier ones.
+ *
+ * Uses lazy lookup strategy - properties are only accessed when read,
+ * avoiding upfront iteration of all keys.
+ */
+type MergeSource<T extends Record<string, unknown>> = T | (() => T);
+declare function mergeProps<T extends Record<string, unknown>>(...sources: (MergeSource<T> | null | undefined)[]): Record<string, unknown>;
+type PropGetter<T> = (() => T) & {
+    __fictProp: true;
+};
+/**
+ * Memoize a prop getter to cache expensive computations.
+ * Use when prop expressions involve heavy calculations.
+ *
+ * @example
+ * ```tsx
+ * // Without useProp - recomputes on every access
+ * <Child data={expensiveComputation(list, filter)} />
+ *
+ * // With useProp - cached until dependencies change, auto-unwrapped by props proxy
+ * const memoizedData = useProp(() => expensiveComputation(list, filter))
+ * <Child data={memoizedData} />
+ * ```
+ */
+declare function useProp<T>(getter: () => T): PropGetter<T>;
+
+type LifecycleFn = () => void | Cleanup;
+interface RootContext {
+    parent?: RootContext | undefined;
+    onMountCallbacks?: LifecycleFn[];
+    cleanups: Cleanup[];
+    destroyCallbacks: Cleanup[];
+    errorHandlers?: ErrorHandler[];
+    suspenseHandlers?: SuspenseHandler[];
+}
+type ErrorHandler = (err: unknown, info?: ErrorInfo) => boolean | void;
+type SuspenseHandler = (token: SuspenseToken | PromiseLike<unknown>) => boolean | void;
+declare function onMount(fn: LifecycleFn): void;
+declare function onDestroy(fn: LifecycleFn): void;
+declare function onCleanup(fn: Cleanup): void;
+declare function createRoot<T>(fn: () => T): {
+    dispose: () => void;
+    value: T;
+};
+
+/**
+ * Create a ref object for DOM element references.
+ *
+ * @returns A ref object with a `current` property initialized to `null`
+ *
+ * @example
+ * ```tsx
+ * import { createRef } from 'fict'
+ *
+ * function Component() {
+ *   const inputRef = createRef<HTMLInputElement>()
+ *
+ *   $effect(() => {
+ *     inputRef.current?.focus()
+ *   })
+ *
+ *   return <input ref={inputRef} />
+ * }
+ * ```
+ */
+declare function createRef<T extends HTMLElement = HTMLElement>(): RefObject<T>;
+
+/**
+ * Execute a function with low-priority scheduling.
+ * Updates triggered inside the callback will be processed after any high-priority updates.
+ * This keeps the UI responsive during expensive operations.
+ *
+ * @param fn - The function to execute in transition context
+ *
+ * @example
+ * ```tsx
+ * const handleInput = (e) => {
+ *   query = e.target.value  // High priority: immediate
+ *   startTransition(() => {
+ *     // Low priority: processed after high priority updates
+ *     filteredItems = allItems.filter(x => x.includes(query))
+ *   })
+ * }
+ * ```
+ */
+declare function startTransition(fn: () => void): void;
+/**
+ * React-style useTransition hook.
+ * Returns a pending signal and a startTransition function.
+ *
+ * @returns A tuple of [isPending accessor, startTransition function]
+ *
+ * @example
+ * ```tsx
+ * function SearchComponent() {
+ *   let query = $state('')
+ *   const [isPending, start] = useTransition()
+ *
+ *   const handleChange = (e) => {
+ *     query = e.target.value
+ *     start(() => {
+ *       // Expensive filtering happens in low priority
+ *       filteredResults = expensiveFilter(allData, query)
+ *     })
+ *   }
+ *
+ *   return (
+ *     <>
+ *       <input value={query} onInput={handleChange} />
+ *       {isPending() && <Spinner />}
+ *       <Results items={filteredResults} />
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+declare function useTransition(): [() => boolean, (fn: () => void) => void];
+/**
+ * Creates a deferred version of a value that updates with low priority.
+ * The returned accessor will lag behind the source value during rapid updates,
+ * allowing high-priority work to complete first.
+ *
+ * @param getValue - Accessor function that returns the source value
+ * @returns Accessor function that returns the deferred value
+ *
+ * @example
+ * ```tsx
+ * function SearchResults({ query }) {
+ *   const deferredQuery = useDeferredValue(() => query)
+ *
+ *   // deferredQuery lags behind query during rapid typing
+ *   const results = expensiveSearch(deferredQuery())
+ *
+ *   return <ResultList items={results} />
+ * }
+ * ```
+ */
+declare function useDeferredValue<T>(getValue: () => T): () => T;
+
+declare function batch<T>(fn: () => T): T;
+declare function untrack<T>(fn: () => T): T;
+
+interface CycleProtectionOptions {
+    maxFlushCyclesPerMicrotask?: number;
+    maxEffectRunsPerFlush?: number;
+    windowSize?: number;
+    highUsageRatio?: number;
+    maxRootReentrantDepth?: number;
+    enableWindowWarning?: boolean;
+    devMode?: boolean;
+}
+declare function setCycleProtectionOptions(opts: CycleProtectionOptions): void;
+
+declare const Fragment: unique symbol;
+declare namespace JSX {
+    type Element = FictNode;
+    interface IntrinsicElements {
+        html: HTMLAttributes<HTMLHtmlElement>;
+        head: HTMLAttributes<HTMLHeadElement>;
+        body: HTMLAttributes<HTMLBodyElement>;
+        title: HTMLAttributes<HTMLTitleElement>;
+        meta: MetaHTMLAttributes<HTMLMetaElement>;
+        link: LinkHTMLAttributes<HTMLLinkElement>;
+        style: StyleHTMLAttributes<HTMLStyleElement>;
+        script: ScriptHTMLAttributes<HTMLScriptElement>;
+        noscript: HTMLAttributes<HTMLElement>;
+        div: HTMLAttributes<HTMLDivElement>;
+        span: HTMLAttributes<HTMLSpanElement>;
+        main: HTMLAttributes<HTMLElement>;
+        header: HTMLAttributes<HTMLElement>;
+        footer: HTMLAttributes<HTMLElement>;
+        section: HTMLAttributes<HTMLElement>;
+        article: HTMLAttributes<HTMLElement>;
+        aside: HTMLAttributes<HTMLElement>;
+        nav: HTMLAttributes<HTMLElement>;
+        address: HTMLAttributes<HTMLElement>;
+        h1: HTMLAttributes<HTMLHeadingElement>;
+        h2: HTMLAttributes<HTMLHeadingElement>;
+        h3: HTMLAttributes<HTMLHeadingElement>;
+        h4: HTMLAttributes<HTMLHeadingElement>;
+        h5: HTMLAttributes<HTMLHeadingElement>;
+        h6: HTMLAttributes<HTMLHeadingElement>;
+        hgroup: HTMLAttributes<HTMLElement>;
+        p: HTMLAttributes<HTMLParagraphElement>;
+        blockquote: BlockquoteHTMLAttributes<HTMLQuoteElement>;
+        pre: HTMLAttributes<HTMLPreElement>;
+        figure: HTMLAttributes<HTMLElement>;
+        figcaption: HTMLAttributes<HTMLElement>;
+        hr: HTMLAttributes<HTMLHRElement>;
+        br: HTMLAttributes<HTMLBRElement>;
+        wbr: HTMLAttributes<HTMLElement>;
+        a: AnchorHTMLAttributes<HTMLAnchorElement>;
+        abbr: HTMLAttributes<HTMLElement>;
+        b: HTMLAttributes<HTMLElement>;
+        bdi: HTMLAttributes<HTMLElement>;
+        bdo: HTMLAttributes<HTMLElement>;
+        cite: HTMLAttributes<HTMLElement>;
+        code: HTMLAttributes<HTMLElement>;
+        data: DataHTMLAttributes<HTMLDataElement>;
+        dfn: HTMLAttributes<HTMLElement>;
+        em: HTMLAttributes<HTMLElement>;
+        i: HTMLAttributes<HTMLElement>;
+        kbd: HTMLAttributes<HTMLElement>;
+        mark: HTMLAttributes<HTMLElement>;
+        q: QuoteHTMLAttributes<HTMLQuoteElement>;
+        rp: HTMLAttributes<HTMLElement>;
+        rt: HTMLAttributes<HTMLElement>;
+        ruby: HTMLAttributes<HTMLElement>;
+        s: HTMLAttributes<HTMLElement>;
+        samp: HTMLAttributes<HTMLElement>;
+        small: HTMLAttributes<HTMLElement>;
+        strong: HTMLAttributes<HTMLElement>;
+        sub: HTMLAttributes<HTMLElement>;
+        sup: HTMLAttributes<HTMLElement>;
+        time: TimeHTMLAttributes<HTMLTimeElement>;
+        u: HTMLAttributes<HTMLElement>;
+        var: HTMLAttributes<HTMLElement>;
+        ul: HTMLAttributes<HTMLUListElement>;
+        ol: OlHTMLAttributes<HTMLOListElement>;
+        li: LiHTMLAttributes<HTMLLIElement>;
+        dl: HTMLAttributes<HTMLDListElement>;
+        dt: HTMLAttributes<HTMLElement>;
+        dd: HTMLAttributes<HTMLElement>;
+        menu: HTMLAttributes<HTMLMenuElement>;
+        table: TableHTMLAttributes<HTMLTableElement>;
+        caption: HTMLAttributes<HTMLTableCaptionElement>;
+        colgroup: ColgroupHTMLAttributes<HTMLTableColElement>;
+        col: ColHTMLAttributes<HTMLTableColElement>;
+        thead: HTMLAttributes<HTMLTableSectionElement>;
+        tbody: HTMLAttributes<HTMLTableSectionElement>;
+        tfoot: HTMLAttributes<HTMLTableSectionElement>;
+        tr: HTMLAttributes<HTMLTableRowElement>;
+        th: ThHTMLAttributes<HTMLTableCellElement>;
+        td: TdHTMLAttributes<HTMLTableCellElement>;
+        form: FormHTMLAttributes<HTMLFormElement>;
+        fieldset: FieldsetHTMLAttributes<HTMLFieldSetElement>;
+        legend: HTMLAttributes<HTMLLegendElement>;
+        label: LabelHTMLAttributes<HTMLLabelElement>;
+        input: InputHTMLAttributes<HTMLInputElement>;
+        button: ButtonHTMLAttributes<HTMLButtonElement>;
+        select: SelectHTMLAttributes<HTMLSelectElement>;
+        datalist: HTMLAttributes<HTMLDataListElement>;
+        optgroup: OptgroupHTMLAttributes<HTMLOptGroupElement>;
+        option: OptionHTMLAttributes<HTMLOptionElement>;
+        textarea: TextareaHTMLAttributes<HTMLTextAreaElement>;
+        output: OutputHTMLAttributes<HTMLOutputElement>;
+        progress: ProgressHTMLAttributes<HTMLProgressElement>;
+        meter: MeterHTMLAttributes<HTMLMeterElement>;
+        details: DetailsHTMLAttributes<HTMLDetailsElement>;
+        summary: HTMLAttributes<HTMLElement>;
+        dialog: DialogHTMLAttributes<HTMLDialogElement>;
+        img: ImgHTMLAttributes<HTMLImageElement>;
+        picture: HTMLAttributes<HTMLPictureElement>;
+        source: SourceHTMLAttributes<HTMLSourceElement>;
+        audio: AudioVideoHTMLAttributes<HTMLAudioElement>;
+        video: AudioVideoHTMLAttributes<HTMLVideoElement>;
+        track: TrackHTMLAttributes<HTMLTrackElement>;
+        map: MapHTMLAttributes<HTMLMapElement>;
+        area: AreaHTMLAttributes<HTMLAreaElement>;
+        iframe: IframeHTMLAttributes<HTMLIFrameElement>;
+        embed: EmbedHTMLAttributes<HTMLEmbedElement>;
+        object: ObjectHTMLAttributes<HTMLObjectElement>;
+        param: ParamHTMLAttributes<HTMLParamElement>;
+        canvas: CanvasHTMLAttributes<HTMLCanvasElement>;
+        svg: SVGAttributes<SVGSVGElement>;
+        path: SVGAttributes<SVGPathElement>;
+        circle: SVGAttributes<SVGCircleElement>;
+        rect: SVGAttributes<SVGRectElement>;
+        line: SVGAttributes<SVGLineElement>;
+        polyline: SVGAttributes<SVGPolylineElement>;
+        polygon: SVGAttributes<SVGPolygonElement>;
+        ellipse: SVGAttributes<SVGEllipseElement>;
+        g: SVGAttributes<SVGGElement>;
+        defs: SVGAttributes<SVGDefsElement>;
+        use: SVGAttributes<SVGUseElement>;
+        text: SVGAttributes<SVGTextElement>;
+        tspan: SVGAttributes<SVGTSpanElement>;
+        template: HTMLAttributes<HTMLTemplateElement>;
+        slot: SlotHTMLAttributes<HTMLSlotElement>;
+        portal: HTMLAttributes<HTMLElement>;
+    }
+    interface ElementChildrenAttribute {
+        children: unknown;
+    }
+}
+interface HTMLAttributes<T> {
+    children?: FictNode | FictNode[];
+    key?: string | number;
+    id?: string;
+    class?: string;
+    style?: string | Record<string, string | number>;
+    title?: string;
+    lang?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    hidden?: boolean | 'hidden' | 'until-found';
+    tabIndex?: number;
+    draggable?: boolean | 'true' | 'false';
+    contentEditable?: boolean | 'true' | 'false' | 'inherit';
+    spellCheck?: boolean | 'true' | 'false';
+    translate?: 'yes' | 'no';
+    inert?: boolean;
+    popover?: 'auto' | 'manual';
+    autofocus?: boolean;
+    slot?: string;
+    accessKey?: string;
+    onClick?: (e: MouseEvent) => void;
+    onDblClick?: (e: MouseEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
+    onMouseUp?: (e: MouseEvent) => void;
+    onMouseMove?: (e: MouseEvent) => void;
+    onMouseEnter?: (e: MouseEvent) => void;
+    onMouseLeave?: (e: MouseEvent) => void;
+    onMouseOver?: (e: MouseEvent) => void;
+    onMouseOut?: (e: MouseEvent) => void;
+    onContextMenu?: (e: MouseEvent) => void;
+    onInput?: (e: InputEvent) => void;
+    onChange?: (e: Event) => void;
+    onSubmit?: (e: SubmitEvent) => void;
+    onReset?: (e: Event) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onKeyUp?: (e: KeyboardEvent) => void;
+    onKeyPress?: (e: KeyboardEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onScroll?: (e: Event) => void;
+    onWheel?: (e: WheelEvent) => void;
+    onLoad?: (e: Event) => void;
+    onError?: (e: Event) => void;
+    onDrag?: (e: DragEvent) => void;
+    onDragStart?: (e: DragEvent) => void;
+    onDragEnd?: (e: DragEvent) => void;
+    onDragEnter?: (e: DragEvent) => void;
+    onDragLeave?: (e: DragEvent) => void;
+    onDragOver?: (e: DragEvent) => void;
+    onDrop?: (e: DragEvent) => void;
+    onTouchStart?: (e: TouchEvent) => void;
+    onTouchMove?: (e: TouchEvent) => void;
+    onTouchEnd?: (e: TouchEvent) => void;
+    onTouchCancel?: (e: TouchEvent) => void;
+    onAnimationStart?: (e: AnimationEvent) => void;
+    onAnimationEnd?: (e: AnimationEvent) => void;
+    onAnimationIteration?: (e: AnimationEvent) => void;
+    onTransitionEnd?: (e: TransitionEvent) => void;
+    onPointerDown?: (e: PointerEvent) => void;
+    onPointerUp?: (e: PointerEvent) => void;
+    onPointerMove?: (e: PointerEvent) => void;
+    onPointerEnter?: (e: PointerEvent) => void;
+    onPointerLeave?: (e: PointerEvent) => void;
+    onPointerOver?: (e: PointerEvent) => void;
+    onPointerOut?: (e: PointerEvent) => void;
+    onPointerCancel?: (e: PointerEvent) => void;
+    ref?: ((el: T | null) => void) | {
+        current: T | null;
+    };
+    role?: string;
+    'aria-hidden'?: boolean | 'true' | 'false';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-live'?: 'off' | 'polite' | 'assertive';
+    'aria-atomic'?: boolean | 'true' | 'false';
+    'aria-busy'?: boolean | 'true' | 'false';
+    'aria-current'?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time';
+    'aria-disabled'?: boolean | 'true' | 'false';
+    'aria-expanded'?: boolean | 'true' | 'false';
+    'aria-haspopup'?: boolean | 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';
+    'aria-selected'?: boolean | 'true' | 'false';
+    'aria-checked'?: boolean | 'true' | 'false' | 'mixed';
+    'aria-controls'?: string;
+    'aria-owns'?: string;
+    'aria-activedescendant'?: string;
+    'aria-valuemin'?: number;
+    'aria-valuemax'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    'aria-readonly'?: boolean | 'true' | 'false';
+    'aria-required'?: boolean | 'true' | 'false';
+    'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling';
+    'aria-errormessage'?: string;
+    'aria-modal'?: boolean | 'true' | 'false';
+    'aria-placeholder'?: string;
+    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colspan'?: number;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowspan'?: number;
+    'aria-setsize'?: number;
+    'aria-posinset'?: number;
+    'aria-level'?: number;
+    'aria-multiselectable'?: boolean | 'true' | 'false';
+    'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both';
+    'aria-details'?: string;
+    'aria-keyshortcuts'?: string;
+    'aria-roledescription'?: string;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+}
+interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
+    href?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top' | string;
+    rel?: string;
+    download?: boolean | string;
+    hreflang?: string;
+    type?: string;
+    referrerPolicy?: ReferrerPolicy;
+    ping?: string;
+}
+interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    popovertarget?: string;
+    popovertargetaction?: 'show' | 'hide' | 'toggle';
+}
+interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+    type?: string;
+    value?: string | number | readonly string[];
+    defaultValue?: string | number | readonly string[];
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    readonly?: boolean;
+    multiple?: boolean;
+    min?: number | string;
+    max?: number | string;
+    minLength?: number;
+    maxLength?: number;
+    step?: number | string;
+    pattern?: string;
+    size?: number;
+    accept?: string;
+    capture?: boolean | 'user' | 'environment';
+    list?: string;
+    autoComplete?: string;
+    autoCapitalize?: string;
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    height?: number | string;
+    width?: number | string;
+    alt?: string;
+    src?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+}
+interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
+    action?: string;
+    method?: 'get' | 'post' | 'dialog';
+    encType?: string;
+    target?: string;
+    name?: string;
+    noValidate?: boolean;
+    autoComplete?: 'on' | 'off';
+    acceptCharset?: string;
+}
+interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+    src?: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    srcSet?: string;
+    sizes?: string;
+    loading?: 'eager' | 'lazy';
+    decoding?: 'async' | 'auto' | 'sync';
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    referrerPolicy?: ReferrerPolicy;
+    useMap?: string;
+    isMap?: boolean;
+    fetchPriority?: 'auto' | 'high' | 'low';
+}
+interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
+    value?: string | number;
+    defaultValue?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    readonly?: boolean;
+    rows?: number;
+    cols?: number;
+    minLength?: number;
+    maxLength?: number;
+    wrap?: 'hard' | 'soft' | 'off';
+    autoComplete?: string;
+}
+interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
+    value?: string | number | readonly string[];
+    defaultValue?: string | number | readonly string[];
+    disabled?: boolean;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    multiple?: boolean;
+    size?: number;
+    autoComplete?: string;
+}
+interface OptionHTMLAttributes<T> extends HTMLAttributes<T> {
+    value?: string | number;
+    disabled?: boolean;
+    selected?: boolean;
+    label?: string;
+}
+interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> {
+    disabled?: boolean;
+    label?: string;
+}
+interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
+    for?: string;
+    htmlFor?: string;
+    form?: string;
+}
+interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> {
+    disabled?: boolean;
+    name?: string;
+    form?: string;
+}
+interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
+    for?: string;
+    htmlFor?: string;
+    form?: string;
+    name?: string;
+}
+interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {
+    value?: number | string;
+    max?: number | string;
+}
+interface MeterHTMLAttributes<T> extends HTMLAttributes<T> {
+    value?: number | string;
+    min?: number | string;
+    max?: number | string;
+    low?: number | string;
+    high?: number | string;
+    optimum?: number | string;
+}
+interface TableHTMLAttributes<T> extends HTMLAttributes<T> {
+    cellPadding?: number | string;
+    cellSpacing?: number | string;
+    border?: number | string;
+}
+interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
+    colSpan?: number;
+    rowSpan?: number;
+    scope?: 'row' | 'col' | 'rowgroup' | 'colgroup';
+    abbr?: string;
+    headers?: string;
+}
+interface TdHTMLAttributes<T> extends HTMLAttributes<T> {
+    colSpan?: number;
+    rowSpan?: number;
+    headers?: string;
+}
+interface ColHTMLAttributes<T> extends HTMLAttributes<T> {
+    span?: number;
+}
+interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {
+    span?: number;
+}
+interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
+    start?: number;
+    reversed?: boolean;
+    type?: '1' | 'a' | 'A' | 'i' | 'I';
+}
+interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
+    value?: number;
+}
+interface AudioVideoHTMLAttributes<T> extends HTMLAttributes<T> {
+    src?: string;
+    controls?: boolean;
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    poster?: string;
+    width?: number | string;
+    height?: number | string;
+    playsInline?: boolean;
+    disableRemotePlayback?: boolean;
+    onPlay?: (e: Event) => void;
+    onPause?: (e: Event) => void;
+    onEnded?: (e: Event) => void;
+    onTimeUpdate?: (e: Event) => void;
+    onVolumeChange?: (e: Event) => void;
+    onSeeking?: (e: Event) => void;
+    onSeeked?: (e: Event) => void;
+    onLoadedData?: (e: Event) => void;
+    onLoadedMetadata?: (e: Event) => void;
+    onCanPlay?: (e: Event) => void;
+    onCanPlayThrough?: (e: Event) => void;
+    onWaiting?: (e: Event) => void;
+    onPlaying?: (e: Event) => void;
+    onProgress?: (e: Event) => void;
+    onDurationChange?: (e: Event) => void;
+    onRateChange?: (e: Event) => void;
+    onStalled?: (e: Event) => void;
+    onSuspend?: (e: Event) => void;
+    onEmptied?: (e: Event) => void;
+}
+interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+    src?: string;
+    srcSet?: string;
+    sizes?: string;
+    type?: string;
+    media?: string;
+    width?: number | string;
+    height?: number | string;
+}
+interface TrackHTMLAttributes<T> extends HTMLAttributes<T> {
+    src?: string;
+    srcLang?: string;
+    label?: string;
+    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+    default?: boolean;
+}
+interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
+    src?: string;
+    srcDoc?: string;
+    name?: string;
+    width?: number | string;
+    height?: number | string;
+    allow?: string;
+    allowFullScreen?: boolean;
+    sandbox?: string;
+    loading?: 'eager' | 'lazy';
+    referrerPolicy?: ReferrerPolicy;
+}
+interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
+    src?: string;
+    type?: string;
+    width?: number | string;
+    height?: number | string;
+}
+interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> {
+    data?: string;
+    type?: string;
+    name?: string;
+    width?: number | string;
+    height?: number | string;
+    form?: string;
+    useMap?: string;
+}
+interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
+    name?: string;
+    value?: string;
+}
+interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
+    width?: number | string;
+    height?: number | string;
+}
+interface MapHTMLAttributes<T> extends HTMLAttributes<T> {
+    name?: string;
+}
+interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
+    alt?: string;
+    coords?: string;
+    href?: string;
+    hreflang?: string;
+    download?: boolean | string;
+    rel?: string;
+    shape?: 'rect' | 'circle' | 'poly' | 'default';
+    target?: string;
+    referrerPolicy?: ReferrerPolicy;
+    ping?: string;
+}
+interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
+    open?: boolean;
+    onToggle?: (e: Event) => void;
+}
+interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
+    open?: boolean;
+    onClose?: (e: Event) => void;
+    onCancel?: (e: Event) => void;
+}
+interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {
+    cite?: string;
+}
+interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> {
+    cite?: string;
+}
+interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {
+    dateTime?: string;
+}
+interface DataHTMLAttributes<T> extends HTMLAttributes<T> {
+    value?: string;
+}
+interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
+    name?: string;
+    content?: string;
+    httpEquiv?: string;
+    charSet?: string;
+    property?: string;
+}
+interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
+    href?: string;
+    rel?: string;
+    type?: string;
+    media?: string;
+    as?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    referrerPolicy?: ReferrerPolicy;
+    sizes?: string;
+    hreflang?: string;
+    integrity?: string;
+    fetchPriority?: 'auto' | 'high' | 'low';
+    disabled?: boolean;
+}
+interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
+    media?: string;
+    nonce?: string;
+    blocking?: string;
+}
+interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {
+    src?: string;
+    type?: string;
+    async?: boolean;
+    defer?: boolean;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    integrity?: string;
+    noModule?: boolean;
+    nonce?: string;
+    referrerPolicy?: ReferrerPolicy;
+    fetchPriority?: 'auto' | 'high' | 'low';
+    blocking?: string;
+}
+interface SlotHTMLAttributes<T> extends HTMLAttributes<T> {
+    name?: string;
+    onSlotchange?: (e: Event) => void;
+}
+interface SVGAttributes<T> extends HTMLAttributes<T> {
+    viewBox?: string;
+    xmlns?: string;
+    xmlnsXlink?: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: string | number;
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel';
+    strokeDasharray?: string;
+    strokeDashoffset?: string | number;
+    strokeOpacity?: string | number;
+    fillOpacity?: string | number;
+    opacity?: string | number;
+    transform?: string;
+    transformOrigin?: string;
+    clipPath?: string;
+    mask?: string;
+    filter?: string;
+    d?: string;
+    cx?: string | number;
+    cy?: string | number;
+    r?: string | number;
+    rx?: string | number;
+    ry?: string | number;
+    x?: string | number;
+    y?: string | number;
+    x1?: string | number;
+    y1?: string | number;
+    x2?: string | number;
+    y2?: string | number;
+    width?: string | number;
+    height?: string | number;
+    points?: string;
+    pathLength?: string | number;
+    textAnchor?: 'start' | 'middle' | 'end';
+    dominantBaseline?: string;
+    dx?: string | number;
+    dy?: string | number;
+    fontSize?: string | number;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    href?: string;
+    xlinkHref?: string;
+    gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
+    gradientTransform?: string;
+    spreadMethod?: 'pad' | 'reflect' | 'repeat';
+    offset?: string | number;
+    stopColor?: string;
+    stopOpacity?: string | number;
+    clipPathUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
+    maskUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
+    maskContentUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
+    preserveAspectRatio?: string;
+    markerStart?: string;
+    markerMid?: string;
+    markerEnd?: string;
+    vectorEffect?: string;
+}
+
+/**
+ * Fict Reactive DOM Binding System
+ *
+ * This module provides the core mechanisms for reactive DOM updates.
+ * It bridges the gap between Fict's reactive system (signals, effects)
+ * and the DOM, enabling fine-grained updates without a virtual DOM.
+ *
+ * Design Philosophy:
+ * - Values wrapped in functions `() => T` are treated as reactive
+ * - Static values are applied once without tracking
+ * - The compiler transforms JSX expressions to use these primitives
+ */
+
+/** A reactive value that can be either static or a getter function */
+type MaybeReactive<T> = T | (() => T);
+/** Internal type for createElement function reference */
+type CreateElementFn = (node: FictNode) => Node;
+/** Handle returned by conditional/list bindings for cleanup */
+interface BindingHandle {
+    /** Marker node(s) used for positioning */
+    marker: Comment | DocumentFragment;
+    /** Flush pending content - call after markers are inserted into DOM */
+    flush?: () => void;
+    /** Dispose function to clean up the binding */
+    dispose: Cleanup;
+}
+/**
+ * Check if a value is reactive (a getter function)
+ * Note: Event handlers (functions that take arguments) are NOT reactive values
+ */
+declare function isReactive(value: unknown): value is () => unknown;
+/**
+ * Unwrap a potentially reactive value to get the actual value
+ */
+declare function unwrap<T>(value: MaybeReactive<T>): T;
+/**
+ * Unwrap a primitive proxy value to get the raw primitive value.
+ * This is primarily useful for advanced scenarios where you need the actual
+ * primitive type (e.g., for typeof checks or strict equality comparisons).
+ *
+ * @param value - A potentially proxied primitive value
+ * @returns The raw primitive value
+ *
+ * @example
+ * ```ts
+ * createList(
+ *   () => [1, 2, 3],
+ *   (item) => {
+ *     const raw = unwrapPrimitive(item)
+ *     typeof raw === 'number'  // true
+ *     raw === 1  // true (for first item)
+ *   },
+ *   item => item
+ * )
+ * ```
+ */
+declare function unwrapPrimitive<T>(value: T): T;
+/**
+ * Create a text node that reactively updates when the value changes.
+ *
+ * @example
+ * ```ts
+ * // Static text
+ * createTextBinding("Hello")
+ *
+ * // Reactive text (compiler output)
+ * createTextBinding(() => $count())
+ * ```
+ */
+declare function createTextBinding(value: MaybeReactive<unknown>): Text;
+/**
+ * Bind a reactive value to an existing text node.
+ * This is a convenience function for binding to existing DOM nodes.
+ */
+declare function bindText(textNode: Text, getValue: () => unknown): Cleanup;
+/** Attribute setter function type */
+type AttributeSetter = (el: HTMLElement, key: string, value: unknown) => void;
+/**
+ * Create a reactive attribute binding on an element.
+ *
+ * @example
+ * ```ts
+ * // Static attribute
+ * createAttributeBinding(button, 'disabled', false, setAttribute)
+ *
+ * // Reactive attribute (compiler output)
+ * createAttributeBinding(button, 'disabled', () => !$isValid(), setAttribute)
+ * ```
+ */
+declare function createAttributeBinding(el: HTMLElement, 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;
+/**
+ * Bind a reactive value to an element's property.
+ */
+declare function bindProperty(el: HTMLElement, 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;
+/**
+ * Bind a reactive style value to an existing element.
+ */
+declare function bindStyle(el: HTMLElement, 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;
+/**
+ * Bind a reactive class value to an existing element.
+ */
+declare function bindClass(el: HTMLElement, 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>;
+/**
+ * Insert reactive content into a parent element.
+ * This is a simpler API than createChildBinding for basic cases.
+ *
+ * @param parent - The parent element to insert into
+ * @param getValue - Function that returns the value to render
+ * @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;
+/**
+ * Create a reactive child binding that updates when the child value changes.
+ * This is used for dynamic expressions like `{show && <Modal />}` or `{items.map(...)}`.
+ *
+ * @example
+ * ```ts
+ * // Reactive child (compiler output for {count})
+ * createChildBinding(parent, () => $count(), createElement)
+ *
+ * // Reactive conditional (compiler output for {show && <Modal />})
+ * createChildBinding(parent, () => $show() && jsx(Modal, {}), createElement)
+ * ```
+ */
+declare function createChildBinding(parent: HTMLElement | DocumentFragment, getValue: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
+declare global {
+    interface HTMLElement {
+        _$host?: HTMLElement;
+        [key: `$$${string}`]: EventListener | [EventListener, unknown] | undefined;
+        [key: `$$${string}Data`]: unknown;
+    }
+    interface Document extends Record<string, unknown> {
+    }
+}
+/**
+ * Initialize event delegation for a set of event names.
+ * Events will be handled at the document level and dispatched to the appropriate handlers.
+ *
+ * @param eventNames - Array of event names to delegate
+ * @param doc - The document to attach handlers to (default: window.document)
+ *
+ * @example
+ * ```ts
+ * // Called automatically by the compiler for delegated events
+ * delegateEvents(['click', 'input', 'keydown'])
+ * ```
+ */
+declare function delegateEvents(eventNames: string[], doc?: Document): void;
+/**
+ * Clear all delegated event handlers from a document.
+ *
+ * @param doc - The document to clear handlers from (default: window.document)
+ */
+declare function clearDelegatedEvents(doc?: Document): void;
+/**
+ * Add an event listener to an element.
+ * If the event is in DelegatedEvents, it uses event delegation for better performance.
+ *
+ * @param node - The element to add the listener to
+ * @param name - The event name (lowercase)
+ * @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;
+/**
+ * Bind an event listener to an element.
+ * Uses event delegation for better performance when applicable.
+ *
+ * @example
+ * ```ts
+ * // Static event
+ * bindEvent(button, 'click', handleClick)
+ *
+ * // Reactive event (compiler output)
+ * bindEvent(button, 'click', () => $handler())
+ *
+ * // With modifiers
+ * 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;
+/**
+ * Bind a ref to an element.
+ * Supports both callback refs and ref objects.
+ *
+ * @param el - The element to bind the ref to
+ * @param ref - Either a callback function, a ref object, or a reactive getter
+ * @returns Cleanup function
+ *
+ * @example
+ * ```ts
+ * // Callback ref
+ * bindRef(el, (element) => { store.input = element })
+ *
+ * // Ref object
+ * const inputRef = createRef()
+ * bindRef(el, inputRef)
+ *
+ * // Reactive ref (compiler output)
+ * bindRef(el, () => props.ref)
+ * ```
+ */
+declare function bindRef(el: HTMLElement, ref: unknown): Cleanup;
+/**
+ * Apply spread props to an element with reactive updates.
+ * This handles dynamic spread like `<div {...props}>`.
+ *
+ * @param node - The element to apply props to
+ * @param props - The props object (may have reactive getters)
+ * @param isSVG - Whether this is an SVG element
+ * @param skipChildren - Whether to skip children handling
+ * @returns The previous props for tracking changes
+ *
+ * @example
+ * ```ts
+ * // Compiler output for <div {...props} />
+ * spread(el, props, false, false)
+ * ```
+ */
+declare function spread(node: HTMLElement, 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.
+ *
+ * @param node - The element to assign props to
+ * @param props - New props object
+ * @param isSVG - Whether this is an SVG element
+ * @param skipChildren - Whether to skip children handling
+ * @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;
+/**
+ * Create a conditional rendering binding.
+ * Efficiently renders one of two branches based on a condition.
+ *
+ * This is an optimized version for `{condition ? <A /> : <B />}` patterns
+ * where both branches are known statically.
+ *
+ * @example
+ * ```ts
+ * // Compiler output for {show ? <A /> : <B />}
+ * createConditional(
+ *   () => $show(),
+ *   () => jsx(A, {}),
+ *   () => jsx(B, {}),
+ *   createElement
+ * )
+ * ```
+ */
+declare function createConditional(condition: () => boolean, renderTrue: () => FictNode, createElementFn: CreateElementFn, renderFalse?: () => FictNode): BindingHandle;
+/** Key extractor function type */
+type KeyFn<T> = (item: T, index: number) => string | number;
+/**
+ * Create a reactive list rendering binding with optional keying.
+ */
+declare function createList<T>(items: () => T[], renderItem: (item: T, index: 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.
+ *
+ * @example
+ * ```ts
+ * createShow(container, () => $visible())
+ * ```
+ */
+declare function createShow(el: HTMLElement, condition: () => boolean, displayValue?: string): void;
+/**
+ * Create a portal that renders content into a different DOM container.
+ *
+ * @example
+ * ```ts
+ * createPortal(
+ *   document.body,
+ *   () => jsx(Modal, { children: 'Hello' }),
+ *   createElement
+ * )
+ * ```
+ */
+declare function createPortal(container: HTMLElement, render: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
+
+/**
+ * Fict DOM Rendering System
+ *
+ * This module provides DOM rendering capabilities with reactive bindings.
+ * It transforms JSX virtual nodes into actual DOM elements, automatically
+ * setting up reactive updates for dynamic values.
+ *
+ * Key Features:
+ * - Reactive text content: `{count}` updates when count changes
+ * - Reactive attributes: `disabled={!isValid}` updates reactively
+ * - Reactive children: `{show && <Modal />}` handles conditionals
+ * - List rendering: `{items.map(...)}` with efficient keyed updates
+ */
+
+/**
+ * Render a Fict view into a container element.
+ *
+ * @param view - A function that returns the view to render
+ * @param container - The DOM container to render into
+ * @returns A teardown function to unmount the view
+ *
+ * @example
+ * ```ts
+ * const unmount = render(() => <App />, document.getElementById('root')!)
+ * // Later: unmount()
+ * ```
+ */
+declare function render(view: () => FictNode, container: HTMLElement): () => void;
+/**
+ * Create a DOM element from a Fict node.
+ * This is the main entry point for converting virtual nodes to real DOM.
+ *
+ * Supports:
+ * - Native DOM nodes (passed through)
+ * - Null/undefined/false (empty text node)
+ * - Arrays (DocumentFragment)
+ * - Strings/numbers (text nodes)
+ * - Booleans (empty text node)
+ * - VNodes (components or HTML elements)
+ * - Reactive values (functions returning any of the above)
+ */
+declare function createElement(node: FictNode): DOMElement;
+/**
+ * Create a template cloning factory from an HTML string.
+ * Used by the compiler for efficient DOM generation.
+ *
+ * @param html - The HTML string to create a template from
+ * @param isImportNode - Use importNode for elements like img/iframe
+ * @param isSVG - Whether the template is SVG content
+ * @param isMathML - Whether the template is MathML content
+ */
+declare function template(html: string, isImportNode?: boolean, isSVG?: boolean, isMathML?: boolean): () => Node;
+
+interface ErrorBoundaryProps extends BaseProps {
+    fallback: FictNode | ((err: unknown) => FictNode);
+    onError?: (err: unknown) => void;
+    resetKeys?: unknown | (() => unknown);
+}
+declare function ErrorBoundary(props: ErrorBoundaryProps): FictNode;
+
+interface SuspenseProps extends BaseProps {
+    fallback: FictNode | ((err?: unknown) => FictNode);
+    onResolve?: () => void;
+    onReject?: (err: unknown) => void;
+    resetKeys?: unknown | (() => unknown);
+}
+interface SuspenseHandle {
+    token: SuspenseToken;
+    resolve: () => void;
+    reject: (err: unknown) => void;
+}
+declare function createSuspenseToken(): SuspenseHandle;
+declare function Suspense(props: SuspenseProps): FictNode;
+
+/**
+ * Fict DOM Constants
+ *
+ * Property constants and configurations for DOM attribute handling.
+ * Borrowed from dom-expressions for comprehensive DOM support.
+ */
+declare const BooleanAttributes: Set<string>;
+/**
+ * Properties that should be set via DOM property (not attribute)
+ * Includes camelCase versions of boolean attributes
+ */
+declare const Properties: Set<string>;
+/**
+ * Properties that represent children/content
+ */
+declare const ChildProperties: Set<string>;
+/**
+ * React compatibility aliases (className -> class)
+ */
+declare const Aliases: Record<string, string>;
+/**
+ * Get the property alias for a given attribute and tag name
+ */
+declare function getPropAlias(prop: string, tagName: string): string | undefined;
+/**
+ * Events that should use event delegation for performance
+ * These events bubble and are commonly used across many elements
+ */
+declare const DelegatedEvents: Set<string>;
+/**
+ * SVG element names (excluding common ones that overlap with HTML)
+ */
+declare const SVGElements: Set<string>;
+/**
+ * SVG attribute namespaces
+ */
+declare const SVGNamespace: Record<string, string>;
+/**
+ * CSS properties that don't need a unit (like 'px')
+ */
+declare const UnitlessStyles: Set<string>;
+
+/**
+ * Fict DOM Reconciliation
+ *
+ * Efficient array reconciliation algorithm based on udomdiff.
+ * https://github.com/WebReflection/udomdiff
+ *
+ * This algorithm uses a 5-step strategy:
+ * 1. Common prefix - skip matching nodes at start
+ * 2. Common suffix - skip matching nodes at end
+ * 3. Append - insert remaining new nodes
+ * 4. Remove - remove remaining old nodes
+ * 5. Swap/Map fallback - handle complex rearrangements
+ *
+ * Most real-world updates (95%+) use fast paths without building a Map.
+ */
+/**
+ * Reconcile two arrays of DOM nodes, efficiently updating the DOM.
+ *
+ * @param parentNode - The parent element containing the nodes
+ * @param a - The old array of nodes (currently in DOM)
+ * @param b - The new array of nodes (target state)
+ *
+ * @example
+ * ```ts
+ * const oldNodes = [node1, node2, node3]
+ * const newNodes = [node1, node4, node3]  // node2 replaced with node4
+ * reconcileArrays(parent, oldNodes, newNodes)
+ * ```
+ */
+declare function reconcileArrays(parentNode: ParentNode, a: Node[], b: Node[]): void;
+
+interface FictDevtoolsHook {
+    registerSignal: (id: number, value: unknown) => void;
+    updateSignal: (id: number, value: unknown) => void;
+    registerEffect: (id: number) => void;
+    effectRun: (id: number) => void;
+    cycleDetected?: (payload: {
+        reason: string;
+        detail?: Record<string, unknown>;
+    }) => void;
+}
+declare function getDevtoolsHook(): FictDevtoolsHook | undefined;
+
+/**
+ * Low-level DOM node helpers shared across runtime modules.
+ * Keep this file dependency-free to avoid module cycles.
+ */
+/**
+ * Convert a value to a flat array of DOM nodes.
+ * Defensively handles proxies and non-DOM values.
+ */
+declare function toNodeArray(node: Node | Node[] | unknown): Node[];
+/**
+ * Insert nodes before an anchor node, preserving order.
+ * Uses DocumentFragment for batch insertion when inserting multiple nodes.
+ */
+declare function insertNodesBefore(parent: ParentNode & Node, nodes: Node[], anchor: Node | null): void;
+/**
+ * Remove an array of nodes from the DOM.
+ */
+declare function removeNodes(nodes: Node[]): void;
+
+/**
+ * List Helpers for Compiler-Generated Fine-Grained Updates
+ *
+ * These helpers are used by the compiler to generate efficient keyed list rendering.
+ * They provide low-level primitives for DOM node manipulation without rebuilding.
+ */
+
+/**
+ * A keyed block represents a single item in a list with its associated DOM nodes and state
+ */
+interface KeyedBlock<T = unknown> {
+    /** Unique key for this block */
+    key: string | number;
+    /** DOM nodes belonging to this block */
+    nodes: Node[];
+    /** Root context for lifecycle management */
+    root: RootContext;
+    /** Signal containing the current item value */
+    item: SignalAccessor<T>;
+    /** Signal containing the current index */
+    index: SignalAccessor<number>;
+    /** Last raw item value assigned to this block */
+    rawItem: T;
+    /** Last raw index value assigned to this block */
+    rawIndex: number;
+}
+/**
+ * Container for managing keyed list blocks
+ */
+interface KeyedListContainer<T = unknown> {
+    /** Start marker comment node */
+    startMarker: Comment;
+    /** End marker comment node */
+    endMarker: Comment;
+    /** Map of key to block */
+    blocks: Map<string | number, KeyedBlock<T>>;
+    /** Scratch map reused for the next render */
+    nextBlocks: Map<string | number, KeyedBlock<T>>;
+    /** Current nodes in DOM order (including markers) */
+    currentNodes: Node[];
+    /** Next-frame node buffer to avoid reallocations */
+    nextNodes: Node[];
+    /** Ordered blocks in current DOM order */
+    orderedBlocks: KeyedBlock<T>[];
+    /** Next-frame ordered block buffer to avoid reallocations */
+    nextOrderedBlocks: KeyedBlock<T>[];
+    /** Track position of keys in the ordered buffer to handle duplicates */
+    orderedIndexByKey: Map<string | number, number>;
+    /** Cleanup function */
+    dispose: () => void;
+}
+/**
+ * Binding handle returned by createKeyedList for compiler-generated code
+ */
+interface KeyedListBinding {
+    /** Document fragment placeholder inserted by the compiler/runtime */
+    marker: DocumentFragment;
+    /** Start marker comment node */
+    startMarker: Comment;
+    /** End marker comment node */
+    endMarker: Comment;
+    /** Flush pending items - call after markers are inserted into DOM */
+    flush?: () => void;
+    /** Cleanup function */
+    dispose: () => void;
+}
+type FineGrainedRenderItem<T> = (itemSig: SignalAccessor<T>, indexSig: SignalAccessor<number>, key: string | number) => Node[];
+/**
+ * A block identified by start/end comment markers.
+ */
+interface MarkerBlock {
+    start: Comment;
+    end: Comment;
+    root?: RootContext;
+}
+/**
+ * Move nodes to a position before the anchor node.
+ * This is optimized to avoid unnecessary DOM operations.
+ *
+ * @param parent - Parent node to move nodes within
+ * @param nodes - Array of nodes to move
+ * @param anchor - Node to insert before (or null for end)
+ */
+declare function moveNodesBefore(parent: Node, nodes: Node[], anchor: Node | null): void;
+/**
+ * Remove an array of nodes from the DOM
+ *
+ * @param nodes - Array of nodes to remove
+ */
+/**
+ * Move an entire marker-delimited block (including markers) before the anchor.
+ */
+declare function moveMarkerBlock(parent: Node, block: MarkerBlock, anchor: Node | null): void;
+/**
+ * Destroy a marker-delimited block, removing nodes and destroying the associated root.
+ */
+declare function destroyMarkerBlock(block: MarkerBlock): void;
+/**
+ * Create a container for managing a keyed list.
+ * This sets up the marker nodes and provides cleanup.
+ *
+ * @returns Container object with markers, blocks map, and dispose function
+ */
+declare function createKeyedListContainer<T = unknown>(): KeyedListContainer<T>;
+/**
+ * Create a new keyed block with the given render function
+ *
+ * @param key - Unique key for this block
+ * @param item - Initial item value
+ * @param index - Initial index
+ * @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>;
+/**
+ * Find the first node after the start marker (for getting current anchor)
+ */
+declare function getFirstNodeAfter(marker: Comment): Node | null;
+/**
+ * Check if a node is between two markers
+ */
+declare function isNodeBetweenMarkers(node: Node, startMarker: Comment, endMarker: Comment): boolean;
+/**
+ * Create a keyed list binding with automatic diffing and DOM updates.
+ * This is used by compiler-generated code for efficient list rendering.
+ *
+ * @param getItems - Function that returns the current array of items
+ * @param keyFn - Function to extract unique key from each item
+ * @param renderItem - Function that creates DOM nodes for each item
+ * @returns Binding handle with markers and dispose function
+ */
+declare function createKeyedList<T>(getItems: () => T[], keyFn: (item: T, index: number) => string | number, renderItem: FineGrainedRenderItem<T>, needsIndex?: boolean): KeyedListBinding;
+
+export { $effect, $memo, $state, Aliases, type AttributeSetter, type BaseProps, type BindingHandle, BooleanAttributes, ChildProperties, type ClassProp, type Cleanup, type Component, type CreateElementFn, type DOMElement, DelegatedEvents, type Effect, ErrorBoundary, type ErrorInfo, type EventHandler, type FictDevtoolsHook, type FictNode, type FictVNode, Fragment, JSX, type KeyFn, type KeyedBlock, type KeyedListBinding, type KeyedListContainer, type MarkerBlock, type MaybeReactive, type Memo, Properties, type PropsWithChildren, type Ref, type RefCallback, type RefObject, SVGElements, SVGNamespace, type SignalAccessor as Signal, type Store, type StyleProp, Suspense, type SuspenseToken, UnitlessStyles, type VersionedSignal, type VersionedSignalOptions, __fictPopContext, __fictProp, __fictPropsRest, __fictPushContext, __fictRender, __fictResetContext, __fictUseContext, __fictUseEffect, __fictUseMemo, __fictUseSignal, addEventListener, assign, batch, bindAttribute, bindClass, bindEvent, bindProperty, bindRef, bindStyle, bindText, classList, clearDelegatedEvents, createAttributeBinding, createChildBinding, createClassBinding, createConditional, createEffect, createElement, createKeyedBlock, createKeyedList, createKeyedListContainer, createList, createMemo, createPortal, createPropsProxy, createRef, createRenderEffect, createRoot, createSelector, createShow, signal as createSignal, createStore, createStyleBinding, createSuspenseToken, createTextBinding, createVersionedSignal, delegateEvents, destroyMarkerBlock, getDevtoolsHook, getFirstNodeAfter, getPropAlias, insert, insertNodesBefore, isNodeBetweenMarkers, isReactive, mergeProps, moveMarkerBlock, moveNodesBefore, onCleanup, onDestroy, onMount, __fictProp as prop, reconcileArrays, removeNodes, render, setCycleProtectionOptions, spread, startTransition, template, toNodeArray, untrack, unwrap, unwrapPrimitive, useDeferredValue, useProp, useTransition };