fynixui 1.0.10 → 1.0.12

package/dist/runtime.js

@@ -22,10 +22,62 @@ import { nixRef } from "./hooks/nixRef";
 import { nixState } from "./hooks/nixState";
 import { nixStore } from "./hooks/nixStore";
 import createFynix from "./router/router";
+function shallowEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b || typeof a !== "object" || typeof b !== "object")
+        return false;
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    return keysA.every((k) => a[k] === b[k]);
+}
+let batchingStorage = null;
+try {
+    if (typeof globalThis.AsyncLocalStorage !== "undefined") {
+        batchingStorage = new globalThis.AsyncLocalStorage();
+    }
+}
+catch {
+}
+export function batchUpdates(fn) {
+    const store = batchingStorage?.getStore();
+    const isBatching = store?.isBatching ?? false;
+    if (isBatching) {
+        fn();
+        return;
+    }
+    const newStore = { isBatching: true, callbacks: [] };
+    const run = () => {
+        try {
+            fn();
+        }
+        finally {
+            const callbacks = newStore.callbacks;
+            newStore.isBatching = false;
+            if (callbacks.length > 0)
+                scheduler.executeBatchedCallbacks(callbacks);
+        }
+    };
+    if (batchingStorage) {
+        batchingStorage.run(newStore, run);
+    }
+    else {
+        run();
+    }
+}
+export function isCurrentlyBatching() {
+    const store = batchingStorage?.getStore();
+    return store?.isBatching ?? false;
+}
+function getCurrentBatchStore() {
+    return batchingStorage?.getStore() ?? null;
+}
 class SimplePriorityQueue {
     constructor() {
-        this.items = [];
-        this.priorityOrder = {
+        this.heap = [];
+        this.order = {
             immediate: 0,
             high: 1,
             normal: 2,
@@ -33,21 +85,76 @@ class SimplePriorityQueue {
             idle: 4,
         };
     }
+    cmp(a, b) {
+        return this.order[a.priority] - this.order[b.priority];
+    }
+    siftUp(i) {
+        if (i < 0 || i >= this.heap.length)
+            return;
+        while (i > 0) {
+            const p = (i - 1) >> 1;
+            if (p < 0 || p >= this.heap.length)
+                break;
+            if (this.cmp(this.heap[i], this.heap[p]) < 0) {
+                [this.heap[i], this.heap[p]] = [this.heap[p], this.heap[i]];
+                i = p;
+            }
+            else
+                break;
+        }
+    }
+    siftDown(i) {
+        const n = this.heap.length;
+        if (i < 0 || i >= n)
+            return;
+        while (true) {
+            let s = i;
+            const l = 2 * i + 1, r = 2 * i + 2;
+            if (l < n && this.cmp(this.heap[l], this.heap[s]) < 0)
+                s = l;
+            if (r < n && this.cmp(this.heap[r], this.heap[s]) < 0)
+                s = r;
+            if (s === i)
+                break;
+            if (s < 0 || s >= n)
+                break;
+            [this.heap[i], this.heap[s]] = [this.heap[s], this.heap[i]];
+            i = s;
+        }
+    }
     push(item, priority) {
-        this.items.push({ item, priority });
-        this.items.sort((a, b) => this.priorityOrder[a.priority] - this.priorityOrder[b.priority]);
+        if (!item) {
+            console.warn("[SimplePriorityQueue] Attempted to push null/undefined item");
+            return;
+        }
+        this.heap.push({ item, priority });
+        this.siftUp(this.heap.length - 1);
     }
     pop() {
-        return this.items.shift()?.item;
+        if (!this.heap.length)
+            return undefined;
+        const top = this.heap[0];
+        if (!top)
+            return undefined;
+        const last = this.heap.pop();
+        if (!last)
+            return top.item;
+        if (this.heap.length > 0) {
+            this.heap[0] = last;
+            this.siftDown(0);
+        }
+        return top.item;
     }
     peek() {
-        return this.items[0]?.item;
+        if (!this.heap.length)
+            return undefined;
+        return this.heap[0]?.item;
     }
     size() {
-        return this.items.length;
+        return this.heap.length;
     }
     isEmpty() {
-        return this.items.length === 0;
+        return !this.heap.length;
     }
 }
 class FynixScheduler {
@@ -57,39 +164,36 @@ class FynixScheduler {
         this.isScheduled = false;
         this.isWorking = false;
         this.currentPriority = "normal";
-        this.updateIdCounter = 0;
+        this.idCounter = 0;
     }
     schedule(update, priority = "normal") {
-        update.id = `update_${this.updateIdCounter++}`;
+        update.id = `u_${this.idCounter++}`;
         update.priority = priority;
         update.timestamp = performance.now();
         if (priority === "immediate") {
-            this.flushUpdate(update);
+            this.flushOne(update);
         }
         else {
             this.updateQueue.push(update, priority);
-            this.scheduleWork();
+            this.kick();
         }
     }
     batchUpdates(updates) {
-        updates.forEach((update) => this.batchedUpdates.add(update));
-        this.scheduleWork();
+        updates.forEach((u) => this.batchedUpdates.add(u));
+        this.kick();
     }
     timeSlice(deadline) {
-        const startTime = performance.now();
-        const previousPriority = this.currentPriority;
-        while (!this.updateQueue.isEmpty() &&
-            performance.now() - startTime < deadline) {
-            const update = this.updateQueue.pop();
-            if (update) {
-                if (this.shouldYield() && update.priority !== "immediate") {
-                    this.updateQueue.push(update, update.priority);
-                    break;
-                }
-                this.flushUpdate(update);
+        const t0 = performance.now();
+        const prev = this.currentPriority;
+        while (!this.updateQueue.isEmpty() && performance.now() - t0 < deadline) {
+            const u = this.updateQueue.pop();
+            if (this.shouldYield() && u.priority !== "immediate") {
+                this.updateQueue.push(u, u.priority);
+                break;
             }
+            this.flushOne(u);
         }
-        this.currentPriority = previousPriority;
+        this.currentPriority = prev;
         return this.updateQueue.isEmpty();
     }
     flush() {
@@ -97,63 +201,57 @@ class FynixScheduler {
             return;
         this.isWorking = true;
         try {
-            while (!this.updateQueue.isEmpty()) {
-                const update = this.updateQueue.peek();
-                if (update && update.priority === "immediate") {
-                    this.flushUpdate(this.updateQueue.pop());
-                }
-                else {
-                    break;
-                }
+            let passes = 0;
+            while ((!this.updateQueue.isEmpty() || this.batchedUpdates.size > 0) &&
+                passes++ < 10) {
+                while (!this.updateQueue.isEmpty())
+                    this.flushOne(this.updateQueue.pop());
+                this.batchedUpdates.forEach((u) => this.flushOne(u));
+                this.batchedUpdates.clear();
             }
-            this.batchedUpdates.forEach((update) => this.flushUpdate(update));
-            this.batchedUpdates.clear();
         }
         finally {
             this.isWorking = false;
             this.isScheduled = false;
         }
     }
-    flushUpdate(update) {
-        const previousPriority = this.currentPriority;
-        this.currentPriority = update.priority;
+    flushOne(u) {
+        const prev = this.currentPriority;
+        this.currentPriority = u.priority;
         try {
-            update.callback();
+            u.callback();
         }
-        catch (error) {
-            console.error("[FynixScheduler] Update error:", error);
-            showErrorOverlay(error);
+        catch (e) {
+            console.error("[FynixScheduler]", e);
+            showErrorOverlay(e);
         }
         finally {
-            this.currentPriority = previousPriority;
+            this.currentPriority = prev;
         }
     }
-    scheduleWork() {
+    kick() {
         if (this.isScheduled)
             return;
         this.isScheduled = true;
-        const nextUpdate = this.updateQueue.peek();
-        if (nextUpdate) {
-            if (nextUpdate.priority === "high") {
-                requestAnimationFrame(() => this.workLoop(16.67));
-            }
-            else {
-                if ("requestIdleCallback" in window) {
-                    requestIdleCallback((deadline) => {
-                        this.workLoop(deadline.timeRemaining());
-                    });
-                }
-                else {
-                    setTimeout(() => this.workLoop(5), 0);
-                }
-            }
+        const next = this.updateQueue.peek();
+        if (!next) {
+            this.isScheduled = false;
+            return;
+        }
+        if (next.priority === "high" || next.priority === "immediate") {
+            requestAnimationFrame(() => this.loop(16.67));
+        }
+        else if ("requestIdleCallback" in window) {
+            requestIdleCallback((d) => this.loop(d.timeRemaining()));
+        }
+        else {
+            setTimeout(() => this.loop(5), 0);
         }
     }
-    workLoop(deadline) {
-        const hasMoreWork = !this.timeSlice(deadline);
-        if (hasMoreWork) {
+    loop(deadline) {
+        if (!this.timeSlice(deadline)) {
             this.isScheduled = false;
-            this.scheduleWork();
+            this.kick();
         }
         else {
             this.flush();
@@ -163,249 +261,125 @@ class FynixScheduler {
         return this.currentPriority;
     }
     shouldYield() {
-        const nextUpdate = this.updateQueue.peek();
-        if (!nextUpdate)
+        const next = this.updateQueue.peek();
+        if (!next)
             return false;
-        const currentPriorityLevel = this.getPriorityLevel(this.currentPriority);
-        const nextPriorityLevel = this.getPriorityLevel(nextUpdate.priority);
-        return nextPriorityLevel < currentPriorityLevel;
-    }
-    getPriorityLevel(priority) {
-        const levels = { immediate: 0, high: 1, normal: 2, low: 3, idle: 4 };
-        return levels[priority];
-    }
-}
-const scheduler = new FynixScheduler();
-class FiberRenderer {
-    constructor() {
-        this.workInProgressRoot = null;
-        this.nextUnitOfWork = null;
-        this.currentRoot = null;
-        this.deletions = [];
+        return this.level(next.priority) < this.level(this.currentPriority);
     }
-    scheduleWork(fiber) {
-        this.workInProgressRoot = {
-            ...fiber,
-            alternate: this.currentRoot,
-        };
-        this.nextUnitOfWork = this.workInProgressRoot;
-        this.deletions = [];
-        scheduler.schedule({
-            id: "",
-            type: "layout",
-            priority: "high",
-            callback: () => this.workLoop(5),
-            timestamp: performance.now(),
-        }, "high");
+    level(p) {
+        return { immediate: 0, high: 1, normal: 2, low: 3, idle: 4 }[p];
     }
-    workLoop(deadline) {
-        const startTime = performance.now();
-        while (this.nextUnitOfWork && performance.now() - startTime < deadline) {
-            this.nextUnitOfWork = this.performUnitOfWork(this.nextUnitOfWork);
+    executeBatchedCallbacks(cbs) {
+        const store = getCurrentBatchStore();
+        if (store) {
+            store.callbacks.push(...cbs);
         }
-        if (!this.nextUnitOfWork && this.workInProgressRoot) {
-            this.commitRoot();
-        }
-        else if (this.nextUnitOfWork) {
-            scheduler.schedule({
-                id: "",
-                type: "layout",
-                priority: "normal",
-                callback: () => this.workLoop(5),
+        else {
+            const updates = cbs.map((cb) => ({
+                id: `b_${this.idCounter++}`,
+                type: "state",
+                priority: "high",
+                callback: cb,
                 timestamp: performance.now(),
-            }, "normal");
-        }
-    }
-    performUnitOfWork(fiber) {
-        this.reconcileChildren(fiber, fiber.props?.children || []);
-        if (fiber.child) {
-            return fiber.child;
-        }
-        let nextFiber = fiber;
-        while (nextFiber) {
-            if (nextFiber.sibling) {
-                return nextFiber.sibling;
-            }
-            nextFiber = nextFiber.parent;
-        }
-        return null;
-    }
-    reconcileChildren(wipFiber, elements) {
-        let index = 0;
-        let oldFiber = wipFiber.alternate?.child;
-        let prevSibling = null;
-        while (index < elements.length || oldFiber != null) {
-            const element = elements[index];
-            let newFiber = null;
-            const sameType = oldFiber && element && element.type === oldFiber.type;
-            if (sameType && oldFiber) {
-                newFiber = {
-                    type: oldFiber.type,
-                    props: element.props,
-                    key: element.key,
-                    _domNode: oldFiber._domNode,
-                    parent: wipFiber,
-                    alternate: oldFiber,
-                    effectTag: "UPDATE",
-                    updatePriority: "normal",
-                    child: null,
-                    sibling: null,
-                    _rendered: null,
-                };
-            }
-            if (element && !sameType) {
-                newFiber = {
-                    type: element.type,
-                    props: element.props,
-                    key: element.key,
-                    _domNode: null,
-                    parent: wipFiber,
-                    alternate: null,
-                    effectTag: "PLACEMENT",
-                    updatePriority: "normal",
-                    child: null,
-                    sibling: null,
-                    _rendered: null,
-                };
-            }
-            if (oldFiber && !sameType) {
-                oldFiber.effectTag = "DELETION";
-                this.deletions.push(oldFiber);
-            }
-            if (oldFiber) {
-                oldFiber = oldFiber.sibling;
-            }
-            if (index === 0) {
-                wipFiber.child = newFiber;
-            }
-            else if (newFiber && prevSibling) {
-                prevSibling.sibling = newFiber;
-            }
-            prevSibling = newFiber;
-            index++;
-        }
-    }
-    commitRoot() {
-        this.deletions.forEach((fiber) => this.commitWork(fiber));
-        if (this.workInProgressRoot?.child) {
-            this.commitWork(this.workInProgressRoot.child);
+            }));
+            this.batchUpdates(updates);
+            this.flush();
         }
-        this.currentRoot = this.workInProgressRoot;
-        this.workInProgressRoot = null;
     }
-    commitWork(fiber) {
-        if (!fiber)
-            return;
-        let domParentFiber = fiber.parent;
-        while (!domParentFiber?._domNode) {
-            domParentFiber = domParentFiber?.parent || null;
-        }
-        const domParent = domParentFiber?._domNode;
-        if (fiber.effectTag === "PLACEMENT" && fiber._domNode && domParent) {
-            domParent.appendChild(fiber._domNode);
-        }
-        else if (fiber.effectTag === "UPDATE" && fiber._domNode) {
-            this.updateDom(fiber._domNode, fiber.alternate?.props || {}, fiber.props);
-        }
-        else if (fiber.effectTag === "DELETION" && domParent) {
-            this.commitDeletion(fiber, domParent);
-        }
-        this.commitWork(fiber.child);
-        this.commitWork(fiber.sibling);
+    getState() {
+        return {
+            isScheduled: this.isScheduled,
+            isWorking: this.isWorking,
+            currentPriority: this.currentPriority,
+            queueSize: this.updateQueue.size(),
+            batchedUpdatesSize: this.batchedUpdates.size,
+            idCounter: this.idCounter,
+        };
     }
-    commitDeletion(fiber, domParent) {
-        if (fiber._domNode) {
-            domParent.removeChild(fiber._domNode);
-        }
-        else if (fiber.child) {
-            this.commitDeletion(fiber.child, domParent);
-        }
+    getQueueMetrics() {
+        return {
+            pending: this.updateQueue.size(),
+            batched: this.batchedUpdates.size,
+            isActive: this.isWorking || this.isScheduled,
+            currentPriority: this.currentPriority,
+        };
     }
-    updateDom(dom, prevProps, nextProps) {
-        Object.keys(prevProps)
-            .filter((key) => key !== "children" && !(key in nextProps))
-            .forEach((name) => {
-            if (name.startsWith("on")) {
-                const eventType = name.toLowerCase().substring(2);
-                dom.removeEventListener(eventType, prevProps[name]);
-            }
-            else {
-                dom[name] = "";
-            }
-        });
-        Object.keys(nextProps)
-            .filter((key) => key !== "children")
-            .forEach((name) => {
-            if (prevProps[name] !== nextProps[name]) {
-                if (name.startsWith("on")) {
-                    const eventType = name.toLowerCase().substring(2);
-                    dom.addEventListener(eventType, nextProps[name]);
-                }
-                else {
-                    dom[name] = nextProps[name];
-                }
-            }
-        });
+    clearQueue() {
+        this.updateQueue = new SimplePriorityQueue();
+        this.batchedUpdates.clear();
     }
 }
-const fiberRenderer = new FiberRenderer();
-export function useFiberRenderer() {
-    return fiberRenderer;
+const scheduler = new FynixScheduler();
+let errorConfig = {
+    logToConsole: true,
+    showOverlay: true,
+};
+export function configureErrorHandling(config) {
+    errorConfig = { ...errorConfig, ...config };
 }
-class HierarchicalStore {
-    constructor() {
-        this.root = new Map();
-        this.selectorCache = new Map();
-        this.stateSnapshot = {};
+export function getErrorConfig() {
+    return { ...errorConfig };
+}
+let perfConfig = {
+    enabled: false,
+    logMeasurements: false,
+    slowRenderThreshold: 16.67,
+};
+export function enablePerformanceProfiling(config) {
+    perfConfig = { ...perfConfig, ...config };
+}
+export function getPerfConfig() {
+    return { ...perfConfig };
+}
+function perfMark(name) {
+    if (!perfConfig.enabled || typeof performance === "undefined")
+        return;
+    try {
+        performance.mark(`fynix:${name}`);
     }
-    select(selector) {
-        const selectorKey = selector.toString();
-        if (this.selectorCache.has(selectorKey)) {
-            return this.selectorCache.get(selectorKey);
-        }
-        const result = selector(this.getState());
-        this.selectorCache.set(selectorKey, result);
-        return result;
+    catch {
     }
-    optimisticUpdate(path, update, rollback) {
-        const original = this.get(path);
-        this.set(path, update);
-        return {
-            commit: () => this.clearRollback(path),
-            rollback: () => {
-                this.set(path, original);
-                rollback?.();
-            },
-        };
+}
+function perfMeasure(name, startMark, endMark) {
+    if (!perfConfig.enabled || typeof performance === "undefined")
+        return 0;
+    try {
+        performance.measure(`fynix:${name}`, `fynix:${startMark}`, `fynix:${endMark}`);
+        const measures = performance.getEntriesByName(`fynix:${name}`);
+        const duration = measures[measures.length - 1]?.duration ?? 0;
+        if (perfConfig.logMeasurements) {
+            console.debug(`[Fynix Performance] ${name}: ${duration.toFixed(2)}ms`);
+        }
+        return duration;
     }
-    getState() {
-        return this.stateSnapshot;
+    catch {
+        return 0;
     }
-    get(path) {
-        return this.root.get(path)?.value;
+}
+const asyncErrorHandlers = [];
+function publishAsyncError(error) {
+    if (errorConfig.logToConsole) {
+        console.error("[Fynix] Async Error:", error);
+    }
+    if (errorConfig.onAsyncError) {
+        const handled = errorConfig.onAsyncError(error);
+        if (handled)
+            return;
     }
-    set(path, value) {
-        const node = this.root.get(path);
-        if (node) {
-            node.value = value;
-            this.stateSnapshot = { ...this.stateSnapshot, [path]: value };
-            this.invalidateSelectors();
+    if (asyncErrorHandlers.length > 0) {
+        const handler = asyncErrorHandlers[asyncErrorHandlers.length - 1];
+        if (handler) {
+            handler(error);
+            return;
         }
     }
-    clearRollback(path) {
-        console.log(`[HierarchicalStore] Optimistic update committed for path: ${path}`);
+    if (errorConfig.showOverlay) {
+        showErrorOverlay(error);
     }
-    invalidateSelectors() {
-        this.selectorCache.clear();
-    }
-}
-const hierarchicalStore = new HierarchicalStore();
-export function useHierarchicalStore() {
-    return hierarchicalStore;
 }
 export const TEXT = Symbol("text");
 export const Fragment = Symbol("Fragment");
-const BOOLEAN_ATTRS = new Set([
+export const BOOLEAN_ATTRS = new Set([
     "checked",
     "selected",
     "disabled",
@@ -424,7 +398,7 @@ const BOOLEAN_ATTRS = new Set([
     "novalidate",
     "formnovalidate",
 ]);
-const DOM_PROPERTIES = new Set([
+export const DOM_PROPERTIES = new Set([
     "value",
     "checked",
     "selected",
@@ -433,20 +407,20 @@ const DOM_PROPERTIES = new Set([
     "textContent",
     "innerText",
 ]);
-const DANGEROUS_HTML_PROPS = new Set([
+export const DANGEROUS_HTML_PROPS = new Set([
     "innerHTML",
     "outerHTML",
     "insertAdjacentHTML",
     "srcdoc",
 ]);
-const DANGEROUS_PROTOCOLS = new Set([
+export const DANGEROUS_PROTOCOLS = new Set([
     "javascript:",
     "data:",
     "vbscript:",
     "file:",
     "about:",
 ]);
-const SAFE_PROTOCOLS = new Set([
+export const SAFE_PROTOCOLS = new Set([
     "http:",
     "https:",
     "ftp:",
@@ -458,10 +432,173 @@ const SAFE_PROTOCOLS = new Set([
     "./",
     "../",
 ]);
+function sanitizeText(text) {
+    if (typeof text !== "string")
+        return String(text);
+    return text
+        .replace(/[<>"'&]/g, (c) => ({
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#x27;",
+        "&": "&amp;",
+    })[c] || c)
+        .replace(/javascript:/gi, "blocked:")
+        .replace(/data:.*?base64/gi, "blocked:");
+}
+function sanitizeAttributeValue(value) {
+    if (typeof value !== "string")
+        return String(value);
+    return value
+        .replace(/["'<>]/g, (c) => ({ '"': "&quot;", "'": "&#x27;", "<": "&lt;", ">": "&gt;" })[c] || c)
+        .replace(/javascript:/gi, "blocked:")
+        .replace(/on\w+=/gi, "blocked=");
+}
+function sanitizeErrorMessage(error) {
+    if (!error)
+        return "Unknown error";
+    return sanitizeText(String(error.message || error.toString() || "Unknown error")).slice(0, 200);
+}
+function applyAttributeValue(el, key, value) {
+    const k = key.toLowerCase();
+    if (BOOLEAN_ATTRS.has(k)) {
+        if (value) {
+            el.setAttribute(k, "");
+            el[k] = true;
+        }
+        else {
+            el.removeAttribute(k);
+            el[k] = false;
+        }
+        return;
+    }
+    if (DOM_PROPERTIES.has(key) && !DANGEROUS_HTML_PROPS.has(key)) {
+        el[key] =
+            key === "textContent" || key === "innerText"
+                ? sanitizeText(value ?? "")
+                : (value ?? "");
+        return;
+    }
+    if (key.startsWith("data-") || key.startsWith("aria-")) {
+        if (value != null && value !== false)
+            el.setAttribute(key, sanitizeAttributeValue(String(value)));
+        else
+            el.removeAttribute(key);
+        return;
+    }
+    if (value != null && value !== false)
+        el.setAttribute(key, value);
+}
+function setProperty(el, key, value) {
+    if (value &&
+        typeof value === "object" &&
+        (value._isNixState || value._isRestState) &&
+        key !== "r-class" &&
+        key !== "rc") {
+        const anyEl = el;
+        if (!anyEl._fynixCleanups)
+            anyEl._fynixCleanups = [];
+        applyAttributeValue(el, key, value.value);
+        const unsub = value.subscribe(() => applyAttributeValue(el, key, value.value));
+        anyEl._fynixCleanups.push(unsub);
+        return;
+    }
+    if (key === "r-class" || key === "rc") {
+        if (typeof value === "string") {
+            el.setAttribute("class", value);
+            return;
+        }
+        if (value && (value._isNixState || value._isRestState)) {
+            el.setAttribute("class", value.value);
+            const anyEl = el;
+            if (!anyEl._fynixCleanups)
+                anyEl._fynixCleanups = [];
+            anyEl._fynixCleanups.push(value.subscribe(() => el.setAttribute("class", value.value)));
+        }
+        return;
+    }
+    if (key.startsWith("r-")) {
+        registerDelegatedHandler(el, key.slice(2).toLowerCase(), value);
+        return;
+    }
+    if (key === "style" && typeof value === "object") {
+        Object.assign(el.style, value);
+        return;
+    }
+    if (DANGEROUS_HTML_PROPS.has(key)) {
+        console.error(`[Fynix] Security: ${key} blocked. Use textContent or children.`);
+        return;
+    }
+    if (["href", "src", "action", "formaction"].includes(key) &&
+        typeof value === "string") {
+        const n = value.trim().toLowerCase();
+        for (const p of DANGEROUS_PROTOCOLS) {
+            if (n.startsWith(p)) {
+                console.error(`[Fynix] Security: ${p} blocked in ${key}`);
+                return;
+            }
+        }
+        if (n.includes(":")) {
+            const proto = n.split(":")[0] + ":";
+            if (!SAFE_PROTOCOLS.has(proto) && !SAFE_PROTOCOLS.has(n.charAt(0))) {
+                console.error(`[Fynix] Security: protocol '${proto}' not safe in ${key}`);
+                return;
+            }
+        }
+        if (n.startsWith("data:") &&
+            (n.includes("javascript") || n.includes("<script"))) {
+            console.error(`[Fynix] Security: suspicious data: URL blocked in ${key}`);
+            return;
+        }
+    }
+    if (key.toLowerCase().startsWith("on") && key !== "open") {
+        console.error(`[Fynix] Security: inline handler '${key}' blocked. Use r-${key.slice(2)}.`);
+        return;
+    }
+    applyAttributeValue(el, key, value);
+}
+const delegatedEvents = new Map();
+let eventIdCounter = 1;
+function ensureDelegated(type) {
+    if (delegatedEvents.has(type))
+        return;
+    delegatedEvents.set(type, new Map());
+    document.addEventListener(type, (e) => {
+        let cur = e.target;
+        while (cur && cur !== document) {
+            if (cur.nodeType !== 1)
+                break;
+            const eid = cur._rest_eid;
+            const handler = eid != null ? delegatedEvents.get(type)?.get(eid) : undefined;
+            if (handler) {
+                handler(e);
+                return;
+            }
+            cur = cur.parentElement;
+        }
+    });
+}
+function registerDelegatedHandler(el, name, fn) {
+    if (typeof fn !== "function" || el.nodeType !== 1)
+        return;
+    const anyEl = el;
+    const eid = anyEl._rest_eid ?? (anyEl._rest_eid = ++eventIdCounter);
+    ensureDelegated(name);
+    delegatedEvents.get(name).set(eid, (e) => {
+        try {
+            isCurrentlyBatching()
+                ? fn.call(el, e)
+                : batchUpdates(() => fn.call(el, e));
+        }
+        catch (err) {
+            console.error("[Fynix] Event handler error:", err);
+            showErrorOverlay(err);
+        }
+    });
+}
 export function createTextVNode(text) {
-    if (text == null || text === false) {
+    if (text == null || text === false)
         return { type: TEXT, props: { nodeValue: "" }, key: null };
-    }
     if (text && typeof text === "object" && text._isNixState) {
         const vnode = {
             type: TEXT,
@@ -471,9 +608,8 @@ export function createTextVNode(text) {
             _cleanup: null,
         };
         vnode._cleanup = text.subscribe(() => {
-            if (vnode._domNode) {
+            if (vnode._domNode)
                 vnode._domNode.nodeValue = String(text.value);
-            }
         });
         return vnode;
     }
@@ -482,7 +618,7 @@ export function createTextVNode(text) {
 export function h(type, props = null, ...children) {
     const normalizedProps = props === null || typeof props !== "object" || Array.isArray(props)
         ? {}
-        : props;
+        : { ...props };
     const flatChildren = [];
     for (const c of children.flat(Infinity)) {
         if (c == null || c === false)
@@ -495,8 +631,7 @@ export function h(type, props = null, ...children) {
         }
         else if (c && typeof c === "object" && "type" in c) {
             if (c.type === Fragment) {
-                const fragmentChildren = (c.props.children || []).filter((x) => x != null && x !== false);
-                flatChildren.push(...fragmentChildren);
+                flatChildren.push(...(c.props.children || []).filter((x) => x != null && x !== false));
             }
             else {
                 flatChildren.push(c);
@@ -510,41 +645,101 @@ export function h(type, props = null, ...children) {
         }
     }
     const key = normalizedProps.key ?? null;
-    if (key !== undefined)
-        delete normalizedProps.key;
-    if (type === Fragment) {
+    delete normalizedProps.key;
+    if (type === Fragment)
         return { type: Fragment, props: { children: flatChildren }, key };
-    }
-    return {
-        type,
-        props: { ...normalizedProps, children: flatChildren },
-        key,
-    };
+    return { type, props: { ...normalizedProps, children: flatChildren }, key };
 }
 h.Fragment = ({ children }) => children || [];
 export const Fynix = h;
 Fynix.Fragment = h.Fragment;
-const componentInstances = new WeakMap();
-let rootRenderFn = null;
+class ContextTracker {
+    constructor() {
+        this.contextRefs = new Map();
+        this.cleanup = null;
+        if (globalThis.FinalizationRegistry) {
+            this.cleanup = new globalThis.FinalizationRegistry((vnode) => {
+                this.contextRefs.delete(vnode);
+            });
+        }
+    }
+    set(vnode, ctx) {
+        if (globalThis.WeakRef) {
+            const ref = new globalThis.WeakRef(ctx);
+            this.contextRefs.set(vnode, ref);
+            if (this.cleanup) {
+                this.cleanup.register(ctx, vnode);
+            }
+        }
+        else {
+            this.contextRefs.set(vnode, ctx);
+        }
+    }
+    get(vnode) {
+        const ref = this.contextRefs.get(vnode);
+        if (!ref)
+            return undefined;
+        const ctx = ref.deref ? ref.deref() : ref;
+        if (!ctx && ref.deref) {
+            this.contextRefs.delete(vnode);
+        }
+        return ctx;
+    }
+    has(vnode) {
+        const ref = this.contextRefs.get(vnode);
+        if (!ref)
+            return false;
+        const ctx = ref.deref ? ref.deref() : ref;
+        if (!ctx && ref.deref) {
+            this.contextRefs.delete(vnode);
+            return false;
+        }
+        return true;
+    }
+    delete(vnode) {
+        this.contextRefs.delete(vnode);
+    }
+    clear() {
+        this.contextRefs.clear();
+    }
+}
+let componentInstances;
+try {
+    if (typeof globalThis.WeakRef !== "undefined" &&
+        typeof globalThis.FinalizationRegistry !== "undefined") {
+        componentInstances = new ContextTracker();
+    }
+    else {
+        componentInstances = new WeakMap();
+    }
+}
+catch {
+    componentInstances = new WeakMap();
+}
 const pendingRerenders = new WeakSet();
+function makeContext(vnode, Component) {
+    return {
+        hooks: [],
+        hookIndex: 0,
+        effects: [],
+        cleanups: [],
+        _vnode: vnode,
+        _fiber: null,
+        _accessedStates: new Set(),
+        _subscriptions: new Set(),
+        _subscriptionCleanups: [],
+        version: 0,
+        rerender: null,
+        Component,
+        _isMounted: false,
+        _isRerendering: false,
+        _rerenderTimeout: null,
+    };
+}
 function beginComponent(vnode) {
     let ctx = componentInstances.get(vnode);
     if (!ctx) {
-        ctx = {
-            hooks: [],
-            hookIndex: 0,
-            effects: [],
-            cleanups: [],
-            _vnode: vnode,
-            _accessedStates: new Set(),
-            _subscriptions: new Set(),
-            _subscriptionCleanups: [],
-            version: 0,
-            rerender: null,
-            Component: vnode.type,
-            _isMounted: false,
-            _isRerendering: false,
-        };
+        ctx = makeContext(vnode, vnode.type);
         componentInstances.set(vnode, ctx);
     }
     ctx.hookIndex = 0;
@@ -559,66 +754,13 @@ function endComponent() {
         return;
     ctx._accessedStates.forEach((state) => {
         if (!ctx._subscriptions.has(state)) {
-            if (!ctx.rerender) {
-                let rerenderTimeout = null;
-                ctx.rerender = function rerender() {
-                    if (ctx._isRerendering || pendingRerenders.has(ctx)) {
-                        return;
-                    }
-                    if (rerenderTimeout) {
-                        clearTimeout(rerenderTimeout);
-                    }
-                    rerenderTimeout = setTimeout(async () => {
-                        if (ctx._isRerendering || !ctx._isMounted)
-                            return;
-                        ctx._isRerendering = true;
-                        pendingRerenders.add(ctx);
-                        try {
-                            removeErrorOverlay();
-                            const vnode = ctx._vnode;
-                            const oldRendered = vnode._rendered;
-                            beginComponent(vnode);
-                            const result = ctx.Component(vnode.props);
-                            const newRendered = result instanceof Promise ? await result : result;
-                            endComponent();
-                            vnode._rendered = newRendered;
-                            const domNode = vnode._domNode;
-                            if (domNode && domNode.parentNode) {
-                                await patch(domNode.parentNode, newRendered, oldRendered);
-                                if (newRendered && typeof newRendered === "object") {
-                                    vnode._domNode = newRendered._domNode;
-                                }
-                                ctx._isRerendering = false;
-                                pendingRerenders.delete(ctx);
-                            }
-                            else if (rootRenderFn) {
-                                await rootRenderFn();
-                                ctx._isRerendering = false;
-                                pendingRerenders.delete(ctx);
-                            }
-                            else {
-                                ctx._isRerendering = false;
-                                pendingRerenders.delete(ctx);
-                            }
-                        }
-                        catch (err) {
-                            console.error("[Fynix] Component rerender error:", err);
-                            showErrorOverlay(err);
-                            ctx._isRerendering = false;
-                            pendingRerenders.delete(ctx);
-                        }
-                        rerenderTimeout = null;
-                    }, 0);
-                };
-            }
+            if (!ctx.rerender)
+                ctx.rerender = createRerender(ctx);
             const unsub = state.subscribe(() => {
                 if (ctx.rerender && ctx._isMounted) {
-                    if (typeof queueMicrotask === "function") {
-                        queueMicrotask(() => ctx.rerender());
-                    }
-                    else {
-                        setTimeout(ctx.rerender, 0);
-                    }
+                    typeof queueMicrotask === "function"
+                        ? queueMicrotask(() => ctx.rerender())
+                        : setTimeout(ctx.rerender, 0);
                 }
             });
             ctx._subscriptions.add(state);
@@ -627,735 +769,816 @@ function endComponent() {
     });
     setActiveContext(null);
 }
-export function renderComponent(Component, props = {}) {
-    const vnode = { type: Component, props, key: null };
-    const ctx = beginComponent(vnode);
-    ctx.Component = Component;
-    if (!ctx.rerender) {
-        let rerenderTimeout = null;
-        ctx.rerender = () => {
-            if (ctx._isRerendering || pendingRerenders.has(ctx))
+function createRerender(ctx) {
+    return function rerender() {
+        if (ctx._isRerendering || pendingRerenders.has(ctx))
+            return;
+        if (ctx._rerenderTimeout !== null) {
+            clearTimeout(ctx._rerenderTimeout);
+            ctx._rerenderTimeout = null;
+        }
+        ctx._rerenderTimeout = setTimeout(() => {
+            ctx._rerenderTimeout = null;
+            if (ctx._isRerendering || !ctx._isMounted)
                 return;
-            if (rerenderTimeout) {
-                clearTimeout(rerenderTimeout);
+            if (ctx._fiber) {
+                fiberReconciler.scheduleUpdate(ctx._fiber, "normal");
+            }
+            else if (ctx._vnode) {
+                console.warn("[Fynix] Rerender triggered before fiber assigned — skipping.");
+            }
+        }, 0);
+    };
+}
+function updateProps(el, newProps = {}, oldProps = {}) {
+    if (!el || el.nodeType !== 1)
+        return;
+    for (const k of Object.keys(oldProps)) {
+        if (k === "children")
+            continue;
+        if (!(k in newProps)) {
+            if (k.startsWith("r-")) {
+                const eid = el._rest_eid;
+                if (eid)
+                    delegatedEvents.get(k.slice(2).toLowerCase())?.delete(eid);
+            }
+            else if (BOOLEAN_ATTRS.has(k.toLowerCase())) {
+                el.removeAttribute(k);
+                el[k] = false;
+            }
+            else if (DOM_PROPERTIES.has(k)) {
+                el[k] = "";
+            }
+            else {
+                el.removeAttribute(k);
             }
-            rerenderTimeout = setTimeout(async () => {
-                if (ctx._isRerendering || !ctx._isMounted)
-                    return;
-                ctx._isRerendering = true;
-                pendingRerenders.add(ctx);
-                try {
-                    removeErrorOverlay();
-                    const vnode = ctx._vnode;
-                    const oldRendered = vnode._rendered;
-                    beginComponent(vnode);
-                    const result = ctx.Component(vnode.props);
-                    const newRendered = result instanceof Promise ? await result : result;
-                    endComponent();
-                    vnode._rendered = newRendered;
-                    const domNode = vnode._domNode;
-                    if (domNode && domNode.parentNode) {
-                        await patch(domNode.parentNode, newRendered, oldRendered);
-                        if (newRendered && typeof newRendered === "object") {
-                            vnode._domNode = newRendered._domNode;
-                        }
-                        ctx._isRerendering = false;
-                        pendingRerenders.delete(ctx);
-                    }
-                    else if (rootRenderFn) {
-                        await rootRenderFn();
-                        ctx._isRerendering = false;
-                        pendingRerenders.delete(ctx);
-                    }
-                    else {
-                        ctx._isRerendering = false;
-                        pendingRerenders.delete(ctx);
-                    }
-                }
-                catch (err) {
-                    console.error("[Fynix] Component rerender error:", err);
-                    showErrorOverlay(err);
-                    ctx._isRerendering = false;
-                    pendingRerenders.delete(ctx);
-                }
-                rerenderTimeout = null;
-            }, 0);
-        };
-    }
-    try {
-        removeErrorOverlay();
-        const result = Component(props);
-        if (result instanceof Promise) {
-            const placeholderVNode = h("div", null, "Loading...");
-            ctx._vnode = vnode;
-            vnode._rendered = placeholderVNode;
-            ctx._isMounted = true;
-            result
-                .then((resolvedVNode) => {
-                vnode._rendered = resolvedVNode;
-                if (ctx.rerender) {
-                    ctx.rerender();
-                }
-            })
-                .catch((err) => {
-                console.error("[Fynix] Async component error:", err);
-                showErrorOverlay(err);
-            });
-            return placeholderVNode;
         }
-        ctx._vnode = vnode;
-        vnode._rendered = result;
-        ctx._isMounted = true;
-        return result;
     }
-    catch (err) {
-        console.error("[Fynix] Component render error:", err);
-        showErrorOverlay(err);
-        return h("div", { style: "color:red" }, `Error: ${sanitizeErrorMessage(err)}`);
+    for (const [k, v] of Object.entries(newProps)) {
+        if (k === "children")
+            continue;
+        if (oldProps[k] !== v)
+            setProperty(el, k, v);
     }
-    finally {
-        endComponent();
+}
+function createDomElement(type, props) {
+    const el = document.createElement(type);
+    for (const [k, v] of Object.entries(props)) {
+        if (k !== "children")
+            setProperty(el, k, v);
     }
+    return el;
 }
-const delegatedEvents = new Map();
-let eventIdCounter = 1;
-function ensureDelegated(eventType) {
-    if (delegatedEvents.has(eventType))
-        return;
-    delegatedEvents.set(eventType, new Map());
-    document.addEventListener(eventType, (e) => {
-        let cur = e.target;
-        while (cur && cur !== document) {
-            if (cur.nodeType !== 1)
-                break;
-            const el = cur;
-            const eid = el._rest_eid;
-            const map = delegatedEvents.get(eventType);
-            if (eid != null && map?.has(eid)) {
-                map.get(eid)(e);
-                return;
-            }
-            cur = cur.parentElement;
+function unmountCtx(ctx) {
+    ctx._isMounted = false;
+    if (ctx._rerenderTimeout !== null) {
+        clearTimeout(ctx._rerenderTimeout);
+        ctx._rerenderTimeout = null;
+    }
+    ctx._subscriptionCleanups.forEach((u) => {
+        try {
+            u();
         }
+        catch { }
     });
-}
-function registerDelegatedHandler(el, eventName, fn) {
-    if (!fn || el.nodeType !== 1)
-        return;
-    const anyEl = el;
-    const eid = anyEl._rest_eid ?? (anyEl._rest_eid = ++eventIdCounter);
-    ensureDelegated(eventName);
-    delegatedEvents.get(eventName).set(eid, (e) => {
+    ctx.cleanups.forEach((c) => {
         try {
-            fn.call(el, e);
-        }
-        catch (err) {
-            console.error("[Fynix] Event handler error:", err);
-            showErrorOverlay(err);
+            c?.();
         }
+        catch { }
     });
+    ctx._subscriptions.clear();
+    ctx._accessedStates.clear();
+    ctx._subscriptionCleanups = [];
+    ctx.cleanups = [];
+    ctx.hooks = [];
+    ctx.effects = [];
+    ctx.rerender = null;
+    ctx._vnode = null;
+    ctx._fiber = null;
 }
-function sanitizeText(text) {
-    if (typeof text !== "string")
-        return String(text);
-    return text
-        .replace(/[<>"'&]/g, (match) => {
-        const entityMap = {
-            "<": "&lt;",
-            ">": "&gt;",
-            '"': "&quot;",
-            "'": "&#x27;",
-            "&": "&amp;",
-        };
-        return entityMap[match] || match;
-    })
-        .replace(/javascript:/gi, "blocked:")
-        .replace(/data:.*?base64/gi, "blocked:");
-}
-function sanitizeAttributeValue(value) {
-    if (typeof value !== "string")
-        return String(value);
-    return value
-        .replace(/["'<>]/g, (match) => {
-        const entityMap = {
-            '"': "&quot;",
-            "'": "&#x27;",
-            "<": "&lt;",
-            ">": "&gt;",
-        };
-        return entityMap[match] || match;
-    })
-        .replace(/javascript:/gi, "blocked:")
-        .replace(/on\w+=/gi, "blocked=");
-}
-function sanitizeErrorMessage(error) {
-    if (!error)
-        return "Unknown error";
-    const message = error.message || error.toString() || "Unknown error";
-    return sanitizeText(String(message)).slice(0, 200);
-}
-function setProperty(el, key, value) {
-    const k = key.toLowerCase();
-    if (key === "r-class" || key === "rc") {
-        if (typeof value === "string") {
-            el.setAttribute("class", value);
-        }
-        else if (value && (value._isNixState || value._isRestState)) {
-            el.setAttribute("class", value.value);
-            const anyEl = el;
-            if (!anyEl._fynixCleanups)
-                anyEl._fynixCleanups = [];
-            const unsub = value.subscribe(() => el.setAttribute("class", value.value));
-            anyEl._fynixCleanups.push(unsub);
-        }
-        return;
+function removeDomCleanups(node) {
+    const any = node;
+    const eid = any._rest_eid;
+    if (eid)
+        delegatedEvents.forEach((m) => m.delete(eid));
+    if (any._fynixCleanups) {
+        any._fynixCleanups.forEach((fn) => {
+            try {
+                fn();
+            }
+            catch { }
+        });
+        any._fynixCleanups = null;
     }
-    if (key.startsWith("r-")) {
-        registerDelegatedHandler(el, key.slice(2).toLowerCase(), value);
-        return;
+}
+class FiberReconciler {
+    constructor() {
+        this.wipRoot = null;
+        this.nextWork = null;
+        this.deletions = [];
     }
-    if (key === "style" && typeof value === "object") {
-        Object.assign(el.style, value);
-        return;
+    mountRoot(vnode, container) {
+        const rootFiber = this.vnodeToFiber(vnode, null, null);
+        rootFiber._domNode = container;
+        this.wipRoot = rootFiber;
+        this.nextWork = rootFiber;
+        this.deletions = [];
+        this.scheduleRender("high");
+    }
+    scheduleUpdate(fiber, priority = "normal") {
+        const wip = this.cloneFiber(fiber);
+        wip.alternate = fiber;
+        let root = wip;
+        while (root.parent)
+            root = root.parent;
+        this.wipRoot = root;
+        this.nextWork = wip;
+        this.deletions = [];
+        this.scheduleRender(priority);
     }
-    if (DANGEROUS_HTML_PROPS.has(key)) {
-        console.error(`[Fynix] Security: ${key} is blocked for security reasons. Use textContent or children instead.`);
-        return;
+    scheduleRender(priority) {
+        scheduler.schedule({
+            id: "",
+            type: "layout",
+            priority,
+            callback: () => this.workLoop(priority === "high" ? 16 : 5),
+            timestamp: performance.now(),
+        }, priority);
     }
-    if ((key === "href" ||
-        key === "src" ||
-        key === "action" ||
-        key === "formaction") &&
-        typeof value === "string") {
-        const normalizedValue = value.trim().toLowerCase();
-        for (const protocol of DANGEROUS_PROTOCOLS) {
-            if (normalizedValue.startsWith(protocol)) {
-                console.error(`[Fynix] Security: ${protocol} protocol blocked in ${key}`);
-                return;
-            }
+    workLoop(deadline) {
+        perfMark("workloop-start");
+        const t0 = performance.now();
+        while (this.nextWork && performance.now() - t0 < deadline) {
+            this.nextWork = this.performWork(this.nextWork);
         }
-        if (normalizedValue.includes(":")) {
-            const protocol = normalizedValue.split(":")[0] + ":";
-            if (!SAFE_PROTOCOLS.has(protocol) &&
-                !SAFE_PROTOCOLS.has(normalizedValue.charAt(0))) {
-                console.error(`[Fynix] Security: Protocol '${protocol}' not in safe list for ${key}`);
-                return;
+        if (!this.nextWork && this.wipRoot) {
+            perfMark("render-complete");
+            this.commitRoot();
+            perfMark("commit-complete");
+            if (perfConfig.enabled) {
+                const renderTime = perfMeasure("render", "workloop-start", "render-complete");
+                const commitTime = perfMeasure("commit", "render-complete", "commit-complete");
+                if (perfConfig.slowRenderThreshold &&
+                    renderTime + commitTime > perfConfig.slowRenderThreshold) {
+                    console.warn(`[Fynix] Slow render: ${(renderTime + commitTime).toFixed(2)}ms`);
+                }
+                if (perfConfig.onMetrics) {
+                    perfConfig.onMetrics({
+                        renderTime,
+                        commitTime,
+                        totalTime: renderTime + commitTime,
+                        updateCount: 0,
+                        fiberCount: 0,
+                        timestamp: performance.now(),
+                    });
+                }
             }
         }
-        if (normalizedValue.startsWith("data:")) {
-            if (normalizedValue.includes("javascript") ||
-                normalizedValue.includes("<script")) {
-                console.error(`[Fynix] Security: Suspicious data: URL blocked in ${key}`);
-                return;
-            }
+        else if (this.nextWork) {
+            this.scheduleRender("normal");
         }
     }
-    if (key.toLowerCase().startsWith("on") && key !== "open") {
-        console.error(`[Fynix] Security: Inline event handler '${key}' blocked. Use r-${key.slice(2)} instead.`);
-        return;
-    }
-    if (BOOLEAN_ATTRS.has(k)) {
-        if (value) {
-            el.setAttribute(k, "");
-            el[k] = true;
+    performWork(fiber) {
+        if (typeof fiber.type === "function") {
+            this.updateComponentFiber(fiber);
         }
         else {
-            el.removeAttribute(k);
-            el[k] = false;
-        }
-        return;
-    }
-    if (DOM_PROPERTIES.has(key) && !DANGEROUS_HTML_PROPS.has(key)) {
-        if (key === "textContent" || key === "innerText") {
-            el[key] = sanitizeText(value ?? "");
+            this.updateHostFiber(fiber);
         }
-        else {
-            el[key] = value ?? "";
+        if (fiber.child)
+            return fiber.child;
+        let f = fiber;
+        while (f) {
+            if (f.sibling)
+                return f.sibling;
+            f = f.parent;
         }
-        return;
+        return null;
     }
-    if (key.startsWith("data-") || key.startsWith("aria-")) {
-        if (value != null && value !== false) {
-            el.setAttribute(key, sanitizeAttributeValue(String(value)));
-        }
-        else {
-            el.removeAttribute(key);
+    updateComponentFiber(fiber) {
+        const vnode = fiber._vnode;
+        let ctx = componentInstances.get(vnode);
+        if (!ctx) {
+            ctx = makeContext(vnode, fiber.type);
+            componentInstances.set(vnode, ctx);
+        }
+        ctx._fiber = fiber;
+        fiber.ctx = ctx;
+        ctx.hookIndex = 0;
+        ctx._accessedStates.clear();
+        setActiveContext(ctx);
+        ctx.version++;
+        let rendered = null;
+        try {
+            removeErrorOverlay();
+            const result = fiber.type(fiber.props);
+            if (result instanceof Promise) {
+                rendered = h("div", null, "Loading...");
+                result
+                    .then((resolved) => {
+                    vnode._rendered = resolved;
+                    if (ctx.rerender)
+                        ctx.rerender();
+                })
+                    .catch((err) => publishAsyncError(err instanceof Error ? err : new Error(String(err))));
+            }
+            else {
+                rendered = result;
+            }
         }
-        return;
-    }
-    if (value != null && value !== false) {
-        el.setAttribute(key, value);
-    }
-}
-async function createDom(vnode, existing = null) {
-    if (vnode == null) {
-        return document.createTextNode("");
-    }
-    if (typeof vnode === "string" || typeof vnode === "number") {
-        return document.createTextNode(String(vnode));
-    }
-    if (vnode instanceof Promise) {
-        const placeholder = document.createTextNode("Loading...");
-        vnode
-            .then(async (resolved) => {
-            try {
-                const dom = await createDom(resolved);
-                if (placeholder.parentNode) {
-                    placeholder.replaceWith(dom);
-                }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            if (errorConfig.logToConsole) {
+                console.error("[Fynix] Component render error:", error);
             }
-            catch (err) {
-                console.error("[Fynix] Async component error:", err);
-                if (placeholder.parentNode) {
-                    placeholder.textContent = "Error loading component";
-                }
+            const handled = errorConfig.onRenderError?.(error, fiber.type);
+            if (!handled && errorConfig.showOverlay) {
+                showErrorOverlay(error);
             }
-        })
-            .catch((err) => {
-            console.error("[Fynix] Async component promise error:", err);
-            if (placeholder.parentNode) {
-                placeholder.textContent = "Error loading async component";
+            rendered = h("div", { style: "color:red" }, `Error: ${sanitizeErrorMessage(error)}`);
+        }
+        ctx._accessedStates.forEach((state) => {
+            if (!ctx._subscriptions.has(state)) {
+                if (!ctx.rerender)
+                    ctx.rerender = createRerender(ctx);
+                const unsub = state.subscribe(() => {
+                    if (ctx.rerender && ctx._isMounted) {
+                        typeof queueMicrotask === "function"
+                            ? queueMicrotask(() => ctx.rerender())
+                            : setTimeout(ctx.rerender, 0);
+                    }
+                });
+                ctx._subscriptions.add(state);
+                ctx._subscriptionCleanups.push(unsub);
             }
         });
-        return placeholder;
-    }
-    const vnodeObj = vnode;
-    if (vnodeObj.type === TEXT) {
-        const textNode = existing || document.createTextNode(vnodeObj.props.nodeValue ?? "");
-        vnodeObj._domNode = textNode;
-        return textNode;
-    }
-    if (vnodeObj.type === Fragment) {
-        const frag = document.createDocumentFragment();
-        for (const child of vnodeObj.props?.children || []) {
-            frag.appendChild(await createDom(child));
-        }
-        vnodeObj._domNode = frag;
-        return frag;
-    }
-    if (typeof vnodeObj.type === "function") {
-        const rendered = await renderMaybeAsyncComponent(vnodeObj.type, vnodeObj.props, vnodeObj);
-        vnodeObj._rendered = rendered;
-        const dom = await createDom(rendered);
-        vnodeObj._domNode = dom;
-        return dom;
-    }
-    const el = existing || document.createElement(vnodeObj.type);
-    for (const [k, v] of Object.entries(vnodeObj.props || {})) {
-        if (k !== "children") {
-            setProperty(el, k, v);
-        }
-    }
-    for (const child of vnodeObj.props?.children || []) {
-        el.appendChild(await createDom(child));
-    }
-    vnodeObj._domNode = el;
-    return el;
-}
-async function renderMaybeAsyncComponent(Component, props, vnode) {
-    const ctx = beginComponent(vnode);
-    removeErrorOverlay();
-    try {
-        const result = await Component(props);
-        ctx._vnode = vnode;
-        vnode._rendered = result;
+        setActiveContext(null);
         ctx._isMounted = true;
-        endComponent();
-        return result ?? null;
-    }
-    catch (err) {
-        console.error("[Fynix] async render error:", err);
-        showErrorOverlay(err);
-        ctx._isMounted = false;
-        endComponent();
-        return h("div", { style: "color:red" }, `Error: ${sanitizeErrorMessage(err)}`);
-    }
-}
-export async function patch(parent, newVNode, oldVNode) {
-    if (!(parent instanceof Node)) {
-        console.error("[Fynix] patch() expects a DOM Node, got:", typeof parent, parent);
-        return;
-    }
-    if (!newVNode && !oldVNode)
-        return;
-    if (!newVNode && oldVNode) {
-        const domNode = oldVNode._domNode;
-        if (domNode?.parentNode) {
-            domNode.parentNode.removeChild(domNode);
-        }
-        unmountVNode(oldVNode);
-        return;
-    }
-    if (newVNode && !oldVNode) {
-        const newDom = await createDom(newVNode);
-        if (newDom instanceof Node) {
-            parent.appendChild(newDom);
-        }
-        return;
-    }
-    const newIsPrimitive = typeof newVNode === "string" || typeof newVNode === "number";
-    const oldIsPrimitive = typeof oldVNode === "string" || typeof oldVNode === "number";
-    if (newIsPrimitive || oldIsPrimitive) {
-        if (newIsPrimitive &&
-            oldIsPrimitive &&
-            String(newVNode) === String(oldVNode))
+        vnode._rendered = rendered;
+        if (!ctx.rerender)
+            ctx.rerender = createRerender(ctx);
+        const children = rendered ? [rendered] : [];
+        this.reconcileChildren(fiber, children);
+    }
+    updateHostFiber(fiber) {
+        if (fiber.type === TEXT ||
+            (typeof fiber.type === "symbol" &&
+                fiber.type.description?.toLowerCase() === "text")) {
+            if (!fiber._domNode) {
+                fiber._domNode = document.createTextNode(String(fiber.props.nodeValue ?? ""));
+            }
+            else if (fiber.alternate) {
+                const oldText = fiber.alternate.props.nodeValue ?? "";
+                const newText = fiber.props.nodeValue ?? "";
+                if (oldText !== newText)
+                    fiber._domNode.nodeValue = String(newText);
+            }
             return;
-        const newDom = await createDom(newVNode);
-        const oldDom = oldVNode?._domNode || parent.firstChild;
-        if (oldDom?.parentNode && newDom instanceof Node) {
-            oldDom.parentNode.replaceChild(newDom, oldDom);
         }
-        if (oldVNode && typeof oldVNode === "object") {
-            unmountVNode(oldVNode);
+        if (fiber.type === Fragment ||
+            (typeof fiber.type === "symbol" &&
+                fiber.type.description?.toLowerCase() === "fragment")) {
+            if (!fiber._domNode) {
+                const start = document.createTextNode("");
+                const end = document.createTextNode("");
+                fiber._domNode = start;
+                const vnode = fiber._vnode;
+                if (vnode) {
+                    vnode._fragmentStart = start;
+                    vnode._fragmentEnd = end;
+                    fiber._fragmentEnd = end;
+                }
+                else {
+                    console.warn("[FynixReconciler] Fragment fiber created without backing VNode. This may cause cleanup issues.");
+                }
+            }
+            this.reconcileChildren(fiber, fiber.props.children || []);
+            return;
         }
-        return;
-    }
-    const newVN = newVNode;
-    const oldVN = oldVNode;
-    const newType = newVN.type;
-    const oldType = oldVN.type;
-    if (newType !== oldType) {
-        const newDom = await createDom(newVN);
-        const oldDom = oldVN._domNode;
-        if (oldDom?.parentNode && newDom instanceof Node) {
-            oldDom.parentNode.replaceChild(newDom, oldDom);
-        }
-        unmountVNode(oldVN);
-        return;
-    }
-    if (newType === TEXT) {
-        const oldDom = oldVN._domNode;
-        const newText = newVN.props.nodeValue ?? "";
-        const oldText = oldVN.props.nodeValue ?? "";
-        if (newText !== oldText && oldDom) {
-            oldDom.nodeValue = newText;
+        if (typeof fiber.type === "string") {
+            if (!fiber._domNode) {
+                fiber._domNode = createDomElement(fiber.type, fiber.props);
+                fiber.effectTag = "PLACEMENT";
+            }
+            else if (fiber.alternate) {
+                updateProps(fiber._domNode, fiber.props, fiber.alternate.props);
+                fiber.effectTag = "UPDATE";
+            }
+            this.reconcileChildren(fiber, fiber.props.children || []);
         }
-        newVN._domNode = oldDom;
-        return;
     }
-    if (newType === Fragment) {
-        const newChildren = newVN.props?.children || [];
-        const oldChildren = oldVN.props?.children || [];
-        await patchChildren(parent, newChildren, oldChildren);
-        newVN._domNode = oldVN._domNode;
-        return;
-    }
-    if (typeof newType === "function") {
-        const oldCtx = componentInstances.get(oldVN);
-        if (oldCtx && newType === oldType) {
-            componentInstances.delete(oldVN);
-            componentInstances.set(newVN, oldCtx);
-            oldCtx._vnode = newVN;
-            beginComponent(newVN);
-            const rendered = await oldCtx.Component(newVN.props);
-            endComponent();
-            newVN._rendered = rendered;
-            const oldRendered = oldVN._rendered;
-            const oldDom = oldVN._domNode;
-            if (oldDom?.parentNode instanceof Node) {
-                await patch(oldDom.parentNode, rendered, oldRendered);
-                newVN._domNode = rendered?._domNode || oldDom;
-            }
+    reconcileChildren(wipFiber, elements) {
+        const hasKeys = elements.some((e) => e?.key != null);
+        const oldMap = new Map();
+        const oldByIndex = [];
+        let oldFiber = wipFiber.alternate?.child ?? null;
+        let idx = 0;
+        while (oldFiber) {
+            if (hasKeys && oldFiber.key != null)
+                oldMap.set(oldFiber.key, oldFiber);
+            else
+                oldByIndex[idx] = oldFiber;
+            oldFiber = oldFiber.sibling;
+            idx++;
+        }
+        if (hasKeys) {
+            const newKeys = new Set(elements.filter((e) => e?.key != null).map((e) => e.key));
+            oldMap.forEach((f, k) => {
+                if (!newKeys.has(k)) {
+                    f.effectTag = "DELETION";
+                    this.deletions.push(f);
+                }
+            });
         }
-        else {
-            const rendered = await renderMaybeAsyncComponent(newType, newVN.props, newVN);
-            newVN._rendered = rendered;
-            const oldRendered = oldVN._rendered;
-            const oldDom = oldVN._domNode;
-            if (oldDom?.parentNode instanceof Node) {
-                await patch(oldDom.parentNode, rendered, oldRendered);
-                newVN._domNode = rendered?._domNode || oldDom;
+        let prevSibling = null;
+        for (let i = 0; i < elements.length; i++) {
+            const el = elements[i];
+            if (el == null)
+                continue;
+            const matchFiber = hasKeys && el.key != null
+                ? (oldMap.get(el.key) ?? null)
+                : (oldByIndex[i] ?? null);
+            let newFiber;
+            if (matchFiber && matchFiber.type === el.type) {
+                newFiber = this.cloneFiber(matchFiber);
+                newFiber.props = el.props;
+                newFiber.key = el.key;
+                newFiber.alternate = matchFiber;
+                newFiber.effectTag = "UPDATE";
+                newFiber.parent = wipFiber;
+                newFiber._vnode = el;
+                el._fiber = newFiber;
             }
             else {
-                const newDom = await createDom(rendered);
-                if (parent && newDom instanceof Node) {
-                    parent.appendChild(newDom);
+                if (matchFiber) {
+                    matchFiber.effectTag = "DELETION";
+                    this.deletions.push(matchFiber);
                 }
-                newVN._domNode = newDom;
+                newFiber = this.vnodeToFiber(el, wipFiber, null);
+                newFiber.effectTag = "PLACEMENT";
             }
-            if (oldCtx && newType !== oldType) {
-                unmountVNode(oldVN);
+            if (i === 0)
+                wipFiber.child = newFiber;
+            else if (prevSibling)
+                prevSibling.sibling = newFiber;
+            prevSibling = newFiber;
+        }
+        if (!hasKeys) {
+            for (let j = elements.length; j < oldByIndex.length; j++) {
+                const dead = oldByIndex[j];
+                if (dead) {
+                    dead.effectTag = "DELETION";
+                    this.deletions.push(dead);
+                }
             }
         }
-        return;
     }
-    const el = oldVN._domNode;
-    if (!el || el.nodeType !== 1) {
-        const newDom = await createDom(newVN);
-        if (parent && newDom instanceof Node) {
-            parent.appendChild(newDom);
-        }
-        unmountVNode(oldVN);
-        return;
+    commitRoot() {
+        if (!this.wipRoot)
+            return;
+        this.deletions.forEach((f) => this.commitDeletion(f));
+        this.deletions = [];
+        if (this.wipRoot.child)
+            this.commitWork(this.wipRoot.child);
+        this.wipRoot = null;
+        this.nextWork = null;
     }
-    updateProps(el, newVN.props, oldVN.props);
-    newVN._domNode = el;
-    const newChildren = newVN.props?.children || [];
-    const oldChildren = oldVN.props?.children || [];
-    await patchChildren(el, newChildren, oldChildren);
-}
-async function patchChildren(parent, newChildren, oldChildren) {
-    if (!(parent instanceof Node))
-        return;
-    const hasKeys = newChildren.some((c) => c?.key != null) ||
-        oldChildren.some((c) => c?.key != null);
-    if (!hasKeys) {
-        const maxLen = Math.max(newChildren.length, oldChildren.length);
-        for (let i = 0; i < maxLen; i++) {
-            const newChild = newChildren[i];
-            const oldChild = oldChildren[i];
-            if (i >= newChildren.length) {
-                const dom = oldChild?._domNode;
-                if (dom?.parentNode) {
-                    dom.parentNode.removeChild(dom);
-                }
-                unmountVNode(oldChild);
-            }
-            else if (i >= oldChildren.length) {
-                const newDom = await createDom(newChild);
-                if (newDom instanceof Node) {
-                    parent.appendChild(newDom);
-                }
+    commitWork(fiber) {
+        if (!fiber)
+            return;
+        const domParent = this.findDomParent(fiber);
+        if (fiber.effectTag === "PLACEMENT" && fiber._domNode) {
+            if (!domParent) {
+                console.warn("[FynixReconciler] No valid DOM parent found for fiber; skipping insertion");
             }
             else {
-                await patch(parent, newChild, oldChild);
+                const validContainers = domParent.nodeType === Node.ELEMENT_NODE ||
+                    domParent.nodeType === Node.DOCUMENT_NODE ||
+                    domParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+                if (!validContainers) {
+                    console.warn("[FynixReconciler] Parent node type (" +
+                        domParent.nodeType +
+                        ") cannot accept children; skipping insertion");
+                }
+                else {
+                    try {
+                        if (fiber._domNode.parentNode &&
+                            fiber._domNode.parentNode !== domParent) {
+                            try {
+                                fiber._domNode.parentNode.removeChild(fiber._domNode);
+                            }
+                            catch (e) {
+                            }
+                        }
+                        const refNode = this.findNextDomSibling(fiber);
+                        if (refNode && refNode.parentNode === domParent) {
+                            try {
+                                domParent.insertBefore(fiber._domNode, refNode);
+                            }
+                            catch (insertErr) {
+                                try {
+                                    domParent.appendChild(fiber._domNode);
+                                }
+                                catch (appendErr) {
+                                    console.error("[FynixReconciler] Failed to insert node:", appendErr);
+                                }
+                            }
+                        }
+                        else {
+                            try {
+                                domParent.appendChild(fiber._domNode);
+                            }
+                            catch (appendErr) {
+                                console.error("[FynixReconciler] Failed to append node:", appendErr);
+                            }
+                        }
+                    }
+                    catch (e) {
+                        console.error("[FynixReconciler] Unexpected error during node insertion:", e);
+                    }
+                }
             }
         }
-        return;
-    }
-    const oldKeyMap = new Map();
-    oldChildren.forEach((child) => {
-        if (child?.key != null) {
-            oldKeyMap.set(child.key, child);
-        }
-    });
-    const newKeySet = new Set(newChildren.filter((c) => c?.key != null).map((c) => c.key));
-    oldChildren.forEach((oldChild) => {
-        if (oldChild?.key != null && !newKeySet.has(oldChild.key)) {
-            const dom = oldChild._domNode;
-            if (dom?.parentNode) {
-                dom.parentNode.removeChild(dom);
+        else if (fiber.effectTag === "UPDATE") {
+            if (fiber._domNode && typeof fiber.type === "string" && fiber.alternate) {
+                updateProps(fiber._domNode, fiber.props, fiber.alternate.props);
             }
-            unmountVNode(oldChild);
         }
-    });
-    for (let i = 0; i < newChildren.length; i++) {
-        const newChild = newChildren[i];
-        const key = newChild?.key;
-        if (key != null && oldKeyMap.has(key)) {
-            const oldChild = oldKeyMap.get(key);
-            const oldDom = oldChild._domNode;
-            const childNodes = Array.from(parent.childNodes);
-            const currentPos = childNodes.indexOf(oldDom);
-            const desiredPos = i;
-            if (currentPos !== desiredPos) {
-                const refNode = childNodes[desiredPos] || null;
-                if (oldDom && oldDom.parentNode === parent) {
-                    parent.insertBefore(oldDom, refNode);
+        this.runEffects(fiber);
+        fiber.effectTag = null;
+        this.commitWork(fiber.child);
+        this.commitWork(fiber.sibling);
+    }
+    commitDeletion(fiber) {
+        this.unmountFiber(fiber);
+        const domNode = this.findNearestDom(fiber);
+        if (domNode?.parentNode)
+            domNode.parentNode.removeChild(domNode);
+    }
+    unmountFiber(fiber) {
+        if (!fiber)
+            return;
+        const stack = [fiber];
+        while (stack.length > 0) {
+            const current = stack.pop();
+            if (!current)
+                continue;
+            if (current.sibling)
+                stack.push(current.sibling);
+            if (current.child)
+                stack.push(current.child);
+            try {
+                if (current.ctx) {
+                    unmountCtx(current.ctx);
+                    if (current._vnode)
+                        componentInstances.delete(current._vnode);
                 }
+                if (current._domNode?.nodeType === 1)
+                    removeDomCleanups(current._domNode);
+            }
+            catch (e) {
+                console.error("[FynixReconciler] Error unmounting fiber:", e);
             }
-            await patch(parent, newChild, oldChild);
         }
-        else {
-            const newDom = await createDom(newChild);
-            if (newDom instanceof Node) {
-                const childNodes = Array.from(parent.childNodes);
-                const refNode = childNodes[i] || null;
-                parent.insertBefore(newDom, refNode);
+    }
+    runEffects(fiber) {
+        if (!fiber.ctx)
+            return;
+        const ctx = fiber.ctx;
+        ctx.effects.forEach((effect) => {
+            try {
+                const cleanup = effect();
+                if (typeof cleanup === "function")
+                    ctx.cleanups.push(cleanup);
             }
+            catch (e) {
+                console.error("[Fynix] Effect error:", e);
+            }
+        });
+        ctx.effects = [];
+    }
+    vnodeToFiber(vnode, parent, alternate) {
+        const fiber = {
+            type: vnode.type,
+            props: vnode.props,
+            key: vnode.key,
+            child: null,
+            sibling: null,
+            parent,
+            alternate,
+            effectTag: null,
+            updatePriority: "normal",
+            _domNode: vnode._domNode ?? null,
+            ctx: null,
+            _vnode: vnode,
+        };
+        vnode._fiber = fiber;
+        return fiber;
+    }
+    cloneFiber(fiber) {
+        return {
+            type: fiber.type,
+            props: fiber.props,
+            key: fiber.key,
+            child: null,
+            sibling: null,
+            parent: fiber.parent,
+            alternate: fiber,
+            effectTag: null,
+            updatePriority: fiber.updatePriority,
+            _domNode: fiber._domNode,
+            ctx: fiber.ctx,
+            _vnode: fiber._vnode,
+        };
+    }
+    findDomParent(fiber) {
+        let p = fiber.parent;
+        while (p && !p._domNode)
+            p = p.parent;
+        let domNode = p?._domNode ?? null;
+        while (domNode &&
+            (domNode.nodeType === Node.TEXT_NODE ||
+                domNode.nodeType === Node.COMMENT_NODE ||
+                domNode.nodeType === Node.PROCESSING_INSTRUCTION_NODE)) {
+            domNode = domNode.parentNode;
+        }
+        return domNode;
+    }
+    findNearestDom(fiber) {
+        if (fiber._domNode)
+            return fiber._domNode;
+        if (fiber.child)
+            return this.findNearestDom(fiber.child);
+        return null;
+    }
+    findNextDomSibling(fiber) {
+        let sib = fiber.sibling;
+        while (sib) {
+            const dom = this.findNearestDom(sib);
+            if (dom)
+                return dom;
+            sib = sib.sibling;
         }
+        return null;
     }
 }
-function unmountVNode(vnode) {
-    if (!vnode)
-        return;
-    if (vnode._cleanup && typeof vnode._cleanup === "function") {
-        try {
-            vnode._cleanup();
-        }
-        catch (e) {
-            console.error("[Fynix] Text vnode cleanup error:", e);
-        }
-        vnode._cleanup = null;
+const fiberReconciler = new FiberReconciler();
+export const __debug__ = {
+    getSchedulerState: () => scheduler.getState(),
+    getQueueMetrics: () => scheduler.getQueueMetrics(),
+    getFiberReconciler: () => fiberReconciler,
+    getErrorConfig: () => getErrorConfig(),
+    getPerfConfig: () => getPerfConfig(),
+    collectGarbage: () => {
+        if (typeof global !== "undefined" && global.gc) {
+            global.gc();
+        }
+        else if (typeof window !== "undefined" && window.gc) {
+            window.gc();
+        }
+    },
+    clearSchedulerQueue: () => scheduler.clearQueue(),
+    getAsyncContext: () => ({
+        currentBatchStore: getCurrentBatchStore(),
+        batchingStorageAvailable: batchingStorage !== null,
+    }),
+};
+class HierarchicalStore {
+    constructor() {
+        this.root = new Map();
+        this.selectorCache = new Map();
+        this.stateSnapshot = {};
     }
-    if (typeof vnode.type === "function") {
-        const ctx = componentInstances.get(vnode);
-        if (ctx) {
-            ctx._isMounted = false;
-            ctx._subscriptionCleanups.forEach((u) => {
-                try {
-                    u();
-                }
-                catch (e) {
-                    console.error("[Fynix] Cleanup error:", e);
-                }
-            });
-            ctx.cleanups.forEach((c) => {
-                try {
-                    c?.();
-                }
-                catch (e) {
-                    console.error("[Fynix] Effect cleanup error:", e);
+    select(selector) {
+        const k = selector.toString();
+        if (this.selectorCache.has(k))
+            return this.selectorCache.get(k);
+        const r = selector(this.stateSnapshot);
+        this.selectorCache.set(k, r);
+        return r;
+    }
+    optimisticUpdate(path, update, onRollback) {
+        const node = this.root.get(path);
+        const originalValue = node?.value;
+        const originalVersion = node?.version ?? 0;
+        this.set(path, update);
+        return {
+            commit: () => console.log(`[HierarchicalStore] Committed: ${path}`),
+            rollback: () => {
+                const cur = this.root.get(path);
+                if (cur && cur.version !== originalVersion + 1) {
+                    console.warn(`[HierarchicalStore] Rollback skipped for "${path}": concurrent update.`);
+                    return;
                 }
-            });
-            ctx._subscriptions.clear();
-            ctx._accessedStates.clear();
-            ctx._subscriptionCleanups = [];
-            ctx.cleanups = [];
-            ctx.hooks = [];
-            ctx.effects = [];
-            ctx.rerender = null;
-            ctx._vnode = null;
-            componentInstances.delete(vnode);
-            pendingRerenders.delete(ctx);
-        }
-        unmountVNode(vnode._rendered);
-        return;
+                this.set(path, originalValue);
+                onRollback?.();
+            },
+        };
     }
-    if (vnode._domNode && vnode._domNode.nodeType === 1) {
-        const anyNode = vnode._domNode;
-        const eid = anyNode._rest_eid;
-        if (eid) {
-            delegatedEvents.forEach((map) => map.delete(eid));
-        }
-        if (anyNode._fynixCleanups) {
-            anyNode._fynixCleanups.forEach((cleanup) => {
-                try {
-                    cleanup();
-                }
-                catch (e) {
-                    console.error("[Fynix] Element cleanup error:", e);
-                }
-            });
-            anyNode._fynixCleanups = null;
+    set(path, value) {
+        let node = this.root.get(path);
+        if (!node) {
+            node = {
+                path,
+                value,
+                version: 0,
+                children: new Map(),
+                subscribers: new Set(),
+            };
+            this.root.set(path, node);
         }
+        node.value = value;
+        node.version++;
+        this.stateSnapshot = { ...this.stateSnapshot, [path]: value };
+        node.subscribers.forEach((fn) => {
+            try {
+                fn();
+            }
+            catch { }
+        });
+        this.selectorCache.clear();
     }
-    if (vnode.props?.children) {
-        vnode.props.children.forEach((c) => unmountVNode(c));
-    }
-    vnode._domNode = null;
-    vnode._rendered = null;
 }
-function updateProps(el, newProps = {}, oldProps = {}) {
-    if (!el || el.nodeType !== 1)
-        return;
-    for (const k of Object.keys(oldProps)) {
-        if (k === "children")
-            continue;
-        if (!(k in newProps)) {
-            if (k.startsWith("r-")) {
-                const anyEl = el;
-                const eid = anyEl._rest_eid;
-                if (eid && delegatedEvents.has(k.slice(2).toLowerCase())) {
-                    delegatedEvents.get(k.slice(2).toLowerCase()).delete(eid);
+const hierarchicalStore = new HierarchicalStore();
+export function useHierarchicalStore() {
+    return hierarchicalStore;
+}
+let rootRenderFn = null;
+function mount(AppComponent, root, props = {}) {
+    if (typeof root === "string") {
+        const el = document.querySelector(root);
+        if (!el) {
+            console.error(`[Fynix] mount: selector "${root}" not found`);
+            return;
+        }
+        root = el;
+    }
+    const container = root;
+    container.innerHTML = "";
+    const win = window;
+    const propsToUse = win.__lastRouteProps || win.__fynix__?.lastRouteProps || props;
+    const appVNode = { type: AppComponent, props: propsToUse, key: null };
+    fiberReconciler.mountRoot(appVNode, container);
+    rootRenderFn = () => {
+        const fiber = appVNode._fiber;
+        if (fiber)
+            fiberReconciler.scheduleUpdate(fiber, "high");
+    };
+    win.__fynix__ = win.__fynix__ || {};
+    win.__fynix__.rerender = rootRenderFn;
+    if (import.meta.hot && !win.__fynix__.hmr) {
+        win.__fynix__.hmr = async ({ mod }) => {
+            try {
+                const UpdatedComponent = mod.App || mod.default;
+                if (UpdatedComponent && appVNode._fiber) {
+                    appVNode._fiber.type = UpdatedComponent;
+                    fiberReconciler.scheduleUpdate(appVNode._fiber, "high");
                 }
             }
-            else if (BOOLEAN_ATTRS.has(k.toLowerCase())) {
-                el.removeAttribute(k);
-                el[k] = false;
-            }
-            else if (DOM_PROPERTIES.has(k)) {
-                el[k] = "";
-            }
-            else {
-                el.removeAttribute(k);
+            catch (err) {
+                console.error("[Fynix HMR]", err);
+                showErrorOverlay(err);
             }
-        }
-    }
-    for (const [k, v] of Object.entries(newProps)) {
-        if (k === "children")
-            continue;
-        if (oldProps[k] !== v) {
-            setProperty(el, k, v);
-        }
+        };
+        import.meta.hot.accept();
     }
 }
-export function mount(AppComponent, root, props = {}) {
+function hydrate(AppComponent, root, props = {}) {
     if (typeof root === "string") {
-        const element = document.querySelector(root);
-        if (!element) {
-            console.error("[Fynix] Mount error: Element not found for selector:", root);
+        const el = document.querySelector(root);
+        if (!el) {
+            console.error(`[Fynix] hydrate: selector "${root}" not found`);
             return;
         }
-        root = element;
+        root = el;
     }
-    if (!(root instanceof Element)) {
-        console.error("[Fynix] Mount error: Invalid root element", root);
-        return;
+    const container = root;
+    const win = window;
+    const propsToUse = win.__lastRouteProps || win.__fynix__?.lastRouteProps || props;
+    const appVNode = { type: AppComponent, props: propsToUse, key: null };
+    if (container.firstChild)
+        appVNode._domNode = container.firstChild;
+    fiberReconciler.mountRoot(appVNode, container);
+    rootRenderFn = () => {
+        const fiber = appVNode._fiber;
+        if (fiber)
+            fiberReconciler.scheduleUpdate(fiber, "high");
+    };
+    win.__fynix__ = win.__fynix__ || {};
+    win.__fynix__.rerender = rootRenderFn;
+}
+const MEMO_VNODE_KEY = Symbol("fynix.memoVNode");
+export function memo(Component, propsAreEqual) {
+    const isEqual = propsAreEqual || shallowEqual;
+    const instanceCache = new WeakMap();
+    return function MemoizedComponent(props) {
+        const vnodeKey = props[MEMO_VNODE_KEY] ?? null;
+        let cleanProps = props;
+        if (vnodeKey) {
+            cleanProps = { ...props };
+            delete cleanProps[MEMO_VNODE_KEY];
+        }
+        if (vnodeKey) {
+            const cached = instanceCache.get(vnodeKey);
+            if (cached && isEqual(cached.props, cleanProps))
+                return cached.result;
+        }
+        const result = Component(cleanProps);
+        if (vnodeKey)
+            instanceCache.set(vnodeKey, { props: cleanProps, result });
+        return result;
+    };
+}
+const renderComponentCache = new WeakMap();
+export function renderComponent(Component, props = {}) {
+    const vnode = { type: Component, props, key: null };
+    const ctx = beginComponent(vnode);
+    ctx.Component = Component;
+    if (!ctx.rerender)
+        ctx.rerender = createRerender(ctx);
+    try {
+        removeErrorOverlay();
+        const result = Component(props);
+        if (result instanceof Promise) {
+            const placeholder = h("div", null, "Loading...");
+            ctx._vnode = vnode;
+            vnode._rendered = placeholder;
+            ctx._isMounted = true;
+            result
+                .then((resolved) => {
+                vnode._rendered = resolved;
+                renderComponentCache.set(vnode, {
+                    props,
+                    result: resolved,
+                    timestamp: performance.now(),
+                });
+                if (ctx.rerender)
+                    ctx.rerender();
+            })
+                .catch((err) => publishAsyncError(err instanceof Error ? err : new Error(String(err))));
+            return placeholder;
+        }
+        ctx._vnode = vnode;
+        vnode._rendered = result;
+        ctx._isMounted = true;
+        renderComponentCache.set(vnode, {
+            props,
+            result,
+            timestamp: performance.now(),
+        });
+        return result;
     }
-    let Component = AppComponent;
-    let oldVNode = null;
-    let currentProps = props;
-    let appVNode = null;
-    let isRendering = false;
-    async function renderApp() {
-        if (isRendering)
-            return;
-        isRendering = true;
-        try {
-            removeErrorOverlay();
-            const win = window;
-            const propsToUse = win.__lastRouteProps || win.__fynix__?.lastRouteProps || currentProps;
-            if (!appVNode) {
-                appVNode = { type: Component, props: propsToUse, key: null };
-                if (root instanceof Element) {
-                    root.innerHTML = "";
-                    const dom = await createDom(appVNode);
-                    if (dom instanceof Node) {
-                        root.appendChild(dom);
-                    }
-                }
-                else {
-                    console.error("[Fynix] Mount error: root is not a DOM Element", root);
-                    return;
-                }
-                oldVNode = appVNode;
-            }
-            else {
-                appVNode.props = propsToUse;
-                if (root instanceof Node) {
-                    await patch(root, appVNode, oldVNode);
-                    oldVNode = appVNode;
-                }
-                else {
-                    console.error("[Fynix] Patch error: root is not a DOM Node", root);
-                    return;
-                }
-            }
+    catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        if (errorConfig.logToConsole) {
+            console.error("[Fynix] Component render error:", error);
         }
-        catch (err) {
-            console.error("[Fynix] Mount error:", err);
-            showErrorOverlay(err);
+        const handled = errorConfig.onRenderError?.(error, Component);
+        if (!handled && errorConfig.showOverlay) {
+            showErrorOverlay(error);
         }
-        finally {
-            isRendering = false;
+        return h("div", { style: "color:red" }, `Error: ${sanitizeErrorMessage(error)}`);
+    }
+    finally {
+        endComponent();
+    }
+}
+export function ErrorBoundary({ fallback, children, }) {
+    let asyncError = null;
+    const handleAsyncError = (error) => {
+        asyncError = error;
+        console.error("[Fynix] ErrorBoundary caught async error:", error);
+    };
+    asyncErrorHandlers.push(handleAsyncError);
+    const removeHandler = () => {
+        const idx = asyncErrorHandlers.indexOf(handleAsyncError);
+        if (idx !== -1)
+            asyncErrorHandlers.splice(idx, 1);
+    };
+    const ctx = activeContext;
+    if (ctx)
+        ctx.cleanups.push(removeHandler);
+    try {
+        if (asyncError) {
+            removeHandler();
+            return fallback(asyncError);
         }
+        if (!children || children.length === 0)
+            return h(Fragment, null);
+        return h(Fragment, null, ...children);
     }
-    rootRenderFn = renderApp;
-    const win = window;
-    win.__fynix__ = win.__fynix__ || {};
-    win.__fynix__.rerender = renderApp;
-    renderApp();
-    if (import.meta.hot) {
-        if (!win.__fynix__.hmr) {
-            win.__fynix__.hmr = async ({ mod }) => {
-                try {
-                    const UpdatedComponent = mod.App || mod.default;
-                    if (UpdatedComponent) {
-                        Component = UpdatedComponent;
-                        if (appVNode) {
-                            appVNode.type = UpdatedComponent;
-                        }
-                        win.__fynix__.rerender?.();
-                    }
-                }
-                catch (err) {
-                    console.error("[Fynix HMR] update error:", err);
-                    showErrorOverlay(err);
-                }
-            };
-            import.meta.hot.accept();
+    catch (err) {
+        removeHandler();
+        const error = err instanceof Error ? err : new Error(String(err));
+        console.error("[Fynix] ErrorBoundary caught:", error);
+        try {
+            return fallback(error);
+        }
+        catch (fe) {
+            console.error("[Fynix] ErrorBoundary fallback also threw:", fe);
+            return h("div", { style: "color:red" }, "[ErrorBoundary] Fatal render error");
         }
     }
 }
-export { Button, createFynix, nixAsync, nixAsyncCached, nixAsyncDebounce, nixAsyncQuery, nixCallback, nixComputed, nixDebounce, nixEffect, nixEffectAlways, nixEffectOnce, nixForm, nixFormAsync, nixInterval, nixLazy, nixLazyAsync, nixLazyFormAsync, nixLocalStorage, nixMemo, nixPrevious, nixRef, nixState, nixStore, Path, Suspense, };
+export { Button, createFynix, nixAsync, nixAsyncCached, nixAsyncDebounce, nixAsyncQuery, nixCallback, nixComputed, nixDebounce, nixEffect, nixEffectAlways, nixEffectOnce, nixForm, nixFormAsync, nixInterval, nixLazy, nixLazyAsync, nixLazyFormAsync, nixLocalStorage, nixMemo, nixPrevious, nixRef, nixState, nixStore, Path, Suspense, mount, hydrate, fiberReconciler, };