fix: align ConfigPanel UI with spec — rowHeight 5 values, add clickIntoRecordDetails toggle

- NamedListView/ObjectGridSchema rowHeight: add 'short' and 'extra_tall' to align with ListViewSchema spec
- Zod schema: update rowHeight enum to include all 5 spec values
- ROW_HEIGHT_OPTIONS: add 'short' (gap-px) and 'extra_tall' (gap-1.5) entries
- Add clickIntoRecordDetails toggle to userActions section (NamedListView spec field)
- Update ViewConfigPanel test for 5 row height buttons
- Add 5 spec-alignment tests (ROW_HEIGHT_OPTIONS coverage, NamedListView field coverage)
- Update ROADMAP.md

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

ROADMAP.md

@@ -205,7 +205,8 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
   - ✅ `ListViewSchema` Zod schema extended with all new properties
   - ✅ ViewConfigPanel aligned to full `ListViewSchema` spec: navigation mode, selection, pagination, export sub-config, searchable/filterable/hidden fields, resizable, density mode, row/bulk actions, sharing, addRecord sub-editor, conditional formatting, quick filters, showRecordCount, allowPrinting, virtualScroll, empty state, ARIA accessibility
   - ✅ Semantic fix: `editRecordsInline` → `inlineEdit` field name alignment (i18n keys, data-testid, component label all unified to `inlineEdit`)
-  - ✅ Semantic fix: `rowHeight` values aligned to spec (`compact`/`medium`/`tall`)
+  - ✅ Semantic fix: `rowHeight` values aligned to full spec — all 5 RowHeight enum values (`compact`/`short`/`medium`/`tall`/`extra_tall`) now supported in NamedListView, ObjectGridSchema, ListViewSchema, Zod schema, and UI
+  - ✅ `clickIntoRecordDetails` toggle added to UserActions section (NamedListView spec field — previously only implicit via navigation mode)
   - ✅ i18n keys verified complete for en/zh and all 10 locale files
   - ✅ Console ObjectView fullSchema propagates all 18 new spec properties
   - ✅ PluginObjectView renderListView schema propagates all 18 new spec properties

apps/console/src/__tests__/ViewConfigPanel.test.tsx

@@ -2227,7 +2227,7 @@ describe('ViewConfigPanel', () => {
         expect(screen.getByTestId('bulk-actions-selector')).toBeInTheDocument();
     });
 
