fix: adapt examples to v3.0.10 protocol (widget id + ViewFilterRule format)

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

Author: Copilot

ROADMAP.md

@@ -1,9 +1,9 @@
 # ObjectUI Development Roadmap
 
-> **Last Updated:** February 24, 2026
+> **Last Updated:** February 25, 2026
 > **Current Version:** v0.5.x
-> **Spec Version:** @objectstack/spec v3.0.9
-> **Client Version:** @objectstack/client v3.0.9
+> **Spec Version:** @objectstack/spec v3.0.10
+> **Client Version:** @objectstack/client v3.0.10
 > **Target UX Benchmark:** 🎯 Airtable parity
 > **Current Priority:** AppShell Navigation · Designer Interaction · View Config Live Preview Sync · Dashboard Config Panel · Airtable UX Polish · **Flow Designer ✅** · **App Creation & Editing Flow ✅** · **System Settings & App Management ✅** · **Right-Side Visual Editor Drawer ✅**
 
@@ -49,6 +49,28 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 
 ---
 
+## 🔄 Spec v3.0.10 Upgrade Summary
+
+> Upgraded from `@objectstack/spec v3.0.9` → `v3.0.10` on February 25, 2026. UI sub-export adds new Zod schemas and `ViewFilterRule` type. Dashboard widgets now require `id` field. View filters must use object format.
+
+**New Protocol Capabilities (v3.0.10):**
+
+| Area | What's New | Impact on ObjectUI |
+|------|------------|-------------------|
+| **UI Schemas** | `DensityModeSchema`, `ThemeModeSchema`, `WcagContrastLevelSchema` Zod schemas | Re-exported from `@object-ui/types` for runtime validation |
+| **View Filter Rules** | `ViewFilterRule`, `ViewFilterRuleSchema` — structured filter format `{ field, operator, value }` | All view filters migrated from tuple `['field', '=', 'value']` to object format |
+| **Dashboard Widgets** | `id` field now required on `DashboardWidgetSchema` | All example dashboard widgets updated with explicit `id` |
+| **Filter AST** | `isFilterAST`, `parseFilterAST`, `VALID_AST_OPERATORS` in data sub-export | Filter engine utilities (P2.4) |
+| **Multi-Tenant** | `TursoMultiTenantConfig`, `TenantResolverStrategy`, `TenantDatabaseLifecycle` | Cloud multi-tenancy (P2.4) |
+| **Contracts** | `IAppLifecycleService`, `IDeployPipelineService`, `IProvisioningService`, `ITenantRouter`, `ISchemaDiffService` | Cloud deployment & lifecycle (P2.4) |
+
+**Breaking Changes Applied:**
+- All CRM view filters converted from `['field', '=', 'value']` to `[{ field, operator: '=', value }]`
+- All dashboard widgets (kitchen-sink, todo, CRM) given explicit `id` fields
+- Todo active filter converted from `[['status', '!=', 'Done']]` to `[{ field: 'status', operator: '!=', value: 'Done' }]`
+
+---
+
 ## 🎯 P0 — Must Ship (v1.0 Blockers)
 
 ### P0.1 AppShell & Navigation Renderer

examples/crm/src/dashboards/crm.dashboard.ts

