@wix/patterns 1.497.0 → 1.498.0

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1390594085";
+var _namespace_ = "PickerContentAdditionalStep19696875";
 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":"PickerContentAdditionalStep1390594085__root","titles":"PickerContentAdditionalStep1390594085__titles","suffix":"PickerContentAdditionalStep1390594085__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep19696875__root","titles":"PickerContentAdditionalStep19696875__titles","suffix":"PickerContentAdditionalStep19696875__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget652943968";
+var _namespace_ = "SetupWidget994892369";
 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":"SetupWidget652943968__root","row":"SetupWidget652943968__row","completedCta":"SetupWidget652943968__completedCta","secondaryCta":"SetupWidget652943968__secondaryCta","card":"SetupWidget652943968__card","stepIcon":"SetupWidget652943968__stepIcon","chevron":"SetupWidget652943968__chevron","chevronDisabled":"SetupWidget652943968__chevronDisabled","inProgressLabel":"SetupWidget652943968__inProgressLabel"};
+export var classes = {"root":"SetupWidget994892369__root","row":"SetupWidget994892369__row","completedCta":"SetupWidget994892369__completedCta","secondaryCta":"SetupWidget994892369__secondaryCta","card":"SetupWidget994892369__card","stepIcon":"SetupWidget994892369__stepIcon","chevron":"SetupWidget994892369__chevron","chevronDisabled":"SetupWidget994892369__chevronDisabled","inProgressLabel":"SetupWidget994892369__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3097408332";
+var _namespace_ = "SkeletonCard3316434517";
 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":"SkeletonCard3097408332__root","headerLoading":"SkeletonCard3097408332__headerLoading"};
+export var classes = {"root":"SkeletonCard3316434517__root","headerLoading":"SkeletonCard3316434517__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal1016288070";
+var _namespace_ = "SlidingModal1726289212";
 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":"SlidingModal1016288070__root"};
+export var classes = {"root":"SlidingModal1726289212__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_ = "AddFieldColumnHeader2726776838";
+var _namespace_ = "AddFieldColumnHeader261273616";
 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":"AddFieldColumnHeader2726776838__root","anchorLayer":"AddFieldColumnHeader2726776838__anchorLayer","popover":"AddFieldColumnHeader2726776838__popover","title":"AddFieldColumnHeader2726776838__title","hoverBridge":"AddFieldColumnHeader2726776838__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader261273616__root","anchorLayer":"AddFieldColumnHeader261273616__anchorLayer","popover":"AddFieldColumnHeader261273616__popover","title":"AddFieldColumnHeader261273616__title","hoverBridge":"AddFieldColumnHeader261273616__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NumberCell218915555";
+var _namespace_ = "NumberCell2337029218";
 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":"NumberCell218915555__root"};
+export var classes = {"root":"NumberCell2337029218__root"};
 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_ = "TabsFilter2577241363";
+var _namespace_ = "TabsFilter1483518244";
 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":"TabsFilter2577241363__root","titleBox":"TabsFilter2577241363__titleBox"};
+export var classes = {"root":"TabsFilter1483518244__root","titleBox":"TabsFilter1483518244__titleBox"};
 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_ = "ManageTagsModal1016869396";
+var _namespace_ = "ManageTagsModal1650527282";
 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":"ManageTagsModal1016869396__root"};
+export var classes = {"root":"ManageTagsModal1650527282__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem341992879";
+var _namespace_ = "ToolbarItem3191019945";
 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":"ToolbarItem341992879__root"};
+export var classes = {"root":"ToolbarItem3191019945__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_ = "ToolbarItemBox3308969475";
+var _namespace_ = "ToolbarItemBox2331186614";
 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":"ToolbarItemBox3308969475__root"};
+export var classes = {"root":"ToolbarItemBox2331186614__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_ = "common3814229212";
+var _namespace_ = "common2479329430";
 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":"common3814229212__root","column":"common3814229212__column","fullHeight":"common3814229212__fullHeight"};
+export var classes = {"root":"common2479329430__root","column":"common2479329430__column","fullHeight":"common2479329430__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/model/itemAccess.ts

@@ -0,0 +1,36 @@
+import type { CollectionBackend, ItemPermissions } from '@wix/bex-core';
+
+interface ItemActions {
+  create: boolean;
+  update: boolean;
+  delete: boolean;
+  bulkDelete: boolean;
+}
+
+export interface ItemAccess {
+  /** What the item permissions allow. An unset permission allows the action. */
+  permitted: ItemActions;
+  /** Which write methods the backend has. */
+  supported: ItemActions;
+}
+
+export function getItemAccess(
+  permissions: ItemPermissions<any> | undefined,
+  backend: CollectionBackend<any> | undefined,
+): ItemAccess {
+  return {
+    permitted: {
+      create: permissions?.createItem ?? true,
+      update: permissions?.updateItem ?? true,
+      delete: permissions?.deleteItem ?? true,
+      bulkDelete:
+        permissions?.bulkDeleteItems ?? permissions?.deleteItem ?? true,
+    },
+    supported: {
+      create: !!backend?.create,
+      update: !!backend?.update,
+      delete: !!backend?.delete,
+      bulkDelete: !!backend?.bulkDelete,
+    },
+  };
+}

package/src/schema/syncSourcePermissions.ts

@@ -1,6 +1,7 @@
 import { autorun } from 'mobx';
 import type { FiltersMap, SourceState } from '@wix/bex-core';
 import type { EditableTableState } from '../state/EditableTable';
+import { getItemAccess } from '../model/itemAccess';
 
 /**
  * Keeps an editable table's row-action flags in sync with its source: an action
@@ -19,15 +20,14 @@ export function syncSourcePermissions<T, F extends FiltersMap>(
     const perms = loaded?.schema.itemPermissions;
     const backend = loaded?.backend;
 
+    const { permitted, supported } = getItemAccess(perms, backend);
     const isRemoveItemDisabled = perms?.isRemoveItemDisabled;
 
     state.setPermissions({
-      addItemDisabled: !(perms?.createItem ?? true) || !backend?.create,
-      updateItemDisabled: !(perms?.updateItem ?? true) || !backend?.update,
-      removeItemDisabled: !(perms?.deleteItem ?? true) || !backend?.bulkDelete,
-      multiDeleteDisabled:
-        !(perms?.bulkDeleteItems ?? perms?.deleteItem ?? true) ||
-        !backend?.bulkDelete,
+      addItemDisabled: !permitted.create || !supported.create,
+      updateItemDisabled: !permitted.update || !supported.update,
+      removeItemDisabled: !permitted.delete || !supported.bulkDelete,
+      multiDeleteDisabled: !permitted.bulkDelete || !supported.bulkDelete,
       isCreateItemDisabled: perms?.isCreateItemDisabled,
       isRemoveItemDisabled: isRemoveItemDisabled
         ? (item: T) => isRemoveItemDisabled(item as Record<string, unknown>)

package/src/schema/useEntityPage.ts

@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { observable, runInAction } from 'mobx';
 import type { FieldValues } from 'react-hook-form';
 import type { SchemaSource } from '@wix/bex-core';
 import type { EntityPageDeleteAction, EntityPageState } from '../state';
+import { markSourceSave } from '../state/EntityPage/sourceSave';
 import {
   useEntityPage as useOpenEntityPage,
   type UseEntityPageParams,
@@ -41,8 +43,19 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
   // The derived read and write need values that change or don't exist yet when
   // the state is created: the state itself (the save merges into the loaded
   // entity) and the latest entityId (a re-fetch should read the current one).
-  const [page] = useState<PageRef<T, V>>(() => ({}));
-  page.entityId = entityId;
+  // entityId is observable so the page's create/update permission follows it.
+  const [page] = useState(() =>
+    observable<PageRef<T, V>>(
+      { entityId, state: undefined },
+      { state: false },
+      { deep: false },
+    ),
+  );
+  useEffect(() => {
+    runInAction(() => {
+      page.entityId = entityId;
+    });
+  }, [page, entityId]);
 
   const state = useOpenEntityPage<T, V>({
     ...rest,
@@ -50,7 +63,7 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
     isNewEntity: () => !page.entityId,
     fetch:
       fetch ?? (() => fetchFromSource(source, page.entityId, createLocalItem)),
-    onSave: onSave ?? (() => saveToSource(source, page)),
+    onSave: onSave ?? markSourceSave(() => saveToSource(source, page)),
     deleteAction: resolveDeleteAction(page, deleteAction),
   } as UseEntityPageParams<T, V>);
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader3311006848";
+var _namespace_ = "CollectionPageHeader1248869590";
 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":"CollectionPageHeader3311006848__root","mobileMoreActions":"CollectionPageHeader3311006848__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader1248869590__root","mobileMoreActions":"CollectionPageHeader1248869590__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TitleBadges3914608263";
+var _namespace_ = "TitleBadges1421742939";
 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":"TitleBadges3914608263__root","tooltip":"TitleBadges3914608263__tooltip","tooltipTrigger":"TitleBadges3914608263__tooltipTrigger"};
+export var classes = {"root":"TitleBadges1421742939__root","tooltip":"TitleBadges1421742939__tooltip","tooltipTrigger":"TitleBadges1421742939__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EntityPage/EntityPageDeleteActionState.ts

@@ -6,6 +6,7 @@ import type {
   WixPatternsContainer,
 } from '@wix/bex-core';
 import { computed, makeObservable } from 'mobx';
+import { getItemAccess } from '../../model/itemAccess';
 
 type DeleteErrorToast = (
   err: unknown,
@@ -104,13 +105,14 @@ export class EntityPageDeleteActionState<T> {
   }
 
   get canShow() {
-    const itemPermissions = this.getLoadedSchema()?.schema.itemPermissions;
+    const loaded = this.getLoadedSchema();
     return (
       !!this.getEntity() &&
       !!this.config &&
       this.isEnabled &&
       !!this.getDeleteHandler() &&
-      (itemPermissions?.deleteItem ?? true)
+      getItemAccess(loaded?.schema.itemPermissions, loaded?.backend).permitted
+        .delete
     );
   }
 

package/src/state/EntityPage/EntityPageState.ts

@@ -21,6 +21,8 @@ import {
   EntityPageDeleteAction,
   EntityPageDeleteActionState,
 } from './EntityPageDeleteActionState';
+import { isSourceSave } from './sourceSave';
+import { getItemAccess } from '../../model/itemAccess';
 
 type OnSaveParams<T> = {
   widgetsFormData: { [key: string]: any };
@@ -124,11 +126,12 @@ interface EntityPageStateParamsBase<T, V extends FieldValues = FieldValues> {
 
   /**
    * Whether the page was opened to create a new entity rather than to edit an
-   * existing one. Decides how a save is announced to the parent page — created
-   * vs updated — so a new item seeded with local defaults is still announced
+   * existing one. Selects the create/update permission and how a save is
+   * announced to the parent page — created vs updated — so a seeded item is announced
    * as created. Pass a getter when the route can change while the page stays
-   * mounted. When omitted, the announcement follows whether an entity was
-   * loaded.
+   * mounted; the fields switch between create and update permissions only when
+   * the getter reads MobX observables. When omitted, the announcement follows
+   * whether an entity was loaded.
    */
   isNewEntity?: boolean | (() => boolean);
 
@@ -157,6 +160,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
 {
   readonly fetch: EntityPageStateParams<T>['fetch'];
   readonly onSave: EntityPageStateParams<T, V>['onSave'];
+  private readonly _usesSourceSave: boolean;
   readonly saveSuccessToast?: EntityPageStateParams<T>['saveSuccessToast'];
   readonly saveErrorToast?: EntityPageStateParams<T>['saveErrorToast'];
   readonly transformEntityToCollectionItem: (entity: T) => any;
@@ -220,6 +224,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
   constructor(params: EntityPageStateParams<T, V>) {
     this.fetch = params.fetch;
     this.onSave = params.onSave;
+    this._usesSourceSave = isSourceSave(params.onSave);
     this.saveSuccessToast = params.saveSuccessToast;
     this.saveErrorToast = params.saveErrorToast;
     this.formPage = new FormPageState<V>({ form: params.form });
@@ -279,6 +284,8 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       holdSave: action,
       isSaveHeld: computed,
       isFormDirty: computed,
+      areFieldsReadOnly: computed,
+      resolvedActionsBarConfig: computed,
       _withinRouter: computed,
     });
   }
@@ -408,6 +415,51 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     this.navigateToParent();
   }
 
+  get areFieldsReadOnly(): boolean {
+    const loaded = this.loadedSchema;
+    if (this.schemaSource && !loaded) {
+      return true;
+    }
+
+    const permissions = (loaded?.schema ?? this.schema)?.itemPermissions;
+    const { permitted, supported } = getItemAccess(
+      permissions,
+      loaded?.backend,
+    );
+    // A custom save doesn't go through the backend, so it needs no write method.
+    const requiresBackendWrite = this._usesSourceSave && !!loaded;
+    if (this._isExistingEntity) {
+      return !permitted.update || (requiresBackendWrite && !supported.update);
+    }
+
+    return (
+      !permitted.create ||
+      (requiresBackendWrite && !supported.create) ||
+      !!permissions?.isCreateItemDisabled?.().disabled
+    );
+  }
+
+  /** `actionsBarConfig` with Save and its secondary actions disabled while the
+   *  fields are read-only. */
+  get resolvedActionsBarConfig(): ActionsBarConfig | undefined {
+    const config = this.actionsBarConfig;
+    if (!this.areFieldsReadOnly) {
+      return config;
+    }
+
+    return {
+      ...config,
+      saveCta: {
+        ...config?.saveCta,
+        disabled: true,
+        secondaryActions: config?.saveCta?.secondaryActions?.map((item) => ({
+          ...item,
+          disabled: true,
+        })),
+      },
+    };
+  }
+
   private get _isExistingEntity(): boolean {
     const isNewEntity =
       typeof this._isNewEntity === 'function'
@@ -519,7 +571,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     if (
       this.formPage.submitTask.status.isLoading ||
       this.isSaveHeld ||
-      this.actionsBarConfig?.saveCta?.disabled
+      this.resolvedActionsBarConfig?.saveCta?.disabled
     ) {
       return;
     }
@@ -549,6 +601,10 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
 
       await form.handleSubmit(
         async () => {
+          // The permission can be revoked while the form validates.
+          if (this.areFieldsReadOnly) {
+            return;
+          }
           bi.reportButtonClick({
             ctaName: 'Save',
             isValid: true,

package/src/state/EntityPage/sourceSave.ts

@@ -0,0 +1,12 @@
+// Save handlers that write through the source backend. Kept here, outside the
+// public params, so consumers can't set or depend on it.
+const sourceSaveHandlers = new WeakSet<object>();
+
+export function markSourceSave<F extends object>(onSave: F): F {
+  sourceSaveHandlers.add(onSave);
+  return onSave;
+}
+
+export function isSourceSave(onSave: object): boolean {
+  return sourceSaveHandlers.has(onSave);
+}

package/src/state/FormPage/FormPageHeader.st.css.ts

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