cross-state 0.54.0 → 0.54.3

package/dist/react/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["matches: Record<KeyType, any>","castArrayPath","isObject","value","form","name","Fragment","calcDuration","queue","debounce","options","deepEqual","errors","get","set","deepEqual","join","isObject","options: FormOptions<TDraft, TOriginal>","useStore","form","createStore","lastDraft: TDraft | undefined","context: FormContext<TDraft, TOriginal>","Form","UrlContext: Context<UrlContextType | undefined>","fromExtendedJsonString","toExtendedJsonString","value","url","location","params","update","options: UrlOptions<T>","update","value","delayedUpdate: (value: T) => void","debounce","throttle","simpleHash"],"sources":["../../src/react/form/customInput.tsx","../../src/lib/wildcardMatch.ts","../../src/react/form/formField.tsx","../../src/react/form/formForEach.tsx","../../src/react/form/useFormAutosave.ts","../../src/react/form/form.tsx","../../src/react/url/urlContext.tsx","../../src/react/url/urlOptions.ts","../../src/react/url/urlHelpers.ts","../../src/react/url/useUrlParam.ts","../../src/react/url/urlStore.ts","../../src/react/useDecoupledState.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport interface CustomInputProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string;\n  children?: ReactNode;\n}\n\nexport function CustomInput({ name, children, ...props }: CustomInputProps): React.JSX.Element {\n  return (\n    <div\n      {...props}\n      style={{\n        position: 'relative',\n        ...props.style,\n      }}\n    >\n      {children}\n\n      <input\n        name={name}\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          opacity: 0,\n          width: '100%',\n          height: '100%',\n          pointerEvents: 'none',\n        }}\n      />\n    </div>\n  );\n}\n","import { isObject } from '@lib/helpers';\nimport { type KeyType } from './path';\nimport { castArrayPath } from './propAccess';\n\nexport function wildcardMatch(s: KeyType[] | string, w: KeyType[] | string): boolean {\n  if (typeof s === 'string') {\n    s = castArrayPath(s);\n  }\n\n  if (typeof w === 'string') {\n    w = castArrayPath(w);\n  }\n\n  return s.length === w.length && s.every((s, i) => w[i] === '*' || s === w[i]);\n}\n\nexport function getWildCardMatches(\n  object: any,\n  path: [KeyType, ...KeyType[]] | string,\n): Record<KeyType, any> {\n  const matches: Record<KeyType, any> = {};\n  const [first, second, ...rest] = castArrayPath(path);\n\n  if (first === undefined) {\n    throw new Error('Path is empty');\n  }\n\n  if (!Array.isArray(object) && !isObject(object)) {\n    object = {};\n  }\n\n  for (const [key, value] of first !== '*' ? [[first, object[first]]] : Object.entries(object)) {\n    if (first !== '*' && first !== key) {\n      continue;\n    }\n\n    if (second === undefined) {\n      matches[key] = value;\n      continue;\n    }\n\n    for (const [subKey, subValue] of Object.entries(getWildCardMatches(value, [second, ...rest]))) {\n      matches[`${key}.${subKey}`] = subValue;\n    }\n  }\n\n  return matches;\n}\n","import { type PathAsString, type Value } from '@lib/path';\nimport {\n  createElement,\n  useEffect,\n  useState,\n  type Component,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react';\nimport {\n  getDerivedState,\n  type Field,\n  type Form,\n  type FormContext,\n  type FormInstance,\n} from './form';\n\nexport interface FormFieldComponentProps<TValue, TPath> {\n  name: TPath;\n  value: TValue;\n  onChange: (event: { target: { value: TValue } } | TValue | undefined, ...args: any[]) => void;\n  onBlur: (...args: any[]) => void;\n}\n\nexport type FormFieldInfos<TDraft, TOriginal, TPath extends string> = Field<\n  TDraft,\n  TOriginal,\n  TPath\n> & {\n  hasTriggeredValidations: boolean;\n};\n\ntype NativeInputType = 'input' | 'select' | 'textarea';\n\ntype PartialComponentType<P> =\n  | (new (props: P, context?: any) => Component<P, any>)\n  | ((props: P, context?: any) => ReactNode);\n\nexport type FormFieldComponent = NativeInputType | PartialComponentType<any>;\n\ntype FieldValue<T extends FormFieldComponent> = ComponentPropsWithoutRef<T>['value'];\n\ntype FieldChangeValue<T extends FormFieldComponent> =\n  ComponentPropsWithoutRef<T> extends {\n    onChange?: (update: infer U) => void;\n  }\n    ? U extends { target: { value: infer V } }\n      ? V\n      : U\n    : never;\n\ntype MakeOptional<T, Keys extends string> = Omit<T, Keys> & Partial<Pick<T, Keys & keyof T>>;\n\nexport type FormFieldProps<TPath, TDraft> = {\n  name: TPath & PathAsString<TDraft>;\n  commitOnBlur?: boolean;\n  commitDebounce?: number;\n};\n\nexport type FormFieldPropsWithRender<TDraft, TOriginal, TPath extends string> = FormFieldProps<\n  TPath,\n  TDraft\n> &\n  NoInfer<{\n    component?: undefined;\n    render: (\n      props: FormFieldComponentProps<Value<TDraft, TPath>, TPath>,\n      info: FormFieldInfos<TDraft, TOriginal, TPath>,\n      form: FormContext<TDraft, TOriginal>,\n    ) => ReactNode;\n    inputFilter?: undefined;\n    defaultValue?: undefined;\n    serialize?: undefined;\n    deserialize?: undefined;\n    onChange?: undefined;\n    onBlur?: undefined;\n  }>;\n\ntype Serialize<TDraft, TOriginal, TPath, TComponent extends FormFieldComponent> = (\n  value: Value<TDraft, TPath>,\n  formState: FormInstance<TDraft, TOriginal>,\n) => FieldValue<TComponent>;\n\ntype Deserialize<TDraft, TOriginal, TPath, TComponent extends FormFieldComponent> = (\n  value: FieldChangeValue<TComponent>,\n  formState: FormInstance<TDraft, TOriginal>,\n) => Value<TDraft, TPath>;\n\nexport type FormFieldPropsWithComponent<\n  TDraft,\n  TOriginal,\n  TPath extends string,\n  TComponent extends FormFieldComponent,\n> = FormFieldProps<TPath, TDraft> & {\n  component?: TComponent;\n  render?: undefined;\n} & NoInfer<\n    {\n      inputFilter?: (value: FieldChangeValue<TComponent>) => boolean;\n    } & MakeOptional<\n      Omit<ComponentPropsWithoutRef<TComponent>, 'id' | 'name' | 'value' | 'defaultValue'>,\n      'onChange' | 'onBlur'\n    > &\n      (Value<TDraft, TPath> extends Exclude<FieldValue<TComponent>, undefined>\n        ? {\n            defaultValue?: FieldValue<TComponent>;\n            serialize?: Serialize<TDraft, TOriginal, TPath, TComponent>;\n          }\n        : Value<TDraft, TPath> extends FieldValue<TComponent>\n          ?\n              | {\n                  defaultValue: FieldValue<TComponent>;\n                  serialize?: Serialize<TDraft, TOriginal, TPath, TComponent>;\n                }\n              | {\n                  defaultValue?: FieldValue<TComponent>;\n                  serialize: Serialize<TDraft, TOriginal, TPath, TComponent>;\n                }\n          : {\n              serialize: Serialize<TDraft, TOriginal, TPath, TComponent>;\n            }) &\n      (FieldChangeValue<TComponent> extends Value<TDraft, TPath>\n        ? {\n            deserialize?: Deserialize<TDraft, TOriginal, TPath, TComponent>;\n          }\n        : {\n            deserialize: Deserialize<TDraft, TOriginal, TPath, TComponent>;\n          })\n  >;\n\nexport function FormField<\n  TDraft,\n  TOriginal,\n  TPath extends string,\n  TComponent extends FormFieldComponent,\n>(\n  this: Form<TDraft, any>,\n  {\n    // id,\n    name = '' as any,\n    component,\n    commitOnBlur,\n    commitDebounce,\n    render,\n    inputFilter,\n    defaultValue,\n    serialize,\n    deserialize = (x) => x as Value<TDraft, TPath>,\n    onChange,\n    onBlur,\n    ...restProps\n  }:\n    | FormFieldPropsWithRender<TDraft, TOriginal, TPath>\n    | FormFieldPropsWithComponent<TDraft, TOriginal, TPath, TComponent>,\n): React.JSX.Element | null {\n  type T = FieldChangeValue<TComponent>;\n\n  const form = this.useForm();\n  const getFormState = () => ({ ...form, ...getDerivedState(form) });\n  const [localValue, setLocalValue] = useState<T>();\n\n  const value = this.useFormState((form) => {\n    const value = form.getField(name as any).value;\n    if (serialize) {\n      return serialize(value as any, getFormState());\n    }\n    if (value !== undefined) {\n      return value;\n    }\n    return defaultValue;\n  });\n\n  const setValue = (x: FieldChangeValue<TComponent>) =>\n    form.getField(name as any).setValue(deserialize(x, getFormState()));\n\n  const hasTriggeredValidations = this.useFormState((form) => form.hasTriggeredValidations);\n\n  useEffect(() => {\n    if (localValue === undefined || !commitDebounce) {\n      return;\n    }\n\n    const timeout = setTimeout(() => {\n      setValue(localValue);\n      setLocalValue(undefined);\n    }, commitDebounce);\n\n    return () => clearTimeout(timeout);\n  }, [localValue, commitDebounce]);\n\n  const props = {\n    name,\n    value: localValue ?? value,\n    onChange: (event: { target: { value: T } } | T, ...moreArgs: any[]) => {\n      const value =\n        typeof event === 'object' && event !== null && 'target' in event\n          ? event.target.value\n          : event;\n\n      if (inputFilter && !inputFilter(value)) {\n        return;\n      }\n\n      if (commitOnBlur || commitDebounce) {\n        setLocalValue(value);\n      } else {\n        setValue(value);\n      }\n\n      onChange?.(event, ...moreArgs);\n    },\n    onBlur(...args: any[]) {\n      if (localValue !== undefined) {\n        setValue(localValue);\n        setLocalValue(undefined);\n      }\n\n      onBlur?.(...args);\n    },\n  } as FormFieldComponentProps<Value<TDraft, TPath>, TPath>;\n\n  if (render) {\n    return (\n      <>\n        {render(props, { ...form.getField(name as any), hasTriggeredValidations } as any, form) ??\n          null}\n      </>\n    );\n  }\n\n  if (component) {\n    return createElement(component, { ...restProps, ...props });\n  }\n\n  return null;\n}\n","import { type GetKeys, type Join, type PathAsString, type Value } from '@lib/path';\nimport { Fragment, useCallback, type ReactNode } from 'react';\nimport { type FieldHelperMethods, type Form } from './form';\n\nexport type ElementName<TDraft, TPath extends string> = keyof {\n  [Path in TPath as Join<Path, GetKeys<NonNullable<Value<TDraft, Path>>> & (string | number)>]: 1;\n};\n\nexport interface FormForEachProps<TDraft, TPath extends string> {\n  name: TPath & PathAsString<TDraft>;\n  renderElement?: (props: {\n    name: ElementName<TDraft, TPath>;\n    key: `${GetKeys<NonNullable<Value<TDraft, TPath>>> & (string | number)}`;\n    index: number;\n    remove: () => void;\n  }) => ReactNode;\n  children?: (\n    props: {\n      setValue: (\n        value: Value<TDraft, TPath> | ((value: Value<TDraft, TPath>) => Value<TDraft, TPath>),\n      ) => void;\n    } & FieldHelperMethods<TDraft, TPath>,\n  ) => ReactNode;\n}\n\nexport function FormForEach<TDraft, TPath extends string>(\n  this: Form<TDraft, any>,\n  { name, renderElement, children }: FormForEachProps<TDraft, TPath>,\n): React.JSX.Element {\n  const form = this.useForm();\n\n  const names = this.useFormState(() => {\n    const field = form.getField(name as any) as any;\n    return field.names as any[];\n  });\n\n  const add = useCallback(\n    (...args: any[]) => {\n      const field = form.getField(name as any) as any;\n      field.add(...args);\n    },\n    [form],\n  );\n\n  const remove = useCallback(\n    (key: any) => {\n      const field = form.getField(name as any) as any;\n      field.remove(key);\n    },\n    [form],\n  );\n\n  const setValue = useCallback(\n    (value: Value<TDraft, TPath> | ((value: Value<TDraft, TPath>) => Value<TDraft, TPath>)) => {\n      const field = form.getField(name as any) as any;\n      field.setValue(value);\n    },\n    [form],\n  );\n\n  return (\n    <>\n      {renderElement &&\n        names.map((name, index) => {\n          const key = name.split('.').pop();\n\n          return (\n            <Fragment key={key}>\n              {renderElement({\n                name,\n                key,\n                index,\n                remove: () => remove(key),\n              })}\n            </Fragment>\n          );\n        })}\n\n      {children?.({\n        names,\n        add,\n        remove,\n        setValue,\n      } as any)}\n    </>\n  );\n}\n","import type { Duration } from '@core';\nimport { calcDuration } from '@lib/calcDuration';\nimport { debounce } from '@lib/debounce';\nimport { deepEqual } from '@lib/equals';\nimport type { MaybePromise } from '@lib/maybePromise';\nimport { queue } from '@lib/queue';\nimport { useEffect, useMemo, useRef } from 'react';\nimport type { FormContext } from './form';\n\nexport interface FormAutosaveOptions<TDraft, TOriginal> {\n  save: (draft: TDraft, form: FormContext<TDraft, TOriginal>) => MaybePromise<void>;\n  debounce?: Duration;\n  resetAfterSave?: boolean;\n}\n\nexport function useFormAutosave<TDraft, TOriginal extends TDraft>(\n  form: FormContext<TDraft, TOriginal>,\n): void {\n  const { formState, options, getDraft } = form;\n  const debounceTime = calcDuration(options.autoSave?.debounce ?? 2_000);\n  const latestRef = useRef({ options });\n  const lastValue = useRef<TDraft | undefined>(undefined);\n  const q = useMemo(() => queue(), []);\n\n  const run = useMemo(\n    () =>\n      debounce(async () => {\n        const { options } = latestRef.current;\n        const save = options.autoSave?.save;\n        const draft = getDraft();\n\n        lastValue.current = draft;\n\n        q.clear();\n\n        q(async () => {\n          try {\n            formState.set('saveInProgress', true);\n            await save?.(draft, form);\n\n            if (q.size === 0 && options.autoSave?.resetAfterSave) {\n              form.reset();\n            }\n          } finally {\n            formState.set('saveInProgress', false);\n\n            if (q.size === 0) {\n              formState.set('saveScheduled', false);\n            }\n          }\n        });\n      }, debounceTime),\n    [formState, debounceTime],\n  );\n\n  useEffect(() => {\n    if (!options.autoSave?.save) {\n      return;\n    }\n\n    return formState\n      .map((state) => state.draft)\n      .subscribe(\n        () => {\n          if (deepEqual(getDraft(), lastValue.current)) {\n            return;\n          }\n\n          run();\n          formState.set('saveScheduled', true);\n        },\n        { runNow: false },\n      );\n  }, [formState]);\n\n  useEffect(() => {\n    latestRef.current = { options };\n  });\n}\n","import { createStore, type Store, type Update } from '@core';\nimport { autobind } from '@lib/autobind';\nimport { deepEqual } from '@lib/equals';\nimport { isObject } from '@lib/helpers';\nimport {\n  type Path,\n  type PathAsString,\n  type Value,\n  type WildcardPathAsString,\n  type WildcardValue,\n} from '@lib/path';\nimport { get, join, set } from '@lib/propAccess';\nimport type { Object_ } from '@lib/typeHelpers';\nimport { getWildCardMatches } from '@lib/wildcardMatch';\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  type Context,\n  type FormEvent,\n  type FunctionComponent,\n  type HTMLProps,\n  type ReactNode,\n} from 'react';\nimport { useStore, type UseStoreOptions } from '../useStore';\nimport {\n  FormField,\n  type FormFieldComponent,\n  type FormFieldPropsWithComponent,\n  type FormFieldPropsWithRender,\n} from './formField';\nimport { FormForEach, type ElementName, type FormForEachProps } from './formForEach';\nimport { useFormAutosave, type FormAutosaveOptions } from './useFormAutosave';\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Form types\n/// /////////////////////////////////////////////////////////////////////////////\n\nexport type Transform<TDraft> = Path<TDraft> | '' extends infer TPath\n  ? TPath extends TPath\n    ? {\n        update: (value: Value<TDraft, TPath>, store: Store<TDraft>) => void | TDraft;\n      } & (TPath extends '' ? { trigger?: '' } : { trigger: TPath })\n    : never\n  : never;\n\nexport interface FormOptions<TDraft, TOriginal> {\n  defaultValue: TDraft;\n  validations?: Validations<TDraft, TOriginal>;\n  localizeError?: (error: string, field: string) => string | undefined;\n  autoSave?: FormAutosaveOptions<TDraft, TOriginal>;\n  transform?: Transform<TDraft>[];\n  validatedClass?: string;\n}\n\nexport type Validations<TDraft, TOriginal> = {\n  [TPath in WildcardPathAsString<TDraft>]?: Record<string, Validation<TDraft, TOriginal, TPath>>;\n} & Record<string, Record<string, Validation<TDraft, TOriginal, any>>>;\n\nexport type Validation<TDraft, TOriginal, TPath> = (\n  value: WildcardValue<TDraft, TPath>,\n  context: {\n    draft: TDraft;\n    original: TOriginal;\n    field: PathAsString<TDraft> | '';\n  },\n) => boolean;\n\nexport type Field<TDraft, TOriginal, TPath extends string> = {\n  originalValue: Value<TOriginal, TPath> | undefined;\n  value: Value<TDraft, TPath>;\n  setValue: (value: Update<Value<TDraft, TPath>>) => void;\n  hasChange: boolean;\n  errors: string[];\n} & (Value<TDraft, TPath> extends Object_ ? FieldHelperMethods<TDraft, TPath> : {});\n\nexport type FieldHelperMethods<TDraft, TPath extends string> = {\n  names: ElementName<TDraft, TPath>[];\n  add: NonNullable<Value<TDraft, TPath>> extends readonly (infer T)[]\n    ? (element: T) => void\n    : NonNullable<Value<TDraft, TPath>> extends Record<infer K, infer V>\n      ? (key: K, value: V) => void\n      : never;\n  remove: Value<TDraft, TPath> extends readonly any[]\n    ? (index: number) => void\n    : (key: string) => void;\n};\n\nexport interface FormState<TDraft> {\n  draft: TDraft | undefined;\n  hasTriggeredValidations: boolean;\n  saveScheduled: boolean;\n  saveInProgress: boolean;\n}\n\nexport interface FormDerivedState<TDraft> {\n  draft: TDraft;\n  hasTriggeredValidations: boolean;\n  saveScheduled: boolean;\n  saveInProgress: boolean;\n  hasChanges: boolean;\n  errors: Map<string, string[]>;\n  isValid: boolean;\n}\n\nexport interface FormContext<TDraft, TOriginal> {\n  formState: Store<FormState<TDraft>>;\n  options: FormOptions<TDraft, TOriginal>;\n  original: TOriginal | undefined;\n  getField: <TPath extends string>(path: TPath) => Field<TDraft, TOriginal, TPath>;\n  getDraft: () => TDraft;\n  hasTriggeredValidations: () => boolean;\n  saveScheduled: () => boolean;\n  saveInProgress: () => boolean;\n  hasChanges: () => boolean;\n  getErrors: () => Map<string, string[]>;\n  isValid: () => boolean;\n  validate: () => boolean;\n  reset: () => void;\n}\n\nexport interface FormInstance<TDraft, TOriginal>\n  extends FormDerivedState<TDraft>,\n    Pick<\n      FormContext<TDraft, TOriginal>,\n      'options' | 'original' | 'getField' | 'validate' | 'reset'\n    > {}\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Implementation\n/// /////////////////////////////////////////////////////////////////////////////\n\nfunction FormContainer({\n  form,\n  ...formProps\n}: {\n  form: Form<any, any>;\n  onSubmit?: (\n    event: FormEvent<HTMLFormElement>,\n    form: FormInstance<any, any>,\n  ) => void | Promise<void>;\n} & Omit<HTMLProps<HTMLFormElement>, 'form' | 'onSubmit'>) {\n  const formInstance = form.useForm();\n  const hasTriggeredValidations = form.useFormState((state) => state.hasTriggeredValidations);\n\n  const formRef = useRef<HTMLFormElement>(null);\n\n  function updateValidity(errors: Map<string, string[]>, buttonElement?: HTMLButtonElement) {\n    const formElement = formRef.current;\n    if (!formElement) {\n      return;\n    }\n\n    const localizedErrors = new Map(\n      [...errors.entries()].map(\n        ([field, errors]) =>\n          [\n            field,\n            errors.map((error) => formInstance.options.localizeError?.(error, field) ?? error),\n          ] as const,\n      ),\n    );\n\n    for (const element of Array.from(formElement.elements)) {\n      if ('name' in element && 'setCustomValidity' in element) {\n        (element as HTMLObjectElement).setCustomValidity(\n          localizedErrors.get((element as HTMLObjectElement).name)?.join('\\n') ?? '',\n        );\n      }\n    }\n\n    if (buttonElement && 'setCustomValidity' in buttonElement) {\n      const errorString = [...errors.values()].flat().join('\\n');\n\n      buttonElement.setCustomValidity(errorString);\n    }\n  }\n\n  useEffect(() => {\n    return formInstance.formState\n      .map(() => formInstance.getErrors())\n      .subscribe((errors) => updateValidity(errors));\n  }, []);\n\n  return (\n    <form\n      ref={formRef}\n      noValidate\n      {...formProps}\n      className={[\n        formProps.className,\n        hasTriggeredValidations ? (formInstance.options.validatedClass ?? 'validated') : undefined,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onSubmit={async (event) => {\n        if (formInstance.saveInProgress()) {\n          return;\n        }\n\n        try {\n          formInstance.formState.set('saveInProgress', true);\n          event.preventDefault();\n\n          const formElement = event.currentTarget;\n          const buttonElement =\n            event.nativeEvent instanceof SubmitEvent &&\n            event.nativeEvent.submitter instanceof HTMLButtonElement\n              ? event.nativeEvent.submitter\n              : undefined;\n\n          updateValidity(formInstance.getErrors(), buttonElement);\n\n          formElement.reportValidity();\n\n          const isValid = formInstance.validate();\n          if (isValid) {\n            await formProps.onSubmit?.(event, {\n              ...formInstance,\n              ...getDerivedState(formInstance),\n            });\n          }\n        } finally {\n          formInstance.formState.set('saveInProgress', false);\n        }\n      }}\n    />\n  );\n}\n\nfunction getField<TDraft, TOriginal extends TDraft, TPath extends string>(\n  form: FormContext<TDraft, TOriginal>,\n  path: TPath,\n): Field<TDraft, TOriginal, TPath> {\n  const field = {\n    get originalValue() {\n      return form.original !== undefined ? get(form.original as any, path as any) : undefined;\n    },\n\n    get value() {\n      const draft = form.getDraft();\n      return get(draft ?? form.original ?? form.options.defaultValue, path as any);\n    },\n\n    setValue(update: Update<Value<TDraft, TPath>>) {\n      form.formState.set('draft', (draft = form.original ?? form.options.defaultValue) => {\n        if (update instanceof Function) {\n          update = update(get(draft, path as any) as Value<TDraft, TPath>);\n        }\n\n        return set(draft, path as any, update as any);\n      });\n    },\n\n    get hasChange() {\n      return !deepEqual(this.originalValue, this.value);\n    },\n\n    get errors() {\n      const errors = form.getErrors();\n      return errors.get(path) ?? [];\n    },\n\n    get names(): any {\n      const { value } = this;\n\n      if (Array.isArray(value)) {\n        return value.map((_, index) => join(path, String(index)));\n      }\n\n      if (isObject(value)) {\n        return Object.keys(value).map((key) => join(path, key));\n      }\n\n      return [];\n    },\n\n    add(...args: any[]) {\n      this.setValue((value): any => {\n        if (!value) {\n          throw new Error(`Cannot add element to ${JSON.stringify(value)}`);\n        }\n\n        if (Array.isArray(value)) {\n          return [...(value ?? []), args[0]];\n        }\n\n        if (isObject(value)) {\n          return {\n            ...value,\n            [args[0]]: args[1],\n          };\n        }\n\n        throw new Error(`Cannot add element to ${JSON.stringify(value)}`);\n      });\n    },\n\n    remove(key: string | number) {\n      this.setValue((value): any => {\n        if (!value) {\n          throw new Error(`Cannot remove element from ${JSON.stringify(value)}`);\n        }\n\n        if (Array.isArray(value)) {\n          return value.filter((_, index) => index !== Number(key));\n        }\n\n        if (isObject(value)) {\n          const { [key]: _, ...rest } = value as Record<string | number, unknown>;\n          return rest;\n        }\n\n        throw new Error(`Cannot remove element from ${JSON.stringify(value)}`);\n      });\n    },\n  };\n\n  return field as any;\n}\n\nfunction getErrors<TDraft, TOriginal>(\n  draft: TDraft,\n  original: TOriginal | undefined,\n  validations: FormOptions<TDraft, TOriginal>['validations'],\n) {\n  const errors = new Map<string, string[]>();\n\n  for (const [path, block] of Object.entries(validations ?? {})) {\n    for (const [validationName, validate] of Object.entries(\n      block as Record<string, Validation<any, any, any>>,\n    )) {\n      let matched = false;\n\n      for (const [field, value] of Object.entries(getWildCardMatches(draft, path))) {\n        matched = true;\n        if (!validate(value, { draft, original, field })) {\n          const fieldErrors = errors.get(field) ?? [];\n          fieldErrors.push(validationName);\n          errors.set(field, fieldErrors);\n        }\n      }\n\n      if (!matched && !path.includes('*')) {\n        if (!validate(undefined, { draft, original, field: path })) {\n          const fieldErrors = errors.get(path) ?? [];\n          fieldErrors.push(validationName);\n          errors.set(path, fieldErrors);\n        }\n      }\n    }\n  }\n\n  return errors;\n}\n\nexport function getDerivedState<TDraft>(\n  instance: FormContext<TDraft, any>,\n): FormDerivedState<TDraft> {\n  return {\n    draft: instance.getDraft(),\n    hasTriggeredValidations: instance.hasTriggeredValidations(),\n    saveScheduled: instance.saveScheduled(),\n    saveInProgress: instance.saveInProgress(),\n    hasChanges: instance.hasChanges(),\n    errors: instance.getErrors(),\n    isValid: instance.isValid(),\n  };\n}\n\nexport class Form<TDraft, TOriginal extends TDraft = TDraft> {\n  context: Context<FormContext<TDraft, TOriginal> | null> = createContext<FormContext<\n    TDraft,\n    TOriginal\n  > | null>(null);\n\n  constructor(public readonly options: FormOptions<TDraft, TOriginal>) {\n    autobind(Form);\n  }\n\n  useForm(): FormContext<TDraft, TOriginal> {\n    const context = useContext(this.context);\n\n    if (!context) {\n      throw new Error('Form context not found');\n    }\n\n    return context;\n  }\n\n  useFormState<S>(\n    selector: (state: FormInstance<TDraft, TOriginal>) => S,\n    useStoreOptions?: UseStoreOptions<S>,\n  ): S {\n    const form = this.useForm();\n\n    return useStore(\n      form.formState,\n      () =>\n        selector({\n          ...form,\n          ...getDerivedState(form),\n        }),\n\n      useStoreOptions,\n    );\n  }\n\n  useField<TPath extends string>(\n    path: TPath,\n    useStoreOptions?: UseStoreOptions<any>,\n  ): Field<TDraft, TOriginal, TPath> {\n    const form = this.useForm();\n    this.useFormState((form) => [form.getField(path).value, form.original], useStoreOptions);\n    return form.getField(path);\n  }\n\n  // ///////////////////////////////////////////////////////////////////////////\n  // React Components\n  // ///////////////////////////////////////////////////////////////////////////\n\n  Form({\n    original,\n    defaultValue,\n    validations,\n    localizeError,\n    autoSave,\n    transform,\n    validatedClass,\n    ...formProps\n  }: {\n    original?: TOriginal;\n    onSubmit?: (event: FormEvent<HTMLFormElement>, form: FormInstance<TDraft, TOriginal>) => void;\n  } & Partial<FormOptions<TDraft, TOriginal>> &\n    Omit<HTMLProps<HTMLFormElement>, 'defaultValue' | 'autoSave' | 'onSubmit'>): React.JSX.Element {\n    const options: FormOptions<TDraft, TOriginal> = {\n      defaultValue: { ...this.options.defaultValue, ...defaultValue },\n      validations: { ...this.options.validations, ...validations } as Validations<\n        TDraft,\n        TOriginal\n      >,\n      localizeError: localizeError ?? this.options.localizeError,\n      autoSave: autoSave ?? this.options.autoSave,\n      transform: transform ?? this.options.transform,\n      validatedClass: validatedClass ?? this.options.validatedClass,\n    };\n\n    const formState = useMemo(() => {\n      return createStore<FormState<TDraft>>({\n        draft: undefined,\n        hasTriggeredValidations: false,\n        saveScheduled: false,\n        saveInProgress: false,\n      });\n    }, []);\n\n    let lastDraft: TDraft | undefined;\n    const cache = new Map<string, unknown>();\n    function lazy<T>(key: string, fn: () => T): T {\n      if (lastDraft !== formState.get().draft) {\n        cache.clear();\n        lastDraft = formState.get().draft;\n      }\n\n      let value = cache.get(key);\n      if (!cache.has(key)) {\n        value = fn();\n        cache.set(key, value);\n      }\n\n      return value as T;\n    }\n\n    const context: FormContext<TDraft, TOriginal> = {\n      formState,\n      options,\n      original,\n\n      getField() {\n        throw new Error('Not implemented');\n      },\n\n      getDraft() {\n        return formState.get().draft ?? original ?? options.defaultValue;\n      },\n\n      hasTriggeredValidations() {\n        return formState.get().hasTriggeredValidations;\n      },\n\n      saveScheduled() {\n        return formState.get().saveScheduled;\n      },\n\n      saveInProgress() {\n        return formState.get().saveInProgress;\n      },\n\n      hasChanges() {\n        return lazy(\n          'hasChanges',\n          () => !deepEqual(this.getDraft(), original ?? options.defaultValue),\n        );\n      },\n\n      getErrors() {\n        return lazy('getErrors', () => getErrors(this.getDraft(), original, options.validations));\n      },\n\n      isValid() {\n        return lazy('isValid', () => this.getErrors().size === 0);\n      },\n\n      validate() {\n        formState.set('hasTriggeredValidations', true);\n        return this.isValid();\n      },\n\n      reset() {\n        formState.set('draft', undefined);\n        formState.set('hasTriggeredValidations', false);\n      },\n    };\n\n    context.getField = (path) => lazy(path, () => getField(context, path));\n\n    // useEffect(() => {\n    //   const handles = options.transform?.map(({ trigger, update }) => {\n    //     const draft = derivedState.map('draft');\n    //     const triggerStore = trigger ? draft.map(trigger as any) : draft;\n\n    //     return triggerStore.subscribe(() => {\n    //       const value = trigger ? get(draft.get(), trigger as any) : draft.get();\n    //       const result = update(value as any, draft);\n\n    //       if (result !== undefined) {\n    //         draft.set(result);\n    //       }\n    //     });\n    //   });\n\n    //   return () => {\n    //     handles?.forEach((handle) => handle());\n    //   };\n    // }, [original,options.transform]);\n\n    useFormAutosave(context);\n\n    return (\n      <this.context.Provider value={context}>\n        <FormContainer {...formProps} form={this} />\n      </this.context.Provider>\n    );\n  }\n\n  FormState<S>({\n    selector,\n    children,\n  }: {\n    selector: (form: FormInstance<TDraft, TOriginal>) => S;\n    children: (selectedState: S) => ReactNode;\n  }): React.JSX.Element {\n    const selectedState = this.useFormState(selector);\n    return <>{children(selectedState)}</>;\n  }\n\n  Field<const TPath extends string>(\n    props: FormFieldPropsWithRender<TDraft, TOriginal, TPath>,\n  ): React.JSX.Element;\n\n  Field<const TPath extends string, const TComponent extends FormFieldComponent = 'input'>(\n    props: FormFieldPropsWithComponent<TDraft, TOriginal, TPath, TComponent>,\n  ): React.JSX.Element;\n\n  Field(props: any): React.JSX.Element {\n    return Reflect.apply(FormField, this, [{ component: 'input', ...props }]);\n  }\n\n  ForEach<const TPath extends string>(props: FormForEachProps<TDraft, TPath>): React.JSX.Element {\n    return Reflect.apply(FormForEach, this, [props]);\n  }\n\n  withForm<TProps extends Record<string, unknown>>(\n    Component: React.ComponentType<TProps>,\n    formProps?: Parameters<this['Form']>[0],\n  ): FunctionComponent<TProps> {\n    const { Form } = this;\n    return function FormWrapper(props: TProps) {\n      return (\n        <Form {...formProps}>\n          <Component {...props} />\n        </Form>\n      );\n    };\n  }\n}\n\nexport function createForm<TDraft, TOriginal extends TDraft = TDraft>(\n  options: FormOptions<TDraft, TOriginal>,\n): Form<TDraft, TOriginal> {\n  return new Form(options);\n}\n","import React, { createContext, useContext, type Context, type ReactNode } from 'react';\n\nexport type Location = string | { pathname: string; search: string; hash: string };\n\nexport interface UrlContextType {\n  location: Location;\n  navigate: (navigate: (from: Location) => string) => void;\n}\n\nexport type UrlContextProviderProps = { children?: ReactNode } & (\n  | { location: UrlContextType['location'] }\n  | { locationHook: () => UrlContextType['location'] }\n) &\n  ({ navigate: UrlContextType['navigate'] } | { navigateHook: () => UrlContextType['navigate'] });\n\nexport const UrlContext: Context<UrlContextType | undefined> = createContext<\n  UrlContextType | undefined\n>(undefined);\n\nexport function UrlProvider({ children, ...props }: UrlContextProviderProps): React.JSX.Element {\n  const location = 'location' in props ? props.location : props.locationHook();\n  const navigate = 'navigate' in props ? props.navigate : props.navigateHook();\n\n  return <UrlContext.Provider value={{ location, navigate }}>{children}</UrlContext.Provider>;\n}\n\nexport function useUrlContext(): UrlContextType {\n  const context = useContext(UrlContext);\n  if (!context) {\n    throw new Error('useUrlContext must be used within a UrlContextProvider');\n  }\n  return context;\n}\n","export interface UrlOptions<T> {\n  key: string;\n  type?: 'search' | 'hash';\n  serialize?: (value: T) => string;\n  deserialize?: (value: string) => T;\n  defaultValue: T;\n  writeDefaultValue?: boolean;\n  onCommit?: (value: T) => void;\n  persist?: { id: string };\n}\n\nexport interface UrlOptionsWithoutDefaults<T>\n  extends Omit<UrlOptions<T | undefined>, 'defaultValue'> {\n  defaultValue?: T | undefined;\n}\n\nexport function createUrlOptions<T>(options: UrlOptions<T>): UrlOptions<T>;\nexport function createUrlOptions<T>(\n  options: UrlOptionsWithoutDefaults<T>,\n): UrlOptions<T | undefined>;\nexport function createUrlOptions<T>(options: UrlOptionsWithoutDefaults<T>) {\n  return {\n    ...options,\n    defaultValue: options.defaultValue as T,\n  };\n}\n","import { fromExtendedJsonString, toExtendedJsonString } from '@lib/extendedJson';\nimport type { Location } from '@react/url/urlContext';\n\nexport function defaultDeserializer<T>(value: string): T {\n  if (value === undefined) {\n    return undefined as T;\n  }\n\n  try {\n    return fromExtendedJsonString(value) as T;\n  } catch {\n    return undefined as T;\n  }\n}\n\nexport function defaultSerializer<T>(value: T): string {\n  return toExtendedJsonString(value);\n}\n\nexport function parseLocation(location: Location): URL {\n  if (typeof location !== 'string') {\n    location = `${location.pathname}${location.search}${location.hash}`;\n  }\n\n  return new URL(location, window.location.origin);\n}\n\nexport function createStorageKey(id: string, key: string) {\n  return `cross-state:url:${id}:${key}`;\n}\n","import type { Update, UpdateFunction } from '@core';\nimport { useUrlContext } from '@react/url/urlContext';\nimport {\n  createStorageKey,\n  defaultDeserializer,\n  defaultSerializer,\n  parseLocation,\n} from '@react/url/urlHelpers';\nimport type { UrlOptions, UrlOptionsWithoutDefaults } from '@react/url/urlOptions';\nimport type { UrlStore } from '@react/url/urlStore';\nimport { useEffect, useMemo } from 'react';\n\nexport function useUrlParam<T>(store: UrlStore<T>): [T, update: UpdateFunction<T>];\nexport function useUrlParam<T>(options: UrlOptions<T>): [T, update: UpdateFunction<T>];\nexport function useUrlParam<T>(\n  options: UrlOptionsWithoutDefaults<T>,\n): [T | undefined, update: UpdateFunction<T | undefined>];\nexport function useUrlParam<T>(\n  input: UrlStore<T> | UrlOptionsWithoutDefaults<T>,\n): [T, update: UpdateFunction<T>] {\n  const {\n    key,\n    type = 'hash',\n    serialize = defaultSerializer,\n    deserialize = defaultDeserializer,\n    defaultValue,\n    writeDefaultValue,\n    onCommit,\n    persist,\n  } = 'options' in input ? input.options : (input as UrlOptions<T>);\n\n  const { location, navigate } = useUrlContext();\n  const url = parseLocation(location);\n  const params = new URLSearchParams(url[type].slice(1));\n  const urlValue = params.get(key);\n\n  const storageKey = persist && createStorageKey(persist.id, key);\n  const storageValue = storageKey ? localStorage.getItem(storageKey) : null;\n\n  const value = useMemo(\n    () =>\n      urlValue !== null\n        ? deserialize(urlValue)\n        : storageValue !== null\n          ? deserialize(storageValue)\n          : defaultValue,\n    [urlValue],\n  );\n\n  function commit(value: T) {\n    const serializedValue = serialize(value);\n\n    navigate((location) => {\n      const url = parseLocation(location);\n      const params = new URLSearchParams(url[type].slice(1));\n\n      if (!writeDefaultValue && serializedValue === serialize(defaultValue)) {\n        params.delete(key);\n      } else {\n        params.set(key, serializedValue);\n      }\n\n      url[type] = params.toString();\n      return url.toString().replace(window.location.origin, '');\n    });\n\n    if (storageKey) {\n      localStorage.setItem(storageKey, serializedValue);\n    }\n\n    onCommit?.(value);\n  }\n\n  function update(update: Update<T>) {\n    if (update instanceof Function) {\n      update = update(value);\n    }\n\n    commit(update);\n  }\n\n  useEffect(() => {\n    if (urlValue !== null) {\n      commit(deserialize(urlValue));\n    }\n  }, [urlValue]);\n\n  useEffect(() => {\n    if (urlValue === null && storageValue !== null) {\n      commit(deserialize(storageValue));\n    } else if (urlValue === null && writeDefaultValue) {\n      commit(defaultValue);\n    }\n  }, []);\n\n  return [value, update];\n}\n","import {\n  createUrlOptions,\n  type UrlOptions,\n  type UrlOptionsWithoutDefaults,\n} from '@react/url/urlOptions';\nimport { useUrlParam } from '@react/url/useUrlParam';\n\nexport class UrlStore<T> {\n  constructor(public readonly options: UrlOptions<T>) {}\n\n  useStore(): T {\n    return useUrlParam(this)[0];\n  }\n\n  useProp(): [T, update: (value: T) => void] {\n    return useUrlParam(this);\n  }\n}\nexport function createUrlStore<T>(options: UrlOptions<T>): UrlStore<T>;\nexport function createUrlStore<T>(options: UrlOptionsWithoutDefaults<T>): UrlStore<T | undefined>;\nexport function createUrlStore<T>(options: UrlOptionsWithoutDefaults<T>) {\n  return new UrlStore(createUrlOptions(options));\n}\n","import { startTransition, useEffect, useMemo, useRef, useState } from 'react';\nimport { type Duration } from '@core';\nimport { debounce } from '@lib/debounce';\nimport { simpleHash } from '@lib/hash';\nimport { throttle } from '@lib/throttle';\n\nexport interface UseDecoupledStateOptions<T> {\n  debounce?: Duration;\n  throttle?: Duration;\n  onCommit?: (value: T) => void;\n}\n\nexport function useDecoupledState<T>(\n  value: T,\n  onChange: (value: T) => void,\n  options: UseDecoupledStateOptions<T> = {},\n): [state: T, setState: (value: T) => void] {\n  const [dirty, setDirty] = useState<{ v: T }>();\n  const ref = useRef({ onChange, onCommit: options.onCommit });\n\n  useEffect(() => {\n    ref.current = { onChange, onCommit: options.onCommit };\n  }, [onChange]);\n\n  const update = useMemo(() => {\n    const { onChange, onCommit } = ref.current;\n\n    const update = (value: T) => {\n      onChange(value);\n      setDirty(undefined);\n      onCommit?.(value);\n    };\n\n    let delayedUpdate: (value: T) => void;\n\n    if (options.debounce) {\n      delayedUpdate = debounce(update, options.debounce);\n    } else if (options.throttle) {\n      delayedUpdate = throttle(update, options.throttle);\n    } else {\n      delayedUpdate = (value) => startTransition(() => update(value));\n    }\n\n    return (value: T) => {\n      setDirty({ v: value });\n      delayedUpdate(value);\n    };\n  }, [simpleHash([options.debounce, options.throttle])]);\n\n  return [dirty ? dirty.v : value, update];\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["matches: Record<KeyType, any>","castArrayPath","isObject","value","form","name","Fragment","calcDuration","queue","debounce","options","deepEqual","errors","get","set","deepEqual","join","isObject","options: FormOptions<TDraft, TOriginal>","useStore","form","createStore","lastDraft: TDraft | undefined","context: FormContext<TDraft, TOriginal>","Form","UrlContext: Context<UrlContextType | undefined>","fromExtendedJsonString","toExtendedJsonString","value","url","location","params","update","options: Required<UrlOptions<T>>","update","value","delayedUpdate: (value: T) => void","debounce","throttle","simpleHash"],"sources":["../../src/react/form/customInput.tsx","../../src/lib/wildcardMatch.ts","../../src/react/form/formField.tsx","../../src/react/form/formForEach.tsx","../../src/react/form/useFormAutosave.ts","../../src/react/form/form.tsx","../../src/react/url/urlContext.tsx","../../src/react/url/urlHelpers.ts","../../src/react/url/urlOptions.ts","../../src/react/url/useUrlParam.ts","../../src/react/url/urlStore.ts","../../src/react/useDecoupledState.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport interface CustomInputProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string;\n  children?: ReactNode;\n}\n\nexport function CustomInput({ name, children, ...props }: CustomInputProps): React.JSX.Element {\n  return (\n    <div\n      {...props}\n      style={{\n        position: 'relative',\n        ...props.style,\n      }}\n    >\n      {children}\n\n      <input\n        name={name}\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          opacity: 0,\n          width: '100%',\n          height: '100%',\n          pointerEvents: 'none',\n        }}\n      />\n    </div>\n  );\n}\n","import { isObject } from '@lib/helpers';\nimport { type KeyType } from './path';\nimport { castArrayPath } from './propAccess';\n\nexport function wildcardMatch(s: KeyType[] | string, w: KeyType[] | string): boolean {\n  if (typeof s === 'string') {\n    s = castArrayPath(s);\n  }\n\n  if (typeof w === 'string') {\n    w = castArrayPath(w);\n  }\n\n  return s.length === w.length && s.every((s, i) => w[i] === '*' || s === w[i]);\n}\n\nexport function getWildCardMatches(\n  object: any,\n  path: [KeyType, ...KeyType[]] | string,\n): Record<KeyType, any> {\n  const matches: Record<KeyType, any> = {};\n  const [first, second, ...rest] = castArrayPath(path);\n\n  if (first === undefined) {\n    throw new Error('Path is empty');\n  }\n\n  if (!Array.isArray(object) && !isObject(object)) {\n    object = {};\n  }\n\n  for (const [key, value] of first !== '*' ? [[first, object[first]]] : Object.entries(object)) {\n    if (first !== '*' && first !== key) {\n      continue;\n    }\n\n    if (second === undefined) {\n      matches[key] = value;\n      continue;\n    }\n\n    for (const [subKey, subValue] of Object.entries(getWildCardMatches(value, [second, ...rest]))) {\n      matches[`${key}.${subKey}`] = subValue;\n    }\n  }\n\n  return matches;\n}\n","import { type PathAsString, type Value } from '@lib/path';\nimport {\n  createElement,\n  useEffect,\n  useState,\n  type Component,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react';\nimport {\n  getDerivedState,\n  type Field,\n  type Form,\n  type FormContext,\n  type FormInstance,\n} from './form';\n\nexport interface FormFieldComponentProps<TValue, TPath> {\n  name: TPath;\n  value: TValue;\n  onChange: (event: { target: { value: TValue } } | TValue | undefined, ...args: any[]) => void;\n  onBlur: (...args: any[]) => void;\n}\n\nexport type FormFieldInfos<TDraft, TOriginal, TPath extends string> = Field<\n  TDraft,\n  TOriginal,\n  TPath\n> & {\n  hasTriggeredValidations: boolean;\n};\n\ntype NativeInputType = 'input' | 'select' | 'textarea';\n\ntype PartialComponentType<P> =\n  | (new (props: P, context?: any) => Component<P, any>)\n  | ((props: P, context?: any) => ReactNode);\n\nexport type FormFieldComponent = NativeInputType | PartialComponentType<any>;\n\ntype FieldValue<T extends FormFieldComponent> = ComponentPropsWithoutRef<T>['value'];\n\ntype FieldChangeValue<T extends FormFieldComponent> =\n  ComponentPropsWithoutRef<T> extends {\n    onChange?: (update: infer U) => void;\n  }\n    ? U extends { target: { value: infer V } }\n      ? V\n      : U\n    : never;\n\ntype MakeOptional<T, Keys extends string> = Omit<T, Keys> & Partial<Pick<T, Keys & keyof T>>;\n\nexport type FormFieldProps<TPath, TDraft> = {\n  name: TPath & PathAsString<TDraft>;\n  commitOnBlur?: boolean;\n  commitDebounce?: number;\n};\n\nexport type FormFieldPropsWithRender<TDraft, TOriginal, TPath extends string> = FormFieldProps<\n  TPath,\n  TDraft\n> &\n  NoInfer<{\n    component?: undefined;\n    render: (\n      props: FormFieldComponentProps<Value<TDraft, TPath>, TPath>,\n      info: FormFieldInfos<TDraft, TOriginal, TPath>,\n      form: FormContext<TDraft, TOriginal>,\n    ) => ReactNode;\n    inputFilter?: undefined;\n    defaultValue?: undefined;\n    serialize?: undefined;\n    deserialize?: undefined;\n    onChange?: undefined;\n    onBlur?: undefined;\n  }>;\n\ntype Serialize<TDraft, TOriginal, TPath, TComponent extends FormFieldComponent> = (\n  value: Value<TDraft, TPath>,\n  formState: FormInstance<TDraft, TOriginal>,\n) => FieldValue<TComponent>;\n\ntype Deserialize<TDraft, TOriginal, TPath, TComponent extends FormFieldComponent> = (\n  value: FieldChangeValue<TComponent>,\n  formState: FormInstance<TDraft, TOriginal>,\n) => Value<TDraft, TPath>;\n\nexport type FormFieldPropsWithComponent<\n  TDraft,\n  TOriginal,\n  TPath extends string,\n  TComponent extends FormFieldComponent,\n> = FormFieldProps<TPath, TDraft> & {\n  component?: TComponent;\n  render?: undefined;\n} & NoInfer<\n    {\n      inputFilter?: (value: FieldChangeValue<TComponent>) => boolean;\n    } & MakeOptional<\n      Omit<ComponentPropsWithoutRef<TComponent>, 'id' | 'name' | 'value' | 'defaultValue'>,\n      'onChange' | 'onBlur'\n    > &\n      (Value<TDraft, TPath> extends Exclude<FieldValue<TComponent>, undefined>\n        ? {\n            defaultValue?: FieldValue<TComponent>;\n            serialize?: Serialize<TDraft, TOriginal, TPath, TComponent>;\n          }\n        : Value<TDraft, TPath> extends FieldValue<TComponent>\n          ?\n              | {\n                  defaultValue: FieldValue<TComponent>;\n                  serialize?: Serialize<TDraft, TOriginal, TPath, TComponent>;\n                }\n              | {\n                  defaultValue?: FieldValue<TComponent>;\n                  serialize: Serialize<TDraft, TOriginal, TPath, TComponent>;\n                }\n          : {\n              serialize: Serialize<TDraft, TOriginal, TPath, TComponent>;\n            }) &\n      (FieldChangeValue<TComponent> extends Value<TDraft, TPath>\n        ? {\n            deserialize?: Deserialize<TDraft, TOriginal, TPath, TComponent>;\n          }\n        : {\n            deserialize: Deserialize<TDraft, TOriginal, TPath, TComponent>;\n          })\n  >;\n\nexport function FormField<\n  TDraft,\n  TOriginal,\n  TPath extends string,\n  TComponent extends FormFieldComponent,\n>(\n  this: Form<TDraft, any>,\n  {\n    // id,\n    name = '' as any,\n    component,\n    commitOnBlur,\n    commitDebounce,\n    render,\n    inputFilter,\n    defaultValue,\n    serialize,\n    deserialize = (x) => x as Value<TDraft, TPath>,\n    onChange,\n    onBlur,\n    ...restProps\n  }:\n    | FormFieldPropsWithRender<TDraft, TOriginal, TPath>\n    | FormFieldPropsWithComponent<TDraft, TOriginal, TPath, TComponent>,\n): React.JSX.Element | null {\n  type T = FieldChangeValue<TComponent>;\n\n  const form = this.useForm();\n  const getFormState = () => ({ ...form, ...getDerivedState(form) });\n  const [localValue, setLocalValue] = useState<T>();\n\n  const value = this.useFormState((form) => {\n    const value = form.getField(name as any).value;\n    if (serialize) {\n      return serialize(value as any, getFormState());\n    }\n    if (value !== undefined) {\n      return value;\n    }\n    return defaultValue;\n  });\n\n  const setValue = (x: FieldChangeValue<TComponent>) =>\n    form.getField(name as any).setValue(deserialize(x, getFormState()));\n\n  const hasTriggeredValidations = this.useFormState((form) => form.hasTriggeredValidations);\n\n  useEffect(() => {\n    if (localValue === undefined || !commitDebounce) {\n      return;\n    }\n\n    const timeout = setTimeout(() => {\n      setValue(localValue);\n      setLocalValue(undefined);\n    }, commitDebounce);\n\n    return () => clearTimeout(timeout);\n  }, [localValue, commitDebounce]);\n\n  const props = {\n    name,\n    value: localValue ?? value,\n    onChange: (event: { target: { value: T } } | T, ...moreArgs: any[]) => {\n      const value =\n        typeof event === 'object' && event !== null && 'target' in event\n          ? event.target.value\n          : event;\n\n      if (inputFilter && !inputFilter(value)) {\n        return;\n      }\n\n      if (commitOnBlur || commitDebounce) {\n        setLocalValue(value);\n      } else {\n        setValue(value);\n      }\n\n      onChange?.(event, ...moreArgs);\n    },\n    onBlur(...args: any[]) {\n      if (localValue !== undefined) {\n        setValue(localValue);\n        setLocalValue(undefined);\n      }\n\n      onBlur?.(...args);\n    },\n  } as FormFieldComponentProps<Value<TDraft, TPath>, TPath>;\n\n  if (render) {\n    return (\n      <>\n        {render(props, { ...form.getField(name as any), hasTriggeredValidations } as any, form) ??\n          null}\n      </>\n    );\n  }\n\n  if (component) {\n    return createElement(component, { ...restProps, ...props });\n  }\n\n  return null;\n}\n","import { type GetKeys, type Join, type PathAsString, type Value } from '@lib/path';\nimport { Fragment, useCallback, type ReactNode } from 'react';\nimport { type FieldHelperMethods, type Form } from './form';\n\nexport type ElementName<TDraft, TPath extends string> = keyof {\n  [Path in TPath as Join<Path, GetKeys<NonNullable<Value<TDraft, Path>>> & (string | number)>]: 1;\n};\n\nexport interface FormForEachProps<TDraft, TPath extends string> {\n  name: TPath & PathAsString<TDraft>;\n  renderElement?: (props: {\n    name: ElementName<TDraft, TPath>;\n    key: `${GetKeys<NonNullable<Value<TDraft, TPath>>> & (string | number)}`;\n    index: number;\n    remove: () => void;\n  }) => ReactNode;\n  children?: (\n    props: {\n      setValue: (\n        value: Value<TDraft, TPath> | ((value: Value<TDraft, TPath>) => Value<TDraft, TPath>),\n      ) => void;\n    } & FieldHelperMethods<TDraft, TPath>,\n  ) => ReactNode;\n}\n\nexport function FormForEach<TDraft, TPath extends string>(\n  this: Form<TDraft, any>,\n  { name, renderElement, children }: FormForEachProps<TDraft, TPath>,\n): React.JSX.Element {\n  const form = this.useForm();\n\n  const names = this.useFormState(() => {\n    const field = form.getField(name as any) as any;\n    return field.names as any[];\n  });\n\n  const add = useCallback(\n    (...args: any[]) => {\n      const field = form.getField(name as any) as any;\n      field.add(...args);\n    },\n    [form],\n  );\n\n  const remove = useCallback(\n    (key: any) => {\n      const field = form.getField(name as any) as any;\n      field.remove(key);\n    },\n    [form],\n  );\n\n  const setValue = useCallback(\n    (value: Value<TDraft, TPath> | ((value: Value<TDraft, TPath>) => Value<TDraft, TPath>)) => {\n      const field = form.getField(name as any) as any;\n      field.setValue(value);\n    },\n    [form],\n  );\n\n  return (\n    <>\n      {renderElement &&\n        names.map((name, index) => {\n          const key = name.split('.').pop();\n\n          return (\n            <Fragment key={key}>\n              {renderElement({\n                name,\n                key,\n                index,\n                remove: () => remove(key),\n              })}\n            </Fragment>\n          );\n        })}\n\n      {children?.({\n        names,\n        add,\n        remove,\n        setValue,\n      } as any)}\n    </>\n  );\n}\n","import type { Duration } from '@core';\nimport { calcDuration } from '@lib/calcDuration';\nimport { debounce } from '@lib/debounce';\nimport { deepEqual } from '@lib/equals';\nimport type { MaybePromise } from '@lib/maybePromise';\nimport { queue } from '@lib/queue';\nimport { useEffect, useMemo, useRef } from 'react';\nimport type { FormContext } from './form';\n\nexport interface FormAutosaveOptions<TDraft, TOriginal> {\n  save: (draft: TDraft, form: FormContext<TDraft, TOriginal>) => MaybePromise<void>;\n  debounce?: Duration;\n  resetAfterSave?: boolean;\n}\n\nexport function useFormAutosave<TDraft, TOriginal extends TDraft>(\n  form: FormContext<TDraft, TOriginal>,\n): void {\n  const { formState, options, getDraft } = form;\n  const debounceTime = calcDuration(options.autoSave?.debounce ?? 2_000);\n  const latestRef = useRef({ options });\n  const lastValue = useRef<TDraft | undefined>(undefined);\n  const q = useMemo(() => queue(), []);\n\n  const run = useMemo(\n    () =>\n      debounce(async () => {\n        const { options } = latestRef.current;\n        const save = options.autoSave?.save;\n        const draft = getDraft();\n\n        lastValue.current = draft;\n\n        q.clear();\n\n        q(async () => {\n          try {\n            formState.set('saveInProgress', true);\n            await save?.(draft, form);\n\n            if (q.size === 0 && options.autoSave?.resetAfterSave) {\n              form.reset();\n            }\n          } finally {\n            formState.set('saveInProgress', false);\n\n            if (q.size === 0) {\n              formState.set('saveScheduled', false);\n            }\n          }\n        });\n      }, debounceTime),\n    [formState, debounceTime],\n  );\n\n  useEffect(() => {\n    if (!options.autoSave?.save) {\n      return;\n    }\n\n    return formState\n      .map((state) => state.draft)\n      .subscribe(\n        () => {\n          if (deepEqual(getDraft(), lastValue.current)) {\n            return;\n          }\n\n          run();\n          formState.set('saveScheduled', true);\n        },\n        { runNow: false },\n      );\n  }, [formState]);\n\n  useEffect(() => {\n    latestRef.current = { options };\n  });\n}\n","import { createStore, type Store, type Update } from '@core';\nimport { autobind } from '@lib/autobind';\nimport { deepEqual } from '@lib/equals';\nimport { isObject } from '@lib/helpers';\nimport {\n  type Path,\n  type PathAsString,\n  type Value,\n  type WildcardPathAsString,\n  type WildcardValue,\n} from '@lib/path';\nimport { get, join, set } from '@lib/propAccess';\nimport type { Object_ } from '@lib/typeHelpers';\nimport { getWildCardMatches } from '@lib/wildcardMatch';\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  type Context,\n  type FormEvent,\n  type FunctionComponent,\n  type HTMLProps,\n  type ReactNode,\n} from 'react';\nimport { useStore, type UseStoreOptions } from '../useStore';\nimport {\n  FormField,\n  type FormFieldComponent,\n  type FormFieldPropsWithComponent,\n  type FormFieldPropsWithRender,\n} from './formField';\nimport { FormForEach, type ElementName, type FormForEachProps } from './formForEach';\nimport { useFormAutosave, type FormAutosaveOptions } from './useFormAutosave';\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Form types\n/// /////////////////////////////////////////////////////////////////////////////\n\nexport type Transform<TDraft> = Path<TDraft> | '' extends infer TPath\n  ? TPath extends TPath\n    ? {\n        update: (value: Value<TDraft, TPath>, store: Store<TDraft>) => void | TDraft;\n      } & (TPath extends '' ? { trigger?: '' } : { trigger: TPath })\n    : never\n  : never;\n\nexport interface FormOptions<TDraft, TOriginal> {\n  defaultValue: TDraft;\n  validations?: Validations<TDraft, TOriginal>;\n  localizeError?: (error: string, field: string) => string | undefined;\n  autoSave?: FormAutosaveOptions<TDraft, TOriginal>;\n  transform?: Transform<TDraft>[];\n  validatedClass?: string;\n}\n\nexport type Validations<TDraft, TOriginal> = {\n  [TPath in WildcardPathAsString<TDraft>]?: Record<string, Validation<TDraft, TOriginal, TPath>>;\n} & Record<string, Record<string, Validation<TDraft, TOriginal, any>>>;\n\nexport type Validation<TDraft, TOriginal, TPath> = (\n  value: WildcardValue<TDraft, TPath>,\n  context: {\n    draft: TDraft;\n    original: TOriginal;\n    field: PathAsString<TDraft> | '';\n  },\n) => boolean;\n\nexport type Field<TDraft, TOriginal, TPath extends string> = {\n  originalValue: Value<TOriginal, TPath> | undefined;\n  value: Value<TDraft, TPath>;\n  setValue: (value: Update<Value<TDraft, TPath>>) => void;\n  hasChange: boolean;\n  errors: string[];\n} & (Value<TDraft, TPath> extends Object_ ? FieldHelperMethods<TDraft, TPath> : {});\n\nexport type FieldHelperMethods<TDraft, TPath extends string> = {\n  names: ElementName<TDraft, TPath>[];\n  add: NonNullable<Value<TDraft, TPath>> extends readonly (infer T)[]\n    ? (element: T) => void\n    : NonNullable<Value<TDraft, TPath>> extends Record<infer K, infer V>\n      ? (key: K, value: V) => void\n      : never;\n  remove: Value<TDraft, TPath> extends readonly any[]\n    ? (index: number) => void\n    : (key: string) => void;\n};\n\nexport interface FormState<TDraft> {\n  draft: TDraft | undefined;\n  hasTriggeredValidations: boolean;\n  saveScheduled: boolean;\n  saveInProgress: boolean;\n}\n\nexport interface FormDerivedState<TDraft> {\n  draft: TDraft;\n  hasTriggeredValidations: boolean;\n  saveScheduled: boolean;\n  saveInProgress: boolean;\n  hasChanges: boolean;\n  errors: Map<string, string[]>;\n  isValid: boolean;\n}\n\nexport interface FormContext<TDraft, TOriginal> {\n  formState: Store<FormState<TDraft>>;\n  options: FormOptions<TDraft, TOriginal>;\n  original: TOriginal | undefined;\n  getField: <TPath extends string>(path: TPath) => Field<TDraft, TOriginal, TPath>;\n  getDraft: () => TDraft;\n  hasTriggeredValidations: () => boolean;\n  saveScheduled: () => boolean;\n  saveInProgress: () => boolean;\n  hasChanges: () => boolean;\n  getErrors: () => Map<string, string[]>;\n  isValid: () => boolean;\n  validate: () => boolean;\n  reset: () => void;\n}\n\nexport interface FormInstance<TDraft, TOriginal>\n  extends FormDerivedState<TDraft>,\n    Pick<\n      FormContext<TDraft, TOriginal>,\n      'options' | 'original' | 'getField' | 'validate' | 'reset'\n    > {}\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Implementation\n/// /////////////////////////////////////////////////////////////////////////////\n\nfunction FormContainer({\n  form,\n  ...formProps\n}: {\n  form: Form<any, any>;\n  onSubmit?: (\n    event: FormEvent<HTMLFormElement>,\n    form: FormInstance<any, any>,\n  ) => void | Promise<void>;\n} & Omit<HTMLProps<HTMLFormElement>, 'form' | 'onSubmit'>) {\n  const formInstance = form.useForm();\n  const hasTriggeredValidations = form.useFormState((state) => state.hasTriggeredValidations);\n\n  const formRef = useRef<HTMLFormElement>(null);\n\n  function updateValidity(errors: Map<string, string[]>, buttonElement?: HTMLButtonElement) {\n    const formElement = formRef.current;\n    if (!formElement) {\n      return;\n    }\n\n    const localizedErrors = new Map(\n      [...errors.entries()].map(\n        ([field, errors]) =>\n          [\n            field,\n            errors.map((error) => formInstance.options.localizeError?.(error, field) ?? error),\n          ] as const,\n      ),\n    );\n\n    for (const element of Array.from(formElement.elements)) {\n      if ('name' in element && 'setCustomValidity' in element) {\n        (element as HTMLObjectElement).setCustomValidity(\n          localizedErrors.get((element as HTMLObjectElement).name)?.join('\\n') ?? '',\n        );\n      }\n    }\n\n    if (buttonElement && 'setCustomValidity' in buttonElement) {\n      const errorString = [...errors.values()].flat().join('\\n');\n\n      buttonElement.setCustomValidity(errorString);\n    }\n  }\n\n  useEffect(() => {\n    return formInstance.formState\n      .map(() => formInstance.getErrors())\n      .subscribe((errors) => updateValidity(errors));\n  }, []);\n\n  return (\n    <form\n      ref={formRef}\n      noValidate\n      {...formProps}\n      className={[\n        formProps.className,\n        hasTriggeredValidations ? (formInstance.options.validatedClass ?? 'validated') : undefined,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onSubmit={async (event) => {\n        if (formInstance.saveInProgress()) {\n          return;\n        }\n\n        try {\n          formInstance.formState.set('saveInProgress', true);\n          event.preventDefault();\n\n          const formElement = event.currentTarget;\n          const buttonElement =\n            event.nativeEvent instanceof SubmitEvent &&\n            event.nativeEvent.submitter instanceof HTMLButtonElement\n              ? event.nativeEvent.submitter\n              : undefined;\n\n          updateValidity(formInstance.getErrors(), buttonElement);\n\n          formElement.reportValidity();\n\n          const isValid = formInstance.validate();\n          if (isValid) {\n            await formProps.onSubmit?.(event, {\n              ...formInstance,\n              ...getDerivedState(formInstance),\n            });\n          }\n        } finally {\n          formInstance.formState.set('saveInProgress', false);\n        }\n      }}\n    />\n  );\n}\n\nfunction getField<TDraft, TOriginal extends TDraft, TPath extends string>(\n  form: FormContext<TDraft, TOriginal>,\n  path: TPath,\n): Field<TDraft, TOriginal, TPath> {\n  const field = {\n    get originalValue() {\n      return form.original !== undefined ? get(form.original as any, path as any) : undefined;\n    },\n\n    get value() {\n      const draft = form.getDraft();\n      return get(draft ?? form.original ?? form.options.defaultValue, path as any);\n    },\n\n    setValue(update: Update<Value<TDraft, TPath>>) {\n      form.formState.set('draft', (draft = form.original ?? form.options.defaultValue) => {\n        if (update instanceof Function) {\n          update = update(get(draft, path as any) as Value<TDraft, TPath>);\n        }\n\n        return set(draft, path as any, update as any);\n      });\n    },\n\n    get hasChange() {\n      return !deepEqual(this.originalValue, this.value);\n    },\n\n    get errors() {\n      const errors = form.getErrors();\n      return errors.get(path) ?? [];\n    },\n\n    get names(): any {\n      const { value } = this;\n\n      if (Array.isArray(value)) {\n        return value.map((_, index) => join(path, String(index)));\n      }\n\n      if (isObject(value)) {\n        return Object.keys(value).map((key) => join(path, key));\n      }\n\n      return [];\n    },\n\n    add(...args: any[]) {\n      this.setValue((value): any => {\n        if (!value) {\n          throw new Error(`Cannot add element to ${JSON.stringify(value)}`);\n        }\n\n        if (Array.isArray(value)) {\n          return [...(value ?? []), args[0]];\n        }\n\n        if (isObject(value)) {\n          return {\n            ...value,\n            [args[0]]: args[1],\n          };\n        }\n\n        throw new Error(`Cannot add element to ${JSON.stringify(value)}`);\n      });\n    },\n\n    remove(key: string | number) {\n      this.setValue((value): any => {\n        if (!value) {\n          throw new Error(`Cannot remove element from ${JSON.stringify(value)}`);\n        }\n\n        if (Array.isArray(value)) {\n          return value.filter((_, index) => index !== Number(key));\n        }\n\n        if (isObject(value)) {\n          const { [key]: _, ...rest } = value as Record<string | number, unknown>;\n          return rest;\n        }\n\n        throw new Error(`Cannot remove element from ${JSON.stringify(value)}`);\n      });\n    },\n  };\n\n  return field as any;\n}\n\nfunction getErrors<TDraft, TOriginal>(\n  draft: TDraft,\n  original: TOriginal | undefined,\n  validations: FormOptions<TDraft, TOriginal>['validations'],\n) {\n  const errors = new Map<string, string[]>();\n\n  for (const [path, block] of Object.entries(validations ?? {})) {\n    for (const [validationName, validate] of Object.entries(\n      block as Record<string, Validation<any, any, any>>,\n    )) {\n      let matched = false;\n\n      for (const [field, value] of Object.entries(getWildCardMatches(draft, path))) {\n        matched = true;\n        if (!validate(value, { draft, original, field })) {\n          const fieldErrors = errors.get(field) ?? [];\n          fieldErrors.push(validationName);\n          errors.set(field, fieldErrors);\n        }\n      }\n\n      if (!matched && !path.includes('*')) {\n        if (!validate(undefined, { draft, original, field: path })) {\n          const fieldErrors = errors.get(path) ?? [];\n          fieldErrors.push(validationName);\n          errors.set(path, fieldErrors);\n        }\n      }\n    }\n  }\n\n  return errors;\n}\n\nexport function getDerivedState<TDraft>(\n  instance: FormContext<TDraft, any>,\n): FormDerivedState<TDraft> {\n  return {\n    draft: instance.getDraft(),\n    hasTriggeredValidations: instance.hasTriggeredValidations(),\n    saveScheduled: instance.saveScheduled(),\n    saveInProgress: instance.saveInProgress(),\n    hasChanges: instance.hasChanges(),\n    errors: instance.getErrors(),\n    isValid: instance.isValid(),\n  };\n}\n\nexport class Form<TDraft, TOriginal extends TDraft = TDraft> {\n  context: Context<FormContext<TDraft, TOriginal> | null> = createContext<FormContext<\n    TDraft,\n    TOriginal\n  > | null>(null);\n\n  constructor(public readonly options: FormOptions<TDraft, TOriginal>) {\n    autobind(Form);\n  }\n\n  useForm(): FormContext<TDraft, TOriginal> {\n    const context = useContext(this.context);\n\n    if (!context) {\n      throw new Error('Form context not found');\n    }\n\n    return context;\n  }\n\n  useFormState<S>(\n    selector: (state: FormInstance<TDraft, TOriginal>) => S,\n    useStoreOptions?: UseStoreOptions<S>,\n  ): S {\n    const form = this.useForm();\n\n    return useStore(\n      form.formState,\n      () =>\n        selector({\n          ...form,\n          ...getDerivedState(form),\n        }),\n\n      useStoreOptions,\n    );\n  }\n\n  useField<TPath extends string>(\n    path: TPath,\n    useStoreOptions?: UseStoreOptions<any>,\n  ): Field<TDraft, TOriginal, TPath> {\n    const form = this.useForm();\n    this.useFormState((form) => [form.getField(path).value, form.original], useStoreOptions);\n    return form.getField(path);\n  }\n\n  // ///////////////////////////////////////////////////////////////////////////\n  // React Components\n  // ///////////////////////////////////////////////////////////////////////////\n\n  Form({\n    original,\n    defaultValue,\n    validations,\n    localizeError,\n    autoSave,\n    transform,\n    validatedClass,\n    ...formProps\n  }: {\n    original?: TOriginal;\n    onSubmit?: (event: FormEvent<HTMLFormElement>, form: FormInstance<TDraft, TOriginal>) => void;\n  } & Partial<FormOptions<TDraft, TOriginal>> &\n    Omit<HTMLProps<HTMLFormElement>, 'defaultValue' | 'autoSave' | 'onSubmit'>): React.JSX.Element {\n    const options: FormOptions<TDraft, TOriginal> = {\n      defaultValue: { ...this.options.defaultValue, ...defaultValue },\n      validations: { ...this.options.validations, ...validations } as Validations<\n        TDraft,\n        TOriginal\n      >,\n      localizeError: localizeError ?? this.options.localizeError,\n      autoSave: autoSave ?? this.options.autoSave,\n      transform: transform ?? this.options.transform,\n      validatedClass: validatedClass ?? this.options.validatedClass,\n    };\n\n    const formState = useMemo(() => {\n      return createStore<FormState<TDraft>>({\n        draft: undefined,\n        hasTriggeredValidations: false,\n        saveScheduled: false,\n        saveInProgress: false,\n      });\n    }, []);\n\n    let lastDraft: TDraft | undefined;\n    const cache = new Map<string, unknown>();\n    function lazy<T>(key: string, fn: () => T): T {\n      if (lastDraft !== formState.get().draft) {\n        cache.clear();\n        lastDraft = formState.get().draft;\n      }\n\n      let value = cache.get(key);\n      if (!cache.has(key)) {\n        value = fn();\n        cache.set(key, value);\n      }\n\n      return value as T;\n    }\n\n    const context: FormContext<TDraft, TOriginal> = {\n      formState,\n      options,\n      original,\n\n      getField() {\n        throw new Error('Not implemented');\n      },\n\n      getDraft() {\n        return formState.get().draft ?? original ?? options.defaultValue;\n      },\n\n      hasTriggeredValidations() {\n        return formState.get().hasTriggeredValidations;\n      },\n\n      saveScheduled() {\n        return formState.get().saveScheduled;\n      },\n\n      saveInProgress() {\n        return formState.get().saveInProgress;\n      },\n\n      hasChanges() {\n        return lazy(\n          'hasChanges',\n          () => !deepEqual(this.getDraft(), original ?? options.defaultValue),\n        );\n      },\n\n      getErrors() {\n        return lazy('getErrors', () => getErrors(this.getDraft(), original, options.validations));\n      },\n\n      isValid() {\n        return lazy('isValid', () => this.getErrors().size === 0);\n      },\n\n      validate() {\n        formState.set('hasTriggeredValidations', true);\n        return this.isValid();\n      },\n\n      reset() {\n        formState.set('draft', undefined);\n        formState.set('hasTriggeredValidations', false);\n      },\n    };\n\n    context.getField = (path) => lazy(path, () => getField(context, path));\n\n    // useEffect(() => {\n    //   const handles = options.transform?.map(({ trigger, update }) => {\n    //     const draft = derivedState.map('draft');\n    //     const triggerStore = trigger ? draft.map(trigger as any) : draft;\n\n    //     return triggerStore.subscribe(() => {\n    //       const value = trigger ? get(draft.get(), trigger as any) : draft.get();\n    //       const result = update(value as any, draft);\n\n    //       if (result !== undefined) {\n    //         draft.set(result);\n    //       }\n    //     });\n    //   });\n\n    //   return () => {\n    //     handles?.forEach((handle) => handle());\n    //   };\n    // }, [original,options.transform]);\n\n    useFormAutosave(context);\n\n    return (\n      <this.context.Provider value={context}>\n        <FormContainer {...formProps} form={this} />\n      </this.context.Provider>\n    );\n  }\n\n  FormState<S>({\n    selector,\n    children,\n  }: {\n    selector: (form: FormInstance<TDraft, TOriginal>) => S;\n    children: (selectedState: S) => ReactNode;\n  }): React.JSX.Element {\n    const selectedState = this.useFormState(selector);\n    return <>{children(selectedState)}</>;\n  }\n\n  Field<const TPath extends string>(\n    props: FormFieldPropsWithRender<TDraft, TOriginal, TPath>,\n  ): React.JSX.Element;\n\n  Field<const TPath extends string, const TComponent extends FormFieldComponent = 'input'>(\n    props: FormFieldPropsWithComponent<TDraft, TOriginal, TPath, TComponent>,\n  ): React.JSX.Element;\n\n  Field(props: any): React.JSX.Element {\n    return Reflect.apply(FormField, this, [{ component: 'input', ...props }]);\n  }\n\n  ForEach<const TPath extends string>(props: FormForEachProps<TDraft, TPath>): React.JSX.Element {\n    return Reflect.apply(FormForEach, this, [props]);\n  }\n\n  withForm<TProps extends Record<string, unknown>>(\n    Component: React.ComponentType<TProps>,\n    formProps?: Parameters<this['Form']>[0],\n  ): FunctionComponent<TProps> {\n    const { Form } = this;\n    return function FormWrapper(props: TProps) {\n      return (\n        <Form {...formProps}>\n          <Component {...props} />\n        </Form>\n      );\n    };\n  }\n}\n\nexport function createForm<TDraft, TOriginal extends TDraft = TDraft>(\n  options: FormOptions<TDraft, TOriginal>,\n): Form<TDraft, TOriginal> {\n  return new Form(options);\n}\n","import React, { createContext, useContext, type Context, type ReactNode } from 'react';\n\nexport type Location = string | { pathname: string; search: string; hash: string };\n\nexport interface UrlContextType {\n  location: Location;\n  navigate: (navigate: (from: Location) => string) => void;\n}\n\nexport type UrlContextProviderProps = { children?: ReactNode } & (\n  | { location: UrlContextType['location'] }\n  | { locationHook: () => UrlContextType['location'] }\n) &\n  ({ navigate: UrlContextType['navigate'] } | { navigateHook: () => UrlContextType['navigate'] });\n\nexport const UrlContext: Context<UrlContextType | undefined> = createContext<\n  UrlContextType | undefined\n>(undefined);\n\nexport function UrlProvider({ children, ...props }: UrlContextProviderProps): React.JSX.Element {\n  const location = 'location' in props ? props.location : props.locationHook();\n  const navigate = 'navigate' in props ? props.navigate : props.navigateHook();\n\n  return <UrlContext.Provider value={{ location, navigate }}>{children}</UrlContext.Provider>;\n}\n\nexport function useUrlContext(): UrlContextType {\n  const context = useContext(UrlContext);\n  if (!context) {\n    throw new Error('useUrlContext must be used within a UrlContextProvider');\n  }\n  return context;\n}\n","import { fromExtendedJsonString, toExtendedJsonString } from '@lib/extendedJson';\nimport type { Location } from '@react/url/urlContext';\n\nexport function defaultDeserializer<T>(value: string): T {\n  if (value === undefined) {\n    return undefined as T;\n  }\n\n  try {\n    return fromExtendedJsonString(value) as T;\n  } catch {\n    return undefined as T;\n  }\n}\n\nexport function defaultSerializer<T>(value: T): string {\n  return toExtendedJsonString(value);\n}\n\nexport function parseLocation(location: Location): URL {\n  if (typeof location !== 'string') {\n    location = `${location.pathname}${location.search}${location.hash}`;\n  }\n\n  return new URL(location, window.location.origin);\n}\n\nexport function createStorageKey(id: string, key: string) {\n  return `cross-state:url:${id}:${key}`;\n}\n","import { defaultDeserializer, defaultSerializer } from '@react/url/urlHelpers';\n\nexport interface UrlOptions<T> {\n  key: string;\n  type?: 'search' | 'hash';\n  serialize?: (value: T) => string;\n  deserialize?: (value: string) => T;\n  defaultValue: T;\n  writeDefaultValue?: boolean;\n  onCommit?: (value: T) => void;\n  persist?: { id: string } | null;\n}\n\nexport interface UrlOptionsWithoutDefaults<T>\n  extends Omit<UrlOptions<T | undefined>, 'defaultValue'> {\n  defaultValue?: T | undefined;\n}\n\nexport function createUrlOptions<T>(options: UrlOptions<T>): Required<UrlOptions<T>>;\nexport function createUrlOptions<T>(\n  options: UrlOptionsWithoutDefaults<T>,\n): Required<UrlOptions<T | undefined>>;\nexport function createUrlOptions<T>({\n  key,\n  type = 'hash',\n  serialize = defaultSerializer,\n  deserialize = defaultDeserializer,\n  defaultValue = undefined as T,\n  writeDefaultValue = false,\n  onCommit = () => undefined,\n  persist = null,\n}: UrlOptionsWithoutDefaults<T>): Required<UrlOptionsWithoutDefaults<T>> {\n  return {\n    key,\n    type,\n    serialize,\n    deserialize,\n    defaultValue,\n    writeDefaultValue,\n    onCommit,\n    persist,\n  };\n}\n","import type { Update, UpdateFunction } from '@core';\nimport { useUrlContext } from '@react/url/urlContext';\nimport { createStorageKey, parseLocation } from '@react/url/urlHelpers';\nimport {\n  createUrlOptions,\n  type UrlOptions,\n  type UrlOptionsWithoutDefaults,\n} from '@react/url/urlOptions';\nimport type { UrlStore } from '@react/url/urlStore';\nimport { useEffect, useMemo } from 'react';\n\nexport function useUrlParam<T>(store: UrlStore<T>): [T, update: UpdateFunction<T>];\nexport function useUrlParam<T>(options: UrlOptions<T>): [T, update: UpdateFunction<T>];\nexport function useUrlParam<T>(\n  options: UrlOptionsWithoutDefaults<T>,\n): [T | undefined, update: UpdateFunction<T | undefined>];\nexport function useUrlParam<T>(\n  input: UrlStore<T> | UrlOptionsWithoutDefaults<T>,\n): [T, update: UpdateFunction<T>] {\n  const { key, type, serialize, deserialize, defaultValue, writeDefaultValue, onCommit, persist } =\n    createUrlOptions('options' in input ? input.options : (input as UrlOptions<T>));\n\n  const { location, navigate } = useUrlContext();\n  const url = parseLocation(location);\n  const params = new URLSearchParams(url[type].slice(1));\n  const urlValue = params.get(key);\n\n  const storageKey = persist && createStorageKey(persist.id, key);\n  const storageValue = storageKey ? localStorage.getItem(storageKey) : null;\n\n  const value = useMemo(\n    () =>\n      urlValue !== null\n        ? deserialize(urlValue)\n        : storageValue !== null\n          ? deserialize(storageValue)\n          : defaultValue,\n    [urlValue],\n  );\n\n  function commit(value: T) {\n    const serializedValue = serialize(value);\n\n    navigate((location) => {\n      const url = parseLocation(location);\n      const params = new URLSearchParams(url[type].slice(1));\n\n      if (!writeDefaultValue && serializedValue === serialize(defaultValue)) {\n        params.delete(key);\n      } else {\n        params.set(key, serializedValue);\n      }\n\n      url[type] = params.toString();\n      return url.toString().replace(window.location.origin, '');\n    });\n\n    if (storageKey) {\n      localStorage.setItem(storageKey, serializedValue);\n    }\n\n    onCommit?.(value);\n  }\n\n  function update(update: Update<T>) {\n    if (update instanceof Function) {\n      update = update(value);\n    }\n\n    commit(update);\n  }\n\n  useEffect(() => {\n    if (urlValue !== null) {\n      commit(deserialize(urlValue));\n    }\n  }, [urlValue]);\n\n  useEffect(() => {\n    if (urlValue === null && storageValue !== null) {\n      commit(deserialize(storageValue));\n    } else if (urlValue === null && writeDefaultValue) {\n      commit(defaultValue);\n    }\n  }, []);\n\n  return [value, update];\n}\n","import type { Location } from '@react/url/urlContext';\nimport { parseLocation } from '@react/url/urlHelpers';\nimport {\n  createUrlOptions,\n  type UrlOptions,\n  type UrlOptionsWithoutDefaults,\n} from '@react/url/urlOptions';\nimport { useUrlParam } from '@react/url/useUrlParam';\n\nexport class UrlStore<T> {\n  constructor(public readonly options: Required<UrlOptions<T>>) {}\n\n  useStore(): T {\n    return useUrlParam(this)[0];\n  }\n\n  useProp(): [T, update: (value: T) => void] {\n    return useUrlParam(this);\n  }\n\n  parse(location: Location): T | undefined {\n    const url = parseLocation(location);\n    const params = new URLSearchParams(url[this.options.type].slice(1));\n    const urlValue = params.get(this.options.key);\n    return urlValue !== null ? this.options.deserialize(urlValue) : undefined;\n  }\n}\nexport function createUrlStore<T>(options: UrlOptions<T>): UrlStore<T>;\nexport function createUrlStore<T>(options: UrlOptionsWithoutDefaults<T>): UrlStore<T | undefined>;\nexport function createUrlStore<T>(options: UrlOptionsWithoutDefaults<T>) {\n  return new UrlStore(createUrlOptions(options));\n}\n","import { startTransition, useEffect, useMemo, useRef, useState } from 'react';\nimport { type Duration } from '@core';\nimport { debounce } from '@lib/debounce';\nimport { simpleHash } from '@lib/hash';\nimport { throttle } from '@lib/throttle';\n\nexport interface UseDecoupledStateOptions<T> {\n  debounce?: Duration;\n  throttle?: Duration;\n  onCommit?: (value: T) => void;\n}\n\nexport function useDecoupledState<T>(\n  value: T,\n  onChange: (value: T) => void,\n  options: UseDecoupledStateOptions<T> = {},\n): [state: T, setState: (value: T) => void] {\n  const [dirty, setDirty] = useState<{ v: T }>();\n  const ref = useRef({ onChange, onCommit: options.onCommit });\n\n  useEffect(() => {\n    ref.current = { onChange, onCommit: options.onCommit };\n  }, [onChange]);\n\n  const update = useMemo(() => {\n    const { onChange, onCommit } = ref.current;\n\n    const update = (value: T) => {\n      onChange(value);\n      setDirty(undefined);\n      onCommit?.(value);\n    };\n\n    let delayedUpdate: (value: T) => void;\n\n    if (options.debounce) {\n      delayedUpdate = debounce(update, options.debounce);\n    } else if (options.throttle) {\n      delayedUpdate = throttle(update, options.throttle);\n    } else {\n      delayedUpdate = (value) => startTransition(() => update(value));\n    }\n\n    return (value: T) => {\n      setDirty({ v: value });\n      delayedUpdate(value);\n    };\n  }, [simpleHash([options.debounce, options.throttle])]);\n\n  return [dirty ? dirty.v : value, update];\n}\n"],"mappings":"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"}

package/dist/react/index.d.cts

@@ -1,6 +1,6 @@
 import "../scope-DO5vpLPV.cjs";
 import { Constrain, Duration, GetKeys, Join, MaybePromise, Object_, Path as Path$1, PathAsString, Selector, Store, Update, UpdateFunction, Value, WildcardPathAsString, WildcardValue } from "../store-BEsiS8y7.cjs";
-import { ScopeProps, ScopeProvider, UseCacheArray, UseCacheValue, UseStoreOptions, cacheMethods, scopeMethods, storeMethods, useCache, useScope, useStore } from "../storeMethods-BQwU2Uia.cjs";
+import { ScopeProps, ScopeProvider, UseCacheArray, UseCacheValue, UseStoreOptions, cacheMethods, scopeMethods, storeMethods, useCache, useScope, useStore } from "../storeMethods-DIyKFgk1.cjs";
 import React$1, { Component, ComponentPropsWithoutRef, Context, FormEvent, FunctionComponent, HTMLProps, ReactNode } from "react";
 
 //#region src/react/form/customInput.d.ts
@@ -265,20 +265,21 @@ interface UrlOptions<T> {
   onCommit?: (value: T) => void;
   persist?: {
     id: string;
-  };
+  } | null;
 }
 interface UrlOptionsWithoutDefaults<T> extends Omit<UrlOptions<T | undefined>, "defaultValue"> {
   defaultValue?: T | undefined;
 }
