@wix/patterns 1.431.0 → 1.432.0

package/src/components/SlidingModal/SlidingModal.st.css.ts

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

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader2583207661";
+var _namespace_ = "AddFieldColumnHeader2380146996";
 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":"AddFieldColumnHeader2583207661__root","title":"AddFieldColumnHeader2583207661__title","hoverBridge":"AddFieldColumnHeader2583207661__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader2380146996__root","title":"AddFieldColumnHeader2380146996__title","hoverBridge":"AddFieldColumnHeader2380146996__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3289214861";
+var _namespace_ = "TabsFilter773415960";
 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":"TabsFilter3289214861__root","title":"TabsFilter3289214861__title"};
+export var classes = {"root":"TabsFilter773415960__root","title":"TabsFilter773415960__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal3765695890";
+var _namespace_ = "ManageTagsModal3581084668";
 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":"ManageTagsModal3765695890__root"};
+export var classes = {"root":"ManageTagsModal3581084668__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarCollection/useToolbarCollectionSyncProps.ts

@@ -60,26 +60,27 @@ export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
   }, []);
 
   useEffect(() => {
-    reaction(
-      () => ({
-        scrollTop: state.scrollTopBeforeUnmount,
-        routerState: router?.currentState,
-      }),
-      ({ scrollTop, routerState }) => {
-        pageState.scrollTopBeforeUnmount = routerState?._createdEntity
-          ? 0
-          : scrollTop;
+    pageState.scrollTopBeforeUnmount = router?.currentState?._createdEntity
+      ? 0
+      : state.scrollTopBeforeUnmount;
+    // The offset belongs to a single trip back. The cached state outlives it,
+    // so leaving it set would restore it again on any later remount.
+    state.scrollTopBeforeUnmount = null;
+
+    return reaction(
+      () => router?.currentState,
+      (routerState) => {
+        if (!routerState?._chosenEntity) {
+          return;
+        }
+        // Reading it on unmount is too late: React detaches the page before
+        // effect cleanups run, and a detached element reports scrollTop 0.
+        const el = pageState.pageState.scrollableContentRef.current;
+        if (el) {
+          state.scrollTopBeforeUnmount = el.scrollTop;
+        }
       },
-      { fireImmediately: true },
     );
-
-    return () => {
-      const scrollTop =
-        pageState.pageState.scrollableContentRef.current?.scrollTop;
-      if (scrollTop !== undefined) {
-        state.scrollTopBeforeUnmount = scrollTop;
-      }
-    };
   }, []);
 
   const getIsUsingAllItemsView = () =>

package/src/components/ToolbarItem/ToolbarItem.st.css.ts

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

package/src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts

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

package/src/components/common.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2729451634";
+var _namespace_ = "common3243586050";
 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":"common2729451634__root","column":"common2729451634__column","fullHeight":"common2729451634__fullHeight"};
+export var classes = {"root":"common3243586050__root","column":"common3243586050__column","fullHeight":"common3243586050__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/schema/EntityPageFieldsCard.tsx

@@ -7,10 +7,14 @@ import {
   type EntityPageCardProps,
 } from '../components/EntityPageCard';
 import { EntityPageFields } from '../components/EntityPageFields';
-import { CustomColumnsEntityPagePanelMount } from '../components/CustomColumnsPanel/CustomColumnsEntityPagePanelMount';
+import { EntityPageColumnsPanelEntry } from '../components/EntityPage/EntityPageColumnsPanelEntry';
+import { EntityPageSidePanels } from '../components/EntityPage/EntityPageSidePanels';
 import { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
+import { FieldManagementModals } from '../components/CustomFieldsPanel/FieldManagementModals';
 import { useEntityPageContext } from '../providers';
 import { EntityPageFieldsCardState } from '../state/EntityPageFieldsCardState';
+import { SidePanelsState } from '../state/SidePanelsState';
+import { entityPageFieldManagement } from './entityPageFieldManagement';
 
 export interface EntityPageFieldsCardProps
   extends Omit<EntityPageCardProps, 'children'> {
@@ -24,8 +28,8 @@ export interface EntityPageFieldsCardProps
   fieldIds?: string[];
   /**
    * Namespace the per-user show/hide and order are stored under. Default: the
-   * source's collection id. Set it when a page has more than one fields card,
-   * so they don't share one saved layout.
+   * source's collection id — set it only to store the layout under a name of
+   * your own.
    */
   persistencyKey?: string;
   /** Whether to show the "Manage fields" button and panel. Default: `true`. */
@@ -34,8 +38,16 @@ export interface EntityPageFieldsCardProps
 }
 
 /** The page's schema fields in a card, with a "Manage fields" panel that shows,
- *  hides and reorders them. The choice is saved per user and survives reloads.
- *  Render inside the `EntityPage` from this entry. */
+ *  hides and reorders them, and adds, edits and deletes them. The choice is
+ *  saved per user and survives reloads. Render inside the `EntityPage` from this
+ *  entry.
+ *
+ *  One card per page. Field management is built per card, so on a second card
+ *  the rows of fields added from the first one render without their actions
+ *  menu — the row comes from the page's schema, the menu from the card's own
+ *  copy, which only the mutating card's copy gets merged into. Split the fields
+ *  across cards only when none of them manages fields (`showManageFields:
+ *  false`). */
 export function _EntityPageFieldsCard({
   title,
   subtitle,
@@ -50,6 +62,9 @@ export function _EntityPageFieldsCard({
   const { modalsContainerRef } = usePageContext();
   const pageState = useEntityPageContext();
 
+  // The page has no side-panel host until a feature needs one.
+  useState(() => SidePanelsState.setOnPage(pageState, container));
+
   const [state] = useState(
     () =>
       new EntityPageFieldsCardState({
@@ -65,12 +80,24 @@ export function _EntityPageFieldsCard({
         fieldIds,
         showManageFields,
         dragAndDrop: CustomColumnsDragAndDrop,
+        fieldManagement: entityPageFieldManagement,
         modalsContainerRef,
       }),
   );
 
   useEffect(() => state.init(), []);
 
+  useEffect(() => {
+    if (!state.panelState) {
+      return;
+    }
+
+    state.panelState.panels.registerSidePanel(
+      'customColumns',
+      EntityPageColumnsPanelEntry,
+    );
+  }, []);
+
   return (
     <EntityPageCard dataHook={dataHook} {...rest}>
       <Card.Header
@@ -93,8 +120,14 @@ export function _EntityPageFieldsCard({
       <Card.Content>
         <EntityPageFields fieldIds={state.visibleFieldIds} />
       </Card.Content>
+      {/* The host lives on the page, so a panel opened here closes any other.
+          Rendered by the card rather than the page, so a page without a fields
+          card never bundles the side-panel modal. */}
       {state.panelState && (
-        <CustomColumnsEntityPagePanelMount state={state.panelState} />
+        <EntityPageSidePanels panels={state.panelState.panels} />
+      )}
+      {state.manageFieldsSource && (
+        <FieldManagementModals source={state.manageFieldsSource} />
       )}
     </EntityPageCard>
   );

package/src/schema/entityPageFieldManagement.ts

@@ -0,0 +1,44 @@
+import type { SourceState } from '@wix/bex-core';
+import { SchemaState } from '../components/SchemaSource/SchemaState';
+import { createSchemaFieldActionsMenu } from '../components/SchemaSource/schemaFieldActions';
+import { CustomFieldsPanelState } from '../state/CustomFields/CustomFieldsPanelState';
+import type { ManageFieldsSource } from '../state/ManageFieldsSource';
+
+/**
+ * Add / edit / delete field for an entity page, over the page's source.
+ *
+ * A collection page gets the same thing from its toolbar's
+ * `CollectionFieldsSourceState`, which an entity page has no toolbar to build —
+ * so the two pieces that don't need one are assembled here: the source's
+ * FieldsSource and per-field menu (`SchemaState`), and the modals
+ * (`CustomFieldsPanelState`).
+ */
+export function entityPageFieldManagement({
+  sourceState,
+  closeSidePanel,
+}: {
+  sourceState: SourceState<any>;
+  closeSidePanel: () => void;
+}): ManageFieldsSource {
+  const schemaState = new SchemaState({ sourceState });
+  const { container } = sourceState;
+  const panel = new CustomFieldsPanelState({
+    fieldsSource: schemaState.fieldsSource,
+    container,
+    reportBi: container.reportBi,
+    closeSidePanel,
+    createFieldActionsMenu: createSchemaFieldActionsMenu(schemaState),
+  });
+
+  return {
+    fieldsSource: schemaState.fieldsSource,
+    customFieldsPanel: panel,
+    fieldActionsMenu: panel.fieldActionsMenu,
+    openFieldModal: (opts) =>
+      panel.openCustomFieldModal({
+        fieldId: opts?.fieldId,
+        origin: opts?.origin ?? 'external',
+        customOrigin: opts?.customOrigin,
+      }),
+  };
+}

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

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

package/src/state/CustomColumnsEntityPageState.ts

@@ -5,11 +5,12 @@ 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, 'fields'>;
+type SchemaFields = Pick<SchemaConfig, 'id' | 'fields'>;
 
 export interface CustomColumnsEntityPageStateParams {
   panels: SidePanelsState;
@@ -22,6 +23,12 @@ export interface CustomColumnsEntityPageStateParams {
   /** 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: {
@@ -35,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,
@@ -55,12 +65,20 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
   readonly _showFieldTypeIcons: boolean;
   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;
@@ -68,6 +86,7 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
     this._showFieldTypeIcons = params.showFieldTypeIcons ?? true;
     this._schema = params.schema;
     this._isFieldsEditable = params.isFieldsEditable ?? false;
+    this._manageFieldsSource = params.manageFieldsSource;
 
     if (params.dragAndDrop) {
       const { fieldsState } = params;
@@ -135,8 +154,8 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
     return this._isFieldsEditable;
   }
 
-  get collectionFieldsSource() {
-    return null;
+  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;
@@ -65,15 +65,13 @@ export abstract class CustomColumnsPanelStateBase<
 
   /** 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 `collectionFieldsSource` instead. */
+   *  management report it through `manageFieldsSource` instead. */
   get isFieldsEditable(): boolean {
     return false;
   }
 
-  abstract get collectionFieldsSource():
-    | CollectionFieldsSourceState
-    | null
-    | undefined;
+  /** 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/EntityPage/EntityPageState.ts

@@ -14,6 +14,8 @@ 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 };
@@ -127,6 +129,20 @@ 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>;
 
   /**
@@ -190,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,
     });
@@ -236,7 +253,12 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       ]);
 
       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/EntityPageFieldsCardState.ts

@@ -1,6 +1,7 @@
-import { computed, makeObservable, observable, runInAction } from 'mobx';
+import { computed, makeObservable, reaction } from 'mobx';
 import {
   addEventListener,
+  SourceState,
   TaskState,
   type Schema,
   type WixPatternsContainer,
@@ -10,7 +11,7 @@ import { resolveEntityPageFields } from './EntityPage/resolveEntityPageFields';
 import type { EntityPageState } from './EntityPage/EntityPageState';
 import { SchemaCardState } from './SchemaCard/SchemaCardState';
 import type { SchemaViewConfig } from './SchemaCard/SchemaFieldsState';
-import { SidePanelsState } from './SidePanelsState';
+import type { ManageFieldsSource } from './ManageFieldsSource';
 import { CustomColumnsEntityPageState } from './CustomColumnsEntityPageState';
 
 export interface EntityPageFieldsCardStateParams {
@@ -24,6 +25,12 @@ export interface EntityPageFieldsCardStateParams {
   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;
   };
@@ -40,51 +47,76 @@ export interface EntityPageFieldsCardStateParams {
 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();
-  _loadedSchema: Schema | null = null;
   private readonly params: EntityPageFieldsCardStateParams;
 
   constructor(params: EntityPageFieldsCardStateParams) {
     this.params = params;
 
     makeObservable(this, {
-      _loadedSchema: observable.ref,
       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,
     });
 
-    if (params.showManageFields ?? true) {
+    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,
-        panels: new SidePanelsState({
-          container: params.container,
-          panelGroupName: 'entity-page',
-        }),
+        // 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.params.pageState.schema,
+        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 same object the page ends up with: the source memoizes its load, so
-   *  both read one result. */
+  /** 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._loadedSchema ?? this.params.pageState.schema;
+    return this.params.pageState.schema ?? this.sourceState?.schema ?? null;
   }
 
   /** The fields the card offers — empty until the schema loads. A required
@@ -129,10 +161,7 @@ export class EntityPageFieldsCardState {
     // `loadSchema` is memoized on the source, so this shares the one fetch the
     // page and the collection already make.
     this.loadTask.runOnce(async () => {
-      const loaded = await this.params.pageState.schemaSource?.loadSchema();
-      runInAction(() => {
-        this._loadedSchema = loaded?.schema ?? null;
-      });
+      await this.sourceState?.load();
     });
     // The card renders its fields regardless; a failed load leaves the page
     // itself showing the error.
@@ -147,6 +176,13 @@ export class EntityPageFieldsCardState {
         '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(),
     ];