@neevjs/client 0.0.1 → 1.0.1-beta

package/dist/index.mjs

@@ -1,9 +1,18 @@
+// src/index.ts
+import { VERSION as VERSION2 } from "@neevjs/shared";
+
 // src/core/AuthClient.ts
+var USER_CACHE_KEY = "neev_user";
 var AuthClient = class {
   client;
   userData = null;
   constructor(client) {
     this.client = client;
+    try {
+      const cached = sessionStorage.getItem(USER_CACHE_KEY);
+      if (cached) this.userData = JSON.parse(cached);
+    } catch {
+    }
   }
   async login(email, password) {
     const res = await this.client.request("/auth/login", {
@@ -12,6 +21,7 @@ var AuthClient = class {
     });
     localStorage.setItem("neev_token", res.data.token);
     this.userData = res.data.user;
+    sessionStorage.setItem(USER_CACHE_KEY, JSON.stringify(this.userData));
   }
   async register(email, password, name) {
     const res = await this.client.request("/auth/register", {
@@ -20,9 +30,11 @@ var AuthClient = class {
     });
     localStorage.setItem("neev_token", res.data.token);
     this.userData = res.data.user;
+    sessionStorage.setItem(USER_CACHE_KEY, JSON.stringify(this.userData));
   }
   logout() {
     localStorage.removeItem("neev_token");
+    sessionStorage.removeItem(USER_CACHE_KEY);
     this.userData = null;
   }
   async user() {
@@ -30,6 +42,7 @@ var AuthClient = class {
     if (this.userData) return this.userData;
     const res = await this.client.request("/auth/me");
     this.userData = res.data;
+    sessionStorage.setItem(USER_CACHE_KEY, JSON.stringify(this.userData));
     return this.userData;
   }
   isAuthenticated() {
@@ -51,13 +64,23 @@ function createClient(config = {}) {
         req = await plugin.onRequest(req);
       }
     }
+    if (req._cachedResponse instanceof Response) {
+      let cachedRes = req._cachedResponse;
+      for (const plugin of plugins) {
+        if (plugin.onResponse) {
+          cachedRes = await plugin.onResponse(cachedRes, req);
+        }
+      }
+      return cachedRes.json();
+    }
     const headers = {
       "Content-Type": "application/json",
       ...req.options.headers ?? {}
     };
     let response;
     try {
-      response = await fetch(baseURL + req.url, {
+      const finalBaseURL = req.options.baseURL ?? baseURL;
+      response = await fetch(finalBaseURL + req.url, {
         method: req.options.method ?? "GET",
         body: req.options.body,
         headers
@@ -65,20 +88,31 @@ function createClient(config = {}) {
       let finalResponse = response;
       for (const plugin of plugins) {
         if (plugin.onResponse) {
-          finalResponse = await plugin.onResponse(finalResponse);
+          finalResponse = await plugin.onResponse(finalResponse, req);
+        }
+      }
+      if (finalResponse.status === 401) {
+        client.auth?.logout();
+        const error = new Error("Session expired. Please log in again.");
+        error.status = 401;
+        for (const plugin of plugins) {
+          plugin.onError?.(error, req);
         }
+        throw error;
       }
       if (!finalResponse.ok) {
         const errorBody = await finalResponse.json().catch(() => ({ error: "Unknown error" }));
-        throw new Error(
+        const error = new Error(
           typeof errorBody.error === "string" ? errorBody.error : `HTTP ${finalResponse.status}`
         );
+        error.status = finalResponse.status;
+        throw error;
       }
       return finalResponse.json();
     } catch (err) {
       const error = err instanceof Error ? err : new Error(String(err));
       for (const plugin of plugins) {
-        plugin.onError?.(error);
+        plugin.onError?.(error, req);
       }
       throw error;
     }
@@ -91,7 +125,6 @@ function createClient(config = {}) {
     request,
     use,
     auth: null
-    // set below after client is defined
   };
   client.auth = new AuthClient(client);
   return client;
@@ -114,15 +147,150 @@ function useNeevClient() {
   return client;
 }
 
+// src/core/SecureStore.ts
+var SECURE_PREFIX = "neev_secure_";
+var _encryptionKey = null;
+async function getEncryptionKey() {
+  if (_encryptionKey) return _encryptionKey;
+  if (!window.crypto?.subtle) {
+    throw new Error(
+      "[NeevJS] SecureStore requires Web Crypto API (available in HTTPS or localhost contexts only)."
+    );
+  }
+  _encryptionKey = await window.crypto.subtle.generateKey(
+    { name: "AES-GCM", length: 256 },
+    false,
+    // non-extractable — the raw key bytes can NEVER be exported
+    ["encrypt", "decrypt"]
+  );
+  return _encryptionKey;
+}
+async function encrypt(data) {
+  const key = await getEncryptionKey();
+  const iv = window.crypto.getRandomValues(new Uint8Array(12));
+  const encoded = new TextEncoder().encode(JSON.stringify(data));
+  const ciphertext = await window.crypto.subtle.encrypt(
+    { name: "AES-GCM", iv },
+    key,
+    encoded
+  );
+  const combined = new Uint8Array(iv.byteLength + ciphertext.byteLength);
+  combined.set(iv, 0);
+  combined.set(new Uint8Array(ciphertext), iv.byteLength);
+  return btoa(String.fromCharCode(...combined));
+}
+async function decrypt(encoded) {
+  const key = await getEncryptionKey();
+  const combined = Uint8Array.from(atob(encoded), (c) => c.charCodeAt(0));
+  const iv = combined.slice(0, 12);
+  const ciphertext = combined.slice(12);
+  const decrypted = await window.crypto.subtle.decrypt(
+    { name: "AES-GCM", iv },
+    key,
+    ciphertext
+  );
+  return JSON.parse(new TextDecoder().decode(decrypted));
+}
+var SecureStore = {
+  /**
+   * Encrypt and store a value in localStorage.
+   * The value cannot be read without the in-memory session key.
+   */
+  async set(key, value) {
+    const ciphertext = await encrypt(value);
+    localStorage.setItem(SECURE_PREFIX + key, ciphertext);
+  },
+  /**
+   * Retrieve and decrypt a value.
+   * Returns null if the key doesn't exist or cannot be decrypted
+   * (e.g. after a page refresh when the key is gone).
+   */
+  async get(key) {
+    const stored = localStorage.getItem(SECURE_PREFIX + key);
+    if (!stored) return null;
+    try {
+      return await decrypt(stored);
+    } catch {
+      localStorage.removeItem(SECURE_PREFIX + key);
+      return null;
+    }
+  },
+  /**
+   * Remove a specific key from SecureStore.
+   */
+  remove(key) {
+    localStorage.removeItem(SECURE_PREFIX + key);
+  },
+  /**
+   * Remove ALL SecureStore entries from localStorage.
+   * Call this on logout to clean up all session-bound encrypted data.
+   */
+  clear() {
+    const keysToRemove = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i);
+      if (k?.startsWith(SECURE_PREFIX)) keysToRemove.push(k);
+    }
+    keysToRemove.forEach((k) => localStorage.removeItem(k));
+  }
+};
+
 // src/hooks/useModel.ts
 import { useCallback, useEffect, useRef, useState } from "react";
 var cache = /* @__PURE__ */ new Map();
-function useModel(name) {
+var listeners = /* @__PURE__ */ new Map();
+function emitChange(url, exclude) {
+  listeners.get(url)?.forEach((listener) => {
+    if (listener !== exclude) listener();
+  });
+}
+function mutateModel(url) {
+  cache.delete(url);
+  emitChange(url);
+}
+var inFlightRequests = /* @__PURE__ */ new Map();
+var cacheTimestamps = /* @__PURE__ */ new Map();
+var cacheError = /* @__PURE__ */ new Map();
+var STALE_TIME = 60 * 1e3;
+function useModel(name, options) {
   const client = useNeevClient();
-  const url = `/${name}`;
+  const baseUrl = `/${name}`;
+  const url = options?.params ? `${baseUrl}?${new URLSearchParams(
+    Object.entries(options.params).filter(([, v]) => v !== void 0).map(([k, v]) => [k, String(v)])
+  ).toString()}` : baseUrl;
   const [data, setData] = useState(() => cache.get(url) ?? []);
   const [loading, setLoading] = useState(!cache.has(url));
   const [error, setError] = useState(null);
+  if (options?.suspense) {
+    if (cacheError.has(url)) {
+      throw cacheError.get(url);
+    }
+    const timestamp = cacheTimestamps.get(url);
+    const isFresh = timestamp && Date.now() - timestamp < STALE_TIME;
+    if (!isFresh && !cache.has(url)) {
+      if (!navigator.onLine) {
+        throw new Error("[NeevJS] Offline: No cached data available for this model.");
+      }
+      let requestPromise = inFlightRequests.get(url);
+      if (!requestPromise) {
+        requestPromise = client.request(url, { baseURL: options?.baseURL }).then((res) => {
+          const rows = Array.isArray(res) ? res : res.data ?? [];
+          cache.set(url, rows);
+          cacheTimestamps.set(url, Date.now());
+          cacheError.delete(url);
+        }).catch((err) => {
+          if (!navigator.onLine && cache.has(url)) return;
+          cacheError.set(url, err instanceof Error ? err : new Error(String(err)));
+        }).finally(() => {
+          if (inFlightRequests.get(url) === requestPromise) {
+            inFlightRequests.delete(url);
+          }
+        });
+        inFlightRequests.set(url, requestPromise);
+      }
+      throw requestPromise;
+    }
+  }
   const mountedRef = useRef(true);
   useEffect(() => {
     mountedRef.current = true;
@@ -130,51 +298,138 @@ function useModel(name) {
       mountedRef.current = false;
     };
   }, []);
-  const fetchData = useCallback(async () => {
+  const fetchData = useCallback(async (force = false) => {
+    if (!navigator.onLine && cache.has(url)) {
+      if (mountedRef.current) {
+        setData(cache.get(url));
+        setError(null);
+        setLoading(false);
+      }
+      return;
+    }
+    if (!force && cache.has(url)) {
+      const timestamp = cacheTimestamps.get(url);
+      if (timestamp && Date.now() - timestamp < STALE_TIME) {
+        if (mountedRef.current) {
+          setData(cache.get(url));
+          setError(null);
+          setLoading(false);
+        }
+        return;
+      }
+    }
     if (mountedRef.current) setLoading(true);
+    let requestPromise = inFlightRequests.get(url);
+    if (!requestPromise) {
+      requestPromise = client.request(url, { baseURL: options?.baseURL });
+      inFlightRequests.set(url, requestPromise);
+    }
     try {
-      const res = await client.request(url);
+      const res = await requestPromise;
       const rows = Array.isArray(res) ? res : res.data ?? [];
       cache.set(url, rows);
+      cacheTimestamps.set(url, Date.now());
+      cacheError.delete(url);
       if (mountedRef.current) {
         setData(rows);
         setError(null);
       }
     } catch (err) {
-      if (mountedRef.current) {
+      if (!navigator.onLine && cache.has(url)) {
+        if (mountedRef.current) {
+          setData(cache.get(url));
+          setError(null);
+        }
+      } else if (mountedRef.current) {
         setError(err instanceof Error ? err : new Error(String(err)));
       }
     } finally {
+      if (inFlightRequests.get(url) === requestPromise) {
+        inFlightRequests.delete(url);
+      }
       if (mountedRef.current) setLoading(false);
     }
   }, [client, url]);
   useEffect(() => {
-    void fetchData();
+    void fetchData(false);
   }, [fetchData]);
+  const handleRemoteChange = useCallback(() => {
+    void fetchData(true);
+  }, [fetchData]);
+  useEffect(() => {
+    if (!listeners.has(url)) listeners.set(url, /* @__PURE__ */ new Set());
+    listeners.get(url).add(handleRemoteChange);
+    return () => {
+      listeners.get(url)?.delete(handleRemoteChange);
+    };
+  }, [url, handleRemoteChange]);
   const create = useCallback(async (payload) => {
-    await client.request(url, {
-      method: "POST",
-      body: JSON.stringify(payload)
-    });
-    cache.delete(url);
-    await fetchData();
-  }, [client, url, fetchData]);
+    try {
+      await client.request(url, {
+        method: "POST",
+        body: JSON.stringify(payload),
+        baseURL: options?.baseURL
+      });
+      cache.delete(url);
+      await fetchData(true);
+      emitChange(url, handleRemoteChange);
+    } catch (err) {
+      if (err.message?.includes("[NeevJS] Offline")) {
+        const newRecord = { ...payload, id: `temp_${Date.now()}` };
+        const currentData = cache.get(url) ?? [];
+        const updatedData = [...currentData, newRecord];
+        cache.set(url, updatedData);
+        setData(updatedData);
+        emitChange(url, handleRemoteChange);
+      } else {
+        throw err;
+      }
+    }
+  }, [client, url, fetchData, handleRemoteChange]);
   const update = useCallback(async (id, payload) => {
-    await client.request(`${url}/${id}`, {
-      method: "PUT",
-      body: JSON.stringify(payload)
-    });
-    cache.delete(url);
-    await fetchData();
-  }, [client, url, fetchData]);
+    try {
+      await client.request(`${url}/${id}`, {
+        method: "PUT",
+        body: JSON.stringify(payload),
+        baseURL: options?.baseURL
+      });
+      cache.delete(url);
+      await fetchData(true);
+      emitChange(url, handleRemoteChange);
+    } catch (err) {
+      if (err.message?.includes("[NeevJS] Offline")) {
+        const currentData = cache.get(url) ?? [];
+        const updatedData = currentData.map((item) => String(item.id) === String(id) ? { ...item, ...payload } : item);
+        cache.set(url, updatedData);
+        setData(updatedData);
+        emitChange(url, handleRemoteChange);
+      } else {
+        throw err;
+      }
+    }
+  }, [client, url, fetchData, handleRemoteChange]);
   const remove = useCallback(async (id) => {
-    await client.request(`${url}/${id}`, {
-      method: "DELETE"
-    });
-    cache.delete(url);
-    await fetchData();
-  }, [client, url, fetchData]);
-  return { data, loading, error, create, update, remove, refresh: fetchData };
+    try {
+      await client.request(`${url}/${id}`, {
+        method: "DELETE",
+        baseURL: options?.baseURL
+      });
+      cache.delete(url);
+      await fetchData(true);
+      emitChange(url, handleRemoteChange);
+    } catch (err) {
+      if (err.message?.includes("[NeevJS] Offline")) {
+        const currentData = cache.get(url) ?? [];
+        const filteredData = currentData.filter((item) => String(item.id) !== String(id));
+        cache.set(url, filteredData);
+        setData(filteredData);
+        emitChange(url, handleRemoteChange);
+      } else {
+        throw err;
+      }
+    }
+  }, [client, url, fetchData, handleRemoteChange]);
+  return { data, loading, error, create, update, remove, refresh: () => fetchData(true) };
 }
 
 // src/hooks/useAuth.ts
@@ -194,6 +449,8 @@ function useAuth() {
 import { useEffect as useEffect2, useState as useState2 } from "react";
 var syncState = {
   pendingCount: 0,
+  syncing: false,
+  errors: [],
   listeners: /* @__PURE__ */ new Set(),
   notify() {
     this.listeners.forEach((fn) => fn());
@@ -202,18 +459,19 @@ var syncState = {
 function useSyncStatus() {
   const [isOffline, setIsOffline] = useState2(!navigator.onLine);
   const [pending, setPending] = useState2(syncState.pendingCount);
-  const [syncing, setSyncing] = useState2(false);
+  const [syncing, setSyncing] = useState2(syncState.syncing);
+  const [errors, setErrors] = useState2(syncState.errors);
   useEffect2(() => {
     function onOnline() {
       setIsOffline(false);
-      setSyncing(true);
-      setTimeout(() => setSyncing(false), 2e3);
     }
     function onOffline() {
       setIsOffline(true);
     }
     function onSyncUpdate() {
       setPending(syncState.pendingCount);
+      setSyncing(syncState.syncing);
+      setErrors([...syncState.errors]);
     }
     window.addEventListener("online", onOnline);
     window.addEventListener("offline", onOffline);
@@ -224,7 +482,95 @@ function useSyncStatus() {
       syncState.listeners.delete(onSyncUpdate);
     };
   }, []);
-  return { isOffline, pending, syncing };
+  function clearErrors() {
+    syncState.errors = [];
+    syncState.notify();
+  }
+  return { isOffline, pending, syncing, errors, clearErrors };
+}
+
+// src/hooks/useStore.ts
+import { useCallback as useCallback2, useSyncExternalStore } from "react";
+var stores = /* @__PURE__ */ new Map();
+var listeners2 = /* @__PURE__ */ new Map();
+function subscribe(key, callback) {
+  if (!listeners2.has(key)) listeners2.set(key, /* @__PURE__ */ new Set());
+  listeners2.get(key).add(callback);
+  return () => {
+    listeners2.get(key).delete(callback);
+  };
+}
+function emitChange2(key) {
+  listeners2.get(key)?.forEach((fn) => fn());
+}
+var PERSIST_PREFIX = "neev_store_";
+var SESSION_PREFIX = "neev_session_";
+function readFromStorage(key, backend, fallback) {
+  try {
+    const prefix = backend === "sessionStorage" ? SESSION_PREFIX : PERSIST_PREFIX;
+    const raw = window[backend].getItem(prefix + key);
+    if (raw === null) return fallback;
+    const entry = JSON.parse(raw);
+    if (entry.expiresAt !== void 0 && Date.now() > entry.expiresAt) {
+      window[backend].removeItem(prefix + key);
+      return fallback;
+    }
+    return entry.value;
+  } catch {
+    return fallback;
+  }
+}
+function writeToStorage(key, value, backend, ttl) {
+  try {
+    const prefix = backend === "sessionStorage" ? SESSION_PREFIX : PERSIST_PREFIX;
+    const entry = {
+      value,
+      expiresAt: ttl !== void 0 ? Date.now() + ttl : void 0
+    };
+    window[backend].setItem(prefix + key, JSON.stringify(entry));
+  } catch {
+  }
+}
+function useStore(key, initialValue, options = {}) {
+  const { persist = false, session = false, ttl } = options;
+  const backend = persist ? "localStorage" : session ? "sessionStorage" : null;
+  if (!stores.has(key)) {
+    const resolved = backend ? readFromStorage(key, backend, initialValue) : initialValue;
+    stores.set(key, resolved);
+  }
+  const snapshot = useSyncExternalStore(
+    useCallback2((callback) => subscribe(key, callback), [key]),
+    useCallback2(() => stores.get(key), [key]),
+    useCallback2(() => initialValue, [])
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const setValue = useCallback2(
+    (updater) => {
+      const current = stores.get(key);
+      const next = typeof updater === "function" ? updater(current) : updater;
+      stores.set(key, next);
+      if (backend) {
+        writeToStorage(key, next, backend, ttl);
+      }
+      emitChange2(key);
+    },
+    [key, backend, ttl]
+  );
+  return [snapshot, setValue];
+}
+function getStore(key) {
+  return stores.get(key);
+}
+function setStore(key, value) {
+  stores.set(key, value);
+  emitChange2(key);
+}
+function clearPersistedStore(key) {
+  try {
+    localStorage.removeItem(PERSIST_PREFIX + key);
+    sessionStorage.removeItem(SESSION_PREFIX + key);
+  } catch {
+  }
 }
 
 // src/components/Table.tsx
@@ -234,37 +580,44 @@ function Table({
   columns,
   onEdit,
   onDelete,
-  emptyMessage = "No records found."
+  emptyMessage = "No records found.",
+  classNames = {},
+  styles = {},
+  unstyled = false
 }) {
   const { data, loading, error } = useModel(model);
   if (loading) {
-    return /* @__PURE__ */ jsx2("div", { className: "neev-table-loading", children: /* @__PURE__ */ jsx2("p", { children: "Loading..." }) });
+    return /* @__PURE__ */ jsx2("div", { className: classNames.loadingState ?? "neev-table-loading", style: styles.loadingState, children: /* @__PURE__ */ jsx2("p", { children: "Loading..." }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx2("div", { className: "neev-table-error", children: /* @__PURE__ */ jsxs("p", { children: [
+    return /* @__PURE__ */ jsx2("div", { className: classNames.errorState ?? "neev-table-error", style: styles.errorState, children: /* @__PURE__ */ jsxs("p", { children: [
       "Error: ",
       error.message
     ] }) });
   }
   if (data.length === 0) {
-    return /* @__PURE__ */ jsx2("div", { className: "neev-table-empty", children: /* @__PURE__ */ jsx2("p", { children: emptyMessage }) });
+    return /* @__PURE__ */ jsx2("div", { className: classNames.emptyState ?? "neev-table-empty", style: styles.emptyState, children: /* @__PURE__ */ jsx2("p", { children: emptyMessage }) });
   }
   const resolvedColumns = columns ?? Object.keys(data[0]).map((key) => ({
     key,
     label: key.charAt(0).toUpperCase() + key.slice(1)
   }));
-  return /* @__PURE__ */ jsx2("div", { className: "neev-table-wrapper", style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { className: "neev-table", style: { width: "100%", borderCollapse: "collapse" }, children: [
-    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+  return /* @__PURE__ */ jsx2("div", { className: classNames.root ?? "neev-table-wrapper", style: { ...!unstyled ? { overflowX: "auto" } : {}, ...styles.root }, children: /* @__PURE__ */ jsxs("table", { className: classNames.table ?? "neev-table", style: { ...!unstyled ? { width: "100%", borderCollapse: "collapse" } : {}, ...styles.table }, children: [
+    /* @__PURE__ */ jsx2("thead", { className: classNames.thead, style: styles.thead, children: /* @__PURE__ */ jsxs("tr", { className: classNames.tr, style: styles.tr, children: [
       resolvedColumns.map((col) => /* @__PURE__ */ jsx2(
         "th",
         {
+          className: classNames.th,
           style: {
-            textAlign: "left",
-            padding: "10px 12px",
-            borderBottom: "2px solid #e5e7eb",
-            fontWeight: 600,
-            color: "#374151",
-            background: "#f9fafb"
+            ...!unstyled ? {
+              textAlign: "left",
+              padding: "10px 12px",
+              borderBottom: "2px solid #e5e7eb",
+              fontWeight: 600,
+              color: "#374151",
+              background: "#f9fafb"
+            } : {},
+            ...styles.th
           },
           children: col.label ?? col.key
         },
@@ -273,45 +626,55 @@ function Table({
       (onEdit || onDelete) && /* @__PURE__ */ jsx2(
         "th",
         {
+          className: classNames.th,
           style: {
-            textAlign: "left",
-            padding: "10px 12px",
-            borderBottom: "2px solid #e5e7eb",
-            fontWeight: 600,
-            color: "#374151",
-            background: "#f9fafb"
+            ...!unstyled ? {
+              textAlign: "left",
+              padding: "10px 12px",
+              borderBottom: "2px solid #e5e7eb",
+              fontWeight: 600,
+              color: "#374151",
+              background: "#f9fafb"
+            } : {},
+            ...styles.th
           },
           children: "Actions"
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx2("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx2("tbody", { className: classNames.tbody, style: styles.tbody, children: data.map((row, rowIndex) => /* @__PURE__ */ jsxs(
       "tr",
       {
-        style: { borderBottom: "1px solid #e5e7eb" },
+        className: classNames.tr,
+        style: { ...!unstyled ? { borderBottom: "1px solid #e5e7eb" } : {}, ...styles.tr },
         children: [
           resolvedColumns.map((col) => /* @__PURE__ */ jsx2(
             "td",
             {
-              style: { padding: "10px 12px", color: "#1f2937", verticalAlign: "middle" },
+              className: classNames.td,
+              style: { ...!unstyled ? { padding: "10px 12px", color: "#1f2937", verticalAlign: "middle" } : {}, ...styles.td },
               children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "")
             },
             col.key
           )),
-          (onEdit || onDelete) && /* @__PURE__ */ jsxs("td", { style: { padding: "10px 12px", verticalAlign: "middle" }, children: [
+          (onEdit || onDelete) && /* @__PURE__ */ jsxs("td", { className: classNames.actions ?? classNames.td, style: { ...!unstyled ? { padding: "10px 12px", verticalAlign: "middle" } : {}, ...styles.td, ...styles.actions }, children: [
             onEdit && /* @__PURE__ */ jsx2(
               "button",
               {
                 onClick: () => onEdit(row),
+                className: classNames.editButton,
                 style: {
-                  marginRight: 8,
-                  padding: "4px 10px",
-                  fontSize: 13,
-                  cursor: "pointer",
-                  background: "#3b82f6",
-                  color: "#fff",
-                  border: "none",
-                  borderRadius: 4
+                  ...!unstyled ? {
+                    marginRight: 8,
+                    padding: "4px 10px",
+                    fontSize: 13,
+                    cursor: "pointer",
+                    background: "#3b82f6",
+                    color: "#fff",
+                    border: "none",
+                    borderRadius: 4
+                  } : {},
+                  ...styles.editButton
                 },
                 children: "Edit"
               }
@@ -320,14 +683,18 @@ function Table({
               "button",
               {
                 onClick: () => onDelete(row),
+                className: classNames.deleteButton,
                 style: {
-                  padding: "4px 10px",
-                  fontSize: 13,
-                  cursor: "pointer",
-                  background: "#ef4444",
-                  color: "#fff",
-                  border: "none",
-                  borderRadius: 4
+                  ...!unstyled ? {
+                    padding: "4px 10px",
+                    fontSize: 13,
+                    cursor: "pointer",
+                    background: "#ef4444",
+                    color: "#fff",
+                    border: "none",
+                    borderRadius: 4
+                  } : {},
+                  ...styles.deleteButton
                 },
                 children: "Delete"
               }
@@ -351,22 +718,48 @@ function Form({
   onSuccess,
   onError,
   submitLabel = "Submit",
-  children
+  classNames = {},
+  styles = {},
+  unstyled = false,
+  transformPayload,
+  onSubmitOverride,
+  children,
+  fieldErrors: externalFieldErrors = {},
+  validate
 }) {
   const { create, update } = useModel(model);
   const [submitting, setSubmitting] = useState3(false);
   const [formError, setFormError] = useState3(null);
+  const [internalFieldErrors, setInternalFieldErrors] = useState3({});
+  const allFieldErrors = { ...internalFieldErrors, ...externalFieldErrors };
   async function handleSubmit(e) {
     e.preventDefault();
     setSubmitting(true);
     setFormError(null);
+    setInternalFieldErrors({});
     const formData = new FormData(e.currentTarget);
     const payload = Object.fromEntries(formData.entries());
     try {
-      if (editId !== void 0) {
-        await update(editId, payload);
+      let finalPayload = payload;
+      if (validate) {
+        const validationErrors = validate(finalPayload);
+        if (validationErrors && Object.keys(validationErrors).length > 0) {
+          setInternalFieldErrors(validationErrors);
+          setSubmitting(false);
+          return;
+        }
+      }
+      if (transformPayload) {
+        finalPayload = await transformPayload(finalPayload);
+      }
+      if (onSubmitOverride) {
+        await onSubmitOverride(finalPayload);
       } else {
-        await create(payload);
+        if (editId !== void 0) {
+          await update(editId, finalPayload);
+        } else {
+          await create(finalPayload);
+        }
       }
       onSuccess?.();
     } catch (err) {
@@ -377,7 +770,7 @@ function Form({
       setSubmitting(false);
     }
   }
-  const inputStyle = {
+  const baseInputStyle = unstyled ? {} : {
     display: "block",
     width: "100%",
     padding: "8px 10px",
@@ -388,29 +781,33 @@ function Form({
     boxSizing: "border-box",
     marginTop: 4
   };
-  const labelStyle = {
+  const baseLabelStyle = unstyled ? {} : {
     display: "block",
     fontSize: 13,
     fontWeight: 500,
     color: "#374151",
     marginBottom: 12
   };
-  return /* @__PURE__ */ jsxs2("form", { onSubmit: (e) => void handleSubmit(e), style: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs2("form", { className: classNames.root, onSubmit: (e) => void handleSubmit(e), style: { width: "100%", ...styles.root }, children: [
     formError && /* @__PURE__ */ jsx3(
       "div",
       {
+        className: classNames.error,
         style: {
-          padding: "8px 12px",
-          marginBottom: 12,
-          background: "#fee2e2",
-          color: "#dc2626",
-          borderRadius: 6,
-          fontSize: 13
+          ...!unstyled ? {
+            padding: "8px 12px",
+            marginBottom: 12,
+            background: "#fee2e2",
+            color: "#dc2626",
+            borderRadius: 6,
+            fontSize: 13
+          } : {},
+          ...styles.error
         },
         children: formError
       }
     ),
-    fields?.map((field) => /* @__PURE__ */ jsxs2("label", { style: labelStyle, children: [
+    fields?.map((field) => /* @__PURE__ */ jsxs2("label", { className: classNames.label, style: { ...baseLabelStyle, ...styles.label }, children: [
       field.label ?? field.name,
       field.required && /* @__PURE__ */ jsx3("span", { style: { color: "#ef4444", marginLeft: 2 }, children: "*" }),
       field.type === "textarea" ? /* @__PURE__ */ jsx3(
@@ -420,7 +817,8 @@ function Form({
           placeholder: field.placeholder,
           required: field.required,
           defaultValue: String(initialValues[field.name] ?? ""),
-          style: { ...inputStyle, minHeight: 80, resize: "vertical" }
+          className: classNames.textarea ?? classNames.input,
+          style: { ...baseInputStyle, minHeight: 80, resize: "vertical", ...styles.input, ...styles.textarea }
         }
       ) : field.type === "select" ? /* @__PURE__ */ jsxs2(
         "select",
@@ -428,7 +826,8 @@ function Form({
           name: field.name,
           required: field.required,
           defaultValue: String(initialValues[field.name] ?? ""),
-          style: inputStyle,
+          className: classNames.select ?? classNames.input,
+          style: { ...baseInputStyle, ...styles.input, ...styles.select },
           children: [
             /* @__PURE__ */ jsx3("option", { value: "", children: "Select..." }),
             field.options?.map((opt) => /* @__PURE__ */ jsx3("option", { value: opt.value, children: opt.label }, opt.value))
@@ -442,7 +841,24 @@ function Form({
           placeholder: field.placeholder,
           required: field.required,
           defaultValue: String(initialValues[field.name] ?? ""),
-          style: inputStyle
+          className: classNames.input,
+          style: { ...baseInputStyle, ...styles.input }
+        }
+      ),
+      allFieldErrors[field.name] && /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: classNames.fieldError,
+          style: {
+            ...!unstyled ? {
+              display: "block",
+              marginTop: 4,
+              fontSize: 12,
+              color: "#dc2626"
+            } : {},
+            ...styles.fieldError
+          },
+          children: allFieldErrors[field.name]
         }
       )
     ] }, field.name)),
@@ -452,17 +868,21 @@ function Form({
       {
         type: "submit",
         disabled: submitting,
+        className: classNames.submitButton,
         style: {
-          marginTop: 8,
-          padding: "9px 20px",
-          background: submitting ? "#9ca3af" : "#111827",
-          color: "#fff",
-          border: "none",
-          borderRadius: 6,
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: submitting ? "not-allowed" : "pointer",
-          width: "100%"
+          ...!unstyled ? {
+            marginTop: 8,
+            padding: "9px 20px",
+            background: submitting ? "#9ca3af" : "#111827",
+            color: "#fff",
+            border: "none",
+            borderRadius: 6,
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: submitting ? "not-allowed" : "pointer",
+            width: "100%"
+          } : {},
+          ...styles.submitButton
         },
         children: submitting ? "Saving..." : submitLabel
       }
@@ -473,34 +893,86 @@ function Form({
 // src/components/Protected.tsx
 import { useEffect as useEffect3, useState as useState4 } from "react";
 import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
-function Protected({ children, fallback, role }) {
+function Protected({ children, loadingFallback = null, fallback, role }) {
   const { isAuthenticated, user } = useAuth();
-  const [checking, setChecking] = useState4(true);
-  const [allowed, setAllowed] = useState4(false);
+  const hasToken = isAuthenticated();
+  const [checking, setChecking] = useState4(hasToken && !!role);
+  const [allowed, setAllowed] = useState4(hasToken && !role);
   useEffect3(() => {
-    async function check() {
-      if (!isAuthenticated()) {
-        setAllowed(false);
-        setChecking(false);
-        return;
-      }
-      if (role) {
-        const u = await user();
+    if (!hasToken) {
+      setAllowed(false);
+      setChecking(false);
+      return;
+    }
+    if (!role) {
+      setAllowed(true);
+      setChecking(false);
+      return;
+    }
+    let cancelled = false;
+    async function checkRole() {
+      const u = await user();
+      if (!cancelled) {
         setAllowed(u?.role === role);
-      } else {
-        setAllowed(true);
+        setChecking(false);
       }
-      setChecking(false);
     }
-    void check();
-  }, [isAuthenticated, role, user]);
-  if (checking) return /* @__PURE__ */ jsx4(Fragment, {});
+    void checkRole();
+    return () => {
+      cancelled = true;
+    };
+  }, [hasToken, role, user]);
+  if (checking) {
+    return /* @__PURE__ */ jsx4(Fragment, { children: loadingFallback });
+  }
   if (!allowed) {
     return /* @__PURE__ */ jsx4(Fragment, { children: fallback ?? /* @__PURE__ */ jsx4("div", { style: { padding: 24, textAlign: "center", color: "#6b7280" }, children: /* @__PURE__ */ jsx4("p", { children: "You are not authorized to view this page." }) }) });
   }
   return /* @__PURE__ */ jsx4(Fragment, { children });
 }
 
+// src/components/NeevBoundary.tsx
+import { Component, Suspense } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var NeevErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("NeevBoundary caught an error:", error, errorInfo);
+  }
+  resetErrorBoundary = () => {
+    this.setState({ hasError: false, error: null });
+  };
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error, this.resetErrorBoundary);
+      }
+      return /* @__PURE__ */ jsxs3("div", { style: { padding: "1rem", background: "#fee2e2", color: "#b91c1c", borderRadius: "8px", fontFamily: "sans-serif" }, children: [
+        /* @__PURE__ */ jsx5("h3", { style: { margin: "0 0 8px 0" }, children: "Data Error" }),
+        /* @__PURE__ */ jsx5("p", { style: { margin: 0, fontSize: "14px" }, children: this.state.error.message }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: this.resetErrorBoundary,
+            style: { marginTop: "12px", padding: "6px 12px", background: "#b91c1c", color: "white", border: "none", borderRadius: "4px", cursor: "pointer", fontSize: "13px" },
+            children: "Try again"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+};
+function NeevBoundary({ children, loadingFallback, errorFallback }) {
+  return /* @__PURE__ */ jsx5(NeevErrorBoundary, { fallback: errorFallback, children: /* @__PURE__ */ jsx5(Suspense, { fallback: loadingFallback ?? /* @__PURE__ */ jsx5("div", { style: { padding: "1rem", color: "#6b7280", fontFamily: "sans-serif" }, children: "Loading data..." }), children }) });
+}
+
 // src/plugins/AuthPlugin.ts
 var AuthPlugin = {
   name: "auth",
@@ -520,18 +992,19 @@ var AuthPlugin = {
 };
 
 // src/plugins/LoggerPlugin.ts
+import { VERSION } from "@neevjs/shared";
 var LoggerPlugin = {
   name: "logger",
   onRequest(req) {
-    console.log(`[NeevJS] \u2192 ${req.options.method ?? "GET"} ${req.url}`);
+    console.log(`[NeevJS v${VERSION}] \u2192 ${req.options.method ?? "GET"} ${req.url}`);
     return req;
   },
-  onResponse(res) {
-    console.log(`[NeevJS] \u2190 ${res.status} ${res.url}`);
+  onResponse(res, req) {
+    console.log(`[NeevJS v${VERSION}] \u2190 ${res.status} ${req.options.method ?? "GET"} ${req.url}`);
     return res;
   },
-  onError(err) {
-    console.error("[NeevJS] \u2717 Error:", err.message);
+  onError(err, req) {
+    console.error(`[NeevJS v${VERSION}] \u2717 Error on ${req?.url ?? "unknown"}:`, err.message);
   }
 };
 
@@ -543,25 +1016,36 @@ function createCachePlugin(options = {}) {
     name: "cache",
     onRequest(req) {
       const method = (req.options.method ?? "GET").toUpperCase();
-      if (method !== "GET") return req;
+      if (method !== "GET") {
+        store.delete(req.url);
+        const parts = req.url.split("/");
+        if (parts.length > 2) {
+          const baseUrl = "/" + parts[1];
+          store.delete(baseUrl);
+        }
+        return req;
+      }
       const entry = store.get(req.url);
       if (entry && Date.now() < entry.expiresAt) {
         const cached = new Response(JSON.stringify(entry.data), {
           status: 200,
-          headers: { "Content-Type": "application/json", "X-Neev-Cache": "HIT" }
+          headers: {
+            "Content-Type": "application/json",
+            "X-Neev-Cache": "HIT"
+          }
         });
         return { ...req, _cachedResponse: cached };
       }
       return req;
     },
-    async onResponse(res) {
-      if (res.headers.get("X-Neev-Cache") === "HIT") return res;
-      const url = res.url;
-      if (!url) return res;
+    async onResponse(res, req) {
+      if (res.headers.get("X-Neev-Cache") === "HIT" || !res.ok) return res;
+      const method = (req.options.method ?? "GET").toUpperCase();
+      if (method !== "GET") return res;
       try {
         const clone = res.clone();
         const data = await clone.json();
-        store.set(url, { data, expiresAt: Date.now() + ttl });
+        store.set(req.url, { data, expiresAt: Date.now() + ttl });
       } catch {
       }
       return res;
@@ -592,27 +1076,54 @@ function saveQueue(queue) {
 }
 function createOfflinePlugin() {
   let client;
+  let onlineHandler = null;
   async function processQueue() {
     if (!navigator.onLine) return;
     const queue = loadQueue();
     if (queue.length === 0) return;
+    syncState.syncing = true;
+    syncState.notify();
     const remaining = [];
+    let hasChanges = false;
+    const urlsToMutate = /* @__PURE__ */ new Set();
     for (const action of queue) {
       try {
         await client.request(action.url, action.options);
-      } catch {
-        remaining.push({ ...action, retries: action.retries + 1 });
+        hasChanges = true;
+        const baseUrl = "/" + (action.url.split("/")[1] || "");
+        urlsToMutate.add(baseUrl);
+      } catch (err) {
+        if (err.status && err.status >= 400 && err.status < 500) {
+          syncState.errors.push(new Error(`Offline action on ${action.url} failed: ${err.message}`));
+          hasChanges = true;
+          const baseUrl = "/" + (action.url.split("/")[1] || "");
+          urlsToMutate.add(baseUrl);
+        } else {
+          remaining.push({ ...action, retries: action.retries + 1 });
+        }
       }
     }
     saveQueue(remaining);
+    syncState.syncing = false;
+    syncState.notify();
+    if (hasChanges) {
+      urlsToMutate.forEach((url) => mutateModel(url));
+    }
   }
-  window.addEventListener("online", () => {
-    void processQueue();
-  });
   return {
     name: "offline",
     setup(c) {
       client = c;
+      if (onlineHandler) {
+        window.removeEventListener("online", onlineHandler);
+      }
+      onlineHandler = () => {
+        void processQueue();
+      };
+      window.addEventListener("online", onlineHandler);
+      if (navigator.onLine && loadQueue().length > 0) {
+        setTimeout(() => void processQueue(), 500);
+      }
     },
     onRequest(req) {
       const method = (req.options.method ?? "GET").toUpperCase();
@@ -641,16 +1152,23 @@ export {
   CachePlugin,
   Form,
   LoggerPlugin,
+  NeevBoundary,
   NeevContext,
   NeevProvider,
   OfflinePlugin,
   Protected,
+  SecureStore,
   Table,
+  VERSION2 as VERSION,
+  clearPersistedStore,
   createCachePlugin,
   createClient,
   createOfflinePlugin,
+  getStore,
+  setStore,
   useAuth,
   useModel,
   useNeevClient,
+  useStore,
   useSyncStatus
 };