fix(studio,timeline,list): 表单设计器解析对象翻译；timeline 认它自己配置的日期字段 (#3134, #3129) (#3175)

* wip: rescue in-progress reproduction scratch before restart loss (batch8)

* wip: rescue reproduction scratch update (batch8)

* fix(studio): the form-layout canvas speaks the project's language (#3134)

ObjectFormDesigner read `entry.def.label` / `group.label` straight off the
object draft, so a fully translated object still rendered its English source
labels on the layout canvas while every other surface resolved the project's
object translations. Route field cards (and the drag overlay) through
`fieldLabel()` and section headers through `sectionLabel()` — the same resolver
ObjectForm and RecordDetailView use — with the authored metadata label as the
fallback. StudioDesignSurface passes the object's API name explicitly so the
lookup root survives an unnamed draft body.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017gEHJN2NFpS9VMeURvakgD

* fix(timeline,list): honour the `timeline.dateField` alias on the spec nesting (#3129)

`dateField` is the pre-#2231 alias for `startDateField`. `@object-ui/types`
declares it on the nested config and both ObjectView read-sites resolve it, but
ObjectTimeline read it only off the flat prop and ListView only out of
`options.timeline` — including in the capability gate. A view authored as
`timeline: { dateField: … }` therefore fell through to the caller's default
(`created_at` / `due_date`), which the projection does not request, so every
record bucketed into "No date" with the configured date still in the row.

Also drops the reproduction scratch in favour of two real regression suites.
The pre-existing ObjectTimeline test stubs out `./renderer` and asserts only
item titles, so the date binding had no behavioural coverage at all — which is
how an all-"No date" timeline shipped green. The new plugin-timeline suite
renders through the real renderer and reads the bucket headers; the plugin-list
suite spies on the registry to pin the forwarded binding and the $select.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017gEHJN2NFpS9VMeURvakgD

* test(timeline): apply the untyped `data` passthrough without breaking type-check

`ObjectTimelineProps` does not declare `data` (the component reads it off the
rest args), so the regression suite has to apply it untyped.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017gEHJN2NFpS9VMeURvakgD

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: os-zhuang <support@objectstack.ai>

Author: 3 people

.changeset/form-designer-speaks-the-project-language.md

@@ -0,0 +1,24 @@
+---
+"@object-ui/app-shell": minor
+---
+
+fix(studio): the form-layout canvas resolves the object's field and section translations (#3134)
+
+`ObjectFormDesigner` bills itself as a preview of the end-user form, but it read
+labels straight off the object draft — `entry.def.label` for fields, `group.label`
+for section headers. Every other surface for the same object (`ObjectForm`,
+`RecordDetailView`, the data grid) resolves those through the project's object
+translations first, so a fully translated object rendered `Opportunity Name` /
+`Basic Information` on the layout canvas while the very same fields read
+`商机名称` / `基本信息` one click away.
+
+The designer now goes through `useSafeFieldLabel()` — `fieldLabel()` for field
+cards (including the drag overlay) and `sectionLabel()` for section headers —
+which is the same resolver the runtime form uses, with the authored metadata
+label as fallback when no translation exists. The lookup root is the object's
+API name; `StudioDesignSurface` now passes it explicitly (`objectName`) so a
+draft body that has not been re-named still resolves, falling back to
+`draft.name`.
+
+Observable rendering change (translated labels now appear where English source
+labels did), hence `minor`.

.changeset/timeline-honours-its-configured-date-field.md

@@ -0,0 +1,30 @@
+---
+"@object-ui/plugin-timeline": minor
+"@object-ui/plugin-list": minor
+---
+
+fix(timeline,list): the timeline honours `timeline.dateField`, not just `timeline.startDateField` (#3129)
+
+`dateField` is the pre-#2231 alias for `startDateField`. `@object-ui/types`
+declares it on the nested config (`ListViewTimelineConfig`), and both
+`ObjectView` read-sites (app-shell and plugin-view) resolve it — but the two
+read-sites that actually drive the axis did not:
+
+- `ObjectTimeline` consulted the alias only on the FLAT prop (`schema.dateField`),
+  never on the nested `schema.timeline`.
+- `ListView` resolved it out of `options.timeline` but not out of the
+  spec-canonical `schema.timeline` — including in the capability gate, so such a
+  view could fail to offer the Timeline option at all.
+
+So a view authored as `timeline: { dateField: 'start_date' }` — the spec nesting
+with the legacy key — fell through to the caller's default (`created_at` /
+`due_date`). That field is normally absent from the `$select` projection, so
+every record came back without it and the timeline rendered all of them under
+**No date** — while the configured date was sitting in the row untouched. That
+also explains why widening the view's projection changed nothing: the projection
+already carried the right field; the renderer was reading a different one.
+
+Both read-sites now resolve the alias in the same precedence position they
+already use for `options.timeline.dateField`. The spec key still wins wherever
+both appear. Observable rendering change (records move out of "No date" into
+real date buckets), hence `minor`.

packages/app-shell/src/views/studio-design/ObjectFormDesigner.test.tsx

@@ -8,6 +8,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
+import { I18nProvider, createI18n } from '@object-ui/i18n';
 import { ObjectFormDesigner } from './ObjectFormDesigner';
 
 /** Build an array-shape `draft.fields` with `n` plain text fields. */
@@ -130,3 +131,112 @@ describe('ObjectFormDesigner — group selection', () => {
     expect(screen.queryByLabelText('Group settings')).toBeNull();
   });
 });
