@lattice-php/lattice 0.18.0 → 0.20.0

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

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/utils.js";
 import { Icon } from "../../../icons/sprite.js";
+import { Renderer } from "../../../core/renderer.js";
 import { useT } from "../../../i18n/instance.js";
 import { useFormContext } from "../../hooks/context.js";
 import { useFieldScope } from "../../hooks/field-scope.js";
@@ -7,11 +8,13 @@ import { useResolvedNode } from "../../hooks/resolved-nodes.js";
 import { useFormValue, useFormValues } from "../../hooks/values.js";
 import { useFieldCommit } from "../../hooks/use-field-commit.js";
 import { postFormAction } from "../../lib/form-transport.js";
+import { coerceColor, colorValue } from "../../../lib/color.js";
 import { FormFieldFrame } from "../base/field.js";
 import { useDependentField } from "../../hooks/use-dependent-field.js";
 import { fieldDomName } from "../../lib/field-dom-name.js";
 import { controlSurface } from "../../../ui/control.js";
 import { Combobox } from "../../../ui/combobox.js";
+import { materializeSchema } from "../../../core/materialize.js";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/select.tsx
@@ -36,23 +39,28 @@ var SelectComponent = ({ node }) => {
 	const placeholder = props.placeholder || "Select…";
 	const multiple = props.multiple;
 	const searchable = props.searchable;
+	const creatable = props.creatable;
 	const staticOptions = useMemo(() => resolvedNode.props.options ?? [], [resolvedNode.props]);
+	const optionSchema = resolvedNode.props.optionSchema;
 	const globalValue = useFormValue(name);
 	const values = useFormValues();
 	const valuesRef = useRef(values);
 	valuesRef.current = values;
 	const storedValue = scope ? scope.getValue(name) : globalValue;
 	const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);
+	const selectedRef = useRef(selected);
+	selectedRef.current = selected;
 	const [open, setOpen] = useState(false);
 	const [results, setResults] = useState(null);
 	const [loading, setLoading] = useState(false);
 	const searchAbort = useRef(null);
-	const labels = useMemo(() => {
+	const optionsByValue = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
-		for (const option of [...staticOptions, ...results ?? []]) map.set(option.value, option.label);
+		for (const option of [...staticOptions, ...results ?? []]) map.set(option.value, option);
 		return map;
 	}, [staticOptions, results]);
