@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/form/components/use-controlled-field.js

@@ -1,29 +1,33 @@
-import { getStringProp } from "../../core/props.js";
+import { testIdentity } from "../../core/test-id.js";
 import { useFormContext } from "./context.js";
+import { fieldProps } from "./field-props.js";
+import { useFieldScope } from "./field-scope.js";
 import { useFormValue } from "./values.js";
 import { useDependentField } from "./use-dependent-field.js";
 import { useFieldCommit } from "./use-field-commit.js";
 //#region resources/js/form/components/use-controlled-field.ts
-/**
-* Shared wiring for store-controlled, condition-aware fields: derives the current
-* string value (store, falling back to the node's value prop), the field state
-* (hidden/required/readonly/disabled), the current error, and a `commit` callback
-* that writes to the store and triggers precognition validation / error clearing.
-*/
+/** Shared wiring read by every store-controlled, condition-aware field. */
 function useControlledField(node) {
 	const { errors } = useFormContext();
+	const scope = useFieldScope();
 	const state = useDependentField(node);
-	const name = getStringProp(node.props, "name");
-	const storedValue = useFormValue(name);
-	const currentValue = storedValue !== void 0 ? storedValue : node.props?.value;
+	const props = fieldProps(node);
+	const localName = props.name ?? "";
+	const globalValue = useFormValue(localName);
+	const storedValue = scope ? scope.getValue(localName) : globalValue;
+	const currentValue = storedValue !== void 0 ? storedValue : props.value;
 	const value = typeof currentValue === "string" || typeof currentValue === "number" ? String(currentValue) : "";
+	const domName = scope ? scope.scopedName(localName) : localName;
+	const errorKey = scope ? scope.errorKey(localName) : localName;
 	const { commit: commitField } = useFieldCommit();
-	const commit = (next) => commitField(name, next);
+	const commit = (next) => commitField(localName, next);
 	return {
 		...state,
-		name,
+		localName,
+		name: domName,
+		testId: testIdentity(localName),
 		value,
-		error: errors[name],
+		error: errors[errorKey],
 		commit
 	};
 }

