@dynamic-field-kit/react 1.4.0 → 1.5.1

package/CHANGELOG.md

@@ -0,0 +1,204 @@
+# @dynamic-field-kit/react
+
+## 1.5.1
+
+### Patch Changes
+
+- Findable on npm: every package now carries real search keywords, and homepage points at the live demo instead of the README the npm page already renders.
+- b22a6a1: Make the packages findable on npm, and point `homepage` at something worth
+  landing on.
+
+  The keyword lists were three entries long and two of those were the package's
+  own name — nobody searches `dynamic-field-kit/core`. npm ranks search partly on
+  keywords, so in practice these packages could only be found by someone who
+  already knew what they were called. The repository has carried the right
+  vocabulary as GitHub topics all along (`dynamic-forms`, `form-builder`,
+  `form-engine`, `form-validation`, `schema-driven`, `headless`, and the three
+  framework names); npm simply never saw any of it. Each package now carries that
+  vocabulary plus the terms its own users would type, including the schema
+  libraries it actually adapts — zod, yup, valibot and Standard Schema. Not JSON
+  Schema, which it does not support.
+
+  `homepage` pointed at the package's README on GitHub, which is the same text
+  npm already renders on the package page from the shipped README. It now points
+  at the live demo instead, where the forms actually run. The source stays one
+  click away in `repository`.
+
+## 1.5.0
+
+### Minor Changes
+
+- Form state hooks, schema adapters, wizard engine, DevTools and extended renderers across all four packages, with type declarations that now resolve correctly under node16 and nodenext.
+- d91c737: Add form state hooks, schema adapters, wizard engine, DevTools and extended renderers.
+
+  **Core**
+
+  - `zodValidator`, `yupValidator`, `valibotValidator` / `standardSchemaValidator`. Adapters parse **synchronously** so their result is usable by the synchronous `validateFields`; schemas with async refinements or async `.test()` rules return a Promise and must be validated through `validateFieldsAsync`.
+  - Adapters take an explicit `{ target: 'form' | 'field' }` option. `'form'` (the default) parses the form data object; `'field'` parses a single scalar value. The field-name shorthand — `zodValidator(schema, 'email')` — is unchanged.
+  - Wizard engine: `createWizardState`, `validateStep`, `canGoNext`, `canGoPrev`, plus the navigation the engine needs to be usable - `goNext`, `goPrev`, `goToStep`, `markStepCompleted`, `isStepCompleted`. `goNext` records the step it leaves, so `completedSteps` is actually maintained.
+  - Group array helpers: `moveGroupItem`, `swapGroupItems`, `insertGroupItem`, `focusFirstInvalidField`.
+  - `switch` is a first-class field type: it had a shipped renderer in react and vue but no `FieldTypeMap` entry, so `type: 'switch'` did not typecheck.
+
+  **React / Vue / Angular**
+
+  - `useDynamicForm` (React, Vue) and `createDynamicFormStore` (Angular Signals) now expose the same surface, including `isSubmitting` and `isSubmitted`.
+  - `handleSubmit(onValid, onInvalid)` returns a submit handler in every framework and calls `preventDefault` on the event it receives.
+  - Default HTML5 renderers for `radio`, `range`, `file`, `date`, `time`, `datetime-local` and `switch`.
+  - `DynamicFormDevTools` overlay for inspecting form data, errors, metadata and field descriptions, with an error-count badge in all three frameworks.
+  - `MultiFieldInput` reports blur through `onBlurField` (an `@Output` in Angular), so a form store's `handleBlur` / `touched` / `validateOnBlur` can be wired to it. Vue and Angular previously had no blur plumbing at all.
+
+### Patch Changes
+
+- c3faa51: Document the v1.5 APIs in each package README: form state, schema adapters, the wizard engine, default renderers, DevTools and blur wiring. README ships in the npm tarball, so this reaches package pages only through a release.
+- 75447a6: Close the remaining documentation gaps in each package README, so every public
+  export is described somewhere. README ships in the npm tarball, so this reaches
+  the package pages only through a release.
+
+  - **Sync vs async validation** is now spelled out in core, with the consequence
+    that was previously implicit: `validateField` / `validateFields` cannot await,
+    so a `validate` hook returning a Promise is treated as valid on the sync path.
+    `useDynamicForm` and `createDynamicFormStore` validate synchronously
+    (including on submit), so async rules have to run through
+    `validateFieldsAsync` explicitly. Each adapter README repeats the caveat and
+    links to the core section.
+  - Document `validateFieldAsync`, `validateFieldsAsync`, `resolveOptions` and
+    `validators` in the react, vue and angular export lists, separated from each
+    adapter's own exports so it is clear they are core re-exports.
+  - Document the core types that appear in every signature but had no definition
+    in the README: `Properties`, `ValidatorFn`, `FieldValidatorResult`,
+    `FieldValidatorFunction`, and `FormStep` alongside `WizardState`.
+  - Angular: document `layoutRegistry` / `LayoutRegistry`, the `ColumnLayout` /
+    `RowLayout` / `GridLayout` components and `BaseInputComponent`, with a custom
+    layout example. Its layout registry holds standalone components rather than
+    render functions, which is the one place the three adapters genuinely differ,
+    and it was the only adapter not documenting its registry at all.
+  - Rename angular's `## What it exports` to `## Exports` to match react and vue.
+  - Link the demo sub-routes: react's enterprise-features and wizard pages, and
+    from core the per-framework demos plus the wizard it documents.
+
+- e10044b: Fix the type declarations consumers get under `moduleResolution: node16` /
+  `nodenext`, and fill in the npm metadata the package pages never had.
+
+  Every package declared a single `types` target for both module formats while
+  shipping two sets of declarations. `arethetypeswrong` on the built tarballs
+  reported core and react "masquerading as CJS" and vue "masquerading as ESM":
+  an ESM import resolved to the CommonJS declaration file, and vice versa. The
+  `exports` maps now declare `types` per condition, so each format resolves to
+  the declarations that describe it.
+
+  Angular was worse than a mismatch - it did not resolve at all. Its entry is an
+  `.mjs` bundle, so TypeScript reads its declarations in ESM mode, where the
+  extensionless `export * from './public-api'` that ng-packagr generates is error
+  TS2834. The failure is in `dist/index.d.ts`, the first file a consumer reaches,
+  so the package was unusable on node16 resolution. A `postbuild` step now adds
+  the explicit `.js` extension to relative specifiers in the emitted `.d.ts`
+  files, resolving each against the build output so a directory import becomes
+  `./layout/index.js` rather than a broken `./layout.js`. Angular also gains an
+  `exports` map and `"type": "module"`, which it needs to describe itself
+  honestly. All four packages are clean on all four resolution modes now, except
+  angular's `require()`, which is ESM-only by nature - as `@angular/core` is.
+
+  Also in the tarballs: `CHANGELOG.md` now ships, so the npm page has release
+  history, and angular no longer ships a second copy of its README and LICENSE
+  that ng-packagr had copied into `dist`. Every package gains `homepage`, `bugs`
+  and `repository.directory`, so npm links to the right README and issue tracker
+  instead of nothing, and `publishConfig.provenance`, so each published tarball
+  is signed and linked back to the workflow run that built it.
+
+- 75447a6: Let consumer bundlers drop the parts of the adapters an app does not use.
+
+  Components were declared as bare top-level calls — `defineComponent({...})` in
+  vue, `React.memo(...)` in react. A bundler cannot prove such a call is
+  side-effect free, so it has to evaluate it even when the result is unused, which
+  kept every default renderer and every component in an app's bundle no matter how
+  little of the package it imported. Marking those calls `/* @__PURE__ */` makes
+  them droppable. Measured with esbuild, minified, framework external:
+
+  | App imports                | Before   | After           |
+  | -------------------------- | -------- | --------------- |
+  | react: one core helper     | 11,149 B | 3,258 B (−71%)  |
+  | react: `DynamicInput` only | 11,150 B | 6,830 B (−39%)  |
+  | react: everything          | 17,601 B | unchanged       |
+  | vue: one core helper       | 17,379 B | 13,934 B (−20%) |
+  | vue: `DynamicInput` only   | 17,379 B | 13,934 B (−20%) |
+  | vue: everything            | 20,530 B | unchanged       |
+
+  Apps that use the whole surface are unchanged, which is the expected result —
+  there is nothing to drop. The shipped `dist` grows slightly (react +0.03 KB, vue
+  +0.29 KB) because the annotations are comments in the bundle; the trade is a
+  bigger published file for a smaller consumer bundle.
+
+  `@dynamic-field-kit/core` now declares `"sideEffects": false`. It has no
+  top-level execution at all — the only module-scope work is `new FieldRegistry()`
+  assigned to an export — so the claim is accurate, and it lets bundlers that rely
+  on the flag rather than their own analysis skip core entirely when it is unused.
+  The adapters deliberately do not set it: their entry side-effect-imports the
+  default layouts in order to register them.
+
+- 75447a6: Stop publishing sourcemaps, roughly halving what each package installs.
+
+  tsup was emitting sourcemaps with `sourcesContent`, so every `.map` carried a
+  full copy of the TypeScript source. That is what made them work at all — `files`
+  only publishes `dist`, so a map referencing `../src/*.ts` would otherwise
+  resolve to nothing — but it also made them about half of each tarball, shipped
+  to every consumer on every install.
+
+  | Package | Unpacked                | Tarball               | Files |
+  | ------- | ----------------------- | --------------------- | ----- |
+  | core    | 157.0 → 83.0 KB (−47%)  | 33.3 → 17.5 KB (−47%) | 8 → 6 |
+  | react   | 207.6 → 90.1 KB (−57%)  | 46.8 → 19.2 KB (−59%) | 8 → 6 |
+  | vue     | 250.4 → 109.4 KB (−56%) | 47.6 → 20.5 KB (−57%) | 8 → 6 |
+
+  Nothing that ends up in an application bundle changes — sourcemaps never do.
+  What changes is install size, and the ability to step into the library's
+  TypeScript source while debugging a consuming app.
+
+  This is a deliberate trade, not a free win: the maps worked. Each package's
+  `tsup.config.ts` carries the reasoning next to a `sourcemap: false` that is one
+  word away from restoring them.
+
+  `@dynamic-field-kit/angular` is unaffected; ng-packagr's published output does
+  not carry them.
+
+- 244c3d4: Ship the MIT license text, and fix what the angular package tells npm.
+
+  Every package declared `"license": "MIT"` with no LICENSE file anywhere in the
+  repo, so the tarballs carried the claim and not the terms. npm includes a
+  LICENSE at the package root regardless of `files`, so all four now ship one.
+
+  The angular package's README was wrong in three places, all of them visible on
+  its npm page: the "pin versions explicitly" example named `core@^1.0.12` and
+  `angular@^1.2.3`, nine public exports (`FieldInputProps`, `DynamicFormOptions`,
+  `FieldTypeKey`, `LayoutConfig`, `ColumnLayoutConfig`, `RowLayoutConfig`,
+  `GridLayoutConfig`, `BaseLayoutConfig`, `ResponsiveLayoutConfig`) appeared
+  nowhere in it, and a section titled "Angular 14 and earlier" named versions the
+  package cannot run on — its peer floor is `>=14`.
+
+  Its `sideEffects: false` was also untrue: `defaultLayouts.ts` registers the
+  three layout components with a module-scope call, which is exactly the side
+  effect react and vue list their own layout modules for. The flag is now
+  `["**/fesm2022/*.mjs"]` — a glob because ng-packagr copies the field into
+  `dist/package.json`, where paths resolve one directory lower, and a bundler
+  reads whichever manifest is nearest the module. Nothing observable changes
+  today: bundling the published 1.4.0 with esbuild while importing only
+  `DynamicInput` already kept all three `register()` calls, because the fesm2022
+  bundle is a single module the app is using. The flag was a claim waiting to
+  break.
+
+## 1.4.0
+
+### Minor Changes
+
+- 132f74b: Framework adapters: validation support, scoped field registries via dependency
+  injection, and unified cross-framework layout types.
+
+  - Validation wired through `DynamicInput` / `FieldInput` / `MultiFieldInput`.
+  - Scoped `FieldRegistry` injection (React context, Vue provide/inject, Angular
+    `FIELD_REGISTRY` token) so consumers can supply their own registry.
+  - Shared layout type definitions aligned across React, Vue, and Angular.
+
+  Requires `@dynamic-field-kit/core@^1.3.0` (peer dependency) for the new
+  validation and layout APIs.
+
+  Note: `@dynamic-field-kit/core` is a peer dependency (not bundled). Consumers
+  must install it alongside the adapter.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vannt-dev
+
+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

