fibrae 0.2.3 → 0.3.1

package/dist/fiber-render.js

@@ -1,952 +1,31 @@
 /**
- * Fiber-based rendering implementation.
+ * Fiber-based rendering — public API and orchestration.
  *
- * This module implements a proper fiber reconciliation system that:
- * - Uses a fiber tree for incremental rendering
- * - Supports key-based diffing for efficient list updates
- * - Two-phase rendering: render phase builds fiber tree, commit phase touches DOM
- * - Function components have `dom: Option.none()` - no wrapper spans!
+ * This module provides:
+ * - `renderFiber` — mount a VElement tree to the DOM
+ * - `hydrateFiber` — hydrate an existing SSR DOM tree
+ * - `renderMailboxConsumer` — batched re-render work loop
  *
- * This fixes SSR hydration by producing identical DOM structure on server and client.
+ * The actual reconciliation, commit, boundary, and tree logic
+ * are split across fiber-tree, fiber-update, fiber-commit, and fiber-boundary.
  */
 import * as Effect from "effect/Effect";
 import * as Stream from "effect/Stream";
-import * as Scope from "effect/Scope";
 import * as Ref from "effect/Ref";
-import * as Exit from "effect/Exit";
 import * as Option from "effect/Option";
 import * as Deferred from "effect/Deferred";
 import * as Context from "effect/Context";
 import * as FiberRef from "effect/FiberRef";
-import * as Cause from "effect/Cause";
 import { Atom, Registry as AtomRegistry } from "@effect-atom/atom";
-import { ComponentScope, RenderError, StreamError, EventHandlerError, isEvent, isProperty, isStream, } from "./shared.js";
-import { FibraeRuntime, runForkWithRuntime } from "./runtime.js";
-import { setDomProperty, attachEventListeners } from "./dom.js";
+import { ComponentScope, isStream, } from "./shared.js";
+import { FibraeRuntime } from "./runtime.js";
+import { attachEventListeners } from "./dom.js";
 import { normalizeToStream, makeTrackingRegistry } from "./tracking.js";
