hyperstack-react 0.3.1 → 0.3.3

package/dist/index.js

@@ -6779,40 +6779,29 @@ class HyperStackError extends Error {
     }
 }
 
-function isCompressedFrame(obj) {
-    return (typeof obj === 'object' &&
-        obj !== null &&
-        obj.compressed === 'gzip' &&
-        typeof obj.data === 'string');
-}
-function decompressGzip(base64Data) {
-    const binaryString = atob(base64Data);
-    const bytes = new Uint8Array(binaryString.length);
-    for (let i = 0; i < binaryString.length; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-    }
-    const decompressed = inflate_1(bytes);
-    return new TextDecoder().decode(decompressed);
-}
-function parseAndDecompress(jsonString) {
-    const parsed = JSON.parse(jsonString);
-    if (isCompressedFrame(parsed)) {
-        const decompressedJson = decompressGzip(parsed.data);
-        const frame = JSON.parse(decompressedJson);
-        return frame;
-    }
-    return parsed;
+const GZIP_MAGIC_0 = 0x1f;
+const GZIP_MAGIC_1 = 0x8b;
+function isGzipData(data) {
+    return data.length >= 2 && data[0] === GZIP_MAGIC_0 && data[1] === GZIP_MAGIC_1;
 }
 function isSnapshotFrame(frame) {
     return frame.op === 'snapshot';
 }
+function isSubscribedFrame(frame) {
+    return frame.op === 'subscribed';
+}
 function parseFrame(data) {
     if (typeof data === 'string') {
-        return parseAndDecompress(data);
+        return JSON.parse(data);
     }
-    const decoder = new TextDecoder('utf-8');
-    const jsonString = decoder.decode(data);
-    return parseAndDecompress(jsonString);
+    const bytes = new Uint8Array(data);
+    if (isGzipData(bytes)) {
+        const decompressed = inflate_1(bytes);
+        const jsonString = new TextDecoder().decode(decompressed);
+        return JSON.parse(jsonString);
+    }
+    const jsonString = new TextDecoder('utf-8').decode(data);
+    return JSON.parse(jsonString);
 }
 async function parseFrameFromBlob(blob) {
     const arrayBuffer = await blob.arrayBuffer();
@@ -6887,8 +6876,8 @@ class ConnectionManager {
                     this.reconnectAttempts = 0;
                     this.updateState('connected');
                     this.startPingInterval();
-                    this.flushSubscriptionQueue();
                     this.resubscribeActive();
+                    this.flushSubscriptionQueue();
                     resolve();
                 };
                 this.ws.onmessage = async (event) => {
@@ -6909,7 +6898,6 @@ class ConnectionManager {
                         this.notifyFrameHandlers(frame);
                     }
                     catch (error) {
-                        console.error('[hyperstack] Error parsing frame:', error);
                         this.updateState('error', 'Failed to parse frame from server');
                     }
                 };
@@ -6947,12 +6935,18 @@ class ConnectionManager {
     subscribe(subscription) {
         const subKey = this.makeSubKey(subscription);
         if (this.currentState === 'connected' && this.ws?.readyState === WebSocket.OPEN) {
+            if (this.activeSubscriptions.has(subKey)) {
+                return;
+            }
             const subMsg = { type: 'subscribe', ...subscription };
             this.ws.send(JSON.stringify(subMsg));
             this.activeSubscriptions.add(subKey);
         }
         else {
-            this.subscriptionQueue.push(subscription);
+            const alreadyQueued = this.subscriptionQueue.some((s) => this.makeSubKey(s) === subKey);
+            if (!alreadyQueued) {
+                this.subscriptionQueue.push(subscription);
+            }
         }
     }
     unsubscribe(view, key) {
@@ -7042,11 +7036,11 @@ class ConnectionManager {
     }
 }
 
-function isObject(item) {
+function isObject$1(item) {
     return item !== null && typeof item === 'object' && !Array.isArray(item);
 }
-function deepMergeWithAppend(target, source, appendPaths, currentPath = '') {
-    if (!isObject(target) || !isObject(source)) {
+function deepMergeWithAppend$1(target, source, appendPaths, currentPath = '') {
+    if (!isObject$1(target) || !isObject$1(source)) {
         return source;
     }
     const result = { ...target };
@@ -7062,8 +7056,8 @@ function deepMergeWithAppend(target, source, appendPaths, currentPath = '') {
                 result[key] = sourceValue;
             }
         }
-        else if (isObject(sourceValue) && isObject(targetValue)) {
-            result[key] = deepMergeWithAppend(targetValue, sourceValue, appendPaths, fieldPath);
+        else if (isObject$1(sourceValue) && isObject$1(targetValue)) {
+            result[key] = deepMergeWithAppend$1(targetValue, sourceValue, appendPaths, fieldPath);
         }
         else {
             result[key] = sourceValue;
@@ -7073,20 +7067,107 @@ function deepMergeWithAppend(target, source, appendPaths, currentPath = '') {
 }
 class FrameProcessor {
     constructor(storage, config = {}) {
+        this.pendingUpdates = [];
+        this.flushTimer = null;
+        this.isProcessing = false;
         this.storage = storage;
         this.maxEntriesPerView = config.maxEntriesPerView === undefined
             ? DEFAULT_MAX_ENTRIES_PER_VIEW
             : config.maxEntriesPerView;
+        this.flushIntervalMs = config.flushIntervalMs ?? 0;
     }
     handleFrame(frame) {
-        if (isSnapshotFrame(frame)) {
+        if (this.flushIntervalMs === 0) {
+            this.processFrame(frame);
+            return;
+        }
+        this.pendingUpdates.push({ frame });
+        this.scheduleFlush();
+    }
+    /**
+     * Immediately flush all pending updates.
+     * Useful for ensuring all updates are processed before reading state.
+     */
+    flush() {
+        if (this.flushTimer !== null) {
+            clearTimeout(this.flushTimer);
+            this.flushTimer = null;
+        }
+        this.flushPendingUpdates();
+    }
+    /**
+     * Clean up any pending timers. Call when disposing the processor.
+     */
+    dispose() {
+        if (this.flushTimer !== null) {
+            clearTimeout(this.flushTimer);
+            this.flushTimer = null;
+        }
+        this.pendingUpdates = [];
+    }
+    scheduleFlush() {
+        if (this.flushTimer !== null) {
+            return;
+        }
+        this.flushTimer = setTimeout(() => {
+            this.flushTimer = null;
+            this.flushPendingUpdates();
+        }, this.flushIntervalMs);
+    }
+    flushPendingUpdates() {
+        if (this.isProcessing || this.pendingUpdates.length === 0) {
+            return;
+        }
+        this.isProcessing = true;
+        const batch = this.pendingUpdates;
+        this.pendingUpdates = [];
+        const viewsToEnforce = new Set();
+        for (const { frame } of batch) {
+            const viewPath = this.processFrameWithoutEnforce(frame);
+            if (viewPath) {
+                viewsToEnforce.add(viewPath);
+            }
+        }
+        viewsToEnforce.forEach((viewPath) => {
+            this.enforceMaxEntries(viewPath);
+        });
+        this.isProcessing = false;
+    }
+    processFrame(frame) {
+        if (isSubscribedFrame(frame)) {
+            this.handleSubscribedFrame(frame);
+        }
+        else if (isSnapshotFrame(frame)) {
             this.handleSnapshotFrame(frame);
         }
         else {
             this.handleEntityFrame(frame);
         }
     }
+    processFrameWithoutEnforce(frame) {
+        if (isSubscribedFrame(frame)) {
+            this.handleSubscribedFrame(frame);
+            return null;
+        }
+        else if (isSnapshotFrame(frame)) {
+            this.handleSnapshotFrameWithoutEnforce(frame);
+            return frame.entity;
+        }
+        else {
+            this.handleEntityFrameWithoutEnforce(frame);
+            return frame.entity;
+        }
+    }
+    handleSubscribedFrame(frame) {
+        if (this.storage.setViewConfig && frame.sort) {
+            this.storage.setViewConfig(frame.view, { sort: frame.sort });
+        }
+    }
     handleSnapshotFrame(frame) {
+        this.handleSnapshotFrameWithoutEnforce(frame);
+        this.enforceMaxEntries(frame.entity);
+    }
+    handleSnapshotFrameWithoutEnforce(frame) {
         const viewPath = frame.entity;
         for (const entity of frame.data) {
             const previousValue = this.storage.get(viewPath, entity.key);
@@ -7098,16 +7179,18 @@ class FrameProcessor {
             });
             this.emitRichUpdate(viewPath, entity.key, previousValue, entity.data, 'upsert');
         }
-        this.enforceMaxEntries(viewPath);
     }
     handleEntityFrame(frame) {
+        this.handleEntityFrameWithoutEnforce(frame);
+        this.enforceMaxEntries(frame.entity);
+    }
+    handleEntityFrameWithoutEnforce(frame) {
         const viewPath = frame.entity;
         const previousValue = this.storage.get(viewPath, frame.key);
         switch (frame.op) {
             case 'create':
             case 'upsert':
                 this.storage.set(viewPath, frame.key, frame.data);
-                this.enforceMaxEntries(viewPath);
                 this.storage.notifyUpdate(viewPath, frame.key, {
                     type: 'upsert',
                     key: frame.key,
@@ -7119,10 +7202,9 @@ class FrameProcessor {
                 const existing = this.storage.get(viewPath, frame.key);
                 const appendPaths = frame.append ?? [];
                 const merged = existing
-                    ? deepMergeWithAppend(existing, frame.data, appendPaths)
+                    ? deepMergeWithAppend$1(existing, frame.data, appendPaths)
                     : frame.data;
                 this.storage.set(viewPath, frame.key, merged);
-                this.enforceMaxEntries(viewPath);
                 this.storage.notifyUpdate(viewPath, frame.key, {
                     type: 'patch',
                     key: frame.key,
@@ -7161,7 +7243,7 @@ class FrameProcessor {
     }
 }
 
-class ViewData {
+let ViewData$1 = class ViewData {
     constructor() {
         this.entities = new Map();
         this.accessOrder = [];
@@ -7215,7 +7297,7 @@ class ViewData {
         this.entities.clear();
         this.accessOrder = [];
     }
-}
+};
 class MemoryAdapter {
     constructor(_config = {}) {
         this.views = new Map();
@@ -7263,7 +7345,7 @@ class MemoryAdapter {
     set(viewPath, key, data) {
         let view = this.views.get(viewPath);
         if (!view) {
-            view = new ViewData();
+            view = new ViewData$1();
             this.views.set(viewPath, view);
         }
         view.set(key, data);
@@ -7604,6 +7686,60 @@ class HyperStack {
     }
 }
 
+function getNestedValue(obj, path) {
+    let current = obj;
+    for (const segment of path) {
+        if (current === null || current === undefined)
+            return undefined;
+        if (typeof current !== 'object')
+            return undefined;
+        current = current[segment];
+    }
+    return current;
+}
+function compareSortValues(a, b) {
+    if (a === b)
+        return 0;
+    if (a === undefined || a === null)
+        return -1;
+    if (b === undefined || b === null)
+        return 1;
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+    if (typeof a === 'string' && typeof b === 'string') {
+        return a.localeCompare(b);
+    }
+    if (typeof a === 'boolean' && typeof b === 'boolean') {
+        return (a ? 1 : 0) - (b ? 1 : 0);
+    }
+    return String(a).localeCompare(String(b));
+}
+function binarySearchInsertPosition(sortedKeys, entities, sortConfig, newKey, newValue) {
+    const newSortValue = getNestedValue(newValue, sortConfig.field);
+    const isDesc = sortConfig.order === 'desc';
+    let low = 0;
+    let high = sortedKeys.length;
+    while (low < high) {
+        const mid = Math.floor((low + high) / 2);
+        const midKey = sortedKeys[mid];
+        const midEntity = entities.get(midKey);
+        const midValue = getNestedValue(midEntity, sortConfig.field);
+        let cmp = compareSortValues(newSortValue, midValue);
+        if (isDesc)
+            cmp = -cmp;
+        if (cmp === 0) {
+            cmp = newKey.localeCompare(midKey);
+        }
+        if (cmp < 0) {
+            high = mid;
+        }
+        else {
+            low = mid + 1;
+        }
+    }
+    return low;
+}
 class ZustandAdapter {
     constructor(_config = {}) {
         this.updateCallbacks = new Set();
@@ -7611,6 +7747,8 @@ class ZustandAdapter {
         this.accessOrder = new Map();
         this.store = zustand.create((set) => ({
             entities: new Map(),
+            sortedKeys: new Map(),
+            viewConfigs: new Map(),
             connectionState: 'disconnected',
             lastError: undefined,
             _set: (viewPath, key, data) => {
@@ -7639,14 +7777,30 @@ class ZustandAdapter {
                     if (viewPath) {
                         const newEntities = new Map(state.entities);
                         newEntities.delete(viewPath);
-                        return { entities: newEntities };
+                        const newSortedKeys = new Map(state.sortedKeys);
+                        newSortedKeys.delete(viewPath);
+                        return { entities: newEntities, sortedKeys: newSortedKeys };
                     }
-                    return { entities: new Map() };
+                    return { entities: new Map(), sortedKeys: new Map() };
                 });
             },
             _setConnectionState: (connectionState, lastError) => {
                 set({ connectionState, lastError });
             },
+            _setViewConfig: (viewPath, config) => {
+                set((state) => {
+                    const newConfigs = new Map(state.viewConfigs);
+                    newConfigs.set(viewPath, config);
+                    return { viewConfigs: newConfigs };
+                });
+            },
+            _updateSortedKeys: (viewPath, newSortedKeys) => {
+                set((state) => {
+                    const newSortedKeysMap = new Map(state.sortedKeys);
+                    newSortedKeysMap.set(viewPath, newSortedKeys);
+                    return { sortedKeys: newSortedKeysMap };
+                });
+            },
         }));
     }
     get(viewPath, key) {
@@ -7658,17 +7812,25 @@ class ZustandAdapter {
         return value !== undefined ? value : null;
     }
     getAll(viewPath) {
-        const entities = this.store.getState().entities;
-        const viewMap = entities.get(viewPath);
+        const state = this.store.getState();
+        const viewMap = state.entities.get(viewPath);
         if (!viewMap)
             return [];
+        const sortedKeys = state.sortedKeys.get(viewPath);
+        if (sortedKeys && sortedKeys.length > 0) {
+            return sortedKeys.map(k => viewMap.get(k)).filter(v => v !== undefined);
+        }
         return Array.from(viewMap.values());
     }
     getAllSync(viewPath) {
-        const entities = this.store.getState().entities;
-        const viewMap = entities.get(viewPath);
+        const state = this.store.getState();
+        const viewMap = state.entities.get(viewPath);
         if (!viewMap)
             return undefined;
+        const sortedKeys = state.sortedKeys.get(viewPath);
+        if (sortedKeys && sortedKeys.length > 0) {
+            return sortedKeys.map(k => viewMap.get(k)).filter(v => v !== undefined);
+        }
         return Array.from(viewMap.values());
     }
     getSync(viewPath, key) {
@@ -7692,27 +7854,56 @@ class ZustandAdapter {
         return this.store.getState().entities.get(viewPath)?.size ?? 0;
     }
     set(viewPath, key, data) {
-        let order = this.accessOrder.get(viewPath);
-        if (!order) {
-            order = [];
-            this.accessOrder.set(viewPath, order);
+        const state = this.store.getState();
+        const viewConfig = state.viewConfigs.get(viewPath);
+        if (viewConfig?.sort) {
+            const viewMap = state.entities.get(viewPath) ?? new Map();
+            const currentSortedKeys = [...(state.sortedKeys.get(viewPath) ?? [])];
+            const existingIdx = currentSortedKeys.indexOf(key);
+            if (existingIdx !== -1) {
+                currentSortedKeys.splice(existingIdx, 1);
+            }
+            const tempMap = new Map(viewMap);
+            tempMap.set(key, data);
+            const insertIdx = binarySearchInsertPosition(currentSortedKeys, tempMap, viewConfig.sort, key, data);
+            currentSortedKeys.splice(insertIdx, 0, key);
+            state._set(viewPath, key, data);
+            state._updateSortedKeys(viewPath, currentSortedKeys);
         }
-        const existingIdx = order.indexOf(key);
-        if (existingIdx !== -1) {
-            order.splice(existingIdx, 1);
+        else {
+            let order = this.accessOrder.get(viewPath);
+            if (!order) {
+                order = [];
+                this.accessOrder.set(viewPath, order);
+            }
+            const existingIdx = order.indexOf(key);
+            if (existingIdx !== -1) {
+                order.splice(existingIdx, 1);
+            }
+            order.push(key);
+            state._set(viewPath, key, data);
         }
-        order.push(key);
-        this.store.getState()._set(viewPath, key, data);
     }
     delete(viewPath, key) {
-        const order = this.accessOrder.get(viewPath);
-        if (order) {
-            const idx = order.indexOf(key);
-            if (idx !== -1) {
-                order.splice(idx, 1);
+        const state = this.store.getState();
+        const viewConfig = state.viewConfigs.get(viewPath);
+        if (viewConfig?.sort) {
+            const currentSortedKeys = state.sortedKeys.get(viewPath);
+            if (currentSortedKeys) {
+                const newSortedKeys = currentSortedKeys.filter(k => k !== key);
+                state._updateSortedKeys(viewPath, newSortedKeys);
             }
         }
-        this.store.getState()._delete(viewPath, key);
+        else {
+            const order = this.accessOrder.get(viewPath);
+            if (order) {
+                const idx = order.indexOf(key);
+                if (idx !== -1) {
+                    order.splice(idx, 1);
+                }
+            }
+        }
+        state._delete(viewPath, key);
     }
     clear(viewPath) {
         if (viewPath) {
@@ -7754,12 +7945,49 @@ class ZustandAdapter {
     setConnectionState(state, error) {
         this.store.getState()._setConnectionState(state, error);
     }
+    setViewConfig(viewPath, config) {
+        const state = this.store.getState();
+        const existingConfig = state.viewConfigs.get(viewPath);
+        if (existingConfig?.sort)
+            return;
+        state._setViewConfig(viewPath, config);
+        if (config.sort) {
+            this.rebuildSortedKeys(viewPath, config.sort);
+        }
+    }
+    getViewConfig(viewPath) {
+        return this.store.getState().viewConfigs.get(viewPath);
+    }
+    rebuildSortedKeys(viewPath, sortConfig) {
+        const state = this.store.getState();
+        const viewMap = state.entities.get(viewPath);
+        if (!viewMap || viewMap.size === 0)
+            return;
+        const isDesc = sortConfig.order === 'desc';
+        const entries = Array.from(viewMap.entries());
+        entries.sort((a, b) => {
+            const aValue = getNestedValue(a[1], sortConfig.field);
+            const bValue = getNestedValue(b[1], sortConfig.field);
+            let cmp = compareSortValues(aValue, bValue);
+            if (isDesc)
+                cmp = -cmp;
+            if (cmp === 0) {
+                cmp = a[0].localeCompare(b[0]);
+            }
+            return cmp;
+        });
+        const sortedKeys = entries.map(([k]) => k);
+        state._updateSortedKeys(viewPath, sortedKeys);
+    }
 }
 
+const DEFAULT_FLUSH_INTERVAL_MS = 16;
+
 function createRuntime(config) {
     const adapter = new ZustandAdapter();
     const processor = new FrameProcessor(adapter, {
         maxEntriesPerView: config.maxEntriesPerView,
+        flushIntervalMs: config.flushIntervalMs ?? DEFAULT_FLUSH_INTERVAL_MS,
     });
     const connection = new ConnectionManager({
         websocketUrl: config.websocketUrl,
@@ -7779,13 +8007,15 @@ function createRuntime(config) {
         connection,
         subscriptionRegistry,
         wallet: config.wallet,
-        subscribe(view, key, filters) {
-            const subscription = { view, key, filters };
+        subscribe(view, key, filters, take, skip) {
+            const subscription = { view, key, filters, take, skip };
             const unsubscribe = subscriptionRegistry.subscribe(subscription);
             return {
                 view,
                 key,
                 filters,
+                take,
+                skip,
                 unsubscribe,
             };
         },
@@ -7922,7 +8152,7 @@ function createStateViewHook(viewDef, runtime) {
         use: (key, options) => {
             const [isLoading, setIsLoading] = React.useState(!options?.initialData);
             const [error, setError] = React.useState();
-            const keyString = Object.values(key)[0];
+            const keyString = key ? Object.values(key)[0] : undefined;
             const enabled = options?.enabled !== false;
             React.useEffect(() => {
                 if (!enabled)
@@ -7969,8 +8199,14 @@ function createStateViewHook(viewDef, runtime) {
                 const unsubscribe = runtime.zustandStore.subscribe(callback);
                 return unsubscribe;
             }, () => {
-                const rawData = runtime.zustandStore.getState().entities.get(viewDef.view)?.get(keyString);
-                return rawData;
+                const viewMap = runtime.zustandStore.getState().entities.get(viewDef.view);
+                if (!viewMap)
+                    return undefined;
+                if (keyString) {
+                    return viewMap.get(keyString);
+                }
+                const firstEntry = viewMap.values().next();
+                return firstEntry.done ? undefined : firstEntry.value;
             });
             React.useEffect(() => {
                 if (data && isLoading) {
@@ -7986,113 +8222,147 @@ function createStateViewHook(viewDef, runtime) {
         }
     };
 }
-function createListViewHook(viewDef, runtime) {
-    return {
-        use: (params, options) => {
-            const [isLoading, setIsLoading] = React.useState(!options?.initialData);
-            const [error, setError] = React.useState();
-            const cachedDataRef = React.useRef(undefined);
-            const lastMapRef = React.useRef(undefined);
-            const enabled = options?.enabled !== false;
-            const key = params?.key;
-            const filtersJson = params?.filters ? JSON.stringify(params.filters) : undefined;
-            const filters = React.useMemo(() => params?.filters, [filtersJson]);
-            React.useEffect(() => {
-                if (!enabled)
-                    return undefined;
+function useListViewInternal(viewDef, runtime, params, options) {
+    const [isLoading, setIsLoading] = React.useState(!options?.initialData);
+    const [error, setError] = React.useState();
+    const cachedDataRef = React.useRef(undefined);
+    const lastMapRef = React.useRef(undefined);
+    const lastSortedKeysRef = React.useRef(undefined);
+    const enabled = options?.enabled !== false;
+    const key = params?.key;
+    const take = params?.take;
+    const skip = params?.skip;
+    const filtersJson = params?.filters ? JSON.stringify(params.filters) : undefined;
+    const filters = React.useMemo(() => params?.filters, [filtersJson]);
+    React.useEffect(() => {
+        if (!enabled)
+            return undefined;
+        try {
+            const handle = runtime.subscribe(viewDef.view, key, filters, take, skip);
+            setIsLoading(true);
+            return () => {
                 try {
-                    const handle = runtime.subscribe(viewDef.view, key, filters);
-                    setIsLoading(true);
-                    return () => {
-                        try {
-                            handle.unsubscribe();
-                        }
-                        catch (err) {
-                            console.error('[Hyperstack] Error unsubscribing from list view:', err);
-                        }
-                    };
+                    handle.unsubscribe();
                 }
                 catch (err) {
-                    setError(err instanceof Error ? err : new Error('Subscription failed'));
-                    setIsLoading(false);
-                    return undefined;
+                    console.error('[Hyperstack] Error unsubscribing from list view:', err);
                 }
-            }, [enabled, key, filtersJson]);
-            const refresh = React.useCallback(() => {
-                if (!enabled)
-                    return;
+            };
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error('Subscription failed'));
+            setIsLoading(false);
+            return undefined;
+        }
+    }, [enabled, key, filtersJson, take, skip]);
+    const refresh = React.useCallback(() => {
+        if (!enabled)
+            return;
+        try {
+            const handle = runtime.subscribe(viewDef.view, key, filters, take, skip);
+            setIsLoading(true);
+            setTimeout(() => {
                 try {
-                    const handle = runtime.subscribe(viewDef.view, key, filters);
-                    setIsLoading(true);
-                    setTimeout(() => {
-                        try {
-                            handle.unsubscribe();
-                        }
-                        catch (err) {
-                            console.error('[Hyperstack] Error during list refresh unsubscribe:', err);
-                        }
-                    }, 0);
+                    handle.unsubscribe();
                 }
                 catch (err) {
-                    setError(err instanceof Error ? err : new Error('Refresh failed'));
-                    setIsLoading(false);
+                    console.error('[Hyperstack] Error during list refresh unsubscribe:', err);
                 }
-            }, [enabled, key, filtersJson]);
-            const data = React.useSyncExternalStore((callback) => {
-                const unsubscribe = runtime.zustandStore.subscribe(callback);
-                return unsubscribe;
-            }, () => {
-                const baseMap = runtime.zustandStore.getState().entities.get(viewDef.view);
-                if (!baseMap) {
-                    if (cachedDataRef.current !== undefined) {
-                        cachedDataRef.current = undefined;
-                        lastMapRef.current = undefined;
+            }, 0);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error('Refresh failed'));
+            setIsLoading(false);
+        }
+    }, [enabled, key, filtersJson, take, skip]);
+    const data = React.useSyncExternalStore((callback) => {
+        const unsubscribe = runtime.zustandStore.subscribe(callback);
+        return unsubscribe;
+    }, () => {
+        const state = runtime.zustandStore.getState();
+        const baseMap = state.entities.get(viewDef.view);
+        const sortedKeys = state.sortedKeys.get(viewDef.view);
+        if (!baseMap) {
+            if (cachedDataRef.current !== undefined) {
+                cachedDataRef.current = undefined;
+                lastMapRef.current = undefined;
+                lastSortedKeysRef.current = undefined;
+            }
+            return undefined;
+        }
+        if (lastMapRef.current === baseMap && lastSortedKeysRef.current === sortedKeys && cachedDataRef.current !== undefined) {
+            return cachedDataRef.current;
+        }
+        let items;
+        if (sortedKeys && sortedKeys.length > 0) {
+            items = sortedKeys.map(k => baseMap.get(k)).filter(v => v !== undefined);
+        }
+        else {
+            items = Array.from(baseMap.values());
+        }
+        if (params?.where) {
+            items = items.filter((item) => {
+                return Object.entries(params.where).every(([fieldKey, condition]) => {
+                    const value = item[fieldKey];
+                    if (typeof condition === 'object' && condition !== null) {
+                        const cond = condition;
+                        if ('gte' in cond)
+                            return value >= cond.gte;
+                        if ('lte' in cond)
+                            return value <= cond.lte;
+                        if ('gt' in cond)
+                            return value > cond.gt;
+                        if ('lt' in cond)
+                            return value < cond.lt;
                     }
-                    return undefined;
-                }
-                if (lastMapRef.current === baseMap && cachedDataRef.current !== undefined) {
-                    return cachedDataRef.current;
-                }
-                let items = Array.from(baseMap.values());
-                if (params?.where) {
-                    items = items.filter((item) => {
-                        return Object.entries(params.where).every(([fieldKey, condition]) => {
-                            const value = item[fieldKey];
-                            if (typeof condition === 'object' && condition !== null) {
-                                const cond = condition;
-                                if ('gte' in cond)
-                                    return value >= cond.gte;
-                                if ('lte' in cond)
-                                    return value <= cond.lte;
-                                if ('gt' in cond)
-                                    return value > cond.gt;
-                                if ('lt' in cond)
-                                    return value < cond.lt;
-                            }
-                            return value === condition;
-                        });
-                    });
-                }
-                if (params?.limit) {
-                    items = items.slice(0, params.limit);
-                }
-                lastMapRef.current = runtime.zustandStore.getState().entities.get(viewDef.view);
-                cachedDataRef.current = items;
-                return items;
+                    return value === condition;
+                });
             });
-            React.useEffect(() => {
-                if (data && isLoading) {
-                    setIsLoading(false);
-                }
-            }, [data, isLoading]);
+        }
+        if (params?.limit) {
+            items = items.slice(0, params.limit);
+        }
+        lastMapRef.current = baseMap;
+        lastSortedKeysRef.current = sortedKeys;
+        cachedDataRef.current = items;
+        return items;
+    });
+    React.useEffect(() => {
+        if (data && isLoading) {
+            setIsLoading(false);
+        }
+    }, [data, isLoading]);
+    return {
+        data: (options?.initialData ?? data),
+        isLoading,
+        error,
+        refresh
+    };
+}
+function createListViewHook(viewDef, runtime) {
+    function use(params, options) {
+        const result = useListViewInternal(viewDef, runtime, params, options);
+        if (params?.take === 1) {
             return {
-                data: (options?.initialData ?? data),
-                isLoading,
-                error,
-                refresh
+                data: result.data?.[0],
+                isLoading: result.isLoading,
+                error: result.error,
+                refresh: result.refresh
             };
         }
-    };
+        return result;
+    }
+    function useOne(params, options) {
+        const paramsWithTake = params ? { ...params, take: 1 } : { take: 1 };
+        const result = useListViewInternal(viewDef, runtime, paramsWithTake, options);
+        return {
+            data: result.data?.[0],
+            isLoading: result.isLoading,
+            error: result.error,
+            refresh: result.refresh
+        };
+    }
+    return { use, useOne };
 }
 
 function createTxMutationHook(runtime, transactions) {
@@ -8181,11 +8451,15 @@ function useHyperstack(stack) {
         views[viewName] = {};
         if (typeof viewGroup === 'object' && viewGroup !== null) {
             const group = viewGroup;
-            if (group.state) {
-                views[viewName].state = createStateViewHook(group.state, runtime);
-            }
-            if (group.list) {
-                views[viewName].list = createListViewHook(group.list, runtime);
+            for (const [subViewName, viewDef] of Object.entries(group)) {
+                if (!viewDef || typeof viewDef !== 'object' || !('mode' in viewDef))
+                    continue;
+                if (viewDef.mode === 'state') {
+                    views[viewName][subViewName] = createStateViewHook(viewDef, runtime);
+                }
+                else if (viewDef.mode === 'list') {
+                    views[viewName][subViewName] = createListViewHook(viewDef, runtime);
+                }
             }
         }
     }