+
+/**
+ * Regression for objectui#3134.
+ *
+ * The layout canvas is a preview of the end-user form, so it has to resolve
+ * labels the way `ObjectForm` / `RecordDetailView` do — through the project's
+ * object translations. It used to read `entry.def.label` and `group.label`
+ * straight off the draft metadata, so a fully translated object still rendered
+ * its English source labels in the designer while every other surface in the
+ * same locale showed the translation.
+ *
+ * The runtime bundle shape below is what `transformSpecTranslations` produces
+ * from authored `objects.<obj>.fields.<f>.label` / `objects.<obj>._sections.
+ * <key>.label` entries: field labels are flattened to `fields.<obj>.<field>`,
+ * while `_sections` is preserved verbatim under the object scope.
+ */
+describe('ObjectFormDesigner — object translations (objectui#3134)', () => {
+  const draft = {
+    name: 'crm_opportunity',
+    fields: [
+      { name: 'name', type: 'text', label: 'Opportunity Name', group: 'basic' },
+      { name: 'amount', type: 'number', label: 'Amount', group: 'basic' },
+    ],
+    fieldGroups: [{ key: 'basic', label: 'Basic Information' }],
+  };
+
+  const renderTranslated = (props: Record<string, unknown> = {}) => {
+    const instance = createI18n({
+      defaultLanguage: 'zh',
+      detectBrowserLanguage: false,
+      resources: {
+        zh: {
+          app: {
+            objects: {
+              crm_opportunity: {
+                label: '商机',
+                _sections: { basic: { label: '基本信息' } },
+              },
+            },
+            fields: { crm_opportunity: { name: '商机名称' } },
+          },
+        },
+      },
+    });
+    return render(
+      <I18nProvider instance={instance}>
+        <ObjectFormDesigner
+          draft={draft}
+          systemFieldNames={new Set()}
+          onChange={noop}
+          onSelectField={noop}
+          {...props}
+        />
+      </I18nProvider>,
+    );
+  };
+
+  it('renders the translated field label instead of the raw metadata label', () => {
+    renderTranslated();
+    expect(screen.getByText('商机名称')).toBeTruthy();
+    expect(screen.queryByText('Opportunity Name')).toBeNull();
+  });
+
+  it('renders the translated section label instead of the raw group label', () => {
+    const { container } = renderTranslated();
+    const heading = container.querySelector<HTMLInputElement>('input[type="text"], input:not([type])');
+    expect(heading?.value ?? '').toBe('基本信息');
+    expect(screen.queryByText('Basic Information')).toBeNull();
+  });
+
+  it('falls back to the metadata label when the object has no translation for a field', () => {
+    // `amount` is untranslated — the designer must show the authored label, not
+    // a blank cell or the raw field name.
+    renderTranslated();
+    expect(screen.getByText('Amount')).toBeTruthy();
+  });
+
+  it('prefers the explicit objectName prop over draft.name as the lookup root', () => {
+    // A draft whose body has not been (re)named yet still resolves, because the
+    // Studio surface passes the object it is editing.
+    const { container } = render(
+      <I18nProvider
+        instance={createI18n({
+          defaultLanguage: 'zh',
+          detectBrowserLanguage: false,
+          resources: {
+            zh: {
+              app: {
+                objects: { crm_opportunity: { _sections: { basic: { label: '基本信息' } } } },
+                fields: { crm_opportunity: { name: '商机名称' } },
+              },
+            },
+          },
+        })}
+      >
+        <ObjectFormDesigner
+          draft={{ ...draft, name: undefined }}
+          objectName="crm_opportunity"
+          systemFieldNames={new Set()}
+          onChange={noop}
+          onSelectField={noop}
+        />
+      </I18nProvider>,
+    );
+    expect(screen.getByText('商机名称')).toBeTruthy();
+    const heading = container.querySelector<HTMLInputElement>('input[type="text"], input:not([type])');
+    expect(heading?.value ?? '').toBe('基本信息');
+  });
+});