-// =============================================================================
-// Stream Subscription Helper
-// =============================================================================
-/**
- * Subscribe to a component's output stream, handling first value and subsequent emissions.
- *
- * Returns a deferred that will be completed with the first emitted value.
- * Subsequent emissions update latestStreamValue and queue re-renders.
- * Errors are forwarded to handleFiberError.
- *
- * @param stream - The component's output stream
- * @param fiberRef - Mutable reference to the current fiber (for re-renders after reconciliation)
- * @param scope - Scope to fork the subscription into
- *
- * @typeParam E - Error type for the deferred (use `never` for die mode, stream error type for fail mode)
- */
-const subscribeComponentStream = (stream, fiberRef, scope) => Effect.gen(function* () {
-    const firstValueDeferred = yield* Deferred.make();
-    const subscription = Stream.runForEach(stream, (vElement) => Effect.gen(function* () {
-        const done = yield* Deferred.isDone(firstValueDeferred);
-        const currentFiber = fiberRef.current;
-        if (!done) {
-            yield* Deferred.succeed(firstValueDeferred, vElement);
-        }
-        else {
-            // Subsequent emissions - queue re-render
-            currentFiber.latestStreamValue = Option.some(vElement);
-            yield* queueFiberForRerender(currentFiber);
-        }
-    })).pipe(Effect.catchAllCause((cause) => Effect.gen(function* () {
-        const done = yield* Deferred.isDone(firstValueDeferred);
-        const streamError = new StreamError({
-            cause: Cause.squash(cause),
-            phase: done ? "after-first-emission" : "before-first-emission",
-        });
-        if (!done) {
-            // Fail the deferred with StreamError so awaiting code gets the typed error
-            yield* Deferred.fail(firstValueDeferred, streamError);
-        }
-        const currentFiber = fiberRef.current;
-        yield* handleFiberError(currentFiber, streamError);
-    })));
-    yield* Effect.forkIn(subscription, scope);
-    return firstValueDeferred;
-});
-// =============================================================================
-// Fiber Creation Helpers
-// =============================================================================
-const createFiber = (type, props, parent, alternate, effectTag) => ({
-    type,
-    props,
-    dom: Option.none(),
-    parent,
-    child: Option.none(),
-    sibling: Option.none(),
-    alternate,
-    effectTag,
-    componentScope: Option.none(),
-    mountedDeferred: Option.none(),
-    accessedAtoms: Option.none(),
-    latestStreamValue: Option.none(),
-    childFirstCommitDeferred: Option.none(),
-    fiberRef: Option.none(),
-    isMultiEmissionStream: false,
-    boundary: Option.none(),
-    suspense: Option.none(),
-    renderContext: Option.none(),
-    isParked: false,
-    isUnparking: false,
-});
-/**
- * Check if a fiber's type matches a specific element type string.
- */
-const fiberTypeIs = (fiber, expected) => fiber.type.pipe(Option.map((t) => t === expected), Option.getOrElse(() => false));
-/**
- * Check if a fiber's type is a function (i.e., a function component).
- */
-const fiberTypeIsFunction = (fiber) => fiber.type.pipe(Option.map((t) => typeof t === "function"), Option.getOrElse(() => false));
-/**
- * Check if a fiber is a virtual element (no DOM node created).
- * Returns true for root fiber (no type) or FRAGMENT type.
- */
-const fiberIsVirtualElement = (fiber) => fiber.type.pipe(Option.map((t) => t === "FRAGMENT"), Option.getOrElse(() => true));
-/**
- * Get a fiber's required componentScope or die with a message.
- */
-const getComponentScopeOrDie = (fiber, msg) => Option.match(fiber.componentScope, {
-    onNone: () => Effect.die(msg),
-    onSome: (s) => Effect.succeed(s),
-});
-/**
- * Get the full ComponentScope service value (scope + mounted) for a fiber.
- */
-const getComponentScopeService = (fiber, msg) => Effect.gen(function* () {
-    const scope = yield* getComponentScopeOrDie(fiber, msg);
-    const mounted = yield* Option.match(fiber.mountedDeferred, {
-        onNone: () => Effect.die(`${msg} (missing mountedDeferred)`),
-        onSome: (d) => Effect.succeed(d),
-    });
-    return { scope, mounted };
-});
-// =============================================================================
-// Queue Fiber for Re-render (batched updates)
-// =============================================================================
-const queueFiberForRerender = (fiber) => Effect.gen(function* () {
-    const runtime = yield* FibraeRuntime;
-    const stateRef = runtime.fiberState;
-    const didSchedule = yield* Ref.modify(stateRef, (s) => {
-        const alreadyQueued = s.renderQueue.has(fiber);
-        const newQueue = alreadyQueued ? s.renderQueue : new Set([...s.renderQueue, fiber]);
-        const shouldScheduleNow = !s.batchScheduled;
-        const next = {
-            ...s,
-            renderQueue: newQueue,
-            batchScheduled: s.batchScheduled || shouldScheduleNow,
-        };
-        return [shouldScheduleNow, next];
-    });
-    if (didSchedule) {
-        queueMicrotask(() => {
-            runForkWithRuntime(runtime)(processBatch());
-        });
-    }
-});
-// =============================================================================
-// Process Batch (handles queued re-renders)
-// =============================================================================
-const processBatch = () => Effect.gen(function* () {
-    const runtime = yield* FibraeRuntime;
-    const stateRef = runtime.fiberState;
-    const stateSnapshot = yield* Ref.get(stateRef);
-    const batch = Array.from(stateSnapshot.renderQueue);
-    // Clear the queue but keep batchScheduled = true to prevent concurrent batches
-    yield* Ref.update(stateRef, (s) => ({
-        ...s,
-        renderQueue: new Set(),
-        // DO NOT set batchScheduled = false here - keep it true during workLoop
-    }));
-    if (batch.length === 0) {
-        // No work to do - reset batchScheduled
-        yield* Ref.update(stateRef, (s) => ({ ...s, batchScheduled: false }));
-        return;
-    }
-    yield* Option.match(stateSnapshot.currentRoot, {
-        onNone: () => Effect.void,
-        onSome: (currentRoot) => Effect.gen(function* () {
-            yield* Ref.update(stateRef, (s) => ({
-                ...s,
-                wipRoot: Option.some(createFiber(currentRoot.type, currentRoot.props, Option.none(), Option.some(currentRoot), Option.none())),
-                deletions: [],
-            }));
-            // Copy dom from currentRoot to wipRoot
-            const newState = yield* Ref.get(stateRef);
-            Option.match(newState.wipRoot, {
-                onNone: () => { },
-                onSome: (wip) => {
-                    wip.dom = currentRoot.dom;
-                },
-            });
-            yield* Ref.update(stateRef, (s) => ({
-                ...s,
-                nextUnitOfWork: s.wipRoot,
-            }));
-            yield* workLoop(runtime);
-        }),
-    });
-    // After workLoop completes, check if more work was queued during processing
-    const afterState = yield* Ref.get(stateRef);
-    if (afterState.renderQueue.size > 0) {
-        // More work was queued during the batch - process it immediately
-        yield* processBatch();
-    }
-    else {
-        // No more work - allow new batches to be scheduled
-        yield* Ref.update(stateRef, (s) => ({ ...s, batchScheduled: false }));
-    }
-});
-// =============================================================================
-// Fiber Tree Walking Helpers
-// =============================================================================
-/**
- * Walk up the fiber tree from the starting fiber's parent, returning the first
- * ancestor that matches the predicate (excludes the starting fiber itself).
- */
-const findAncestorExcludingSelf = (fiber, predicate) => {
-    let current = fiber.parent;
-    while (Option.isSome(current)) {
-        if (predicate(current.value))
-            return current;
-        current = current.value.parent;
-    }
-    return Option.none();
-};
-/**
- * Link an array of fibers as siblings under a parent fiber.
- * Sets parent.child to the first fiber and chains the rest via sibling pointers.
- */
-const linkFibersAsSiblings = (fibers, parent) => {
-    if (fibers.length === 0) {
-        parent.child = Option.none();
-        return;
-    }
-    parent.child = Option.some(fibers[0]);
-    for (let i = 1; i < fibers.length; i++) {
-        fibers[i - 1].sibling = Option.some(fibers[i]);
-    }
-};
-/**
- * Find the nearest ancestor with a DOM node (walks up from parent).
- */
-const findDomParent = (fiber) => {
-    const ancestor = findAncestorExcludingSelf(fiber, (f) => Option.isSome(f.dom));
-    return Option.flatMap(ancestor, (f) => f.dom);
-};
-// =============================================================================
-// Error Boundary Support
-// =============================================================================
-/** Find nearest BOUNDARY by walking up the fiber tree */
-const findNearestBoundary = (fiber) => findAncestorExcludingSelf(fiber, (f) => Option.isSome(f.boundary));
-/**
- * Convert a raw cause/error to a ComponentError.
- * If it's already a ComponentError, return as-is.
- * Otherwise, wrap in RenderError as a fallback.
- */
-const toComponentError = (cause) => {
-    // Check if it's already a ComponentError
-    if (cause instanceof RenderError ||
-        cause instanceof StreamError ||
-        cause instanceof EventHandlerError) {
-        return cause;
-    }
-    // Extract the actual error from Cause if needed
-    const actualError = Cause.isCause(cause) ? Cause.squash(cause) : cause;
-    if (actualError instanceof RenderError ||
-        actualError instanceof StreamError ||
-        actualError instanceof EventHandlerError) {
-        return actualError;
-    }
-    // Wrap unknown errors as RenderError
-    return new RenderError({ cause: actualError });
-};
-/**
- * Handle an error by finding the nearest error boundary and invoking its handler.
- *
- * Finds the nearest BOUNDARY and calls its onError callback to fail the stream.
- * The Stream.catchTags in user code will produce the fallback.
- */
-const handleFiberError = (fiber, cause) => Effect.gen(function* () {
-    const componentError = toComponentError(cause);
-    // Find nearest boundary
-    const boundaryOpt = findNearestBoundary(fiber);
-    return yield* Option.match(boundaryOpt, {
-        onNone: () => Effect.gen(function* () {
-            yield* Effect.logError("Unhandled error without any error boundary", componentError);
-            return Option.none();
-        }),
-        onSome: (boundary) => Effect.sync(() => {
-            // Call onError to fail the stream
-            const cfg = Option.getOrThrow(boundary.boundary);
-            cfg.onError(componentError);
-            cfg.hasError = true;
-            // The stream will fail and catchTags will produce fallback
-            // which will trigger a re-render via the stream subscription
-            return Option.none();
-        }),
-    });
-});
-// =============================================================================
-// Suspense Support
-// =============================================================================
-/**
- * Find the nearest Suspense boundary by walking up the fiber tree.
- */
-const findNearestSuspenseBoundary = (fiber) => findAncestorExcludingSelf(fiber, (f) => Option.isSome(f.suspense));
-/**
- * Get the threshold from the nearest Suspense boundary.
- * Returns 0 if no boundary (wait indefinitely).
- */
-const getSuspenseThreshold = (fiber) => {
-    const boundary = findNearestSuspenseBoundary(fiber);
-    return boundary.pipe(Option.flatMap((b) => b.suspense), Option.map((cfg) => cfg.threshold), Option.getOrElse(() => 0));
-};
-/**
- * Called when a stream component's threshold expires before first emission.
- * Parks the fiber and switches the boundary to show fallback.
- */
-const handleFiberSuspension = (fiber) => Effect.gen(function* () {
-    const boundaryOpt = findNearestSuspenseBoundary(fiber);
-    if (Option.isNone(boundaryOpt)) {
-        // No Suspense boundary - just continue waiting
-        return;
-    }
-    const boundary = boundaryOpt.value;
-    const config = Option.getOrThrow(boundary.suspense);
-    if (config.showingFallback) {
-        // Already suspended - first suspension wins
-        return;
-    }
-    // Create deferred for parked fiber completion
-    const parkedComplete = yield* Deferred.make();
-    // Mark fiber as parked - its scope should not be closed on deletion
-    fiber.isParked = true;
-    // Park the fiber and switch to fallback
-    config.showingFallback = true;
-    config.parkedFiber = Option.some(fiber);
-    config.parkedComplete = Option.some(parkedComplete);
-    // Trigger re-render of boundary with fallback
-    yield* queueFiberForRerender(boundary);
-});
-/**
- * Called when a parked fiber finally gets its first emission.
- * Signals the boundary to swap back to showing children.
- */
-const signalFiberReady = (fiber) => Effect.gen(function* () {
-    const boundaryOpt = findNearestSuspenseBoundary(fiber);
-    if (Option.isNone(boundaryOpt))
-        return;
-    const boundary = boundaryOpt.value;
-    const config = Option.getOrThrow(boundary.suspense);
-    // Unpark the fiber - it's ready now, scope can be closed normally on next deletion
-    fiber.isParked = false;
-    // Signal that parked fiber is ready
-    yield* config.parkedComplete.pipe(Option.map((deferred) => Deferred.succeed(deferred, undefined)), Option.getOrElse(() => Effect.void));
-    // Trigger re-render to swap fallback → children
-    yield* queueFiberForRerender(boundary);
-});
-// =============================================================================
-// Update Function Component
-// =============================================================================
-const updateFunctionComponent = (fiber, runtime) => Effect.gen(function* () {
-    // Initialize deferred for child first commit signaling
-    if (Option.isNone(fiber.childFirstCommitDeferred)) {
-        fiber.childFirstCommitDeferred = Option.some(yield* Deferred.make());
-    }
-    // Capture current context during render phase for event handlers in commit phase
-    // This includes services like Navigator, RouterHandlers, etc.
-    const currentContext = (yield* FiberRef.get(FiberRef.currentContext));
-    fiber.renderContext = Option.some(currentContext);
-    // Check if we can reuse cached stream value from alternate
-    const hasAlternate = Option.isSome(fiber.alternate);
-    const hasCachedValue = fiber.alternate.pipe(Option.map((alt) => Option.isSome(alt.latestStreamValue) && alt.isMultiEmissionStream), Option.getOrElse(() => false));
-    if (hasAlternate && hasCachedValue) {
-        // Reuse cached value from alternate (stream component that emitted multiple values)
-        const alt = Option.getOrThrow(fiber.alternate);
-        const vElement = Option.getOrThrow(alt.latestStreamValue);
-        fiber.latestStreamValue = alt.latestStreamValue;
-        fiber.accessedAtoms = alt.accessedAtoms;
-        fiber.componentScope = alt.componentScope;
-        alt.componentScope = Option.none(); // Transfer ownership
-        fiber.fiberRef = alt.fiberRef;
-        Option.match(fiber.fiberRef, {
-            onNone: () => { },
-            onSome: (ref) => {
-                ref.current = fiber;
-            },
-        });
-        fiber.isMultiEmissionStream = alt.isMultiEmissionStream;
-        yield* reconcileChildren(fiber, [vElement]);
-        return;
-    }
-    // Check if this fiber is being restored from parked (suspended) state
-    // If so, skip re-execution and use the cached latestStreamValue
-    if (fiber.isUnparking && Option.isSome(fiber.latestStreamValue)) {
-        fiber.isUnparking = false; // Clear flag
-        const vElement = Option.getOrThrow(fiber.latestStreamValue);
-        yield* reconcileChildren(fiber, [vElement]);
-        return;
-    }
-    // Create scope for this component FIRST so it's available in context
-    yield* resubscribeFiber(fiber);
-    const componentScopeService = yield* getComponentScopeService(fiber, "Expected componentScope to be created by resubscribeFiber");
-    // Set up atom tracking
-    const accessedAtoms = new Set();
-    const trackingRegistry = makeTrackingRegistry(runtime.registry, accessedAtoms);
-    fiber.accessedAtoms = Option.some(accessedAtoms);
-    // Build context with tracking registry AND ComponentScope
-    // This allows Effect components to yield* ComponentScope for cleanup registration
-    const contextWithTracking = Context.add(Context.add(currentContext, ComponentScope, componentScopeService), AtomRegistry.AtomRegistry, trackingRegistry);
-    // Invoke the component
-    const output = yield* Option.match(fiber.type, {
-        onNone: () => Effect.die("updateFunctionComponent called with no type"),
-        onSome: (type) => {
-            if (typeof type !== "function") {
-                return Effect.die("updateFunctionComponent called with non-function type");
-            }
-            const component = type;
-            return Effect.sync(() => component(fiber.props));
-        },
-    });
-    // Fast path: if component returns a plain VElement (not Effect/Stream),
-    // and it's a special element type, just reconcile directly without stream machinery.
-    // This handles wrapper components like Suspense and ErrorBoundary efficiently.
-    if (!Effect.isEffect(output) && !isStream(output)) {
-        const vElement = output;
-        if (typeof vElement === "object" && vElement !== null && "type" in vElement) {
-            const elementType = vElement.type;
-            if (elementType === "SUSPENSE" || elementType === "FRAGMENT") {
-                // Simple wrapper component - just reconcile with the VElement directly
-                yield* reconcileChildren(fiber, [vElement]);
-                return;
-            }
-        }
-    }
-    // Check if it's a multi-emission stream
-    fiber.isMultiEmissionStream = isStream(output);
-    // Normalize to stream and provide context
-    const stream = normalizeToStream(output).pipe(Stream.provideContext(contextWithTracking));
-    // Set up fiber ref for stream subscriptions
-    const fiberRef = fiber.fiberRef.pipe(Option.getOrElse(() => ({ current: fiber })));
-    fiber.fiberRef = Option.some(fiberRef);
-    // Subscribe to component stream - errors become defects via "die" mode
-    const firstValueDeferred = yield* subscribeComponentStream(stream, fiberRef, componentScopeService.scope);
-    // Get threshold from nearest Suspense boundary
-    const threshold = getSuspenseThreshold(fiber);
-    if (threshold > 0) {
-        // Race first value vs threshold
-        const result = yield* Effect.race(Deferred.await(firstValueDeferred).pipe(Effect.map((v) => ({ _tag: "value", value: v }))), Effect.sleep(`${threshold} millis`).pipe(Effect.map(() => ({ _tag: "timeout" }))));
-        if (result._tag === "timeout") {
-            // Threshold expired - signal suspension to boundary
-            yield* handleFiberSuspension(fiber);
-            // Fork background work: wait for value, then signal ready
-            // This allows the render loop to continue and show fallback
-            yield* Effect.forkIn(Effect.gen(function* () {
-                const value = yield* Deferred.await(firstValueDeferred);
-                const currentFiber = fiberRef.current;
-                currentFiber.latestStreamValue = Option.some(value);
-                yield* signalFiberReady(currentFiber);
-            }), componentScopeService.scope);
-            // Return early - don't reconcile children yet
-            // The Suspense boundary will show fallback via queued re-render
-            return;
-        }
-        else {
-            // Value arrived before threshold - no suspension
-            fiber.latestStreamValue = Option.some(result.value);
-            yield* reconcileChildren(fiber, [result.value]);
-        }
-    }
-    else {
-        // No threshold (0) - wait indefinitely, no suspension possible
-        const firstVElement = yield* Deferred.await(firstValueDeferred);
-        fiber.latestStreamValue = Option.some(firstVElement);
-        yield* reconcileChildren(fiber, [firstVElement]);
-    }
-    // Subscribe to atom changes
-    yield* subscribeFiberAtoms(fiber, accessedAtoms, runtime);
-});
-// =============================================================================
-// Perform Unit of Work
-// =============================================================================
-const performUnitOfWork = (fiber, runtime) => Effect.gen(function* () {
-    const isFunctionComponent = fiberTypeIsFunction(fiber);
-    const eff = isFunctionComponent
-        ? updateFunctionComponent(fiber, runtime)
-        : updateHostComponent(fiber, runtime);
-    const exited = yield* Effect.exit(eff);
-    if (Exit.isFailure(exited)) {
-        // handleFiberError returns the next fiber to process (if recovery happened)
-        return yield* handleFiberError(fiber, exited.cause);
-    }
-    // Return next unit of work: child, then sibling, then uncle
-    if (Option.isSome(fiber.child)) {
-        return fiber.child;
-    }
-    let currentFiber = Option.some(fiber);
-    while (Option.isSome(currentFiber)) {
-        if (Option.isSome(currentFiber.value.sibling)) {
-            return currentFiber.value.sibling;
-        }
-        currentFiber = currentFiber.value.parent;
-    }
-    return Option.none();
-});
-// =============================================================================
-// Atom Subscription
-// =============================================================================
-const resubscribeFiber = (fiber) => Effect.gen(function* () {
-    // Close old scope if exists
-    yield* Option.match(fiber.componentScope, {
-        onNone: () => Effect.void,
-        onSome: (scope) => Scope.close(scope, Exit.void),
-    });
-    // Create new scope and mounted deferred
-    const newScope = yield* Scope.make();
-    const newMounted = yield* Deferred.make();
-    fiber.componentScope = Option.some(newScope);
-    fiber.mountedDeferred = Option.some(newMounted);
-});
-const subscribeFiberAtoms = (fiber, accessedAtoms, runtime) => Effect.gen(function* () {
-    const scope = yield* getComponentScopeOrDie(fiber, "subscribeFiberAtoms requires an existing componentScope");
-    yield* Effect.forEach(accessedAtoms, (atom) => {
-        // Drop first emission (current value), subscribe to changes
-        const atomStream = AtomRegistry.toStream(runtime.registry, atom).pipe(Stream.drop(1));
-        const subscription = Stream.runForEach(atomStream, () => queueFiberForRerender(fiber));
-        return Effect.forkIn(subscription, scope);
-    }, { discard: true, concurrency: "unbounded" });
-});
-// =============================================================================
-// Update Host Component
-// =============================================================================
-const updateHostComponent = (fiber, runtime) => Effect.gen(function* () {
-    // Inherit renderContext from parent fiber (function components capture it during render)
-    // This propagates Navigator, RouterHandlers, etc. down to host elements for event handlers
-    if (Option.isNone(fiber.renderContext) && Option.isSome(fiber.parent)) {
-        fiber.renderContext = fiber.parent.value.renderContext;
-    }
-    // Handle BOUNDARY specially (Effect-native error boundary API)
-    const isBoundary = fiberTypeIs(fiber, "BOUNDARY");
-    if (isBoundary) {
-        const boundaryId = fiber.props.boundaryId;
-        const onError = fiber.props.onError;
-        // Inherit boundary state from alternate (previous render) if present
-        // This preserves hasError state across re-renders
-        if (Option.isNone(fiber.boundary) && Option.isSome(fiber.alternate)) {
-            const alt = fiber.alternate.value;
-            if (Option.isSome(alt.boundary)) {
-                fiber.boundary = alt.boundary;
-            }
-        }
-        // Initialize boundary config if not already set
-        if (Option.isNone(fiber.boundary)) {
-            fiber.boundary = Option.some({
-                boundaryId,
-                onError,
-                hasError: false,
-            });
-        }
-        // Render children (BOUNDARY doesn't have fallback state -
-        // the fallback is handled by Stream.catchTags in userland)
-        const children = fiber.props.children;
-        yield* reconcileChildren(fiber, children || []);
-        return;
-    }
-    // Handle SUSPENSE specially
-    const isSuspense = fiberTypeIs(fiber, "SUSPENSE");
-    if (isSuspense) {
-        const fallback = fiber.props.fallback;
-        const threshold = fiber.props.threshold ?? 100;
-        const children = fiber.props.children;
-        // Initialize suspense config if not already set
-        if (Option.isNone(fiber.suspense)) {
-            fiber.suspense = Option.some({
-                fallback,
-                threshold,
-                showingFallback: false,
-                parkedFiber: Option.none(),
-                parkedComplete: Option.none(),
-            });
-        }
-        const config = Option.getOrThrow(fiber.suspense);
-        // Check if parked fiber has completed (signaled via signalFiberReady)
-        const parkedDone = yield* config.parkedComplete.pipe(Option.map((d) => Deferred.isDone(d)), Option.getOrElse(() => Effect.succeed(false)));
-        if (parkedDone && config.showingFallback) {
-            // Parked fiber is ready - switch back to showing its content
-            config.showingFallback = false;
-            // Mark the fallback child from alternate (previous render) for deletion
-            // The fallback fiber is in the alternate's child, not the current fiber's child
-            yield* Option.match(fiber.alternate, {
-                onNone: () => Effect.void,
-                onSome: (alt) => Option.match(alt.child, {
-                    onNone: () => Effect.void,
-                    onSome: (fallbackChild) => Effect.gen(function* () {
-                        fallbackChild.effectTag = Option.some("DELETION");
-                        yield* Ref.update(runtime.fiberState, (s) => ({
-                            ...s,
-                            deletions: [...s.deletions, fallbackChild],
-                        }));
-                    }),
-                }),
-            });
-            // Reuse the parked fiber directly - it already has latestStreamValue
-            const parkedFiber = Option.getOrThrow(config.parkedFiber);
-            // Re-parent the parked fiber under this suspense boundary
-            parkedFiber.parent = Option.some(fiber);
-            parkedFiber.sibling = Option.none();
-            parkedFiber.effectTag = Option.some("PLACEMENT");
-            // Mark as unparking - this tells updateFunctionComponent to skip re-execution
-            parkedFiber.isUnparking = true;
-            // Set as child of this boundary
-            fiber.child = Option.some(parkedFiber);
-            // Clear parked state
-            config.parkedFiber = Option.none();
-            config.parkedComplete = Option.none();
-            // Don't reconcile here - let performUnitOfWork handle it
-            // The work loop will process parkedFiber next, and updateFunctionComponent
-            // will see isUnparking=true and use the cached latestStreamValue
-            return;
-        }
-        if (config.showingFallback) {
-            // Show fallback while children are suspended
-            yield* reconcileChildren(fiber, [fallback]);
-        }
-        else {
-            // Show children normally (they'll race against threshold in updateFunctionComponent)
-            yield* reconcileChildren(fiber, children || []);
-        }
-        return;
-    }
-    // Virtual element types don't create DOM - just reconcile children
-    const isVirtualElement = fiberIsVirtualElement(fiber);
-    if (!isVirtualElement && Option.isNone(fiber.dom)) {
-        fiber.dom = Option.some(yield* createDom(fiber, runtime));
-    }
-    const children = fiber.props.children;
-    yield* reconcileChildren(fiber, children || []);
-});
-const createDom = (fiber, runtime) => Effect.gen(function* () {
-    const dom = yield* Option.match(fiber.type, {
-        onNone: () => Effect.die("createDom called with no type"),
-        onSome: (type) => {
-            if (typeof type !== "string") {
-                return Effect.die("createDom called on function component");
-            }
-            const node = type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(type);
-            return Effect.succeed(node);
-        },
-    });
-    yield* updateDom(dom, {}, fiber.props, fiber, runtime);
-    // Handle ref
-    Option.match(Option.fromNullable(fiber.props.ref), {
-        onNone: () => { },
-        onSome: (ref) => {
-            if (typeof ref === "object" && "current" in ref) {
-                ref.current = dom;
-            }
-        },
-    });
-    return dom;
-});
-// =============================================================================
-// Update DOM
-// =============================================================================
-const isNew = (prev, next) => (key) => prev[key] !== next[key];
-const updateDom = (dom, prevProps, nextProps, ownerFiber, runtime) => Effect.gen(function* () {
-    const stateRef = runtime.fiberState;
-    const element = dom;
-    if (element instanceof Text) {
-        if (nextProps.nodeValue !== prevProps.nodeValue) {
-            const value = nextProps.nodeValue;
-            element.nodeValue =
-                typeof value === "string" || typeof value === "number" ? String(value) : "";
-        }
-        return;
-    }
-    const stateSnapshot = yield* Ref.get(stateRef);
-    const el = element;
-    const stored = stateSnapshot.listenerStore.get(el) ?? {};
-    // Remove old event listeners
-    const eventsToRemove = Object.keys(prevProps)
-        .filter(isEvent)
-        .filter((key) => !(key in nextProps) || isNew(prevProps, nextProps)(key));
-    for (const name of eventsToRemove) {
-        const eventType = name.toLowerCase().substring(2);
-        const wrapper = stored[eventType];
-        if (wrapper) {
-            el.removeEventListener(eventType, wrapper);
-            delete stored[eventType];
-        }
-    }
-    // Remove properties that were in prevProps but not in nextProps
-    Object.keys(prevProps)
-        .filter(isProperty)
-        .filter((key) => !(key in nextProps))
-        .forEach((name) => {
-        if (el instanceof HTMLElement) {
-            setDomProperty(el, name, null);
-        }
-    });
-    // Update changed properties
-    Object.keys(nextProps)
-        .filter(isProperty)
-        .filter(isNew(prevProps, nextProps))
-        .forEach((name) => {
-        if (el instanceof HTMLElement) {
-            setDomProperty(el, name, nextProps[name]);
-        }
-    });
-    // Add new event listeners
-    Object.keys(nextProps)
-        .filter(isEvent)
-        .filter(isNew(prevProps, nextProps))
-        .forEach((name) => {
-        const eventType = name.toLowerCase().substring(2);
-        const handler = nextProps[name];
-        const wrapper = (event) => {
-            const result = handler(event);
-            if (Effect.isEffect(result)) {
-                // Use runForkWithRuntime to get the full application context
-                // This provides Navigator, FibraeRuntime, AtomRegistry, etc.
-                const effectWithErrorHandling = result.pipe(Effect.catchAllCause((cause) => {
-                    // Convert to EventHandlerError with the event type
-                    const error = new EventHandlerError({
-                        cause: Cause.squash(cause),
-                        eventType,
-                    });
-                    return ownerFiber ? handleFiberError(ownerFiber, error) : Effect.void;
-                }));
-                runForkWithRuntime(runtime)(effectWithErrorHandling);
-            }
-        };
-        const existing = stored[eventType];
-        if (existing) {
-            el.removeEventListener(eventType, existing);
-        }
-        el.addEventListener(eventType, wrapper);
-        stored[eventType] = wrapper;
-    });
-    stateSnapshot.listenerStore.set(el, stored);
-});
-// =============================================================================
-// Reconcile Children (key-based diffing)
-// =============================================================================
-const reconcileChildren = (wipFiber, elements) => Effect.gen(function* () {
-    const runtime = yield* FibraeRuntime;
-    const stateRef = runtime.fiberState;
-    // Collect old children from alternate
-    const oldChildren = [];
-    if (Option.isSome(wipFiber.alternate)) {
-        let current = wipFiber.alternate.value.child;
-        while (Option.isSome(current)) {
-            oldChildren.push(current.value);
-            current = current.value.sibling;
-        }
-    }
-    const getKey = (props) => Option.fromNullable(props ? props.key : undefined);
-    // Build maps for keyed and unkeyed old fibers
-    const oldByKey = new Map();
-    const oldUnkeyed = [];
-    for (const f of oldChildren) {
-        const keyOpt = getKey(f.props);
-        Option.match(keyOpt, {
-            onNone: () => oldUnkeyed.push(f),
-            onSome: (key) => oldByKey.set(key, f),
-        });
-    }
-    const newFibers = [];
-    for (const element of elements) {
-        let matchedOldOpt = Option.none();
-        const keyOpt = getKey(element.props);
-        // Try to match by key first
-        matchedOldOpt = Option.match(keyOpt, {
-            onNone: () => Option.none(),
-            onSome: (key) => {
-                const maybe = Option.fromNullable(oldByKey.get(key));
-                Option.match(maybe, {
-                    onNone: () => { },
-                    onSome: () => oldByKey.delete(key),
-                });
-                return maybe;
-            },
-        });
-        // Fall back to type matching for unkeyed elements
-        if (Option.isNone(matchedOldOpt)) {
-            const idx = oldUnkeyed.findIndex((f) => Option.match(f.type, {
-                onNone: () => false,
-                onSome: (fType) => fType === element.type,
-            }));
-            if (idx >= 0) {
-                matchedOldOpt = Option.some(oldUnkeyed[idx]);
-                oldUnkeyed.splice(idx, 1);
-            }
-        }
-        // Create new fiber based on match
-        const newFiber = yield* Option.match(matchedOldOpt, {
-            onNone: () => Effect.succeed(createFiber(Option.some(element.type), element.props, Option.some(wipFiber), Option.none(), Option.some("PLACEMENT"))),
-            onSome: (matched) => Effect.gen(function* () {
-                const typeMatches = Option.match(matched.type, {
-                    onNone: () => false,
-                    onSome: (mType) => mType === element.type,
-                });
-                if (typeMatches) {
-                    // UPDATE - reuse DOM, update props
-                    const fiber = createFiber(matched.type, element.props, Option.some(wipFiber), matchedOldOpt, Option.some("UPDATE"));
-                    fiber.dom = matched.dom;
-                    fiber.boundary = matched.boundary;
-                    fiber.suspense = matched.suspense;
-                    return fiber;
-                }
-                else {
-                    // Type changed - delete old, create new
-                    matched.effectTag = Option.some("DELETION");
-                    yield* Ref.update(stateRef, (s) => ({
-                        ...s,
-                        deletions: [...s.deletions, matched],
-                    }));
-                    return createFiber(Option.some(element.type), element.props, Option.some(wipFiber), Option.none(), Option.some("PLACEMENT"));
-                }
-            }),
-        });
-        newFibers.push(newFiber);
-    }
-    // Mark leftover old fibers for deletion
-    const leftovers = [...oldByKey.values(), ...oldUnkeyed];
-    yield* Effect.forEach(leftovers, (leftover) => Effect.gen(function* () {
-        leftover.effectTag = Option.some("DELETION");
-        yield* Ref.update(stateRef, (s) => ({
-            ...s,
-            deletions: [...s.deletions, leftover],
-        }));
-    }), { discard: true });
-    // Link new fibers as child/sibling chain
-    linkFibersAsSiblings(newFibers, wipFiber);
-});
-// =============================================================================
-// Commit Phase
-// =============================================================================
-const deleteFiber = (fiber) => Effect.gen(function* () {
-    // Close component scope (unless fiber is parked - its scope must stay alive)
-    if (!fiber.isParked && Option.isSome(fiber.componentScope)) {
-        yield* Scope.close(fiber.componentScope.value, Exit.void);
-    }
-    // Recursively delete children
-    if (Option.isSome(fiber.child)) {
-        yield* deleteFiber(fiber.child.value);
-    }
-});
-const commitDeletion = (fiber, domParent) => Option.match(fiber.dom, {
-    onSome: (dom) => Effect.sync(() => {
-        domParent.removeChild(dom);
-    }),
-    onNone: () => 
-    // Function component - find DOM children
-    Effect.iterate(fiber.child, {
-        while: (opt) => Option.isSome(opt),
-        body: (childOpt) => Effect.gen(function* () {
-            const child = childOpt.value;
-            yield* commitDeletion(child, domParent);
-            return child.sibling;
-        }),
-    }),
-});
-const commitRoot = (runtime) => Effect.gen(function* () {
-    const stateRef = runtime.fiberState;
-    const currentState = yield* Ref.get(stateRef);
-    // Process deletions first
-    yield* Effect.forEach(currentState.deletions, (fiber) => Effect.gen(function* () {
-        const domParent = findDomParent(fiber);
-        if (Option.isSome(domParent)) {
-            yield* commitDeletion(fiber, domParent.value);
-        }
-        yield* deleteFiber(fiber);
-    }), { discard: true });
-    // Commit work starting from wipRoot.child
-    const firstChild = currentState.wipRoot.pipe(Option.flatMap((root) => root.child), Option.getOrUndefined);
-    if (firstChild) {
-        yield* commitWork(firstChild, runtime);
-    }
-    // Swap wipRoot to currentRoot
-    yield* Ref.update(stateRef, (s) => ({
-        ...s,
-        currentRoot: currentState.wipRoot,
-        wipRoot: Option.none(),
-        deletions: [],
-    }));
-});
-const commitWork = (fiber, runtime) => Effect.gen(function* () {
-    // KEY INSIGHT: If fiber has no DOM (function component), just process children
-    if (Option.isNone(fiber.dom)) {
-        if (Option.isSome(fiber.child)) {
-            yield* commitWork(fiber.child.value, runtime);
-        }
-        // Signal mounted after subtree commits (for function components)
-        yield* Option.match(fiber.mountedDeferred, {
-            onNone: () => Effect.void,
-            onSome: (deferred) => Effect.gen(function* () {
-                const done = yield* Deferred.isDone(deferred);
-                if (!done) {
-                    yield* Deferred.succeed(deferred, undefined);
-                }
-            }),
-        });
-        if (Option.isSome(fiber.sibling)) {
-            yield* commitWork(fiber.sibling.value, runtime);
-        }
-        return;
-    }
-    // Find DOM parent by walking up to nearest fiber with dom
-    const domParentOpt = findDomParent(fiber);
-    if (Option.isNone(domParentOpt)) {
-        // No DOM parent found - continue with children/siblings
-        if (Option.isSome(fiber.child)) {
-            yield* commitWork(fiber.child.value, runtime);
-        }
-        if (Option.isSome(fiber.sibling)) {
-            yield* commitWork(fiber.sibling.value, runtime);
-        }
-        return;
-    }
-    const domParent = domParentOpt.value;
-    // Process effect tag
-    const tag = fiber.effectTag.pipe(Option.getOrUndefined);
-    if (tag === "PLACEMENT") {
-        // Append DOM node
-        if (Option.isSome(fiber.dom)) {
-            domParent.appendChild(fiber.dom.value);
-        }
-        // Signal first child committed (for Suspense)
-        const deferred = fiber.parent.pipe(Option.flatMap((p) => p.childFirstCommitDeferred), Option.getOrUndefined);
-        if (deferred) {
-            const done = yield* Deferred.isDone(deferred);
-            if (!done) {
-                yield* Deferred.succeed(deferred, undefined);
-            }
-        }
-    }
-    else if (tag === "UPDATE") {
-        const prevProps = fiber.alternate.pipe(Option.map((alt) => alt.props), Option.getOrElse(() => ({})));
-        if (Option.isSome(fiber.dom)) {
-            yield* updateDom(fiber.dom.value, prevProps, fiber.props, fiber, runtime);
-        }
-    }
-    else if (tag === "DELETION") {
-        yield* commitDeletion(fiber, domParent);
-        return;
-    }
-    // Continue with children and siblings
-    if (Option.isSome(fiber.child)) {
-        yield* commitWork(fiber.child.value, runtime);
-    }
-    if (Option.isSome(fiber.sibling)) {
-        yield* commitWork(fiber.sibling.value, runtime);
-    }
-});
+import {} from "./live/atom.js";
+import { createFiber, getComponentScopeService, linkFibersAsSiblings } from "./fiber-tree.js";
+import { handleFiberError } from "./fiber-boundary.js";
+import { performUnitOfWork, resubscribeFiber, subscribeComponentStream, subscribeFiberAtoms, activateLiveAtoms, reconcileChildren, } from "./fiber-update.js";
+import { commitRoot } from "./fiber-commit.js";
 // =============================================================================
 // Work Loop
 // =============================================================================