package/dist/form/components/use-controlled-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-controlled-field.js","names":[],"sources":["../../../resources/js/form/components/use-controlled-field.ts"],"sourcesContent":["import { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { Node } from \"@lattice/lattice/core/types\";\nimport type { FieldState } from \"./conditions\";\nimport { useFormContext } from \"./context\";\nimport { useDependentField } from \"./use-dependent-field\";\nimport { useFieldCommit } from \"./use-field-commit\";\nimport { useFormValue } from \"./values\";\n\ntype ControlledField = FieldState & {\n  name: string;\n  value: string;\n  error?: string;\n  commit: (value: unknown) => void;\n};\n\n/**\n * Shared wiring for store-controlled, condition-aware fields: derives the current\n * string value (store, falling back to the node's value prop), the field state\n * (hidden/required/readonly/disabled), the current error, and a `commit` callback\n * that writes to the store and triggers precognition validation / error clearing.\n */\nexport function useControlledField(node: Node): ControlledField {\n  const { errors } = useFormContext();\n  const state = useDependentField(node);\n  const name = getStringProp(node.props, \"name\");\n  const storedValue = useFormValue(name);\n  const currentValue = storedValue !== undefined ? storedValue : node.props?.value;\n  const value =\n    typeof currentValue === \"string\" || typeof currentValue === \"number\"\n      ? String(currentValue)\n      : \"\";\n\n  const { commit: commitField } = useFieldCommit();\n  const commit = (next: unknown): void => commitField(name, next);\n\n  return { ...state, name, value, error: errors[name], commit };\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,SAAgB,mBAAmB,MAA6B;CAC9D,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,kBAAkB,IAAI;CACpC,MAAM,OAAO,cAAc,KAAK,OAAO,MAAM;CAC7C,MAAM,cAAc,aAAa,IAAI;CACrC,MAAM,eAAe,gBAAgB,KAAA,IAAY,cAAc,KAAK,OAAO;CAC3E,MAAM,QACJ,OAAO,iBAAiB,YAAY,OAAO,iBAAiB,WACxD,OAAO,YAAY,IACnB;CAEN,MAAM,EAAE,QAAQ,gBAAgB,eAAe;CAC/C,MAAM,UAAU,SAAwB,YAAY,MAAM,IAAI;CAE9D,OAAO;EAAE,GAAG;EAAO;EAAM;EAAO,OAAO,OAAO;EAAO;CAAO;AAC9D"}
+{"version":3,"file":"use-controlled-field.js","names":[],"sources":["../../../resources/js/form/components/use-controlled-field.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { FieldState } from \"./conditions\";\nimport { fieldProps } from \"./field-props\";\nimport { useFieldScope } from \"./field-scope\";\nimport { useFormContext } from \"./context\";\nimport { useDependentField } from \"./use-dependent-field\";\nimport { useFieldCommit } from \"./use-field-commit\";\nimport { useFormValue } from \"./values\";\n\nexport type ControlledField = FieldState & {\n  localName: string;\n  name: string;\n  testId?: string;\n  value: string;\n  error?: string;\n  commit: (value: unknown) => void;\n};\n\n/** Shared wiring read by every store-controlled, condition-aware field. */\nexport function useControlledField(node: Node): ControlledField {\n  const { errors } = useFormContext();\n  const scope = useFieldScope();\n  const state = useDependentField(node);\n  const props = fieldProps(node);\n  const localName = props.name ?? \"\";\n\n  const globalValue = useFormValue(localName);\n  const storedValue = scope ? scope.getValue(localName) : globalValue;\n  const currentValue = storedValue !== undefined ? storedValue : props.value;\n  const value =\n    typeof currentValue === \"string\" || typeof currentValue === \"number\"\n      ? String(currentValue)\n      : \"\";\n\n  const domName = scope ? scope.scopedName(localName) : localName;\n  const errorKey = scope ? scope.errorKey(localName) : localName;\n\n  const { commit: commitField } = useFieldCommit();\n  const commit = (next: unknown): void => commitField(localName, next);\n\n  return {\n    ...state,\n    localName,\n    name: domName,\n    testId: testIdentity(localName),\n    value,\n    error: errors[errorKey],\n    commit,\n  };\n}\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,mBAAmB,MAA6B;CAC9D,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,cAAc;CAC5B,MAAM,QAAQ,kBAAkB,IAAI;CACpC,MAAM,QAAQ,WAAW,IAAI;CAC7B,MAAM,YAAY,MAAM,QAAQ;CAEhC,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,cAAc,QAAQ,MAAM,SAAS,SAAS,IAAI;CACxD,MAAM,eAAe,gBAAgB,KAAA,IAAY,cAAc,MAAM;CACrE,MAAM,QACJ,OAAO,iBAAiB,YAAY,OAAO,iBAAiB,WACxD,OAAO,YAAY,IACnB;CAEN,MAAM,UAAU,QAAQ,MAAM,WAAW,SAAS,IAAI;CACtD,MAAM,WAAW,QAAQ,MAAM,SAAS,SAAS,IAAI;CAErD,MAAM,EAAE,QAAQ,gBAAgB,eAAe;CAC/C,MAAM,UAAU,SAAwB,YAAY,WAAW,IAAI;CAEnE,OAAO;EACL,GAAG;EACH;EACA,MAAM;EACN,QAAQ,aAAa,SAAS;EAC9B;EACA,OAAO,OAAO;EACd;CACF;AACF"}

package/dist/form/components/use-dependent-field.d.ts

@@ -1,3 +1,3 @@
-import { Node } from '../../../../core/types';
+import { Node } from '../../core/types';
 import { FieldState } from './conditions';
 export declare function useDependentField(node: Node): FieldState;

package/dist/form/components/use-dependent-field.js

@@ -1,15 +1,21 @@
-import { getBooleanProp } from "../../core/props.js";
-import { evaluateConditions } from "./conditions.js";
+import { fieldProps } from "./field-props.js";
+import { useFieldScope } from "./field-scope.js";
 import { useFormValues } from "./values.js";
+import { evaluateConditions } from "./conditions.js";
 //#region resources/js/form/components/use-dependent-field.ts
 function useDependentField(node) {
 	const values = useFormValues();
-	const conditions = node.props?.conditions;
-	return evaluateConditions(conditions, values, {
-		hidden: getBooleanProp(node.props, "hidden"),
-		required: getBooleanProp(node.props, "required"),
-		readonly: getBooleanProp(node.props, "readonly"),
-		disabled: getBooleanProp(node.props, "disabled")
+	const scope = useFieldScope();
+	const props = fieldProps(node);
+	const conditionValues = scope ? {
+		...values,
+		...scope.values
+	} : values;
+	return evaluateConditions(props.conditions ?? void 0, conditionValues, {
+		hidden: props.hidden ?? false,
+		required: props.required ?? false,
+		readOnly: props.readOnly ?? false,
+		disabled: props.disabled ?? false
 	});
 }
 //#endregion

package/dist/form/components/use-dependent-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-dependent-field.js","names":[],"sources":["../../../resources/js/form/components/use-dependent-field.ts"],"sourcesContent":["import { getBooleanProp } from \"@lattice/lattice/core/props\";\nimport type { Node } from \"@lattice/lattice/core/types\";\nimport { type FieldConditions, type FieldState, evaluateConditions } from \"./conditions\";\nimport { useFormValues } from \"./values\";\n\nexport function useDependentField(node: Node): FieldState {\n  const values = useFormValues();\n  const conditions = node.props?.conditions as FieldConditions | undefined;\n\n  return evaluateConditions(conditions, values, {\n    hidden: getBooleanProp(node.props, \"hidden\"),\n    required: getBooleanProp(node.props, \"required\"),\n    readonly: getBooleanProp(node.props, \"readonly\"),\n    disabled: getBooleanProp(node.props, \"disabled\"),\n  });\n}\n"],"mappings":";;;;AAKA,SAAgB,kBAAkB,MAAwB;CACxD,MAAM,SAAS,cAAc;CAC7B,MAAM,aAAa,KAAK,OAAO;CAE/B,OAAO,mBAAmB,YAAY,QAAQ;EAC5C,QAAQ,eAAe,KAAK,OAAO,QAAQ;EAC3C,UAAU,eAAe,KAAK,OAAO,UAAU;EAC/C,UAAU,eAAe,KAAK,OAAO,UAAU;EAC/C,UAAU,eAAe,KAAK,OAAO,UAAU;CACjD,CAAC;AACH"}
+{"version":3,"file":"use-dependent-field.js","names":[],"sources":["../../../resources/js/form/components/use-dependent-field.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { type FieldState, evaluateConditions } from \"./conditions\";\nimport { fieldProps } from \"./field-props\";\nimport { useFieldScope } from \"./field-scope\";\nimport { useFormValues } from \"./values\";\n\nexport function useDependentField(node: Node): FieldState {\n  const values = useFormValues();\n  const scope = useFieldScope();\n  const props = fieldProps(node);\n  // Bare condition names resolve to row siblings first; form values remain the fallback.\n  const conditionValues = scope ? { ...values, ...scope.values } : values;\n\n  return evaluateConditions(props.conditions ?? undefined, conditionValues, {\n    hidden: props.hidden ?? false,\n    required: props.required ?? false,\n    readOnly: props.readOnly ?? false,\n    disabled: props.disabled ?? false,\n  });\n}\n"],"mappings":";;;;;AAMA,SAAgB,kBAAkB,MAAwB;CACxD,MAAM,SAAS,cAAc;CAC7B,MAAM,QAAQ,cAAc;CAC5B,MAAM,QAAQ,WAAW,IAAI;CAE7B,MAAM,kBAAkB,QAAQ;EAAE,GAAG;EAAQ,GAAG,MAAM;CAAO,IAAI;CAEjE,OAAO,mBAAmB,MAAM,cAAc,KAAA,GAAW,iBAAiB;EACxE,QAAQ,MAAM,UAAU;EACxB,UAAU,MAAM,YAAY;EAC5B,UAAU,MAAM,YAAY;EAC5B,UAAU,MAAM,YAAY;CAC9B,CAAC;AACH"}

package/dist/form/components/use-field-commit.d.ts

@@ -10,5 +10,9 @@ export type FieldCommit = {
  * The shared field-mutation contract every form field uses to write its value
  * and drive precognition. Fields that validate on change call `commit`; fields
  * that validate on blur/close (rich editor, select) call `change` then `blur`.
+ *
+ * When called inside a `FieldScopeProvider`, writes go through the scope's
+ * `setValue` and error paths use the scoped dot-key; outside a scope the
+ * behavior is identical to before.
  */
 export declare function useFieldCommit(): FieldCommit;

package/dist/form/components/use-field-commit.js

@@ -1,26 +1,40 @@
 import { useFormContext } from "./context.js";
+import { usePrefillController } from "./prefill-context.js";
+import { useFieldScope } from "./field-scope.js";
 import { useSetFormValue } from "./values.js";
 //#region resources/js/form/components/use-field-commit.ts
 /**
 * The shared field-mutation contract every form field uses to write its value
 * and drive precognition. Fields that validate on change call `commit`; fields
 * that validate on blur/close (rich editor, select) call `change` then `blur`.
+*
+* When called inside a `FieldScopeProvider`, writes go through the scope's
+* `setValue` and error paths use the scoped dot-key; outside a scope the
+* behavior is identical to before.
 */
 function useFieldCommit() {
 	const { clearErrors, precognitive, validate } = useFormContext();
-	const setValue = useSetFormValue();
+	const setGlobal = useSetFormValue();
+	const scope = useFieldScope();
+	const prefill = usePrefillController();
+	const write = (name, value) => {
+		if (scope) scope.setValue(name, value);
+		else setGlobal(name, value);
+		prefill?.markUserEdit(scope ? scope.overrideKey(name) : name);
+	};
+	const errorPath = (name) => scope ? scope.errorKey(name) : name;
 	return {
 		commit(name, value) {
-			setValue(name, value);
-			if (precognitive) validate(name);
-			else clearErrors(name);
+			write(name, value);
+			if (precognitive) validate(errorPath(name));
+			else clearErrors(errorPath(name));
 		},
 		change(name, value) {
-			setValue(name, value);
-			clearErrors(name);
+			write(name, value);
+			clearErrors(errorPath(name));
 		},
 		blur(name) {
-			if (precognitive) validate(name);
+			if (precognitive) validate(errorPath(name));
 		}
 	};
 }

package/dist/form/components/use-field-commit.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-field-commit.js","names":[],"sources":["../../../resources/js/form/components/use-field-commit.ts"],"sourcesContent":["import { useFormContext } from \"./context\";\nimport { useSetFormValue } from \"./values\";\n\nexport type FieldCommit = {\n  /** Write the value and validate immediately (precognitive) or clear errors. */\n  commit: (name: string, value: unknown) => void;\n  /** Write the value and clear errors, deferring validation to a later `blur`. */\n  change: (name: string, value: unknown) => void;\n  /** Validate the field now if precognitive (e.g. on blur or popover close). */\n  blur: (name: string) => void;\n};\n\n/**\n * The shared field-mutation contract every form field uses to write its value\n * and drive precognition. Fields that validate on change call `commit`; fields\n * that validate on blur/close (rich editor, select) call `change` then `blur`.\n */\nexport function useFieldCommit(): FieldCommit {\n  const { clearErrors, precognitive, validate } = useFormContext();\n  const setValue = useSetFormValue();\n\n  return {\n    commit(name, value) {\n      setValue(name, value);\n      if (precognitive) {\n        validate(name);\n      } else {\n        clearErrors(name);\n      }\n    },\n    change(name, value) {\n      setValue(name, value);\n      clearErrors(name);\n    },\n    blur(name) {\n      if (precognitive) {\n        validate(name);\n      }\n    },\n  };\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,iBAA8B;CAC5C,MAAM,EAAE,aAAa,cAAc,aAAa,eAAe;CAC/D,MAAM,WAAW,gBAAgB;CAEjC,OAAO;EACL,OAAO,MAAM,OAAO;GAClB,SAAS,MAAM,KAAK;GACpB,IAAI,cACF,SAAS,IAAI;QAEb,YAAY,IAAI;EAEpB;EACA,OAAO,MAAM,OAAO;GAClB,SAAS,MAAM,KAAK;GACpB,YAAY,IAAI;EAClB;EACA,KAAK,MAAM;GACT,IAAI,cACF,SAAS,IAAI;EAEjB;CACF;AACF"}
+{"version":3,"file":"use-field-commit.js","names":[],"sources":["../../../resources/js/form/components/use-field-commit.ts"],"sourcesContent":["import { useFieldScope } from \"./field-scope\";\nimport { useFormContext } from \"./context\";\nimport { usePrefillController } from \"./prefill-context\";\nimport { useSetFormValue } from \"./values\";\n\nexport type FieldCommit = {\n  /** Write the value and validate immediately (precognitive) or clear errors. */\n  commit: (name: string, value: unknown) => void;\n  /** Write the value and clear errors, deferring validation to a later `blur`. */\n  change: (name: string, value: unknown) => void;\n  /** Validate the field now if precognitive (e.g. on blur or popover close). */\n  blur: (name: string) => void;\n};\n\n/**\n * The shared field-mutation contract every form field uses to write its value\n * and drive precognition. Fields that validate on change call `commit`; fields\n * that validate on blur/close (rich editor, select) call `change` then `blur`.\n *\n * When called inside a `FieldScopeProvider`, writes go through the scope's\n * `setValue` and error paths use the scoped dot-key; outside a scope the\n * behavior is identical to before.\n */\nexport function useFieldCommit(): FieldCommit {\n  const { clearErrors, precognitive, validate } = useFormContext();\n  const setGlobal = useSetFormValue();\n  const scope = useFieldScope();\n  const prefill = usePrefillController();\n\n  const write = (name: string, value: unknown): void => {\n    if (scope) {\n      scope.setValue(name, value);\n    } else {\n      setGlobal(name, value);\n    }\n    prefill?.markUserEdit(scope ? scope.overrideKey(name) : name);\n  };\n  const errorPath = (name: string): string => (scope ? scope.errorKey(name) : name);\n\n  return {\n    commit(name, value) {\n      write(name, value);\n      if (precognitive) {\n        validate(errorPath(name));\n      } else {\n        clearErrors(errorPath(name));\n      }\n    },\n    change(name, value) {\n      write(name, value);\n      clearErrors(errorPath(name));\n    },\n    blur(name) {\n      if (precognitive) {\n        validate(errorPath(name));\n      }\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;AAuBA,SAAgB,iBAA8B;CAC5C,MAAM,EAAE,aAAa,cAAc,aAAa,eAAe;CAC/D,MAAM,YAAY,gBAAgB;CAClC,MAAM,QAAQ,cAAc;CAC5B,MAAM,UAAU,qBAAqB;CAErC,MAAM,SAAS,MAAc,UAAyB;EACpD,IAAI,OACF,MAAM,SAAS,MAAM,KAAK;OAE1B,UAAU,MAAM,KAAK;EAEvB,SAAS,aAAa,QAAQ,MAAM,YAAY,IAAI,IAAI,IAAI;CAC9D;CACA,MAAM,aAAa,SAA0B,QAAQ,MAAM,SAAS,IAAI,IAAI;CAE5E,OAAO;EACL,OAAO,MAAM,OAAO;GAClB,MAAM,MAAM,KAAK;GACjB,IAAI,cACF,SAAS,UAAU,IAAI,CAAC;QAExB,YAAY,UAAU,IAAI,CAAC;EAE/B;EACA,OAAO,MAAM,OAAO;GAClB,MAAM,MAAM,KAAK;GACjB,YAAY,UAAU,IAAI,CAAC;EAC7B;EACA,KAAK,MAAM;GACT,IAAI,cACF,SAAS,UAAU,IAAI,CAAC;EAE5B;CACF;AACF"}

package/dist/form/components/use-form-resolver.d.ts

@@ -1,2 +1,7 @@
-import { Node } from '../../../../core/types';
-export declare function useFormResolver(action: string, componentRef: string, nodes: Node[] | undefined): Record<string, Node>;
+import { Node } from '../../core/types';
+import { PrefillController } from './prefill-context';
+export type FormResolver = {
+    nodes: Record<string, Node>;
+    markUserEdit: PrefillController["markUserEdit"];
+};
+export declare function useFormResolver(action: string, componentRef: string, nodes: Node[] | undefined): FormResolver;

package/dist/form/components/use-form-resolver.js

@@ -1,31 +1,64 @@
-import { getBooleanProp } from "../../core/props.js";
+import { walkFields } from "./field-props.js";
 import { postFormAction } from "./form-transport.js";
+import { getPath } from "./form-path.js";
+import { applyPrefillValue, collectPrefillTargets, pathsToClear, pruneOverrides, seededOverrides } from "./prefill-targets.js";
 import { useFormValues, useSetFormValue } from "./values.js";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region resources/js/form/components/use-form-resolver.ts
-function collectWatch(nodes, keys, state) {
-	for (const child of nodes ?? []) {
-		const dependsOnKeys = child.props?.dependsOnKeys;
-		if (Array.isArray(dependsOnKeys)) for (const key of dependsOnKeys) keys.add(String(key));
-		if (getBooleanProp(child.props, "dependsOnAny")) state.any = true;
-		collectWatch(child.children, keys, state);
-	}
-}
 function useFormResolver(action, componentRef, nodes) {
 	const values = useFormValues();
 	const setValue = useSetFormValue();
 	const [resolved, setResolved] = useState({});
+	const targets = useMemo(() => collectPrefillTargets(nodes, values), [nodes, values]);
+	const overrides = useRef(/* @__PURE__ */ new Set());
+	const seededOverrideKeys = useRef(/* @__PURE__ */ new Set());
+	const previousValues = useRef(values);
+	const previousTargets = useRef(targets);
+	const targetsRef = useRef(targets);
+	targetsRef.current = targets;
+	useLayoutEffect(() => {
+		const liveOverrideKeys = new Set(targets.map((target) => target.overrideKey));
+		seededOverrideKeys.current = new Set([...seededOverrideKeys.current].filter((overrideKey) => liveOverrideKeys.has(overrideKey)));
+		const freshTargets = targets.filter((target) => !seededOverrideKeys.current.has(target.overrideKey));
+		for (const overrideKey of seededOverrides(freshTargets, values)) overrides.current.add(overrideKey);
+		for (const target of freshTargets) seededOverrideKeys.current.add(target.overrideKey);
+	}, [targets, values]);
+	const markUserEdit = useCallback((overrideKey) => {
+		overrides.current.add(overrideKey);
+	}, []);
 	const watch = useMemo(() => {
 		const keys = /* @__PURE__ */ new Set();
-		const state = { any: false };
-		collectWatch(nodes, keys, state);
+		let any = false;
+		walkFields(nodes, (props) => {
+			if (Array.isArray(props.dependsOnKeys)) for (const key of props.dependsOnKeys) keys.add(String(key));
+			if (props.dependsOnAny) any = true;
+		});
 		return {
 			keys: [...keys],
-			any: state.any
+			any
 		};
 	}, [nodes]);
+	const watchPaths = useMemo(() => {
+		const set = new Set(watch.keys);
+		for (const target of targets) {
+			for (const dep of target.resetOn) set.add(dep);
+			for (const dep of target.refreshOn) set.add(dep);
+		}
+		return [...set];
+	}, [watch.keys, targets]);
 	useEffect(() => {
-		if (watch.keys.length === 0 && !watch.any) return;
+		if (watchPaths.length === 0 && !watch.any) return;
+		const previous = previousValues.current;
+		previousValues.current = values;
+		for (const overrideKey of pathsToClear({
+			targets: previousTargets.current,
+			values: previous
+		}, {
+			targets: targetsRef.current,
+			values
+		})) overrides.current.delete(overrideKey);
+		previousTargets.current = targetsRef.current;
+		overrides.current = pruneOverrides(overrides.current, targetsRef.current);
 		const controller = new AbortController();
 		const timer = window.setTimeout(() => {
 			postFormAction(action, componentRef, {
@@ -34,6 +67,11 @@ function useFormResolver(action, componentRef, nodes) {
 			}, controller.signal).then((response) => {
 				if (!response) return;
 				for (const [name, value] of Object.entries(response.values ?? {})) setValue(name, value);
+				const targetsByPath = new Map(targetsRef.current.map((target) => [target.path, target]));
+				for (const [path, value] of Object.entries(response.prefill ?? {})) {
+					const target = targetsByPath.get(path);
+					if (target && !overrides.current.has(target.overrideKey)) applyPrefillValue(setValue, path, value);
+				}
 				if (response.fields) setResolved(response.fields);
 			}).catch(() => {});
 		}, 250);
@@ -42,14 +80,16 @@ function useFormResolver(action, componentRef, nodes) {
 			controller.abort();
 		};
 	}, [
-		watch.any ? JSON.stringify(values) : JSON.stringify(watch.keys.map((key) => values[key])),
+		watch.any ? values : JSON.stringify(watchPaths.map((path) => getPath(values, path))),
 		action,
 		componentRef,
-		watch.keys.length,
 		watch.any,
 		setValue
 	]);
-	return resolved;
+	return {
+		nodes: resolved,
+		markUserEdit
+	};
 }
 //#endregion
 export { useFormResolver };

package/dist/form/components/use-form-resolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-form-resolver.js","names":[],"sources":["../../../resources/js/form/components/use-form-resolver.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { getBooleanProp } from \"@lattice/lattice/core/props\";\nimport type { Node } from \"@lattice/lattice/core/types\";\nimport { FORM_DEBOUNCE_MS, postFormAction } from \"./form-transport\";\nimport { useFormValues, useSetFormValue } from \"./values\";\n\ntype ResolveResponse = {\n  fields?: Record<string, Node>;\n  values?: Record<string, unknown>;\n};\n\nfunction collectWatch(nodes: Node[] | undefined, keys: Set<string>, state: { any: boolean }): void {\n  for (const child of nodes ?? []) {\n    const dependsOnKeys = child.props?.dependsOnKeys;\n    if (Array.isArray(dependsOnKeys)) {\n      for (const key of dependsOnKeys) {\n        keys.add(String(key));\n      }\n    }\n    if (getBooleanProp(child.props, \"dependsOnAny\")) {\n      state.any = true;\n    }\n    collectWatch(child.children, keys, state);\n  }\n}\n\nexport function useFormResolver(\n  action: string,\n  componentRef: string,\n  nodes: Node[] | undefined,\n): Record<string, Node> {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const [resolved, setResolved] = useState<Record<string, Node>>({});\n\n  const watch = useMemo(() => {\n    const keys = new Set<string>();\n    const state = { any: false };\n    collectWatch(nodes, keys, state);\n    return { keys: [...keys], any: state.any };\n  }, [nodes]);\n\n  const watched = watch.any\n    ? JSON.stringify(values)\n    : JSON.stringify(watch.keys.map((key) => values[key]));\n\n  useEffect(() => {\n    if (watch.keys.length === 0 && !watch.any) {\n      return;\n    }\n\n    const controller = new AbortController();\n\n    const timer = window.setTimeout(() => {\n      void postFormAction<ResolveResponse>(\n        action,\n        componentRef,\n        { _resolve: true, ...values },\n        controller.signal,\n      )\n        .then((response) => {\n          if (!response) {\n            return;\n          }\n          for (const [name, value] of Object.entries(response.values ?? {})) {\n            setValue(name, value);\n          }\n          if (response.fields) {\n            setResolved(response.fields);\n          }\n        })\n        .catch(() => {});\n    }, FORM_DEBOUNCE_MS);\n\n    return () => {\n      window.clearTimeout(timer);\n      controller.abort();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [watched, action, componentRef, watch.keys.length, watch.any, setValue]);\n\n  return resolved;\n}\n"],"mappings":";;;;;AAWA,SAAS,aAAa,OAA2B,MAAmB,OAA+B;CACjG,KAAK,MAAM,SAAS,SAAS,CAAC,GAAG;EAC/B,MAAM,gBAAgB,MAAM,OAAO;EACnC,IAAI,MAAM,QAAQ,aAAa,GAC7B,KAAK,MAAM,OAAO,eAChB,KAAK,IAAI,OAAO,GAAG,CAAC;EAGxB,IAAI,eAAe,MAAM,OAAO,cAAc,GAC5C,MAAM,MAAM;EAEd,aAAa,MAAM,UAAU,MAAM,KAAK;CAC1C;AACF;AAEA,SAAgB,gBACd,QACA,cACA,OACsB;CACtB,MAAM,SAAS,cAAc;CAC7B,MAAM,WAAW,gBAAgB;CACjC,MAAM,CAAC,UAAU,eAAe,SAA+B,CAAC,CAAC;CAEjE,MAAM,QAAQ,cAAc;EAC1B,MAAM,uBAAO,IAAI,IAAY;EAC7B,MAAM,QAAQ,EAAE,KAAK,MAAM;EAC3B,aAAa,OAAO,MAAM,KAAK;EAC/B,OAAO;GAAE,MAAM,CAAC,GAAG,IAAI;GAAG,KAAK,MAAM;EAAI;CAC3C,GAAG,CAAC,KAAK,CAAC;CAMV,gBAAgB;EACd,IAAI,MAAM,KAAK,WAAW,KAAK,CAAC,MAAM,KACpC;EAGF,MAAM,aAAa,IAAI,gBAAgB;EAEvC,MAAM,QAAQ,OAAO,iBAAiB;GACpC,eACE,QACA,cACA;IAAE,UAAU;IAAM,GAAG;GAAO,GAC5B,WAAW,MACb,EACG,MAAM,aAAa;IAClB,IAAI,CAAC,UACH;IAEF,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,SAAS,UAAU,CAAC,CAAC,GAC9D,SAAS,MAAM,KAAK;IAEtB,IAAI,SAAS,QACX,YAAY,SAAS,MAAM;GAE/B,CAAC,EACA,YAAY,CAAC,CAAC;EACnB,GAAA,GAAmB;EAEnB,aAAa;GACX,OAAO,aAAa,KAAK;GACzB,WAAW,MAAM;EACnB;CAEF,GAAG;EArCa,MAAM,MAClB,KAAK,UAAU,MAAM,IACrB,KAAK,UAAU,MAAM,KAAK,KAAK,QAAQ,OAAO,IAAI,CAAC;EAmC1C;EAAQ;EAAc,MAAM,KAAK;EAAQ,MAAM;EAAK;CAAQ,CAAC;CAE1E,OAAO;AACT"}
+{"version":3,"file":"use-form-resolver.js","names":[],"sources":["../../../resources/js/form/components/use-form-resolver.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { walkFields } from \"./field-props\";\nimport { FORM_DEBOUNCE_MS, postFormAction } from \"./form-transport\";\nimport {\n  applyPrefillValue,\n  collectPrefillTargets,\n  getPath,\n  pathsToClear,\n  pruneOverrides,\n  seededOverrides,\n} from \"./prefill-targets\";\nimport type { PrefillController } from \"./prefill-context\";\nimport { useFormValues, useSetFormValue } from \"./values\";\n\ntype ResolveResponse = {\n  fields?: Record<string, Node>;\n  values?: Record<string, unknown>;\n  prefill?: Record<string, unknown>;\n};\n\nexport type FormResolver = {\n  nodes: Record<string, Node>;\n  markUserEdit: PrefillController[\"markUserEdit\"];\n};\n\nexport function useFormResolver(\n  action: string,\n  componentRef: string,\n  nodes: Node[] | undefined,\n): FormResolver {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const [resolved, setResolved] = useState<Record<string, Node>>({});\n\n  const targets = useMemo(() => collectPrefillTargets(nodes, values), [nodes, values]);\n\n  const overrides = useRef<Set<string>>(new Set());\n  const seededOverrideKeys = useRef<Set<string>>(new Set());\n  const previousValues = useRef<Record<string, unknown>>(values);\n  const previousTargets = useRef(targets);\n\n  // Read targets via a ref inside the effect: `targets` changes identity on every\n  // value change, but the effect must fire only when `watchSignature` changes\n  // (which already reflects added/removed target paths). Keeping `targets` out of\n  // the dep array preserves the targeted watch in non-\"any\" mode.\n  const targetsRef = useRef(targets);\n  targetsRef.current = targets;\n\n  useLayoutEffect(() => {\n    const liveOverrideKeys = new Set(targets.map((target) => target.overrideKey));\n    seededOverrideKeys.current = new Set(\n      [...seededOverrideKeys.current].filter((overrideKey) => liveOverrideKeys.has(overrideKey)),\n    );\n    const freshTargets = targets.filter(\n      (target) => !seededOverrideKeys.current.has(target.overrideKey),\n    );\n\n    // Layout ordering seeds loaded values before the first resolve effect can apply prefill.\n    for (const overrideKey of seededOverrides(freshTargets, values)) {\n      overrides.current.add(overrideKey);\n    }\n\n    for (const target of freshTargets) {\n      seededOverrideKeys.current.add(target.overrideKey);\n    }\n  }, [targets, values]);\n\n  const markUserEdit = useCallback((overrideKey: string) => {\n    overrides.current.add(overrideKey);\n  }, []);\n\n  const watch = useMemo(() => {\n    const keys = new Set<string>();\n    let any = false;\n    walkFields(nodes, (props) => {\n      if (Array.isArray(props.dependsOnKeys)) {\n        for (const key of props.dependsOnKeys) {\n          keys.add(String(key));\n        }\n      }\n      if (props.dependsOnAny) {\n        any = true;\n      }\n    });\n    return { keys: [...keys], any };\n  }, [nodes]);\n\n  const watchPaths = useMemo(() => {\n    const set = new Set<string>(watch.keys);\n    for (const target of targets) {\n      for (const dep of target.resetOn) {\n        set.add(dep);\n      }\n      for (const dep of target.refreshOn) {\n        set.add(dep);\n      }\n    }\n    return [...set];\n  }, [watch.keys, targets]);\n\n  // In \"any\" mode the values store keeps a stable reference until something\n  // actually changes, so its identity is the change signal. Otherwise hash the\n  // watched paths (form-level and per-row).\n  const watchSignature = watch.any\n    ? values\n    : JSON.stringify(watchPaths.map((path) => getPath(values, path)));\n\n  useEffect(() => {\n    if (watchPaths.length === 0 && !watch.any) {\n      return;\n    }\n\n    const previous = previousValues.current;\n    previousValues.current = values;\n\n    // `resetOn` deps unlock a path (a fresh product gives a fresh price); `refreshOn`\n    // deps only re-ask the server and never clear an override (a customer change\n    // re-prices untouched rows but leaves user-edited ones alone).\n    for (const overrideKey of pathsToClear(\n      { targets: previousTargets.current, values: previous },\n      { targets: targetsRef.current, values },\n    )) {\n      overrides.current.delete(overrideKey);\n    }\n    previousTargets.current = targetsRef.current;\n\n    // Override ownership is row-id keyed, so pruning removes departed rows without reindex drift.\n    overrides.current = pruneOverrides(overrides.current, targetsRef.current);\n\n    const controller = new AbortController();\n\n    const timer = window.setTimeout(() => {\n      void postFormAction<ResolveResponse>(\n        action,\n        componentRef,\n        { _resolve: true, ...values },\n        controller.signal,\n      )\n        .then((response) => {\n          if (!response) {\n            return;\n          }\n          for (const [name, value] of Object.entries(response.values ?? {})) {\n            setValue(name, value);\n          }\n          const targetsByPath = new Map(\n            targetsRef.current.map((target) => [target.path, target] as const),\n          );\n          for (const [path, value] of Object.entries(response.prefill ?? {})) {\n            const target = targetsByPath.get(path);\n\n            if (target && !overrides.current.has(target.overrideKey)) {\n              applyPrefillValue(setValue, path, value);\n            }\n          }\n          if (response.fields) {\n            setResolved(response.fields);\n          }\n        })\n        .catch(() => {});\n    }, FORM_DEBOUNCE_MS);\n\n    return () => {\n      window.clearTimeout(timer);\n      controller.abort();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [watchSignature, action, componentRef, watch.any, setValue]);\n\n  return { nodes: resolved, markUserEdit };\n}\n"],"mappings":";;;;;;;AA0BA,SAAgB,gBACd,QACA,cACA,OACc;CACd,MAAM,SAAS,cAAc;CAC7B,MAAM,WAAW,gBAAgB;CACjC,MAAM,CAAC,UAAU,eAAe,SAA+B,CAAC,CAAC;CAEjE,MAAM,UAAU,cAAc,sBAAsB,OAAO,MAAM,GAAG,CAAC,OAAO,MAAM,CAAC;CAEnF,MAAM,YAAY,uBAAoB,IAAI,IAAI,CAAC;CAC/C,MAAM,qBAAqB,uBAAoB,IAAI,IAAI,CAAC;CACxD,MAAM,iBAAiB,OAAgC,MAAM;CAC7D,MAAM,kBAAkB,OAAO,OAAO;CAMtC,MAAM,aAAa,OAAO,OAAO;CACjC,WAAW,UAAU;CAErB,sBAAsB;EACpB,MAAM,mBAAmB,IAAI,IAAI,QAAQ,KAAK,WAAW,OAAO,WAAW,CAAC;EAC5E,mBAAmB,UAAU,IAAI,IAC/B,CAAC,GAAG,mBAAmB,OAAO,EAAE,QAAQ,gBAAgB,iBAAiB,IAAI,WAAW,CAAC,CAC3F;EACA,MAAM,eAAe,QAAQ,QAC1B,WAAW,CAAC,mBAAmB,QAAQ,IAAI,OAAO,WAAW,CAChE;EAGA,KAAK,MAAM,eAAe,gBAAgB,cAAc,MAAM,GAC5D,UAAU,QAAQ,IAAI,WAAW;EAGnC,KAAK,MAAM,UAAU,cACnB,mBAAmB,QAAQ,IAAI,OAAO,WAAW;CAErD,GAAG,CAAC,SAAS,MAAM,CAAC;CAEpB,MAAM,eAAe,aAAa,gBAAwB;EACxD,UAAU,QAAQ,IAAI,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,MAAM,QAAQ,cAAc;EAC1B,MAAM,uBAAO,IAAI,IAAY;EAC7B,IAAI,MAAM;EACV,WAAW,QAAQ,UAAU;GAC3B,IAAI,MAAM,QAAQ,MAAM,aAAa,GACnC,KAAK,MAAM,OAAO,MAAM,eACtB,KAAK,IAAI,OAAO,GAAG,CAAC;GAGxB,IAAI,MAAM,cACR,MAAM;EAEV,CAAC;EACD,OAAO;GAAE,MAAM,CAAC,GAAG,IAAI;GAAG;EAAI;CAChC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,aAAa,cAAc;EAC/B,MAAM,MAAM,IAAI,IAAY,MAAM,IAAI;EACtC,KAAK,MAAM,UAAU,SAAS;GAC5B,KAAK,MAAM,OAAO,OAAO,SACvB,IAAI,IAAI,GAAG;GAEb,KAAK,MAAM,OAAO,OAAO,WACvB,IAAI,IAAI,GAAG;EAEf;EACA,OAAO,CAAC,GAAG,GAAG;CAChB,GAAG,CAAC,MAAM,MAAM,OAAO,CAAC;CASxB,gBAAgB;EACd,IAAI,WAAW,WAAW,KAAK,CAAC,MAAM,KACpC;EAGF,MAAM,WAAW,eAAe;EAChC,eAAe,UAAU;EAKzB,KAAK,MAAM,eAAe,aACxB;GAAE,SAAS,gBAAgB;GAAS,QAAQ;EAAS,GACrD;GAAE,SAAS,WAAW;GAAS;EAAO,CACxC,GACE,UAAU,QAAQ,OAAO,WAAW;EAEtC,gBAAgB,UAAU,WAAW;EAGrC,UAAU,UAAU,eAAe,UAAU,SAAS,WAAW,OAAO;EAExE,MAAM,aAAa,IAAI,gBAAgB;EAEvC,MAAM,QAAQ,OAAO,iBAAiB;GACpC,eACE,QACA,cACA;IAAE,UAAU;IAAM,GAAG;GAAO,GAC5B,WAAW,MACb,EACG,MAAM,aAAa;IAClB,IAAI,CAAC,UACH;IAEF,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,SAAS,UAAU,CAAC,CAAC,GAC9D,SAAS,MAAM,KAAK;IAEtB,MAAM,gBAAgB,IAAI,IACxB,WAAW,QAAQ,KAAK,WAAW,CAAC,OAAO,MAAM,MAAM,CAAU,CACnE;IACA,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,SAAS,WAAW,CAAC,CAAC,GAAG;KAClE,MAAM,SAAS,cAAc,IAAI,IAAI;KAErC,IAAI,UAAU,CAAC,UAAU,QAAQ,IAAI,OAAO,WAAW,GACrD,kBAAkB,UAAU,MAAM,KAAK;IAE3C;IACA,IAAI,SAAS,QACX,YAAY,SAAS,MAAM;GAE/B,CAAC,EACA,YAAY,CAAC,CAAC;EACnB,GAAA,GAAmB;EAEnB,aAAa;GACX,OAAO,aAAa,KAAK;GACzB,WAAW,MAAM;EACnB;CAEF,GAAG;EAhEoB,MAAM,MACzB,SACA,KAAK,UAAU,WAAW,KAAK,SAAS,QAAQ,QAAQ,IAAI,CAAC,CAAC;EA8D9C;EAAQ;EAAc,MAAM;EAAK;CAAQ,CAAC;CAE9D,OAAO;EAAE,OAAO;EAAU;CAAa;AACzC"}

package/dist/form/components/use-seed-default.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Seed a field's default into the store so dependent fields and the submitted
+ * payload reflect it before the user interacts. Pass undefined to skip.
+ */
+export declare function useSeedDefault(name: string, value: unknown): void;

package/dist/form/components/use-seed-default.js

@@ -0,0 +1,28 @@
+import { useFieldScope } from "./field-scope.js";
+import { useFormValue, useSetFormValue } from "./values.js";
+import { useEffect } from "react";
+//#region resources/js/form/components/use-seed-default.ts
+/**
+* Seed a field's default into the store so dependent fields and the submitted
+* payload reflect it before the user interacts. Pass undefined to skip.
+*/
+function useSeedDefault(name, value) {
+	const scope = useFieldScope();
+	const globalStored = useFormValue(name);
+	const stored = scope ? scope.getValue(name) : globalStored;
+	const setValue = useSetFormValue();
+	useEffect(() => {
+		if (stored === void 0 && value !== void 0) if (scope) scope.setValue(name, value);
+		else setValue(name, value);
+	}, [
+		name,
+		value,
+		stored,
+		setValue,
+		scope
+	]);
+}
+//#endregion
+export { useSeedDefault };
+
+//# sourceMappingURL=use-seed-default.js.map

package/dist/form/components/use-seed-default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-seed-default.js","names":[],"sources":["../../../resources/js/form/components/use-seed-default.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useFieldScope } from \"./field-scope\";\nimport { useFormValue, useSetFormValue } from \"./values\";\n\n/**\n * Seed a field's default into the store so dependent fields and the submitted\n * payload reflect it before the user interacts. Pass undefined to skip.\n */\nexport function useSeedDefault(name: string, value: unknown): void {\n  const scope = useFieldScope();\n  const globalStored = useFormValue(name);\n  const stored = scope ? scope.getValue(name) : globalStored;\n  const setValue = useSetFormValue();\n\n  useEffect(() => {\n    if (stored === undefined && value !== undefined) {\n      if (scope) {\n        scope.setValue(name, value);\n      } else {\n        setValue(name, value);\n      }\n    }\n  }, [name, value, stored, setValue, scope]);\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,eAAe,MAAc,OAAsB;CACjE,MAAM,QAAQ,cAAc;CAC5B,MAAM,eAAe,aAAa,IAAI;CACtC,MAAM,SAAS,QAAQ,MAAM,SAAS,IAAI,IAAI;CAC9C,MAAM,WAAW,gBAAgB;CAEjC,gBAAgB;EACd,IAAI,WAAW,KAAA,KAAa,UAAU,KAAA,GACpC,IAAI,OACF,MAAM,SAAS,MAAM,KAAK;OAE1B,SAAS,MAAM,KAAK;CAG1B,GAAG;EAAC;EAAM;EAAO;EAAQ;EAAU;CAAK,CAAC;AAC3C"}

