refactor(types): extract dashboard enum values to shared constants

Address code review feedback: extract DASHBOARD_COLOR_VARIANTS and
DASHBOARD_WIDGET_TYPES as shared constant arrays. Types are derived
via (typeof X)[number] and Zod schemas reference the constants directly,
ensuring a single source of truth.

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

Author: Copilot

ROADMAP.md

@@ -13,11 +13,11 @@
 
 ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind + Shadcn. It renders JSON metadata from the @objectstack/spec protocol into pixel-perfect, accessible, and interactive enterprise interfaces.
 
-**Where We Are:** Foundation is **solid and shipping** — 35 packages, 91+ components, 5,070+ tests, 78 Storybook stories, 42/42 builds passing, ~85% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Designer Phase 1, Console through Phase 19 (L3), and **AppShell Navigation Renderer** (P0.1) — all ✅ complete.
+**Where We Are:** Foundation is **solid and shipping** — 35 packages, 91+ components, 5,100+ tests, 78 Storybook stories, 42/42 builds passing, ~85% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Designer Phase 1 (ViewDesigner drag-to-reorder ✅), Console through Phase 20 (L3), and **AppShell Navigation Renderer** (P0.1) — all ✅ complete.
 
 **What Remains:** The gap to **Airtable-level UX** is primarily in:
 1. ~~**AppShell** — No dynamic navigation renderer from spec JSON (last P0 blocker)~~ ✅ Complete
-2. **Designer Interaction** — ViewDesigner and DataModelDesigner have undo/redo, field type selectors, inline editing, Ctrl+S save (column drag-to-reorder with dnd-kit pending)
+2. **Designer Interaction** — ViewDesigner and DataModelDesigner have undo/redo, field type selectors, inline editing, Ctrl+S save, column drag-to-reorder with dnd-kit ✅
 3. **Dashboard Config Panel** — Airtable-style right-side configuration panel for dashboards (data source, layout, widget properties, sub-editors, type definitions)
 4. **Console Advanced Polish** — Remaining upgrades for forms, import/export, automation, comments
 5. **PWA Sync** — Background sync is simulated only
@@ -47,7 +47,7 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 > Source: ROADMAP_DESIGNER Phase 2. These two designers are the core user workflow.
 
 **ViewDesigner:**
-- [ ] Column drag-to-reorder via `@dnd-kit/core` (replace up/down buttons with drag handles)
+- [x] Column drag-to-reorder via `@dnd-kit/core` (replace up/down buttons with drag handles)
 - [x] Add `Ctrl+S`/`Cmd+S` keyboard shortcut to save
 - [x] Add field type selector dropdown with icons from `DESIGNER_FIELD_TYPES`
 - [x] Column width validation (min/max/pattern check)
@@ -139,7 +139,7 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 > Airtable-style right-side configuration panel for dashboards. Phased rollout from shared infrastructure to full type-safe editing.
 
 **Phase 0 — Component Infrastructure:**
-- [ ] Extract `ConfigRow` / `SectionHeader` from `ViewConfigPanel` into `@object-ui/components` as reusable primitives
+- [x] Extract `ConfigRow` / `SectionHeader` from `ViewConfigPanel` into `@object-ui/components` as reusable primitives
 
 **Phase 1 — Dashboard-Level Config Panel:**
 - [ ] Develop `DashboardConfigPanel` supporting data source, layout (columns/gap), filtering, appearance, user filters & actions
@@ -156,8 +156,8 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [ ] Add Storybook stories for `DashboardConfigPanel` and `DashboardWithConfig`
 
 **Phase 5 — Type Definitions & Validation:**
-- [ ] Add `DashboardConfig` types to `@object-ui/types`
-- [ ] Add Zod schema validation for `DashboardConfig`
+- [x] Add `DashboardConfig` types to `@object-ui/types`
+- [x] Add Zod schema validation for `DashboardConfig`
 
 ### P1.9 Console — Content Area Layout & Responsiveness
 

packages/types/src/designer.ts

@@ -554,29 +554,21 @@ export interface UnifiedViewConfig {
 // Dashboard Configuration
 // ============================================================================
 
+/** All supported color variants for dashboard widgets */
+export const DASHBOARD_COLOR_VARIANTS = [
+  'default', 'blue', 'teal', 'orange', 'purple', 'success', 'warning', 'danger',
+] as const;
+
 /** Color variant for dashboard widgets */
-export type DashboardColorVariant =
-  | 'default'
-  | 'blue'
-  | 'teal'
-  | 'orange'
-  | 'purple'
-  | 'success'
-  | 'warning'
-  | 'danger';
+export type DashboardColorVariant = (typeof DASHBOARD_COLOR_VARIANTS)[number];
+
+/** All supported widget visualization types */
+export const DASHBOARD_WIDGET_TYPES = [
+  'metric', 'bar', 'line', 'pie', 'donut', 'area', 'scatter', 'table', 'list', 'custom',
+] as const;
 
 /** Widget visualization type */
-export type DashboardWidgetType =
-  | 'metric'
-  | 'bar'
-  | 'line'
-  | 'pie'
-  | 'donut'
-  | 'area'
-  | 'scatter'
-  | 'table'
-  | 'list'
-  | 'custom';
+export type DashboardWidgetType = (typeof DASHBOARD_WIDGET_TYPES)[number];
 
 /** Layout position for a single dashboard widget */
 export interface DashboardWidgetConfig {

packages/types/src/index.ts

@@ -550,6 +550,11 @@ export type {
   DashboardConfig,
 } from './designer';
 
+export {
+  DASHBOARD_COLOR_VARIANTS,
+  DASHBOARD_WIDGET_TYPES,
+} from './designer';
+
 // ============================================================================
 // API and Events - API Integration and Event Handling
 // ============================================================================

packages/types/src/zod/complex.zod.ts

@@ -18,6 +18,7 @@
 
 import { z } from 'zod';
 import { BaseSchema, SchemaNodeSchema } from './base.zod.js';
+import { DASHBOARD_COLOR_VARIANTS, DASHBOARD_WIDGET_TYPES } from '../designer.js';
 
 /**
  * Kanban Card Schema
@@ -258,14 +259,14 @@ export const DashboardWidgetConfigSchema = z.object({
   id: z.string().describe('Widget ID'),
   title: z.string().optional().describe('Widget title'),
   description: z.string().optional().describe('Widget description'),
-  type: z.enum(['metric', 'bar', 'line', 'pie', 'donut', 'area', 'scatter', 'table', 'list', 'custom']).optional().describe('Widget visualization type'),
+  type: z.enum(DASHBOARD_WIDGET_TYPES).optional().describe('Widget visualization type'),
   object: z.string().optional().describe('Data source object name'),
   filter: z.array(z.any()).optional().describe('Widget filter conditions'),
   categoryField: z.string().optional().describe('Category/x-axis field'),
   valueField: z.string().optional().describe('Value/y-axis field'),
   aggregate: z.string().optional().describe('Aggregation function'),
   chartConfig: z.any().optional().describe('Chart configuration'),
-  colorVariant: z.enum(['default', 'blue', 'teal', 'orange', 'purple', 'success', 'warning', 'danger']).optional().describe('Color variant'),
+  colorVariant: z.enum(DASHBOARD_COLOR_VARIANTS).optional().describe('Color variant'),
   layout: DashboardWidgetLayoutSchema.optional().describe('Widget grid layout'),
   actionUrl: z.string().optional().describe('Clickable action URL'),
 });