@@ -5,6 +5,7 @@ export const CrmDashboard = {
   widgets: [
     // --- KPI Row ---
     {
+      id: 'total_revenue',
       title: 'Total Revenue',
       type: 'metric' as const,
       object: 'opportunity',
@@ -17,6 +18,7 @@ export const CrmDashboard = {
       }
     },
     {
+      id: 'active_deals',
       title: 'Active Deals',
       type: 'metric' as const,
       object: 'opportunity',
@@ -29,6 +31,7 @@ export const CrmDashboard = {
       }
     },
     {
+      id: 'win_rate',
       title: 'Win Rate',
       type: 'metric' as const,
       object: 'opportunity',
@@ -41,6 +44,7 @@ export const CrmDashboard = {
       }
     },
     {
+      id: 'avg_deal_size',
       title: 'Avg Deal Size',
       type: 'metric' as const,
       object: 'opportunity',
@@ -55,6 +59,7 @@ export const CrmDashboard = {
 
     // --- Row 2: Charts (provider: 'object' — dynamic aggregation) ---
     {
+        id: 'revenue_trends',
         title: 'Revenue Trends',
         type: 'area' as const,
         object: 'opportunity',
@@ -73,6 +78,7 @@ export const CrmDashboard = {
         },
     },
     {
+        id: 'lead_source',
         title: 'Lead Source',
         type: 'donut' as const,
         object: 'opportunity',
@@ -93,6 +99,7 @@ export const CrmDashboard = {
 
     // --- Row 3: More Charts (provider: 'object' — dynamic aggregation) ---
     {
+        id: 'pipeline_by_stage',
         title: 'Pipeline by Stage',
         type: 'bar' as const,
         object: 'opportunity',
@@ -111,6 +118,7 @@ export const CrmDashboard = {
         },
     },
     {
+        id: 'top_products',
         title: 'Top Products',
         type: 'bar' as const,
         object: 'product',
@@ -131,6 +139,7 @@ export const CrmDashboard = {
 
     // --- Row 4: Table (provider: 'object' — dynamic data) ---
     {
+        id: 'recent_opportunities',
         title: 'Recent Opportunities',
         type: 'table' as const,
         object: 'opportunity',
@@ -151,6 +160,7 @@ export const CrmDashboard = {
 
     // --- Row 5: Dynamic KPI from Object Data ---
     {
+        id: 'revenue_by_account',
         title: 'Revenue by Account',
         type: 'bar' as const,
         object: 'opportunity',
@@ -171,6 +181,7 @@ export const CrmDashboard = {
 
     // --- Row 6: Additional aggregate functions (avg, max) + cross-object ---
     {
+        id: 'avg_deal_by_stage',
         title: 'Avg Deal Size by Stage',
         type: 'line' as const,
         object: 'opportunity',
@@ -189,6 +200,7 @@ export const CrmDashboard = {
         },
     },
     {
+        id: 'orders_by_status',
         title: 'Orders by Status',
         type: 'bar' as const,
         object: 'order',

examples/crm/src/views/account.view.ts

@@ -14,7 +14,7 @@ export const AccountView = {
       type: 'grid' as const,
       data: { provider: 'object' as const, object: 'account' },
       columns: ['name', 'industry', 'annual_revenue', 'phone', 'owner'],
-      filter: ['type', '=', 'Customer'],
+      filter: [{ field: 'type', operator: '=', value: 'Customer' }],
       sort: [{ field: 'annual_revenue', order: 'desc' as const }],
     },
   },

examples/crm/src/views/contact.view.ts

@@ -14,7 +14,7 @@ export const ContactView = {
       type: 'grid' as const,
       data: { provider: 'object' as const, object: 'contact' },
       columns: ['name', 'email', 'title', 'account', 'status'],
-      filter: ['is_active', '=', true],
+      filter: [{ field: 'is_active', operator: '=', value: true }],
     },
   },
   form: {

examples/crm/src/views/event.view.ts

@@ -26,7 +26,7 @@ export const EventView = {
       type: 'grid' as const,
       data: { provider: 'object' as const, object: 'event' },
       columns: ['subject', 'start', 'location', 'organizer'],
-      filter: ['type', '=', 'meeting'],
+      filter: [{ field: 'type', operator: '=', value: 'meeting' }],
       sort: [{ field: 'start', order: 'asc' as const }],
     },
   },

examples/crm/src/views/order.view.ts

@@ -14,7 +14,7 @@ export const OrderView = {
       type: 'grid' as const,
       data: { provider: 'object' as const, object: 'order' },
       columns: ['name', 'customer', 'amount', 'order_date'],
-      filter: ['status', '=', 'pending'],
+      filter: [{ field: 'status', operator: '=', value: 'pending' }],
     },
   },
   form: {

examples/crm/src/views/product.view.ts

@@ -39,7 +39,7 @@ export const ProductView = {
         { field: 'stock', label: 'STOCK', type: 'number' as const, width: 80, align: 'right' as const },
         { field: 'tags', label: 'TAGS', type: 'select' as const, width: 130 },
       ],
-      filter: ['is_active', '=', true],
+      filter: [{ field: 'is_active', operator: '=', value: true }],
       rowHeight: 'short' as const,
     },
   },

examples/crm/src/views/user.view.ts

@@ -14,7 +14,7 @@ export const UserView = {
       type: 'grid' as const,
       data: { provider: 'object' as const, object: 'user' },
       columns: ['name', 'email', 'role', 'title'],
-      filter: ['active', '=', true],
+      filter: [{ field: 'active', operator: '=', value: true }],
     },
   },
   form: {

examples/kitchen-sink/objectstack.config.ts

@@ -110,6 +110,7 @@ export default defineStack({
       widgets: [
         // --- KPI Row ---
         {
+          id: 'total_records',
           title: 'Total Records',
           type: 'metric',
           object: 'kitchen_sink',
@@ -121,6 +122,7 @@ export default defineStack({
           },
         },
         {
+          id: 'active_items',
           title: 'Active Items',
           type: 'metric',
           object: 'kitchen_sink',
@@ -133,6 +135,7 @@ export default defineStack({
           },
         },
         {
+          id: 'total_value',
           title: 'Total Value',
           type: 'metric',
           object: 'kitchen_sink',
@@ -145,6 +148,7 @@ export default defineStack({
           },
         },
         {
+          id: 'avg_rating',
           title: 'Avg Rating',
           type: 'metric',
           object: 'kitchen_sink',
@@ -159,6 +163,7 @@ export default defineStack({
 
         // --- Charts Row ---
         {
+          id: 'records_by_category',
           title: 'Records by Category',
           type: 'donut',
           object: 'kitchen_sink',
@@ -180,6 +185,7 @@ export default defineStack({
           },
         },
         {
+          id: 'value_distribution',
           title: 'Value Distribution',
           type: 'bar',
           object: 'kitchen_sink',
@@ -205,6 +211,7 @@ export default defineStack({
 
         // --- Trend Row ---
         {
+          id: 'monthly_trend',
           title: 'Monthly Trend',
           type: 'area',
           object: 'kitchen_sink',

examples/todo/objectstack.config.ts

@@ -49,7 +49,7 @@ export default defineStack({
           type: 'grid',
           data: { provider: 'object', object: 'todo_task' },
           columns: ['subject', 'status', 'priority', 'assignee', 'due_date'],
-          filter: [['status', '!=', 'Done']],
+          filter: [{ field: 'status', operator: '!=', value: 'Done' }],
           sort: [{ field: 'priority', order: 'asc' }],
         },
       },
@@ -112,6 +112,7 @@ export default defineStack({
       description: 'Task metrics, status distribution, and category breakdown',
       widgets: [
         {
+          id: 'total_tasks',
           title: 'Total Tasks',
           type: 'metric',
           object: 'todo_task',
@@ -123,6 +124,7 @@ export default defineStack({
           },
         },
         {
+          id: 'in_progress',
           title: 'In Progress',
           type: 'metric',
           object: 'todo_task',
@@ -135,6 +137,7 @@ export default defineStack({
           },
         },
         {
+          id: 'completed',
           title: 'Completed',
           type: 'metric',
           object: 'todo_task',
@@ -147,6 +150,7 @@ export default defineStack({
           },
         },
         {
+          id: 'overdue',
           title: 'Overdue',
           type: 'metric',
           object: 'todo_task',
@@ -159,6 +163,7 @@ export default defineStack({
           },
         },
         {
+          id: 'tasks_by_status',
           title: 'Tasks by Status',
           type: 'donut',
           object: 'todo_task',
@@ -182,6 +187,7 @@ export default defineStack({
           },
         },
         {
+          id: 'tasks_by_category',
           title: 'Tasks by Category',
           type: 'bar',
           object: 'todo_task',