@strato-admin/cloudscape 0.1.1 → 0.3.0

package/src/field/ReferenceManyField.test.tsx

@@ -1,22 +1,39 @@
-
 import React from 'react';
 import { render, screen, cleanup } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
 import ReferenceManyField from './ReferenceManyField';
+import Table from '../list/Table';
 
-// Mock ra-core (via strato-core)
+// Mock ra-core
+vi.mock('@strato-admin/ra-core', () => ({
+  ReferenceManyFieldBase: vi.fn(({ children }: any) => (
+    <div data-testid="ra-reference-many-field-base">{children}</div>
+  )),
+  ResourceContextProvider: ({ children }: any) => <div data-testid="resource-context-provider">{children}</div>,
+}));
+
+// Mock strato-core
 vi.mock('@strato-admin/core', () => ({
-  ReferenceManyFieldBase: vi.fn(({ children }: any) => <div data-testid="ra-reference-many-field-base">{children}</div>),
   ResourceSchemaProvider: vi.fn(({ children }: any) => <div data-testid="resource-schema-provider">{children}</div>),
-  ResourceContextProvider: ({ children }: any) => <div data-testid="resource-context-provider">{children}</div>,
+  useResourceSchema: vi.fn((resource: string) => ({
+    listComponent: resource === 'with-custom-list' ? MockCustomList : undefined,
+  })),
 }));
 
