@live-react-islands/core 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,680 @@
+import React, { createContext, memo, useMemo, useSyncExternalStore, useRef, useContext, useState, useEffect, useCallback } from 'react';
+import ReactDOM from 'react-dom/client';
+import { createPortal } from 'react-dom';
+
+var StreamAction;
+(function (StreamAction) {
+    StreamAction["Insert"] = "i";
+    StreamAction["Update"] = "u";
+    StreamAction["Delete"] = "d";
+    StreamAction["Reset"] = "r";
+})(StreamAction || (StreamAction = {}));
+const NullContextProvider$1 = ({ children, }) => children;
+
+const IslandContextProvider = createContext(null);
+
+const PortalIsland = memo(({ data, storeAccess, }) => {
+    const { Component, ContextProvider, id, pushEvent, ssrStrategy, el, globalKeys, } = data;
+    const MemoizedComponent = useMemo(() => memo(Component), [Component]);
+    const MemoizedContextProvider = useMemo(() => (ContextProvider ? memo(ContextProvider) : null), [ContextProvider]);
+    const contextValue = useMemo(() => ({ id, storeAccess }), [id, storeAccess]);
+    const currentProps = useSyncExternalStore(storeAccess.subscribeToProps, () => storeAccess.getProps(id), () => null);
+    const allGlobals = useSyncExternalStore(storeAccess.subscribeToGlobals, storeAccess.getGlobals, () => null);
+    const didClearRef = useRef(false);
+    if (ssrStrategy === "overwrite" && !didClearRef.current) {
+        el.innerHTML = "";
+        didClearRef.current = true;
+    }
+    if (!allGlobals) {
+        console.log("[PortalIsland] Waiting for globals", id);
+        return null;
+    }
+    console.log("[PortalIsland] Rendering", { id, allGlobals });
+    const relevantGlobals = {};
+    if (allGlobals) {
+        globalKeys.forEach((key) => {
+            if (key in allGlobals) {
+                relevantGlobals[key] = allGlobals[key];
+            }
+        });
+    }
+    const mergedProps = { ...relevantGlobals, ...currentProps };
+    const islandNode = (React.createElement(MemoizedComponent, { ...mergedProps, id: id, pushEvent: pushEvent }));
+    const withContext = (React.createElement(IslandContextProvider.Provider, { value: contextValue }, islandNode));
+    const content = MemoizedContextProvider ? (React.createElement(MemoizedContextProvider, null, withContext)) : (withContext);
+    return createPortal(content, el);
+});
+PortalIsland.displayName = "[ReactLiveIslands]PortalIsland";
+const PortalIslandsRenderer = ({ storeAccess, }) => {
+    const sharedIslandsObj = useSyncExternalStore(storeAccess.subscribeToSharedIslands, storeAccess.getSharedIslands);
+    const islands = Object.values(sharedIslandsObj);
+    console.log("[PortalIslandsRenderer] Rendering islands:", islands.map((d) => d.id));
+    return (React.createElement(React.Fragment, null, islands.map((data) => (React.createElement(PortalIsland, { key: data.id, data: data, storeAccess: storeAccess })))));
+};
+PortalIslandsRenderer.displayName = "[ReactLiveIslands]PortalIslandsRenderer";
+
+const IndividualIslandRenderer = ({ data, storeAccess }) => {
+    const { Component, ContextProvider, id, pushEvent, globalKeys } = data;
+    const MemoizedComponent = useMemo(() => memo(Component), [Component]);
+    const MemoizedContextProvider = useMemo(() => (ContextProvider ? memo(ContextProvider) : null), [ContextProvider]);
+    const currentProps = useSyncExternalStore(storeAccess.subscribeToProps, () => storeAccess.getProps(id), () => data.hydrationData?.props);
+    // Check once if hydration globals version matches store version
+    const serverGlobalsSnapshot = useMemo(() => {
+        const hydrationGlobals = data.hydrationData?.globals;
+        if (!hydrationGlobals)
+            return () => hydrationGlobals;
+        let comparedVersions = false;
+        let useStoreReference = false;
+        return () => {
+            if (!comparedVersions) {
+                comparedVersions = true;
+                const storeGlobals = storeAccess.getGlobals();
+                const hydrationVersion = hydrationGlobals.__version ?? -1;
+                const storeVersion = storeGlobals?.__version ?? -1;
+                useStoreReference = storeVersion === hydrationVersion;
+            }
+            return useStoreReference ? storeAccess.getGlobals() : hydrationGlobals;
+        };
+    }, [data.hydrationData?.globals, storeAccess]);
+    const globals = useSyncExternalStore(storeAccess.subscribeToGlobals, storeAccess.getGlobals, serverGlobalsSnapshot);
+    const filteredGlobals = {};
+    if (globals) {
+        globalKeys.forEach((key) => {
+            if (key in globals) {
+                filteredGlobals[key] = globals[key];
+            }
+        });
+    }
+    const contextValue = useMemo(() => ({ id, storeAccess }), [id, storeAccess]);
+    const islandNode = (React.createElement(MemoizedComponent, { ...filteredGlobals, ...currentProps, id: id, pushEvent: pushEvent }));
+    const withContext = (React.createElement(IslandContextProvider.Provider, { value: contextValue }, islandNode));
+    return MemoizedContextProvider ? (React.createElement(MemoizedContextProvider, null, withContext)) : (withContext);
+};
+IndividualIslandRenderer.displayName =
+    "[ReactLiveIslands] IndividualIslandRenderer";
+
+// Constant root ID - one shared root per application
+const SHARED_ROOT_ID = "__live_react_islands_shared_root__";
+// ============================================================================
+// Helper
+// ============================================================================
+const NullContextProvider = ({ children, }) => children;
+const withSharedRootName = (ContextProvider) => {
+    const originalName = ContextProvider.displayName || ContextProvider.name || "ContextProvider";
+    function NamedWrapper({ children }) {
+        return React.createElement(ContextProvider, null, children);
+    }
+    NamedWrapper.displayName = `[LiveReactIslands] SharedRoot(${originalName})`;
+    return NamedWrapper;
+};
+const withIndividualRootName = (islandId, IslandRenderer) => {
+    IslandRenderer.displayName;
+    function NamedWrapper(props) {
+        return React.createElement(IslandRenderer, props);
+    }
+    NamedWrapper.displayName = `[LiveReactIslands] HydratedRoot#${islandId}`;
+    return NamedWrapper;
+};
+const getOrCreateSharedRootElement = () => {
+    let rootElement = document.getElementById(SHARED_ROOT_ID);
+    if (!rootElement) {
+        rootElement = document.createElement("div");
+        rootElement.id = SHARED_ROOT_ID;
+        rootElement.style.display = "none";
+        document.body.appendChild(rootElement);
+    }
+    return rootElement;
+};
+const mountSharedIsland = (state, data) => {
+    state.sharedIslandsRef.current = {
+        ...state.sharedIslandsRef.current,
+        [data.id]: data,
+    };
+    state.sharedIslandsListeners.forEach((cb) => cb());
+    return state;
+};
+const mountIndividualIsland = (state, data, IslandRenderer) => {
+    const NamedIslandRenderer = withIndividualRootName(data.id, IslandRenderer);
+    const root = ReactDOM.hydrateRoot(data.el, React.createElement(React.StrictMode, null, React.createElement(NamedIslandRenderer, {
+        data,
+        storeAccess: state.storeAccess,
+    })));
+    return {
+        ...state,
+        roots: { ...state.roots, [data.id]: root },
+    };
+};
+// ============================================================================
+// Island Manager (Bridge between LiveView hook lifecycles and React rendering)
+// ============================================================================
+const ManagerObj = {
+    initialize: ({ SharedContextProvider = NullContextProvider, SharedIslandsRenderer = PortalIslandsRenderer, }) => {
+        const rootElement = getOrCreateSharedRootElement();
+        const root = ReactDOM.createRoot(rootElement);
+        const propsStore = new Map();
+        const propsListeners = new Set();
+        const globalsRef = { current: null };
+        const globalsListeners = new Set();
+        const sharedIslandsRef = { current: {} };
+        const sharedIslandsListeners = new Set();
+        const streamsStore = new Map();
+        const streamsListeners = new Map();
+        const streamConfigs = new Map();
+        const getStreamKey = (islandId, streamName) => `${islandId}:${streamName}`;
+        const storeAccess = {
+            getProps: (islandId) => propsStore.get(islandId) || null,
+            subscribeToProps: (cb) => {
+                propsListeners.add(cb);
+                return () => propsListeners.delete(cb);
+            },
+            getGlobals: () => globalsRef.current,
+            subscribeToGlobals: (cb) => {
+                globalsListeners.add(cb);
+                return () => globalsListeners.delete(cb);
+            },
+            getSharedIslands: () => sharedIslandsRef.current,
+            subscribeToSharedIslands: (cb) => {
+                sharedIslandsListeners.add(cb);
+                return () => sharedIslandsListeners.delete(cb);
+            },
+            getStreamItems: (islandId, streamName) => {
+                const key = getStreamKey(islandId, streamName);
+                return streamsStore.get(key) || [];
+            },
+            subscribeToStream: (islandId, streamName, cb, config) => {
+                const key = getStreamKey(islandId, streamName);
+                if (config) {
+                    streamConfigs.set(key, config);
+                }
+                if (!streamsListeners.has(key)) {
+                    streamsListeners.set(key, new Set());
+                }
+                streamsListeners.get(key).add(cb);
+                return () => {
+                    streamsListeners.get(key)?.delete(cb);
+                    if (streamsListeners.get(key)?.size === 0) {
+                        streamConfigs.delete(key);
+                    }
+                };
+            },
+        };
+        const state = {
+            propsStore,
+            globalsRef,
+            propsListeners,
+            globalsListeners,
+            sharedIslandsRef,
+            sharedIslandsListeners,
+            streamsStore,
+            streamsListeners,
+            streamConfigs,
+            roots: { [SHARED_ROOT_ID]: root },
+            storeAccess,
+        };
+        const NamedSharedContextProvider = withSharedRootName(SharedContextProvider);
+        root.render(React.createElement(React.StrictMode, null, React.createElement(NamedSharedContextProvider, null, React.createElement(SharedIslandsRenderer, {
+            storeAccess: state.storeAccess,
+        }))));
+        return state;
+    },
+    mountIsland: (state, data, IslandRenderer = IndividualIslandRenderer) => {
+        switch (data.ssrStrategy) {
+            case "hydrate_root":
+                return mountIndividualIsland(state, data, IslandRenderer);
+            default:
+                return mountSharedIsland(state, data);
+        }
+    },
+    unmountIsland: (state, id) => {
+        state.propsStore.delete(id);
+        const streamPrefix = `${id}:`;
+        for (const key of state.streamsStore.keys()) {
+            if (key.startsWith(streamPrefix)) {
+                state.streamsStore.delete(key);
+                state.streamsListeners.delete(key);
+                state.streamConfigs.delete(key);
+            }
+        }
+        if (state.roots[id]) {
+            state.roots[id].unmount();
+            const { [id]: removedRoot, ...remainingRoots } = state.roots;
+            return {
+                ...state,
+                roots: remainingRoots,
+            };
+        }
+        else {
+            const { [id]: removed, ...remaining } = state.sharedIslandsRef.current;
+            state.sharedIslandsRef.current = remaining;
+            state.sharedIslandsListeners.forEach((cb) => cb());
+            return state;
+        }
+    },
+    updateIslandProps: (state, islandId, props) => {
+        const existing = state.propsStore.get(islandId) || {};
+        state.propsStore.set(islandId, { ...existing, ...props });
+        state.propsListeners.forEach((cb) => cb());
+        return state;
+    },
+    updateGlobals: (state, globals) => {
+        const incomingVersion = globals.__version ?? -1;
+        const storeVersion = state.globalsRef.current?.__version ?? -1;
+        if (incomingVersion > storeVersion) {
+            state.globalsRef.current = {
+                ...(state.globalsRef.current || {}),
+                ...globals,
+            };
+            state.globalsListeners.forEach((cb) => cb());
+        }
+        return state;
+    },
+    resetGlobals: (state) => {
+        state.globalsRef.current = null;
+        return state;
+    },
+    initializeStream: (state, islandId, streamName, initialItems) => {
+        const key = `${islandId}:${streamName}`;
+        state.streamsStore.set(key, [...initialItems]);
+        return state;
+    },
+    updateStream: (state, islandId, streamName, action, data) => {
+        const key = `${islandId}:${streamName}`;
+        let items = state.streamsStore.get(key) || [];
+        const config = state.streamConfigs.get(key);
+        switch (action) {
+            case StreamAction.Insert:
+                items = [data, ...items];
+                break;
+            case StreamAction.Update:
+                const idx = items.findIndex((item) => item.id === data.id);
+                if (idx !== -1) {
+                    items = [...items];
+                    items[idx] = { ...items[idx], ...data };
+                }
+                break;
+            case StreamAction.Delete:
+                items = items.filter((item) => item.id !== data);
+                break;
+            case StreamAction.Reset:
+                items = [];
+                break;
+        }
+        if (config?.capper) {
+            items = config.capper(items);
+        }
+        else if (config?.limit !== undefined && items.length > config.limit) {
+            items = items.slice(0, config.limit);
+        }
+        state.streamsStore.set(key, items);
+        state.streamsListeners.get(key)?.forEach((cb) => cb());
+        return state;
+    },
+};
+
+// ============================================================================
+// Event Handler Adapter
+// ============================================================================
+function createPushEventFn(hook) {
+    return (eventName, payload) => {
+        hook.pushEventTo(`#${hook.el.id}`, eventName, payload);
+    };
+}
+// ============================================================================
+// Helper
+// ============================================================================
+const resolvedComponentsCache = new Map();
+const isLazyFactory = (value) => {
+    if (typeof value !== "function")
+        return false;
+    // Check if it's a React component (has prototype.isReactComponent for class components)
+    if (value.prototype?.isReactComponent)
+        return false;
+    // Check if it's a config object getter (would have Component property)
+    if (value.Component)
+        return false;
+    // Assume zero-arg functions that aren't class components are lazy factories
+    return value.length === 0;
+};
+const resolveIslandConfig = async (islandsMap, componentName, defaultContextProvider) => {
+    const config = islandsMap[componentName];
+    if (!config) {
+        return null;
+    }
+    // Check cache first for lazy-loaded components
+    const cached = resolvedComponentsCache.get(componentName);
+    if (cached) {
+        return { Component: cached, ContextProvider: defaultContextProvider };
+    }
+    // Handle lazy factory: () => import("./Component")
+    if (isLazyFactory(config)) {
+        const mod = await config();
+        const Component = mod.default;
+        resolvedComponentsCache.set(componentName, Component);
+        return { Component, ContextProvider: defaultContextProvider };
+    }
+    // Handle direct component
+    if (typeof config === "function") {
+        return { Component: config, ContextProvider: defaultContextProvider };
+    }
+    // Handle config object
+    return {
+        Component: config.Component,
+        ContextProvider: config.ContextProvider || defaultContextProvider,
+    };
+};
+// ============================================================================
+// Main Hook Factory (LiveView Adapter Layer)
+// ============================================================================
+function createHooks({ islands: islandsMap = {}, SharedContextProvider = NullContextProvider$1, manager = ManagerObj, }) {
+    console.log(`[LiveReactIslands] Creating hooks`);
+    let managerState = manager.initialize({ SharedContextProvider });
+    let globalsRequested = false;
+    const pendingMounts = new Set();
+    let navigationListenerAttached = false;
+    const Hook = {
+        mounted() {
+            console.log("[Hook] Mount:", this.el.id);
+            if (!this.el.id) {
+                console.error(`[LiveReactIslands] Island element missing unique id`);
+                return;
+            }
+            if (!navigationListenerAttached) {
+                navigationListenerAttached = true;
+                this.liveSocket.on("phx:page-loading-start", () => {
+                    globalsRequested = false;
+                    managerState = manager.resetGlobals(managerState);
+                });
+            }
+            // Pull globals once on first island mount
+            if (!globalsRequested) {
+                globalsRequested = true;
+                this.handleEvent("lri-g", (data) => {
+                    managerState = manager.updateGlobals(managerState, data);
+                });
+                this.pushEvent("lri-g", {}, (reply) => {
+                    managerState = manager.updateGlobals(managerState, reply);
+                });
+            }
+            const { comp: componentName, ssr: ssrData, props: propsData, schema: schemaData, globals: globalsData, globalsVersion: globalsVersionData, } = this.el.dataset;
+            if (!componentName) {
+                console.error(`[LiveReactIslands] Element '${this.el.id}' missing data-comp attribute`);
+                return;
+            }
+            let schema = {
+                p: [],
+                g: [],
+                i: 0,
+            };
+            if (schemaData) {
+                try {
+                    schema = JSON.parse(schemaData);
+                }
+                catch (e) {
+                    console.error(`[Island(${this.el.id})] Failed to parse data-schema:`, e);
+                }
+            }
+            let initialProps = {};
+            if (propsData) {
+                try {
+                    const propsArray = JSON.parse(propsData);
+                    schema.p.forEach((propName, idx) => {
+                        const value = propsArray[idx];
+                        if (value?.__s !== undefined) {
+                            const streamName = schema.p[value.__s];
+                            managerState = manager.initializeStream(managerState, this.el.id, streamName, value.i);
+                            const handle = {
+                                name: streamName,
+                                initial: value.i,
+                            };
+                            initialProps[propName] = handle;
+                        }
+                        else {
+                            initialProps[propName] = value;
+                        }
+                    });
+                }
+                catch (e) {
+                    console.error(`[Island(${this.el.id})] Failed to parse data-props:`, e);
+                }
+            }
+            // Only for hydrate_root strategy
+            let initialGlobals = {};
+            if (globalsData) {
+                try {
+                    const globalsArray = JSON.parse(globalsData);
+                    schema.g.forEach((globalName, idx) => {
+                        initialGlobals[globalName] = globalsArray[idx];
+                    });
+                    if (!globalsVersionData)
+                        throw "Missing data-globals-version attribute";
+                    initialGlobals.__version = parseInt(globalsVersionData, 10);
+                }
+                catch (e) {
+                    console.error(`[Island(${this.el.id})] Failed to parse data-globals:`, e);
+                }
+            }
+            let ssrStrategy;
+            switch (ssrData) {
+                case "overwrite":
+                    ssrStrategy = "overwrite";
+                    break;
+                case "hydrate_root":
+                    ssrStrategy = "hydrate_root";
+                    break;
+                default:
+                    ssrStrategy = "none";
+            }
+            const pushEvent = createPushEventFn(this);
+            const elId = this.el.id;
+            const el = this.el;
+            pendingMounts.add(elId);
+            (async () => {
+                const islandConfig = await resolveIslandConfig(islandsMap, componentName, SharedContextProvider);
+                if (!pendingMounts.has(elId))
+                    return;
+                pendingMounts.delete(elId);
+                if (!islandConfig) {
+                    console.error(`[LiveReactIslands] React island '${componentName}' not found`);
+                    return;
+                }
+                managerState = manager.updateIslandProps(managerState, elId, initialProps);
+                managerState = manager.mountIsland(managerState, {
+                    id: elId,
+                    el,
+                    Component: islandConfig.Component,
+                    ContextProvider: islandConfig.ContextProvider,
+                    ssrStrategy,
+                    pushEvent,
+                    hydrationData: ssrStrategy === "hydrate_root"
+                        ? { props: initialProps, globals: initialGlobals }
+                        : null,
+                    globalKeys: schema.g,
+                });
+            })();
+            this.handleEvent("lri-p", (payload) => {
+                if (payload.i !== schema.i)
+                    return;
+                const props = {};
+                Object.entries(payload).forEach(([key, value]) => {
+                    if (key === "i")
+                        return;
+                    const idx = parseInt(key, 10);
+                    if (!isNaN(idx) && schema.p[idx]) {
+                        props[schema.p[idx]] = value;
+                    }
+                });
+                managerState = manager.updateIslandProps(managerState, this.el.id, props);
+            });
+            this.handleEvent("lri-s", (payload) => {
+                if (payload.i !== schema.i)
+                    return;
+                const streamName = schema.p[payload.s];
+                if (!streamName)
+                    return;
+                managerState = manager.updateStream(managerState, this.el.id, streamName, payload.a, payload.d);
+            });
+        },
+        updated() {
+            console.log("[Hook] Updated:", this.el.id);
+        },
+        destroyed() {
+            console.log("[Hook] Destroyed:", this.el.id);
+            pendingMounts.delete(this.el.id);
+            managerState = manager.unmountIsland(managerState, this.el.id);
+        },
+    };
+    return { LiveReactIslands: Hook };
+}
+
+function useStream(handle, options) {
+    const context = useContext(IslandContextProvider);
+    if (!context) {
+        throw new Error("useStream must be used within an Island component");
+    }
+    const { id: islandId, storeAccess } = context;
+    const subscribe = useMemo(() => (cb) => storeAccess.subscribeToStream(islandId, handle.name, cb, {
+        limit: options?.limit,
+        capper: options?.capper,
+    }), [storeAccess, islandId, handle.name, options?.limit, options?.capper]);
+    const getSnapshot = useMemo(() => () => storeAccess.getStreamItems(islandId, handle.name), [storeAccess, islandId, handle.name]);
+    return useSyncExternalStore(subscribe, getSnapshot, () => handle.initial);
+}
+
+function useForm(form, pushEvent) {
+    // 1. Version Tracking
+    // Local version increments on each field change
+    // Server version comes from form.version prop
+    const localVersionRef = useRef(form.version ?? 0);
+    const lastSentVersionRef = useRef(0); // Prevents duplicate sends in StrictMode
+    const [localVersion, setLocalVersion] = useState(form.version ?? 0);
+    const serverVersion = form.version ?? 0;
+    // Prop name comes from server (embedded in form data)
+    const propName = form.__prop;
+    // Reset local version when server sends a reset (version 0 with new schema)
+    useEffect(() => {
+        if (form.version === 0 && form.types) {
+            localVersionRef.current = 0;
+            setLocalVersion(0);
+        }
+    }, [form.version, form.types]);
+    // 3. Persistent Schema
+    // We only update these when the server explicitly sends them (usually on init)
+    const [schema, setSchema] = useState({
+        types: form.types ?? {},
+        required: form.required ?? [],
+    });
+    if (form.types && form.types !== schema.types) {
+        setSchema((prev) => ({ ...prev, types: form.types }));
+    }
+    if (form.required && form.required !== schema.required) {
+        setSchema((prev) => ({ ...prev, required: form.required }));
+    }
+    // 4. Values Management
+    const [localValues, setLocalValues] = useState(form.values ?? {});
+    // 5. Touched Tracking (client-side only)
+    const [touched, setTouched] = useState([]);
+    // Sync from server: Update local values when server sends updates
+    useEffect(() => {
+        setLocalValues((prev) => ({ ...prev, ...form.values }));
+    }, [form.values]);
+    // 6. Versioned Change Handler
+    const setField = useCallback((name, value) => {
+        // Mark field as touched
+        setTouched((prev) => (prev.includes(name) ? prev : [...prev, name]));
+        // Increment version BEFORE state update to avoid StrictMode double-increment
+        localVersionRef.current += 1;
+        const newVersion = localVersionRef.current;
+        setLocalValues((prev) => {
+            const next = { ...prev, [name]: value };
+            // Update version state (will be batched with values update)
+            setLocalVersion(newVersion);
+            // Only send event once per version (prevents duplicate sends in StrictMode)
+            if (lastSentVersionRef.current < newVersion) {
+                lastSentVersionRef.current = newVersion;
+                pushEvent?.("lri_form", {
+                    event: "validate",
+                    prop: propName,
+                    attrs: next,
+                    _v: newVersion,
+                });
+            }
+            return next;
+        });
+    }, [propName]);
+    // 6. Identity-Stable Field Props
+    const getFieldProps = useCallback((name) => {
+        const type = schema.types[name];
+        const value = localValues[name];
+        const base = { name };
+        if (type === "boolean" || type === "bool") {
+            return {
+                ...base,
+                checked: !!value,
+                value: undefined,
+                onChange: (e) => setField(name, e.target.checked),
+            };
+        }
+        return {
+            ...base,
+            value: value ?? "",
+            onChange: (e) => setField(name, e.target.value),
+        };
+    }, [localValues, schema.types, setField]);
+    const getError = useCallback((name) => form.errors?.[name]?.[0], [form.errors]);
+    const isRequired = useCallback((name) => schema.required.includes(name), [schema.required]);
+    const isTouched = useCallback((name) => touched.includes(name), [touched]);
+    // 7. Versioned Submit Handler
+    const handleSubmit = useCallback((e) => {
+        e?.preventDefault();
+        // Increment version for submit as well
+        localVersionRef.current += 1;
+        const newVersion = localVersionRef.current;
+        setLocalVersion(newVersion);
+        // Only send once (prevents duplicate sends if called twice)
+        if (lastSentVersionRef.current < newVersion) {
+            lastSentVersionRef.current = newVersion;
+            pushEvent?.("lri_form", {
+                event: "submit",
+                prop: propName,
+                attrs: localValues,
+                _v: newVersion,
+            });
+        }
+    }, [localValues, propName]);
+    const reset = useCallback(() => {
+        setLocalValues(form.values ?? {});
+        setTouched([]);
+        // Reset local version to match server
+        localVersionRef.current = form.version ?? 0;
+        setLocalVersion(form.version ?? 0);
+    }, [form.values, form.version]);
+    // 8. Derived States - The "Validation Lock"
+    // isSyncing: True when client has sent changes that server hasn't acknowledged
+    const isSyncing = localVersion > serverVersion;
+    // isValid: True only when:
+    // 1. Form is in sync (server has seen all changes)
+    // 2. Server says the form is valid
+    // This ensures users cannot submit until server validates the latest data
+    const isValid = !isSyncing && (form.isValid ?? false);
+    return {
+        values: localValues,
+        errors: form.errors ?? {},
+        types: schema.types,
+        required: schema.required,
+        touched,
+        getFieldProps,
+        getError,
+        isRequired,
+        isTouched,
+        setField,
+        handleSubmit,
+        reset,
+        isSyncing,
+        isValid,
+        localVersion,
+        serverVersion,
+    };
+}
+
+export { createHooks, useForm, useStream };
+//# sourceMappingURL=index.esm.js.map