-declare function createUrlOptions<T>(options: UrlOptions<T>): UrlOptions<T>;
-declare function createUrlOptions<T>(options: UrlOptionsWithoutDefaults<T>): UrlOptions<T | undefined>;
+declare function createUrlOptions<T>(options: UrlOptions<T>): Required<UrlOptions<T>>;
+declare function createUrlOptions<T>(options: UrlOptionsWithoutDefaults<T>): Required<UrlOptions<T | undefined>>;
 //#endregion
 //#region src/react/url/urlStore.d.ts
 declare class UrlStore<T> {
-  readonly options: UrlOptions<T>;
-  constructor(options: UrlOptions<T>);
+  readonly options: Required<UrlOptions<T>>;
+  constructor(options: Required<UrlOptions<T>>);
   useStore(): T;
   useProp(): [T, update: (value: T) => void];
+  parse(location: Location): T | undefined;
 }
 declare function createUrlStore<T>(options: UrlOptions<T>): UrlStore<T>;
 declare function createUrlStore<T>(options: UrlOptionsWithoutDefaults<T>): UrlStore<T | undefined>;

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 import "../scope-DI1OFHcr.js";
 import { Constrain, Duration, GetKeys, Join, MaybePromise, Object_, Path as Path$1, PathAsString, Selector, Store, Update, UpdateFunction, Value, WildcardPathAsString, WildcardValue } from "../store-DKaeE840.js";
