@wix/patterns 1.468.0 → 1.470.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2962708343";
+var _namespace_ = "Edit2079910613";
 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":"Edit2962708343__root","half":"Edit2962708343__half","dateHalf":"Edit2962708343__dateHalf Edit2962708343__half","timeHalf":"Edit2962708343__timeHalf Edit2962708343__half","divider":"Edit2962708343__divider","passiveText":"Edit2962708343__passiveText","placeholderText":"Edit2962708343__placeholderText Edit2962708343__passiveText"};
+export var classes = {"root":"Edit2079910613__root","half":"Edit2079910613__half","dateHalf":"Edit2079910613__dateHalf Edit2079910613__half","timeHalf":"Edit2079910613__timeHalf Edit2079910613__half","divider":"Edit2079910613__divider","passiveText":"Edit2079910613__passiveText","placeholderText":"Edit2079910613__placeholderText Edit2079910613__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2330499855";
+var _namespace_ = "View2038921840";
 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":"View2330499855__root","leaf":"View2330499855__leaf","datePart":"View2330499855__datePart View2330499855__leaf","timePart":"View2330499855__timePart View2330499855__leaf","placeholder":"View2330499855__placeholder View2330499855__leaf","divider":"View2330499855__divider"};
+export var classes = {"root":"View2038921840__root","leaf":"View2038921840__leaf","datePart":"View2038921840__datePart View2038921840__leaf","timePart":"View2038921840__timePart View2038921840__leaf","placeholder":"View2038921840__placeholder View2038921840__leaf","divider":"View2038921840__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3828404961";
+var _namespace_ = "Edit554810667";
 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":"Edit3828404961__root","emailInput":"Edit3828404961__emailInput"};
+export var classes = {"root":"Edit554810667__root","emailInput":"Edit554810667__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit222370521";
+var _namespace_ = "Edit166793133";
 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":"Edit222370521__root","numberInput":"Edit222370521__numberInput"};
+export var classes = {"root":"Edit166793133__root","numberInput":"Edit166793133__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View222058160";
+var _namespace_ = "View2181295351";
 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":"View222058160__root","textView":"View222058160__textView"};
+export var classes = {"root":"View2181295351__root","textView":"View2181295351__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1325328982";
+var _namespace_ = "Edit48804743";
 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":"Edit1325328982__root","jsonInput":"Edit1325328982__jsonInput"};
+export var classes = {"root":"Edit48804743__root","jsonInput":"Edit48804743__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1598171467";
+var _namespace_ = "Edit1710201859";
 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":"Edit1598171467__root","selectInput":"Edit1598171467__selectInput"};
+export var classes = {"root":"Edit1710201859__root","selectInput":"Edit1710201859__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit243497837";
+var _namespace_ = "Edit1774410782";
 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":"Edit243497837__root","editWrapper":"Edit243497837__editWrapper","inputArea":"Edit243497837__inputArea"};
+export var classes = {"root":"Edit1774410782__root","editWrapper":"Edit1774410782__editWrapper","inputArea":"Edit1774410782__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3875448302";
+var _namespace_ = "Edit3138156806";
 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":"Edit3875448302__root","wrapper":"Edit3875448302__wrapper","overlay":"Edit3875448302__overlay"};
+export var classes = {"root":"Edit3138156806__root","wrapper":"Edit3138156806__wrapper","overlay":"Edit3138156806__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2808291241";
+var _namespace_ = "Edit2209840079";
 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":"Edit2808291241__root","urlInput":"Edit2808291241__urlInput"};
+export var classes = {"root":"Edit2209840079__root","urlInput":"Edit2209840079__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1242253653";
+var _namespace_ = "View3043994015";
 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":"View1242253653__root","textView":"View1242253653__textView","urlText":"View1242253653__urlText","suffix":"View1242253653__suffix"};
+export var classes = {"root":"View3043994015__root","textView":"View3043994015__textView","urlText":"View3043994015__urlText","suffix":"View3043994015__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

package/src/components/EntityPageFields/EntityPageField.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import { Box, Text } from '@wix/design-system';
+import { Box, FormField, Text } from '@wix/design-system';
 import type {
   Field,
   FieldTypeDefinition,
@@ -7,7 +7,9 @@ import type {
 } from '@wix/bex-core';
 import { isReferenceField } from '@wix/bex-core';
 import type { Control } from '@wix/bex-core/form';
+import { FieldCell } from '../FieldCell/FieldCell';
 import { EntityPageReferenceField } from './EntityPageReferenceField';
+import { EntityPageReferenceValue } from './EntityPageReferenceValue';
 import { EntityPageCustomField } from './EntityPageCustomField';
 import {
   FormShortText,
@@ -106,6 +108,8 @@ const FIELD_INPUTS: Record<
 
 export interface EntityPageFieldProps {
   field: Field;
+  /** Value only: no input, and not registered in the form. */
+  readOnly?: boolean;
   formControl: Control<any>;
   /** The entity, used by each renderer to seed its form default value. */
   data: Record<string, unknown>;
@@ -119,10 +123,41 @@ export interface EntityPageFieldProps {
 // EntityPageCustomField instead.
 export function EntityPageField({
   field,
+  readOnly = false,
   formControl,
   data,
   definition,
 }: EntityPageFieldProps) {
+  if (readOnly) {
+    return (
+      <FieldRow field={field}>
+        <FormField
+          label={field.displayName}
+          dataHook={`entity-page-field-${field.id}`}
+        >
+          <Box
+            minHeight="36px"
+            verticalAlign="middle"
+            dataHook={`entity-page-field-${field.id}-value`}
+          >
+            {isReferenceField(field) ? (
+              <EntityPageReferenceValue field={field} value={data[field.id]} />
+            ) : (
+              <FieldCell
+                value={data[field.id]}
+                type={field.type}
+                fieldId={field.id}
+                columnId={field.id}
+                row={data}
+                definition={definition}
+              />
+            )}
+          </Box>
+        </FormField>
+      </FieldRow>
+    );
+  }
+
   // Reference fields need referenced-collection data, so they go through a
   // wrapper (resolves the referenced source, fetches items) rather than the
   // uniform dispatcher below.
@@ -171,9 +206,19 @@ export function EntityPageField({
     />
   );
 
+  return <FieldRow field={field}>{inner}</FieldRow>;
+}
+
+function FieldRow({
+  field,
+  children,
+}: {
+  field: Field;
+  children: React.ReactNode;
+}) {
   return (
     <Box direction="vertical" gap="SP1" width="100%">
-      {inner}
+      {children}
       {field.helpText && (
         <Text
           size="small"

package/src/components/EntityPageFields/EntityPageFields.tsx

@@ -9,7 +9,10 @@ import { observer } from 'mobx-react-lite';
 import { resolveFieldTypeDefinition } from '@wix/bex-core';
 import { usePatternsCmsFieldsContainer } from '@wix/patterns-fields/providers';
 import { useEntityPageContext } from '../../providers';
-import { resolveEntityPageFields } from '../../state/EntityPage/resolveEntityPageFields';
+import {
+  isEntityPageReadOnlyField,
+  resolveEntityPageFields,
+} from '../../state/EntityPage/resolveEntityPageFields';
 import { EntityPageField } from './EntityPageField';
 
 export interface EntityPageFieldsProps {
@@ -48,11 +51,7 @@ function _EntityPageFields({
     return <FieldsSkeleton count={fieldIds?.length} />;
   }
 
-  const fields = resolveEntityPageFields(
-    schema.fields,
-    schema.idField,
-    fieldIds,
-  );
+  const fields = resolveEntityPageFields(schema.fields, fieldIds);
   const data = (state.entity ?? {}) as Record<string, unknown>;
 
   return (
@@ -61,6 +60,7 @@ function _EntityPageFields({
         <EntityPageField
           key={field.id}
           field={field}
+          readOnly={isEntityPageReadOnlyField(field, schema.idField)}
           formControl={state.form.control}
           data={data}
           definition={resolveFieldTypeDefinition(

package/src/components/EntityPageFields/EntityPageReferenceField.tsx

@@ -1,24 +1,17 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { observer } from 'mobx-react-lite';
 import { sourceFetchData } from '@wix/bex-core';
-import type { BaseReferenceField, Field, Schema } from '@wix/bex-core';
+import type { Field } from '@wix/bex-core';
 import type { Control } from '@wix/bex-core/form';
 import { useCollection } from '@wix/bex-core/react';
 import { FormReference, FormMultiReference } from '@wix/patterns-fields';
-import {
-  FilterTranslationProvider,
-  useEntityPageContext,
-} from '../../providers';
+import { FilterTranslationProvider } from '../../providers';
 import { useFilterCollectionStates } from '../../hooks/useFilterCollectionStates';
 import { useOpenCollectionOverlay } from '../../hooks/useOpenCollectionOverlay';
+import { imageFieldOf, useReferencedSchema } from './useReferencedSchema';
 
 type RefRow = Record<string, unknown>;
 
-const imageFieldOf = (
-  fields: Schema['fields'] | undefined,
-): string | undefined =>
-  Object.entries(fields ?? {}).find(([, f]) => f?.type === 'IMAGE')?.[0];
-
 export interface EntityPageReferenceFieldProps {
   field: Field;
   formControl: Control<any>;
@@ -34,21 +27,7 @@ function _EntityPageReferenceField({
   formControl,
   data,
 }: EntityPageReferenceFieldProps) {
-  const state = useEntityPageContext();
-  const referencedCollectionId = (field as BaseReferenceField).referenceMetadata
-    ?.referencedCollectionId;
-  const refSource = useMemo(() => {
-    if (!referencedCollectionId) {
-      return undefined;
-    }
-
-    return (
-      state.schemaSource?.references?.[referencedCollectionId] ??
-      state.schemaSource?.getReferencedCollectionSource?.(
-        referencedCollectionId,
-      )
-    );
-  }, [referencedCollectionId, state.schemaSource]);
+  const { refSource, refSchema } = useReferencedSchema(field);
 
   const collection = useCollection<RefRow>(
     refSource
@@ -70,19 +49,6 @@ function _EntityPageReferenceField({
 
   useEffect(() => collection.init(), [collection]);
 
-  const [refSchema, setRefSchema] = useState<Schema | null>(null);
-  useEffect(() => {
-    let active = true;
-    refSource?.loadSchema().then((loaded) => {
-      if (active) {
-        setRefSchema(loaded.schema);
-      }
-    });
-    return () => {
-      active = false;
-    };
-  }, [refSource]);
-
   const idField = refSchema?.idField;
   const displayField = refSchema?.displayField;
   const imageField = imageFieldOf(refSchema?.fields);

package/src/components/EntityPageFields/EntityPageReferenceValue.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import type { Field } from '@wix/bex-core';
+import {
+  CellMultiReferenceView,
+  CellReferenceView,
+} from '@wix/patterns-fields';
+import { imageFieldOf, useReferencedSchema } from './useReferencedSchema';
+
+export interface EntityPageReferenceValueProps {
+  field: Field;
+  value: unknown;
+}
+
+/** A reference value with no picker: the referenced item's display field, as
+ *  the table's reference cell shows it. Empty until the referenced schema
+ *  resolves, since the label lives in a field only that schema names. */
+export function EntityPageReferenceValue({
+  field,
+  value,
+}: EntityPageReferenceValueProps) {
+  const { refSchema } = useReferencedSchema(field);
+  if (!refSchema || value == null) {
+    return null;
+  }
+
+  const { displayField } = refSchema;
+  const imageField = imageFieldOf(refSchema.fields);
+  const labelOf = (item: unknown) => {
+    // A value that was never expanded (a bare id) has no label to show.
+    if (!item || typeof item !== 'object') {
+      return undefined;
+    }
+    const record = item as Record<string, unknown>;
+    return {
+      name: String(record[displayField] ?? ''),
+      image: imageField
+        ? (record[imageField] as string | undefined)
+        : undefined,
+    };
+  };
+
+  if (field.type === 'MULTI_REFERENCE') {
+    const items = (Array.isArray(value) ? value : []).flatMap((item, i) => {
+      const label = labelOf(item);
+      return label ? [{ id: `${field.id}-${i}`, ...label }] : [];
+    });
+    return items.length ? (
+      <CellMultiReferenceView
+        items={items}
+        fieldId={field.id}
+        dataHook="multi-reference-view"
+      />
+    ) : null;
+  }
+
+  const label = labelOf(value);
+  return label ? (
+    <CellReferenceView
+      name={label.name}
+      imageUrl={label.image}
+      dataHook="reference-view"
+    />
+  ) : null;
+}

package/src/components/EntityPageFields/useReferencedSchema.ts

@@ -0,0 +1,42 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { BaseReferenceField, Field, Schema } from '@wix/bex-core';
+import { useEntityPageContext } from '../../providers';
+
+/** The source a reference field points at, and its schema once loaded. */
+export function useReferencedSchema(field: Field) {
+  const state = useEntityPageContext();
+  const referencedCollectionId = (field as BaseReferenceField).referenceMetadata
+    ?.referencedCollectionId;
+  const refSource = useMemo(() => {
+    if (!referencedCollectionId) {
+      return undefined;
+    }
+
+    return (
+      state.schemaSource?.references?.[referencedCollectionId] ??
+      state.schemaSource?.getReferencedCollectionSource?.(
+        referencedCollectionId,
+      )
+    );
+  }, [referencedCollectionId, state.schemaSource]);
+
+  const [refSchema, setRefSchema] = useState<Schema | null>(null);
+  useEffect(() => {
+    let active = true;
+    refSource?.loadSchema().then((loaded) => {
+      if (active) {
+        setRefSchema(loaded.schema);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [refSource]);
+
+  return { refSource, refSchema };
+}
+
+export const imageFieldOf = (
+  fields: Schema['fields'] | undefined,
+): string | undefined =>
+  Object.entries(fields ?? {}).find(([, f]) => f?.type === 'IMAGE')?.[0];

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

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

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

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