@@ -968,6 +47,46 @@ const workLoop = (runtime) => Effect.gen(function* () {
     }
 });
 // =============================================================================
+// Mailbox Consumer (batched re-render loop)
+// =============================================================================
+/**
+ * Consumer loop that processes batched re-render requests from the Mailbox.
+ *
+ * Runs as a long-lived fiber: waits for items via takeAll, then reconciles
+ * the full tree. Sequential processing guarantees no concurrent workLoops.
+ */
+const renderMailboxConsumer = (runtime) => Effect.gen(function* () {
+    const stateRef = runtime.fiberState;
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        // takeAll suspends until items are available, then returns all queued items
+        const [_fibers, done] = yield* runtime.renderMailbox.takeAll;
+        if (done)
+            break;
+        const stateSnapshot = yield* Ref.get(stateRef);
+        yield* Option.match(stateSnapshot.currentRoot, {
+            onNone: () => Effect.void,
+            onSome: (currentRoot) => Effect.gen(function* () {
+                yield* Ref.update(stateRef, (s) => ({
+                    ...s,
+                    wipRoot: Option.some(createFiber(currentRoot.type, currentRoot.props, Option.none(), Option.some(currentRoot), Option.none())),
+                    deletions: [],
+                }));
+                // Copy dom from currentRoot to wipRoot
+                const newState = yield* Ref.get(stateRef);
+                newState.wipRoot.pipe(Option.map((wip) => {
+                    wip.dom = currentRoot.dom;
+                }));
+                yield* Ref.update(stateRef, (s) => ({
+                    ...s,
+                    nextUnitOfWork: s.wipRoot,
+                }));
+                yield* workLoop(runtime);
+            }),
+        });
+    }
+});
+// =============================================================================
 // Main Render Function
 // =============================================================================
 /**
@@ -999,8 +118,8 @@ export const renderFiber = (element, container) => Effect.gen(function* () {
         nextUnitOfWork: newState.wipRoot,
     }));
     yield* workLoop(runtime);
-    // Keep runtime alive
-    return yield* Effect.never;
+    // Process re-render requests from the Mailbox (runs forever)
+    return yield* renderMailboxConsumer(runtime);
 });
 // =============================================================================
 // Hydration Support
@@ -1078,27 +197,23 @@ export const hydrateFiber = (element, container) => Effect.gen(function* () {
         wipRoot: Option.none(),
         deletions: [],
     }));
-    // Keep runtime alive
-    return yield* Effect.never;
+    // Process re-render requests from the Mailbox (runs forever)
+    return yield* renderMailboxConsumer(runtime);
 });
 /**
  * Hydrate multiple vElements against DOM nodes using cursor-based walking.
  * Returns the next DOM cursor position after all children are hydrated.
  */
 const hydrateChildren = (parentFiber, vElements, startCursor, runtime) => Effect.gen(function* () {
-    let cursor = startCursor;
-    const fibers = [];
-    for (const vElement of vElements) {
-        if (Option.isNone(cursor)) {
-            // No more DOM nodes but we have more vElements - mismatch
-            // For now, just skip (could throw HydrationMismatch in strict mode)
-            break;
-        }
-        const { fiber, nextCursor } = yield* hydrateElement(parentFiber, vElement, cursor.value, runtime);
-        fibers.push(fiber);
-        cursor = nextCursor;
-    }
-    // Link fibers
+    // Walk vElements and DOM cursor together using Effect.reduce
+    const { fibers, cursor } = yield* Effect.reduce(vElements, { fibers: [], cursor: startCursor }, (acc, vElement) => {
+        if (Option.isNone(acc.cursor))
+            return Effect.succeed(acc);
+        return Effect.map(hydrateElement(parentFiber, vElement, acc.cursor.value, runtime), ({ fiber, nextCursor }) => ({
+            fibers: [...acc.fibers, fiber],
+            cursor: nextCursor,
+        }));
+    });
     linkFibersAsSiblings(fibers, parentFiber);
     return cursor;
 });