-import { ScopeProps, ScopeProvider, UseCacheArray, UseCacheValue, UseStoreOptions, cacheMethods, scopeMethods, storeMethods, useCache, useScope, useStore } from "../storeMethods-C4luym7C.js";
+import { ScopeProps, ScopeProvider, UseCacheArray, UseCacheValue, UseStoreOptions, cacheMethods, scopeMethods, storeMethods, useCache, useScope, useStore } from "../storeMethods-BjOAF4Pk.js";
 import React$1, { Component, ComponentPropsWithoutRef, Context, FormEvent, FunctionComponent, HTMLProps, ReactNode } from "react";
 
 //#region src/react/form/customInput.d.ts
@@ -265,20 +265,21 @@ interface UrlOptions<T> {
   onCommit?: (value: T) => void;
   persist?: {
     id: string;
-  };
+  } | null;
 }
 interface UrlOptionsWithoutDefaults<T> extends Omit<UrlOptions<T | undefined>, "defaultValue"> {
   defaultValue?: T | undefined;
 }
-declare function createUrlOptions<T>(options: UrlOptions<T>): UrlOptions<T>;
-declare function createUrlOptions<T>(options: UrlOptionsWithoutDefaults<T>): UrlOptions<T | undefined>;
+declare function createUrlOptions<T>(options: UrlOptions<T>): Required<UrlOptions<T>>;
+declare function createUrlOptions<T>(options: UrlOptionsWithoutDefaults<T>): Required<UrlOptions<T | undefined>>;
 //#endregion
 //#region src/react/url/urlStore.d.ts
 declare class UrlStore<T> {
-  readonly options: UrlOptions<T>;
-  constructor(options: UrlOptions<T>);
+  readonly options: Required<UrlOptions<T>>;
+  constructor(options: Required<UrlOptions<T>>);
   useStore(): T;
   useProp(): [T, update: (value: T) => void];
+  parse(location: Location): T | undefined;
 }
 declare function createUrlStore<T>(options: UrlOptions<T>): UrlStore<T>;
 declare function createUrlStore<T>(options: UrlOptionsWithoutDefaults<T>): UrlStore<T | undefined>;