@@ -4,7 +4,10 @@ React adapter for `@dynamic-field-kit/core`.
 
 This package provides React components for rendering `FieldDescription[]` and exports a React-typed `fieldRegistry`, so registered renderers can be used directly as JSX components.
 
-Demo app: https://github.com/vannt-dev/dynamic-field-kit-demo
+Live demo: https://vannt-dev.github.io/dynamic-field-kit/react/ — plus
+[enterprise features](https://vannt-dev.github.io/dynamic-field-kit/react/new-features/)
+(`useDynamicForm`, HTML5 renderers, blur wiring, DevTools) and a
+[multi-step wizard](https://vannt-dev.github.io/dynamic-field-kit/react/wizard/).
 
 ## Install
 
@@ -19,6 +22,8 @@ Note: `@dynamic-field-kit/core`, `react`, and `react-dom` are **peer dependencie
 - `DynamicInput`
 - `FieldInput`
 - `MultiFieldInput`
+- `useDynamicForm`
+- `DynamicFormDevTools`
 - `layoutRegistry`
 - `fieldRegistry`
 - `FieldRegistry` (class, for scoped registries)
@@ -29,7 +34,22 @@ Note: `@dynamic-field-kit/core`, `react`, and `react-dom` are **peer dependencie
 - `FieldTypeKey`
 - `FieldRendererProps`
 - `LayoutConfig`
-- `validateField` / `validateFields` / `resolveDisabled` / `resolveReadOnly` / `ValidationResult`
+- `defaultRenderersMap` / `getDefaultRenderer`
+
+Re-exported from `@dynamic-field-kit/core` so a consumer app rarely has to import
+both packages:
+
+- `validateField` / `validateFieldAsync` — one field, returns `string[]`
+- `validateFields` / `validateFieldsAsync` — a whole schema, returns `ValidationResult`
+- `resolveDisabled` / `resolveReadOnly` / `resolveOptions` — resolve a field's dynamic conditions and options
+- `validators` — the built-in validator helpers (`required`, `email`, `minLength`, `compose`, …)
+- `ValidationResult`
+
+`useDynamicForm` validates **synchronously** via `validateFields`, including on
+submit. Fields whose `validate` hook returns a Promise are treated as valid on
+that path, so run async rules through `validateFieldsAsync` yourself. See the
+[core README](https://github.com/vannt-dev/dynamic-field-kit/tree/develop/packages/core#sync-vs-async-validation)
+for the full rules.
 
 `FieldGroupInput` (repeatable field groups) is used internally by `FieldInput` and doesn't need to be imported directly - see "Repeatable field groups" below.
 
@@ -96,6 +116,91 @@ export function Example() {
 }
 ```
 
+## Form state (`useDynamicForm`)
+
+Holds data, errors, touched and submission state for a set of fields. Vue's
+composable and Angular's `createDynamicFormStore` expose the same surface.
+
+```tsx
+import { useDynamicForm, MultiFieldInput } from '@dynamic-field-kit/react';
+
+const form = useDynamicForm({
+  fields,
+  initialValues: { country: 'VN' },
+  validateOnBlur: true, // default
+  validateOnChange: false, // default
+});
+
+<form onSubmit={form.handleSubmit((data) => save(data))}>
+  <MultiFieldInput
+    fieldDescriptions={fields}
+    properties={form.data}
+    onChange={form.handleChange}
+    onBlurField={form.handleBlur} // wires touched + validateOnBlur
+  />
+  <button disabled={form.isSubmitting}>
+    {form.isSubmitting ? 'Saving…' : 'Save'}
+  </button>
+</form>;
+```
+
+| Member                              | Description                                                                       |
+| ----------------------------------- | --------------------------------------------------------------------------------- |
+| `data`                              | Current form data, with `computeValue` fields applied                             |
+| `errors`                            | `Record<string, string[]>`, keyed like `validateFields`                           |
+| `isValid` / `isDirty`               | No errors recorded / any value has changed                                        |
+| `isSubmitting` / `isSubmitted`      | In-flight submit / at least one submit attempted                                  |
+| `touched`                           | Fields that have been blurred                                                     |
+| `handleChange(data)`                | Replace the whole form data — pass to `MultiFieldInput`'s `onChange`              |
+| `setFieldValue(name, value)`        | Change one field                                                                  |
+| `handleBlur(name)`                  | Mark touched, and validate when `validateOnBlur`                                  |
+| `setFieldTouched(name, value?)`     | Set touched explicitly                                                            |
+| `setData`                           | Raw state setter, for escape hatches                                              |
+| `validate()`                        | Validate now, returns a boolean                                                   |
+| `reset(values?)`                    | Back to `initialValues` (or the values given), clearing errors/touched/submission |
+| `handleSubmit(onValid, onInvalid?)` | Returns a submit handler; calls `preventDefault`, validates, then dispatches      |
+
+`MultiFieldInput` tracks touched internally regardless; `onBlurField` is the
+hook for driving an external store like this one.
+
+## Default renderers
+
+`text` · `number` · `password` · `email` · `textarea` · `checkbox` · `select` ·
+`radio` · `range` · `file` · `date` · `time` · `datetime-local` · `switch`
+
+Any type you have not registered falls back to one of these. Reach the map
+directly if you need to wrap or inspect a default:
+
+```ts
+import {
+  defaultRenderersMap,
+  getDefaultRenderer,
+} from '@dynamic-field-kit/react';
+
+const Base = getDefaultRenderer('date'); // undefined for an unknown type
+```
+
+`file` emits a `File` (or `File[]` when `multiple` is set), `range` and `number`
+emit numbers, `checkbox` / `switch` emit booleans; everything else emits strings.
+
+## DevTools
+
+```tsx
+import { DynamicFormDevTools } from '@dynamic-field-kit/react';
+
+<DynamicFormDevTools
+  data={form.data}
+  errors={form.errors}
+  touched={form.touched}
+  isDirty={form.isDirty}
+  fields={fields}
+  position="bottom-right" // or "bottom-left"
+/>;
+```
+
+A floating overlay with data / errors / meta / fields tabs. The collapsed
+button carries a red badge with the number of fields in error.
+
 ## Layouts
 
 Use a layout name:

package/dist/index.d.mts

@@ -1,7 +1,6 @@
 import React, { ReactNode, ComponentType } from 'react';
-import { FieldTypeKey, Properties, FieldDescription, LayoutConfig, ValidationResult, FieldTypeMap, FieldRendererProps } from '@dynamic-field-kit/core';
+import { FieldTypeKey, Properties, FieldDescription, LayoutConfig, ValidationResult, FieldRendererProps, FieldTypeMap } from '@dynamic-field-kit/core';
 export { FieldDescription, FieldRegistry, FieldRendererProps, FieldTypeKey, LayoutConfig, ValidationResult, resolveDisabled, resolveOptions, resolveReadOnly, validateField, validateFieldAsync, validateFields, validateFieldsAsync, validators } from '@dynamic-field-kit/core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type LayoutRenderer<C = unknown> = (props: {
     children: React.ReactNode;
@@ -36,7 +35,7 @@ interface Props$2<T extends FieldTypeKey> {
     /** Extra, framework-agnostic props forwarded verbatim to the renderer. */
     extraProps?: Properties;
 }
-declare const DynamicInputInner: <T extends FieldTypeKey>({ type, value, onChange, onBlur, label, options, className, description, disabled, readOnly, required, touched, dirty, error, id, ariaInvalid, ariaDescribedBy, ariaRequired, extraProps, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicInputInner: <T extends FieldTypeKey>({ type, value, onChange, onBlur, label, options, className, description, disabled, readOnly, required, touched, dirty, error, id, ariaInvalid, ariaDescribedBy, ariaRequired, extraProps, }: Props$2<T>) => React.JSX.Element;
 declare const DynamicInput: typeof DynamicInputInner;
 
 interface Props$1 {
@@ -48,7 +47,7 @@ interface Props$1 {
     onBlurField?: (key: string) => void;
     onValueChangeField: (value: unknown, key: string) => void;
 }
-declare const FieldInput: React.MemoExoticComponent<({ fieldDescription, renderInfos, rootData, touched, dirty, onBlurField, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element>;
+declare const FieldInput: React.MemoExoticComponent<({ fieldDescription, renderInfos, rootData, touched, dirty, onBlurField, onValueChangeField, }: Props$1) => React.JSX.Element>;
 
 interface Props {
     fieldDescriptions: FieldDescription[];
@@ -67,8 +66,53 @@ interface Props {
      * included).
      */
     onValidityChange?: (result: ValidationResult) => void;
+    /**
+     * Called with a field's name when it loses focus. Touched state is still
+     * tracked internally either way; this is the hook for driving an external
+     * form store - pass `useDynamicForm`'s `handleBlur` to get its `touched`
+     * map and `validateOnBlur` behaviour.
+     */
+    onBlurField?: (fieldName: string) => void;
+}
+declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout, rootData, onValidityChange, onBlurField, }: Props) => React.JSX.Element;
+
+interface DynamicFormDevToolsProps {
+    data: Properties;
+    errors?: Record<string, string[]>;
+    touched?: Record<string, boolean>;
+    isDirty?: boolean;
+    fields?: FieldDescription[];
+    position?: 'bottom-right' | 'bottom-left';
 }
-declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout, rootData, onValidityChange, }: Props) => react_jsx_runtime.JSX.Element;
+declare const DynamicFormDevTools: React.FC<DynamicFormDevToolsProps>;
+
+interface UseDynamicFormOptions {
+    fields: FieldDescription[];
+    initialValues?: Properties;
+    validateOnBlur?: boolean;
+    validateOnChange?: boolean;
+}
+interface UseDynamicFormResult {
+    data: Properties;
+    errors: Record<string, string[]>;
+    isValid: boolean;
+    isDirty: boolean;
+    isSubmitting: boolean;
+    isSubmitted: boolean;
+    touched: Record<string, boolean>;
+    setData: React.Dispatch<React.SetStateAction<Properties>>;
+    setFieldValue: (name: string, value: unknown) => void;
+    setFieldTouched: (name: string, isTouched?: boolean) => void;
+    handleChange: (newData: Properties) => void;
+    handleBlur: (fieldName: string) => void;
+    reset: (newValues?: Properties) => void;
+    validate: () => boolean;
+    handleSubmit: (onValid: (data: Properties) => void | Promise<void>, onInvalid?: (errors: Record<string, string[]>) => void) => (e?: React.FormEvent) => Promise<void>;
+}
+declare function useDynamicForm({ fields, initialValues, validateOnBlur, validateOnChange, }: UseDynamicFormOptions): UseDynamicFormResult;
+
+declare const defaultRenderersMap: Record<string, React.FC<FieldRendererProps>>;
+declare function getDefaultRenderer(type: string): React.FC<FieldRendererProps> | undefined;
 
 type ReactFieldRenderer<T = unknown> = ComponentType<FieldRendererProps<T>>;
 interface ReactFieldRegistry {
@@ -85,4 +129,4 @@ declare const FieldRegistryProvider: ({ registry, children, }: FieldRegistryProv
 /** The registry for the nearest provider, or the global singleton. */
 declare function useFieldRegistry(): ReactFieldRegistry;
 
-export { DynamicInput, FieldInput, FieldRegistryProvider, type FieldRegistryProviderProps, MultiFieldInput, type ReactFieldRegistry, type ReactFieldRenderer, fieldRegistry, layoutRegistry, useFieldRegistry };
+export { DynamicFormDevTools, DynamicInput, FieldInput, FieldRegistryProvider, type FieldRegistryProviderProps, MultiFieldInput, type ReactFieldRegistry, type ReactFieldRenderer, defaultRenderersMap, fieldRegistry, getDefaultRenderer, layoutRegistry, useDynamicForm, useFieldRegistry };

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import React, { ReactNode, ComponentType } from 'react';
-import { FieldTypeKey, Properties, FieldDescription, LayoutConfig, ValidationResult, FieldTypeMap, FieldRendererProps } from '@dynamic-field-kit/core';
+import { FieldTypeKey, Properties, FieldDescription, LayoutConfig, ValidationResult, FieldRendererProps, FieldTypeMap } from '@dynamic-field-kit/core';
 export { FieldDescription, FieldRegistry, FieldRendererProps, FieldTypeKey, LayoutConfig, ValidationResult, resolveDisabled, resolveOptions, resolveReadOnly, validateField, validateFieldAsync, validateFields, validateFieldsAsync, validators } from '@dynamic-field-kit/core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type LayoutRenderer<C = unknown> = (props: {
     children: React.ReactNode;
@@ -36,7 +35,7 @@ interface Props$2<T extends FieldTypeKey> {
     /** Extra, framework-agnostic props forwarded verbatim to the renderer. */
     extraProps?: Properties;
 }
-declare const DynamicInputInner: <T extends FieldTypeKey>({ type, value, onChange, onBlur, label, options, className, description, disabled, readOnly, required, touched, dirty, error, id, ariaInvalid, ariaDescribedBy, ariaRequired, extraProps, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicInputInner: <T extends FieldTypeKey>({ type, value, onChange, onBlur, label, options, className, description, disabled, readOnly, required, touched, dirty, error, id, ariaInvalid, ariaDescribedBy, ariaRequired, extraProps, }: Props$2<T>) => React.JSX.Element;
 declare const DynamicInput: typeof DynamicInputInner;
 
 interface Props$1 {
@@ -48,7 +47,7 @@ interface Props$1 {
     onBlurField?: (key: string) => void;
     onValueChangeField: (value: unknown, key: string) => void;
 }
-declare const FieldInput: React.MemoExoticComponent<({ fieldDescription, renderInfos, rootData, touched, dirty, onBlurField, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element>;
+declare const FieldInput: React.MemoExoticComponent<({ fieldDescription, renderInfos, rootData, touched, dirty, onBlurField, onValueChangeField, }: Props$1) => React.JSX.Element>;
 
 interface Props {
     fieldDescriptions: FieldDescription[];
@@ -67,8 +66,53 @@ interface Props {
      * included).
      */
     onValidityChange?: (result: ValidationResult) => void;
+    /**
+     * Called with a field's name when it loses focus. Touched state is still
+     * tracked internally either way; this is the hook for driving an external
+     * form store - pass `useDynamicForm`'s `handleBlur` to get its `touched`
+     * map and `validateOnBlur` behaviour.
+     */
+    onBlurField?: (fieldName: string) => void;
+}
+declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout, rootData, onValidityChange, onBlurField, }: Props) => React.JSX.Element;
+
+interface DynamicFormDevToolsProps {
+    data: Properties;
+    errors?: Record<string, string[]>;
+    touched?: Record<string, boolean>;
+    isDirty?: boolean;
+    fields?: FieldDescription[];
+    position?: 'bottom-right' | 'bottom-left';
 }
-declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout, rootData, onValidityChange, }: Props) => react_jsx_runtime.JSX.Element;
+declare const DynamicFormDevTools: React.FC<DynamicFormDevToolsProps>;
+
+interface UseDynamicFormOptions {
+    fields: FieldDescription[];
+    initialValues?: Properties;
+    validateOnBlur?: boolean;
+    validateOnChange?: boolean;
+}
+interface UseDynamicFormResult {
+    data: Properties;
+    errors: Record<string, string[]>;
+    isValid: boolean;
+    isDirty: boolean;
+    isSubmitting: boolean;
+    isSubmitted: boolean;
+    touched: Record<string, boolean>;
+    setData: React.Dispatch<React.SetStateAction<Properties>>;
+    setFieldValue: (name: string, value: unknown) => void;
+    setFieldTouched: (name: string, isTouched?: boolean) => void;
+    handleChange: (newData: Properties) => void;
+    handleBlur: (fieldName: string) => void;
+    reset: (newValues?: Properties) => void;
+    validate: () => boolean;
+    handleSubmit: (onValid: (data: Properties) => void | Promise<void>, onInvalid?: (errors: Record<string, string[]>) => void) => (e?: React.FormEvent) => Promise<void>;
+}
+declare function useDynamicForm({ fields, initialValues, validateOnBlur, validateOnChange, }: UseDynamicFormOptions): UseDynamicFormResult;
+
+declare const defaultRenderersMap: Record<string, React.FC<FieldRendererProps>>;
+declare function getDefaultRenderer(type: string): React.FC<FieldRendererProps> | undefined;
 
 type ReactFieldRenderer<T = unknown> = ComponentType<FieldRendererProps<T>>;
 interface ReactFieldRegistry {
@@ -85,4 +129,4 @@ declare const FieldRegistryProvider: ({ registry, children, }: FieldRegistryProv
 /** The registry for the nearest provider, or the global singleton. */
 declare function useFieldRegistry(): ReactFieldRegistry;
 
-export { DynamicInput, FieldInput, FieldRegistryProvider, type FieldRegistryProviderProps, MultiFieldInput, type ReactFieldRegistry, type ReactFieldRenderer, fieldRegistry, layoutRegistry, useFieldRegistry };
+export { DynamicFormDevTools, DynamicInput, FieldInput, FieldRegistryProvider, type FieldRegistryProviderProps, MultiFieldInput, type ReactFieldRegistry, type ReactFieldRenderer, defaultRenderersMap, fieldRegistry, getDefaultRenderer, layoutRegistry, useDynamicForm, useFieldRegistry };