@k8ordo/form 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Koki Sakano
+
+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,127 @@
+# @k8ordo/form
+
+Derive HTML constraint attributes, error messages, and server-side validation
+from one zod schema — forms whose two sides cannot disagree, because the client
+side is derived, never written. Works with JavaScript disabled or not yet
+loaded.
+
+Like every [k8ordo](https://ordo.k8o.me) package it assumes React 19 and Server
+Components, uses only what has reached Baseline newly available, and ships no
+polyfills or legacy fallbacks.
+
+- **Documentation**: https://ordo.k8o.me/form
+- **Design guide**: [docs/GUIDE.md](docs/GUIDE.md) — shipped inside this package
+
+## Installation
+
+```bash
+npm install @k8ordo/form zod
+# or
+pnpm add @k8ordo/form zod
+```
+
+## Peer Dependencies
+
+| Package        | Version  | Needed for                    |
+| -------------- | -------- | ----------------------------- |
+| `react`        | ≥19.2.6  | `useForm` and Server Actions  |
+| `react-dom`    | ≥19.2.6  | rendering                     |
+| `zod`          | ^4.4.3   | the schema (`zod/mini` works) |
+| `typescript`   | ≥7.0.2   | the shipped type declarations |
+| `@types/react` | ≥19.2.18 | the shipped type declarations |
+
+zod never reaches the browser: the schema is read on the server and crosses the
+RSC boundary as plain data. The client entry is ~2.7 kB gzipped.
+
+## Quick Start
+
+One schema drives everything — the attributes, the messages, and the
+server-side validation:
+
+```ts
+// schema.ts
+export const talkSchema = z.object({
+  title: z.string().min(1, 'タイトルを入力してください').max(120),
+  eventUrl: z.url(),
+});
+```
+
+```tsx
+// page.tsx — Server Component
+import { formFields } from '@k8ordo/form/server';
+
+const talkFields = formFields(talkSchema); // derived once, plain data
+
+export default function Page() {
+  return <TalkForm action={createTalk} fields={talkFields} />;
+}
+```
+
+```tsx
+// talk-form.tsx
+'use client';
+import { useForm } from '@k8ordo/form';
+
+export const TalkForm = ({ action, fields }: TalkFormProps) => {
+  const [state, formAction] = useActionState(action, {});
+  const form = useForm(fields, state);
+  const title = form.field('title');
+
+  return (
+    <form {...form.props} action={formAction}>
+      <input {...title.input} />
+      {title.error && <p>{title.error}</p>}
+      <button type="submit">送信</button>
+    </form>
+  );
+};
+```
+
+```ts
+// actions.ts
+'use server';
+import { parseForm } from '@k8ordo/form/server';
+
+export async function createTalk(_prev: FormState, formData: FormData) {
+  const parsed = parseForm(talkSchema, formData);
+  if (!parsed.success) return parsed.state;
+  await insertTalk(parsed.data); // typed
+  redirect('/talks');
+}
+```
+
+The [design guide](docs/GUIDE.md) covers the rest: nested objects and repeated
+rows, checkbox groups, cross-field rules typed against the schema's paths,
+async per-field checks, components that render no input of their own, and what
+the package guarantees (nothing dropped in silence, native validation kept
+without JavaScript, secrets never echoed).
+
+## AI Agent Documentation
+
+The docs ship **inside the package**, so an agent always reads the exact
+version you installed — there is no snapshot to copy or re-sync on upgrade.
+
+Point your agent at them once by pasting this into your project's `CLAUDE.md` /
+`AGENTS.md`:
+
+```markdown
+Use `@k8ordo/form` for forms. Before writing or changing a form, read
+`node_modules/@k8ordo/form/docs/GUIDE.md`. One zod schema is the single
+source: derive with `formFields(schema)` on the server, wire with
+`useForm(fields, state)` on the client, validate with
+`parseForm(schema, formData)` in the Server Action. Never duplicate a
+constraint in JSX that the schema already states, and check the `dropped`
+report for validations that do not reach the client.
+```
+
+What each surface gives an agent:
+
+| Surface                    | Where                                          |
+| -------------------------- | ---------------------------------------------- |
+| Design guide (entry point) | `node_modules/@k8ordo/form/docs/GUIDE.md`      |
+| Docs index for LLMs        | `docs/llms.txt` · https://ordo.k8o.me/llms.txt |
+| Markdown twin on the web   | https://ordo.k8o.me/form/docs/GUIDE.md         |
+
+## License
+
+MIT License - see [LICENSE](https://github.com/k35o/k8ordo/blob/main/LICENSE) for details.

package/dist/async-check.d.mts

@@ -0,0 +1,22 @@
+//#region src/async-check.d.ts
+/**
+ * Ask the server about one field while the person is still filling the form.
+ *
+ * Uniqueness is the case HTML cannot help with at all: only the server knows
+ * whether a name is taken. The check runs on blur rather than on every
+ * keystroke, and its answer is applied with `setCustomValidity`, so it joins
+ * the same message path as every built-in check instead of opening a second
+ * one.
+ */
+type AsyncCheck = {
+  /** Attach to the input this check guards. */
+  props: {
+    onBlur: () => void;
+    ref: (node: HTMLInputElement | null) => void;
+  };
+  /** True while an answer is outstanding, for disabling submit. */
+  isChecking: boolean;
+};
+declare const useAsyncCheck: (check: (value: string) => Promise<string | undefined>) => AsyncCheck;
+//#endregion
+export { AsyncCheck, useAsyncCheck };

package/dist/async-check.mjs

@@ -0,0 +1,49 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/async-check.ts
+const useAsyncCheck = (check) => {
+	const control = useRef(null);
+	const latest = useRef(0);
+	const answered = useRef(null);
+	const [isChecking, setIsChecking] = useState(false);
+	useEffect(() => () => {
+		latest.current += 1;
+	}, []);
+	return {
+		props: {
+			onBlur: useCallback(() => {
+				const node = control.current;
+				if (node === null) return;
+				if (node.value === answered.current) return;
+				latest.current += 1;
+				if (node.value === "") {
+					answered.current = null;
+					node.setCustomValidity("");
+					return;
+				}
+				const ticket = latest.current;
+				const issuedFor = node.value;
+				setIsChecking(true);
+				(async () => {
+					try {
+						const message = await check(issuedFor);
+						if (ticket !== latest.current) return;
+						const { current } = control;
+						if (current === null || current.value !== issuedFor) return;
+						answered.current = issuedFor;
+						current.setCustomValidity(message ?? "");
+						current.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
+					} catch {} finally {
+						if (ticket === latest.current) setIsChecking(false);
+					}
+				})();
+			}, [check]),
+			ref: useCallback((node) => {
+				control.current = node;
+			}, [])
+		},
+		isChecking
+	};
+};
+//#endregion
+export { useAsyncCheck };

package/dist/derive/attributes.d.mts

@@ -0,0 +1,32 @@
+import { DroppedCheck, FieldInput } from "../types.mjs";
+//#region src/derive/attributes.d.ts
+/** The subset of JSON Schema that `z.toJSONSchema` emits for a leaf field. */
+type LeafSchema = {
+  type?: string;
+  format?: string;
+  pattern?: string;
+  minLength?: number;
+  maxLength?: number;
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: number;
+  exclusiveMaximum?: number;
+  multipleOf?: number;
+  enum?: unknown[];
+  anyOf?: unknown[];
+};
+/**
+ * Turn one leaf JSON Schema into input attributes, collecting whatever HTML
+ * cannot express. Anything not representable is returned rather than dropped,
+ * so the caller can report it instead of leaving the author to discover at
+ * runtime that a check never ran on the client.
+ *
+ * `patternFlags` are the flags of the source RegExp when the caller could
+ * recover it — the JSON Schema string has already lost them.
+ */
+declare const attributesFor: (name: string, schema: LeafSchema, required: boolean, patternFlags?: string) => {
+  input: FieldInput;
+  dropped: DroppedCheck[];
+};
+//#endregion
+export { LeafSchema, attributesFor };

package/dist/derive/attributes.mjs

@@ -0,0 +1,130 @@
+//#region src/derive/attributes.ts
+/**
+* `.int()` carries JavaScript's safe-integer range into the schema. Emitting it
+* as `max` would put 9007199254740991 in the markup, which tells a reader
+* nothing and is never the bound the author meant.
+*/
+const JS_SAFE_INTEGER_BOUNDS = /* @__PURE__ */ new Set([Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER]);
+const FORMAT_TO_INPUT_TYPE = {
+	date: "date",
+	"date-time": "datetime-local",
+	duration: "text",
+	email: "email",
+	ipv4: "text",
+	ipv6: "text",
+	time: "time",
+	uri: "url",
+	uuid: "text"
+};
+/** `pattern` is ignored by the browser on these input types. */
+const TYPES_WITHOUT_PATTERN = /* @__PURE__ */ new Set([
+	"checkbox",
+	"date",
+	"datetime-local",
+	"number",
+	"time"
+]);
+const isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+/**
+* A regex only reaches the markup when the browser will read it the way zod
+* does. Three things silently change its meaning there: the `pattern`
+* attribute matches the whole value while a zod regex matches a substring, the
+* attribute is always case-sensitive, and browsers compile it with the `v`
+* flag — an expression that fails that compile is not an error but a pattern
+* the browser ignores wholesale (zod's own email regex is one).
+*/
+const patternVerdict = (source, flags) => {
+	if (flags !== void 0 && flags !== "" && flags !== "u") return `フラグ '${flags}' は HTML の pattern に存在しないため、ブラウザ側だけ判定が変わります`;
+	if (!source.startsWith("^") || !source.endsWith("$")) return "HTML の pattern は全体一致、zod の regex は部分一致のため、^…$ で括られていない正規表現は意味が変わります";
+	return (() => {
+		try {
+			return new RegExp(source, "v").flags === "v";
+		} catch {
+			return false;
+		}
+	})() ? void 0 : "ブラウザは pattern を v フラグで解釈し、コンパイルできない正規表現は黙って無視します";
+};
+/**
+* Turn one leaf JSON Schema into input attributes, collecting whatever HTML
+* cannot express. Anything not representable is returned rather than dropped,
+* so the caller can report it instead of leaving the author to discover at
+* runtime that a check never ran on the client.
+*
+* `patternFlags` are the flags of the source RegExp when the caller could
+* recover it — the JSON Schema string has already lost them.
+*/
+const attributesFor = (name, schema, required, patternFlags) => {
+	const input = { name };
+	const dropped = [];
+	if (required) input.required = true;
+	if (schema.anyOf !== void 0) {
+		input.type = "text";
+		dropped.push({
+			field: name,
+			reason: "nullable / union の中の制約は、どの枝を検査すべきか決まらないため属性に落ちません"
+		});
+		return {
+			input,
+			dropped
+		};
+	}
+	if (schema.enum !== void 0) return {
+		input,
+		dropped
+	};
+	if (schema.type === "boolean") {
+		input.type = "checkbox";
+		return {
+			input,
+			dropped
+		};
+	}
+	if (schema.type === "integer" || schema.type === "number") {
+		input.type = "number";
+		input.step = schema.type === "integer" ? schema.multipleOf ?? 1 : schema.multipleOf ?? "any";
+		if (isFiniteNumber(schema.minimum) && !JS_SAFE_INTEGER_BOUNDS.has(schema.minimum)) input.min = schema.minimum;
+		else if (isFiniteNumber(schema.exclusiveMinimum)) {
+			if (schema.type === "integer") input.min = schema.exclusiveMinimum + 1;
+			else dropped.push({
+				field: name,
+				reason: `exclusiveMinimum ${String(schema.exclusiveMinimum)} — HTML の min は境界を含むため表現できません`
+			});
+		}
+		if (isFiniteNumber(schema.maximum) && !JS_SAFE_INTEGER_BOUNDS.has(schema.maximum)) input.max = schema.maximum;
+		else if (isFiniteNumber(schema.exclusiveMaximum)) {
+			if (schema.type === "integer") input.max = schema.exclusiveMaximum - 1;
+			else dropped.push({
+				field: name,
+				reason: `exclusiveMaximum ${String(schema.exclusiveMaximum)} — HTML の max は境界を含むため表現できません`
+			});
+		}
+		return {
+			input,
+			dropped
+		};
+	}
+	input.type = schema.format === void 0 ? "text" : FORMAT_TO_INPUT_TYPE[schema.format] ?? "text";
+	if (isFiniteNumber(schema.minLength) && schema.minLength > 0) input.minLength = schema.minLength;
+	if (isFiniteNumber(schema.maxLength)) input.maxLength = schema.maxLength;
+	if (schema.pattern !== void 0) {
+		if (TYPES_WITHOUT_PATTERN.has(input.type)) {
+			if (input.type !== "date" && input.type !== "datetime-local") dropped.push({
+				field: name,
+				reason: `pattern は type="${input.type}" では無視されます`
+			});
+		} else {
+			const verdict = patternVerdict(schema.pattern, patternFlags);
+			if (verdict === void 0) input.pattern = schema.pattern;
+			else dropped.push({
+				field: name,
+				reason: verdict
+			});
+		}
+	}
+	return {
+		input,
+		dropped
+	};
+};
+//#endregion
+export { attributesFor };

package/dist/derive/form-fields.d.mts

@@ -0,0 +1,15 @@
+import { FormFields } from "../types.mjs";
+import { ArrayPathsOf, FieldPathsOf } from "../paths.mjs";
+import { ObjectSchema } from "../schema/object-schema.mjs";
+import { FormDefinition } from "../rules/define-form.mjs";
+//#region src/derive/form-fields.d.ts
+/**
+ * Derive input attributes and messages from one zod object schema.
+ *
+ * Call this on the server — in a Server Component or at module scope. The
+ * result is plain data, so it crosses to the client as props and zod never
+ * enters the bundle.
+ */
+declare const formFields: <Schema extends ObjectSchema>(input: FormDefinition<Schema> | Schema) => FormFields<FieldPathsOf<Schema>, ArrayPathsOf<Schema>>;
+//#endregion
+export { formFields };

package/dist/derive/form-fields.mjs

@@ -0,0 +1,83 @@
+import { asDefinition } from "../rules/define-form.mjs";
+import { asProbe } from "../schema/object-schema.mjs";
+import { schemaMap } from "../schema/walk.mjs";
+import { attributesFor } from "./attributes.mjs";
+import { messagesFor } from "./messages.mjs";
+//#region src/derive/form-fields.ts
+const objectLevelCheckCount = (schema) => schema._zod?.def?.checks?.length ?? 0;
+/**
+* Recover the flags of the RegExp behind a JSON Schema `pattern` string. The
+* JSON string has already lost them, and whether the browser may see the
+* pattern depends on them (an `i` flag has no HTML equivalent).
+*/
+const patternFlags = (schema, source) => {
+	const def = schema._zod?.def;
+	if (def?.pattern?.source === source) return def.pattern.flags;
+	for (const check of def?.checks ?? []) {
+		const candidate = check._zod?.def?.pattern;
+		if (candidate?.source === source) return candidate.flags;
+	}
+};
+/** What a `datetime-local` control actually submits: no seconds, no zone. */
+const DATETIME_LOCAL_PROBE = "2000-01-01T00:00";
+/**
+* Derive input attributes and messages from one zod object schema.
+*
+* Call this on the server — in a Server Component or at module scope. The
+* result is plain data, so it crosses to the client as props and zod never
+* enters the bundle.
+*/
+const formFields = (input) => {
+	const { schema, rules } = asDefinition(input);
+	const map = schemaMap(schema);
+	const fields = {};
+	const arrays = {};
+	const dropped = [];
+	for (const array of map.arrays) arrays[array.path] = {
+		path: array.path,
+		minItems: array.minItems,
+		maxItems: array.maxItems,
+		item: {}
+	};
+	for (const leaf of map.leaves) {
+		const attributes = attributesFor(leaf.name, leaf.json, leaf.required, leaf.json.pattern === void 0 ? void 0 : patternFlags(leaf.zod, leaf.json.pattern));
+		const secret = leaf.json.input === "password";
+		if (secret) attributes.input.type = "password";
+		if (attributes.input.type === "datetime-local" && !asProbe(leaf.zod).safeParse(DATETIME_LOCAL_PROBE).success) {
+			attributes.input.type = "text";
+			attributes.dropped.push({
+				field: leaf.name,
+				reason: "z.iso.datetime() はタイムゾーンを要求しますが、datetime-local はタイムゾーンを送信できません。type=\"text\" に落とします（local: true なら datetime-local が使えます）"
+			});
+		}
+		if (leaf.group !== void 0 && (leaf.group.minItems !== void 0 || leaf.group.maxItems !== void 0)) dropped.push({
+			field: leaf.path,
+			reason: "チェックボックス群の個数制限に対応する HTML 属性はありません。クライアントでも検査するには minChecked を使ってください"
+		});
+		const derived = {
+			input: attributes.input,
+			messages: messagesFor(leaf.zod, attributes.input, leaf.required),
+			secret
+		};
+		const array = leaf.arrayPath === null ? void 0 : arrays[leaf.arrayPath];
+		if (array === void 0) fields[leaf.path] = derived;
+		else array.item[leaf.itemKey ?? ""] = derived;
+		for (const entry of attributes.dropped) dropped.push({
+			...entry,
+			field: leaf.path
+		});
+	}
+	const objectChecks = objectLevelCheckCount(schema);
+	if (objectChecks > 0) dropped.push({
+		field: "(schema)",
+		reason: `${String(objectChecks)}件のオブジェクト階層のチェック（refine など）は HTML の制約属性に落ちないため、クライアントでは検査されません`
+	});
+	return {
+		fields,
+		arrays,
+		rules,
+		dropped
+	};
+};
+//#endregion
+export { formFields };

package/dist/derive/messages.d.mts

@@ -0,0 +1,12 @@
+import { FieldInput, ValidityFlag } from "../types.mjs";
+import { $ZodType } from "zod/v4/core";
+//#region src/derive/messages.d.ts
+/**
+ * Run each probe through the field's own schema and keep the message zod
+ * returns. A probe that unexpectedly passes simply yields no message for that
+ * flag — the browser's own wording is never used, since it is locale-dependent
+ * and cannot be controlled.
+ */
+declare const messagesFor: (schema: $ZodType, input: FieldInput, required: boolean) => Partial<Record<ValidityFlag, string>>;
+//#endregion
+export { messagesFor };

package/dist/derive/messages.mjs

@@ -0,0 +1,80 @@
+import { asProbe } from "../schema/object-schema.mjs";
+//#region src/derive/messages.ts
+const repeat = (length) => "a".repeat(Math.max(length, 0));
+const probesFor = (input, required) => {
+	const probes = [];
+	if (required) probes.push(input.type === "checkbox" ? {
+		flag: "valueMissing",
+		value: false,
+		codes: ["invalid_value", "invalid_type"]
+	} : {
+		flag: "valueMissing",
+		value: "",
+		codes: [
+			"too_small",
+			"invalid_type",
+			"invalid_format"
+		]
+	});
+	if (input.minLength !== void 0) probes.push({
+		flag: "tooShort",
+		value: repeat(input.minLength - 1),
+		codes: ["too_small"]
+	});
+	if (input.maxLength !== void 0) probes.push({
+		flag: "tooLong",
+		value: repeat(input.maxLength + 1),
+		codes: ["too_big"]
+	});
+	if (input.type === "email" || input.type === "url" || input.type === "date") probes.push({
+		flag: "typeMismatch",
+		value: "k8ordo-probe",
+		codes: ["invalid_format"]
+	});
+	else if (input.pattern !== void 0) probes.push({
+		flag: "patternMismatch",
+		value: "k8ordo-probe",
+		codes: ["invalid_format"]
+	});
+	if (input.type === "number") {
+		probes.push({
+			flag: "badInput",
+			value: "k8ordo-probe",
+			codes: ["invalid_type"]
+		});
+		if (typeof input.min === "number") probes.push({
+			flag: "rangeUnderflow",
+			value: input.min - 1,
+			codes: ["too_small"]
+		});
+		if (typeof input.max === "number") probes.push({
+			flag: "rangeOverflow",
+			value: input.max + 1,
+			codes: ["too_big"]
+		});
+		if (typeof input.step === "number") probes.push({
+			flag: "stepMismatch",
+			value: input.step === 1 ? .5 : Number.isInteger(input.step) ? input.step + 1 : input.step / 2,
+			codes: ["not_multiple_of", "invalid_type"]
+		});
+	}
+	return probes;
+};
+/**
+* Run each probe through the field's own schema and keep the message zod
+* returns. A probe that unexpectedly passes simply yields no message for that
+* flag — the browser's own wording is never used, since it is locale-dependent
+* and cannot be controlled.
+*/
+const messagesFor = (schema, input, required) => {
+	const messages = {};
+	for (const probe of probesFor(input, required)) {
+		const result = asProbe(schema).safeParse(probe.value);
+		if (result.success) continue;
+		const issue = probe.codes.map((code) => result.error.issues.find((candidate) => candidate.code === code)).find((found) => found !== void 0) ?? result.error.issues[0];
+		if (issue !== void 0) messages[probe.flag] = issue.message;
+	}
+	return messages;
+};
+//#endregion
+export { messagesFor };

package/dist/hidden-value.d.mts

@@ -0,0 +1,25 @@
+import { FC } from "react";
+//#region src/hidden-value.d.ts
+/**
+ * A hidden input that carries a value the visible component never submits.
+ *
+ * A component that renders no `<input name>` of its own — a rich text editor, a
+ * canvas picker, a third-party combobox — is invisible to FormData. Rather than
+ * pulling its value into React state and fighting it back out at submit, park
+ * the value in a hidden input and let the form collect it like any other.
+ *
+ * This is the whole of what `Controller` exists to do in react-hook-form, and
+ * it is the one place that binding silently breaks there.
+ *
+ * A component rather than a props helper for two reasons the form cannot see
+ * from outside: React updates a controlled value without any DOM event, so a
+ * change here has to be announced with one for rules and `isDirty` to notice;
+ * and a controlled input's defaultValue tracks its value, so the first
+ * render's value is snapshotted into `data-initial` as the dirtiness baseline.
+ */
+declare const HiddenValue: FC<{
+  name: string;
+  value: string;
+}>;
+//#endregion
+export { HiddenValue };

package/dist/hidden-value.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/hidden-value.tsx
+/**
+* A hidden input that carries a value the visible component never submits.
+*
+* A component that renders no `<input name>` of its own — a rich text editor, a
+* canvas picker, a third-party combobox — is invisible to FormData. Rather than
+* pulling its value into React state and fighting it back out at submit, park
+* the value in a hidden input and let the form collect it like any other.
+*
+* This is the whole of what `Controller` exists to do in react-hook-form, and
+* it is the one place that binding silently breaks there.
+*
+* A component rather than a props helper for two reasons the form cannot see
+* from outside: React updates a controlled value without any DOM event, so a
+* change here has to be announced with one for rules and `isDirty` to notice;
+* and a controlled input's defaultValue tracks its value, so the first
+* render's value is snapshotted into `data-initial` as the dirtiness baseline.
+*/
+const HiddenValue = ({ name, value }) => {
+	const node = useRef(null);
+	const initial = useRef(value);
+	const last = useRef(value);
+	useEffect(() => {
+		if (last.current === value) return;
+		last.current = value;
+		node.current?.dispatchEvent(new Event("input", { bubbles: true }));
+	}, [value]);
+	return /* @__PURE__ */ jsx("input", {
+		"data-initial": initial.current,
+		name,
+		readOnly: true,
+		ref: node,
+		type: "hidden",
+		value
+	});
+};
+//#endregion
+export { HiddenValue };

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+import { AsyncCheck, useAsyncCheck } from "./async-check.mjs";
+import { Rule } from "./rules/rules.mjs";
+import { DerivedArray, DerivedField, FieldInput, FormFields, FormState, ValidityFlag } from "./types.mjs";
+import { HiddenValue } from "./hidden-value.mjs";
+import { ArrayView, FieldView, RowView, UseFormReturn, useForm } from "./use-form.mjs";
+export { type ArrayView, type AsyncCheck, type DerivedArray, type DerivedField, type FieldInput, type FieldView, type FormFields, type FormState, HiddenValue, type RowView, type Rule, type UseFormReturn, type ValidityFlag, useAsyncCheck, useForm };

package/dist/index.mjs

@@ -0,0 +1,4 @@
+import { useAsyncCheck } from "./async-check.mjs";
+import { HiddenValue } from "./hidden-value.mjs";
+import { useForm } from "./use-form.mjs";
+export { HiddenValue, useAsyncCheck, useForm };