Add comprehensive UI examples to app-crm: FormView, PageSchema, and component composition

examples/app-crm/README.md

@@ -50,6 +50,8 @@ Follows the **by-type** directory layout — the ObjectStack standard aligned wi
 ```
 src/
 ├── objects/          # 📦 10 Core Objects (account, contact, lead, opportunity, ...)
+├── views/            # 👁️ UI Views (FormView & ListView configurations for all objects)
+├── pages/            # 📄 Pages (Record, Home, App, Utility page layouts)
 ├── actions/          # ⚡ Custom Actions (lead, contact, opportunity, case, global)
 ├── apis/             # 🌐 REST Endpoints (pipeline-stats, lead-convert)
 ├── apps/             # 🚀 App Configuration (crm.app.ts)
@@ -71,6 +73,24 @@ Comprehensive guides covering all aspects:
 3. **[Security](./docs/05-security.md)** - Profiles, roles, sharing, permissions
 4. **[AI Capabilities](./docs/08-ai-capabilities.md)** - Agents, RAG, NLQ, ML
 
+### 🎨 UI Examples
+
+The CRM includes comprehensive UI examples demonstrating all form layouts and page types:
+
+#### FormView Examples (`src/views/`)
+- **6 Form Layout Types**: Simple, Tabbed, Wizard, Split, Drawer, Modal
+- **Advanced Features**: Collapsible sections, 1-4 column layouts, conditional visibility, cascading dependencies
+- **5 List View Types**: Grid, Kanban, Calendar, Gallery, filtered views
+- **Field Controls**: readonly, required, hidden, colSpan, visibleOn, dependsOn, custom widgets
+
+#### PageSchema Examples (`src/pages/`)
+- **Record Page**: Comprehensive detail page with highlights, tabs, accordion, related lists, AI chat
+- **Home Page**: Dashboard-style with KPIs and quick actions
+- **App Page**: Application launcher grid
+- **Utility Page**: Floating utility panels
+
+See `src/views/lead.view.ts` and `src/pages/` for complete implementations.
+
 ### 🚀 Quick Start
 
 ```bash
@@ -96,6 +116,8 @@ pnpm --filter @example/app-crm dev
 |----------|-------|----------|
 | **Objects** | 10 | Account, Opportunity, Case, Product |
 | **Fields** | 100+ | AutoNumber, Formula, Lookup, Address |
+| **Views** | 12+ | Grid, Kanban, Calendar, Gallery, Forms (Simple, Tabbed, Wizard, Split, Drawer, Modal) |
+| **Pages** | 4 | Record Detail, Home, App Launcher, Utility Bar |
 | **Profiles** | 5 | Admin, Sales Manager, Sales Rep |
 | **Sharing Rules** | 5+ | Criteria-based, Territory-based |
 | **AI Agents** | 5 | Sales Assistant, Service Agent |

examples/app-crm/src/pages/app_launcher.page.ts

@@ -0,0 +1,70 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import { Page } from '@objectstack/spec/ui';
+
+/**
+ * App Launcher Page
+ * 
+ * Demonstrates an application launcher page similar to Salesforce App Launcher.
+ * 
+ * Features:
+ * - Grid-based app icon layout
+ * - Global search
+ * - Quick access to all apps
+ */
+export const AppLauncherPage: Page = {
+  name: 'app_launcher_page',
+  label: 'App Launcher',
+  description: 'Central hub for accessing all applications',
+
+  type: 'app',
+
+  template: 'centered',
+
+  regions: [
+    {
+      name: 'header',
+      width: 'full',
+      components: [
+        {
+          type: 'global:search',
+          id: 'app_search',
+          label: 'Search Apps',
+          properties: {},
+        },
+      ],
+    },
+
+    {
+      name: 'main',
+      width: 'large',
+      components: [
+        {
+          type: 'page:header',
+          id: 'launcher_header',
+          label: 'App Launcher Header',
+          properties: {
+            title: 'App Launcher',
+            subtitle: 'Select an app to get started',
+            icon: 'th',
+            breadcrumb: false,
+          },
+        },
+        {
+          type: 'app:launcher',
+          id: 'app_grid',
+          label: 'Application Grid',
+          properties: {},
+        },
+      ],
+    },
+  ],
+
+  isDefault: false,
+  assignedProfiles: ['sales_user', 'sales_manager', 'service_user', 'system_administrator'],
+
+  aria: {
+    label: 'App Launcher Page',
+    description: 'Central application launcher for accessing all apps',
+  },
+};