package/dist/form/components/values.js

@@ -1,16 +1,31 @@
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { getPath, setPath } from "./form-path.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/values.tsx
 var FormValuesContext = createContext({
 	values: {},
 	setValue: () => {}
 });
+function valuesEqual(a, b) {
+	if (Object.is(a, b)) return true;
+	if (!a || !b || typeof a !== "object" || typeof b !== "object") return false;
+	if (Array.isArray(a) || Array.isArray(b)) return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((value, index) => valuesEqual(value, b[index]));
+	const aEntries = Object.entries(a);
+	const bObject = b;
+	return aEntries.length === Object.keys(bObject).length && aEntries.every(([key, value]) => valuesEqual(value, bObject[key]));
+}
 function FormValuesProvider({ initial, children }) {
 	const [values, setValues] = useState(initial);
+	const initialRef = useRef(initial);
+	useEffect(() => {
+		if (valuesEqual(initialRef.current, initial)) return;
+		initialRef.current = initial;
+		setValues(initial);
+	}, [initial]);
 	const setValue = useCallback((name, value) => {
-		setValues((current) => Object.is(current[name], value) ? current : {
-			...current,
-			[name]: value
+		setValues((current) => {
+			const next = typeof value === "function" ? value(getPath(current, name)) : value;
+			return Object.is(getPath(current, name), next) ? current : setPath(current, name, next);
 		});
 	}, []);
 	const contextValue = useMemo(() => ({
@@ -26,7 +41,7 @@ function useFormValues() {
 	return useContext(FormValuesContext).values;
 }
 function useFormValue(name) {
-	return useContext(FormValuesContext).values[name];
+	return getPath(useContext(FormValuesContext).values, name);
 }
 function useSetFormValue() {
 	return useContext(FormValuesContext).setValue;

package/dist/form/components/values.js.map

@@ -1 +1 @@
-{"version":3,"file":"values.js","names":[],"sources":["../../../resources/js/form/components/values.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useState } from \"react\";\n\ntype FormValuesContextValue = {\n  values: Record<string, unknown>;\n  setValue: (name: string, value: unknown) => void;\n};\n\nconst FormValuesContext = createContext<FormValuesContextValue>({\n  values: {},\n  setValue: () => {},\n});\n\nexport function FormValuesProvider({\n  initial,\n  children,\n}: {\n  initial: Record<string, unknown>;\n  children: React.ReactNode;\n}) {\n  const [values, setValues] = useState<Record<string, unknown>>(initial);\n\n  const setValue = useCallback((name: string, value: unknown) => {\n    setValues((current) =>\n      Object.is(current[name], value) ? current : { ...current, [name]: value },\n    );\n  }, []);\n\n  const contextValue = useMemo(() => ({ values, setValue }), [values, setValue]);\n\n  return <FormValuesContext.Provider value={contextValue}>{children}</FormValuesContext.Provider>;\n}\n\nexport function useFormValues(): Record<string, unknown> {\n  return useContext(FormValuesContext).values;\n}\n\nexport function useFormValue(name: string): unknown {\n  return useContext(FormValuesContext).values[name];\n}\n\nexport function useSetFormValue(): (name: string, value: unknown) => void {\n  return useContext(FormValuesContext).setValue;\n}\n"],"mappings":";;;AAOA,IAAM,oBAAoB,cAAsC;CAC9D,QAAQ,CAAC;CACT,gBAAgB,CAAC;AACnB,CAAC;AAED,SAAgB,mBAAmB,EACjC,SACA,YAIC;CACD,MAAM,CAAC,QAAQ,aAAa,SAAkC,OAAO;CAErE,MAAM,WAAW,aAAa,MAAc,UAAmB;EAC7D,WAAW,YACT,OAAO,GAAG,QAAQ,OAAO,KAAK,IAAI,UAAU;GAAE,GAAG;IAAU,OAAO;EAAM,CAC1E;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,eAAe;EAAE;EAAQ;CAAS,IAAI,CAAC,QAAQ,QAAQ,CAAC;CAE7E,OAAO,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EAAe;CAAqC,CAAA;AAChG;AAEA,SAAgB,gBAAyC;CACvD,OAAO,WAAW,iBAAiB,EAAE;AACvC;AAEA,SAAgB,aAAa,MAAuB;CAClD,OAAO,WAAW,iBAAiB,EAAE,OAAO;AAC9C;AAEA,SAAgB,kBAA0D;CACxE,OAAO,WAAW,iBAAiB,EAAE;AACvC"}
+{"version":3,"file":"values.js","names":[],"sources":["../../../resources/js/form/components/values.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { getPath, setPath } from \"./form-path\";\n\ntype FormValuesContextValue = {\n  values: Record<string, unknown>;\n  setValue: (name: string, value: unknown) => void;\n};\n\nconst FormValuesContext = createContext<FormValuesContextValue>({\n  values: {},\n  setValue: () => {},\n});\n\nfunction valuesEqual(a: unknown, b: unknown): boolean {\n  if (Object.is(a, b)) {\n    return true;\n  }\n\n  if (!a || !b || typeof a !== \"object\" || typeof b !== \"object\") {\n    return false;\n  }\n\n  if (Array.isArray(a) || Array.isArray(b)) {\n    return (\n      Array.isArray(a) &&\n      Array.isArray(b) &&\n      a.length === b.length &&\n      a.every((value, index) => valuesEqual(value, b[index]))\n    );\n  }\n\n  const aEntries = Object.entries(a);\n  const bObject = b as Record<string, unknown>;\n\n  return (\n    aEntries.length === Object.keys(bObject).length &&\n    aEntries.every(([key, value]) => valuesEqual(value, bObject[key]))\n  );\n}\n\nexport function FormValuesProvider({\n  initial,\n  children,\n}: {\n  initial: Record<string, unknown>;\n  children: React.ReactNode;\n}) {\n  const [values, setValues] = useState<Record<string, unknown>>(initial);\n  const initialRef = useRef(initial);\n\n  useEffect(() => {\n    if (valuesEqual(initialRef.current, initial)) {\n      return;\n    }\n\n    initialRef.current = initial;\n    setValues(initial);\n  }, [initial]);\n\n  const setValue = useCallback((name: string, value: unknown) => {\n    setValues((current) => {\n      const next =\n        typeof value === \"function\"\n          ? (value as (previous: unknown) => unknown)(getPath(current, name))\n          : value;\n\n      return Object.is(getPath(current, name), next) ? current : setPath(current, name, next);\n    });\n  }, []);\n\n  const contextValue = useMemo(() => ({ values, setValue }), [values, setValue]);\n\n  return <FormValuesContext.Provider value={contextValue}>{children}</FormValuesContext.Provider>;\n}\n\nexport function useFormValues(): Record<string, unknown> {\n  return useContext(FormValuesContext).values;\n}\n\nexport function useFormValue(name: string): unknown {\n  return getPath(useContext(FormValuesContext).values, name);\n}\n\nexport function useSetFormValue(): (name: string, value: unknown) => void {\n  return useContext(FormValuesContext).setValue;\n}\n"],"mappings":";;;;AAgBA,IAAM,oBAAoB,cAAsC;CAC9D,QAAQ,CAAC;CACT,gBAAgB,CAAC;AACnB,CAAC;AAED,SAAS,YAAY,GAAY,GAAqB;CACpD,IAAI,OAAO,GAAG,GAAG,CAAC,GAChB,OAAO;CAGT,IAAI,CAAC,KAAK,CAAC,KAAK,OAAO,MAAM,YAAY,OAAO,MAAM,UACpD,OAAO;CAGT,IAAI,MAAM,QAAQ,CAAC,KAAK,MAAM,QAAQ,CAAC,GACrC,OACE,MAAM,QAAQ,CAAC,KACf,MAAM,QAAQ,CAAC,KACf,EAAE,WAAW,EAAE,UACf,EAAE,OAAO,OAAO,UAAU,YAAY,OAAO,EAAE,MAAM,CAAC;CAI1D,MAAM,WAAW,OAAO,QAAQ,CAAC;CACjC,MAAM,UAAU;CAEhB,OACE,SAAS,WAAW,OAAO,KAAK,OAAO,EAAE,UACzC,SAAS,OAAO,CAAC,KAAK,WAAW,YAAY,OAAO,QAAQ,IAAI,CAAC;AAErE;AAEA,SAAgB,mBAAmB,EACjC,SACA,YAIC;CACD,MAAM,CAAC,QAAQ,aAAa,SAAkC,OAAO;CACrE,MAAM,aAAa,OAAO,OAAO;CAEjC,gBAAgB;EACd,IAAI,YAAY,WAAW,SAAS,OAAO,GACzC;EAGF,WAAW,UAAU;EACrB,UAAU,OAAO;CACnB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,WAAW,aAAa,MAAc,UAAmB;EAC7D,WAAW,YAAY;GACrB,MAAM,OACJ,OAAO,UAAU,aACZ,MAAyC,QAAQ,SAAS,IAAI,CAAC,IAChE;GAEN,OAAO,OAAO,GAAG,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,UAAU,QAAQ,SAAS,MAAM,IAAI;EACxF,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,eAAe;EAAE;EAAQ;CAAS,IAAI,CAAC,QAAQ,QAAQ,CAAC;CAE7E,OAAO,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EAAe;CAAqC,CAAA;AAChG;AAEA,SAAgB,gBAAyC;CACvD,OAAO,WAAW,iBAAiB,EAAE;AACvC;AAEA,SAAgB,aAAa,MAAuB;CAClD,OAAO,QAAQ,WAAW,iBAAiB,EAAE,QAAQ,IAAI;AAC3D;AAEA,SAAgB,kBAA0D;CACxE,OAAO,WAAW,iBAAiB,EAAE;AACvC"}

package/dist/form/index.d.ts

@@ -1 +1 @@
-export declare const formComponents: import('../../../core/registry').Plugin;
+export declare const formComponents: import('../core/registry').Plugin;

package/dist/form/index.js

@@ -10,20 +10,22 @@ function loadFormComponent(name) {
 var formComponents = createPlugin({
 	components: {
 		form: lazyComponent(loadFormComponent("FormComponent"), { fallback: FormSkeletonComponent }),
-		"form.checkbox": lazyComponent(loadFormComponent("CheckboxComponent")),
-		"form.choice": lazyComponent(loadFormComponent("ChoiceComponent")),
-		"form.date-input": lazyComponent(loadFormComponent("DateInputComponent")),
-		"form.hidden-input": lazyComponent(loadFormComponent("HiddenInputComponent")),
-		"form.number-input": lazyComponent(loadFormComponent("NumberInputComponent")),
-		"form.password-input": lazyComponent(loadFormComponent("PasswordInputComponent")),
-		"form.rich-editor": lazyComponent(async () => {
+		"field.builder": lazyComponent(loadFormComponent("BuilderComponent")),
+		"field.checkbox": lazyComponent(loadFormComponent("CheckboxComponent")),
+		"field.choice": lazyComponent(loadFormComponent("ChoiceComponent")),
+		"field.date-input": lazyComponent(loadFormComponent("DateInputComponent")),
+		"field.file-upload": lazyComponent(loadFormComponent("FileUploadComponent")),
+		"field.hidden-input": lazyComponent(loadFormComponent("HiddenInputComponent")),
+		"field.number-input": lazyComponent(loadFormComponent("NumberInputComponent")),
+		"field.password-input": lazyComponent(loadFormComponent("PasswordInputComponent")),
+		"field.repeater": lazyComponent(loadFormComponent("RepeaterComponent")),
+		"field.rich-editor": lazyComponent(async () => {
 			const { RichEditorComponent } = await import("./components/fields/rich-editor.js");
 			return { default: RichEditorComponent };
 		}),
-		"form.select": lazyComponent(loadFormComponent("SelectComponent")),
-		"form.submit-button": lazyComponent(loadFormComponent("SubmitButtonComponent")),
-		"form.textarea": lazyComponent(loadFormComponent("TextareaComponent")),
-		"form.text-input": lazyComponent(loadFormComponent("TextInputComponent"))
+		"field.select": lazyComponent(loadFormComponent("SelectComponent")),
+		"field.textarea": lazyComponent(loadFormComponent("TextareaComponent")),
+		"field.text-input": lazyComponent(loadFormComponent("TextInputComponent"))
 	},
 	name: "lattice/form"
 });

package/dist/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/form/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice/lattice/core/registry\";\nimport type { RendererComponent, RendererComponentModule } from \"@lattice/lattice/core/types\";\nimport { FormSkeletonComponent } from \"./skeleton\";\n\ntype FormComponentName =\n  | \"CheckboxComponent\"\n  | \"ChoiceComponent\"\n  | \"DateInputComponent\"\n  | \"FormComponent\"\n  | \"HiddenInputComponent\"\n  | \"NumberInputComponent\"\n  | \"PasswordInputComponent\"\n  | \"SelectComponent\"\n  | \"SubmitButtonComponent\"\n  | \"TextareaComponent\"\n  | \"TextInputComponent\";\n\nconst loadFormComponents = () => import(\"./components\");\n\nfunction loadFormComponent<TType extends string>(\n  name: FormComponentName,\n): () => Promise<RendererComponentModule<TType>> {\n  return async () => {\n    const components = await loadFormComponents();\n\n    return {\n      default: components[name] as RendererComponent<TType>,\n    };\n  };\n}\n\nexport const formComponents = createPlugin({\n  components: {\n    form: lazyComponent(loadFormComponent(\"FormComponent\"), {\n      fallback: FormSkeletonComponent,\n    }),\n    \"form.checkbox\": lazyComponent(loadFormComponent(\"CheckboxComponent\")),\n    \"form.choice\": lazyComponent(loadFormComponent(\"ChoiceComponent\")),\n    \"form.date-input\": lazyComponent(loadFormComponent(\"DateInputComponent\")),\n    \"form.hidden-input\": lazyComponent(loadFormComponent(\"HiddenInputComponent\")),\n    \"form.number-input\": lazyComponent(loadFormComponent(\"NumberInputComponent\")),\n    \"form.password-input\": lazyComponent(loadFormComponent(\"PasswordInputComponent\")),\n    // Loaded from its own module so TipTap is split into a separate chunk,\n    // only fetched on pages that actually render a rich editor.\n    \"form.rich-editor\": lazyComponent<\"form.rich-editor\">(async () => {\n      const { RichEditorComponent } = await import(\"./components/fields/rich-editor\");\n\n      return { default: RichEditorComponent };\n    }),\n    \"form.select\": lazyComponent(loadFormComponent(\"SelectComponent\")),\n    \"form.submit-button\": lazyComponent(loadFormComponent(\"SubmitButtonComponent\")),\n    \"form.textarea\": lazyComponent(loadFormComponent(\"TextareaComponent\")),\n    \"form.text-input\": lazyComponent(loadFormComponent(\"TextInputComponent\")),\n  },\n  name: \"lattice/form\",\n});\n"],"mappings":";;;AAiBA,IAAM,2BAA2B,OAAO;AAExC,SAAS,kBACP,MAC+C;CAC/C,OAAO,YAAY;EAGjB,OAAO,EACL,UAAS,MAHc,mBAAmB,GAGtB,MACtB;CACF;AACF;AAEA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,MAAM,cAAc,kBAAkB,eAAe,GAAG,EACtD,UAAU,sBACZ,CAAC;EACD,iBAAiB,cAAc,kBAAkB,mBAAmB,CAAC;EACrE,eAAe,cAAc,kBAAkB,iBAAiB,CAAC;EACjE,mBAAmB,cAAc,kBAAkB,oBAAoB,CAAC;EACxE,qBAAqB,cAAc,kBAAkB,sBAAsB,CAAC;EAC5E,qBAAqB,cAAc,kBAAkB,sBAAsB,CAAC;EAC5E,uBAAuB,cAAc,kBAAkB,wBAAwB,CAAC;EAGhF,oBAAoB,cAAkC,YAAY;GAChE,MAAM,EAAE,wBAAwB,MAAM,OAAO;GAE7C,OAAO,EAAE,SAAS,oBAAoB;EACxC,CAAC;EACD,eAAe,cAAc,kBAAkB,iBAAiB,CAAC;EACjE,sBAAsB,cAAc,kBAAkB,uBAAuB,CAAC;EAC9E,iBAAiB,cAAc,kBAAkB,mBAAmB,CAAC;EACrE,mBAAmB,cAAc,kBAAkB,oBAAoB,CAAC;CAC1E;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/form/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponent, RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport { FormSkeletonComponent } from \"./skeleton\";\n\ntype FormComponentName =\n  | \"BuilderComponent\"\n  | \"CheckboxComponent\"\n  | \"ChoiceComponent\"\n  | \"DateInputComponent\"\n  | \"FileUploadComponent\"\n  | \"FormComponent\"\n  | \"HiddenInputComponent\"\n  | \"NumberInputComponent\"\n  | \"PasswordInputComponent\"\n  | \"RepeaterComponent\"\n  | \"SelectComponent\"\n  | \"TextareaComponent\"\n  | \"TextInputComponent\";\n\nconst loadFormComponents = () => import(\"./components\");\n\nfunction loadFormComponent<TType extends string>(\n  name: FormComponentName,\n): () => Promise<RendererComponentModule<TType>> {\n  return async () => {\n    const components = await loadFormComponents();\n\n    return {\n      default: components[name] as unknown as RendererComponent<TType>,\n    };\n  };\n}\n\nexport const formComponents = createPlugin({\n  components: {\n    form: lazyComponent(loadFormComponent(\"FormComponent\"), {\n      fallback: FormSkeletonComponent,\n    }),\n    \"field.builder\": lazyComponent(loadFormComponent(\"BuilderComponent\")),\n    \"field.checkbox\": lazyComponent(loadFormComponent(\"CheckboxComponent\")),\n    \"field.choice\": lazyComponent(loadFormComponent(\"ChoiceComponent\")),\n    \"field.date-input\": lazyComponent(loadFormComponent(\"DateInputComponent\")),\n    \"field.file-upload\": lazyComponent(loadFormComponent(\"FileUploadComponent\")),\n    \"field.hidden-input\": lazyComponent(loadFormComponent(\"HiddenInputComponent\")),\n    \"field.number-input\": lazyComponent(loadFormComponent(\"NumberInputComponent\")),\n    \"field.password-input\": lazyComponent(loadFormComponent(\"PasswordInputComponent\")),\n    \"field.repeater\": lazyComponent(loadFormComponent(\"RepeaterComponent\")),\n    // Loaded from its own module so TipTap is split into a separate chunk,\n    // only fetched on pages that actually render a rich editor.\n    \"field.rich-editor\": lazyComponent<\"field.rich-editor\">(async () => {\n      const { RichEditorComponent } = await import(\"./components/fields/rich-editor\");\n\n      return { default: RichEditorComponent };\n    }),\n    \"field.select\": lazyComponent(loadFormComponent(\"SelectComponent\")),\n    \"field.textarea\": lazyComponent(loadFormComponent(\"TextareaComponent\")),\n    \"field.text-input\": lazyComponent(loadFormComponent(\"TextInputComponent\")),\n  },\n  name: \"lattice/form\",\n});\n"],"mappings":";;;AAmBA,IAAM,2BAA2B,OAAO;AAExC,SAAS,kBACP,MAC+C;CAC/C,OAAO,YAAY;EAGjB,OAAO,EACL,UAAS,MAHc,mBAAmB,GAGtB,MACtB;CACF;AACF;AAEA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,MAAM,cAAc,kBAAkB,eAAe,GAAG,EACtD,UAAU,sBACZ,CAAC;EACD,iBAAiB,cAAc,kBAAkB,kBAAkB,CAAC;EACpE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;EACzE,qBAAqB,cAAc,kBAAkB,qBAAqB,CAAC;EAC3E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,sBAAsB,cAAc,kBAAkB,sBAAsB,CAAC;EAC7E,wBAAwB,cAAc,kBAAkB,wBAAwB,CAAC;EACjF,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EAGtE,qBAAqB,cAAmC,YAAY;GAClE,MAAM,EAAE,wBAAwB,MAAM,OAAO;GAE7C,OAAO,EAAE,SAAS,oBAAoB;EACxC,CAAC;EACD,gBAAgB,cAAc,kBAAkB,iBAAiB,CAAC;EAClE,kBAAkB,cAAc,kBAAkB,mBAAmB,CAAC;EACtE,oBAAoB,cAAc,kBAAkB,oBAAoB,CAAC;CAC3E;CACA,MAAM;AACR,CAAC"}

package/dist/form/skeleton.d.ts

@@ -1,2 +1,2 @@
-import { RendererComponent } from '../../../core/types';
+import { RendererComponent } from '../core/types';
 export declare const FormSkeletonComponent: RendererComponent<"form">;

package/dist/form/skeleton.js

@@ -1,17 +1,18 @@
+import { Skeleton } from "../core/components/skeleton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/skeleton.tsx
 var FormSkeletonComponent = ({ node }) => {
-	const fieldCount = Math.max(1, Math.min(4, node.children?.find((child) => child.type === "grid")?.children?.filter((child) => child.type !== "form.hidden-input").length ?? 2));
+	const fieldCount = Math.max(1, Math.min(4, node.schema?.find((child) => child.type === "grid")?.schema?.filter((child) => child.type !== "field.hidden-input").length ?? 2));
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": "true",
-		className: "mx-auto flex w-full max-w-md animate-pulse flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface p-6 shadow-xs",
+		className: "mx-auto flex w-full max-w-md flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface p-6 shadow-xs",
 		"data-lattice-skeleton": node.id ?? node.type,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "grid gap-6",
 			children: [Array.from({ length: fieldCount }).map((_, index) => /* @__PURE__ */ jsxs("div", {
 				className: "grid gap-2",
-				children: [/* @__PURE__ */ jsx("div", { className: "h-4 w-28 rounded bg-lt-muted" }), /* @__PURE__ */ jsx("div", { className: "h-10 rounded-lt-sm bg-lt-muted" })]
-			}, index)), /* @__PURE__ */ jsx("div", { className: "mt-4 h-10 rounded-lt-sm bg-lt-muted" })]
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-10" })]
+			}, index)), /* @__PURE__ */ jsx(Skeleton, { className: "mt-4 h-10" })]
 		})
 	});
 };