+// Mock Table
+vi.mock('../list/Table', () => ({
+  default: vi.fn(({ title }: any) => <div data-testid="default-table">{title}</div>),
+}));
+
+const MockCustomList = vi.fn(({ title }: any) => <div data-testid="custom-list">{title}</div>);
+
 describe('ReferenceManyField', () => {
   beforeEach(() => {
     cleanup();
+    vi.clearAllMocks();
   });
 
-  it('should render children within providers', () => {
+  it('should render children within providers if provided', () => {
     render(
       <ReferenceManyField reference="comments" target="post_id">
         <div data-testid="child">Child Content</div>
@@ -29,13 +46,41 @@ describe('ReferenceManyField', () => {
     expect(screen.getByTestId('child').textContent).toBe('Child Content');
   });
 
-  it('should pass correct resource to ResourceSchemaProvider', () => {
+  it('should render default Table if no children provided', () => {
+    render(<ReferenceManyField reference="comments" target="post_id" title="Default Table Title" />);
+
+    expect(screen.getByTestId('default-table')).toBeDefined();
+    expect(screen.getByTestId('default-table').textContent).toBe('Default Table Title');
+  });
+
+  it('should render custom listComponent from schema if no children provided', () => {
+    render(<ReferenceManyField reference="with-custom-list" target="post_id" title="Custom List Title" />);
+
+    expect(screen.getByTestId('custom-list')).toBeDefined();
+    expect(screen.getByTestId('custom-list').textContent).toBe('Custom List Title');
+  });
+
+  it('should pass list props to the default component', () => {
     render(
-      <ReferenceManyField reference="reviews" target="product_id">
-        <div data-testid="child">Child Content</div>
-      </ReferenceManyField>,
+      <ReferenceManyField
+        reference="comments"
+        target="post_id"
+        include={['id', 'name']}
+        exclude={['date']}
+        display={['id']}
+        filtering={false}
+        preferences={true}
+      />,
     );
 
-    expect(screen.getByTestId('resource-schema-provider')).toBeDefined();
+    expect(Table).toHaveBeenCalled();
+    const props = (Table as any).mock.calls[0][0];
+    expect(props).toMatchObject({
+      include: ['id', 'name'],
+      exclude: ['date'],
+      display: ['id'],
+      filtering: false,
+      preferences: true,
+    });
   });
 });

package/src/field/ReferenceManyField.tsx

@@ -1,11 +1,10 @@
 import React, { ReactNode } from 'react';
-import { ReferenceManyFieldBase, type RaRecord, ResourceSchemaProvider } from '@strato-admin/core';
+import { ReferenceManyFieldBase, type RaRecord } from '@strato-admin/ra-core';
+import { ResourceSchemaProvider, useResourceSchema } from '@strato-admin/core';
 import { type FieldProps } from './types';
+import Table from '../list/Table';
 
-export interface ReferenceManyFieldProps<
-  RecordType extends RaRecord = RaRecord,
-  ReferenceRecordType extends RaRecord = RaRecord,
-> extends FieldProps<RecordType> {
+export interface ReferenceManyFieldProps<RecordType extends RaRecord = RaRecord> extends FieldProps<RecordType> {
   children?: ReactNode;
   reference: string;
   target: string;
@@ -39,6 +38,30 @@ export interface ReferenceManyFieldProps<
    * @default false
    */
   synchronizeWithLocation?: boolean;
+  /**
+   * Include only these fields from the schema.
+   */
+  include?: string[];
+  /**
+   * Exclude these fields from the schema.
+   */
+  exclude?: string[];
+  /**
+   * The fields to display by default.
+   */
+  display?: string[];
+  /**
+   * Whether to enable text filtering.
+   */
+  filtering?: boolean;
+  /**
+   * Whether to show the preferences button or custom preferences content.
+   */
+  preferences?: boolean | React.ReactNode;
+  /**
+   * The title of the list.
+   */
+  title?: React.ReactNode;
 }
 
 /**
@@ -52,22 +75,70 @@ export interface ReferenceManyFieldProps<
  *         <Table.Column source="created_at" />
  *     </Table>
  * </ReferenceManyField>
+ *
+ * @example
+ * // Honors the default listComponent from the reviews resource schema
+ * <ReferenceManyField reference="reviews" target="product_id" />
  */
-export const ReferenceManyField = <
-  RecordType extends RaRecord = RaRecord,
-  ReferenceRecordType extends RaRecord = RaRecord,
->(
-  props: ReferenceManyFieldProps<RecordType, ReferenceRecordType>
+export const ReferenceManyField = <RecordType extends RaRecord = RaRecord>(
+  props: ReferenceManyFieldProps<RecordType>,
 ) => {
-  const { children, reference, fieldSchema, ...rest } = props;
+  const { children, reference, fieldSchema, include, exclude, display, filtering, preferences, title, ...rest } = props;
+  const { queryOptions } = useResourceSchema(reference);
 
   return (
-    <ReferenceManyFieldBase reference={reference} {...rest}>
+    <ReferenceManyFieldBase reference={reference} queryOptions={queryOptions} {...rest}>
       <ResourceSchemaProvider resource={reference} fieldSchema={fieldSchema}>
-        {children}
+        <ReferenceManyFieldUI
+          reference={reference}
+          include={include}
+          exclude={exclude}
+          display={display}
+          filtering={filtering}
+          preferences={preferences}
+          title={title}
+        >
+          {children}
+        </ReferenceManyFieldUI>
       </ResourceSchemaProvider>
     </ReferenceManyFieldBase>
   );
 };
 
+const ReferenceManyFieldUI = ({
+  children,
+  reference,
+  include,
+  exclude,
+  display,
+  filtering,
+  preferences,
+  title,
+}: {
+  children?: ReactNode;
+  reference: string;
+  include?: string[];
+  exclude?: string[];
+  display?: string[];
+  filtering?: boolean;
+  preferences?: boolean | React.ReactNode;
+  title?: React.ReactNode;
+}) => {
+  const { listComponent: ListComponent = Table } = useResourceSchema(reference);
+
+  const finalChildren = children || (
+    <ListComponent
+      include={include}
+      exclude={exclude}
+      display={display}
+      filtering={filtering}
+      preferences={preferences}
+      title={title}
+    />
+  );
+
+  return <>{finalChildren}</>;
+};
+
 export default ReferenceManyField;
+ReferenceManyField.isCollectionField = true;

package/src/field/StatusIndicatorField.test.tsx

@@ -1,20 +1,15 @@
 import { render, cleanup } from '@testing-library/react';
 import { vi, describe, it, expect, afterEach } from 'vitest';
-import { useFieldValue, useRecordContext } from '@strato-admin/core';
+import { useFieldValue, useRecordContext } from '@strato-admin/ra-core';
 import StatusIndicatorField from './StatusIndicatorField';
 
-// Mock ra-core
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
 vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
 
 // Mock Cloudscape components
 vi.mock('@cloudscape-design/components/status-indicator', () => ({
   default: ({ children, type, colorOverride, iconAriaLabel }: any) => (
-    <div
-      data-testid="status-indicator"
-      data-type={type}
-      data-color={colorOverride}
-      data-aria={iconAriaLabel}
-    >
+    <div data-testid="status-indicator" data-type={type} data-color={colorOverride} data-aria={iconAriaLabel}>
       {children}
     </div>
   ),
@@ -67,10 +62,7 @@ describe('StatusIndicatorField', () => {
     (useFieldValue as any).mockReturnValue('error');
 
     const { getByTestId } = render(
-      <StatusIndicatorField
-        source="status"
-        type={(val) => (val === 'error' ? 'error' : 'info')}
-      />,
+      <StatusIndicatorField source="status" type={(val) => (val === 'error' ? 'error' : 'info')} />,
     );
 
     const indicator = getByTestId('status-indicator');
@@ -90,9 +82,7 @@ describe('StatusIndicatorField', () => {
     (useRecordContext as any).mockReturnValue({});
     (useFieldValue as any).mockReturnValue(undefined);
 
-    const { getByText } = render(
-      <StatusIndicatorField source="status" emptyText="No Status" />,
-    );
+    const { getByText } = render(<StatusIndicatorField source="status" emptyText="No Status" />);
 
     expect(getByText('No Status')).toBeDefined();
   });
@@ -102,9 +92,7 @@ describe('StatusIndicatorField', () => {
     (useRecordContext as any).mockReturnValue(record);
     (useFieldValue as any).mockReturnValue('custom');
 
-    const { getByTestId } = render(
-      <StatusIndicatorField source="status" type="success" colorOverride="blue" />,
-    );
+    const { getByTestId } = render(<StatusIndicatorField source="status" type="success" colorOverride="blue" />);
 
     const indicator = getByTestId('status-indicator');
     expect(indicator.getAttribute('data-color')).toBe('blue');
@@ -115,9 +103,7 @@ describe('StatusIndicatorField', () => {
     (useRecordContext as any).mockReturnValue(record);
     (useFieldValue as any).mockReturnValue('active');
 
-    const { getByTestId } = render(
-      <StatusIndicatorField source="status" iconAriaLabel="Active status" />,
-    );
+    const { getByTestId } = render(<StatusIndicatorField source="status" iconAriaLabel="Active status" />);
 
     const indicator = getByTestId('status-indicator');
     expect(indicator.getAttribute('data-aria')).toBe('Active status');

package/src/field/StatusIndicatorField.tsx

@@ -1,6 +1,6 @@
 import StatusIndicator, { type StatusIndicatorProps } from '@cloudscape-design/components/status-indicator';
 import React, { type ReactElement } from 'react';
-import { type RaRecord, useFieldValue, useRecordContext, useTranslate } from '@strato-admin/core';
+import { type RaRecord, useFieldValue, useRecordContext, useTranslate } from '@strato-admin/ra-core';
 import RecordLink from '../RecordLink';
 import { type FieldProps } from './types';
 
@@ -28,8 +28,7 @@ export interface StatusIndicatorLabelProps {
  */
 export const StatusIndicatorLabel = (_: StatusIndicatorLabelProps) => null;
 
-export interface StatusIndicatorFieldProps<RecordType extends RaRecord = RaRecord>
-  extends FieldProps<RecordType> {
+export interface StatusIndicatorFieldProps<RecordType extends RaRecord = RaRecord> extends FieldProps<RecordType> {
   /**
    * The type of the status indicator.
    * If provided as a string, it will be used for all values.
@@ -55,20 +54,8 @@ export interface StatusIndicatorFieldProps<RecordType extends RaRecord = RaRecor
   children?: React.ReactNode;
 }
 
-const StatusIndicatorField = <RecordType extends RaRecord = RaRecord>(
-  props: StatusIndicatorFieldProps<RecordType>
-) => {
-  const {
-    source,
-    record: recordProp,
-    emptyText,
-    link,
-    type,
-    mapping,
-    iconAriaLabel,
-    colorOverride,
-    children,
-  } = props;
+const StatusIndicatorField = <RecordType extends RaRecord = RaRecord>(props: StatusIndicatorFieldProps<RecordType>) => {
+  const { source, record: recordProp, emptyText, link, type, mapping, iconAriaLabel, colorOverride, children } = props;
 
   const record = useRecordContext<RecordType>({ record: recordProp });
   const value = useFieldValue<RecordType>({ source: source as any, record });
@@ -93,9 +80,10 @@ const StatusIndicatorField = <RecordType extends RaRecord = RaRecord>(
       finalColorOverride = matchingLabel.props.color;
     }
     if (matchingLabel.props.label) {
-      label = typeof matchingLabel.props.label === 'string'
-        ? translate(matchingLabel.props.label)
-        : matchingLabel.props.label;
+      label =
+        typeof matchingLabel.props.label === 'string'
+          ? translate(matchingLabel.props.label)
+          : matchingLabel.props.label;
     }
   } else if (typeof type === 'function') {
     statusType = type(value, record as RecordType);

package/src/field/TextField.tsx

@@ -1,4 +1,4 @@
-import { type RaRecord, useFieldValue, useRecordContext } from '@strato-admin/core';
+import { type RaRecord, useFieldValue, useRecordContext } from '@strato-admin/ra-core';
 import RecordLink from '../RecordLink';
 import { type FieldProps } from './types';
 

package/src/field/types.ts

@@ -1,20 +1,19 @@
 import { type ReactNode } from 'react';
-import { type BaseFieldProps, type RaRecord } from '@strato-admin/core';
+import { ExtractRecordPaths, type BaseFieldProps, type RaRecord } from '@strato-admin/ra-core';
 import { type RecordLinkType } from '../RecordLink';
 
 /**
  * Common props for all field components in strato-cloudscape.
  */
-export interface FieldProps<RecordType extends RaRecord = RaRecord>
-  extends Omit<BaseFieldProps<RecordType>, 'source'> {
+export interface FieldProps<RecordType extends RaRecord = RaRecord> extends Omit<BaseFieldProps<RecordType>, 'source'> {
   /**
    * The property name in the record that should be displayed.
    */
-  source?: string;
+  source?: ExtractRecordPaths<RecordType>;
   /**
-   * The label to display for this field. Usually inferred from the source.
+   * The label to display for this field. If not provided, it will be inferred from the `source`.
    */
-  label?: ReactNode;
+  label?: string | ReactNode;
   /**
    * Whether the field is sortable in a table.
    * @default true
@@ -22,8 +21,8 @@ export interface FieldProps<RecordType extends RaRecord = RaRecord>
   sortable?: boolean;
   /**
    * Whether to link the field to another page.
-   * - true: links to the 'edit' page of the current resource
-   * - 'edit' | 'show': links to the specified page type
+   * - true: links to the 'detail' page of the current resource
+   * - 'edit' | 'detail': links to the specified page type
    * - string: a custom URL
    * - function: (record, resource) => string
    */
@@ -31,7 +30,7 @@ export interface FieldProps<RecordType extends RaRecord = RaRecord>
   /**
    * The text to display if the value is empty or null.
    */
-  emptyText?: ReactNode;
+  emptyText?: string | ReactNode;
   /**
    * Configuration for the inferred form input.
    * - object: Props passed to the inferred Input component.
@@ -40,8 +39,8 @@ export interface FieldProps<RecordType extends RaRecord = RaRecord>
    */
   input?: Record<string, any> | React.ReactElement | false;
   /**
-   * Whether the field is required. 
-   * This is used to automatically add validation to the inferred input 
+   * Whether the field is required.
+   * This is used to automatically add validation to the inferred input
    * and potentially show warnings in display views.
    */
   isRequired?: boolean;
@@ -49,10 +48,10 @@ export interface FieldProps<RecordType extends RaRecord = RaRecord>
    * Additional text to help the user fill in the field.
    * Passed to the inferred Input component's FormField.
    */
-  description?: ReactNode;
+  description?: string | ReactNode;
   /**
    * Text describing constraints (e.g., "Must be between 1 and 100").
    * Passed to the inferred Input component's FormField.
    */
-  constraintText?: ReactNode;
+  constraintText?: string | ReactNode;
 }

package/src/form/Form.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
 import { Form } from './Form';
 
-// Mock ra-core
+vi.mock('@strato-admin/ra-core', () => import('../__mocks__/ra-core'));
 vi.mock('@strato-admin/core', () => import('../__mocks__/strato-core'));
 
 // Mock Cloudscape components
@@ -31,14 +32,17 @@ describe('Form', () => {
 
   it('should render children and default toolbar', () => {
     const { getByTestId, getByText } = render(
-      <Form>
-        <div data-testid="child" />
-      </Form>,
+      <MemoryRouter>
+        <Form>
+          <div data-testid="child" />
+        </Form>
+      </MemoryRouter>,
     );
 
     expect(getByTestId('ra-form')).toBeDefined();
     expect(getByTestId('cloudscape-form')).toBeDefined();
     expect(getByTestId('child')).toBeDefined();
+    expect(getByText('Cancel')).toBeDefined();
     expect(getByText('Save')).toBeDefined();
   });
 

package/src/form/Form.tsx

@@ -1,37 +1,41 @@
 import React from 'react';
-import { Form as RaForm, type FormProps as RaFormProps, useSaveContext, useInputSchema } from '@strato-admin/core';
+import { Form as RaForm, type FormProps as RaFormProps, useSaveContext, useRecordContext } from '@strato-admin/ra-core';
+import { useSchemaFields } from '../hooks/useSchemaFields';
 import CloudscapeForm from '@cloudscape-design/components/form';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 import { SaveButton } from '../button/SaveButton';
+import { CancelButton } from '../button/CancelButton';
 import { FormField } from '../input/FormField';
 
 export interface FormProps extends Omit<RaFormProps, 'children'> {
   children?: React.ReactNode;
+  /**
+   * List of field sources to include in the form.
+   */
   include?: string[];
+  /**
+   * List of field sources to exclude from the form.
+   */
   exclude?: string[];
   toolbar?: React.ReactNode;
+  /**
+   * Label for the save button.
+   */
+  saveButtonLabel?: string;
 }
 
-export const Form = ({ children, include, exclude, toolbar, ...props }: FormProps) => {
+export const Form = ({ children, include, exclude, toolbar, saveButtonLabel, ...props }: FormProps) => {
   const saveContext = useSaveContext();
-  const schemaChildren = useInputSchema();
+  const record = useRecordContext();
+  const isEditMode = record?.id != null;
 
-  const finalChildren = React.useMemo(() => {
-    const baseChildren = children || schemaChildren;
-    let result = React.Children.toArray(baseChildren);
+  const { getEditFields, getCreateFields } = useSchemaFields();
 
-    if (include) {
-      result = result.filter(
-        (child) => React.isValidElement(child) && include.includes((child.props as any).source)
-      );
-    } else if (exclude) {
-      result = result.filter(
-        (child) => React.isValidElement(child) && !exclude.includes((child.props as any).source)
-      );
-    }
-
-    return result;
-  }, [children, schemaChildren, include, exclude]);
+  const finalChildren = React.useMemo(
+    () =>
+      isEditMode ? getEditFields(children, { include, exclude }) : getCreateFields(children, { include, exclude }),
+    [isEditMode, getEditFields, getCreateFields, children, include, exclude],
+  );
 
   const handleSubmit = async (values: any, event: any) => {
     if (props.onSubmit) {
@@ -48,7 +52,8 @@ export const Form = ({ children, include, exclude, toolbar, ...props }: FormProp
         actions={
           toolbar || (
             <SpaceBetween direction="horizontal" size="xs">
-              <SaveButton />
+              <CancelButton />
+              <SaveButton label={saveButtonLabel} />
             </SpaceBetween>
           )
         }

package/src/form/index.ts

@@ -1,2 +1,2 @@
 export * from './Form';
-export { ValidationError } from '@strato-admin/core';
+export { ValidationError } from '@strato-admin/ra-core';

package/src/hooks/useSchemaFields.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import { useResourceSchema } from '@strato-admin/core';
+
+const noCollectionFields = (child: React.ReactElement) => !(child.type as any).isCollectionField;
+
+function filterFields(
+  base: React.ReactNode,
+  options: {
+    include?: string[];
+    exclude?: string[];
+    defaultFilter?: (child: React.ReactElement) => boolean;
+  } = {},
+): React.ReactElement[] {
+  const { include, exclude, defaultFilter } = options;
+  let result = React.Children.toArray(base) as React.ReactElement[];
+
+  if (include) {
+    return result.filter((child) => React.isValidElement(child) && include.includes((child.props as any).source));
+  }
+  if (defaultFilter) {
+    result = result.filter((child) => React.isValidElement(child) && defaultFilter(child));
+  }
+  if (exclude) {
+    result = result.filter((child) => React.isValidElement(child) && !exclude.includes((child.props as any).source));
+  }
+  return result;
+}
+
+export function useSchemaFields() {
+  const {
+    fieldSchema,
+    inputSchema,
+    listInclude,
+    listExclude,
+    detailInclude,
+    detailExclude,
+    formInclude,
+    formExclude,
+    editInclude,
+    editExclude,
+    createInclude,
+    createExclude,
+  } = useResourceSchema();
+
+  const getListFields = React.useCallback(
+    (children: React.ReactNode, opts: { include?: string[]; exclude?: string[] } = {}) =>
+      filterFields(children || fieldSchema, {
+        include: opts.include || listInclude,
+        exclude: opts.exclude || listExclude,
+        defaultFilter: noCollectionFields,
+      }),
+    [fieldSchema, listInclude, listExclude],
+  );
+
+  const getDetailFields = React.useCallback(
+    (children: React.ReactNode, opts: { include?: string[]; exclude?: string[] } = {}) => {
+      const hasExplicit = React.Children.count(children) > 0;
+      const all = filterFields(children || fieldSchema, {
+        include: hasExplicit ? undefined : opts.include || detailInclude,
+        exclude: hasExplicit ? undefined : opts.exclude || detailExclude,
+      });
+      return {
+        scalarFields: all.filter((c) => !(c.type as any).isCollectionField),
+        collectionFields: all.filter((c) => (c.type as any).isCollectionField),
+      };
+    },
+    [fieldSchema, detailInclude, detailExclude],
+  );
+
+  const getEditFields = React.useCallback(
+    (children: React.ReactNode, opts: { include?: string[]; exclude?: string[] } = {}) =>
+      filterFields(children || inputSchema, {
+        include: opts.include || editInclude || formInclude,
+        exclude: opts.exclude || editExclude || formExclude,
+      }),
+    [inputSchema, editInclude, editExclude, formInclude, formExclude],
+  );
+
+  const getCreateFields = React.useCallback(
+    (children: React.ReactNode, opts: { include?: string[]; exclude?: string[] } = {}) =>
+      filterFields(children || inputSchema, {
+        include: opts.include || createInclude || formInclude,
+        exclude: opts.exclude || createExclude || formExclude,
+      }),
+    [inputSchema, createInclude, createExclude, formInclude, formExclude],
+  );
+
+  return { getListFields, getDetailFields, getEditFields, getCreateFields };
+}

package/src/i18n/Message.tsx

@@ -0,0 +1,22 @@
+import { useTranslate } from '@strato-admin/ra-core';
+import { MessageProps } from './types';
+
+export type { MessageProps };
+
+/**
+ * Renders a translatable string inline. The children text is the English source
+ * string and serves as both the translation key and the fallback value.
+ *
+ * @example
+ * <Message>Product Name</Message>
+ * <Message id="resources.products.actions.archive">Archive</Message>
+ * <Message context="verb">Archive</Message>
+ * <Message context="noun">Archive</Message>
+ * <Message comment="Appears in the confirmation dialog">Are you sure?</Message>
+ * <Message count={n}>{'Found {count, plural, one {# result} other {# results}}'}</Message>
+ */
+export const Message = ({ children, id, context, comment: _comment, vars }: MessageProps) => {
+  const translate = useTranslate();
+  const key = id ?? (context ? `${context}\x04${children}` : children);
+  return <>{translate(key, { ...vars, _: children })}</>;
+};

package/src/i18n/RecordMessage.tsx

@@ -0,0 +1,22 @@
+import { useTranslate, useRecordContext } from '@strato-admin/ra-core';
+import { MessageProps } from './types';
+
+export interface RecordMessageProps extends MessageProps {
+  /** Explicit record to use instead of the one from context. */
+  record?: Record<string, any>;
+}
+
+/**
+ * Renders a translatable string with all fields of the current record available
+ * as ICU variables. Must be used inside a record context (Detail, Edit, etc.).
+ *
+ * @example
+ * <RecordMessage>{'Product: {name}'}</RecordMessage>
+ * <RecordMessage>{'Order #{id} — {status}'}</RecordMessage>
+ */
+export const RecordMessage = ({ children, id, context, comment: _comment, record, vars }: RecordMessageProps) => {
+  const translate = useTranslate();
+  const resolvedRecord = useRecordContext({ record }) ?? {};
+  const key = id ?? (context ? `${context}\x04${children}` : children);
+  return <>{translate(key, { ...resolvedRecord, ...vars, _: children })}</>;
+};

package/src/i18n/index.ts

@@ -0,0 +1,3 @@
+export { type MessageProps } from './types';
+export { Message } from './Message';
+export { RecordMessage, type RecordMessageProps } from './RecordMessage';