@wix/patterns 1.430.0 → 1.432.0

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader702823358";
+var _namespace_ = "CollectionPageHeader1098151800";
 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":"CollectionPageHeader702823358__root"};
+export var classes = {"root":"CollectionPageHeader1098151800__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CustomColumnsEntityPageState.ts

@@ -5,15 +5,30 @@ import { CustomColumnsActionName } from './CustomColumnsState';
 import { SidePanelsState } from './SidePanelsState';
 import { CustomColumnsPanelStateBase } from './CustomColumnsPanelStateBase';
 import { SchemaFieldsState } from './SchemaCard/SchemaFieldsState';
+import type { ManageFieldsSource } from './ManageFieldsSource';
 import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
 import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
 import type { Field, SchemaConfig } from '../types/SchemaConfig';
 
+type SchemaFields = Pick<SchemaConfig, 'id' | 'fields'>;
+
 export interface CustomColumnsEntityPageStateParams {
   panels: SidePanelsState;
   container: import('@wix/bex-core').WixPatternsContainer;
   fieldsState: SchemaFieldsState;
-  schema: SchemaConfig;
+  /** Only the fields map is read, so a `SchemaConfig` and a source's `Schema`
+   *  both fit. Pass a function when the schema loads after this state is
+   *  created — it is read reactively. */
+  schema: SchemaFields | (() => SchemaFields | null);
+  /** Whether the panel presents itself as field management rather than column
+   *  selection. Default: `false`. */
+  isFieldsEditable?: boolean;
+  /** Add / edit / delete field. Omitted ⇒ the panel only shows and reorders. */
+  manageFieldsSource?: ManageFieldsSource;
+  /** Namespaces this panel's column collection, the way a table's is namespaced
+   *  by its collection. Default: the schema's id, when the schema is already
+   *  loaded. */
+  collectionId?: string;
   showFieldTypeIcons?: boolean;
   dragAndDrop?: typeof CustomColumnsDragAndDrop;
   modalsContainerRef: {
@@ -27,6 +42,9 @@ function fieldToColumn(
 ): Column {
   return {
     id: field.id,
+    // The panel's per-field menu is keyed off this — without it a row has no
+    // edit / delete action.
+    field,
     name: field.displayName,
     title: field.displayName,
     render: () => null,
@@ -45,19 +63,30 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
   readonly panels: SidePanelsState;
   readonly fieldsState: SchemaFieldsState;
   readonly _showFieldTypeIcons: boolean;
-  readonly _schema: SchemaConfig;
+  readonly _schema: SchemaFields | (() => SchemaFields | null);
+  readonly _isFieldsEditable: boolean;
+  readonly _manageFieldsSource?: ManageFieldsSource;
   readonly _dragAndDrop?: CustomColumnsDragAndDropState<unknown, any>;
 
   constructor(params: CustomColumnsEntityPageStateParams) {
     super({
       container: params.container,
-      queryName: 'entity-page-custom-columns',
+      queryName: [
+        params.container.environment.componentId,
+        params.collectionId ??
+          (typeof params.schema === 'function' ? undefined : params.schema.id),
+        'entity-page-custom-columns',
+      ]
+        .filter(Boolean)
+        .join('/'),
     });
 
     this.panels = params.panels;
     this.fieldsState = params.fieldsState;
     this._showFieldTypeIcons = params.showFieldTypeIcons ?? true;
     this._schema = params.schema;
+    this._isFieldsEditable = params.isFieldsEditable ?? false;
+    this._manageFieldsSource = params.manageFieldsSource;
 
     if (params.dragAndDrop) {
       const { fieldsState } = params;
@@ -95,8 +124,15 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
     this.initBaseObservables();
   }
 
+  get schema(): SchemaFields | null {
+    return typeof this._schema === 'function' ? this._schema() : this._schema;
+  }
+
   get orderedColumns(): Column[] {
-    const { fields } = this._schema;
+    const fields = this.schema?.fields;
+    if (!fields) {
+      return [];
+    }
     return this.fieldsState.orderedFields
       .map((viewConfig) => {
         const field = fields[viewConfig.id];
@@ -114,8 +150,12 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
     return this._showFieldTypeIcons;
   }
 
-  get collectionFieldsSource() {
-    return null;
+  get isFieldsEditable() {
+    return this._isFieldsEditable;
+  }
+
+  get manageFieldsSource() {
+    return this._manageFieldsSource;
   }
 
   get sidePanelTransition(): TransitionState<string> | undefined {

package/src/state/CustomColumnsPanelStateBase.ts

@@ -9,7 +9,7 @@ import { action, computed, makeObservable, observable } from 'mobx';
 import { Column } from '../model';
 import { CustomColumnsActionName } from './CustomColumnsState';
 import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
-import type { CollectionFieldsSourceState } from './CollectionFieldsSourceState';
+import type { ManageFieldsSource } from './ManageFieldsSource';
 
 export interface CustomColumnsPanelStateBaseParams {
   container: WixPatternsContainer;
@@ -63,10 +63,15 @@ export abstract class CustomColumnsPanelStateBase<
 
   abstract get showFieldTypeIcons(): boolean;
 
-  abstract get collectionFieldsSource():
-    | CollectionFieldsSourceState
-    | null
-    | undefined;
+  /** Whether the panel manages schema fields rather than picking columns —
+   *  drives its title and subtitle. Sources that carry their own field
+   *  management report it through `manageFieldsSource` instead. */
+  get isFieldsEditable(): boolean {
+    return false;
+  }
+
+  /** Add / edit / delete field, when the surface offers it. */
+  abstract get manageFieldsSource(): ManageFieldsSource | null | undefined;
 
   abstract get sidePanelTransition(): TransitionState<string> | undefined;
 

package/src/state/CustomColumnsState.ts

@@ -501,7 +501,7 @@ export class CustomColumnsState<
     return this.table.showFieldTypeIcons;
   }
 
-  get collectionFieldsSource() {
+  get manageFieldsSource() {
     return this.table.collectionFieldsSource;
   }
 

package/src/state/CustomFields/CustomFieldsPanelState.ts

@@ -6,9 +6,14 @@ import {
   FieldsSource,
   ReportBI,
   WixPatternsContainer,
+  resolveFieldTypeDefinition,
 } from '@wix/bex-core';
 import { makeAutoObservable } from 'mobx';
 import type { FieldActionsMenuConfig } from '../../components/FieldActions';
+import {
+  buildFieldTypeActionGroup,
+  mergeFieldTypeActions,
+} from '../../components/FieldActions/fieldTypeActions';
 
 /** Builds the per-field action popover (edit / archive / delete …) for a field. */
 export type FieldActionsMenuBuilder = (args: {
@@ -73,7 +78,22 @@ export class CustomFieldsPanelState {
         closePanel: () => undefined,
       },
     });
-    this.fieldActionsMenu = params.createFieldActionsMenu(this);
+    // A custom field type's extra actions render on every surface's menu, so
+    // they're appended here — after the source built its own menu — rather
+    // than inside each source's builder.
+    const sourceMenu = params.createFieldActionsMenu(this);
+    this.fieldActionsMenu = (args) => {
+      const config = sourceMenu(args);
+      const field = this.fieldsSource.fields.find((f) => f.id === args.fieldId);
+      const definition = field
+        ? resolveFieldTypeDefinition(this.fieldsSource, field)
+        : undefined;
+      const extras =
+        field && definition
+          ? buildFieldTypeActionGroup({ field, definition })
+          : [];
+      return mergeFieldTypeActions(config, extras);
+    };
     makeAutoObservable(this, {
       // A function that builds (doesn't mutate) the popover — not an action. It's
       // set once here and never reassigned, so it needn't be observable either.

package/src/state/EditableTable/CellValueState.ts

@@ -43,16 +43,8 @@ export class CellValueState<T, F extends FiltersMap> {
   get _cellTypeMap(): Map<string, CellType> {
     const map = new Map<string, CellType>();
     for (const col of this._parent.allColumns) {
-      if (
-        col.cellType === 'custom' &&
-        col.typeConfig &&
-        typeof col.typeConfig === 'object' &&
-        'ViewComponent' in col.typeConfig
-      ) {
-        map.set(col.id, {
-          type: 'custom',
-          ...(col.typeConfig as Omit<CellType, 'type'>),
-        });
+      if (col.cellType === 'custom' && col.typeConfig) {
+        map.set(col.id, { type: 'custom', ...col.typeConfig });
       } else {
         map.set(
           col.id,
@@ -97,7 +89,18 @@ export class CellValueState<T, F extends FiltersMap> {
     if (resolved.editable === false || !resolved.EditComponent) {
       return false;
     }
-    if (!column.setValue) {
+    return this.isColumnEditable(rowKey, columnId);
+  }
+
+  /**
+   * Whether `column.editable` permits writing this cell for this row,
+   * independent of whether the cell type has an inline EditComponent. Gates
+   * bulk/programmatic writes (clear, cut, paste) — narrower than
+   * isCellEditable, which also requires an edit UI to exist.
+   */
+  isColumnEditable(rowKey: string, columnId: string): boolean {
+    const column = this._parent._columnMap.get(columnId);
+    if (!column?.setValue) {
       return false;
     }
 
@@ -121,7 +124,7 @@ export class CellValueState<T, F extends FiltersMap> {
     return resolved.serialize ? resolved.serialize(value) : String(value ?? '');
   }
 
-  /** Clear selected cells (Delete/Backspace). Respects cellType.clearable. */
+  /** Clear selected cells (Delete/Backspace). Respects cellType.clearable and column.editable. */
   clearCells(cells: Cell[]) {
     const changes: { rowKey: string; columnId: string; value: any }[] = [];
 
@@ -134,6 +137,9 @@ export class CellValueState<T, F extends FiltersMap> {
       if (resolved.clearable === false) {
         continue;
       }
+      if (!this.isColumnEditable(cell.rowKey, cell.columnId)) {
+        continue;
+      }
 
       const pendingKey = this._pendingCellKey(cell.rowKey, cell.columnId);
       if (pendingKey) {
@@ -245,6 +251,9 @@ export class CellValueState<T, F extends FiltersMap> {
   /**
    * Apply multiple cell values in bulk. Validates per cell, accumulates
    * changes per row, and submits all modified items in a single update.
+   * Every mutation path (clear, paste, cut) funnels through here, so
+   * checking isColumnEditable here — not just at the call sites — keeps
+   * read-only cells protected regardless of entry point.
    */
   applyBulkValues(changes: { rowKey: string; columnId: string; value: any }[]) {
     const rowItems = new Map<string, T>();
@@ -252,7 +261,11 @@ export class CellValueState<T, F extends FiltersMap> {
     for (const { rowKey, columnId, value } of changes) {
       const column = this._parent._columnMap.get(columnId);
       const keyedItem = this._parent._getKeyedItem(rowKey);
-      if (!column?.setValue || !keyedItem) {
+      if (
+        !column?.setValue ||
+        !keyedItem ||
+        !this.isColumnEditable(rowKey, columnId)
+      ) {
         continue;
       }
 

package/src/state/EditableTable/EditableTableState.ts

@@ -152,6 +152,7 @@ export class EditableTableState<T, F extends FiltersMap>
     }
     return buildEditableFieldColumns(
       source.fieldsSource,
+      source.editableCellFor,
     ) as EditableColumn<T>[];
   }
 
@@ -249,6 +250,10 @@ export class EditableTableState<T, F extends FiltersMap>
     return this.cellValue.isCellEditable(rowKey, columnId);
   }
 
+  isColumnEditable(rowKey: string, columnId: string): boolean {
+    return this.cellValue.isColumnEditable(rowKey, columnId);
+  }
+
   clearCells(cells: Cell[]) {
     this.cellValue.clearCells(cells);
   }

package/src/state/EditableTable/fieldTypeToCellType.ts

@@ -7,8 +7,7 @@ import type { CellTypeConfigMap } from './types';
  * typeConfig the projection can't supply yet, so the projection downgrades
  * those to a read-only display (see NEEDS_TYPE_CONFIG in
  * buildEditableFieldColumns); the ideal mapping is kept here for when that
- * lands. ARRAY / OBJECT / UNKNOWN have no dedicated editable cell, so they
- * display as 'object'.
+ * lands. UNKNOWN has no cell of its own, so it displays as 'object'.
  */
 export const FIELD_TYPE_TO_CELL_TYPE: Record<
   PatternsFieldType,
@@ -35,7 +34,10 @@ export const FIELD_TYPE_TO_CELL_TYPE: Record<
   ADDRESS: 'address',
   REFERENCE: 'reference',
   MULTI_REFERENCE: 'multiReference',
-  ARRAY: 'object',
+  ARRAY: 'array',
   OBJECT: 'object',
+  // Reached only when a CUSTOM field's definition is missing or has no
+  // editableTable slot — the column builder resolves the definition first.
+  CUSTOM: 'object',
   UNKNOWN: 'object',
 };

package/src/state/EditableTable/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { Translate } from '@wix/bex-core';
+import type { Translate, ValidationRule } from '@wix/bex-core';
 import type { RichTextStyleVariables } from '@wix/patterns-fields';
 import type { TableColumn } from '../../model/tableColumn';
 import type { ReferenceTypeConfig } from '../../components/EditableTable/cellTypes/reference/types';
@@ -26,17 +26,7 @@ export interface CellBorder {
   right: boolean;
 }
 
-export type ValidationRule =
-  | { type: 'required'; message: string }
-  | { type: 'min' | 'max'; value: number; message: string }
-  | { type: 'minLength' | 'maxLength'; value: number; message: string }
-  | { type: 'pattern'; value: RegExp; message: string }
-  | { type: 'custom'; validate: (value: unknown) => boolean; message: string }
-  | {
-      type: 'specificValues';
-      values: { id: string; value: string }[];
-      message: string;
-    };
+export type { ValidationRule } from '@wix/bex-core';
 
 export interface ValidationResult {
   valid: boolean;
@@ -144,6 +134,11 @@ export interface CellTypeConfigMap {
   reference: ReferenceTypeConfig;
   multiReference: ReferenceTypeConfig;
   address: AddressCellTypeConfig;
+  /** An inline custom cell: the full cell contract minus the registry key.
+   *  Authorable directly on a column (`cellType: 'custom'` + `typeConfig`),
+   *  and also produced by the column builder when a schema field's type
+   *  definition (registered via the source's `fieldTypes`) has an
+   *  `editableTable` slot. */
   custom: Omit<CellType, 'type'>;
 }
 

package/src/state/EntityPage/EntityPageState.ts

@@ -8,10 +8,14 @@ import {
   Schema,
 } from '@wix/bex-core';
 import { action, computed, makeObservable, observable } from 'mobx';
+import type { PatternsFieldsAppContainer } from '@wix/patterns-fields/providers';
+import { fieldsContainerOf } from '../../model/schemaFieldsContainer';
 import { FieldValues, UseFormReturn } from 'react-hook-form';
 import { EntityPageStateBIReporter } from './EntityPageStateBIReporter';
 import { EventEmitter, TypedEmitter } from '@wix/bex-core/events';
 import { WixPatternsRouterState } from '../WixPatternsRouterState';
+import type { SidePanelsState } from '../SidePanelsState';
+import type { CustomColumnsEntityPageState } from '../CustomColumnsEntityPageState';
 
 type OnSaveParams = {
   widgetsFormData: { [key: string]: any };
@@ -125,8 +129,32 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
 
   actionsBarConfig?: EntityPageStateParams<T>['actionsBarConfig'];
 
+  /**
+   * The page's side-panel host, the way a table's lives on its toolbar.
+   * Attached by the first feature that needs one, through
+   * `SidePanelsState.setOnPage` — so a page with no panels neither builds nor
+   * bundles the side-panel code. Everything on the page shares this host, which
+   * is what keeps one panel open at a time.
+   */
+  panels: SidePanelsState | null = null;
+
+  /** The fields card's "Manage fields" state, set by the card that owns it —
+   *  the panel is rendered by the host with no props and reads it from here,
+   *  as a table's panel reads `toolbar.customColumnsState`. */
+  customColumnsState: CustomColumnsEntityPageState | null = null;
+
   readonly schemaSource?: SchemaSource<T>;
 
+  /**
+   * The container the page's field renderers are built with — the one the schema
+   * carries, so a table on the same schema shares it. Initialized in `init()`
+   * below, next to the schema load the fields also wait on; the schema-entry
+   * EntityPage puts it in React context.
+   */
+  get fieldsContainer(): PatternsFieldsAppContainer | undefined {
+    return fieldsContainerOf(this.schemaSource);
+  }
+
   readonly container: WixPatternsContainer;
   readonly reportBI: ReportBI;
   readonly bi: EntityPageStateBIReporter<T, V>;
@@ -178,6 +206,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       setEntity: action,
       _schema: observable.ref,
       setSchema: action,
+      customColumnsState: observable.ref,
       isFormDirty: computed,
       _withinRouter: computed,
     });
@@ -212,14 +241,24 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     );
 
     initTask.runOnce(async () => {
+      // The field renderers can't translate until this resolves, so the page
+      // waits on it alongside the fetch. Idempotent.
+      this.fieldsContainer?.init();
+
       const [data, loadedSchema] = await Promise.all([
         this.fetch(),
         this.schemaSource?.loadSchema(),
         container.initTask.status.promise,
+        this.fieldsContainer?.initTask.status.promise,
       ]);
 
       this.setEntity(data.entity ?? null);
-      if (loadedSchema) {
+      // Don't overwrite a schema something already set. A fields card mirrors the
+      // schema its field mutations merge into, and `loadSchema` is memoized — so
+      // setting it here again would put the pre-mutation fields map back and drop
+      // a field the server already has. Nothing is lost by keeping the newer one:
+      // this only ever re-sets the very same object (e.g. on `retryFetch`).
+      if (loadedSchema && !this.schema) {
         this.setSchema(loadedSchema.schema);
       }
       this.bi.appLoaded?.();

package/src/state/EntityPage/resolveEntityPageFields.ts

@@ -0,0 +1,25 @@
+import type { Field } from '@wix/bex-core';
+
+/** The fields an entity page renders: the given ids, or every editable schema
+ *  field. Lives here so the fields component and the card that wraps it offer
+ *  the same list. */
+export function resolveEntityPageFields(
+  fields: Record<string, Field | undefined>,
+  idField: string,
+  fieldIds?: string[],
+): Field[] {
+  // An explicit fieldIds list is taken as-is — the consumer chose those fields.
+  if (fieldIds) {
+    return fieldIds
+      .map((id) => fields[id])
+      .filter((field): field is Field => Boolean(field));
+  }
+
+  // By default, skip the id field and system fields (e.g. `_id`, `_manualSort`,
+  // `_createdDate`): they are not user-editable, and rendering a required one
+  // would silently block save (react-hook-form marks the form invalid).
+  return Object.values(fields).filter(
+    (field): field is Field =>
+      Boolean(field) && !field!.isSystem && field!.id !== idField,
+  );
+}

package/src/state/EntityPageFieldsCardState.ts

@@ -0,0 +1,193 @@
+import { computed, makeObservable, reaction } from 'mobx';
+import {
+  addEventListener,
+  SourceState,
+  TaskState,
+  type Schema,
+  type WixPatternsContainer,
+} from '@wix/bex-core';
+import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
+import { resolveEntityPageFields } from './EntityPage/resolveEntityPageFields';
+import type { EntityPageState } from './EntityPage/EntityPageState';
+import { SchemaCardState } from './SchemaCard/SchemaCardState';
+import type { SchemaViewConfig } from './SchemaCard/SchemaFieldsState';
+import type { ManageFieldsSource } from './ManageFieldsSource';
+import { CustomColumnsEntityPageState } from './CustomColumnsEntityPageState';
+
+export interface EntityPageFieldsCardStateParams {
+  pageState: EntityPageState<any, any>;
+  container: WixPatternsContainer;
+  /** Namespace the per-user show/hide and order are stored under. */
+  persistencyKey: string;
+  /** Field ids to offer, in order. Omitted ⇒ every editable schema field. */
+  fieldIds?: string[];
+  /** Whether to build the manage-fields panel. Default: `true`. */
+  showManageFields?: boolean;
+  /** Passed in rather than imported so this stays free of component imports. */
+  dragAndDrop?: typeof CustomColumnsDragAndDrop;
+  /** Builds add / edit / delete field over the page's source. Passed in for the
+   *  same reason as `dragAndDrop`. Omitted ⇒ the panel only shows and reorders. */
+  fieldManagement?: (params: {
+    sourceState: SourceState<any>;
+    closeSidePanel: () => void;
+  }) => ManageFieldsSource;
+  modalsContainerRef: {
+    current: HTMLElement | null | undefined;
+  };
+}
+
+/**
+ * Owns the card's field layout: which of the page's schema fields are visible
+ * and in what order, plus the panel that edits them.
+ *
+ * The schema loads after this state is created, so `init()` awaits the source's
+ * load and everything below reads the result through computeds — the states are
+ * built once, on the first render, and fill in when the schema arrives.
+ */
+export class EntityPageFieldsCardState {
+  readonly cardState: SchemaCardState;
+  readonly panelState?: CustomColumnsEntityPageState;
+  /** Holds the loaded schema for the card. The page loads the same (memoized)
+   *  schema into its own copy; this one is also what the field mutations merge
+   *  their result into, so an added or renamed field shows up with no reload. */
+  readonly sourceState?: SourceState<any>;
+  /** Add / edit / delete field, when the page has a source and the panel is on. */
+  readonly manageFieldsSource?: ManageFieldsSource;
+  /** The source's schema load. Owned here rather than read off the page state,
+   *  because this state's `init()` runs before the page's (child effects run
+   *  first) and the stored layout must not be read before the fields exist. */
+  readonly loadTask = new TaskState();
+  private readonly params: EntityPageFieldsCardStateParams;
+
+  constructor(params: EntityPageFieldsCardStateParams) {
+    this.params = params;
+
+    makeObservable(this, {
+      schema: computed,
+      declaredFields: computed,
+      visibleFieldIds: computed,
+      canManageFields: computed,
+    });
+
+    const { schemaSource } = params.pageState;
+    this.sourceState = schemaSource
+      ? new SourceState({ container: params.container, source: schemaSource })
+      : undefined;
+
+    this.cardState = new SchemaCardState({
+      fields: () => this.declaredFields,
+      persistencyKey: params.persistencyKey,
+      container: params.container,
+    });
+
+    const { panels } = params.pageState;
+
+    if ((params.showManageFields ?? true) && panels) {
+      this.manageFieldsSource =
+        this.sourceState &&
+        params.fieldManagement?.({
+          sourceState: this.sourceState,
+          closeSidePanel: panels.closeSidePanel,
+        });
+      this.panelState = new CustomColumnsEntityPageState({
+        container: params.container,
+        // The page's host, so this panel and anything else on the page take
+        // turns rather than stacking.
+        panels,
+        // Namespaces the panel's column collection, the way a table's is
+        // namespaced by its collection.
+        collectionId: params.pageState.schemaSource?.collectionId,
+        fieldsState: this.cardState.fieldsState,
+        schema: () => this.schema,
+        manageFieldsSource: this.manageFieldsSource,
+        isFieldsEditable: true,
+        showFieldTypeIcons: true,
+        dragAndDrop: params.dragAndDrop,
+        modalsContainerRef: params.modalsContainerRef,
+      });
+
+      // Where the registered panel reads it from — it renders with no props.
+      params.pageState.customColumnsState = this.panelState;
+    }
+  }
+
+  /** The page's schema, or this state's own copy until the page has one — this
+   *  load resolves first, since the page also waits for the entity fetch. They
+   *  are the same object (the source memoizes its load), and after a field
+   *  mutation the page holds the merged one, which `init` mirrors to it. */
+  get schema(): Schema | null {
+    return this.params.pageState.schema ?? this.sourceState?.schema ?? null;
+  }
+
+  /** The fields the card offers — empty until the schema loads. A required
+   *  field is not hideable: hiding it would leave the form invalid with nothing
+   *  on screen to fix. */
+  get declaredFields(): SchemaViewConfig[] {
+    const { schema } = this;
+    if (!schema) {
+      return [];
+    }
+    return resolveEntityPageFields(
+      schema.fields,
+      schema.idField,
+      this.params.fieldIds,
+    ).map((field) => ({
+      id: field.id,
+      hideable: !field.validation?.required,
+    }));
+  }
+
+  /** What the card renders. Before the schema loads this is whatever the card
+   *  was asked for, which is also what the fields show a skeleton for. */
+  get visibleFieldIds(): string[] | undefined {
+    if (!this.declaredFields.length) {
+      return this.params.fieldIds;
+    }
+    const { fieldsState } = this.cardState;
+    return fieldsState.orderedFields
+      .filter((field) => fieldsState.isFieldVisible(field.id))
+      .map((field) => field.id);
+  }
+
+  get canManageFields(): boolean {
+    return !!this.panelState && this.declaredFields.length > 0;
+  }
+
+  openManageFields() {
+    this.panelState?.panels.toggleSidePanel('customColumns');
+  }
+
+  init() {
+    // `loadSchema` is memoized on the source, so this shares the one fetch the
+    // page and the collection already make.
+    this.loadTask.runOnce(async () => {
+      await this.sourceState?.load();
+    });
+    // The card renders its fields regardless; a failed load leaves the page
+    // itself showing the error.
+    this.loadTask.status.promise?.catch(() => null);
+
+    const disposers: (void | (() => void))[] = [
+      // Hold the stored-layout read until the schema is in, so a saved
+      // show/hide and order survives a reload. Registered before the card
+      // state's init below, which is what collects the listeners.
+      addEventListener(
+        this.cardState.fieldsState.events,
+        'beforeInitialFetch',
+        () => this.loadTask.status.promise?.catch(() => {}),
+      ),
+      // A field added, edited or deleted from the panel merges into this
+      // state's schema. The page renders its fields from its own copy, so give
+      // it the merged one — otherwise the change only shows after a reload.
+      reaction(
+        () => this.sourceState?.schema,
+        (schema) => schema && this.params.pageState.setSchema(schema),
+      ),
+      this.cardState.init(),
+    ];
+
+    return () => {
+      disposers.forEach((dispose) => dispose?.());
+    };
+  }
+}