test: add focused tests for all UI protocol changes and update ROADMAP

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

Author: Copilot

ROADMAP.md

@@ -1,6 +1,6 @@
 # ObjectStack Protocol — Road Map
 
-> **Last Updated:** 2026-02-22  
+> **Last Updated:** 2026-02-24  
 > **Current Version:** v3.0.8  
 > **Status:** Protocol Specification Complete · Runtime Implementation In Progress
 
@@ -696,6 +696,14 @@ Protocol enhancements and core component implementations for dashboard feature p
 - [x] Enhance `globalFilters` with `options`, `optionsFrom`, `defaultValue`, `scope`, `targetWidgets` ([#712](https://github.com/objectstack-ai/spec/issues/712))
 - [x] Add `header` configuration to `DashboardSchema` with `showTitle`, `showDescription`, `actions` ([#714](https://github.com/objectstack-ai/spec/issues/714))
 - [x] Add `pivotConfig` and `measures` array to `DashboardWidgetSchema` for multi-measure pivots ([#714](https://github.com/objectstack-ai/spec/issues/714))
+- [x] Add required `id` field (SnakeCaseIdentifier) to `DashboardWidgetSchema` for `targetWidgets` referencing
+- [x] Unify `WidgetActionTypeSchema` with `ActionSchema.type` — add `script` and `api` types
+- [x] Add `.superRefine` conditional validation to `PageSchema` (`recordReview` required for `record_review`, `blankLayout` for `blank`)
+- [x] Unify easing naming in `AnimationSchema` (theme.zod) to snake_case (`ease_in`, `ease_out`, `ease_in_out`)
+- [x] Add `themeToken` reference to `TransitionConfigSchema` for theme animation token binding
+- [x] Add `ResponsiveConfigSchema` and `PerformanceConfigSchema` to `ListViewSchema`
+- [x] Migrate `HttpMethodSchema` / `HttpRequestSchema` from `view.zod.ts` to `shared/http.zod.ts` (re-exported for backward compat)
+- [x] Rename `ThemeMode`→`ThemeModeSchema`, `DensityMode`→`DensityModeSchema`, `WcagContrastLevel`→`WcagContrastLevelSchema` (deprecated aliases kept)
 
 **ObjectUI Component Implementations:**
 - [ ] Implement `DashboardFilterBar` component for global filters ([objectui#588](https://github.com/objectstack-ai/objectui/issues/588))

packages/spec/src/shared/http.test.ts

@@ -1,6 +1,8 @@
 import { describe, it, expect } from 'vitest';
 import {
   HttpMethod,
+  HttpMethodSchema,
+  HttpRequestSchema,
   CorsConfigSchema,
   RateLimitConfigSchema,
   StaticMountSchema,
@@ -134,3 +136,44 @@ describe('StaticMountSchema', () => {
     expect(() => StaticMountSchema.parse({ path: '/static' })).toThrow();
   });
 });
+
+// ============================================================================
+// Issue #8: HttpMethodSchema and HttpRequestSchema migrated to shared
+// ============================================================================
+describe('HttpMethodSchema (migrated from view.zod)', () => {
+  it('should accept common HTTP methods', () => {
+    const valid = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
+    valid.forEach(m => {
+      expect(HttpMethodSchema.parse(m)).toBe(m);
+    });
+  });
+
+  it('should reject HEAD and OPTIONS (subset for UI data sources)', () => {
+    expect(() => HttpMethodSchema.parse('HEAD')).toThrow();
+    expect(() => HttpMethodSchema.parse('OPTIONS')).toThrow();
+  });
+});
+
+describe('HttpRequestSchema (migrated from view.zod)', () => {
+  it('should accept minimal request with url only', () => {
+    const result = HttpRequestSchema.parse({ url: 'https://api.example.com/data' });
+    expect(result.url).toBe('https://api.example.com/data');
+    expect(result.method).toBe('GET');
+  });
+
+  it('should accept full request with all fields', () => {
+    const result = HttpRequestSchema.parse({
+      url: 'https://api.example.com/data',
+      method: 'POST',
+      headers: { 'Authorization': 'Bearer token' },
+      params: { page: 1 },
+      body: { name: 'test' },
+    });
+    expect(result.method).toBe('POST');
+    expect(result.headers?.['Authorization']).toBe('Bearer token');
+  });
+
+  it('should reject request without url', () => {
+    expect(() => HttpRequestSchema.parse({})).toThrow();
+  });
+});

packages/spec/src/ui/animation.test.ts

@@ -235,3 +235,31 @@ describe('I18n and ARIA integration', () => {
     expect(result.role).toBeUndefined();
   });
 });
+
+// ============================================================================
+// Issue #6: TransitionConfigSchema themeToken support
+// ============================================================================
+describe('TransitionConfigSchema - themeToken', () => {
+  it('should accept transition with themeToken reference', () => {
+    const result = TransitionConfigSchema.parse({
+      themeToken: 'animation.duration.fast',
+    });
+    expect(result.themeToken).toBe('animation.duration.fast');
+  });
+
+  it('should accept transition combining themeToken with explicit values', () => {
+    const result = TransitionConfigSchema.parse({
+      preset: 'fade',
+      duration: 200,
+      easing: 'ease_in_out',
+      themeToken: 'animation.timing.ease_in_out',
+    });
+    expect(result.themeToken).toBe('animation.timing.ease_in_out');
+    expect(result.duration).toBe(200);
+  });
+
+  it('should leave themeToken undefined when not provided', () => {
+    const result = TransitionConfigSchema.parse({ duration: 300 });
+    expect(result.themeToken).toBeUndefined();
+  });
+});

packages/spec/src/ui/dashboard.test.ts

@@ -1749,3 +1749,79 @@ describe('GlobalFilterSchema - Negative Validation', () => {
     })).toThrow();
   });
 });
