Restoration

Fuzor UI starts from HTML. A dormant component does not need a live Zag machine. Activation reconnects behavior and browser resources to the existing elements.

Page lifetime

import { resumeUi } from "fuzor/ui/resume";
const runtime = resumeUi(document, {
  onError: error => console.error(error),
});
const root = document.getElementById("details")!;
await runtime.activate(root);
const publicState = runtime.pause(root);
await runtime.activate(root);
// On teardown:
runtime.dispose();

Pause captures state and releases the live behavior. Reactivation seeds audited machine state before startup and suppresses initialization callbacks. Normal future transitions still call the original callbacks. Each root has one owner; do not overlap runtimes or directly enhance a root already owned by a runtime.

Serialize through Effect Atom

const checkpoint = runtime.dehydrate();
const json = JSON.stringify(checkpoint);
// On a new document with matching stable component IDs:
const nextRuntime = resumeUi(document, {
  checkpoint: JSON.parse(json),
});

The checkpoint store uses Effect v4 Atom serialization. Schema validation precedes mutation. Revisions belong to one checkpoint lineage; older or equal revisions cannot overwrite known state. Persisting checkpoints is an application decision: do not store secrets or arbitrary drafts in them.

await runtime.hydrate(newerCheckpoint) updates active behavior without replacing its DOM. Keep lineage revisions when producing server updates. A fresh revision-zero store is not automatically newer than an existing client checkpoint.

What is restored

The complete catalogue has 51 integrations. The nine dedicated adapters below have private-machine restoration. The additional 42 shared adapters preserve their declared JSON public state; they do not restore private finite states, timers, in-flight operations, file handles or service graphs. Do not interpret catalogue integration as private-machine qualification.

All nine integrated Zag adapters restore their finite state and audited durable context: tabs, dialog, menu, accordion, collapsible, select, switch, popover and tooltip. Original form-reset defaults are separate from current values. Menu and tooltip delays and menu/select typeahead keep expiry deadlines. Toolbar restores its public state through Fuzor's native engine.

Focus targets, selected/highlighted values, expanded values and trigger identity survive where applicable. Reconnected resources include observers, positioning, dismissal, focus traps, scroll locks and form integration. Open overlays activate immediately to reconnect accessibility and dismissal.

The boundary

Browser handles, layout measurements, hover/press gestures, CSS animation progress and JavaScript continuations are rebuilt rather than serialized. Capture after queued events settle. Linked nested menu services require a future explicit graph API and are rejected instead of silently losing state. Requalify the audited state/context/ref contracts when upgrading Zag.

Server-rendered fragments can retain stable DOM identity during updates; checkpoints complement that identity and do not turn every UI update into a rerender. Precompile content whenever possible and attach behavior only where needed.

DOM-free server helpers

import { renderTabs, createUiCheckpointStore } from "fuzor/ui/server";
const html = renderTabs({
  id: "language", label: "Language",
  tabs: [{ value: "html", label: "HTML", content: "Start with HTML." }],
});
const store = createUiCheckpointStore();
// Capture validated public snapshots and optional audited machine checkpoints.
const payload = store.dehydrate();
store.dispose();

The server entry contains schema, presentation and HTML helpers without evaluating browser-only component classes. Import fuzor/ui/client explicitly when registering Web Components in a browser-only integration.