@lattice-php/lattice 0.1.0 → 0.3.0

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

@@ -0,0 +1,188 @@
+import { Icon } from "../../../icons/sprite.js";
+import { useT } from "../../../i18n/instance.js";
+import { RenderNode } from "../../../core/renderer.js";
+import { FieldScopeProvider } from "../field-scope.js";
+import "../../../core/column-sizing.js";
+import { useColumnResizing } from "../../../core/use-column-resizing.js";
+import { TableCellProvider } from "../row-layout-context.js";
+import { buildRowActions } from "./row-action-menu.js";
+import { RowActions } from "./row-actions.js";
+import { RowButton, RowItem } from "./row-item.js";
+import { memo, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/table-rows.tsx
+var rowControlTrack = "3rem";
+var rowActionTrack = "3rem";
+var rowControlTracks = [rowControlTrack];
+var rowActionTracks = [rowActionTrack];
+var tableViewportQuery = "(min-width: 768px)";
+function tableViewportMatches() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return true;
+	return window.matchMedia(tableViewportQuery).matches;
+}
+function useTableViewport() {
+	const [matches, setMatches] = useState(tableViewportMatches);
+	useEffect(() => {
+		if (typeof window.matchMedia !== "function") return;
+		const query = window.matchMedia(tableViewportQuery);
+		const update = () => setMatches(query.matches);
+		update();
+		query.addEventListener("change", update);
+		return () => query.removeEventListener("change", update);
+	}, []);
+	return matches;
+}
+function columnsFromSchema(nodes) {
+	return nodes.map((node) => {
+		const props = node.props;
+		return {
+			name: String(props.name),
+			label: String(props.label ?? props.name),
+			columnWidth: props.columnWidth ?? "md"
+		};
+	});
+}
+var TableRowItem = memo(function TableRowItem({ base, index, row, template, span, isFirst, isLast, columnCount, gridTemplateColumns, flipKey, reorderable, removable, rowActions, onField, onMove, onRemove, onDuplicate, registerRow }) {
+	const { t } = useT("lattice");
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (el) => registerRow?.(flipKey, el),
+		"data-flip-key": flipKey,
+		"data-test": `table-row-${base}-${index}`,
+		className: "grid items-start gap-x-3",
+		style: { gridTemplateColumns },
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1 [&_svg]:size-lt-icon-sm",
+				children: [reorderable && !isFirst && /* @__PURE__ */ jsx(RowButton, {
+					label: "Move up",
+					testId: `table-${base}-up-${index}`,
+					onClick: () => onMove(index, -1),
+					children: /* @__PURE__ */ jsx(Icon, { name: "arrow-up" })
+				}), reorderable && !isLast && /* @__PURE__ */ jsx(RowButton, {
+					label: "Move down",
+					testId: `table-${base}-down-${index}`,
+					onClick: () => onMove(index, 1),
+					children: /* @__PURE__ */ jsx(Icon, { name: "arrow-down" })
+				})]
+			}),
+			/* @__PURE__ */ jsx(FieldScopeProvider, {
+				base,
+				index,
+				row,
+				onChange: (field, value) => onField(index, field, value),
+				children: /* @__PURE__ */ jsx(TableCellProvider, { children: span ? /* @__PURE__ */ jsx("div", {
+					"data-test": `table-row-${base}-${index}-span`,
+					className: "flex flex-col gap-2",
+					style: { gridColumn: `span ${columnCount}` },
+					children: template.map((child) => /* @__PURE__ */ jsx(RenderNode, { node: child }, child.key ?? child.id))
+				}) : template.map((child) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RenderNode, { node: child }) }, child.key ?? child.id)) })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				children: /* @__PURE__ */ jsx(RowActions, { actions: buildRowActions(rowActions, {
+					index,
+					removable,
+					onRemove,
+					onDuplicate,
+					t
+				}) })
+			})
+		]
+	});
+});
+function TableRows({ base, columns, rows, reorderable, removable, rowActions, onField, onMove, onRemove, onDuplicate, registerRow, resizableColumns = false, resizeIndicator = false }) {
+	const { t } = useT("lattice");
+	const isTableViewport = useTableViewport();
+	const sizingColumns = useMemo(() => columns.map((column) => ({
+		key: column.name,
+		label: column.label,
+		width: column.columnWidth
+	})), [columns]);
+	const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resetColumns } = useColumnResizing({
+		columns: sizingColumns,
+		enabled: resizableColumns,
+		columnGapPx: 12,
+		leadingTracks: rowControlTracks,
+		showIndicator: resizeIndicator,
+		storageKey: resizableColumns ? `lattice:table-columns:form:${base}` : void 0,
+		trailingTracks: rowActionTracks
+	});
+	if (!isTableViewport) return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children: rows.map((row) => /* @__PURE__ */ jsx("div", {
+			ref: (el) => registerRow?.(row.key, el),
+			"data-flip-key": row.key,
+			children: /* @__PURE__ */ jsx(RowItem, {
+				base,
+				index: row.index,
+				row: row.row,
+				template: row.template,
+				heading: row.heading ?? `#${row.index + 1}`,
+				reorderable,
+				isFirst: row.index === 0,
+				isLast: row.index === rows.length - 1,
+				removable: removable(row.index),
+				rowActions,
+				onField,
+				onRemove,
+				onMove,
+				onDuplicate
+			})
+		}, row.key))
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [hasOverrides && /* @__PURE__ */ jsx("button", {
+			"aria-label": t("a11y.resetColumnWidths", "Reset column widths"),
+			className: "absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex",
+			"data-test": "table-reset-columns",
+			onClick: resetColumns,
+			title: t("a11y.resetColumnWidths", "Reset column widths"),
+			type: "button",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "rotate-ccw",
+				className: "size-lt-icon-sm"
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-max flex-col gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "grid items-center gap-x-3",
+					style: { gridTemplateColumns },
+					children: [
+						/* @__PURE__ */ jsx("div", {}),
+						columns.map((column, index) => /* @__PURE__ */ jsxs("div", {
+							className: "relative min-w-0 pr-3 text-xs font-medium text-lt-muted-fg",
+							children: [column.label, resizableColumns && /* @__PURE__ */ jsx("div", { ...getResizeHandleProps(sizingColumns[index]) })]
+						}, column.name)),
+						/* @__PURE__ */ jsx("div", {})
+					]
+				}), rows.map((row) => /* @__PURE__ */ jsx(TableRowItem, {
+					base,
+					index: row.index,
+					row: row.row,
+					template: row.template,
+					span: row.span,
+					isFirst: row.index === 0,
+					isLast: row.index === rows.length - 1,
+					columnCount: columns.length,
+					gridTemplateColumns,
+					flipKey: row.key,
+					reorderable,
+					removable: removable(row.index),
+					rowActions,
+					onField,
+					onMove,
+					onRemove,
+					onDuplicate,
+					registerRow
+				}, row.key))]
+			})
+		})]
+	});
+}
+//#endregion
+export { TableRows, columnsFromSchema };
+
+//# sourceMappingURL=table-rows.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-rows.js","names":[],"sources":["../../../../resources/js/form/components/fields/table-rows.tsx"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { DEFAULT_COLUMN_WIDTH, type SizableColumn } from \"@lattice-php/lattice/core/column-sizing\";\nimport { useColumnResizing } from \"@lattice-php/lattice/core/use-column-resizing\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { memo, useEffect, useMemo, useState } from \"react\";\nimport type { ColumnWidth, RowAction as WireRowAction } from \"@lattice-php/lattice/types/generated\";\nimport { FieldScopeProvider } from \"../field-scope\";\nimport { TableCellProvider } from \"../row-layout-context\";\nimport { buildRowActions } from \"./row-action-menu\";\nimport { RowActions } from \"./row-actions\";\nimport { RowButton, RowItem } from \"./row-item\";\nimport type { RepeaterRow } from \"./repeater-rows\";\n\nconst rowControlTrack = \"3rem\";\nconst rowActionTrack = \"3rem\";\nconst rowControlTracks = [rowControlTrack];\nconst rowActionTracks = [rowActionTrack];\nconst tableViewportQuery = \"(min-width: 768px)\";\n\nexport type TableColumn = { name: string; label: string; columnWidth: ColumnWidth };\n\nexport type TableRowModel = {\n  key: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  span: boolean;\n  heading?: string;\n};\n\nfunction tableViewportMatches(): boolean {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return true;\n  }\n\n  return window.matchMedia(tableViewportQuery).matches;\n}\n\nfunction useTableViewport(): boolean {\n  const [matches, setMatches] = useState(tableViewportMatches);\n\n  useEffect(() => {\n    if (typeof window.matchMedia !== \"function\") {\n      return;\n    }\n\n    const query = window.matchMedia(tableViewportQuery);\n    const update = () => setMatches(query.matches);\n\n    update();\n    query.addEventListener(\"change\", update);\n\n    return () => query.removeEventListener(\"change\", update);\n  }, []);\n\n  return matches;\n}\n\nexport function columnsFromSchema(nodes: Node[]): TableColumn[] {\n  return nodes.map((node) => {\n    const props = node.props as {\n      name: unknown;\n      label?: unknown;\n      columnWidth?: ColumnWidth | null;\n    };\n    return {\n      name: String(props.name),\n      label: String(props.label ?? props.name),\n      columnWidth: props.columnWidth ?? DEFAULT_COLUMN_WIDTH,\n    };\n  });\n}\n\ntype TableRowItemProps = {\n  base: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  span: boolean;\n  isFirst: boolean;\n  isLast: boolean;\n  columnCount: number;\n  gridTemplateColumns: string;\n  flipKey: string;\n  reorderable: boolean;\n  removable: boolean;\n  rowActions: WireRowAction[] | null;\n  onField: (index: number, field: string, value: unknown) => void;\n  onMove: (index: number, delta: number) => void;\n  onRemove: (index: number) => void;\n  onDuplicate: (index: number) => void;\n  registerRow?: (key: string, el: HTMLElement | null) => void;\n};\n\nconst TableRowItem = memo(function TableRowItem({\n  base,\n  index,\n  row,\n  template,\n  span,\n  isFirst,\n  isLast,\n  columnCount,\n  gridTemplateColumns,\n  flipKey,\n  reorderable,\n  removable,\n  rowActions,\n  onField,\n  onMove,\n  onRemove,\n  onDuplicate,\n  registerRow,\n}: TableRowItemProps) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div\n      ref={(el) => registerRow?.(flipKey, el)}\n      data-flip-key={flipKey}\n      data-test={`table-row-${base}-${index}`}\n      className=\"grid items-start gap-x-3\"\n      style={{ gridTemplateColumns }}\n    >\n      <div className=\"flex items-center gap-1 [&_svg]:size-lt-icon-sm\">\n        {reorderable && !isFirst && (\n          <RowButton\n            label=\"Move up\"\n            testId={`table-${base}-up-${index}`}\n            onClick={() => onMove(index, -1)}\n          >\n            <Icon name=\"arrow-up\" />\n          </RowButton>\n        )}\n        {reorderable && !isLast && (\n          <RowButton\n            label=\"Move down\"\n            testId={`table-${base}-down-${index}`}\n            onClick={() => onMove(index, 1)}\n          >\n            <Icon name=\"arrow-down\" />\n          </RowButton>\n        )}\n      </div>\n\n      <FieldScopeProvider\n        base={base}\n        index={index}\n        row={row}\n        onChange={(field, value) => onField(index, field, value)}\n      >\n        <TableCellProvider>\n          {span ? (\n            <div\n              data-test={`table-row-${base}-${index}-span`}\n              className=\"flex flex-col gap-2\"\n              style={{ gridColumn: `span ${columnCount}` }}\n            >\n              {template.map((child) => (\n                <RenderNode key={child.key ?? child.id} node={child} />\n              ))}\n            </div>\n          ) : (\n            template.map((child) => (\n              <div key={child.key ?? child.id}>\n                <RenderNode node={child} />\n              </div>\n            ))\n          )}\n        </TableCellProvider>\n      </FieldScopeProvider>\n\n      <div className=\"flex items-center\">\n        <RowActions\n          actions={buildRowActions(rowActions, { index, removable, onRemove, onDuplicate, t })}\n        />\n      </div>\n    </div>\n  );\n});\n\nexport function TableRows({\n  base,\n  columns,\n  rows,\n  reorderable,\n  removable,\n  rowActions,\n  onField,\n  onMove,\n  onRemove,\n  onDuplicate,\n  registerRow,\n  resizableColumns = false,\n  resizeIndicator = false,\n}: {\n  base: string;\n  columns: TableColumn[];\n  rows: TableRowModel[];\n  reorderable: boolean;\n  removable: (index: number) => boolean;\n  rowActions: WireRowAction[] | null;\n  onField: (index: number, field: string, value: unknown) => void;\n  onMove: (index: number, delta: number) => void;\n  onRemove: (index: number) => void;\n  onDuplicate: (index: number) => void;\n  registerRow?: (key: string, el: HTMLElement | null) => void;\n  resizableColumns?: boolean;\n  resizeIndicator?: boolean;\n}) {\n  const { t } = useT(\"lattice\");\n  const isTableViewport = useTableViewport();\n  const sizingColumns = useMemo<SizableColumn[]>(\n    () =>\n      columns.map((column) => ({\n        key: column.name,\n        label: column.label,\n        width: column.columnWidth,\n      })),\n    [columns],\n  );\n  const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resetColumns } =\n    useColumnResizing({\n      columns: sizingColumns,\n      enabled: resizableColumns,\n      columnGapPx: 12,\n      leadingTracks: rowControlTracks,\n      showIndicator: resizeIndicator,\n      storageKey: resizableColumns ? `lattice:table-columns:form:${base}` : undefined,\n      trailingTracks: rowActionTracks,\n    });\n\n  if (!isTableViewport) {\n    return (\n      <div className=\"flex flex-col gap-3\">\n        {rows.map((row) => (\n          <div key={row.key} ref={(el) => registerRow?.(row.key, el)} data-flip-key={row.key}>\n            <RowItem\n              base={base}\n              index={row.index}\n              row={row.row}\n              template={row.template}\n              heading={row.heading ?? `#${row.index + 1}`}\n              reorderable={reorderable}\n              isFirst={row.index === 0}\n              isLast={row.index === rows.length - 1}\n              removable={removable(row.index)}\n              rowActions={rowActions}\n              onField={onField}\n              onRemove={onRemove}\n              onMove={onMove}\n              onDuplicate={onDuplicate}\n            />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative\">\n      {hasOverrides && (\n        <button\n          aria-label={t(\"a11y.resetColumnWidths\", \"Reset column widths\")}\n          className=\"absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex\"\n          data-test=\"table-reset-columns\"\n          onClick={resetColumns}\n          title={t(\"a11y.resetColumnWidths\", \"Reset column widths\")}\n          type=\"button\"\n        >\n          <Icon name=\"rotate-ccw\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n      <div className=\"overflow-x-auto\">\n        <div className=\"flex min-w-max flex-col gap-2\">\n          <div className=\"grid items-center gap-x-3\" style={{ gridTemplateColumns }}>\n            <div />\n            {columns.map((column, index) => (\n              <div\n                key={column.name}\n                className=\"relative min-w-0 pr-3 text-xs font-medium text-lt-muted-fg\"\n              >\n                {column.label}\n                {resizableColumns && <div {...getResizeHandleProps(sizingColumns[index])} />}\n              </div>\n            ))}\n            <div />\n          </div>\n\n          {rows.map((row) => (\n            <TableRowItem\n              key={row.key}\n              base={base}\n              index={row.index}\n              row={row.row}\n              template={row.template}\n              span={row.span}\n              isFirst={row.index === 0}\n              isLast={row.index === rows.length - 1}\n              columnCount={columns.length}\n              gridTemplateColumns={gridTemplateColumns}\n              flipKey={row.key}\n              reorderable={reorderable}\n              removable={removable(row.index)}\n              rowActions={rowActions}\n              onField={onField}\n              onMove={onMove}\n              onRemove={onRemove}\n              onDuplicate={onDuplicate}\n              registerRow={registerRow}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,21 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.text-input": {
-            autoComplete?: string;
-            autoFocus?: boolean;
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            name?: string;
-            placeholder?: string;
-            readonly?: boolean;
-            required?: boolean;
-            tabIndex?: number;
-            type?: "email" | "text";
-            value?: string;
-        };
-    }
-}
-export declare const TextInputComponent: RendererComponent<"form.text-input">;
+import { RendererComponent } from '../../../core/types';
+export declare const TextInputComponent: RendererComponent<"field.text-input">;

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