+
+// ============================================================================
+// Issue #2: DashboardWidget required `id` field
+// ============================================================================
+describe('DashboardWidgetSchema - required id field', () => {
+  it('should reject widget without id', () => {
+    expect(() => DashboardWidgetSchema.parse({
+      type: 'metric',
+      layout: { x: 0, y: 0, w: 3, h: 2 },
+    })).toThrow();
+  });
+
+  it('should enforce snake_case for widget id', () => {
+    expect(() => DashboardWidgetSchema.parse({
+      id: 'revenue_widget',
+      type: 'metric',
+      layout: { x: 0, y: 0, w: 3, h: 2 },
+    })).not.toThrow();
+
+    expect(() => DashboardWidgetSchema.parse({
+      id: 'revenueWidget',
+      type: 'metric',
+      layout: { x: 0, y: 0, w: 3, h: 2 },
+    })).toThrow();
+  });
+
+  it('should allow targetWidgets to reference widget ids', () => {
+    const dashboard = DashboardSchema.parse({
+      name: 'filter_ref_dash',
+      label: 'Filter Reference Dashboard',
+      widgets: [
+        { id: 'revenue_chart', type: 'bar', layout: { x: 0, y: 0, w: 6, h: 4 } },
+        { id: 'pipeline_table', type: 'table', layout: { x: 6, y: 0, w: 6, h: 4 } },
+      ],
+      globalFilters: [{
+        field: 'region',
+        scope: 'widget',
+        targetWidgets: ['revenue_chart'],
+      }],
+    });
+    expect(dashboard.widgets[0].id).toBe('revenue_chart');
+    expect(dashboard.globalFilters![0].targetWidgets).toEqual(['revenue_chart']);
+  });
+});
+
+// ============================================================================
+// Issue #3: WidgetActionTypeSchema unified with ActionSchema.type
+// ============================================================================
+describe('WidgetActionTypeSchema - unified action types', () => {
+  it('should accept all five action types matching ActionSchema.type', () => {
+    const types = ['script', 'url', 'modal', 'flow', 'api'] as const;
+    types.forEach(type => {
+      expect(() => WidgetActionTypeSchema.parse(type)).not.toThrow();
+    });
+  });
+
+  it('should accept widget with script action type', () => {
+    expect(() => DashboardWidgetSchema.parse({
+      id: 'script_widget',
+      type: 'metric',
+      actionType: 'script',
+      actionUrl: 'refresh_data',
+      layout: { x: 0, y: 0, w: 3, h: 2 },
+    })).not.toThrow();
+  });
+
+  it('should accept widget with api action type', () => {
+    expect(() => DashboardWidgetSchema.parse({
+      id: 'api_widget',
+      type: 'metric',
+      actionType: 'api',
+      actionUrl: '/api/refresh',
+      layout: { x: 0, y: 0, w: 3, h: 2 },
+    })).not.toThrow();
+  });
+});