package/dist/form/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../resources/js/form/skeleton.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\n\nexport const FormSkeletonComponent: RendererComponent<\"form\"> = ({ node }) => {\n  const fieldCount = Math.max(\n    1,\n    Math.min(\n      4,\n      node.children\n        ?.find((child) => child.type === \"grid\")\n        ?.children?.filter((child) => child.type !== \"form.hidden-input\").length ?? 2,\n    ),\n  );\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"mx-auto flex w-full max-w-md animate-pulse flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface p-6 shadow-xs\"\n      data-lattice-skeleton={node.id ?? node.type}\n    >\n      <div className=\"grid gap-6\">\n        {Array.from({ length: fieldCount }).map((_, index) => (\n          <div className=\"grid gap-2\" key={index}>\n            <div className=\"h-4 w-28 rounded bg-lt-muted\" />\n            <div className=\"h-10 rounded-lt-sm bg-lt-muted\" />\n          </div>\n        ))}\n\n        <div className=\"mt-4 h-10 rounded-lt-sm bg-lt-muted\" />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;AAEA,IAAa,yBAAoD,EAAE,WAAW;CAC5E,MAAM,aAAa,KAAK,IACtB,GACA,KAAK,IACH,GACA,KAAK,UACD,MAAM,UAAU,MAAM,SAAS,MAAM,GACrC,UAAU,QAAQ,UAAU,MAAM,SAAS,mBAAmB,EAAE,UAAU,CAChF,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,WAAU;EACV,yBAAuB,KAAK,MAAM,KAAK;YAEvC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,MAAM,KAAK,EAAE,QAAQ,WAAW,CAAC,EAAE,KAAK,GAAG,UAC1C,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD,EAAK,WAAU,+BAAgC,CAAA,GAC/C,oBAAC,OAAD,EAAK,WAAU,iCAAkC,CAAA,CAC9C;MAH4B,KAG5B,CACN,GAED,oBAAC,OAAD,EAAK,WAAU,sCAAuC,CAAA,CACnD;;CACF,CAAA;AAET"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../resources/js/form/skeleton.tsx"],"sourcesContent":["import { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nexport const FormSkeletonComponent: RendererComponent<\"form\"> = ({ node }) => {\n  const fieldCount = Math.max(\n    1,\n    Math.min(\n      4,\n      node.schema\n        ?.find((child) => child.type === \"grid\")\n        ?.schema?.filter((child) => child.type !== \"field.hidden-input\").length ?? 2,\n    ),\n  );\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"mx-auto flex w-full max-w-md flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface p-6 shadow-xs\"\n      data-lattice-skeleton={node.id ?? node.type}\n    >\n      <div className=\"grid gap-6\">\n        {Array.from({ length: fieldCount }).map((_, index) => (\n          <div className=\"grid gap-2\" key={index}>\n            <Skeleton className=\"h-4 w-28\" />\n            <Skeleton className=\"h-10\" />\n          </div>\n        ))}\n\n        <Skeleton className=\"mt-4 h-10\" />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAGA,IAAa,yBAAoD,EAAE,WAAW;CAC5E,MAAM,aAAa,KAAK,IACtB,GACA,KAAK,IACH,GACA,KAAK,QACD,MAAM,UAAU,MAAM,SAAS,MAAM,GACrC,QAAQ,QAAQ,UAAU,MAAM,SAAS,oBAAoB,EAAE,UAAU,CAC/E,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,WAAU;EACV,yBAAuB,KAAK,MAAM,KAAK;YAEvC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,MAAM,KAAK,EAAE,QAAQ,WAAW,CAAC,EAAE,KAAK,GAAG,UAC1C,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,UAAD,EAAU,WAAU,WAAY,CAAA,GAChC,oBAAC,UAAD,EAAU,WAAU,OAAQ,CAAA,CACzB;MAH4B,KAG5B,CACN,GAED,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA,CAC9B;;CACF,CAAA;AAET"}