@@ -1,28 +1,24 @@
-import { getBooleanProp, getOptionalNumberProp, getStringProp } from "../../../core/props.js";
-import { FormFieldFrame } from "../base/field.js";
-import { useControlledField } from "../use-controlled-field.js";
 import { Input } from "../base/input.js";
+import { SimpleField } from "./simple-field.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/text-input.tsx
 var TextInputComponent = ({ node }) => {
-	const { name, value, error, hidden, required, readonly, disabled, commit } = useControlledField(node);
-	if (hidden) return null;
-	return /* @__PURE__ */ jsx(FormFieldFrame, {
-		error,
-		label: getStringProp(node.props, "label"),
-		name,
-		required,
-		children: /* @__PURE__ */ jsx(Input, {
-			autoComplete: getStringProp(node.props, "autoComplete"),
-			autoFocus: getBooleanProp(node.props, "autoFocus"),
+	const props = node.props;
+	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: getStringProp(node.props, "placeholder"),
-			readOnly: readonly,
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
-			type: getStringProp(node.props, "type", "text"),
+			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 { getBooleanProp, getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { Input } from \"../base/input\";\nimport { useControlledField } from \"../use-controlled-field\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.text-input\": {\n      autoComplete?: string;\n      autoFocus?: boolean;\n      conditions?: unknown;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      name?: string;\n      placeholder?: string;\n      readonly?: boolean;\n      required?: boolean;\n      tabIndex?: number;\n      type?: \"email\" | \"text\";\n      value?: string;\n    };\n  }\n}\n\nexport const TextInputComponent: RendererComponent<\"form.text-input\"> = ({ node }) => {\n  const { name, value, error, hidden, required, readonly, disabled, commit } =\n    useControlledField(node);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      <Input\n        autoComplete={getStringProp(node.props, \"autoComplete\")}\n        autoFocus={getBooleanProp(node.props, \"autoFocus\")}\n        disabled={disabled}\n        id={name}\n        name={name}\n        onChange={(event) => commit(event.target.value)}\n        placeholder={getStringProp(node.props, \"placeholder\")}\n        readOnly={readonly}\n        tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n        type={getStringProp(node.props, \"type\", \"text\")}\n        value={value}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;AA0BA,IAAa,sBAA4D,EAAE,WAAW;CACpF,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CAEzB,IAAI,QACF,OAAO;CAGT,OACE,oBAAC,gBAAD;EACS;EACP,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAEV,oBAAC,OAAD;GACE,cAAc,cAAc,KAAK,OAAO,cAAc;GACtD,WAAW,eAAe,KAAK,OAAO,WAAW;GACvC;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,cAAc,KAAK,OAAO,aAAa;GACpD,UAAU;GACV,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACtD,MAAM,cAAc,KAAK,OAAO,QAAQ,MAAM;GACvC;EACR,CAAA;CACa,CAAA;AAEpB"}
+{"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"}

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

@@ -1,20 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.textarea": {
-            autoFocus?: boolean;
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            name?: string;
-            placeholder?: string;
-            readonly?: boolean;
-            required?: boolean;
-            rows?: number;
-            tabIndex?: number;
-            value?: string;
-        };
-    }
-}
-export declare const TextareaComponent: RendererComponent<"form.textarea">;
+import { RendererComponent } from '../../../core/types';
+export declare const TextareaComponent: RendererComponent<"field.textarea">;

package/dist/form/components/fields/textarea.js

@@ -1,27 +1,23 @@
-import { getBooleanProp, getOptionalNumberProp, getStringProp } from "../../../core/props.js";
-import { FormFieldFrame } from "../base/field.js";
-import { useControlledField } from "../use-controlled-field.js";
+import { SimpleField } from "./simple-field.js";
 import { Textarea } from "../base/textarea.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/textarea.tsx
 var TextareaComponent = ({ node }) => {
-	const { name, value, error, hidden, required, readonly, disabled, commit } = useControlledField(node);
-	if (hidden) return null;
-	return /* @__PURE__ */ jsx(FormFieldFrame, {
-		error,
-		label: getStringProp(node.props, "label"),
-		name,
-		required,
-		children: /* @__PURE__ */ jsx(Textarea, {
-			autoFocus: getBooleanProp(node.props, "autoFocus"),
+	const props = node.props;
+	return /* @__PURE__ */ jsx(SimpleField, {
+		node,
+		label: props.label ?? "",
+		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Textarea, {
+			autoFocus: props.autoFocus ?? false,
+			"data-test": testId,
 			disabled,
 			id: name,
 			name,
 			onChange: (event) => commit(event.target.value),
-			placeholder: getStringProp(node.props, "placeholder"),
-			readOnly: readonly,
-			rows: getOptionalNumberProp(node.props, "rows"),
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+			placeholder: props.placeholder ?? "",
+			readOnly,
+			rows: props.rows ?? void 0,
+			tabIndex: props.tabIndex ?? void 0,
 			value
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../../../resources/js/form/components/fields/textarea.tsx"],"sourcesContent":["import { getBooleanProp, getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { Textarea } from \"../base/textarea\";\nimport { useControlledField } from \"../use-controlled-field\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.textarea\": {\n      autoFocus?: boolean;\n      conditions?: unknown;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      name?: string;\n      placeholder?: string;\n      readonly?: boolean;\n      required?: boolean;\n      rows?: number;\n      tabIndex?: number;\n      value?: string;\n    };\n  }\n}\n\nexport const TextareaComponent: RendererComponent<\"form.textarea\"> = ({ node }) => {\n  const { name, value, error, hidden, required, readonly, disabled, commit } =\n    useControlledField(node);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      <Textarea\n        autoFocus={getBooleanProp(node.props, \"autoFocus\")}\n        disabled={disabled}\n        id={name}\n        name={name}\n        onChange={(event) => commit(event.target.value)}\n        placeholder={getStringProp(node.props, \"placeholder\")}\n        readOnly={readonly}\n        rows={getOptionalNumberProp(node.props, \"rows\")}\n        tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n        value={value}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAa,qBAAyD,EAAE,WAAW;CACjF,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CAEzB,IAAI,QACF,OAAO;CAGT,OACE,oBAAC,gBAAD;EACS;EACP,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAEV,oBAAC,UAAD;GACE,WAAW,eAAe,KAAK,OAAO,WAAW;GACvC;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,cAAc,KAAK,OAAO,aAAa;GACpD,UAAU;GACV,MAAM,sBAAsB,KAAK,OAAO,MAAM;GAC9C,UAAU,sBAAsB,KAAK,OAAO,UAAU;GAC/C;EACR,CAAA;CACa,CAAA;AAEpB"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../../resources/js/form/components/fields/textarea.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Textarea } from \"../base/textarea\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextareaComponent: RendererComponent<\"field.textarea\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <Textarea\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          rows={props.rows ?? undefined}\n          tabIndex={props.tabIndex ?? undefined}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,qBAA0D,EAAE,WAAW;CAClF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,UAAD;GACE,WAAW,MAAM,aAAa;GAC9B,aAAW;GACD;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,MAAM,eAAe;GACxB;GACV,MAAM,MAAM,QAAQ,KAAA;GACpB,UAAU,MAAM,YAAY,KAAA;GACrB;EACR,CAAA;CAEQ,CAAA;AAEjB"}

package/dist/form/components/fields/use-flip-reorder.d.ts

@@ -0,0 +1,6 @@
+/**
+ * FLIP reorder: animates registered elements from their previous to current
+ * position whenever `orderSignature` changes. Imperative style writes only, so
+ * it does not affect React render or the memoised rows.
+ */
+export declare function useFlipReorder(orderSignature: string): (key: string, el: HTMLElement | null) => void;

package/dist/form/components/fields/use-flip-reorder.js

@@ -0,0 +1,51 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+//#region resources/js/form/components/fields/use-flip-reorder.ts
+var DURATION_MS = 180;
+function prefersReducedMotion() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+* FLIP reorder: animates registered elements from their previous to current
+* position whenever `orderSignature` changes. Imperative style writes only, so
+* it does not affect React render or the memoised rows.
+*/
+function useFlipReorder(orderSignature) {
+	const elements = useRef(/* @__PURE__ */ new Map());
+	const previous = useRef(/* @__PURE__ */ new Map());
+	const register = useCallback((key, el) => {
+		if (el) elements.current.set(key, el);
+		else elements.current.delete(key);
+	}, []);
+	useLayoutEffect(() => {
+		const handles = [];
+		const next = /* @__PURE__ */ new Map();
+		elements.current.forEach((el, key) => {
+			el.style.transition = "";
+			el.style.transform = "";
+			next.set(key, el.getBoundingClientRect());
+		});
+		if (!prefersReducedMotion()) elements.current.forEach((el, key) => {
+			const before = previous.current.get(key);
+			const after = next.get(key);
+			if (before && after) {
+				const dy = before.top - after.top;
+				if (dy) {
+					el.style.transform = `translateY(${dy}px)`;
+					handles.push(requestAnimationFrame(() => {
+						el.style.transition = `transform ${DURATION_MS}ms ease-out`;
+						el.style.transform = "";
+					}));
+				}
+			}
+		});
+		previous.current = next;
+		return () => {
+			for (const handle of handles) cancelAnimationFrame(handle);
+		};
+	}, [orderSignature]);
+	return register;
+}
+//#endregion
+export { useFlipReorder };
+
+//# sourceMappingURL=use-flip-reorder.js.map

package/dist/form/components/fields/use-flip-reorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-flip-reorder.js","names":[],"sources":["../../../../resources/js/form/components/fields/use-flip-reorder.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef } from \"react\";\n\nconst DURATION_MS = 180;\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === \"function\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/**\n * FLIP reorder: animates registered elements from their previous to current\n * position whenever `orderSignature` changes. Imperative style writes only, so\n * it does not affect React render or the memoised rows.\n */\nexport function useFlipReorder(\n  orderSignature: string,\n): (key: string, el: HTMLElement | null) => void {\n  const elements = useRef(new Map<string, HTMLElement>());\n  const previous = useRef(new Map<string, DOMRect>());\n\n  // register is the FLIP measurement target; the element must be a zero-overhead positioning wrapper (no padding/margin) for the delta to match the visible row.\n  const register = useCallback((key: string, el: HTMLElement | null): void => {\n    if (el) {\n      elements.current.set(key, el);\n    } else {\n      elements.current.delete(key);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    const handles: number[] = [];\n    const next = new Map<string, DOMRect>();\n    elements.current.forEach((el, key) => {\n      el.style.transition = \"\";\n      el.style.transform = \"\";\n      next.set(key, el.getBoundingClientRect());\n    });\n\n    if (!prefersReducedMotion()) {\n      elements.current.forEach((el, key) => {\n        const before = previous.current.get(key);\n        const after = next.get(key);\n        if (before && after) {\n          const dy = before.top - after.top;\n          if (dy) {\n            el.style.transform = `translateY(${dy}px)`;\n            handles.push(\n              requestAnimationFrame(() => {\n                el.style.transition = `transform ${DURATION_MS}ms ease-out`;\n                el.style.transform = \"\";\n              }),\n            );\n          }\n        }\n      });\n    }\n\n    previous.current = next;\n\n    return () => {\n      for (const handle of handles) {\n        cancelAnimationFrame(handle);\n      }\n    };\n  }, [orderSignature]);\n\n  return register;\n}\n"],"mappings":";;AAEA,IAAM,cAAc;AAEpB,SAAS,uBAAgC;CACvC,OAAO,OAAO,eAAe,cAAc,WAAW,kCAAkC,EAAE;AAC5F;;;;;;AAOA,SAAgB,eACd,gBAC+C;CAC/C,MAAM,WAAW,uBAAO,IAAI,IAAyB,CAAC;CACtD,MAAM,WAAW,uBAAO,IAAI,IAAqB,CAAC;CAGlD,MAAM,WAAW,aAAa,KAAa,OAAiC;EAC1E,IAAI,IACF,SAAS,QAAQ,IAAI,KAAK,EAAE;OAE5B,SAAS,QAAQ,OAAO,GAAG;CAE/B,GAAG,CAAC,CAAC;CAEL,sBAAsB;EACpB,MAAM,UAAoB,CAAC;EAC3B,MAAM,uBAAO,IAAI,IAAqB;EACtC,SAAS,QAAQ,SAAS,IAAI,QAAQ;GACpC,GAAG,MAAM,aAAa;GACtB,GAAG,MAAM,YAAY;GACrB,KAAK,IAAI,KAAK,GAAG,sBAAsB,CAAC;EAC1C,CAAC;EAED,IAAI,CAAC,qBAAqB,GACxB,SAAS,QAAQ,SAAS,IAAI,QAAQ;GACpC,MAAM,SAAS,SAAS,QAAQ,IAAI,GAAG;GACvC,MAAM,QAAQ,KAAK,IAAI,GAAG;GAC1B,IAAI,UAAU,OAAO;IACnB,MAAM,KAAK,OAAO,MAAM,MAAM;IAC9B,IAAI,IAAI;KACN,GAAG,MAAM,YAAY,cAAc,GAAG;KACtC,QAAQ,KACN,4BAA4B;MAC1B,GAAG,MAAM,aAAa,aAAa,YAAY;MAC/C,GAAG,MAAM,YAAY;KACvB,CAAC,CACH;IACF;GACF;EACF,CAAC;EAGH,SAAS,UAAU;EAEnB,aAAa;GACX,KAAK,MAAM,UAAU,SACnB,qBAAqB,MAAM;EAE/B;CACF,GAAG,CAAC,cAAc,CAAC;CAEnB,OAAO;AACT"}

package/dist/form/components/fields/use-row-collection.d.ts

@@ -0,0 +1,11 @@
+import { RepeaterRow } from './repeater-rows';
+export type RowCollection = {
+    path: string;
+    rows: RepeaterRow[];
+    onField: (index: number, field: string, value: unknown) => void;
+    onRemove: (index: number) => void;
+    onMove: (index: number, delta: number) => void;
+    onDuplicate: (index: number) => void;
+    append: (row: RepeaterRow) => void;
+};
+export declare function useRowCollection(name: string, defaultItems: number): RowCollection;

package/dist/form/components/fields/use-row-collection.js

@@ -0,0 +1,44 @@
+import { duplicateRow, ensureRowIds, moveRow, removeRow, seedRows, withRowId } from "./repeater-rows.js";
+import { useFieldScope } from "../field-scope.js";
+import { useFormValue, useSetFormValue } from "../values.js";
+import { useCallback, useLayoutEffect } from "react";
+//#region resources/js/form/components/fields/use-row-collection.ts
+function useRowCollection(name, defaultItems) {
+	const scope = useFieldScope();
+	const path = scope ? scope.errorKey(name) : name;
+	const setValue = useSetFormValue();
+	const stored = useFormValue(path);
+	const raw = Array.isArray(stored) ? stored : seedRows(stored, defaultItems);
+	const rows = ensureRowIds(raw);
+	useLayoutEffect(() => {
+		if (rows !== raw) setValue(path, rows);
+	}, [
+		raw,
+		rows,
+		setValue,
+		path
+	]);
+	const mutate = useCallback((fn) => {
+		setValue(path, (prev) => fn(Array.isArray(prev) ? prev : seedRows(prev, defaultItems)));
+	}, [
+		setValue,
+		path,
+		defaultItems
+	]);
+	return {
+		path,
+		rows,
+		onField: useCallback((index, field, value) => mutate((current) => current.map((r, i) => i === index ? {
+			...r,
+			[field]: value
+		} : r)), [mutate]),
+		onRemove: useCallback((index) => mutate((current) => removeRow(current, index)), [mutate]),
+		onMove: useCallback((index, delta) => mutate((current) => moveRow(current, index, index + delta)), [mutate]),
+		onDuplicate: useCallback((index) => mutate((current) => duplicateRow(current, index)), [mutate]),
+		append: useCallback((row) => mutate((current) => [...current, withRowId(row)]), [mutate])
+	};
+}
+//#endregion
+export { useRowCollection };
+
+//# sourceMappingURL=use-row-collection.js.map

package/dist/form/components/fields/use-row-collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-row-collection.js","names":[],"sources":["../../../../resources/js/form/components/fields/use-row-collection.ts"],"sourcesContent":["import { useCallback, useLayoutEffect } from \"react\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValue, useSetFormValue } from \"../values\";\nimport {\n  duplicateRow,\n  ensureRowIds,\n  moveRow,\n  removeRow,\n  seedRows,\n  withRowId,\n  type RepeaterRow,\n} from \"./repeater-rows\";\n\nexport type RowCollection = {\n  path: string;\n  rows: RepeaterRow[];\n  onField: (index: number, field: string, value: unknown) => void;\n  onRemove: (index: number) => void;\n  onMove: (index: number, delta: number) => void;\n  onDuplicate: (index: number) => void;\n  append: (row: RepeaterRow) => void;\n};\n\nexport function useRowCollection(name: string, defaultItems: number): RowCollection {\n  const scope = useFieldScope();\n  const path = scope ? scope.errorKey(name) : name;\n  const setValue = useSetFormValue();\n  const stored = useFormValue(path);\n  const raw: RepeaterRow[] = Array.isArray(stored) ? stored : seedRows(stored, defaultItems);\n  const rows = ensureRowIds(raw);\n\n  useLayoutEffect(() => {\n    if (rows !== raw) {\n      setValue(path, rows);\n    }\n  }, [raw, rows, setValue, path]);\n\n  // Functional store updates preserve the identity of untouched rows, which lets\n  // the memoised RowItem skip re-rendering siblings on a single-row edit.\n  const mutate = useCallback(\n    (fn: (rows: RepeaterRow[]) => RepeaterRow[]): void => {\n      setValue(path, (prev: unknown) =>\n        fn(Array.isArray(prev) ? (prev as RepeaterRow[]) : seedRows(prev, defaultItems)),\n      );\n    },\n    [setValue, path, defaultItems],\n  );\n\n  const onField = useCallback(\n    (index: number, field: string, value: unknown): void =>\n      mutate((current) => current.map((r, i) => (i === index ? { ...r, [field]: value } : r))),\n    [mutate],\n  );\n  const onRemove = useCallback(\n    (index: number): void => mutate((current) => removeRow(current, index)),\n    [mutate],\n  );\n  const onMove = useCallback(\n    (index: number, delta: number): void =>\n      mutate((current) => moveRow(current, index, index + delta)),\n    [mutate],\n  );\n  const onDuplicate = useCallback(\n    (index: number): void => mutate((current) => duplicateRow(current, index)),\n    [mutate],\n  );\n  const append = useCallback(\n    (row: RepeaterRow): void => mutate((current) => [...current, withRowId(row)]),\n    [mutate],\n  );\n\n  return { path, rows, onField, onRemove, onMove, onDuplicate, append };\n}\n"],"mappings":";;;;;AAuBA,SAAgB,iBAAiB,MAAc,cAAqC;CAClF,MAAM,QAAQ,cAAc;CAC5B,MAAM,OAAO,QAAQ,MAAM,SAAS,IAAI,IAAI;CAC5C,MAAM,WAAW,gBAAgB;CACjC,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,MAAqB,MAAM,QAAQ,MAAM,IAAI,SAAS,SAAS,QAAQ,YAAY;CACzF,MAAM,OAAO,aAAa,GAAG;CAE7B,sBAAsB;EACpB,IAAI,SAAS,KACX,SAAS,MAAM,IAAI;CAEvB,GAAG;EAAC;EAAK;EAAM;EAAU;CAAI,CAAC;CAI9B,MAAM,SAAS,aACZ,OAAqD;EACpD,SAAS,OAAO,SACd,GAAG,MAAM,QAAQ,IAAI,IAAK,OAAyB,SAAS,MAAM,YAAY,CAAC,CACjF;CACF,GACA;EAAC;EAAU;EAAM;CAAY,CAC/B;CAyBA,OAAO;EAAE;EAAM;EAAM,SAvBL,aACb,OAAe,OAAe,UAC7B,QAAQ,YAAY,QAAQ,KAAK,GAAG,MAAO,MAAM,QAAQ;GAAE,GAAG;IAAI,QAAQ;EAAM,IAAI,CAAE,CAAC,GACzF,CAAC,MAAM,CAoBY;EAAS,UAlBb,aACd,UAAwB,QAAQ,YAAY,UAAU,SAAS,KAAK,CAAC,GACtE,CAAC,MAAM,CAgBqB;EAAU,QAdzB,aACZ,OAAe,UACd,QAAQ,YAAY,QAAQ,SAAS,OAAO,QAAQ,KAAK,CAAC,GAC5D,CAAC,MAAM,CAW+B;EAAQ,aAT5B,aACjB,UAAwB,QAAQ,YAAY,aAAa,SAAS,KAAK,CAAC,GACzE,CAAC,MAAM,CAOuC;EAAa,QAL9C,aACZ,QAA2B,QAAQ,YAAY,CAAC,GAAG,SAAS,UAAU,GAAG,CAAC,CAAC,GAC5E,CAAC,MAAM,CAGoD;CAAO;AACtE"}

package/dist/form/components/form-path.d.ts

@@ -0,0 +1,5 @@
+export declare function pathParts(path: string): string[];
+export declare function appendPath(base: string | null | undefined, ...parts: Array<string | number>): string;
+export declare function toHtmlName(path: string): string;
+export declare function getPath(values: Record<string, unknown>, path: string): unknown;
+export declare function setPath(values: Record<string, unknown>, path: string, value: unknown): Record<string, unknown>;

package/dist/form/components/form-path.js

@@ -0,0 +1,40 @@
+//#region resources/js/form/components/form-path.ts
+function pathParts(path) {
+	return path.split(".").filter((part) => part !== "");
+}
+function appendPath(base, ...parts) {
+	const suffix = parts.map(String).filter((part) => part !== "");
+	return [base ?? "", ...suffix].filter((part) => part !== "").join(".");
+}
+function toHtmlName(path) {
+	const [head, ...tail] = pathParts(path);
+	return tail.reduce((name, part) => `${name}[${part}]`, head ?? "");
+}
+function getPath(values, path) {
+	let current = values;
+	for (const part of pathParts(path)) {
+		if (current == null) return;
+		current = current[part];
+	}
+	return current;
+}
+function emptyContainer(nextPart) {
+	return nextPart !== void 0 && /^\d+$/.test(nextPart) ? [] : {};
+}
+function setPath(values, path, value) {
+	const parts = pathParts(path);
+	if (parts.length === 0) return values;
+	const write = (current, index) => {
+		const part = parts[index];
+		const last = index === parts.length - 1;
+		const source = current && typeof current === "object" ? current : emptyContainer(parts[index + 1]);
+		const next = Array.isArray(source) ? [...source] : { ...source };
+		next[part] = last ? value : write(source[part], index + 1);
+		return next;
+	};
+	return write(values, 0);
+}
+//#endregion
+export { appendPath, getPath, pathParts, setPath, toHtmlName };
+
+//# sourceMappingURL=form-path.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-path.js","names":[],"sources":["../../../resources/js/form/components/form-path.ts"],"sourcesContent":["export function pathParts(path: string): string[] {\n  return path.split(\".\").filter((part) => part !== \"\");\n}\n\nexport function appendPath(\n  base: string | null | undefined,\n  ...parts: Array<string | number>\n): string {\n  const suffix = parts.map(String).filter((part) => part !== \"\");\n\n  return [base ?? \"\", ...suffix].filter((part) => part !== \"\").join(\".\");\n}\n\nexport function toHtmlName(path: string): string {\n  const [head, ...tail] = pathParts(path);\n\n  return tail.reduce((name, part) => `${name}[${part}]`, head ?? \"\");\n}\n\nexport function getPath(values: Record<string, unknown>, path: string): unknown {\n  let current: unknown = values;\n\n  for (const part of pathParts(path)) {\n    if (current == null) {\n      return undefined;\n    }\n\n    current = (current as Record<string, unknown>)[part];\n  }\n\n  return current;\n}\n\nfunction emptyContainer(nextPart: string | undefined): Record<string, unknown> | unknown[] {\n  return nextPart !== undefined && /^\\d+$/.test(nextPart) ? [] : {};\n}\n\nexport function setPath(\n  values: Record<string, unknown>,\n  path: string,\n  value: unknown,\n): Record<string, unknown> {\n  const parts = pathParts(path);\n\n  if (parts.length === 0) {\n    return values;\n  }\n\n  const write = (current: unknown, index: number): unknown => {\n    const part = parts[index];\n    const last = index === parts.length - 1;\n    const source =\n      current && typeof current === \"object\" ? current : emptyContainer(parts[index + 1]);\n    const next = Array.isArray(source) ? [...source] : { ...(source as Record<string, unknown>) };\n\n    (next as Record<string, unknown>)[part] = last\n      ? value\n      : write((source as Record<string, unknown>)[part], index + 1);\n\n    return next;\n  };\n\n  return write(values, 0) as Record<string, unknown>;\n}\n"],"mappings":";AAAA,SAAgB,UAAU,MAAwB;CAChD,OAAO,KAAK,MAAM,GAAG,EAAE,QAAQ,SAAS,SAAS,EAAE;AACrD;AAEA,SAAgB,WACd,MACA,GAAG,OACK;CACR,MAAM,SAAS,MAAM,IAAI,MAAM,EAAE,QAAQ,SAAS,SAAS,EAAE;CAE7D,OAAO,CAAC,QAAQ,IAAI,GAAG,MAAM,EAAE,QAAQ,SAAS,SAAS,EAAE,EAAE,KAAK,GAAG;AACvE;AAEA,SAAgB,WAAW,MAAsB;CAC/C,MAAM,CAAC,MAAM,GAAG,QAAQ,UAAU,IAAI;CAEtC,OAAO,KAAK,QAAQ,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,IAAI,QAAQ,EAAE;AACnE;AAEA,SAAgB,QAAQ,QAAiC,MAAuB;CAC9E,IAAI,UAAmB;CAEvB,KAAK,MAAM,QAAQ,UAAU,IAAI,GAAG;EAClC,IAAI,WAAW,MACb;EAGF,UAAW,QAAoC;CACjD;CAEA,OAAO;AACT;AAEA,SAAS,eAAe,UAAmE;CACzF,OAAO,aAAa,KAAA,KAAa,QAAQ,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC;AAClE;AAEA,SAAgB,QACd,QACA,MACA,OACyB;CACzB,MAAM,QAAQ,UAAU,IAAI;CAE5B,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,MAAM,SAAS,SAAkB,UAA2B;EAC1D,MAAM,OAAO,MAAM;EACnB,MAAM,OAAO,UAAU,MAAM,SAAS;EACtC,MAAM,SACJ,WAAW,OAAO,YAAY,WAAW,UAAU,eAAe,MAAM,QAAQ,EAAE;EACpF,MAAM,OAAO,MAAM,QAAQ,MAAM,IAAI,CAAC,GAAG,MAAM,IAAI,EAAE,GAAI,OAAmC;EAE5F,KAAkC,QAAQ,OACtC,QACA,MAAO,OAAmC,OAAO,QAAQ,CAAC;EAE9D,OAAO;CACT;CAEA,OAAO,MAAM,QAAQ,CAAC;AACxB"}

package/dist/form/components/form-transport.d.ts

@@ -1,8 +1,7 @@
 /**
- * Shared client transport for the lattice form endpoint. Every form sub-action
- * (validation resolve, option search) POSTs to the same signed form URL, so the
- * CSRF header, component-ref header, and request shape live here in one place.
+ * Shared client transport for the lattice form endpoint: every form sub-action
+ * (validation resolve, option search) POSTs to the same signed URL, so the
+ * request shape — notably stripping client-only row ids — lives here once.
  */
 export declare const FORM_DEBOUNCE_MS = 250;
-export declare function xsrfToken(): string;
 export declare function postFormAction<T>(action: string, componentRef: string, body: Record<string, unknown>, signal: AbortSignal): Promise<T | null>;