@arcote.tech/arc-react 0.1.9 → 0.3.0

package/dist/index.js

@@ -1,12 +1,12 @@
 'use client';
-// form/field.tsx
+// src/form/field.tsx
 import { createContext as createContext3, useCallback as useCallback3, useContext as useContext2, useMemo as useMemo2 } from "react";
 
-// form/form.tsx
+// src/form/form.tsx
 import {
   deepMerge
 } from "@arcote.tech/arc";
-import {
+import React, {
   createContext,
   forwardRef,
   useCallback,
@@ -17,6 +17,32 @@ import {
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var FormContext = createContext(null);
+function useForm() {
+  const context = React.useContext(FormContext);
+  if (!context) {
+    throw new Error("useForm must be used within a Form component");
+  }
+  return context;
+}
+function setNestedValue(obj, path, value) {
+  const keys = path.split(".");
+  const result = { ...obj };
+  let current = result;
+  for (let i = 0;i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
+      current[key] = {};
+    } else {
+      current[key] = { ...current[key] };
+    }
+    current = current[key];
+  }
+  current[keys[keys.length - 1]] = value;
+  return result;
+}
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
 var Form = forwardRef(function Form2(props, ref) {
   const { render, schema, onSubmit, defaults, onUnvalidatedSubmit } = props;
   const [values, setValues] = useState({});
@@ -38,7 +64,13 @@ var Form = forwardRef(function Form2(props, ref) {
     return Object.values(errors2).some((result) => result);
   }, [schema, values]);
   const validatePartial = useCallback((keys) => {
-    const partialValues = keys.reduce((acc, key) => ({ ...acc, [key]: values[key] }), {});
+    const partialValues = keys.reduce((acc, key) => {
+      const value = getNestedValue(values, key);
+      if (value !== undefined) {
+        return setNestedValue(acc, key, value);
+      }
+      return acc;
+    }, {});
     const errors2 = schema.validatePartial(partialValues);
     if (errors2)
       setErrors((prev) => deepMerge(prev, errors2));
@@ -52,13 +84,19 @@ var Form = forwardRef(function Form2(props, ref) {
     return Object.values(errors2).some((result) => result);
   }, [schema, values, dirty]);
   const setFieldValue = useCallback((field, value) => {
-    setValues((prev) => ({ ...prev, [field]: value }));
+    setValues((prev) => setNestedValue(prev, field, value));
   }, []);
   const setFieldDirty = useCallback((field) => {
     setDirty((prev) => new Set([...prev, field]));
   }, []);
   useEffect(() => {
-    const partialValues = Array.from(dirty).reduce((acc, key) => ({ ...acc, [key]: values[key] }), {});
+    const partialValues = Array.from(dirty).reduce((acc, key) => {
+      const value = getNestedValue(values, key);
+      if (value !== undefined) {
+        return setNestedValue(acc, key, value);
+      }
+      return acc;
+    }, {});
     const errors2 = schema.validatePartial(partialValues);
     setErrors(errors2);
   }, [values, dirty]);
@@ -77,14 +115,30 @@ var Form = forwardRef(function Form2(props, ref) {
   useImperativeHandle(ref, () => ({
     submit: handleSubmit,
     getValues: () => values,
-    validate
+    validate,
+    setFieldValue
   }), [handleSubmit, values, validate]);
+  const buildFieldsStructure = useCallback((element, fieldName, defaultValue) => {
+    const isOptional = element?.toJsonSchema && typeof element.toJsonSchema === "function" && element.parent !== undefined;
+    if (isOptional) {
+      return buildFieldsStructure(element.parent, fieldName, defaultValue);
+    }
+    const isObject = element?.entries && typeof element.entries === "function";
+    if (isObject) {
+      const subFields = Object.fromEntries(element.entries().map(([key, value]) => [
+        key.charAt(0).toUpperCase() + key.slice(1),
+        buildFieldsStructure(value, fieldName ? `${fieldName}.${key}` : key, defaultValue?.[key])
+      ]));
+      return FormField(fieldName, defaultValue, subFields);
+    }
+    return FormField(fieldName, defaultValue);
+  }, []);
   const Fields = useMemo(() => {
     return Object.fromEntries(schema.entries().map(([key, value]) => [
       key.charAt(0).toUpperCase() + key.slice(1),
-      FormField(key, defaults?.[key])
+      buildFieldsStructure(value, key, defaults?.[key])
     ]));
-  }, [schema, defaults]);
+  }, [schema, defaults, buildFieldsStructure]);
   const contextValue = useMemo(() => ({
     values,
     errors,
@@ -111,7 +165,7 @@ var Form = forwardRef(function Form2(props, ref) {
   }, undefined, false, undefined, this);
 });
 
-// form/form-part.tsx
+// src/form/form-part.tsx
 import React2, { createContext as createContext2, useCallback as useCallback2, useContext, useState as useState2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var FormPartContext = createContext2(null);
@@ -165,8 +219,11 @@ function useFormPartField(fieldName) {
   return context;
 }
 
-// form/field.tsx
+// src/form/field.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
+function getNestedValue2(obj, path) {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
 var FormFieldContext = createContext3(null);
 function useFormField() {
   const context = useContext2(FormFieldContext);
@@ -174,7 +231,7 @@ function useFormField() {
     throw new Error("useFormField must be used within a FormFieldProvider");
   return context;
 }
-function FormField(name, defaultValue) {
+function FormField(name, defaultValue, subFields) {
   return ({ translations, render }) => {
     const form = useContext2(FormContext);
     if (!form)
@@ -183,7 +240,7 @@ function FormField(name, defaultValue) {
     const { values, errors, dirty, isSubmitted, setFieldValue, setFieldDirty } = form;
     const schemaErrors = errors?.["schema"] || {};
     const fieldErrors = schemaErrors[name] || false;
-    const value = values[name] ?? defaultValue ?? "";
+    const value = getNestedValue2(values, name) ?? defaultValue ?? "";
     const isDirty = dirty.has(name);
     const handleChange = useCallback3((value2) => {
       if (value2?.target?.value !== undefined) {
@@ -218,21 +275,14 @@ function FormField(name, defaultValue) {
         onChange: handleChange,
         name: name.toString(),
         value,
-        defaultValue
+        defaultValue,
+        subFields,
+        setFieldValue
       })
     }, undefined, false, undefined, this);
   };
 }
-// form/legacy_form_resolver.ts
-function formResolver(schema) {
-  return async (data) => {
-    return {
-      values: data,
-      errors: {}
-    };
-  };
-}
-// form/message.tsx
+// src/form/message.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 function FormMessage({ ...props }) {
   const { messages } = useFormField();
@@ -244,220 +294,260 @@ function FormMessage({ ...props }) {
   }, undefined, false, undefined, this);
 }
 FormMessage.displayName = "FormMessage";
-// reactModel.tsx
+// src/factories/model-provider-factory.tsx
 import {
+  AuthAdapter,
+  CommandWire,
+  EventWire,
+  LocalEventPublisher,
   MasterDataStorage,
-  Model,
-  RemoteModelClient,
-  rtcClientFactory
+  Model
 } from "@arcote.tech/arc";
-import {
-  createContext as createContext4,
-  useCallback as useCallback4,
-  useContext as useContext3,
-  useEffect as useEffect2,
-  useMemo as useMemo3,
-  useRef,
-  useState as useState3
-} from "react";
-
-// sqliteWasmAdapter.ts
-import {
-  createSQLiteAdapterFactory
-} from "@arcote.tech/arc";
-var sqliteWasmAdapterFactory = (db) => {
-  return async (context) => {
-    return createSQLiteAdapterFactory(db)(context);
-  };
-};
-
-// reactModel.tsx
+import { createContext as createContext4, useContext as useContext3, useEffect as useEffect2, useState as useState3 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var reactModel = (arcContext, options) => {
-  const LiveModelContext = createContext4(null);
-  const LocalModelContext = createContext4(null);
-  let masterModel = null;
-  return [
-    function LiveModelProvider(props) {
-      const [context, setContext] = useState3(null);
-      useEffect2(() => {
-        setContext(arcContext);
-      }, [arcContext]);
-      useEffect2(() => {
-        model?.setAuthToken(props.token);
-      }, [props.token]);
-      const model = useMemo3(() => {
-        if (typeof window === "undefined")
-          return null;
-        if (masterModel)
-          return masterModel;
-        if (!context)
-          return null;
-        if ("remoteUrl" in options) {
-          const model2 = new RemoteModelClient(context, options.remoteUrl, props.client, props.catchErrorCallback);
-          masterModel = model2;
-          return model2;
-        } else {
-          const dbAdapterPromise = sqliteWasmAdapterFactory(options.sqliteAdapter)(context);
-          const dataStorage = new MasterDataStorage(dbAdapterPromise, rtcClientFactory(props.token), context);
-          const model2 = new Model(context, dataStorage, props.catchErrorCallback);
-          masterModel = model2;
-          return model2;
-        }
-      }, [context, options, props.client]);
-      const [syncProgress, setSyncProgress] = useState3([]);
-      const [syncDone, setSyncDone] = useState3(false);
-      useEffect2(() => {
-        if (typeof window === "undefined" || !model)
-          return;
-        const sync = async () => {
-          if (!("dataStorage" in model))
-            return setSyncDone(true);
-          await model.dataStorage.sync(({ store, size }) => {
-            setSyncProgress((prev) => [...prev, { store, size }]);
-          });
-          setSyncDone(true);
-        };
-        sync();
-      }, [model]);
-      if (!model || !syncDone)
-        return props.syncView ? /* @__PURE__ */ jsx5(props.syncView, {
-          progress: syncProgress
-        }, undefined, false, undefined, this) : null;
-      return /* @__PURE__ */ jsx5(LiveModelContext.Provider, {
-        value: model,
-        children: props.children
-      }, undefined, false, undefined, this);
-    },
-    function LocalModelProvider({ children }) {
-      const parentModel = useContext3(LiveModelContext);
-      if (!parentModel || !(parentModel instanceof Model)) {
-        throw new Error("LocalModelProvider must be used within a LiveModelProvider");
-      }
-      const [localModel] = useState3(() => parentModel);
-      return /* @__PURE__ */ jsx5(LocalModelContext.Provider, {
-        value: localModel,
-        children
-      }, undefined, false, undefined, this);
-    },
-    function useQuery(queryBuilderFn, dependencies = [], cacheKey) {
-      const model = useContext3(LocalModelContext) || useContext3(LiveModelContext);
-      if (!model) {
-        throw new Error("useQuery must be used within a ModelProvider");
+var modelProviderFactory = (context, options) => {
+  const ModelContext = createContext4(null);
+  const commandWire = options.remoteUrl ? new CommandWire(options.remoteUrl) : undefined;
+  const eventWire = options.remoteUrl ? new EventWire(options.remoteUrl) : undefined;
+  const authAdapter = new AuthAdapter;
+  let initialized = false;
+  let cachedModel = null;
+  let cachedDataStorage = null;
+  let onResetCallback = null;
+  function ModelProvider(props) {
+    const [model, setModel] = useState3(cachedModel);
+    const [resetTrigger, setResetTrigger] = useState3(0);
+    useEffect2(() => {
+      onResetCallback = () => {
+        setModel(null);
+        setResetTrigger((prev) => prev + 1);
+      };
+      return () => {
+        onResetCallback = null;
+      };
+    }, []);
+    useEffect2(() => {
+      if (initialized && cachedModel) {
+        setModel(cachedModel);
+        return;
       }
-      const [loading, setLoading] = useState3(true);
-      const [result, setResult] = useState3(null);
-      const [revalidationTrigger, setRevalidationTrigger] = useState3(0);
-      const unsubscribeRef = useRef(null);
-      const queryPromiseRef = useRef(null);
-      const resolvePromiseRef = useRef(null);
-      useEffect2(() => {
-        if (cacheKey) {
-          if (!model.__cacheRegistry) {
-            model.__cacheRegistry = new Map;
-          }
-          if (!model.__cacheRegistry.has(cacheKey)) {
-            model.__cacheRegistry.set(cacheKey, new Set);
-          }
-          const revalidateFn = async () => {
-            const promise = new Promise((resolve) => {
-              resolvePromiseRef.current = resolve;
-            });
-            queryPromiseRef.current = promise;
-            setRevalidationTrigger((prev) => prev + 1);
-            return promise;
-          };
-          model.__cacheRegistry.get(cacheKey).add(revalidateFn);
-          return () => {
-            const registry = model.__cacheRegistry?.get(cacheKey);
-            if (registry) {
-              registry.delete(revalidateFn);
-              if (registry.size === 0) {
-                model.__cacheRegistry.delete(cacheKey);
+      initialized = true;
+      let cancelled = false;
+      async function initializeModel() {
+        let dataStorage;
+        let eventPublisher;
+        if (options.dbAdapterFactory) {
+          const databaseAdapter = await options.dbAdapterFactory(context);
+          if (cancelled)
+            return;
+          if (databaseAdapter) {
+            dataStorage = new MasterDataStorage(databaseAdapter);
+            cachedDataStorage = dataStorage;
+            eventPublisher = new LocalEventPublisher(dataStorage);
+            const views = context.elements.filter((element) => ("getHandlers" in element) && ("databaseStoreSchema" in element) && ("schema" in element));
+            eventPublisher.registerViews(views);
+            if (eventWire && eventPublisher) {
+              const publisher = eventPublisher;
+              const eventsStore = dataStorage.getStore("events");
+              const allEvents = await eventsStore.find({});
+              const hostEvents = allEvents.filter((e) => typeof e._id === "string" && e._id.startsWith("host_"));
+              if (hostEvents.length > 0) {
+                hostEvents.sort((a, b) => {
+                  const aTimestamp = parseInt(a._id.split("_")[2] || "0", 10);
+                  const bTimestamp = parseInt(b._id.split("_")[2] || "0", 10);
+                  return bTimestamp - aTimestamp;
+                });
+                const lastHostEventId = hostEvents[0]._id;
+                eventWire.setLastHostEventId(lastHostEventId);
+              }
+              const eventsFromHost = new Set;
+              publisher.onPublish((event) => {
+                if (eventsFromHost.has(event.id)) {
+                  eventsFromHost.delete(event.id);
+                  return;
+                }
+                eventWire.syncEvents([
+                  {
+                    localId: event.id,
+                    type: event.type,
+                    payload: event.payload,
+                    createdAt: event.createdAt.toISOString()
+                  }
+                ]);
+              });
+              const processedEvents = new Set;
+              let eventQueue = Promise.resolve();
+              eventWire.onEvent((event) => {
+                eventQueue = eventQueue.then(async () => {
+                  try {
+                    if (processedEvents.has(event.hostId)) {
+                      return;
+                    }
+                    processedEvents.add(event.hostId);
+                    eventsFromHost.add(event.hostId);
+                    const eventsStore2 = dataStorage?.getStore("events");
+                    if (eventsStore2) {
+                      const existing = await eventsStore2.find({
+                        where: { _id: event.hostId }
+                      });
+                      if (existing.length > 0) {
+                        return;
+                      }
+                    }
+                    await publisher.publish({
+                      id: event.hostId,
+                      type: event.type,
+                      payload: event.payload,
+                      createdAt: new Date(event.createdAt)
+                    });
+                  } catch (error) {
+                    console.error(`[Arc] Failed to process event ${event.hostId} (${event.type}):`, error, `
+Event payload:`, event.payload);
+                    processedEvents.delete(event.hostId);
+                    eventsFromHost.delete(event.hostId);
+                  }
+                });
+              });
+              if (authAdapter.isAuthenticated()) {
+                eventWire.connect();
               }
             }
-          };
-        }
-      }, [model, cacheKey]);
-      useEffect2(() => {
-        if (unsubscribeRef.current) {
-          unsubscribeRef.current();
-        }
-        const defaultAuthContext = { userId: "react-user" };
-        const { unsubscribe, result: result2 } = model.subscribe(queryBuilderFn, (newResult) => {
-          setResult(newResult);
-          setLoading(false);
-          if (resolvePromiseRef.current) {
-            resolvePromiseRef.current();
-            resolvePromiseRef.current = null;
-          }
-        }, defaultAuthContext);
-        unsubscribeRef.current = unsubscribe;
-        return () => {
-          if (unsubscribeRef.current) {
-            unsubscribeRef.current();
-            unsubscribeRef.current = null;
-          }
-        };
-      }, [model, revalidationTrigger, ...dependencies]);
-      return [result, loading];
-    },
-    function useRevalidate() {
-      const model = useContext3(LocalModelContext) || useContext3(LiveModelContext);
-      if (!model) {
-        throw new Error("useRevalidate must be used within a ModelProvider");
-      }
-      return useCallback4(async (cacheKey) => {
-        const registry = model.__cacheRegistry;
-        if (registry && registry.has(cacheKey)) {
-          const revalidators = registry.get(cacheKey);
-          if (revalidators) {
-            const promises = [];
-            revalidators.forEach((revalidateFn) => {
-              promises.push(revalidateFn());
-            });
-            await Promise.all(promises);
           }
         }
-      }, [model]);
-    },
-    function useCommands() {
-      const model = useContext3(LocalModelContext) || useContext3(LiveModelContext);
-      if (!model) {
-        throw new Error("useCommands must be used within a ModelProvider");
+        if (cancelled)
+          return;
+        const newModel = new Model(context, {
+          adapters: {
+            dataStorage,
+            commandWire,
+            eventPublisher,
+            eventWire,
+            authAdapter
+          },
+          environment: "client"
+        });
+        await newModel.init();
+        if (cancelled)
+          return;
+        cachedModel = newModel;
+        setModel(newModel);
+        if (typeof window !== "undefined") {
+          window.arcModel = newModel;
+          window.arcDataStorage = dataStorage;
+        }
       }
-      const defaultAuthContext = { userId: "react-user" };
-      return model.commands(defaultAuthContext);
-    },
-    async function query(queryBuilderFn, model) {
-      if (!model)
-        model = masterModel;
-      if (!model)
-        throw new Error("Model not found");
-      const defaultAuthContext = { userId: "react-user" };
-      return model.query(queryBuilderFn, defaultAuthContext);
-    },
-    function useLocalModel() {
-      const model = useContext3(LocalModelContext);
-      if (!model) {
-        return null;
+      initializeModel();
+      return () => {
+        cancelled = true;
+        eventWire?.disconnect();
+      };
+    }, [resetTrigger]);
+    if (!model)
+      return;
+    return /* @__PURE__ */ jsx5(ModelContext.Provider, {
+      value: model,
+      children: props.children
+    }, undefined, false, undefined, this);
+  }
+  function useModel() {
+    const model = useContext3(ModelContext);
+    if (!model) {
+      throw new Error("useModel must be used within a ModelProvider");
+    }
+    return model;
+  }
+  function setAuthToken(token) {
+    authAdapter.setToken(token);
+    commandWire?.setAuthToken(token);
+    if (eventWire) {
+      eventWire.setAuthToken(token);
+      if (token && eventWire.getState() === "disconnected") {
+        eventWire.connect();
       }
-      return model;
-    },
-    function useModel(token) {
-      const parentModel = useContext3(LiveModelContext);
-      if (!parentModel)
-        throw new Error("useModel have to be used in Provider");
-      return parentModel;
     }
-  ];
+  }
+  async function resetModel() {
+    eventWire?.disconnect();
+    if (cachedDataStorage) {
+      await cachedDataStorage.destroy();
+      cachedDataStorage = null;
+    }
+    cachedModel = null;
+    initialized = false;
+    authAdapter.setToken(null);
+    commandWire?.setAuthToken(null);
+    eventWire?.setAuthToken(null);
+    if (onResetCallback) {
+      onResetCallback();
+    }
+  }
+  function onReset(callback) {
+    onResetCallback = callback;
+  }
+  return {
+    ModelProvider,
+    useModel,
+    commandWire,
+    eventWire,
+    setAuthToken,
+    resetModel,
+    onReset
+  };
+};
+// src/factories/use-commands-factory.tsx
+import {
+  mutationExecutor
+} from "@arcote.tech/arc";
+import { useMemo as useMemo3 } from "react";
+var useCommandsFactory = (useModel) => {
+  return function useCommands() {
+    const model = useModel();
+    return useMemo3(() => mutationExecutor(model), [model]);
+  };
+};
+// src/factories/use-query-factory.tsx
+import {
+  liveQuery
+} from "@arcote.tech/arc";
+import { useEffect as useEffect3, useState as useState4 } from "react";
+var useQueryFactory = (useModel) => {
+  return function useQuery(queryFn, dependencies = []) {
+    const model = useModel();
+    const [loading, setLoading] = useState4(true);
+    const [result, setResult] = useState4(undefined);
+    useEffect3(() => {
+      const { unsubscribe } = liveQuery(model, queryFn, (newResult) => {
+        setResult(newResult);
+        setLoading(false);
+      });
+      return () => {
+        unsubscribe();
+      };
+    }, [model, ...dependencies]);
+    return [result, loading];
+  };
+};
+// src/react-model.tsx
+var reactModel = (context, options = {}) => {
+  const { ModelProvider, useModel, commandWire, setAuthToken, resetModel } = modelProviderFactory(context, options);
+  const useQuery = useQueryFactory(useModel);
+  const useCommands = useCommandsFactory(useModel);
+  return {
+    ModelProvider,
+    useModel,
+    useQuery,
+    useCommands,
+    commandWire,
+    setAuthToken,
+    resetModel
+  };
 };
 export {
   useFormPartField,
   useFormPart,
   useFormField,
+  useForm,
   reactModel,
-  formResolver,
   FormPartContext,
   FormPart,
   FormMessage,
@@ -467,4 +557,4 @@ export {
   Form
 };
 
-//# debugId=64B909B4D47850D764756E2164756E21
+//# debugId=7543AFFDBE5BB66264756E2164756E21

package/dist/src/factories/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./model-provider-factory";
+export * from "./use-commands-factory";
+export * from "./use-query-factory";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/factories/model-provider-factory.d.ts

@@ -0,0 +1,14 @@
+import { CommandWire, EventWire, Model, type ArcContextAny } from "@arcote.tech/arc";
+import type { ReactModelOptions } from "../options";
+export declare const modelProviderFactory: <C extends ArcContextAny>(context: C, options: ReactModelOptions) => {
+    ModelProvider: (props: {
+        children: React.ReactNode;
+    }) => import("react/jsx-dev-runtime").JSX.Element | undefined;
+    useModel: () => Model<C>;
+    commandWire: CommandWire | undefined;
+    eventWire: EventWire | undefined;
+    setAuthToken: (token: string | null) => void;
+    resetModel: () => Promise<void>;
+    onReset: (callback: () => void) => void;
+};
+//# sourceMappingURL=model-provider-factory.d.ts.map

package/dist/src/factories/use-commands-factory.d.ts

@@ -0,0 +1,3 @@
+import { type ArcContextAny, type Model } from "@arcote.tech/arc";
+export declare const useCommandsFactory: <C extends ArcContextAny>(useModel: () => Model<C>) => () => { [Element in C["elements"][number] as Element["mutateContext"] extends (...args: any[]) => infer Return ? Element["name"] : never]: Element["mutateContext"] extends (...args: any[]) => infer Return ? Return : never; } extends infer T ? { [K in keyof T]: T[K]; } : never;
+//# sourceMappingURL=use-commands-factory.d.ts.map

package/dist/src/factories/use-query-factory.d.ts

@@ -0,0 +1,3 @@
+import { type ArcContextAny, type Model, type QueryContext } from "@arcote.tech/arc";
+export declare const useQueryFactory: <C extends ArcContextAny>(useModel: () => Model<C>) => <TResult>(queryFn: (q: QueryContext<C>) => Promise<TResult>, dependencies?: any[]) => [TResult | undefined, boolean];
+//# sourceMappingURL=use-query-factory.d.ts.map

package/dist/{form → src/form}/field.d.ts

@@ -9,16 +9,18 @@ export declare function useFormField(): FormFieldContext;
 type Translations<E extends ArcElement> = {
     [K in keyof Exclude<ReturnType<E["validate"]>, false>]: (data: Exclude<Exclude<ReturnType<E["validate"]>, false>[K], undefined | false>) => string;
 } | ((data: any) => string) | string;
-type FormFieldProps<E extends ArcElement> = {
+type FormFieldProps<E extends ArcElement, S = undefined> = {
     translations: Translations<E>;
-    render: (field: FormFieldData<E>) => React.ReactNode;
+    render: (field: FormFieldData<E, S>) => React.ReactNode;
 };
-export type FormFieldData<T> = {
+export type FormFieldData<T, S = undefined> = {
     onChange: (value: any) => void;
     value: any;
     defaultValue?: any;
     name: string;
+    subFields?: S;
+    setFieldValue: (field: string, value: any) => void;
 };
-export declare function FormField<E extends ArcElement>(name: string, defaultValue?: any): ({ translations, render }: FormFieldProps<E>) => import("react/jsx-dev-runtime").JSX.Element;
+export declare function FormField<E extends ArcElement, S = undefined>(name: string, defaultValue?: any, subFields?: S): ({ translations, render }: FormFieldProps<E, S>) => import("react/jsx-dev-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=field.d.ts.map

package/dist/{form → src/form}/form.d.ts

@@ -1,4 +1,4 @@
-import { type $type, type ArcObjectAny, type ArcObjectKeys, type ArcObjectValueByKey } from "@arcote.tech/arc";
+import { type $type, type ArcObjectAny, type ArcObjectKeys, type ArcObjectValueByKey, ArcOptional } from "@arcote.tech/arc";
 import React from "react";
 import { FormField } from "./field";
 export type FormContextValue<T extends ArcObjectAny> = {
@@ -14,16 +14,19 @@ export type FormRef<T extends ArcObjectAny> = {
     submit: () => Promise<void>;
     getValues: () => Partial<$type<T>>;
     validate: () => boolean;
+    setFieldValue: (field: ArcObjectKeys<T>, value: any) => void;
+};
+export type FormFields<T extends ArcObjectAny> = {
+    [K in ArcObjectKeys<T> as Capitalize<`${K}`>]: ArcObjectValueByKey<T, K> extends ArcObjectAny ? ReturnType<typeof FormField<ArcObjectValueByKey<T, K>, FormFields<ArcObjectValueByKey<T, K>>>> : ArcObjectValueByKey<T, K> extends ArcOptional<infer U extends ArcObjectAny> ? ReturnType<typeof FormField<ArcObjectValueByKey<T, K>, FormFields<U>>> : ReturnType<typeof FormField<ArcObjectValueByKey<T, K>>>;
 };
 export type FormProps<T extends ArcObjectAny> = {
-    render: (props: {
-        [K in ArcObjectKeys<T> as Capitalize<`${K}`>]: ReturnType<typeof FormField<ArcObjectValueByKey<T, K>>>;
-    }, values: Partial<$type<T>>) => React.ReactNode;
+    render: (props: FormFields<T>, values: Partial<$type<T>>) => React.ReactNode;
     schema: T;
     onSubmit: (values: $type<T>) => void | Promise<void>;
     onUnvalidatedSubmit?: (values: Partial<$type<T>>, errors: any) => void;
     defaults?: Partial<$type<T>> | null;
 };
 export declare const FormContext: React.Context<FormContextValue<any> | null>;
+export declare function useForm<T extends ArcObjectAny>(): FormContextValue<T>;
 export declare const Form: <T extends ArcObjectAny>(props: FormProps<T> & React.RefAttributes<FormRef<T>>) => JSX.Element;
 //# sourceMappingURL=form.d.ts.map

package/dist/{form → src/form}/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./field";
 export * from "./form";
 export * from "./form-part";
-export * from "./legacy_form_resolver";
 export * from "./message";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./form/";
+export * from "./options";
+export * from "./react-model";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/options.d.ts

@@ -0,0 +1,6 @@
+import type { DBAdapterFactory } from "@arcote.tech/arc";
+export type ReactModelOptions = {
+    dbAdapterFactory?: DBAdapterFactory;
+    remoteUrl?: string;
+};
+//# sourceMappingURL=options.d.ts.map

package/dist/src/react-model.d.ts

@@ -0,0 +1,17 @@
+import type { ArcContextAny } from "@arcote.tech/arc";
+import type { ReactModelOptions } from "./options";
+export declare const reactModel: <C extends ArcContextAny>(context: C, options?: ReactModelOptions) => {
+    readonly ModelProvider: (props: {
+        children: React.ReactNode;
+    }) => import("react/jsx-dev-runtime").JSX.Element | undefined;
+    readonly useModel: () => import("@arcote.tech/arc").Model<C>;
+    readonly useQuery: <TResult>(queryFn: (q: { [Element in C["elements"][number] as Element["queryContext"] extends (...args: any[]) => infer Return ? Element["name"] : never]: Element["queryContext"] extends (...args: any[]) => infer Return ? Return : never; } extends infer T ? { [K in keyof T]: T[K]; } : never) => Promise<TResult>, dependencies?: any[]) => [TResult | undefined, boolean];
+    readonly useCommands: () => { [Element in C["elements"][number] as Element["mutateContext"] extends (...args: any[]) => infer Return ? Element["name"] : never]: Element["mutateContext"] extends (...args: any[]) => infer Return ? Return : never; } extends infer T ? { [K in keyof T]: T[K]; } : never;
+    /** CommandWire instance for remote execution (if remoteUrl provided) */
+    readonly commandWire: import("@arcote.tech/arc").CommandWire | undefined;
+    /** Set auth token for remote command execution */
+    readonly setAuthToken: (token: string | null) => void;
+    /** Reset model - destroys local database and disconnects from host */
+    readonly resetModel: () => Promise<void>;
+};
+//# sourceMappingURL=react-model.d.ts.map

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@arcote.tech/arc-react",
   "type": "module",
-  "version": "0.1.9",
+  "version": "0.3.0",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "React client for the Arc framework, providing utilities for querying data and executing commands, enhancing the development of reactive and efficient user interfaces.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/src/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/src/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     }
@@ -22,10 +22,6 @@
     "type-check": "tsc",
     "dev": "nodemon --ignore dist -e ts,tsx --exec 'bun run build'"
   },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
   "devDependencies": {
     "@types/bun": "latest",
     "@types/react": "^18.3.5",
@@ -37,6 +33,8 @@
   },
   "peerDependencies": {
     "@arcote.tech/arc": "latest",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "typescript": "^5.0.0"
   },
   "files": [

package/dist/form/legacy_form_resolver.d.ts

@@ -1,6 +0,0 @@
-import type { ArcObjectAny } from "@arcote.tech/arc";
-export declare function formResolver(schema: ArcObjectAny): (data: any) => Promise<{
-    values: any;
-    errors: {};
-}>;
-//# sourceMappingURL=legacy_form_resolver.d.ts.map

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./form/";
-export * from "./reactModel.tsx";
-//# sourceMappingURL=index.d.ts.map

package/dist/reactModel.d.ts

@@ -1,21 +0,0 @@
-import { Model, type ArcContextAny, type IArcQueryBuilder, type ModelBase, type QueryBuilderFunctionResult, type QueryFactoryFunction, type UnaryFunction } from "@arcote.tech/arc";
-import type { ArcContextElementMethodReturnType, objectUtil, SQLiteDatabase } from "@arcote.tech/arc";
-export declare const reactModel: <C extends ArcContextAny>(arcContext: C, options: {
-    sqliteAdapter: SQLiteDatabase;
-} | {
-    remoteUrl: string;
-}) => readonly [(props: {
-    children: React.ReactNode;
-    client: string;
-    token: string;
-    syncView?: React.ComponentType<{
-        progress: {
-            store: string;
-            size: number;
-        }[];
-    }>;
-    catchErrorCallback: (error: any) => void;
-}) => import("react/jsx-dev-runtime").JSX.Element | null, ({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-dev-runtime").JSX.Element, <Q extends IArcQueryBuilder>(queryBuilderFn: UnaryFunction<ReturnType<C["queryBuilder"]>, Q>, dependencies?: any[], cacheKey?: string) => [objectUtil.simplify<ReturnType<Q["toQuery"]>["lastResult"]>, false] | [undefined, true], () => (cacheKey: string) => Promise<void>, () => ArcContextElementMethodReturnType<C["elements"], "commandClient">, <QueryBuilderFn extends QueryFactoryFunction<C>>(queryBuilderFn: QueryBuilderFn, model?: ModelBase<C> | null) => Promise<QueryBuilderFunctionResult<QueryBuilderFn>>, () => Model<C> | null, (token: string) => ModelBase<C>];
-//# sourceMappingURL=reactModel.d.ts.map

package/dist/sqliteWasmAdapter.d.ts

@@ -1,4 +0,0 @@
-import type { SQLiteDatabase } from "@arcote.tech/arc";
-import { type DBAdapterFactory } from "@arcote.tech/arc";
-export declare const sqliteWasmAdapterFactory: (db: SQLiteDatabase) => DBAdapterFactory;
-//# sourceMappingURL=sqliteWasmAdapter.d.ts.map