@lattice-php/lattice 0.3.0 → 0.5.0

package/dist/form/components/fields/text-input.js

@@ -1,5 +1,6 @@
 import { Input } from "../base/input.js";
 import { SimpleField } from "./simple-field.js";
+import { AffixGroup } from "../base/affix-group.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/text-input.tsx
 var TextInputComponent = ({ node }) => {
@@ -7,19 +8,24 @@ var TextInputComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Input, {
-			autoComplete: props.autoComplete ?? "",
-			autoFocus: props.autoFocus ?? false,
-			"data-test": testId,
-			disabled,
-			id: name,
-			name,
-			onChange: (event) => commit(event.target.value),
-			placeholder: props.placeholder ?? "",
-			readOnly,
-			tabIndex: props.tabIndex ?? void 0,
-			type: props.type ?? "text",
-			value
+		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(AffixGroup, {
+			prefix: props.prefix,
+			suffix: props.suffix,
+			children: (controlClassName) => /* @__PURE__ */ jsx(Input, {
+				autoComplete: props.autoComplete ?? "",
+				autoFocus: props.autoFocus ?? false,
+				className: controlClassName,
+				"data-test": testId,
+				disabled,
+				id: name,
+				name,
+				onChange: (event) => commit(event.target.value),
+				placeholder: props.placeholder ?? "",
+				readOnly,
+				tabIndex: props.tabIndex ?? void 0,
+				type: props.type ?? "text",
+				value
+			})
 		})
 	});
 };

