@lattice-php/lattice 0.2.0 → 0.3.0

package/dist/form/components/fields/file-upload.js

@@ -0,0 +1,250 @@
+import { testIdentity } from "../../../core/test-id.js";
+import { Icon } from "../../../icons/sprite.js";
+import { useT } from "../../../i18n/instance.js";
+import { apiFetch } from "../../../core/api.js";
+import { useFormContext } from "../context.js";
+import { useFieldScope } from "../field-scope.js";
+import { useFormValues } from "../values.js";
+import { FormFieldFrame } from "../base/field.js";
+import { useDependentField } from "../use-dependent-field.js";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/file-upload.tsx
+var FileUploadComponent = ({ node }) => {
+	const { t } = useT("lattice");
+	const props = node.props;
+	const { hidden, required, readOnly, disabled } = useDependentField(node);
+	const { action, componentRef, errors } = useFormContext();
+	const name = props.name;
+	const scope = useFieldScope();
+	const domName = scope ? scope.scopedName(name) : name;
+	const errorKey = scope ? scope.errorKey(name) : name;
+	const uploadKey = errorKey;
+	const values = useFormValues();
+	const inputId = useId();
+	const fileInputRef = useRef(null);
+	const previewUrlsRef = useRef(/* @__PURE__ */ new Set());
+	const locked = readOnly || disabled;
+	const signed = props.signed;
+	const multiple = props.multiple;
+	const fieldName = multiple ? `${domName}[]` : domName;
+	const [items, setItems] = useState(useMemo(() => (props.files ?? []).map((file) => ({
+		id: crypto.randomUUID(),
+		name: file.name,
+		size: file.size,
+		status: "ready",
+		progress: 100,
+		key: file.key,
+		url: file.url,
+		token: file.token,
+		existing: true
+	})), [props.files]));
+	const [removedTokens, setRemovedTokens] = useState([]);
+	useEffect(() => () => {
+		previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+		previewUrlsRef.current.clear();
+	}, []);
+	const multipartFiles = items.filter((item) => item.file && !item.existing).map((item) => item.file);
+	useEffect(() => {
+		if (signed || !fileInputRef.current) return;
+		const transfer = new DataTransfer();
+		multipartFiles.forEach((file) => transfer.items.add(file));
+		fileInputRef.current.files = transfer.files;
+	});
+	function createPreviewUrl(file) {
+		if (!props.image) return;
+		const url = URL.createObjectURL(file);
+		previewUrlsRef.current.add(url);
+		return url;
+	}
+	function revokePreviewUrl(item) {
+		if (!item.url || !previewUrlsRef.current.has(item.url)) return;
+		URL.revokeObjectURL(item.url);
+		previewUrlsRef.current.delete(item.url);
+	}
+	async function signAndUpload(item, file) {
+		const response = await apiFetch(action, {
+			method: "POST",
+			ref: componentRef,
+			body: JSON.stringify({
+				...values,
+				_upload: uploadKey,
+				filename: file.name,
+				contentType: file.type
+			}),
+			throwOnError: false
+		});
+		if (!response.ok) {
+			setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+				...entry,
+				status: "error"
+			} : entry));
+			return;
+		}
+		const sign = await response.json();
+		await new Promise((resolve) => {
+			const request = new XMLHttpRequest();
+			request.open(sign.method, sign.url, true);
+			Object.entries(sign.headers).forEach(([key, value]) => request.setRequestHeader(key, String(value)));
+			request.upload.onprogress = (event) => {
+				if (event.lengthComputable) {
+					const progress = Math.round(event.loaded / event.total * 100);
+					setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+						...entry,
+						progress
+					} : entry));
+				}
+			};
+			request.onload = () => {
+				setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+					...entry,
+					status: request.status < 300 ? "ready" : "error",
+					key: sign.key,
+					progress: 100
+				} : entry));
+				resolve();
+			};
+			request.onerror = () => {
+				setItems((prev) => prev.map((entry) => entry.id === item.id ? {
+					...entry,
+					status: "error"
+				} : entry));
+				resolve();
+			};
+			request.send(file);
+		});
+	}
+	function addFiles(fileList) {
+		if (!fileList || locked) return;
+		const incoming = Array.from(fileList);
+		const next = incoming.map((file) => ({
+			id: crypto.randomUUID(),
+			name: file.name,
+			size: file.size,
+			status: signed ? "uploading" : "ready",
+			progress: 0,
+			file,
+			url: createPreviewUrl(file),
+			existing: false
+		}));
+		if (!multiple) {
+			items.forEach(revokePreviewUrl);
+			if (!scope) {
+				const replacedTokens = items.filter((item) => item.existing && item.token).map((item) => item.token);
+				if (replacedTokens.length > 0) setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);
+			}
+		}
+		setItems((prev) => multiple ? [...prev, ...next] : next);
+		if (signed) next.forEach((item, index) => void signAndUpload(item, incoming[index]));
+	}
+	function removeItem(id) {
+		const target = items.find((item) => item.id === id);
+		if (target) revokePreviewUrl(target);
+		setItems((prev) => {
+			if (target?.existing && target.token && !scope) setRemovedTokens((tokens) => [...tokens, target.token]);
+			return prev.filter((i) => i.id !== id);
+		});
+	}
+	if (hidden) return null;
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
+		error: errors[errorKey],
+		helperText: props.helperText ?? void 0,
+		tooltip: props.tooltip ?? void 0,
+		label: props.label ?? "",
+		name,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6",
+			"data-test": testIdentity(name),
+			onDragOver: (event) => event.preventDefault(),
+			onDrop: (event) => {
+				event.preventDefault();
+				addFiles(event.dataTransfer.files);
+			},
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					className: "text-sm text-lt-muted-fg",
+					disabled: locked,
+					onClick: () => fileInputRef.current?.click(),
+					type: "button",
+					children: t("file-upload.dropzone", "Drop files here or click to browse")
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					className: props.image ? "grid grid-cols-1 gap-3 sm:grid-cols-2" : "flex flex-col gap-2",
+					children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+						className: props.image ? "flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm" : "flex items-center justify-between gap-3 text-sm",
+						children: [
+							props.image && item.url ? /* @__PURE__ */ jsx("img", {
+								alt: item.name,
+								className: "size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover",
+								"data-test": testIdentity(`${name}-preview`),
+								src: item.url
+							}) : null,
+							/* @__PURE__ */ jsxs("div", {
+								className: "min-w-0 flex-1",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "block truncate",
+										"data-test": testIdentity(`${name}-item`),
+										children: item.name
+									}),
+									item.status === "uploading" && /* @__PURE__ */ jsxs("span", {
+										className: "text-xs text-lt-muted-fg",
+										children: [item.progress, "%"]
+									}),
+									item.status === "error" && /* @__PURE__ */ jsx("span", {
+										className: "text-xs text-lt-danger",
+										children: t("file-upload.failed", "Failed")
+									})
+								]
+							}),
+							(!item.existing || !scope) && /* @__PURE__ */ jsx("button", {
+								"aria-label": t("file-upload.remove", "Remove {{name}}", { name: item.name }),
+								className: "inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50",
+								"data-test": item.existing ? testIdentity(`${name}-remove-existing`) : void 0,
+								disabled: locked,
+								onClick: () => removeItem(item.id),
+								type: "button",
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: "x",
+									"aria-hidden": "true",
+									className: "size-lt-icon-sm"
+								})
+							}),
+							signed && !item.existing && item.key && item.status === "ready" && /* @__PURE__ */ jsx("input", {
+								"data-test": testIdentity(`${name}-uploaded`),
+								name: fieldName,
+								type: "hidden",
+								value: item.key
+							})
+						]
+					}, item.id))
+				}),
+				!scope && removedTokens.map((token) => /* @__PURE__ */ jsx("input", {
+					name: `${name}__removed[]`,
+					type: "hidden",
+					value: token
+				}, token)),
+				/* @__PURE__ */ jsx("input", {
+					accept: props.accept ?? void 0,
+					"aria-label": props.label ?? name,
+					className: "sr-only",
+					"data-test": testIdentity(`${name}-input`),
+					id: inputId,
+					multiple,
+					name: signed ? void 0 : fieldName,
+					onChange: (event) => {
+						addFiles(event.target.files);
+						if (signed) event.target.value = "";
+					},
+					ref: fileInputRef,
+					type: "file"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { FileUploadComponent };
+
+//# sourceMappingURL=file-upload.js.map

package/dist/form/components/fields/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValues } from \"../values\";\n\ntype Item = {\n  id: string;\n  name: string;\n  size: number | null;\n  status: \"ready\" | \"uploading\" | \"error\";\n  progress: number;\n  file?: File;\n  key?: string;\n  url?: string | null;\n  token?: string;\n  existing: boolean;\n};\n\ntype SignResponse = {\n  key: string;\n  url: string;\n  headers: Record<string, string>;\n  method: string;\n};\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { action, componentRef, errors } = useFormContext();\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const uploadKey = errorKey;\n  const values = useFormValues();\n  const inputId = useId();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const previewUrlsRef = useRef<Set<string>>(new Set());\n  const locked = readOnly || disabled;\n  const signed = props.signed;\n  const multiple = props.multiple;\n  const fieldName = multiple ? `${domName}[]` : domName;\n\n  const initial = useMemo<Item[]>(\n    () =>\n      (props.files ?? []).map((file) => ({\n        id: crypto.randomUUID(),\n        name: file.name,\n        size: file.size,\n        status: \"ready\" as const,\n        progress: 100,\n        key: file.key,\n        url: file.url,\n        token: file.token,\n        existing: true,\n      })),\n    [props.files],\n  );\n  const [items, setItems] = useState<Item[]>(initial);\n  const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n  useEffect(\n    () => () => {\n      previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n      previewUrlsRef.current.clear();\n    },\n    [],\n  );\n\n  const multipartFiles = items\n    .filter((item) => item.file && !item.existing)\n    .map((item) => item.file as File);\n  useEffect(() => {\n    if (signed || !fileInputRef.current) {\n      return;\n    }\n\n    const transfer = new DataTransfer();\n    multipartFiles.forEach((file) => transfer.items.add(file));\n    fileInputRef.current.files = transfer.files;\n  });\n\n  function createPreviewUrl(file: File): string | undefined {\n    if (!props.image) {\n      return undefined;\n    }\n\n    const url = URL.createObjectURL(file);\n    previewUrlsRef.current.add(url);\n\n    return url;\n  }\n\n  function revokePreviewUrl(item: Item): void {\n    if (!item.url || !previewUrlsRef.current.has(item.url)) {\n      return;\n    }\n\n    URL.revokeObjectURL(item.url);\n    previewUrlsRef.current.delete(item.url);\n  }\n\n  async function signAndUpload(item: Item, file: File): Promise<void> {\n    const response = await apiFetch(action, {\n      method: \"POST\",\n      ref: componentRef,\n      body: JSON.stringify({\n        ...values,\n        _upload: uploadKey,\n        filename: file.name,\n        contentType: file.type,\n      }),\n      throwOnError: false,\n    });\n\n    if (!response.ok) {\n      setItems((prev) =>\n        prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n      );\n\n      return;\n    }\n\n    const sign = (await response.json()) as SignResponse;\n\n    await new Promise<void>((resolve) => {\n      const request = new XMLHttpRequest();\n      request.open(sign.method, sign.url, true);\n      Object.entries(sign.headers).forEach(([key, value]) =>\n        request.setRequestHeader(key, String(value)),\n      );\n      request.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          setItems((prev) =>\n            prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n          );\n        }\n      };\n      request.onload = () => {\n        setItems((prev) =>\n          prev.map((entry) =>\n            entry.id === item.id\n              ? {\n                  ...entry,\n                  status: request.status < 300 ? \"ready\" : \"error\",\n                  key: sign.key,\n                  progress: 100,\n                }\n              : entry,\n          ),\n        );\n        resolve();\n      };\n      request.onerror = () => {\n        setItems((prev) =>\n          prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n        );\n        resolve();\n      };\n      request.send(file);\n    });\n  }\n\n  function addFiles(fileList: FileList | null): void {\n    if (!fileList || locked) {\n      return;\n    }\n\n    const incoming = Array.from(fileList);\n    const next = incoming.map<Item>((file) => ({\n      id: crypto.randomUUID(),\n      name: file.name,\n      size: file.size,\n      status: signed ? \"uploading\" : \"ready\",\n      progress: 0,\n      file,\n      url: createPreviewUrl(file),\n      existing: false,\n    }));\n\n    if (!multiple) {\n      items.forEach(revokePreviewUrl);\n\n      if (!scope) {\n        const replacedTokens = items\n          .filter((item) => item.existing && item.token)\n          .map((item) => item.token as string);\n\n        if (replacedTokens.length > 0) {\n          setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n        }\n      }\n    }\n\n    setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n    if (signed) {\n      next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n    }\n  }\n\n  function removeItem(id: string): void {\n    const target = items.find((item) => item.id === id);\n\n    if (target) {\n      revokePreviewUrl(target);\n    }\n\n    setItems((prev) => {\n      if (target?.existing && target.token && !scope) {\n        setRemovedTokens((tokens) => [...tokens, target.token as string]);\n      }\n      return prev.filter((i) => i.id !== id);\n    });\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <div\n        className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n        data-test={testIdentity(name)}\n        onDragOver={(event) => event.preventDefault()}\n        onDrop={(event) => {\n          event.preventDefault();\n          addFiles(event.dataTransfer.files);\n        }}\n      >\n        <button\n          className=\"text-sm text-lt-muted-fg\"\n          disabled={locked}\n          onClick={() => fileInputRef.current?.click()}\n          type=\"button\"\n        >\n          {t(\"file-upload.dropzone\", \"Drop files here or click to browse\")}\n        </button>\n\n        <ul\n          className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n        >\n          {items.map((item) => (\n            <li\n              className={\n                props.image\n                  ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n                  : \"flex items-center justify-between gap-3 text-sm\"\n              }\n              key={item.id}\n            >\n              {props.image && item.url ? (\n                <img\n                  alt={item.name}\n                  className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n                  data-test={testIdentity(`${name}-preview`)}\n                  src={item.url}\n                />\n              ) : null}\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n                  {item.name}\n                </span>\n                {item.status === \"uploading\" && (\n                  <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n                )}\n                {item.status === \"error\" && (\n                  <span className=\"text-xs text-lt-danger\">\n                    {t(\"file-upload.failed\", \"Failed\")}\n                  </span>\n                )}\n              </div>\n              {(!item.existing || !scope) && (\n                <button\n                  aria-label={t(\"file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n                  className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50\"\n                  data-test={item.existing ? testIdentity(`${name}-remove-existing`) : undefined}\n                  disabled={locked}\n                  onClick={() => removeItem(item.id)}\n                  type=\"button\"\n                >\n                  <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n                </button>\n              )}\n              {signed && !item.existing && item.key && item.status === \"ready\" && (\n                <input\n                  data-test={testIdentity(`${name}-uploaded`)}\n                  name={fieldName}\n                  type=\"hidden\"\n                  value={item.key}\n                />\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {!scope &&\n          removedTokens.map((token) => (\n            <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n          ))}\n\n        <input\n          accept={props.accept ?? undefined}\n          aria-label={props.label ?? name}\n          className=\"sr-only\"\n          data-test={testIdentity(`${name}-input`)}\n          id={inputId}\n          multiple={multiple}\n          name={signed ? undefined : fieldName}\n          onChange={(event) => {\n            addFiles(event.target.files);\n            if (signed) {\n              event.target.value = \"\";\n            }\n          }}\n          ref={fileInputRef}\n          type=\"file\"\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/hidden-input.d.ts

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

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

@@ -1,10 +1,16 @@
+import { useFieldScope } from "../field-scope.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/hidden-input.tsx
-var HiddenInputComponent = ({ node }) => /* @__PURE__ */ jsx("input", {
-	defaultValue: typeof node.props.value === "string" ? node.props.value : "",
-	name: node.props.name,
-	type: "hidden"
-});
+var HiddenInputComponent = ({ node }) => {
+	const scope = useFieldScope();
+	const name = node.props.name;
+	const value = scope ? scope.getValue(name) : node.props.value;
+	return /* @__PURE__ */ jsx("input", {
+		defaultValue: typeof value === "string" ? value : "",
+		name: scope ? scope.scopedName(name) : name,
+		type: "hidden"
+	});
+};
 //#endregion
 export { HiddenInputComponent };
 

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

@@ -1 +1 @@
-{"version":3,"file":"hidden-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/hidden-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\n\nexport const HiddenInputComponent: RendererComponent<\"form.hidden-input\"> = ({ node }) => (\n  <input\n    defaultValue={typeof node.props.value === \"string\" ? node.props.value : \"\"}\n    name={node.props.name}\n    type=\"hidden\"\n  />\n);\n"],"mappings":";;AAEA,IAAa,wBAAgE,EAAE,WAC7E,oBAAC,SAAD;CACE,cAAc,OAAO,KAAK,MAAM,UAAU,WAAW,KAAK,MAAM,QAAQ;CACxE,MAAM,KAAK,MAAM;CACjB,MAAK;AACN,CAAA"}
+{"version":3,"file":"hidden-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/hidden-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useFieldScope } from \"../field-scope\";\n\nexport const HiddenInputComponent: RendererComponent<\"field.hidden-input\"> = ({ node }) => {\n  const scope = useFieldScope();\n  const name = node.props.name;\n  const value = scope ? scope.getValue(name) : node.props.value;\n\n  return (\n    <input\n      defaultValue={typeof value === \"string\" ? value : \"\"}\n      name={scope ? scope.scopedName(name) : name}\n      type=\"hidden\"\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,wBAAiE,EAAE,WAAW;CACzF,MAAM,QAAQ,cAAc;CAC5B,MAAM,OAAO,KAAK,MAAM;CACxB,MAAM,QAAQ,QAAQ,MAAM,SAAS,IAAI,IAAI,KAAK,MAAM;CAExD,OACE,oBAAC,SAAD;EACE,cAAc,OAAO,UAAU,WAAW,QAAQ;EAClD,MAAM,QAAQ,MAAM,WAAW,IAAI,IAAI;EACvC,MAAK;CACN,CAAA;AAEL"}

