formstand 0.25.0 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { isDevToolsBuild, getAtPath, useFormSelectorShallow } from '../chunk-EQIS5IVH.js';
1
+ import { isDevToolsBuild, useFormSelectorShallow } from '../chunk-XJ6W5CKB.js';
2
2
  import { useState } from 'react';
3
3
  import { jsx, jsxs } from 'react/jsx-runtime';
4
4
 
@@ -114,10 +114,12 @@ var styles = {
114
114
  cursor: "pointer"
115
115
  }
116
116
  };
117
+ var jsonReplacer = (_key, value) => typeof value === "bigint" ? `${String(value)}n` : value;
117
118
  var preview = (value) => {
118
119
  if (value === void 0) return "undefined";
119
120
  if (value instanceof Date) return value.toISOString();
120
- const json = JSON.stringify(value);
121
+ if (typeof value === "bigint") return `${String(value)}n`;
122
+ const json = JSON.stringify(value, jsonReplacer);
121
123
  return json === void 0 ? String(value) : json.length > 60 ? `${json.slice(0, 57)}\u2026` : json;
122
124
  };
123
125
  var flags = (row) => [
@@ -144,14 +146,12 @@ var Section = ({
144
146
  /* @__PURE__ */ jsx("p", { style: styles.sectionTitle, children: title }),
145
147
  children
146
148
  ] });