package/dist/form/components/fields/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"field.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <Input\n          autoComplete={props.autoComplete ?? \"\"}\n          autoFocus={props.autoFocus ?? false}\n          data-test={testId}\n          disabled={disabled}\n          id={name}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          placeholder={props.placeholder ?? \"\"}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          type={props.type ?? \"text\"}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,OAAD;GACE,cAAc,MAAM,gBAAgB;GACpC,WAAW,MAAM,aAAa;GAC9B,aAAW;GACD;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,MAAM,eAAe;GACxB;GACV,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAM,MAAM,QAAQ;GACb;EACR,CAAA;CAEQ,CAAA;AAEjB"}
+{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { AffixGroup } from \"../base/affix-group\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"field.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <AffixGroup prefix={props.prefix} suffix={props.suffix}>\n          {(controlClassName) => (\n            <Input\n              autoComplete={props.autoComplete ?? \"\"}\n              autoFocus={props.autoFocus ?? false}\n              className={controlClassName}\n              data-test={testId}\n              disabled={disabled}\n              id={name}\n              name={name}\n              onChange={(event) => commit(event.target.value)}\n              placeholder={props.placeholder ?? \"\"}\n              readOnly={readOnly}\n              tabIndex={props.tabIndex ?? undefined}\n              type={props.type ?? \"text\"}\n              value={value}\n            />\n          )}\n        </AffixGroup>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,YAAD;GAAY,QAAQ,MAAM;GAAQ,QAAQ,MAAM;cAC5C,qBACA,oBAAC,OAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IAC9B,WAAW;IACX,aAAW;IACD;IACV,IAAI;IACE;IACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,aAAa,MAAM,eAAe;IACxB;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAM,MAAM,QAAQ;IACb;GACR,CAAA;EAEO,CAAA;CAEH,CAAA;AAEjB"}

package/dist/form/components/form.js

@@ -7,8 +7,8 @@ import { ResolvedNodesProvider } from "./resolved-nodes.js";
 import { FormValuesProvider } from "./values.js";
 import { useFormResolver } from "./use-form-resolver.js";
 import { FormSubmitButton } from "./base/submit-button.js";
-import { useEffect, useMemo } from "react";
 import { Form } from "@inertiajs/react";
+import { useEffect, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/form.tsx
 function collectFields(nodes) {
@@ -43,7 +43,7 @@ function FormBody({ action, children, componentRef, nodes, shouldRenderSubmitBut
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-6",
 				children: [children, shouldRenderSubmitButton && /* @__PURE__ */ jsx("div", {
-					className: "flex justify-end rounded-lt border border-lt-border bg-lt-surface px-6 py-4 shadow-xs",
+					className: "flex justify-end rounded-lt border border-lt-border bg-lt-surface px-6 py-4 shadow-lt-sm",
 					children: /* @__PURE__ */ jsx(FormSubmitButton, {
 						label: submitLabel,
 						summaryLabel

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

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../../resources/js/form/components/form.tsx"],"sourcesContent":["import { Form as InertiaForm } from \"@inertiajs/react\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useEffect, useMemo } from \"react\";\nimport { FormSubmitButton } from \"./base/submit-button\";\nimport { FormProvider } from \"./context\";\nimport { walkFields } from \"./field-props\";\nimport { PrefillProvider } from \"./prefill-context\";\nimport { ResolvedNodesProvider } from \"./resolved-nodes\";\nimport { useFormResolver } from \"./use-form-resolver\";\nimport { FormValuesProvider } from \"./values\";\n\ntype CollectedFields = {\n  labels: Record<string, string>;\n  values: Record<string, unknown>;\n};\n\nfunction collectFields(nodes: Node[] | undefined): CollectedFields {\n  const collected: CollectedFields = { labels: {}, values: {} };\n\n  walkFields(nodes, (props) => {\n    if (!props.name) {\n      return;\n    }\n    if (props.label) {\n      collected.labels[props.name] = props.label;\n    }\n    if (props.value !== undefined) {\n      collected.values[props.name] = props.value;\n    }\n  });\n\n  return collected;\n}\n\nfunction FormResetListener({\n  componentId,\n  reset,\n}: {\n  componentId?: string;\n  reset: (...fields: string[]) => void;\n}) {\n  useEffect(() => {\n    const handler = (event: Event) => {\n      const detail = (event as CustomEvent<{ form: string | null }>).detail;\n\n      if (!detail?.form || detail.form === componentId) {\n        reset();\n      }\n    };\n\n    window.addEventListener(LATTICE_EVENT.resetForm, handler);\n\n    return () => window.removeEventListener(LATTICE_EVENT.resetForm, handler);\n  }, [componentId, reset]);\n\n  return null;\n}\n\nfunction FormBody({\n  action,\n  children,\n  componentRef,\n  nodes,\n  shouldRenderSubmitButton,\n  submitLabel,\n  summaryLabel,\n}: {\n  action: string;\n  children: React.ReactNode;\n  componentRef: string;\n  nodes: Node[] | undefined;\n  shouldRenderSubmitButton: boolean;\n  submitLabel: string;\n  summaryLabel: string;\n}) {\n  const { nodes: resolvedNodes, markUserEdit } = useFormResolver(action, componentRef, nodes);\n\n  return (\n    <PrefillProvider value={{ markUserEdit }}>\n      <ResolvedNodesProvider nodes={resolvedNodes}>\n        <div className=\"flex flex-col gap-6\">\n          {children}\n\n          {shouldRenderSubmitButton && (\n            <div className=\"flex justify-end rounded-lt border border-lt-border bg-lt-surface px-6 py-4 shadow-xs\">\n              <FormSubmitButton label={submitLabel} summaryLabel={summaryLabel} />\n            </div>\n          )}\n        </div>\n      </ResolvedNodesProvider>\n    </PrefillProvider>\n  );\n}\n\nexport const FormComponent: RendererComponent<\"form\"> = ({ children, node }) => {\n  const props = node.props;\n  const action = props.action ?? \"#\";\n  const errorBag = props.errorBag;\n  const componentRef = props.ref ?? \"\";\n  const method = props.method ?? \"post\";\n  const precognitive = props.precognitive;\n  const resetOnError = props.resetOnError ?? false;\n  const resetOnSuccess = props.resetOnSuccess ?? [];\n  const state = props.state;\n  const { labels: fieldLabels, values: fieldValues } = useMemo(\n    () => collectFields(node.schema),\n    [node.schema],\n  );\n  const initialValues = useMemo(() => ({ ...fieldValues, ...state }), [fieldValues, state]);\n  const shouldRenderSubmitButton = props.submitButton;\n  const submitLabel = props.submitLabel ?? \"Submit\";\n  const summaryLabel = props.validationSummaryLabel;\n  const validationTimeout = props.validationTimeout ?? undefined;\n\n  return (\n    <InertiaForm\n      action={action}\n      data-lattice-component={node.id}\n      errorBag={errorBag}\n      method={method}\n      resetOnError={resetOnError}\n      resetOnSuccess={resetOnSuccess}\n      validationTimeout={precognitive ? validationTimeout : undefined}\n      headers={withHeaders(componentRef)}\n      className=\"mx-auto flex w-full max-w-2xl flex-col gap-6\"\n    >\n      {({ clearErrors, errors, processing, reset, validate }) => (\n        <FormProvider\n          value={{\n            action,\n            clearErrors: (field) => clearErrors(field),\n            componentId: node.id,\n            componentRef,\n            errors: errors as Record<string, string | undefined>,\n            fieldLabels,\n            precognitive,\n            processing,\n            validate: (field) => validate(field),\n          }}\n        >\n          <FormResetListener componentId={node.id} reset={reset} />\n\n          {props.status && (\n            <div className=\"text-center text-sm font-medium text-lt-success\">{props.status}</div>\n          )}\n\n          <FormValuesProvider initial={initialValues}>\n            <FormBody\n              action={action}\n              componentRef={componentRef}\n              nodes={node.schema}\n              shouldRenderSubmitButton={shouldRenderSubmitButton}\n              submitLabel={submitLabel}\n              summaryLabel={summaryLabel}\n            >\n              {children}\n            </FormBody>\n          </FormValuesProvider>\n        </FormProvider>\n      )}\n    </InertiaForm>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAkBA,SAAS,cAAc,OAA4C;CACjE,MAAM,YAA6B;EAAE,QAAQ,CAAC;EAAG,QAAQ,CAAC;CAAE;CAE5D,WAAW,QAAQ,UAAU;EAC3B,IAAI,CAAC,MAAM,MACT;EAEF,IAAI,MAAM,OACR,UAAU,OAAO,MAAM,QAAQ,MAAM;EAEvC,IAAI,MAAM,UAAU,KAAA,GAClB,UAAU,OAAO,MAAM,QAAQ,MAAM;CAEzC,CAAC;CAED,OAAO;AACT;AAEA,SAAS,kBAAkB,EACzB,aACA,SAIC;CACD,gBAAgB;EACd,MAAM,WAAW,UAAiB;GAChC,MAAM,SAAU,MAA+C;GAE/D,IAAI,CAAC,QAAQ,QAAQ,OAAO,SAAS,aACnC,MAAM;EAEV;EAEA,OAAO,iBAAiB,cAAc,WAAW,OAAO;EAExD,aAAa,OAAO,oBAAoB,cAAc,WAAW,OAAO;CAC1E,GAAG,CAAC,aAAa,KAAK,CAAC;CAEvB,OAAO;AACT;AAEA,SAAS,SAAS,EAChB,QACA,UACA,cACA,OACA,0BACA,aACA,gBASC;CACD,MAAM,EAAE,OAAO,eAAe,iBAAiB,gBAAgB,QAAQ,cAAc,KAAK;CAE1F,OACE,oBAAC,iBAAD;EAAiB,OAAO,EAAE,aAAa;YACrC,oBAAC,uBAAD;GAAuB,OAAO;aAC5B,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UAEA,4BACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,kBAAD;MAAkB,OAAO;MAA2B;KAAe,CAAA;IAChE,CAAA,CAEJ;;EACgB,CAAA;CACR,CAAA;AAErB;AAEA,IAAa,iBAA4C,EAAE,UAAU,WAAW;CAC9E,MAAM,QAAQ,KAAK;CACnB,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,WAAW,MAAM;CACvB,MAAM,eAAe,MAAM,OAAO;CAClC,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,eAAe,MAAM;CAC3B,MAAM,eAAe,MAAM,gBAAgB;CAC3C,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;CAChD,MAAM,QAAQ,MAAM;CACpB,MAAM,EAAE,QAAQ,aAAa,QAAQ,gBAAgB,cAC7C,cAAc,KAAK,MAAM,GAC/B,CAAC,KAAK,MAAM,CACd;CACA,MAAM,gBAAgB,eAAe;EAAE,GAAG;EAAa,GAAG;CAAM,IAAI,CAAC,aAAa,KAAK,CAAC;CACxF,MAAM,2BAA2B,MAAM;CACvC,MAAM,cAAc,MAAM,eAAe;CACzC,MAAM,eAAe,MAAM;CAC3B,MAAM,oBAAoB,MAAM,qBAAqB,KAAA;CAErD,OACE,oBAAC,MAAD;EACU;EACR,0BAAwB,KAAK;EACnB;EACF;EACM;EACE;EAChB,mBAAmB,eAAe,oBAAoB,KAAA;EACtD,SAAS,YAAY,YAAY;EACjC,WAAU;aAER,EAAE,aAAa,QAAQ,YAAY,OAAO,eAC1C,qBAAC,cAAD;GACE,OAAO;IACL;IACA,cAAc,UAAU,YAAY,KAAK;IACzC,aAAa,KAAK;IAClB;IACQ;IACR;IACA;IACA;IACA,WAAW,UAAU,SAAS,KAAK;GACrC;aAXF;IAaE,oBAAC,mBAAD;KAAmB,aAAa,KAAK;KAAW;IAAQ,CAAA;IAEvD,MAAM,UACL,oBAAC,OAAD;KAAK,WAAU;eAAmD,MAAM;IAAY,CAAA;IAGtF,oBAAC,oBAAD;KAAoB,SAAS;eAC3B,oBAAC,UAAD;MACU;MACM;MACd,OAAO,KAAK;MACc;MACb;MACC;MAEb;KACO,CAAA;IACQ,CAAA;GACR;;CAEL,CAAA;AAEjB"}
+{"version":3,"file":"form.js","names":[],"sources":["../../../resources/js/form/components/form.tsx"],"sourcesContent":["import { Form as InertiaForm } from \"@inertiajs/react\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useEffect, useMemo } from \"react\";\nimport { FormSubmitButton } from \"./base/submit-button\";\nimport { FormProvider } from \"./context\";\nimport { walkFields } from \"./field-props\";\nimport { PrefillProvider } from \"./prefill-context\";\nimport { ResolvedNodesProvider } from \"./resolved-nodes\";\nimport { useFormResolver } from \"./use-form-resolver\";\nimport { FormValuesProvider } from \"./values\";\n\ntype CollectedFields = {\n  labels: Record<string, string>;\n  values: Record<string, unknown>;\n};\n\nfunction collectFields(nodes: Node[] | undefined): CollectedFields {\n  const collected: CollectedFields = { labels: {}, values: {} };\n\n  walkFields(nodes, (props) => {\n    if (!props.name) {\n      return;\n    }\n    if (props.label) {\n      collected.labels[props.name] = props.label;\n    }\n    if (props.value !== undefined) {\n      collected.values[props.name] = props.value;\n    }\n  });\n\n  return collected;\n}\n\nfunction FormResetListener({\n  componentId,\n  reset,\n}: {\n  componentId?: string;\n  reset: (...fields: string[]) => void;\n}) {\n  useEffect(() => {\n    const handler = (event: Event) => {\n      const detail = (event as CustomEvent<{ form: string | null }>).detail;\n\n      if (!detail?.form || detail.form === componentId) {\n        reset();\n      }\n    };\n\n    window.addEventListener(LATTICE_EVENT.resetForm, handler);\n\n    return () => window.removeEventListener(LATTICE_EVENT.resetForm, handler);\n  }, [componentId, reset]);\n\n  return null;\n}\n\nfunction FormBody({\n  action,\n  children,\n  componentRef,\n  nodes,\n  shouldRenderSubmitButton,\n  submitLabel,\n  summaryLabel,\n}: {\n  action: string;\n  children: React.ReactNode;\n  componentRef: string;\n  nodes: Node[] | undefined;\n  shouldRenderSubmitButton: boolean;\n  submitLabel: string;\n  summaryLabel: string;\n}) {\n  const { nodes: resolvedNodes, markUserEdit } = useFormResolver(action, componentRef, nodes);\n\n  return (\n    <PrefillProvider value={{ markUserEdit }}>\n      <ResolvedNodesProvider nodes={resolvedNodes}>\n        <div className=\"flex flex-col gap-6\">\n          {children}\n\n          {shouldRenderSubmitButton && (\n            <div className=\"flex justify-end rounded-lt border border-lt-border bg-lt-surface px-6 py-4 shadow-lt-sm\">\n              <FormSubmitButton label={submitLabel} summaryLabel={summaryLabel} />\n            </div>\n          )}\n        </div>\n      </ResolvedNodesProvider>\n    </PrefillProvider>\n  );\n}\n\nexport const FormComponent: RendererComponent<\"form\"> = ({ children, node }) => {\n  const props = node.props;\n  const action = props.action ?? \"#\";\n  const errorBag = props.errorBag;\n  const componentRef = props.ref ?? \"\";\n  const method = props.method ?? \"post\";\n  const precognitive = props.precognitive;\n  const resetOnError = props.resetOnError ?? false;\n  const resetOnSuccess = props.resetOnSuccess ?? [];\n  const state = props.state;\n  const { labels: fieldLabels, values: fieldValues } = useMemo(\n    () => collectFields(node.schema),\n    [node.schema],\n  );\n  const initialValues = useMemo(() => ({ ...fieldValues, ...state }), [fieldValues, state]);\n  const shouldRenderSubmitButton = props.submitButton;\n  const submitLabel = props.submitLabel ?? \"Submit\";\n  const summaryLabel = props.validationSummaryLabel;\n  const validationTimeout = props.validationTimeout ?? undefined;\n\n  return (\n    <InertiaForm\n      action={action}\n      data-lattice-component={node.id}\n      errorBag={errorBag}\n      method={method}\n      resetOnError={resetOnError}\n      resetOnSuccess={resetOnSuccess}\n      validationTimeout={precognitive ? validationTimeout : undefined}\n      headers={withHeaders(componentRef)}\n      className=\"mx-auto flex w-full max-w-2xl flex-col gap-6\"\n    >\n      {({ clearErrors, errors, processing, reset, validate }) => (\n        <FormProvider\n          value={{\n            action,\n            clearErrors: (field) => clearErrors(field),\n            componentId: node.id,\n            componentRef,\n            errors: errors as Record<string, string | undefined>,\n            fieldLabels,\n            precognitive,\n            processing,\n            validate: (field) => validate(field),\n          }}\n        >\n          <FormResetListener componentId={node.id} reset={reset} />\n\n          {props.status && (\n            <div className=\"text-center text-sm font-medium text-lt-success\">{props.status}</div>\n          )}\n\n          <FormValuesProvider initial={initialValues}>\n            <FormBody\n              action={action}\n              componentRef={componentRef}\n              nodes={node.schema}\n              shouldRenderSubmitButton={shouldRenderSubmitButton}\n              submitLabel={submitLabel}\n              summaryLabel={summaryLabel}\n            >\n              {children}\n            </FormBody>\n          </FormValuesProvider>\n        </FormProvider>\n      )}\n    </InertiaForm>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAkBA,SAAS,cAAc,OAA4C;CACjE,MAAM,YAA6B;EAAE,QAAQ,CAAC;EAAG,QAAQ,CAAC;CAAE;CAE5D,WAAW,QAAQ,UAAU;EAC3B,IAAI,CAAC,MAAM,MACT;EAEF,IAAI,MAAM,OACR,UAAU,OAAO,MAAM,QAAQ,MAAM;EAEvC,IAAI,MAAM,UAAU,KAAA,GAClB,UAAU,OAAO,MAAM,QAAQ,MAAM;CAEzC,CAAC;CAED,OAAO;AACT;AAEA,SAAS,kBAAkB,EACzB,aACA,SAIC;CACD,gBAAgB;EACd,MAAM,WAAW,UAAiB;GAChC,MAAM,SAAU,MAA+C;GAE/D,IAAI,CAAC,QAAQ,QAAQ,OAAO,SAAS,aACnC,MAAM;EAEV;EAEA,OAAO,iBAAiB,cAAc,WAAW,OAAO;EAExD,aAAa,OAAO,oBAAoB,cAAc,WAAW,OAAO;CAC1E,GAAG,CAAC,aAAa,KAAK,CAAC;CAEvB,OAAO;AACT;AAEA,SAAS,SAAS,EAChB,QACA,UACA,cACA,OACA,0BACA,aACA,gBASC;CACD,MAAM,EAAE,OAAO,eAAe,iBAAiB,gBAAgB,QAAQ,cAAc,KAAK;CAE1F,OACE,oBAAC,iBAAD;EAAiB,OAAO,EAAE,aAAa;YACrC,oBAAC,uBAAD;GAAuB,OAAO;aAC5B,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UAEA,4BACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,kBAAD;MAAkB,OAAO;MAA2B;KAAe,CAAA;IAChE,CAAA,CAEJ;;EACgB,CAAA;CACR,CAAA;AAErB;AAEA,IAAa,iBAA4C,EAAE,UAAU,WAAW;CAC9E,MAAM,QAAQ,KAAK;CACnB,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,WAAW,MAAM;CACvB,MAAM,eAAe,MAAM,OAAO;CAClC,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,eAAe,MAAM;CAC3B,MAAM,eAAe,MAAM,gBAAgB;CAC3C,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;CAChD,MAAM,QAAQ,MAAM;CACpB,MAAM,EAAE,QAAQ,aAAa,QAAQ,gBAAgB,cAC7C,cAAc,KAAK,MAAM,GAC/B,CAAC,KAAK,MAAM,CACd;CACA,MAAM,gBAAgB,eAAe;EAAE,GAAG;EAAa,GAAG;CAAM,IAAI,CAAC,aAAa,KAAK,CAAC;CACxF,MAAM,2BAA2B,MAAM;CACvC,MAAM,cAAc,MAAM,eAAe;CACzC,MAAM,eAAe,MAAM;CAC3B,MAAM,oBAAoB,MAAM,qBAAqB,KAAA;CAErD,OACE,oBAAC,MAAD;EACU;EACR,0BAAwB,KAAK;EACnB;EACF;EACM;EACE;EAChB,mBAAmB,eAAe,oBAAoB,KAAA;EACtD,SAAS,YAAY,YAAY;EACjC,WAAU;aAER,EAAE,aAAa,QAAQ,YAAY,OAAO,eAC1C,qBAAC,cAAD;GACE,OAAO;IACL;IACA,cAAc,UAAU,YAAY,KAAK;IACzC,aAAa,KAAK;IAClB;IACQ;IACR;IACA;IACA;IACA,WAAW,UAAU,SAAS,KAAK;GACrC;aAXF;IAaE,oBAAC,mBAAD;KAAmB,aAAa,KAAK;KAAW;IAAQ,CAAA;IAEvD,MAAM,UACL,oBAAC,OAAD;KAAK,WAAU;eAAmD,MAAM;IAAY,CAAA;IAGtF,oBAAC,oBAAD;KAAoB,SAAS;eAC3B,oBAAC,UAAD;MACU;MACM;MACd,OAAO,KAAK;MACc;MACb;MACC;MAEb;KACO,CAAA;IACQ,CAAA;GACR;;CAEL,CAAA;AAEjB"}

package/dist/form/components/index.d.ts

@@ -6,6 +6,7 @@ export { FileUploadComponent } from './fields/file-upload';
 export { FormComponent } from './form';
 export { HiddenInputComponent } from './fields/hidden-input';
 export { NumberInputComponent } from './fields/number-input';
+export { OtpInputComponent } from './fields/otp-input';
 export { PasswordInputComponent } from './fields/password-input';
 export { RepeaterComponent } from './fields/repeater';
 export { SelectComponent } from './fields/select';

package/dist/form/components/index.js

@@ -6,9 +6,10 @@ import { DateInputComponent } from "./fields/date-input.js";
 import { FileUploadComponent } from "./fields/file-upload.js";
 import { HiddenInputComponent } from "./fields/hidden-input.js";
 import { NumberInputComponent } from "./fields/number-input.js";
+import { OtpInputComponent } from "./fields/otp-input.js";
 import { PasswordInputComponent } from "./fields/password-input.js";
 import { RepeaterComponent } from "./fields/repeater.js";
 import { SelectComponent } from "./fields/select.js";
 import { TextareaComponent } from "./fields/textarea.js";
 import { TextInputComponent } from "./fields/text-input.js";
-export { BuilderComponent, CheckboxComponent, ChoiceComponent, DateInputComponent, FileUploadComponent, FormComponent, HiddenInputComponent, NumberInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent };
+export { BuilderComponent, CheckboxComponent, ChoiceComponent, DateInputComponent, FileUploadComponent, FormComponent, HiddenInputComponent, NumberInputComponent, OtpInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent };

package/dist/form/components/prefill-targets.d.ts

@@ -11,7 +11,6 @@ type PrefillSnapshot = {
 };
 export { getPath } from './form-path';
 export declare function collectPrefillTargets(nodes: Node[] | undefined, values: Record<string, unknown>): PrefillTarget[];
-export declare function applyPrefillValue(setValue: (name: string, value: unknown) => void, path: string, value: unknown): void;
 export declare function pathsToClear(previous: PrefillSnapshot, next: PrefillSnapshot): string[];
 export declare function seededOverrides(targets: PrefillTarget[], values: Record<string, unknown>): string[];
 export declare function pruneOverrides(overrides: Set<string>, targets: PrefillTarget[]): Set<string>;

package/dist/form/components/prefill-targets.js

@@ -44,9 +44,6 @@ function collectPrefillTargets(nodes, values) {
 	walk(nodes);
 	return targets;
 }
-function applyPrefillValue(setValue, path, value) {
-	setValue(path, value);
-}
 function pathsToClear(previous, next) {
 	const previousByKey = new Map(previous.targets.map((target) => [target.overrideKey, target]));
 	return next.targets.filter((target) => {
@@ -68,6 +65,6 @@ function pruneOverrides(overrides, targets) {
 	return new Set([...overrides].filter((key) => liveKeys.has(key)));
 }
 //#endregion
-export { applyPrefillValue, collectPrefillTargets, getPath, pathsToClear, pruneOverrides, seededOverrides };
+export { collectPrefillTargets, getPath, pathsToClear, pruneOverrides, seededOverrides };
 
 //# sourceMappingURL=prefill-targets.js.map

package/dist/form/components/prefill-targets.js.map

@@ -1 +1 @@
-{"version":3,"file":"prefill-targets.js","names":[],"sources":["../../../resources/js/form/components/prefill-targets.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { fieldProps } from \"./field-props\";\nimport { appendPath, getPath } from \"./form-path\";\nimport { buildOverrideKey, rowIdFrom } from \"./override-keys\";\n\nexport type PrefillTarget = {\n  path: string;\n  overrideKey: string;\n  resetOn: string[];\n  refreshOn: string[];\n};\n\ntype PrefillSnapshot = {\n  targets: PrefillTarget[];\n  values: Record<string, unknown>;\n};\n\ntype Block = { type: string; label: string; schema: Node[] };\n\nconst ROW_COLLECTION_TYPES = new Set([\"field.builder\", \"field.repeater\"]);\n\nexport { getPath } from \"./form-path\";\n\nfunction mapDep(dep: string, rowPath: string | null): string {\n  if (dep.startsWith(\"@\")) {\n    return dep.slice(1);\n  }\n\n  return rowPath === null ? dep : appendPath(rowPath, dep);\n}\n\nfunction targetFor(\n  node: Node,\n  rowPath: string | null,\n  identityCollectionPath: string | null,\n  index = 0,\n  row: Record<string, unknown> = {},\n): PrefillTarget | null {\n  const props = fieldProps(node);\n\n  if (!props.editablePrefill || !props.name) {\n    return null;\n  }\n\n  const rowId = rowIdFrom(row);\n\n  return {\n    path: rowPath === null ? props.name : appendPath(rowPath, props.name),\n    overrideKey:\n      identityCollectionPath === null\n        ? props.name\n        : buildOverrideKey(identityCollectionPath, rowId, index, props.name),\n    resetOn: (props.prefillResetOn ?? []).map((dep) => mapDep(dep, rowPath)),\n    refreshOn: (props.prefillRefreshOn ?? []).map((dep) => mapDep(dep, rowPath)),\n  };\n}\n\nexport function collectPrefillTargets(\n  nodes: Node[] | undefined,\n  values: Record<string, unknown>,\n): PrefillTarget[] {\n  const targets: PrefillTarget[] = [];\n\n  const walk = (\n    list: Node[] | undefined,\n    rowPath: string | null = null,\n    identityRowPath: string | null = null,\n    identityCollectionPath: string | null = null,\n    index = 0,\n    row: Record<string, unknown> = {},\n  ): void => {\n    for (const node of list ?? []) {\n      if (ROW_COLLECTION_TYPES.has(node.type)) {\n        const name = fieldProps(node).name;\n        if (name) {\n          const childCollectionPath = appendPath(rowPath, name);\n          const childIdentityCollectionPath = appendPath(identityRowPath, name);\n          const storedRows = getPath(values, childCollectionPath);\n          const rows = Array.isArray(storedRows)\n            ? (storedRows as Array<Record<string, unknown>>)\n            : [];\n          const blocks = (node as unknown as { blocks?: Block[] }).blocks;\n\n          rows.forEach((childRow, childIndex) => {\n            const template = blocks\n              ? (blocks.find((block) => block.type === childRow.type)?.schema ?? [])\n              : (node.schema ?? []);\n\n            walk(\n              template,\n              appendPath(childCollectionPath, childIndex),\n              appendPath(childIdentityCollectionPath, rowIdFrom(childRow) ?? childIndex),\n              childIdentityCollectionPath,\n              childIndex,\n              childRow,\n            );\n          });\n        }\n\n        continue;\n      }\n\n      const target = targetFor(node, rowPath, identityCollectionPath, index, row);\n      if (target) {\n        targets.push(target);\n      }\n\n      walk(node.schema, rowPath, identityRowPath, identityCollectionPath, index, row);\n    }\n  };\n\n  walk(nodes);\n\n  return targets;\n}\n\nexport function applyPrefillValue(\n  setValue: (name: string, value: unknown) => void,\n  path: string,\n  value: unknown,\n): void {\n  setValue(path, value);\n}\n\nexport function pathsToClear(previous: PrefillSnapshot, next: PrefillSnapshot): string[] {\n  const previousByKey = new Map(\n    previous.targets.map((target) => [target.overrideKey, target] as const),\n  );\n\n  return next.targets\n    .filter((target) => {\n      const previousTarget = previousByKey.get(target.overrideKey);\n\n      return target.resetOn.some((dep, index) => {\n        const previousDep = previousTarget?.resetOn[index] ?? dep;\n\n        return !Object.is(getPath(previous.values, previousDep), getPath(next.values, dep));\n      });\n    })\n    .map((target) => target.overrideKey);\n}\n\nexport function seededOverrides(\n  targets: PrefillTarget[],\n  values: Record<string, unknown>,\n): string[] {\n  return targets\n    .filter((target) => {\n      const value = getPath(values, target.path);\n\n      return value !== undefined && value !== null && value !== \"\";\n    })\n    .map((target) => target.overrideKey);\n}\n\nexport function pruneOverrides(overrides: Set<string>, targets: PrefillTarget[]): Set<string> {\n  const liveKeys = new Set(targets.map((target) => target.overrideKey));\n\n  return new Set([...overrides].filter((key) => liveKeys.has(key)));\n}\n"],"mappings":"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"}
+{"version":3,"file":"prefill-targets.js","names":[],"sources":["../../../resources/js/form/components/prefill-targets.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { fieldProps } from \"./field-props\";\nimport { appendPath, getPath } from \"./form-path\";\nimport { buildOverrideKey, rowIdFrom } from \"./override-keys\";\n\nexport type PrefillTarget = {\n  path: string;\n  overrideKey: string;\n  resetOn: string[];\n  refreshOn: string[];\n};\n\ntype PrefillSnapshot = {\n  targets: PrefillTarget[];\n  values: Record<string, unknown>;\n};\n\ntype Block = { type: string; label: string; schema: Node[] };\n\nconst ROW_COLLECTION_TYPES = new Set([\"field.builder\", \"field.repeater\"]);\n\nexport { getPath } from \"./form-path\";\n\nfunction mapDep(dep: string, rowPath: string | null): string {\n  if (dep.startsWith(\"@\")) {\n    return dep.slice(1);\n  }\n\n  return rowPath === null ? dep : appendPath(rowPath, dep);\n}\n\nfunction targetFor(\n  node: Node,\n  rowPath: string | null,\n  identityCollectionPath: string | null,\n  index = 0,\n  row: Record<string, unknown> = {},\n): PrefillTarget | null {\n  const props = fieldProps(node);\n\n  if (!props.editablePrefill || !props.name) {\n    return null;\n  }\n\n  const rowId = rowIdFrom(row);\n\n  return {\n    path: rowPath === null ? props.name : appendPath(rowPath, props.name),\n    overrideKey:\n      identityCollectionPath === null\n        ? props.name\n        : buildOverrideKey(identityCollectionPath, rowId, index, props.name),\n    resetOn: (props.prefillResetOn ?? []).map((dep) => mapDep(dep, rowPath)),\n    refreshOn: (props.prefillRefreshOn ?? []).map((dep) => mapDep(dep, rowPath)),\n  };\n}\n\nexport function collectPrefillTargets(\n  nodes: Node[] | undefined,\n  values: Record<string, unknown>,\n): PrefillTarget[] {\n  const targets: PrefillTarget[] = [];\n\n  const walk = (\n    list: Node[] | undefined,\n    rowPath: string | null = null,\n    identityRowPath: string | null = null,\n    identityCollectionPath: string | null = null,\n    index = 0,\n    row: Record<string, unknown> = {},\n  ): void => {\n    for (const node of list ?? []) {\n      if (ROW_COLLECTION_TYPES.has(node.type)) {\n        const name = fieldProps(node).name;\n        if (name) {\n          const childCollectionPath = appendPath(rowPath, name);\n          const childIdentityCollectionPath = appendPath(identityRowPath, name);\n          const storedRows = getPath(values, childCollectionPath);\n          const rows = Array.isArray(storedRows)\n            ? (storedRows as Array<Record<string, unknown>>)\n            : [];\n          const blocks = (node as unknown as { blocks?: Block[] }).blocks;\n\n          rows.forEach((childRow, childIndex) => {\n            const template = blocks\n              ? (blocks.find((block) => block.type === childRow.type)?.schema ?? [])\n              : (node.schema ?? []);\n\n            walk(\n              template,\n              appendPath(childCollectionPath, childIndex),\n              appendPath(childIdentityCollectionPath, rowIdFrom(childRow) ?? childIndex),\n              childIdentityCollectionPath,\n              childIndex,\n              childRow,\n            );\n          });\n        }\n\n        continue;\n      }\n\n      const target = targetFor(node, rowPath, identityCollectionPath, index, row);\n      if (target) {\n        targets.push(target);\n      }\n\n      walk(node.schema, rowPath, identityRowPath, identityCollectionPath, index, row);\n    }\n  };\n\n  walk(nodes);\n\n  return targets;\n}\n\nexport function pathsToClear(previous: PrefillSnapshot, next: PrefillSnapshot): string[] {\n  const previousByKey = new Map(\n    previous.targets.map((target) => [target.overrideKey, target] as const),\n  );\n\n  return next.targets\n    .filter((target) => {\n      const previousTarget = previousByKey.get(target.overrideKey);\n\n      return target.resetOn.some((dep, index) => {\n        const previousDep = previousTarget?.resetOn[index] ?? dep;\n\n        return !Object.is(getPath(previous.values, previousDep), getPath(next.values, dep));\n      });\n    })\n    .map((target) => target.overrideKey);\n}\n\nexport function seededOverrides(\n  targets: PrefillTarget[],\n  values: Record<string, unknown>,\n): string[] {\n  return targets\n    .filter((target) => {\n      const value = getPath(values, target.path);\n\n      return value !== undefined && value !== null && value !== \"\";\n    })\n    .map((target) => target.overrideKey);\n}\n\nexport function pruneOverrides(overrides: Set<string>, targets: PrefillTarget[]): Set<string> {\n  const liveKeys = new Set(targets.map((target) => target.overrideKey));\n\n  return new Set([...overrides].filter((key) => liveKeys.has(key)));\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 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 { collectPrefillTargets, pathsToClear, pruneOverrides, seededOverrides } from "./prefill-targets.js";
 import { useFormValues, useSetFormValue } from "./values.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region resources/js/form/components/use-form-resolver.ts
@@ -70,7 +70,7 @@ function useFormResolver(action, componentRef, nodes) {
 				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 (target && !overrides.current.has(target.overrideKey)) setValue(path, value);
 				}
 				if (response.fields) setResolved(response.fields);
 			}).catch(() => {});

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 { 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"}
+{"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  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              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":"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"}

package/dist/form/index.js

@@ -17,6 +17,7 @@ var formComponents = createPlugin({
 		"field.file-upload": lazyComponent(loadFormComponent("FileUploadComponent")),
 		"field.hidden-input": lazyComponent(loadFormComponent("HiddenInputComponent")),
 		"field.number-input": lazyComponent(loadFormComponent("NumberInputComponent")),
+		"field.otp": lazyComponent(loadFormComponent("OtpInputComponent")),
 		"field.password-input": lazyComponent(loadFormComponent("PasswordInputComponent")),
 		"field.repeater": lazyComponent(loadFormComponent("RepeaterComponent")),
 		"field.rich-editor": lazyComponent(async () => {

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-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"}
+{"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  | \"OtpInputComponent\"\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.otp\": lazyComponent(loadFormComponent(\"OtpInputComponent\")),\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":";;;AAoBA,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,aAAa,cAAc,kBAAkB,mBAAmB,CAAC;EACjE,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.js

@@ -5,7 +5,7 @@ var FormSkeletonComponent = ({ node }) => {
 	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 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-lt-sm",
 		"data-lattice-skeleton": node.id ?? node.type,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "grid gap-6",

package/dist/form/skeleton.js.map

@@ -1 +1 @@
-{"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"}
+{"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-lt-sm\"\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/locale-reload.js

@@ -1,6 +1,6 @@
 import { EventBridge } from "../events/event-bridge.js";
-import { useCallback } from "react";
 import { router } from "@inertiajs/react";
+import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/i18n/locale-reload.tsx
 function LocaleReload({ preserveScroll = true, preserveState = true }) {

package/dist/i18n/translatable.d.ts

@@ -0,0 +1,4 @@
+import { Translatable } from '../types/generated';
+export type Translate = (key: string, defaultValue?: string, options?: Record<string, unknown>) => string;
+export declare function isTranslatable(value: unknown): value is Translatable;
+export declare function resolveTranslatable(value: Translatable, payload: Record<string, unknown>, t: Translate): string;

package/dist/i18n/translatable.js

@@ -0,0 +1,24 @@
+//#region resources/js/i18n/translatable.ts
+function isTranslatable(value) {
+	return typeof value === "object" && value !== null && typeof value.key === "string";
+}
+function readPath(payload, path) {
+	return path.split(".").reduce((node, segment) => {
+		if (typeof node === "object" && node !== null) return node[segment];
+	}, payload);
+}
+function resolveTranslatable(value, payload, t) {
+	const fromPayload = {};
+	for (const [name, path] of Object.entries(value.payload)) {
+		const read = readPath(payload, path);
+		fromPayload[name] = read === void 0 ? "" : read;
+	}
+	return t(value.key, value.key, {
+		...value.replacements,
+		...fromPayload
+	});
+}
+//#endregion
+export { isTranslatable, resolveTranslatable };
+
+//# sourceMappingURL=translatable.js.map

package/dist/i18n/translatable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translatable.js","names":[],"sources":["../../resources/js/i18n/translatable.ts"],"sourcesContent":["import type { Translatable } from \"@lattice-php/lattice/types/generated\";\n\nexport type Translate = (\n  key: string,\n  defaultValue?: string,\n  options?: Record<string, unknown>,\n) => string;\n\nexport function isTranslatable(value: unknown): value is Translatable {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    typeof (value as { key?: unknown }).key === \"string\"\n  );\n}\n\nfunction readPath(payload: Record<string, unknown>, path: string): unknown {\n  return path.split(\".\").reduce<unknown>((node, segment) => {\n    if (typeof node === \"object\" && node !== null) {\n      return (node as Record<string, unknown>)[segment];\n    }\n\n    return undefined;\n  }, payload);\n}\n\nexport function resolveTranslatable(\n  value: Translatable,\n  payload: Record<string, unknown>,\n  t: Translate,\n): string {\n  const fromPayload: Record<string, unknown> = {};\n\n  for (const [name, path] of Object.entries(value.payload)) {\n    const read = readPath(payload, path);\n    fromPayload[name] = read === undefined ? \"\" : read;\n  }\n\n  return t(value.key, value.key, { ...value.replacements, ...fromPayload });\n}\n"],"mappings":";AAQA,SAAgB,eAAe,OAAuC;CACpE,OACE,OAAO,UAAU,YACjB,UAAU,QACV,OAAQ,MAA4B,QAAQ;AAEhD;AAEA,SAAS,SAAS,SAAkC,MAAuB;CACzE,OAAO,KAAK,MAAM,GAAG,EAAE,QAAiB,MAAM,YAAY;EACxD,IAAI,OAAO,SAAS,YAAY,SAAS,MACvC,OAAQ,KAAiC;CAI7C,GAAG,OAAO;AACZ;AAEA,SAAgB,oBACd,OACA,SACA,GACQ;CACR,MAAM,cAAuC,CAAC;CAE9C,KAAK,MAAM,CAAC,MAAM,SAAS,OAAO,QAAQ,MAAM,OAAO,GAAG;EACxD,MAAM,OAAO,SAAS,SAAS,IAAI;EACnC,YAAY,QAAQ,SAAS,KAAA,IAAY,KAAK;CAChD;CAEA,OAAO,EAAE,MAAM,KAAK,MAAM,KAAK;EAAE,GAAG,MAAM;EAAc,GAAG;CAAY,CAAC;AAC1E"}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { useEffectDispatcher } from './effects/use-effect-dispatcher';
 export { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from './effects/registry';
 export { initializeTheme, useAppearance } from './appearance';
 export { copyToClipboard, useClipboard } from './clipboard';
+export { createLatticeApp, type CreateLatticeAppOptions } from './create-app';
 export { EventBridge } from './events/event-bridge';
 export { Icon, IconRenderer, IconRendererProvider, SpriteProvider } from './icons';
 export { createLayoutResolver, createPageResolver, pageComponentName, withVisitHeaders, } from './inertia';
@@ -23,6 +24,8 @@ export { LATTICE_EVENT } from './events/event-names';
 export type { ButtonVariant } from './core/components/button';
 export type { ReloadComponentEvent } from './events/event-names';
 export type { ComponentProps, KnownPageContainer, LayoutPayload, Node, NodeOfType, NodeProps, NodeType, PageContainer, PageBreadcrumb, PagePayload, PropsOf, RendererComponent, RendererComponentModule, RendererComponentProps, Schema, UnknownComponent, WireNode, } from './core/types';
+export { RealtimeListeners } from './realtime/listeners';
+export type { ChannelVisibility, ListenerPayload } from './types/generated';
 export { columnCell } from './table/registry';
 export type { ColumnCellArgs, ColumnCellComponent, ColumnRegistry } from './table/registry';
 export type { ColumnProps, ColumnPropsOf } from './table/types';

package/dist/index.js

@@ -1,29 +1,31 @@
-import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent } from "./core/registry.js";
+import { initializeTheme, useAppearance } from "./appearance/index.js";
 import { LATTICE_EVENT } from "./events/event-names.js";
 import { LATTICE_REF_HEADER, withRefHeader } from "./core/component-ref.js";
 import { withHeaders } from "./core/headers.js";
 import { Icon, SpriteProvider } from "./icons/sprite.js";
 import { IconRenderer, IconRendererProvider } from "./icons/icon-renderer.js";
-import { onToast, showToast } from "./toast/toast.js";
-import { EventBridge } from "./events/event-bridge.js";
-import { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from "./effects/registry.js";
-import { dispatchActionError, dispatchEffects, getActionEffects, isActionEffect } from "./effects/dispatch.js";
-import { useColumnRegistry, useComponentRegistry } from "./core/registry-context.js";
-import { useEffectDispatcher } from "./effects/use-effect-dispatcher.js";
 import { CollapsedContext, useCollapsed } from "./core/collapsed-context.js";
+import { useColumnRegistry, useComponentRegistry } from "./core/registry-context.js";
 import { Renderer } from "./core/renderer.js";
-import { chatPlugin } from "./chat/index.js";
-import { useChat } from "./chat/use-chat.js";
+import { onToast, showToast } from "./toast/toast.js";
 import { onCallout } from "./toast/callout.js";
+import { EventBridge } from "./events/event-bridge.js";
 import Callouts from "./layout/callouts.js";
+import { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent } from "./core/registry.js";
 import { OutletContext } from "./layout/context.js";
 import { layoutComponents } from "./layout/components.js";
-import { registry } from "./registry.js";
-import { initializeTheme, useAppearance } from "./appearance/index.js";
-import { copyToClipboard, useClipboard } from "./clipboard/index.js";
 import SchemaLayout from "./layout/schema-layout.js";
+import { RealtimeListeners } from "./realtime/listeners.js";
 import { createLayoutResolver, createPageResolver, pageComponentName, withVisitHeaders } from "./inertia.js";
+import { builtinEffectHandlers, effectHandler, mergeEffectHandlers } from "./effects/registry.js";
+import { dispatchActionError, dispatchEffects, getActionEffects, isActionEffect } from "./effects/dispatch.js";
+import { useEffectDispatcher } from "./effects/use-effect-dispatcher.js";
+import { useChat } from "./chat/use-chat.js";
+import { chatPlugin } from "./chat/index.js";
+import { registry } from "./registry.js";
 import { Toaster } from "./toast/toaster.js";
 import { Provider } from "./provider.js";
+import { createLatticeApp } from "./create-app.js";
+import { copyToClipboard, useClipboard } from "./clipboard/index.js";
 import { columnCell } from "./table/registry.js";
-export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatPlugin, columnCell, copyToClipboard, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registry, showToast, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };
+export { Callouts, EventBridge, Icon, IconRenderer, IconRendererProvider, LATTICE_EVENT, LATTICE_REF_HEADER, OutletContext, Provider, RealtimeListeners, Renderer, SchemaLayout, CollapsedContext as SidebarCollapsedContext, SpriteProvider, Toaster, builtinEffectHandlers, chatPlugin, columnCell, copyToClipboard, createLatticeApp, createLayoutResolver, createPageResolver, createPlugin, createRegistry, dispatchActionError, dispatchEffects, eagerComponent, effectHandler, extendRegistry, getActionEffects, initializeTheme, isActionEffect, layoutComponents, lazyComponent, mergeEffectHandlers, onCallout, onToast, pageComponentName, registry, showToast, useAppearance, useChat, useClipboard, useColumnRegistry, useComponentRegistry, useEffectDispatcher, useCollapsed as useSidebarCollapsed, withHeaders, withRefHeader, withVisitHeaders };

package/dist/lattice.css

@@ -2,7 +2,7 @@
 
 :root,
 [data-theme="light"] {
-  --lt-bg: var(--background, oklch(1 0 0));
+  --lt-bg: var(--background, oklch(0.97 0 0));
   --lt-fg: var(--foreground, oklch(0.145 0 0));
   --lt-surface: var(--card, oklch(1 0 0));
   --lt-surface-fg: var(--card-foreground, oklch(0.145 0 0));
@@ -27,15 +27,72 @@
   --lt-success-fg: var(--success-foreground, oklch(0.985 0 0));
   --lt-info: var(--info, oklch(0.62 0.14 240));
   --lt-info-fg: var(--info-foreground, oklch(0.985 0 0));
-  --lt-radius: var(--radius, 0.625rem);
-  --lt-radius-sm: calc(var(--lt-radius) - 2px);
-  --lt-radius-xs: calc(var(--lt-radius) - 4px);
+  /* Interaction states (hover / active / disabled) */
+  --lt-primary-hover: var(--primary-hover, oklch(0.43 0.092 182));
+  --lt-primary-active: var(--primary-active, oklch(0.39 0.092 182));
+  --lt-danger-hover: var(--destructive-hover, oklch(0.53 0.21 27.3));
+  --lt-danger-active: var(--destructive-active, oklch(0.48 0.21 27.3));
+  --lt-success-hover: var(--success-hover, oklch(0.57 0.125 160));
+  --lt-success-active: var(--success-active, oklch(0.52 0.125 160));
+  --lt-info-hover: var(--info-hover, oklch(0.57 0.14 240));
+  --lt-info-active: var(--info-active, oklch(0.52 0.14 240));
+  --lt-secondary-hover: var(--secondary-hover, oklch(0.93 0 0));
+  --lt-secondary-active: var(--secondary-active, oklch(0.9 0 0));
+  --lt-disabled: var(--disabled, oklch(0.95 0 0));
+  --lt-disabled-fg: var(--disabled-foreground, oklch(0.7 0 0));
+
+  /* Radius: base = cards, -sm = controls, -xs = chips */
+  --lt-radius: var(--radius, 0.5rem);
+  --lt-radius-sm: calc(var(--lt-radius) - 0.125rem);
+  --lt-radius-xs: calc(var(--lt-radius) - 0.25rem);
 
   --lt-icon-xs: 0.75rem;
   --lt-icon-sm: 0.875rem;
   --lt-icon-md: 1rem;
   --lt-icon-lg: 1.25rem;
   --lt-icon-xl: 1.5rem;
+  --lt-icon-stroke: 1.5;
+
+  /* Control heights — density lever */
+  --lt-control-h-sm: 2rem;
+  --lt-control-h-md: 2.25rem;
+  --lt-control-h-lg: 2.5rem;
+
+  --lt-font-weight-normal: 400;
+  --lt-font-weight-medium: 500;
+  --lt-font-weight-semibold: 600;
+  --lt-font-weight-bold: 700;
+
+  /* Focus-ring size (colour: --lt-ring) */
+  --lt-ring-width: 0.125rem;
+  --lt-ring-offset: 0.125rem;
+
+  /* Elevation */
+  --lt-shadow-xs: 0 1px 1px 0 oklch(0 0 0 / 0.04);
+  --lt-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+  --lt-shadow-md:
+    0 2px 4px -1px oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.06);
+  --lt-shadow-lg:
+    0 8px 16px -4px oklch(0 0 0 / 0.12), 0 2px 4px -2px oklch(0 0 0 / 0.08);
+
+  /* Z-index scale */
+  --lt-z-dropdown: 1000;
+  --lt-z-sticky: 1100;
+  --lt-z-overlay: 1200;
+  --lt-z-modal: 1300;
+  --lt-z-popover: 1400;
+  --lt-z-toast: 1500;
+
+  /* Motion */
+  --lt-duration-fast: 120ms;
+  --lt-duration-base: 160ms;
+  --lt-duration-slow: 240ms;
+  --lt-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Layout dimensions */
+  --lt-sidebar-w: 16rem;
+  --lt-sidebar-w-collapsed: 4rem;
+  --lt-container-max: 80rem;
 
   color-scheme: light;
 }
@@ -68,6 +125,20 @@
   --lt-info: var(--info, oklch(0.7 0.14 240));
   --lt-info-fg: var(--info-foreground, oklch(0.205 0 0));
 
+  /* Interaction states (dark) */
+  --lt-primary-hover: var(--primary-hover, oklch(0.79 0.105 182));
+  --lt-primary-active: var(--primary-active, oklch(0.84 0.105 182));
+  --lt-danger-hover: var(--destructive-hover, oklch(0.47 0.13 26));
+  --lt-danger-active: var(--destructive-active, oklch(0.52 0.13 26));
+  --lt-success-hover: var(--success-hover, oklch(0.75 0.15 162));
+  --lt-success-active: var(--success-active, oklch(0.8 0.15 162));
+  --lt-info-hover: var(--info-hover, oklch(0.75 0.14 240));
+  --lt-info-active: var(--info-active, oklch(0.8 0.14 240));
+  --lt-secondary-hover: var(--secondary-hover, oklch(0.32 0 0));
+  --lt-secondary-active: var(--secondary-active, oklch(0.36 0 0));
+  --lt-disabled: var(--disabled, oklch(0.32 0 0));
+  --lt-disabled-fg: var(--disabled-foreground, oklch(0.55 0 0));
+
   color-scheme: dark;
 }
 
@@ -97,16 +168,35 @@
   --color-lt-success-fg: var(--lt-success-fg);
   --color-lt-info: var(--lt-info);
   --color-lt-info-fg: var(--lt-info-fg);
+  --color-lt-primary-hover: var(--lt-primary-hover);
+  --color-lt-primary-active: var(--lt-primary-active);
+  --color-lt-danger-hover: var(--lt-danger-hover);
+  --color-lt-danger-active: var(--lt-danger-active);
+  --color-lt-success-hover: var(--lt-success-hover);
+  --color-lt-success-active: var(--lt-success-active);
+  --color-lt-info-hover: var(--lt-info-hover);
+  --color-lt-info-active: var(--lt-info-active);
+  --color-lt-secondary-hover: var(--lt-secondary-hover);
+  --color-lt-secondary-active: var(--lt-secondary-active);
+  --color-lt-disabled: var(--lt-disabled);
+  --color-lt-disabled-fg: var(--lt-disabled-fg);
   --radius-lt: var(--lt-radius);
   --radius-lt-sm: var(--lt-radius-sm);
   --radius-lt-xs: var(--lt-radius-xs);
+  --shadow-lt-xs: var(--lt-shadow-xs);
+  --shadow-lt-sm: var(--lt-shadow-sm);
+  --shadow-lt-md: var(--lt-shadow-md);
+  --shadow-lt-lg: var(--lt-shadow-lg);
   --spacing-lt-icon-xs: var(--lt-icon-xs);
   --spacing-lt-icon-sm: var(--lt-icon-sm);
   --spacing-lt-icon-md: var(--lt-icon-md);
   --spacing-lt-icon-lg: var(--lt-icon-lg);
   --spacing-lt-icon-xl: var(--lt-icon-xl);
-  --animate-lt-toast-in: lt-toast-in 160ms ease-out;
-  --animate-lt-toast-out: lt-toast-out 120ms ease-in;
+  --spacing-lt-control-sm: var(--lt-control-h-sm);
+  --spacing-lt-control-md: var(--lt-control-h-md);
+  --spacing-lt-control-lg: var(--lt-control-h-lg);
+  --animate-lt-toast-in: lt-toast-in var(--lt-duration-base) ease-out;
+  --animate-lt-toast-out: lt-toast-out var(--lt-duration-fast) ease-in;
 }
 
 @theme {
@@ -115,6 +205,9 @@
     "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
 
+  /* Base spacing unit */
+  --spacing: 0.25rem;
+
   --text-xs: 0.625rem;
   --text-xs--line-height: 1.6;
   --text-sm: 0.6875rem;

package/dist/layout/breadcrumbs.js

@@ -1,5 +1,6 @@
-import { Fragment } from "react";
+import { nodeIdentity } from "../core/test-id.js";
 import { Link, usePage } from "@inertiajs/react";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/breadcrumbs.tsx
 var BreadcrumbsComponent = ({ node }) => {
@@ -7,7 +8,7 @@ var BreadcrumbsComponent = ({ node }) => {
 	if (crumbs.length === 0) return null;
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "Breadcrumb",
-		"data-lattice-component": node.id,
+		"data-lattice-component": nodeIdentity(node),
 		children: /* @__PURE__ */ jsx("ol", {
 			className: "flex items-center gap-2 text-sm text-lt-muted-fg",
 			children: crumbs.map((crumb, index) => {