-	const labelFor = (value) => labels.get(value) ?? value;
+	const labelFor = (value) => optionsByValue.get(value)?.label ?? value;
+	const colorFor = (value) => coerceColor((optionsByValue.get(value)?.data)?.color);
 	const locked = readOnly || disabled;
 	const search = useCallback((query) => {
 		searchAbort.current?.abort();
@@ -90,16 +98,36 @@ var SelectComponent = ({ node }) => {
 	}
 	function select(value) {
 		if (multiple) {
-			commit(selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value]);
+			const next = selectedRef.current.includes(value) ? selectedRef.current.filter((item) => item !== value) : [...selectedRef.current, value];
+			selectedRef.current = next;
+			commit(next);
 			return;
 		}
+		selectedRef.current = [value];
 		commit([value]);
 	}
 	function remove(value) {
 		commit(selected.filter((item) => item !== value));
 	}
+	function applyCreated(value) {
+		if (!multiple) {
+			selectedRef.current = [value];
+			commit([value]);
+			return;
+		}
+		if (!selectedRef.current.includes(value)) {
+			const next = [...selectedRef.current, value];
+			selectedRef.current = next;
+			commit(next);
+		}
+	}
 	if (hidden) return null;
 	const options = searchable ? results ?? staticOptions : staticOptions;
+	const renderOption = optionSchema?.length ? (option) => /* @__PURE__ */ jsx(Renderer, { nodes: materializeSchema(optionSchema, {
+		...option.data,
+		label: option.label,
+		value: option.value
+	}) }) : void 0;
 	return /* @__PURE__ */ jsxs(FormFieldFrame, {
 		error: errors[errorKey],
 		helperText: props.helperText ?? void 0,
@@ -117,21 +145,35 @@ var SelectComponent = ({ node }) => {
 			value: selected[0] ?? ""
 		}), /* @__PURE__ */ jsxs("div", { children: [multiple && selected.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "mb-1.5 flex flex-wrap gap-1",
-			children: selected.map((value) => /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs",
-				children: [labelFor(value), !locked && /* @__PURE__ */ jsx("button", {
-					"aria-label": t("form.removeOption", "Remove {{label}}", { label: labelFor(value) }),
-					"data-test": `select-${name}-remove-${value}`,
-					className: "text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs",
-					onClick: () => remove(value),
-					type: "button",
-					children: /* @__PURE__ */ jsx(Icon, { name: "x" })
-				})]
-			}, value))
+			children: selected.map((value) => {
+				const color = colorFor(value);
+				return /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs",
+					children: [
+						color && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "size-2 shrink-0 rounded-full",
+							style: { background: colorValue(color) }
+						}),
+						labelFor(value),
+						!locked && /* @__PURE__ */ jsx("button", {
+							"aria-label": t("form.remove-option", "Remove {{label}}", { label: labelFor(value) }),
+							"data-test": `select-${name}-remove-${value}`,
+							className: "text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs",
+							onClick: () => remove(value),
+							type: "button",
+							children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+						})
+					]
+				}, value);
+			})
 		}), /* @__PURE__ */ jsx(Combobox, {
+			creatable,
 			emptyLabel: props.emptyLabel ?? void 0,
 			loading,
 			multiple,
+			onCommit: applyCreated,
+			onCreate: applyCreated,
 			onSearch: searchable ? search : void 0,
 			onSelect: select,
 			open: open && !locked,
@@ -140,8 +182,9 @@ var SelectComponent = ({ node }) => {
 				if (!next) blur(name);
 			},
 			options,
+			renderOption,
 			searchPlaceholder: props.searchPlaceholder ?? void 0,
-			showSearch: Boolean(searchable),
+			showSearch: Boolean(searchable || creatable),
 			selected,
 			testId: `select-${name}`,
 			trigger: /* @__PURE__ */ jsxs(Fragment$1, { children: [!multiple && selected.length > 0 ? /* @__PURE__ */ jsx("span", { children: labelFor(selected[0]) }) : /* @__PURE__ */ jsx("span", {

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/ui/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { postFormAction } from \"@lattice-php/lattice/form/lib/form-transport\";\nimport { useResolvedNode } from \"@lattice-php/lattice/form/hooks/resolved-nodes\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValue, useFormValues } from \"@lattice-php/lattice/form/hooks/values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors, fieldIdPrefix, searchOptions } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = fieldDomName(scope ? scope.scopedName(name) : name, fieldIdPrefix);\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const searchKey = scope ? scope.errorKey(name) : name;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple;\n  const searchable = props.searchable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n\n  const globalValue = useFormValue(name);\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const searchAbort = useRef<AbortController | null>(null);\n\n  const labels = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option.label);\n    }\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => labels.get(value) ?? value;\n\n  const locked = readOnly || disabled;\n\n  const search = useCallback(\n    (query: string) => {\n      searchAbort.current?.abort();\n\n      if (query.trim() === \"\") {\n        setResults(null);\n        setLoading(false);\n\n        return;\n      }\n\n      const controller = new AbortController();\n      searchAbort.current = controller;\n      setLoading(true);\n\n      if (searchOptions) {\n        void searchOptions(searchKey, query, valuesRef.current, controller.signal)\n          .then((options) => {\n            setResults(options);\n            setLoading(false);\n          })\n          .catch(() => {});\n\n        return;\n      }\n\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { ...valuesRef.current, _search: searchKey, q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    },\n    [action, componentRef, searchKey, searchOptions],\n  );\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function select(value: string): void {\n    if (multiple) {\n      commit(\n        selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value],\n      );\n\n      return;\n    }\n\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\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={domName}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => (\n              <span\n                className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                key={value}\n              >\n                {labelFor(value)}\n                {!locked && (\n                  <button\n                    aria-label={t(\"form.removeOption\", \"Remove {{label}}\", {\n                      label: labelFor(value),\n                    })}\n                    data-test={`select-${name}-remove-${value}`}\n                    className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                    onClick={() => remove(value)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"x\" />\n                  </button>\n                )}\n              </span>\n            ))}\n          </div>\n        )}\n\n        <Combobox\n          emptyLabel={props.emptyLabel ?? undefined}\n          loading={loading}\n          multiple={multiple}\n          onSearch={searchable ? search : undefined}\n          onSelect={select}\n          open={open && !locked}\n          onOpenChange={(next) => {\n            setOpen(next);\n\n            if (!next) {\n              blur(name);\n            }\n          }}\n          options={options}\n          searchPlaceholder={props.searchPlaceholder ?? undefined}\n          showSearch={Boolean(searchable)}\n          selected={selected}\n          testId={`select-${name}`}\n          trigger={\n            <>\n              {!multiple && selected.length > 0 ? (\n                <span>{labelFor(selected[0])}</span>\n              ) : (\n                <span className=\"text-lt-muted-fg\">{placeholder}</span>\n              )}\n              <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n            </>\n          }\n          triggerClassName={cn(\n            controlSurface(),\n            \"flex items-center justify-between gap-2 text-left\",\n            locked && \"cursor-not-allowed opacity-60\",\n          )}\n          triggerProps={{\n            \"aria-haspopup\": \"listbox\",\n            autoFocus: props.autoFocus ?? undefined,\n            \"data-test\": `select-${name}`,\n            disabled: locked,\n            id: domName,\n            tabIndex: props.tabIndex ?? undefined,\n          }}\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/ui/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { materializeSchema } from \"@lattice-php/lattice/core/materialize\";\nimport type { Node, Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { postFormAction } from \"@lattice-php/lattice/form/lib/form-transport\";\nimport { useResolvedNode } from \"@lattice-php/lattice/form/hooks/resolved-nodes\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValue, useFormValues } from \"@lattice-php/lattice/form/hooks/values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors, fieldIdPrefix, searchOptions } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = fieldDomName(scope ? scope.scopedName(name) : name, fieldIdPrefix);\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const searchKey = scope ? scope.errorKey(name) : name;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple;\n  const searchable = props.searchable;\n  const creatable = props.creatable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const optionSchema = (resolvedNode.props as { optionSchema?: Node[] }).optionSchema;\n\n  const globalValue = useFormValue(name);\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\n\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const searchAbort = useRef<AbortController | null>(null);\n\n  const optionsByValue = useMemo(() => {\n    const map = new Map<string, Option>();\n\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option);\n    }\n\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => optionsByValue.get(value)?.label ?? value;\n  const colorFor = (value: string) =>\n    coerceColor((optionsByValue.get(value)?.data as { color?: unknown } | undefined)?.color);\n\n  const locked = readOnly || disabled;\n\n  const search = useCallback(\n    (query: string) => {\n      searchAbort.current?.abort();\n\n      if (query.trim() === \"\") {\n        setResults(null);\n        setLoading(false);\n\n        return;\n      }\n\n      const controller = new AbortController();\n      searchAbort.current = controller;\n      setLoading(true);\n\n      if (searchOptions) {\n        void searchOptions(searchKey, query, valuesRef.current, controller.signal)\n          .then((options) => {\n            setResults(options);\n            setLoading(false);\n          })\n          .catch(() => {});\n\n        return;\n      }\n\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { ...valuesRef.current, _search: searchKey, q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    },\n    [action, componentRef, searchKey, searchOptions],\n  );\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function select(value: string): void {\n    if (multiple) {\n      const next = selectedRef.current.includes(value)\n        ? selectedRef.current.filter((item) => item !== value)\n        : [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n\n      return;\n    }\n\n    selectedRef.current = [value];\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  function applyCreated(value: string): void {\n    if (!multiple) {\n      selectedRef.current = [value];\n      commit([value]);\n\n      return;\n    }\n\n    if (!selectedRef.current.includes(value)) {\n      const next = [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n    }\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n  const renderOption = optionSchema?.length\n    ? (option: Option) => (\n        <Renderer\n          nodes={materializeSchema(optionSchema, {\n            ...option.data,\n            label: option.label,\n            value: option.value,\n          })}\n        />\n      )\n    : undefined;\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={domName}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => {\n              const color = colorFor(value);\n\n              return (\n                <span\n                  className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                  key={value}\n                >\n                  {color && (\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"size-2 shrink-0 rounded-full\"\n                      style={{ background: colorValue(color) }}\n                    />\n                  )}\n                  {labelFor(value)}\n                  {!locked && (\n                    <button\n                      aria-label={t(\"form.remove-option\", \"Remove {{label}}\", {\n                        label: labelFor(value),\n                      })}\n                      data-test={`select-${name}-remove-${value}`}\n                      className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                      onClick={() => remove(value)}\n                      type=\"button\"\n                    >\n                      <Icon name=\"x\" />\n                    </button>\n                  )}\n                </span>\n              );\n            })}\n          </div>\n        )}\n\n        <Combobox\n          creatable={creatable}\n          emptyLabel={props.emptyLabel ?? undefined}\n          loading={loading}\n          multiple={multiple}\n          onCommit={applyCreated}\n          onCreate={applyCreated}\n          onSearch={searchable ? search : undefined}\n          onSelect={select}\n          open={open && !locked}\n          onOpenChange={(next) => {\n            setOpen(next);\n\n            if (!next) {\n              blur(name);\n            }\n          }}\n          options={options}\n          renderOption={renderOption}\n          searchPlaceholder={props.searchPlaceholder ?? undefined}\n          showSearch={Boolean(searchable || creatable)}\n          selected={selected}\n          testId={`select-${name}`}\n          trigger={\n            <>\n              {!multiple && selected.length > 0 ? (\n                <span>{labelFor(selected[0])}</span>\n              ) : (\n                <span className=\"text-lt-muted-fg\">{placeholder}</span>\n              )}\n              <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n            </>\n          }\n          triggerClassName={cn(\n            controlSurface(),\n            \"flex items-center justify-between gap-2 text-left\",\n            locked && \"cursor-not-allowed opacity-60\",\n          )}\n          triggerProps={{\n            \"aria-haspopup\": \"listbox\",\n            autoFocus: props.autoFocus ?? undefined,\n            \"data-test\": `select-${name}`,\n            disabled: locked,\n            id: domName,\n            tabIndex: props.tabIndex ?? undefined,\n          }}\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import { Icon } from "../../../icons/sprite.js";
+import { nodeKey } from "../../../core/nodes.js";
 import { RenderNode } from "../../../core/renderer.js";
 import { useT } from "../../../i18n/instance.js";
 import { FieldScopeProvider } from "../../hooks/field-scope.js";
@@ -73,8 +74,8 @@ var TableRowItem = memo(function TableRowItem({ base, index, row, template, span
 					"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)) })
+					children: template.map((child, childIndex) => /* @__PURE__ */ jsx(RenderNode, { node: child }, nodeKey(child, childIndex)))
+				}) : template.map((child, childIndex) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RenderNode, { node: child }) }, nodeKey(child, childIndex))) })
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex items-center",
@@ -132,11 +133,11 @@ function TableRows({ base, columns, rows, reorderable, removable, rowActions, on
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
 		children: [hasOverrides && /* @__PURE__ */ jsx("button", {
-			"aria-label": t("table.resetColumnWidths", "Reset column widths"),
+			"aria-label": t("table.reset-column-widths", "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("table.resetColumnWidths", "Reset column widths"),
+			title: t("table.reset-column-widths", "Reset column widths"),
 			type: "button",
 			children: /* @__PURE__ */ jsx(Icon, {
 				name: "rotate-ccw",

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

@@ -1 +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 {\n  DEFAULT_COLUMN_WIDTH,\n  type SizableColumn,\n} from \"@lattice-php/lattice/core/hooks/column-sizing\";\nimport { useColumnResizing } from \"@lattice-php/lattice/core/hooks/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 \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { TableCellProvider } from \"@lattice-php/lattice/form/hooks/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\ntype 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  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  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 grid-cols-[var(--lattice-table-columns)] items-start gap-x-3\"\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, resizeRootRef, 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(\"table.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(\"table.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\n          ref={resizeRootRef}\n          className=\"flex min-w-max flex-col gap-2\"\n          style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n        >\n          <div className=\"grid grid-cols-[var(--lattice-table-columns)] items-center gap-x-3\">\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              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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"}
+{"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 { nodeKey } from \"@lattice-php/lattice/core/nodes\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport {\n  DEFAULT_COLUMN_WIDTH,\n  type SizableColumn,\n} from \"@lattice-php/lattice/core/hooks/column-sizing\";\nimport { useColumnResizing } from \"@lattice-php/lattice/core/hooks/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 \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { TableCellProvider } from \"@lattice-php/lattice/form/hooks/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\ntype 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  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  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 grid-cols-[var(--lattice-table-columns)] items-start gap-x-3\"\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, childIndex) => (\n                <RenderNode key={nodeKey(child, childIndex)} node={child} />\n              ))}\n            </div>\n          ) : (\n            template.map((child, childIndex) => (\n              <div key={nodeKey(child, childIndex)}>\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, resizeRootRef, 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(\"table.reset-column-widths\", \"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(\"table.reset-column-widths\", \"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\n          ref={resizeRootRef}\n          className=\"flex min-w-max flex-col gap-2\"\n          style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n        >\n          <div className=\"grid grid-cols-[var(--lattice-table-columns)] items-center gap-x-3\">\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              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.js

@@ -1,6 +1,7 @@
+import { CopyButton } from "../../../ui/copyable-text.js";
+import { Input } from "../../../ui/input.js";
 import { SimpleField } from "./simple-field.js";
 import { AffixGroup } from "../../../ui/affix-group.js";
-import { Input } from "../../../ui/input.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/text-input.tsx
 var TextInputComponent = ({ node }) => {
@@ -11,6 +12,12 @@ var TextInputComponent = ({ node }) => {
 		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(AffixGroup, {
 			prefix: props.prefix,
 			suffix: props.suffix,
+			end: props.copyable ? /* @__PURE__ */ jsx(CopyButton, {
+				className: "h-lt-control-md gap-1.5 rounded-l-none rounded-r-lt-sm border-l-0 border-lt-input px-3 group-has-[:focus-visible]:border-lt-ring",
+				label: props.label ?? name,
+				testId: `${testId}-copy`,
+				value
+			}) : null,
 			children: (controlClassName) => /* @__PURE__ */ jsx(Input, {
 				autoComplete: props.autoComplete ?? "",
 				autoFocus: props.autoFocus ?? false,

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

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { AffixGroup } from \"@lattice-php/lattice/ui/affix-group\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"field.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <AffixGroup prefix={props.prefix} suffix={props.suffix}>\n          {(controlClassName) => (\n            <Input\n              autoComplete={props.autoComplete ?? \"\"}\n              autoFocus={props.autoFocus ?? false}\n              className={controlClassName}\n              data-test={testId}\n              disabled={disabled}\n              id={name}\n              name={name}\n              onChange={(event) => commit(event.target.value)}\n              placeholder={props.placeholder ?? \"\"}\n              readOnly={readOnly}\n              tabIndex={props.tabIndex ?? undefined}\n              type={props.type ?? \"text\"}\n              value={value}\n            />\n          )}\n        </AffixGroup>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,YAAD;GAAY,QAAQ,MAAM;GAAQ,QAAQ,MAAM;cAC5C,qBACA,oBAAC,OAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IAC9B,WAAW;IACX,aAAW;IACD;IACV,IAAI;IACE;IACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,aAAa,MAAM,eAAe;IACxB;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAM,MAAM,QAAQ;IACb;GACR,CAAA;EAEO,CAAA;CAEH,CAAA;AAEjB"}
+{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { AffixGroup } from \"@lattice-php/lattice/ui/affix-group\";\nimport { CopyButton } from \"@lattice-php/lattice/ui/copyable-text\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"field.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <AffixGroup\n          prefix={props.prefix}\n          suffix={props.suffix}\n          end={\n            props.copyable ? (\n              <CopyButton\n                className=\"h-lt-control-md gap-1.5 rounded-l-none rounded-r-lt-sm border-l-0 border-lt-input px-3 group-has-[:focus-visible]:border-lt-ring\"\n                label={props.label ?? name}\n                testId={`${testId}-copy`}\n                value={value}\n              />\n            ) : null\n          }\n        >\n          {(controlClassName) => (\n            <Input\n              autoComplete={props.autoComplete ?? \"\"}\n              autoFocus={props.autoFocus ?? false}\n              className={controlClassName}\n              data-test={testId}\n              disabled={disabled}\n              id={name}\n              name={name}\n              onChange={(event) => commit(event.target.value)}\n              placeholder={props.placeholder ?? \"\"}\n              readOnly={readOnly}\n              tabIndex={props.tabIndex ?? undefined}\n              type={props.type ?? \"text\"}\n              value={value}\n            />\n          )}\n        </AffixGroup>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,YAAD;GACE,QAAQ,MAAM;GACd,QAAQ,MAAM;GACd,KACE,MAAM,WACJ,oBAAC,YAAD;IACE,WAAU;IACV,OAAO,MAAM,SAAS;IACtB,QAAQ,GAAG,OAAO;IACX;GACR,CAAA,IACC;cAGJ,qBACA,oBAAC,OAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IAC9B,WAAW;IACX,aAAW;IACD;IACV,IAAI;IACE;IACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,aAAa,MAAM,eAAe;IACxB;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAM,MAAM,QAAQ;IACb;GACR,CAAA;EAEO,CAAA;CAEH,CAAA;AAEjB"}

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

@@ -1,8 +1,8 @@
 import { Icon } from "../../../icons/sprite.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover.js";
 import { Button } from "../../../ui/button.js";
-import { SimpleField } from "./simple-field.js";
 import { Input } from "../../../ui/input.js";
+import { SimpleField } from "./simple-field.js";
 import { formatTimeValue, parseTimeString, secondsEnabled } from "./time-picker-columns.js";
 import { TimePicker } from "./time-picker.js";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,6 +1,7 @@
 export { BuilderComponent } from './fields/builder.js';
 export { CheckboxComponent } from './fields/checkbox.js';
 export { ChoiceComponent } from './fields/choice.js';
+export { ColorPickerFieldComponent } from './fields/color-picker-field.js';
 export { DateInputComponent } from './fields/date-input.js';
 export { DateTimeInputComponent } from './fields/date-time-input.js';
 export { FileUploadComponent } from './fields/file-upload.js';

package/dist/form/components/index.js

@@ -1,6 +1,7 @@
 import { BuilderComponent } from "./fields/builder.js";
 import { CheckboxComponent } from "./fields/checkbox.js";
 import { ChoiceComponent } from "./fields/choice.js";
+import { ColorPickerFieldComponent } from "./fields/color-picker-field.js";
 import { DateInputComponent } from "./fields/date-input.js";
 import { DateTimeInputComponent } from "./fields/date-time-input.js";
 import { FileUploadComponent } from "./fields/file-upload.js";
@@ -15,4 +16,4 @@ import { TextareaComponent } from "./fields/textarea.js";
 import { TextInputComponent } from "./fields/text-input.js";
 import { TimeInputComponent } from "./fields/time-input.js";
 import { ToggleComponent } from "./fields/toggle.js";
-export { BuilderComponent, CheckboxComponent, ChoiceComponent, DateInputComponent, DateTimeInputComponent, FileUploadComponent, FormComponent, HiddenInputComponent, NumberInputComponent, OtpInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent, TimeInputComponent, ToggleComponent };
+export { BuilderComponent, CheckboxComponent, ChoiceComponent, ColorPickerFieldComponent, DateInputComponent, DateTimeInputComponent, FileUploadComponent, FormComponent, HiddenInputComponent, NumberInputComponent, OtpInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent, TimeInputComponent, ToggleComponent };

package/dist/form/embed.d.ts

@@ -10,6 +10,7 @@ export { FormProvider } from './hooks/context.js';
 export { PrefillProvider } from './hooks/prefill-context.js';
 export { ResolvedNodesProvider } from './hooks/resolved-nodes.js';
 export { FieldCommitOverrideProvider } from './hooks/use-field-commit.js';
+export { TableCellProvider } from './hooks/row-layout-context.js';
 export { useFormResolver } from './hooks/use-form-resolver.js';
 export { FormValuesProvider, useFormValues, useSetFormValue } from './hooks/values.js';
 export { walkFields } from './lib/field-props.js';

package/dist/form/embed.js

@@ -5,6 +5,7 @@ import { appendPath, getPath, setPath } from "./lib/form-path.js";
 import { ResolvedNodesProvider } from "./hooks/resolved-nodes.js";
 import { FormValuesProvider, useFormValues, useSetFormValue } from "./hooks/values.js";
 import { FieldCommitOverrideProvider } from "./hooks/use-field-commit.js";
+import { TableCellProvider } from "./hooks/row-layout-context.js";
 import { FORM_DEBOUNCE_MS } from "./lib/form-transport.js";
 import { useFormResolver } from "./hooks/use-form-resolver.js";
-export { FORM_DEBOUNCE_MS, FieldCommitOverrideProvider, FormProvider, FormValuesProvider, PrefillProvider, ResolvedNodesProvider, appendPath, getPath, setPath, useFormResolver, useFormValues, useSetFormValue, walkFields };
+export { FORM_DEBOUNCE_MS, FieldCommitOverrideProvider, FormProvider, FormValuesProvider, PrefillProvider, ResolvedNodesProvider, TableCellProvider, appendPath, getPath, setPath, useFormResolver, useFormValues, useSetFormValue, walkFields };

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

@@ -1 +1 @@
-{"version":3,"file":"use-form-resolver.js","names":[],"sources":["../../../resources/js/form/hooks/use-form-resolver.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { walkFields } from \"@lattice-php/lattice/form/lib/field-props\";\nimport { FORM_DEBOUNCE_MS, postFormAction } from \"@lattice-php/lattice/form/lib/form-transport\";\nimport {\n  collectPrefillTargets,\n  getPath,\n  pathsToClear,\n  pruneOverrides,\n  seededOverrides,\n} from \"@lattice-php/lattice/form/lib/prefill-targets\";\nimport type { PrefillController } from \"./prefill-context\";\nimport { useFormValues, useSetFormValue } from \"./values\";\n\ntype ResolveResponse = {\n  fields?: Record<string, Node>;\n  values?: Record<string, unknown>;\n  prefill?: Record<string, unknown>;\n};\n\ntype FormResolver = {\n  nodes: Record<string, Node>;\n  markUserEdit: PrefillController[\"markUserEdit\"];\n};\n\nexport function useFormResolver(\n  action: string,\n  componentRef: string,\n  nodes: Node[] | undefined,\n): FormResolver {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const [resolved, setResolved] = useState<Record<string, Node>>({});\n\n  const targets = useMemo(() => collectPrefillTargets(nodes, values), [nodes, values]);\n\n  const overrides = useRef<Set<string>>(new Set());\n  const seededOverrideKeys = useRef<Set<string>>(new Set());\n  const previousValues = useRef<Record<string, unknown>>(values);\n  const previousTargets = useRef(targets);\n\n  // Read targets via a ref inside the effect: `targets` changes identity on every\n  // value change, but the effect must fire only when `watchSignature` changes\n  // (which already reflects added/removed target paths). Keeping `targets` out of\n  // the dep array preserves the targeted watch in non-\"any\" mode.\n  const targetsRef = useRef(targets);\n  targetsRef.current = targets;\n\n  useLayoutEffect(() => {\n    const liveOverrideKeys = new Set(targets.map((target) => target.overrideKey));\n    seededOverrideKeys.current = new Set(\n      [...seededOverrideKeys.current].filter((overrideKey) => liveOverrideKeys.has(overrideKey)),\n    );\n    const freshTargets = targets.filter(\n      (target) => !seededOverrideKeys.current.has(target.overrideKey),\n    );\n\n    // Layout ordering seeds loaded values before the first resolve effect can apply prefill.\n    for (const overrideKey of seededOverrides(freshTargets, values)) {\n      overrides.current.add(overrideKey);\n    }\n\n    for (const target of freshTargets) {\n      seededOverrideKeys.current.add(target.overrideKey);\n    }\n  }, [targets, values]);\n\n  const markUserEdit = useCallback((overrideKey: string) => {\n    overrides.current.add(overrideKey);\n  }, []);\n\n  const watch = useMemo(() => {\n    const keys = new Set<string>();\n    let any = false;\n    walkFields(nodes, (props) => {\n      if (Array.isArray(props.dependsOnKeys)) {\n        for (const key of props.dependsOnKeys) {\n          keys.add(String(key));\n        }\n      }\n      if (props.dependsOnAny) {\n        any = true;\n      }\n    });\n    return { keys: [...keys], any };\n  }, [nodes]);\n\n  const watchPaths = useMemo(() => {\n    const set = new Set<string>(watch.keys);\n    for (const target of targets) {\n      for (const dep of target.resetOn) {\n        set.add(dep);\n      }\n      for (const dep of target.refreshOn) {\n        set.add(dep);\n      }\n    }\n    return [...set];\n  }, [watch.keys, targets]);\n\n  // In \"any\" mode the values store keeps a stable reference until something\n  // actually changes, so its identity is the change signal. Otherwise hash the\n  // watched paths (form-level and per-row).\n  const watchSignature = watch.any\n    ? values\n    : JSON.stringify(watchPaths.map((path) => getPath(values, path)));\n\n  useEffect(() => {\n    if (watchPaths.length === 0 && !watch.any) {\n      return;\n    }\n\n    const previous = previousValues.current;\n    previousValues.current = values;\n\n    // `resetOn` deps unlock a path (a fresh product gives a fresh price); `refreshOn`\n    // deps only re-ask the server and never clear an override (a customer change\n    // re-prices untouched rows but leaves user-edited ones alone).\n    for (const overrideKey of pathsToClear(\n      { targets: previousTargets.current, values: previous },\n      { targets: targetsRef.current, values },\n    )) {\n      overrides.current.delete(overrideKey);\n    }\n    previousTargets.current = targetsRef.current;\n\n    // Override ownership is row-id keyed, so pruning removes departed rows without reindex drift.\n    overrides.current = pruneOverrides(overrides.current, targetsRef.current);\n\n    const controller = new AbortController();\n\n    const timer = window.setTimeout(() => {\n      void postFormAction<ResolveResponse>(\n        action,\n        componentRef,\n        { _resolve: true, ...values },\n        controller.signal,\n      )\n        .then((response) => {\n          if (!response) {\n            return;\n          }\n          for (const [name, value] of Object.entries(response.values ?? {})) {\n            setValue(name, value);\n          }\n          const targetsByPath = new Map(\n            targetsRef.current.map((target) => [target.path, target] as const),\n          );\n          for (const [path, value] of Object.entries(response.prefill ?? {})) {\n            const target = targetsByPath.get(path);\n\n            if (target && !overrides.current.has(target.overrideKey)) {\n              setValue(path, value);\n            }\n          }\n          if (response.fields) {\n            setResolved(response.fields);\n          }\n        })\n        .catch(() => {});\n    }, FORM_DEBOUNCE_MS);\n\n    return () => {\n      window.clearTimeout(timer);\n      controller.abort();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [watchSignature, action, componentRef, watch.any, setValue]);\n\n  return { nodes: resolved, markUserEdit };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-form-resolver.js","names":[],"sources":["../../../resources/js/form/hooks/use-form-resolver.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { ResolveResponse } from \"@lattice-php/lattice/types/generated\";\nimport { walkFields } from \"@lattice-php/lattice/form/lib/field-props\";\nimport { FORM_DEBOUNCE_MS, postFormAction } from \"@lattice-php/lattice/form/lib/form-transport\";\nimport {\n  collectPrefillTargets,\n  getPath,\n  pathsToClear,\n  pruneOverrides,\n  seededOverrides,\n} from \"@lattice-php/lattice/form/lib/prefill-targets\";\nimport type { PrefillController } from \"./prefill-context\";\nimport { useFormValues, useSetFormValue } from \"./values\";\n\ntype FormResolver = {\n  nodes: Record<string, Node>;\n  markUserEdit: PrefillController[\"markUserEdit\"];\n};\n\nexport function useFormResolver(\n  action: string,\n  componentRef: string,\n  nodes: Node[] | undefined,\n): FormResolver {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const [resolved, setResolved] = useState<Record<string, Node>>({});\n\n  const targets = useMemo(() => collectPrefillTargets(nodes, values), [nodes, values]);\n\n  const overrides = useRef<Set<string>>(new Set());\n  const seededOverrideKeys = useRef<Set<string>>(new Set());\n  const previousValues = useRef<Record<string, unknown>>(values);\n  const previousTargets = useRef(targets);\n\n  // Read targets via a ref inside the effect: `targets` changes identity on every\n  // value change, but the effect must fire only when `watchSignature` changes\n  // (which already reflects added/removed target paths). Keeping `targets` out of\n  // the dep array preserves the targeted watch in non-\"any\" mode.\n  const targetsRef = useRef(targets);\n  targetsRef.current = targets;\n\n  useLayoutEffect(() => {\n    const liveOverrideKeys = new Set(targets.map((target) => target.overrideKey));\n    seededOverrideKeys.current = new Set(\n      [...seededOverrideKeys.current].filter((overrideKey) => liveOverrideKeys.has(overrideKey)),\n    );\n    const freshTargets = targets.filter(\n      (target) => !seededOverrideKeys.current.has(target.overrideKey),\n    );\n\n    // Layout ordering seeds loaded values before the first resolve effect can apply prefill.\n    for (const overrideKey of seededOverrides(freshTargets, values)) {\n      overrides.current.add(overrideKey);\n    }\n\n    for (const target of freshTargets) {\n      seededOverrideKeys.current.add(target.overrideKey);\n    }\n  }, [targets, values]);\n\n  const markUserEdit = useCallback((overrideKey: string) => {\n    overrides.current.add(overrideKey);\n  }, []);\n\n  const watch = useMemo(() => {\n    const keys = new Set<string>();\n    let any = false;\n    walkFields(nodes, (props) => {\n      if (Array.isArray(props.dependsOnKeys)) {\n        for (const key of props.dependsOnKeys) {\n          keys.add(String(key));\n        }\n      }\n      if (props.dependsOnAny) {\n        any = true;\n      }\n    });\n    return { keys: [...keys], any };\n  }, [nodes]);\n\n  const watchPaths = useMemo(() => {\n    const set = new Set<string>(watch.keys);\n    for (const target of targets) {\n      for (const dep of target.resetOn) {\n        set.add(dep);\n      }\n      for (const dep of target.refreshOn) {\n        set.add(dep);\n      }\n    }\n    return [...set];\n  }, [watch.keys, targets]);\n\n  // In \"any\" mode the values store keeps a stable reference until something\n  // actually changes, so its identity is the change signal. Otherwise hash the\n  // watched paths (form-level and per-row).\n  const watchSignature = watch.any\n    ? values\n    : JSON.stringify(watchPaths.map((path) => getPath(values, path)));\n\n  useEffect(() => {\n    if (watchPaths.length === 0 && !watch.any) {\n      return;\n    }\n\n    const previous = previousValues.current;\n    previousValues.current = values;\n\n    // `resetOn` deps unlock a path (a fresh product gives a fresh price); `refreshOn`\n    // deps only re-ask the server and never clear an override (a customer change\n    // re-prices untouched rows but leaves user-edited ones alone).\n    for (const overrideKey of pathsToClear(\n      { targets: previousTargets.current, values: previous },\n      { targets: targetsRef.current, values },\n    )) {\n      overrides.current.delete(overrideKey);\n    }\n    previousTargets.current = targetsRef.current;\n\n    // Override ownership is row-id keyed, so pruning removes departed rows without reindex drift.\n    overrides.current = pruneOverrides(overrides.current, targetsRef.current);\n\n    const controller = new AbortController();\n\n    const timer = window.setTimeout(() => {\n      void postFormAction<ResolveResponse>(\n        action,\n        componentRef,\n        { _resolve: true, ...values },\n        controller.signal,\n      )\n        .then((response) => {\n          if (!response) {\n            return;\n          }\n          for (const [name, value] of Object.entries(response.values ?? {})) {\n            setValue(name, value);\n          }\n          const targetsByPath = new Map(\n            targetsRef.current.map((target) => [target.path, target] as const),\n          );\n          for (const [path, value] of Object.entries(response.prefill ?? {})) {\n            const target = targetsByPath.get(path);\n\n            if (target && !overrides.current.has(target.overrideKey)) {\n              setValue(path, value);\n            }\n          }\n          if (response.fields) {\n            setResolved(response.fields);\n          }\n        })\n        .catch(() => {});\n    }, FORM_DEBOUNCE_MS);\n\n    return () => {\n      window.clearTimeout(timer);\n      controller.abort();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [watchSignature, action, componentRef, watch.any, setValue]);\n\n  return { nodes: resolved, markUserEdit };\n}\n"],"mappings":"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"}

package/dist/form/index.js

@@ -2,6 +2,7 @@ import { FormValuesProvider } from "./hooks/values.js";
 import { BuilderComponent } from "./components/fields/builder.js";
 import { CheckboxComponent } from "./components/fields/checkbox.js";
 import { ChoiceComponent } from "./components/fields/choice.js";
+import { ColorPickerFieldComponent } from "./components/fields/color-picker-field.js";
 import { DateInputComponent } from "./components/fields/date-input.js";
 import { DateTimeInputComponent } from "./components/fields/date-time-input.js";
 import { FileUploadComponent } from "./components/fields/file-upload.js";
@@ -17,4 +18,4 @@ import { TextInputComponent } from "./components/fields/text-input.js";
 import { TimeInputComponent } from "./components/fields/time-input.js";
 import { ToggleComponent } from "./components/fields/toggle.js";
 import { formComponents } from "./plugin.js";
-export { BuilderComponent, CheckboxComponent, ChoiceComponent, DateInputComponent, DateTimeInputComponent, FileUploadComponent, FormComponent, FormValuesProvider, HiddenInputComponent, NumberInputComponent, OtpInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent, TimeInputComponent, ToggleComponent, formComponents };
+export { BuilderComponent, CheckboxComponent, ChoiceComponent, ColorPickerFieldComponent, DateInputComponent, DateTimeInputComponent, FileUploadComponent, FormComponent, FormValuesProvider, HiddenInputComponent, NumberInputComponent, OtpInputComponent, PasswordInputComponent, RepeaterComponent, SelectComponent, TextInputComponent, TextareaComponent, TimeInputComponent, ToggleComponent, formComponents };

package/dist/form/lib/conditions.d.ts

@@ -1,11 +1,5 @@
-import { Condition } from '../../types/generated.js';
-export type { Condition };
-export type FieldConditions = {
-    visible?: Condition[];
-    required?: Condition[];
-    readOnly?: Condition[];
-    disabled?: Condition[];
-};
+import { Condition, FieldConditions } from '../../types/generated.js';
+export type { Condition, FieldConditions };
 type FieldFlags = {
     hidden?: boolean;
     required?: boolean;
@@ -18,6 +12,6 @@ export type FieldState = {
     readOnly: boolean;
     disabled: boolean;
 };
-export declare function conditionFields(conditions: FieldConditions | undefined | null): string[];
+export declare function conditionFields(conditions: Partial<FieldConditions> | undefined | null): string[];
 export declare function toBoolean(value: unknown): boolean;
-export declare function evaluateConditions(conditions: FieldConditions | undefined, values: Record<string, unknown>, flags: FieldFlags): FieldState;
+export declare function evaluateConditions(conditions: Partial<FieldConditions> | undefined, values: Record<string, unknown>, flags: FieldFlags): FieldState;

package/dist/form/lib/conditions.js.map

@@ -1 +1 @@
-{"version":3,"file":"conditions.js","names":[],"sources":["../../../resources/js/form/lib/conditions.ts"],"sourcesContent":["import type { Condition, Op } from \"@lattice-php/lattice/types/generated\";\n\nexport type { Condition };\n\nexport type FieldConditions = {\n  visible?: Condition[];\n  required?: Condition[];\n  readOnly?: Condition[];\n  disabled?: Condition[];\n};\n\ntype FieldFlags = {\n  hidden?: boolean;\n  required?: boolean;\n  readOnly?: boolean;\n  disabled?: boolean;\n};\n\nexport type FieldState = {\n  hidden: boolean;\n  required: boolean;\n  readOnly: boolean;\n  disabled: boolean;\n};\n\nexport function conditionFields(conditions: FieldConditions | undefined | null): string[] {\n  const fields = new Set<string>();\n\n  for (const group of [\n    conditions?.visible,\n    conditions?.required,\n    conditions?.readOnly,\n    conditions?.disabled,\n  ]) {\n    for (const condition of group ?? []) {\n      fields.add(condition.field);\n    }\n  }\n\n  return Array.from(fields);\n}\n\nconst BOOLEAN_TRUE_VALUES = new Set([\"1\", \"true\", \"on\", \"yes\"]);\n\n// Mirrors PHP filter_var(FILTER_VALIDATE_BOOLEAN) so conditions evaluate\n// identically on the server and the client.\nexport function toBoolean(value: unknown): boolean {\n  if (typeof value === \"boolean\") {\n    return value;\n  }\n\n  if (typeof value === \"number\") {\n    return value === 1;\n  }\n\n  return BOOLEAN_TRUE_VALUES.has(String(value).toLowerCase());\n}\n\nfunction equals(actual: unknown, expected: unknown): boolean {\n  if (typeof expected === \"boolean\") {\n    return toBoolean(actual) === expected;\n  }\n  return String(actual ?? \"\") === String(expected ?? \"\");\n}\n\nfunction isIn(actual: unknown, expected: unknown): boolean {\n  const needles = (Array.isArray(expected) ? expected : [expected]).map((value) => String(value));\n  return needles.includes(String(actual ?? \"\"));\n}\n\nfunction isBlank(value: unknown): boolean {\n  return value == null || String(value).trim() === \"\";\n}\n\n// Null when either value can't be parsed, so before/after never matches a bad date. Mirrors PHP strtotime.\nfunction compareDates(actual: unknown, expected: unknown): number | null {\n  const left = Date.parse(String(actual));\n  const right = Date.parse(String(expected));\n\n  if (Number.isNaN(left) || Number.isNaN(right)) {\n    return null;\n  }\n\n  return left === right ? 0 : left < right ? -1 : 1;\n}\n\n// Unknown operators from untrusted payloads fail open (the condition matches).\n// The `never` parameter makes an Op value added without a case above a\n// compile error rather than a silent fall-through.\nfunction evaluateUnknownOperator(_operator: never): boolean {\n  return true;\n}\n\nfunction evaluateOp(operator: Op, actual: unknown, expected: unknown): boolean {\n  switch (operator) {\n    case \"eq\":\n      return equals(actual, expected);\n    case \"neq\":\n      return !equals(actual, expected);\n    case \"gt\":\n      return Number(actual) > Number(expected);\n    case \"lt\":\n      return Number(actual) < Number(expected);\n    case \"gte\":\n      return Number(actual) >= Number(expected);\n    case \"lte\":\n      return Number(actual) <= Number(expected);\n    case \"contains\":\n      return String(actual ?? \"\").includes(String(expected ?? \"\"));\n    case \"starts_with\":\n      return String(actual ?? \"\").startsWith(String(expected ?? \"\"));\n    case \"ends_with\":\n      return String(actual ?? \"\").endsWith(String(expected ?? \"\"));\n    case \"in\":\n      return isIn(actual, expected);\n    case \"not_in\":\n      return !isIn(actual, expected);\n    case \"before\":\n      return compareDates(actual, expected) === -1;\n    case \"after\":\n      return compareDates(actual, expected) === 1;\n    case \"empty\":\n      return isBlank(actual);\n    case \"filled\":\n      return !isBlank(actual);\n    default:\n      return evaluateUnknownOperator(operator);\n  }\n}\n\nfunction allMatch(conditions: Condition[], values: Record<string, unknown>): boolean {\n  return conditions.every((condition) =>\n    evaluateOp(condition.operator, values[condition.field], condition.value),\n  );\n}\n\nfunction anyMatch(conditions: Condition[] | undefined, values: Record<string, unknown>): boolean {\n  return Boolean(\n    conditions?.some((condition) =>\n      evaluateOp(condition.operator, values[condition.field], condition.value),\n    ),\n  );\n}\n\nexport function evaluateConditions(\n  conditions: FieldConditions | undefined,\n  values: Record<string, unknown>,\n  flags: FieldFlags,\n): FieldState {\n  const visible = !conditions?.visible?.length || allMatch(conditions.visible, values);\n\n  return {\n    hidden: Boolean(flags.hidden) || !visible,\n    required: Boolean(flags.required) || anyMatch(conditions?.required, values),\n    readOnly: Boolean(flags.readOnly) || anyMatch(conditions?.readOnly, values),\n    disabled: Boolean(flags.disabled) || anyMatch(conditions?.disabled, values),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"conditions.js","names":[],"sources":["../../../resources/js/form/lib/conditions.ts"],"sourcesContent":["import type { Condition, FieldConditions, Op } from \"@lattice-php/lattice/types/generated\";\n\nexport type { Condition, FieldConditions };\n\ntype FieldFlags = {\n  hidden?: boolean;\n  required?: boolean;\n  readOnly?: boolean;\n  disabled?: boolean;\n};\n\nexport type FieldState = {\n  hidden: boolean;\n  required: boolean;\n  readOnly: boolean;\n  disabled: boolean;\n};\n\nexport function conditionFields(conditions: Partial<FieldConditions> | undefined | null): string[] {\n  const fields = new Set<string>();\n\n  for (const group of [\n    conditions?.visible,\n    conditions?.required,\n    conditions?.readOnly,\n    conditions?.disabled,\n  ]) {\n    for (const condition of group ?? []) {\n      fields.add(condition.field);\n    }\n  }\n\n  return Array.from(fields);\n}\n\nconst BOOLEAN_TRUE_VALUES = new Set([\"1\", \"true\", \"on\", \"yes\"]);\n\n// Mirrors PHP filter_var(FILTER_VALIDATE_BOOLEAN) so conditions evaluate\n// identically on the server and the client.\nexport function toBoolean(value: unknown): boolean {\n  if (typeof value === \"boolean\") {\n    return value;\n  }\n\n  if (typeof value === \"number\") {\n    return value === 1;\n  }\n\n  return BOOLEAN_TRUE_VALUES.has(String(value).toLowerCase());\n}\n\nfunction equals(actual: unknown, expected: unknown): boolean {\n  if (typeof expected === \"boolean\") {\n    return toBoolean(actual) === expected;\n  }\n  return String(actual ?? \"\") === String(expected ?? \"\");\n}\n\nfunction isIn(actual: unknown, expected: unknown): boolean {\n  const needles = (Array.isArray(expected) ? expected : [expected]).map((value) => String(value));\n  return needles.includes(String(actual ?? \"\"));\n}\n\nfunction isBlank(value: unknown): boolean {\n  return value == null || String(value).trim() === \"\";\n}\n\n// Null when either value can't be parsed, so before/after never matches a bad date. Mirrors PHP strtotime.\nfunction compareDates(actual: unknown, expected: unknown): number | null {\n  const left = Date.parse(String(actual));\n  const right = Date.parse(String(expected));\n\n  if (Number.isNaN(left) || Number.isNaN(right)) {\n    return null;\n  }\n\n  return left === right ? 0 : left < right ? -1 : 1;\n}\n\n// Unknown operators from untrusted payloads fail open (the condition matches).\n// The `never` parameter makes an Op value added without a case above a\n// compile error rather than a silent fall-through.\nfunction evaluateUnknownOperator(_operator: never): boolean {\n  return true;\n}\n\nfunction evaluateOp(operator: Op, actual: unknown, expected: unknown): boolean {\n  switch (operator) {\n    case \"eq\":\n      return equals(actual, expected);\n    case \"neq\":\n      return !equals(actual, expected);\n    case \"gt\":\n      return Number(actual) > Number(expected);\n    case \"lt\":\n      return Number(actual) < Number(expected);\n    case \"gte\":\n      return Number(actual) >= Number(expected);\n    case \"lte\":\n      return Number(actual) <= Number(expected);\n    case \"contains\":\n      return String(actual ?? \"\").includes(String(expected ?? \"\"));\n    case \"starts_with\":\n      return String(actual ?? \"\").startsWith(String(expected ?? \"\"));\n    case \"ends_with\":\n      return String(actual ?? \"\").endsWith(String(expected ?? \"\"));\n    case \"in\":\n      return isIn(actual, expected);\n    case \"not_in\":\n      return !isIn(actual, expected);\n    case \"before\":\n      return compareDates(actual, expected) === -1;\n    case \"after\":\n      return compareDates(actual, expected) === 1;\n    case \"empty\":\n      return isBlank(actual);\n    case \"filled\":\n      return !isBlank(actual);\n    default:\n      return evaluateUnknownOperator(operator);\n  }\n}\n\nfunction allMatch(conditions: Condition[], values: Record<string, unknown>): boolean {\n  return conditions.every((condition) =>\n    evaluateOp(condition.operator, values[condition.field], condition.value),\n  );\n}\n\nfunction anyMatch(conditions: Condition[] | undefined, values: Record<string, unknown>): boolean {\n  return Boolean(\n    conditions?.some((condition) =>\n      evaluateOp(condition.operator, values[condition.field], condition.value),\n    ),\n  );\n}\n\nexport function evaluateConditions(\n  conditions: Partial<FieldConditions> | undefined,\n  values: Record<string, unknown>,\n  flags: FieldFlags,\n): FieldState {\n  const visible = !conditions?.visible?.length || allMatch(conditions.visible, values);\n\n  return {\n    hidden: Boolean(flags.hidden) || !visible,\n    required: Boolean(flags.required) || anyMatch(conditions?.required, values),\n    readOnly: Boolean(flags.readOnly) || anyMatch(conditions?.readOnly, values),\n    disabled: Boolean(flags.disabled) || anyMatch(conditions?.disabled, values),\n  };\n}\n"],"mappings":"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"}

package/dist/form/lib/field-props.d.ts

@@ -1,27 +1,13 @@
 import { Node } from '../../core/types.js';
-import { FieldConditions } from './conditions.js';
+import { ComponentPropsMap } from '../../types/generated.js';
 /**
  * The props every form-field node shares (the PHP Field base). Nodes flow through
  * the form framework loosely typed via the generic schema, so this is the typed
  * lens the shared hooks read them through. Everything is optional because the
- * lens is also applied to non-field nodes while walking the schema.
+ * lens is also applied to non-field nodes while walking the schema. Derived from
+ * a generated field type (every field bakes the base in) rather than hand-written.
  */
-type FieldProps = {
-    conditions?: FieldConditions | null;
-    dependsOnAny?: boolean | null;
-    dependsOnKeys?: string[] | null;
-    disabled?: boolean | null;
-    helperText?: string | null;
-    label?: string | null;
-    name?: string;
-    editablePrefill?: boolean | null;
-    prefillRefreshOn?: string[] | null;
-    prefillResetOn?: string[] | null;
-    readOnly?: boolean | null;
-    required?: boolean | null;
-    tooltip?: string | null;
-    value?: unknown;
-};
+type FieldProps = Partial<Pick<ComponentPropsMap["field.text-input"], "conditions" | "dependsOnAny" | "dependsOnKeys" | "disabled" | "editablePrefill" | "helperText" | "label" | "name" | "prefillRefreshOn" | "prefillResetOn" | "readOnly" | "required" | "tooltip" | "value">>;
 export declare function fieldProps(node: Node): FieldProps;
 export declare function walkFields(nodes: Node[] | undefined, visit: (props: FieldProps, node: Node) => void): void;
 export {};

package/dist/form/lib/field-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-props.js","names":[],"sources":["../../../resources/js/form/lib/field-props.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { FieldConditions } from \"./conditions\";\n\n/**\n * The props every form-field node shares (the PHP Field base). Nodes flow through\n * the form framework loosely typed via the generic schema, so this is the typed\n * lens the shared hooks read them through. Everything is optional because the\n * lens is also applied to non-field nodes while walking the schema.\n */\ntype FieldProps = {\n  conditions?: FieldConditions | null;\n  dependsOnAny?: boolean | null;\n  dependsOnKeys?: string[] | null;\n  disabled?: boolean | null;\n  helperText?: string | null;\n  label?: string | null;\n  name?: string;\n  editablePrefill?: boolean | null;\n  prefillRefreshOn?: string[] | null;\n  prefillResetOn?: string[] | null;\n  readOnly?: boolean | null;\n  required?: boolean | null;\n  tooltip?: string | null;\n  value?: unknown;\n};\n\nexport function fieldProps(node: Node): FieldProps {\n  return node.props as FieldProps;\n}\n\nexport function walkFields(\n  nodes: Node[] | undefined,\n  visit: (props: FieldProps, node: Node) => void,\n): void {\n  for (const child of nodes ?? []) {\n    visit(fieldProps(child), child);\n    walkFields(child.schema, visit);\n  }\n}\n"],"mappings":";AA0BA,SAAgB,WAAW,MAAwB;CACjD,OAAO,KAAK;AACd;AAEA,SAAgB,WACd,OACA,OACM;CACN,KAAK,MAAM,SAAS,SAAS,CAAC,GAAG;EAC/B,MAAM,WAAW,KAAK,GAAG,KAAK;EAC9B,WAAW,MAAM,QAAQ,KAAK;CAChC;AACF"}
+{"version":3,"file":"field-props.js","names":[],"sources":["../../../resources/js/form/lib/field-props.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { ComponentPropsMap } from \"@lattice-php/lattice/types/generated\";\n\n/**\n * The props every form-field node shares (the PHP Field base). Nodes flow through\n * the form framework loosely typed via the generic schema, so this is the typed\n * lens the shared hooks read them through. Everything is optional because the\n * lens is also applied to non-field nodes while walking the schema. Derived from\n * a generated field type (every field bakes the base in) rather than hand-written.\n */\ntype FieldProps = Partial<\n  Pick<\n    ComponentPropsMap[\"field.text-input\"],\n    | \"conditions\"\n    | \"dependsOnAny\"\n    | \"dependsOnKeys\"\n    | \"disabled\"\n    | \"editablePrefill\"\n    | \"helperText\"\n    | \"label\"\n    | \"name\"\n    | \"prefillRefreshOn\"\n    | \"prefillResetOn\"\n    | \"readOnly\"\n    | \"required\"\n    | \"tooltip\"\n    | \"value\"\n  >\n>;\n\nexport function fieldProps(node: Node): FieldProps {\n  return node.props as FieldProps;\n}\n\nexport function walkFields(\n  nodes: Node[] | undefined,\n  visit: (props: FieldProps, node: Node) => void,\n): void {\n  for (const child of nodes ?? []) {\n    visit(fieldProps(child), child);\n    walkFields(child.schema, visit);\n  }\n}\n"],"mappings":";AA8BA,SAAgB,WAAW,MAAwB;CACjD,OAAO,KAAK;AACd;AAEA,SAAgB,WACd,OACA,OACM;CACN,KAAK,MAAM,SAAS,SAAS,CAAC,GAAG;EAC/B,MAAM,WAAW,KAAK,GAAG,KAAK;EAC9B,WAAW,MAAM,QAAQ,KAAK;CAChC;AACF"}

package/dist/form/plugin.js

@@ -2,6 +2,7 @@ import { createPlugin, eagerComponent } from "../core/registry.js";
 import { BuilderComponent } from "./components/fields/builder.js";
 import { CheckboxComponent } from "./components/fields/checkbox.js";
 import { ChoiceComponent } from "./components/fields/choice.js";
+import { ColorPickerFieldComponent } from "./components/fields/color-picker-field.js";
 import { DateInputComponent } from "./components/fields/date-input.js";
 import { DateTimeInputComponent } from "./components/fields/date-time-input.js";
 import { FileUploadComponent } from "./components/fields/file-upload.js";
@@ -24,6 +25,7 @@ var formComponents = createPlugin({
 		"field.builder": eagerComponent(BuilderComponent),
 		"field.checkbox": eagerComponent(CheckboxComponent),
 		"field.choice": eagerComponent(ChoiceComponent),
+		"field.color-picker": eagerComponent(ColorPickerFieldComponent),
 		"field.date-input": eagerComponent(DateInputComponent),
 		"field.date-time-input": eagerComponent(DateTimeInputComponent),
 		"field.file-upload": eagerComponent(FileUploadComponent),