package/dist/react/index.js

@@ -467,15 +467,6 @@ function useUrlContext() {
 	return context;
 }
 
-//#endregion
-//#region src/react/url/urlOptions.ts
-function createUrlOptions(options) {
-	return {
-		...options,
-		defaultValue: options.defaultValue
-	};
-}
-
 //#endregion
 //#region src/react/url/urlHelpers.ts
 function defaultDeserializer(value) {
@@ -497,10 +488,25 @@ function createStorageKey(id, key) {
 	return `cross-state:url:${id}:${key}`;
 }
 
+//#endregion
+//#region src/react/url/urlOptions.ts
+function createUrlOptions({ key, type = "hash", serialize = defaultSerializer, deserialize = defaultDeserializer, defaultValue = void 0, writeDefaultValue = false, onCommit = () => void 0, persist = null }) {
+	return {
+		key,
+		type,
+		serialize,
+		deserialize,
+		defaultValue,
+		writeDefaultValue,
+		onCommit,
+		persist
+	};
+}
+
 //#endregion
 //#region src/react/url/useUrlParam.ts
 function useUrlParam(input) {
-	const { key, type = "hash", serialize = defaultSerializer, deserialize = defaultDeserializer, defaultValue, writeDefaultValue, onCommit, persist } = "options" in input ? input.options : input;
+	const { key, type, serialize, deserialize, defaultValue, writeDefaultValue, onCommit, persist } = createUrlOptions("options" in input ? input.options : input);
 	const { location, navigate } = useUrlContext();
 	const url = parseLocation(location);
 	const params = new URLSearchParams(url[type].slice(1));
@@ -547,6 +553,12 @@ var UrlStore = class {
 	useProp() {
 		return useUrlParam(this);
 	}
+	parse(location) {
+		const url = parseLocation(location);
+		const params = new URLSearchParams(url[this.options.type].slice(1));
+		const urlValue = params.get(this.options.key);
+		return urlValue !== null ? this.options.deserialize(urlValue) : void 0;
+	}
 };
 function createUrlStore(options) {
 	return new UrlStore(createUrlOptions(options));