147
- var DevtoolsPanel = ({
149
+ var OpenPanel = ({
148
150
  form,
149
- position = "bottom-right",
150
- defaultOpen = false,
151
- label = "formstand"
151
+ state,
152
+ label,
153
+ onClose
152
154
  }) => {
153
- const state = useDevtoolsState(form);
154
- const [open, setOpen] = useState(defaultOpen);
155
155
  const [held, setHeld] = useState(null);
156
156
  const rows = leafPaths(state.values).map((path) => {
157
157
  const field = form.getFieldState(path);
@@ -169,7 +169,7 @@ var DevtoolsPanel = ({
169
169
  rows.map((row) => row.path)
170
170
  );
171
171
  const diff = form.diff();
172
- return /* @__PURE__ */ jsx("div", { style: { ...styles.root, ...anchorFor(position) }, children: open ? /* @__PURE__ */ jsxs("div", { style: styles.panel, children: [
172
+ return /* @__PURE__ */ jsxs("div", { style: styles.panel, children: [
173
173
  /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
174
174
  /* @__PURE__ */ jsx("strong", { children: label }),
175
175
  /* @__PURE__ */ jsxs("span", { style: styles.muted, children: [
@@ -178,15 +178,7 @@ var DevtoolsPanel = ({
178
178
  state.isValidatingForm ? " \xB7 validating" : "",
179
179
  state.submitCount > 0 ? ` \xB7 submits ${state.submitCount}` : ""
180
180
  ] }),
181
- /* @__PURE__ */ jsx(
182
- "button",
183
- {
184
- type: "button",
185
- style: styles.button,
186
- onClick: () => setOpen(false),
187
- children: "close"
188
- }
189
- )
181
+ /* @__PURE__ */ jsx("button", { type: "button", style: styles.button, onClick: onClose, children: "close" })
190
182
  ] }),
191
183
  /* @__PURE__ */ jsx(Section, { title: `fields (${rows.length})`, children: /* @__PURE__ */ jsxs("table", { style: styles.table, children: [
192
184
  /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
@@ -225,10 +217,10 @@ var DevtoolsPanel = ({
225
217
  " ",
226
218
  /* @__PURE__ */ jsx("span", { style: styles.error, children: messages.join(", ") }),
227
219
  " ",
228
- /* @__PURE__ */ jsx("span", { style: styles.muted, children: getAtPath(state.schemaErrors, key) === void 0 ? "(showing)" : "(behind a schema error)" })
220
+ /* @__PURE__ */ jsx("span", { style: styles.muted, children: Object.hasOwn(state.schemaErrors, key) ? "(behind a schema error)" : "(showing)" })
229
221
  ] }, key))
230
222
  ] }),
231
- /* @__PURE__ */ jsx(Section, { title: "diff vs initial", children: /* @__PURE__ */ jsx("pre", { style: styles.pre, children: Object.keys(diff).length === 0 ? "clean" : JSON.stringify(diff, null, 2) }) }),
223
+ /* @__PURE__ */ jsx(Section, { title: "diff vs initial", children: /* @__PURE__ */ jsx("pre", { style: styles.pre, children: Object.keys(diff).length === 0 ? "clean" : JSON.stringify(diff, jsonReplacer, 2) }) }),
232
224
  /* @__PURE__ */ jsxs(Section, { title: "time travel", children: [
233
225
  /* @__PURE__ */ jsx(
234
226
  "button",
@@ -255,7 +247,25 @@ var DevtoolsPanel = ({
255
247
  " ",
256
248
  /* @__PURE__ */ jsx("span", { style: styles.muted, children: held === null ? "nothing held" : "snapshot held" })
257
249
  ] })
258
- ] }) : /* @__PURE__ */ jsxs(
250
+ ] });
251
+ };
252
+ var DevtoolsPanel = ({
253
+ form,
254
+ position = "bottom-right",
255
+ defaultOpen = false,
256
+ label = "formstand"
257
+ }) => {
258
+ const state = useDevtoolsState(form);
259
+ const [open, setOpen] = useState(defaultOpen);
260
+ return /* @__PURE__ */ jsx("div", { style: { ...styles.root, ...anchorFor(position) }, children: open ? /* @__PURE__ */ jsx(
261
+ OpenPanel,
262
+ {
263
+ form,
264
+ state,
265
+ label,
266
+ onClose: () => setOpen(false)
267
+ }
268
+ ) : /* @__PURE__ */ jsxs(
259
269
  "button",
260
270
  {
261
271
  type: "button",
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/devtools/paths.ts","../../src/devtools/styles.ts","../../src/devtools/FormstandDevtools.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["// Walking a values object into the list of paths the panel shows.\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> =>\n typeof value === \"object\" &&\n value !== null &&\n !Array.isArray(value) &&\n // A Date is a leaf, not a container to recurse into: its own keys are\n // methods, and useField binds the Date itself.\n !(value instanceof Date);\n\n// The addressable leaf paths of a values object, in declaration order.\n// Arrays contribute one path per ROW rather than one for the array, because\n// that is what a field binds to; the array's own path still shows up in the\n// panel via the error map, which is where `z.array().min(1)` lands.\n//\n// An empty object or array is itself a leaf here. It has no children to\n// describe, and dropping it would hide a field that exists in the schema.\nexport const leafPaths = (value: unknown, base = \"\"): readonly string[] => {\n const join = (key: string | number): string =>\n base === \"\" ? String(key) : `${base}.${String(key)}`;\n\n if (Array.isArray(value)) {\n return value.length === 0\n ? [base]\n : value.flatMap((item, index) => leafPaths(item, join(index)));\n }\n if (isPlainObject(value)) {\n const keys = Object.keys(value);\n return keys.length === 0\n ? [base]\n : keys.flatMap((key) => leafPaths(value[key], join(key)));\n }\n return [base];\n};\n\n// Error keys that no leaf path covers: the root \"\" key (a schema-wide\n// refine), array-level messages keyed at the container, and server verdicts\n// written at a path that holds no value yet. Without this the panel would\n// silently drop exactly the errors that are hardest to debug.\nexport const unmatchedErrorKeys = (\n errorKeys: readonly string[],\n leaves: readonly string[],\n): readonly string[] => {\n const covered = new Set(leaves);\n return errorKeys.filter((key) => !covered.has(key));\n};\n","import type { CSSProperties } from \"react\";\n\n// Inline styles on purpose: a devtools panel that needs the consumer to\n// import a stylesheet is a devtools panel that renders unstyled the first\n// time someone tries it. Inline also means nothing here can leak into or be\n// overridden by the host app's CSS, which matters when the whole job is\n// showing you the truth about your form.\n\nexport type DevtoolsPosition =\n | \"bottom-right\"\n | \"bottom-left\"\n | \"top-right\"\n | \"top-left\";\n\nconst ANCHOR: Readonly<Record<DevtoolsPosition, CSSProperties>> = {\n \"bottom-right\": { bottom: 12, right: 12 },\n \"bottom-left\": { bottom: 12, left: 12 },\n \"top-right\": { top: 12, right: 12 },\n \"top-left\": { top: 12, left: 12 },\n};\n\nconst MONO =\n 'ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace';\n\nexport const anchorFor = (position: DevtoolsPosition): CSSProperties =>\n ANCHOR[position];\n\nexport const styles = {\n root: {\n position: \"fixed\",\n zIndex: 2147483000,\n fontFamily: MONO,\n fontSize: 11,\n lineHeight: 1.45,\n color: \"#e6e6e6\",\n colorScheme: \"dark\",\n } satisfies CSSProperties,\n toggle: {\n background: \"#1b1b1f\",\n border: \"1px solid #3a3a42\",\n color: \"#e6e6e6\",\n borderRadius: 6,\n padding: \"6px 10px\",\n font: \"inherit\",\n cursor: \"pointer\",\n } satisfies CSSProperties,\n panel: {\n width: \"min(440px, calc(100vw - 24px))\",\n maxHeight: \"min(60vh, 520px)\",\n overflow: \"auto\",\n background: \"#141417\",\n border: \"1px solid #3a3a42\",\n borderRadius: 8,\n boxShadow: \"0 12px 32px rgba(0,0,0,0.45)\",\n } satisfies CSSProperties,\n header: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: 8,\n padding: \"8px 10px\",\n borderBottom: \"1px solid #2a2a31\",\n position: \"sticky\",\n top: 0,\n background: \"#141417\",\n } satisfies CSSProperties,\n section: { padding: \"8px 10px\", borderBottom: \"1px solid #23232a\" },\n sectionTitle: {\n color: \"#9aa0aa\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.06em\",\n fontSize: 10,\n margin: \"0 0 6px\",\n } satisfies CSSProperties,\n table: {\n width: \"100%\",\n borderCollapse: \"collapse\",\n tableLayout: \"fixed\",\n } satisfies CSSProperties,\n th: {\n textAlign: \"left\",\n color: \"#9aa0aa\",\n fontWeight: 400,\n padding: \"2px 4px\",\n borderBottom: \"1px solid #2a2a31\",\n } satisfies CSSProperties,\n td: {\n padding: \"2px 4px\",\n verticalAlign: \"top\",\n wordBreak: \"break-word\",\n } satisfies CSSProperties,\n path: { color: \"#c8b6ff\" } satisfies CSSProperties,\n error: { color: \"#ff8f8f\" } satisfies CSSProperties,\n muted: { color: \"#7d838d\" } satisfies CSSProperties,\n flag: { color: \"#7ddca4\" } satisfies CSSProperties,\n pre: {\n margin: 0,\n whiteSpace: \"pre-wrap\",\n wordBreak: \"break-word\",\n } satisfies CSSProperties,\n button: {\n background: \"#22222a\",\n border: \"1px solid #3a3a42\",\n color: \"#e6e6e6\",\n borderRadius: 5,\n padding: \"3px 8px\",\n font: \"inherit\",\n cursor: \"pointer\",\n } satisfies CSSProperties,\n} as const;\n","import { type ReactNode, useState } from \"react\";\nimport { isDevToolsBuild } from \"../core/env\";\nimport type { z } from \"zod\";\nimport type { Form } from \"../core/createForm\";\nimport type {\n DefaultPathDepth,\n FieldPath,\n PathDepth,\n} from \"../core/fieldPath\";\nimport { getAtPath } from \"../core/path\";\nimport type { FormState } from \"../core/types\";\nimport { useFormSelectorShallow } from \"../react/useFormSelector\";\nimport { leafPaths, unmatchedErrorKeys } from \"./paths\";\nimport { type DevtoolsPosition, anchorFor, styles } from \"./styles\";\n\n// D (the form's typed-path depth budget) is carried so a `pathDepth: 12`\n// form is accepted: Form<S, 12> is deliberately not assignable to Form<S, 9>,\n// so the depth-less prop type rejected every widened form (TS2375).\nexport type FormstandDevtoolsProps<\n TSchema extends z.ZodType,\n D extends PathDepth = DefaultPathDepth,\n> = Readonly<{\n form: Form<TSchema, D>;\n position?: DevtoolsPosition;\n defaultOpen?: boolean;\n /** Shown on the toggle, for telling two mounted panels apart. */\n label?: string;\n /**\n * Overrides the build gate. Unset, the panel renders only where NODE_ENV\n * is readable and not \"production\", which is what an app wants. `true`\n * mounts it regardless, for the one place where showing the form state\n * IS the page's purpose (a demo, an internal tool shipped in production\n * mode); `false` hides it in development without unmounting the form.\n */\n enabled?: boolean;\n}>;\n\ntype FieldRow = Readonly<{\n path: string;\n value: unknown;\n error: readonly string[] | undefined;\n touched: boolean;\n dirty: boolean;\n isValidating: boolean;\n}>;\n\n// Non-production only, matching createForm's own devtools gate: the panel is\n// a debugging affordance, and shipping it to end users would leak the whole\n// form state into the page. Bundlers that define NODE_ENV drop the panel\n// entirely. The gate fails CLOSED (isDevToolsBuild): a runtime with no\n// readable NODE_ENV at all (a CDN/ESM consumer, Deno, a worker) renders\n// nothing rather than assuming it is a dev build the way the console\n// warnings may.\n\nconst preview = (value: unknown): string => {\n if (value === undefined) return \"undefined\";\n if (value instanceof Date) return value.toISOString();\n const json = JSON.stringify(value);\n // Long strings and big row objects would push the value column past the\n // panel; the full value is one expand away in the Values section.\n return json === undefined\n ? String(value)\n : json.length > 60\n ? `${json.slice(0, 57)}…`\n : json;\n};\n\nconst flags = (row: FieldRow): string =>\n [\n row.touched ? \"touched\" : \"\",\n row.dirty ? \"dirty\" : \"\",\n row.isValidating ? \"validating\" : \"\",\n ]\n .filter((flag) => flag !== \"\")\n .join(\" \");\n\n// Reads every slice the panel renders in ONE shallow-compared subscription.\n// Each member is a stored reference the form replaces on write, so shallow\n// equality is stable — deriving anything fresh (an array from dirtyFields())\n// inside the selector would hand the store a new reference every pass and\n// loop it (React #185).\nconst useDevtoolsState = <TSchema extends z.ZodType, D extends PathDepth>(\n form: Form<TSchema, D>,\n) =>\n useFormSelectorShallow(form, (state) => ({\n values: state.values,\n errors: state.errors,\n schemaErrors: state.schemaErrors,\n serverErrors: state.serverErrors,\n touched: state.touched,\n isValidating: state.isValidating,\n isSubmitting: state.isSubmitting,\n isValidatingForm: state.isValidatingForm,\n submitCount: state.submitCount,\n mode: state.mode,\n }));\n\nconst Section = ({\n title,\n children,\n}: Readonly<{ title: string; children: ReactNode }>) => (\n <div style={styles.section}>\n <p style={styles.sectionTitle}>{title}</p>\n {children}\n </div>\n);\n\nconst DevtoolsPanel = <TSchema extends z.ZodType, D extends PathDepth>({\n form,\n position = \"bottom-right\",\n defaultOpen = false,\n label = \"formstand\",\n}: FormstandDevtoolsProps<TSchema, D>) => {\n const state = useDevtoolsState(form);\n const [open, setOpen] = useState(defaultOpen);\n const [held, setHeld] = useState<FormState<z.input<TSchema>> | null>(null);\n\n // Computed every render rather than memoized. getFieldState and diff() read\n // through `form`, not through anything in a dependency array, so a memo\n // would need deps the linter can't see and would go stale the moment one\n // was missed. This component only re-renders when the subscription above\n // reports a real change, so recomputing is both cheap and always right.\n const rows: readonly FieldRow[] = leafPaths(state.values).map((path) => {\n // Runtime-built strings need the cast the typed surface documents.\n // getFieldState rather than re-deriving dirty here, so the panel reports\n // the library's own comparison rules (Dates by timestamp, deep for\n // containers) instead of offering a second opinion.\n const field = form.getFieldState(path as FieldPath<z.input<TSchema>, D>);\n return {\n path,\n value: field.value,\n error: field.error,\n touched: field.touched,\n dirty: field.dirty,\n isValidating: field.isValidating,\n };\n });\n\n const orphanErrors = unmatchedErrorKeys(\n Object.keys(state.errors),\n rows.map((row) => row.path),\n );\n\n const diff = form.diff();\n\n return (\n <div style={{ ...styles.root, ...anchorFor(position) }}>\n {open ? (\n <div style={styles.panel}>\n <div style={styles.header}>\n <strong>{label}</strong>\n <span style={styles.muted}>\n {state.mode}\n {state.isSubmitting ? \" · submitting\" : \"\"}\n {state.isValidatingForm ? \" · validating\" : \"\"}\n {state.submitCount > 0 ? ` · submits ${state.submitCount}` : \"\"}\n </span>\n <button\n type=\"button\"\n style={styles.button}\n onClick={() => setOpen(false)}\n >\n close\n </button>\n </div>\n\n <Section title={`fields (${rows.length})`}>\n <table style={styles.table}>\n <thead>\n <tr>\n <th style={{ ...styles.th, width: \"38%\" }}>path</th>\n <th style={styles.th}>value</th>\n <th style={{ ...styles.th, width: \"26%\" }}>state</th>\n </tr>\n </thead>\n <tbody>\n {rows.map((row) => (\n <tr key={row.path}>\n <td style={{ ...styles.td, ...styles.path }}>{row.path}</td>\n <td style={styles.td}>\n {preview(row.value)}\n {row.error === undefined ? null : (\n <div style={styles.error}>{row.error.join(\", \")}</div>\n )}\n </td>\n <td style={{ ...styles.td, ...styles.flag }}>\n {flags(row)}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </Section>\n\n {orphanErrors.length === 0 ? null : (\n // Errors with no field of their own: the root \"\" key, array-level\n // messages, server verdicts on paths that hold no value yet.\n <Section title=\"errors without a field\">\n {orphanErrors.map((key) => (\n <div key={key}>\n <span style={styles.path}>{key === \"\" ? \"(root)\" : key}</span>{\" \"}\n <span style={styles.error}>\n {(state.errors[key] ?? []).join(\", \")}\n </span>\n </div>\n ))}\n </Section>\n )}\n\n <Section title=\"error channels\">\n <div style={styles.muted}>\n schema {Object.keys(state.schemaErrors).length} · server{\" \"}\n {Object.keys(state.serverErrors).length}\n </div>\n {Object.entries(state.serverErrors).map(([key, messages]) => (\n <div key={key}>\n <span style={styles.path}>{key === \"\" ? \"(root)\" : key}</span>{\" \"}\n <span style={styles.error}>{messages.join(\", \")}</span>{\" \"}\n <span style={styles.muted}>\n {getAtPath(state.schemaErrors, key) === undefined\n ? \"(showing)\"\n : \"(behind a schema error)\"}\n </span>\n </div>\n ))}\n </Section>\n\n <Section title=\"diff vs initial\">\n <pre style={styles.pre}>\n {Object.keys(diff).length === 0\n ? \"clean\"\n : JSON.stringify(diff, null, 2)}\n </pre>\n </Section>\n\n <Section title=\"time travel\">\n <button\n type=\"button\"\n style={styles.button}\n onClick={() => setHeld(form.snapshot())}\n >\n snapshot\n </button>{\" \"}\n <button\n type=\"button\"\n style={styles.button}\n disabled={held === null}\n onClick={() => {\n if (held !== null) form.restore(held);\n }}\n >\n restore\n </button>{\" \"}\n <span style={styles.muted}>\n {held === null ? \"nothing held\" : \"snapshot held\"}\n </span>\n </Section>\n </div>\n ) : (\n <button\n type=\"button\"\n style={styles.toggle}\n onClick={() => setOpen(true)}\n >\n {label}\n {Object.keys(state.errors).length > 0\n ? ` · ${String(Object.keys(state.errors).length)} err`\n : \"\"}\n </button>\n )}\n </div>\n );\n};\n\n/**\n * A form-aware debugging panel: every field's value, error, and flags, the\n * two error channels shown separately, the live diff against initial values,\n * and snapshot/restore time travel.\n *\n * Renders nothing in production builds, and nothing wherever NODE_ENV is not\n * readable (no `process` global, or one without NODE_ENV): the panel exposes\n * the whole form state, so an unknowable environment is treated as shipped.\n */\nexport const FormstandDevtools = <\n TSchema extends z.ZodType,\n D extends PathDepth = DefaultPathDepth,\n>({\n enabled,\n ...props\n}: FormstandDevtoolsProps<TSchema, D>) =>\n (enabled ?? isDevToolsBuild()) ? <DevtoolsPanel {...props} /> : null;\n"]}
1
+ {"version":3,"sources":["../../src/devtools/paths.ts","../../src/devtools/styles.ts","../../src/devtools/FormstandDevtools.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["// Walking a values object into the list of paths the panel shows.\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> =>\n typeof value === \"object\" &&\n value !== null &&\n !Array.isArray(value) &&\n // A Date is a leaf, not a container to recurse into: its own keys are\n // methods, and useField binds the Date itself.\n !(value instanceof Date);\n\n// The addressable leaf paths of a values object, in declaration order.\n// Arrays contribute one path per ROW rather than one for the array, because\n// that is what a field binds to; the array's own path still shows up in the\n// panel via the error map, which is where `z.array().min(1)` lands.\n//\n// An empty object or array is itself a leaf here. It has no children to\n// describe, and dropping it would hide a field that exists in the schema.\nexport const leafPaths = (value: unknown, base = \"\"): readonly string[] => {\n const join = (key: string | number): string =>\n base === \"\" ? String(key) : `${base}.${String(key)}`;\n\n if (Array.isArray(value)) {\n return value.length === 0\n ? [base]\n : value.flatMap((item, index) => leafPaths(item, join(index)));\n }\n if (isPlainObject(value)) {\n const keys = Object.keys(value);\n return keys.length === 0\n ? [base]\n : keys.flatMap((key) => leafPaths(value[key], join(key)));\n }\n return [base];\n};\n\n// Error keys that no leaf path covers: the root \"\" key (a schema-wide\n// refine), array-level messages keyed at the container, and server verdicts\n// written at a path that holds no value yet. Without this the panel would\n// silently drop exactly the errors that are hardest to debug.\nexport const unmatchedErrorKeys = (\n errorKeys: readonly string[],\n leaves: readonly string[],\n): readonly string[] => {\n const covered = new Set(leaves);\n return errorKeys.filter((key) => !covered.has(key));\n};\n","import type { CSSProperties } from \"react\";\n\n// Inline styles on purpose: a devtools panel that needs the consumer to\n// import a stylesheet is a devtools panel that renders unstyled the first\n// time someone tries it. Inline also means nothing here can leak into or be\n// overridden by the host app's CSS, which matters when the whole job is\n// showing you the truth about your form.\n\nexport type DevtoolsPosition =\n | \"bottom-right\"\n | \"bottom-left\"\n | \"top-right\"\n | \"top-left\";\n\nconst ANCHOR: Readonly<Record<DevtoolsPosition, CSSProperties>> = {\n \"bottom-right\": { bottom: 12, right: 12 },\n \"bottom-left\": { bottom: 12, left: 12 },\n \"top-right\": { top: 12, right: 12 },\n \"top-left\": { top: 12, left: 12 },\n};\n\nconst MONO =\n 'ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace';\n\nexport const anchorFor = (position: DevtoolsPosition): CSSProperties =>\n ANCHOR[position];\n\nexport const styles = {\n root: {\n position: \"fixed\",\n zIndex: 2147483000,\n fontFamily: MONO,\n fontSize: 11,\n lineHeight: 1.45,\n color: \"#e6e6e6\",\n colorScheme: \"dark\",\n } satisfies CSSProperties,\n toggle: {\n background: \"#1b1b1f\",\n border: \"1px solid #3a3a42\",\n color: \"#e6e6e6\",\n borderRadius: 6,\n padding: \"6px 10px\",\n font: \"inherit\",\n cursor: \"pointer\",\n } satisfies CSSProperties,\n panel: {\n width: \"min(440px, calc(100vw - 24px))\",\n maxHeight: \"min(60vh, 520px)\",\n overflow: \"auto\",\n background: \"#141417\",\n border: \"1px solid #3a3a42\",\n borderRadius: 8,\n boxShadow: \"0 12px 32px rgba(0,0,0,0.45)\",\n } satisfies CSSProperties,\n header: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: 8,\n padding: \"8px 10px\",\n borderBottom: \"1px solid #2a2a31\",\n position: \"sticky\",\n top: 0,\n background: \"#141417\",\n } satisfies CSSProperties,\n section: { padding: \"8px 10px\", borderBottom: \"1px solid #23232a\" },\n sectionTitle: {\n color: \"#9aa0aa\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.06em\",\n fontSize: 10,\n margin: \"0 0 6px\",\n } satisfies CSSProperties,\n table: {\n width: \"100%\",\n borderCollapse: \"collapse\",\n tableLayout: \"fixed\",\n } satisfies CSSProperties,\n th: {\n textAlign: \"left\",\n color: \"#9aa0aa\",\n fontWeight: 400,\n padding: \"2px 4px\",\n borderBottom: \"1px solid #2a2a31\",\n } satisfies CSSProperties,\n td: {\n padding: \"2px 4px\",\n verticalAlign: \"top\",\n wordBreak: \"break-word\",\n } satisfies CSSProperties,\n path: { color: \"#c8b6ff\" } satisfies CSSProperties,\n error: { color: \"#ff8f8f\" } satisfies CSSProperties,\n muted: { color: \"#7d838d\" } satisfies CSSProperties,\n flag: { color: \"#7ddca4\" } satisfies CSSProperties,\n pre: {\n margin: 0,\n whiteSpace: \"pre-wrap\",\n wordBreak: \"break-word\",\n } satisfies CSSProperties,\n button: {\n background: \"#22222a\",\n border: \"1px solid #3a3a42\",\n color: \"#e6e6e6\",\n borderRadius: 5,\n padding: \"3px 8px\",\n font: \"inherit\",\n cursor: \"pointer\",\n } satisfies CSSProperties,\n} as const;\n","import { type ReactNode, useState } from \"react\";\nimport { isDevToolsBuild } from \"../core/env\";\nimport type { z } from \"zod\";\nimport type { Form } from \"../core/createForm\";\nimport type {\n DefaultPathDepth,\n FieldPath,\n PathDepth,\n} from \"../core/fieldPath\";\nimport type { FormState } from \"../core/types\";\nimport { useFormSelectorShallow } from \"../react/useFormSelector\";\nimport { leafPaths, unmatchedErrorKeys } from \"./paths\";\nimport { type DevtoolsPosition, anchorFor, styles } from \"./styles\";\n\n// D (the form's typed-path depth budget) is carried so a `pathDepth: 12`\n// form is accepted: Form<S, 12> is deliberately not assignable to Form<S, 9>,\n// so the depth-less prop type rejected every widened form (TS2375).\nexport type FormstandDevtoolsProps<\n TSchema extends z.ZodType,\n D extends PathDepth = DefaultPathDepth,\n> = Readonly<{\n form: Form<TSchema, D>;\n position?: DevtoolsPosition;\n defaultOpen?: boolean;\n /** Shown on the toggle, for telling two mounted panels apart. */\n label?: string;\n /**\n * Overrides the build gate. Unset, the panel renders only where NODE_ENV\n * is readable and not \"production\", which is what an app wants. `true`\n * mounts it regardless, for the one place where showing the form state\n * IS the page's purpose (a demo, an internal tool shipped in production\n * mode); `false` hides it in development without unmounting the form.\n */\n enabled?: boolean;\n}>;\n\ntype FieldRow = Readonly<{\n path: string;\n value: unknown;\n error: readonly string[] | undefined;\n touched: boolean;\n dirty: boolean;\n isValidating: boolean;\n}>;\n\n// Non-production only, matching createForm's own devtools gate: the panel is\n// a debugging affordance, and shipping it to end users would leak the whole\n// form state into the page. Bundlers that define NODE_ENV drop the panel\n// entirely. The gate fails CLOSED (isDevToolsBuild): a runtime with no\n// readable NODE_ENV at all (a CDN/ESM consumer, Deno, a worker) renders\n// nothing rather than assuming it is a dev build the way the console\n// warnings may.\n\n// JSON.stringify throws on a bigint (a z.bigint() field), which took the\n// whole panel down with it; a bigint renders as its literal spelling.\nconst jsonReplacer = (_key: string, value: unknown): unknown =>\n typeof value === \"bigint\" ? `${String(value)}n` : value;\n\nconst preview = (value: unknown): string => {\n if (value === undefined) return \"undefined\";\n if (value instanceof Date) return value.toISOString();\n if (typeof value === \"bigint\") return `${String(value)}n`;\n const json = JSON.stringify(value, jsonReplacer);\n // Long strings and big row objects would push the value column past the\n // panel; the full value is one expand away in the Values section.\n return json === undefined\n ? String(value)\n : json.length > 60\n ? `${json.slice(0, 57)}…`\n : json;\n};\n\nconst flags = (row: FieldRow): string =>\n [\n row.touched ? \"touched\" : \"\",\n row.dirty ? \"dirty\" : \"\",\n row.isValidating ? \"validating\" : \"\",\n ]\n .filter((flag) => flag !== \"\")\n .join(\" \");\n\n// Reads every slice the panel renders in ONE shallow-compared subscription.\n// Each member is a stored reference the form replaces on write, so shallow\n// equality is stable — deriving anything fresh (an array from dirtyFields())\n// inside the selector would hand the store a new reference every pass and\n// loop it (React #185).\nconst useDevtoolsState = <TSchema extends z.ZodType, D extends PathDepth>(\n form: Form<TSchema, D>,\n) =>\n useFormSelectorShallow(form, (state) => ({\n values: state.values,\n errors: state.errors,\n schemaErrors: state.schemaErrors,\n serverErrors: state.serverErrors,\n touched: state.touched,\n isValidating: state.isValidating,\n isSubmitting: state.isSubmitting,\n isValidatingForm: state.isValidatingForm,\n submitCount: state.submitCount,\n mode: state.mode,\n }));\n\ntype DevtoolsState<TValues> = ReturnType<\n typeof useDevtoolsState<z.ZodType<TValues>, PathDepth>\n>;\n\nconst Section = ({\n title,\n children,\n}: Readonly<{ title: string; children: ReactNode }>) => (\n <div style={styles.section}>\n <p style={styles.sectionTitle}>{title}</p>\n {children}\n </div>\n);\n\ntype OpenPanelProps<TSchema extends z.ZodType, D extends PathDepth> = Readonly<{\n form: Form<TSchema, D>;\n state: DevtoolsState<z.input<TSchema>>;\n label: string;\n onClose: () => void;\n}>;\n\n// The expanded panel. Rows and the diff are derived HERE, inside the open\n// branch, so a collapsed panel costs its store subscription and nothing\n// else: it used to walk every leaf through getFieldState and run diff() on\n// every store write while showing only the toggle.\nconst OpenPanel = <TSchema extends z.ZodType, D extends PathDepth>({\n form,\n state,\n label,\n onClose,\n}: OpenPanelProps<TSchema, D>) => {\n const [held, setHeld] = useState<FormState<z.input<TSchema>> | null>(null);\n\n // Computed every render rather than memoized. getFieldState and diff() read\n // through `form`, not through anything in a dependency array, so a memo\n // would need deps the linter can't see and would go stale the moment one\n // was missed. This component only re-renders when the subscription above\n // reports a real change, so recomputing is both cheap and always right.\n const rows: readonly FieldRow[] = leafPaths(state.values).map((path) => {\n // Runtime-built strings need the cast the typed surface documents.\n // getFieldState rather than re-deriving dirty here, so the panel reports\n // the library's own comparison rules (Dates by timestamp, deep for\n // containers) instead of offering a second opinion.\n const field = form.getFieldState(path as FieldPath<z.input<TSchema>, D>);\n return {\n path,\n value: field.value,\n error: field.error,\n touched: field.touched,\n dirty: field.dirty,\n isValidating: field.isValidating,\n };\n });\n\n const orphanErrors = unmatchedErrorKeys(\n Object.keys(state.errors),\n rows.map((row) => row.path),\n );\n\n const diff = form.diff();\n\n return (\n <div style={styles.panel}>\n <div style={styles.header}>\n <strong>{label}</strong>\n <span style={styles.muted}>\n {state.mode}\n {state.isSubmitting ? \" · submitting\" : \"\"}\n {state.isValidatingForm ? \" · validating\" : \"\"}\n {state.submitCount > 0 ? ` · submits ${state.submitCount}` : \"\"}\n </span>\n <button type=\"button\" style={styles.button} onClick={onClose}>\n close\n </button>\n </div>\n\n <Section title={`fields (${rows.length})`}>\n <table style={styles.table}>\n <thead>\n <tr>\n <th style={{ ...styles.th, width: \"38%\" }}>path</th>\n <th style={styles.th}>value</th>\n <th style={{ ...styles.th, width: \"26%\" }}>state</th>\n </tr>\n </thead>\n <tbody>\n {rows.map((row) => (\n <tr key={row.path}>\n <td style={{ ...styles.td, ...styles.path }}>{row.path}</td>\n <td style={styles.td}>\n {preview(row.value)}\n {row.error === undefined ? null : (\n <div style={styles.error}>{row.error.join(\", \")}</div>\n )}\n </td>\n <td style={{ ...styles.td, ...styles.flag }}>{flags(row)}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </Section>\n\n {orphanErrors.length === 0 ? null : (\n // Errors with no field of their own: the root \"\" key, array-level\n // messages, server verdicts on paths that hold no value yet.\n <Section title=\"errors without a field\">\n {orphanErrors.map((key) => (\n <div key={key}>\n <span style={styles.path}>{key === \"\" ? \"(root)\" : key}</span>{\" \"}\n <span style={styles.error}>\n {(state.errors[key] ?? []).join(\", \")}\n </span>\n </div>\n ))}\n </Section>\n )}\n\n <Section title=\"error channels\">\n <div style={styles.muted}>\n schema {Object.keys(state.schemaErrors).length} · server{\" \"}\n {Object.keys(state.serverErrors).length}\n </div>\n {Object.entries(state.serverErrors).map(([key, messages]) => (\n <div key={key}>\n <span style={styles.path}>{key === \"\" ? \"(root)\" : key}</span>{\" \"}\n <span style={styles.error}>{messages.join(\", \")}</span>{\" \"}\n <span style={styles.muted}>\n {/* The channels are FLAT maps keyed by path string: an own-key\n read, not a path walk, decides whether the schema speaks\n at this key. Walking the map as a path read the root \"\"\n as the whole map (always \"behind\") and split a nested key\n into segments it never had (always \"showing\"). */}\n {Object.hasOwn(state.schemaErrors, key)\n ? \"(behind a schema error)\"\n : \"(showing)\"}\n </span>\n </div>\n ))}\n </Section>\n\n <Section title=\"diff vs initial\">\n <pre style={styles.pre}>\n {Object.keys(diff).length === 0\n ? \"clean\"\n : JSON.stringify(diff, jsonReplacer, 2)}\n </pre>\n </Section>\n\n <Section title=\"time travel\">\n <button\n type=\"button\"\n style={styles.button}\n onClick={() => setHeld(form.snapshot())}\n >\n snapshot\n </button>{\" \"}\n <button\n type=\"button\"\n style={styles.button}\n disabled={held === null}\n onClick={() => {\n if (held !== null) form.restore(held);\n }}\n >\n restore\n </button>{\" \"}\n <span style={styles.muted}>\n {held === null ? \"nothing held\" : \"snapshot held\"}\n </span>\n </Section>\n </div>\n );\n};\n\nconst DevtoolsPanel = <TSchema extends z.ZodType, D extends PathDepth>({\n form,\n position = \"bottom-right\",\n defaultOpen = false,\n label = \"formstand\",\n}: FormstandDevtoolsProps<TSchema, D>) => {\n const state = useDevtoolsState(form);\n const [open, setOpen] = useState(defaultOpen);\n\n return (\n <div style={{ ...styles.root, ...anchorFor(position) }}>\n {open ? (\n <OpenPanel\n form={form}\n state={state}\n label={label}\n onClose={() => setOpen(false)}\n />\n ) : (\n <button\n type=\"button\"\n style={styles.toggle}\n onClick={() => setOpen(true)}\n >\n {label}\n {Object.keys(state.errors).length > 0\n ? ` · ${String(Object.keys(state.errors).length)} err`\n : \"\"}\n </button>\n )}\n </div>\n );\n};\n\n/**\n * A form-aware debugging panel: every field's value, error, and flags, the\n * two error channels shown separately, the live diff against initial values,\n * and snapshot/restore time travel.\n *\n * Renders nothing in production builds, and nothing wherever NODE_ENV is not\n * readable (no `process` global, or one without NODE_ENV): the panel exposes\n * the whole form state, so an unknowable environment is treated as shipped.\n */\nexport const FormstandDevtools = <\n TSchema extends z.ZodType,\n D extends PathDepth = DefaultPathDepth,\n>({\n enabled,\n ...props\n}: FormstandDevtoolsProps<TSchema, D>) =>\n (enabled ?? isDevToolsBuild()) ? <DevtoolsPanel {...props} /> : null;\n"]}