package/dist/form/components/fields/number-input.d.ts

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

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

@@ -7,13 +7,14 @@ var NumberInputComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, value, readOnly, disabled, commit }) => {
+		children: ({ name, testId, value, readOnly, disabled, commit }) => {
 			const onChange = (event) => commit(event.target.value);
 			return props.slider ? /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ jsx("input", {
 					"aria-label": props.label ?? "",
 					className: "h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50",
+					"data-test": testId,
 					disabled: disabled || readOnly,
 					id: name,
 					max: props.max ?? void 0,
@@ -30,6 +31,7 @@ var NumberInputComponent = ({ node }) => {
 				})]
 			}) : /* @__PURE__ */ jsx(Input, {
 				autoFocus: props.autoFocus ?? false,
+				"data-test": testId,
 				disabled,
 				id: name,
 				max: props.max ?? void 0,

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

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/number-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const NumberInputComponent: RendererComponent<\"form.number-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, value, readOnly, disabled, commit }) => {\n        const onChange = (event: React.ChangeEvent<HTMLInputElement>): void =>\n          commit(event.target.value);\n\n        return props.slider ? (\n          <div className=\"flex items-center gap-3\">\n            <input\n              aria-label={props.label ?? \"\"}\n              className=\"h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50\"\n              disabled={disabled || readOnly}\n              id={name}\n              max={props.max ?? undefined}\n              min={props.min ?? undefined}\n              name={name}\n              onChange={onChange}\n              step={props.step ?? undefined}\n              tabIndex={props.tabIndex ?? undefined}\n              type=\"range\"\n              value={value}\n            />\n            <output className=\"w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg\">\n              {value}\n            </output>\n          </div>\n        ) : (\n          <Input\n            autoFocus={props.autoFocus ?? false}\n            disabled={disabled}\n            id={name}\n            max={props.max ?? undefined}\n            min={props.min ?? undefined}\n            name={name}\n            onChange={onChange}\n            placeholder={props.placeholder ?? \"\"}\n            readOnly={readOnly}\n            step={props.step ?? undefined}\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"number\"\n            value={value}\n          />\n        );\n      }}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,wBAAgE,EAAE,WAAW;CACxF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa;GAChD,MAAM,YAAY,UAChB,OAAO,MAAM,OAAO,KAAK;GAE3B,OAAO,MAAM,SACX,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,SAAD;KACE,cAAY,MAAM,SAAS;KAC3B,WAAU;KACV,UAAU,YAAY;KACtB,IAAI;KACJ,KAAK,MAAM,OAAO,KAAA;KAClB,KAAK,MAAM,OAAO,KAAA;KACZ;KACI;KACV,MAAM,MAAM,QAAQ,KAAA;KACpB,UAAU,MAAM,YAAY,KAAA;KAC5B,MAAK;KACE;IACR,CAAA,GACD,oBAAC,UAAD;KAAQ,WAAU;eACf;IACK,CAAA,CACL;QAEL,oBAAC,OAAD;IACE,WAAW,MAAM,aAAa;IACpB;IACV,IAAI;IACJ,KAAK,MAAM,OAAO,KAAA;IAClB,KAAK,MAAM,OAAO,KAAA;IACZ;IACI;IACV,aAAa,MAAM,eAAe;IACxB;IACV,MAAM,MAAM,QAAQ,KAAA;IACpB,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAK;IACE;GACR,CAAA;EAEL;CACW,CAAA;AAEjB"}
+{"version":3,"file":"number-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/number-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 NumberInputComponent: RendererComponent<\"field.number-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        const onChange = (event: React.ChangeEvent<HTMLInputElement>): void =>\n          commit(event.target.value);\n\n        return props.slider ? (\n          <div className=\"flex items-center gap-3\">\n            <input\n              aria-label={props.label ?? \"\"}\n              className=\"h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50\"\n              data-test={testId}\n              disabled={disabled || readOnly}\n              id={name}\n              max={props.max ?? undefined}\n              min={props.min ?? undefined}\n              name={name}\n              onChange={onChange}\n              step={props.step ?? undefined}\n              tabIndex={props.tabIndex ?? undefined}\n              type=\"range\"\n              value={value}\n            />\n            <output className=\"w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg\">\n              {value}\n            </output>\n          </div>\n        ) : (\n          <Input\n            autoFocus={props.autoFocus ?? false}\n            data-test={testId}\n            disabled={disabled}\n            id={name}\n            max={props.max ?? undefined}\n            min={props.min ?? undefined}\n            name={name}\n            onChange={onChange}\n            placeholder={props.placeholder ?? \"\"}\n            readOnly={readOnly}\n            step={props.step ?? undefined}\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"number\"\n            value={value}\n          />\n        );\n      }}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,wBAAiE,EAAE,WAAW;CACzF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAAa;GACxD,MAAM,YAAY,UAChB,OAAO,MAAM,OAAO,KAAK;GAE3B,OAAO,MAAM,SACX,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,SAAD;KACE,cAAY,MAAM,SAAS;KAC3B,WAAU;KACV,aAAW;KACX,UAAU,YAAY;KACtB,IAAI;KACJ,KAAK,MAAM,OAAO,KAAA;KAClB,KAAK,MAAM,OAAO,KAAA;KACZ;KACI;KACV,MAAM,MAAM,QAAQ,KAAA;KACpB,UAAU,MAAM,YAAY,KAAA;KAC5B,MAAK;KACE;IACR,CAAA,GACD,oBAAC,UAAD;KAAQ,WAAU;eACf;IACK,CAAA,CACL;QAEL,oBAAC,OAAD;IACE,WAAW,MAAM,aAAa;IAC9B,aAAW;IACD;IACV,IAAI;IACJ,KAAK,MAAM,OAAO,KAAA;IAClB,KAAK,MAAM,OAAO,KAAA;IACZ;IACI;IACV,aAAa,MAAM,eAAe;IACxB;IACV,MAAM,MAAM,QAAQ,KAAA;IACpB,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAK;IACE;GACR,CAAA;EAEL;CACW,CAAA;AAEjB"}

package/dist/form/components/fields/password-input.d.ts

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

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

@@ -1,58 +1,67 @@
+import { testIdentity } from "../../../core/test-id.js";
 import { useFormContext } from "../context.js";
-import { useDependentField } from "../use-dependent-field.js";
+import { useFieldScope } from "../field-scope.js";
 import { FormFieldFrame } from "../base/field.js";
 import { useFieldCommit } from "../use-field-commit.js";
+import { useControlledField } from "../use-controlled-field.js";
 import PasswordInput from "../base/password-input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/password-input.tsx
 var PasswordInputComponent = ({ node }) => {
 	const props = node.props;
 	const { errors } = useFormContext();
-	const { hidden, required, readOnly, disabled } = useDependentField(node);
+	const field = useControlledField(node);
 	const { commit } = useFieldCommit();
-	const name = props.name ?? "";
+	const scope = useFieldScope();
 	const confirmation = props.confirmation;
-	const confirmationName = confirmation?.name ?? `${name}_confirmation`;
+	const confirmationLocalName = confirmation?.name ?? `${field.localName}_confirmation`;
+	const confirmationName = scope ? scope.scopedName(confirmationLocalName) : confirmationLocalName;
+	const confirmationErrorKey = scope ? scope.errorKey(confirmationLocalName) : confirmationLocalName;
 	const passwordRules = (props.passwordRules ?? "") || void 0;
-	if (hidden) return null;
-	const onChange = (field) => (event) => {
-		commit(field, event.target.value);
-	};
+	if (field.hidden) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "grid gap-6",
 		children: [/* @__PURE__ */ jsx(FormFieldFrame, {
-			error: errors[name],
+			error: field.error,
 			helperText: props.helperText ?? void 0,
+			tooltip: props.tooltip ?? void 0,
 			label: props.label ?? "",
 			labelAction: props.labelAction ?? void 0,
-			name,
-			required,
+			name: field.name,
+			required: field.required,
 			children: /* @__PURE__ */ jsx(PasswordInput, {
 				autoComplete: props.autoComplete ?? "",
 				autoFocus: props.autoFocus ?? false,
-				disabled,
-				id: name,
-				name,
-				onChange: onChange(name),
+				"data-test": field.testId,
+				disabled: field.disabled,
+				id: field.name,
+				name: field.name,
+				onChange: (event) => {
+					field.commit(event.target.value);
+				},
 				placeholder: props.placeholder ?? "",
 				passwordrules: passwordRules,
-				readOnly,
-				tabIndex: props.tabIndex ?? void 0
+				readOnly: field.readOnly,
+				tabIndex: props.tabIndex ?? void 0,
+				value: field.value
 			})
 		}), confirmation && /* @__PURE__ */ jsx(FormFieldFrame, {
-			error: errors[confirmationName],
+			error: errors[confirmationErrorKey],
 			label: confirmation.label ?? "Confirm password",
 			name: confirmationName,
-			required,
+			required: field.required,
 			children: /* @__PURE__ */ jsx(PasswordInput, {
 				autoComplete: "new-password",
-				disabled,
+				"data-test": testIdentity(confirmationLocalName),
+				disabled: field.disabled,
 				id: confirmationName,
 				name: confirmationName,
-				onChange: onChange(confirmationName),
+				onChange: (event) => {
+					commit(confirmationLocalName, event.target.value);
+				},
 				placeholder: confirmation.placeholder ?? confirmation.label ?? "Confirm password",
 				passwordrules: passwordRules,
-				readOnly,
+				readOnly: field.readOnly,
 				tabIndex: props.tabIndex ?? void 0
 			})
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"password-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/password-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport PasswordInput from \"../base/password-input\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormContext } from \"../context\";\n\nexport const PasswordInputComponent: RendererComponent<\"form.password-input\"> = ({ node }) => {\n  const props = node.props;\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { commit } = useFieldCommit();\n  const name = props.name ?? \"\";\n  const confirmation = props.confirmation;\n  const confirmationName = confirmation?.name ?? `${name}_confirmation`;\n  const passwordRules = (props.passwordRules ?? \"\") || undefined;\n\n  if (hidden) {\n    return null;\n  }\n\n  const onChange =\n    (field: string) =>\n    (event: React.ChangeEvent<HTMLInputElement>): void => {\n      commit(field, event.target.value);\n    };\n\n  return (\n    <div className=\"grid gap-6\">\n      <FormFieldFrame\n        error={errors[name]}\n        helperText={props.helperText ?? undefined}\n        label={props.label ?? \"\"}\n        labelAction={props.labelAction ?? undefined}\n        name={name}\n        required={required}\n      >\n        <PasswordInput\n          autoComplete={props.autoComplete ?? \"\"}\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          id={name}\n          name={name}\n          onChange={onChange(name)}\n          placeholder={props.placeholder ?? \"\"}\n          passwordrules={passwordRules}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n        />\n      </FormFieldFrame>\n\n      {confirmation && (\n        <FormFieldFrame\n          error={errors[confirmationName]}\n          label={confirmation.label ?? \"Confirm password\"}\n          name={confirmationName}\n          required={required}\n        >\n          <PasswordInput\n            autoComplete=\"new-password\"\n            disabled={disabled}\n            id={confirmationName}\n            name={confirmationName}\n            onChange={onChange(confirmationName)}\n            placeholder={confirmation.placeholder ?? confirmation.label ?? \"Confirm password\"}\n            passwordrules={passwordRules}\n            readOnly={readOnly}\n            tabIndex={props.tabIndex ?? undefined}\n          />\n        </FormFieldFrame>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,0BAAoE,EAAE,WAAW;CAC5F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,eAAe,MAAM;CAC3B,MAAM,mBAAmB,cAAc,QAAQ,GAAG,KAAK;CACvD,MAAM,iBAAiB,MAAM,iBAAiB,OAAO,KAAA;CAErD,IAAI,QACF,OAAO;CAGT,MAAM,YACH,WACA,UAAqD;EACpD,OAAO,OAAO,MAAM,OAAO,KAAK;CAClC;CAEF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,YAAY,MAAM,cAAc,KAAA;GAChC,OAAO,MAAM,SAAS;GACtB,aAAa,MAAM,eAAe,KAAA;GAC5B;GACI;aAEV,oBAAC,eAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IACpB;IACV,IAAI;IACE;IACN,UAAU,SAAS,IAAI;IACvB,aAAa,MAAM,eAAe;IAClC,eAAe;IACL;IACV,UAAU,MAAM,YAAY,KAAA;GAC7B,CAAA;EACa,CAAA,GAEf,gBACC,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,aAAa,SAAS;GAC7B,MAAM;GACI;aAEV,oBAAC,eAAD;IACE,cAAa;IACH;IACV,IAAI;IACJ,MAAM;IACN,UAAU,SAAS,gBAAgB;IACnC,aAAa,aAAa,eAAe,aAAa,SAAS;IAC/D,eAAe;IACL;IACV,UAAU,MAAM,YAAY,KAAA;GAC7B,CAAA;EACa,CAAA,CAEf;;AAET"}
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/password-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { FormFieldFrame } from \"../base/field\";\nimport PasswordInput from \"../base/password-input\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useControlledField } from \"../use-controlled-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormContext } from \"../context\";\n\nexport const PasswordInputComponent: RendererComponent<\"field.password-input\"> = ({ node }) => {\n  const props = node.props;\n  const { errors } = useFormContext();\n  const field = useControlledField(node);\n  const { commit } = useFieldCommit();\n  const scope = useFieldScope();\n  const confirmation = props.confirmation;\n  const confirmationLocalName = confirmation?.name ?? `${field.localName}_confirmation`;\n  const confirmationName = scope ? scope.scopedName(confirmationLocalName) : confirmationLocalName;\n  const confirmationErrorKey = scope\n    ? scope.errorKey(confirmationLocalName)\n    : confirmationLocalName;\n  const passwordRules = (props.passwordRules ?? \"\") || undefined;\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <div className=\"grid gap-6\">\n      <FormFieldFrame\n        error={field.error}\n        helperText={props.helperText ?? undefined}\n        tooltip={props.tooltip ?? undefined}\n        label={props.label ?? \"\"}\n        labelAction={props.labelAction ?? undefined}\n        name={field.name}\n        required={field.required}\n      >\n        <PasswordInput\n          autoComplete={props.autoComplete ?? \"\"}\n          autoFocus={props.autoFocus ?? false}\n          data-test={field.testId}\n          disabled={field.disabled}\n          id={field.name}\n          name={field.name}\n          onChange={(event) => {\n            field.commit(event.target.value);\n          }}\n          placeholder={props.placeholder ?? \"\"}\n          passwordrules={passwordRules}\n          readOnly={field.readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          value={field.value}\n        />\n      </FormFieldFrame>\n\n      {confirmation && (\n        <FormFieldFrame\n          error={errors[confirmationErrorKey]}\n          label={confirmation.label ?? \"Confirm password\"}\n          name={confirmationName}\n          required={field.required}\n        >\n          <PasswordInput\n            autoComplete=\"new-password\"\n            data-test={testIdentity(confirmationLocalName)}\n            disabled={field.disabled}\n            id={confirmationName}\n            name={confirmationName}\n            onChange={(event) => {\n              commit(confirmationLocalName, event.target.value);\n            }}\n            placeholder={confirmation.placeholder ?? confirmation.label ?? \"Confirm password\"}\n            passwordrules={passwordRules}\n            readOnly={field.readOnly}\n            tabIndex={props.tabIndex ?? undefined}\n          />\n        </FormFieldFrame>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,0BAAqE,EAAE,WAAW;CAC7F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,mBAAmB,IAAI;CACrC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,cAAc;CAC5B,MAAM,eAAe,MAAM;CAC3B,MAAM,wBAAwB,cAAc,QAAQ,GAAG,MAAM,UAAU;CACvE,MAAM,mBAAmB,QAAQ,MAAM,WAAW,qBAAqB,IAAI;CAC3E,MAAM,uBAAuB,QACzB,MAAM,SAAS,qBAAqB,IACpC;CACJ,MAAM,iBAAiB,MAAM,iBAAiB,OAAO,KAAA;CAErD,IAAI,MAAM,QACR,OAAO;CAGT,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,gBAAD;GACE,OAAO,MAAM;GACb,YAAY,MAAM,cAAc,KAAA;GAChC,SAAS,MAAM,WAAW,KAAA;GAC1B,OAAO,MAAM,SAAS;GACtB,aAAa,MAAM,eAAe,KAAA;GAClC,MAAM,MAAM;GACZ,UAAU,MAAM;aAEhB,oBAAC,eAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IAC9B,aAAW,MAAM;IACjB,UAAU,MAAM;IAChB,IAAI,MAAM;IACV,MAAM,MAAM;IACZ,WAAW,UAAU;KACnB,MAAM,OAAO,MAAM,OAAO,KAAK;IACjC;IACA,aAAa,MAAM,eAAe;IAClC,eAAe;IACf,UAAU,MAAM;IAChB,UAAU,MAAM,YAAY,KAAA;IAC5B,OAAO,MAAM;GACd,CAAA;EACa,CAAA,GAEf,gBACC,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,aAAa,SAAS;GAC7B,MAAM;GACN,UAAU,MAAM;aAEhB,oBAAC,eAAD;IACE,cAAa;IACb,aAAW,aAAa,qBAAqB;IAC7C,UAAU,MAAM;IAChB,IAAI;IACJ,MAAM;IACN,WAAW,UAAU;KACnB,OAAO,uBAAuB,MAAM,OAAO,KAAK;IAClD;IACA,aAAa,aAAa,eAAe,aAAa,SAAS;IAC/D,eAAe;IACf,UAAU,MAAM;IAChB,UAAU,MAAM,YAAY,KAAA;GAC7B,CAAA;EACa,CAAA,CAEf;;AAET"}

package/dist/form/components/fields/repeater-rows.d.ts

@@ -0,0 +1,12 @@
+export type RepeaterRow = Record<string, unknown>;
+export declare const ROW_ID_KEY = "__rowId";
+/** Stamp a stable client-only id on a row (no-op if it already has one). */
+export declare function withRowId(row: RepeaterRow): RepeaterRow;
+/** Ensure every row has a stable id; returns the SAME array reference if none were missing. */
+export declare function ensureRowIds(rows: RepeaterRow[]): RepeaterRow[];
+/** Seed the row list from a stored value, falling back to `defaultItems` blank rows. */
+export declare function seedRows(value: unknown, defaultItems: number): RepeaterRow[];
+export declare function addRow(rows: RepeaterRow[]): RepeaterRow[];
+export declare function removeRow(rows: RepeaterRow[], index: number): RepeaterRow[];
+export declare function duplicateRow(rows: RepeaterRow[], index: number): RepeaterRow[];
+export declare function moveRow(rows: RepeaterRow[], from: number, to: number): RepeaterRow[];

package/dist/form/components/fields/repeater-rows.js

@@ -0,0 +1,46 @@
+//#region resources/js/form/components/fields/repeater-rows.ts
+var ROW_ID_KEY = "__rowId";
+var rowIdCounter = 0;
+/** Stamp a stable client-only id on a row (no-op if it already has one). */
+function withRowId(row) {
+	return row["__rowId"] ? row : {
+		...row,
+		[ROW_ID_KEY]: `r${rowIdCounter++}`
+	};
+}
+/** Ensure every row has a stable id; returns the SAME array reference if none were missing. */
+function ensureRowIds(rows) {
+	if (rows.every((row) => Boolean(row["__rowId"]))) return rows;
+	return rows.map(withRowId);
+}
+/** Seed the row list from a stored value, falling back to `defaultItems` blank rows. */
+function seedRows(value, defaultItems) {
+	if (Array.isArray(value) && value.length > 0) return value.map((row) => row && typeof row === "object" ? { ...row } : {});
+	return Array.from({ length: Math.max(0, defaultItems) }, () => ({}));
+}
+function addRow(rows) {
+	return [...rows, {}];
+}
+function removeRow(rows, index) {
+	return rows.filter((_, i) => i !== index);
+}
+function duplicateRow(rows, index) {
+	const source = rows[index];
+	if (!source) return rows;
+	const { [ROW_ID_KEY]: _id, ...copy } = source;
+	return [
+		...rows.slice(0, index + 1),
+		withRowId(copy),
+		...rows.slice(index + 1)
+	];
+}
+function moveRow(rows, from, to) {
+	const next = [...rows];
+	const [moved] = next.splice(from, 1);
+	next.splice(to, 0, moved);
+	return next;
+}
+//#endregion
+export { ROW_ID_KEY, addRow, duplicateRow, ensureRowIds, moveRow, removeRow, seedRows, withRowId };
+
+//# sourceMappingURL=repeater-rows.js.map

package/dist/form/components/fields/repeater-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeater-rows.js","names":[],"sources":["../../../../resources/js/form/components/fields/repeater-rows.ts"],"sourcesContent":["export type RepeaterRow = Record<string, unknown>;\n\nexport const ROW_ID_KEY = \"__rowId\";\n\nlet rowIdCounter = 0;\n\n/** Stamp a stable client-only id on a row (no-op if it already has one). */\nexport function withRowId(row: RepeaterRow): RepeaterRow {\n  return row[ROW_ID_KEY] ? row : { ...row, [ROW_ID_KEY]: `r${rowIdCounter++}` };\n}\n\n/** Ensure every row has a stable id; returns the SAME array reference if none were missing. */\nexport function ensureRowIds(rows: RepeaterRow[]): RepeaterRow[] {\n  if (rows.every((row) => Boolean(row[ROW_ID_KEY]))) {\n    return rows;\n  }\n  return rows.map(withRowId);\n}\n\n/** Seed the row list from a stored value, falling back to `defaultItems` blank rows. */\nexport function seedRows(value: unknown, defaultItems: number): RepeaterRow[] {\n  if (Array.isArray(value) && value.length > 0) {\n    return value.map((row) => (row && typeof row === \"object\" ? { ...(row as RepeaterRow) } : {}));\n  }\n\n  return Array.from({ length: Math.max(0, defaultItems) }, () => ({}));\n}\n\nexport function addRow(rows: RepeaterRow[]): RepeaterRow[] {\n  return [...rows, {}];\n}\n\nexport function removeRow(rows: RepeaterRow[], index: number): RepeaterRow[] {\n  return rows.filter((_, i) => i !== index);\n}\n\nexport function duplicateRow(rows: RepeaterRow[], index: number): RepeaterRow[] {\n  const source = rows[index];\n  if (!source) {\n    return rows;\n  }\n\n  const { [ROW_ID_KEY]: _id, ...copy } = source;\n  return [...rows.slice(0, index + 1), withRowId(copy), ...rows.slice(index + 1)];\n}\n\nexport function moveRow(rows: RepeaterRow[], from: number, to: number): RepeaterRow[] {\n  const next = [...rows];\n  const [moved] = next.splice(from, 1);\n  next.splice(to, 0, moved);\n  return next;\n}\n"],"mappings":";AAEA,IAAa,aAAa;AAE1B,IAAI,eAAe;;AAGnB,SAAgB,UAAU,KAA+B;CACvD,OAAO,IAAA,aAAkB,MAAM;EAAE,GAAG;GAAM,aAAa,IAAI;CAAiB;AAC9E;;AAGA,SAAgB,aAAa,MAAoC;CAC/D,IAAI,KAAK,OAAO,QAAQ,QAAQ,IAAA,UAAe,CAAC,GAC9C,OAAO;CAET,OAAO,KAAK,IAAI,SAAS;AAC3B;;AAGA,SAAgB,SAAS,OAAgB,cAAqC;CAC5E,IAAI,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,GACzC,OAAO,MAAM,KAAK,QAAS,OAAO,OAAO,QAAQ,WAAW,EAAE,GAAI,IAAoB,IAAI,CAAC,CAAE;CAG/F,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,YAAY,EAAE,UAAU,CAAC,EAAE;AACrE;AAEA,SAAgB,OAAO,MAAoC;CACzD,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC;AACrB;AAEA,SAAgB,UAAU,MAAqB,OAA8B;CAC3E,OAAO,KAAK,QAAQ,GAAG,MAAM,MAAM,KAAK;AAC1C;AAEA,SAAgB,aAAa,MAAqB,OAA8B;CAC9E,MAAM,SAAS,KAAK;CACpB,IAAI,CAAC,QACH,OAAO;CAGT,MAAM,GAAG,aAAa,KAAK,GAAG,SAAS;CACvC,OAAO;EAAC,GAAG,KAAK,MAAM,GAAG,QAAQ,CAAC;EAAG,UAAU,IAAI;EAAG,GAAG,KAAK,MAAM,QAAQ,CAAC;CAAC;AAChF;AAEA,SAAgB,QAAQ,MAAqB,MAAc,IAA2B;CACpF,MAAM,OAAO,CAAC,GAAG,IAAI;CACrB,MAAM,CAAC,SAAS,KAAK,OAAO,MAAM,CAAC;CACnC,KAAK,OAAO,IAAI,GAAG,KAAK;CACxB,OAAO;AACT"}

package/dist/form/components/fields/repeater.d.ts

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