@alexcarpenter/form 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Change Log
+
+## 0.1.0
+
+* Initial release.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Alex Carpenter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,277 @@
+# Nano Stores Form
+
+Tiny headless forms for [Nano Stores](https://github.com/nanostores/nanostores).
+
+* **Small.** One core entrypoint and no runtime dependencies except Nano Stores.
+* **Nano Stores native.** A form is a store with `get()`, `listen()`,
+  `subscribe()`, and form actions.
+* **Headless.** Use it with React, Preact, Vue, Svelte, Solid, or vanilla JS.
+* **Flat by design.** Field names are top-level keys. Schema adapters and
+  framework helpers can live in separate entrypoints later.
+
+```js
+import { form } from '@alexcarpenter/form'
+
+export const $login = form({
+  email: '',
+  password: ''
+}, {
+  validate: ({ values }) => ({
+    email: values.email.includes('@') ? undefined : 'Invalid email',
+    password: values.password ? undefined : 'Required'
+  }),
+  onSubmit: async ({ values }) => {
+    await api.login(values)
+  }
+})
+
+$login.setValue('email', 'alex@example.com')
+await $login.handleSubmit()
+```
+
+## Install
+
+```sh
+pnpm add nanostores @alexcarpenter/form
+```
+
+## Guide
+
+### TanStack-style config
+
+If you prefer the TanStack Form shape, use `createForm()` with
+`defaultValues` and `validators`.
+
+```js
+import { createForm } from '@alexcarpenter/form'
+
+export const $login = createForm({
+  defaultValues: {
+    email: '',
+    password: ''
+  },
+  validators: {
+    onChange: ({ values }) => ({
+      email: values.email.includes('@') ? undefined : 'Invalid email'
+    }),
+    onChangeAsync: async ({ value }) => {
+      if (value && !(await api.isEmailAvailable(value))) return 'Email is taken'
+    },
+    onSubmit: ({ values }) => ({
+      password: values.password ? undefined : 'Required'
+    })
+  },
+  onChangeAsyncDebounceMs: 300,
+  onSubmit: async ({ values }) => {
+    await api.login(values)
+  }
+})
+```
+
+`form(defaultValues, opts)` is kept as the smaller direct style.
+
+### Form state
+
+```js
+$form.get()
+//=> {
+//=>   values: { email: '' },
+//=>   errors: {},
+//=>   touched: {},
+//=>   dirty: {},
+//=>   isSubmitting: false,
+//=>   isValidating: false,
+//=>   submitCount: 0,
+//=>   canSubmit: true
+//=> }
+```
+
+### Validation
+
+A validator receives the form values. Return an object of field errors for form
+validation.
+
+```js
+const $form = form({ email: '' }, {
+  validate: ({ values }) => ({
+    email: values.email ? undefined : 'Required'
+  })
+})
+
+await $form.validate()
+```
+
+When a single field is validated, `field` and `value` are provided. Return the
+field error directly.
+
+```js
+const $form = form({ email: '' }, {
+  validate: ({ field, value }) => {
+    if (field === 'email' && !value) return 'Required'
+  }
+})
+
+await $form.validate('email', 'blur')
+```
+
+Validators can be async. Late async results are ignored if a newer validation
+started first. TanStack-style `onChangeAsync`, `onBlurAsync`, and
+`onSubmitAsync` validators are also supported, with
+`onChangeAsyncDebounceMs`, `onBlurAsyncDebounceMs`, `onSubmitAsyncDebounceMs`,
+or shared `asyncDebounceMs` options.
+
+```js
+const $form = form({ username: '' }, {
+  validate: async ({ field, value }) => {
+    if (field === 'username') {
+      let available = await api.isUsernameAvailable(value)
+      if (!available) return 'Username is taken'
+    }
+  }
+})
+```
+
+### Fields
+
+Fields are created lazily and are backed by the form store.
+
+```js
+const email = $form.field('email')
+
+email.set('alex@example.com')
+await email.blur()
+
+email.get()
+//=> {
+//=>   name: 'email',
+//=>   value: 'alex@example.com',
+//=>   errors: [],
+//=>   touched: true,
+//=>   dirty: true
+//=> }
+```
+
+### Submit
+
+```js
+const $form = form({ email: '' }, {
+  validate: ({ values }) => ({
+    email: values.email ? undefined : 'Required'
+  }),
+  onSubmit: async ({ values }) => {
+    await fetch('/login', {
+      body: JSON.stringify(values),
+      method: 'POST'
+    })
+  }
+})
+
+let ok = await $form.handleSubmit()
+```
+
+`handleSubmit(event?)` prevents the event default when provided, touches all
+fields, validates the form, and only calls `onSubmit` when valid.
+
+```js
+$form.resetField('email')
+await $form.validateField('email')
+```
+
+## Optional modules
+
+Optional features live in separate entrypoints so they are not included by
+core imports.
+
+### Standard Schema
+
+Use any validator that supports Standard Schema, such as Zod or Valibot.
+
+```js
+import { standardSchema } from '@alexcarpenter/form/standard-schema'
+
+const $form = form({ email: '' }, {
+  validate: standardSchema(schema)
+})
+```
+
+### Debounce
+
+```js
+import { debounce } from '@alexcarpenter/form/debounce'
+
+const username = debounce($form.field('username'), 300)
+
+username.set('alex')
+username.cancel()
+username.flush()
+```
+
+### Path
+
+```js
+import { path } from '@alexcarpenter/form/path'
+
+const email = path($form, 'user.email')
+email.set('alex@example.com')
+```
+
+### Array
+
+```js
+import { array } from '@alexcarpenter/form/array'
+
+const items = array($form, 'items')
+items.push({ title: '' })
+items.insert(0, { title: 'First' })
+items.replace(0, { title: 'Updated' })
+items.move(0, 1)
+items.swap(0, 1)
+items.remove(0)
+```
+
+### Select
+
+Create a small derived store for a slice of form state. Useful for React when a
+component should re-render only for one value.
+
+```js
+import { select } from '@alexcarpenter/form/select'
+
+const $canSubmit = select($form, form => form.canSubmit)
+const $email = select($form, form => form.values.email)
+```
+
+### Debug
+
+```js
+import { debug } from '@alexcarpenter/form/debug'
+
+let stop = debug($form, { name: 'login' })
+```
+
+### React
+
+Use the normal Nano Stores React binding:
+
+```tsx
+import { useStore } from '@nanostores/react'
+import { select } from '@alexcarpenter/form/select'
+import { $login } from './stores/login'
+
+const $canSubmit = select($login, form => form.canSubmit)
+
+export function LoginForm() {
+  let canSubmit = useStore($canSubmit)
+  let email = useStore($login.field('email').$state)
+
+  return <form onSubmit={$login.handleSubmit}>
+    <input
+      value={email.value}
+      onBlur={() => $login.field('email').handleBlur()}
+      onInput={event => $login.field('email').handleChange(event.currentTarget.value)}
+    />
+    {email.errors[0]}
+    <button disabled={!canSubmit}>Submit</button>
+  </form>
+}
+```

package/array/index.d.ts

@@ -0,0 +1,24 @@
+import type { FieldName, FormStore } from '../index.js'
+
+type ArrayName<Values> = {
+  [Name in FieldName<Values>]: Values[Name] extends unknown[] ? Name : never
+}[FieldName<Values>]
+
+type Item<Value> = Value extends (infer Child)[] ? Child : never
+
+export interface ArrayField<Items extends unknown[]> {
+  name: string
+  get(): Items
+  set(value: Items): void | Promise<boolean>
+  push(item: Item<Items>): void | Promise<boolean>
+  insert(index: number, item: Item<Items>): void | Promise<boolean>
+  remove(index: number): void | Promise<boolean>
+  replace(index: number, item: Item<Items>): void | Promise<boolean>
+  move(from: number, to: number): void | Promise<boolean>
+  swap(left: number, right: number): void | Promise<boolean>
+}
+
+export function array<
+  Values extends Record<string, any>,
+  Name extends ArrayName<Values>
+>(form: FormStore<Values>, name: Name): ArrayField<Values[Name]>

package/array/index.js

@@ -0,0 +1,37 @@
+export let array = ($form, name) => {
+  let get = () => $form.get().values[name] || []
+  let set = value => $form.setValue(name, value)
+  return {
+    get,
+    insert: (index, item) => {
+      let value = get().slice()
+      value.splice(index, 0, item)
+      return set(value)
+    },
+    move: (from, to) => {
+      let value = get().slice()
+      value.splice(to, 0, value.splice(from, 1)[0])
+      return set(value)
+    },
+    name,
+    push: item => set(get().concat([item])),
+    remove: index => {
+      let value = get().slice()
+      value.splice(index, 1)
+      return set(value)
+    },
+    replace: (index, item) => {
+      let value = get().slice()
+      value[index] = item
+      return set(value)
+    },
+    set,
+    swap: (left, right) => {
+      let value = get().slice()
+      let item = value[left]
+      value[left] = value[right]
+      value[right] = item
+      return set(value)
+    }
+  }
+}

package/debounce/index.d.ts

@@ -0,0 +1,14 @@
+import type { FieldStore } from '../index.js'
+
+export interface DebouncedField<
+  Values extends Record<string, any>,
+  Name extends Extract<keyof Values, string>
+> extends FieldStore<Values, Name> {
+  cancel(): void
+  flush(): void | Promise<boolean>
+}
+
+export function debounce<
+  Values extends Record<string, any>,
+  Name extends Extract<keyof Values, string>
+>(field: FieldStore<Values, Name>, delay: number): DebouncedField<Values, Name>

package/debounce/index.js

@@ -0,0 +1,21 @@
+export let debounce = (field, delay) => {
+  let timer
+  let value
+  let cancel = () => clearTimeout(timer)
+  let flush = () => {
+    cancel()
+    return field.set(value)
+  }
+  let run = nextValue => {
+    value = nextValue
+    cancel()
+    timer = setTimeout(flush, delay)
+  }
+  return {
+    ...field,
+    cancel,
+    change: run,
+    flush,
+    set: run
+  }
+}

package/debug/index.d.ts

@@ -0,0 +1,10 @@
+import type { FormStore } from '../index.js'
+
+export interface DebugOptions {
+  name?: string
+}
+
+export function debug<Values extends Record<string, any>>(
+  form: FormStore<Values>,
+  opts?: DebugOptions
+): () => void

package/debug/index.js

@@ -0,0 +1,15 @@
+export let debug = ($form, opts = {}) => {
+  let name = opts.name || 'form'
+  let previous = $form.get()
+  return $form.listen(snapshot => {
+    if (snapshot.submitCount !== previous.submitCount) {
+      console.log(`[${name}] submit`)
+    }
+    for (let field in snapshot.values) {
+      if (!Object.is(snapshot.values[field], previous.values[field])) {
+        console.log(`[${name}] ${field} change`)
+      }
+    }
+    previous = snapshot
+  })
+}

package/index.d.ts

@@ -0,0 +1,120 @@
+import type { ReadableAtom, WritableAtom } from 'nanostores'
+
+export type FieldName<Values> = Extract<keyof Values, string>
+export type MaybePromise<Value> = Value | Promise<Value>
+export type FieldError = string
+export type FieldErrors = FieldError[]
+export type FormErrors<Values> = Partial<Record<FieldName<Values>, FieldError | FieldErrors | undefined>>
+export type ValidationCause = 'change' | 'blur' | 'submit'
+
+export interface FormSnapshot<Values extends Record<string, any>> {
+  values: Values
+  errors: Partial<Record<FieldName<Values>, FieldErrors>>
+  touched: Partial<Record<FieldName<Values>, boolean>>
+  dirty: Partial<Record<FieldName<Values>, boolean>>
+  isSubmitting: boolean
+  isValidating: boolean
+  submitCount: number
+  canSubmit: boolean
+}
+
+export interface ValidateArgs<
+  Values extends Record<string, any>,
+  Name extends FieldName<Values> | undefined = FieldName<Values> | undefined
+> {
+  cause: ValidationCause
+  field: Name
+  form: FormStore<Values>
+  value: Name extends FieldName<Values> ? Values[Name] : undefined
+  values: Values
+}
+
+export type FormValidate<Values extends Record<string, any>> = (
+  args: ValidateArgs<Values>
+) => MaybePromise<FormErrors<Values> | FieldError | FieldErrors | void>
+
+export type ValidatorName =
+  | 'onChange'
+  | 'onBlur'
+  | 'onSubmit'
+  | 'onChangeAsync'
+  | 'onBlurAsync'
+  | 'onSubmitAsync'
+
+export interface FormOptions<Values extends Record<string, any>> {
+  validate?: FormValidate<Values>
+  validators?: Partial<Record<ValidatorName, FormValidate<Values>>>
+  asyncDebounceMs?: number
+  onChangeAsyncDebounceMs?: number
+  onBlurAsyncDebounceMs?: number
+  onSubmitAsyncDebounceMs?: number
+  onSubmit?: (args: { form: FormStore<Values>; values: Values }) => MaybePromise<void>
+}
+
+export interface FormConfig<Values extends Record<string, any>>
+  extends FormOptions<Values> {
+  defaultValues: Values
+}
+
+export interface FieldSnapshot<
+  Values extends Record<string, any>,
+  Name extends FieldName<Values>
+> {
+  name: Name
+  value: Values[Name]
+  errors: FieldErrors
+  touched: boolean
+  dirty: boolean
+}
+
+export interface FieldStore<
+  Values extends Record<string, any>,
+  Name extends FieldName<Values>
+> {
+  $field: ReadableAtom<FieldSnapshot<Values, Name>>
+  $state: ReadableAtom<FieldSnapshot<Values, Name>>
+  name: Name
+  get(): FieldSnapshot<Values, Name>
+  set(value: Values[Name]): void | Promise<boolean>
+  setValue(value: Values[Name]): void | Promise<boolean>
+  change(value: Values[Name]): void | Promise<boolean>
+  handleChange(value: Values[Name]): void | Promise<boolean>
+  blur(): Promise<boolean>
+  handleBlur(): Promise<boolean>
+  validate(cause?: ValidationCause): Promise<boolean>
+}
+
+export interface FormStore<Values extends Record<string, any>>
+  extends WritableAtom<FormSnapshot<Values>> {
+  setValue<Name extends FieldName<Values>>(
+    name: Name,
+    value: Values[Name],
+    validate?: boolean
+  ): void | Promise<boolean>
+  setValues(values: Partial<Values>, validate?: boolean): void | Promise<boolean>
+  setError<Name extends FieldName<Values>>(
+    name: Name,
+    error: FieldError | FieldErrors | undefined
+  ): void
+  touch<Name extends FieldName<Values>>(name: Name): void
+  validate<Name extends FieldName<Values>>(
+    name?: Name,
+    cause?: ValidationCause
+  ): Promise<boolean>
+  validateField<Name extends FieldName<Values>>(name: Name): Promise<boolean>
+  handleSubmit(event?: { preventDefault?(): void }): Promise<boolean>
+  reset(values?: Values): void
+  resetField<Name extends FieldName<Values>>(name: Name): void
+  field<Name extends FieldName<Values>>(name: Name): FieldStore<Values, Name>
+}
+
+export function form<Values extends Record<string, any>>(
+  config: FormConfig<Values>
+): FormStore<Values>
+
+export function form<Values extends Record<string, any>>(
+  defaultValues: Values,
+  opts?: FormOptions<Values>
+): FormStore<Values>
+
+export const createForm: typeof form

package/index.js

@@ -0,0 +1,205 @@
+import { atom, onMount } from 'nanostores'
+
+let list = value => (Array.isArray(value) ? value : value == null ? [] : [value])
+let hasErrors = errors => {
+  for (let name in errors) if (errors[name]?.length) return true
+  return false
+}
+let cleanErrors = errors => {
+  let next = {}
+  for (let name in errors || {}) {
+    let value = list(errors[name]).filter(Boolean)
+    if (value.length) next[name] = value
+  }
+  return next
+}
+let fieldSnapshot = (snapshot, name) => ({
+  dirty: !!snapshot.dirty[name],
+  errors: snapshot.errors[name] || [],
+  name,
+  touched: !!snapshot.touched[name],
+  value: snapshot.values[name]
+})
+let withCanSubmit = snapshot => ({
+  ...snapshot,
+  canSubmit:
+    !snapshot.isSubmitting && !snapshot.isValidating && !hasErrors(snapshot.errors)
+})
+let validatorName = cause =>
+  cause === 'change' ? 'onChange' : cause === 'blur' ? 'onBlur' : 'onSubmit'
+
+/* @__NO_SIDE_EFFECTS__ */
+export let form = (defaultValues, opts = {}) => {
+  if (defaultValues.defaultValues) {
+    opts = defaultValues
+    defaultValues = opts.defaultValues
+  }
+  let defaults = defaultValues
+  let fields = {}
+  let validateId = 0
+  let waits = {}
+
+  let initial = () =>
+    withCanSubmit({
+      canSubmit: true,
+      dirty: {},
+      errors: {},
+      isSubmitting: false,
+      isValidating: false,
+      submitCount: 0,
+      touched: {},
+      values: { ...defaults }
+    })
+
+  let $form = atom(initial())
+
+  let set = patch => $form.set(withCanSubmit({ ...$form.get(), ...patch }))
+
+  $form.setValue = (name, value, validate = true) => {
+    let snapshot = $form.get()
+    set({
+      dirty: { ...snapshot.dirty, [name]: !Object.is(value, defaults[name]) },
+      values: { ...snapshot.values, [name]: value }
+    })
+    if (validate) return $form.validate(name, 'change')
+  }
+
+  $form.setValues = (values, validate = true) => {
+    let snapshot = $form.get()
+    let nextValues = { ...snapshot.values, ...values }
+    let dirty = { ...snapshot.dirty }
+    for (let name in values) dirty[name] = !Object.is(nextValues[name], defaults[name])
+    set({ dirty, values: nextValues })
+    if (validate) return $form.validate(undefined, 'change')
+  }
+
+  $form.setError = (name, error) => {
+    let snapshot = $form.get()
+    set({ errors: { ...snapshot.errors, [name]: list(error).filter(Boolean) } })
+  }
+
+  $form.touch = name => {
+    let snapshot = $form.get()
+    set({ touched: { ...snapshot.touched, [name]: true } })
+  }
+
+  $form.validate = async (name, cause = 'submit') => {
+    let key = validatorName(cause)
+    let validate = opts.validate || opts.validators?.[key]
+    let validateAsync = opts.validators?.[`${key}Async`]
+    if (!validate && !validateAsync) return true
+
+    let id = ++validateId
+    set({ isValidating: true })
+
+    let snapshot = $form.get()
+    let args = {
+      cause,
+      field: name,
+      form: $form,
+      value: name ? snapshot.values[name] : undefined,
+      values: snapshot.values
+    }
+    let result
+    try {
+      result = await validate?.(args)
+      if (validateAsync) {
+        let ms = opts[`${key}AsyncDebounceMs`] || opts.asyncDebounceMs
+        let waitKey = `${key}:${name || ''}`
+        if (ms) {
+          if (waits[waitKey]) {
+            clearTimeout(waits[waitKey].timer)
+            waits[waitKey].resolve(false)
+          }
+          if (!(await new Promise(resolve => {
+            waits[waitKey] = {
+              resolve,
+              timer: setTimeout(() => resolve(true), ms)
+            }
+          }))) return false
+        }
+        let next = await validateAsync(args)
+        result = name ? list(result).concat(list(next)) : { ...result, ...next }
+      }
+    } catch (error) {
+      if (id === validateId) set({ isValidating: false })
+      throw error
+    }
+
+    if (id !== validateId) return false
+
+    let errors = name
+      ? { ...$form.get().errors, [name]: list(result).filter(Boolean) }
+      : cleanErrors(result)
+
+    set({ errors, isValidating: false })
+    return !hasErrors(errors)
+  }
+
+  $form.handleSubmit = async event => {
+    event?.preventDefault?.()
+    let snapshot = $form.get()
+    let touched = { ...snapshot.touched }
+    for (let name in snapshot.values) touched[name] = true
+    set({ submitCount: snapshot.submitCount + 1, touched })
+
+    if (!(await $form.validate(undefined, 'submit'))) return false
+
+    set({ isSubmitting: true })
+    try {
+      await opts.onSubmit?.({ form: $form, values: $form.get().values })
+      return true
+    } finally {
+      set({ isSubmitting: false })
+    }
+  }
+
+  $form.reset = values => {
+    defaults = values || defaultValues
+    $form.set(initial())
+  }
+
+  $form.resetField = name => {
+    let snapshot = $form.get()
+    set({
+      dirty: { ...snapshot.dirty, [name]: false },
+      errors: { ...snapshot.errors, [name]: [] },
+      touched: { ...snapshot.touched, [name]: false },
+      values: { ...snapshot.values, [name]: defaults[name] }
+    })
+  }
+
+  $form.validateField = name => $form.validate(name)
+
+  $form.field = name => {
+    if (fields[name]) return fields[name]
+
+    let $field = atom(fieldSnapshot($form.get(), name))
+    onMount($field, () =>
+      $form.listen(snapshot => $field.set(fieldSnapshot(snapshot, name)))
+    )
+
+    fields[name] = {
+      $field,
+      $state: $field,
+      blur: () => {
+        $form.touch(name)
+        return $form.validate(name, 'blur')
+      },
+      change: value => $form.setValue(name, value),
+      get: () => fieldSnapshot($form.get(), name),
+      handleBlur: () => fields[name].blur(),
+      handleChange: value => $form.setValue(name, value),
+      name,
+      set: value => $form.setValue(name, value),
+      setValue: value => $form.setValue(name, value),
+      validate: cause => $form.validate(name, cause)
+    }
+    return fields[name]
+  }
+
+  return $form
+}
+
+/* @__NO_SIDE_EFFECTS__ */
+export let createForm = form

package/package.json

@@ -0,0 +1,145 @@
+{
+  "name": "@alexcarpenter/form",
+  "version": "0.1.0",
+  "description": "Tiny headless forms for Nano Stores",
+  "keywords": [
+    "forms",
+    "form",
+    "nanostores",
+    "state"
+  ],
+  "license": "MIT",
+  "author": "Alex Carpenter",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alexcarpenter/form.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alexcarpenter/form/issues"
+  },
+  "homepage": "https://github.com/alexcarpenter/form#readme",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "types": "./index.d.ts",
+  "files": [
+    "array",
+    "debug",
+    "debounce",
+    "index.d.ts",
+    "index.js",
+    "path",
+    "select",
+    "standard-schema",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./array": {
+      "types": "./array/index.d.ts",
+      "default": "./array/index.js"
+    },
+    "./debug": {
+      "types": "./debug/index.d.ts",
+      "default": "./debug/index.js"
+    },
+    "./debounce": {
+      "types": "./debounce/index.d.ts",
+      "default": "./debounce/index.js"
+    },
+    "./path": {
+      "types": "./path/index.d.ts",
+      "default": "./path/index.js"
+    },
+    "./select": {
+      "types": "./select/index.d.ts",
+      "default": "./select/index.js"
+    },
+    "./standard-schema": {
+      "types": "./standard-schema/index.d.ts",
+      "default": "./standard-schema/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "test": "pnpm run /^test:/",
+    "test:lint": "oxlint",
+    "test:runtime": "node --test test/*.test.js",
+    "test:size": "size-limit",
+    "test:types": "check-dts"
+  },
+  "packageManager": "pnpm@10.32.1",
+  "peerDependencies": {
+    "nanostores": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^12.0.0",
+    "check-dts": "^1.0.0",
+    "nanostores": "^1.0.0",
+    "oxlint": "^1.69.0",
+    "size-limit": "^12.0.0",
+    "typescript": "^5.0.0"
+  },
+  "size-limit": [
+    {
+      "name": "Core",
+      "import": {
+        "./index.js": "{ form }"
+      },
+      "limit": "2 KB"
+    },
+    {
+      "name": "Debug",
+      "import": {
+        "./debug/index.js": "{ debug }"
+      },
+      "limit": "250 B"
+    },
+    {
+      "name": "Debounce",
+      "import": {
+        "./debounce/index.js": "{ debounce }"
+      },
+      "limit": "250 B"
+    },
+    {
+      "name": "Select",
+      "import": {
+        "./select/index.js": "{ select }"
+      },
+      "limit": "250 B"
+    },
+    {
+      "name": "Standard Schema",
+      "import": {
+        "./standard-schema/index.js": "{ standardSchema }"
+      },
+      "limit": "350 B"
+    },
+    {
+      "name": "Path",
+      "import": {
+        "./path/index.js": "{ path }"
+      },
+      "limit": "550 B"
+    },
+    {
+      "name": "Array",
+      "import": {
+        "./array/index.js": "{ array }"
+      },
+      "limit": "350 B"
+    }
+  ]
+}