packages/app-shell/src/views/studio-design/ObjectFormDesigner.tsx

@@ -52,6 +52,7 @@ import {
   type FieldEntry,
   type FieldsView,
 } from '../metadata-admin/previews/object-fields-io';
+import { useSafeFieldLabel } from '@object-ui/i18n';
 import { t, tFormat, useMetadataLocale } from '../metadata-admin/i18n';
 
 const UNGROUPED = '__ungrouped__';
@@ -63,6 +64,13 @@ const unFid = (id: string) => id.slice(2);
 export interface ObjectFormDesignerProps {
   /** Object metadata draft (reads `fields` + `fieldGroups`). */
   draft: Record<string, unknown>;
+  /**
+   * API name of the object being designed — the lookup root for the field /
+   * section translations the canvas renders. Falls back to `draft.name`, which
+   * the object metadata body carries; pass it explicitly when the caller has a
+   * more reliable handle (a freshly created draft may not have been named yet).
+   */
+  objectName?: string;
   /** Field names to hide from the layout (system/audit) but preserve on write. */
   systemFieldNames: Set<string>;
   /** Persist a partial object-draft patch (fields / fieldGroups) + mark dirty. */
@@ -128,19 +136,21 @@ function FieldControlPreview({ type }: { type: string }): React.ReactElement {
 /** One draggable field card inside a section. */
 function SortableField({
   entry,
+  label,
   columns,
   selected,
   onSelect,
 }: {
   entry: FieldEntry;
+  /** Already resolved through the project's field translations. */
+  label: string;
   columns: number;
   selected: boolean;
   onSelect: () => void;
 }): React.ReactElement {
   const locale = useMetadataLocale();
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: fid(entry.name) });
   const type = String(entry.def.type ?? 'text');
-  const label = String(entry.def.label ?? entry.name);
   const required = !!entry.def.required;
   // Mirror the real form: wide widgets (textarea/markdown/html/…) take the whole
   // row. `col-span-full` (grid-column: 1/-1) spans every column at ANY container
@@ -188,6 +198,7 @@ function Section({
   canMoveUp,
   canMoveDown,
   entryByName,
+  fieldLabelOf,
   selectedField,
   onSelectField,
   selected = false,
@@ -205,6 +216,8 @@ function Section({
   canMoveUp: boolean;
   canMoveDown: boolean;
   entryByName: Map<string, FieldEntry>;
+  /** Resolves a field entry to its translated display label. */
+  fieldLabelOf: (entry: FieldEntry) => string;
   selectedField?: string | null;
   onSelectField: (name: string) => void;
   selected?: boolean;
@@ -306,6 +319,7 @@ function Section({
               <SortableField
                 key={id}
                 entry={entry}
+                label={fieldLabelOf(entry)}
                 columns={columns}
                 selected={selectedField === name}
                 onSelect={() => onSelectField(name)}
@@ -320,6 +334,7 @@ function Section({
 
 export function ObjectFormDesigner({
   draft,
+  objectName: objectNameProp,
   systemFieldNames,
   onChange,
   selectedField,
@@ -334,6 +349,26 @@ export function ObjectFormDesigner({
   const groups = React.useMemo(() => readGroups(draft.fieldGroups), [draft.fieldGroups]);
   const entryByName = React.useMemo(() => new Map(view.entries.map((e) => [e.name, e] as const)), [view]);
 
+  // The canvas is a preview of the END-USER form, so it must speak the same
+  // language that form does (objectui#3134). `ObjectForm` / `RecordDetailView`
+  // resolve every field and section through the project's object translations
+  // (`objects.<object>.fields.<field>.label` /
+  // `objects.<object>._sections.<key>.label`); the designer read the raw draft
+  // metadata instead, so a fully translated object still rendered its English
+  // source labels here while every other surface showed the translation.
+  // `useSafeFieldLabel` is the provider-safe wrapper — the designer is also
+  // mounted in tests/previews with no I18nProvider, where it degrades to the
+  // identity fallback.
+  const { fieldLabel, sectionLabel } = useSafeFieldLabel();
+  const objectName = objectNameProp || (typeof draft.name === 'string' ? draft.name : '');
+  const fieldLabelOf = React.useCallback(
+    (entry: FieldEntry) => {
+      const fallback = String(entry.def.label ?? entry.name);
+      return objectName ? fieldLabel(objectName, entry.name, fallback) : fallback;
+    },
+    [objectName, fieldLabel],
+  );
+
   // Column count mirrors the real form (objectui#2578): derived ONCE from the
   // object's editable field count and applied to every section, so the layout
   // designer reads at the same density end users see. Each section's container
@@ -347,10 +382,13 @@ export function ObjectFormDesigner({
   const containerOrder = React.useMemo(() => [...groups.map((g) => cid(g.key)), cid(UNGROUPED)], [groups]);
   const labelOf = React.useMemo(() => {
     const m = new Map<string, string>();
-    for (const g of groups) m.set(cid(g.key), g.label || g.key);
+    for (const g of groups) {
+      const fallback = g.label || g.key;
+      m.set(cid(g.key), objectName ? sectionLabel(objectName, g.key, fallback) : fallback);
+    }
     m.set(cid(UNGROUPED), t('engine.studio.designer.ungrouped', locale));
     return m;
-  }, [groups, locale]);
+  }, [groups, locale, objectName, sectionLabel]);
 
   // Derive container → ordered field ids from the draft (editable fields only;
   // system/audit fields are preserved on write but never shown in the layout).
@@ -533,6 +571,7 @@ export function ObjectFormDesigner({
                 canMoveUp={declaredIdx > 0}
                 canMoveDown={declaredIdx >= 0 && declaredIdx < groups.length - 1}
                 entryByName={entryByName}
+                fieldLabelOf={fieldLabelOf}
                 selectedField={selectedField}
                 onSelectField={onSelectField}
                 selected={!isUngrouped && selectedGroup === unCid(c)}
@@ -550,7 +589,7 @@ export function ObjectFormDesigner({
           {activeEntry ? (
             <div className="flex items-center gap-1.5 rounded-md border bg-background px-2 py-2 shadow-lg">
               <GripVertical className="h-3.5 w-3.5 text-muted-foreground" />
-              <span className="text-xs font-medium">{String(activeEntry.def.label ?? activeEntry.name)}</span>
+              <span className="text-xs font-medium">{fieldLabelOf(activeEntry)}</span>
             </div>
           ) : null}
         </DragOverlay>

packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx

@@ -2590,6 +2590,7 @@ export function DataPillar({
               {formMode === 'layout' ? (
                 <ObjectFormDesigner
                   draft={objDraft}
+                  objectName={current.name}
                   systemFieldNames={STUDIO_SYSTEM_FIELD_NAMES}
                   onChange={onPatch}
                   selectedField={fieldSel?.kind === 'field' ? fieldSel.id : null}

packages/plugin-list/src/ListView.tsx

@@ -1326,7 +1326,7 @@ export const ListView = React.forwardRef<ListViewHandle, ListViewProps>(({
     }
 
     // Check for Timeline capabilities (spec config takes precedence)
-    if (schema.timeline?.startDateField || schema.options?.timeline?.startDateField || schema.options?.timeline?.dateField || schema.options?.calendar?.startDateField) {
+    if (schema.timeline?.startDateField || (schema.timeline as any)?.dateField || schema.options?.timeline?.startDateField || schema.options?.timeline?.dateField || schema.options?.calendar?.startDateField) {
       resolvable.push('timeline');
     }
 
@@ -1584,7 +1584,11 @@ export const ListView = React.forwardRef<ListViewHandle, ListViewProps>(({
           // Nested timeline config (spec-compliant, used by ObjectTimeline)
           timeline: Object.keys(mergedTimeline).length > 0 ? mergedTimeline : undefined,
           // Deprecated top-level props for backward compat
-          startDateField: schema.timeline?.startDateField || schema.options?.timeline?.startDateField || schema.options?.timeline?.dateField || 'created_at',
+          // `dateField` is the deprecated alias for `startDateField`. It was read
+          // from `options.timeline` but not from the spec-canonical
+          // `schema.timeline`, so the spec nesting + legacy key silently fell
+          // through to `created_at` (objectui#3129).
+          startDateField: schema.timeline?.startDateField || (schema.timeline as any)?.dateField || schema.options?.timeline?.startDateField || schema.options?.timeline?.dateField || 'created_at',
           titleField: schema.timeline?.titleField || schema.options?.timeline?.titleField || 'name',
           ...(schema.timeline?.endDateField ? { endDateField: schema.timeline.endDateField } : {}),
           ...(schema.timeline?.groupByField ? { groupByField: schema.timeline.groupByField } : {}),