packages/spec/src/ui/page.test.ts

@@ -1221,3 +1221,67 @@ describe('RecordReviewConfigSchema - Negative Validation', () => {
     })).toThrow();
   });
 });
+
+// ============================================================================
+// Issue #5: PageSchema conditional validation (superRefine)
+// ============================================================================
+describe('PageSchema - conditional validation', () => {
+  it('should reject record_review page without recordReview config', () => {
+    expect(() => PageSchema.parse({
+      name: 'review_page',
+      label: 'Review',
+      type: 'record_review',
+      regions: [],
+    })).toThrow();
+  });
+
+  it('should accept record_review page with recordReview config', () => {
+    expect(() => PageSchema.parse({
+      name: 'review_page',
+      label: 'Review',
+      type: 'record_review',
+      regions: [],
+      recordReview: {
+        object: 'order',
+        actions: [{ label: 'Approve', type: 'approve' }],
+      },
+    })).not.toThrow();
+  });
+
+  it('should reject blank page without blankLayout config', () => {
+    expect(() => PageSchema.parse({
+      name: 'blank_page',
+      label: 'Blank',
+      type: 'blank',
+      regions: [],
+    })).toThrow();
+  });
+
+  it('should accept blank page with blankLayout config', () => {
+    expect(() => PageSchema.parse({
+      name: 'blank_page',
+      label: 'Blank',
+      type: 'blank',
+      regions: [],
+      blankLayout: { items: [] },
+    })).not.toThrow();
+  });
+
+  it('should not require recordReview for non-record_review types', () => {
+    expect(() => PageSchema.parse({
+      name: 'grid_page',
+      label: 'Grid',
+      type: 'grid',
+      regions: [],
+    })).not.toThrow();
+  });
+
+  it('should not require blankLayout for non-blank types', () => {
+    expect(() => PageSchema.parse({
+      name: 'dashboard_page',
+      label: 'Dashboard',
+      type: 'dashboard',
+      regions: [],
+    })).not.toThrow();
+  });
+});

packages/spec/src/ui/theme.test.ts

@@ -2,6 +2,9 @@ import { describe, it, expect } from 'vitest';
 import {
   ThemeSchema,
   ThemeMode,
+  ThemeModeSchema,
+  DensityModeSchema,
+  WcagContrastLevelSchema,
   ColorPaletteSchema,
   TypographySchema,
   SpacingSchema,
@@ -541,3 +544,66 @@ describe('Theme Density, WCAG, and RTL', () => {
     expect(theme.rtl).toBe(false);
   });
 });