-    it('renders row height buttons with spec-aligned values (compact/medium/tall)', () => {
+    it('renders row height buttons with all 5 spec-aligned values', () => {
         const onViewUpdate = vi.fn();
         render(
             <ViewConfigPanel
@@ -2240,11 +2240,10 @@ describe('ViewConfigPanel', () => {
         );
 
         expect(screen.getByTestId('row-height-compact')).toBeInTheDocument();
+        expect(screen.getByTestId('row-height-short')).toBeInTheDocument();
         expect(screen.getByTestId('row-height-medium')).toBeInTheDocument();
         expect(screen.getByTestId('row-height-tall')).toBeInTheDocument();
-        // Old values should not exist
-        expect(screen.queryByTestId('row-height-short')).not.toBeInTheDocument();
-        expect(screen.queryByTestId('row-height-extraTall')).not.toBeInTheDocument();
+        expect(screen.getByTestId('row-height-extra_tall')).toBeInTheDocument();
 
         // Click compact and verify update
         fireEvent.click(screen.getByTestId('row-height-compact'));

apps/console/src/__tests__/view-config-schema.test.tsx

@@ -43,6 +43,7 @@ import {
     toSortItems,
     SPEC_TO_BUILDER_OP,
     BUILDER_TO_SPEC_OP,
+    ROW_HEIGHT_OPTIONS,
 } from '../utils/view-config-utils';
 
 import { buildViewConfigSchema } from '../utils/view-config-schema';
@@ -439,6 +440,7 @@ describe('buildViewConfigSchema', () => {
             const schema = buildSchema();
             const section = schema.sections.find(s => s.key === 'userActions')!;
             const fieldKeys = section.fields.map(f => f.key);
+            expect(fieldKeys).toContain('clickIntoRecordDetails');
             expect(fieldKeys).toContain('inlineEdit');
             expect(fieldKeys).toContain('addDeleteRecordsInline');
             expect(fieldKeys).toContain('_rowActions');
@@ -525,3 +527,67 @@ describe('buildViewConfigSchema', () => {
         }
     });
 });
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 3. Spec-alignment validation
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe('spec alignment', () => {
+    // ── ROW_HEIGHT_OPTIONS matches spec RowHeight enum ───────────────────
+    describe('ROW_HEIGHT_OPTIONS', () => {
+        it('contains all 5 spec RowHeight values', () => {
+            const values = ROW_HEIGHT_OPTIONS.map(o => o.value);
+            expect(values).toEqual(['compact', 'short', 'medium', 'tall', 'extra_tall']);
+        });
+
+        it('each option has a gapClass', () => {
+            for (const opt of ROW_HEIGHT_OPTIONS) {
+                expect(opt.gapClass).toBeDefined();
+                expect(typeof opt.gapClass).toBe('string');
+            }
+        });
+    });
+
+    // ── NamedListView field coverage ────────────────────────────────────
+    describe('NamedListView spec field coverage', () => {
+        function buildSchema() {
+            return buildViewConfigSchema({
+                t: mockT,
+                fieldOptions: mockFieldOptions,
+                objectDef: mockObjectDef,
+                updateField: mockUpdateField,
+                filterGroupValue: mockFilterGroup,
+                sortItemsValue: mockSortItems,
+            });
+        }
+
+        function allFieldKeys() {
+            const schema = buildSchema();
+            return schema.sections.flatMap(s => s.fields.map(f => f.key));
+        }
+
+        it('covers clickIntoRecordDetails from NamedListView spec', () => {
+            expect(allFieldKeys()).toContain('clickIntoRecordDetails');
+        });
+
+        it('covers all NamedListView toolbar toggles', () => {
+            const keys = allFieldKeys();
+            const toolbarFields = [
+                'showSearch', 'showFilters', 'showSort',
+                'showHideFields', 'showGroup', 'showColor', 'showDensity',
+            ];
+            for (const field of toolbarFields) {
+                expect(keys).toContain(field);
+            }
+        });
+
+        it('covers all NamedListView boolean toggles in userActions', () => {
+            const schema = buildSchema();
+            const section = schema.sections.find(s => s.key === 'userActions')!;
+            const keys = section.fields.map(f => f.key);
+            expect(keys).toContain('clickIntoRecordDetails');
+            expect(keys).toContain('inlineEdit');
+            expect(keys).toContain('addDeleteRecordsInline');
+        });
+    });
+});

apps/console/src/utils/view-config-schema.tsx

@@ -1214,6 +1214,7 @@ function buildUserActionsSection(
         title: t('console.objectView.userActions'),
         collapsible: true,
         fields: [
+            buildSwitchField('clickIntoRecordDetails', t('console.objectView.clickIntoRecordDetails'), 'toggle-clickIntoRecordDetails', true),
             buildSwitchField('inlineEdit', t('console.objectView.inlineEdit'), 'toggle-inlineEdit', true),
             buildSwitchField('addDeleteRecordsInline', t('console.objectView.addDeleteRecordsInline'), 'toggle-addDeleteRecordsInline', true),
             // Row actions

apps/console/src/utils/view-config-utils.ts

@@ -186,11 +186,16 @@ export const VIEW_TYPE_LABELS: Record<string, string> = {
 /** All available view type keys */
 export const VIEW_TYPE_OPTIONS = Object.keys(VIEW_TYPE_LABELS);
 
-/** Row height options with Tailwind gap classes for visual icons */
+/**
+ * Row height options with Tailwind gap classes for visual icons.
+ * Aligned with @objectstack/spec RowHeight enum — all 5 values.
+ */
 export const ROW_HEIGHT_OPTIONS: Array<{ value: string; gapClass: string }> = [
     { value: 'compact', gapClass: 'gap-0' },
+    { value: 'short', gapClass: 'gap-px' },
     { value: 'medium', gapClass: 'gap-0.5' },
     { value: 'tall', gapClass: 'gap-1' },
+    { value: 'extra_tall', gapClass: 'gap-1.5' },
 ];
 
 // ---------------------------------------------------------------------------

packages/types/src/objectql.ts

@@ -416,11 +416,12 @@ export interface ObjectGridSchema extends BaseSchema {
   frozenColumns?: number;
 
   /**
-   * Row height preset for the grid
-   * Controls the density of grid rows
+   * Row height preset for the grid.
+   * Controls the density of grid rows.
+   * Aligned with @objectstack/spec RowHeight enum.
    * @default 'medium'
    */
-  rowHeight?: 'compact' | 'medium' | 'tall';
+  rowHeight?: 'compact' | 'short' | 'medium' | 'tall' | 'extra_tall';
 
   /**
    * Export options configuration for exporting grid data.
@@ -1082,8 +1083,11 @@ export interface NamedListView {
   /** Density mode for controlling row/item spacing */
   densityMode?: 'compact' | 'comfortable' | 'spacious';
 
-  /** Row height for list/grid view rows */
-  rowHeight?: 'compact' | 'medium' | 'tall';
+  /**
+   * Row height for list/grid view rows.
+   * Aligned with @objectstack/spec RowHeight enum.
+   */
+  rowHeight?: 'compact' | 'short' | 'medium' | 'tall' | 'extra_tall';
 
   /** Fields to hide from the current view */
   hiddenFields?: string[];

packages/types/src/zod/objectql.zod.ts

@@ -287,7 +287,7 @@ export const ListViewSchema = BaseSchema.extend({
   filterableFields: z.array(z.string()).optional().describe('Filterable fields'),
   resizable: z.boolean().optional().describe('Allow column resizing'),
   densityMode: z.enum(['compact', 'comfortable', 'spacious']).optional().describe('Density mode'),
-  rowHeight: z.enum(['compact', 'medium', 'tall']).optional().describe('Row height'),
+  rowHeight: z.enum(['compact', 'short', 'medium', 'tall', 'extra_tall']).optional().describe('Row height'),
   hiddenFields: z.array(z.string()).optional().describe('Hidden fields'),
   exportOptions: z.object({
     formats: z.array(z.enum(['csv', 'xlsx', 'json', 'pdf'])).optional(),