package/path/index.d.ts

@@ -0,0 +1,17 @@
+import type { FieldSnapshot, FormStore, ValidationCause } from '../index.js'
+import type { ReadableAtom } from 'nanostores'
+
+export interface PathField<Value = unknown> {
+  $field: ReadableAtom<FieldSnapshot<Record<string, Value>, string>>
+  name: string
+  get(): FieldSnapshot<Record<string, Value>, string>
+  set(value: Value): void | Promise<boolean>
+  change(value: Value): void | Promise<boolean>
+  blur(): Promise<boolean>
+  validate(cause?: ValidationCause): Promise<boolean>
+}
+
+export function path<Value = unknown>(
+  form: FormStore<any>,
+  name: string
+): PathField<Value>

package/path/index.js

@@ -0,0 +1,44 @@
+import { atom, onMount } from 'nanostores'
+
+let parts = path => path.split('.')
+let get = (value, path) => {
+  for (let key of parts(path)) value = value?.[key]
+  return value
+}
+let set = (object, path, value) => {
+  let keys = parts(path)
+  let root = { ...object }
+  let next = root
+  for (let i = 0; i < keys.length - 1; i++) {
+    next = next[keys[i]] = { ...next[keys[i]] }
+  }
+  next[keys[keys.length - 1]] = value
+  return root
+}
+let snapshot = ($form, name) => {
+  let form = $form.get()
+  return {
+    dirty: !!form.dirty[name],
+    errors: form.errors[name] || [],
+    name,
+    touched: !!form.touched[name],
+    value: get(form.values, name)
+  }
+}
+
+export let path = ($form, name) => {
+  let $field = atom(snapshot($form, name))
+  onMount($field, () => $form.listen(() => $field.set(snapshot($form, name))))
+  return {
+    $field,
+    blur: () => {
+      $form.touch(name)
+      return $form.validate(name, 'blur')
+    },
+    change: value => $form.setValues(set($form.get().values, name, value)),
+    get: () => snapshot($form, name),
+    name,
+    set: value => $form.setValues(set($form.get().values, name, value)),
+    validate: cause => $form.validate(name, cause)
+  }
+}

