@wix/patterns 1.439.0 → 1.442.0

package/src/components/EditableTable/EditableTable.uni.driver.ts

@@ -50,6 +50,14 @@ export function EditableTableUniDriver(base: UniDriver, body: UniDriver) {
     /** Total number of gridcells rendered */
     getCellsCount: () => getCells().count(),
 
+    /** Whether the row shows the error indicator in its status slot */
+    hasRowError: (rowKey: string) =>
+      base
+        .$(
+          `[data-hook="table-row-${rowKey}"] [data-hook="row-status-indicator"]`,
+        )
+        .exists(),
+
     /** Wait for at least one data row to render */
     waitForRow: (timeout?: number) => getRows().get(0).wait(timeout),
 

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover4234397533";
+var _namespace_ = "HeaderActionsPopover3793940437";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"HeaderActionsPopover4234397533__root"};
+export var classes = {"root":"HeaderActionsPopover3793940437__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout749022329";
+var _namespace_ = "CellViewLayout2490979056";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CellViewLayout749022329__root"};
+export var classes = {"root":"CellViewLayout2490979056__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/address/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3533923861";
+var _namespace_ = "Edit3905236503";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3533923861__root","addressInput":"Edit3533923861__addressInput"};
+export var classes = {"root":"Edit3905236503__root","addressInput":"Edit3905236503__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/array/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3170590078";
+var _namespace_ = "Edit3043371877";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3170590078__root","jsonInput":"Edit3170590078__jsonInput"};
+export var classes = {"root":"Edit3043371877__root","jsonInput":"Edit3043371877__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1674725188";
+var _namespace_ = "Edit788413165";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1674725188__root","booleanEdit":"Edit1674725188__booleanEdit"};
+export var classes = {"root":"Edit788413165__root","booleanEdit":"Edit788413165__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1980054344";
+var _namespace_ = "View1342037778";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View1980054344__root","booleanView":"View1980054344__booleanView"};
+export var classes = {"root":"View1342037778__root","booleanView":"View1342037778__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/color/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3835772998";
+var _namespace_ = "Edit3949182414";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3835772998__root"};
+export var classes = {"root":"Edit3949182414__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit942846416";
+var _namespace_ = "Edit1209512027";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit942846416__root","dateInput":"Edit942846416__dateInput"};
+export var classes = {"root":"Edit1209512027__root","dateInput":"Edit1209512027__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1682602195";
+var _namespace_ = "View3271221667";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View1682602195__root"};
+export var classes = {"root":"View3271221667__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1093196172";
+var _namespace_ = "Edit377711908";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1093196172__root","half":"Edit1093196172__half","dateHalf":"Edit1093196172__dateHalf Edit1093196172__half","timeHalf":"Edit1093196172__timeHalf Edit1093196172__half","divider":"Edit1093196172__divider","passiveText":"Edit1093196172__passiveText","placeholderText":"Edit1093196172__placeholderText Edit1093196172__passiveText"};
+export var classes = {"root":"Edit377711908__root","half":"Edit377711908__half","dateHalf":"Edit377711908__dateHalf Edit377711908__half","timeHalf":"Edit377711908__timeHalf Edit377711908__half","divider":"Edit377711908__divider","passiveText":"Edit377711908__passiveText","placeholderText":"Edit377711908__placeholderText Edit377711908__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2841977999";
+var _namespace_ = "View4285517311";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2841977999__root","leaf":"View2841977999__leaf","datePart":"View2841977999__datePart View2841977999__leaf","timePart":"View2841977999__timePart View2841977999__leaf","placeholder":"View2841977999__placeholder View2841977999__leaf","divider":"View2841977999__divider"};
+export var classes = {"root":"View4285517311__root","leaf":"View4285517311__leaf","datePart":"View4285517311__datePart View4285517311__leaf","timePart":"View4285517311__timePart View4285517311__leaf","placeholder":"View4285517311__placeholder View4285517311__leaf","divider":"View4285517311__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2341139217";
+var _namespace_ = "Edit1265340446";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2341139217__root","emailInput":"Edit2341139217__emailInput"};
+export var classes = {"root":"Edit1265340446__root","emailInput":"Edit1265340446__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3832435519";
+var _namespace_ = "View365527864";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3832435519__root"};
+export var classes = {"root":"View365527864__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/multiReference/View.tsx

@@ -9,7 +9,7 @@ export const MultiReferenceView: React.FC<
   CellViewProps<MultiReferenceValue>
 > = ({ value, typeConfig, columnId, rowKey }) => {
   const config = typeConfig as ReferenceTypeConfig | undefined;
-  const refs = value ?? [];
+  const refs = (Array.isArray(value) ? value : []).filter(Boolean);
   if (refs.length === 0 || !config?.refSchema) {
     return null;
   }

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1352125943";
+var _namespace_ = "Edit2352712395";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1352125943__root","numberInput":"Edit1352125943__numberInput"};
+export var classes = {"root":"Edit2352712395__root","numberInput":"Edit2352712395__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View176370590";
+var _namespace_ = "View3972215459";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View176370590__root","textView":"View176370590__textView"};
+export var classes = {"root":"View3972215459__root","textView":"View3972215459__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1453821035";
+var _namespace_ = "Edit3834104209";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1453821035__root","jsonInput":"Edit1453821035__jsonInput"};
+export var classes = {"root":"Edit3834104209__root","jsonInput":"Edit3834104209__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3086210289";
+var _namespace_ = "View3203364451";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3086210289__root"};
+export var classes = {"root":"View3203364451__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/richContent/index.tsx

@@ -13,7 +13,10 @@ import { RichContentView } from './View';
 const richContentEditFactory = () =>
   import(/* webpackChunkName: "EditableTableRichContentEdit" */ './Edit');
 
-if (typeof process !== 'undefined' && process.env.STORYBOOK_VISUAL_E2E !== 'true') {
+if (
+  typeof process !== 'undefined' &&
+  process.env.STORYBOOK_VISUAL_E2E !== 'true'
+) {
   richContentEditFactory();
 }
 

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4241939666";
+var _namespace_ = "Edit1924815178";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit4241939666__root","selectInput":"Edit4241939666__selectInput"};
+export var classes = {"root":"Edit1924815178__root","selectInput":"Edit1924815178__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3655408813";
+var _namespace_ = "Edit754040967";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3655408813__root","editWrapper":"Edit3655408813__editWrapper","inputArea":"Edit3655408813__inputArea"};
+export var classes = {"root":"Edit754040967__root","editWrapper":"Edit754040967__editWrapper","inputArea":"Edit754040967__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3309862510";
+var _namespace_ = "View945506773";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3309862510__root"};
+export var classes = {"root":"View945506773__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/time/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2497656038";
+var _namespace_ = "Edit2061718801";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2497656038__root","wrapper":"Edit2497656038__wrapper","overlay":"Edit2497656038__overlay"};
+export var classes = {"root":"Edit2061718801__root","wrapper":"Edit2061718801__wrapper","overlay":"Edit2061718801__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1953826258";
+var _namespace_ = "Edit4042321323";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1953826258__root","urlInput":"Edit1953826258__urlInput"};
+export var classes = {"root":"Edit4042321323__root","urlInput":"Edit4042321323__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View338213561";
+var _namespace_ = "View967733710";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View338213561__root","textView":"View338213561__textView","urlText":"View338213561__urlText","suffix":"View338213561__suffix"};
+export var classes = {"root":"View967733710__root","textView":"View967733710__textView","urlText":"View967733710__urlText","suffix":"View967733710__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EmptyState/EmptyStateBase.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase297053964";
+var _namespace_ = "EmptyStateBase666480663";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EmptyStateBase297053964__root"};
+export var classes = {"root":"EmptyStateBase666480663__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain3111665307";
+var _namespace_ = "EntityPagePlain2139297974";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EntityPagePlain3111665307__root"};
+export var classes = {"root":"EntityPagePlain2139297974__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPageFields/EntityPageCustomField.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import type { Field, FieldTypeDefinition } from '@wix/bex-core';
+import { useController, type Control } from '@wix/bex-core/form';
+import { toValidationRules } from '../../state/buildEditableFieldColumns';
+
+export interface EntityPageCustomFieldProps {
+  field: Field;
+  formControl: Control<any>;
+  /** The entity — seeds the form default value. */
+  data: Record<string, unknown>;
+  /** The field's resolved definition. Must carry a `form` slot. */
+  definition: FieldTypeDefinition;
+  dataHook?: string;
+}
+
+// Owns the react-hook-form wiring for a custom field type, so a definition's
+// form component never touches the form: it gets value/onChange and renders
+// only the input. Registration here (not in the component) also guarantees the
+// field reaches form.getValues() — an unregistered field silently drops out of
+// the save. Validation comes from the definition's value.validate, the same
+// authority the editable table runs.
+export function EntityPageCustomField({
+  field,
+  formControl,
+  data,
+  definition,
+  dataHook,
+}: EntityPageCustomFieldProps) {
+  const validate = definition.value?.validate;
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id] ?? definition.value?.defaultValue,
+    rules: validate
+      ? {
+          validate: (value) =>
+            validate(value, toValidationRules(field)) ?? true,
+        }
+      : undefined,
+  });
+  const Component = definition.form!.Component;
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <Component
+        field={field}
+        value={controller.field.value}
+        onChange={controller.field.onChange}
+        onBlur={controller.field.onBlur}
+        dataHook={dataHook && `${dataHook}-input`}
+      />
+    </FormField>
+  );
+}