@wix/patterns 1.457.0 → 1.459.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar3581774753";
+var _namespace_ = "MultiBulkActionToolbar4143321214";
 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":"MultiBulkActionToolbar3581774753__root","leftGroupWrapper":"MultiBulkActionToolbar3581774753__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3581774753__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3581774753__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar4143321214__root","leftGroupWrapper":"MultiBulkActionToolbar4143321214__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4143321214__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4143321214__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow3048693504";
+var _namespace_ = "NestedTableRow804065443";
 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":"NestedTableRow3048693504__root","firstLevel":"NestedTableRow3048693504__firstLevel","placeholder":"NestedTableRow3048693504__placeholder","parentHovered":"NestedTableRow3048693504__parentHovered"};
+export var classes = {"root":"NestedTableRow804065443__root","firstLevel":"NestedTableRow804065443__firstLevel","placeholder":"NestedTableRow804065443__placeholder","parentHovered":"NestedTableRow804065443__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow2873480396";
+var _namespace_ = "NestedTableDragAndDropRow3821753114";
 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":"NestedTableDragAndDropRow2873480396__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3821753114__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_ = "PickerContent2632079926";
+var _namespace_ = "PickerContent977841126";
 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":"PickerContent2632079926__root"};
+export var classes = {"root":"PickerContent977841126__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_ = "PickerContentAdditionalStep870535493";
+var _namespace_ = "PickerContentAdditionalStep1119308602";
 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":"PickerContentAdditionalStep870535493__root","titles":"PickerContentAdditionalStep870535493__titles","suffix":"PickerContentAdditionalStep870535493__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1119308602__root","titles":"PickerContentAdditionalStep1119308602__titles","suffix":"PickerContentAdditionalStep1119308602__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_ = "PickerTableListItem2813035785";
+var _namespace_ = "PickerTableListItem21669858";
 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":"PickerTableListItem2813035785__root"};
+export var classes = {"root":"PickerTableListItem21669858__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -92,6 +92,9 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
   get loadSchema() {
     return this.source.loadSchema;
   }
+  get setLoadedSchema() {
+    return this.source.setLoadedSchema;
+  }
   get searchableFieldIds() {
     return this.source.searchableFieldIds;
   }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2077771115";
+var _namespace_ = "ScrollableContent3877718115";
 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":"ScrollableContent2077771115__root"};
+export var classes = {"root":"ScrollableContent3877718115__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_ = "SetupWidget604674153";
+var _namespace_ = "SetupWidget791057401";
 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":"SetupWidget604674153__root","row":"SetupWidget604674153__row","completedCta":"SetupWidget604674153__completedCta","secondaryCta":"SetupWidget604674153__secondaryCta","card":"SetupWidget604674153__card","stepIcon":"SetupWidget604674153__stepIcon","chevron":"SetupWidget604674153__chevron","chevronDisabled":"SetupWidget604674153__chevronDisabled","inProgressLabel":"SetupWidget604674153__inProgressLabel"};
+export var classes = {"root":"SetupWidget791057401__root","row":"SetupWidget791057401__row","completedCta":"SetupWidget791057401__completedCta","secondaryCta":"SetupWidget791057401__secondaryCta","card":"SetupWidget791057401__card","stepIcon":"SetupWidget791057401__stepIcon","chevron":"SetupWidget791057401__chevron","chevronDisabled":"SetupWidget791057401__chevronDisabled","inProgressLabel":"SetupWidget791057401__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_ = "SkeletonCard3138012566";
+var _namespace_ = "SkeletonCard471893276";
 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":"SkeletonCard3138012566__root","headerLoading":"SkeletonCard3138012566__headerLoading"};
+export var classes = {"root":"SkeletonCard471893276__root","headerLoading":"SkeletonCard471893276__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_ = "SlidingModal3873407384";
+var _namespace_ = "SlidingModal794633542";
 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":"SlidingModal3873407384__root"};
+export var classes = {"root":"SlidingModal794633542__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_ = "AddFieldColumnHeader2235869336";
+var _namespace_ = "AddFieldColumnHeader876236648";
 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":"AddFieldColumnHeader2235869336__root","title":"AddFieldColumnHeader2235869336__title","hoverBridge":"AddFieldColumnHeader2235869336__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader876236648__root","title":"AddFieldColumnHeader876236648__title","hoverBridge":"AddFieldColumnHeader876236648__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_ = "TabsFilter117233435";
+var _namespace_ = "TabsFilter3454262505";
 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":"TabsFilter117233435__root","titleBox":"TabsFilter117233435__titleBox"};
+export var classes = {"root":"TabsFilter3454262505__root","titleBox":"TabsFilter3454262505__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_ = "ManageTagsModal1977162256";
+var _namespace_ = "ManageTagsModal1689829860";
 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":"ManageTagsModal1977162256__root"};
+export var classes = {"root":"ManageTagsModal1689829860__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_ = "ToolbarItem960795410";
+var _namespace_ = "ToolbarItem3497653378";
 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":"ToolbarItem960795410__root"};
+export var classes = {"root":"ToolbarItem3497653378__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_ = "ToolbarItemBox838847532";
+var _namespace_ = "ToolbarItemBox666533163";
 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":"ToolbarItemBox838847532__root"};
+export var classes = {"root":"ToolbarItemBox666533163__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_ = "common3400277255";
+var _namespace_ = "common4250463703";
 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":"common3400277255__root","column":"common3400277255__column","fullHeight":"common3400277255__fullHeight"};
+export var classes = {"root":"common4250463703__root","column":"common4250463703__column","fullHeight":"common4250463703__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/dashboard/WixPatternsDashboardBaseProvider.tsx

@@ -67,7 +67,7 @@ export function WixPatternsDashboardBaseProvider({
     try {
       biLogger = bi.getLogger();
     } catch (error) {
-      console.error(error);
+      console.warn(error);
     }
 
     return {

package/src/schema/EntityPageFieldsCard.tsx

@@ -118,7 +118,10 @@ export function _EntityPageFieldsCard({
       />
       <Card.Divider />
       <Card.Content>
-        <EntityPageFields fieldIds={state.visibleFieldIds} />
+        <EntityPageFields
+          fieldIds={state.visibleFieldIds}
+          loading={!state.isLayoutReady}
+        />
       </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

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

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

package/src/state/EntityPage/EntityPageState.ts

@@ -180,6 +180,10 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
    *  as a table's panel reads `toolbar.customColumnsState`. */
   customColumnsState: CustomColumnsEntityPageState | null = null;
 
+  // Shallow: a deep set would wrap the token objects, and release could not
+  // find them again.
+  private readonly _saveHolds = observable.set<object>([], { deep: false });
+
   readonly schemaSource?: SchemaSource<T>;
 
   /**
@@ -264,6 +268,8 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       _loadedSchema: observable.ref,
       setLoadedSchema: action,
       customColumnsState: observable.ref,
+      holdSave: action,
+      isSaveHeld: computed,
       isFormDirty: computed,
       _withinRouter: computed,
     });
@@ -310,12 +316,10 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
       ]);
 
       this.setEntity(data.entity ?? null);
-      this.setLoadedSchema(loadedSchema ?? null);
-      // 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`).
+      // A fields card can mirror a newer value while these promises settle.
+      if (loadedSchema && !this.loadedSchema) {
+        this.setLoadedSchema(loadedSchema);
+      }
       if (loadedSchema && !this.schema) {
         this.setSchema(loadedSchema.schema);
       }
@@ -477,8 +481,26 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     this.navigateToParentWithState({ _deletedEntity: deletedCollectionItem });
   }
 
+  /**
+   * Blocks `handleSubmit` until the returned release is called (idempotent).
+   * For features whose form fields are not mounted yet — react-hook-form only
+   * validates mounted controls, so a save in that window would skip their
+   * required-field validation.
+   */
+  holdSave(): () => void {
+    const hold = {};
+    this._saveHolds.add(hold);
+    return action(() => {
+      this._saveHolds.delete(hold);
+    });
+  }
+
+  get isSaveHeld(): boolean {
+    return this._saveHolds.size > 0;
+  }
+
   async handleSubmit(e?: React.BaseSyntheticEvent) {
-    if (this.formPage.submitTask.status.isLoading) {
+    if (this.formPage.submitTask.status.isLoading || this.isSaveHeld) {
       return;
     }
 

package/src/state/EntityPageFieldsCardState.ts

@@ -1,4 +1,4 @@
-import { computed, makeObservable, reaction } from 'mobx';
+import { computed, makeObservable, reaction, when } from 'mobx';
 import {
   addEventListener,
   SourceState,
@@ -66,6 +66,7 @@ export class EntityPageFieldsCardState {
       schema: computed,
       declaredFields: computed,
       visibleFieldIds: computed,
+      isLayoutReady: computed,
       canManageFields: computed,
     });
 
@@ -149,6 +150,11 @@ export class EntityPageFieldsCardState {
       .map((field) => field.id);
   }
 
+  get isLayoutReady(): boolean {
+    const { status } = this.cardState.fieldsState.initTask;
+    return status.isSuccess || status.isError;
+  }
+
   get canManageFields(): boolean {
     return !!this.panelState && this.declaredFields.length > 0;
   }
@@ -167,7 +173,11 @@ export class EntityPageFieldsCardState {
     // itself showing the error.
     this.loadTask.status.promise?.catch(() => null);
 
+    const releaseSaveHold = this.params.pageState.holdSave();
+
     const disposers: (void | (() => void))[] = [
+      when(() => this.isLayoutReady, releaseSaveHold),
+      releaseSaveHold,
       // 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.
@@ -176,12 +186,17 @@ 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.
+      // A field mutation replaces this state's loaded schema. The page keeps
+      // its own copy, so update both public views of it together.
       reaction(
-        () => this.sourceState?.schema,
-        (schema) => schema && this.params.pageState.setSchema(schema),
+        () => this.sourceState?.loadedSchema,
+        (loadedSchema) => {
+          if (!loadedSchema) {
+            return;
+          }
+          this.params.pageState.setLoadedSchema(loadedSchema);
+          this.params.pageState.setSchema(loadedSchema.schema);
+        },
       ),
       this.cardState.init(),
     ];

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

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