examples/app-crm/src/pages/home.page.ts

@@ -0,0 +1,189 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import { Page } from '@objectstack/spec/ui';
+
+/**
+ * Sales Home Page
+ * 
+ * Demonstrates a home page layout with dashboards and quick access widgets.
+ * Similar to Salesforce Lightning Home Page.
+ * 
+ * Features:
+ * - Dashboard-style layout
+ * - Multiple component regions
+ * - Global search and notifications
+ * - Quick action cards
+ */
+export const SalesHomePage: Page = {
+  name: 'sales_home_page',
+  label: 'Sales Home',
+  description: 'Sales team home page with key metrics and quick actions',
+
+  type: 'home',
+
+  template: 'three-column',
+
+  variables: [
+    {
+      name: 'selectedPeriod',
+      type: 'string',
+      defaultValue: 'this_month',
+    },
+  ],
+
+  regions: [
+    {
+      name: 'header',
+      width: 'full',
+      components: [
+        {
+          type: 'page:header',
+          id: 'home_header',
+          label: 'Sales Home Header',
+          properties: {
+            title: 'Sales Dashboard',
+            subtitle: 'Welcome back, {current_user.first_name}',
+            icon: 'home',
+            breadcrumb: false,
+          },
+        },
+      ],
+    },
+
+    {
+      name: 'left_sidebar',
+      width: 'small',
+      components: [
+        {
+          type: 'page:card',
+          id: 'quick_create',
+          label: 'Quick Create',
+          properties: {
+            title: 'Quick Create',
+            bordered: true,
+            body: [
+              {
+                type: 'nav:menu',
+                id: 'create_menu',
+                properties: {},
+              },
+            ],
+          },
+        },
+        {
+          type: 'page:card',
+          id: 'my_recent_items',
+          label: 'Recent Items',
+          properties: {
+            title: 'Recent Items',
+            bordered: true,
+          },
+        },
+      ],
+    },
+
+    {
+      name: 'main',
+      width: 'large',
+      components: [
+        {
+          type: 'page:card',
+          id: 'key_metrics',
+          label: 'Key Metrics',
+          properties: {
+            title: 'Key Performance Indicators',
+            bordered: false,
+            body: [
+              {
+                type: 'record:highlights',
+                id: 'kpi_highlights',
+                properties: {
+                  fields: ['total_revenue', 'deals_won', 'pipeline_value', 'conversion_rate'],
+                  layout: 'horizontal',
+                },
+              },
+            ],
+          },
+        },
+        {
+          type: 'page:tabs',
+          id: 'home_tabs',
+          label: 'Home Tabs',
+          properties: {
+            type: 'card',
+            position: 'top',
+            items: [
+              {
+                label: 'My Leads',
+                icon: 'user-plus',
+                children: [
+                  {
+                    type: 'page:section',
+                    properties: {},
+                  },
+                ],
+              },
+              {
+                label: 'My Opportunities',
+                icon: 'dollar-sign',
+                children: [
+                  {
+                    type: 'page:section',
+                    properties: {},
+                  },
+                ],
+              },
+              {
+                label: 'My Tasks',
+                icon: 'tasks',
+                children: [
+                  {
+                    type: 'page:section',
+                    properties: {},
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+
+    {
+      name: 'right_sidebar',
+      width: 'medium',
+      components: [
+        {
+          type: 'ai:chat_window',
+          id: 'sales_assistant',
+          label: 'Sales Assistant',
+          properties: {
+            mode: 'sidebar',
+            agentId: 'sales_assistant',
+            context: {
+              page: 'home',
+              user: '{current_user.id}',
+            },
+          },
+        },
+        {
+          type: 'page:card',
+          id: 'upcoming_events',
+          label: 'Calendar',
+          properties: {
+            title: "Today's Schedule",
+            bordered: true,
+          },
+        },
+      ],
+    },
+  ],
+
+  isDefault: true,
+  assignedProfiles: ['sales_user', 'sales_manager'],
+
+  aria: {
+    label: 'Sales Home Page',
+    description: 'Sales team home page with metrics, leads, and quick actions',
+  },
+};

examples/app-crm/src/pages/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+export { LeadDetailPage } from './lead_detail.page';
+export { SalesHomePage } from './home.page';
+export { AppLauncherPage } from './app_launcher.page';
+export { UtilityBarPage } from './utility_bar.page';