+
+// ============================================================================
+// Issue #6: Easing naming unified to snake_case in theme animation tokens
+// ============================================================================
+describe('AnimationSchema - snake_case timing keys', () => {
+  it('should accept snake_case easing keys', () => {
+    const theme = ThemeSchema.parse({
+      name: 'snake_case_timing',
+      label: 'Snake Case Timing',
+      colors: { primary: '#000' },
+      animation: {
+        timing: {
+          linear: 'linear',
+          ease: 'ease',
+          ease_in: 'ease-in',
+          ease_out: 'ease-out',
+          ease_in_out: 'ease-in-out',
+        },
+      },
+    });
+    expect(theme.animation?.timing?.ease_in).toBe('ease-in');
+    expect(theme.animation?.timing?.ease_out).toBe('ease-out');
+    expect(theme.animation?.timing?.ease_in_out).toBe('ease-in-out');
+  });
+});
+
+// ============================================================================
+// Issue #9: ThemeModeSchema / DensityModeSchema / WcagContrastLevelSchema
+// ============================================================================
+describe('ThemeModeSchema (canonical name)', () => {
+  it('should accept valid theme modes', () => {
+    expect(() => ThemeModeSchema.parse('light')).not.toThrow();
+    expect(() => ThemeModeSchema.parse('dark')).not.toThrow();
+    expect(() => ThemeModeSchema.parse('auto')).not.toThrow();
+  });
+
+  it('should be the same as deprecated ThemeMode alias', () => {
+    expect(ThemeModeSchema).toBe(ThemeMode);
+  });
+});
+
+describe('DensityModeSchema (canonical name)', () => {
+  it('should accept valid density modes', () => {
+    expect(() => DensityModeSchema.parse('compact')).not.toThrow();
+    expect(() => DensityModeSchema.parse('regular')).not.toThrow();
+    expect(() => DensityModeSchema.parse('spacious')).not.toThrow();
+  });
+
+  it('should be the same as deprecated DensityMode alias', () => {
+    expect(DensityModeSchema).toBe(DensityMode);
+  });
+});
+
+describe('WcagContrastLevelSchema (canonical name)', () => {
+  it('should accept AA and AAA', () => {
+    expect(() => WcagContrastLevelSchema.parse('AA')).not.toThrow();
+    expect(() => WcagContrastLevelSchema.parse('AAA')).not.toThrow();
+  });
+
+  it('should be the same as deprecated WcagContrastLevel alias', () => {
+    expect(WcagContrastLevelSchema).toBe(WcagContrastLevel);
+  });
+});

packages/spec/src/ui/view.test.ts

@@ -2369,3 +2369,62 @@ describe('ListViewSchema filter field', () => {
     })).toThrow();
   });
 });
+
+// ============================================================================
+// Issue #7: ListView responsive and performance config
+// ============================================================================
+describe('ListViewSchema - responsive and performance', () => {
+  it('should accept list view with responsive config', () => {
+    const view = ListViewSchema.parse({
+      type: 'grid',
+      columns: ['name', 'status'],
+      responsive: {
+        hiddenOn: ['xs'],
+        columns: { xs: 12, md: 6, lg: 4 },
+      },
+    });
+    expect(view.responsive?.hiddenOn).toEqual(['xs']);
+    expect(view.responsive?.columns?.md).toBe(6);
+  });
+
+  it('should accept list view with performance config', () => {
+    const view = ListViewSchema.parse({
+      type: 'grid',
+      columns: ['name'],
+      performance: {
+        lazyLoad: true,
+        virtualScroll: { enabled: true, itemHeight: 40, overscan: 5 },
+        cacheStrategy: 'stale-while-revalidate',
+        prefetch: true,
+      },
+    });
+    expect(view.performance?.lazyLoad).toBe(true);
+    expect(view.performance?.virtualScroll?.enabled).toBe(true);
+    expect(view.performance?.cacheStrategy).toBe('stale-while-revalidate');
+  });
+
+  it('should accept list view without responsive/performance (optional)', () => {
+    const view = ListViewSchema.parse({
+      type: 'grid',
+      columns: ['name'],
+    });
+    expect(view.responsive).toBeUndefined();
+    expect(view.performance).toBeUndefined();
+  });
+});
+
+// ============================================================================
+// Issue #8: HttpMethodSchema/HttpRequestSchema re-exported from view.zod
+// ============================================================================
+describe('HttpMethodSchema/HttpRequestSchema backward compat', () => {
+  it('should still be importable from view.zod', () => {
+    expect(HttpMethodSchema).toBeDefined();
+    expect(HttpRequestSchema).toBeDefined();
+  });
+
+  it('should still parse correctly when imported from view.zod', () => {
+    expect(HttpMethodSchema.parse('GET')).toBe('GET');
+    const result = HttpRequestSchema.parse({ url: '/api/test' });
+    expect(result.method).toBe('GET');
+  });
+});