package/select/index.d.ts

@@ -0,0 +1,7 @@
+import type { ReadableAtom } from 'nanostores'
+
+export function select<Value, Slice>(
+  store: { get(): Value; listen(listener: (value: Value) => void): () => void },
+  selector: (value: Value) => Slice,
+  isEqual?: (previous: Slice, next: Slice) => boolean
+): ReadableAtom<Slice>

package/select/index.js

@@ -0,0 +1,16 @@
+import { atom, onMount } from 'nanostores'
+
+export let select = ($store, selector, isEqual = Object.is) => {
+  let value = selector($store.get())
+  let $slice = atom(value)
+  onMount($slice, () =>
+    $store.listen(snapshot => {
+      let next = selector(snapshot)
+      if (!isEqual(value, next)) {
+        value = next
+        $slice.set(next)
+      }
+    })
+  )
+  return $slice
+}

package/standard-schema/index.d.ts

@@ -0,0 +1,20 @@
+import type { FormOptions } from '../index.js'
+
+type Issue = {
+  message: string
+  path?: readonly PropertyKey[]
+}
+
+type Result<Output> =
+  | { value: Output; issues?: undefined }
+  | { issues: readonly Issue[] }
+
+export interface StandardSchema<Input, Output = Input> {
+  '~standard': {
+    validate(value: Input): Result<Output> | Promise<Result<Output>>
+  }
+}
+
+export function standardSchema<Values extends Record<string, any>>(
+  schema: StandardSchema<Values>
+): NonNullable<FormOptions<Values>['validate']>

package/standard-schema/index.js

@@ -0,0 +1,17 @@
+let key = '~standard'
+let add = (errors, name, message) => {
+  if (!name) return
+  ;(errors[name] ||= []).push(message)
+}
+let parse = (issues, field) => {
+  let errors = {}
+  for (let issue of issues || []) {
+    add(errors, issue.path?.[0], issue.message)
+  }
+  return field ? errors[field] : errors
+}
+
+export let standardSchema = schema => async ({ field, values }) => {
+  let result = await schema[key].validate(values)
+  return parse(result.issues, field)
+}