package/dist/i18n/backend.d.ts

@@ -0,0 +1,26 @@
+import { I18nConfig } from '../types/generated';
+/** The i18n settings the backend shares to the frontend (Inertia `lattice.i18n`). */
+export type { I18nConfig };
+export type BackendOptions = {
+    namespaces?: string[];
+    /** i18next-http-backend load path. Defaults to laravel-i18next's namespaced route. */
+    loadPath?: string;
+    /** Path that receives keys reported by saveMissing. */
+    addPath?: string;
+    /** Report missing keys back to the backend (laravel-i18next persists them). */
+    saveMissing?: boolean;
+    /** Extra request headers, e.g. the CSRF token for the saveMissing POST. */
+    customHeaders?: () => Record<string, string>;
+};
+export type ConfigureI18nOptions = {
+    namespaces?: string[];
+};
+/** Apply the i18n config shared from the backend; wires the HTTP backend only when `enabled`. */
+export declare function configureI18n(config: I18nConfig | undefined, options?: ConfigureI18nOptions): Promise<void>;
+/**
+ * Load translations from a backend such as bambamboole/laravel-i18next,
+ * overriding the renderer's inline English defaults. Call before the first
+ * render. Importing this module is the opt-in: apps that never call it don't
+ * bundle the HTTP backend.
+ */
+export declare function enableBackend(options?: BackendOptions): Promise<void>;