@@ -1107,6 +222,25 @@ const hydrateChildren = (parentFiber, vElements, startCursor, runtime) => Effect
  * Returns the created fiber and the next DOM cursor position.
  */
 const hydrateElement = (parentFiber, vElement, domNode, runtime) => Effect.gen(function* () {
+    // Detect hydration mismatch: VElement type vs DOM node tag
+    if (typeof vElement.type === "string" &&
+        vElement.type !== "TEXT_ELEMENT" &&
+        vElement.type !== "FRAGMENT" &&
+        vElement.type !== "SUSPENSE" &&
+        vElement.type !== "BOUNDARY") {
+        if (domNode.nodeType === Node.ELEMENT_NODE) {
+            const expected = vElement.type.toUpperCase();
+            const actual = domNode.tagName;
+            if (expected !== actual) {
+                yield* Effect.logError(`Hydration mismatch: expected <${vElement.type}> but found <${actual.toLowerCase()}>. ` +
+                    `SSR and client component trees differ.`);
+            }
+        }
+        else if (domNode.nodeType === Node.TEXT_NODE) {
+            yield* Effect.logError(`Hydration mismatch: expected <${vElement.type}> but found text node "${domNode.textContent?.substring(0, 30)}". ` +
+                `SSR and client component trees differ.`);
+        }
+    }
     const fiber = createFiber(Option.some(vElement.type), vElement.props, Option.some(parentFiber), Option.none(), Option.none());
     let nextCursor;
     if (typeof vElement.type === "function") {
@@ -1122,6 +256,74 @@ const hydrateElement = (parentFiber, vElement, domNode, runtime) => Effect.gen(f
         // Fragment - children consume DOM nodes starting from current cursor
         nextCursor = yield* hydrateChildren(fiber, vElement.props.children || [], Option.some(domNode), runtime);
     }
+    else if (vElement.type === "SUSPENSE") {
+        // Suspense boundary - DOM has comment markers from SSR
+        // Initialize suspense config on the fiber
+        const fallback = vElement.props.fallback;
+        const threshold = vElement.props.threshold ?? 100;
+        fiber.suspense = Option.some({
+            fallback,
+            threshold,
+            showingFallback: false,
+            parkedFiber: Option.none(),
+            parkedComplete: Option.none(),
+        });
+        const children = (vElement.props.children || []);
+        if (domNode.nodeType === Node.COMMENT_NODE &&
+            domNode.data.includes("fibrae:sus:resolved")) {
+            // Resolved: hydrate children against DOM nodes between markers
+            // Use hydrateChildren for proper fiber linking, but skip comment markers
+            const firstContentNode = getNextHydratableSibling(domNode);
+            // hydrateChildren links fibers as siblings and sets fiber.child
+            const afterChildren = yield* hydrateChildren(fiber, children, firstContentNode, runtime);
+            // Skip past closing marker
+            if (Option.isSome(afterChildren)) {
+                const maybeClosing = afterChildren.value;
+                if (maybeClosing.nodeType === Node.COMMENT_NODE &&
+                    maybeClosing.data.includes("/fibrae:sus")) {
+                    nextCursor = getNextHydratableSibling(maybeClosing);
+                }
+                else {
+                    nextCursor = afterChildren;
+                }
+            }
+            else {
+                nextCursor = Option.none();
+            }
+        }
+        else if (domNode.nodeType === Node.COMMENT_NODE &&
+            domNode.data.includes("fibrae:sus:fallback")) {
+            // Fallback: remove fallback DOM and render Suspense fresh
+            const parent = domNode.parentNode;
+            // Collect nodes between markers using a scan loop
+            const { nodesToRemove, closingMarker } = (() => {
+                const nodes = [domNode];
+                let current = domNode.nextSibling;
+                while (current) {
+                    nodes.push(current);
+                    if (current.nodeType === Node.COMMENT_NODE &&
+                        current.data.includes("/fibrae:sus")) {
+                        return { nodesToRemove: nodes, closingMarker: current };
+                    }
+                    current = current.nextSibling;
+                }
+                return { nodesToRemove: nodes, closingMarker: null };
+            })();
+            // Cursor after the closing marker
+            nextCursor = closingMarker ? getNextHydratableSibling(closingMarker) : Option.none();
+            // Remove fallback DOM
+            nodesToRemove.forEach((node) => parent.removeChild(node));
+            // Mark as showing fallback initially, then reconcile children
+            // (the normal render path will handle the Suspense race)
+            const suspenseConfig = Option.getOrThrow(fiber.suspense);
+            suspenseConfig.showingFallback = false;
+            yield* reconcileChildren(fiber, children);
+        }
+        else {
+            // No Suspense markers — treat as normal render
+            nextCursor = yield* hydrateChildren(fiber, children, Option.some(domNode), runtime);
+        }
+    }
     else {
         // Host element - adopt DOM node and hydrate children
         const el = domNode;
@@ -1130,9 +332,9 @@ const hydrateElement = (parentFiber, vElement, domNode, runtime) => Effect.gen(f
         if (Option.isNone(fiber.renderContext) && Option.isSome(fiber.parent)) {
             fiber.renderContext = fiber.parent.value.renderContext;
         }
-        // Attach event listeners - uses runForkWithRuntime internally for full context
-        // Pass error callback to trigger ErrorBoundary on event handler failures
-        attachEventListeners(el, vElement.props, runtime, (cause) => handleFiberError(fiber, cause));
+        // Attach event listeners with listenerStore tracking for proper cleanup on re-render
+        const stateSnapshot = yield* Ref.get(runtime.fiberState);
+        attachEventListeners(el, vElement.props, runtime, (cause) => handleFiberError(fiber, cause), stateSnapshot.listenerStore);
         // Handle ref
         const ref = vElement.props.ref;
         if (ref && typeof ref === "object" && "current" in ref) {
@@ -1152,14 +354,15 @@ const hydrateElement = (parentFiber, vElement, domNode, runtime) => Effect.gen(f
  */
 const hydrateFunctionComponent = (fiber, vElement, domNode, runtime) => Effect.gen(function* () {
     // Capture current context during render phase for event handlers in commit phase
-    const currentContext = (yield* FiberRef.get(FiberRef.currentContext));
+    const currentContext = yield* FiberRef.get(FiberRef.currentContext);
     fiber.renderContext = Option.some(currentContext);
     // Create scope for this component FIRST so it's available in context
     yield* resubscribeFiber(fiber);
     const componentScopeService = yield* getComponentScopeService(fiber, "Expected componentScope");
     // Set up atom tracking
     const accessedAtoms = new Set();
-    const trackingRegistry = makeTrackingRegistry(runtime.registry, accessedAtoms);
+    const accessedLiveAtoms = new Set();
+    const trackingRegistry = makeTrackingRegistry(runtime.registry, accessedAtoms, accessedLiveAtoms);
     fiber.accessedAtoms = Option.some(accessedAtoms);
     // Build context with tracking registry AND ComponentScope
     const contextWithTracking = Context.add(Context.add(currentContext, ComponentScope, componentScopeService), AtomRegistry.AtomRegistry, trackingRegistry);
@@ -1184,6 +387,10 @@ const hydrateFunctionComponent = (fiber, vElement, domNode, runtime) => Effect.g
     yield* Deferred.succeed(componentScopeService.mounted, undefined);
     // Subscribe to atom changes
     yield* subscribeFiberAtoms(fiber, accessedAtoms, runtime);
+    // Activate SSE connections for any live atoms
+    if (accessedLiveAtoms.size > 0) {
+        yield* activateLiveAtoms(accessedLiveAtoms, currentContext, runtime, componentScopeService.scope);
+    }
     return nextCursor;
 });
 //# sourceMappingURL=fiber-render.js.map